@rango-dev/widget-embedded 0.38.1-next.8 → 0.39.0

package/src/pages/SelectSwapItemsPage.tsx

@@ -13,6 +13,7 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
+import { useWalletsStore } from '../store/wallets';
 
 interface PropTypes {
   type: 'source' | 'destination';
@@ -30,7 +31,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
     setFromBlockchain,
     setToBlockchain,
   } = useQuoteStore();
-  const { getBalanceFor } = useAppStore();
+  const getBalanceFor = useWalletsStore.use.getBalanceFor();
   const [searchedFor, setSearchedFor] = useState<string>('');
 
   const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;

package/src/store/app.ts

@@ -1,4 +1,6 @@
-import type { AppStoreState } from './slices/types';
+import type { ConfigSlice } from './slices/config';
+import type { DataSlice } from './slices/data';
+import type { SettingsSlice } from './slices/settings';
 import type { WidgetConfig } from '../types';
 import type { StateCreator } from 'zustand';
 
@@ -8,7 +10,6 @@ import { persist } from 'zustand/middleware';
 import { createConfigSlice } from './slices/config';
 import { createDataSlice } from './slices/data';
 import { createSettingsSlice } from './slices/settings';
-import { createWalletsSlice } from './slices/wallets';
 
 export type StateCreatorWithInitialData<
   T extends Partial<WidgetConfig>,
@@ -19,13 +20,12 @@ export type StateCreatorWithInitialData<
   ...rest: Parameters<StateCreator<R, [], [], V>>
 ) => ReturnType<StateCreator<R, [], [], V>>;
 
-export type { AppStoreState };
+export type AppStoreState = DataSlice & ConfigSlice & SettingsSlice;
 
 export function createAppStore(initialData?: WidgetConfig) {
   return create<AppStoreState>()(
     persist(
       (...a) => ({
-        ...createWalletsSlice(...a),
         ...createDataSlice(...a),
         ...createSettingsSlice(...a),
         ...createConfigSlice(initialData, ...a),

package/src/store/quote.ts

@@ -21,7 +21,11 @@ import {
   WidgetEvents,
 } from '../types';
 import { isPositiveNumber } from '../utils/numbers';
-import { getUsdInputFrom, getUsdOutputFrom } from '../utils/swap';
+import {
+  getQuoteFromTokenUsdPrice,
+  getQuoteToTokenUsdPrice,
+} from '../utils/quote';
+import { calcOutputUsdValue } from '../utils/swap';
 
 import createSelectors from './selectors';
 
@@ -133,8 +137,14 @@ export const useQuoteStore = createSelectors(
             outputAmount = !!quote?.outputAmount
               ? new BigNumber(quote?.outputAmount)
               : null;
-            inputUsdValue = getUsdInputFrom(quote) ?? ZERO;
-            outputUsdValue = getUsdOutputFrom(quote) ?? ZERO;
+            inputUsdValue = calcOutputUsdValue(
+              state.inputAmount,
+              getQuoteFromTokenUsdPrice(quote) || state.fromToken?.usdPrice
+            );
+            outputUsdValue = calcOutputUsdValue(
+              quote.outputAmount,
+              getQuoteToTokenUsdPrice(quote) || state.toToken?.usdPrice
+            );
           }
           return {
             selectedQuote: quote,

package/src/store/slices/config.ts

@@ -3,30 +3,9 @@ import type { SettingsSlice } from './settings';
 import type { WidgetConfig } from '../../types';
 import type { StateCreatorWithInitialData } from '../app';
 
-import { allProviders as getAllProviders } from '@rango-dev/provider-all';
-import { type VersionedProviders } from '@rango-dev/wallets-core';
-
 import { cacheService } from '../../services/cacheService';
-import {
-  matchAndGenerateProviders,
-  type ProvidersOptions,
-} from '../../utils/providers';
 import { matchTokensFromConfigWithMeta } from '../utils';
 
-function makeProvidersOptionsFromConfig(
-  config: WidgetConfig
-): ProvidersOptions {
-  const options: ProvidersOptions = {
-    walletConnectProjectId: config?.walletConnectProjectId,
-    trezorManifest: config?.trezorManifest,
-    tonConnect: config?.tonConnect,
-    walletConnectListedDesktopWalletLink:
-      config.__UNSTABLE_OR_INTERNAL__?.walletConnectListedDesktopWalletLink,
-  };
-
-  return options;
-}
-
 export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
   title: undefined,
@@ -79,31 +58,6 @@ export interface ConfigSlice {
     name: K,
     value: IframeConfigs[K]
   ) => void;
-  allProviders: VersionedProviders[];
-  buildAndSetProviders: () => void;
-  getAvailableProviders: () => VersionedProviders[];
-}
-
-function generateProviders(config: WidgetConfig) {
-  const options = makeProvidersOptionsFromConfig(config);
-  const envs = {
-    walletconnect2: {
-      WC_PROJECT_ID: options?.walletConnectProjectId || '',
-      DISABLE_MODAL_AND_OPEN_LINK:
-        options?.walletConnectListedDesktopWalletLink,
-    },
-    selectedProviders: config.wallets,
-    trezor: options?.trezorManifest
-      ? { manifest: options.trezorManifest }
-      : undefined,
-    tonConnect: options?.tonConnect?.manifestUrl
-      ? { manifestUrl: options?.tonConnect.manifestUrl }
-      : undefined,
-  };
-  const allProviders = getAllProviders(envs);
-  const allBuiltProviders = allProviders.map((build) => build());
-
-  return allBuiltProviders;
 }
 
 export const createConfigSlice: StateCreatorWithInitialData<
@@ -111,15 +65,10 @@ export const createConfigSlice: StateCreatorWithInitialData<
   ConfigSlice & SettingsSlice & DataSlice,
   ConfigSlice
 > = (initialData, set, get) => {
-  const allBuiltProviders = generateProviders({
-    ...DEFAULT_CONFIG,
-    ...initialData,
-  });
   return {
     config: { ...DEFAULT_CONFIG, ...initialData },
     iframe: DEFAULT_IFRAME_CONFIGS,
     campaignMode: DEFAULT_CAMPAIGN_MODE,
-    allProviders: allBuiltProviders,
     getLiquiditySources: () => {
       const { config, campaignMode } = get();
       return campaignMode.liquiditySources?.length
@@ -210,26 +159,5 @@ export const createConfigSlice: StateCreatorWithInitialData<
         },
       });
     },
-
-    buildAndSetProviders: () => {
-      const { config } = get();
-      const allBuiltProviders = generateProviders(config);
-
-      set({
-        allProviders: allBuiltProviders,
-      });
-    },
-
-    getAvailableProviders: () => {
-      const { allProviders, config } = get();
-      const options = makeProvidersOptionsFromConfig(config);
-
-      const availableProviders = matchAndGenerateProviders({
-        allProviders,
-        configWallets: config.wallets,
-        options,
-      });
-      return availableProviders;
-    },
   };
 };

package/src/store/slices/data.test.ts

@@ -1,4 +1,3 @@
-import type { WidgetConfig } from '../../types';
 import type { AppStoreState } from '../app';
 import type { EvmBlockchainMeta, Token } from 'rango-sdk';
 
@@ -18,24 +17,6 @@ let appStoreState: AppStoreState;
 let customTokens: [Token, Token, Token];
 let rangoBlockchain: EvmBlockchainMeta;
 
-const DEFAULT_CONFIG: WidgetConfig = {
-  apiKey: '',
-  walletConnectProjectId: 'e24844c5deb5193c1c14840a7af6a40b',
-  title: undefined,
-  multiWallets: true,
-  excludeLiquiditySources: true,
-  customDestination: true,
-  variant: 'default',
-  trezorManifest: {
-    appUrl: 'https://widget.rango.exchange/',
-    email: 'hi+trezorwidget@rango.exchange',
-  },
-  tonConnect: {
-    manifestUrl:
-      'https://raw.githubusercontent.com/rango-exchange/rango-types/main/assets/manifests/tonconnect-manifest.json',
-  },
-};
-
 beforeEach(() => {
   cacheService.clear();
   rangoBlockchain = createEvmBlockchain();
@@ -79,7 +60,7 @@ beforeEach(() => {
     initData._tokensMapByBlockchainName[token.blockchain].push(tokenHash);
   });
 
-  const appStore = createAppStore(DEFAULT_CONFIG);
+  const appStore = createAppStore();
   appStore.setState(initData);
   appStoreState = appStore.getState();
 });

package/src/store/slices/data.ts

@@ -348,9 +348,8 @@ export const createDataSlice: StateCreator<
         {};
       const tokens: Token[] = [];
       const popularTokens: Token[] = response.popularTokens;
-      const swappers: SwapperMeta[] = response.swappers.filter(
-        (swapper) => swapper.enabled
-      );
+      const swappers: SwapperMeta[] = response.swappers;
+
       const blockchainsWithAtLeastOneToken = new Set();
 
       response.tokens.forEach((token) => {

package/src/store/ui.ts

@@ -12,14 +12,12 @@ interface UiState {
   tabManagerInitiated: boolean;
   showActivateTabModal: boolean;
   watermark: Watermark;
-  showProfileBanner: boolean;
   activateCurrentTab: (
     setCurrentTabAsActive: () => void,
     hasRunningSwaps: boolean
   ) => void;
   setShowActivateTabModal: (flag: boolean) => void;
   setWatermark: (watermark: Watermark) => void;
-  setShowProfileBanner: (showProfileBanner: boolean) => void;
 }
 
 export const useUiStore = createSelectors(
@@ -28,7 +26,6 @@ export const useUiStore = createSelectors(
     tabManagerInitiated: false,
     showActivateTabModal: false,
     watermark: 'NONE',
-    showProfileBanner: false,
     fetchingApiConfig: false,
     activateCurrentTab: (setCurrentTabAsActive, hasRunningSwaps) => {
       const { showActivateTabModal } = get();
@@ -45,9 +42,6 @@ export const useUiStore = createSelectors(
     setWatermark: (watermark) => {
       set({ watermark });
     },
-    setShowProfileBanner: (showProfileBanner) => {
-      set({ showProfileBanner });
-    },
   }))
 );
 

package/src/store/wallets.ts

@@ -0,0 +1,268 @@
+import type { FindToken } from './slices/data';
+import type { Balance, TokensBalance, Wallet } from '../types';
+import type { WalletType } from '@rango-dev/wallets-shared';
+import type { Token } from 'rango-sdk';
+
+import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+
+import { eventEmitter } from '../services/eventEmitter';
+import { httpService } from '../services/httpService';
+import { WalletEventTypes, WidgetEvents } from '../types';
+import { createTokenHash } from '../utils/meta';
+import {
+  isAccountAndWalletMatched,
+  makeBalanceFor,
+  makeTokensBalance,
+  resetConnectedWalletState,
+} from '../utils/wallets';
+
+import createSelectors from './selectors';
+
+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 ConnectedWallet extends Wallet {
+  balances: TokenBalance[] | null;
+  explorerUrl: string | null;
+  selected: boolean;
+  loading: boolean;
+  error: boolean;
+}
+interface WalletsStore {
+  connectedWallets: ConnectedWallet[];
+  balances: TokensBalance;
+  loading: boolean;
+  connectWallet: (accounts: Wallet[], findToken: FindToken) => void;
+  disconnectWallet: (walletType: WalletType) => void;
+  selectWallets: (wallets: { walletType: string; chain: string }[]) => void;
+  clearConnectedWallet: () => void;
+  getWalletsDetails: (
+    accounts: Wallet[],
+    findToken: FindToken,
+    shouldRetry?: boolean
+  ) => void;
+  getBalanceFor: (token: Token) => Balance | null;
+}
+
+export const useWalletsStore = createSelectors(
+  create<WalletsStore>()(
+    subscribeWithSelector((set, get) => {
+      return {
+        connectedWallets: [],
+        balances: {},
+        loading: false,
+        connectWallet: (accounts, findToken) => {
+          eventEmitter.emit(WidgetEvents.WalletEvent, {
+            type: WalletEventTypes.CONNECT,
+            payload: { walletType: accounts[0].walletType, accounts },
+          });
+
+          const getWalletsDetails = get().getWalletsDetails;
+          set((state) => ({
+            loading: true,
+            connectedWallets: state.connectedWallets
+              .filter((wallet) => wallet.walletType !== accounts[0].walletType)
+              .concat(
+                accounts.map((account) => {
+                  const shouldMarkWalletAsSelected =
+                    !state.connectedWallets.some(
+                      (connectedWallet) =>
+                        connectedWallet.chain === account.chain &&
+                        connectedWallet.selected &&
+                        /**
+                         * Sometimes, the connect function can be called multiple times for a particular wallet type when using the auto-connect feature.
+                         * This check is there to make sure the chosen wallet doesn't end up unselected.
+                         */
+                        connectedWallet.walletType !== account.walletType
+                    );
+                  return {
+                    balances: [],
+                    address: account.address,
+                    chain: account.chain,
+                    explorerUrl: null,
+                    walletType: account.walletType,
+                    selected: shouldMarkWalletAsSelected,
+                    loading: true,
+                    error: false,
+                  };
+                })
+              ),
+          }));
+          getWalletsDetails(accounts, findToken);
+        },
+        disconnectWallet: (walletType) => {
+          set((state) => {
+            if (
+              state.connectedWallets.find(
+                (wallet) => wallet.walletType === walletType
+              )
+            ) {
+              eventEmitter.emit(WidgetEvents.WalletEvent, {
+                type: WalletEventTypes.DISCONNECT,
+                payload: { walletType },
+              });
+            }
+
+            const selectedWallets = state.connectedWallets
+              .filter(
+                (connectedWallet) =>
+                  connectedWallet.selected &&
+                  connectedWallet.walletType !== walletType
+              )
+              .map((selectedWallet) => selectedWallet.chain);
+
+            const connectedWallets = state.connectedWallets
+              .filter(
+                (connectedWallet) => connectedWallet.walletType !== walletType
+              )
+              .map((connectedWallet) => {
+                const anyWalletSelectedForBlockchain = selectedWallets.includes(
+                  connectedWallet.chain
+                );
+                if (anyWalletSelectedForBlockchain) {
+                  return connectedWallet;
+                }
+                selectedWallets.push(connectedWallet.chain);
+                return { ...connectedWallet, selected: true };
+              });
+
+            const balances = makeTokensBalance(connectedWallets);
+
+            return {
+              balances,
+              connectedWallets,
+            };
+          });
+        },
+        selectWallets: (wallets) =>
+          set((state) => ({
+            connectedWallets: state.connectedWallets.map((connectedWallet) => {
+              const walletSelected = !!wallets.find(
+                (wallet) =>
+                  wallet.chain === connectedWallet.chain &&
+                  wallet.walletType !== connectedWallet.walletType &&
+                  connectedWallet.selected
+              );
+              const walletNotSelected = !!wallets.find(
+                (wallet) =>
+                  wallet.chain === connectedWallet.chain &&
+                  wallet.walletType === connectedWallet.walletType &&
+                  !connectedWallet.selected
+              );
+              if (walletSelected) {
+                return { ...connectedWallet, selected: false };
+              } else if (walletNotSelected) {
+                return { ...connectedWallet, selected: true };
+              }
+
+              return connectedWallet;
+            }),
+          })),
+        clearConnectedWallet: () =>
+          set(() => ({
+            connectedWallets: [],
+            selectedWallets: [],
+          })),
+        getWalletsDetails: async (accounts, findToken, shouldRetry = true) => {
+          const getWalletsDetails = get().getWalletsDetails;
+          set((state) => ({
+            loading: true,
+            connectedWallets: state.connectedWallets.map((wallet) => {
+              return accounts.find((account) =>
+                isAccountAndWalletMatched(account, wallet)
+              )
+                ? { ...wallet, loading: true }
+                : wallet;
+            }),
+          }));
+          try {
+            const data = accounts.map(({ address, chain }) => ({
+              address,
+              blockchain: chain,
+            }));
+            const response = await httpService().getWalletsDetails(data);
+            const retrievedBalance = response.wallets;
+            if (retrievedBalance) {
+              set((state) => {
+                const connectedWallets = state.connectedWallets.map(
+                  (connectedWallet) => {
+                    const matchedAccount = accounts.find((account) =>
+                      isAccountAndWalletMatched(account, connectedWallet)
+                    );
+                    const retrievedBalanceAccount = retrievedBalance.find(
+                      (balance) =>
+                        balance.address === connectedWallet.address &&
+                        balance.blockChain === connectedWallet.chain
+                    );
+                    if (
+                      retrievedBalanceAccount?.failed &&
+                      matchedAccount &&
+                      shouldRetry
+                    ) {
+                      getWalletsDetails([matchedAccount], findToken, false);
+                    }
+                    return matchedAccount && retrievedBalanceAccount
+                      ? {
+                          ...connectedWallet,
+                          explorerUrl: retrievedBalanceAccount.explorerUrl,
+                          balances: makeBalanceFor(
+                            retrievedBalanceAccount,
+                            findToken
+                          ),
+                          loading: false,
+                          error: false,
+                        }
+                      : connectedWallet;
+                  }
+                );
+
+                const balances = makeTokensBalance(connectedWallets);
+                return {
+                  loading: false,
+                  balances,
+                  connectedWallets,
+                };
+              });
+            } else {
+              throw new Error('Wallet not found');
+            }
+          } catch (error) {
+            set((state) => {
+              const connectedWallets = state.connectedWallets.map((balance) => {
+                return accounts.find((account) =>
+                  isAccountAndWalletMatched(account, balance)
+                )
+                  ? resetConnectedWalletState(balance)
+                  : balance;
+              });
+
+              const balances = makeTokensBalance(connectedWallets);
+
+              return {
+                loading: false,
+                balances,
+                connectedWallets,
+              };
+            });
+          }
+        },
+        getBalanceFor: (token) => {
+          const { balances } = get();
+          const tokenHash = createTokenHash(token);
+          const balance = balances[tokenHash];
+          return balance ?? null;
+        },
+      };
+    })
+  )
+);

package/src/types/config.ts

@@ -1,5 +1,5 @@
 import type { Language, theme } from '@rango-dev/ui';
-import type { LegacyProviderInterface } from '@rango-dev/wallets-core/dist/legacy/mod';
+import type { ProviderInterface } from '@rango-dev/wallets-react';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Asset } from 'rango-sdk';
 
@@ -258,7 +258,7 @@ export type WidgetConfig = {
   from?: BlockchainAndTokenConfig;
   to?: BlockchainAndTokenConfig;
   liquiditySources?: string[];
-  wallets?: (WalletType | LegacyProviderInterface)[];
+  wallets?: (WalletType | ProviderInterface)[];
   multiWallets?: boolean;
   customDestination?: boolean;
   defaultCustomDestinations?: { [blockchain: string]: string };

package/src/types/quote.ts

@@ -51,9 +51,29 @@ export enum QuoteWarningType {
   UNKNOWN_PRICE,
   INSUFFICIENT_SLIPPAGE,
   HIGH_SLIPPAGE,
-  EXCESSIVE_OUTPUT_AMOUNT_CHANGE,
 }
 
+export enum QuoteUpdateType {
+  QUOTE_UPDATED,
+  QUOTE_SWAPPERS_UPDATED,
+  QUOTE_COINS_UPDATED,
+  QUOTE_AND_OUTPUT_AMOUNT_UPDATED,
+  QUOTE_UPDATED_WITH_HIGH_VALUE_LOSS,
+}
+
+export type QuoteUpdateWarning =
+  | {
+      type: QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED;
+      newOutputAmount: string;
+      percentageChange: string;
+    }
+  | {
+      type: Exclude<
+        QuoteUpdateType,
+        QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED
+      >;
+    };
+
 export type RecommendedSlippages = Map<number, string>;
 
 export type InsufficientSlippageWarning = {
@@ -80,21 +100,15 @@ export type UnknownPriceWarning = {
   type: QuoteWarningType.UNKNOWN_PRICE;
 };
 
-export type ExcessiveOutputAmountChange = {
-  type: QuoteWarningType.EXCESSIVE_OUTPUT_AMOUNT_CHANGE;
-  usdValueChange: string;
-  percentageChange: string;
-};
-
 export type QuoteWarning =
   | HighValueLossWarning
-  | ExcessiveOutputAmountChange
-  | UnknownPriceWarning
   | InsufficientSlippageWarning
-  | HighSlippageWarning;
+  | HighSlippageWarning
+  | UnknownPriceWarning;
 
 export type ConfirmSwapWarnings = {
   quote: QuoteWarning | null;
+  quoteUpdate: QuoteUpdateWarning | null;
   balance: { messages: string[] } | null;
 };
 

package/src/types/wallets.ts

@@ -1,5 +1,5 @@
 import type { WalletInfo } from '@rango-dev/ui';
-import type { WalletType } from '@rango-dev/wallets-shared';
+import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 export interface Wallet {
   chain: string;
@@ -10,7 +10,7 @@ export interface Wallet {
 export type Balance = {
   amount: string;
   decimals: number;
-  usdValue: string | null;
+  usdValue: string;
 };
 
 export type Blockchain = string;
@@ -24,4 +24,8 @@ export type TokensBalance = {
   [key: TokenHash]: Balance;
 };
 
-export type WalletInfoWithExtra = WalletInfo;
+export type WalletInfoWithExtra = WalletInfo & {
+  namespaces?: Namespace[];
+  singleNamespace?: boolean;
+  needsDerivationPath?: boolean;
+};