@rango-dev/widget-embedded 0.1.10-next.80 → 0.1.10-next.82

package/src/store/wallets.ts

@@ -1,6 +1,7 @@
+import { SelectableWallet } from '@rango-dev/ui';
 import { WalletType } from '@rango-dev/wallets-shared';
 import { create } from 'zustand';
-import { SelectableWallet } from '../pages/ConfirmWalletsPage';
+import { subscribeWithSelector } from 'zustand/middleware';
 import { httpService } from '../services/httpService';
 import {
   getRequiredChains,
@@ -52,92 +53,104 @@ interface WalletsStore {
 }
 
 export const useWalletsStore = createSelectors(
-  create<WalletsStore>()((set) => ({
-    accounts: [],
-    balances: [],
-    selectedWallets: [],
-    connectWallet: (accounts) => {
-      const tokens = useMetaStore.getState().meta.tokens;
+  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) => ({
+          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)
-                  ? makeBalanceFor(account, retrivedBalance, tokens)
+                  ? resetBalanceState(balance)
                   : 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,
-          }),
-      })),
-  })),
+      },
+      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/swapBox.tsx

@@ -1,11 +1,11 @@
-import { SwapContainer } from '@rangodev/ui';
+import { SwapContainer } from '@rango-dev/ui';
 import React from 'react';
 import { AppRouter } from './components/AppRouter';
 import { useMetaStore } from './store/meta';
-import { Events, Provider } from '@rangodev/wallets-core';
-import { allProviders } from '@rangodev/provider-all';
-import { EventHandler } from '@rangodev/wallets-core/dist/wallet';
-import { isEvmBlockchain, Network } from '@rangodev/wallets-shared';
+import { Events, Provider } from '@rango-dev/wallets-core';
+import { allProviders } from '@rango-dev/provider-all';
+import { EventHandler } from '@rango-dev/wallets-core/dist/wallet';
+import { isEvmBlockchain, Network } from '@rango-dev/wallets-shared';
 import {
   prepareAccountsForWalletStore,
   walletAndSupportedChainsNames,

package/src/types/index.ts

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

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

@@ -1,3 +1,7 @@
 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]);
+}

package/src/utils/numbers.ts

@@ -1,4 +1,5 @@
 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 => {
@@ -92,3 +93,19 @@ export function removeExtraDecimals(num: string, maxDecimals: number): string {
     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/routing.ts

@@ -4,8 +4,7 @@ import {
 } 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 { areEqual } from './common';
 import { SelectedWallet } from './wallets';
 
 export const getBestRouteToTokenUsdPrice = (
@@ -13,82 +12,32 @@ export const getBestRouteToTokenUsdPrice = (
 ): 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).`,
-      };
-    }
-  }
+export function isNumberOfSwapsChanged(route1: BestRouteResponse, route2: BestRouteResponse) {
   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 };
+  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 const isRouteChanged = (route1: BestRouteResponse, route2: BestRouteResponse): boolean => {
+  return (
+    isNumberOfSwapsChanged(route1, route2) ||
+    isRouteSwappersUpdated(route1, route2) ||
+    isRouteInternalCoinsUpdated(route1, route2)
+  );
 };
 
-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)))) ||
@@ -96,13 +45,15 @@ export const outToRatioHasWarning = (fromUsdValue: BigNumber | null, outToInRati
     (fromUsdValue === null || fromUsdValue.gte(new BigNumber(1000))));
 
 export const getRequiredBalanceOfWallet = (
-  wallet: SelectedWallet,
+  selectedWallet: 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());
+    ?.find((item) => item.blockchain === selectedWallet.chain)
+    ?.wallets.find(
+      (wallet) => wallet.address?.toLowerCase() === selectedWallet.address.toLowerCase(),
+    );
   if (!relatedFeeStatus) return null;
   return relatedFeeStatus.requiredAssets;
 };