@rango-dev/widget-embedded 0.1.10-next.100 → 0.1.10-next.106

package/src/pages/SwapDetailsPage.tsx

@@ -6,33 +6,110 @@ 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';
 
 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 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 null;
+
+  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)}
       //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/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(
@@ -151,6 +157,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: new BigNumber(0),
+          outputUsdValue: new BigNumber(0),
+          toChain,
+          toToken,
+          bestRoute: null,
+          loading: false,
+          error: '',
+          sourceTokens: sortedSourceTokens,
+          destinationTokens: sortedDestinationTokens,
+        });
+      },
     }))
   )
 );
@@ -160,7 +231,7 @@ const bestRoute = (
   settingsStore: typeof useSettingsStore
 ) => {
   let abortController: AbortController | null = null;
-  const fetchBestRoute = () => {
+  const fetchBestRoute = debounce(() => {
     const { fromToken, toToken, inputAmount } = bestRouteStore.getState();
     const { slippage, customSlippage, disabledLiquiditySources } =
       settingsStore.getState();
@@ -201,7 +272,7 @@ const bestRoute = (
           loading: false,
         });
       });
-  };
+  }, 600);
 
   useBestRouteStore.subscribe(
     (state) => ({

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/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) &&
@@ -550,3 +555,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
+  );
+}

package/src/utils/time.ts

@@ -0,0 +1,52 @@
+import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+
+export function timeSince(timeMillis: number): string {
+  const seconds = Math.floor((new Date().getTime() - timeMillis) / 1000);
+  let intervalType: string;
+
+  let interval = Math.floor(seconds / 31536000);
+  if (interval >= 1) {
+    intervalType = 'year';
+  } else {
+    interval = Math.floor(seconds / 2592000);
+    if (interval >= 1) {
+      intervalType = 'month';
+    } else {
+      interval = Math.floor(seconds / 86400);
+      if (interval >= 1) {
+        intervalType = 'day';
+      } else {
+        interval = Math.floor(seconds / 3600);
+        if (interval >= 1) {
+          intervalType = 'hour';
+        } else {
+          interval = Math.floor(seconds / 60);
+          if (interval >= 1) {
+            intervalType = 'minute';
+          } else {
+            interval = seconds;
+            intervalType = 'second';
+          }
+        }
+      }
+    }
+  }
+
+  if (interval > 1 || interval === 0) {
+    intervalType += 's';
+  }
+
+  return interval + ' ' + intervalType;
+}
+
+export function getSwapDate(pendingSwap: PendingSwap) {
+  return pendingSwap.finishTime
+    ? `Finished ${timeSince(parseInt(pendingSwap.finishTime))} ago @ ${new Date(
+        parseInt(pendingSwap.finishTime)
+      ).toLocaleString()}`
+    : `Started ${timeSince(
+        parseInt(pendingSwap.creationTime)
+      )} ago @ ${new Date(
+        parseInt(pendingSwap.creationTime)
+      ).toLocaleString()}`;
+}

package/src/utils/wallets.ts

@@ -441,10 +441,13 @@ export function getSortedTokens(
   return sortTokens(getTokensWithBalance(filteredTokens, balances));
 }
 
-export function tokensAreEqual(tokenA: Token | null, tokenB: Token | null) {
+export function tokensAreEqual(
+  tokenA: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null,
+  tokenB: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null
+) {
   return (
     tokenA?.blockchain === tokenB?.blockchain &&
-    tokenA?.name === tokenB?.name &&
+    tokenA?.symbol === tokenB?.symbol &&
     tokenA?.address === tokenB?.address
   );
 }

package/dist/pages/ConfirmWalletsPage.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare function ConfirmWalletsPage(): JSX.Element;
-//# sourceMappingURL=ConfirmWalletsPage.d.ts.map

package/dist/pages/ConfirmWalletsPage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ConfirmWalletsPage.d.ts","sourceRoot":"","sources":["../src/pages/ConfirmWalletsPage.tsx"],"names":[],"mappings":";AA4BA,wBAAgB,kBAAkB,gBAkGjC"}

package/src/pages/ConfirmWalletsPage.tsx

@@ -1,127 +0,0 @@
-import React, { useEffect } from 'react';
-import { ConfirmWallets } from '@rango-dev/ui';
-import { useNavigate } from 'react-router-dom';
-import { useBestRouteStore } from '../store/bestRoute';
-import { useWalletsStore } from '../store/wallets';
-import { useWallets } from '@rango-dev/wallets-core';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import {
-  getKeplrCompatibleConnectedWallets,
-  getRequiredChains,
-  getSelectableWallets,
-  isExperimentalChain,
-} from '../utils/wallets';
-import {
-  calcOutputUsdValue,
-  getTotalFeeInUsd,
-  requiredWallets,
-} from '../utils/swap';
-import { decimalNumber, numberToString } from '../utils/numbers';
-import { useMetaStore } from '../store/meta';
-import { Network, WalletType } from '@rango-dev/wallets-shared';
-import { useNavigateBack } from '../hooks/useNavigateBack';
-import { TokenPreview } from '../components/TokenPreview';
-// @ts-ignore // TODO: fix error in tsc build
-import { t } from 'i18next';
-import { Spacer } from '@rango-dev/ui';
-import RoutesOverview from '../components/RoutesOverview';
-
-export function ConfirmWalletsPage() {
-  const navigate = useNavigate();
-  const { navigateBackFrom } = useNavigateBack();
-  const bestRoute = useBestRouteStore.use.bestRoute();
-
-  const { blockchains, tokens } = useMetaStore.use.meta();
-  const accounts = useWalletsStore.use.accounts();
-  const selectedWallets = useWalletsStore.use.selectedWallets();
-  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
-  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
-
-  const { getWalletInfo, connect } = useWallets();
-  const confirmDisabled = !requiredWallets(bestRoute).every((chain) =>
-    selectedWallets.map((wallet) => wallet.chain).includes(chain)
-  );
-
-  const firstStep = bestRoute?.result?.swaps[0];
-  const lastStep =
-    bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
-
-  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
-  const toAmount = decimalNumber(lastStep?.toAmount, 3);
-  useEffect(() => {
-    initSelectedWallets();
-  }, []);
-
-  const selectableWallets = getSelectableWallets(
-    accounts,
-    selectedWallets,
-    getWalletInfo
-  );
-
-  const handleConnectChain = (wallet: string) => {
-    const network = wallet as Network;
-    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(
-      (compatibleWallet: WalletType) => connect?.(compatibleWallet, network)
-    );
-  };
-
-  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
-
-  return (
-    <ConfirmWallets
-      requiredWallets={getRequiredChains(bestRoute)}
-      selectableWallets={selectableWallets}
-      onBack={navigateBackFrom.bind(null, navigationRoutes.confirmWallets)}
-      onConfirm={() =>
-        navigate(navigationRoutes.confirmSwap, { replace: true })
-      }
-      onChange={(wallet) => setSelectedWallet(wallet)}
-      confirmDisabled={confirmDisabled}
-      handleConnectChain={(wallet) => handleConnectChain(wallet)}
-      isExperimentalChain={(wallet) =>
-        getKeplrCompatibleConnectedWallets(selectableWallets).length > 0
-          ? isExperimentalChain(blockchains, wallet)
-          : false
-      }
-      previewInputs={
-        <>
-          <TokenPreview
-            chain={{
-              displayName: firstStep?.from.blockchain || '',
-              logo: firstStep?.from.blockchainLogo || '',
-            }}
-            token={{
-              symbol: firstStep?.from.symbol || '',
-              image: firstStep?.from.logo || '',
-            }}
-            usdValue={calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice)}
-            amount={fromAmount}
-            label={t('From')}
-            loadingStatus={'success'}
-          />
-          <Spacer size={12} direction="vertical" />
-          <TokenPreview
-            chain={{
-              displayName: lastStep?.to.blockchain || '',
-              logo: lastStep?.to.blockchainLogo || '',
-            }}
-            token={{
-              symbol: lastStep?.to.symbol || '',
-              image: lastStep?.to.logo || '',
-            }}
-            usdValue={calcOutputUsdValue(toAmount, lastStep?.to.usdPrice)}
-            amount={toAmount}
-            label={t('To')}
-            loadingStatus={'success'}
-          />
-        </>
-      }
-      previewRoutes={
-        <RoutesOverview
-          routes={bestRoute}
-          totalFee={numberToString(totalFeeInUsd, 0, 2)}
-        />
-      }
-    />
-  );
-}