Merge pull request #969 from AMIRKHANEF/FixDisplayinDerivedAccounts

Fix displaying derived accounts
PolkaGate · Feb 22, 2024 · 88c53e0 · 88c53e0
2 parents af737d3 + 6af2f2c
commit 88c53e0
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 58 deletions.
diff --git a/packages/extension-polkagate/src/popup/homeFullScreen/index.tsx b/packages/extension-polkagate/src/popup/homeFullScreen/index.tsx
@@ -39,42 +39,13 @@ export default function HomePageFullScreen(): React.ReactElement {
       <Grid container item justifyContent='space-around' sx={{ bgcolor: contentBgColor, height: 'calc(100vh - 70px)', maxWidth: '1282px', overflow: 'scroll', py: '40px' }}>
         <Grid container direction='column' item rowGap='20px' width='fit-content'>
           {hierarchy.map((account, index) => (
-            <>
-              <AccountItem
-                account={account}
-                hideNumbers={hideNumbers}
-                key={index}
-                quickActionOpen={quickActionOpen}
-                setQuickActionOpen={setQuickActionOpen}
-              />
-              {account.children && account.children.length > 0 &&
-                account.children.map((child, childIndex) => (
-                  <>
-                    <AccountItem
-                      account={child}
-                      hideNumbers={hideNumbers}
-                      parentName={account.name}
-                      isChild
-                      key={childIndex}
-                      quickActionOpen={quickActionOpen}
-                      setQuickActionOpen={setQuickActionOpen}
-                    />
-                    {child.children && child.children.length > 0 &&
-                      child.children.map((grandChild, childIndex) => (
-                        <AccountItem
-                          account={grandChild}
-                          hideNumbers={hideNumbers}
-                          isChild
-                          key={childIndex}
-                          quickActionOpen={quickActionOpen}
-                          setQuickActionOpen={setQuickActionOpen}
-                        />
-                      ))
-                    }
-                  </>
-                ))
-              }
-            </>
+            <AccountItem
+              account={account}
+              hideNumbers={hideNumbers}
+              key={index}
+              quickActionOpen={quickActionOpen}
+              setQuickActionOpen={setQuickActionOpen}
+            />
           ))}
         </Grid>
         <Grid container item width='fit-content'>

diff --git a/packages/extension-polkagate/src/popup/homeFullScreen/partials/AccountItem.tsx b/packages/extension-polkagate/src/popup/homeFullScreen/partials/AccountItem.tsx
@@ -49,29 +49,42 @@ function AccountItem({ account, hideNumbers, isChild, parentName, quickActionOpe
   }, [account, parentName, t]);
 
   return (
-    <Grid container item ref={containerRef} sx={{ borderRadius: '5px', boxShadow: '2px 3px 4px 0px rgba(0, 0, 0, 0.1)', overflow: 'hidden', position: 'relative' }} width='760px'>
-      <Grid item sx={{ bgcolor: theme.palette.nay.main, color: 'white', fontSize: '10px', ml: 5, position: 'absolute', px: 1, width: 'fit-content' }}>
-        {label}
+    <>
+      <Grid container item ref={containerRef} sx={{ borderRadius: '5px', boxShadow: '2px 3px 4px 0px rgba(0, 0, 0, 0.1)', overflow: 'hidden', position: 'relative' }} width='760px'>
+        <Grid item sx={{ bgcolor: theme.palette.nay.main, color: 'white', fontSize: '10px', ml: 5, position: 'absolute', px: 1, width: 'fit-content' }}>
+          {label}
+        </Grid>
+        <AccountInformation
+          accountAssets={accountAssets}
+          address={account.address}
+          api={api}
+          assetId={assetId}
+          balances={undefined}
+          chain={chain}
+          chainName={chain?.name}
+          formatted={formatted}
+          hideNumbers={hideNumbers}
+          isChild={isChild}
+          setAssetId={setAssetId}
+        />
+        <Backdrop
+          open={quickActionOpen !== undefined}
+          sx={{ bgcolor: theme.palette.mode === 'dark' ? 'rgba(23, 23, 23, 0.8)' : 'rgba(241, 241, 241, 0.7)', borderRadius: '5px', bottom: '-1px', left: '-1px', position: 'absolute', right: '-1px', top: '-1px' }}
+        />
+        <QuickActionFullScreen address={account.address} containerRef={containerRef} quickActionOpen={quickActionOpen} setQuickActionOpen={setQuickActionOpen} />
       </Grid>
-      <AccountInformation
-        accountAssets={accountAssets}
-        address={account.address}
-        api={api}
-        assetId={assetId}
-        balances={undefined}
-        chain={chain}
-        chainName={chain?.name}
-        formatted={formatted}
-        hideNumbers={hideNumbers}
-        isChild={isChild}
-        setAssetId={setAssetId}
-      />
-      <Backdrop
-        open={quickActionOpen !== undefined}
-        sx={{ bgcolor: theme.palette.mode === 'dark' ? 'rgba(23, 23, 23, 0.8)' : 'rgba(241, 241, 241, 0.7)', borderRadius: '5px', bottom: '-1px', left: '-1px', position: 'absolute', right: '-1px', top: '-1px' }}
-      />
-      <QuickActionFullScreen address={account.address} containerRef={containerRef} quickActionOpen={quickActionOpen} setQuickActionOpen={setQuickActionOpen} />
-    </Grid>
+      {account?.children?.map((child, index) => (
+        <AccountItem
+          account={child}
+          hideNumbers={hideNumbers}
+          isChild
+          key={index}
+          parentName={account.name}
+          quickActionOpen={quickActionOpen}
+          setQuickActionOpen={setQuickActionOpen}
+        />
+      ))}
+    </>
   );
 }