fix: validate dom nesting console error

leather-io · Aug 20, 2024 · fe21fa8 · fe21fa8
1 parent a774b66
commit fe21fa8
Showing 1 changed file with 17 additions and 9 deletions.
diff --git a/src/app/pages/home/components/account-actions.tsx b/src/app/pages/home/components/account-actions.tsx
@@ -2,7 +2,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import { ChainID } from '@stacks/transactions';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
-import { Flex } from 'leather-styles/jsx';
+import { Box, Flex } from 'leather-styles/jsx';
 
 import { whenStacksChainId } from '@leather.io/stacks';
 import { CreditCardIcon, IconButton, InboxIcon, SwapIcon } from '@leather.io/ui';
@@ -56,14 +56,22 @@ export function AccountActions() {
       )}
       {whenStacksChainId(currentNetwork.chain.stacks.chainId)({
         [ChainID.Mainnet]: (
-          <BasicTooltip label={swapsEnabled ? '' : <SwapsDisabledTooltipLabel />} side="left">
-            <IconButton
-              data-testid={HomePageSelectors.SwapBtn}
-              disabled={swapsBtnDisabled}
-              icon={<SwapIcon />}
-              label="Swap"
-              onClick={() => navigate(RouteUrls.Swap.replace(':base', 'STX').replace(':quote', ''))}
-            />
+          <BasicTooltip
+            label={swapsEnabled ? '' : <SwapsDisabledTooltipLabel />}
+            side="left"
+            asChild
+          >
+            <Box>
+              <IconButton
+                data-testid={HomePageSelectors.SwapBtn}
+                disabled={swapsBtnDisabled}
+                icon={<SwapIcon />}
+                label="Swap"
+                onClick={() =>
+                  navigate(RouteUrls.Swap.replace(':base', 'STX').replace(':quote', ''))
+                }
+              />
+            </Box>
           </BasicTooltip>
         ),
         [ChainID.Testnet]: null,