@rango-dev/wallets-react 0.27.1-next.13 → 0.27.1-next.2

package/src/hub/utils.ts

@@ -1,14 +1,20 @@
 import type { AllProxiedNamespaces } from './types.js';
-import type { Hub, Provider } from '@rango-dev/wallets-core';
+import type { Hub, Provider, State } from '@rango-dev/wallets-core';
 import type {
   LegacyNamespaceInputForConnect,
   LegacyProviderInterface,
   LegacyEventHandler as WalletEventHandler,
 } from '@rango-dev/wallets-core/legacy';
-import type { Event } from '@rango-dev/wallets-core/store';
 
+import {
+  guessProviderStateSelector,
+  namespaceStateSelector,
+} from '@rango-dev/wallets-core';
 import { LegacyEvents as Events } from '@rango-dev/wallets-core/legacy';
-import { type VersionedProviders } from '@rango-dev/wallets-core/utils';
+import {
+  generateStoreId,
+  type VersionedProviders,
+} from '@rango-dev/wallets-core/utils';
 import { pickVersion } from '@rango-dev/wallets-core/utils';
 import {
   type AddEthereumChainParameter,
@@ -31,25 +37,34 @@ import { LastConnectedWalletsFromStorage } from './lastConnectedWallets.js';
 
 /* Gets a list of hub and legacy providers and returns a tuple which separates them. */
 export function separateLegacyAndHubProviders(
-  providers: VersionedProviders[]
+  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]);
+      }
+    });
 
-  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];
+  }
 
-  return [legacyProviders, hubProviders];
+  const legacyProviders = providers.map(
+    (provider) => pickVersion(provider, LEGACY_VERSION)[1]
+  );
+  return [legacyProviders, []];
 }
 
 export function findProviderByType(
@@ -68,188 +83,176 @@ const lastConnectedWalletsFromStorage = new LastConnectedWalletsFromStorage(
   HUB_LAST_CONNECTED_WALLETS
 );
 
-export function mapHubEventsToLegacy(
+export function checkHubStateAndTriggerEvents(
   hub: Hub,
-  event: Event,
+  currentState: State,
+  previousState: State,
   onUpdateState: WalletEventHandler,
   allProviders: VersionedProviders[],
   allBlockChains: ProviderProps['allBlockChains']
 ): void {
-  let legacyProvider;
-  try {
-    legacyProvider = getLegacyProvider(allProviders, event.provider);
-  } catch (e) {
-    console.warn(
-      'Having legacy provider is required for including some information like supported chain. ',
-      e
+  hub.getAll().forEach((provider, providerId) => {
+    const currentProviderState = guessProviderStateSelector(
+      currentState,
+      providerId
+    );
+    const previousProviderState = guessProviderStateSelector(
+      previousState,
+      providerId
     );
-  }
 
-  const provider = hub.get(event.provider);
-  if (!provider) {
-    throw new Error(
-      "Currently all the events have assigned to a provider. The event doesn't include one.",
-      {
-        cause: event,
+    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;
+    const disconnectedNamespacesIds: string[] = [];
+
+    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;
       }
-    );
-  }
 
-  // @ts-expect-error for those events that doesn't have namespace, it will be undefinded
-  const namespaceId: string | undefined = event.namespace;
+      // Check for network
+      if (currentNamespaceState.network !== previousNamespaceState.network) {
+        hasNetworkChanged = true;
+      }
 
-  const namespace = namespaceId
-    ? provider.findByNamespace(namespaceId)
-    : undefined;
-  let accounts: string[] | null = null;
-  let network: string | null = null;
+      // TODO: `accounts` has been frozen, we should check and find where object.freeze() is calling.
 
-  if (namespace) {
-    const [getNamespaceState] = namespace.state();
-    accounts = getNamespaceState().accounts;
-    network = getNamespaceState().network;
-  }
+      // Check for accounts
+      if (
+        previousNamespaceState.accounts?.slice().sort().toString() !==
+        currentNamespaceState.accounts?.slice().sort().toString()
+      ) {
+        if (currentNamespaceState.accounts) {
+          const formattedAddresses = currentNamespaceState.accounts.map(
+            fromAccountIdToLegacyAddressFormat
+          );
 
-  const [getProviderState] = provider.state();
-  const coreState = {
-    connected: getProviderState().connected,
-    connecting: getProviderState().connecting,
-    installed: getProviderState().installed,
-    accounts,
-    network,
-    reachable: true,
-  };
+          if (accounts) {
+            accounts = [...accounts, ...formattedAddresses];
+          } else {
+            accounts = [...formattedAddresses];
+          }
 
-  const eventInfo = {
-    supportedBlockchains:
-      legacyProvider?.getWalletInfo(allBlockChains || []).supportedChains || [],
-    isContractWallet: false,
-    isHub: true,
-    namespace: namespaceId,
-  };
+          hasAccountChanged = true;
+        } else {
+          // Namespace has been disconnected
+          disconnectedNamespacesIds.push(namespace.namespaceId);
+          accounts = null;
+          hasProviderDisconnected = true;
+        }
+      }
+    });
+
+    if (disconnectedNamespacesIds.length > 0) {
+      lastConnectedWalletsFromStorage.removeNamespacesFromWallet(
+        providerId,
+        disconnectedNamespacesIds
+      );
+    }
+
+    let legacyProvider;
+    try {
+      legacyProvider = getLegacyProvider(allProviders, providerId);
+    } catch (e) {
+      console.warn(
+        'Having legacy provider is required for including some information like supported chain. ',
+        e
+      );
+    }
 
-  switch (event.type) {
-    case 'provider_detected':
+    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(
-        event.provider,
+        providerId,
         Events.INSTALLED,
-        true,
+        currentProviderState.installed,
         coreState,
         eventInfo
       );
-      break;
-    case 'provider_connecting':
+    }
+    if (previousProviderState.connecting !== currentProviderState.connecting) {
       onUpdateState(
-        event.provider,
+        providerId,
         Events.CONNECTING,
-        event.value,
+        currentProviderState.connecting,
         coreState,
         eventInfo
       );
-      break;
-    case 'provider_connected':
-      onUpdateState(
-        event.provider,
-        Events.CONNECTED,
-        true,
-        coreState,
-        eventInfo
-      );
-      break;
-    case 'provider_disconnected':
+    }
+    if (previousProviderState.connected !== currentProviderState.connected) {
       onUpdateState(
-        event.provider,
+        providerId,
         Events.CONNECTED,
-        false,
+        currentProviderState.connected,
         coreState,
         eventInfo
       );
+    }
+    if (hasAccountChanged) {
       onUpdateState(
-        event.provider,
+        providerId,
         Events.ACCOUNTS,
-        null,
+        accounts,
         coreState,
         eventInfo
       );
-      break;
-    case 'namespace_disconnected':
-      lastConnectedWalletsFromStorage.removeNamespacesFromWallet(
-        event.provider,
-        [event.namespace]
-      );
-
+    }
+    if (hasProviderDisconnected) {
+      onUpdateState(providerId, Events.ACCOUNTS, null, coreState, eventInfo);
+    }
+    if (hasNetworkChanged) {
       onUpdateState(
-        event.provider,
-        Events.NAMESPACE_DISCONNECTED,
-        event.namespace,
+        providerId,
+        Events.NETWORK,
+        maybeNetwork,
         coreState,
-        {
-          ...eventInfo,
-          namespace: event.namespace,
-        }
+        eventInfo
       );
-      // onUpdateState(event.provider, Events.ACCOUNTS, null, coreState, eventInfo);
-      break;
-    case 'namespace_connected':
-    case 'namespace_account_switched':
-      {
-        if (event.type === 'namespace_account_switched') {
-          onUpdateState(
-            event.provider,
-            Events.NAMESPACE_DISCONNECTED,
-            event.namespace,
-            coreState,
-            eventInfo
-          );
-        }
-
-        const formattedAddresses = event.accounts.map(
-          fromAccountIdToLegacyAddressFormat
-        );
-        onUpdateState(
-          event.provider,
-          Events.ACCOUNTS,
-          formattedAddresses,
-          coreState,
-          {
-            ...eventInfo,
-            namespace: event.namespace,
-          }
-        );
-      }
-      break;
-    case 'namespace_network_switched':
-      onUpdateState(event.provider, Events.NETWORK, event.network, coreState, {
-        ...eventInfo,
-        namespace: event.namespace,
-      });
-      break;
-  }
-}
-
-export function getAllLegacyProviders(
-  allProviders: VersionedProviders[]
-): LegacyProviderInterface[] {
-  const LEGACY_VERSION = '0.0.0';
-
-  const legacyProviders: LegacyProviderInterface[] = [];
-
-  allProviders.forEach((provider) => {
-    const target = pickVersion(provider, LEGACY_VERSION);
-    legacyProviders.push(target[1]);
+    }
   });
-
-  return legacyProviders;
 }
 
 export function getLegacyProvider(
   allProviders: VersionedProviders[],
   type: string
 ): LegacyProviderInterface {
-  const legacyProviders: LegacyProviderInterface[] =
-    getAllLegacyProviders(allProviders);
-
-  const provider = legacyProviders.find((legacyProvider) => {
+  const [legacy] = separateLegacyAndHubProviders(allProviders);
+  const provider = legacy.find((legacyProvider) => {
     return legacyProvider.config.type === type;
   });
 

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

@@ -46,21 +46,33 @@ export async function autoConnect(
       eagerConnectQueue.map(async ({ eagerConnect }) => eagerConnect())
     );
 
-    const walletsToRemoveFromPersistance: WalletType[] = [];
-    result.forEach((settleResult, index) => {
-      const { status } = settleResult;
+    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 (status === 'rejected') {
-        walletsToRemoveFromPersistance.push(
-          eagerConnectQueue[index].walletType
+      if (walletsToRemoveFromPersistance.length) {
+        lastConnectedWalletsFromStorage.removeWallets(
+          walletsToRemoveFromPersistance
         );
       }
-    });
-
-    if (walletsToRemoveFromPersistance.length) {
-      lastConnectedWalletsFromStorage.removeWallets(
-        walletsToRemoveFromPersistance
-      );
     }
   }
 }

package/src/legacy/types.ts

@@ -11,11 +11,6 @@ import type {
 import type { BlockchainMeta, SignerFactory } from 'rango-types';
 import type { PropsWithChildren } from 'react';
 
-import { LegacyEvents as Events } from '@rango-dev/wallets-core/legacy';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type InstanceType = any;
-
 export type State = {
   [key: string]: WalletState | undefined;
 };
@@ -23,10 +18,10 @@ export type State = {
 export type ConnectResult = {
   accounts: string[] | null;
   network: Network | null;
-  provider: InstanceType;
+  provider: any;
 };
 
-export type Providers = { [type in WalletType]?: InstanceType };
+export type Providers = { [type in WalletType]?: any };
 
 export type ExtendedWalletInfo = WalletInfo & {
   properties?: ProviderInfo['properties'];
@@ -39,7 +34,6 @@ export type ProviderContext = {
     namespaces?: LegacyNamespaceInputForConnect[]
   ): Promise<ConnectResult[]>;
   disconnect(type: WalletType): Promise<void>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   disconnectAll(): Promise<PromiseSettledResult<any>[]>;
   state(type: WalletType): WalletState;
   canSwitchNetworkTo(type: WalletType, network: Network): boolean;
@@ -62,11 +56,19 @@ export type ProviderProps = PropsWithChildren<{
   autoConnect?: boolean;
   providers: VersionedProviders[];
   configs?: {
+    isExperimentalEnabled?: boolean;
     wallets?: (WalletType | LegacyProviderInterface)[];
   };
 }>;
 
-export { Events };
+export enum Events {
+  CONNECTED = 'connected',
+  CONNECTING = 'connecting',
+  REACHABLE = 'reachable',
+  INSTALLED = 'installed',
+  ACCOUNTS = 'accounts',
+  NETWORK = 'network',
+}
 
 export type ProviderConnectResult = {
   accounts: string[];
@@ -75,7 +77,7 @@ export type ProviderConnectResult = {
 
 export type GetInstanceOptions = {
   network?: Network;
-  currentProvider: InstanceType;
+  currentProvider: any;
   meta: BlockchainMeta[];
   getState: () => WalletState;
   /**
@@ -89,28 +91,26 @@ export type GetInstanceOptions = {
 };
 
 export type GetInstance =
-  | (() => InstanceType)
-  | ((options: GetInstanceOptions) => Promise<InstanceType>);
+  | (() => any)
+  | ((options: GetInstanceOptions) => Promise<any>);
 export type TryGetInstance =
-  | (() => InstanceType)
-  | ((
-      options: Pick<GetInstanceOptions, 'force' | 'network'>
-    ) => Promise<InstanceType>);
+  | (() => any)
+  | ((options: Pick<GetInstanceOptions, 'force' | 'network'>) => Promise<any>);
 export type Connect = (options: {
-  instance: InstanceType;
+  instance: any;
   network?: Network;
   meta: BlockchainMeta[];
 }) => Promise<ProviderConnectResult | ProviderConnectResult[]>;
 
 export type Disconnect = (options: {
-  instance: InstanceType;
+  instance: any;
   destroyInstance: () => void;
 }) => Promise<void>;
 
 type CleanupSubscribe = () => void;
 
 export type Subscribe = (options: {
-  instance: InstanceType;
+  instance: any;
   state: WalletState;
   meta: BlockchainMeta[];
   updateChainId: (chainId: string) => void;
@@ -120,7 +120,7 @@ export type Subscribe = (options: {
 }) => CleanupSubscribe | void;
 
 export type SwitchNetwork = (options: {
-  instance: InstanceType;
+  instance: any;
   network: Network;
   meta: BlockchainMeta[];
   newInstance?: TryGetInstance;
@@ -129,7 +129,7 @@ export type SwitchNetwork = (options: {
 }) => Promise<void>;
 
 export type Suggest = (options: {
-  instance: InstanceType;
+  instance: any;
   network: Network;
   meta: BlockchainMeta[];
 }) => Promise<void>;
@@ -137,17 +137,17 @@ export type Suggest = (options: {
 export type CanSwitchNetwork = (options: {
   network: Network;
   meta: BlockchainMeta[];
-  provider: InstanceType;
+  provider: any;
 }) => boolean;
 
 export type CanEagerConnect = (options: {
-  instance: InstanceType;
+  instance: any;
   meta: BlockchainMeta[];
 }) => Promise<boolean>;
 
 export interface WalletActions {
   connect: Connect;
-  getInstance: InstanceType;
+  getInstance: any;
   disconnect?: Disconnect;
   subscribe?: Subscribe;
   // unsubscribe, // coupled to subscribe.
@@ -155,7 +155,7 @@ export interface WalletActions {
   // Optional, but should be provided at the same time.
   suggest?: Suggest;
   switchNetwork?: SwitchNetwork;
-  getSigners: (provider: InstanceType) => Promise<SignerFactory>;
+  getSigners: (provider: any) => Promise<SignerFactory>;
   canSwitchNetworkTo?: CanSwitchNetwork;
   canEagerConnect?: CanEagerConnect;
   getWalletInfo(allBlockChains: BlockchainMeta[]): WalletInfo;

package/src/useProviders.ts

@@ -22,8 +22,12 @@ import { useLegacyProviders } from './legacy/mod.js';
  */
 function useProviders(props: ProviderProps) {
   const { providers, ...restProps } = props;
-  const [legacyProviders, hubProviders] =
-    separateLegacyAndHubProviders(providers);
+  const [legacyProviders, hubProviders] = separateLegacyAndHubProviders(
+    providers,
+    {
+      isExperimentalEnabled: restProps.configs?.isExperimentalEnabled,
+    }
+  );
 
   const legacyApi = useLegacyProviders({
     ...restProps,

package/dist/helpers/index.d.ts

@@ -1,2 +0,0 @@
-export { getAllLegacyProviders } from '../hub/mod.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/helpers/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC"}

package/dist/helpers/index.js

@@ -1,2 +0,0 @@
-var g=Object.defineProperty;var o=(d,e)=>g(d,"name",{value:e,configurable:!0});import{LegacyEvents as je}from"@rango-dev/wallets-core/legacy";import"@rango-dev/wallets-core/utils";import{pickVersion as C}from"@rango-dev/wallets-core/utils";import{convertEvmBlockchainMetaToEvmChainInfo as qe}from"@rango-dev/wallets-shared";import{isEvmBlockchain as Me}from"rango-types";var s="last-connected-wallets",n="hub-v1-last-connected-wallets";import{createContext as w}from"react";var c="Context hasn't been initialized yet.",h={async connect(){throw new Error(c)},async disconnect(){throw new Error(c)},async disconnectAll(){throw new Error(c)},async suggestAndConnect(){throw new Error(c)},state(){throw new Error(c)},canSwitchNetworkTo(){throw new Error(c)},providers(){throw new Error(c)},getWalletInfo(){throw new Error(c)},getSigners(){throw new Error(c)}},u=w(h);import{useEffect as we,useReducer as he}from"react";import{Persistor as i}from"@rango-dev/wallets-core/legacy";var l=class{static{o(this,"LastConnectedWalletsFromStorage")}#e;constructor(e){this.#e=e}addWallet(e,t){if(this.#e===n)return this.#t(e,t);if(this.#e===s)return this.#a(e);throw new Error("Not implemented")}removeWallets(e){if(this.#e===n)return this.#r(e);if(this.#e===s)return this.#c(e);throw new Error("Not implemented")}list(){if(this.#e===n)return this.#n();if(this.#e===s)return this.#o();throw new Error("Not implemented")}removeNamespacesFromWallet(e,t){if(this.#e===n)return this.#s(e,t);throw new Error("Not implemented")}#o(){let t=new i().getItem(s)||[],r={};return t.forEach(a=>{r[a]=[]}),r}#n(){return new i().getItem(n)||{}}#t(e,t){let r=new i,a=r.getItem(this.#e)||{};r.setItem(this.#e,{...a,[e]:t})}#a(e){let t=new i,r=t.getItem(this.#e)||[];t.setItem(s,r.concat(e))}#r(e){let t=new i,r=t.getItem(this.#e)||{};if(!e){t.setItem(this.#e,{});return}e.forEach(a=>{r[a]&&delete r[a]}),t.setItem(this.#e,r)}#s(e,t){let m=(new i().getItem(this.#e)||{})[e].filter(f=>!t.includes(f.namespace));this.#r([e]),this.#t(e,m)}#c(e){let t=new i,r=t.getItem(this.#e)||[];if(!e){t.setItem(this.#e,[]);return}t.setItem(s,r.filter(a=>!e.includes(a)))}};import{Persistor as B}from"@rango-dev/wallets-core/legacy";import{LegacyWallet as Y}from"@rango-dev/wallets-core/legacy";import{useContext as $,useRef as q}from"react";import{useEffect as Z,useRef as ee}from"react";import{legacyFormatAddressWithNetwork as Te}from"@rango-dev/wallets-core/legacy";import{CAIP as be}from"@rango-dev/wallets-core/utils";import{Err as _e,Ok as Re}from"ts-results";var Je=new l(n);function p(d){let e="0.0.0",t=[];return d.forEach(r=>{let a=C(r,e);t.push(a[1])}),t}o(p,"getAllLegacyProviders");import"@rango-dev/wallets-shared";import{useEffect as Tt,useRef as xt,useState as bt}from"react";import{Ok as _t,Result as Rt}from"ts-results";import{legacyEagerConnectHandler as rt,legacyIsEvmNamespace as ot}from"@rango-dev/wallets-core/legacy";import{Result as at}from"ts-results";var dt=new l(n);import{createStore as gt,Hub as wt}from"@rango-dev/wallets-core";import{useRef as yt}from"react";export{p as getAllLegacyProviders};
-//# sourceMappingURL=index.js.map