@rango-dev/wallets-react 0.26.0 → 0.26.1-next.1

package/src/legacy/useAutoConnect.ts

@@ -1,31 +1,23 @@
-import type { GetWalletInstance } from './hooks.js';
-import type { ProviderProps, WalletProviders } from './types.js';
+import type { ProviderProps } from './types.js';
 
 import { useEffect, useRef } from 'react';
 
-import { autoConnect } from './helpers.js';
+import { shouldTryAutoConnect } from './utils.js';
 
 export function useAutoConnect(
   props: Pick<ProviderProps, 'allBlockChains' | 'autoConnect'> & {
-    wallets: WalletProviders;
-    getWalletInstanceFromLegacy: GetWalletInstance;
+    /**
+     * A function to run autoConnect on instances
+     */
+    autoConnectHandler: () => void;
   }
 ) {
   const autoConnectInitiated = useRef(false);
 
-  // Running auto connect on instances
   useEffect(() => {
-    const shouldTryAutoConnect =
-      props.allBlockChains &&
-      props.allBlockChains.length &&
-      props.autoConnect &&
-      !autoConnectInitiated.current;
-
-    if (shouldTryAutoConnect) {
+    if (shouldTryAutoConnect(props) && !autoConnectInitiated.current) {
       autoConnectInitiated.current = true;
-      void (async () => {
-        await autoConnect(props.wallets, props.getWalletInstanceFromLegacy);
-      })();
+      props.autoConnectHandler();
     }
   }, [props.autoConnect, props.allBlockChains]);
 }

package/src/legacy/useLegacyProviders.ts

@@ -1,8 +1,14 @@
 import type { ProviderContext, ProviderProps } from './types.js';
+import type {
+  LegacyNamespaceInputForConnect,
+  LegacyNamespaceInputWithDiscoverMode,
+  LegacyProviderInterface,
+} from '@rango-dev/wallets-core/legacy';
 import type { WalletType } from '@rango-dev/wallets-shared';
 
 import { useEffect, useReducer } from 'react';
 
+import { autoConnect } from './autoConnect.js';
 import {
   availableWallets,
   checkWalletProviders,
@@ -17,7 +23,13 @@ import {
 import { useInitializers } from './hooks.js';
 import { useAutoConnect } from './useAutoConnect.js';
 
-export function useLegacyProviders(props: ProviderProps): ProviderContext {
+export type LegacyProviderProps = Omit<ProviderProps, 'providers'> & {
+  providers: LegacyProviderInterface[];
+};
+
+export function useLegacyProviders(
+  props: LegacyProviderProps
+): ProviderContext {
   const [providersState, dispatch] = useReducer(stateReducer, {});
 
   // Get (or add) wallet instance (`provider`s will be wrapped in a `Wallet`)
@@ -30,22 +42,48 @@ export function useLegacyProviders(props: ProviderProps): ProviderContext {
   const wallets = checkWalletProviders(listOfProviders);
 
   useAutoConnect({
-    wallets,
     allBlockChains: props.allBlockChains,
     autoConnect: props.autoConnect,
-    getWalletInstanceFromLegacy: getWalletInstance,
+    autoConnectHandler: async () => autoConnect(wallets, getWalletInstance),
   });
 
   // Final API we put in context and it will be available to use for users.
-  // eslint-disable-next-line react/jsx-no-constructed-context-values
   const api: ProviderContext = {
-    async connect(type, network, namespaces) {
+    async connect(type, namespaces) {
       const wallet = wallets.get(type);
       if (!wallet) {
         throw new Error(`You should add ${type} to provider first.`);
       }
+
+      /**
+       * Discover mode has a meaning in hub, so we are considering whenever a namespace with DISCOVER_MODE reaches here,
+       * we can ignore it and don't pass it to provider.
+       */
+      const namespacesForConnect = namespaces?.filter(
+        (
+          ns
+        ): ns is Exclude<
+          LegacyNamespaceInputForConnect,
+          LegacyNamespaceInputWithDiscoverMode
+        > => {
+          return ns.namespace !== 'DISCOVER_MODE';
+        }
+      );
+      // Legacy providers doesn't implemented multiple namespaces, so it will always be one value.
+      let network = undefined;
+      if (namespaces && namespaces.length > 0) {
+        /*
+         * This may not be safe in cases there are two `network` for namespaces, the first one will be picked always.
+         * But since legacy provider only accepts one value, it shouldn't be happened when we are using legacy mode.
+         */
+        network = namespaces.find((ns) => !!ns.network)?.network;
+      }
+
       const walletInstance = getWalletInstance(wallet);
-      const result = await walletInstance.connect(network, namespaces);
+      const result = await walletInstance.connect(
+        network,
+        namespacesForConnect
+      );
       if (props.autoConnect) {
         void tryPersistWallet({
           type,
@@ -54,7 +92,7 @@ export function useLegacyProviders(props: ProviderProps): ProviderContext {
         });
       }
 
-      return result;
+      return [result];
     },
     async disconnect(type) {
       const wallet = wallets.get(type);

package/src/legacy/utils.ts

@@ -0,0 +1,7 @@
+import type { ProviderProps } from './types.js';
+
+export function shouldTryAutoConnect(
+  props: Pick<ProviderProps, 'allBlockChains' | 'autoConnect'>
+): boolean {
+  return !!props.allBlockChains?.length && !!props.autoConnect;
+}

package/src/provider.tsx

@@ -3,13 +3,13 @@ import type { ProviderProps } from './legacy/types.js';
 import React from 'react';
 
 import { WalletContext } from './legacy/context.js';
-import { useLegacyProviders } from './legacy/useLegacyProviders.js';
+import { useProviders } from './useProviders.js';
 
 function Provider(props: ProviderProps) {
-  const legacyApi = useLegacyProviders(props);
+  const api = useProviders(props);
 
   return (
-    <WalletContext.Provider value={legacyApi}>
+    <WalletContext.Provider value={api}>
       {props.children}
     </WalletContext.Provider>
   );

package/src/useProviders.ts

@@ -0,0 +1,120 @@
+import type {
+  ExtendedWalletInfo,
+  ProviderContext,
+  ProviderProps,
+  Providers,
+} from './index.js';
+import type { ConnectResult } from './legacy/mod.js';
+import type { LegacyState } from '@rango-dev/wallets-core/legacy';
+import type { SignerFactory } from 'rango-types';
+
+import {
+  findProviderByType,
+  separateLegacyAndHubProviders,
+  useHubAdapter,
+} from './hub/mod.js';
+import { useLegacyProviders } from './legacy/mod.js';
+
+/*
+ * We have two separate interface for our providers: legacy and hub.
+ * This hook sits between this two interface by keeping old interface as main API and try to add Hub providers by using an adapter.
+ * For gradual migrating and backward compatibility, we are supporting hub by an adapter besides of the old one.
+ */
+function useProviders(props: ProviderProps) {
+  const { providers, ...restProps } = props;
+  const [legacyProviders, hubProviders] = separateLegacyAndHubProviders(
+    providers,
+    {
+      isExperimentalEnabled: restProps.configs?.isExperimentalEnabled,
+    }
+  );
+
+  const legacyApi = useLegacyProviders({
+    ...restProps,
+    providers: legacyProviders,
+  });
+  const hubApi = useHubAdapter({
+    ...restProps,
+    providers: hubProviders,
+    allVersionedProviders: providers,
+  });
+
+  const api: ProviderContext = {
+    canSwitchNetworkTo(type, network): boolean {
+      if (findProviderByType(hubProviders, type)) {
+        return hubApi.canSwitchNetworkTo(type, network);
+      }
+      return legacyApi.canSwitchNetworkTo(type, network);
+    },
+    async connect(type, network): Promise<ConnectResult[]> {
+      const hubProvider = findProviderByType(hubProviders, type);
+      if (hubProvider) {
+        return await hubApi.connect(type, network);
+      }
+
+      return await legacyApi.connect(type, network);
+    },
+    async disconnect(type): Promise<void> {
+      const hubProvider = findProviderByType(hubProviders, type);
+      if (hubProvider) {
+        return await hubApi.disconnect(type);
+      }
+
+      return await legacyApi.disconnect(type);
+    },
+    async disconnectAll() {
+      return await Promise.allSettled([
+        hubApi.disconnectAll(),
+        legacyApi.disconnectAll(),
+      ]);
+    },
+    async getSigners(type): Promise<SignerFactory> {
+      const hubProvider = findProviderByType(hubProviders, type);
+      if (hubProvider) {
+        return hubApi.getSigners(type);
+      }
+      return legacyApi.getSigners(type);
+    },
+    getWalletInfo(type): ExtendedWalletInfo {
+      const hubProvider = findProviderByType(hubProviders, type);
+      if (hubProvider) {
+        return hubApi.getWalletInfo(type);
+      }
+
+      return legacyApi.getWalletInfo(type);
+    },
+    providers(): Providers {
+      let output: Providers = {};
+      if (hubProviders.length > 0) {
+        output = { ...output, ...hubApi.providers() };
+      }
+      if (legacyProviders.length > 0) {
+        output = { ...output, ...legacyApi.providers() };
+      }
+
+      return output;
+    },
+    state(type): LegacyState {
+      const hubProvider = findProviderByType(hubProviders, type);
+
+      if (hubProvider) {
+        return hubApi.state(type);
+      }
+
+      return legacyApi.state(type);
+    },
+    async suggestAndConnect(type, network): Promise<ConnectResult> {
+      const hubProvider = findProviderByType(hubProviders, type);
+
+      if (hubProvider) {
+        return hubApi.suggestAndConnect(type, network);
+      }
+
+      return await legacyApi.suggestAndConnect(type, network);
+    },
+  };
+
+  return api;
+}
+
+export { useProviders };

package/dist/legacy/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const LAST_CONNECTED_WALLETS = "last-connected-wallets";
-//# sourceMappingURL=constants.d.ts.map

package/dist/legacy/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/legacy/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,2BAA2B,CAAC"}

package/src/legacy/constants.ts

@@ -1 +0,0 @@
-export const LAST_CONNECTED_WALLETS = 'last-connected-wallets';