fix: add tooltip to chain buttons

lifinance · Sep 26, 2022 · 0fd9626 · 0fd9626
1 parent 2c93c17
commit 0fd9626
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 28 deletions.
diff --git a/packages/widget/src/components/ChainSelect/ChainSelect.tsx b/packages/widget/src/components/ChainSelect/ChainSelect.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import type { EVMChain } from '@lifi/sdk';
-import { Avatar, Box, Skeleton, Typography } from '@mui/material';
+import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import type { SwapFormTypeProps } from '../../providers';
@@ -39,19 +39,27 @@ export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
             />
           ))
         : getChains().map((chain: EVMChain) => (
-            <ChainCard
+            <Tooltip
               key={chain.id}
-              onClick={() => setCurrentChain(chain.id)}
-              variant={chainId === chain.id ? 'selected' : 'default'}
+              title={chain.name}
+              placement="top"
+              enterDelay={500}
+              enterNextDelay={500}
+              arrow
             >
-              <Avatar
-                src={chain.logoURI}
-                alt={chain.key}
-                sx={{ width: 40, height: 40 }}
+              <ChainCard
+                onClick={() => setCurrentChain(chain.id)}
+                variant={chainId === chain.id ? 'selected' : 'default'}
               >
-                {chain.name[0]}
-              </Avatar>
-            </ChainCard>
+                <Avatar
+                  src={chain.logoURI}
+                  alt={chain.key}
+                  sx={{ width: 40, height: 40 }}
+                >
+                  {chain.name[0]}
+                </Avatar>
+              </ChainCard>
+            </Tooltip>
           ))}
       {chainsToHide > 0 ? (
         <ChainCard onClick={showAllChains}>

diff --git a/packages/widget/src/components/SwapButton/ButtonTooltip.tsx b/packages/widget/src/components/SwapButton/ButtonTooltip.tsx