@rango-dev/widget-embedded 0.12.1-next.9 → 0.13.0

package/src/pages/Home.tsx

@@ -22,18 +22,32 @@ import { RouteErrors } from '../components/RouteErrors';
 import { SwitchFromAndToButton } from '../components/SwitchFromAndTo';
 import { errorMessages } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import {
+  BALANCE_MAX_DECIMALS,
+  BALANCE_MIN_DECIMALS,
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../constants/routing';
 import { useSwapInput } from '../hooks/useSwapInput';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { ButtonState } from '../types';
+import { getContainer } from '../utils/common';
+import { getBlockchainShortNameFor } from '../utils/meta';
 import {
   numberToString,
   secondsToString,
   totalArrivalTime,
 } from '../utils/numbers';
-import { getFormatedBestRoute } from '../utils/routing';
+import { getFormattedBestRoute, getPriceImpactLevel } from '../utils/routing';
 import {
   canComputePriceImpact,
   getOutputRatio,
@@ -77,12 +91,6 @@ const FooterAlert = styled('div', {
   display: 'flex',
 });
 
-const BALANCE_PRECISION = 8;
-const TWO_DECIMAL = 2;
-const MAX_DECIMAL = 6;
-const MIN_DECIMAL = 0;
-const WARNING_LEVEL_LIMIT = -10;
-
 export function Home() {
   const navigate = useNavigate();
   const {
@@ -105,7 +113,7 @@ export function Home() {
   } = useBestRouteStore();
 
   const {
-    meta: { tokens },
+    meta: { tokens, blockchains },
     loadingStatus: loadingMetaStatus,
   } = useMetaStore();
 
@@ -160,7 +168,8 @@ export function Home() {
             fromToken?.symbol,
             fromToken?.address
           )?.amount || '0',
-          BALANCE_PRECISION
+          BALANCE_MIN_DECIMALS,
+          BALANCE_MAX_DECIMALS
         )
       : '0';
 
@@ -202,20 +211,26 @@ export function Home() {
       from: {
         token: { displayName: swap.from.symbol, image: swap.from.logo },
         chain: {
-          displayName: swap.from.blockchain,
+          displayName:
+            getBlockchainShortNameFor(swap.from.blockchain, blockchains) ?? '',
           image: swap.from.blockchainLogo,
         },
         price: {
           value:
             index === 0
-              ? numberToString(inputAmount, MIN_DECIMAL, TWO_DECIMAL)
+              ? numberToString(
+                  inputAmount,
+                  TOKEN_AMOUNT_MIN_DECIMALS,
+                  TOKEN_AMOUNT_MAX_DECIMALS
+                )
               : swap.fromAmount,
         },
       },
       to: {
         token: { displayName: swap.to.symbol, image: swap.to.logo },
         chain: {
-          displayName: swap.to.blockchain,
+          displayName:
+            getBlockchainShortNameFor(swap.to.blockchain, blockchains) ?? '',
           image: swap.to.blockchainLogo,
         },
         price: {
@@ -239,9 +254,18 @@ export function Home() {
                   </Typography>
                   <Divider direction="horizontal" size={8} />
                   <Typography size="xsmall" variant="body" color="neutral900">
-                    {`Yours: ${numberToString(
-                      swapHasError?.fromAmount || null
-                    )} ${swap?.from.symbol}`}
+                    {i18n.t({
+                      id: 'yourSymbol',
+                      message: 'Yours: {amount} {symbol}',
+                      values: {
+                        amount: numberToString(
+                          swapHasError?.fromAmount || null,
+                          TOKEN_AMOUNT_MIN_DECIMALS,
+                          TOKEN_AMOUNT_MAX_DECIMALS
+                        ),
+                        symbol: swap?.from.symbol,
+                      },
+                    })}
                   </Typography>
                 </FooterAlert>
               }
@@ -253,7 +277,7 @@ export function Home() {
 
   const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
 
-  const bestRouteData = getFormatedBestRoute(bestRoute);
+  const bestRouteData = getFormattedBestRoute(bestRoute);
 
   return (
     <Layout
@@ -300,7 +324,8 @@ export function Home() {
         <InputsContainer>
           <FromContainer>
             <SwapInput
-              label="From"
+              label={i18n.t('From')}
+              mode="From"
               onInputChange={setInputAmount}
               balance={tokenBalance}
               chain={{
@@ -316,9 +341,13 @@ export function Home() {
                 value: inputAmount,
                 usdValue: priceImpactInputCanNotBeComputed
                   ? undefined
-                  : numberToString(inputUsdValue),
+                  : numberToString(
+                      inputUsdValue,
+                      USD_VALUE_MIN_DECIMALS,
+                      USD_VALUE_MAX_DECIMALS
+                    ),
                 error: priceImpactInputCanNotBeComputed
-                  ? errorMessages.unknownPriceError.impacTitle
+                  ? errorMessages.unknownPriceError.impactTitle
                   : undefined,
               }}
               disabled={loadingMetaStatus === 'failed'}
@@ -333,7 +362,8 @@ export function Home() {
           </FromContainer>
           <SwapInput
             sharpBottomStyle={!!bestRoute?.result || fetchingBestRoute}
-            label="To"
+            label={i18n.t('To')}
+            mode="To"
             chain={{
               displayName: toBlockchain?.displayName || '',
               image: toBlockchain?.logo || '',
@@ -344,19 +374,31 @@ export function Home() {
             }}
             percentageChange={
               !!percentageChange?.lt(0)
-                ? numberToString(percentageChange, MIN_DECIMAL, TWO_DECIMAL)
+                ? numberToString(
+                    percentageChange,
+                    PERCENTAGE_CHANGE_MIN_DECIMALS,
+                    PERCENTAGE_CHANGE_MAX_DECIMALS
+                  )
                 : null
             }
-            warningLevel={
-              !!percentageChange?.lt(WARNING_LEVEL_LIMIT) ? 'high' : 'low'
-            }
+            warningLevel={getPriceImpactLevel(
+              percentageChange?.toNumber() ?? 0
+            )}
             price={{
-              value: numberToString(outputAmount),
+              value: numberToString(
+                outputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
               usdValue: priceImpactOutputCanNotBeComputed
                 ? undefined
-                : numberToString(outputUsdValue),
+                : numberToString(
+                    outputUsdValue,
+                    USD_VALUE_MIN_DECIMALS,
+                    USD_VALUE_MAX_DECIMALS
+                  ),
               error: priceImpactOutputCanNotBeComputed
-                ? errorMessages.unknownPriceError.impacTitle
+                ? errorMessages.unknownPriceError.impactTitle
                 : undefined,
             }}
             onClickToken={() => navigate('to-swap')}
@@ -376,22 +418,45 @@ export function Home() {
             <BestRoute
               type="basic"
               recommended={true}
+              tooltipContainer={getContainer()}
               input={{
-                value: numberToString(inputAmount, MIN_DECIMAL, MAX_DECIMAL),
-                usdValue: numberToString(inputUsdValue),
+                value: numberToString(
+                  inputAmount,
+                  TOKEN_AMOUNT_MIN_DECIMALS,
+                  TOKEN_AMOUNT_MAX_DECIMALS
+                ),
+                usdValue: numberToString(
+                  inputUsdValue,
+                  USD_VALUE_MIN_DECIMALS,
+                  USD_VALUE_MAX_DECIMALS
+                ),
               }}
               output={{
-                value: numberToString(outputAmount),
-                usdValue: numberToString(outputUsdValue),
+                value: numberToString(
+                  outputAmount,
+                  TOKEN_AMOUNT_MIN_DECIMALS,
+                  TOKEN_AMOUNT_MAX_DECIMALS
+                ),
+                usdValue: numberToString(
+                  outputUsdValue,
+                  USD_VALUE_MIN_DECIMALS,
+                  USD_VALUE_MAX_DECIMALS
+                ),
               }}
               steps={getBestRouteSteps(bestRouteData.result.swaps)}
               percentageChange={numberToString(
                 percentageChange,
-                MIN_DECIMAL,
-                TWO_DECIMAL
+                PERCENTAGE_CHANGE_MIN_DECIMALS,
+                PERCENTAGE_CHANGE_MAX_DECIMALS
+              )}
+              totalFee={numberToString(
+                totalFeeInUsd,
+                GAS_FEE_MIN_DECIMALS,
+                GAS_FEE_MAX_DECIMALS
+              )}
+              totalTime={secondsToString(
+                totalArrivalTime(bestRoute?.result?.swaps)
               )}
-              totalFee={numberToString(totalFeeInUsd, MIN_DECIMAL, TWO_DECIMAL)}
-              totalTime={secondsToString(totalArrivalTime(bestRoute))}
             />
           </BestRouteContainer>
         ) : showBestRoute && !fetchingBestRoute ? (
@@ -405,21 +470,20 @@ export function Home() {
           </>
         ) : null}
       </Container>
-      {!fetchingBestRoute && (
-        <RouteErrors
-          openModal={openWarningModal}
-          onToggle={setOpenWarningModal}
-          totalFeeInUsd={totalFeeInUsd}
-          outputUsdValue={outputUsdValue}
-          inputUsdValue={inputUsdValue}
-          percentageChange={percentageChange}
-          highValueLoss={highValueLoss}
-          priceImpactCanNotBeComputed={
-            priceImpactInputCanNotBeComputed ||
-            priceImpactOutputCanNotBeComputed
-          }
-        />
-      )}
+      <RouteErrors
+        openModal={openWarningModal}
+        onToggle={setOpenWarningModal}
+        totalFeeInUsd={totalFeeInUsd}
+        outputUsdValue={outputUsdValue}
+        inputUsdValue={inputUsdValue}
+        percentageChange={percentageChange}
+        highValueLoss={highValueLoss}
+        priceImpactCanNotBeComputed={
+          priceImpactInputCanNotBeComputed || priceImpactOutputCanNotBeComputed
+        }
+        loading={fetchingBestRoute || loadingMetaStatus === 'loading'}
+        extraSpace={!!bestRoute?.result || !bestRoute}
+      />
     </Layout>
   );
 }

package/src/pages/LanguagePage.tsx

@@ -69,7 +69,7 @@ export function LanguagePage() {
           <List
             type={
               <ListItemButton
-                title="language"
+                title={i18n.t('language')}
                 id="_"
                 onClick={() => console.log()}
               />

package/src/pages/LiquiditySourcePage.tsx

@@ -18,7 +18,6 @@ import { Layout } from '../components/Layout';
 import { LoadingLiquiditySourceList } from '../components/LoadingLiquiditySourceList';
 import { SearchInput } from '../components/SearchInput';
 import {
-  LiquiditySourceDivider,
   LiquiditySourceList,
   LiquiditySourceSuffix,
   NotFoundContainer,
@@ -29,7 +28,10 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
 import { containsText } from '../utils/numbers';
-import { getUniqueSwappersGroups } from '../utils/settings';
+import {
+  getUniqueSwappersGroups,
+  sortLiquiditySourcesByGroupTitle,
+} from '../utils/settings';
 
 interface PropTypes {
   supportedSwappers?: string[];
@@ -77,20 +79,22 @@ export function LiquiditySourcePage({
     });
   };
 
-  const list = liquiditySources.map((sourceItem) => {
-    const { selected, groupTitle, logo } = sourceItem;
-    return {
-      start: <Image src={logo} size={22} type="circular" />,
-      onClick: () => toggleLiquiditySource(groupTitle),
-      end: <Checkbox checked={selected} />,
-      title: (
-        <Typography variant="title" size="xmedium">
-          {i18n.t(groupTitle)}
-        </Typography>
-      ),
-      ...sourceItem,
-    };
-  });
+  const list = liquiditySources
+    .sort(sortLiquiditySourcesByGroupTitle)
+    .map((sourceItem) => {
+      const { selected, groupTitle, logo } = sourceItem;
+      return {
+        start: <Image src={logo} size={22} type="circular" />,
+        onClick: () => toggleLiquiditySource(groupTitle),
+        end: <Checkbox checked={selected} />,
+        title: (
+          <Typography variant="title" size="xmedium">
+            {i18n.t(groupTitle)}
+          </Typography>
+        ),
+        ...sourceItem,
+      };
+    });
 
   const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
@@ -124,7 +128,7 @@ export function LiquiditySourcePage({
           fullWidth
           color="light"
           variant="contained"
-          placeholder={i18n.t('Swap {sourceType}', { sourceType })}
+          placeholder={i18n.t('Search {sourceType}', { sourceType })}
           onChange={searchHandler}
         />
         {loadingMetaStatus === 'loading' && <LoadingLiquiditySourceList />}
@@ -146,8 +150,8 @@ export function LiquiditySourcePage({
                       style={{ height: '61px' }}
                       {...sourceItem}
                       selected={false}
+                      hasDivider
                     />
-                    <LiquiditySourceDivider />
                   </React.Fragment>
                 );
               })}

package/src/pages/SelectBlockchainPage.tsx

@@ -1,50 +1,48 @@
 import { i18n } from '@lingui/core';
-import { Divider } from '@rango-dev/ui';
+import { Divider, SelectableCategoryList } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
 import { BlockchainList } from '../components/BlockchainList';
 import { Layout } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
-import { SelectableCategoryList } from '../components/SelectableCategoryList';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useAppStore } from '../store/app';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 
 interface PropTypes {
-  type: 'from' | 'to';
-  supportedBlockchains?: string[];
+  type: 'source' | 'destination';
 }
 
 export function SelectBlockchainPage(props: PropTypes) {
-  const { type, supportedBlockchains } = props;
+  const { type } = props;
   const { navigateBackFrom } = useNavigateBack();
   const [searchedFor, setSearchedFor] = useState<string>('');
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const setToBlockchain = useBestRouteStore.use.setToBlockchain();
   const setFromBlockchain = useBestRouteStore.use.setFromBlockchain();
+  const { loadingStatus } = useMetaStore();
 
-  const blockchains = supportedBlockchains
-    ? useMetaStore.use
-        .meta()
-        .blockchains.filter((chain) =>
-          supportedBlockchains.includes(chain.name)
-        )
-    : useMetaStore.use.meta().blockchains;
+  const blockchains = useAppStore().blockchains({
+    type: type,
+  });
+  const routeKey = type === 'source' ? 'fromBlockchain' : 'toBlockchain';
 
   return (
     <Layout
       header={{
-        onBack: navigateBackFrom.bind(
-          null,
-          navigationRoutes[`${type}Blockchain`]
-        ),
+        onBack: () => {
+          navigateBackFrom(navigationRoutes[routeKey]);
+        },
         title: i18n.t(`Select Blockchain`),
       }}>
       <Divider size={12} />
       <SelectableCategoryList
         setCategory={setBlockchainCategory}
         category={blockchainCategory}
+        blockchains={blockchains}
+        isLoading={loadingStatus === 'loading'}
       />
       <Divider size={24} />
       <SearchInput
@@ -64,12 +62,13 @@ export function SelectBlockchainPage(props: PropTypes) {
         searchedFor={searchedFor}
         blockchainCategory={blockchainCategory}
         onChange={(blockchain) => {
-          if (type === 'from') {
-            setFromBlockchain(blockchain, true);
+          if (type === 'source') {
+            setFromBlockchain(blockchain);
           } else {
-            setToBlockchain(blockchain, true);
+            setToBlockchain(blockchain);
           }
-          navigateBackFrom(navigationRoutes[`${type}Blockchain`]);
+
+          navigateBackFrom(navigationRoutes[routeKey]);
         }}
       />
     </Layout>

package/src/pages/SelectSwapItemsPage.tsx

@@ -1,119 +1,100 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { Asset } from 'rango-sdk';
+import type { BlockchainMeta, Token } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
 import { Divider } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { BlockchainsSection } from '../components/BlockchainsSection';
 import { Layout } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { TokenList } from '../components/TokenList/TokenList';
-import { filterTokens } from '../components/TokenList/TokenList.helpers';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useAppStore } from '../store/app';
 import { useBestRouteStore } from '../store/bestRoute';
-import { useMetaStore } from '../store/meta';
 import { useWalletsStore } from '../store/wallets';
-import { tokensAreEqual } from '../utils/wallets';
+import { getTokensBalanceFromWalletAndSort } from '../utils/wallets';
 
 interface PropTypes {
-  type: 'from' | 'to';
-  supportedBlockchains?: string[];
-  supportedTokens?: Asset[];
-  pinnedTokens?: Asset[];
+  type: 'source' | 'destination';
 }
 
 export function SelectSwapItemsPage(props: PropTypes) {
-  const { type, supportedBlockchains, supportedTokens, pinnedTokens } = props;
+  const { type } = props;
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
-  const { tokens } = useMetaStore.use.meta();
-  const sourceTokens = useBestRouteStore.use.sourceTokens();
-  const destinationTokens = useBestRouteStore.use.destinationTokens();
+  const {
+    fromBlockchain,
+    toBlockchain,
+    setFromToken,
+    setToToken,
+    setFromBlockchain,
+    setToBlockchain,
+  } = useBestRouteStore();
+  const { connectedWallets } = useWalletsStore();
   const [searchedFor, setSearchedFor] = useState<string>('');
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToToken = useBestRouteStore.use.setToToken();
-  const setToBlockchain = useBestRouteStore.use.setToBlockchain();
-  const setFromBlockchain = useBestRouteStore.use.setFromBlockchain();
-  const toBlockchain = useBestRouteStore.use.toBlockchain();
-  const fromBlockchain = useBestRouteStore.use.fromBlockchain();
-  const connectedWallets = useWalletsStore.use.connectedWallets();
-  const loadingWallet = useWalletsStore.use.loading();
-  const setTokensWithBalance = useMetaStore.use.setTokensWithBalance();
 
-  const blockchains = supportedBlockchains
-    ? useMetaStore.use
-        .meta()
-        .blockchains.filter((chain) =>
-          supportedBlockchains.includes(chain.name)
-        )
-    : useMetaStore.use.meta().blockchains;
-  const allTokens = supportedTokens
-    ? tokens.filter((token) =>
-        tokens.some((supportedToken) => tokensAreEqual(supportedToken, token))
-      )
-    : tokens;
-  const supportedSourceTokens = supportedTokens
-    ? sourceTokens.filter((token) =>
-        supportedTokens.some((supportedToken) =>
-          tokensAreEqual(supportedToken, token)
-        )
-      )
-    : sourceTokens;
+  const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;
+  const selectedBlockchainName = selectedBlockchain?.name ?? '';
 
-  const supportedDestinationTokens = supportedTokens
-    ? destinationTokens.filter((token) =>
-        supportedTokens.some((supportedToken) =>
-          tokensAreEqual(supportedToken, token)
-        )
-      )
-    : destinationTokens;
-
-  const tokensByType =
-    type === 'from' ? supportedSourceTokens : supportedDestinationTokens;
-
-  const tokenList = (tokensByType.length ? tokensByType : allTokens).map(
-    (token) => ({
-      ...token,
-      pin: pinnedTokens?.some((pinnedToken) =>
-        tokensAreEqual(pinnedToken, token)
-      ),
-    })
+  // Tokens & Blockchains list
+  const blockchains = useAppStore().blockchains({
+    type: type,
+  });
+  const tokens = useAppStore().tokens({
+    type,
+    blockchain: selectedBlockchainName,
+    searchFor: searchedFor,
+  });
+  const tokensList = getTokensBalanceFromWalletAndSort(
+    tokens,
+    connectedWallets
   );
 
-  useEffect(() => {
-    if (connectedWallets.length && !loadingWallet) {
-      setTokensWithBalance();
+  // Actions
+  const updateBlockchain = (blockchain: BlockchainMeta) => {
+    if (type === 'source') {
+      setFromBlockchain(blockchain);
+    } else {
+      setToBlockchain(blockchain);
+    }
+  };
+
+  const updateToken = (token: Token) => {
+    if (type === 'source') {
+      setFromToken(token);
+    } else {
+      setToToken(token);
     }
-  }, [connectedWallets, loadingWallet]);
+  };
 
   return (
     <Layout
       header={{
-        onBack: navigateBackFrom.bind(null, navigationRoutes.home),
-        title: i18n.t('Swap {type}', { type }),
+        onBack: () =>
+          navigateBackFrom(
+            type === 'source'
+              ? navigationRoutes.fromSwap
+              : navigationRoutes.toSwap
+          ),
+        title: i18n.t('Swap {type}', {
+          type: type === 'source' ? 'from' : 'to',
+        }),
       }}>
       <BlockchainsSection
         blockchains={blockchains}
-        type={type}
-        blockchain={type === 'from' ? fromBlockchain : toBlockchain}
+        type={type == 'source' ? 'from' : 'to'}
+        blockchain={type === 'source' ? fromBlockchain : toBlockchain}
         onMoreClick={() =>
           navigate(
-            type === 'from'
+            type === 'source'
               ? navigationRoutes.fromBlockchain
               : navigationRoutes.toBlockchain
           )
         }
         onChange={(blockchain) => {
-          {
-            if (type === 'from') {
-              setFromBlockchain(blockchain, true);
-            } else {
-              setToBlockchain(blockchain, true);
-            }
-          }
+          updateBlockchain(blockchain);
         }}
       />
       <Divider size={24} />
@@ -129,22 +110,19 @@ export function SelectSwapItemsPage(props: PropTypes) {
       />
       <Divider size={16} />
       <TokenList
-        list={filterTokens(tokenList, searchedFor)}
+        list={tokensList}
+        selectedBlockchain={selectedBlockchainName}
+        searchedFor={searchedFor}
         onChange={(token) => {
-          const blockchain = blockchains.find(
+          updateToken(token);
+
+          const tokenBlockchain = blockchains.find(
             (chain) => token.blockchain === chain.name
           );
-          if (type === 'from') {
-            setFromToken(token);
-            if (!!blockchain) {
-              setFromBlockchain(blockchain, true);
-            }
-          } else {
-            setToToken(token);
-            if (!!blockchain) {
-              setToBlockchain(blockchain, true);
-            }
+          if (tokenBlockchain) {
+            updateBlockchain(tokenBlockchain);
           }
+
           navigateBackFrom(navigationRoutes.fromSwap);
         }}
       />