@rango-dev/widget-embedded 0.30.1-next.1 → 0.30.1-next.11

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

@@ -0,0 +1,175 @@
+import type { Token } from 'rango-sdk';
+
+import { describe, expect, test } from 'vitest';
+
+import { createToken } from '../../test-utils/fixtures';
+import { createTokenHash } from '../../utils/meta';
+
+import { matchTokensFromConfigWithMeta } from './data'; // Adjust path as necessary
+
+type MatchTokensFromConfigWithMetaParam = Parameters<
+  typeof matchTokensFromConfigWithMeta
+>[0];
+
+const BLOCKCHAIN_A = 'blockchainA';
+const BLOCKCHAIN_B = 'blockchainB';
+const BLOCKCHAIN_C = 'blockchainC';
+
+const tokens: Token[] = [
+  { ...createToken(), blockchain: BLOCKCHAIN_A },
+  { ...createToken(), blockchain: BLOCKCHAIN_A },
+  { ...createToken(), blockchain: BLOCKCHAIN_B },
+  { ...createToken(), blockchain: BLOCKCHAIN_C },
+];
+
+function createMetaForMockData(
+  tokens: Token[]
+): MatchTokensFromConfigWithMetaParam['meta'] {
+  const meta: MatchTokensFromConfigWithMetaParam['meta'] = {
+    tokensMapByTokenHash: new Map(),
+    tokensMapByBlockchainName: {},
+  };
+  tokens.forEach((token) => {
+    const tokenHash = createTokenHash(token);
+    meta.tokensMapByTokenHash.set(tokenHash, token);
+    if (!meta.tokensMapByBlockchainName[token.blockchain]) {
+      meta.tokensMapByBlockchainName[token.blockchain] = [];
+    }
+    meta.tokensMapByBlockchainName[token.blockchain].push(tokenHash);
+  });
+
+  return meta;
+}
+
+describe('matchTokensFromConfigWithMeta', () => {
+  test('should include tokens from config.tokens array that exist in meta', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: undefined,
+        tokens: [tokens[0], tokens[1]],
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([tokens[0], tokens[1]]);
+  });
+
+  test('If config.blockchains is not defined or is empty, we should include all tokens from the meta for every blockchain that does not have tokens specified in the config, as well as tokens specified in the config that exist in the meta.', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: undefined,
+        tokens: {
+          [BLOCKCHAIN_A]: { tokens: [tokens[0]], isExcluded: false },
+        },
+      },
+    };
+
+    const runTestWithConfig = (config: {
+      blockchains: MatchTokensFromConfigWithMetaParam['config']['blockchains'];
+    }) => {
+      mockData.config.blockchains = config.blockchains;
+      const result = matchTokensFromConfigWithMeta(mockData);
+      /**
+       * In this case, the result might differ from what was expected.
+       * To pass the test, we reordered the expected result.
+       * Changing the order of tokens does not impact the overall behavior of our app,
+       * as we have a comprehensive sorting logic applied to tokens within the data slice.
+       */
+      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      expect(result).toEqual([tokens[2], tokens[3], tokens[0]]);
+    };
+
+    runTestWithConfig({ blockchains: undefined });
+    runTestWithConfig({ blockchains: [] });
+  });
+
+  test('should include tokens from config.tokens object that exist in meta', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [BLOCKCHAIN_A, BLOCKCHAIN_B],
+        tokens: {
+          [BLOCKCHAIN_A]: { tokens: [tokens[0]], isExcluded: false },
+          [BLOCKCHAIN_B]: { tokens: [tokens[2]], isExcluded: false },
+        },
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([tokens[0], tokens[2]]);
+  });
+
+  test('should not include tokens from config.tokens whose blockchain does not exist in config.blockchains', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [BLOCKCHAIN_A],
+        tokens: {
+          [BLOCKCHAIN_B]: { tokens: [tokens[2]], isExcluded: false },
+        },
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([tokens[0], tokens[1]]);
+  });
+
+  test('should include all tokens from a blockchain if that blockchain does not have any tokens in config.tokens', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [BLOCKCHAIN_A],
+        tokens: {},
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([tokens[0], tokens[1]]);
+  });
+
+  test('should include all tokens from config.blockchains that exist in the meta, except tokens excluded in config.token', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [BLOCKCHAIN_A],
+        tokens: {
+          [BLOCKCHAIN_A]: { tokens: [tokens[0]], isExcluded: true },
+        },
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([tokens[1]]);
+  });
+
+  test('should include all tokens from the meta when config parameters are empty values', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [],
+        tokens: {},
+      },
+    };
+
+    const runTestWithConfig = (
+      config: MatchTokensFromConfigWithMetaParam['config']
+    ) => {
+      mockData.config = config;
+      const result = matchTokensFromConfigWithMeta(mockData);
+      expect(result).toEqual(tokens);
+    };
+
+    runTestWithConfig({ blockchains: [], tokens: {} });
+    runTestWithConfig({ blockchains: undefined, tokens: undefined });
+    runTestWithConfig({ blockchains: [], tokens: [] });
+  });
+});

package/src/store/utils/data.ts

@@ -0,0 +1,117 @@
+import type { BlockchainAndTokenConfig, TokenHash } from '../../types';
+import type { DataSlice } from '../slices/data';
+import type { Asset, Token } from 'rango-sdk';
+
+import { createTokenHash } from '../../utils/meta';
+
+/**
+ * This function retrieves tokens and blockchains from the widget configuration and combines them with token data from the meta response to determine which tokens should be displayed in the widget.
+ * To optimize performance, the function minimizes unnecessary iterations over the meta tokens.
+ * The result of this function should be cached and recalculated whenever the widget configuration changes.
+ */
+export function matchTokensFromConfigWithMeta(params: {
+  type: 'source' | 'destination';
+  config: {
+    blockchains: BlockchainAndTokenConfig['blockchains'];
+    tokens: BlockchainAndTokenConfig['tokens'];
+  };
+  meta: {
+    tokensMapByTokenHash: DataSlice['_tokensMapByTokenHash'];
+    tokensMapByBlockchainName: DataSlice['_tokensMapByBlockchainName'];
+  };
+}): Token[] {
+  const { config, meta } = params;
+  const result: Record<TokenHash, Token> = {};
+  const configTokens = config.tokens;
+
+  // Helper function to add tokens to result
+  const addTokens = (tokens: (Asset | TokenHash)[]) => {
+    tokens.forEach((item) => {
+      if (typeof item !== 'string') {
+        item = createTokenHash(item);
+      }
+      const tokenFromMeta = meta.tokensMapByTokenHash.get(item);
+      if (tokenFromMeta) {
+        result[item] = tokenFromMeta;
+      }
+    });
+  };
+
+  /**
+   * We support two types of configurations for passing tokens in the widget config.
+   * We check the type of configuration and calculate the result based on that.
+   */
+  if (Array.isArray(configTokens)) {
+    /**
+     * If "config.tokens" is an array,
+     * we iterate through it and include any token that exists in the meta data in the result.
+     */
+    if (configTokens.length > 0) {
+      addTokens(configTokens);
+      return Object.values(result);
+    }
+    return Array.from(meta.tokensMapByTokenHash.values());
+  }
+
+  /**
+   * From this point onward,
+   * the function handles the other type of widget configuration.
+   */
+  if (!configTokens) {
+    return Array.from(meta.tokensMapByTokenHash.values());
+  }
+
+  let configBlockchains: string[];
+
+  if (config.blockchains?.length) {
+    configBlockchains = config.blockchains;
+  } else {
+    /**
+     * If config.blockchains does not exist,
+     * we include all tokens from every blockchain in the meta data that are not specified in the tokens from the config.
+     */
+    configBlockchains = Object.keys(configTokens);
+    const configBlockchainsSet = new Set(configBlockchains);
+
+    Object.keys(meta.tokensMapByBlockchainName).forEach((blockchain) => {
+      if (!configBlockchainsSet.has(blockchain)) {
+        addTokens(meta.tokensMapByBlockchainName[blockchain]);
+      }
+    });
+  }
+  //We iterate over each blockchain and retrieve the related tokens for each one from the configuration.
+  configBlockchains.forEach((blockchain) => {
+    const targetTokensForBlockchain = configTokens[blockchain];
+    /**
+     * If no tokens exist for a blockchain,
+     * we include all tokens for that blockchain from the meta response.
+     */
+    if (
+      !targetTokensForBlockchain &&
+      meta.tokensMapByBlockchainName?.[blockchain]
+    ) {
+      addTokens(meta.tokensMapByBlockchainName[blockchain]);
+      return;
+    }
+
+    if (targetTokensForBlockchain) {
+      if (targetTokensForBlockchain.isExcluded) {
+        /**
+         * If tokens are excluded,
+         * we first include all tokens from the meta for that blockchain,
+         * then remove the excluded tokens from the result.
+         */
+        addTokens(meta.tokensMapByBlockchainName[blockchain]);
+        targetTokensForBlockchain.tokens.forEach((token) => {
+          const tokenHash = createTokenHash(token);
+          delete result[tokenHash];
+        });
+      } else {
+        //We retrieve the corresponding token from the meta and include it in the result.
+        addTokens(targetTokensForBlockchain.tokens);
+      }
+    }
+  });
+
+  return Object.values(result);
+}

package/src/store/utils/index.ts

@@ -0,0 +1 @@
+export * from './data';

package/src/test-utils/fixtures.ts

@@ -1,5 +1,5 @@
 import type { AppStoreState } from '../store/app';
-import type { TokenHash, WidgetConfig } from '../types';
+import type { Blockchain, TokenHash, WidgetConfig } from '../types';
 import type { BlockchainMeta, EvmBlockchainMeta, Token } from 'rango-sdk';
 
 import { faker } from '@faker-js/faker';
@@ -231,13 +231,20 @@ export function createInitialAppStore() {
     blockchains: blockchains.map((b) => b.name),
   });
 
+  const tokensMapByTokenHash: Map<TokenHash, Token> = new Map();
+  const tokensMapByBlockchainName: Record<Blockchain, TokenHash[]> = {};
+  tokens.forEach((token) => {
+    const tokenHash = createTokenHash(token);
+    if (!tokensMapByBlockchainName[token.blockchain]) {
+      tokensMapByBlockchainName[token.blockchain] = [];
+    }
+    tokensMapByTokenHash.set(tokenHash, token);
+    tokensMapByBlockchainName[token.blockchain].push(tokenHash);
+  });
+
   return {
-    _tokensMapByTokenHash: new Map<TokenHash, Token>(
-      tokens.map((token) => {
-        const tokenHash = createTokenHash(token);
-        return [tokenHash, token];
-      })
-    ),
+    _tokensMapByTokenHash: tokensMapByTokenHash,
+    _tokensMapByBlockchainName: tokensMapByBlockchainName,
     _blockchainsMapByName: new Map<string, BlockchainMeta>(
       blockchains.map((meta) => [meta.name, meta])
     ),

package/src/types/config.ts

@@ -179,6 +179,8 @@ export type TrezorManifest = {
  * @property {boolean} customDestination - A boolean value indicating whether the user can input a custom
  * address for the transaction. If set to true, the widget will allow the user to input a custom
  * address for the destination.
+ * @property {{[blockchain: string]: string }} defaultCustomDestinations - The `defaultCustomDestinations` property is a map of supported `blockchain` names to an arbitrary blockchain address.
+ * You could use it to set a default custom destination for some blockchains.  e.g. {'BSC': '0x2be.....c1','ETH': '0x2be.....c1'}
  * @property {string} language - The language property is an optional string that specifies the
  * default language in which the widget should be displayed. If not provided, the widget will default to the
  * language of the user's browser.
@@ -219,6 +221,7 @@ export type WidgetConfig = {
   wallets?: (WalletType | ProviderInterface)[];
   multiWallets?: boolean;
   customDestination?: boolean;
+  defaultCustomDestinations?: { [blockchain: string]: string };
   language?: Language;
   theme?: WidgetTheme;
   externalWallets?: boolean;
@@ -227,7 +230,6 @@ export type WidgetConfig = {
   variant?: WidgetVariant;
   enableCentralizedSwappers?: boolean;
   signers?: SignersConfig;
-
   // These are likely to change or remove at anytime. Please use with a caution.
   __UNSTABLE_OR_INTERNAL__?: {
     walletConnectListedDesktopWalletLink?: string;

package/src/types/event.ts

@@ -7,6 +7,17 @@ import type {
 
 import { WidgetEvents as QueueManagerEvents } from '@rango-dev/queue-manager-rango-preset';
 
+type EventData<
+  T extends QuoteEventTypes | WalletEventTypes | UiEventTypes,
+  U extends Record<string, unknown> | null
+> = { type: T; payload: U };
+
+export type PreventableEventPayload<
+  T extends Record<string, unknown> = Record<string, unknown>
+> = {
+  preventDefault: () => void;
+} & T;
+
 type Account = Wallet;
 
 export enum QuoteEventTypes {
@@ -19,6 +30,14 @@ export enum WalletEventTypes {
   DISCONNECT = 'disconnect',
 }
 
+/**
+ * We use a prefix for interaction type and a name for defining the event name: INTERACTION_EVENT_NAME
+ * e.g. CLICK_X_BUTTON or NAVIGATE_WALLET_PAGE
+ */
+export enum UiEventTypes {
+  CLICK_CONNECT_WALLET = 'clickConnectWallet',
+}
+
 export type QuoteInputUpdateEventPayload = {
   fromBlockchain?: string;
   toBlockchain?: string;
@@ -41,31 +60,27 @@ export type DisconnectWalletEventPayload = {
   walletType: string;
 };
 
+export type ClickConnectWalletPayload = PreventableEventPayload;
+
 export type QuoteEventData =
-  | {
-      type: QuoteEventTypes.QUOTE_INPUT_UPDATE;
-      payload: QuoteInputUpdateEventPayload;
-    }
-  | {
-      type: QuoteEventTypes.QUOTE_OUTPUT_UPDATE;
-      payload: QuoteUpdateEventPayload;
-    };
+  | EventData<QuoteEventTypes.QUOTE_INPUT_UPDATE, QuoteInputUpdateEventPayload>
+  | EventData<QuoteEventTypes.QUOTE_OUTPUT_UPDATE, QuoteUpdateEventPayload>;
 
 export type WalletEventData =
-  | {
-      type: WalletEventTypes.CONNECT;
-      payload: ConnectWalletEventPayload;
-    }
-  | {
-      type: WalletEventTypes.DISCONNECT;
-      payload: DisconnectWalletEventPayload;
-    };
+  | EventData<WalletEventTypes.CONNECT, ConnectWalletEventPayload>
+  | EventData<WalletEventTypes.DISCONNECT, DisconnectWalletEventPayload>;
+
+export type UiEventData = EventData<
+  UiEventTypes.CLICK_CONNECT_WALLET,
+  ClickConnectWalletPayload
+>;
 
 export enum WidgetEvents {
   RouteEvent = QueueManagerEvents.RouteEvent,
   StepEvent = QueueManagerEvents.StepEvent,
   QuoteEvent = 'quoteEvent',
   WalletEvent = 'walletEvent',
+  UiEvent = 'uiEvent',
 }
 
 export type Events = {
@@ -73,6 +88,7 @@ export type Events = {
   [WidgetEvents.StepEvent]: StepEventData;
   [WidgetEvents.QuoteEvent]: QuoteEventData;
   [WidgetEvents.WalletEvent]: WalletEventData;
+  [WidgetEvents.UiEvent]: UiEventData;
 };
 
 declare type EventHandler<T = unknown> = (event: T) => void;

package/src/types/notification.ts

@@ -6,6 +6,7 @@ import {
 } from '@rango-dev/queue-manager-rango-preset';
 
 type NotificationRoute = {
+  creationTime: number;
   from: {
     blockchain: Step['fromBlockchain'];
     symbol: Step['fromSymbol'];

package/src/types/wallets.ts

@@ -13,7 +13,7 @@ export type Balance = {
   usdValue: string;
 };
 
-type Blockchain = string;
+export type Blockchain = string;
 type TokenSymbol = string;
 type Address = string;
 

package/src/utils/events.ts

@@ -0,0 +1,27 @@
+import { eventEmitter } from '../services/eventEmitter';
+import { type UiEventData, WidgetEvents } from '../types';
+
+type UiEvent = {
+  type: UiEventData['type'];
+  payload?: Omit<UiEventData['payload'], 'preventDefault'>;
+};
+
+export function emitPreventableEvent(event: UiEvent, action: () => void): void {
+  let defaultPrevented = false;
+
+  const extendedPayload = {
+    preventDefault() {
+      defaultPrevented = true;
+    },
+    ...(event.payload === undefined && { payload: event.payload }),
+  };
+
+  eventEmitter.emit(WidgetEvents.UiEvent, {
+    type: event.type,
+    payload: extendedPayload,
+  });
+
+  if (!defaultPrevented) {
+    action();
+  }
+}

package/src/utils/swap.ts

@@ -722,7 +722,7 @@ export function shouldRetrySwap(pendingSwap: PendingSwap) {
 
 export function isConfirmSwapDisabled(
   fetching: boolean,
-  showCustomDestination: boolean,
+  isCustomDestinationOpen: boolean,
   customDestination: string | null,
   quote: SelectedQuote | null,
   selectedWallets: { walletType: string; chain: string }[],
@@ -752,9 +752,9 @@ export function isConfirmSwapDisabled(
       : false;
 
   return (
-    (!showCustomDestination && !everyWalletSelected) ||
-    (showCustomDestination && !customDestination) ||
-    (showCustomDestination &&
+    (!isCustomDestinationOpen && !everyWalletSelected) ||
+    (isCustomDestinationOpen && !customDestination) ||
+    (isCustomDestinationOpen &&
       !!customDestination &&
       (!customDestinationIsValid || !everyRequiredWalletSelected))
   );