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

package/src/store/wallets.ts

@@ -0,0 +1,190 @@
+import { SelectableWallet } from '@rango-dev/ui';
+import { WalletType } from '@rango-dev/wallets-shared';
+import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+import { httpService } from '../services/httpService';
+import {
+  getRequiredChains,
+  getTokensWithBalance,
+  isAccountAndBalanceMatched,
+  makeBalanceFor,
+  resetBalanceState,
+  SelectedWallet,
+  sortTokens,
+} from '../utils/wallets';
+import { useBestRouteStore } from './bestRoute';
+import { useMetaStore } from './meta';
+import createSelectors from './selectors';
+import { shallow } from 'zustand/shallow';
+
+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;
+  clearConnectedWallet: () => void;
+}
+
+export const useWalletsStore = createSelectors(
+  create<WalletsStore>()(
+    subscribeWithSelector((set) => ({
+      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,
+            }),
+        })),
+
+      clearConnectedWallet: () =>
+        set(() => ({
+          accounts: [],
+          balances: [],
+          selectedWallets: [],
+        })),
+    }))
+  )
+);
+
+useWalletsStore.subscribe(
+  (state) => state.balances,
+  (balances) => {
+    useBestRouteStore.setState(({ sourceTokens, destinationTokens }) => {
+      const sourceTokensWithBalance = getTokensWithBalance(
+        sourceTokens,
+        balances
+      );
+      const destinationTokensWithBalance = getTokensWithBalance(
+        destinationTokens,
+        balances
+      );
+      return {
+        sourceTokens: sortTokens(sourceTokensWithBalance),
+        destinationTokens: sortTokens(destinationTokensWithBalance),
+      };
+    });
+  },
+  {
+    equalityFn: shallow,
+  }
+);

package/src/types/config.ts

@@ -0,0 +1,44 @@
+import { BlockchainMeta, Token } from 'rango-sdk';
+import { WalletType } from '@rango-dev/wallets-shared';
+export interface Source {
+  title: string;
+  type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
+}
+
+export type Colors = {
+  background?: string;
+  // inputBackground?: string;
+  // icons?: string;
+  primary?: string;
+  foreground?: string;
+  // text?: string;
+  success?: string;
+  error?: string;
+  warning?: string;
+};
+
+export type Configs = {
+  fromChain: BlockchainMeta | null;
+  fromToken: Token | null;
+  toChain: BlockchainMeta | null;
+  toToken: Token | null;
+  fromAmount: number;
+  fromChains: 'all' | BlockchainMeta[];
+  fromTokens: 'all' | Token[];
+  toChains: 'all' | BlockchainMeta[];
+  toTokens: 'all' | Token[];
+  liquiditySources: 'all' | Source[];
+  wallets: 'all' | WalletType[];
+  multiWallets: boolean;
+  customeAddress: boolean;
+  theme: 'dark' | 'light' | 'auto';
+  title: string;
+  width: number;
+  height: number;
+  languege: string;
+  borderRadius: number;
+  fontFamily: string;
+  titleSize: number;
+  titleWeight: number;
+  colors: Colors;
+};

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './swap';
+export * from './config';
+export * from './routing';

package/src/types/routing.ts

@@ -0,0 +1,60 @@
+import { RouteState } from '../store/bestRoute';
+import { SettingsState } from '../store/settings';
+
+export interface BestRouteParams {
+  fromChain?: RouteState['fromChain'];
+  toChain?: RouteState['toChain'];
+  fromToken?: RouteState['fromToken'];
+  toToken?: RouteState['toToken'];
+  inputAmount?: RouteState['inputAmount'];
+  slippage?: SettingsState['slippage'];
+  customSlippage?: SettingsState['customSlippage'];
+  disabledLiquiditySources?: SettingsState['disabledLiquiditySources'];
+}
+
+export enum ConfirmSwapErrorTypes {
+  NO_ROUTE,
+  ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
+  REQUEST_FAILED,
+  INSUFFICIENT_SLIPPAGE,
+}
+
+export type ConfirmSwapError =
+  | {
+      type: ConfirmSwapErrorTypes.REQUEST_FAILED;
+      status?: number;
+    }
+  | {
+      type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE;
+      minRequiredSlippage: number | null;
+    }
+  | {
+      type: Exclude<
+        ConfirmSwapErrorTypes,
+        | ConfirmSwapErrorTypes.REQUEST_FAILED
+        | ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
+      >;
+    };
+
+export type ConfirmSwapWarnings =
+  | {
+      type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED;
+      newOutputAmount: string;
+      percentageChange: string;
+    }
+  | { type: ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE; messages: string[] }
+  | {
+      type: Exclude<
+        ConfirmSwapWarningTypes,
+        | ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
+        | ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE
+      >;
+    };
+
+export enum ConfirmSwapWarningTypes {
+  ROUTE_UPDATED,
+  ROUTE_SWAPPERS_UPDATED,
+  ROUTE_COINS_UPDATED,
+  ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+  INSUFFICIENT_BALANCE,
+}

package/src/types/swap.ts

@@ -0,0 +1,13 @@
+import { SwapSavedSettings } from '@rango-dev/ui/dist/types/swaps';
+
+export type PendingSwapSettings = Omit<
+  SwapSavedSettings,
+  'disabledSwappersIds'
+>;
+
+export type SwapButtonState = (
+  | { disabled: true }
+  | { disabled: false; hasWarning?: boolean }
+) & {
+  title: string;
+};

package/src/utils/common.ts

@@ -0,0 +1,35 @@
+export function removeDuplicateFrom<T>(array: T[]): T[] {
+  return Array.from(new Set(array));
+}
+
+export function areEqual(
+  array1: (number | string)[],
+  array2: (number | string)[]
+) {
+  return (
+    array1.length === array2.length && array1.every((v, i) => v === array2[i])
+  );
+}
+export function shadeColor(color: string, percent: number) {
+  var R = parseInt(color.substring(1, 3), 16);
+  var G = parseInt(color.substring(3, 5), 16);
+  var B = parseInt(color.substring(5, 7), 16);
+
+  R = (R * (100 + percent)) / 100;
+  G = (G * (100 + percent)) / 100;
+  B = (B * (100 + percent)) / 100;
+
+  R = R < 255 ? R : 255;
+  G = G < 255 ? G : 255;
+  B = B < 255 ? B : 255;
+
+  R = Math.round(R);
+  G = Math.round(G);
+  B = Math.round(B);
+
+  var RR = R.toString(16).length == 1 ? '0' + R.toString(16) : R.toString(16);
+  var GG = G.toString(16).length == 1 ? '0' + G.toString(16) : G.toString(16);
+  var BB = B.toString(16).length == 1 ? '0' + B.toString(16) : B.toString(16);
+
+  return '#' + RR + GG + BB;
+}

package/src/utils/numbers.ts

@@ -0,0 +1,133 @@
+import { BigNumber } from 'bignumber.js';
+import { BestRouteResponse } from 'rango-sdk';
+
+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
+  // @ts-ignore
+  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;
+  }
+}
+
+export const totalArrivalTime = (data: BestRouteResponse | null) =>
+  data?.result?.swaps?.reduce((a, b) => a + b.estimatedTimeInSeconds, 0) || 0;
+
+export const rawFees = (data: BestRouteResponse): string =>
+  (
+    data?.result?.swaps?.flatMap((s) =>
+      s.fee.map((f) => ({ swapperId: s.swapperId, fee: f }))
+    ) || []
+  )
+    .reduce((partialSum, a) => partialSum + parseFloat(a.fee.amount), 0)
+    .toFixed(3);
+
+export const decimalNumber = (number = '0', toFixed: number) =>
+  parseFloat(number).toFixed(toFixed);
+
+export const containsText = (text: string, searchText: string) =>
+  text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;

package/src/utils/queue.ts

@@ -0,0 +1,24 @@
+import { Manager } from '@rango-dev/queue-manager-core';
+import {
+  PendingSwapWithQueueID,
+  SwapStorage,
+} from '@rango-dev/queue-manager-rango-preset';
+
+export const getPendingSwaps = (manager: Manager | undefined) => {
+  const result: PendingSwapWithQueueID[] = [];
+
+  manager?.getAll().forEach((q, id) => {
+    const storage = q.list.getStorage() as SwapStorage;
+
+    if (storage?.swapDetails) {
+      result.push({
+        id,
+        swap: storage?.swapDetails,
+      });
+    }
+  });
+
+  return result.sort(
+    (a, b) => Number(b.swap.creationTime) - Number(a.swap.creationTime)
+  );
+};

package/src/utils/routing.ts

@@ -0,0 +1,150 @@
+import {
+  SimulationAssetAndAmount,
+  SimulationValidationStatus,
+} from '@rango-dev/ui/dist/types/swaps';
+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 { TokenMeta } from '@rango-dev/ui/dist/types/meta';
+import { numberToString } from './numbers';
+import { getUsdFeeOfStep } from './swap';
+import { BestRouteWithFee } from '@rango-dev/ui';
+
+export function searchParamsToToken(
+  tokens: Token[],
+  searchParams: string | null,
+  chain: BlockchainMeta | null
+): Token | null {
+  if (!chain) return null;
+  return (
+    tokens.find((token) => {
+      const symbolAndAddress = searchParams?.split('--');
+      if (symbolAndAddress?.length === 1)
+        return (
+          token.symbol === symbolAndAddress[0] &&
+          token.address === null &&
+          token.blockchain === chain.name
+        );
+      return (
+        token.symbol === symbolAndAddress?.[0] &&
+        token.address === symbolAndAddress?.[1] &&
+        token.blockchain === chain.name
+      );
+    }) || null
+  );
+}
+
+export function getBestRouteToTokenUsdPrice(
+  bestRoute: BestRouteResponse | null
+): number | null | undefined {
+  return bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to
+    .usdPrice;
+}
+
+export function isNumberOfSwapsChanged(
+  route1: BestRouteResponse,
+  route2: BestRouteResponse
+) {
+  const route1Swaps = route1.result?.swaps || [];
+  const route2Swaps = route2.result?.swaps || [];
+  return route1Swaps.length !== route2Swaps.length;
+}
+
+export function isRouteSwappersUpdated(
+  route1: BestRouteResponse,
+  route2: BestRouteResponse
+) {
+  const route1Swappers =
+    route1.result?.swaps.map((swap) => swap.swapperId) || [];
+  const route2Swappers =
+    route2.result?.swaps.map((swap) => swap.swapperId) || [];
+  return !areEqual(route1Swappers, route2Swappers);
+}
+
+export function isRouteInternalCoinsUpdated(
+  route1: BestRouteResponse,
+  route2: BestRouteResponse
+) {
+  const route1InternalCoins =
+    route1.result?.swaps.map((swap) => swap.to.symbol) || [];
+  const route2InternalCoins =
+    route2.result?.swaps.map((swap) => swap.to.symbol) || [];
+  return !areEqual(route1InternalCoins, route2InternalCoins);
+}
+
+export function isRouteChanged(
+  route1: BestRouteResponse,
+  route2: BestRouteResponse
+): boolean {
+  return (
+    isNumberOfSwapsChanged(route1, route2) ||
+    isRouteSwappersUpdated(route1, route2) ||
+    isRouteInternalCoinsUpdated(route1, route2)
+  );
+}
+
+export function outToRatioHasWarning(
+  fromUsdValue: BigNumber | null,
+  outToInRatio: BigNumber | 0
+) {
+  return (
+    (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 function getRequiredBalanceOfWallet(
+  selectedWallet: SelectedWallet,
+  fee: SimulationValidationStatus[] | null
+): SimulationAssetAndAmount[] | null {
+  if (fee === null) return null;
+  const relatedFeeStatus = fee
+    ?.find((item) => item.blockchain === selectedWallet.chain)
+    ?.wallets.find(
+      (wallet) =>
+        wallet.address?.toLowerCase() === selectedWallet.address.toLowerCase()
+    );
+  if (!relatedFeeStatus) return null;
+  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 getBestRouteWithCalculatedFees(
+  bestRoute: BestRouteResponse | null,
+  tokens: TokenMeta[]
+): BestRouteWithFee | null {
+  if (!bestRoute || !bestRoute.result) return null;
+  const swapsWithFee = (bestRoute?.result?.swaps || []).map((swap) => ({
+    ...swap,
+    feeInUsd: numberToString(getUsdFeeOfStep(swap, tokens), 0, 2),
+  }));
+
+  return {
+    ...bestRoute,
+    result: { ...bestRoute.result, swaps: swapsWithFee },
+  };
+}