Use a Slide action for Asset picker in mobile (#3353)

* Use a Slide action for Asset picker in mobile

Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>

* Swipe edge and full height

Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>

* Add Swiper

Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>

* Expand swiper area

Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>

* Use SwipableDrawer instead of Popover

Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>

---------

Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>

Author: emreboga

wormhole-connect/src/views/v2/Bridge/AssetPicker/ChainList.tsx

@@ -17,18 +17,13 @@ import type { WalletData } from 'store/wallet';
 import SearchableList from 'views/v2/Bridge/AssetPicker/SearchableList';
 
 import { Chain } from '@wormhole-foundation/sdk';
-import { useMediaQuery, useTheme } from '@mui/material';
 
 const useStyles = makeStyles()((theme: any) => ({
   card: {
     background: theme.palette.input.background,
     width: '420px',
     [theme.breakpoints.down('sm')]: {
-      maxWidth: '420px',
-      width: '360px',
-    },
-    '@media (max-width: 366px)': {
-      width: '330px',
+      width: '100vw',
     },
   },
   cardContent: {
@@ -46,6 +41,9 @@ const useStyles = makeStyles()((theme: any) => ({
   },
   chainSearch: {
     maxHeight: '400px',
+    [theme.breakpoints.down('sm')]: {
+      maxHeight: '600px',
+    },
   },
   chainButton: {
     display: 'flex',
@@ -76,12 +74,9 @@ type Props = {
 };
 
 const SHORT_LIST_SIZE = 5;
-const SHORT_LIST_SIZE_MOBILE = 4;
 
 const ChainList = (props: Props) => {
   const { classes } = useStyles();
-  const theme = useTheme();
-  const mobile = useMediaQuery(theme.breakpoints.down('sm'));
   const {
     chainList,
     selectedChainConfig,
@@ -98,25 +93,24 @@ const ChainList = (props: Props) => {
     const selectedChainIndex = allChains.findIndex((chain) => {
       return chain.key === selectedChain?.key;
     });
-    const shortListSize = mobile ? SHORT_LIST_SIZE_MOBILE : SHORT_LIST_SIZE;
     // If the selected chain is outside the top list, we add it to the top;
     // otherwise we do not change its index in the top list
     if (
       selectedChain &&
       selectedChainIndex &&
-      selectedChainIndex >= shortListSize
+      selectedChainIndex >= SHORT_LIST_SIZE
     ) {
       return [
-        [selectedChain, ...allChains.slice(0, shortListSize - 1)],
-        allChains.length > shortListSize,
+        [selectedChain, ...allChains.slice(0, SHORT_LIST_SIZE - 1)],
+        allChains.length > SHORT_LIST_SIZE,
       ];
     }
 
     return [
-      allChains.slice(0, shortListSize),
-      allChains.length > shortListSize,
+      allChains.slice(0, SHORT_LIST_SIZE),
+      allChains.length > SHORT_LIST_SIZE,
     ];
-  }, [mobile, chainList, selectedChainConfig]);
+  }, [chainList, selectedChainConfig]);
 
   const shortList = useMemo(() => {
     return (
@@ -166,6 +160,7 @@ const ChainList = (props: Props) => {
     onChainSelect,
     selectedChainConfig?.key,
     setShowSearch,
+    showMoreButton,
     topChains,
   ]);
 

wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx

@@ -15,6 +15,7 @@ import TokenItem from 'views/v2/Bridge/AssetPicker/TokenItem';
 import { calculateUSDPrice, isFrankensteinToken } from 'utils';
 import config from 'config';
 import { useTokens } from 'contexts/TokensContext';
+
 const useStyles = makeStyles()((theme: any) => ({
   card: {
     background: theme.palette.input.background,
@@ -32,7 +33,10 @@ const useStyles = makeStyles()((theme: any) => ({
     justifyContent: 'space-between',
   },
   tokenList: {
-    maxHeight: 340,
+    maxHeight: '360px',
+    [theme.breakpoints.down('sm')]: {
+      maxHeight: '480px',
+    },
   },
 }));
 
@@ -83,7 +87,9 @@ const TokenList = (props: Props) => {
         // Failed to parse the search query as an address... this is expected to happen a lot
       }
     }
-  }, [searchQuery, props.selectedChainConfig.sdkName, getOrFetchToken]);
+    // Run the side-effect only when search query or chain changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery, props.selectedChainConfig.sdkName]);
 
   const sortedTokens = useMemo(() => {
     const nativeToken = config.tokens.getGasToken(
@@ -252,13 +258,14 @@ const TokenList = (props: Props) => {
 
     return tokens;
   }, [
-    balances,
-    props.tokenList,
+    props.selectedChainConfig.sdkName,
     props.selectedChainConfig.key,
+    props.selectedToken,
+    props.tokenList,
     props.sourceToken,
     props.isSource,
     props.wallet?.address,
-    props.selectedToken,
+    balances,
     searchQuery,
   ]);