@rango-dev/widget-embedded 0.1.10-next.99 → 0.1.10

package/src/pages/WalletsPage.tsx

@@ -4,8 +4,9 @@ import {
   styled,
   Wallet,
   WalletState,
+  WalletInfo,
 } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { getlistWallet, sortWalletsBasedOnState } from '../utils/wallets';
 import { WalletType, detectMobileScreens } from '@rango-dev/wallets-shared';
 import { useWallets } from '@rango-dev/wallets-core';
@@ -14,6 +15,9 @@ import { useUiStore } from '../store/ui';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useTranslation } from 'react-i18next';
+import { useMetaStore } from '../store/meta';
+import { Spinner } from '@rango-dev/ui';
+import { LoadingFailedAlert } from '@rango-dev/ui';
 
 interface PropTypes {
   supportedWallets: 'all' | WalletType[];
@@ -24,9 +28,17 @@ const ListContainer = styled('div', {
   display: 'grid',
   gap: '.5rem',
   gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
-  height: '450px',
   alignContent: 'baseline',
   padding: '0.5rem',
+  overflowY: 'auto',
+});
+
+export const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  position: 'absolute',
+  top: '50%',
 });
 
 const AlertContainer = styled('div', {
@@ -40,6 +52,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
     getWalletInfo,
     supportedWallets === 'all' ? Object.values(WalletType) : supportedWallets
   );
+  const walletsRef = useRef<WalletInfo[]>();
 
   let sortedWallets = detectMobileScreens()
     ? wallets.filter((wallet) => wallet.showOnMobile)
@@ -48,6 +61,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
   const [walletErrorMessage, setWalletErrorMessage] = useState('');
   const toggleConnectWalletsButton =
     useUiStore.use.toggleConnectWalletsButton();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const { t } = useTranslation();
 
   const onSelectWallet = async (type: WalletType) => {
@@ -69,12 +83,27 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
       setWalletErrorMessage('Error: ' + (e as any)?.message);
     }
   };
-
+  const disconnectConnectingWallets = () => {
+    const connectingWallets =
+      walletsRef.current?.filter(
+        (wallet) => wallet.state === WalletState.CONNECTING
+      ) || [];
+    for (const wallet of connectingWallets) {
+      disconnect(wallet.type);
+    }
+  };
   useEffect(() => {
     toggleConnectWalletsButton();
-    return () => toggleConnectWalletsButton();
+    return () => {
+      disconnectConnectingWallets();
+      toggleConnectWalletsButton();
+    };
   }, []);
 
+  useEffect(() => {
+    walletsRef.current = wallets;
+  }, [wallets]);
+
   return (
     <SecondaryPage
       title={t('Select Wallet') || ''}
@@ -87,14 +116,21 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
             <Alert type="error">{walletErrorMessage}</Alert>
           </AlertContainer>
         )}
+        {loadingMetaStatus === 'loading' && (
+          <LoaderContainer className="loader">
+            <Spinner size={24} />
+          </LoaderContainer>
+        )}
+        {loadingMetaStatus === 'failed' && <LoadingFailedAlert />}
         <ListContainer>
-          {sortedWallets.map((wallet, index) => (
-            <Wallet
-              {...wallet}
-              key={`${index}-${wallet.type}`}
-              onClick={onSelectWallet}
-            />
-          ))}
+          {loadingMetaStatus === 'success' &&
+            sortedWallets.map((wallet, index) => (
+              <Wallet
+                {...wallet}
+                key={`${index}-${wallet.type}`}
+                onClick={onSelectWallet}
+              />
+            ))}
         </ListContainer>
       </>
     </SecondaryPage>

package/src/store/bestRoute.ts

@@ -13,10 +13,15 @@ import { httpService } from '../services/httpService';
 import { useSettingsStore } from './settings';
 import { calcOutputUsdValue, createBestRouteRequestBody } from '../utils/swap';
 import { useMetaStore } from './meta';
-import { getDefaultToken, getSortedTokens } from '../utils/wallets';
+import {
+  getDefaultToken,
+  getSortedTokens,
+  tokensAreEqual,
+} from '../utils/wallets';
 import { useWalletsStore } from './wallets';
 import { TokenWithBalance } from '../pages/SelectTokenPage';
-
+import { PendingSwap } from '@rango-dev/queue-manager-rango-preset/dist/shared';
+import { debounce } from '../utils/common';
 const getUsdValue = (token: Token | null, amount: string) =>
   new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
 
@@ -43,6 +48,7 @@ export interface RouteState {
   setInputAmount: (amount: string) => void;
   bestRoute: BestRouteResponse | null;
   setBestRoute: (bestRoute: BestRouteResponse | null) => void;
+  retry: (pendingSwap: PendingSwap) => void;
 }
 
 export const useBestRouteStore = createSelectors(
@@ -65,6 +71,7 @@ export const useBestRouteStore = createSelectors(
         set((state) => {
           let outputAmount: BigNumber | null = null;
           let outputUsdValue: BigNumber = ZERO;
+          if (!state.inputAmount || state.inputAmount === '0') return {};
           if (!!bestRoute) {
             outputAmount = !!bestRoute.result?.outputAmount
               ? new BigNumber(bestRoute.result?.outputAmount)
@@ -139,6 +146,7 @@ export const useBestRouteStore = createSelectors(
           toToken: token,
         })),
       setInputAmount: (amount) => {
+        console.log(amount, typeof amount);
         set((state) => ({
           inputAmount: amount,
           ...(!amount && {
@@ -151,6 +159,71 @@ export const useBestRouteStore = createSelectors(
           }),
         }));
       },
+      retry: (pendingSwap) => {
+        const { tokens, blockchains } = useMetaStore.getState().meta;
+        const balances = useWalletsStore.getState().balances;
+        const failedIndex =
+          pendingSwap.status === 'failed'
+            ? pendingSwap.steps.findIndex((s) => s.status === 'failed')
+            : null;
+
+        if (failedIndex === null || failedIndex < 0) return;
+
+        const firstStep = pendingSwap.steps[0];
+        const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1];
+        const fromChain =
+          blockchains.find(
+            (blockchain) => blockchain.name === firstStep.fromBlockchain
+          ) || null;
+        const toChain =
+          blockchains.find(
+            (blockchain) => blockchain.name === lastStep.toBlockchain
+          ) || null;
+
+        const fromToken = tokens.find((token) =>
+          tokensAreEqual(token, {
+            blockchain: firstStep.fromBlockchain,
+            symbol: firstStep.fromSymbol,
+            address: firstStep.fromSymbolAddress,
+          })
+        );
+
+        const toToken = tokens.find((token) =>
+          tokensAreEqual(token, {
+            blockchain: lastStep.toBlockchain,
+            symbol: lastStep.toSymbol,
+            address: lastStep.toSymbolAddress,
+          })
+        );
+        const sortedSourceTokens = getSortedTokens(
+          fromChain,
+          tokens,
+          balances,
+          []
+        );
+        const sortedDestinationTokens = getSortedTokens(
+          toChain,
+          tokens,
+          balances,
+          []
+        );
+        const inputAmount = pendingSwap.inputAmount;
+        set({
+          fromChain,
+          fromToken,
+          inputAmount,
+          outputAmount: null,
+          inputUsdValue: getUsdValue(fromToken || null, inputAmount),
+          outputUsdValue: new BigNumber(0),
+          toChain,
+          toToken,
+          bestRoute: null,
+          loading: false,
+          error: '',
+          sourceTokens: sortedSourceTokens,
+          destinationTokens: sortedDestinationTokens,
+        });
+      },
     }))
   )
 );
@@ -164,7 +237,7 @@ const bestRoute = (
     const { fromToken, toToken, inputAmount } = bestRouteStore.getState();
     const { slippage, customSlippage, disabledLiquiditySources } =
       settingsStore.getState();
-    if (!fromToken || !toToken || !inputAmount) return;
+    if (!fromToken || !toToken || !inputAmount || inputAmount === '0') return;
     abortController?.abort();
     abortController = new AbortController();
     const userSlippage = !!customSlippage ? customSlippage : slippage;
@@ -178,12 +251,13 @@ const bestRoute = (
       userSlippage,
       false
     );
-    bestRouteStore.setState({
-      loading: true,
-      bestRoute: null,
-      outputAmount: null,
-      outputUsdValue: new BigNumber(0),
-    });
+    if (!bestRouteStore.getState().loading)
+      bestRouteStore.setState({
+        loading: true,
+        bestRoute: null,
+        outputAmount: null,
+        outputUsdValue: new BigNumber(0),
+      });
     httpService
       .getBestRoute(requestBody, {
         signal: abortController.signal,
@@ -203,6 +277,31 @@ const bestRoute = (
       });
   };
 
+  const debouncedFetchBestRoute = debounce(fetchBestRoute, 600);
+
+  const bestRouteParamsListener = () => {
+    const { fromToken, toToken, inputAmount, inputUsdValue } =
+      useBestRouteStore.getState();
+    if (!inputAmount || inputAmount === '0') return;
+
+    if (tokensAreEqual(fromToken, toToken))
+      return bestRouteStore.setState({
+        loading: false,
+        bestRoute: null,
+        outputAmount: new BigNumber(inputAmount),
+        outputUsdValue: inputUsdValue,
+      });
+
+    if (!bestRouteStore.getState().loading)
+      bestRouteStore.setState({
+        loading: true,
+        bestRoute: null,
+        outputAmount: null,
+        outputUsdValue: new BigNumber(0),
+      });
+    debouncedFetchBestRoute();
+  };
+
   useBestRouteStore.subscribe(
     (state) => ({
       fromChain: state.fromChain,
@@ -211,8 +310,7 @@ const bestRoute = (
       toToken: state.toToken,
       inputAmount: state.inputAmount,
     }),
-
-    fetchBestRoute.bind(null),
+    bestRouteParamsListener,
     {
       equalityFn: (prevState, state) => {
         if (isRouteParametersChanged(prevState, state)) return false;
@@ -227,7 +325,7 @@ const bestRoute = (
       customSlippage: state.customSlippage,
       disabledLiquiditySources: state.disabledLiquiditySources,
     }),
-    fetchBestRoute.bind(null),
+    bestRouteParamsListener,
     {
       equalityFn: (prevState, state) => {
         if (isRouteParametersChanged(prevState, state)) return false;

package/src/store/ui.ts

@@ -4,18 +4,22 @@ import createSelectors from './selectors';
 interface UiState {
   connectWalletsButtonDisabled: boolean;
   selectedSwapRequestId: string | null;
+  currentPage: string;
   toggleConnectWalletsButton: () => void;
   setSelectedSwap: (requestId: string | null) => void;
+  setCurrentPage: (path: string) => void;
 }
 
 export const useUiStore = createSelectors(
   create<UiState>()((set) => ({
     connectWalletsButtonDisabled: false,
     selectedSwapRequestId: null,
+    currentPage: '',
     toggleConnectWalletsButton: () =>
       set((state) => ({
         connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled,
       })),
     setSelectedSwap: (requestId) => set({ selectedSwapRequestId: requestId }),
+    setCurrentPage: (path) => set({ currentPage: path }),
   }))
 );

package/src/store/wallets.ts

@@ -142,7 +142,7 @@ export const useWalletsStore = createSelectors(
             }
           });
           return {
-            selectedWallets: state.selectedWallets.concat(selectedWallets),
+            selectedWallets: selectedWallets,
           };
         }),
       setSelectedWallet: (wallet) =>
@@ -188,3 +188,6 @@ useWalletsStore.subscribe(
     equalityFn: shallow,
   }
 );
+
+export const fetchingBalanceSelector = (state: WalletsStore) =>
+  !!state.balances.find((wallet) => wallet.loading);

package/src/types/routing.ts

@@ -26,7 +26,7 @@ export type ConfirmSwapError =
     }
   | {
       type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE;
-      minRequiredSlippage: number | null;
+      minRequiredSlippage: string | null;
     }
   | {
       type: Exclude<

package/src/types/swap.ts

@@ -11,3 +11,10 @@ export type SwapButtonState = (
 ) & {
   title: string;
 };
+
+export type ConvertedToken = {
+  symbol: string;
+  address: string | null;
+  blockchain: string;
+  outputAmount: string | null;
+} | null;

package/src/utils/common.ts

@@ -33,3 +33,17 @@ export function shadeColor(color: string, percent: number) {
 
   return '#' + RR + GG + BB;
 }
+
+export function debounce(fn: Function, time: number) {
+  let timeoutId: ReturnType<typeof setTimeout> | null;
+  return wrapper;
+  function wrapper(...args: any) {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      fn(...args);
+    }, time);
+  }
+}

package/src/utils/date.ts

@@ -0,0 +1,62 @@
+import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import dayjs from 'dayjs';
+import { GroupBy } from '@rango-dev/ui';
+
+export const groupSwapsByDate: GroupBy = swaps => {
+  const output: Map<
+    string,
+    {
+      title: string;
+      swaps: PendingSwap[];
+    }
+  > = new Map([
+    [
+      'today',
+      {
+        title: 'Today',
+        swaps: [],
+      },
+    ],
+    [
+      'week',
+      {
+        title: 'This week',
+        swaps: [],
+      },
+    ],
+    [
+      'month',
+      {
+        title: 'This month',
+        swaps: [],
+      },
+    ],
+    [
+      'year',
+      {
+        title: 'This year',
+        swaps: [],
+      },
+    ],
+    [
+      'history',
+      {
+        title: 'History',
+        swaps: [],
+      },
+    ],
+  ]);
+
+  const now = dayjs();
+  swaps.forEach(swap => {
+    const swapDate = dayjs(Number(swap.creationTime));
+    if (now.isSame(swapDate, 'day')) output.get('today')?.swaps.push(swap);
+    else if (now.isSame(swapDate, 'week')) output.get('week')?.swaps.push(swap);
+    else if (now.isSame(swapDate, 'month'))
+      output.get('month')?.swaps.push(swap);
+    else if (now.isSame(swapDate, 'year')) output.get('year')?.swaps.push(swap);
+    else output.get('history')?.swaps.push(swap);
+  });
+
+  return Array.from(output.values());
+};

package/src/utils/routing.ts

@@ -117,19 +117,22 @@ export function isRouteParametersChanged(
   currentParams: BestRouteParams
 ) {
   return (
-    prevParams.fromChain?.name !== currentParams.fromChain?.name ||
-    prevParams.toChain?.name !== currentParams.toChain?.name ||
-    prevParams.fromToken?.symbol !== currentParams.fromToken?.symbol ||
-    prevParams.toToken?.symbol !== currentParams.toToken?.symbol ||
-    prevParams.fromToken?.blockchain !== currentParams.fromToken?.blockchain ||
-    prevParams.toToken?.blockchain !== currentParams.toToken?.blockchain ||
-    prevParams.fromToken?.address !== currentParams.fromToken?.address ||
-    prevParams.toToken?.address !== currentParams.toToken?.address ||
-    prevParams.inputAmount !== currentParams.inputAmount ||
-    prevParams.slippage !== currentParams.slippage ||
-    prevParams.customSlippage !== currentParams.customSlippage ||
-    prevParams.disabledLiquiditySources?.length !==
-      currentParams.disabledLiquiditySources?.length
+    !!currentParams.fromToken &&
+    !!currentParams.toToken &&
+    (prevParams.fromChain?.name !== currentParams.fromChain?.name ||
+      prevParams.toChain?.name !== currentParams.toChain?.name ||
+      prevParams.fromToken?.symbol !== currentParams.fromToken?.symbol ||
+      prevParams.toToken?.symbol !== currentParams.toToken?.symbol ||
+      prevParams.fromToken?.blockchain !==
+        currentParams.fromToken?.blockchain ||
+      prevParams.toToken?.blockchain !== currentParams.toToken?.blockchain ||
+      prevParams.fromToken?.address !== currentParams.fromToken?.address ||
+      prevParams.toToken?.address !== currentParams.toToken?.address ||
+      prevParams.inputAmount !== currentParams.inputAmount ||
+      prevParams.slippage !== currentParams.slippage ||
+      prevParams.customSlippage !== currentParams.customSlippage ||
+      prevParams.disabledLiquiditySources?.length !==
+        currentParams.disabledLiquiditySources?.length)
   );
 }
 
@@ -148,3 +151,10 @@ export function getBestRouteWithCalculatedFees(
     result: { ...bestRoute.result, swaps: swapsWithFee },
   };
 }
+
+//todo: refactor bestRoute store and add loadingStatus
+export const getBestRouteStatus = (loading: boolean, error: boolean) => {
+  if (loading) return 'loading';
+  if (error) return 'failed';
+  else return 'success';
+};

package/src/utils/swap.ts

@@ -1,4 +1,3 @@
-import { PendingSwap } from '@rango-dev/ui/dist/containers/History/types';
 import {
   WalletTypeAndAddress,
   SwapSavedSettings,
@@ -19,7 +18,12 @@ import { WalletType } from '@rango-dev/wallets-shared';
 import { getRequiredBalanceOfWallet } from './routing';
 import { getRequiredChains, SelectedWallet } from './wallets';
 import { LoadingStatus } from '../store/meta';
-import { SwapButtonState } from '../types';
+import { ConvertedToken, SwapButtonState } from '../types';
+import {
+  PendingSwapNetworkStatus,
+  PendingSwapStep,
+} from '@rango-dev/queue-manager-rango-preset';
+import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 
 export function getOutputRatio(
   inputUsdValue: BigNumber,
@@ -187,6 +191,7 @@ export function calculatePendingSwap(
     finishTime: null,
     requestId: bestRoute.requestId || '',
     inputAmount: inputAmount,
+    //@ts-ignore
     wallets,
     status: 'running',
     isPaused: false,
@@ -201,6 +206,7 @@ export function calculatePendingSwap(
     settings: settings,
     simulationResult: simulationResult,
     validateBalanceOrFee,
+    //@ts-ignore
     steps:
       bestRoute.result?.swaps?.map((swap, index) => {
         const swapper = meta.swappers.find(
@@ -339,25 +345,24 @@ export function hasSlippageError(
 
 export function getMinRequiredSlippage(
   route: BestRouteResponse
-): number | null {
+): string | null {
   const slippages = route.result?.swaps.map(
     (slippage) => slippage.recommendedSlippage
   );
   return (
     slippages
-      ?.map((s) => parseFloat(s?.slippage || '0'))
-      ?.filter((s) => s > 0)
-      ?.sort((a, b) => b - a)
+      ?.map((s) => s?.slippage || '0')
+      ?.filter((s) => parseFloat(s) > 0)
+      ?.sort((a, b) => parseFloat(b) - parseFloat(a))
       ?.find(() => true) || null
   );
 }
 
 export function hasProperSlippage(
   userSlippage: string,
-  minRequiredSlippage: number | null
+  minRequiredSlippage: string | null
 ) {
   if (!minRequiredSlippage) return true;
-  //@ts-ignore
   return parseFloat(userSlippage) >= parseFloat(minRequiredSlippage);
 }
 
@@ -386,7 +391,7 @@ export function hasEnoughBalanceAndProperSlippage(
   route: BestRouteResponse,
   selectedWallets: SelectedWallet[],
   userSlippage: string,
-  minRequiredSlippage: number | null
+  minRequiredSlippage: string | null
 ): boolean {
   return (
     hasEnoughBalance(route, selectedWallets) &&
@@ -429,6 +434,8 @@ export function createBestRouteRequestBody(
       });
   });
 
+  const filteredBlockchains = selectedWallets.map((wallet) => wallet.chain);
+
   const requestBody: BestRouteRequest = {
     amount: inputAmount.toString(),
     checkPrerequisites,
@@ -446,8 +453,8 @@ export function createBestRouteRequestBody(
     selectedWallets: selectedWalletsMap,
     swapperGroups: disabledLiquiditySources,
     swappersGroupsExclude: true,
-    //@ts-ignore
     slippage: slippage.toString(),
+    ...(checkPrerequisites && { blockchains: filteredBlockchains }),
   };
 
   return requestBody;
@@ -550,3 +557,87 @@ export function calcOutputUsdValue(
 
   return amount.multipliedBy(tokenPrice || 0);
 }
+
+export function isNetworkStatusInWarningState(
+  pendingSwapStep: PendingSwapStep | null
+): boolean {
+  return (
+    !!pendingSwapStep &&
+    pendingSwapStep.networkStatus !== null &&
+    pendingSwapStep.networkStatus !== PendingSwapNetworkStatus.NetworkChanged
+  );
+}
+
+export function getSwapMessages(
+  pendingSwap: PendingSwap,
+  currentStep: PendingSwapStep | null
+): {
+  shortMessage: string;
+  detailedMessage: { content: string; long: boolean };
+} {
+  const textForRemove = 'bellow button or';
+  let message = pendingSwap.extraMessage;
+  let detailedMessage = pendingSwap.extraMessageDetail;
+
+  if (pendingSwap.networkStatusExtraMessageDetail?.includes(textForRemove)) {
+    pendingSwap.networkStatusExtraMessageDetail =
+      pendingSwap.networkStatusExtraMessageDetail.replace(textForRemove, '');
+  }
+
+  const networkWarningState = isNetworkStatusInWarningState(currentStep);
+
+  if (networkWarningState) {
+    message = pendingSwap.networkStatusExtraMessage || '';
+    detailedMessage = pendingSwap.networkStatusExtraMessageDetail || '';
+    switch (currentStep?.networkStatus) {
+      case PendingSwapNetworkStatus.WaitingForConnectingWallet:
+        message = message || 'Waiting for connecting wallet';
+        break;
+      case PendingSwapNetworkStatus.WaitingForQueue:
+        message = message || 'Waiting for other running tasks to be finished';
+        break;
+      case PendingSwapNetworkStatus.WaitingForNetworkChange:
+        message = message || 'Waiting for changing wallet network';
+        break;
+    }
+  }
+  detailedMessage = detailedMessage || '';
+  message = message || '';
+  const isRpc =
+    message?.indexOf('code') !== -1 && message?.indexOf('reason') !== -1;
+
+  return {
+    shortMessage: message,
+    detailedMessage: { content: detailedMessage, long: isRpc },
+  };
+}
+
+export function getLastConvertedTokenInFailedSwap(
+  pendingSwap: PendingSwap
+): ConvertedToken {
+  let resultToken: ConvertedToken = null;
+  if (pendingSwap.status === 'failed') {
+    const lastSuccessStep = pendingSwap.steps
+      .slice()
+      .reverse()
+      .filter((step) => step.status === 'success')[0];
+
+    if (lastSuccessStep) {
+      resultToken = {
+        blockchain: lastSuccessStep.toBlockchain,
+        symbol: lastSuccessStep.toSymbol,
+        outputAmount: lastSuccessStep.outputAmount,
+        address: lastSuccessStep.toSymbolAddress,
+      };
+    }
+  }
+  return resultToken;
+}
+
+export function shouldRetrySwap(pendingSwap: PendingSwap) {
+  return (
+    pendingSwap.status === 'failed' &&
+    !!pendingSwap.finishTime &&
+    new Date().getTime() - parseInt(pendingSwap.finishTime) < 4 * 3600 * 1000
+  );
+}