@rango-dev/wallets-core 0.40.1-next.11 → 0.40.1-next.13

package/src/hub/store/extend.ts

@@ -0,0 +1,125 @@
+import type {
+  Event,
+  ProviderConnectedEvent,
+  ProviderConnectingEvent,
+  ProviderDisconnectedEvent,
+} from './events.js';
+import type { RawStore, State } from './store.js';
+
+import { guessProviderStateSelector } from './selectors.js';
+
+export interface Store extends Omit<RawStore, 'subscribe'> {
+  subscribe(listener: (event: Event, state: State, prevState: State) => void): {
+    flushEvents(): void;
+  };
+}
+
+/**
+ * Zustand's store provides a set of built-in functionalities,
+ * but it may not meet all our requirements.
+ * This function modifies the interface and adds or updates the available methods.
+ */
+export function extend(store: RawStore): Store {
+  const extendedSubscribe: (store: RawStore) => Store['subscribe'] =
+    (store) => (listener) => {
+      const executeListener = (
+        events: Event[],
+        state: State,
+        prevState: State
+      ) => {
+        for (const ev of events) {
+          listener(ev, state, prevState);
+        }
+      };
+
+      /*
+       * only known changes will fire event for lib users
+       * so all the changes in store won't trigger a user-face event
+       */
+      store.subscribe((state, prevState) => {
+        const eventsLike = getEventsLike(state, prevState);
+        const events = tryConsumeEvents(state);
+        const allQueuedEvents = [...events, ...eventsLike];
+        executeListener(allQueuedEvents, state, prevState);
+      });
+
+      return {
+        /**
+         * Manually run pending events.
+         * This useful when use `subscribe` method after sometime and when store initialized.
+         *
+         * Note: Please consider both current and previous state will be same and we don't have access to previous state in a such scenario.
+         */
+        flushEvents: () => {
+          const state = store.getState();
+          const events = tryConsumeEvents(state);
+          executeListener(events, state, state);
+        },
+      };
+    };
+
+  return new Proxy(store, {
+    get: function (target, prop, receiver) {
+      if (prop === 'subscribe') {
+        return extendedSubscribe(target);
+      }
+      return Reflect.get(target, prop, receiver);
+    },
+  }) as unknown as Store;
+}
+
+/**
+ * Retrieves the ConsumableEvent from the store and returns its values.
+ * The values will be consumed by iterating over the field.
+ */
+function tryConsumeEvents(state: State): Event[] {
+  return [...state.providers.events, ...state.namespaces.events];
+}
+
+/**
+ * In certain cases, adding events to the store is not possible (e.g., namespace or provider layer).
+ * In these cases, we observe store changes and treat specific patterns as events when detected.
+ *
+ * Note: This approach should be avoided in most cases. It is used here to maintain backward compatibility
+ * with the provider's legacy interface.
+ */
+function getEventsLike(state: State, prevState: State): Event[] {
+  const events: Event[] = [];
+
+  for (const providerId of Object.keys(state.providers.list)) {
+    const currentProviderState = guessProviderStateSelector(state, providerId);
+    const previousProviderState = guessProviderStateSelector(
+      prevState,
+      providerId
+    );
+
+    if (previousProviderState.connecting !== currentProviderState.connecting) {
+      const ev: ProviderConnectingEvent = {
+        type: 'provider_connecting',
+        provider: providerId,
+        value: currentProviderState.connecting,
+      };
+      events.push(ev);
+    }
+
+    if (!previousProviderState.connected && currentProviderState.connected) {
+      const ev: ProviderConnectedEvent = {
+        type: 'provider_connected',
+        provider: providerId,
+      };
+
+      events.push(ev);
+    }
+
+    if (previousProviderState.connected && !currentProviderState.connected) {
+      const ev: ProviderDisconnectedEvent = {
+        type: 'provider_disconnected',
+        provider: providerId,
+      };
+
+      events.push(ev);
+    }
+  }
+
+  return events;
+}

package/src/hub/store/mod.ts

@@ -2,7 +2,20 @@ export {
   guessProviderStateSelector,
   namespaceStateSelector,
 } from './selectors.js';
-export type { Store, State } from './store.js';
+export type { Store } from './extend.js';
+export type { State } from './store.js';
+export type {
+  Event,
+  // Providers
+  ProviderDetectedEvent,
+  ProviderConnectingEvent,
+  ProviderConnectedEvent,
+  ProviderDisconnectedEvent,
+  // Namespaces
+  NamespaceDisconnectedEvent,
+  NamespaceConnectedEvent,
+  NamespaceSwitchedAccountEvent,
+} from './events.js';
 export type { ProviderInfo, ProviderConfig } from './providers.js';
 export type { NamespaceConfig, NamespaceData } from './namespaces.js';
 export { createStore } from './store.js';

package/src/hub/store/namespaces.ts

@@ -4,12 +4,17 @@ import type { StateCreator } from 'zustand';
 
 import { produce } from 'immer';
 
+import {
+  ConsumableEvents,
+  type NamespaceConnectedEvent,
+  type NamespaceDisconnectedEvent,
+  type NamespaceSwitchedAccountEvent,
+  type NamespaceSwitchedNetworkEvent,
+} from './events.js';
 import { namespaceStateSelector, type State } from './mod.js';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface NamespaceConfig {
-  // Currently, namespace doesn't has any config.
-}
+// Currently, namespace doesn't has any config.
+export type NamespaceConfig = object;
 
 export interface NamespaceData {
   accounts: null | string[];
@@ -23,15 +28,15 @@ interface NamespaceInfo {
   namespaceId: string;
 }
 
+interface NamespaceItem {
+  info: NamespaceInfo;
+  data: NamespaceData;
+  error: unknown;
+}
+
 type NamespaceState = {
-  list: Record<
-    string,
-    {
-      info: NamespaceInfo;
-      data: NamespaceData;
-      error: unknown;
-    }
-  >;
+  events: InstanceType<typeof ConsumableEvents>;
+  list: Record<string, NamespaceItem>;
 };
 
 interface NamespaceActions {
@@ -41,6 +46,13 @@ interface NamespaceActions {
     key: K,
     value: NamespaceData[K]
   ) => void;
+
+  _produceEventsWhenUpdatingStatus: <K extends keyof NamespaceData>(
+    namespace: NamespaceItem,
+    id: string,
+    key: K,
+    value: NamespaceData[K]
+  ) => void;
 }
 interface NamespaceSelectors {
   getNamespaceData(storeId: string): NamespaceData;
@@ -52,15 +64,19 @@ export type NamespaceStore = NamespaceState &
 type NamespaceStateCreator = StateCreator<State, [], [], NamespaceStore>;
 
 const namespacesStore: NamespaceStateCreator = (set, get) => ({
+  events: new ConsumableEvents(),
+
   list: {},
   addNamespace: (id, info) => {
+    const data: NamespaceData = {
+      accounts: null,
+      network: null,
+      connected: false,
+      connecting: false,
+    };
+
     const item = {
-      data: {
-        accounts: null,
-        network: null,
-        connected: false,
-        connecting: false,
-      },
+      data,
       error: '',
       info,
     };
@@ -72,10 +88,14 @@ const namespacesStore: NamespaceStateCreator = (set, get) => ({
     );
   },
   updateStatus: (id, key, value) => {
-    if (!get().namespaces.list[id]) {
+    const ns = get().namespaces.list[id];
+    if (!ns) {
       throw new Error(`No namespace with '${id}' found.`);
     }
 
+    get().namespaces._produceEventsWhenUpdatingStatus(ns, id, key, value);
+
+    // Updating state
     set(
       produce((state: State) => {
         state.namespaces.list[id].data[key] = value;
@@ -85,6 +105,69 @@ const namespacesStore: NamespaceStateCreator = (set, get) => ({
   getNamespaceData(storeId) {
     return namespaceStateSelector(get(), storeId);
   },
+
+  _produceEventsWhenUpdatingStatus: (namespace, id, key, value) => {
+    if (key === 'accounts') {
+      // check for both null and empty array
+      const isAccountsEmpty =
+        Object.is(value, null) || (Array.isArray(value) && value.length === 0);
+
+      if (isAccountsEmpty) {
+        const currentConnectedStatus = get().namespaces.list[id].data.connected;
+        if (currentConnectedStatus) {
+          const event: NamespaceDisconnectedEvent = {
+            type: 'namespace_disconnected',
+            provider: namespace.info.providerId,
+            namespace: namespace.info.namespaceId,
+          };
+
+          get().namespaces.events.push(event);
+        }
+        // Skip emitting disconnect event, if the `connected` is false
+      } else {
+        const currentAccounts = get().namespaces.list[id].data.accounts;
+
+        if (!currentAccounts) {
+          const event: NamespaceConnectedEvent = {
+            type: 'namespace_connected',
+            provider: namespace.info.providerId,
+            namespace: namespace.info.namespaceId,
+            accounts: value as string[],
+          };
+
+          get().namespaces.events.push(event);
+        } else {
+          const areSameAccounts =
+            currentAccounts.sort().toString() ===
+            (value as string[]).sort().toString();
+
+          if (!areSameAccounts) {
+            const event: NamespaceSwitchedAccountEvent = {
+              type: 'namespace_account_switched',
+              provider: namespace.info.providerId,
+              namespace: namespace.info.namespaceId,
+              previousAccounts: currentAccounts,
+              accounts: value as string[],
+            };
+
+            get().namespaces.events.push(event);
+          }
+        }
+      }
+    } else if (key === 'network') {
+      const currentNetwork = get().namespaces.list[id].data.network;
+
+      const event: NamespaceSwitchedNetworkEvent = {
+        type: 'namespace_network_switched',
+        provider: namespace.info.providerId,
+        namespace: namespace.info.namespaceId,
+        network: value as string,
+        previousNetwork: currentNetwork,
+      };
+
+      get().namespaces.events.push(event);
+    }
+  },
 });
 
 export { namespacesStore };

package/src/hub/store/providers.ts

@@ -4,6 +4,7 @@ import type { StateCreator } from 'zustand';
 
 import { produce } from 'immer';
 
+import { ConsumableEvents, type ProviderDetectedEvent } from './events.js';
 import { guessProviderStateSelector, type State } from './mod.js';
 
 type Browsers = 'firefox' | 'chrome' | 'edge' | 'brave' | 'homepage';
@@ -25,15 +26,15 @@ interface ProviderData {
   installed: boolean;
 }
 
+interface ProviderItem {
+  config: ProviderConfig;
+  data: ProviderData;
+  error: unknown;
+}
+
 type ProviderState = {
-  list: Record<
-    string,
-    {
-      config: ProviderConfig;
-      data: ProviderData;
-      error: unknown;
-    }
-  >;
+  events: ConsumableEvents;
+  list: Record<string, ProviderItem>;
 };
 interface ProviderActions {
   addProvider: (id: string, config: ProviderConfig) => void;
@@ -42,6 +43,13 @@ interface ProviderActions {
     key: K,
     value: ProviderData[K]
   ) => void;
+
+  _produceEventsWhenUpdatingStatus: <K extends keyof ProviderData>(
+    provider: ProviderItem,
+    id: string,
+    key: K,
+    value: ProviderData[K]
+  ) => void;
 }
 
 interface ProviderSelectors {
@@ -56,6 +64,8 @@ export type ProviderStore = ProviderState & ProviderActions & ProviderSelectors;
 type ProvidersStateCreator = StateCreator<State, [], [], ProviderStore>;
 
 const providersStore: ProvidersStateCreator = (set, get) => ({
+  events: new ConsumableEvents(),
+
   list: {},
   addProvider: (id, config) => {
     const item = {
@@ -73,10 +83,13 @@ const providersStore: ProvidersStateCreator = (set, get) => ({
     );
   },
   updateStatus: (id, key, value) => {
-    if (!get().providers.list[id]) {
+    const provider = get().providers.list[id];
+    if (!provider) {
       throw new Error(`No namespace namespace with '${id}' found.`);
     }
 
+    get().providers._produceEventsWhenUpdatingStatus(provider, id, key, value);
+
     set(
       produce((state: State) => {
         state.providers.list[id].data[key] = value;
@@ -86,6 +99,17 @@ const providersStore: ProvidersStateCreator = (set, get) => ({
   guessNamespacesState: (providerId: string): InternalProviderState => {
     return guessProviderStateSelector(get(), providerId);
   },
+
+  _produceEventsWhenUpdatingStatus: (_provider, id, key, _value) => {
+    if (key === 'installed') {
+      const event: ProviderDetectedEvent = {
+        type: 'provider_detected',
+        provider: id,
+      };
+
+      get().providers.events.push(event);
+    }
+  },
 });
 
 export { providersStore };

package/src/hub/store/store.test.ts

@@ -1,4 +1,4 @@
-import type { Store } from './store.js';
+import type { Store } from './mod.js';
 
 import { beforeEach, describe, expect, test } from 'vitest';
 

package/src/hub/store/store.ts

@@ -2,6 +2,7 @@ import type { StoreApi } from 'zustand/vanilla';
 
 import { createStore as createZustandStore } from 'zustand/vanilla';
 
+import { extend, type Store } from './extend.js';
 import { hubStore, type HubStore } from './hub.js';
 import { namespacesStore, type NamespaceStore } from './namespaces.js';
 import { providersStore, type ProviderStore } from './providers.js';
@@ -14,13 +15,16 @@ export interface State {
   namespaces: NamespaceStore;
 }
 
-export type Store = StoreApi<State>;
+export type RawStore = StoreApi<State>;
+
 export const createStore = (): Store => {
-  return createZustandStore<State>((...api) => {
+  const store = createZustandStore<State>((...api) => {
     return {
       hub: hubStore(...api),
       providers: providersStore(...api),
       namespaces: namespacesStore(...api),
     };
   });
+
+  return extend(store);
 };

package/src/legacy/types.ts

@@ -60,11 +60,14 @@ export enum Networks {
   UMEE = 'UMEE',
   STARKNET = 'STARKNET',
   TON = 'TON',
-
+  BASE = 'BASE',
   // Using instead of null
   Unknown = 'Unkown',
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type InstanceType = any;
+
 export type NamespaceData = {
   namespace: Namespace;
   derivationPath?: string;
@@ -127,10 +130,10 @@ export type State = {
 export type ConnectResult = {
   accounts: string[] | null;
   network: Network | null;
-  provider: any;
+  provider: InstanceType;
 };
 
-export type Providers = { [type in WalletType]?: any };
+export type Providers = { [type in WalletType]?: InstanceType };
 
 export enum Events {
   CONNECTED = 'connected',
@@ -139,6 +142,8 @@ export enum Events {
   INSTALLED = 'installed',
   ACCOUNTS = 'accounts',
   NETWORK = 'network',
+  // Hub only events
+  NAMESPACE_DISCONNECTED = 'namespace_disconnected',
 }
 
 export type ProviderConnectResult = {
@@ -148,7 +153,7 @@ export type ProviderConnectResult = {
 
 export type GetInstanceOptions = {
   network?: Network;
-  currentProvider: any;
+  currentProvider: InstanceType;
   meta: BlockchainMeta[];
   getState: () => WalletState;
   /**
@@ -162,29 +167,31 @@ export type GetInstanceOptions = {
 };
 
 export type GetInstance =
-  | (() => any)
-  | ((options: GetInstanceOptions) => Promise<any>);
+  | (() => InstanceType)
+  | ((options: GetInstanceOptions) => Promise<InstanceType>);
 
 export type TryGetInstance =
-  | (() => any)
-  | ((options: Pick<GetInstanceOptions, 'force' | 'network'>) => Promise<any>);
+  | (() => InstanceType)
+  | ((
+      options: Pick<GetInstanceOptions, 'force' | 'network'>
+    ) => Promise<InstanceType>);
 
 export type Connect = (options: {
-  instance: any;
+  instance: InstanceType;
   network?: Network;
   meta: BlockchainMeta[];
   namespaces?: NamespaceData[];
 }) => Promise<ProviderConnectResult | ProviderConnectResult[]>;
 
 export type Disconnect = (options: {
-  instance: any;
+  instance: InstanceType;
   destroyInstance: () => void;
 }) => Promise<void>;
 
 type CleanupSubscribe = () => void;
 
 export type Subscribe = (options: {
-  instance: any;
+  instance: InstanceType;
   state: WalletState;
   meta: BlockchainMeta[];
   updateChainId: (chainId: string) => void;
@@ -194,7 +201,7 @@ export type Subscribe = (options: {
 }) => CleanupSubscribe | void;
 
 export type SwitchNetwork = (options: {
-  instance: any;
+  instance: InstanceType;
   network: Network;
   meta: BlockchainMeta[];
   newInstance?: TryGetInstance;
@@ -203,7 +210,7 @@ export type SwitchNetwork = (options: {
 }) => Promise<void>;
 
 export type Suggest = (options: {
-  instance: any;
+  instance: InstanceType;
   network: Network;
   meta: BlockchainMeta[];
 }) => Promise<void>;
@@ -211,11 +218,11 @@ export type Suggest = (options: {
 export type CanSwitchNetwork = (options: {
   network: Network;
   meta: BlockchainMeta[];
-  provider: any;
+  provider: InstanceType;
 }) => boolean;
 
 export type CanEagerConnect = (options: {
-  instance: any;
+  instance: InstanceType;
   meta: BlockchainMeta[];
 }) => Promise<boolean>;
 
@@ -227,7 +234,7 @@ export type EagerConnectResult<I = unknown> = {
 
 export interface WalletActions {
   connect: Connect;
-  getInstance: any;
+  getInstance: InstanceType;
   disconnect?: Disconnect;
   subscribe?: Subscribe;
   // unsubscribe, // coupled to subscribe.
@@ -235,7 +242,7 @@ export interface WalletActions {
   // Optional, but should be provided at the same time.
   suggest?: Suggest;
   switchNetwork?: SwitchNetwork;
-  getSigners: (provider: any) => Promise<SignerFactory>;
+  getSigners: (provider: InstanceType) => Promise<SignerFactory>;
   canSwitchNetworkTo?: CanSwitchNetwork;
   canEagerConnect?: CanEagerConnect;
   getWalletInfo(allBlockChains: BlockchainMeta[]): WalletInfo;

package/src/legacy/wallet.ts

@@ -7,6 +7,7 @@ import type {
   WalletConfig,
   WalletType,
 } from './types.js';
+import type { Namespace } from '../namespaces/common/types.js';
 import type { BlockchainMeta } from 'rango-types';
 
 import {
@@ -20,6 +21,7 @@ import { eagerConnectHandler } from './utils.js';
 export type EventHandler = (
   type: WalletType,
   event: Events,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any,
   coreState: State,
   info: EventInfo
@@ -28,8 +30,11 @@ export type EventHandler = (
 export type EventInfo = {
   supportedBlockchains: BlockchainMeta[];
   isContractWallet: boolean;
-  // This is for Hub and be able to make it compatible with legacy behavior.
+
+  // Hub fields
   isHub: boolean;
+  // will be set alongside ACCOUNT event
+  namespace?: Namespace;
 };
 
 export interface State {
@@ -49,6 +54,7 @@ export interface Options {
   handler: EventHandler;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 class Wallet<InstanceType = any> {
   public provider: InstanceType | null;
   private actions: WalletActions;
@@ -298,13 +304,13 @@ class Wallet<InstanceType = any> {
     });
   }
 
-  async getSigners(provider: any) {
+  async getSigners(provider: InstanceType) {
     return await this.actions.getSigners(provider);
   }
   getWalletInfo(allBlockChains: BlockchainMeta[]) {
     return this.actions.getWalletInfo(allBlockChains);
   }
-  canSwitchNetworkTo(network: Network, provider: any) {
+  canSwitchNetworkTo(network: Network, provider: InstanceType) {
     const switchTo = this.actions.canSwitchNetworkTo;
     if (!switchTo) {
       return false;
@@ -331,7 +337,7 @@ class Wallet<InstanceType = any> {
         this.setInstalledAs(true);
       }
     } else if (needsCheckInstallation(this.options)) {
-      this.actions.getInstance().then((data: any) => {
+      this.actions.getInstance().then((data: unknown) => {
         if (data) {
           this.setInstalledAs(true);
         }
@@ -339,7 +345,7 @@ class Wallet<InstanceType = any> {
     }
   }
 
-  setProvider(value: any) {
+  setProvider(value: InstanceType | null) {
     this.provider = value;
     if (!!value && !!this.actions.subscribe) {
       const cleanup = this.actions.subscribe({
@@ -395,7 +401,7 @@ class Wallet<InstanceType = any> {
      * We will notify handler after updating all the states.
      * Because when we call `handler` it will has latest states.
      */
-    const updates: [Events, any][] = [];
+    const updates: [Events, unknown][] = [];
 
     if (typeof states.connected !== 'undefined') {
       this.state.connected = states.connected;

package/src/namespaces/evm/builders.ts

@@ -1,10 +1,14 @@
 import type { EvmActions } from './types.js';
 
 import { ActionBuilder } from '../../mod.js';
-import { intoConnectionFinished } from '../common/after.js';
-import { connectAndUpdateStateForMultiNetworks } from '../common/and.js';
+import {
+  connectAndUpdateStateForMultiNetworks,
+  intoConnecting,
+  intoConnectionFinished,
+} from '../common/mod.js';
 
 export const connect = () =>
   new ActionBuilder<EvmActions, 'connect'>('connect')
     .and(connectAndUpdateStateForMultiNetworks)
+    .before(intoConnecting)
     .after(intoConnectionFinished);

package/src/namespaces/solana/builders.ts

@@ -1,10 +1,14 @@
 import type { SolanaActions } from './types.js';
 
 import { ActionBuilder } from '../../mod.js';
-import { intoConnectionFinished } from '../common/after.js';
-import { connectAndUpdateStateForSingleNetwork } from '../common/and.js';
+import {
+  connectAndUpdateStateForSingleNetwork,
+  intoConnecting,
+  intoConnectionFinished,
+} from '../common/mod.js';
 
 export const connect = () =>
   new ActionBuilder<SolanaActions, 'connect'>('connect')
     .and(connectAndUpdateStateForSingleNetwork)
+    .before(intoConnecting)
     .after(intoConnectionFinished);