feat: add chain indicator

safe-global · Jul 6, 2023 · 4005c67 · 4005c67
1 parent 58291de
commit 4005c67
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
   }