@rango-dev/widget-embedded 0.5.1-next.7 → 0.5.1-next.8

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":";AAmEA,wBAAgB,IAAI,gBA+JnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":";AAmEA,wBAAgB,IAAI,gBA6JnB"}

package/dist/pages/WalletsPage.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { WalletType } from '@rango-dev/wallets-shared';
+import { WidgetConfig } from '../types';
 interface PropTypes {
-    supportedWallets?: WalletType[];
+    supportedWallets: WidgetConfig['wallets'];
     multiWallets: boolean;
 }
 export declare function WalletsPage({ supportedWallets, multiWallets }: PropTypes): JSX.Element;

package/dist/pages/WalletsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":";AAUA,OAAO,EACL,UAAU,EAGX,MAAM,2BAA2B,CAAC;AAWnC,UAAU,SAAS;IACjB,gBAAgB,CAAC,EAAE,UAAU,EAAE,CAAC;IAChC,YAAY,EAAE,OAAO,CAAC;CACvB;AAsBD,wBAAgB,WAAW,CAAC,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,SAAS,eA2FxE"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":";AAwBA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,UAAU,SAAS;IACjB,gBAAgB,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,EAAE,OAAO,CAAC;CACvB;AAyBD,wBAAgB,WAAW,CAAC,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,SAAS,eA0FxE"}

package/dist/types/config.d.ts

@@ -1,5 +1,6 @@
 import { Asset } from 'rango-sdk';
 import { WalletType } from '@rango-dev/wallets-shared';
+import { ProviderInterface } from '@rango-dev/wallets-core';
 /**
  * The above type defines a set of optional color properties for a widget.
  * @property {string} background
@@ -99,6 +100,9 @@ export type BlockchainAndTokenConfig = {
  * @property {WidgetTheme} theme - The `theme` property is a part of the `WidgetConfig` type and is
  * used to specify the visual theme of the widget. It is of type `WidgetTheme`, which is an interface
  * that defines the various properties of the theme, such as colors, fonts, and others.
+ * @property {boolean} externalWallets
+ * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
+
  */
 export type WidgetConfig = {
     apiKey: string;
@@ -107,10 +111,11 @@ export type WidgetConfig = {
     from?: BlockchainAndTokenConfig;
     to?: BlockchainAndTokenConfig;
     liquiditySources?: string[];
-    wallets?: WalletType[];
+    wallets?: (WalletType | ProviderInterface)[];
     multiWallets?: boolean;
     customDestination?: boolean;
     language?: string;
     theme?: WidgetTheme;
+    externalWallets?: boolean;
 };
 //# sourceMappingURL=config.d.ts.map

package/dist/types/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}

package/dist/utils/providers.d.ts

@@ -0,0 +1,11 @@
+import { ProviderInterface } from '@rango-dev/wallets-core';
+import { WidgetConfig } from '../types';
+/**
+ *
+ * Generate a list of providers by passing a provider name (e.g. metamask) or a custom provider which implemented ProviderInterface.
+ * @returns ProviderInterface[] a list of ProviderInterface
+ *
+ */
+export declare function matchAndGenerateProviders(providers: WidgetConfig['wallets']): ProviderInterface[];
+export declare function configWalletsToWalletName(config: WidgetConfig['wallets']): string[];
+//# sourceMappingURL=providers.d.ts.map

package/dist/utils/providers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"providers.d.ts","sourceRoot":"","sources":["../../src/utils/providers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,GACjC,iBAAiB,EAAE,CA8BrB;AAED,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,YAAY,CAAC,SAAS,CAAC,GAC9B,MAAM,EAAE,CAMV"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.5.1-next.7",
+  "version": "0.5.1-next.8",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -19,10 +19,10 @@
   "dependencies": {
     "@rango-dev/provider-all": "^0.5.1-next.5",
     "@rango-dev/queue-manager-core": "^0.5.1-next.1",
-    "@rango-dev/queue-manager-rango-preset": "^0.5.1-next.7",
+    "@rango-dev/queue-manager-rango-preset": "^0.5.1-next.8",
     "@rango-dev/queue-manager-react": "^0.5.1-next.1",
-    "@rango-dev/ui": "^0.5.1-next.5",
-    "@rango-dev/wallets-core": "^0.5.1-next.4",
+    "@rango-dev/ui": "^0.5.1-next.7",
+    "@rango-dev/wallets-core": "^0.5.1-next.5",
     "@rango-dev/wallets-shared": "^0.5.1-next.10",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",

package/src/Wallets.tsx

@@ -0,0 +1,100 @@
+import React, { PropsWithChildren } from 'react';
+import { useMetaStore } from './store/meta';
+import { Events, Provider } from '@rango-dev/wallets-core';
+import { EventHandler } from '@rango-dev/wallets-core';
+import { Network } from '@rango-dev/wallets-shared';
+import {
+  prepareAccountsForWalletStore,
+  walletAndSupportedChainsNames,
+} from './utils/wallets';
+import { useWalletsStore } from './store/wallets';
+import { isEvmBlockchain } from 'rango-sdk';
+import './i18n';
+import { useWalletProviders } from './hooks/useWalletProviders';
+import { WidgetConfig } from './types';
+import { createContext, useRef } from 'react';
+
+type OnConnectHandler = (key: string) => void;
+interface WidgetContextInterface {
+  onConnectWallet(handler: OnConnectHandler): void;
+}
+
+export const WidgetContext = createContext<WidgetContextInterface>({
+  onConnectWallet: () => {
+    return;
+  },
+});
+
+export function WidgetWallets(
+  props: PropsWithChildren<{
+    providers: WidgetConfig['wallets'];
+  }>
+) {
+  const { blockchains } = useMetaStore.use.meta();
+  const { providers } = useWalletProviders(props.providers);
+  const disconnectWallet = useWalletsStore.use.disconnectWallet();
+  const connectWallet = useWalletsStore.use.connectWallet();
+  const onConnectWalletHandler = useRef<OnConnectHandler>();
+
+  const evmBasedChainNames = blockchains
+    .filter(isEvmBlockchain)
+    .map((chain) => chain.name);
+
+  const onUpdateState: EventHandler = (
+    type,
+    event,
+    value,
+    state,
+    supportedChains
+  ) => {
+    if (event === Events.ACCOUNTS) {
+      if (value) {
+        const supportedChainNames: Network[] | null =
+          walletAndSupportedChainsNames(supportedChains);
+        const data = prepareAccountsForWalletStore(
+          type,
+          value,
+          evmBasedChainNames,
+          supportedChainNames
+        );
+        connectWallet(data);
+      } else {
+        disconnectWallet(type);
+      }
+    }
+    if (event === Events.ACCOUNTS && state.connected) {
+      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 (event === Events.NETWORK && state.network) {
+      const key = `${type}-${state.network}`;
+      if (!!onConnectWalletHandler.current) onConnectWalletHandler.current(key);
+      else
+        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
+    }
+  };
+  return (
+    <WidgetContext.Provider
+      value={{
+        onConnectWallet: (handler) => {
+          onConnectWalletHandler.current = handler;
+        },
+      }}>
+      <Provider
+        allBlockChains={blockchains}
+        providers={providers}
+        onUpdateState={onUpdateState}>
+        {props.children}
+      </Provider>
+    </WidgetContext.Provider>
+  );
+}

package/src/Widget.tsx

@@ -1,20 +1,16 @@
 import { SwapContainer, styled } from '@rango-dev/ui';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, {
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { AppRouter } from './components/AppRouter';
-import { useMetaStore } from './store/meta';
-import { Events, Provider } from '@rango-dev/wallets-core';
-import { allProviders } from '@rango-dev/provider-all';
-import { EventHandler } from '@rango-dev/wallets-core/dist/wallet';
-import { Network, WalletType } from '@rango-dev/wallets-shared';
-import {
-  prepareAccountsForWalletStore,
-  walletAndSupportedChainsNames,
-} from './utils/wallets';
-import { useWalletsStore } from './store/wallets';
+import { WalletType } from '@rango-dev/wallets-shared';
 import { Layout } from './components/Layout';
 import { globalFont } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
-import { isEvmBlockchain } from 'rango-sdk';
 import { WidgetConfig } from './types';
 import useSelectLanguage from './hooks/useSelectLanguage';
 import './i18n';
@@ -22,6 +18,7 @@ import QueueManager from './QueueManager';
 import { useUiStore } from './store/ui';
 import { navigationRoutes } from './constants/navigationRoutes';
 import { initConfig } from './utils/configs';
+import { WidgetContext, WidgetWallets } from './Wallets';
 
 const MainContainer = styled('div', {
   width: '100%',
@@ -34,23 +31,17 @@ export type WidgetProps = {
   config?: WidgetConfig;
 };
 
-export const Widget: React.FC<WidgetProps> = ({ config }) => {
+export function Main(props: PropsWithChildren<WidgetProps>) {
+  const { config } = props;
   globalFont(config?.theme?.fontFamily || 'Roboto');
 
-  const { activeTheme } = useTheme({ ...config?.theme });
-  const { blockchains } = useMetaStore.use.meta();
-  const disconnectWallet = useWalletsStore.use.disconnectWallet();
-  const connectWallet = useWalletsStore.use.connectWallet();
+  const { activeTheme } = useTheme(config?.theme || {});
   const { changeLanguage } = useSelectLanguage();
-  const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
     useState<string>('');
   const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
   const currentPage = useUiStore.use.currentPage();
-
-  const evmBasedChainNames = blockchains
-    .filter(isEvmBlockchain)
-    .map((chain) => chain.name);
+  const widgetContext = useContext(WidgetContext);
 
   useMemo(() => {
     if (config?.apiKey) {
@@ -60,77 +51,39 @@ export const Widget: React.FC<WidgetProps> = ({ config }) => {
     }
   }, [config]);
 
-  const onUpdateState: EventHandler = (
-    type,
-    event,
-    value,
-    state,
-    supportedChains
-  ) => {
-    if (event === Events.ACCOUNTS) {
-      if (value) {
-        const supportedChainNames: Network[] | null =
-          walletAndSupportedChainsNames(supportedChains);
-        const data = prepareAccountsForWalletStore(
-          type,
-          value,
-          evmBasedChainNames,
-          supportedChainNames
-        );
-        connectWallet(data);
-      } else {
-        disconnectWallet(type);
-      }
-    }
-    if (event === Events.ACCOUNTS && state.connected) {
-      const key = `${type}-${state.network}-${value}`;
-
-      if (state.connected) {
-        setLastConnectedWalletWithNetwork(key);
-      }
-    }
-
-    if (event === Events.NETWORK && state.network) {
-      const key = `${type}-${state.network}`;
-      setLastConnectedWalletWithNetwork(key);
-    }
-  };
-  let providers = allProviders();
-
-  useEffect(() => {
-    const wallets = config?.wallets;
-    clearConnectedWallet();
-    providers = !wallets
-      ? allProviders()
-      : allProviders().filter((provider) => {
-          const type = provider.config.type;
-          return wallets.find((w) => w === type);
-        });
-  }, [config?.wallets]);
-
   useEffect(() => {
     changeLanguage(config?.language || 'en');
   }, [config?.language]);
 
+  useEffect(() => {
+    widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
+  }, []);
+
   return (
-    <Provider
-      allBlockChains={blockchains}
-      providers={providers}
-      onUpdateState={onUpdateState}>
-      <MainContainer id="swap-container" className={activeTheme}>
-        <QueueManager>
-          <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
-            <AppRouter
-              lastConnectedWallet={lastConnectedWalletWithNetwork}
-              disconnectedWallet={disconnectedWallet}
-              clearDisconnectedWallet={() => {
-                setDisconnectedWallet(undefined);
-              }}>
-              <Layout config={config} />
-            </AppRouter>
-          </SwapContainer>
-        </QueueManager>
-      </MainContainer>
-    </Provider>
+    <MainContainer id="swap-container" className={activeTheme}>
+      <QueueManager>
+        <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
+          <AppRouter
+            lastConnectedWallet={lastConnectedWalletWithNetwork}
+            disconnectedWallet={disconnectedWallet}
+            clearDisconnectedWallet={() => {
+              setDisconnectedWallet(undefined);
+            }}>
+            <Layout config={config} />
+          </AppRouter>
+        </SwapContainer>
+      </QueueManager>
+    </MainContainer>
   );
-};
+}
+
+export function Widget(props: PropsWithChildren<WidgetProps>) {
+  if (!props.config?.externalWallets) {
+    return (
+      <WidgetWallets providers={props.config?.wallets}>
+        <Main {...props} />
+      </WidgetWallets>
+    );
+  }
+  return <Main {...props} />;
+}

package/src/hooks/useSelectLanguage.ts

@@ -2,10 +2,12 @@ import { useTranslation } from 'react-i18next';
 
 export default function useSelectLanguage() {
   const { i18n } = useTranslation();
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const currentLanguage = i18n?.language || 'en';
   const changeLanguage = (value: string) => {
     if (currentLanguage !== value) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       i18n.changeLanguage(value);
     }

package/src/hooks/useWalletProviders.ts

@@ -0,0 +1,20 @@
+import { ProviderInterface } from '@rango-dev/wallets-core';
+import { useEffect } from 'react';
+import { useWalletsStore } from '../store/wallets';
+import { WidgetConfig } from '../types';
+import { matchAndGenerateProviders } from '../utils/providers';
+
+export function useWalletProviders(providers: WidgetConfig['wallets']) {
+  const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
+  let generateProviders: ProviderInterface[] =
+    matchAndGenerateProviders(undefined);
+
+  useEffect(() => {
+    clearConnectedWallet();
+    generateProviders = matchAndGenerateProviders(providers);
+  }, [providers]);
+
+  return {
+    providers: generateProviders,
+  };
+}

package/src/index.ts

@@ -6,6 +6,8 @@ import {
 } from './types';
 import { WidgetProps, Widget } from './Widget';
 import { WalletType } from '@rango-dev/wallets-shared';
+import { WidgetWallets } from './Wallets';
+import { useWallets } from '@rango-dev/wallets-core';
 
 export type {
   WidgetConfig,
@@ -15,4 +17,5 @@ export type {
   BlockchainAndTokenConfig,
   WidgetProps,
 };
-export { Widget };
+export { Widget, WidgetWallets };
+export { useWallets };

package/src/pages/Home.tsx

@@ -159,8 +159,7 @@ export function Home() {
             onClick={() => {
               switchFromAndTo();
               setCount((prev) => prev + 1);
-            }}
-          >
+            }}>
             <VerticalSwapIcon size={32} />
             {isRouterInContext && <SwithFromAndTo count={count} />}
           </Button>
@@ -216,8 +215,7 @@ export function Home() {
             else {
               navigate(navigationRoutes.confirmSwap, { replace: true });
             }
-          }}
-        >
+          }}>
           {swapButtonState.title}
         </Button>
         <BottomLogo />

package/src/pages/WalletsPage.tsx

@@ -22,9 +22,11 @@ import { useTranslation } from 'react-i18next';
 import { useMetaStore } from '../store/meta';
 import { Spinner } from '@rango-dev/ui';
 import { LoadingFailedAlert } from '@rango-dev/ui';
+import { WidgetConfig } from '../types';
+import { configWalletsToWalletName } from '../utils/providers';
 
 interface PropTypes {
-  supportedWallets?: WalletType[];
+  supportedWallets: WidgetConfig['wallets'];
   multiWallets: boolean;
 }
 
@@ -48,13 +50,16 @@ const LoaderContainer = styled('div', {
 const AlertContainer = styled('div', {
   paddingBottom: '$16',
 });
+
+const ALL_SUPPORTED_WALLETS = Object.values(WalletTypes);
+
 export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
   const { navigateBackFrom } = useNavigateBack();
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const wallets = getlistWallet(
     state,
     getWalletInfo,
-    supportedWallets || Object.values(WalletTypes)
+    configWalletsToWalletName(supportedWallets) || ALL_SUPPORTED_WALLETS
   );
   const walletsRef = useRef<WalletInfo[]>();
 
@@ -112,8 +117,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
     <SecondaryPage
       title={t('Select Wallet') || ''}
       textField={false}
-      onBack={navigateBackFrom.bind(null, navigationRoutes.wallets)}
-    >
+      onBack={navigateBackFrom.bind(null, navigationRoutes.wallets)}>
       <>
         {walletErrorMessage && (
           <AlertContainer>

package/src/types/config.ts

@@ -1,5 +1,6 @@
 import { Asset } from 'rango-sdk';
 import { WalletType } from '@rango-dev/wallets-shared';
+import { ProviderInterface } from '@rango-dev/wallets-core';
 
 /**
  * The above type defines a set of optional color properties for a widget.
@@ -100,6 +101,9 @@ export type BlockchainAndTokenConfig = {
  * @property {WidgetTheme} theme - The `theme` property is a part of the `WidgetConfig` type and is
  * used to specify the visual theme of the widget. It is of type `WidgetTheme`, which is an interface
  * that defines the various properties of the theme, such as colors, fonts, and others.
+ * @property {boolean} externalWallets
+ * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
+
  */
 export type WidgetConfig = {
   apiKey: string;
@@ -108,9 +112,10 @@ export type WidgetConfig = {
   from?: BlockchainAndTokenConfig;
   to?: BlockchainAndTokenConfig;
   liquiditySources?: string[];
-  wallets?: WalletType[];
+  wallets?: (WalletType | ProviderInterface)[];
   multiWallets?: boolean;
   customDestination?: boolean;
   language?: string;
   theme?: WidgetTheme;
+  externalWallets?: boolean;
 };

package/src/utils/providers.ts

@@ -0,0 +1,53 @@
+import { allProviders } from '@rango-dev/provider-all';
+import { ProviderInterface } from '@rango-dev/wallets-core';
+import { WidgetConfig } from '../types';
+
+/**
+ *
+ * Generate a list of providers by passing a provider name (e.g. metamask) or a custom provider which implemented ProviderInterface.
+ * @returns ProviderInterface[] a list of ProviderInterface
+ *
+ */
+export function matchAndGenerateProviders(
+  providers: WidgetConfig['wallets']
+): ProviderInterface[] {
+  const all = allProviders();
+
+  if (providers) {
+    const selectedProviders: ProviderInterface[] = [];
+
+    providers.forEach((requestedProvider) => {
+      // There are two types of provider we get, the first one is only passing the wallet name
+      // then we will match the wallet name with our providers (@rango-dev/provider-*).
+      // The second way is passing a custom provider which implemented ProviderInterface.
+      if (typeof requestedProvider === 'string') {
+        const result: ProviderInterface | undefined = all.find((provider) => {
+          return provider.config.type === requestedProvider;
+        });
+        if (result) {
+          selectedProviders.push(result);
+        } else {
+          console.warn(
+            `Couldn't find ${requestedProvider} provider. Please make sure you are passing the correct name.`
+          );
+        }
+      } else {
+        // It's a custom provider so we directly push it to the list.
+        selectedProviders.push(requestedProvider);
+      }
+    });
+    return selectedProviders;
+  }
+
+  return all;
+}
+
+export function configWalletsToWalletName(
+  config: WidgetConfig['wallets']
+): string[] {
+  const providers = matchAndGenerateProviders(config);
+  const names = providers.map((provider) => {
+    return provider.config.type;
+  });
+  return names;
+}

package/dist/mockData/pendingSwap.d.ts

@@ -1,2 +0,0 @@
-export declare const pendingSwap: any;
-//# sourceMappingURL=pendingSwap.d.ts.map

package/dist/mockData/pendingSwap.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pendingSwap.d.ts","sourceRoot":"","sources":["../../src/mockData/pendingSwap.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,WAAW,EAAE,GA6lBzB,CAAC"}