@rango-dev/wallets-react 0.27.0 → 0.27.1-next.0

package/src/hub/utils.ts

@@ -0,0 +1,322 @@
+import type { AllProxiedNamespaces } from './types.js';
+import type { ConnectResult, ProviderProps } from '../legacy/mod.js';
+import type { Hub, Provider, State } from '@rango-dev/wallets-core';
+import type {
+  LegacyNamespaceInputForConnect,
+  LegacyProviderInterface,
+  LegacyEventHandler as WalletEventHandler,
+} from '@rango-dev/wallets-core/legacy';
+
+import {
+  guessProviderStateSelector,
+  namespaceStateSelector,
+} from '@rango-dev/wallets-core';
+import { LegacyEvents as Events } from '@rango-dev/wallets-core/legacy';
+import {
+  generateStoreId,
+  type VersionedProviders,
+} from '@rango-dev/wallets-core/utils';
+import { pickVersion } from '@rango-dev/wallets-core/utils';
+import {
+  type AddEthereumChainParameter,
+  convertEvmBlockchainMetaToEvmChainInfo,
+} from '@rango-dev/wallets-shared';
+import { type BlockchainMeta, isEvmBlockchain } from 'rango-types';
+
+import {
+  fromAccountIdToLegacyAddressFormat,
+  isConnectResultEvm,
+  isConnectResultSolana,
+} from './helpers.js';
+
+/* Gets a list of hub and legacy providers and returns a tuple which separates them. */
+export function separateLegacyAndHubProviders(
+  providers: VersionedProviders[],
+  options?: { isExperimentalEnabled?: boolean }
+): [LegacyProviderInterface[], Provider[]] {
+  const LEGACY_VERSION = '0.0.0';
+  const HUB_VERSION = '1.0.0';
+  const { isExperimentalEnabled = false } = options || {};
+
+  if (isExperimentalEnabled) {
+    const legacyProviders: LegacyProviderInterface[] = [];
+    const hubProviders: Provider[] = [];
+
+    providers.forEach((provider) => {
+      try {
+        const target = pickVersion(provider, HUB_VERSION);
+        hubProviders.push(target[1]);
+      } catch {
+        const target = pickVersion(provider, LEGACY_VERSION);
+        legacyProviders.push(target[1]);
+      }
+    });
+
+    return [legacyProviders, hubProviders];
+  }
+
+  const legacyProviders = providers.map(
+    (provider) => pickVersion(provider, LEGACY_VERSION)[1]
+  );
+  return [legacyProviders, []];
+}
+
+export function findProviderByType(
+  providers: Provider[],
+  type: string
+): Provider | undefined {
+  return providers.find((provider) => provider.id === type);
+}
+
+/**
+ * We will call this function on hub's `subscribe`.
+ * it will check states and will emit legacy events for backward compatibility.
+ */
+export function checkHubStateAndTriggerEvents(
+  hub: Hub,
+  currentState: State,
+  previousState: State,
+  onUpdateState: WalletEventHandler,
+  allProviders: VersionedProviders[],
+  allBlockChains: ProviderProps['allBlockChains']
+): void {
+  hub.getAll().forEach((provider, providerId) => {
+    const currentProviderState = guessProviderStateSelector(
+      currentState,
+      providerId
+    );
+    const previousProviderState = guessProviderStateSelector(
+      previousState,
+      providerId
+    );
+
+    let accounts: string[] | null = [];
+    /*
+     * We don't rely `accounts` to make sure we will trigger proper event on this case:
+     * previous value: [0x...]
+     * current value: []
+     */
+    let hasAccountChanged = false;
+    let hasNetworkChanged = false;
+    let hasProviderDisconnected = false;
+    // It will pick the last network from namespaces.
+    let maybeNetwork = null;
+    provider.getAll().forEach((namespace) => {
+      const storeId = generateStoreId(providerId, namespace.namespaceId);
+      const currentNamespaceState = namespaceStateSelector(
+        currentState,
+        storeId
+      );
+      const previousNamespaceState = namespaceStateSelector(
+        previousState,
+        storeId
+      );
+
+      if (currentNamespaceState.network !== null) {
+        maybeNetwork = currentNamespaceState.network;
+      }
+
+      // Check for network
+      if (currentNamespaceState.network !== previousNamespaceState.network) {
+        hasNetworkChanged = true;
+      }
+
+      // TODO: `accounts` has been frozen, we should check and find where object.freeze() is calling.
+
+      // Check for accounts
+      if (
+        previousNamespaceState.accounts?.slice().sort().toString() !==
+        currentNamespaceState.accounts?.slice().sort().toString()
+      ) {
+        if (currentNamespaceState.accounts) {
+          const formattedAddresses = currentNamespaceState.accounts.map(
+            fromAccountIdToLegacyAddressFormat
+          );
+
+          if (accounts) {
+            accounts = [...accounts, ...formattedAddresses];
+          } else {
+            accounts = [...formattedAddresses];
+          }
+
+          hasAccountChanged = true;
+        } else {
+          accounts = null;
+          hasProviderDisconnected = true;
+        }
+      }
+    });
+
+    let legacyProvider;
+    try {
+      legacyProvider = getLegacyProvider(allProviders, providerId);
+    } catch (e) {
+      console.warn(
+        'Having legacy provider is required for including some information like supported chain. ',
+        e
+      );
+    }
+
+    const coreState = {
+      connected: currentProviderState.connected,
+      connecting: currentProviderState.connecting,
+      installed: currentProviderState.installed,
+      accounts: accounts,
+      network: maybeNetwork,
+      reachable: true,
+    };
+
+    const eventInfo = {
+      supportedBlockchains:
+        legacyProvider?.getWalletInfo(allBlockChains || []).supportedChains ||
+        [],
+      isContractWallet: false,
+      isHub: true,
+    };
+
+    if (previousProviderState.installed !== currentProviderState.installed) {
+      onUpdateState(
+        providerId,
+        Events.INSTALLED,
+        currentProviderState.installed,
+        coreState,
+        eventInfo
+      );
+    }
+    if (previousProviderState.connecting !== currentProviderState.connecting) {
+      onUpdateState(
+        providerId,
+        Events.CONNECTING,
+        currentProviderState.connecting,
+        coreState,
+        eventInfo
+      );
+    }
+    if (previousProviderState.connected !== currentProviderState.connected) {
+      onUpdateState(
+        providerId,
+        Events.CONNECTED,
+        currentProviderState.connected,
+        coreState,
+        eventInfo
+      );
+    }
+    if (hasAccountChanged) {
+      onUpdateState(
+        providerId,
+        Events.ACCOUNTS,
+        accounts,
+        coreState,
+        eventInfo
+      );
+    }
+    if (hasProviderDisconnected) {
+      onUpdateState(providerId, Events.ACCOUNTS, null, coreState, eventInfo);
+    }
+    if (hasNetworkChanged) {
+      onUpdateState(
+        providerId,
+        Events.NETWORK,
+        maybeNetwork,
+        coreState,
+        eventInfo
+      );
+    }
+  });
+}
+
+export function getLegacyProvider(
+  allProviders: VersionedProviders[],
+  type: string
+): LegacyProviderInterface {
+  const [legacy] = separateLegacyAndHubProviders(allProviders);
+  const provider = legacy.find((legacyProvider) => {
+    return legacyProvider.config.type === type;
+  });
+
+  if (!provider) {
+    console.warn(
+      `You have a provider that doesn't have legacy provider. It causes some problems since we need some legacy functionality. Provider Id: ${type}`
+    );
+    throw new Error(
+      `You need to have legacy implementation to use some methods. Provider Id: ${type}`
+    );
+  }
+
+  return provider;
+}
+
+/**
+ * In legacy mode, for those who have switch network functionality (like evm), we are using an enum for network names
+ * this enum only has meaning for us, and when we are going to connect an instance (e.g. window.ethereum) we should pass chain id.
+ */
+export function convertNamespaceNetworkToEvmChainId(
+  namespace: LegacyNamespaceInputForConnect,
+  meta: BlockchainMeta[]
+) {
+  if (!namespace.network) {
+    return undefined;
+  }
+
+  const evmBlockchainsList = meta.filter(isEvmBlockchain);
+  const evmChains = convertEvmBlockchainMetaToEvmChainInfo(evmBlockchainsList);
+
+  return evmChains[namespace.network];
+}
+
+/**
+ * We are passing an string for chain id (e.g. ETH, POLYGON), but wallet's instances (e.g. window.ethereum) needs chainId (e.g. 0x1).
+ * This function will help us to map these strings to proper hex ids.
+ *
+ * If you need same functionality for other blockchain types (e.g. Cosmos), You can make a separate function and add it here.
+ */
+export function tryConvertNamespaceNetworkToChainInfo(
+  namespace: LegacyNamespaceInputForConnect,
+  meta: BlockchainMeta[]
+): string | AddEthereumChainParameter | undefined {
+  // `undefined` means it's not evm or we couldn't find it in meta.
+  const evmChain = convertNamespaceNetworkToEvmChainId(namespace, meta);
+  const network = evmChain || namespace.network;
+
+  return network;
+}
+
+export function transformHubResultToLegacyResult(
+  res: Awaited<ReturnType<AllProxiedNamespaces['connect']>>
+): ConnectResult {
+  if (isConnectResultEvm(res)) {
+    return {
+      accounts: res.accounts,
+      network: res.network,
+      provider: undefined,
+    };
+  } else if (isConnectResultSolana(res)) {
+    return {
+      accounts: res,
+      network: null,
+      provider: undefined,
+    };
+  }
+
+  return {
+    accounts: [res],
+    network: null,
+    provider: undefined,
+  };
+}
+
+export function checkProviderListsEquality(
+  providerList1: Provider[],
+  providerList2: Provider[]
+) {
+  const providerIds1 = providerList1
+    .map((provider) => provider.id)
+    .sort()
+    .toString();
+  const providerIds2 = providerList2
+    .map((provider) => provider.id)
+    .sort()
+    .toString();
+
+  return providerIds1 === providerIds2;
+}

package/src/index.ts

@@ -2,3 +2,4 @@ export * from './legacy/helpers.js';
 export { default as Provider } from './provider.js';
 export { useWallets } from './legacy/hooks.js';
 export * from './legacy/types.js';
+export { separateLegacyAndHubProviders } from './hub/mod.js';

package/src/legacy/autoConnect.ts

@@ -0,0 +1,78 @@
+import type { WalletActions, WalletProviders } from './types.js';
+import type { LegacyWallet as Wallet } from '@rango-dev/wallets-core/legacy';
+import type { WalletConfig, WalletType } from '@rango-dev/wallets-shared';
+
+import { LastConnectedWalletsFromStorage } from '../hub/lastConnectedWallets.js';
+
+import { LEGACY_LAST_CONNECTED_WALLETS } from './mod.js';
+
+/*
+ *If a wallet has multiple providers and one of them can be eagerly connected,
+ *then the whole wallet will support it at that point and we try to connect to that wallet as usual in eagerConnect method.
+ */
+export async function autoConnect(
+  wallets: WalletProviders,
+  getWalletInstance: (wallet: {
+    actions: WalletActions;
+    config: WalletConfig;
+  }) => Wallet<any>
+) {
+  const lastConnectedWalletsFromStorage = new LastConnectedWalletsFromStorage(
+    LEGACY_LAST_CONNECTED_WALLETS
+  );
+
+  const lastConnectedWallets = lastConnectedWalletsFromStorage.list();
+  const walletIds = Object.keys(lastConnectedWallets);
+
+  if (walletIds.length) {
+    const eagerConnectQueue: {
+      walletType: WalletType;
+      eagerConnect: () => Promise<any>;
+    }[] = [];
+
+    walletIds.forEach((walletType) => {
+      const wallet = wallets.get(walletType);
+
+      if (!!wallet) {
+        const walletInstance = getWalletInstance(wallet);
+        eagerConnectQueue.push({
+          walletType,
+          eagerConnect: walletInstance.eagerConnect.bind(walletInstance),
+        });
+      }
+    });
+
+    const result = await Promise.allSettled(
+      eagerConnectQueue.map(async ({ eagerConnect }) => eagerConnect())
+    );
+
+    const canRestoreAnyConnection = !!result.find(
+      ({ status }) => status === 'fulfilled'
+    );
+
+    /*
+     *After successfully connecting to at least one wallet,
+     *we will removing the other wallets from persistence.
+     *If we are unable to connect to any wallet,
+     *the persistence will not be removed and the eager connection will be retried with another page load.
+     */
+    if (canRestoreAnyConnection) {
+      const walletsToRemoveFromPersistance: WalletType[] = [];
+      result.forEach((settleResult, index) => {
+        const { status } = settleResult;
+
+        if (status === 'rejected') {
+          walletsToRemoveFromPersistance.push(
+            eagerConnectQueue[index].walletType
+          );
+        }
+      });
+
+      if (walletsToRemoveFromPersistance.length) {
+        lastConnectedWalletsFromStorage.removeWallets(
+          walletsToRemoveFromPersistance
+        );
+      }
+    }
+  }
+}

package/src/legacy/helpers.ts

@@ -6,15 +6,15 @@ import type {
 } from './types.js';
 import type {
   LegacyOptions as Options,
-  LegacyWallet as Wallet,
   LegacyEventHandler as WalletEventHandler,
   LegacyState as WalletState,
 } from '@rango-dev/wallets-core/legacy';
-import type { WalletConfig, WalletType } from '@rango-dev/wallets-shared';
+import type { WalletType } from '@rango-dev/wallets-shared';
 
 import { Persistor } from '@rango-dev/wallets-core/legacy';
 
-import { LAST_CONNECTED_WALLETS } from './constants.js';
+import { LEGACY_LAST_CONNECTED_WALLETS } from '../hub/constants.js';
+import { LastConnectedWalletsFromStorage } from '../hub/lastConnectedWallets.js';
 
 export function choose(wallets: any[], type: WalletType): any | null {
   return wallets.find((wallet) => wallet.type === type) || null;
@@ -109,26 +109,22 @@ export async function tryPersistWallet({
   getState: (walletType: WalletType) => WalletState;
 }) {
   if (walletActions.canEagerConnect) {
-    const persistor = new Persistor<string[]>();
-    const wallets = persistor.getItem(LAST_CONNECTED_WALLETS);
+    const lastConnectedWalletsFromStorage = new LastConnectedWalletsFromStorage(
+      LEGACY_LAST_CONNECTED_WALLETS
+    );
+    const lastConnectedWallets = lastConnectedWalletsFromStorage.list();
+    const walletAlreadyPersisted = !!lastConnectedWallets[type];
 
     /*
      *If on the last attempt we are unable to eagerly connect to any wallet and the user connects any wallet manualy,
      *persistance will be outdated and will need to be removed.
      */
-    const shouldClearPersistance = wallets?.find(
-      (walletType) => !getState(walletType).connected
-    );
-
-    if (shouldClearPersistance) {
+    if (walletAlreadyPersisted && !getState(type).connected) {
       clearPersistance();
     }
 
-    const walletAlreadyPersisted = !!wallets?.find((wallet) => wallet === type);
-    if (wallets && !walletAlreadyPersisted) {
-      persistor.setItem(LAST_CONNECTED_WALLETS, wallets.concat(type));
-    } else {
-      persistor.setItem(LAST_CONNECTED_WALLETS, [type]);
+    if (!walletAlreadyPersisted) {
+      lastConnectedWalletsFromStorage.addWallet(type, []);
     }
   }
 }
@@ -141,92 +137,21 @@ export function tryRemoveWalletFromPersistance({
   walletActions: WalletActions;
 }) {
   if (walletActions.canEagerConnect) {
-    const persistor = new Persistor<string[]>();
-    const wallets = persistor.getItem(LAST_CONNECTED_WALLETS);
-    if (wallets) {
-      persistor.setItem(
-        LAST_CONNECTED_WALLETS,
-        wallets.filter((wallet) => wallet !== type)
-      );
-    }
+    const lastConnectedWalletsFromStorage = new LastConnectedWalletsFromStorage(
+      LEGACY_LAST_CONNECTED_WALLETS
+    );
+    lastConnectedWalletsFromStorage.removeWallets([type]);
   }
 }
 
 export function clearPersistance() {
   const persistor = new Persistor<string[]>();
-  const wallets = persistor.getItem(LAST_CONNECTED_WALLETS);
+  const wallets = persistor.getItem(LEGACY_LAST_CONNECTED_WALLETS);
   if (wallets) {
-    persistor.removeItem(LAST_CONNECTED_WALLETS);
+    persistor.removeItem(LEGACY_LAST_CONNECTED_WALLETS);
   }
 }
 
-/*
- *If a wallet has multiple providers and one of them can be eagerly connected,
- *then the whole wallet will support it at that point and we try to connect to that wallet as usual in eagerConnect method.
- */
-export async function autoConnect(
-  wallets: WalletProviders,
-  getWalletInstance: (wallet: {
-    actions: WalletActions;
-    config: WalletConfig;
-  }) => Wallet<any>
-) {
-  const persistor = new Persistor<string[]>();
-  const lastConnectedWallets = persistor.getItem(LAST_CONNECTED_WALLETS);
-  if (lastConnectedWallets && lastConnectedWallets.length) {
-    const connect_promises: {
-      walletType: WalletType;
-      eagerConnect: () => Promise<any>;
-    }[] = [];
-    lastConnectedWallets.forEach((walletType) => {
-      const wallet = wallets.get(walletType);
-
-      if (!!wallet) {
-        const walletInstance = getWalletInstance(wallet);
-        connect_promises.push({
-          walletType,
-          eagerConnect: walletInstance.eagerConnect.bind(walletInstance),
-        });
-      }
-    });
-
-    const result = await Promise.allSettled(
-      connect_promises.map(async ({ eagerConnect }) => eagerConnect())
-    );
-
-    const canRestoreAnyConnection = !!result.find(
-      ({ status }) => status === 'fulfilled'
-    );
-
-    /*
-     *After successfully connecting to at least one wallet,
-     *we will removing the other wallets from persistence.
-     *If we are unable to connect to any wallet,
-     *the persistence will not be removed and the eager connection will be retried with another page load.
-     */
-    if (canRestoreAnyConnection) {
-      const walletsToRemoveFromPersistance: WalletType[] = [];
-      result.forEach((settleResult, index) => {
-        const { status } = settleResult;
-
-        if (status === 'rejected') {
-          walletsToRemoveFromPersistance.push(
-            connect_promises[index].walletType
-          );
-        }
-      });
-
-      if (walletsToRemoveFromPersistance.length) {
-        persistor.setItem(
-          LAST_CONNECTED_WALLETS,
-          lastConnectedWallets.filter(
-            (walletType) => !walletsToRemoveFromPersistance.includes(walletType)
-          )
-        );
-      }
-    }
-  }
-}
 /*
  *Our event handler includes an internal state updater, and a notifier
  *for the outside listener.

package/src/legacy/mod.ts

@@ -0,0 +1,13 @@
+export type {
+  ProviderProps,
+  ProviderContext,
+  ConnectResult,
+  ExtendedWalletInfo,
+} from './types.js';
+export {
+  LEGACY_LAST_CONNECTED_WALLETS,
+  HUB_LAST_CONNECTED_WALLETS,
+} from '../hub/constants.js';
+
+export { WalletContext } from './context.js';
+export { useLegacyProviders } from './useLegacyProviders.js';

package/src/legacy/types.ts

@@ -1,5 +1,7 @@
+import type { ProviderInfo, VersionedProviders } from '@rango-dev/wallets-core';
 import type {
-  LegacyNamespaceData as NamespaceData,
+  LegacyNamespaceInputForConnect,
+  LegacyProviderInterface,
   LegacyNetwork as Network,
   LegacyEventHandler as WalletEventHandler,
   LegacyWalletInfo as WalletInfo,
@@ -21,12 +23,16 @@ export type ConnectResult = {
 
 export type Providers = { [type in WalletType]?: any };
 
+export type ExtendedWalletInfo = WalletInfo & {
+  properties?: ProviderInfo['properties'];
+  isHub?: boolean;
+};
+
 export type ProviderContext = {
   connect(
     type: WalletType,
-    network?: Network,
-    namespaces?: NamespaceData[]
-  ): Promise<ConnectResult>;
+    namespaces?: LegacyNamespaceInputForConnect[]
+  ): Promise<ConnectResult[]>;
   disconnect(type: WalletType): Promise<void>;
   disconnectAll(): Promise<PromiseSettledResult<any>[]>;
   state(type: WalletType): WalletState;
@@ -40,7 +46,7 @@ export type ProviderContext = {
    */
   providers(): Providers;
   getSigners(type: WalletType): Promise<SignerFactory>;
-  getWalletInfo(type: WalletType): WalletInfo;
+  getWalletInfo(type: WalletType): ExtendedWalletInfo;
   suggestAndConnect(type: WalletType, network: Network): Promise<ConnectResult>;
 };
 
@@ -48,7 +54,11 @@ export type ProviderProps = PropsWithChildren<{
   onUpdateState?: WalletEventHandler;
   allBlockChains?: BlockchainMeta[];
   autoConnect?: boolean;
-  providers: ProviderInterface[];
+  providers: VersionedProviders[];
+  configs?: {
+    isExperimentalEnabled?: boolean;
+    wallets?: (WalletType | LegacyProviderInterface)[];
+  };
 }>;
 
 export enum Events {

package/src/legacy/useAutoConnect.ts

@@ -1,31 +1,23 @@
-import type { GetWalletInstance } from './hooks.js';
-import type { ProviderProps, WalletProviders } from './types.js';
+import type { ProviderProps } from './types.js';
 
 import { useEffect, useRef } from 'react';
 
-import { autoConnect } from './helpers.js';
+import { shouldTryAutoConnect } from './utils.js';
 
 export function useAutoConnect(
   props: Pick<ProviderProps, 'allBlockChains' | 'autoConnect'> & {
-    wallets: WalletProviders;
-    getWalletInstanceFromLegacy: GetWalletInstance;
+    /**
+     * A function to run autoConnect on instances
+     */
+    autoConnectHandler: () => void;
   }
 ) {
   const autoConnectInitiated = useRef(false);
 
-  // Running auto connect on instances
   useEffect(() => {
-    const shouldTryAutoConnect =
-      props.allBlockChains &&
-      props.allBlockChains.length &&
-      props.autoConnect &&
-      !autoConnectInitiated.current;
-
-    if (shouldTryAutoConnect) {
+    if (shouldTryAutoConnect(props) && !autoConnectInitiated.current) {
       autoConnectInitiated.current = true;
-      void (async () => {
-        await autoConnect(props.wallets, props.getWalletInstanceFromLegacy);
-      })();
+      props.autoConnectHandler();
     }
   }, [props.autoConnect, props.allBlockChains]);
 }