@rango-dev/wallets-core 0.37.1-next.1 → 0.38.1-next.0

package/src/hub/provider/provider.test.ts

@@ -0,0 +1,231 @@
+import type { EvmActions } from '../../namespaces/evm/types.js';
+import type { SolanaActions } from '../../namespaces/solana/types.js';
+import type { Store } from '../store/mod.js';
+
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+
+import { NamespaceBuilder } from '../../builders/namespace.js';
+import { ProviderBuilder } from '../../builders/provider.js';
+import { garbageWalletInfo } from '../../test-utils/fixtures.js';
+import { createStore } from '../store/mod.js';
+
+import { Provider } from './provider.js';
+
+describe('check providers', () => {
+  let namespaces: {
+    evm: NamespaceBuilder<EvmActions>;
+    solana: NamespaceBuilder<SolanaActions>;
+  };
+  let namespacesMap: Map<any, any>;
+  let store: Store;
+
+  beforeEach(() => {
+    store = createStore();
+    const evmNamespace = new NamespaceBuilder<EvmActions>('eip155', 'garbage');
+    const solanaNamespace = new NamespaceBuilder<SolanaActions>(
+      'solana',
+      'garbage'
+    );
+
+    namespaces = {
+      evm: evmNamespace,
+      solana: solanaNamespace,
+    };
+
+    namespacesMap = new Map();
+    namespacesMap.set('evm', evmNamespace.build());
+    namespacesMap.set('solana', solanaNamespace.build());
+
+    return () => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore-next-line
+      (store = undefined), (namespaces = undefined);
+    };
+  });
+
+  test('Initialize providers correctly', () => {
+    const provider = new Provider('garbage', namespacesMap, {
+      info: garbageWalletInfo,
+    });
+
+    const allNamespaces = provider.getAll();
+
+    expect(allNamespaces.size).toBe(2);
+  });
+
+  test("throw an error if store hasn't set and try to access .state() and .info()", () => {
+    const provider = new Provider('garbage', namespacesMap, {
+      info: garbageWalletInfo,
+    });
+
+    expect(() => provider.state()).toThrowError();
+    expect(() => provider.info()).toThrowError();
+  });
+
+  test('access state correctly', () => {
+    const provider = new Provider(
+      'garbage',
+      namespacesMap,
+      {
+        info: garbageWalletInfo,
+      },
+      {
+        store: createStore(),
+      }
+    );
+
+    const [getState, setState] = provider.state();
+
+    expect(getState().connected).toBe(false);
+    expect(getState('connected')).toBe(false);
+    expect(() => {
+      // @ts-expect-error intentionally using an state that doesn't exist.
+      getState('not_exist_state');
+    }).toThrowError();
+    expect(() => {
+      // @ts-expect-error intentionally using an state that doesn't exist and try to update.
+      setState('another_not_exist_state');
+    }).toThrowError();
+  });
+  test('update state properly', () => {
+    const store = createStore();
+    const provider = new Provider(
+      'garbage',
+      namespacesMap,
+      {
+        info: garbageWalletInfo,
+      },
+      {
+        store,
+      }
+    );
+
+    const [getState, setState] = provider.state();
+
+    provider.store(store);
+    setState('installed', true);
+    const isInstalled = getState('installed');
+    expect(isInstalled).toBe(true);
+  });
+
+  test('run namespace actions from provider', async () => {
+    const { evm, solana } = namespaces;
+    solana.action('connect', async () => [
+      'solana:mainnet:0x000000000000000000000000000000000000dead',
+    ]);
+    const testNamespaces = new Map();
+    testNamespaces.set('evm', evm.build());
+    testNamespaces.set('solana', solana.build());
+
+    const provider = new Provider('garbage', testNamespaces, {
+      info: garbageWalletInfo,
+    });
+
+    const result = await provider.get('solana')?.connect();
+
+    expect(result).toStrictEqual([
+      'solana:mainnet:0x000000000000000000000000000000000000dead',
+    ]);
+    // Since we didn't add any action regarding connect for `evm`
+    await expect(async () =>
+      provider.get('evm')?.connect('0x1')
+    ).rejects.toThrowError();
+  });
+
+  test('sets config properly', () => {
+    const builder = new ProviderBuilder('garbage');
+    builder.config('info', garbageWalletInfo);
+    const provider = builder.build().store(store);
+
+    expect(provider.info()).toStrictEqual(garbageWalletInfo);
+  });
+
+  test('.init should works on Provider', () => {
+    const builder = new ProviderBuilder('garbage').config(
+      'info',
+      garbageWalletInfo
+    );
+    let count = 0;
+    builder.init(() => {
+      count++;
+    });
+    const provider = builder.build().store(store);
+    expect(count).toBe(0);
+    provider.init();
+    provider.init();
+    provider.init();
+    expect(count).toBe(1);
+  });
+
+  test(".init shouldn't do anything when use hasn't set anything", () => {
+    const builder = new ProviderBuilder('garbage').config(
+      'info',
+      garbageWalletInfo
+    );
+    const provider = builder.build().store(store);
+    expect(() => {
+      provider.init();
+      provider.init();
+      provider.init();
+    }).not.toThrow();
+  });
+
+  test('A provider can be found using its namespace', () => {
+    const builder = new ProviderBuilder('garbage', { store }).config(
+      'info',
+      garbageWalletInfo
+    );
+
+    const { evm, solana } = namespaces;
+    builder.add('evm', evm.build()).add('solana', solana.build());
+    const provider = builder.build();
+
+    const result = provider.findByNamespace('solana');
+    expect(result).toBeDefined();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore-next-line
+    expect(result?.namespaceId).toBe('solana');
+
+    const result2 = provider.findByNamespace('evm');
+    expect(result2).toBeUndefined();
+  });
+
+  test('`before/after` is calling with correct context ', () => {
+    const connect = vi.fn();
+    const before = vi.fn(function (context) {
+      const [, setState] = context.state();
+      setState('installed', true);
+    });
+    const after = vi.fn(function (context) {
+      const [, setState] = context.state();
+      setState('installed', false);
+    });
+
+    const { evm } = namespaces;
+    const evmNamespace = evm.action('connect', connect).build();
+
+    const builder = new ProviderBuilder('garbage', { store })
+      .add('evm', evmNamespace)
+      .config('info', garbageWalletInfo);
+    const provider = builder.build();
+
+    const [getState] = provider.state();
+    const result = provider.get('evm');
+
+    // Adding `after` then make it will run
+    provider.before('connect', before);
+    void result?.connect('whatever');
+
+    expect(connect).toBeCalledTimes(1);
+    expect(before).toBeCalledTimes(1);
+    expect(getState('installed')).toBe(true);
+
+    // Adding `after` then make it will run
+    provider.after('connect', after);
+    void result?.connect('whatever');
+    expect(connect).toBeCalledTimes(2);
+    expect(after).toBeCalledTimes(1);
+
+    expect(getState('installed')).toBe(false);
+  });
+});

package/src/hub/provider/provider.ts

@@ -0,0 +1,330 @@
+import type {
+  CommonNamespaces,
+  Context,
+  ExtendableInternalActions,
+  GetState,
+  RegisteredNamespaces,
+  SetState,
+  State,
+} from './types.js';
+import type { FindProxiedNamespace } from '../../builders/mod.js';
+import type { AnyFunction, FunctionWithContext } from '../../types/actions.js';
+import type { ProviderConfig, Store } from '../store/mod.js';
+
+const VERSION = '1.0';
+
+export class Provider {
+  public readonly id: string;
+  public readonly version = VERSION;
+
+  #namespaces: RegisteredNamespaces<keyof CommonNamespaces, CommonNamespaces>;
+  #initiated = false;
+  #extendInternalActions: ExtendableInternalActions = {};
+  #store: Store | undefined;
+  #configs: ProviderConfig;
+
+  constructor(
+    id: string,
+    namespaces: RegisteredNamespaces<keyof CommonNamespaces, CommonNamespaces>,
+    configs: ProviderConfig,
+    options?: {
+      /**
+       * There are some cases we need to have a behavior like initializing a provider which will be run when we are creating an instance.
+       * These internal steps and behaviors will be useful for library user to extend the behavior by running a specific code.
+       */
+      extendInternalActions?: ExtendableInternalActions;
+      store?: Store;
+    }
+  ) {
+    this.id = id;
+    this.#configs = configs;
+    // it should be only created here, to make sure `after/before` will work properly.
+    this.#extendInternalActions = options?.extendInternalActions || {};
+    this.#namespaces = namespaces;
+
+    if (options?.store) {
+      this.#store = options.store;
+      this.#setupStore();
+    }
+  }
+
+  /**
+   * This is an special callback that will be called **only once**.
+   * We don't call this in `constructor` and developer should call this manually. we only ensure it will be called once.
+   *
+   * ```ts
+   * const myInit = () => {  whatever; }   *
+   * const provider = new Provider(..., {extendInternalActions: {init: myInit} });
+   *
+   * // Will run `myInit`
+   * provider.init()
+   *
+   * // Will not run `myInit` anymore.
+   * provider.init()
+   * provider.init()
+   * ```
+   */
+  public init(): void {
+    if (this.#initiated) {
+      return;
+    }
+
+    const definedInitByUser = this.#extendInternalActions.init;
+    if (definedInitByUser) {
+      definedInitByUser(this.#context());
+    }
+
+    this.#initiated = true;
+  }
+
+  /**
+   * Getting state of a provider
+   *
+   * **Note:**
+   *    Each namespace has it's own state as well, in Legacy we didn't have this separation and all of them was accessible through Provider itself
+   *    To be compatible with legacy, `getState` has a logic to guess the final state to produce same state as legacy.
+   *
+   * @example
+   * ```ts
+   * const provider = new Provider(...);
+   * const [getState, setState] = provider.state();
+   *
+   * getState('installed');
+   * // or
+   * getState().installed;
+   * ```
+   *
+   */
+  public state(): [GetState, SetState] {
+    const store = this.#store;
+    if (!store) {
+      throw new Error(
+        `Any store detected for ${this.id}. You need to set your store using '.store' method first.`
+      );
+    }
+
+    /**
+     * State updater
+     */
+    const setState: SetState = (name, value) => {
+      switch (name) {
+        case 'installed':
+          return store.getState().providers.updateStatus(this.id, name, value);
+        default:
+          throw new Error(
+            `Unhandled state update for provider. (provider id: ${this.id}, state name: ${name})`
+          );
+      }
+    };
+
+    /**
+     * State getter
+     */
+    const getState: GetState = <K extends keyof State>(name?: K) => {
+      const state: State = store
+        .getState()
+        .providers.guessNamespacesState(this.id);
+
+      if (!name) {
+        return state;
+      }
+
+      switch (name) {
+        case 'installed':
+        case 'connected':
+        case 'connecting':
+          return state[name];
+        default:
+          throw new Error('Unhandled state for provider');
+      }
+    };
+
+    return [getState, setState];
+  }
+
+  /**
+   * For keeping state, we need a store. all the states will be write to/read from store.
+   *
+   * **Note: When you are setting an store for provider, it will be set for its namespaces automatically as well**
+   *
+   * @example
+   * ```ts
+   * const myStore = createStore();
+   * const provider = new Provider(...);
+   * provider.store(myStore); // or it can be passed to Provider constructor;
+   * ```
+   */
+  public store(store: Store): this {
+    if (this.#store) {
+      console.warn(
+        "You've already set an store for your Provider. Old store will be replaced by the new one."
+      );
+    }
+    this.#store = store;
+    this.#setupStore();
+    return this;
+  }
+
+  /**
+   * Getting information about a provider which has been set on constructing Provider.
+   *
+   * @example
+   * ```ts
+   * const walletInfo = {name: "Garbage wallet", ...}
+   * const provider = new Provider(..., {info: walletInfo});
+   *
+   * provider.info();
+   * ```
+   */
+  public info(): ProviderConfig['info'] | undefined {
+    const store = this.#store;
+    if (!store) {
+      throw new Error(
+        'You need to set your store using `.store` method first.'
+      );
+    }
+
+    return store.getState().providers.list[this.id].config.info;
+  }
+
+  /**
+   * A list of registered _proxied_ namespaces.
+   *
+   * @example
+   * ```ts
+   *  const provider = new Provider(...);
+   *  const allNamespaces = provider.getAll();
+   * ```
+   */
+  public getAll(): RegisteredNamespaces<
+    keyof CommonNamespaces,
+    CommonNamespaces
+  > {
+    return this.#namespaces;
+  }
+
+  /**
+   * Get a registered namespace in provider by its **namespace key**.
+   *
+   * Note: difference between namespace key and namespace id is the first one is setting from a predefined list the second one can be anything and will be chosen by library's user.
+   *
+   * @param {string} id - evm, solana, cosmos, ... (CommonActions)
+   */
+  public get<K extends keyof CommonNamespaces>(
+    id: K
+  ): FindProxiedNamespace<K, CommonNamespaces> | undefined {
+    return this.#namespaces.get(id) as unknown as
+      | FindProxiedNamespace<K, CommonNamespaces>
+      | undefined;
+  }
+
+  /**
+   *
+   * Get a registered namespace by its **namespaceId**.
+   *
+   * Note: difference between namespace key and namespace id is the first one is setting from a predefined list the second one can be anything and will be chosen by library's user.
+   *
+   * @example
+   * ```ts
+   * const provider = new Provider(...);
+   * provider.findByNamespace("whatever-id-i-set-for-namespace")
+   * ```
+   */
+  public findByNamespace<K extends keyof CommonNamespaces>(
+    namespaceLookingFor: K | string
+  ): FindProxiedNamespace<K, CommonNamespaces> | undefined {
+    // If we didn't found any match, we will return `undefined`.
+    let result: object | undefined = undefined;
+
+    this.#namespaces.forEach((namespace) => {
+      if (namespace.namespaceId === namespaceLookingFor) {
+        result = namespace;
+      }
+    });
+
+    return result;
+  }
+
+  /**
+   * Running a hook function _after_ a specific action for **all registered namespaces**.
+   *
+   * **Note:** the context can be set from outside as well. this is useful for Provider to set its context instead of namespace context.
+   *
+   * @example
+   * ```ts
+   *  const provider = new Provider(...);
+   *
+   *  provider.after("connect", (context) => {});
+   * ```
+   */
+  public before(
+    actionName: string,
+    hookFn: FunctionWithContext<AnyFunction, Context>
+  ): this {
+    this.#addHook('before', actionName, hookFn);
+    return this;
+  }
+
+  /**
+   * Running a hook function _before_ a specific action for **all registered namespaces**.
+   *
+   * **Note:** the context can be set from outside as well. this is useful for Provider to set its context instead of namespace context.
+   *
+   * @example
+   * ```ts
+   *  const provider = new Provider(...);
+   *
+   *  provider.after("connect", (context) => {});
+   * ```
+   */
+  public after(
+    actionName: string,
+    hookFn: FunctionWithContext<AnyFunction, Context>
+  ): this {
+    this.#addHook('after', actionName, hookFn);
+    return this;
+  }
+
+  #addHook(
+    hookName: 'after' | 'before',
+    actionName: string,
+    cb: FunctionWithContext<AnyFunction, Context>
+  ): this {
+    const context = {
+      state: this.state.bind(this),
+    };
+
+    this.#namespaces.forEach((namespace) => {
+      if (hookName === 'after') {
+        namespace.after(actionName as any, cb, {
+          context,
+        });
+      } else if (hookName === 'before') {
+        namespace.before(actionName as any, cb, {
+          context,
+        });
+      } else {
+        throw new Error(`You hook name is invalid: ${hookName}`);
+      }
+    });
+
+    return this;
+  }
+
+  #setupStore(): void {
+    const store = this.#store;
+    if (!store) {
+      throw new Error('For setup store, you should set `store` first.');
+    }
+    store.getState().providers.addProvider(this.id, this.#configs);
+    this.#namespaces.forEach((provider) => {
+      provider.store(store);
+    });
+  }
+
+  #context(): Context {
+    return {
+      state: this.state.bind(this),
+    };
+  }
+}

package/src/hub/provider/types.ts

@@ -0,0 +1,37 @@
+import type { LegacyState } from '../../legacy/mod.js';
+import type { NamespaceInterface, Store } from '../../mod.js';
+import type { CosmosActions } from '../../namespaces/cosmos/mod.js';
+import type { EvmActions } from '../../namespaces/evm/mod.js';
+import type { SolanaActions } from '../../namespaces/solana/mod.js';
+import type { AnyFunction, FunctionWithContext } from '../../types/actions.js';
+
+export type Context = {
+  state: () => [GetState, SetState];
+};
+
+export type State = Omit<LegacyState, 'reachable' | 'accounts' | 'network'>;
+export type SetState = <K extends keyof Pick<State, 'installed'>>(
+  name: K,
+  value: State[K]
+) => void;
+export type GetState = {
+  (): State;
+  <K extends keyof State>(name: K): State[K];
+};
+
+export interface CommonNamespaces {
+  evm: EvmActions;
+  solana: SolanaActions;
+  cosmos: CosmosActions;
+}
+
+export interface ExtendableInternalActions {
+  init?: FunctionWithContext<AnyFunction, Context>;
+}
+
+export type RegisteredNamespaces<K extends keyof T, T> = Map<
+  K,
+  NamespaceInterface<K, T>
+>;
+
+export type ProviderBuilderOptions = { store?: Store };

package/src/hub/store/hub.ts

@@ -0,0 +1,18 @@
+/************ Hub ************/
+
+import type { State } from './mod.js';
+import type { StateCreator } from 'zustand';
+
+type HubConfig = object;
+
+export interface HubStore {
+  config: HubConfig;
+}
+
+type HubStateCreator = StateCreator<State, [], [], HubStore>;
+
+const hubStore: HubStateCreator = () => ({
+  config: {},
+});
+
+export { hubStore };

package/src/hub/store/mod.ts

@@ -0,0 +1,8 @@
+export {
+  guessProviderStateSelector,
+  namespaceStateSelector,
+} from './selectors.js';
+export type { Store, State } from './store.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

@@ -0,0 +1,90 @@
+/************ Namespace ************/
+
+import type { StateCreator } from 'zustand';
+
+import { produce } from 'immer';
+
+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.
+}
+
+export interface NamespaceData {
+  accounts: null | string[];
+  network: null | string;
+  connected: boolean;
+  connecting: boolean;
+}
+
+interface NamespaceInfo {
+  providerId: string;
+  namespaceId: string;
+}
+
+type NamespaceState = {
+  list: Record<
+    string,
+    {
+      info: NamespaceInfo;
+      data: NamespaceData;
+      error: unknown;
+    }
+  >;
+};
+
+interface NamespaceActions {
+  addNamespace: (id: string, config: NamespaceInfo) => void;
+  updateStatus: <K extends keyof NamespaceData>(
+    id: string,
+    key: K,
+    value: NamespaceData[K]
+  ) => void;
+}
+interface NamespaceSelectors {
+  getNamespaceData(storeId: string): NamespaceData;
+}
+
+export type NamespaceStore = NamespaceState &
+  NamespaceActions &
+  NamespaceSelectors;
+type NamespaceStateCreator = StateCreator<State, [], [], NamespaceStore>;
+
+const namespacesStore: NamespaceStateCreator = (set, get) => ({
+  list: {},
+  addNamespace: (id, info) => {
+    const item = {
+      data: {
+        accounts: null,
+        network: null,
+        connected: false,
+        connecting: false,
+      },
+      error: '',
+      info,
+    };
+
+    set(
+      produce((state: State) => {
+        state.namespaces.list[id] = item;
+      })
+    );
+  },
+  updateStatus: (id, key, value) => {
+    if (!get().namespaces.list[id]) {
+      throw new Error(`No namespace with '${id}' found.`);
+    }
+
+    set(
+      produce((state: State) => {
+        state.namespaces.list[id].data[key] = value;
+      })
+    );
+  },
+  getNamespaceData(storeId) {
+    return namespaceStateSelector(get(), storeId);
+  },
+});
+
+export { namespacesStore };