solution: render tabs as array of components

emeraldpay · Oct 18, 2023 · 8b6bd29 · 8b6bd29
1 parent f0a72f7
commit 8b6bd29
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/packages/react-app/src/wallets/WalletDetails/WalletDetails.tsx b/packages/react-app/src/wallets/WalletDetails/WalletDetails.tsx
@@ -106,6 +106,20 @@ const WalletDetails: React.FC<OwnProps & StateProps & DispatchProps> = ({
 
   const [tab, setTab] = React.useState(initialTab ?? WalletTabs.BALANCE);
 
+  const renderTabs = (): React.ReactNode => {
+    const tabs = [<Tab key={WalletTabs.BALANCE} label="Balance" value={WalletTabs.BALANCE} />];
+
+    if (hasEthereumEntry) {
+      tabs.push(<Tab key={WalletTabs.ALLOWANCES} label="Allowances" value={WalletTabs.ALLOWANCES} />);
+    }
+
+    return [
+      ...tabs,
+      <Tab key={WalletTabs.ADDRESSES} label="Addresses" value={WalletTabs.ADDRESSES} />,
+      <Tab key={WalletTabs.TRANSACTIONS} label="Transactions" value={WalletTabs.TRANSACTIONS} />,
+    ];
+  };
+
   React.useEffect(() => {
     if (currentWallet.current !== walletId) {
       currentWallet.current = walletId;
@@ -128,10 +142,7 @@ const WalletDetails: React.FC<OwnProps & StateProps & DispatchProps> = ({
       <TabContext value={tab}>
         <div className={styles.tabs}>
           <TabList indicatorColor="primary" textColor="primary" onChange={(event, selected) => setTab(selected)}>
-            <Tab label="Balance" value={WalletTabs.BALANCE} />
-            {hasEthereumEntry && <Tab label="Allowances" value={WalletTabs.ALLOWANCES} />}
-            <Tab label="Addresses" value={WalletTabs.ADDRESSES} />
-            <Tab label="Transactions" value={WalletTabs.TRANSACTIONS} />
+            {renderTabs()}
           </TabList>
           <WalletMenu walletId={walletId} />
         </div>