@rango-dev/wallets-react 0.0.0-experimental-936229e8-20251208

package/src/hub/useHubAdapter.ts

@@ -0,0 +1,516 @@
+import type { AllProxiedNamespaces, ExtensionLink } from './types.js';
+import type { ProviderContext } from '../index.js';
+import type { Provider } from '@rango-dev/wallets-core';
+import type { LegacyNamespaceInputForConnect } from '@rango-dev/wallets-core/legacy';
+import type {
+  Accounts,
+  AccountsWithActiveChain,
+} from '@rango-dev/wallets-core/namespaces/common';
+import type { VersionedProviders } from '@rango-dev/wallets-core/utils';
+
+import { utils } from '@rango-dev/wallets-core/namespaces/evm';
+import { type WalletInfo, type WalletType } from '@rango-dev/wallets-shared';
+import { cosmosBlockchains } from 'rango-types';
+import { useEffect, useRef, useState } from 'react';
+import { Ok, Result } from 'ts-results';
+
+import {
+  type ConnectResult,
+  HUB_LAST_CONNECTED_WALLETS,
+  type ProviderProps,
+} from '../legacy/mod.js';
+import { useAutoConnect } from '../legacy/useAutoConnect.js';
+
+import { autoConnect } from './autoConnect.js';
+import { createQueue, fromAccountIdToLegacyAddressFormat } from './helpers.js';
+import { LastConnectedWalletsFromStorage } from './lastConnectedWallets.js';
+import { useHubRefs } from './useHubRefs.js';
+import {
+  getSupportedChainsFromProvider,
+  isCosmosNamespace,
+  isEvmNamespace,
+  isSolanaNamespace,
+  mapHubEventsToLegacy,
+  transformHubResultToLegacyResult,
+  tryConvertNamespaceNetworkToChainInfo,
+} from './utils.js';
+
+export type UseAdapterParams = Omit<ProviderProps, 'providers'> & {
+  providers: Provider[];
+  /** This is only will be used to access some parts of the legacy provider that doesn't exists in Hub. */
+  allVersionedProviders: VersionedProviders[];
+};
+
+export function useHubAdapter(params: UseAdapterParams): ProviderContext {
+  const { getStore, getHub } = useHubRefs(params.providers);
+  const [, rerender] = useState(0);
+  // useEffect will run `subscribe` once, so we need a reference and mutate the value if it's changes.
+  const dataRef = useRef({
+    onUpdateState: params.onUpdateState,
+    allVersionedProviders: params.allVersionedProviders,
+    allBlockChains: params.allBlockChains,
+  });
+
+  /*
+   * Params of each connection attempt for each wallet type are stored here.
+   * Derivation path from params is used in `mapHubEventsToLegacy` to be added to the payload of connect events.
+   */
+  const lastConnectAttemptParamsRef = useRef<{
+    [type: WalletType]: LegacyNamespaceInputForConnect[];
+  }>({});
+
+  const updateLastConnectAttemptParams = (
+    type: WalletType,
+    namespaces: LegacyNamespaceInputForConnect[] | undefined
+  ) => {
+    lastConnectAttemptParamsRef.current[type] = namespaces || [];
+  };
+
+  const queueTask = createQueue({
+    onError: (error, actions) => {
+      if (utils.isUserRejectionError(error)) {
+        actions.removeCurrentKeyFromQueue();
+      }
+    },
+  });
+
+  useEffect(() => {
+    dataRef.current = {
+      onUpdateState: params.onUpdateState,
+      allVersionedProviders: params.allVersionedProviders,
+      allBlockChains: params.allBlockChains,
+    };
+  }, [params]);
+
+  // Initialize instances
+  useEffect(() => {
+    const runOnInit = () => {
+      getHub().init();
+
+      rerender((currentRender) => currentRender + 1);
+    };
+
+    // Then will call init whenever page is ready.
+    const initHubWhenPageIsReady = (event: Event) => {
+      // Then will call init whenever page is ready.
+      if (
+        event.target &&
+        (event.target as Document).readyState === 'complete'
+      ) {
+        runOnInit();
+        document.removeEventListener(
+          'readystatechange',
+          initHubWhenPageIsReady
+        );
+      }
+    };
+
+    // Try to run, maybe it's ready.
+    runOnInit();
+
+    /*
+     * Try again when the page has been completely loaded.
+     * Some of wallets, take some time to be fully injected and loaded.
+     */
+    document.addEventListener('readystatechange', initHubWhenPageIsReady);
+
+    getStore()
+      .subscribe((event) => {
+        if (dataRef.current.onUpdateState) {
+          try {
+            mapHubEventsToLegacy(
+              getHub(),
+              event,
+              dataRef.current.onUpdateState,
+              {
+                allBlockChains: dataRef.current.allBlockChains,
+                lastConnectAttemptParams: lastConnectAttemptParamsRef.current,
+              }
+            );
+          } catch (e) {
+            console.error(e);
+          }
+        }
+        rerender((currentRender) => currentRender + 1);
+      })
+      .flushEvents();
+  }, []);
+
+  useAutoConnect({
+    autoConnect: params.autoConnect,
+    allBlockChains: params.allBlockChains,
+    autoConnectHandler: () => {
+      void autoConnect({
+        allBlockChains: params.allBlockChains,
+        getHub,
+        wallets: params.configs?.wallets,
+      });
+    },
+  });
+
+  const lastConnectedWalletsFromStorage = new LastConnectedWalletsFromStorage(
+    HUB_LAST_CONNECTED_WALLETS
+  );
+
+  const api: ProviderContext = {
+    canSwitchNetworkTo(type, network, namespace) {
+      const provider = getHub().get(type);
+
+      if (!provider) {
+        throw new Error(
+          `You should add ${type} to provider first then call 'canSwitchNetworkTo'.`
+        );
+      }
+
+      if (!namespace) {
+        throw new Error(
+          'Passing namespace to `canSwitchNetworkTo` is required.'
+        );
+      }
+
+      const proxiedNamespace = provider.findByNamespace(namespace.namespace);
+      if (!proxiedNamespace) {
+        throw new Error(
+          `We couldn't find any matched namespace on your request provider. (requested namespace: ${namespace.namespace})`
+        );
+      }
+      if (!('canSwitchNetwork' in proxiedNamespace)) {
+        return false;
+      }
+      const namespacesProperty = provider
+        .info()
+        ?.metadata?.properties?.find(
+          (property) => property.name === 'namespaces'
+        );
+
+      if (!dataRef.current.allBlockChains) {
+        throw new Error(`Blockchains are not available`);
+      }
+      const providerSupportedChainsOfNamespace = namespacesProperty?.value.data
+        .find(
+          (providerNamespace) => providerNamespace.value === namespace.namespace
+        )
+        ?.getSupportedChains(dataRef.current.allBlockChains);
+
+      if (!providerSupportedChainsOfNamespace) {
+        throw new Error(
+          `NamespaceMeta is not defined for requested namespace: ${namespace.namespace}`
+        );
+      }
+
+      return proxiedNamespace.canSwitchNetwork({
+        network,
+        supportedChains: providerSupportedChainsOfNamespace,
+      });
+    },
+    async connect(type, namespaces) {
+      const wallet = getHub().get(type);
+      if (!wallet) {
+        throw new Error(
+          `You should add ${type} to provider first then call 'connect'.`
+        );
+      }
+
+      if (!namespaces) {
+        throw new Error('Passing namespace to `connect` is required.');
+      }
+
+      updateLastConnectAttemptParams(type, namespaces);
+
+      // Check `namespace` and look into hub to see how it can match given namespace to hub namespace.
+      const targetNamespaces: [
+        LegacyNamespaceInputForConnect,
+        AllProxiedNamespaces
+      ][] = [];
+      namespaces.forEach((namespace) => {
+        const targetNamespace = namespace.namespace;
+
+        const result = wallet.findByNamespace(targetNamespace);
+        if (!result) {
+          throw new Error(
+            `We couldn't find any provider matched with your request namespace. (requested namespace: ${namespace.namespace})`
+          );
+        }
+
+        targetNamespaces.push([namespace, result]);
+      });
+
+      // Try to run `connect` on matched namespaces
+      const connectResultFromTargetNamespaces = targetNamespaces.map(
+        async ([namespaceInput, namespace]) => {
+          const network = tryConvertNamespaceNetworkToChainInfo(
+            namespaceInput,
+            params.allBlockChains || []
+          );
+
+          let connectNamespacePromise: () => Promise<
+            Accounts | AccountsWithActiveChain
+          >;
+
+          if (isSolanaNamespace(namespace)) {
+            connectNamespacePromise = async () =>
+              namespace.connect({
+                derivationPath: namespaceInput.derivationPath,
+              });
+          } else if (isEvmNamespace(namespace)) {
+            connectNamespacePromise = async () =>
+              namespace.connect(network, {
+                derivationPath: namespaceInput.derivationPath,
+              });
+          } else if (isCosmosNamespace(namespace)) {
+            const cosmosBlockChains = cosmosBlockchains(
+              params.allBlockChains || []
+            ).filter((chain) => !!chain.chainId);
+            connectNamespacePromise = async () => {
+              return namespace.connect({
+                chainIds: cosmosBlockChains
+                  .filter((chain) => chain.info && !chain.info.experimental)
+                  ?.map((chain) => chain.chainId!),
+                customChainIds: cosmosBlockChains
+                  .filter((chain) => chain.info?.experimental)
+                  .map((chain) => chain.chainId!),
+              });
+            };
+          } else {
+            connectNamespacePromise = async () => namespace.connect();
+          }
+
+          const connectNamespaceProcess = async () =>
+            connectNamespacePromise()
+              .then<ConnectResult>(transformHubResultToLegacyResult)
+              .then((connectResult) => {
+                return {
+                  response: connectResult,
+                  input: {
+                    namespace: namespaceInput.namespace,
+                    network: namespaceInput.network,
+                    supportsEagerConnect: 'canEagerConnect' in namespace,
+                  },
+                };
+              });
+          return queueTask(connectNamespaceProcess, type);
+        }
+      );
+
+      /*
+       * We need to connect to namespace one after another, sending multiple requests at the same time may be failed.
+       * e.g. when wallet popup opens and asking for the password from the user, it should be resolved first, then other request will be resolved.
+       */
+      const connectResultWithLegacyFormat = await Promise.all(
+        connectResultFromTargetNamespaces
+      );
+
+      // Keeping only namespaces that connected successfully and support eager connect, then we'll store them on storage for auto connect functionality.
+      const successfullyConnectedSupportingEagerConnectNamespaces =
+        connectResultWithLegacyFormat
+          .filter(<T, E>(result: Result<T, E>): result is Ok<T> => result.ok)
+          .filter((result) => result.val.input.supportsEagerConnect)
+          .map((result) => ({
+            namespace: result.val.input.namespace,
+            network: result.val.input.network,
+          }));
+
+      if (successfullyConnectedSupportingEagerConnectNamespaces.length > 0) {
+        lastConnectedWalletsFromStorage.addWallet(
+          type,
+          successfullyConnectedSupportingEagerConnectNamespaces
+        );
+      }
+
+      // Getting rid of `input` from Result
+      const connectResults = connectResultWithLegacyFormat.map((result) =>
+        result.andThen((okResult) => new Ok(okResult.response))
+      );
+
+      const allResult = Result.all(...connectResults);
+      if (allResult.err) {
+        throw allResult.val;
+      }
+
+      return allResult.unwrap();
+    },
+    async disconnect(type, namespaces) {
+      const wallet = getHub().get(type);
+      if (!wallet) {
+        throw new Error(
+          `You should add ${type} to provider first then call 'disconnect'.`
+        );
+      }
+
+      wallet.getAll().forEach((namespace) => {
+        const namespaceShouldBeDisconnected =
+          !namespaces || namespaces.includes(namespace.namespaceId);
+        const namespaceIsConnected = namespace.state()[0]().connected;
+        if (namespaceShouldBeDisconnected && namespaceIsConnected) {
+          return namespace.disconnect();
+        }
+      });
+
+      if (params.autoConnect) {
+        if (namespaces) {
+          lastConnectedWalletsFromStorage.removeNamespacesFromWallet(
+            type,
+            namespaces
+          );
+        } else {
+          lastConnectedWalletsFromStorage.removeWallets([type]);
+        }
+      }
+    },
+    async disconnectAll() {
+      const disconnectPromises: Promise<void>[] = Array.from(
+        getHub().getAll().values()
+      ).map(async (provider) => this.disconnect(provider.id));
+
+      return await Promise.allSettled(disconnectPromises);
+    },
+    async getSigners(type) {
+      const wallet = getHub().get(type);
+      if (!wallet) {
+        throw new Error(`You should add ${type} to provider first.`);
+      }
+
+      const info = wallet.info();
+      if (!info) {
+        throw new Error('Your provider should have required `info`.');
+      }
+
+      const providerProperties = info.metadata.properties;
+
+      const signerProperty = providerProperties?.find(
+        (property) => property.name === 'signers'
+      );
+      if (!signerProperty) {
+        throw new Error('Your provider should contain signers property.');
+      }
+
+      return signerProperty.value.getSigners();
+    },
+    getWalletInfo(type) {
+      const wallet = getHub().get(type);
+      if (!wallet) {
+        throw new Error(`You should add ${type} to provider first.`);
+      }
+
+      const info = wallet.info();
+      if (!info) {
+        throw new Error('Your provider should have required `info`.');
+      }
+
+      const installLink: Exclude<WalletInfo['installLink'], string> = {
+        DEFAULT: '',
+      };
+
+      const { metadata } = info;
+      const { extensions } = metadata;
+      // `extensions` in legacy format was uppercase and also `DEFAULT` was used instead of `homepage`
+      Object.keys(extensions).forEach((k) => {
+        const key = k as ExtensionLink;
+
+        if (key === 'homepage') {
+          installLink.DEFAULT = extensions[key] || '';
+        }
+
+        const allowedKeys: ExtensionLink[] = [
+          'firefox',
+          'chrome',
+          'brave',
+          'edge',
+        ];
+        if (allowedKeys.includes(key)) {
+          const upperCasedKey = key.toUpperCase() as keyof Exclude<
+            WalletInfo['installLink'],
+            string
+          >;
+          installLink[upperCasedKey] = extensions[key] || '';
+        }
+      });
+
+      const providerProperties = metadata.properties;
+
+      const namespacesProperty = providerProperties?.find(
+        (property) => property.name === 'namespaces'
+      );
+      const derivationPathProperty = providerProperties?.find(
+        (property) => property.name === 'derivationPath'
+      );
+      const detailsProperty = providerProperties?.find(
+        (property) => property.name === 'details'
+      );
+
+      return {
+        name: metadata.name,
+        img: metadata.icon,
+        installLink: installLink,
+        // We don't have this values anymore, fill them with some values that communicate this.
+        color: 'red',
+        supportedChains: getSupportedChainsFromProvider(
+          wallet,
+          dataRef.current.allBlockChains
+        ),
+        isContractWallet: detailsProperty?.value?.isContractWallet,
+        mobileWallet: detailsProperty?.value?.mobileWallet,
+        // if set to false here, it will not show the wallet in mobile in anyways. to be compatible with old behavior, undefined is more appropirate.
+        showOnMobile: detailsProperty?.value?.showOnMobile,
+        needsNamespace: namespacesProperty?.value,
+        needsDerivationPath: derivationPathProperty?.value,
+        isHub: true,
+        properties: metadata.properties,
+      };
+    },
+    providers() {
+      throw new Error('This method is not available on hub providers.');
+    },
+    state(type) {
+      const hubState = getHub().state();
+      const wallet = getHub().get(type);
+      const walletState = hubState[type];
+
+      if (!walletState || !wallet) {
+        throw new Error(
+          `It seems your requested provider doesn't exist in hub. Provider Id: ${type}`
+        );
+      }
+
+      const accounts = walletState.namespaces
+        .filter((namespace) => namespace.connected)
+        .flatMap((namespace) =>
+          namespace.accounts?.map((accounts) =>
+            fromAccountIdToLegacyAddressFormat(
+              accounts,
+              params.allBlockChains || []
+            )
+          )
+        )
+        .filter((account): account is string => !!account);
+
+      const namespacesState = new Map(
+        Array.from(wallet.getAll(), ([_, value]) => [
+          value.namespaceId,
+          value.state()[0](),
+        ])
+      );
+
+      const coreState = {
+        connected: walletState.connected,
+        connecting: walletState.connecting,
+        installed: walletState.installed,
+        reachable: true,
+        accounts: accounts,
+        network: null,
+        namespaces: namespacesState,
+      };
+      return coreState;
+    },
+    suggestAndConnect(_type, _network): never {
+      throw new Error('`suggestAndConnect` is not implemented');
+    },
+    hubProvider() {
+      throw new Error(
+        'Unreachable code. the method has been implemented in main adapter instance.'
+      );
+    },
+  };
+
+  return api;
+}

package/src/hub/useHubRefs.ts

@@ -0,0 +1,50 @@
+import type { Provider, Store } from '@rango-dev/wallets-core';
+
+import { createStore, Hub } from '@rango-dev/wallets-core';
+import { useRef } from 'react';
+
+import { synchronizeHubWithConfigProviders } from './utils.js';
+
+export function useHubRefs(providers: Provider[]) {
+  const store = useRef<Store | null>(null);
+
+  const hub = useRef<Hub | null>(null);
+
+  function createHub() {
+    const createdHub = new Hub({
+      store: getStore(),
+    });
+    /*
+     * First add providers to hub
+     * This helps to `getWalletInfo` be usable, before initialize.
+     */
+    providers.forEach((provider) => {
+      createdHub.add(provider.id, provider);
+    });
+    hub.current = createdHub;
+    return createdHub;
+  }
+
+  // https://react.dev/reference/react/useRef#avoiding-recreating-the-ref-contents
+  function getStore() {
+    if (store.current !== null) {
+      return store.current;
+    }
+    const createdStore = createStore();
+    store.current = createdStore;
+    return createdStore;
+  }
+
+  function getHub(): Hub {
+    const hubProviders = hub.current?.getAll();
+
+    if (!hub.current || !hubProviders) {
+      return createHub();
+    }
+
+    synchronizeHubWithConfigProviders(hub.current, providers);
+    return hub.current;
+  }
+
+  return { getStore, getHub };
+}