@rango-dev/widget-embedded 0.17.1-next.2 → 0.17.1-next.20

package/src/store/slices/config.ts

@@ -1,7 +1,11 @@
 import type { WidgetConfig } from '../../types';
-import type { StateCreator } from 'zustand';
+import type { StateCreatorWithInitialData } from '../app';
 
-const initConfig: WidgetConfig = { apiKey: '' };
+export const DEFAULT_CONFIG: WidgetConfig = {
+  apiKey: '',
+  multiWallets: true,
+  enableNewLiquiditySources: true,
+};
 
 export type ConfigSlice = {
   config: WidgetConfig;
@@ -9,18 +13,24 @@ export type ConfigSlice = {
   updateConfig: (config: WidgetConfig) => void;
 };
 
-export const createConfigSlice: StateCreator<ConfigSlice> = (set, get) => ({
-  config: initConfig,
+export const createConfigSlice: StateCreatorWithInitialData<
+  WidgetConfig,
+  ConfigSlice,
+  ConfigSlice
+> = (initialData, set, get) => {
+  return {
+    config: { ...DEFAULT_CONFIG, ...initialData },
 
-  // Actions
-  updateConfig: (nextConfig: WidgetConfig) => {
-    const currentConfig = get().config;
+    // Actions
+    updateConfig: (nextConfig: WidgetConfig) => {
+      const currentConfig = get().config;
 
-    set({
-      config: {
-        ...currentConfig,
-        ...nextConfig,
-      },
-    });
-  },
-});
+      set({
+        config: {
+          ...currentConfig,
+          ...nextConfig,
+        },
+      });
+    },
+  };
+};

package/src/store/slices/data.ts

@@ -6,6 +6,7 @@ import type { StateCreator } from 'zustand';
 
 import { httpService as sdk } from '../../services/httpService';
 import { containsText } from '../../utils/common';
+import { sortLiquiditySourcesByGroupTitle } from '../../utils/settings';
 import { tokensAreEqual } from '../../utils/wallets';
 
 type BlockchainOptions = {
@@ -18,15 +19,16 @@ type TokenOptions = {
   blockchain?: string;
   searchFor?: string;
 };
-
+export type FetchStatus = 'loading' | 'success' | 'failed';
 export interface DataSlice {
   _blockchains: BlockchainMeta[];
   _tokens: Token[];
   _popularTokens: Token[];
   _swappers: SwapperMeta[];
-
+  fetchStatus: FetchStatus;
   blockchains: (options?: BlockchainOptions) => BlockchainMeta[];
   tokens: (options?: TokenOptions) => Token[];
+  swappers: () => SwapperMeta[];
   isTokenPinned: (token: Token) => boolean;
 
   fetch: () => Promise<void>;
@@ -43,7 +45,7 @@ export const createDataSlice: StateCreator<
   _tokens: [],
   _popularTokens: [],
   _swappers: [],
-
+  fetchStatus: 'loading',
   // Selectors
   blockchains: (options) => {
     const blockchainsFromState = get()._blockchains;
@@ -163,41 +165,74 @@ export const createDataSlice: StateCreator<
     );
     return pinned;
   },
+  swappers: () => {
+    const {
+      config: { enableNewLiquiditySources, liquiditySources },
+    } = get();
+
+    /*
+     * If the enableNewLiquiditySources flag is set to true, we return all swappers that are not included in the config.
+     * Otherwise, we return all swappers that are included in the config.
+     */
+    const swappers = get()._swappers.filter((swapper) => {
+      const swapperGroupIncludedInLiquiditySources = liquiditySources?.includes(
+        swapper.swapperGroup
+      );
+
+      const shouldExcludeLiquiditySources =
+        enableNewLiquiditySources ||
+        !liquiditySources ||
+        liquiditySources.length === 0;
+
+      return shouldExcludeLiquiditySources
+        ? !swapperGroupIncludedInLiquiditySources
+        : swapperGroupIncludedInLiquiditySources;
+    });
+
+    const sortedSwappers = swappers.sort(sortLiquiditySourcesByGroupTitle);
 
+    return sortedSwappers;
+  },
   // Actions
   fetch: async () => {
-    const response = await sdk().getAllMetadata();
+    try {
+      const response = await sdk().getAllMetadata();
 
-    const blockchains: BlockchainMeta[] = [];
-    const tokens: Token[] = [];
-    const popularTokens: Token[] = response.popularTokens;
-    const swappers: SwapperMeta[] = response.swappers;
+      set({ fetchStatus: 'success' });
+      const blockchains: BlockchainMeta[] = [];
+      const tokens: Token[] = [];
+      const popularTokens: Token[] = response.popularTokens;
+      const swappers: SwapperMeta[] = response.swappers;
 
-    const blockchainsWithAtLeastOneToken = new Set();
+      const blockchainsWithAtLeastOneToken = new Set();
 
-    response.tokens.forEach((token) => {
-      blockchainsWithAtLeastOneToken.add(token.blockchain);
+      response.tokens.forEach((token) => {
+        blockchainsWithAtLeastOneToken.add(token.blockchain);
 
-      tokens.push(token);
-    });
+        tokens.push(token);
+      });
 
-    response.blockchains.forEach((blockchain) => {
-      if (
-        blockchain.enabled &&
-        blockchainsWithAtLeastOneToken.has(blockchain.name)
-      ) {
-        blockchains.push(blockchain);
-      }
-    });
+      response.blockchains.forEach((blockchain) => {
+        if (
+          blockchain.enabled &&
+          blockchainsWithAtLeastOneToken.has(blockchain.name)
+        ) {
+          blockchains.push(blockchain);
+        }
+      });
 
-    // Sort
-    blockchains.sort((a, b) => a.sort - b.sort);
+      // Sort
+      blockchains.sort((a, b) => a.sort - b.sort);
 
-    set({
-      _blockchains: blockchains,
-      _tokens: tokens,
-      _popularTokens: popularTokens,
-      _swappers: swappers,
-    });
+      set({
+        _blockchains: blockchains,
+        _tokens: tokens,
+        _popularTokens: popularTokens,
+        _swappers: swappers,
+      });
+    } catch (error) {
+      set({ fetchStatus: 'failed' });
+      throw error;
+    }
   },
 });

package/src/store/wallets.ts

@@ -1,5 +1,6 @@
 import type { Wallet } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
+import type { Token } from 'rango-sdk';
 
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
@@ -11,7 +12,6 @@ import {
   resetConnectedWalletState,
 } from '../utils/wallets';
 
-import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
 export type TokenBalance = {
@@ -38,11 +38,15 @@ interface WalletsStore {
   connectedWallets: ConnectedWallet[];
   customDestination: string;
   loading: boolean;
-  connectWallet: (accounts: Wallet[]) => void;
+  connectWallet: (accounts: Wallet[], tokens: Token[]) => void;
   disconnectWallet: (walletType: WalletType) => void;
   selectWallets: (wallets: { walletType: string; chain: string }[]) => void;
   clearConnectedWallet: () => void;
-  getWalletsDetails: (accounts: Wallet[], shouldRetry?: boolean) => void;
+  getWalletsDetails: (
+    accounts: Wallet[],
+    tokens: Token[],
+    shouldRetry?: boolean
+  ) => void;
 }
 
 export const useWalletsStore = createSelectors(
@@ -51,7 +55,7 @@ export const useWalletsStore = createSelectors(
       connectedWallets: [],
       customDestination: '',
       loading: false,
-      connectWallet: (accounts) => {
+      connectWallet: (accounts, tokens) => {
         const getWalletsDetails = get().getWalletsDetails;
         set((state) => ({
           loading: true,
@@ -77,7 +81,7 @@ export const useWalletsStore = createSelectors(
               })
             ),
         }));
-        getWalletsDetails(accounts);
+        getWalletsDetails(accounts, tokens);
       },
       disconnectWallet: (walletType) => {
         set((state) => {
@@ -135,9 +139,8 @@ export const useWalletsStore = createSelectors(
           connectedWallets: [],
           selectedWallets: [],
         })),
-      getWalletsDetails: async (accounts, shouldRetry = true) => {
+      getWalletsDetails: async (accounts, tokens, shouldRetry = true) => {
         const getWalletsDetails = get().getWalletsDetails;
-        const { tokens } = useMetaStore.getState().meta;
         set((state) => ({
           loading: true,
           connectedWallets: state.connectedWallets.map((wallet) => {
@@ -173,7 +176,7 @@ export const useWalletsStore = createSelectors(
                     matchedAccount &&
                     shouldRetry
                   ) {
-                    getWalletsDetails([matchedAccount], false);
+                    getWalletsDetails([matchedAccount], tokens, false);
                   }
                   return matchedAccount && retrievedBalanceAccount
                     ? {
@@ -183,6 +186,7 @@ export const useWalletsStore = createSelectors(
                           retrievedBalanceAccount,
                           tokens
                         ),
+                        loading: false,
                       }
                     : connectedWallet;
                 }

package/src/types/config.ts

@@ -61,7 +61,7 @@ export type WidgetTheme = {
  * @property {{ [key: string]: string }} wallets - If you want to change the default affiliate wallet
  *  addresses, you can provide new values here. (Map of route blockchains to affiliate address)
  */
-export type WidgeAffiliate = {
+export type WidgetAffiliate = {
   ref?: string;
   percent?: number;
   wallets?: { [key: string]: string };
@@ -85,13 +85,24 @@ export type BlockchainAndTokenConfig = {
   tokens?: Asset[];
 };
 
+/**
+ * `ExperimentalFeatures`
+ *
+ * @property {boolean} routing
+ *- This property is optional and sets experimental in quote api.
+ */
+type ExperimentalFeatures = {
+  routing?: boolean;
+};
+
 /**
  * The type WidgetConfig defines the configuration options for a widget, including API key, affiliate
  * reference, amount, blockchain and token configurations, liquidity sources, wallet types, language,
  * and theme.
  *
  * @property {string} apiKey - The API key used to communicate with Rango API
- * @property {WidgeAffiliate} affiliate - If you want to charge users fee per transaction, you should
+ * @property {string} apiUrl - The API url used to set custom API url
+ * @property {WidgetAffiliate} affiliate - If you want to charge users fee per transaction, you should
  * pass `WidgetAffiliate` including affiliateRef, affiliatePercent, and affiliateWallets.
  * @property {number} amount - The default input amount.
  * @property {BlockchainAndTokenConfig} from - The `from` property is an optional property of type
@@ -121,13 +132,16 @@ export type BlockchainAndTokenConfig = {
  * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
  * @property {Asset} pinnedTokens - The `pinnedTokens` property is an optional array of `Asset` objects that
  * you could use to pin tokens of your choice to the top of the token list.
- * @property {boolean} includeNewLiquiditySources - The `includeNewLiquiditySources` property is a boolean value that when you
+ * @property {boolean} enableNewLiquiditySources - The `enableNewLiquiditySources` property is a boolean value that when you
  * set it to true, whenever a new liquidity source is added, it will be added to your list as well.
+ * @property {ExperimentalFeatures} experimental - The `experimental` property is an optional object that specifies some experimental features.
  */
+
 export type WidgetConfig = {
   apiKey: string;
+  apiUrl?: string;
   walletConnectProjectId?: string;
-  affiliate?: WidgeAffiliate;
+  affiliate?: WidgetAffiliate;
   amount?: number;
   from?: BlockchainAndTokenConfig;
   to?: BlockchainAndTokenConfig;
@@ -139,5 +153,6 @@ export type WidgetConfig = {
   theme?: WidgetTheme;
   externalWallets?: boolean;
   pinnedTokens?: Asset[];
-  includeNewLiquiditySources?: boolean;
+  enableNewLiquiditySources?: boolean;
+  experimental?: ExperimentalFeatures;
 };

package/src/types/index.ts

@@ -1,4 +1,4 @@
 export * from './swap';
 export * from './config';
-export * from './routing';
+export * from './quote';
 export * from './wallets';

package/src/types/quote.ts

@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/prefer-enum-initializers */
+
+import type { PriceImpactWarningLevel } from '@rango-dev/ui';
+import type BigNumber from 'bignumber.js';
+import type { SwapResult } from 'rango-sdk';
+
+export enum QuoteErrorType {
+  NO_RESULT,
+  REQUEST_FAILED,
+  REQUEST_CANCELED,
+  BRIDGE_LIMIT,
+  INSUFFICIENT_SLIPPAGE,
+}
+
+export type NoResultError = {
+  type: QuoteErrorType.NO_RESULT;
+  diagnosisMessage?: string;
+};
+
+export type BridgeLimitError = {
+  type: QuoteErrorType.BRIDGE_LIMIT;
+  swap: SwapResult;
+  recommendation: string;
+  fromAmountRangeError: string;
+};
+
+export type InsufficientSlippageError = {
+  type: QuoteErrorType.INSUFFICIENT_SLIPPAGE;
+  recommendedSlippages: RecommendedSlippages | null;
+  minRequiredSlippage: string | null;
+};
+
+export type QuoteRequestFailed = { type: QuoteErrorType.REQUEST_FAILED };
+export type QuoteRequestCanceled = { type: QuoteErrorType.REQUEST_CANCELED };
+
+export type QuoteError =
+  | NoResultError
+  | BridgeLimitError
+  | InsufficientSlippageError
+  | QuoteRequestFailed
+  | QuoteRequestCanceled;
+
+export enum QuoteWarningType {
+  HIGH_VALUE_LOSS,
+  UNKNOWN_PRICE,
+  INSUFFICIENT_SLIPPAGE,
+  HIGH_SLIPPAGE,
+}
+
+export enum QuoteUpdateType {
+  QUOTE_UPDATED,
+  QUOTE_SWAPPERS_UPDATED,
+  QUOTE_COINS_UPDATED,
+  QUOTE_AND_OUTPUT_AMOUNT_UPDATED,
+  QUOTE_UPDATED_WITH_HIGH_VALUE_LOSS,
+}
+
+export type QuoteUpdateWarning =
+  | {
+      type: QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED;
+      newOutputAmount: string;
+      percentageChange: string;
+    }
+  | {
+      type: Exclude<
+        QuoteUpdateType,
+        QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED
+      >;
+    };
+
+export type RecommendedSlippages = Map<number, string>;
+
+export type InsufficientSlippageWarning = {
+  type: QuoteWarningType.INSUFFICIENT_SLIPPAGE;
+  recommendedSlippages: RecommendedSlippages | null;
+  minRequiredSlippage: string | null;
+};
+
+export type HighSlippageWarning = {
+  type: QuoteWarningType.HIGH_SLIPPAGE;
+  slippage: string | null;
+};
+
+export type HighValueLossWarning = {
+  type: QuoteWarningType.HIGH_VALUE_LOSS;
+  warningLevel: PriceImpactWarningLevel;
+  inputUsdValue: BigNumber;
+  outputUsdValue: BigNumber;
+  totalFee: BigNumber;
+  priceImpact: number;
+};
+
+export type UnknownPriceWarning = {
+  type: QuoteWarningType.UNKNOWN_PRICE;
+};
+
+export type QuoteWarning =
+  | HighValueLossWarning
+  | InsufficientSlippageWarning
+  | HighSlippageWarning
+  | UnknownPriceWarning;
+
+export type ConfirmSwapWarnings = {
+  quote: QuoteWarning | null;
+  quoteUpdate: QuoteUpdateWarning | null;
+  balance: { messages: string[] } | null;
+};

package/src/types/swap.ts

@@ -5,19 +5,10 @@ export type PendingSwapSettings = Omit<
   'disabledSwappersIds'
 >;
 
-export enum ButtonState {
-  WAITFORCONNECTING = 'waitForConnecting',
-  SWAP = 'swap',
-  NEEDTOCONFIRM = 'needToConfirm',
-  WARNING = 'warning',
-}
-
-export type SwapButtonState = (
-  | { disabled: true }
-  | { disabled: false; hasWarning?: boolean }
-) & {
+export type SwapButtonState = {
+  disabled: boolean;
   title: string;
-  state: ButtonState;
+  action: 'connect-wallet' | 'confirm-warning' | 'confirm-swap';
 };
 
 export type ConvertedToken = {

package/src/utils/colors.ts

@@ -31,7 +31,7 @@ export const generateRangeColors = (name: string, color: string) => {
   const NUMBER_OF_COLORS = 10;
   const HALF_NUMBER_OF_COLORS = 5;
   const COLOR_SUFFIX = 100;
-  const AMT = 32;
+  const AMT = 25;
 
   let colors = { [name]: color };
   for (let i = 1; i < NUMBER_OF_COLORS; i++) {
@@ -60,6 +60,7 @@ export const generateRangeColors = (name: string, color: string) => {
       };
     }
   }
+
   return colors;
 };
 export const generateColors = (

package/src/utils/configs.ts

@@ -2,6 +2,7 @@ import { RANGO_PUBLIC_API_KEY } from '../constants';
 
 export interface Configs {
   API_KEY: string;
+  BASE_URL?: string;
 }
 
 let configs: Configs = {
@@ -9,7 +10,7 @@ let configs: Configs = {
 };
 
 export function getConfig(name: keyof Configs) {
-  return configs[name];
+  return configs[name] || '';
 }
 
 export function setConfig(name: keyof Configs, value: any) {

package/src/utils/meta.ts

@@ -1,4 +1,4 @@
-import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
+import type { Asset, BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 
 import { tokensAreEqual } from './wallets';
 
@@ -17,6 +17,13 @@ export function getBlockchainShortNameFor(
     ?.shortName;
 }
 
+export function getSwapperDisplayName(
+  swapperId: string,
+  swappers: SwapperMeta[]
+) {
+  return swappers.find((swapper) => swapper.id === swapperId)?.swapperGroup;
+}
+
 export function findToken(t: Asset, tokens: Token[]) {
   return tokens.find((token) => tokensAreEqual(token, t)) ?? null;
 }

package/src/utils/numbers.ts

@@ -16,7 +16,7 @@ export const secondsToString = (s: number): string => {
 };
 
 export const numberToString = (
-  number: BigNumber | string | null | undefined,
+  number: BigNumber | string | number | null | undefined,
   minDecimals: number | null = null,
   maxDecimals: number | null = null
 ): string => {