@rango-dev/widget-embedded 0.36.1-next.14 → 0.36.1-next.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.36.1-next.14",
+  "version": "0.36.1-next.16",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.6.0",
-    "@rango-dev/provider-all": "^0.40.1-next.6",
+    "@rango-dev/provider-all": "^0.40.1-next.8",
     "@rango-dev/queue-manager-core": "^0.27.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.40.1-next.5",
+    "@rango-dev/queue-manager-rango-preset": "^0.40.1-next.6",
     "@rango-dev/queue-manager-react": "^0.27.0",
     "@rango-dev/signer-solana": "^0.35.1-next.0",
-    "@rango-dev/ui": "^0.42.1-next.10",
-    "@rango-dev/wallets-core": "^0.40.1-next.5",
-    "@rango-dev/wallets-react": "^0.26.1-next.6",
-    "@rango-dev/wallets-shared": "^0.40.1-next.5",
+    "@rango-dev/ui": "^0.42.1-next.11",
+    "@rango-dev/wallets-core": "^0.40.1-next.8",
+    "@rango-dev/wallets-react": "^0.26.1-next.9",
+    "@rango-dev/wallets-shared": "^0.40.1-next.6",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/hooks/useWalletList.ts

@@ -22,8 +22,6 @@ import {
 
 import { useStatefulConnect } from './useStatefulConnect/useStatefulConnect';
 
-const ALL_SUPPORTED_WALLETS = Object.values(WalletTypes);
-
 interface Params {
   chain?: string;
 }
@@ -42,20 +40,22 @@ interface API {
  */
 export function useWalletList(params?: Params): API {
   const { chain } = params || {};
-  const { config, connectedWallets } = useAppStore();
+  const { config, connectedWallets, getAvailableProviders } = useAppStore();
   const { state, getWalletInfo } = useWallets();
   const blockchains = useAppStore().blockchains();
   const { handleDisconnect } = useStatefulConnect();
 
   /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
-  const listAvailableWalletTypes =
-    configWalletsToWalletName(config?.wallets, {
+  const listAvailableWalletTypes = configWalletsToWalletName(
+    getAvailableProviders(),
+    {
       trezorManifest: config?.trezorManifest,
       walletConnectProjectId: config?.walletConnectProjectId,
       walletConnectListedDesktopWalletLink:
         config.__UNSTABLE_OR_INTERNAL__?.walletConnectListedDesktopWalletLink,
       tonConnect: config.tonConnect,
-    }) || ALL_SUPPORTED_WALLETS;
+    }
+  );
 
   let wallets = mapWalletTypesToWalletInfo(
     state,

package/src/hooks/useWalletProviders/useWalletProviders.ts

@@ -4,27 +4,27 @@ import type { ProvidersOptions } from '../../utils/providers';
 import { useEffect } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
-import { matchAndGenerateProviders } from '../../utils/providers';
 
 import { hashProviders } from './useWalletProviders.helpers';
 
 export function useWalletProviders(
-  providers: WidgetConfig['wallets'],
+  configWallets: WidgetConfig['wallets'],
   options?: ProvidersOptions
 ) {
-  const { clearConnectedWallet } = useAppStore();
-  let generateProviders = matchAndGenerateProviders(providers, options);
+  const { clearConnectedWallet, getAvailableProviders, buildAndSetProviders } =
+    useAppStore();
+  const providers = getAvailableProviders();
 
   useEffect(() => {
     clearConnectedWallet();
-    generateProviders = matchAndGenerateProviders(providers, options);
+    buildAndSetProviders();
   }, [
-    hashProviders(providers ?? []),
+    hashProviders(configWallets ?? []),
     options?.walletConnectProjectId,
     options?.walletConnectListedDesktopWalletLink,
   ]);
 
   return {
-    providers: generateProviders,
+    providers,
   };
 }

package/src/store/slices/config.ts

@@ -3,9 +3,31 @@ import type { SettingsSlice } from './settings';
 import type { WidgetConfig } from '../../types';
 import type { StateCreatorWithInitialData } from '../app';
 
+import { allProviders as getAllProviders } from '@rango-dev/provider-all';
+import { type VersionedProviders } from '@rango-dev/wallets-core';
+
 import { cacheService } from '../../services/cacheService';
+import {
+  matchAndGenerateProviders,
+  type ProvidersOptions,
+} from '../../utils/providers';
 import { matchTokensFromConfigWithMeta } from '../utils';
 
+function makeProvidersOptionsFromConfig(
+  config: WidgetConfig
+): ProvidersOptions {
+  const options: ProvidersOptions = {
+    walletConnectProjectId: config?.walletConnectProjectId,
+    trezorManifest: config?.trezorManifest,
+    tonConnect: config?.tonConnect,
+    walletConnectListedDesktopWalletLink:
+      config.__UNSTABLE_OR_INTERNAL__?.walletConnectListedDesktopWalletLink,
+    experimentalWallet: config.features?.experimentalWallet,
+  };
+
+  return options;
+}
+
 export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
   title: undefined,
@@ -61,6 +83,31 @@ export interface ConfigSlice {
     name: K,
     value: IframeConfigs[K]
   ) => void;
+  allProviders: VersionedProviders[];
+  buildAndSetProviders: () => void;
+  getAvailableProviders: () => VersionedProviders[];
+}
+
+function generateProviders(config: WidgetConfig) {
+  const options = makeProvidersOptionsFromConfig(config);
+  const envs = {
+    walletconnect2: {
+      WC_PROJECT_ID: options?.walletConnectProjectId || '',
+      DISABLE_MODAL_AND_OPEN_LINK:
+        options?.walletConnectListedDesktopWalletLink,
+    },
+    selectedProviders: config.wallets,
+    trezor: options?.trezorManifest
+      ? { manifest: options.trezorManifest }
+      : undefined,
+    tonConnect: options?.tonConnect?.manifestUrl
+      ? { manifestUrl: options?.tonConnect.manifestUrl }
+      : undefined,
+  };
+  const allProviders = getAllProviders(envs);
+  const allBuiltProviders = allProviders.map((build) => build());
+
+  return allBuiltProviders;
 }
 
 export const createConfigSlice: StateCreatorWithInitialData<
@@ -68,10 +115,15 @@ export const createConfigSlice: StateCreatorWithInitialData<
   ConfigSlice & SettingsSlice & DataSlice,
   ConfigSlice
 > = (initialData, set, get) => {
+  const allBuiltProviders = generateProviders({
+    ...DEFAULT_CONFIG,
+    ...initialData,
+  });
   return {
     config: { ...DEFAULT_CONFIG, ...initialData },
     iframe: DEFAULT_IFRAME_CONFIGS,
     campaignMode: DEFAULT_CAMPAIGN_MODE,
+    allProviders: allBuiltProviders,
     getLiquiditySources: () => {
       const { config, campaignMode } = get();
       return campaignMode.liquiditySources?.length
@@ -162,5 +214,26 @@ export const createConfigSlice: StateCreatorWithInitialData<
         },
       });
     },
+
+    buildAndSetProviders: () => {
+      const { config } = get();
+      const allBuiltProviders = generateProviders(config);
+
+      set({
+        allProviders: allBuiltProviders,
+      });
+    },
+
+    getAvailableProviders: () => {
+      const { allProviders, config } = get();
+      const options = makeProvidersOptionsFromConfig(config);
+
+      const availableProviders = matchAndGenerateProviders({
+        allProviders,
+        configWallets: config.wallets,
+        options,
+      });
+      return availableProviders;
+    },
   };
 };

package/src/store/slices/data.test.ts

@@ -1,3 +1,4 @@
+import type { WidgetConfig } from '../../types';
 import type { AppStoreState } from '../app';
 import type { EvmBlockchainMeta, Token } from 'rango-sdk';
 
@@ -17,6 +18,27 @@ let appStoreState: AppStoreState;
 let customTokens: [Token, Token, Token];
 let rangoBlockchain: EvmBlockchainMeta;
 
+const DEFAULT_CONFIG: WidgetConfig = {
+  apiKey: '',
+  walletConnectProjectId: 'e24844c5deb5193c1c14840a7af6a40b',
+  title: undefined,
+  multiWallets: true,
+  excludeLiquiditySources: true,
+  customDestination: true,
+  variant: 'default',
+  trezorManifest: {
+    appUrl: 'https://widget.rango.exchange/',
+    email: 'hi+trezorwidget@rango.exchange',
+  },
+  tonConnect: {
+    manifestUrl:
+      'https://raw.githubusercontent.com/rango-exchange/rango-types/main/assets/manifests/tonconnect-manifest.json',
+  },
+  features: {
+    experimentalWallet: 'enabled',
+  },
+};
+
 beforeEach(() => {
   cacheService.clear();
   rangoBlockchain = createEvmBlockchain();
@@ -60,7 +82,7 @@ beforeEach(() => {
     initData._tokensMapByBlockchainName[token.blockchain].push(tokenHash);
   });
 
-  const appStore = createAppStore();
+  const appStore = createAppStore(DEFAULT_CONFIG);
   appStore.setState(initData);
   appStoreState = appStore.getState();
 });

package/src/utils/providers.ts

@@ -1,7 +1,6 @@
 import type { WidgetConfig } from '../types';
 import type { LegacyProviderInterface } from '@rango-dev/wallets-core/legacy';
 
-import { allProviders } from '@rango-dev/provider-all';
 import {
   defineVersions,
   pickVersion,
@@ -26,42 +25,30 @@ export interface ProvidersOptions {
  *
  */
 type BothProvidersInterface = LegacyProviderInterface | Provider;
-export function matchAndGenerateProviders(
-  providers: WidgetConfig['wallets'],
-  options?: ProvidersOptions
-): VersionedProviders[] {
-  const envs = {
-    walletconnect2: {
-      WC_PROJECT_ID: options?.walletConnectProjectId || '',
-      DISABLE_MODAL_AND_OPEN_LINK:
-        options?.walletConnectListedDesktopWalletLink,
-    },
-    selectedProviders: providers,
-    trezor: options?.trezorManifest
-      ? { manifest: options.trezorManifest }
-      : undefined,
-    tonConnect: options?.tonConnect?.manifestUrl
-      ? { manifestUrl: options?.tonConnect.manifestUrl }
-      : undefined,
-  };
-
-  const all = allProviders(envs);
-
-  if (providers) {
+export function matchAndGenerateProviders({
+  allProviders,
+  configWallets,
+  options,
+}: {
+  allProviders: VersionedProviders[];
+  configWallets: WidgetConfig['wallets'];
+  options?: ProvidersOptions;
+}): VersionedProviders[] {
+  if (configWallets) {
     /*
      * If `wallets`  is included in widget config,
      * allProviders should be filtered based on wallets list
      */
     const selectedProviders: VersionedProviders[] = [];
 
-    providers.forEach((requestedProvider) => {
+    configWallets.forEach((requestedWallet) => {
       /*
        * 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 = all.find((provider) => {
+      if (typeof requestedWallet === 'string') {
+        const result = allProviders.find((provider) => {
           /*
            * To find a provider in allProviders,
            * a version of each provider should be picked
@@ -74,9 +61,9 @@ export function matchAndGenerateProviders(
             options
           );
           if (versionedProvider instanceof Provider) {
-            return versionedProvider.id === requestedProvider;
+            return versionedProvider.id === requestedWallet;
           }
-          return versionedProvider.config.type === requestedProvider;
+          return versionedProvider.config.type === requestedWallet;
         });
 
         /*
@@ -86,20 +73,21 @@ export function matchAndGenerateProviders(
          */
         if (result) {
           selectedProviders.push(result);
+        } else {
+          console.warn(
+            // A provider name is included in config but was not found in allProviders
+            `Couldn't find ${requestedWallet} provider. Please make sure you are passing the correct name.`
+          );
         }
-        console.warn(
-          // A provider name is included in config but was not found in allProviders
-          `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.
-        if (requestedProvider instanceof Provider) {
+        if (requestedWallet instanceof Provider) {
           selectedProviders.push(
-            defineVersions().version('1.0.0', requestedProvider).build()
+            defineVersions().version('1.0.0', requestedWallet).build()
           );
         } else {
           selectedProviders.push(
-            defineVersions().version('0.0.0', requestedProvider).build()
+            defineVersions().version('0.0.0', requestedWallet).build()
           );
         }
       }
@@ -108,7 +96,7 @@ export function matchAndGenerateProviders(
     return selectedProviders;
   }
 
-  return all;
+  return allProviders;
 }
 
 function pickProviderVersionWithFallbackToLegacy(
@@ -127,17 +115,18 @@ function pickProviderVersionWithFallbackToLegacy(
 }
 
 export function configWalletsToWalletName(
-  config: WidgetConfig['wallets'],
+  providers: VersionedProviders[],
   options?: ProvidersOptions
 ): string[] {
-  const providers = matchAndGenerateProviders(config, options).map((provider) =>
-    pickProviderVersionWithFallbackToLegacy(provider, options)
-  );
-  const names = providers.map((provider) => {
-    if (provider instanceof Provider) {
-      return provider.id;
-    }
-    return provider.config.type;
-  });
+  const names = providers
+    .map((provider) =>
+      pickProviderVersionWithFallbackToLegacy(provider, options)
+    )
+    .map((provider) => {
+      if (provider instanceof Provider) {
+        return provider.id;
+      }
+      return provider.config.type;
+    });
   return names;
 }