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

package/src/pages/SwapDetailsPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import useCopyToClipboard from '../hooks/useCopyToClipboard';
 import { useManager } from '@rango-dev/queue-manager-react';
@@ -6,33 +6,169 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { getPendingSwaps } from '../utils/queue';
 import { SwapHistory } from '@rango-dev/ui';
 import { useUiStore } from '../store/ui';
-import { cancelSwap } from '@rango-dev/queue-manager-rango-preset';
+import {
+  cancelSwap,
+  PendingSwapNetworkStatus,
+} from '@rango-dev/queue-manager-rango-preset';
+import { useWallets } from '@rango-dev/wallets-core';
+import {
+  getCurrentBlockchainOfOrNull,
+  getCurrentStep,
+  getRelatedWalletOrNull,
+} from '@rango-dev/queue-manager-rango-preset';
+import { getSwapDate } from '../utils/time';
+import { useNavigate } from 'react-router-dom';
+import { useBestRouteStore } from '../store/bestRoute';
+import {
+  getLastConvertedTokenInFailedSwap,
+  getSwapMessages,
+  isNetworkStatusInWarningState,
+  shouldRetrySwap,
+} from '../utils/swap';
+import { TokenPreview } from '../components/TokenPreview';
+import { Spacer } from '@rango-dev/ui';
+import { numberToString } from '../utils/numbers';
+//@ts-ignore
+import { t } from 'i18next';
+import { SwapDetailsPlaceholder } from '../components/SwapDetailsPlaceholder';
 
 export function SwapDetailsPage() {
   const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
+  const { canSwitchNetworkTo, connect } = useWallets();
+  const retry = useBestRouteStore.use.retry();
+  const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
-  const { manager } = useManager();
   const [isCopied, handleCopy] = useCopyToClipboard(2000);
+  const { manager } = useManager();
+
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+  }, []);
 
   const pendingSwaps = getPendingSwaps(manager);
   const selectedSwap = pendingSwaps.find(
     ({ swap }) => swap.requestId === selectedSwapRequestId
   );
 
-  //TODO: implement swap cancellation (move queueManager logic to queueManager/rango-preset)
   const onCancel = () => {
-    const swap = selectedSwap ? manager?.get(selectedSwap.id) : undefined;
+    const swap = manager?.get(selectedSwap?.id!);
     if (swap) cancelSwap(swap);
   };
+  const swap = selectedSwap?.swap;
+
+  if (!swap)
+    return (
+      <SwapDetailsPlaceholder
+        requestId={selectedSwapRequestId || ''}
+        loading={loading}
+        onBack={navigateBackFrom.bind(null, navigationRoutes.swapDetails)}
+      />
+    );
+
+  const firstStep = swap.steps[0];
+  const lastStep = swap.steps[swap.steps.length - 1];
+  const fromAmount = numberToString(swap.inputAmount);
+  const toAmount = numberToString(swap.simulationResult.outputAmount);
+
+  const currentStep = getCurrentStep(swap);
+
+  const currentStepBlockchain = currentStep
+    ? getCurrentBlockchainOfOrNull(swap, currentStep)
+    : null;
+  const currentStepWallet = currentStep
+    ? getRelatedWalletOrNull(swap, currentStep)
+    : null;
+  const currentStepNetworkStatus = currentStep?.networkStatus;
+
+  const swapMessages = getSwapMessages(swap, currentStep);
+
+  const networkWarningState = isNetworkStatusInWarningState(currentStep);
+
+  const swapDate = getSwapDate(swap);
+
+  const shouldRetry = shouldRetrySwap(swap);
+
+  const switchNetwork =
+    !!currentStepBlockchain &&
+    !!currentStepWallet?.walletType &&
+    currentStepNetworkStatus ===
+      PendingSwapNetworkStatus.WaitingForNetworkChange &&
+    canSwitchNetworkTo(currentStepWallet?.walletType, currentStepBlockchain)
+      ? connect.bind(null, currentStepWallet.walletType, currentStepBlockchain)
+      : undefined;
+
+  const lastConvertedTokenInFailedSwap =
+    getLastConvertedTokenInFailedSwap(swap);
+
   return (
     <SwapHistory
       onBack={navigateBackFrom.bind(null, navigationRoutes.swapDetails)}
+      previewInputs={
+        <>
+          <TokenPreview
+            chain={{
+              displayName: firstStep?.fromBlockchain || '',
+              // @ts-ignore
+              logo: firstStep?.fromBlockchainLogo || '',
+            }}
+            token={{
+              symbol: firstStep?.fromSymbol || '',
+              image: firstStep?.fromLogo || '',
+            }}
+            amount={fromAmount}
+            label={t('From')}
+            loadingStatus={'success'}
+          />
+          <Spacer size={12} direction="vertical" />
+          <TokenPreview
+            chain={{
+              displayName: lastStep?.toBlockchain || '',
+              // @ts-ignore
+              logo: lastStep?.toBlockchainLogo || '',
+            }}
+            token={{
+              symbol: lastStep?.toSymbol || '',
+              image: lastStep?.toLogo || '',
+            }}
+            amount={toAmount}
+            label={t('To')}
+            loadingStatus={'success'}
+          />
+        </>
+      }
       //todo: move PendingSwap type to rango-types
       //@ts-ignore
-      pendingSwap={selectedSwap?.swap}
+      pendingSwap={swap}
       onCopy={handleCopy}
       isCopied={isCopied}
       onCancel={onCancel}
+      shortMessage={swapMessages.shortMessage}
+      detailedMessage={swapMessages.detailedMessage}
+      currentStepBlockchain={currentStepBlockchain || ''}
+      switchNetwork={switchNetwork}
+      type={
+        networkWarningState ? 'warning' : swap.extraMessageSeverity || undefined
+      }
+      date={swapDate}
+      {...(shouldRetry && {
+        onRetry: () => {
+          retry(swap);
+          setTimeout(() => {
+            navigate(navigationRoutes.home);
+          }, 0);
+        },
+      })}
+      {...(lastConvertedTokenInFailedSwap && {
+        lastConvertedTokenInFailedSwap: {
+          blockchain: lastConvertedTokenInFailedSwap.blockchain,
+          outputAmount: lastConvertedTokenInFailedSwap.outputAmount || '',
+          symbol: lastConvertedTokenInFailedSwap.symbol,
+        },
+      })}
     />
   );
 }

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,8 @@ export interface RouteState {
   setInputAmount: (amount: string) => void;
   bestRoute: BestRouteResponse | null;
   setBestRoute: (bestRoute: BestRouteResponse | null) => void;
+  retry: (pendingSwap: PendingSwap) => void;
+  switchFromAndTo: () => void;
 }
 
 export const useBestRouteStore = createSelectors(
@@ -65,6 +72,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)
@@ -151,6 +159,85 @@ 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,
+        });
+      },
+      switchFromAndTo: () =>
+        set((state) => ({
+          fromChain: state.toChain,
+          fromToken: state.toToken,
+          toChain: state.fromChain,
+          toToken: state.fromToken,
+          sourceTokens: state.destinationTokens,
+          destinationTokens: state.sourceTokens,
+          inputAmount: state.outputAmount?.toString() || '',
+          inputUsdValue: getUsdValue(
+            state.toToken,
+            state.outputAmount?.toString() || ''
+          ),
+        })),
     }))
   )
 );
@@ -164,7 +251,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 +265,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 +291,31 @@ const bestRoute = (
       });
   };
 
+  const debouncedFetchBestRoute = debounce(fetchBestRoute, 600);
+
+  const bestRouteParamsListener = () => {
+    const { fromToken, toToken, inputAmount, inputUsdValue } =
+      useBestRouteStore.getState();
+    if (!inputAmount || inputAmount === '0' || inputUsdValue.eq(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,11 +324,17 @@ const bestRoute = (
       toToken: state.toToken,
       inputAmount: state.inputAmount,
     }),
-
-    fetchBestRoute.bind(null),
+    bestRouteParamsListener,
     {
-      equalityFn: (prevState, state) => {
-        if (isRouteParametersChanged(prevState, state)) return false;
+      equalityFn: (prevState, currentState) => {
+        if (
+          isRouteParametersChanged({
+            store: 'bestRoute',
+            prevState,
+            currentState,
+          })
+        )
+          return false;
         else return true;
       },
     }
@@ -226,11 +345,19 @@ const bestRoute = (
       slippage: state.slippage,
       customSlippage: state.customSlippage,
       disabledLiquiditySources: state.disabledLiquiditySources,
+      infiniteApprove: state.infiniteApprove,
     }),
-    fetchBestRoute.bind(null),
+    bestRouteParamsListener,
     {
-      equalityFn: (prevState, state) => {
-        if (isRouteParametersChanged(prevState, state)) return false;
+      equalityFn: (prevState, currentState) => {
+        if (
+          isRouteParametersChanged({
+            store: 'settings',
+            prevState,
+            currentState,
+          })
+        )
+          return false;
         else return true;
       },
     }

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

@@ -1,17 +1,33 @@
 import { RouteState } from '../store/bestRoute';
 import { SettingsState } from '../store/settings';
 
-export interface BestRouteParams {
+interface BestRouteStoreParams {
   fromChain?: RouteState['fromChain'];
   toChain?: RouteState['toChain'];
   fromToken?: RouteState['fromToken'];
   toToken?: RouteState['toToken'];
   inputAmount?: RouteState['inputAmount'];
+}
+
+interface SettingsStoreParams {
   slippage?: SettingsState['slippage'];
   customSlippage?: SettingsState['customSlippage'];
   disabledLiquiditySources?: SettingsState['disabledLiquiditySources'];
+  infiniteApprove?: SettingsState['infiniteApprove'];
 }
 
+export type BestRouteEqualityParams =
+  | {
+      store: 'bestRoute';
+      prevState: BestRouteStoreParams;
+      currentState: BestRouteStoreParams;
+    }
+  | {
+      store: 'settings';
+      prevState: SettingsStoreParams;
+      currentState: SettingsStoreParams;
+    };
+
 export enum ConfirmSwapErrorTypes {
   NO_ROUTE,
   ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
@@ -26,7 +42,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());
+};