From c118e8ef22b581abdef6b08664bbdbb5bbcc4250 Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Tue, 8 Nov 2022 10:59:27 +0000
Subject: [PATCH] feat: add token avatar skeletons

---
 .../SelectTokenButton.style.tsx               |  4 ++--
 .../SelectTokenButton/SelectTokenButton.tsx   | 10 ++++++----
 .../SwapInput/FormPriceHelperText.tsx         |  2 +-
 .../src/components/SwapInput/SwapInput.tsx    |  6 ++++--
 .../TokenAvatar/TokenAvatar.style.tsx         | 20 ++++++++++++++++++-
 .../components/TokenAvatar/TokenAvatar.tsx    | 18 +++++++++++++++++
 6 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx
index eb187fb41..5dba7fa51 100644
--- a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx
+++ b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx
@@ -15,7 +15,7 @@ export const SelectTokenCardHeader = styled(CardHeader, {
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      width: compact ? (selected ? 92 : 142) : 224,
+      width: compact ? (selected ? 92 : 142) : 256,
       fontWeight: selected ? 500 : 400,
       fontSize: compact && !selected ? '1rem' : '1.125rem',
     },
@@ -23,7 +23,7 @@ export const SelectTokenCardHeader = styled(CardHeader, {
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      width: compact ? 92 : 224,
+      width: compact ? 92 : 256,
     },
   }),
 );
diff --git a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx
index 5b68fb9f5..439a1b2ec 100644
--- a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx
+++ b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx
@@ -1,4 +1,3 @@
-import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
 import { Skeleton } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +7,7 @@ import type { SwapFormTypeProps } from '../../providers';
 import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 import { Card, CardTitle } from '../Card';
-import { TokenAvatar } from '../TokenAvatar';
+import { TokenAvatar, TokenAvatarSkeleton } from '../TokenAvatar';
 import { SelectTokenCardHeader } from './SelectTokenButton.style';
 
 export const SelectTokenButton: React.FC<
@@ -55,9 +54,12 @@ export const SelectTokenButton: React.FC<
       ) : (
         <SelectTokenCardHeader
           avatar={
-            isSelected ? <TokenAvatar token={token} chain={chain} /> : null
+            isSelected ? (
+              <TokenAvatar token={token} chain={chain} />
+            ) : (
+              <TokenAvatarSkeleton />
+            )
           }
-          action={!compact ? <KeyboardArrowRightIcon /> : null}
           title={isSelected ? token.symbol : defaultTitle}
           subheader={
             isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null
diff --git a/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx b/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx
index 08b9eb15e..1d97f1735 100644
--- a/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx
+++ b/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx
@@ -31,7 +31,7 @@ export const FormPriceHelperText: React.FC<
         color={fromAmountTokenPrice ? 'text.secondary' : 'grey.600'}
         fontWeight={400}
         fontSize={12}
-        marginLeft={selected ? 8 : 2}
+        marginLeft={8}
         lineHeight={1.3334}
         flex={1}
         sx={{
diff --git a/packages/widget/src/components/SwapInput/SwapInput.tsx b/packages/widget/src/components/SwapInput/SwapInput.tsx
index 9d9a7c6be..7b5bf5512 100644
--- a/packages/widget/src/components/SwapInput/SwapInput.tsx
+++ b/packages/widget/src/components/SwapInput/SwapInput.tsx
@@ -8,7 +8,7 @@ import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
 import { DisabledUI } from '../../types';
 import { fitInputText, formatAmount } from '../../utils';
 import { Card, CardTitle } from '../Card';
-import { TokenAvatar } from '../TokenAvatar';
+import { TokenAvatar, TokenAvatarSkeleton } from '../TokenAvatar';
 import { FormPriceHelperText } from './FormPriceHelperText';
 import {
   FormControl,
@@ -77,7 +77,9 @@ export const SwapInput: React.FC<SwapFormTypeProps> = ({ formType }) => {
           startAdornment={
             isSelected ? (
               <TokenAvatar token={token} chain={chain} sx={{ marginLeft: 2 }} />
-            ) : null
+            ) : (
+              <TokenAvatarSkeleton sx={{ marginLeft: 2 }} />
+            )
           }
           endAdornment={
             !disabled ? <SwapInputAdornment formType={formType} /> : undefined
diff --git a/packages/widget/src/components/TokenAvatar/TokenAvatar.style.tsx b/packages/widget/src/components/TokenAvatar/TokenAvatar.style.tsx
index 7729d4554..9a37de73c 100644
--- a/packages/widget/src/components/TokenAvatar/TokenAvatar.style.tsx
+++ b/packages/widget/src/components/TokenAvatar/TokenAvatar.style.tsx
@@ -1,4 +1,4 @@
-import { AvatarGroup } from '@mui/material';
+import { AvatarGroup, Box } from '@mui/material';
 import { avatarClasses } from '@mui/material/Avatar';
 import { badgeClasses } from '@mui/material/Badge';
 import { styled } from '@mui/material/styles';
@@ -12,3 +12,21 @@ export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
     marginLeft: theme.spacing(1),
   },
 }));
+
+export const AvatarSkeleton = styled(Box)(({ theme }) => ({
+  background:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[300]
+      : theme.palette.grey[800],
+  border: `2px solid ${theme.palette.background.paper}`,
+  borderRadius: '50%',
+}));
+
+export const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
+  border: `2px solid ${
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[300]
+      : theme.palette.grey[800]
+  }`,
+  borderRadius: '50%',
+}));
diff --git a/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx b/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx
index 453334d95..46909f19e 100644
--- a/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx
+++ b/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx
@@ -3,6 +3,7 @@ import type { SxProps, Theme } from '@mui/material';
 import { Avatar, Badge } from '@mui/material';
 import { useChain, useToken } from '../../hooks';
 import { SmallAvatar } from '../SmallAvatar';
+import { AvatarSkeleton, AvatarSkeletonContainer } from './TokenAvatar.style';
 
 export const TokenAvatarFallback: React.FC<{
   token: Token;
@@ -48,3 +49,20 @@ export const TokenAvatar: React.FC<{
   }
   return <TokenAvatarBase token={token} chain={chain} sx={sx} />;
 };
+
+export const TokenAvatarSkeleton: React.FC<{
+  sx?: SxProps<Theme>;
+}> = ({ sx }) => {
+  return (
+    <Badge
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      badgeContent={<AvatarSkeleton width={16} height={16} />}
+      sx={sx}
+    >
+      <AvatarSkeletonContainer>
+        <AvatarSkeleton width={28} height={28} />
+      </AvatarSkeletonContainer>
+    </Badge>
+  );
+};