@rango-dev/widget-embedded 0.39.0 → 0.39.1-next.1

package/src/store/app.ts

@@ -1,6 +1,4 @@
-import type { ConfigSlice } from './slices/config';
-import type { DataSlice } from './slices/data';
-import type { SettingsSlice } from './slices/settings';
+import type { AppStoreState } from './slices/types';
 import type { WidgetConfig } from '../types';
 import type { StateCreator } from 'zustand';
 
@@ -10,6 +8,7 @@ import { persist } from 'zustand/middleware';
 import { createConfigSlice } from './slices/config';
 import { createDataSlice } from './slices/data';
 import { createSettingsSlice } from './slices/settings';
+import { createWalletsSlice } from './slices/wallets';
 
 export type StateCreatorWithInitialData<
   T extends Partial<WidgetConfig>,
@@ -20,12 +19,13 @@ export type StateCreatorWithInitialData<
   ...rest: Parameters<StateCreator<R, [], [], V>>
 ) => ReturnType<StateCreator<R, [], [], V>>;
 
-export type AppStoreState = DataSlice & ConfigSlice & SettingsSlice;
+export type { AppStoreState };
 
 export function createAppStore(initialData?: WidgetConfig) {
   return create<AppStoreState>()(
     persist(
       (...a) => ({
+        ...createWalletsSlice(...a),
         ...createDataSlice(...a),
         ...createSettingsSlice(...a),
         ...createConfigSlice(initialData, ...a),

package/src/store/quote.ts

@@ -21,11 +21,7 @@ import {
   WidgetEvents,
 } from '../types';
 import { isPositiveNumber } from '../utils/numbers';
-import {
-  getQuoteFromTokenUsdPrice,
-  getQuoteToTokenUsdPrice,
-} from '../utils/quote';
-import { calcOutputUsdValue } from '../utils/swap';
+import { getUsdInputFrom, getUsdOutputFrom } from '../utils/swap';
 
 import createSelectors from './selectors';
 
@@ -137,14 +133,8 @@ export const useQuoteStore = createSelectors(
             outputAmount = !!quote?.outputAmount
               ? new BigNumber(quote?.outputAmount)
               : null;
-            inputUsdValue = calcOutputUsdValue(
-              state.inputAmount,
-              getQuoteFromTokenUsdPrice(quote) || state.fromToken?.usdPrice
-            );
-            outputUsdValue = calcOutputUsdValue(
-              quote.outputAmount,
-              getQuoteToTokenUsdPrice(quote) || state.toToken?.usdPrice
-            );
+            inputUsdValue = getUsdInputFrom(quote) ?? ZERO;
+            outputUsdValue = getUsdOutputFrom(quote) ?? ZERO;
           }
           return {
             selectedQuote: quote,

package/src/store/slices/config.ts

@@ -3,9 +3,30 @@ 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,
+  };
+
+  return options;
+}
+
 export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
   title: undefined,
@@ -58,6 +79,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<
@@ -65,10 +111,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
@@ -159,5 +210,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,24 @@ 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',
+  },
+};
+
 beforeEach(() => {
   cacheService.clear();
   rangoBlockchain = createEvmBlockchain();
@@ -60,7 +79,7 @@ beforeEach(() => {
     initData._tokensMapByBlockchainName[token.blockchain].push(tokenHash);
   });
 
-  const appStore = createAppStore();
+  const appStore = createAppStore(DEFAULT_CONFIG);
   appStore.setState(initData);
   appStoreState = appStore.getState();
 });

package/src/store/slices/data.ts

@@ -348,8 +348,9 @@ export const createDataSlice: StateCreator<
         {};
       const tokens: Token[] = [];
       const popularTokens: Token[] = response.popularTokens;
-      const swappers: SwapperMeta[] = response.swappers;
-
+      const swappers: SwapperMeta[] = response.swappers.filter(
+        (swapper) => swapper.enabled
+      );
       const blockchainsWithAtLeastOneToken = new Set();
 
       response.tokens.forEach((token) => {

package/src/store/slices/types.ts

@@ -0,0 +1,9 @@
+import type { ConfigSlice } from './config';
+import type { DataSlice } from './data';
+import type { SettingsSlice } from './settings';
+import type { WalletsSlice } from './wallets';
+
+export type AppStoreState = DataSlice &
+  ConfigSlice &
+  SettingsSlice &
+  WalletsSlice;