feat: update token drawer

lifinance · Feb 8, 2022 · 52a17ec · 52a17ec
1 parent 5c4b833
commit 52a17ec
Show file tree

Hide file tree

Showing 11 changed files with 281 additions and 66 deletions.
diff --git a/libs/react-scripts/package.json b/libs/react-scripts/package.json
@@ -70,7 +70,7 @@
     "semver": "^7.3.5",
     "source-map-loader": "^3.0.0",
     "style-loader": "^3.3.1",
-    "tailwindcss": "^3.0.18",
+    "tailwindcss": "^3.0.19",
     "terser-webpack-plugin": "^5.3.1",
     "webpack": "^5.68.0",
     "webpack-dev-server": "^4.7.4",

diff --git a/package.json b/package.json
@@ -14,12 +14,12 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@types/node": "^17.0.15",
+    "@types/node": "^17.0.16",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.10.2",
-    "@typescript-eslint/parser": "^5.10.2",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
     "eslint": "^8.8.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.3.0",

diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -13,8 +13,8 @@
     "i18next": "^21.6.11",
     "react": "^18.0.0-rc.0",
     "react-dom": "^18.0.0-rc.0",
-    "react-hook-form": "^7.26.0",
-    "react-i18next": "^11.15.3",
+    "react-hook-form": "^7.26.1",
+    "react-i18next": "^11.15.4",
     "react-query": "^3.34.14",
     "react-router-dom": "^6.2.1"
   },

diff --git a/packages/widget/src/components/NavigationHeader.tsx b/packages/widget/src/components/NavigationHeader.tsx
@@ -26,11 +26,11 @@ export const NavigationHeader: React.FC = () => {
   const handleHeaderTitle = () => {
     switch (location.pathname) {
       case routes.settings:
-        return t(`swap.header.settings`);
+        return t(`header.settings`);
       case routes.selectToken:
-        return t(`swap.header.iWouldLikeToSwap`);
+        return t(`header.iWouldLikeToSwap`);
       default:
-        return t(`swap.header.swap`);
+        return t(`header.swap`);
     }
   };
 

diff --git a/packages/widget/src/components/Select.tsx b/packages/widget/src/components/Select.tsx
@@ -1,5 +1,6 @@
 import { Select as MuiSelect } from '@mui/material';
 import { inputBaseClasses } from '@mui/material/InputBase';
+import { listItemIconClasses } from '@mui/material/ListItemIcon';
 import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { alpha, styled } from '@mui/material/styles';
 
@@ -19,6 +20,11 @@ export const Select = styled(MuiSelect)(({ theme }) => ({
   ]),
   [`& .${inputBaseClasses.input}`]: {
     padding: '8.5px 14px',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  [`& .${listItemIconClasses.root}`]: {
+    minWidth: 38,
   },
   [`& .${outlinedInputClasses.notchedOutline}`]: {
     display: 'none',

diff --git a/packages/widget/src/components/SelectTokenDrawer.tsx b/packages/widget/src/components/SelectTokenDrawer.tsx
@@ -1,14 +1,26 @@
-import { Inbox as InboxIcon } from '@mui/icons-material';
+import { Search as SearchIcon } from '@mui/icons-material';
 import {
+  Avatar,
   Box,
   Divider,
   Drawer,
   DrawerProps,
+  FormControl,
+  InputAdornment,
   List,
   ListItem,
+  ListItemAvatar,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
+  MenuItem,
+  Select as MuiSelect,
+  Typography,
 } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { listItemIconClasses } from '@mui/material/ListItemIcon';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { styled } from '@mui/material/styles';
 import {
   forwardRef,
   RefObject,
@@ -17,8 +29,12 @@ import {
   useImperativeHandle,
   useState,
 } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { useMatch, useNavigate } from 'react-router-dom';
 import { routes } from '../utils/routes';
+import { Input } from './Input';
+import { Select } from './Select';
 
 export type SelectTokenDrawerProps = DrawerProps & {
   tokens?: string[];
@@ -30,13 +46,45 @@ export interface SelectTokenDrawerBase {
   closeDrawer(): void;
 }
 
+const TokenListItemButton = styled(ListItemButton)({
+  borderRadius: '8px',
+  '&:hover': {
+    backgroundColor: 'rgba(0, 0, 0, 0.02)',
+  },
+});
+
+export const TokenFilterSelect = styled(MuiSelect)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[100]
+      : theme.palette.grey[900],
+  borderRadius: 8,
+  border: 'none',
+  '&:focus': {
+    outline: 'none',
+  },
+  [`& .${inputBaseClasses.input}`]: {
+    padding: '4px 12px',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  [`& .${listItemIconClasses.root}`]: {
+    minWidth: 38,
+  },
+  [`& .${outlinedInputClasses.notchedOutline}`]: {
+    display: 'none',
+  },
+}));
+
 export const SelectTokenDrawer = forwardRef<
   SelectTokenDrawerBase,
   SelectTokenDrawerProps
 >(({ tokens, containerRef }, ref) => {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const [open, setOpen] = useState(false);
   const homeMatch = useMatch(routes.home);
+  const { register } = useFormContext();
 
   const openDrawer = useCallback(() => {
     navigate(routes.selectToken, { replace: true });
@@ -63,28 +111,6 @@ export const SelectTokenDrawer = forwardRef<
     }
   }, [homeMatch, open]);
 
-  const list = () => (
-    <Box role="presentation" onClick={closeDrawer} onKeyDown={closeDrawer}>
-      <List>
-        <ListItem button>
-          <ListItemIcon>
-            <InboxIcon />
-          </ListItemIcon>
-          <ListItemText primary="Test" />
-        </ListItem>
-      </List>
-      <Divider />
-      <List>
-        <ListItem button>
-          <ListItemIcon>
-            <InboxIcon />
-          </ListItemIcon>
-          <ListItemText primary="Test" />
-        </ListItem>
-      </List>
-    </Box>
-  );
-
   return (
     <Drawer
       container={containerRef.current}
@@ -110,7 +136,99 @@ export const SelectTokenDrawer = forwardRef<
       }}
       SlideProps={{ container: containerRef.current }}
     >
-      {list()}
+      <Box role="presentation">
+        <Box m={3}>
+          <FormControl variant="standard" fullWidth>
+            <Input
+              size="small"
+              placeholder={t(`swap.form.tokenSearch`)}
+              endAdornment={
+                <InputAdornment position="end">
+                  <SearchIcon />
+                </InputAdornment>
+              }
+            />
+          </FormControl>
+        </Box>
+        <Divider light />
+        <Box mt={3} mx={3}>
+          <Typography
+            variant="subtitle1"
+            noWrap
+            sx={{ fontWeight: 500 }}
+            mb={1}
+          >
+            {t(`swap.form.selectChain`)}
+          </Typography>
+          <FormControl fullWidth>
+            <Select
+              defaultValue={1}
+              inputProps={{
+                'aria-label': '',
+              }}
+              MenuProps={{ elevation: 2 }}
+            >
+              <MenuItem value={1}>
+                <ListItemIcon>
+                  <Avatar
+                    alt="Ethereum"
+                    src="https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png"
+                    sx={{ width: 24, height: 24 }}
+                  />
+                </ListItemIcon>
+                Ethereum
+              </MenuItem>
+            </Select>
+          </FormControl>
+          <Box
+            mt={3}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <Typography variant="subtitle1" noWrap sx={{ fontWeight: 500 }}>
+              {t(`swap.form.selectToken`)}
+            </Typography>
+            <FormControl>
+              <TokenFilterSelect
+                defaultValue={0}
+                inputProps={{
+                  'aria-label': '',
+                }}
+                MenuProps={{ elevation: 2, MenuListProps: { dense: true } }}
+              >
+                <MenuItem value={0}>{t(`swap.form.myTokens`)}</MenuItem>
+                <MenuItem value={1}>{t(`swap.form.allTokens`)}</MenuItem>
+              </TokenFilterSelect>
+            </FormControl>
+          </Box>
+        </Box>
+        <List sx={{ padding: '8px' }}>
+          {[1, 2, 3].map((index) => (
+            <ListItem
+              key={index}
+              secondaryAction={
+                <Typography variant="body1" noWrap>
+                  0.99999991
+                </Typography>
+              }
+              disablePadding
+            >
+              <TokenListItemButton dense onClick={closeDrawer}>
+                <ListItemAvatar>
+                  <Avatar
+                    alt="Ethereum"
+                    src="https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png"
+                  />
+                </ListItemAvatar>
+                <ListItemText primary="AAVE" secondary="Aave" />
+              </TokenListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      </Box>
     </Drawer>
   );
 });
diff --git a/packages/widget/src/components/SwapInputAdornment.tsx b/packages/widget/src/components/SwapInputAdornment.tsx
@@ -28,7 +28,10 @@ export const SwapFromInputAdornment: React.FC<{
         {t(`swap.form.max`)}
       </SwapMaxInputAdornment>
       <Typography variant="body2" color="text.secondary">
-        {t(`swap.form.maxAmount`, { value: maxAmount })}
+        {t(`swap.form.maxAmount`, {
+          value: maxAmount,
+          minimumFractionDigits: 5,
+        })}
       </Typography>
       <SwapInputAdornment variant="body2" color="text.secondary">
         {t(`swap.form.price`, { value: price })}

diff --git a/packages/widget/src/components/WalletHeader.tsx b/packages/widget/src/components/WalletHeader.tsx
@@ -14,7 +14,7 @@ export const WalletHeader: React.FC = () => {
         color="grey.500"
         mt={2}
       >
-        {t(`swap.header.walletConnected`, { walletAddress: '0000000000' })}
+        {t(`header.walletConnected`, { walletAddress: '0000000000' })}
       </Typography>
     </Header>
   );

diff --git a/packages/widget/src/i18n/en/translation.json b/packages/widget/src/i18n/en/translation.json
@@ -1,18 +1,18 @@
 {
+  "header": {
+    "walletConnected": "Connected: {{walletAddress}}",
+    "walletNotConnected": "Wallet is not connected.",
+    "swap": "Swap",
+    "settings": "Settings",
+    "iWouldLikeToSwap": "I'd like to swap",
+    "processIsOn": "Process is on..."
+  },
   "swap": {
-    "header": {
-      "walletConnected": "Connected: {{walletAddress}}",
-      "walletNotConnected": "Wallet is not connected.",
-      "swap": "Swap",
-      "settings": "Settings",
-      "iWouldLikeToSwap": "I'd like to swap",
-      "processIsOn": "Process is on..."
-    },
     "form": {
       "from": "I'd like to swap",
       "to": "And receive to",
       "max": "Max",
-      "maxAmount": "({{value, number(minimumFractionDigits: 2)}})",
+      "maxAmount": "({{value, number}})",
       "price": "\u2248 {{value, currency(currency: USD)}}",
       "sendToRecipient": "Send to recipient",
       "routePriority": {
@@ -22,7 +22,12 @@
       "recipientsAddress": "Recipient's {{chain}} address",
       "correctnessConfirmation": "I confirm that the address above is correct",
       "gas": "Gas:",
-      "waitingTime": "Waiting time:"
+      "waitingTime": "Waiting time:",
+      "tokenSearch": "Search your token",
+      "selectChain": "Select Chain",
+      "selectToken": "Select Token",
+      "myTokens": "My tokens",
+      "allTokens": "All tokens"
     },
     "button": "Swap"
   }

diff --git a/packages/widget/src/pages/SwapPage.tsx b/packages/widget/src/pages/SwapPage.tsx
@@ -86,7 +86,10 @@ export const SwapPage: React.FC = () => {
               defaultValue={0}
               autoComplete="off"
               endAdornment={
-                <SwapFromInputAdornment maxAmount={98700.3} price={1300.0} />
+                <SwapFromInputAdornment
+                  maxAmount={98700.34021}
+                  price={1300.0}
+                />
               }
               aria-describedby=""
               inputProps={{