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

package/src/hub/store/providers.ts

@@ -0,0 +1,97 @@
+import type {
+  CommonNamespaces,
+  State as InternalProviderState,
+} from '../provider/mod.js';
+import type { StateCreator } from 'zustand';
+
+import { produce } from 'immer';
+
+import { guessProviderStateSelector, type State } from './mod.js';
+
+type NamespaceName =
+  | keyof CommonNamespaces
+  | Omit<string, keyof CommonNamespaces>;
+
+type Browsers = 'firefox' | 'chrome' | 'edge' | 'brave' | 'homepage';
+type Property<N extends string, V> = { name: N; value: V };
+type DetachedInstances = Property<'detached', NamespaceName[]>;
+
+export type ProviderInfo = {
+  name: string;
+  icon: string;
+  extensions: Partial<Record<Browsers, string>>;
+  properties?: DetachedInstances[];
+};
+
+export interface ProviderConfig {
+  info: ProviderInfo;
+}
+
+interface ProviderData {
+  installed: boolean;
+}
+
+type ProviderState = {
+  list: Record<
+    string,
+    {
+      config: ProviderConfig;
+      data: ProviderData;
+      error: unknown;
+    }
+  >;
+};
+interface ProviderActions {
+  addProvider: (id: string, config: ProviderConfig) => void;
+  updateStatus: <K extends keyof ProviderData>(
+    id: string,
+    key: K,
+    value: ProviderData[K]
+  ) => void;
+}
+
+interface ProviderSelectors {
+  /**
+   * Provider has a limited state to itself, to be compatible with legacy, we try to produce same object as legacy
+   * which includes namespace state as well.
+   */
+  guessNamespacesState: (id: string) => InternalProviderState;
+}
+
+export type ProviderStore = ProviderState & ProviderActions & ProviderSelectors;
+type ProvidersStateCreator = StateCreator<State, [], [], ProviderStore>;
+
+const providersStore: ProvidersStateCreator = (set, get) => ({
+  list: {},
+  addProvider: (id, config) => {
+    const item = {
+      data: {
+        installed: false,
+      },
+      error: '',
+      config,
+    };
+
+    set(
+      produce((state: State) => {
+        state.providers.list[id] = item;
+      })
+    );
+  },
+  updateStatus: (id, key, value) => {
+    if (!get().providers.list[id]) {
+      throw new Error(`No namespace namespace with '${id}' found.`);
+    }
+
+    set(
+      produce((state: State) => {
+        state.providers.list[id].data[key] = value;
+      })
+    );
+  },
+  guessNamespacesState: (providerId: string): InternalProviderState => {
+    return guessProviderStateSelector(get(), providerId);
+  },
+});
+
+export { providersStore };

package/src/hub/store/selectors.ts

@@ -0,0 +1,59 @@
+/**
+ * Note: Zustand has some difficulty when you are trying to `previous` state on `subscribe`.
+ * If these selectors define inside store directly and use `get()` for accessing state, it will get the latest state
+ * instead of previous state which desired.
+ * So make them a helper will let us to reuse them both in store and outside of store in a `subscribe`.
+ */
+import type { State } from '../mod.js';
+import type { State as InternalProviderState } from '../provider/mod.js';
+
+/**
+ * Legacy provider state includes `connecting` and `connected` values. It hadn't a separation layer for `namespaces`.
+ * For compatibility reasons, we should produce these two values somehow.
+ *
+ * Currently, We return `true` if any of namespaces return true. We are missing failed namespace here.
+ * But if we want to solve that, we should migrate our client code to use `namespace` state directly and not from `provider`
+ */
+export function guessProviderStateSelector(
+  state: State,
+  providerId: string
+): InternalProviderState {
+  /*
+   * We keep namespaces in a separate branch than providers.
+   * We should look at all of them and find all the namespaces that for our current proivder.
+   */
+  const allNamespaces = state.namespaces.list;
+  const currentProviderNamespaces = Object.keys(allNamespaces).filter(
+    (key) => allNamespaces[key].info.providerId === providerId
+  );
+
+  // Returning provider state value directly.
+  const installed = state.providers.list[providerId].data.installed;
+
+  /*
+   * If any namespaces returns `true`, we consider the whole provider for this field to be `true`.
+   * it has a downside regarding errors which explained on top of the function.
+   */
+  const connected =
+    currentProviderNamespaces.length > 0
+      ? currentProviderNamespaces.some(
+          (key) => allNamespaces[key].data.connected
+        )
+      : false;
+  const connecting =
+    currentProviderNamespaces.length > 0
+      ? currentProviderNamespaces.some(
+          (key) => allNamespaces[key].data.connecting
+        )
+      : false;
+
+  return {
+    installed,
+    connected,
+    connecting,
+  };
+}
+
+export function namespaceStateSelector(state: State, storeId: string) {
+  return state.namespaces.list[storeId].data;
+}

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

@@ -0,0 +1,32 @@
+import type { Store } from './store.js';
+
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import { createStore } from './store.js';
+
+describe('checking store', () => {
+  let hubStore: Store;
+
+  beforeEach(() => {
+    hubStore = createStore();
+  });
+
+  test('new providers can be added to store', () => {
+    const id = 'sol-or-something';
+    const info = {
+      info: {
+        name: 'sol grabage wallet',
+        icon: 'http://somewhere.world',
+        extensions: {
+          homepage: 'http://somewhere.world',
+        },
+      },
+    };
+
+    const { getState } = hubStore;
+    getState().providers.addProvider(id, info);
+
+    expect(getState().providers.list[id]).toBeDefined();
+    expect(Object.keys(getState().providers.list).length).toBe(1);
+  });
+});

package/src/hub/store/store.ts

@@ -0,0 +1,26 @@
+import type { StoreApi } from 'zustand/vanilla';
+
+import { createStore as createZustandStore } from 'zustand/vanilla';
+
+import { hubStore, type HubStore } from './hub.js';
+import { namespacesStore, type NamespaceStore } from './namespaces.js';
+import { providersStore, type ProviderStore } from './providers.js';
+
+/************ State ************/
+
+export interface State {
+  hub: HubStore;
+  providers: ProviderStore;
+  namespaces: NamespaceStore;
+}
+
+export type Store = StoreApi<State>;
+export const createStore = (): Store => {
+  return createZustandStore<State>((...api) => {
+    return {
+      hub: hubStore(...api),
+      providers: providersStore(...api),
+      namespaces: namespacesStore(...api),
+    };
+  });
+};

package/src/mod.ts

@@ -1 +1,35 @@
-// This file will be updated to export Hub methods and types.
+export type { Store, State, ProviderInfo } from './hub/mod.js';
+export {
+  Hub,
+  Provider,
+  Namespace,
+  createStore,
+  guessProviderStateSelector,
+  namespaceStateSelector,
+} from './hub/mod.js';
+export type {
+  ProxiedNamespace,
+  FindProxiedNamespace as NamespaceInterface,
+} from './builders/mod.js';
+export {
+  NamespaceBuilder,
+  ProviderBuilder,
+  ActionBuilder,
+} from './builders/mod.js';
+
+/*
+ * Our `embedded` hasn't been migrated to NodeNext yet so it doesn't support `exports` field.
+ * There are two approach to make `NodeNext` which is used for our libs with old moduleResolution:
+ *
+ * 1. Use direct paths, e.g. '@rango-dev/wallets-core/dist/legacy/mod'
+ * 2. Add types and function that are using in `embedded` to package entry point (this file).
+ *
+ * The first one is better since we don't need to deprecate or having a breaking change in future,
+ * But Parcel has weird behavior on resolving ESM exports. We enabled exports for Parcel using `packageExports: true` option,
+ * But it will use `exports` fields whenever it finds the field in package.json and ignore `moduleResolution` in tsconfig.
+ *
+ * To make it work for Parcel, we should go with second mentioned option.
+ *
+ */
+export type { Versions } from './utils/mod.js';
+export { defineVersions, pickVersion } from './utils/mod.js';

package/src/namespaces/common/actions.ts

@@ -0,0 +1,11 @@
+import type { Context } from '../../hub/namespaces/mod.js';
+
+export function disconnect(context: Context): void {
+  const [, setState] = context.state();
+  setState('network', null);
+  setState('accounts', null);
+  setState('connected', false);
+  setState('connecting', false);
+}
+
+export const recommended = [['disconnect', disconnect] as const];

package/src/namespaces/common/after.ts

@@ -0,0 +1,8 @@
+import type { Context } from '../../hub/namespaces/mod.js';
+
+export function intoConnectionFinished(context: Context) {
+  const [, setState] = context.state();
+  setState('connecting', false);
+}
+
+export const recommended = [['connect', intoConnectionFinished] as const];

package/src/namespaces/common/and.ts

@@ -0,0 +1,42 @@
+import type {
+  Accounts,
+  AccountsWithActiveChain,
+} from './../../types/accounts.js';
+import type { Context } from '../../hub/namespaces/mod.js';
+
+import { isValidCaipAddress } from './helpers.js';
+
+export function connectAndUpdateStateForSingleNetwork(
+  context: Context,
+  accounts: Accounts
+) {
+  if (!accounts.every(isValidCaipAddress)) {
+    throw new Error(
+      `Your provider should format account addresses in CAIP-10 format. Your provided accounts: ${accounts}`
+    );
+  }
+
+  const [, setState] = context.state();
+  setState('accounts', accounts);
+  setState('connected', true);
+  return accounts;
+}
+
+export function connectAndUpdateStateForMultiNetworks(
+  context: Context,
+  accounts: AccountsWithActiveChain
+) {
+  if (!accounts.accounts.every(isValidCaipAddress)) {
+    throw new Error(
+      `Your provider should format account addresses in CAIP-10 format. Your provided accounts: ${accounts.accounts}`
+    );
+  }
+
+  const [, setState] = context.state();
+  setState('accounts', accounts.accounts);
+  setState('network', accounts.network);
+  setState('connected', true);
+  return accounts;
+}
+
+export const recommended = [];

package/src/namespaces/common/before.ts

@@ -0,0 +1,9 @@
+import type { Context } from '../../hub/namespaces/mod.js';
+
+export function intoConnecting(context: Context) {
+  const [, setState] = context.state();
+  setState('connecting', true);
+}
+
+// Please consider if you are going to add something here, make sure it works on all namespaces.
+export const recommended = [['connect', intoConnecting] as const];

package/src/namespaces/common/builders.ts

@@ -0,0 +1,19 @@
+import type { AutoImplementedActionsByRecommended } from './types.js';
+import type { Actions } from '../../hub/namespaces/types.js';
+
+import { ActionBuilder } from '../../mod.js';
+
+import { disconnect as disconnectAction } from './actions.js';
+
+export const disconnect = <
+  T extends Actions<T> &
+    Record<'disconnect', AutoImplementedActionsByRecommended['disconnect']>
+>() =>
+  new ActionBuilder<AutoImplementedActionsByRecommended, 'disconnect'>(
+    'disconnect'
+  )
+    .after((c) => {
+      c;
+      //
+    })
+    .action(disconnectAction) as unknown as ActionBuilder<T, 'disconnect'>;

package/src/namespaces/common/helpers.ts

@@ -0,0 +1,10 @@
+import { AccountId } from 'caip';
+
+export function isValidCaipAddress(address: string): boolean {
+  try {
+    AccountId.parse(address);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/namespaces/common/mod.ts

@@ -0,0 +1,12 @@
+export * as actions from './actions.js';
+export * as builders from './builders.js';
+export {
+  intoConnectionFinished,
+  recommended as afterRecommended,
+} from './after.js';
+export {
+  connectAndUpdateStateForMultiNetworks,
+  connectAndUpdateStateForSingleNetwork,
+  recommended as andRecommended,
+} from './and.js';
+export { intoConnecting, recommended as beforeRecommended } from './before.js';

package/src/namespaces/common/types.ts

@@ -0,0 +1,7 @@
+export interface CommonActions {
+  init: () => void;
+}
+
+export interface AutoImplementedActionsByRecommended {
+  disconnect: () => void;
+}

package/src/namespaces/cosmos/mod.ts

@@ -0,0 +1 @@
+export type { CosmosActions } from './types.js';

package/src/namespaces/cosmos/types.ts

@@ -0,0 +1,10 @@
+import type {
+  AutoImplementedActionsByRecommended,
+  CommonActions,
+} from '../common/types.js';
+
+export interface CosmosActions
+  extends AutoImplementedActionsByRecommended,
+    CommonActions {
+  // TODO
+}

package/src/namespaces/evm/actions.ts

@@ -0,0 +1,97 @@
+import type { EIP1193EventMap } from './eip1193.js';
+import type { EvmActions, ProviderAPI } from './types.js';
+import type { Context, Subscriber } from '../../hub/namespaces/mod.js';
+import type { SubscriberCleanUp } from '../../hub/namespaces/types.js';
+import type { CaipAccount } from '../../types/accounts.js';
+import type { FunctionWithContext } from '../../types/actions.js';
+
+import { AccountId } from 'caip';
+
+import { recommended as commonRecommended } from '../common/actions.js';
+
+import { CAIP_NAMESPACE } from './constants.js';
+import { getAccounts, switchOrAddNetwork } from './utils.js';
+
+export const recommended = [...commonRecommended];
+
+export function connect(
+  instance: () => ProviderAPI
+): FunctionWithContext<EvmActions['connect'], Context> {
+  return async (_context, chain) => {
+    const evmInstance = instance();
+
+    if (!evmInstance) {
+      throw new Error(
+        'Do your wallet injected correctly and is evm compatible?'
+      );
+    }
+
+    if (chain) {
+      await switchOrAddNetwork(evmInstance, chain);
+    }
+
+    const chainId = await evmInstance.request({ method: 'eth_chainId' });
+
+    const result = await getAccounts(evmInstance);
+
+    const formatAccounts = result.accounts.map(
+      (account) =>
+        AccountId.format({
+          address: account,
+          chainId: {
+            namespace: CAIP_NAMESPACE,
+            reference: chainId,
+          },
+        }) as CaipAccount
+    );
+
+    return {
+      accounts: formatAccounts,
+      network: result.chainId,
+    };
+  };
+}
+
+export function changeAccountSubscriber(
+  instance: () => ProviderAPI
+): [Subscriber<EvmActions>, SubscriberCleanUp<EvmActions>] {
+  let eventCallback: EIP1193EventMap['accountsChanged'];
+
+  return [
+    (context) => {
+      const evmInstance = instance();
+
+      if (!evmInstance) {
+        throw new Error(
+          'Trying to subscribe to your EVM wallet, but seems its instance is not available.'
+        );
+      }
+
+      const [, setState] = context.state();
+
+      eventCallback = async (accounts) => {
+        const chainId = await evmInstance.request({ method: 'eth_chainId' });
+
+        const formatAccounts = accounts.map((account) =>
+          AccountId.format({
+            address: account,
+            chainId: {
+              namespace: CAIP_NAMESPACE,
+              reference: chainId,
+            },
+          })
+        );
+
+        setState('accounts', formatAccounts);
+      };
+      evmInstance.on('accountsChanged', eventCallback);
+    },
+    () => {
+      const evmInstance = instance();
+
+      if (eventCallback && evmInstance) {
+        evmInstance.removeListener('accountsChanged', eventCallback);
+      }
+    },
+  ];
+}

package/src/namespaces/evm/after.ts

@@ -0,0 +1,3 @@
+import { recommended as commonRecommended } from '../common/after.js';
+
+export const recommended = [...commonRecommended];

package/src/namespaces/evm/and.ts

@@ -0,0 +1,5 @@
+import { connectAndUpdateStateForMultiNetworks } from '../common/mod.js';
+
+export const recommended = [
+  ['connect', connectAndUpdateStateForMultiNetworks] as const,
+];

package/src/namespaces/evm/before.ts

@@ -0,0 +1,3 @@
+import { beforeRecommended } from '../common/mod.js';
+
+export const recommended = [...beforeRecommended];

package/src/namespaces/evm/builders.ts

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

package/src/namespaces/evm/constants.ts

@@ -0,0 +1,2 @@
+export const CAIP_NAMESPACE = 'eip155';
+export const CAIP_ETHEREUM_CHAIN_ID = '1';