feat: add tools icons to swap details

lifinance · Jul 22, 2022 · 5b652d7 · 5b652d7
1 parent c3a4e86
commit 5b652d7
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 31 deletions.
diff --git a/packages/widget/src/components/SmallAvatar.tsx b/packages/widget/src/components/SmallAvatar.tsx
@@ -0,0 +1,9 @@
+import { Avatar } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const SmallAvatar = styled(Avatar)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  width: 16,
+  height: 16,
+  border: `2px solid ${theme.palette.background.paper}`,
+}));
diff --git a/packages/widget/src/components/StepActions/StepActions.style.tsx b/packages/widget/src/components/StepActions/StepActions.style.tsx
@@ -44,8 +44,8 @@ export const StepLabel = styled(MuiStepLabel, {
 })(({ theme }) => ({
   padding: 0,
   [`.${stepLabelClasses.iconContainer}`]: {
-    paddingLeft: theme.spacing(1.25),
-    paddingRight: theme.spacing(3.25),
+    paddingLeft: theme.spacing(0.75),
+    paddingRight: theme.spacing(2.75),
   },
   [`&.${stepLabelClasses.disabled}`]: {
     cursor: 'inherit',

diff --git a/packages/widget/src/components/StepActions/StepActions.tsx b/packages/widget/src/components/StepActions/StepActions.tsx
@@ -1,15 +1,21 @@
 import { LifiStep, Step } from '@lifi/sdk';
 import { ArrowForward as ArrowForwardIcon } from '@mui/icons-material';
-import { Box, Step as MuiStep, Stepper, Typography } from '@mui/material';
+import {
+  Box,
+  Step as MuiStep,
+  StepIconProps,
+  Stepper,
+  Typography,
+} from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
+import { ReactComponent as LiFiToolLogo } from '../../icons/LiFiToolLogo.svg';
 import { formatTokenAmount } from '../../utils';
-import { LiFiLogo } from '../LiFiLogo';
+import { SmallAvatar } from '../SmallAvatar';
 import {
   StepAvatar,
   StepConnector,
   StepContent,
-  StepIcon,
   StepLabel,
 } from './StepActions.style';
 import { StepActionsProps } from './types';
@@ -24,18 +30,36 @@ export const StepActions: React.FC<StepActionsProps> = ({
       ? CrossStepDetailsLabel
       : SwapStepDetailsLabel;
   const isFullView = !dense && (step as LifiStep).includedSteps?.length > 1;
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const StepIconComponent = ({ icon }: StepIconProps) => {
+    const tool = (step as LifiStep).includedSteps?.[Number(icon) - 1];
+
+    return tool ? (
+      <SmallAvatar
+        src={tool.toolDetails.logoURI}
+        alt={tool.toolDetails.name}
+        sx={{
+          boxSizing: 'content-box',
+        }}
+      >
+        {tool.toolDetails.name[0]}
+      </SmallAvatar>
+    ) : null;
+  };
+
   return (
     <Box {...other}>
       <Box
         sx={{ display: 'flex', alignItems: 'center' }}
-        mb={isFullView ? 1 : 0}
+        mb={isFullView ? 1.5 : 0}
       >
         <StepAvatar
           variant={step.type === 'lifi' ? 'square' : 'circular'}
           src={step.type !== 'lifi' ? step.toolDetails.logoURI : undefined}
           alt={step.toolDetails.name}
         >
-          {step.type === 'lifi' ? <LiFiLogo /> : step.toolDetails.name[0]}
+          {step.type === 'lifi' ? <LiFiToolLogo /> : step.toolDetails.name[0]}
         </StepAvatar>
         <Typography
           ml={2}
@@ -56,7 +80,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
         >
           {(step as LifiStep).includedSteps.map((step) => (
             <MuiStep key={step.id} expanded>
-              <StepLabel StepIconComponent={StepIcon}>
+              <StepLabel StepIconComponent={StepIconComponent}>
                 {step.type === 'cross' || step.type === 'lifi' ? (
                   <CrossStepDetailsLabel step={step} />
                 ) : (

diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCard.tsx
@@ -1,7 +1,7 @@
 import { Box, BoxProps, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { StepActions } from '../StepActions';
-import { StepToken } from '../StepToken';
+import { Token } from '../Token';
 import { Card, Label } from './SwapRouteCard.style';
 import { SwapRouteCardProps } from './types';
 
@@ -28,10 +28,7 @@ export const SwapRouteCard: React.FC<SwapRouteCardProps & BoxProps> = ({
         >
           <Label active={active}>{label}</Label>
         </Box>
-        <StepToken
-          token={{ ...route.toToken, amount: route.toAmount }}
-          mb={2}
-        />
+        <Token token={{ ...route.toToken, amount: route.toAmount }} mb={2} />
         {!dense
           ? route.steps.map((step) => (
               <StepActions key={step.id} step={step} mb={2} />

diff --git a/packages/widget/src/components/StepToken.tsx → packages/widget/src/components/Token.tsx b/packages/widget/src/components/StepToken.tsx → packages/widget/src/components/Token.tsx
@@ -1,14 +1,18 @@
 /* eslint-disable react/no-array-index-key */
 import { TokenAmount } from '@lifi/sdk';
 import { Box, BoxProps, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useChains } from '../hooks';
 import { formatTokenAmount } from '../utils';
 import { TextFitter } from './TextFitter';
 import { TokenAvatar } from './TokenAvatar';
 
-export const StepToken: React.FC<{ token: TokenAmount } & BoxProps> = ({
+export const Token: React.FC<{ token: TokenAmount } & BoxProps> = ({
   token,
   ...other
 }) => {
+  const { t } = useTranslation();
+  const { getChainById } = useChains();
   return (
     <Box flex={1} {...other}>
       <Box display="flex" flex={1}>
@@ -23,14 +27,16 @@ export const StepToken: React.FC<{ token: TokenAmount } & BoxProps> = ({
         </TextFitter>
       </Box>
       <Typography
-        fontSize={14}
+        fontSize={12}
         lineHeight={1}
         fontWeight="500"
         color="text.secondary"
-        mr={1}
         ml={6}
       >
-        {token.symbol}
+        {t(`swap.tokenOnChain`, {
+          tokenSymbol: token.symbol,
+          chainName: getChainById(token.chainId)?.name,
+        })}
       </Typography>
     </Box>
   );

diff --git a/packages/widget/src/components/TokenAvatar/TokenAvatar.style.tsx b/packages/widget/src/components/TokenAvatar/TokenAvatar.style.tsx
@@ -1,15 +1,8 @@
-import { Avatar, AvatarGroup } from '@mui/material';
+import { AvatarGroup } from '@mui/material';
 import { avatarClasses } from '@mui/material/Avatar';
 import { badgeClasses } from '@mui/material/Badge';
 import { styled } from '@mui/material/styles';
 
-export const SmallAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.palette.background.paper,
-  width: 16,
-  height: 16,
-  border: `2px solid ${theme.palette.background.paper}`,
-}));
-
 export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
   [`& .${avatarClasses.root}`]: {
     background: theme.palette.background.paper,

diff --git a/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx b/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx
@@ -1,7 +1,7 @@
 import { Token } from '@lifi/sdk';
 import { Avatar, Badge, SxProps, Theme } from '@mui/material';
 import { useChain } from '../../hooks';
-import { SmallAvatar } from './TokenAvatar.style';
+import { SmallAvatar } from '../SmallAvatar';
 
 export const TokenAvatar: React.FC<{
   token: Token;

diff --git a/packages/widget/src/icons/LiFiToolLogo.svg b/packages/widget/src/icons/LiFiToolLogo.svg
diff --git a/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx b/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx
@@ -9,7 +9,7 @@ import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { BottomSheet, BottomSheetBase } from '../../components/BottomSheet';
-import { StepToken } from '../../components/StepToken';
+import { Token } from '../../components/Token';
 import { useChains, useTokenBalance } from '../../hooks';
 import { SwapFormKey } from '../../providers/SwapFormProvider';
 import { RouteExecution } from '../../stores';
@@ -116,7 +116,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
             {title}
           </Typography>
           {status === 'success' ? (
-            <StepToken
+            <Token
               token={{
                 ...route.toToken,
                 amount:

diff --git a/packages/widget/src/pages/SwapPage/StepItem.tsx b/packages/widget/src/pages/SwapPage/StepItem.tsx
@@ -4,7 +4,7 @@ import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CardContainer, CardTitle } from '../../components/Card';
 import { StepActions } from '../../components/StepActions';
-import { StepToken } from '../../components/StepToken';
+import { Token } from '../../components/Token';
 import { ExecutionItem } from './ExecutionItem';
 import { StepTimer } from './StepTimer';
 
@@ -46,12 +46,12 @@ export const StepItem: React.FC<{
         </CardTitle>
       </Box>
       <Box py={1}>
-        {fromToken ? <StepToken token={fromToken} px={2} py={1} /> : null}
+        {fromToken ? <Token token={fromToken} px={2} py={1} /> : null}
         <StepActions step={step} px={2} py={1} dense />
         {step.execution?.process.map((process, index) => (
           <ExecutionItem key={index} step={step} process={process} />
         ))}
-        {toToken ? <StepToken token={toToken} px={2} py={1} /> : null}
+        {toToken ? <Token token={toToken} px={2} py={1} /> : null}
       </Box>
     </CardContainer>
   );