@rango-dev/widget-embedded 0.36.1-next.7 → 0.37.0

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';
 
@@ -129,9 +129,6 @@ export type SignersConfig = {
  *
  * @property {'visible' | 'hidden'} [liquiditySource]
  * - The visibility state for the liquiditySource feature. Optional property.
- *
- * @property {'disabled' | 'enabled'} [experimentalWallet]
- * - Enable our experimental version of wallets. Default: disable on production, enabled on dev.
  */
 export type Features = Partial<
   Record<
@@ -143,8 +140,7 @@ export type Features = Partial<
     | 'customTokens',
     'visible' | 'hidden'
   >
-> &
-  Partial<Record<'experimentalWallet', 'disabled' | 'enabled'>>;
+>;
 
 /**
  * `Routing`
@@ -257,7 +253,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/wallets.ts

@@ -1,6 +1,5 @@
 import type { WalletInfo } from '@rango-dev/ui';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
-import type { WalletType } from '@rango-dev/wallets-shared';
+import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 export interface Wallet {
   chain: string;
@@ -11,7 +10,7 @@ export interface Wallet {
 export type Balance = {
   amount: string;
   decimals: number;
-  usdValue: string | null;
+  usdValue: string;
 };
 
 export type Blockchain = string;

package/src/utils/providers.ts

@@ -1,13 +1,7 @@
 import type { WidgetConfig } from '../types';
-import type { LegacyProviderInterface } from '@rango-dev/wallets-core/legacy';
+import type { ProviderInterface } from '@rango-dev/wallets-react';
 
 import { allProviders } from '@rango-dev/provider-all';
-import {
-  defineVersions,
-  pickVersion,
-  Provider,
-  type VersionedProviders,
-} from '@rango-dev/wallets-core';
 
 export interface ProvidersOptions {
   walletConnectProjectId?: WidgetConfig['walletConnectProjectId'];
@@ -16,21 +10,19 @@ export interface ProvidersOptions {
   >['walletConnectListedDesktopWalletLink'];
   trezorManifest: WidgetConfig['trezorManifest'];
   tonConnect: WidgetConfig['tonConnect'];
-  experimentalWallet?: 'enabled' | 'disabled';
 }
 
 /**
  *
  * Generate a list of providers by passing a provider name (e.g. metamask) or a custom provider which implemented ProviderInterface.
- * @returns BothProvidersInterface[] a list of BothProvidersInterface
+ * @returns ProviderInterface[] a list of ProviderInterface
  *
  */
-type BothProvidersInterface = LegacyProviderInterface | Provider;
 export function matchAndGenerateProviders(
   providers: WidgetConfig['wallets'],
   options?: ProvidersOptions
-): VersionedProviders[] {
-  const envs = {
+): ProviderInterface[] {
+  const all = allProviders({
     walletconnect2: {
       WC_PROJECT_ID: options?.walletConnectProjectId || '',
       DISABLE_MODAL_AND_OPEN_LINK:
@@ -43,12 +35,10 @@ export function matchAndGenerateProviders(
     tonConnect: options?.tonConnect?.manifestUrl
       ? { manifestUrl: options?.tonConnect.manifestUrl }
       : undefined,
-  };
-
-  const all = allProviders(envs);
+  });
 
   if (providers) {
-    const selectedProviders: VersionedProviders[] = [];
+    const selectedProviders: ProviderInterface[] = [];
 
     providers.forEach((requestedProvider) => {
       /*
@@ -57,24 +47,11 @@ export function matchAndGenerateProviders(
        * The second way is passing a custom provider which implemented ProviderInterface.
        */
       if (typeof requestedProvider === 'string') {
-        const result: BothProvidersInterface | undefined =
-          pickVersionWithFallbackToLegacy(all, options).find((provider) => {
-            if (provider instanceof Provider) {
-              return provider.id === requestedProvider;
-            }
-            return provider.config.type === requestedProvider;
-          });
-
+        const result: ProviderInterface | undefined = all.find((provider) => {
+          return provider.config.type === requestedProvider;
+        });
         if (result) {
-          if (result instanceof Provider) {
-            selectedProviders.push(
-              defineVersions().version('1.0.0', result).build()
-            );
-          } else {
-            selectedProviders.push(
-              defineVersions().version('0.0.0', result).build()
-            );
-          }
+          selectedProviders.push(result);
         } else {
           console.warn(
             `Couldn't find ${requestedProvider} provider. Please make sure you are passing the correct name.`
@@ -82,54 +59,21 @@ export function matchAndGenerateProviders(
         }
       } else {
         // It's a custom provider so we directly push it to the list.
-        if (requestedProvider instanceof Provider) {
-          selectedProviders.push(
-            defineVersions().version('1.0.0', requestedProvider).build()
-          );
-        } else {
-          selectedProviders.push(
-            defineVersions().version('0.0.0', requestedProvider).build()
-          );
-        }
+        selectedProviders.push(requestedProvider);
       }
     });
-
     return selectedProviders;
   }
 
   return all;
 }
 
-// TODO: this is a duplication with what we do in core.
-function pickVersionWithFallbackToLegacy(
-  providers: VersionedProviders[],
-  options?: ProvidersOptions
-): BothProvidersInterface[] {
-  const { experimentalWallet = 'enabled' } = options || {};
-
-  return providers.map((provider) => {
-    const version = experimentalWallet == 'disabled' ? '0.0.0' : '1.0.0';
-    try {
-      return pickVersion(provider, version)[1];
-    } catch {
-      // Fallback to legacy version, if target version doesn't exists.
-      return pickVersion(provider, '0.0.0')[1];
-    }
-  });
-}
-
 export function configWalletsToWalletName(
   config: WidgetConfig['wallets'],
   options?: ProvidersOptions
 ): string[] {
-  const providers = pickVersionWithFallbackToLegacy(
-    matchAndGenerateProviders(config, options),
-    options
-  );
+  const providers = matchAndGenerateProviders(config, options);
   const names = providers.map((provider) => {
-    if (provider instanceof Provider) {
-      return provider.id;
-    }
     return provider.config.type;
   });
   return names;

package/src/utils/settings.ts

@@ -72,10 +72,6 @@ export function isFeatureHidden(feature: keyof Features, features?: Features) {
   return features?.[feature] === 'hidden';
 }
 
-export function isFeatureEnabled(feature: keyof Features, features?: Features) {
-  return features?.[feature] === 'enabled';
-}
-
 export function isRoutingEnabled(item: keyof Routing, routing?: Routing) {
   return routing?.[item] === 'enabled';
 }

package/src/utils/swap.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { FeesGroup, NameOfFees } from '../constants/quote';
 import type { FetchStatus, FindToken } from '../store/slices/data';
-import type { ConnectedWallet } from '../store/slices/wallets';
+import type { ConnectedWallet } from '../store/wallets';
 import type {
   ConvertedToken,
   QuoteError,