chore: wip embedded

queue-manager/rango-preset/src/types.ts

@@ -71,12 +71,8 @@ export interface SwapQueueContext extends QueueContext {
   switchNetwork: (
     wallet: WalletType,
     network: Network
-  ) => Promise<ConnectResult | undefined> | undefined;
+  ) => Promise<ConnectResult | ConnectResult[] | undefined> | undefined;
   canSwitchNetworkTo: (type: WalletType, network: Network) => boolean;
-  connect: (
-    wallet: WalletType,
-    network: Network
-  ) => Promise<ConnectResult> | undefined;
   state: (type: WalletType) => WalletState;
   isMobileWallet: (type: WalletType) => boolean;
 

wallets/core/src/legacy/types.ts

@@ -73,6 +73,7 @@ export enum Namespace {
   Tron = 'Tron',
 }
 
+// TODO: Deprecated this.
 export type NamespaceData = {
   namespace: Namespace;
   derivationPath?: string;
@@ -257,7 +258,9 @@ export type NamespacesWithDiscoverMode = Namespace | 'DISCOVER_MODE';
 export type NamespaceWithDiscoverMode = {
   namespace: 'DISCOVER_MODE';
   network: string;
+  derivationPath?: string;
 };
+// TODO: Rename this?
 export type NamespaceAndNetwork<T extends Namespace = Namespace> =
   | {
       /**
@@ -269,5 +272,6 @@ export type NamespaceAndNetwork<T extends Namespace = Namespace> =
        * In some cases, we need to connect a specific network on a namespace. e.g. Polygon on EVM.
        */
       network: NetworkTypeForNamespace<T>;
+      derivationPath?: string;
     }
   | NamespaceWithDiscoverMode;

wallets/core/src/legacy/wallet.ts

@@ -26,11 +26,16 @@ export type EventHandler = (
 export type EventInfo = {
   supportedBlockchains: BlockchainMeta[];
   isContractWallet: boolean;
+  // This is for Hub and be able to make it compatible with legacy behavior.
+  isHub: boolean;
 };
 
 export interface State {
   connected: boolean;
   connecting: boolean;
+  /**
+   * @depreacted it always returns `false`. don't use it.
+   */
   reachable: boolean;
   installed: boolean;
   accounts: string[] | null;
@@ -57,6 +62,7 @@ class Wallet<InstanceType = any> {
     this.info = {
       supportedBlockchains: [],
       isContractWallet: false,
+      isHub: false,
     };
     this.state = {
       connected: false,
@@ -408,6 +414,7 @@ class Wallet<InstanceType = any> {
       const eventInfo: EventInfo = {
         supportedBlockchains: this.info.supportedBlockchains,
         isContractWallet: this.info.isContractWallet,
+        isHub: false,
       };
       this.options.handler(
         this.options.config.type,

wallets/provider-all/src/index.ts

@@ -35,6 +35,10 @@ import * as tronLink from '@rango-dev/provider-tron-link';
 import * as trustwallet from '@rango-dev/provider-trustwallet';
 import * as walletconnect2 from '@rango-dev/provider-walletconnect-2';
 import * as xdefi from '@rango-dev/provider-xdefi';
+import {
+  legacyProviderImportsToVersionsInterface,
+  type Versions,
+} from '@rango-dev/wallets-core/utils';
 import { type WalletType, WalletTypes } from '@rango-dev/wallets-shared';
 
 import { isWalletExcluded } from './helpers.js';
@@ -45,7 +49,7 @@ interface Options {
   trezor?: TrezorEnvironments;
 }
 
-export const allProviders = (options?: Options) => {
+export const allProviders = (options?: Options): Versions[] => {
   const providers = options?.selectedProviders || [];
 
   if (
@@ -75,38 +79,38 @@ export const allProviders = (options?: Options) => {
   }
 
   return [
-    safe,
-    defaultInjected,
-    metamask,
-    solflareSnap,
-    walletconnect2,
-    keplr,
-    phantom,
-    argentx,
-    tronLink,
-    trustwallet,
-    bitget,
-    enkrypt,
-    xdefi,
-    clover,
-    safepal,
-    brave,
-    coin98,
-    coinbase,
-    cosmostation,
-    exodus,
-    mathwallet,
-    okx,
-    tokenpocket,
-    tomo,
-    halo,
-    leapCosmos,
-    frontier,
-    taho,
-    braavos,
-    ledger,
-    rabby,
-    trezor,
-    solflare,
+    legacyProviderImportsToVersionsInterface(safe),
+    legacyProviderImportsToVersionsInterface(defaultInjected),
+    legacyProviderImportsToVersionsInterface(metamask),
+    legacyProviderImportsToVersionsInterface(solflareSnap),
+    legacyProviderImportsToVersionsInterface(walletconnect2),
+    legacyProviderImportsToVersionsInterface(keplr),
+    legacyProviderImportsToVersionsInterface(phantom),
+    legacyProviderImportsToVersionsInterface(argentx),
+    legacyProviderImportsToVersionsInterface(tronLink),
+    legacyProviderImportsToVersionsInterface(trustwallet),
+    legacyProviderImportsToVersionsInterface(bitget),
+    legacyProviderImportsToVersionsInterface(enkrypt),
+    legacyProviderImportsToVersionsInterface(xdefi),
+    legacyProviderImportsToVersionsInterface(clover),
+    legacyProviderImportsToVersionsInterface(safepal),
+    legacyProviderImportsToVersionsInterface(brave),
+    legacyProviderImportsToVersionsInterface(coin98),
+    legacyProviderImportsToVersionsInterface(coinbase),
+    legacyProviderImportsToVersionsInterface(cosmostation),
+    legacyProviderImportsToVersionsInterface(exodus),
+    legacyProviderImportsToVersionsInterface(mathwallet),
+    legacyProviderImportsToVersionsInterface(okx),
+    legacyProviderImportsToVersionsInterface(tokenpocket),
+    legacyProviderImportsToVersionsInterface(tomo),
+    legacyProviderImportsToVersionsInterface(halo),
+    legacyProviderImportsToVersionsInterface(leapCosmos),
+    legacyProviderImportsToVersionsInterface(frontier),
+    legacyProviderImportsToVersionsInterface(taho),
+    legacyProviderImportsToVersionsInterface(braavos),
+    legacyProviderImportsToVersionsInterface(ledger),
+    legacyProviderImportsToVersionsInterface(rabby),
+    legacyProviderImportsToVersionsInterface(trezor),
+    legacyProviderImportsToVersionsInterface(solflare),
   ];
 };

wallets/wallets-adapter/src/provider.tsx

@@ -1,7 +1,5 @@
-import type {
-  ProviderInterface,
-  ProviderProps,
-} from '@rango-dev/wallets-react';
+import type { LegacyProviderInterface } from '@rango-dev/wallets-core/legacy';
+import type { ProviderProps } from '@rango-dev/wallets-react';
 
 import { Provider } from '@rango-dev/wallets-react';
 import React from 'react';
@@ -10,7 +8,9 @@ import Adapter from './adapter';
 
 function AdapterProvider({ children, ...props }: ProviderProps) {
   const list = props.providers.map(
-    (provider: ProviderInterface) => provider.config.type
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore-next-line
+    (provider: LegacyProviderInterface) => provider.config.type
   );
 
   return (

widget/embedded/src/QueueManager.tsx

@@ -53,7 +53,14 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     if (!canSwitchNetworkTo(wallet, network)) {
       return undefined;
     }
-    return connect(wallet, network);
+    const result = await connect(wallet, [
+      {
+        namespace: 'DISCOVER_MODE',
+        network,
+      },
+    ]);
+
+    return result;
   };
 
   const isMobileWallet = (walletType: WalletType): boolean =>
@@ -88,7 +95,6 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     providers: allProviders,
     switchNetwork,
     canSwitchNetworkTo,
-    connect,
     state,
     isMobileWallet,
   };

widget/embedded/src/components/SwapDetails/SwapDetails.tsx

@@ -160,7 +160,12 @@ export function SwapDetails(props: SwapDetailsProps) {
       canSwitchNetworkTo(currentStepWallet.walletType, currentStepBlockchain));
 
   const switchNetwork = showSwitchNetwork
-    ? connect.bind(null, currentStepWallet.walletType, currentStepBlockchain)
+    ? connect.bind(null, currentStepWallet.walletType, [
+        {
+          namespace: 'DISCOVER_MODE',
+          network: currentStepBlockchain,
+        },
+      ])
     : undefined;
 
   const stepMessage = getSwapMessages(swap, currentStep);

widget/embedded/src/components/SwapDetailsAlerts/SwapDetailsAlerts.types.ts

@@ -15,7 +15,7 @@ export interface SwapAlertsProps extends WaningAlertsProps {
 }
 
 export interface WaningAlertsProps extends FailedAlertsProps {
-  switchNetwork: (() => Promise<ConnectResult>) | undefined;
+  switchNetwork: (() => Promise<ConnectResult[]>) | undefined;
   showNetworkModal: PendingSwapNetworkStatus | null | undefined;
   setNetworkModal: (network: ModalState) => void;
 }

widget/embedded/src/containers/Wallets/Wallets.tsx

@@ -47,6 +47,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
     walletConnectListedDesktopWalletLink:
       props.config.__UNSTABLE_OR_INTERNAL__
         ?.walletConnectListedDesktopWalletLink,
+    experimentalWallet: props.config.features?.experimentalWallet,
   };
   const { providers } = useWalletProviders(config.wallets, walletOptions);
   const { connectWallet, disconnectWallet } = useWalletsStore();
@@ -85,6 +86,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
           meta.isContractWallet
         );
         if (data.length) {
+          console.log('EventHandler', { data });
           connectWallet(data, findToken);
         }
       } else {
@@ -98,17 +100,17 @@ function Main(props: PropsWithChildren<PropTypes>) {
         }
       }
     }
-    if (event === Events.ACCOUNTS && state.connected) {
+    if (
+      (event === Events.ACCOUNTS && state.connected) ||
+      // Hub works differently, and this check should be enough.
+      (event === Events.ACCOUNTS && meta.isHub)
+    ) {
       const key = `${type}-${state.network}-${value}`;
 
-      if (state.connected) {
-        if (!!onConnectWalletHandler.current) {
-          onConnectWalletHandler.current(key);
-        } else {
-          console.warn(
-            `onConnectWallet handler hasn't been set. Are you sure?`
-          );
-        }
+      if (!!onConnectWalletHandler.current) {
+        onConnectWalletHandler.current(key);
+      } else {
+        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
       }
     }
 
@@ -146,7 +148,13 @@ function Main(props: PropsWithChildren<PropTypes>) {
         allBlockChains={blockchains}
         providers={providers}
         onUpdateState={onUpdateState}
-        autoConnect={!!isActiveTab}>
+        autoConnect={!!isActiveTab}
+        configs={{
+          isExperimentalEnabled:
+            props.config.features?.experimentalWallet === 'enabled'
+              ? true
+              : false,
+        }}>
         {props.children}
       </Provider>
     </WidgetContext.Provider>

widget/embedded/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -1,5 +1,6 @@
 import type { HandleConnectOptions, Result } from './useStatefulConnect.types';
 import type { WalletInfoWithExtra } from '../../types';
+import type { ExtendedModalWalletInfo } from '../../utils/wallets';
 import type {
   Namespace,
   NamespaceData,
@@ -61,7 +62,10 @@ export function useStatefulConnect(): UseStatefulConnect {
     });
 
     try {
-      await connect(type, undefined, namespaces);
+      await connect(
+        type,
+        namespaces?.map((ns) => ({ ...ns, network: 'DISCOVER_MODE' }))
+      );
 
       return { status: ResultStatus.Connected };
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -75,14 +79,31 @@ export function useStatefulConnect(): UseStatefulConnect {
   };
 
   const handleConnect = async (
-    wallet: WalletInfoWithExtra,
+    wallet: ExtendedModalWalletInfo,
     options?: HandleConnectOptions
   ): Promise<{
     status: ResultStatus;
   }> => {
     const isDisconnected = wallet.state === WalletState.DISCONNECTED;
 
     if (isDisconnected) {
+      const detachedInstances = wallet.properties?.find(
+        (item) => item.name === 'detached'
+      );
+      const hubCondition = detachedInstances && wallet.state !== 'connected';
+      if (hubCondition) {
+        dispatch({
+          type: 'needsNamespace',
+          payload: {
+            providerType: wallet.type,
+            providerImage: wallet.image,
+            availableNamespaces: wallet.namespaces,
+            singleNamespace: wallet.singleNamespace,
+          },
+        });
+        return { status: ResultStatus.Namespace };
+      }
+
       if (!wallet.namespaces) {
         return await runConnect(wallet.type, undefined, options);
       }

widget/embedded/src/hooks/useWalletProviders/useWalletProviders.ts

@@ -1,6 +1,5 @@
 import type { WidgetConfig } from '../../types';
 import type { ProvidersOptions } from '../../utils/providers';
-import type { ProviderInterface } from '@rango-dev/wallets-react';
 
 import { useEffect } from 'react';
 
@@ -14,10 +13,7 @@ export function useWalletProviders(
   options?: ProvidersOptions
 ) {
   const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
-  let generateProviders: ProviderInterface[] = matchAndGenerateProviders(
-    providers,
-    options
-  );
+  let generateProviders = matchAndGenerateProviders(providers, options);
 
   useEffect(() => {
     clearConnectedWallet();

widget/embedded/src/types/config.ts

@@ -1,5 +1,5 @@
 import type { Language, theme } from '@rango-dev/ui';
-import type { ProviderInterface } from '@rango-dev/wallets-react';
+import type { LegacyProviderInterface } from '@rango-dev/wallets-core/dist/legacy/mod';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Asset } from 'rango-sdk';
 
@@ -132,6 +132,9 @@ export type SignersConfig = {
  *
  * @property {'visible' | 'hidden'} [liquiditySource]
  * - The visibility state for the liquiditySource feature. Optional property.
+ *
+ * @property {'disabled' | 'enabled'} [experimentalWallet]
+ * - Enable our experimental version of wallets. Default: disable on production, enabled on dev.
  */
 export type Features = Partial<
   Record<
@@ -143,7 +146,8 @@ export type Features = Partial<
     'visible' | 'hidden'
   >
 > &
-  Partial<Record<'experimentalRoute', 'disabled' | 'enabled'>>;
+  Partial<Record<'experimentalRoute', 'disabled' | 'enabled'>> &
+  Partial<Record<'experimentalWallet', 'disabled' | 'enabled'>>;
 
 export type TrezorManifest = {
   appUrl: string;
@@ -218,7 +222,7 @@ export type WidgetConfig = {
   from?: BlockchainAndTokenConfig;
   to?: BlockchainAndTokenConfig;
   liquiditySources?: string[];
-  wallets?: (WalletType | ProviderInterface)[];
+  wallets?: (WalletType | LegacyProviderInterface)[];
   multiWallets?: boolean;
   customDestination?: boolean;
   defaultCustomDestinations?: { [blockchain: string]: string };