Merge dev to master

public/locales/en.json

@@ -448,6 +448,7 @@
   "earnRewards": "Earn Rewards",
   "stakeMessageOtherLP": "Stake LP tokens to earn reward tokens",
   "disableBonusRouter": "Disable Bonus Router",
+  "singleRouteOnly": "Only Single Route",
   "otherLPMining": "Other Mining",
   "createAFarm": "Create a Farm",
   "removeLiquidityError1": "There is an error in transaction. Please increase your slippage.",

src/components/SettingsModal/SettingsModal.tsx

@@ -15,6 +15,7 @@ import {
   useUserSlippageTolerance,
   useBonusRouterManager,
   useSlippageManuallySet,
+  useUserSingleHopOnly,
 } from 'state/user/hooks';
 import { ReactComponent as CloseIcon } from 'assets/images/CloseIcon.svg';
 import 'components/styles/SettingsModal.scss';
@@ -49,6 +50,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
   const { onChangeRecipient } = useSwapActionHandlers();
   const [expertMode, toggleExpertMode] = useExpertModeManager();
   const [bonusRouterDisabled, toggleSetBonusRouter] = useBonusRouterManager();
+  const [singleHopOnly, setSingleHopOnly] = useUserSingleHopOnly();
   const [slippageInput, setSlippageInput] = useState('');
   const [deadlineInput, setDeadlineInput] = useState('');
   const [expertConfirm, setExpertConfirm] = useState(false);
@@ -304,6 +306,16 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
           />
         </Box>
         <Divider />
+        <Box my={2.5} className='flex items-center justify-between'>
+          <Box className='flex items-center'>
+            <p style={{ marginRight: 6 }}>{t('singleRouteOnly')}</p>
+          </Box>
+          <ToggleSwitch
+            toggled={singleHopOnly}
+            onToggle={() => setSingleHopOnly(!singleHopOnly)}
+          />
+        </Box>
+        <Divider />
         <Box mt={2.5} className='flex items-center justify-between'>
           <p>{t('language')}</p>
           <Box className='flex items-center'>

src/components/SwapTokenDetailsHorizontal/SwapTokenDetailsHorizontal.tsx

@@ -52,9 +52,6 @@ const SwapTokenDetailsHorizontal: React.FC<{
           data && data.data && data.data.intervalTokenData
             ? data.data.intervalTokenData
             : undefined;
-        tokenPriceIsV2 = !!tokenPriceDataV2.find(
-          (item: any) => item.open && item.close,
-        );
       }
 
       const res = await fetch(
@@ -71,14 +68,40 @@ const SwapTokenDetailsHorizontal: React.FC<{
         data && data.data && data.data.intervalTokenData
           ? data.data.intervalTokenData
           : undefined;
+      const tokenPriceIsV3 = !!tokenPriceDataV3.find(
+        (item: any) => item.open && item.close,
+      );
 
-      const tokenPriceData = tokenPriceIsV2
-        ? tokenPriceDataV2
-        : tokenPriceDataV3;
+      const tokenPriceData = tokenPriceIsV3
+        ? tokenPriceDataV3
+        : tokenPriceDataV2;
       setPriceData(tokenPriceData);
 
-      let token0;
-      if (v2) {
+      const tokenDetailsRes = await fetch(
+        `${process.env.REACT_APP_LEADERBOARD_APP_URL}/analytics/top-token-details/${tokenAddress}/v3?chainId=${chainId}`,
+      );
+      if (!tokenDetailsRes.ok) {
+        const errorText = await tokenDetailsRes.text();
+        throw new Error(
+          errorText ||
+            tokenDetailsRes.statusText ||
+            `Failed to get top token details`,
+        );
+      }
+      const tokenDetailsData = await tokenDetailsRes.json();
+      const tokenV3 =
+        tokenDetailsData && tokenDetailsData.data && tokenDetailsData.data.token
+          ? tokenDetailsData.data.token
+          : undefined;
+      if (tokenV3) {
+        setTokenData(tokenV3);
+        const tokenDetailToUpdate = {
+          address: tokenAddress,
+          tokenData: tokenV3,
+          priceData: tokenPriceData,
+        };
+        updateTokenDetails(tokenDetailToUpdate);
+      } else if (v2 && !tokenV3.priceUSD) {
         const res = await fetch(
           `${process.env.REACT_APP_LEADERBOARD_APP_URL}/analytics/top-token-details/${tokenAddress}/v2?chainId=${chainId}`,
         );
@@ -89,7 +112,7 @@ const SwapTokenDetailsHorizontal: React.FC<{
           );
         }
         const data = await res.json();
-        token0 =
+        const token0 =
           data && data.data && data.data.token ? data.data.token : undefined;
         if (token0 && token0.priceUSD) {
           setTokenData(token0);
@@ -101,29 +124,6 @@ const SwapTokenDetailsHorizontal: React.FC<{
           updateTokenDetails(tokenDetailToUpdate);
         }
       }
-      if (!token0 || !token0.priceUSD) {
-        const res = await fetch(
-          `${process.env.REACT_APP_LEADERBOARD_APP_URL}/analytics/top-token-details/${tokenAddress}/v3?chainId=${chainId}`,
-        );
-        if (!res.ok) {
-          const errorText = await res.text();
-          throw new Error(
-            errorText || res.statusText || `Failed to get top token details`,
-          );
-        }
-        const data = await res.json();
-        const tokenV3 =
-          data && data.data && data.data.token ? data.data.token : undefined;
-        if (tokenV3) {
-          setTokenData(tokenV3);
-          const tokenDetailToUpdate = {
-            address: tokenAddress,
-            tokenData: tokenV3,
-            priceData: tokenPriceData,
-          };
-          updateTokenDetails(tokenDetailToUpdate);
-        }
-      }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tokenAddress, chainIdToUse]);
@@ -133,7 +133,7 @@ const SwapTokenDetailsHorizontal: React.FC<{
       <Grid item xs={4}>
         <Box className='flex items-center'>
           <CurrencyLogo currency={currency} size='28px' />
-          <Box ml={1}>
+          <Box ml={0.5}>
             <small>{currency.symbol}</small>
           </Box>
         </Box>

src/components/WalletModal/WalletModal.tsx

@@ -422,8 +422,12 @@ const WalletModal: React.FC<WalletModalProps> = ({
   }
 
   return (
-    <CustomModal open={walletModalOpen} onClose={toggleWalletModal}>
-      <Box className='walletModalWrapper'>{getModalContent()}</Box>
+    <CustomModal
+      modalWrapper='walletModalWrapper'
+      open={walletModalOpen}
+      onClose={toggleWalletModal}
+    >
+      <Box>{getModalContent()}</Box>
     </CustomModal>
   );
 };

src/components/WalletModal/options/IconifyOption.tsx

@@ -17,8 +17,6 @@ const IconifyOption: React.FC<WalletOptionProps> = ({
       id={id}
       onClick={onClick}
       className='flex items-center flex-col optionCardIconfiy'
-      my={1.5}
-      mx={1.5}
     >
       <Box className='optionIconContainer'>
         <img className='m-auto' src={icon} alt={'Icon'} width={48} />

src/components/styles/WalletModal.scss

@@ -1,7 +1,8 @@
 @use 'styles/variables' as *;
+@use 'styles/breakpoints' as *;
 
 .walletModalWrapper {
-  max-height: 80vh;
+  max-height: 95vh;
   overflow: auto;
 }
 .blurb {
@@ -94,6 +95,16 @@
 }
 
 .optionCardIconfiy {
+  margin: 12px;
+
+  @include media('screen', '<tablet') {
+    margin: 8px;
+  }
+
+  @media screen and (max-height: 600px) {
+    margin: 8px;
+  }
+
   &:hover {
     cursor: pointer;
   }
@@ -106,6 +117,16 @@
     margin: auto;
     border-radius: 24px;
 
+    @include media('screen', '<tablet') {
+      width: 80px;
+      height: 80px;
+    }
+
+    @media screen and (max-height: 600px) {
+      width: 80px;
+      height: 80px;
+    }
+
     &:hover {
       border-color: $primary;
     }

src/hooks/v3/useAllV3Routes.ts

@@ -4,6 +4,7 @@ import { Pool } from 'lib/src/pool';
 import { Route } from 'lib/src/route';
 import { useMemo } from 'react';
 import { useV3SwapPools } from './useV3SwapPools';
+import { useUserSingleHopOnly } from 'state/user/hooks';
 
 /**
  * Returns true if poolA is equivalent to poolB
@@ -78,8 +79,7 @@ export function useAllV3Routes(
     currencyOut,
   );
 
-  const singleHopOnly = false;
-  //const [singleHopOnly] = useUserSingleHopOnly();
+  const [singleHopOnly] = useUserSingleHopOnly();
 
   return useMemo(() => {
     if (poolsLoading || !chainId || !pools || !currencyIn || !currencyOut) {
@@ -89,9 +89,7 @@ export function useAllV3Routes(
       };
     }
 
-    //Hack
-    // const singleIfWrapped = (currencyIn.isNative || currencyOut.isNative)
-    const singleIfWrapped = false;
+    const singleIfWrapped = currencyIn.isNative || currencyOut.isNative;
 
     const routes = computeAllRoutes(
       currencyIn,

src/state/user/hooks.tsx

@@ -349,7 +349,6 @@ export function useUserSingleHopOnly(): [
   >((state) => {
     return state.user.userSingleHopOnly;
   });
-  // const singleHopOnly = useAppSelector((state) => state.user.userSingleHopOnly);
 
   const setSingleHopOnly = useCallback(
     (newSingleHopOnly: boolean) => {

src/utils/useUSDCPrice.ts

@@ -78,9 +78,35 @@ export function useUSDCPricesFromAddresses(
 
       let pricesV2: any[] = [];
 
+      const res = await fetch(
+        `${process.env.REACT_APP_LEADERBOARD_APP_URL}/utils/token-prices/v3?chainId=${chainId}&addresses=${addressStr}`,
+      );
+      if (!res.ok) {
+        const errorText = await res.text();
+        throw new Error(
+          errorText || res.statusText || `Failed to get v3 token price`,
+        );
+      }
+      const data = await res.json();
+
+      const pricesV3 =
+        data && data.data && data.data.length > 0 ? data.data : [];
+
       if (v2) {
+        const addressesNotInV3 = addresses.filter((address) => {
+          const priceV3 = pricesV3.find(
+            (item: any) =>
+              item && item.id.toLowerCase() === address.toLowerCase(),
+          );
+          return !priceV3 || !priceV3.price;
+        });
+
         const res = await fetch(
-          `${process.env.REACT_APP_LEADERBOARD_APP_URL}/utils/token-prices/v2?chainId=${chainId}&addresses=${addressStr}`,
+          `${
+            process.env.REACT_APP_LEADERBOARD_APP_URL
+          }/utils/token-prices/v2?chainId=${chainId}&addresses=${addressesNotInV3.join(
+            '_',
+          )}`,
         );
         if (!res.ok) {
           const errorText = await res.text();
@@ -93,51 +119,25 @@ export function useUSDCPricesFromAddresses(
         pricesV2 = data && data.data && data.data.length > 0 ? data.data : [];
       }
 
-      const addressesNotInV2 = addresses.filter((address) => {
-        const priceV2 = pricesV2.find(
-          (item: any) =>
-            item && item.id.toLowerCase() === address.toLowerCase(),
-        );
-        return !priceV2 || !priceV2.price;
-      });
-
-      const res = await fetch(
-        `${
-          process.env.REACT_APP_LEADERBOARD_APP_URL
-        }/utils/token-prices/v3?chainId=${chainId}&addresses=${addressesNotInV2.join(
-          '_',
-        )}`,
-      );
-      if (!res.ok) {
-        const errorText = await res.text();
-        throw new Error(
-          errorText || res.statusText || `Failed to get v3 token price`,
-        );
-      }
-      const data = await res.json();
-
-      const pricesV3 =
-        data && data.data && data.data.length > 0 ? data.data : [];
-
       const prices = addresses.map((address) => {
-        const priceV2 = pricesV2.find(
+        const priceV3 = pricesV3.find(
           (item: any) =>
             item && item.id.toLowerCase() === address.toLowerCase(),
         );
-        if (priceV2 && priceV2.price) {
+        if (priceV3 && priceV3.price) {
           return {
             address,
-            price: priceV2.price,
+            price: priceV3.price,
           };
         } else {
-          const priceV3 = pricesV3.find(
+          const priceV2 = pricesV2.find(
             (item: any) =>
               item && item.id.toLowerCase() === address.toLowerCase(),
           );
-          if (priceV3 && priceV3.price) {
+          if (priceV2 && priceV2.price) {
             return {
               address,
-              price: priceV3.price,
+              price: priceV2.price,
             };
           }
           return { address, price: 0 };