@rango-dev/widget-embedded 0.1.10-next.92 → 0.1.10-next.94

package/src/pages/ConfirmSwapPage.tsx

@@ -6,11 +6,14 @@ import { useSettingsStore } from '../store/settings';
 import { ConfirmSwapExtraMessages } from '../components/warnings/ConfirmSwapExtraMessages';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { confirmSwap, useConfirmSwapStore } from '../store/confirmSwap';
 import { ConfirmSwapErrors } from '../components/ConfirmSwapErrors';
 import { ConfirmSwapWarnings } from '../components/ConfirmSwapWarnings';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useUiStore } from '../store/ui';
+import { useConfirmSwap } from '../hooks/useConfirmSwap';
+import { ConfirmSwapErrorTypes } from '../types';
+import { useMetaStore } from '../store/meta';
+import { getBestRouteWithCalculatedFees } from '../utils/routing';
 
 export function ConfirmSwapPage() {
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
@@ -19,18 +22,22 @@ export function ConfirmSwapPage() {
   const navigate = useNavigate();
 
   const bestRoute = useBestRouteStore.use.bestRoute();
+  const fetchingBestRoute = useBestRouteStore.use.loading();
+  const { tokens } = useMetaStore.use.meta();
 
-  const loading = useConfirmSwapStore.use.loading();
-  const warnings = useConfirmSwapStore.use.warnings();
-  const errors = useConfirmSwapStore.use.errors();
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
   const selectedSlippage = customSlippage || slippage;
+  const { loading, errors, warnings, confirmSwap } = useConfirmSwap();
+
+  const showHighSlippageWarning = !errors.find(
+    (error) => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
+  );
 
   return (
     <ConfirmSwap
       onConfirm={() => {
-        confirmSwap().then((swap) => {
+        confirmSwap?.().then((swap) => {
           if (swap) {
             manager?.create('swap', { swapDetails: swap });
             setSelectedSwap(swap.requestId);
@@ -41,19 +48,21 @@ export function ConfirmSwapPage() {
         });
       }}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
-      bestRoute={bestRoute}
+      bestRoute={getBestRouteWithCalculatedFees(bestRoute, tokens)}
       loading={loading}
       errors={ConfirmSwapErrors(errors)}
       warnings={ConfirmSwapWarnings(warnings)}
       extraMessages={
-        <ConfirmSwapExtraMessages selectedSlippage={selectedSlippage} />
+        showHighSlippageWarning && (
+          <ConfirmSwapExtraMessages selectedSlippage={selectedSlippage} />
+        )
       }
       confirmButtonTitle={
         warnings.length > 0 || errors.length > 0
           ? 'Proceed anyway!'
           : 'Confirm swap!'
       }
-      confirmButtonDisabled={errors.length > 0}
+      confirmButtonDisabled={fetchingBestRoute}
     />
   );
 }

package/src/pages/ConfirmWalletsPage.tsx

@@ -61,7 +61,7 @@ export function ConfirmWalletsPage() {
       requiredWallets={getRequiredChains(bestRoute)}
       selectableWallets={selectableWallets}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmWallets)}
-      swap={bestRoute!}
+      swap={bestRoute}
       fromAmount={fromAmount}
       toAmount={toAmount}
       onConfirm={() =>

package/src/pages/Home.tsx

@@ -87,7 +87,6 @@ export function Home(props: PropTypes) {
   const tokens = useMetaStore.use.meta().tokens;
   const fetchingBestRoute = useBestRouteStore.use.loading();
   const bestRouteError = useBestRouteStore.use.error();
-
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const accounts = useWalletsStore.use.accounts();
 

package/src/pages/SelectChainPage.tsx

@@ -22,8 +22,6 @@ export function SelectChainPage(props: PropTypes) {
   const toChain = useBestRouteStore.use.toChain();
   const setFromChain = useBestRouteStore.use.setFromChain();
   const setToChain = useBestRouteStore.use.setToChain();
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToToken = useBestRouteStore.use.setToToken();
 
   const { navigateBackFrom } = useNavigateBack();
 
@@ -34,11 +32,8 @@ export function SelectChainPage(props: PropTypes) {
       selected={type === 'from' ? fromChain : toChain}
       loadingStatus={loadingStatus}
       onChange={(chain) => {
-        if (type === 'from') setFromChain(chain);
-        else setToChain(chain);
-        if (type === 'from' && fromChain?.name != chain.name)
-          setFromToken(null);
-        if (type === 'to' && toChain?.name != chain.name) setToToken(null);
+        if (type === 'from') setFromChain(chain, true);
+        else setToChain(chain, true);
         navigateBackFrom(navigationRoutes.fromChain);
       }}
       onBack={navigateBackFrom.bind(null, navigationRoutes.fromChain)}

package/src/pages/SelectTokenPage.tsx

@@ -1,16 +1,10 @@
 import React from 'react';
 import { TokenSelector } from '@rango-dev/ui';
 import { useBestRouteStore } from '../store/bestRoute';
-import { useMetaStore } from '../store/meta';
 import { Token } from 'rango-sdk';
-import { numberToString } from '../utils/numbers';
-import BigNumber from 'bignumber.js';
-import { getBalanceFromWallet } from '../utils/wallets';
-import { useWalletsStore } from '../store/wallets';
-import { sortedTokens } from '../utils/wallets';
-import { ZERO } from '../constants/numbers';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { tokensAreEqual } from '../utils/wallets';
 
 interface PropTypes {
   type: 'from' | 'to';
@@ -28,65 +22,36 @@ export function SelectTokenPage(props: PropTypes) {
   const { navigateBackFrom } = useNavigateBack();
 
   const { type, supportedTokens } = props;
-  const tokens =
+  const sourceTokens = useBestRouteStore.use.sourceTokens();
+  const destinationTokens = useBestRouteStore.use.destinationTokens();
+  const supportedSourceTokens =
     supportedTokens === 'all'
-      ? useMetaStore.use.meta().tokens
-      : supportedTokens;
-  const fromChain = useBestRouteStore.use.fromChain();
-  const toChain = useBestRouteStore.use.toChain();
+      ? sourceTokens
+      : sourceTokens.filter((token) =>
+          supportedTokens.some((supportedToken) =>
+            tokensAreEqual(supportedToken, token)
+          )
+        );
+
+  const supportedDestinationTokens =
+    supportedTokens === 'all'
+      ? destinationTokens
+      : destinationTokens.filter((token) =>
+          supportedTokens.some((supportedToken) =>
+            tokensAreEqual(supportedToken, token)
+          )
+        );
+  console.log(supportedSourceTokens);
+
   const fromToken = useBestRouteStore.use.fromToken();
   const toToken = useBestRouteStore.use.toToken();
   const setFromToken = useBestRouteStore.use.setFromToken();
   const setToToken = useBestRouteStore.use.setToToken();
 
-  const balance = useWalletsStore.use.balances();
-
-  const tokenWithSelectedChain = tokens.filter((token) => {
-    if (type === 'from') return token.blockchain === fromChain?.name;
-    return token.blockchain === toChain?.name;
-  });
-
-  const TokensWithBalance: TokenWithBalance[] = tokenWithSelectedChain.map(
-    (token) => {
-      const tokenAmount = numberToString(
-        new BigNumber(
-          getBalanceFromWallet(
-            balance,
-            token.blockchain,
-            token.symbol,
-            token.address
-          )?.amount || ZERO
-        )
-      );
-
-      let tokenUsdValue = '';
-      if (token.usdPrice)
-        tokenUsdValue = numberToString(
-          new BigNumber(
-            getBalanceFromWallet(
-              balance,
-              token.blockchain,
-              token.symbol,
-              token.address
-            )?.amount || ZERO
-          ).multipliedBy(token.usdPrice)
-        );
-      return {
-        ...token,
-        balance: {
-          amount: tokenAmount !== '0' ? tokenAmount : '',
-          usdValue: tokenUsdValue !== '0' ? tokenUsdValue : '',
-        },
-      };
-    }
-  );
-
-  const sortedTokenList = sortedTokens(TokensWithBalance, type, balance);
-
   return (
     <TokenSelector
       type={type === 'from' ? 'Source' : 'Destination'}
-      list={sortedTokenList}
+      list={type == 'from' ? supportedSourceTokens : supportedDestinationTokens}
       selected={type === 'from' ? fromToken : toToken}
       onChange={(token) => {
         if (type === 'from') setFromToken(token);

package/src/pages/SettingsPage.tsx

@@ -36,11 +36,11 @@ export function SettingsPage({ supportedSwappers }: PropTypes) {
     type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
     selected: boolean;
   }> = [];
-  removeDuplicateFrom(swappers.map(s => s.swapperGroup))
-    .map(swapperGroup => {
-      return swappers.find(s => s.swapperGroup === swapperGroup);
+  removeDuplicateFrom(swappers.map((s) => s.swapperGroup))
+    .map((swapperGroup) => {
+      return swappers.find((s) => s.swapperGroup === swapperGroup);
     })
-    .find(s => {
+    .find((s) => {
       if (s) {
         for (const type of s.types) {
           if (supportedSwappers !== 'all') {
@@ -76,11 +76,10 @@ export function SettingsPage({ supportedSwappers }: PropTypes) {
     <Settings
       slippages={SLIPPAGES}
       selectedSlippage={slippage}
-      onSlippageChange={slippage => setSlippage(slippage)}
-      onLiquiditySourcesClick={navigate.bind(
-        null,
-        navigationRoutes.liquiditySources
-      )}
+      onSlippageChange={(slippage) => setSlippage(slippage)}
+      onLiquiditySourcesClick={() =>
+        navigate(navigationRoutes.liquiditySources)
+      }
       onBack={navigateBackFrom.bind(null, navigationRoutes.settings)}
       liquiditySources={supportedUniqueSwappersGroups}
       selectedLiquiditySources={supportedUniqueSwappersGroups.filter(

package/src/pages/WalletsPage.tsx

@@ -7,9 +7,10 @@ import {
   WalletState,
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
-import { getlistWallet } from '../utils/wallets';
-import { WalletType } from '@rango-dev/wallets-shared';
+import { getlistWallet, sortWalletsBasedOnState } from '../utils/wallets';
+import { WalletType, detectMobileScreens } from '@rango-dev/wallets-shared';
 import { useWallets } from '@rango-dev/wallets-core';
+
 import { useUiStore } from '../store/ui';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { navigationRoutes } from '../constants/navigationRoutes';
@@ -40,6 +41,11 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
     getWalletInfo,
     supportedWallets === 'all' ? Object.values(WalletType) : supportedWallets
   );
+
+  let sortedWallets = detectMobileScreens()
+    ? wallets.filter((wallet) => wallet.showOnMobile)
+    : wallets;
+  sortedWallets = sortWalletsBasedOnState(sortedWallets);
   const [walletErrorMessage, setWalletErrorMessage] = useState('');
   const toggleConnectWalletsButton =
     useUiStore.use.toggleConnectWalletsButton();
@@ -61,7 +67,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
         await connect(type);
       }
     } catch (e) {
-      setWalletErrorMessage('Error: ' + e.message);
+      setWalletErrorMessage('Error: ' + (e as any)?.message);
     }
   };
 
@@ -72,7 +78,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
 
   return (
     <SecondaryPage
-      title={t('Select Wallet')}
+      title={t('Select Wallet') || ''}
       textField={false}
       onBack={navigateBackFrom.bind(null, navigationRoutes.wallets)}
     >
@@ -85,8 +91,12 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
           </AlertContainer>
         )}
         <ListContainer>
-          {wallets.map((info, index) => (
-            <Wallet {...info} key={index} onClick={onSelectWallet} />
+          {sortedWallets.map((wallet, index) => (
+            <Wallet
+              {...wallet}
+              key={`${index}-${wallet.type}`}
+              onClick={onSelectWallet}
+            />
           ))}
         </ListContainer>
       </>

package/src/store/bestRoute.ts

@@ -3,29 +3,41 @@ import { Token } from 'rango-sdk';
 import { create } from 'zustand';
 import BigNumber from 'bignumber.js';
 import { ZERO } from '../constants/numbers';
-import { getBestRouteToTokenUsdPrice } from '../utils/routing';
+import {
+  getBestRouteToTokenUsdPrice,
+  isRouteParametersChanged,
+} from '../utils/routing';
 import createSelectors from './selectors';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { httpService } from '../services/httpService';
 import { useSettingsStore } from './settings';
 import { createBestRouteRequestBody } from '../utils/swap';
+import { useMetaStore } from './meta';
+import { getDefaultToken, getSortedTokens } from '../utils/wallets';
+import { useWalletsStore } from './wallets';
+import { TokenWithBalance } from '../pages/SelectTokenPage';
 
 const getUsdValue = (token: Token | null, amount: string) =>
   new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
 
-interface RouteState {
+export interface RouteState {
   fromChain: BlockchainMeta | null;
   toChain: BlockchainMeta | null;
   inputAmount: string;
   inputUsdValue: BigNumber;
   outputAmount: BigNumber | null;
   outputUsdValue: BigNumber;
-  fromToken: Token | null;
-  toToken: Token | null;
+  fromToken: TokenWithBalance | null;
+  toToken: TokenWithBalance | null;
   loading: boolean;
   error: string;
-  setFromChain: (chain: BlockchainMeta | null) => void;
-  setToChain: (chian: BlockchainMeta | null) => void;
+  sourceTokens: Token[];
+  destinationTokens: Token[];
+  setFromChain: (
+    chain: BlockchainMeta | null,
+    setDefaultToken?: boolean
+  ) => void;
+  setToChain: (chian: BlockchainMeta | null, setDefaultToken?: boolean) => void;
   setFromToken: (token: Token | null) => void;
   setToToken: (token: Token | null) => void;
   setInputAmount: (amount: string) => void;
@@ -47,6 +59,8 @@ export const useBestRouteStore = createSelectors(
       bestRoute: null,
       loading: false,
       error: '',
+      sourceTokens: [],
+      destinationTokens: [],
       setBestRoute: (bestRoute) =>
         set((state) => {
           let outputAmount: BigNumber | null = null;
@@ -69,10 +83,30 @@ export const useBestRouteStore = createSelectors(
             }),
           };
         }),
-      setFromChain: (chain) =>
-        set(() => ({
-          fromChain: chain,
-        })),
+      setFromChain: (chain, setDefaultToken) => {
+        set((state) => {
+          if (state.fromChain?.name === chain?.name) return {};
+          const tokens = useMetaStore.getState().meta.tokens;
+          const balances = useWalletsStore.getState().balances;
+          const sortedTokens = getSortedTokens(
+            chain,
+            tokens,
+            balances,
+            state.destinationTokens
+          );
+          const fromToken = getDefaultToken(sortedTokens, state.toToken);
+          return {
+            fromChain: chain,
+            sourceTokens: sortedTokens,
+            ...(setDefaultToken && {
+              fromToken,
+            }),
+            ...(!!state.inputAmount && {
+              inputUsdValue: getUsdValue(fromToken, state.inputAmount),
+            }),
+          };
+        });
+      },
       setFromToken: (token) =>
         set((state) => ({
           fromToken: token,
@@ -80,21 +114,44 @@ export const useBestRouteStore = createSelectors(
             inputUsdValue: getUsdValue(token, state.inputAmount),
           }),
         })),
-      setToChain: (chain) =>
-        set(() => ({
-          toChain: chain,
-        })),
+      setToChain: (chain, setDefaultToken) => {
+        set((state) => {
+          if (state.toChain?.name === chain?.name) return {};
+          const tokens = useMetaStore.getState().meta.tokens;
+          const balances = useWalletsStore.getState().balances;
+          const sortedTokens = getSortedTokens(
+            chain,
+            tokens,
+            balances,
+            state.destinationTokens
+          );
+
+          return {
+            toChain: chain,
+            destinationTokens: sortedTokens,
+            ...(setDefaultToken && {
+              toToken: getDefaultToken(sortedTokens, state.fromToken),
+            }),
+          };
+        });
+      },
       setToToken: (token) =>
         set(() => ({
           toToken: token,
         })),
-      setInputAmount: (amount) =>
+      setInputAmount: (amount) => {
         set((state) => ({
           inputAmount: amount,
+          ...(!amount && {
+            outputAmount: new BigNumber(0),
+            outputUsdValue: new BigNumber(0),
+            bestRoute: null,
+          }),
           ...(!!state.fromToken && {
             inputUsdValue: getUsdValue(state.fromToken, amount),
           }),
-        })),
+        }));
+      },
     }))
   )
 );
@@ -111,7 +168,7 @@ const bestRoute = (
     if (!fromToken || !toToken || !inputAmount) return;
     abortController?.abort();
     abortController = new AbortController();
-    const userSlippage = customSlippage | slippage;
+    const userSlippage = !!customSlippage ? customSlippage : slippage;
     const requestBody = createBestRouteRequestBody(
       fromToken,
       toToken,
@@ -122,7 +179,12 @@ const bestRoute = (
       userSlippage,
       false
     );
-    bestRouteStore.setState({ loading: true, bestRoute: null });
+    bestRouteStore.setState({
+      loading: true,
+      bestRoute: null,
+      outputAmount: null,
+      outputUsdValue: new BigNumber(0),
+    });
     httpService
       .getBestRoute(requestBody, {
         signal: abortController.signal,
@@ -154,18 +216,7 @@ const bestRoute = (
     fetchBestRoute.bind(null),
     {
       equalityFn: (prevState, state) => {
-        if (
-          prevState.fromChain?.name !== state.fromChain?.name ||
-          prevState.toChain?.name !== state.toChain?.name ||
-          prevState.fromToken?.symbol !== state.fromToken?.symbol ||
-          prevState.toToken?.symbol !== state.toToken?.symbol ||
-          prevState.fromToken?.blockchain !== state.fromToken?.blockchain ||
-          prevState.toToken?.blockchain !== state.toToken?.blockchain ||
-          prevState.fromToken?.address !== state.fromToken?.address ||
-          prevState.toToken?.address !== state.toToken?.address ||
-          prevState.inputAmount !== state.inputAmount
-        )
-          return false;
+        if (isRouteParametersChanged(prevState, state)) return false;
         else return true;
       },
     }
@@ -180,13 +231,7 @@ const bestRoute = (
     fetchBestRoute.bind(null),
     {
       equalityFn: (prevState, state) => {
-        if (
-          prevState.slippage !== state.slippage ||
-          prevState.customSlippage !== state.customSlippage ||
-          prevState.disabledLiquiditySources.length !==
-            state.disabledLiquiditySources.length
-        )
-          return false;
+        if (isRouteParametersChanged(prevState, state)) return false;
         else return true;
       },
     }

package/src/store/settings.ts

@@ -7,7 +7,7 @@ import createSelectors from './selectors';
 
 type Theme = 'auto' | 'dark' | 'light';
 
-interface Settings {
+export interface SettingsState {
   slippage: number;
   customSlippage: number | null;
   infiniteApprove: boolean;
@@ -22,7 +22,7 @@ interface Settings {
 }
 
 export const useSettingsStore = createSelectors(
-  create<Settings>()(
+  create<SettingsState>()(
     persist(
       subscribeWithSelector((set) => ({
         slippage: DEFAULT_SLIPPAGE,

package/src/store/wallets.ts

@@ -5,14 +5,17 @@ import { subscribeWithSelector } from 'zustand/middleware';
 import { httpService } from '../services/httpService';
 import {
   getRequiredChains,
+  getTokensWithBalance,
   isAccountAndBalanceMatched,
   makeBalanceFor,
   resetBalanceState,
   SelectedWallet,
+  sortTokens,
 } from '../utils/wallets';
 import { useBestRouteStore } from './bestRoute';
 import { useMetaStore } from './meta';
 import createSelectors from './selectors';
+import { shallow } from 'zustand/shallow';
 
 export interface Account {
   chain: string;
@@ -162,3 +165,26 @@ export const useWalletsStore = createSelectors(
     }))
   )
 );
+
+useWalletsStore.subscribe(
+  (state) => state.balances,
+  (balances) => {
+    useBestRouteStore.setState(({ sourceTokens, destinationTokens }) => {
+      const sourceTokensWithBalance = getTokensWithBalance(
+        sourceTokens,
+        balances
+      );
+      const destinationTokensWithBalance = getTokensWithBalance(
+        destinationTokens,
+        balances
+      );
+      return {
+        sourceTokens: sortTokens(sourceTokensWithBalance),
+        destinationTokens: sortTokens(destinationTokensWithBalance),
+      };
+    });
+  },
+  {
+    equalityFn: shallow,
+  }
+);

package/src/types/index.ts

@@ -1,2 +1,3 @@
 export * from './swap';
 export * from './config';
+export * from './routing';

package/src/types/routing.ts

@@ -0,0 +1,60 @@
+import { RouteState } from '../store/bestRoute';
+import { SettingsState } from '../store/settings';
+
+export interface BestRouteParams {
+  fromChain?: RouteState['fromChain'];
+  toChain?: RouteState['toChain'];
+  fromToken?: RouteState['fromToken'];
+  toToken?: RouteState['toToken'];
+  inputAmount?: RouteState['inputAmount'];
+  slippage?: SettingsState['slippage'];
+  customSlippage?: SettingsState['customSlippage'];
+  disabledLiquiditySources?: SettingsState['disabledLiquiditySources'];
+}
+
+export enum ConfirmSwapErrorTypes {
+  NO_ROUTE,
+  ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
+  REQUEST_FAILED,
+  INSUFFICIENT_SLIPPAGE,
+}
+
+export type ConfirmSwapError =
+  | {
+      type: ConfirmSwapErrorTypes.REQUEST_FAILED;
+      status?: number;
+    }
+  | {
+      type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE;
+      minRequiredSlippage: number | null;
+    }
+  | {
+      type: Exclude<
+        ConfirmSwapErrorTypes,
+        | ConfirmSwapErrorTypes.REQUEST_FAILED
+        | ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
+      >;
+    };
+
+export type ConfirmSwapWarnings =
+  | {
+      type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED;
+      newOutputAmount: string;
+      percentageChange: string;
+    }
+  | { type: ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE; messages: string[] }
+  | {
+      type: Exclude<
+        ConfirmSwapWarningTypes,
+        | ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
+        | ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE
+      >;
+    };
+
+export enum ConfirmSwapWarningTypes {
+  ROUTE_UPDATED,
+  ROUTE_SWAPPERS_UPDATED,
+  ROUTE_COINS_UPDATED,
+  ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+  INSUFFICIENT_BALANCE,
+}