@rango-dev/widget-embedded 0.36.1-next.11 → 0.36.1-next.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.36.1-next.11",
+  "version": "0.36.1-next.12",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@rango-dev/queue-manager-rango-preset": "^0.40.1-next.5",
     "@rango-dev/queue-manager-react": "^0.27.0",
     "@rango-dev/signer-solana": "^0.35.1-next.0",
-    "@rango-dev/ui": "^0.42.1-next.8",
+    "@rango-dev/ui": "^0.42.1-next.10",
     "@rango-dev/wallets-core": "^0.40.1-next.5",
     "@rango-dev/wallets-react": "^0.26.1-next.6",
     "@rango-dev/wallets-shared": "^0.40.1-next.5",

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -149,7 +149,7 @@ export function WalletList(props: PropTypes) {
           const isDisconnected = wallet.state === WalletState.DISCONNECTED;
           const isConnectedButDifferentThanTargetNamespace = wallet.isHub
             ? !conciseAddress
-            : !!wallet.namespaces && !conciseAddress;
+            : !!wallet.needsNamespace && !conciseAddress;
 
           if (isDisconnected) {
             setSelectedWalletToConnect(wallet);

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -12,8 +12,7 @@ import {
   Radio,
   RadioRoot,
 } from '@rango-dev/ui';
-import { namespaces } from '@rango-dev/wallets-shared';
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { WalletImageContainer } from '../HeaderButtons/HeaderButtons.styles';
@@ -23,25 +22,14 @@ import { getBlockchainLogo } from './Namespaces.helpers';
 import { NamespaceList } from './Namespaces.styles';
 
 export function Namespaces(props: PropTypes) {
-  const { singleNamespace, availableNamespaces, providerImage } = props.value;
+  const { targetWallet } = props.value;
+  const singleNamespace = targetWallet.needsNamespace?.selection === 'single';
+  const providerImage = targetWallet.image;
 
   const [selectedNamespaces, setSelectedNamespaces] = useState<Namespace[]>([]);
 
   const blockchains = useAppStore().blockchains();
 
-  const namespacesInfo = useMemo(
-    () =>
-      availableNamespaces?.map((namespace) => ({
-        name: namespace,
-        logo: getBlockchainLogo(
-          blockchains,
-          namespaces[namespace].mainBlockchain
-        ),
-        title: namespaces[namespace].title,
-      })),
-    [availableNamespaces]
-  );
-
   const onSelect = (namespace: Namespace) => {
     if (singleNamespace) {
       setSelectedNamespaces([namespace]);
@@ -83,28 +71,33 @@ export function Namespaces(props: PropTypes) {
       <NamespaceList>
         {wrapRadioRoot(
           <>
-            {namespacesInfo?.map((namespaceInfoItem) => (
-              <ListItemButton
-                key={namespaceInfoItem.name}
-                id={namespaceInfoItem.name}
-                title={namespaceInfoItem.title}
-                hasDivider
-                style={{ height: 60 }}
-                onClick={() => onSelect(namespaceInfoItem.name)}
-                start={<Image src={namespaceInfoItem.logo} size={22} />}
-                end={
-                  singleNamespace ? (
-                    <Radio value={namespaceInfoItem.name} />
-                  ) : (
-                    <Checkbox
-                      checked={selectedNamespaces.includes(
-                        namespaceInfoItem.name
-                      )}
+            {targetWallet.needsNamespace?.data.map((ns) => {
+              return (
+                <ListItemButton
+                  key={ns.id}
+                  id={ns.id}
+                  title={ns.label}
+                  hasDivider
+                  style={{ height: 60 }}
+                  onClick={() => onSelect(ns.value)}
+                  start={
+                    <Image
+                      src={getBlockchainLogo(blockchains, ns.id)}
+                      size={22}
                     />
-                  )
-                }
-              />
-            ))}
+                  }
+                  end={
+                    singleNamespace ? (
+                      <Radio value={ns.value} />
+                    ) : (
+                      <Checkbox
+                        checked={selectedNamespaces.includes(ns.value)}
+                      />
+                    )
+                  }
+                />
+              );
+            })}
           </>
         )}
       </NamespaceList>

package/src/containers/Wallets/Wallets.tsx

@@ -7,6 +7,10 @@ import type { ProvidersOptions } from '../../utils/providers';
 import type { LegacyEventHandler as EventHandler } from '@rango-dev/wallets-core/legacy';
 import type { PropsWithChildren } from 'react';
 
+import {
+  legacyFormatAddressWithNetwork as formatAddressWithNetwork,
+  legacyReadAccountAddress as readAccountAddress,
+} from '@rango-dev/wallets-core/legacy';
 import { Events, Provider } from '@rango-dev/wallets-react';
 import { type Network } from '@rango-dev/wallets-shared';
 import { isEvmBlockchain } from 'rango-sdk';
@@ -36,9 +40,11 @@ function Main(props: PropsWithChildren<PropTypes>) {
     updateSettings,
     fetch: fetchMeta,
     fetchStatus,
+    removeBalancesForWallet,
   } = useAppStore();
   const blockchains = useAppStore().blockchains();
-  const { newWalletConnected, disconnectWallet } = useAppStore();
+  const { newWalletConnected, disconnectWallet, connectedWallets } =
+    useAppStore();
   const config = useAppStore().config;
 
   const walletOptions: ProvidersOptions = {
@@ -75,9 +81,62 @@ function Main(props: PropsWithChildren<PropTypes>) {
 
   const onUpdateState: EventHandler = (type, event, value, state, meta) => {
     if (event === Events.ACCOUNTS) {
+      const supportedChainNames: Network[] | null =
+        walletAndSupportedChainsNames(meta.supportedBlockchains);
+
+      /*
+       * When a wallet is connecting to an evm account, we will consider it as the account exists on other evm-compatible blockchains
+       * To get their balances.
+       *
+       * 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.
+       */
+      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
+          );
+
+          removeBalancesForWallet(type, {
+            chains: data.map((account) => account.chain),
+          });
+        }
+
+        if (nonEvmAccounts.length > 0) {
+          removeBalancesForWallet(type, {
+            chains: nonEvmAccounts.map((account) => {
+              const { network } = readAccountAddress(account);
+              return network;
+            }),
+          });
+        }
+      }
+
+      // After cleaning up balances, it's time to add new accounts.
       if (value) {
-        const supportedChainNames: Network[] | null =
-          walletAndSupportedChainsNames(meta.supportedBlockchains);
         const data = prepareAccountsForWalletStore(
           type,
           value,
@@ -149,6 +208,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
         onUpdateState={onUpdateState}
         autoConnect={!!isActiveTab}
         configs={{
+          wallets: config.wallets,
           isExperimentalEnabled: isFeatureEnabled(
             'experimentalWallet',
             config.features

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -8,8 +8,6 @@ import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import { useReducer } from 'react';
 
-import { convertCommonNamespacesKeysToLegacyNamespace } from '../../utils/hub';
-
 import {
   isStateOnDerivationPathStep,
   isStateOnNamespace,
@@ -99,50 +97,48 @@ export function useStatefulConnect(): UseStatefulConnect {
           detachedInstances && wallet.state !== 'connected';
 
         if (needsNamespace) {
-          const availableNamespaces =
-            convertCommonNamespacesKeysToLegacyNamespace(
-              detachedInstances.value
-            );
-
           dispatch({
             type: 'needsNamespace',
             payload: {
-              providerType: wallet.type,
-              providerImage: wallet.image,
-              availableNamespaces,
-              singleNamespace: false,
+              targetWallet: wallet,
             },
           });
           return { status: ResultStatus.Namespace };
         }
       }
 
-      // Legacy
-      if (!wallet.namespaces) {
+      /*
+       * Legacy
+       *
+       * For legacy there are 3 states:
+       * 1. a wallet doesn't have any namespace defined, we call the connect.
+       * 2. a wallet has more than two namespaces, we should show namepsace modal, and in that place user will be checked to needs derivation path or not.
+       * 3. a wallet has exactly one namespacesape, in this case we check if that needs derivation or not, if it needs we will do it here by dispatching the action accordingly.
+       */
+      if (!wallet.needsNamespace) {
         return await runConnect(wallet.type, undefined, options);
       }
 
-      const needsNamespace = wallet.namespaces.length > 1;
+      const needsNamespace = wallet.needsNamespace.data.length > 1;
       const needsDerivationPath = wallet.needsDerivationPath;
 
       if (needsNamespace) {
         dispatch({
           type: 'needsNamespace',
           payload: {
-            providerType: wallet.type,
-            providerImage: wallet.image,
-            availableNamespaces: wallet.namespaces,
-            singleNamespace: wallet.singleNamespace,
+            targetWallet: wallet,
           },
         });
         return { status: ResultStatus.Namespace };
       } else if (needsDerivationPath) {
+        const namespace = wallet.needsNamespace.data[0];
+
         dispatch({
           type: 'needsDerivationPath',
           payload: {
             providerType: wallet.type,
             providerImage: wallet.image,
-            namespace: wallet.namespaces[0],
+            namespace: namespace.value,
           },
         });
         return { status: ResultStatus.DerivationPath };
@@ -150,7 +146,9 @@ export function useStatefulConnect(): UseStatefulConnect {
 
       return await runConnect(
         wallet.type,
-        wallet.namespaces.map((namespace) => ({ namespace })),
+        wallet.needsNamespace?.data.map((namespace) => ({
+          namespace: namespace.value,
+        })),
         options
       );
     }
@@ -167,7 +165,7 @@ export function useStatefulConnect(): UseStatefulConnect {
     wallet: WalletInfoWithExtra,
     selectedNamespaces: Namespace[]
   ): Promise<Result> => {
-    const isSingleNamespace = wallet.singleNamespace;
+    const isSingleNamespace = wallet.needsNamespace?.selection === 'single';
     const needsDerivationPath = wallet.needsDerivationPath;
     const firstSelectedNamespace = selectedNamespaces[0];
 
@@ -207,7 +205,7 @@ export function useStatefulConnect(): UseStatefulConnect {
       );
     }
 
-    const type = connectState.namespace.providerType;
+    const type = connectState.namespace.targetWallet.type;
     const namespaces = selectedNamespaces.map((namespace) => ({
       namespace,
     }));

package/src/hooks/useStatefulConnect/useStatefulConnect.types.ts

@@ -1,3 +1,4 @@
+import type { ExtendedModalWalletInfo } from '../../utils/wallets';
 import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 export interface HandleConnectOptions {
@@ -6,10 +7,7 @@ export interface HandleConnectOptions {
 }
 
 export interface NeedsNamespacesState {
-  providerType: string;
-  providerImage: string;
-  availableNamespaces?: Namespace[];
-  singleNamespace?: boolean;
+  targetWallet: ExtendedModalWalletInfo;
 }
 
 export interface NeedsDerivationPathState {

package/src/store/slices/wallets.ts

@@ -55,7 +55,12 @@ export interface WalletsSlice {
   setConnectedWalletAsRefetching: (walletType: string) => void;
   setConnectedWalletHasError: (walletType: string) => void;
   setConnectedWalletRetrievedData: (walletType: string) => void;
-  removeBalancesForWallet: (walletType: string) => void;
+  removeBalancesForWallet: (
+    walletType: string,
+    options?: {
+      chains?: string[];
+    }
+  ) => void;
   addConnectedWallet: (accounts: Wallet[]) => void;
   setWalletsAsSelected: (
     wallets: { walletType: string; chain: string }[]
@@ -254,7 +259,7 @@ export const createWalletsSlice: StateCreator<
 
     void get().fetchBalances(accounts);
   },
-  removeBalancesForWallet: (walletType) => {
+  removeBalancesForWallet: (walletType, options) => {
     let walletsNeedsToBeRemoved = get().connectedWallets.filter(
       (connectedWallet) => connectedWallet.walletType === walletType
     );
@@ -275,6 +280,12 @@ export const createWalletsSlice: StateCreator<
       }
     });
 
+    if (!!options?.chains && options.chains.length > 0) {
+      walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
+        return options.chains?.includes(wallet.chain);
+      });
+    }
+
     const nextBalancesState: BalanceState = {};
     let nextAggregatedBalanceState: AggregatedBalanceState =
       get()._aggregatedBalances;

package/src/types/wallets.ts

@@ -1,5 +1,4 @@
 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';
 
 export interface Wallet {
@@ -25,8 +24,4 @@ export type TokensBalance = {
   [key: TokenHash]: Balance;
 };
 
-export type WalletInfoWithExtra = WalletInfo & {
-  namespaces?: Namespace[];
-  singleNamespace?: boolean;
-  needsDerivationPath?: boolean;
-};
+export type WalletInfoWithExtra = WalletInfo;

package/src/utils/providers.ts

@@ -48,6 +48,10 @@ export function matchAndGenerateProviders(
   const all = allProviders(envs);
 
   if (providers) {
+    /*
+     * If `wallets`  is included in widget config,
+     * allProviders should be filtered based on wallets list
+     */
     const selectedProviders: VersionedProviders[] = [];
 
     providers.forEach((requestedProvider) => {
@@ -57,29 +61,36 @@ 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 = all.find((provider) => {
+          /*
+           * To find a provider in allProviders,
+           * a version of each provider should be picked
+           * and validated based on that version scheme.
+           * If the corresponding provider to a wallet was found in allProvider,
+           * it will be add to selected providers.
+           */
+          const versionedProvider = pickProviderVersionWithFallbackToLegacy(
+            provider,
+            options
+          );
+          if (versionedProvider instanceof Provider) {
+            return versionedProvider.id === requestedProvider;
+          }
+          return versionedProvider.config.type === requestedProvider;
+        });
 
+        /*
+         * A provider may have multiple versions
+         * (e.g., 0.0, also known as legacy, and 1.0, also known as hub).
+         * We should ensure that all existing versions of a provider are added to selectedProviders.
+         */
         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()
-            );
-          }
-        } else {
-          console.warn(
-            `Couldn't find ${requestedProvider} provider. Please make sure you are passing the correct name.`
-          );
+          selectedProviders.push(result);
         }
+        console.warn(
+          // A provider name is included in config but was not found in allProviders
+          `Couldn't find ${requestedProvider} provider. Please make sure you are passing the correct name.`
+        );
       } else {
         // It's a custom provider so we directly push it to the list.
         if (requestedProvider instanceof Provider) {
@@ -100,31 +111,27 @@ export function matchAndGenerateProviders(
   return all;
 }
 
-// TODO: this is a duplication with what we do in core.
-function pickVersionWithFallbackToLegacy(
-  providers: VersionedProviders[],
+function pickProviderVersionWithFallbackToLegacy(
+  provider: VersionedProviders,
   options?: ProvidersOptions
-): BothProvidersInterface[] {
+): BothProvidersInterface {
   const { experimentalWallet = 'enabled' } = options || {};
+  const version = experimentalWallet == 'disabled' ? '0.0.0' : '1.0.0';
 
-  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];
-    }
-  });
+  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).map((provider) =>
+    pickProviderVersionWithFallbackToLegacy(provider, options)
   );
   const names = providers.map((provider) => {
     if (provider instanceof Provider) {

package/src/utils/wallets.ts

@@ -87,8 +87,7 @@ export function mapWalletTypesToWalletInfo(
         img: image,
         installLink,
         showOnMobile,
-        namespaces,
-        singleNamespace,
+        needsNamespace,
         supportedChains,
         needsDerivationPath,
         properties,
@@ -106,8 +105,7 @@ export function mapWalletTypesToWalletInfo(
         state,
         type,
         showOnMobile,
-        namespaces,
-        singleNamespace,
+        needsNamespace,
         blockchainTypes,
         needsDerivationPath,
         properties,

package/dist/utils/hub.d.ts

@@ -1,4 +0,0 @@
-import type { CommonNamespaceKeys } from '@rango-dev/wallets-core';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
-export declare function convertCommonNamespacesKeysToLegacyNamespace(namespaces: CommonNamespaceKeys[]): Namespace[];
-//# sourceMappingURL=hub.d.ts.map

package/dist/utils/hub.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hub.d.ts","sourceRoot":"","sources":["../../src/utils/hub.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAE3E,wBAAgB,4CAA4C,CAC1D,UAAU,EAAE,mBAAmB,EAAE,GAChC,SAAS,EAAE,CAeb"}

package/src/utils/hub.ts

@@ -1,21 +0,0 @@
-import type { CommonNamespaceKeys } from '@rango-dev/wallets-core';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
-
-export function convertCommonNamespacesKeysToLegacyNamespace(
-  namespaces: CommonNamespaceKeys[]
-): Namespace[] {
-  return namespaces.map((namespace) => {
-    switch (namespace) {
-      case 'evm':
-        return 'EVM';
-      case 'solana':
-        return 'Solana';
-      case 'cosmos':
-        return 'Cosmos';
-      default:
-        throw new Error(
-          'Can not convert this common namespace key to a proper legacy key.'
-        );
-    }
-  });
-}