@rango-dev/widget-embedded 0.1.10-next.69

package/src/store/settings.ts

@@ -0,0 +1,72 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import { useMetaStore } from './meta';
+import createSelectors from './selectors';
+
+type Theme = 'auto' | 'dark' | 'light';
+
+interface Settings {
+  slippage: number;
+  customSlippage: number | null;
+  infinitApprove: boolean;
+  disabledLiquiditySources: string[];
+  theme: Theme;
+  setSlippage: (slippage: number) => void;
+  setCustomSlippage: (customSlippage: number | null) => void;
+  toggleInfinitApprove: () => void;
+  toggleLiquiditySource: (name: string) => void;
+  setTheme: (theme: Theme) => void;
+  toggleAllLiquiditySources: () => void;
+}
+
+export const useSettingsStore = createSelectors(
+  create<Settings>()(
+    persist(
+      immer((set) => ({
+        slippage: 1,
+        customSlippage: null,
+        infinitApprove: false,
+        disabledLiquiditySources: [],
+        theme: 'auto',
+        setSlippage: (slippage) =>
+          set((state) => {
+            state.slippage = slippage;
+          }),
+        setCustomSlippage: (customSlippage) => {
+          return set((state) => {
+            state.customSlippage = customSlippage;
+          });
+        },
+        toggleAllLiquiditySources: () =>
+          set((state) => {
+            const { swappers } = useMetaStore.getState().meta;
+
+            if (swappers.length - state.disabledLiquiditySources.length === 0)
+              state.disabledLiquiditySources = [];
+            else {
+              const allSwappers = swappers.map((swapper) => swapper.swapperGroup);
+              state.disabledLiquiditySources = allSwappers;
+            }
+          }),
+        toggleInfinitApprove: () =>
+          set((state) => {
+            state.infinitApprove = !state.infinitApprove;
+          }),
+        toggleLiquiditySource: (name) =>
+          set((state) => {
+            state.disabledLiquiditySources = state.disabledLiquiditySources.includes(name)
+              ? state.disabledLiquiditySources.filter((liquiditySource) => liquiditySource != name)
+              : state.disabledLiquiditySources.concat(name);
+          }),
+        setTheme: (theme) =>
+          set((state) => {
+            state.theme = theme;
+          }),
+      })),
+      {
+        name: 'user-settings',
+      },
+    ),
+  ),
+);

package/src/store/wallets.ts

@@ -0,0 +1,144 @@
+import { WalletType } from '@rango-dev/wallets-shared';
+import { Token } from 'rango-sdk';
+import { create } from 'zustand';
+import { SelectableWallet } from '../pages/ConfirmWalletsPage';
+import { httpService } from '../services/httpService';
+import {
+  getRequiredChains,
+  isAccountAndBalanceMatched,
+  makeBalanceFor,
+  resetBalanceState,
+  SelectedWallet,
+} from '../utils/wallets';
+import { useBestRouteStore } from './bestRoute';
+import { useMetaStore } from './meta';
+import createSelectors from './selectors';
+
+export interface Account {
+  chain: string;
+  address: string;
+  walletType: WalletType;
+}
+
+export type TokenBalance = {
+  chain: string;
+  symbol: string;
+  ticker: string;
+  address: string | null;
+  rawAmount: string;
+  decimal: number | null;
+  amount: string;
+  logo: string | null;
+  usdPrice: number | null;
+};
+
+export interface Balance {
+  balances: TokenBalance[] | null;
+  address: string;
+  chain: string;
+  loading: boolean;
+  walletType: WalletType;
+  error: boolean;
+  explorerUrl: string | null;
+}
+
+interface WalletsStore {
+  accounts: Account[];
+  balances: Balance[];
+  selectedWallets: SelectedWallet[];
+  connectWallet: (accounts: Account[]) => void;
+  disconnectWallet: (walletType: WalletType) => void;
+  initSelectedWallets: () => void;
+  setSelectedWallet: (wallet: SelectableWallet) => void;
+}
+
+export const useWalletsStore = createSelectors(
+  create<WalletsStore>()((set, get) => ({
+    accounts: [],
+    balances: [],
+    selectedWallets: [],
+    connectWallet: (accounts) => {
+      const tokens = useMetaStore.getState().meta.tokens;
+
+      set((state) => ({
+        accounts: state.accounts.concat(accounts),
+        balances: state.balances.concat(
+          accounts.map((account) => ({
+            balances: [],
+            address: account.address,
+            chain: account.chain,
+            loading: true,
+            walletType: account.walletType,
+            error: false,
+            explorerUrl: null,
+          })),
+        ),
+      }));
+      accounts.forEach(async (account) => {
+        try {
+          const response = await httpService.getWalletsDetails([
+            { address: account.address, blockchain: account.chain },
+          ]);
+          const retrivedBalance = response.wallets[0];
+          if (retrivedBalance) {
+            set((state) => ({
+              balances: state.balances.map((balance) => {
+                return isAccountAndBalanceMatched(account, balance)
+                  ? makeBalanceFor(account, retrivedBalance, tokens)
+                  : balance;
+              }),
+            }));
+          } else throw new Error('Wallet not found');
+        } catch (error) {
+          set((state) => ({
+            balances: state.balances.map((balance) => {
+              return isAccountAndBalanceMatched(account, balance)
+                ? resetBalanceState(balance)
+                : balance;
+            }),
+          }));
+        }
+      });
+    },
+    disconnectWallet: (walletType) => {
+      set((state) => ({
+        accounts: state.accounts.filter((account) => account.walletType !== walletType),
+        balances: state.balances.filter((balance) => balance.walletType !== walletType),
+        selectedWallets: state.selectedWallets.filter((wallet) => wallet.walletType != walletType),
+      }));
+    },
+    initSelectedWallets: () =>
+      set((state) => {
+        const requiredChains = getRequiredChains(useBestRouteStore.getState().bestRoute);
+        const connectedWallets = state.accounts;
+        const selectedWallets: SelectedWallet[] = [];
+        requiredChains.forEach((chain) => {
+          const anyWalletSelected = !!state.selectedWallets.find(
+            (wallet) => wallet.chain === chain,
+          );
+          if (!anyWalletSelected) {
+            const firstWalletWithMatchedChain = connectedWallets.find(
+              (wallet) => wallet.chain === chain,
+            );
+            if (!!firstWalletWithMatchedChain)
+              selectedWallets.push({
+                address: firstWalletWithMatchedChain.address,
+                chain: firstWalletWithMatchedChain.chain,
+                walletType: firstWalletWithMatchedChain.walletType,
+              });
+          }
+        });
+        return { selectedWallets: state.selectedWallets.concat(selectedWallets) };
+      }),
+    setSelectedWallet: (wallet) =>
+      set((state) => ({
+        selectedWallets: state.selectedWallets
+          .filter((selectedWallet) => selectedWallet.chain !== wallet.chain)
+          .concat({
+            chain: wallet.chain,
+            address: wallet.address,
+            walletType: wallet.walletType,
+          }),
+      })),
+  })),
+);

package/src/utils/common.ts

@@ -0,0 +1,3 @@
+export function removeDuplicateFrom<T>(array: T[]): T[] {
+  return Array.from(new Set(array));
+}

package/src/utils/numbers.ts

@@ -0,0 +1,94 @@
+import { BigNumber } from 'bignumber.js';
+
+export const percentToString = (p: number, fractions = 0): string => (p * 100).toFixed(fractions);
+export const secondsToString = (s: number): string => {
+  const seconds = (s % 60).toString().padStart(2, '0');
+  const minutes = parseInt((s / 60).toString())
+    .toString()
+    .padStart(2, '0');
+  return `${minutes}:${seconds}`;
+};
+
+export const numberToString = (
+  number: BigNumber | string | null,
+  minDecimals: number | null = null,
+  maxDecimals: number | null = null,
+): string => {
+  if (number === null) return '';
+  if (number === '') return '';
+  const n = new BigNumber(number);
+  const roundingMode = 1;
+  let maxI = 1000;
+  for (let i = 0; i < 60; i++) {
+    if (new BigNumber(n.toFixed(i, roundingMode)).eq(n)) {
+      maxI = i;
+      break;
+    }
+  }
+
+  if (n.gte(10000)) return n.toFormat(0, roundingMode);
+  if (n.gte(1000))
+    return n.toFormat(
+      Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))),
+      roundingMode,
+    );
+  if (n.gte(100))
+    return n.toFormat(
+      Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 1))),
+      roundingMode,
+    );
+  if (n.gte(1))
+    return n.toFormat(
+      Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 2))),
+      roundingMode,
+    );
+  if (n.gte(0.01))
+    return n.toFormat(
+      Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 4))),
+      roundingMode,
+    );
+  for (let i = minDecimals || 4; i < 17; i++)
+    if (n.gte(Math.pow(10, -i)))
+      return n.toFormat(
+        Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, i))),
+        roundingMode,
+      );
+  if (n.isEqualTo(0)) return '0';
+
+  return n.toFormat(
+    Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 8))),
+    roundingMode,
+  );
+};
+
+export const convertBigNumberToHex = (value: BigNumber, decimals: number): string => {
+  return '0x' + value.shiftedBy(decimals).toString(16);
+};
+
+export const uint8ArrayToHex = (buffer: Uint8Array): string => {
+  // buffer is an ArrayBuffer
+  return [...buffer].map((x) => x.toString(16).padStart(2, '0')).join('');
+};
+
+export function dollarToConciseString(num: number | undefined): string {
+  if (!num) return '-';
+  if (num < 1) return ' < 1$';
+  if (num < 1000) return numberToString(new BigNumber(num)) + '$';
+  if (num < 10_000) return parseInt((num / 100).toString()) / 10 + 'K';
+  if (num < 1_000_000) return parseInt((num / 1000).toString()) + 'K';
+  if (num < 100_000_000) return parseInt((num / 100000).toString()) / 10 + 'M';
+  return parseInt((num / 1000000).toString()) + 'M';
+}
+
+export function removeExtraDecimals(num: string, maxDecimals: number): string {
+  try {
+    if (!num.includes('.')) return num;
+    const [b, f] = num.split('.');
+    if (f && f.length > maxDecimals) {
+      return `${b}.${f.substring(0, maxDecimals)}`;
+    }
+    return num;
+  } catch (e) {
+    return num;
+  }
+}

package/src/utils/routing.ts

@@ -0,0 +1,108 @@
+import {
+  SimulationAssetAndAmount,
+  SimulationValidationStatus,
+} from '@rango-dev/ui/dist/types/swaps';
+import BigNumber from 'bignumber.js';
+import { BestRouteResponse } from 'rango-sdk';
+import { ZERO } from '../constants/numbers';
+import { numberToString } from './numbers';
+import { SelectedWallet } from './wallets';
+
+export const getBestRouteToTokenUsdPrice = (
+  bestRoute: BestRouteResponse | null,
+): number | null | undefined =>
+  bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to.usdPrice;
+
+export type RouteChangeStatus = {
+  isChanged: boolean;
+  warningMessage?: string;
+};
+
+export const compareRoutes = (
+  route1: BestRouteResponse,
+  route2: BestRouteResponse,
+  inputAmount: string,
+  fromTokenUsdPrice: number | null,
+  toTokenUsdPrice: number | null,
+): RouteChangeStatus => {
+  let outUsdValue: BigNumber = (
+    new BigNumber(route2.result?.outputAmount || '0') || ZERO
+  ).multipliedBy(toTokenUsdPrice || 0);
+  if (outUsdValue.isNaN()) outUsdValue = ZERO;
+  let inUsdValue: BigNumber = new BigNumber(inputAmount || '0').multipliedBy(
+    fromTokenUsdPrice || 0,
+  );
+  if (inUsdValue.isNaN()) inUsdValue = ZERO;
+  const outToInRatio =
+    inUsdValue === null || inUsdValue.lte(ZERO)
+      ? 0
+      : outUsdValue === null || outUsdValue.lte(ZERO)
+      ? 0
+      : outUsdValue.div(inUsdValue).minus(1).multipliedBy(100);
+  const disableSwapButton =
+    (parseInt(outToInRatio?.toFixed(2) || '0') <= -10 &&
+      (inUsdValue === null || inUsdValue.gte(new BigNumber(400)))) ||
+    (parseInt(outToInRatio?.toFixed(2) || '0') <= -5 &&
+      (inUsdValue === null || inUsdValue.gte(new BigNumber(1000))));
+
+  if (disableSwapButton) {
+    return {
+      isChanged: true,
+      warningMessage: 'Route updated and price impact is too high, try again later!',
+    };
+  }
+
+  const out1 = route1.result?.outputAmount || null;
+  const out2 = route2.result?.outputAmount || null;
+  if (!!out1 && !!out2) {
+    const changePercent = new BigNumber(out2).div(new BigNumber(out1)).minus(1).multipliedBy(100);
+    if (changePercent.toNumber() <= -1) {
+      return {
+        isChanged: true,
+        warningMessage: `Output amount changed to ${numberToString(out2)} 
+      (${numberToString(changePercent, null, 2)}% change).`,
+      };
+    }
+  }
+  const route1Swaps = route1.result?.swaps || [];
+  const route2Swaps = route2.result?.swaps || [];
+  if (route1Swaps.length !== route2Swaps.length)
+    return { isChanged: true, warningMessage: 'Route has been updated.' };
+  else {
+    for (let i = 0; i < route1Swaps.length; i++) {
+      if (route1Swaps[i].swapperId !== route2Swaps[i].swapperId)
+        return { isChanged: true, warningMessage: 'Route swappers has been updated.' };
+      else if (route1Swaps[i].to.symbol !== route2Swaps[i].to.symbol)
+        return {
+          isChanged: true,
+          warningMessage: 'Route internal coins has been updated.',
+        };
+    }
+  }
+  return { isChanged: false };
+};
+
+export const getOutToInRatio = (fromUsdValue: BigNumber | null, toUsdValue: BigNumber | null) =>
+  fromUsdValue === null || fromUsdValue.lte(ZERO)
+    ? 0
+    : toUsdValue === null || toUsdValue.lte(ZERO)
+    ? 0
+    : toUsdValue.div(fromUsdValue).minus(1).multipliedBy(100);
+
+export const outToRatioHasWarning = (fromUsdValue: BigNumber | null, outToInRatio: BigNumber | 0) =>
+  (parseInt(outToInRatio?.toFixed(2) || '0') <= -10 &&
+    (fromUsdValue === null || fromUsdValue.gte(new BigNumber(200)))) ||
+  (parseInt(outToInRatio?.toFixed(2) || '0') <= -5 &&
+    (fromUsdValue === null || fromUsdValue.gte(new BigNumber(1000))));
+
+export const getRequiredBalanceOfWallet = (
+  wallet: SelectedWallet,
+  fee: SimulationValidationStatus[] | null,
+): SimulationAssetAndAmount[] | null => {
+  if (fee === null) return null;
+  const relatedFeeStatus = fee
+    ?.find((item) => item.blockchain === wallet.chain)
+    ?.wallets.find((it) => it.address?.toLowerCase() === wallet.address.toLowerCase());
+  if (!relatedFeeStatus) return null;
+  return relatedFeeStatus.requiredAssets;
+};

package/src/utils/swap.ts

@@ -0,0 +1,155 @@
+import { PendingSwap } from '@rango-dev/ui/dist/containers/History/types';
+import { WalletTypeAndAddress, SwapSavedSettings } from '@rango-dev/ui/dist/types/swaps';
+import BigNumber from 'bignumber.js';
+import { BestRouteResponse } from 'rango-sdk';
+import { Account } from '../store/wallets';
+import { ZERO } from '../constants/numbers';
+
+export function getOutputRatio(inputUsdValue: BigNumber, outputUsdValue: BigNumber) {
+  if (inputUsdValue.lte(ZERO) || outputUsdValue.lte(ZERO)) return 0;
+  return outputUsdValue.div(inputUsdValue).minus(1).multipliedBy(100);
+}
+
+export function outputRatioHasWarning(inputUsdValue: BigNumber, outputRatio: BigNumber | 0) {
+  return (
+    (parseInt(outputRatio.toFixed(2) || '0') <= -10 && inputUsdValue.gte(new BigNumber(400))) ||
+    (parseInt(outputRatio.toFixed(2) || '0') <= -5 && inputUsdValue.gte(new BigNumber(1000)))
+  );
+}
+
+export function hasLimitError(bestRoute: BestRouteResponse | null): boolean {
+  return (
+    (bestRoute?.result?.swaps || []).filter((swap) => {
+      const minimum = !!swap.fromAmountMinValue ? new BigNumber(swap.fromAmountMinValue) : null;
+      const maximum = !!swap.fromAmountMaxValue ? new BigNumber(swap.fromAmountMaxValue) : null;
+      const isExclusive = swap.fromAmountRestrictionType === 'EXCLUSIVE';
+      if (isExclusive) {
+        return minimum?.gte(swap.fromAmount) || maximum?.lte(swap.fromAmount);
+      } else {
+        return minimum?.gt(swap.fromAmount) || maximum?.lt(swap.fromAmount);
+      }
+    }).length > 0
+  );
+}
+
+export function getSwapButtonTitle(
+  accounts: Account[],
+  loading: boolean,
+  hasLimitError: boolean,
+  highValueLoss: boolean,
+  priceImpactCanNotBeComputed: boolean,
+  needsToWarnEthOnPath: boolean,
+): string {
+  if (loading) return 'Finding Best Route...';
+
+  if (accounts.length == 0) return 'Connect Wallet';
+  else if (hasLimitError) return 'Limit Error';
+  else if (highValueLoss) return 'Price impact is too high!';
+  else if (priceImpactCanNotBeComputed) return 'USD price is unknown, price impact might be high!';
+  else if (needsToWarnEthOnPath) return 'The route goes through Ethereum. Continue?';
+  else return 'Swap';
+}
+
+export function canComputePriceImpact(
+  bestRoute: BestRouteResponse | null,
+  inputAmount: string,
+  inputUsdValue: BigNumber,
+  outputUsdValue: BigNumber,
+) {
+  return !(
+    (inputUsdValue.lte(ZERO) || outputUsdValue.lte(ZERO)) &&
+    !!bestRoute?.result &&
+    !!inputAmount &&
+    inputAmount !== '0' &&
+    parseFloat(inputAmount || '0') !== 0
+  );
+}
+
+export function calculatePendingSwap(
+  inputAmount: string,
+  bestRoute: BestRouteResponse,
+  wallets: { [p: string]: WalletTypeAndAddress },
+  settings: SwapSavedSettings,
+  validateBalanceOrFee: boolean,
+): PendingSwap {
+  const simulationResult = bestRoute.result;
+  if (!simulationResult) throw Error('Simulation result should not be null');
+
+  return {
+    creationTime: new Date().getTime().toString(),
+    finishTime: null,
+    requestId: bestRoute.requestId || '',
+    inputAmount: inputAmount,
+    wallets,
+    status: 'running',
+    isPaused: false,
+    extraMessage: null,
+    extraMessageSeverity: null,
+    extraMessageDetail: null,
+    extraMessageErrorCode: null,
+    networkStatusExtraMessage: null,
+    networkStatusExtraMessageDetail: null,
+    lastNotificationTime: null,
+    settings: settings,
+    simulationResult: simulationResult,
+    validateBalanceOrFee,
+    //TODO: finalize PendingSwap type and remove ts-ignore
+    //@ts-ignore
+    steps:
+      bestRoute.result?.swaps?.map((s, i) => ({
+        id: i + 1,
+        fromBlockchain: s.from.blockchain,
+        fromSymbol: s.from.symbol,
+        fromSymbolAddress: s.from.address,
+        fromDecimals: s.from.decimals,
+        fromAmountPrecision: s.fromAmountPrecision,
+        fromAmountMinValue: s.fromAmountMinValue,
+        fromAmountMaxValue: s.fromAmountMaxValue,
+        toBlockchain: s.to.blockchain,
+        fromLogo: s.from.logo,
+        toSymbol: s.to.symbol,
+        toSymbolAddress: s.to.address,
+        toDecimals: s.to.decimals,
+        toLogo: s.to.logo,
+        startTransactionTime: new Date().getTime(),
+        swapperId: s.swapperId,
+        expectedOutputAmountHumanReadable: s.toAmount,
+        outputAmount: null,
+        status: 'created',
+        networkStatus: null,
+        executedTransactionId: null,
+        externalTransactionId: null,
+        explorerUrl: null,
+        trackingCode: null,
+        cosmosTransaction: null,
+        solanaTransaction: null,
+        starknetTransaction: null,
+        starknetApprovalTransaction: null,
+        tronTransaction: null,
+        tronApprovalTransaction: null,
+        evmTransaction: null,
+        evmApprovalTransaction: null,
+        transferTransaction: null,
+        diagnosisUrl: null,
+        internalSteps: null,
+        fromBlockchainLogo: '',
+        toBlockchainLogo: '',
+        swapperLogo: '',
+        swapperType: '',
+      })) || [],
+  };
+}
+
+export function requiredWallets(route: BestRouteResponse | null) {
+  const wallets: string[] = [];
+
+  route?.result?.swaps.forEach((swap) => {
+    const currentStepFromBlockchain = swap.from.blockchain;
+    const currentStepToBlockchain = swap.to.blockchain;
+    let lastAddedWallet = wallets[wallets.length - 1];
+    if (currentStepFromBlockchain != lastAddedWallet) wallets.push(currentStepFromBlockchain);
+    lastAddedWallet = wallets[wallets.length - 1];
+    if (currentStepToBlockchain != lastAddedWallet) wallets.push(currentStepToBlockchain);
+  });
+  return wallets;
+}