@rango-dev/widget-embedded 0.39.1-next.0 → 0.39.1-next.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.39.1-next.0",
+  "version": "0.39.1-next.10",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -16,7 +16,7 @@
     "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
     "clean": "rimraf dist",
     "format": "prettier --write '{.,src}/**/*.{ts,tsx}'",
-    "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore",
+    "lint": "eslint \"**/*.{ts,tsx}\"",
     "test": "vitest",
     "test:watch": "vitest --watch",
     "test:coverage": "vitest run --coverage"
@@ -24,24 +24,24 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/logging-core": "^0.6.0",
-    "@rango-dev/provider-all": "^0.42.1-next.5",
-    "@rango-dev/queue-manager-core": "^0.27.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.42.1-next.0",
-    "@rango-dev/queue-manager-react": "^0.27.0",
-    "@rango-dev/signer-solana": "^0.36.0",
-    "@rango-dev/ui": "^0.43.1-next.2",
-    "@rango-dev/wallets-core": "^0.40.1-next.9",
-    "@rango-dev/wallets-react": "^0.27.1-next.6",
-    "@rango-dev/wallets-shared": "^0.41.1-next.1",
+    "@rango-dev/logging-core": "^0.6.1-next.0",
+    "@rango-dev/provider-all": "^0.42.1-next.12",
+    "@rango-dev/queue-manager-core": "^0.27.1-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.42.1-next.5",
+    "@rango-dev/queue-manager-react": "^0.27.1-next.0",
+    "@rango-dev/signer-solana": "^0.36.1-next.1",
+    "@rango-dev/ui": "^0.43.1-next.6",
+    "@rango-dev/wallets-core": "^0.40.1-next.12",
+    "@rango-dev/wallets-react": "^0.27.1-next.13",
+    "@rango-dev/wallets-shared": "^0.41.1-next.5",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
     "ethers": "^6.13.2",
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
-    "rango-sdk": "^0.1.57",
-    "rango-types": "^0.1.74",
+    "rango-sdk": "^0.1.62",
+    "rango-types": "^0.1.78",
     "react-i18next": "^12.2.0",
     "react-router-dom": "^6.8.0",
     "values.js": "2.1.1",

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -63,7 +63,7 @@ export function WalletList(props: PropTypes) {
     try {
       await suggestAndConnect(wallet.walletType, wallet.chain);
       setAddingExperimentalChainStatus('completed');
-    } catch (e) {
+    } catch {
       setAddingExperimentalChainStatus('rejected');
     }
   };

package/src/containers/Wallets/Wallets.tsx

@@ -77,10 +77,16 @@ function Main(props: PropsWithChildren<PropTypes>) {
     .filter(isEvmBlockchain)
     .map((chain) => chain.name);
 
-  const onUpdateState: EventHandler = (type, event, value, state, meta) => {
+  const onUpdateState: EventHandler = (type, event, value, state, info) => {
+    if (event === Events.NAMESPACE_DISCONNECTED) {
+      removeBalancesForWallet(type, {
+        namespaces: value,
+      });
+    }
+
     if (event === Events.ACCOUNTS) {
       const supportedChainNames: Network[] | null =
-        walletAndSupportedChainsNames(meta.supportedBlockchains);
+        walletAndSupportedChainsNames(info.supportedBlockchains);
 
       /*
        * When a wallet is connecting to an evm account, we will consider it as the account exists on other evm-compatible blockchains
@@ -88,48 +94,52 @@ function Main(props: PropsWithChildren<PropTypes>) {
        *
        * The logic here is for handling switching account functionality in wallets. when a wallet is switching to another account
        * we need to clean the balances for old accounts.
+       *
+       * Note: hub will do the cleanup on namespace diconnected event.
        */
-      const evmAccounts: string[] = [];
-      const nonEvmAccounts: string[] = [];
-
-      value?.forEach((account: string) => {
-        const { network } = readAccountAddress(account);
-        if (evmBasedChainNames.includes(network)) {
-          evmAccounts.push(account);
-        } else {
-          nonEvmAccounts.push(account);
-        }
-      });
-
-      const previousAccounts = connectedWallets
-        .filter((wallet) => wallet.walletType === type)
-        .map((wallet) =>
-          formatAddressWithNetwork(wallet.address, wallet.chain)
-        );
-
-      if (previousAccounts.length > 0) {
-        if (evmAccounts.length > 0) {
-          // We use same logic for removing as we use for adding.
-          const data = prepareAccountsForWalletStore(
-            type,
-            evmAccounts,
-            evmBasedChainNames,
-            supportedChainNames,
-            meta.isContractWallet
+      if (!info.isHub) {
+        const evmAccounts: string[] = [];
+        const nonEvmAccounts: string[] = [];
+
+        value?.forEach((account: string) => {
+          const { network } = readAccountAddress(account);
+          if (evmBasedChainNames.includes(network)) {
+            evmAccounts.push(account);
+          } else {
+            nonEvmAccounts.push(account);
+          }
+        });
+
+        const previousAccounts = connectedWallets
+          .filter((wallet) => wallet.walletType === type)
+          .map((wallet) =>
+            formatAddressWithNetwork(wallet.address, wallet.chain)
           );
 
-          removeBalancesForWallet(type, {
-            chains: data.map((account) => account.chain),
-          });
-        }
-
-        if (nonEvmAccounts.length > 0) {
-          removeBalancesForWallet(type, {
-            chains: nonEvmAccounts.map((account) => {
-              const { network } = readAccountAddress(account);
-              return network;
-            }),
-          });
+        if (previousAccounts.length > 0) {
+          if (evmAccounts.length > 0) {
+            // We use same logic for removing as we use for adding.
+            const data = prepareAccountsForWalletStore(
+              type,
+              evmAccounts,
+              evmBasedChainNames,
+              supportedChainNames,
+              info.isContractWallet
+            );
+
+            removeBalancesForWallet(type, {
+              chains: data.map((account) => account.chain),
+            });
+          }
+
+          if (nonEvmAccounts.length > 0) {
+            removeBalancesForWallet(type, {
+              chains: nonEvmAccounts.map((account) => {
+                const { network } = readAccountAddress(account);
+                return network;
+              }),
+            });
+          }
         }
       }
 
@@ -140,10 +150,10 @@ function Main(props: PropsWithChildren<PropTypes>) {
           value,
           evmBasedChainNames,
           supportedChainNames,
-          meta.isContractWallet
+          info.isContractWallet
         );
         if (data.length) {
-          void newWalletConnected(data);
+          void newWalletConnected(data, info.namespace);
         }
       } else {
         disconnectWallet(type);
@@ -156,11 +166,15 @@ function Main(props: PropsWithChildren<PropTypes>) {
         }
       }
     }
-    if (
-      (event === Events.ACCOUNTS && state.connected) ||
-      // Hub works differently, and this check should be enough.
-      (event === Events.ACCOUNTS && meta.isHub)
-    ) {
+
+    /*
+     * TODO: not sure why we used `Events.Acccounts` for detecting if a provider gets connected or not, if we can use `CONNCECTED` for the legacy
+     * we can only rely Events.Connected and remove the legacy conidition
+     */
+    const isLegacyProviderConnected =
+      event === Events.ACCOUNTS && state.connected;
+    const isHubPorviderConnected = event === Events.CONNECTED && info.isHub;
+    if (isLegacyProviderConnected || isHubPorviderConnected) {
       const key = `${type}-${state.network}-${value}`;
 
       if (!!onConnectWalletHandler.current) {
@@ -181,7 +195,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
 
     // propagate updates for Dapps using external wallets
     if (props.onUpdateState) {
-      props.onUpdateState(type, event, value, state, meta);
+      props.onUpdateState(type, event, value, state, info);
     }
   };
   const isActiveTab = useUiStore.use.isActiveTab();

package/src/store/AppStore.tsx

@@ -15,6 +15,11 @@ export function useAppStore() {
 
   useEffect(() => {
     if (store && !store.persist.hasHydrated()) {
+      /*
+       * folan
+       * asds
+       *
+       */
       void store.persist.rehydrate();
     }
   }, []);

package/src/store/slices/wallets.ts

@@ -1,5 +1,6 @@
 import type { AppStoreState } from './types';
-import type { Token } from 'rango-sdk';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { Token, WalletDetail } from 'rango-sdk';
 import type { StateCreator } from 'zustand';
 
 import BigNumber from 'bignumber.js';
@@ -45,6 +46,7 @@ export interface ConnectedWallet extends Wallet {
   selected: boolean;
   loading: boolean;
   error: boolean;
+  namespace?: Namespace;
 }
 
 interface DeprecatedTokenBalance {
@@ -63,6 +65,17 @@ export interface DeprecatedWalletDetail extends ConnectedWallet {
   balances: DeprecatedTokenBalance[] | null;
 }
 
+function matchWalletDetailsWithConnectedWallet(
+  connectedWallet: ConnectedWallet,
+  walletsDetails: WalletDetail[]
+): WalletDetail | undefined {
+  return walletsDetails.find(
+    (walletDetails) =>
+      connectedWallet.address === walletDetails.address &&
+      connectedWallet.chain === walletDetails.blockChain
+  );
+}
+
 export interface WalletsSlice {
   _balances: BalanceState;
   _aggregatedBalances: AggregatedBalanceState;
@@ -71,21 +84,28 @@ export interface WalletsSlice {
 
   setConnectedWalletAsRefetching: (walletType: string) => void;
   setConnectedWalletHasError: (walletType: string) => void;
-  setConnectedWalletRetrievedData: (walletType: string) => void;
+  setConnectedWalletRetrievedData: (
+    walletType: string,
+    walletsDetails: WalletDetail[]
+  ) => void;
   removeBalancesForWallet: (
     walletType: string,
     options?: {
       chains?: string[];
+      namespaces?: Namespace[];
     }
   ) => void;
-  addConnectedWallet: (accounts: Wallet[]) => void;
+  addConnectedWallet: (accounts: Wallet[], namespace?: Namespace) => void;
   setWalletsAsSelected: (
     wallets: { walletType: string; chain: string }[]
   ) => void;
   /**
    * Add new accounts to store and fetch balances for them.
    */
-  newWalletConnected: (accounts: Wallet[]) => Promise<void>;
+  newWalletConnected: (
+    accounts: Wallet[],
+    namespace?: Namespace
+  ) => Promise<void>;
   /**
    * Disconnect a wallet and clean up balances after that.
    */
@@ -136,7 +156,10 @@ export const createWalletsSlice: StateCreator<
       };
     });
   },
-  setConnectedWalletRetrievedData: (walletType: string) => {
+  setConnectedWalletRetrievedData: (
+    walletType: string,
+    walletsDetails: WalletDetail[]
+  ) => {
     set((state) => {
       return {
         fetchingWallets: false,
@@ -146,6 +169,11 @@ export const createWalletsSlice: StateCreator<
               ...connectedWallet,
               loading: false,
               error: false,
+              explorerUrl:
+                matchWalletDetailsWithConnectedWallet(
+                  connectedWallet,
+                  walletsDetails
+                )?.explorerUrl || connectedWallet.explorerUrl,
             };
           }
 
@@ -172,7 +200,7 @@ export const createWalletsSlice: StateCreator<
       };
     });
   },
-  addConnectedWallet: (accounts: Wallet[]) => {
+  addConnectedWallet: (accounts, namespace) => {
     /*
      * When we are going to add a new account, there are two thing that can be happens:
      * 1. Wallet hasn't add yet.
@@ -192,33 +220,35 @@ export const createWalletsSlice: StateCreator<
     );
 
     if (walletsNeedToBeAdded.length > 0) {
-      const newConnectedWallets = walletsNeedToBeAdded.map((account) => {
-        /*
-         * When a wallet is connecting, we will check if there is any `selected` wallet before, if not, we will consider this new wallet as connected.
-         * In this way, when user tries to swap, we selected a wallet by default and don't need to do an extra click in ConfirmWalletModal
-         */
-        const shouldMarkWalletAsSelected = !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 {
-          address: account.address,
-          chain: account.chain,
-          explorerUrl: null,
-          walletType: account.walletType,
-          selected: shouldMarkWalletAsSelected,
-
-          loading: false,
-          error: false,
-        };
-      });
+      const newConnectedWallets: ConnectedWallet[] = walletsNeedToBeAdded.map(
+        (account) => {
+          /*
+           * When a wallet is connecting, we will check if there is any `selected` wallet before, if not, we will consider this new wallet as connected.
+           * In this way, when user tries to swap, we selected a wallet by default and don't need to do an extra click in ConfirmWalletModal
+           */
+          const shouldMarkWalletAsSelected = !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 {
+            address: account.address,
+            chain: account.chain,
+            explorerUrl: null,
+            walletType: account.walletType,
+            selected: shouldMarkWalletAsSelected,
+            namespace: namespace,
+            loading: false,
+            error: false,
+          };
+        }
+      );
 
       set((state) => {
         /*
@@ -273,13 +303,13 @@ export const createWalletsSlice: StateCreator<
       connectedWallets: nextConnectedWalletsWithUpdatedSelectedStatus,
     });
   },
-  newWalletConnected: async (accounts) => {
+  newWalletConnected: async (accounts, namespace) => {
     eventEmitter.emit(WidgetEvents.WalletEvent, {
       type: WalletEventTypes.CONNECT,
       payload: { walletType: accounts[0].walletType, accounts },
     });
 
-    get().addConnectedWallet(accounts);
+    get().addConnectedWallet(accounts, namespace);
 
     void get().fetchBalances(accounts);
   },
@@ -310,6 +340,15 @@ export const createWalletsSlice: StateCreator<
       });
     }
 
+    if (!!options?.namespaces && options.namespaces.length > 0) {
+      walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
+        if (wallet.namespace) {
+          return options.namespaces?.includes(wallet.namespace);
+        }
+        return false;
+      });
+    }
+
     const nextBalancesState: BalanceState = {};
     let nextAggregatedBalanceState: AggregatedBalanceState =
       get()._aggregatedBalances;
@@ -328,18 +367,17 @@ export const createWalletsSlice: StateCreator<
           }) === key
       );
 
-      if (!shouldBalanceBeRemoved) {
-        nextBalancesState[key] = currentBalancesState[key];
-      }
-
       // if a balance should be removed, we need to remove its caches in _aggregatedBalances as wel.
       if (shouldBalanceBeRemoved) {
         nextAggregatedBalanceState = removeBalanceFromAggregatedBalance(
           nextAggregatedBalanceState,
           key
         );
+      } else {
+        nextBalancesState[key] = currentBalancesState[key];
       }
     });
+
     set({
       _balances: nextBalancesState,
       _aggregatedBalances: nextAggregatedBalanceState,
@@ -415,12 +453,12 @@ export const createWalletsSlice: StateCreator<
     }));
     const response = await httpService().getWalletsDetails(addressesToFetch);
 
-    const listWalletsWithBalances = response.wallets;
+    const walletsDetails = response.wallets;
 
-    if (listWalletsWithBalances) {
+    if (walletsDetails) {
       const { retryOnFailedBalances = true } = options || {};
       if (retryOnFailedBalances) {
-        const failedWallets: Wallet[] = listWalletsWithBalances
+        const failedWallets: Wallet[] = walletsDetails
           .filter((wallet) => wallet.failed)
           .map((wallet) => ({
             chain: wallet.blockChain,
@@ -437,7 +475,7 @@ export const createWalletsSlice: StateCreator<
       let nextBalances: BalanceState = {};
       let nextAggregatedBalances: AggregatedBalanceState =
         get()._aggregatedBalances;
-      listWalletsWithBalances.forEach((wallet) => {
+      walletsDetails.forEach((wallet) => {
         if (wallet.failed) {
           return;
         }
@@ -463,7 +501,7 @@ export const createWalletsSlice: StateCreator<
         _aggregatedBalances: nextAggregatedBalances,
       }));
 
-      get().setConnectedWalletRetrievedData(walletType);
+      get().setConnectedWalletRetrievedData(walletType, walletsDetails);
     } else {
       get().setConnectedWalletHasError(walletType);
       throw new Error(
@@ -529,7 +567,6 @@ export const createWalletsSlice: StateCreator<
 
     return balancesForTargetWalletAddress;
   },
-
   getConnectedWalletsDetails: () => {
     const connectedWallets = get().connectedWallets;
     return connectedWallets.map((wallet) => {
@@ -545,28 +582,21 @@ export const createWalletsSlice: StateCreator<
           if (asset.blockchain === wallet.chain) {
             const token = get().findToken(asset);
 
-            if (!!token) {
-              const amount = balance.amount
-                ? new BigNumber(balance.amount).shiftedBy(-balance.decimals)
-                : ZERO;
-
-              output.push({
-                chain: wallet.chain,
-                symbol: token.symbol,
-                ticker: token.symbol,
-                address: token.address,
-                rawAmount: balance.amount,
-                decimal: balance.decimals,
-                amount: amount.toString(),
-                logo: token.image,
-                usdPrice: token.usdPrice,
-              });
-            } else {
-              console.debug(
-                "Looking for asset but it couldn't be found in tokens store. May not be provided in meta.'",
-                asset
-              );
-            }
+            const amount = balance.amount
+              ? new BigNumber(balance.amount).shiftedBy(-balance.decimals)
+              : ZERO;
+
+            output.push({
+              chain: wallet.chain,
+              symbol: asset.symbol,
+              ticker: asset.symbol,
+              address: asset.address,
+              rawAmount: balance.amount,
+              decimal: balance.decimals,
+              amount: amount.toString(),
+              logo: token?.image || null,
+              usdPrice: token?.usdPrice || null,
+            });
           }
 
           return output;