@rango-dev/widget-embedded 0.17.1-next.8 → 0.18.0

package/src/store/slices/settings.ts

@@ -0,0 +1,168 @@
+import type { ConfigSlice } from './config';
+import type { WidgetConfig } from '../../types';
+import type { SwapperMeta } from 'rango-sdk';
+import type { StateCreator } from 'zustand';
+
+import { type Language } from '@rango-dev/ui';
+
+import { BLOCKCHAIN_LIST_SIZE } from '../../constants/configs';
+import { DEFAULT_LANGUAGE } from '../../constants/languages';
+import { DEFAULT_SLIPPAGE } from '../../constants/swapSettings';
+import { removeDuplicateFrom } from '../../utils/common';
+import { isFeatureHidden } from '../../utils/settings';
+
+export type ThemeMode = 'auto' | 'dark' | 'light';
+
+export interface SettingsSlice {
+  theme: ThemeMode;
+  language: Language;
+  disabledLiquiditySources: string[];
+  /** Keeping a history of blockchains that user has selected (in Swap process) */
+  preferredBlockchains: string[];
+  slippage: number;
+  customSlippage: number | null;
+  infiniteApprove: boolean;
+  affiliateRef: string | null;
+  affiliatePercent: number | null;
+  affiliateWallets: { [key: string]: string } | null;
+
+  setSlippage: (slippage: number) => void;
+  setCustomSlippage: (customSlippage: number | null) => void;
+  toggleInfiniteApprove: () => void;
+  toggleLiquiditySource: (name: string) => void;
+  setTheme: (theme: ThemeMode) => void;
+  setLanguage: (language: Language) => void;
+  toggleAllLiquiditySources: (
+    swappers: SwapperMeta[],
+    shouldReset?: boolean
+  ) => void;
+  setAffiliateRef: (affiliateRef: string | null) => void;
+  setAffiliatePercent: (affiliatePercent: number | null) => void;
+  setAffiliateWallets: (
+    affiliateWallets: { [key: string]: string } | null
+  ) => void;
+  addPreferredBlockchain: (blockchain: string) => void;
+  updateSettings: (config: WidgetConfig) => void;
+}
+
+export const createSettingsSlice: StateCreator<
+  SettingsSlice & ConfigSlice,
+  [],
+  [],
+  SettingsSlice
+> = (set, get) => ({
+  disabledLiquiditySources: [],
+  theme: 'auto',
+  language: DEFAULT_LANGUAGE,
+  preferredBlockchains: [],
+  slippage: DEFAULT_SLIPPAGE,
+  customSlippage: null,
+  infiniteApprove: false,
+  affiliateRef: null,
+  affiliatePercent: null,
+  affiliateWallets: null,
+
+  addPreferredBlockchain: (blockchain) => {
+    const currentPreferredBlockchains = get().preferredBlockchains;
+
+    const noNeedToDoAnything = currentPreferredBlockchains.find(
+      (preferredBlockchain, index) => {
+        const isSameBlockchain = preferredBlockchain === blockchain;
+        const isInVisibleList = index <= BLOCKCHAIN_LIST_SIZE - 1;
+
+        return isSameBlockchain && isInVisibleList;
+      }
+    );
+
+    if (noNeedToDoAnything) {
+      return;
+    }
+
+    const nextPreferredBlockchains: string[] =
+      currentPreferredBlockchains.filter((preferredBlockchain) => {
+        const isSameBlockchain = preferredBlockchain === blockchain;
+
+        return !isSameBlockchain;
+      });
+
+    set(() => ({
+      preferredBlockchains: [blockchain, ...nextPreferredBlockchains],
+    }));
+  },
+  setSlippage: (slippage) =>
+    set(() => ({
+      slippage: slippage,
+    })),
+  setCustomSlippage: (customSlippage) =>
+    set(() => ({
+      customSlippage: customSlippage,
+    })),
+  setAffiliateRef: (affiliateRef) =>
+    set(() => ({
+      affiliateRef,
+    })),
+  setAffiliatePercent: (affiliatePercent) =>
+    set(() => ({
+      affiliatePercent,
+    })),
+
+  setAffiliateWallets: (affiliateWallets) =>
+    set(() => ({
+      affiliateWallets,
+    })),
+  toggleAllLiquiditySources: (swappers, shouldReset) =>
+    set((state) => {
+      if (shouldReset) {
+        return { disabledLiquiditySources: [] };
+      }
+      const swappersGroup = removeDuplicateFrom(
+        swappers.map((swapper) => swapper.swapperGroup)
+      );
+
+      if (swappersGroup.length === state.disabledLiquiditySources.length) {
+        return { disabledLiquiditySources: [] };
+      }
+
+      return {
+        disabledLiquiditySources: swappersGroup,
+      };
+    }),
+  toggleInfiniteApprove: () =>
+    set((state) => ({
+      infiniteApprove: !state.infiniteApprove,
+    })),
+  toggleLiquiditySource: (name) =>
+    set((state) => {
+      if (state.disabledLiquiditySources.includes(name)) {
+        return {
+          disabledLiquiditySources: state.disabledLiquiditySources.filter(
+            (liquiditySource) => liquiditySource != name
+          ),
+        };
+      }
+      return {
+        disabledLiquiditySources: state.disabledLiquiditySources.concat(name),
+      };
+    }),
+  setTheme: (theme) =>
+    set(() => ({
+      theme,
+    })),
+  setLanguage: (language) =>
+    set(() => ({
+      language,
+    })),
+  updateSettings: (nextConfig: WidgetConfig) => {
+    const { features } = nextConfig;
+
+    const isThemeHidden = isFeatureHidden('theme', features);
+    const isLanguageHidden = isFeatureHidden('language', features);
+    const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
+
+    set({
+      ...(isThemeHidden && { theme: 'auto' }),
+      ...(isLanguageHidden && { language: DEFAULT_LANGUAGE }),
+      ...(isLiquidityHidden && { disabledLiquiditySources: [] }),
+    });
+  },
+});

package/src/store/wallets.ts

@@ -1,4 +1,4 @@
-import type { Wallet } from '../types';
+import type { Balance, TokensBalance, Wallet } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Token } from 'rango-sdk';
 
@@ -7,8 +7,10 @@ import { subscribeWithSelector } from 'zustand/middleware';
 
 import { httpService } from '../services/httpService';
 import {
+  createTokenHash,
   isAccountAndWalletMatched,
   makeBalanceFor,
+  makeTokensBalance,
   resetConnectedWalletState,
 } from '../utils/wallets';
 
@@ -33,9 +35,9 @@ export interface ConnectedWallet extends Wallet {
   loading: boolean;
   error: boolean;
 }
-
 interface WalletsStore {
   connectedWallets: ConnectedWallet[];
+  balances: TokensBalance;
   customDestination: string;
   loading: boolean;
   connectWallet: (accounts: Wallet[], tokens: Token[]) => void;
@@ -47,12 +49,14 @@ interface WalletsStore {
     tokens: Token[],
     shouldRetry?: boolean
   ) => void;
+  getBalanceFor: (token: Token) => Balance | null;
 }
 
 export const useWalletsStore = createSelectors(
   create<WalletsStore>()(
     subscribeWithSelector((set, get) => ({
       connectedWallets: [],
+      balances: {},
       customDestination: '',
       loading: false,
       connectWallet: (accounts, tokens) => {
@@ -92,21 +96,27 @@ export const useWalletsStore = createSelectors(
                 connectedWallet.walletType !== walletType
             )
             .map((selectedWallet) => selectedWallet.chain);
+
+          const connectedWallets = state.connectedWallets
+            .filter(
+              (connectedWallet) => connectedWallet.walletType !== walletType
+            )
+            .map((connectedWallet) => {
+              const anyWalletSelectedForBlockchain = selectedWallets.includes(
+                connectedWallet.chain
+              );
+              if (anyWalletSelectedForBlockchain) {
+                return connectedWallet;
+              }
+              selectedWallets.push(connectedWallet.chain);
+              return { ...connectedWallet, selected: true };
+            });
+
+          const balances = makeTokensBalance(connectedWallets);
+
           return {
-            connectedWallets: state.connectedWallets
-              .filter(
-                (connectedWallet) => connectedWallet.walletType !== walletType
-              )
-              .map((connectedWallet) => {
-                const anyWalletSelectedForBlockchain = selectedWallets.includes(
-                  connectedWallet.chain
-                );
-                if (anyWalletSelectedForBlockchain) {
-                  return connectedWallet;
-                }
-                selectedWallets.push(connectedWallet.chain);
-                return { ...connectedWallet, selected: true };
-              }),
+            balances,
+            connectedWallets,
           };
         });
       },
@@ -159,9 +169,8 @@ export const useWalletsStore = createSelectors(
           const response = await httpService().getWalletsDetails(data);
           const retrievedBalance = response.wallets;
           if (retrievedBalance) {
-            set((state) => ({
-              loading: false,
-              connectedWallets: state.connectedWallets.map(
+            set((state) => {
+              const connectedWallets = state.connectedWallets.map(
                 (connectedWallet) => {
                   const matchedAccount = accounts.find((account) =>
                     isAccountAndWalletMatched(account, connectedWallet)
@@ -186,30 +195,49 @@ export const useWalletsStore = createSelectors(
                           retrievedBalanceAccount,
                           tokens
                         ),
+                        loading: false,
                       }
                     : connectedWallet;
                 }
-              ),
-            }));
+              );
+
+              const balances = makeTokensBalance(connectedWallets);
+
+              return {
+                loading: false,
+                balances,
+                connectedWallets,
+              };
+            });
           } else {
             throw new Error('Wallet not found');
           }
         } catch (error) {
-          set((state) => ({
-            loading: false,
-            connectedWallets: state.connectedWallets.map((balance) => {
+          set((state) => {
+            const connectedWallets = state.connectedWallets.map((balance) => {
               return accounts.find((account) =>
                 isAccountAndWalletMatched(account, balance)
               )
                 ? resetConnectedWalletState(balance)
                 : balance;
-            }),
-          }));
+            });
+
+            const balances = makeTokensBalance(connectedWallets);
+
+            return {
+              loading: false,
+              balances,
+              connectedWallets,
+            };
+          });
         }
       },
+      getBalanceFor: (token) => {
+        const { balances } = get();
+        const tokenHash = createTokenHash(token);
+        const balance = balances[tokenHash];
+        return balance ?? null;
+      },
     }))
   )
 );
-
-export const fetchingBalanceSelector = (state: WalletsStore) =>
-  !!state.connectedWallets.find((wallet) => wallet.loading);

package/src/types/config.ts

@@ -77,20 +77,57 @@ export type WidgetAffiliate = {
  * blockchains. e.g. ['BSC','ETHEREUM']
  * @property {Asset[]} tokens - The `tokens` property is an optional array of `Asset` objects that
  * you could use that to limit tokens to some limited ones.
+ * @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.
  */
 export type BlockchainAndTokenConfig = {
   blockchain?: string;
   token?: Asset;
   blockchains?: string[];
   tokens?: Asset[];
+  pinnedTokens?: Asset[];
 };
 
+/**
+ * `Features`
+ *
+ * @property {'visible' | 'hidden'} [theme]
+ * - The visibility state for the theme feature. Optional property.
+ *
+ * @property {'visible' | 'hidden'} [language]
+ * - The visibility state for the language feature. Optional property.
+ *
+ * @property {'disabled' | 'enabled'} [experimentalRoute]
+ * - The enablement state for the experimental route feature. Optional property.
+ *
+ * @property {'visible' | 'hidden'} [connectWalletButton]
+ * - The visibility state for the connect wallet button feature. Optional property.
+ *
+ * @property {'visible' | 'hidden'} [notification]
+ * - The visibility state for the notification feature. Optional property.
+ *
+ * @property {'visible' | 'hidden'} [liquiditySource]
+ * - The visibility state for the liquiditySource feature. Optional property.
+ */
+export type Features = Partial<
+  Record<
+    | 'theme'
+    | 'language'
+    | 'connectWalletButton'
+    | 'notification'
+    | 'liquiditySource',
+    'visible' | 'hidden'
+  >
+> &
+  Partial<Record<'experimentalRoute', 'disabled' | 'enabled'>>;
+
 /**
  * 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 {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.
@@ -119,13 +156,21 @@ export type BlockchainAndTokenConfig = {
  * 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.
- * @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} 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 {Features} features - An optional object for configuring the visibility or enablement of various features.
+ *   Keys include:
+ *   - 'notification': Visibility state for the notification icon.
+ *   - 'theme': Visibility state for the theme.
+ *   - 'liquiditySource': Visibility state for liquidity source.
+ *   - 'connectWalletButton': Visibility state for the wallet connect icon.
+ *   - 'language': Visibility state for the language.
+ *   - 'experimentalRoute': Enablement state for the experimental route.
  */
+
 export type WidgetConfig = {
   apiKey: string;
+  apiUrl?: string;
   walletConnectProjectId?: string;
   affiliate?: WidgetAffiliate;
   amount?: number;
@@ -138,6 +183,6 @@ export type WidgetConfig = {
   language?: Language;
   theme?: WidgetTheme;
   externalWallets?: boolean;
-  pinnedTokens?: Asset[];
   enableNewLiquiditySources?: boolean;
+  features?: Features;
 };

package/src/types/swap.ts

@@ -1,23 +1,14 @@
-import type { SwapSavedSettings } from 'rango-types/lib';
+import type { SwapSavedSettings } from 'rango-types';
 
 export type PendingSwapSettings = Omit<
   SwapSavedSettings,
   '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/types/wallets.ts

@@ -1,7 +1,24 @@
-import { WalletType } from '@rango-dev/wallets-shared';
+import type { WalletType } from '@rango-dev/wallets-shared';
 
 export interface Wallet {
   chain: string;
   address: string;
   walletType: WalletType;
 }
+
+export type Balance = {
+  amount: string;
+  decimals: number;
+  usdValue: string;
+};
+
+type Blockchain = string;
+type TokenSymbol = string;
+type Address = string;
+
+/** `blockchain-symbol-Address` */
+export type TokenHash = `${Blockchain}-${TokenSymbol}-${Address}`;
+
+export type TokensBalance = {
+  [key: TokenHash]: Balance;
+};

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/date.ts

@@ -1,5 +1,5 @@
 import type { GroupBy } from '../components/SwapsGroup/SwapsGroup.types';
-import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import type { PendingSwap } from 'rango-types';
 
 import dayjs from 'dayjs';
 

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/providers.ts

@@ -1,6 +1,7 @@
+import type { WidgetConfig } from '../types';
+import type { ProviderInterface } from '@rango-dev/wallets-react';
+
 import { allProviders } from '@rango-dev/provider-all';
-import { ProviderInterface } from '@rango-dev/wallets-react';
-import { WidgetConfig } from '../types';
 
 export interface ProvidersOptions {
   walletConnectProjectId?: WidgetConfig['walletConnectProjectId'];
@@ -26,9 +27,11 @@ export function matchAndGenerateProviders(
     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.
+      /*
+       * 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;

package/src/utils/queue.ts

@@ -1,5 +1,5 @@
-import { Manager } from '@rango-dev/queue-manager-core';
-import {
+import type { Manager } from '@rango-dev/queue-manager-core';
+import type {
   PendingSwapWithQueueID,
   SwapStorage,
 } from '@rango-dev/queue-manager-rango-preset';

package/src/utils/quote.ts

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { QuoteError, QuoteWarning, Wallet } from '../types';
-import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 import type { PriceImpactWarningLevel } from '@rango-dev/ui';
 import type {
   SimulationAssetAndAmount,
@@ -12,6 +11,7 @@ import type {
   BlockchainMeta,
   Token,
 } from 'rango-sdk';
+import type { PendingSwap } from 'rango-types';
 
 import { getLastSuccessfulStep } from '@rango-dev/queue-manager-rango-preset';
 import BigNumber from 'bignumber.js';
@@ -238,11 +238,12 @@ export function generateQuoteWarnings(
   const outputUsdValue = getUsdValue(toToken, quote.result?.outputAmount ?? '');
 
   if (quote.result && inputUsdValue && outputUsdValue) {
-    const priceImpact = getPercentageChange(
+    const priceImpact = getPriceImpact(
       inputUsdValue.toString(),
       outputUsdValue.toString()
     );
-    const highValueLoss = hasHighValueLoss(inputUsdValue, priceImpact);
+    const highValueLoss =
+      !!priceImpact && hasHighValueLoss(inputUsdValue, priceImpact);
 
     if (highValueLoss) {
       const totalFee = getTotalFeeInUsd(quote.result.swaps, tokens);
@@ -320,13 +321,12 @@ export function generateQuoteErrors(
 export function getPriceImpact(
   inputUsdValue: BigNumber | string | null,
   outputUsdValue: BigNumber | string | null
-) {
+): number | null {
   const outputUsdValueIsInvalid =
     typeof outputUsdValue === 'string'
       ? parseFloat(outputUsdValue) <= 0
       : !outputUsdValue?.gt(0);
-
-  const priceImpact =
+  const percentageChange =
     !inputUsdValue || !outputUsdValue || outputUsdValueIsInvalid
       ? null
       : getPercentageChange(
@@ -334,5 +334,5 @@ export function getPriceImpact(
           outputUsdValue.toString()
         );
 
-  return priceImpact;
+  return percentageChange && percentageChange < 0 ? percentageChange : null;
 }

package/src/utils/settings.ts

@@ -1,7 +1,6 @@
+import type { Features } from '../types';
 import type { SwapperMeta } from 'rango-sdk';
 
-import { useSettingsStore } from '../store/settings';
-
 import { removeDuplicateFrom } from './common';
 
 export type LiquiditySourceType = 'BRIDGE' | 'AGGREGATOR' | 'DEX';
@@ -15,10 +14,9 @@ export type UniqueSwappersGroupType = {
 };
 
 export function getUniqueSwappersGroups(
-  swappers: SwapperMeta[]
+  swappers: SwapperMeta[],
+  disabledLiquiditySources: string[]
 ): UniqueSwappersGroupType[] {
-  const disabledLiquiditySources =
-    useSettingsStore.use.disabledLiquiditySources();
   const supportedSwappers = swappers.map((swapper) => swapper.swapperGroup);
 
   const uniqueSupportedSwappersGroups: Array<UniqueSwappersGroupType> = [];
@@ -71,3 +69,11 @@ export function sortLiquiditySourcesByGroupTitle(
 
   return 0;
 }
+
+export function isFeatureHidden(feature: keyof Features, features?: Features) {
+  return features?.[feature] === 'hidden';
+}
+
+export function isFeatureEnabled(feature: keyof Features, features?: Features) {
+  return features?.[feature] === 'enabled';
+}