@rango-dev/widget-embedded 0.17.1-next.25 → 0.17.1-next.27

package/src/components/Slippage/Slippage.tsx

@@ -14,17 +14,15 @@ import {
   MIN_SLIPPGAE,
   SLIPPAGES,
 } from '../../constants/swapSettings';
-import { useSettingsStore } from '../../store/settings';
+import { useAppStore } from '../../store/AppStore';
 import { getContainer } from '../../utils/common';
 
 import { BaseContainer, Head, SlippageChipsContainer } from './Slippage.styles';
 import { SlippageTooltipContent } from './SlippageTooltipContent';
 
 export function Slippage() {
-  const slippage = useSettingsStore.use.slippage();
-  const setSlippage = useSettingsStore.use.setSlippage();
-  const customSlippage = useSettingsStore.use.customSlippage();
-  const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
+  const { slippage, setSlippage, customSlippage, setCustomSlippage } =
+    useAppStore();
 
   return (
     <BaseContainer>

package/src/components/TokenList/TokenList.helpers.ts

@@ -1,8 +1,8 @@
-import type { TokenWithBalance } from './TokenList.types';
+import type { Token } from 'rango-sdk';
 
 import { containsText } from '../../utils/common';
 
-export const filterTokens = (list: TokenWithBalance[], searchedFor: string) =>
+export const filterTokens = (list: Token[], searchedFor: string) =>
   list.filter(
     (token) =>
       containsText(token.symbol, searchedFor) ||

package/src/components/TokenList/TokenList.tsx

@@ -1,9 +1,6 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import type {
-  PropTypes,
-  RenderDescProps,
-  TokenWithBalance,
-} from './TokenList.types';
+import type { PropTypes, RenderDescProps } from './TokenList.types';
+import type { Token } from 'rango-sdk';
 import type { CommonProps } from 'react-window';
 
 import { i18n } from '@lingui/core';
@@ -24,6 +21,7 @@ import React, { forwardRef, useEffect, useState } from 'react';
 import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
 import { generateRangeColors } from '../../utils/colors';
+import { formatBalance } from '../../utils/wallets';
 
 import { LoadingTokenList } from './LoadingTokenList';
 import {
@@ -85,11 +83,11 @@ const renderDesc = (props: RenderDescProps) => {
 export function TokenList(props: PropTypes) {
   const { list, searchedFor = '', onChange, selectedBlockchain } = props;
 
-  const [tokens, setTokens] = useState<TokenWithBalance[]>(list);
+  const [tokens, setTokens] = useState<Token[]>(list);
   const fetchStatus = useAppStore().fetchStatus;
   const blockchains = useAppStore().blockchains();
   const [hasNextPage, setHasNextPage] = useState<boolean>(true);
-  const loadingWallet = useWalletsStore.use.loading();
+  const { getBalanceFor, loading: loadingWallet } = useWalletsStore();
   const { isTokenPinned } = useAppStore();
 
   // eslint-disable-next-line react/display-name
@@ -134,7 +132,7 @@ export function TokenList(props: PropTypes) {
       <VirtualizedList
         Item={({ index, style }) => {
           const token = tokens[index];
-
+          const tokenBalance = formatBalance(getBalanceFor(token));
           const address = token.address || '';
           const blockchain = blockchains.find(
             (blockchain) => blockchain.name === token.blockchain
@@ -229,18 +227,18 @@ export function TokenList(props: PropTypes) {
                       <Skeleton variant="text" size="medium" width={50} />
                     </End>
                   ) : (
-                    tokens[index]?.balance && (
+                    tokenBalance && (
                       <BalanceContainer>
                         <Typography variant="title" size="small">
-                          {token.balance?.amount}
+                          {tokenBalance.amount}
                         </Typography>
                         <div />
-                        {token.balance?.usdValue && (
+                        {tokenBalance.usdValue && (
                           <Typography
                             variant="body"
                             className="usd-value"
                             size="xsmall">
-                            {`$${token.balance?.usdValue}`}
+                            {`$${tokenBalance.usdValue}`}
                           </Typography>
                         )}
                       </BalanceContainer>

package/src/components/TokenList/TokenList.types.ts

@@ -1,16 +1,9 @@
 import type { Token } from 'rango-sdk';
 
-export interface TokenWithBalance extends Token {
-  balance?: {
-    amount: string;
-    usdValue: string;
-  };
-}
-
 export interface PropTypes {
-  list: TokenWithBalance[];
+  list: Token[];
   searchedFor?: string;
-  onChange: (token: TokenWithBalance) => void;
+  onChange: (token: Token) => void;
   selectedBlockchain?: string;
 }
 
@@ -22,7 +15,7 @@ export interface RenderDescProps {
   name?: string | null;
   address: string;
   url: string;
-  token: TokenWithBalance;
+  token: Token;
   customCssForTag: TagCSS;
   customCssForTagTitle: TitleCSS;
 }

package/src/components/TokenList/index.ts

@@ -1,2 +1 @@
 export { TokenList } from './TokenList';
-export type { TokenWithBalance } from './TokenList.types';

package/src/containers/App/App.tsx

@@ -11,7 +11,6 @@ import { useLanguage } from '../../hooks/useLanguage';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
-import { useSettingsStore } from '../../store/settings';
 import { WidgetContext } from '../Wallets';
 
 import { MainContainer } from './App.styles';
@@ -29,7 +28,6 @@ export function Main() {
 
   useEffect(() => {
     void fetchMeta().catch();
-    void useSettingsStore.persist.rehydrate();
     void useNotificationStore.persist.rehydrate();
     widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
   }, []);

package/src/containers/Wallets/Wallets.tsx

@@ -28,21 +28,21 @@ export const WidgetContext = createContext<WidgetContextInterface>({
 });
 
 function Main(props: PropsWithChildren<PropTypes>) {
-  const updateConfig = useAppStore().updateConfig;
+  const { updateConfig, updateSettings } = useAppStore();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const walletOptions: ProvidersOptions = {
     walletConnectProjectId: props.config?.walletConnectProjectId,
   };
   const { providers } = useWalletProviders(props.config.wallets, walletOptions);
-  const disconnectWallet = useWalletsStore.use.disconnectWallet();
-  const connectWallet = useWalletsStore.use.connectWallet();
+  const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
   useSyncStoresWithConfig();
 
   useEffect(() => {
     if (props.config) {
       updateConfig(props.config);
+      updateSettings(props.config);
     }
   }, [props.config]);
 

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -7,8 +7,8 @@ import { useEffect } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
-import { useSettingsStore } from '../../store/settings';
 import { useWalletsStore } from '../../store/wallets';
+import { isFeatureEnabled } from '../../utils/settings';
 import { createQuoteRequestBody, getWalletsForNewSwap } from '../../utils/swap';
 import { useFetchQuote } from '../useFetchQuote';
 
@@ -36,11 +36,11 @@ export function useConfirmSwap(): ConfirmSwap {
     affiliateRef,
     affiliateWallets,
     disabledLiquiditySources,
-  } = useSettingsStore();
+  } = useAppStore();
   const { connectedWallets } = useWalletsStore();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
-  const { experimental } = useAppStore().config;
+  const { features } = useAppStore().config;
   const { enableNewLiquiditySources } = useAppStore().config;
 
   const userSlippage = customSlippage || slippage;
@@ -78,7 +78,7 @@ export function useConfirmSwap(): ConfirmSwap {
       initialQuote: initialQuote ?? undefined,
       destination: customDestination,
     });
-    if (experimental?.routing) {
+    if (isFeatureEnabled('experimentalRoute', features)) {
       requestBody.experimental = true;
     }
     let currentQuote: BestRouteResponse;

package/src/hooks/useLanguage.ts

@@ -3,7 +3,7 @@ import type { LanguageItem } from '../constants/languages';
 import { type Language } from '@rango-dev/ui';
 
 import { DEFAULT_LANGUAGE, LANGUAGES } from '../constants/languages';
-import { useSettingsStore } from '../store/settings';
+import { useAppStore } from '../store/AppStore';
 
 interface UseLanguage {
   languages: LanguageItem[];
@@ -13,8 +13,7 @@ interface UseLanguage {
 }
 
 export function useLanguage(): UseLanguage {
-  const language = useSettingsStore.use.language();
-  const setLanguage = useSettingsStore.use.setLanguage();
+  const { setLanguage, language } = useAppStore();
   const languages = LANGUAGES;
   const defaultLanguage = DEFAULT_LANGUAGE;
 

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.ts

@@ -6,7 +6,7 @@ import type { BlockchainMeta } from 'rango-sdk';
 
 import { useEffect } from 'react';
 
-import { useSettingsStore } from '../../store/settings';
+import { useAppStore } from '../../store/AppStore';
 
 import { isInVisibleList, prepare } from './usePrepareBlockchainList.helpers';
 
@@ -20,7 +20,7 @@ export function usePrepareBlockchainList(
   blockchains: BlockchainMeta[],
   options?: PrepareListOptions
 ): UsePrepareList {
-  const { preferredBlockchains, addPreferredBlockchain } = useSettingsStore();
+  const { preferredBlockchains, addPreferredBlockchain } = useAppStore();
 
   useEffect(() => {
     if (options?.selected) {

package/src/hooks/useSwapInput.ts

@@ -5,11 +5,11 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
-import { useSettingsStore } from '../store/settings';
 import { QuoteErrorType } from '../types';
 import { debounce } from '../utils/common';
 import { isPositiveNumber } from '../utils/numbers';
 import { generateQuoteWarnings } from '../utils/quote';
+import { isFeatureEnabled } from '../utils/settings';
 import { createQuoteRequestBody } from '../utils/swap';
 import { tokensAreEqual } from '../utils/wallets';
 
@@ -40,7 +40,7 @@ type UseSwapInput = {
  */
 export function useSwapInput(): UseSwapInput {
   const { fetch: fetchQuote, cancelFetch } = useFetchQuote();
-  const { liquiditySources, enableNewLiquiditySources, experimental } =
+  const { liquiditySources, enableNewLiquiditySources, features } =
     useAppStore().config;
   const tokens = useAppStore().tokens();
   const {
@@ -58,7 +58,7 @@ export function useSwapInput(): UseSwapInput {
     affiliateRef,
     affiliateWallets,
     disabledLiquiditySources,
-  } = useSettingsStore();
+  } = useAppStore();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<QuoteError | null>(null);
   const [warning, setWarning] = useState<QuoteWarning | null>(null);
@@ -105,7 +105,7 @@ export function useSwapInput(): UseSwapInput {
         affiliatePercent,
         affiliateWallets,
       });
-      if (experimental?.routing) {
+      if (isFeatureEnabled('experimentalRoute', features)) {
         requestBody.experimental = true;
       }
       fetchQuote(requestBody)

package/src/hooks/useSyncStoresWithConfig.ts

@@ -4,7 +4,6 @@ import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
-import { useSettingsStore } from '../store/settings';
 import { tokensAreEqual } from '../utils/wallets';
 
 export function useSyncStoresWithConfig() {
@@ -26,7 +25,7 @@ export function useSyncStoresWithConfig() {
   const tokens = useAppStore().tokens();
 
   const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
-    useSettingsStore();
+    useAppStore();
 
   const fromTokensConfig = useMemo(
     () => config?.from?.tokens,

package/src/hooks/useTheme.ts

@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { WidgetTheme } from '../types';
-
 import {
   createTheme,
   darkTheme as defaultDarkTheme,
@@ -8,7 +6,8 @@ import {
 } from '@rango-dev/ui';
 import { useEffect, useState } from 'react';
 
-import { useSettingsStore } from '../store/settings';
+import { useAppStore } from '../store/AppStore';
+import { type WidgetTheme } from '../types';
 import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_PRIMARY_RADIUS,
@@ -26,8 +25,8 @@ export function useTheme(props: WidgetTheme) {
   } = props;
 
   const [OSTheme, setOSTheme] = useState('light');
-  const theme = useSettingsStore.use.theme();
-  const setTheme = useSettingsStore.use.setTheme();
+
+  const { setTheme, theme } = useAppStore();
 
   const { dark, light } = customizedThemeTokens(colors);
 

package/src/pages/ConfirmSwapPage.tsx

@@ -30,8 +30,8 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { getQuoteUpdateWarningMessage } from '../constants/warnings';
 import { QuoteInfo } from '../containers/QuoteInfo';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
+import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
-import { useSettingsStore } from '../store/settings';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { QuoteWarningType } from '../types';
@@ -89,8 +89,7 @@ export function ConfirmSwapPage() {
   const showWalletsOnInit = !quoteWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  const disabledLiquiditySources =
-    useSettingsStore.use.disabledLiquiditySources();
+  const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
   const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
   const { manager } = useManager();
   const {

package/src/pages/Home.tsx

@@ -9,8 +9,6 @@ import { SwitchFromAndToButton } from '../components/SwitchFromAndTo';
 import { errorMessages } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import {
-  BALANCE_MAX_DECIMALS,
-  BALANCE_MIN_DECIMALS,
   PERCENTAGE_CHANGE_MAX_DECIMALS,
   PERCENTAGE_CHANGE_MIN_DECIMALS,
   TOKEN_AMOUNT_MAX_DECIMALS,
@@ -27,7 +25,7 @@ import { useWalletsStore } from '../store/wallets';
 import { numberToString } from '../utils/numbers';
 import { getPriceImpact, getPriceImpactLevel } from '../utils/quote';
 import { canComputePriceImpact, getSwapButtonState } from '../utils/swap';
-import { getBalanceFromWallet } from '../utils/wallets';
+import { formatBalance } from '../utils/wallets';
 
 const Container = styled('div', {
   display: 'flex',
@@ -73,7 +71,7 @@ export function Home() {
 
   const fetchMetaStatus = useAppStore().fetchStatus;
 
-  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const { connectedWallets, getBalanceFor } = useWalletsStore();
   const setCurrentPage = useUiStore.use.setCurrentPage();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
   const layoutRef = useRef<HTMLDivElement>(null);
@@ -103,36 +101,14 @@ export function Home() {
     needsToWarnEthOnPath,
   });
 
-  const tokenBalance =
-    !!fromBlockchain && !!fromToken
-      ? numberToString(
-          getBalanceFromWallet(
-            connectedWallets,
-            fromBlockchain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.amount || '0',
-          BALANCE_MIN_DECIMALS,
-          BALANCE_MAX_DECIMALS
-        )
-      : '0';
+  const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
+
+  const fromTokenFormattedBalance =
+    formatBalance(fromTokenBalance)?.amount ?? '0';
 
   const tokenBalanceReal =
     !!fromBlockchain && !!fromToken
-      ? numberToString(
-          getBalanceFromWallet(
-            connectedWallets,
-            fromBlockchain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.amount || '0',
-          getBalanceFromWallet(
-            connectedWallets,
-            fromBlockchain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.decimal
-        )
+      ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
       : '0';
 
   useEffect(() => {
@@ -194,7 +170,7 @@ export function Home() {
               label={i18n.t('From')}
               mode="From"
               onInputChange={setInputAmount}
-              balance={tokenBalance}
+              balance={fromTokenFormattedBalance}
               chain={{
                 displayName: fromBlockchain?.displayName || '',
                 image: fromBlockchain?.logo || '',
@@ -220,7 +196,7 @@ export function Home() {
               disabled={fetchMetaStatus === 'failed'}
               loading={fetchMetaStatus === 'loading'}
               onSelectMaxBalance={() => {
-                if (tokenBalance !== '0') {
+                if (fromTokenFormattedBalance !== '0') {
                   setInputAmount(tokenBalanceReal.split(',').join(''));
                 }
               }}

package/src/pages/LiquiditySourcePage.tsx

@@ -24,7 +24,6 @@ import {
   SettingsContainer,
 } from '../components/SettingsContainer';
 import { useAppStore } from '../store/AppStore';
-import { useSettingsStore } from '../store/settings';
 import { containsText } from '../utils/numbers';
 import { getUniqueSwappersGroups } from '../utils/settings';
 
@@ -35,10 +34,11 @@ interface PropTypes {
 export function LiquiditySourcePage({ sourceType }: PropTypes) {
   const fetchStatus = useAppStore().fetchStatus;
   const swappers = useAppStore().swappers();
+  const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
   const [searchedFor, setSearchedFor] = useState<string>('');
-  const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
+  const toggleLiquiditySource = useAppStore().toggleLiquiditySource;
   const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
-    getUniqueSwappersGroups(swappers);
+    getUniqueSwappersGroups(swappers, disabledLiquiditySources);
 
   const validTypes: Array<LiquiditySourceType> = [];
   if (sourceType === 'Exchanges') {

package/src/pages/SelectSwapItemsPage.tsx

@@ -14,7 +14,7 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useWalletsStore } from '../store/wallets';
-import { getTokensBalanceFromWalletAndSort } from '../utils/wallets';
+import { sortTokensByBalance } from '../utils/wallets';
 
 interface PropTypes {
   type: 'source' | 'destination';
@@ -32,7 +32,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
     setFromBlockchain,
     setToBlockchain,
   } = useQuoteStore();
-  const { connectedWallets } = useWalletsStore();
+  const getBalanceFor = useWalletsStore.use.getBalanceFor();
   const [searchedFor, setSearchedFor] = useState<string>('');
 
   const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;
@@ -47,10 +47,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
     blockchain: selectedBlockchainName,
     searchFor: searchedFor,
   });
-  const tokensList = getTokensBalanceFromWalletAndSort(
-    tokens,
-    connectedWallets
-  );
+  const tokensList = sortTokensByBalance(tokens, getBalanceFor);
 
   // Actions
   const updateBlockchain = (blockchain: BlockchainMeta) => {

package/src/pages/SettingsPage.tsx

@@ -19,20 +19,31 @@ import { Slippage } from '../components/Slippage';
 import { SlippageTooltipContainer as TooltipContainer } from '../components/Slippage/Slippage.styles';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useAppStore } from '../store/AppStore';
-import { useSettingsStore } from '../store/settings';
 import { getContainer } from '../utils/common';
-import { getUniqueSwappersGroups } from '../utils/settings';
+import { getUniqueSwappersGroups, isFeatureHidden } from '../utils/settings';
 
 export function SettingsPage() {
   const navigate = useNavigate();
   const { theme } = useAppStore().config;
   const fetchStatus = useAppStore().fetchStatus;
   const swappers = useAppStore().swappers();
+  const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
+  const {
+    config: { features },
+  } = useAppStore();
+  const isThemeHidden = isFeatureHidden('theme', features);
 
-  const infiniteApprove = useSettingsStore.use.infiniteApprove();
-  const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
+  const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
 
-  const supportedUniqueSwappersGroups = getUniqueSwappersGroups(swappers);
+  const isLanguageHidden = isFeatureHidden('language', features);
+
+  const infiniteApprove = useAppStore().infiniteApprove;
+  const toggleInfiniteApprove = useAppStore().toggleInfiniteApprove;
+
+  const supportedUniqueSwappersGroups = getUniqueSwappersGroups(
+    swappers,
+    disabledLiquiditySources
+  );
 
   const bridgeSources = supportedUniqueSwappersGroups.filter(
     (uniqueItem) =>
@@ -156,12 +167,12 @@ export function SettingsPage() {
     onClick: toggleInfiniteApprove,
   };
 
-  const settingItems = [
-    bridgeItem,
-    exchangeItem,
-    // languageItem
-  ];
-  if (!theme?.singleTheme) {
+  const settingItems = isLiquidityHidden ? [] : [bridgeItem, exchangeItem];
+
+  if (!isLanguageHidden) {
+    // settingItems.push(languageItem);
+  }
+  if (!theme?.singleTheme && !isThemeHidden) {
     settingItems.push(themeItem);
   }
   settingItems.push(infiniteApprovalItem);

package/src/pages/ThemePage.tsx

@@ -13,7 +13,7 @@ import React from 'react';
 
 import { Layout } from '../components/Layout';
 import { SettingsContainer } from '../components/SettingsContainer';
-import { useSettingsStore } from '../store/settings';
+import { useAppStore } from '../store/AppStore';
 
 type Theme = 'dark' | 'light' | 'auto';
 
@@ -24,8 +24,7 @@ enum Mode {
 }
 
 export function ThemePage() {
-  const theme = useSettingsStore.use.theme();
-  const setTheme = useSettingsStore.use.setTheme();
+  const { setTheme, theme } = useAppStore();
 
   const themesList = [
     {

package/src/store/AppStore.tsx

@@ -1,7 +1,7 @@
 import type { WidgetConfig } from '../types';
 import type { PropsWithChildren } from 'react';
 
-import React, { createContext, useContext, useRef } from 'react';
+import React, { createContext, useContext, useEffect, useRef } from 'react';
 
 import { createAppStore } from './app';
 
@@ -13,6 +13,12 @@ export const AppStoreContext = createContext<AppStore | null>(null);
 export function useAppStore() {
   const store = useContext(AppStoreContext);
 
+  useEffect(() => {
+    if (store && !store.persist.hasHydrated()) {
+      void store.persist.rehydrate();
+    }
+  }, []);
+
   if (!store) {
     throw new Error('Missing AppStoreContext.Provider in the tree');
   }

package/src/store/app.ts

@@ -1,12 +1,15 @@
 import type { ConfigSlice } from './slices/config';
 import type { DataSlice } from './slices/data';
+import type { SettingsSlice } from './slices/settings';
 import type { WidgetConfig } from '../types';
 import type { StateCreator } from 'zustand';
 
 import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 import { createConfigSlice } from './slices/config';
 import { createDataSlice } from './slices/data';
+import { createSettingsSlice } from './slices/settings';
 
 export type StateCreatorWithInitialData<
   T extends Partial<WidgetConfig>,
@@ -17,11 +20,34 @@ export type StateCreatorWithInitialData<
   ...rest: Parameters<StateCreator<R, [], [], V>>
 ) => ReturnType<StateCreator<R, [], [], V>>;
 
-export type AppStoreState = DataSlice & ConfigSlice;
+export type AppStoreState = DataSlice & ConfigSlice & SettingsSlice;
 
 export function createAppStore(initialData?: WidgetConfig) {
-  return create<AppStoreState>()((...a) => ({
-    ...createDataSlice(...a),
-    ...createConfigSlice(initialData, ...a),
-  }));
+  return create<AppStoreState>()(
+    persist(
+      (...a) => ({
+        ...createDataSlice(...a),
+        ...createSettingsSlice(...a),
+        ...createConfigSlice(initialData, ...a),
+      }),
+      {
+        name: 'user-settings',
+        skipHydration: true,
+        partialize: (state) => {
+          return {
+            theme: state.theme,
+            language: state.language,
+            affiliatePercent: state.affiliatePercent,
+            affiliateRef: state.affiliateRef,
+            affiliateWallets: state.affiliateWallets,
+            slippage: state.slippage,
+            customSlippage: state.customSlippage,
+            infiniteApprove: state.infiniteApprove,
+            preferredBlockchains: state.preferredBlockchains,
+            disabledLiquiditySources: state.disabledLiquiditySources,
+          };
+        },
+      }
+    )
+  );
 }

package/src/store/quote.ts

@@ -1,4 +1,3 @@
-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 {
@@ -38,8 +37,8 @@ export interface QuoteState {
   inputUsdValue: BigNumber | null;
   outputAmount: BigNumber | null;
   outputUsdValue: BigNumber | null;
-  fromToken: TokenWithBalance | null;
-  toToken: TokenWithBalance | null;
+  fromToken: Token | null;
+  toToken: Token | null;
   quoteWalletsConfirmed: boolean;
   selectedWallets: Wallet[];
   quoteWarningsConfirmed: boolean;