From 4005c671274c22e500b977828d6fbed161db4241 Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Thu, 6 Jul 2023 15:05:25 +0200
Subject: [PATCH] feat: add chain indicator

---
 src/components/tx-flow/common/TxLayout/index.tsx | 13 +++++++++----
 .../tx-flow/common/TxLayout/styles.module.css    | 16 ++++++++++++++--
 src/components/tx-flow/flows/NewTx/index.tsx     |  5 ++++-
 .../tx-flow/flows/NewTx/styles.module.css        | 14 +++++++++++++-
 4 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/components/tx-flow/common/TxLayout/index.tsx b/src/components/tx-flow/common/TxLayout/index.tsx
index 1d4f65623c..a7bf19f0dd 100644
--- a/src/components/tx-flow/common/TxLayout/index.tsx
+++ b/src/components/tx-flow/common/TxLayout/index.tsx
@@ -13,6 +13,7 @@ import { TxSimulationMessage } from '@/components/tx/security/tenderly'
 import SafeLogo from '@/public/images/logo-no-text.svg'
 import { RedefineMessage } from '@/components/tx/security/redefine'
 import { TxSecurityProvider } from '@/components/tx/security/shared/TxSecurityContext'
+import ChainIndicator from '@/components/common/ChainIndicator'
 
 type TxLayoutProps = {
   title: ReactNode
@@ -59,10 +60,14 @@ const TxLayout = ({
         <TxSecurityProvider>
           <Container className={css.container}>
             <Grid container alignItems="center" justifyContent="center">
-              <Grid item xs={12}>
-                <Typography variant="h3" component="div" fontWeight="700" mb={2} className={css.title}>
-                  {title}
-                </Typography>
+              <Grid item container xs={12}>
+                <Grid item xs={12} md={7} className={css.titleWrapper}>
+                  <Typography variant="h3" component="div" fontWeight="700" className={css.title}>
+                    {title}
+                  </Typography>
+
+                  <ChainIndicator inline />
+                </Grid>
                 <IconButton
                   className={css.statusButton}
                   aria-label="Transaction status"
diff --git a/src/components/tx-flow/common/TxLayout/styles.module.css b/src/components/tx-flow/common/TxLayout/styles.module.css
index 07f3c62a9b..ae374c8457 100644
--- a/src/components/tx-flow/common/TxLayout/styles.module.css
+++ b/src/components/tx-flow/common/TxLayout/styles.module.css
@@ -91,6 +91,13 @@
   margin-top: var(--space-2);
 }
 
+.titleWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-2);
+}
+
 @media (max-width: 899.95px) {
   .widget {
     position: absolute;
@@ -109,11 +116,16 @@
     height: 100%;
   }
 
-  .title {
-    font-size: 16px;
+  .titleWrapper {
     position: absolute;
     top: 12px;
     left: var(--space-3);
+    margin-bottom: 0;
+    width: calc(100% - 154px);
+  }
+
+  .title {
+    font-size: 16px;
   }
 
   .container {
diff --git a/src/components/tx-flow/flows/NewTx/index.tsx b/src/components/tx-flow/flows/NewTx/index.tsx
index db458226d5..f7a5ad3324 100644
--- a/src/components/tx-flow/flows/NewTx/index.tsx
+++ b/src/components/tx-flow/flows/NewTx/index.tsx
@@ -7,6 +7,7 @@ import AssetsIcon from '@/public/images/sidebar/assets.svg'
 import LoadingSpinner, { SpinnerStatus } from '@/components/new-safe/create/steps/StatusStep/LoadingSpinner'
 import { useTxBuilderApp } from '@/hooks/safe-apps/useTxBuilderApp'
 import { ProgressBar } from '@/components/common/ProgressBar'
+import ChainIndicator from '@/components/common/ChainIndicator'
 
 import css from './styles.module.css'
 
@@ -26,7 +27,9 @@ const NewTxMenu = () => {
     <Container className={css.container}>
       <Grid container>
         {/* Alignment of `TxLayout` */}
-        <Grid item xs={12} md={11}>
+        <Grid item xs={12} md={11} display="flex" flexDirection="column">
+          <ChainIndicator inline className={css.chain} />
+
           <Grid container component={Paper}>
             <Grid item xs={12} className={css.progressBar}>
               <ProgressBar value={progress} />
diff --git a/src/components/tx-flow/flows/NewTx/styles.module.css b/src/components/tx-flow/flows/NewTx/styles.module.css
index 660f48ff54..09b83f0fec 100644
--- a/src/components/tx-flow/flows/NewTx/styles.module.css
+++ b/src/components/tx-flow/flows/NewTx/styles.module.css
@@ -1,5 +1,10 @@
 .container {
-  margin-top: 110px;
+  margin-top: 72px;
+}
+
+.chain {
+  align-self: flex-end;
+  margin-bottom: var(--space-2);
 }
 
 .pane {
@@ -37,6 +42,13 @@
     border-radius: unset;
   }
 
+  .chain {
+    position: absolute;
+    top: 0;
+    right: 57px;
+    margin: var(--space-2);
+  }
+
   .progressBar {
     display: none;
   }