@rango-dev/widget-embedded 0.17.1-next.4 → 0.17.1-next.6

package/src/pages/SwapDetailsPage.tsx

@@ -6,7 +6,7 @@ import { SwapDetails } from '../components/SwapDetails';
 import { SwapDetailsPlaceholder } from '../components/SwapDetails/SwapDetails.Placeholder';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
 import { getPendingSwaps } from '../utils/queue';
 
@@ -16,9 +16,9 @@ export function SwapDetailsPage() {
   const pendingSwaps = getPendingSwaps(manager);
   const requestId = useUiStore.use.selectedSwapRequestId();
   const { navigateBackFrom } = useNavigateBack();
-  const { loadingStatus } = useMetaStore();
+  const { fetchStatus: fetchMetaStatus } = useAppStore()();
 
-  const showSkeleton = loading || loadingStatus === 'loading';
+  const showSkeleton = loading || fetchMetaStatus === 'loading';
 
   const selectedSwap = pendingSwaps.find(
     ({ swap }) => swap.requestId === requestId

package/src/pages/WalletsPage.tsx

@@ -1,4 +1,3 @@
-import type { WidgetConfig } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
@@ -10,15 +9,9 @@ import { WalletModal } from '../components/WalletModal';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useWalletList } from '../hooks/useWalletList';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { getContainer } from '../utils/common';
 
-interface PropTypes {
-  supportedWallets: WidgetConfig['wallets'];
-  multiWallets: boolean;
-  config?: WidgetConfig;
-}
-
 const ListContainer = styled('div', {
   display: 'grid',
   gap: '$10',
@@ -35,7 +28,8 @@ const Container = styled('div', {
 export const TIME_TO_CLOSE_MODAL = 3_000;
 export const TIME_TO_IGNORE_MODAL = 300;
 
-export function WalletsPage({ config }: PropTypes) {
+export function WalletsPage() {
+  const { config, fetchStatus: fetchMetaStatus } = useAppStore()();
   const { navigateBackFrom } = useNavigateBack();
   const [openModal, setOpenModal] = useState(false);
   const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
@@ -59,7 +53,6 @@ export function WalletsPage({ config }: PropTypes) {
     },
   });
 
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const selectedWallet = list.find(
     (wallet) => wallet.type === selectedWalletType
   );
@@ -88,7 +81,7 @@ export function WalletsPage({ config }: PropTypes) {
                   onClick={(type) => {
                     void handleClick(type);
                   }}
-                  isLoading={loadingMetaStatus === 'loading'}
+                  isLoading={fetchMetaStatus === 'loading'}
                 />
               </Fragment>
             );

package/src/store/AppStore.tsx

@@ -0,0 +1,35 @@
+import type { WidgetConfig } from '../types';
+import type { PropsWithChildren } from 'react';
+
+import React, { createContext, useContext, useRef } from 'react';
+
+import { createAppStore } from './app';
+
+type AppStore = ReturnType<typeof createAppStore>;
+type AppStoreProviderProps = PropsWithChildren<{ config?: WidgetConfig }>;
+
+export const AppStoreContext = createContext<AppStore | null>(null);
+
+export function useAppStore() {
+  const store = useContext(AppStoreContext);
+
+  if (!store) {
+    throw new Error('Missing AppStoreContext.Provider in the tree');
+  }
+
+  return store;
+}
+
+export function AppStoreProvider(props: AppStoreProviderProps) {
+  const appStoreRef = useRef<AppStore>();
+
+  if (!appStoreRef.current) {
+    appStoreRef.current = createAppStore(props.config);
+  }
+
+  return (
+    <AppStoreContext.Provider value={appStoreRef.current}>
+      {props.children}
+    </AppStoreContext.Provider>
+  );
+}

package/src/store/app.ts

@@ -1,5 +1,7 @@
 import type { ConfigSlice } from './slices/config';
 import type { DataSlice } from './slices/data';
+import type { WidgetConfig } from '../types';
+import type { StateCreator } from 'zustand';
 
 import { create } from 'zustand';
 
@@ -7,9 +9,22 @@ import createSelectors from './selectors';
 import { createConfigSlice } from './slices/config';
 import { createDataSlice } from './slices/data';
 
-const store = create<DataSlice & ConfigSlice>()((...a) => ({
-  ...createDataSlice(...a),
-  ...createConfigSlice(...a),
-}));
+export type StateCreatorWithInitialData<
+  T extends Partial<WidgetConfig>,
+  R extends Record<string, unknown>,
+  V extends Record<string, unknown>
+> = (
+  initialData: T | undefined,
+  ...rest: Parameters<StateCreator<R, [], [], V>>
+) => ReturnType<StateCreator<R, [], [], V>>;
 
-export const useAppStore = createSelectors(store);
+export type AppStoreState = DataSlice & ConfigSlice;
+
+export function createAppStore(initialData?: WidgetConfig) {
+  return createSelectors(
+    create<AppStoreState>()((...a) => ({
+      ...createDataSlice(...a),
+      ...createConfigSlice(initialData, ...a),
+    }))
+  );
+}

package/src/store/quote.ts

@@ -1,7 +1,12 @@
 import type { TokenWithBalance } from '../components/TokenList';
 import type { Wallet } from '../types';
 import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset/dist/shared';
-import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+import type {
+  BestRouteResponse,
+  BlockchainMeta,
+  MetaResponse,
+  Token,
+} from 'rango-sdk';
 
 import BigNumber from 'bignumber.js';
 import { create } from 'zustand';
@@ -12,7 +17,6 @@ import { isPositiveNumber } from '../utils/numbers';
 import { createRetryQuote, getQuoteToTokenUsdPrice } from '../utils/quote';
 import { calcOutputUsdValue } from '../utils/swap';
 
-import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
 export const getUsdValue = (
@@ -23,6 +27,10 @@ export const getUsdValue = (
     ? new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0)
     : null;
 
+export type Meta = Pick<MetaResponse, 'blockchains' | 'tokens'>;
+
+export type SetTokenParams = { token: Token; meta: Meta } | { token: null };
+
 export interface QuoteState {
   fromBlockchain: BlockchainMeta | null;
   toBlockchain: BlockchainMeta | null;
@@ -41,12 +49,12 @@ export interface QuoteState {
   setFromBlockchain: (chain: BlockchainMeta | null) => void;
   setToBlockchain: (chian: BlockchainMeta | null) => void;
 
-  setFromToken: (token: Token | null) => void;
-  setToToken: (token: Token | null) => void;
+  setFromToken: (params: SetTokenParams) => void;
+  setToToken: (params: SetTokenParams) => void;
   setInputAmount: (amount: string) => void;
   quote: BestRouteResponse | null;
   setQuote: (quote: BestRouteResponse | null) => void;
-  retry: (pendingSwap: PendingSwap) => void;
+  retry: (pendingSwap: PendingSwap, meta: Meta) => void;
   switchFromAndTo: () => void;
   setQuoteWalletConfirmed: (flag: boolean) => void;
   setSelectedWallets: (wallets: Wallet[]) => void;
@@ -119,18 +127,17 @@ export const useQuoteStore = createSelectors(
           };
         });
       },
-      setFromToken: (token) => {
-        const { blockchains } = useMetaStore.getState().meta;
+      setFromToken: (params) => {
         return set((state) => ({
-          fromToken: token,
-          ...(token && {
+          fromToken: params.token,
+          ...(params.token && {
             fromBlockchain:
-              blockchains.find(
-                (blockchain) => blockchain.name === token.blockchain
+              params.meta.blockchains.find(
+                (blockchain) => blockchain.name === params.token.blockchain
               ) ?? null,
           }),
           ...(!!state.inputAmount && {
-            inputUsdValue: getUsdValue(token, state.inputAmount),
+            inputUsdValue: getUsdValue(params.token, state.inputAmount),
           }),
         }));
       },
@@ -151,14 +158,13 @@ export const useQuoteStore = createSelectors(
           };
         });
       },
-      setToToken: (token) => {
-        const { blockchains } = useMetaStore.getState().meta;
+      setToToken: (params) => {
         return set(() => ({
-          toToken: token,
-          ...(token && {
+          toToken: params.token,
+          ...(params.token && {
             toBlockchain:
-              blockchains.find(
-                (blockchain) => blockchain.name === token.blockchain
+              params.meta.blockchains.find(
+                (blockchain) => blockchain.name === params.token.blockchain
               ) ?? null,
           }),
         }));
@@ -176,9 +182,8 @@ export const useQuoteStore = createSelectors(
           }),
         }));
       },
-      retry: (pendingSwap) => {
-        const { tokens, blockchains } = useMetaStore.getState().meta;
-
+      retry: (pendingSwap, meta) => {
+        const { tokens, blockchains } = meta;
         const {
           fromBlockchain,
           fromToken,
@@ -186,7 +191,6 @@ export const useQuoteStore = createSelectors(
           toToken,
           inputAmount,
         } = createRetryQuote(pendingSwap, blockchains, tokens);
-
         set({
           fromBlockchain,
           fromToken,

package/src/store/settings.ts

@@ -1,3 +1,5 @@
+import type { SwapperMeta } from 'rango-sdk';
+
 import { type Language } from '@rango-dev/ui';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
@@ -7,7 +9,6 @@ import { DEFAULT_LANGUAGE } from '../constants/languages';
 import { DEFAULT_SLIPPAGE } from '../constants/swapSettings';
 import { removeDuplicateFrom } from '../utils/common';
 
-import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
 export type ThemeMode = 'auto' | 'dark' | 'light';
@@ -31,7 +32,10 @@ export interface SettingsState {
   toggleLiquiditySource: (name: string) => void;
   setTheme: (theme: ThemeMode) => void;
   setLanguage: (language: Language) => void;
-  toggleAllLiquiditySources: (shouldReset?: boolean) => void;
+  toggleAllLiquiditySources: (
+    swappers: SwapperMeta[],
+    shouldReset?: boolean
+  ) => void;
   setAffiliateRef: (affiliateRef: string | null) => void;
   setAffiliatePercent: (affiliatePercent: number | null) => void;
   setAffiliateWallets: (
@@ -102,12 +106,11 @@ export const useSettingsStore = createSelectors(
           set(() => ({
             affiliateWallets,
           })),
-        toggleAllLiquiditySources: (shouldReset?: boolean) =>
+        toggleAllLiquiditySources: (swappers, shouldReset) =>
           set((state) => {
             if (shouldReset) {
               return { disabledLiquiditySources: [] };
             }
-            const { swappers } = useMetaStore.getState().meta;
             const swappersGroup = removeDuplicateFrom(
               swappers.map((swapper) => swapper.swapperGroup)
             );

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
                     ? {

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 };
@@ -91,7 +91,7 @@ export type BlockchainAndTokenConfig = {
  * 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 {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 +121,13 @@ 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.
  */
 export type WidgetConfig = {
   apiKey: string;
   walletConnectProjectId?: string;
-  affiliate?: WidgeAffiliate;
+  affiliate?: WidgetAffiliate;
   amount?: number;
   from?: BlockchainAndTokenConfig;
   to?: BlockchainAndTokenConfig;
@@ -139,5 +139,5 @@ export type WidgetConfig = {
   theme?: WidgetTheme;
   externalWallets?: boolean;
   pinnedTokens?: Asset[];
-  includeNewLiquiditySources?: boolean;
+  enableNewLiquiditySources?: boolean;
 };

package/src/utils/settings.ts

@@ -1,4 +1,5 @@
-import { useMetaStore } from '../store/meta';
+import type { SwapperMeta } from 'rango-sdk';
+
 import { useSettingsStore } from '../store/settings';
 
 import { removeDuplicateFrom } from './common';
@@ -14,11 +15,11 @@ export type UniqueSwappersGroupType = {
 };
 
 export function getUniqueSwappersGroups(
-  supportedSwappers?: string[]
+  swappers: SwapperMeta[]
 ): UniqueSwappersGroupType[] {
-  const swappers = useMetaStore.use.meta().swappers;
   const disabledLiquiditySources =
     useSettingsStore.use.disabledLiquiditySources();
+  const supportedSwappers = swappers.map((swapper) => swapper.swapperGroup);
 
   const uniqueSupportedSwappersGroups: Array<UniqueSwappersGroupType> = [];
 
@@ -57,14 +58,14 @@ export function getUniqueSwappersGroups(
 }
 
 export function sortLiquiditySourcesByGroupTitle(
-  a: UniqueSwappersGroupType,
-  b: UniqueSwappersGroupType
+  a: SwapperMeta,
+  b: SwapperMeta
 ) {
-  if (a.groupTitle < b.groupTitle) {
+  if (a.swapperGroup < b.swapperGroup) {
     return -1;
   }
 
-  if (a.groupTitle > b.groupTitle) {
+  if (a.swapperGroup > b.swapperGroup) {
     return 1;
   }