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

package/src/utils/routing.ts

@@ -6,7 +6,7 @@ import BigNumber from 'bignumber.js';
 import { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
 import { areEqual } from './common';
 import { SelectedWallet } from './wallets';
-import { BestRouteParams } from '../types';
+import { BestRouteEqualityParams } from '../types';
 import { TokenMeta } from '@rango-dev/ui/dist/types/meta';
 import { numberToString } from './numbers';
 import { getUsdFeeOfStep } from './swap';
@@ -112,25 +112,34 @@ export function getRequiredBalanceOfWallet(
   return relatedFeeStatus.requiredAssets;
 }
 
-export function isRouteParametersChanged(
-  prevParams: BestRouteParams,
-  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
-  );
+export function isRouteParametersChanged(params: BestRouteEqualityParams) {
+  if (params.store === 'bestRoute') {
+    const { prevState, currentState } = params;
+    return (
+      !!currentState.fromToken &&
+      !!currentState.toToken &&
+      (prevState.fromChain?.name !== currentState.fromChain?.name ||
+        prevState.toChain?.name !== currentState.toChain?.name ||
+        prevState.fromToken?.symbol !== currentState.fromToken?.symbol ||
+        prevState.toToken?.symbol !== currentState.toToken?.symbol ||
+        prevState.fromToken?.blockchain !== prevState.fromToken?.blockchain ||
+        prevState.toToken?.blockchain !== currentState.toToken?.blockchain ||
+        prevState.fromToken?.address !== currentState.fromToken?.address ||
+        prevState.toToken?.address !== currentState.toToken?.address ||
+        prevState.inputAmount !== currentState.inputAmount)
+    );
+  } else if (params.store === 'settings') {
+    const { prevState, currentState } = params;
+    return (
+      prevState.slippage !== currentState.slippage ||
+      prevState.customSlippage !== currentState.customSlippage ||
+      prevState.disabledLiquiditySources?.length !==
+        currentState.disabledLiquiditySources?.length ||
+      prevState.infiniteApprove ||
+      currentState.infiniteApprove
+    );
+  }
+  return false;
 }
 
 export function getBestRouteWithCalculatedFees(
@@ -148,3 +157,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,
@@ -136,7 +140,8 @@ export function getSwapButtonState(
   if (accounts.length == 0) return { title: 'Connect Wallet', disabled: false };
   if (loading) return { title: 'Finding Best Route...', disabled: true };
   else if (inputIsZero) return { title: 'Enter an amount', disabled: true };
-  else if (!bestRoute) return { title: 'Swap', disabled: true };
+  else if (!bestRoute || !bestRoute.result)
+    return { title: 'Swap', disabled: true };
   else if (hasLimitError) return { title: 'Limit Error', disabled: true };
   else if (highValueLoss)
     return { title: 'Price impact is too high!', disabled: true };
@@ -187,6 +192,7 @@ export function calculatePendingSwap(
     finishTime: null,
     requestId: bestRoute.requestId || '',
     inputAmount: inputAmount,
+    //@ts-ignore
     wallets,
     status: 'running',
     isPaused: false,
@@ -201,6 +207,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 +346,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 +392,7 @@ export function hasEnoughBalanceAndProperSlippage(
   route: BestRouteResponse,
   selectedWallets: SelectedWallet[],
   userSlippage: string,
-  minRequiredSlippage: number | null
+  minRequiredSlippage: string | null
 ): boolean {
   return (
     hasEnoughBalance(route, selectedWallets) &&
@@ -429,6 +435,8 @@ export function createBestRouteRequestBody(
       });
   });
 
+  const filteredBlockchains = selectedWallets.map((wallet) => wallet.chain);
+
   const requestBody: BestRouteRequest = {
     amount: inputAmount.toString(),
     checkPrerequisites,
@@ -446,8 +454,8 @@ export function createBestRouteRequestBody(
     selectedWallets: selectedWalletsMap,
     swapperGroups: disabledLiquiditySources,
     swappersGroupsExclude: true,
-    //@ts-ignore
     slippage: slippage.toString(),
+    ...(checkPrerequisites && { blockchains: filteredBlockchains }),
   };
 
   return requestBody;
@@ -550,3 +558,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
   );
 }
@@ -469,7 +472,13 @@ export function sortWalletsBasedOnState(
     (a, b) =>
       Number(b.state === WalletStatus.CONNECTED) -
         Number(a.state === WalletStatus.CONNECTED) ||
-      Number(b.state === WalletStatus.DISCONNECTED) -
-        Number(a.state === WalletStatus.DISCONNECTED)
+      Number(
+        b.state === WalletStatus.DISCONNECTED ||
+          b.state === WalletStatus.CONNECTING
+      ) -
+        Number(
+          a.state === WalletStatus.DISCONNECTED ||
+            a.state === WalletStatus.CONNECTING
+        )
   );
 }

package/dist/components/Header.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export declare const HeaderContainer: any;
-export interface PropTypes {
-    onClickRefresh: () => void;
-    title?: string;
-    titleSize?: number;
-    titleWeight?: number;
-}
-export declare function Header(props: PropTypes): JSX.Element;
-//# sourceMappingURL=Header.d.ts.map

package/dist/components/Header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../src/components/Header.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,eAAe,KAM1B,CAAC;AAEH,MAAM,WAAW,SAAS;IACxB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,SAAS,eAgBtC"}

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/components/Header.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { css, styled, Typography } from '@rango-dev/ui';
-import { HeaderButtons } from './HeaderButtons';
-import { useTranslation } from 'react-i18next';
-
-export const HeaderContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  width: '100%',
-  padding: '$16 0',
-});
-
-export interface PropTypes {
-  onClickRefresh: () => void;
-  title?: string;
-  titleSize?: number;
-  titleWeight?: number;
-}
-
-export function Header(props: PropTypes) {
-  const { onClickRefresh, title, titleSize, titleWeight } = props;
-  const { t } = useTranslation();
-  const titleStyle = css({
-    fontSize: `${titleSize}px !important`,
-    fontWeight: `${titleWeight} !important`,
-  });
-
-  return (
-    <HeaderContainer>
-      <Typography variant="h4" className={titleStyle()}>
-        {title ? t(title.toLocaleLowerCase()) : ''}
-      </Typography>
-      <HeaderButtons onClickRefresh={onClickRefresh} />
-    </HeaderContainer>
-  );
-}

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)}
-        />
-      }
-    />
-  );
-}