From 4d8183e98bb8881900de3f2c63ec8ac931426111 Mon Sep 17 00:00:00 2001
From: Dmytro <dmitry.tkk@gmail.com>
Date: Thu, 22 Aug 2024 19:26:08 +0100
Subject: [PATCH] Add ETH to Tokens tab, fix connect to chain

---
 src/App.scss                          |  2 +-
 src/components/SchainDetails.tsx      | 14 ++++---
 src/components/chains/tabs/Tokens.tsx | 59 +++++++++++++++------------
 src/pages/Chains.tsx                  |  1 +
 4 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 1e2baa3..6ba73f2 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -429,7 +429,7 @@ body::-webkit-scrollbar {
 }
 
 .btnPadd {
-  width: inherit !important;
+  width: inherit;
   padding-left: 8px !important;
   padding-right: 8px !important;
 }
diff --git a/src/components/SchainDetails.tsx b/src/components/SchainDetails.tsx
index fde9a63..d17227a 100644
--- a/src/components/SchainDetails.tsx
+++ b/src/components/SchainDetails.tsx
@@ -94,7 +94,8 @@ export default function SchainDetails(props: {
       name: 'sFUEL',
       symbol: 'sFUEL',
       decimals: 18
-    }
+    },
+    blockExplorerUrls: [explorerUrl]
   }
 
   async function addNetwork() {
@@ -225,10 +226,13 @@ export default function SchainDetails(props: {
                 <SkBtn
                   startIcon={added ? <CheckCircleRoundedIcon /> : <AddCircleRoundedIcon />}
                   size="md"
-                  className={cls(styles.btnAction, cmn.mri10, 'btnPadd', [
-                    'btnPaddLoading',
-                    loading
-                  ])}
+                  className={cls(
+                    styles.btnAction,
+                    cmn.mri10,
+                    'btnPadd',
+                    ['btnPaddLoading', loading],
+                    [cmn.fullWidth, props.isXs]
+                  )}
                   onClick={addNetwork}
                   disabled={loading}
                   text={connectBtnText()}
diff --git a/src/components/chains/tabs/Tokens.tsx b/src/components/chains/tabs/Tokens.tsx
index d98b039..ba5d4aa 100644
--- a/src/components/chains/tabs/Tokens.tsx
+++ b/src/components/chains/tabs/Tokens.tsx
@@ -22,9 +22,7 @@
  */
 
 import { cmn, cls, styles, type MetaportCore, interfaces, SkPaper } from '@skalenetwork/metaport'
-
 import Grid from '@mui/material/Grid'
-
 import CopySurface from '../../CopySurface'
 
 export default function Tokens(props: {
@@ -34,40 +32,47 @@ export default function Tokens(props: {
 }) {
   const tokenConnections = props.mpc.config.connections[props.schainName] ?? {}
   const chainTokens = tokenConnections.erc20 ?? {}
+  const ethToken = tokenConnections.eth ?? {}
 
   function findWrapperAddress(token: interfaces.Token): `0x${string}` | null | undefined {
+    if (!token || !token.chains) return null
     const chainWithWrapper = Object.values(token.chains).find((chain) => chain.wrapper)
     return chainWithWrapper ? chainWithWrapper.wrapper : null
   }
 
+  const renderTokens = (tokens: any) => {
+    return Object.entries(tokens).flatMap(([tokenSymbol, tokenData]: [string, any]) => {
+      const wrapperAddress = findWrapperAddress(tokenData)
+      return [
+        <Grid key={`${tokenSymbol}`} item lg={3} md={4} sm={6} xs={12}>
+          <CopySurface
+            className={cls(styles.fullHeight)}
+            title={`${tokenSymbol.toUpperCase()}`}
+            value={tokenData.address}
+            tokenMetadata={props.mpc.config.tokens[tokenSymbol]}
+          />
+        </Grid>,
+        ...(wrapperAddress
+          ? [
+              <Grid key={`w${tokenSymbol}`} item lg={3} md={4} sm={6} xs={12}>
+                <CopySurface
+                  className={cls(styles.fullHeight)}
+                  title={`w${tokenSymbol.toUpperCase()}`}
+                  value={wrapperAddress}
+                  tokenMetadata={props.mpc.config.tokens[tokenSymbol]}
+                />
+              </Grid>
+            ]
+          : [])
+      ]
+    })
+  }
+
   return (
     <SkPaper gray className={cls(cmn.mtop20)}>
       <Grid container spacing={2}>
-        {Object.keys(chainTokens).flatMap((tokenSymbol: string) => {
-          const wrapperAddress = findWrapperAddress(chainTokens[tokenSymbol])
-          return [
-            <Grid key={tokenSymbol} item lg={3} md={4} sm={6} xs={12}>
-              <CopySurface
-                className={cls(styles.fullHeight)}
-                title={tokenSymbol.toUpperCase()}
-                value={chainTokens[tokenSymbol].address as string}
-                tokenMetadata={props.mpc.config.tokens[tokenSymbol]}
-              />
-            </Grid>,
-            ...(wrapperAddress
-              ? [
-                  <Grid key={`w${tokenSymbol}`} item lg={3} md={4} sm={6} xs={12}>
-                    <CopySurface
-                      className={cls(styles.fullHeight)}
-                      title={`w${tokenSymbol.toUpperCase()}`}
-                      value={wrapperAddress}
-                      tokenMetadata={props.mpc.config.tokens[tokenSymbol]}
-                    />
-                  </Grid>
-                ]
-              : [])
-          ]
-        })}
+        {renderTokens(ethToken)}
+        {renderTokens(chainTokens)}
       </Grid>
     </SkPaper>
   )
diff --git a/src/pages/Chains.tsx b/src/pages/Chains.tsx
index 656030c..5d2ef63 100644
--- a/src/pages/Chains.tsx
+++ b/src/pages/Chains.tsx
@@ -135,6 +135,7 @@ export default function Chains(props: {
             icon={<CategoryRoundedIcon color="primary" />}
           />
         )}
+        <div className={cls(cmn.mbott20, cmn.mtop20)}></div>
       </Stack>
     </Container>
   )