feat: implement feature disabling in widget config

widget/embedded/src/components/HeaderButtons/HomeButtons.tsx

@@ -11,7 +11,9 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
+import { useAppStore } from '../../store/AppStore';
 import { getContainer } from '../../utils/common';
+import { isFeatureHidden } from '../../utils/settings';
 import { NotificationContent } from '../NotificationContent';
 
 import { HeaderButton } from './HeaderButtons.styles';
@@ -26,6 +28,12 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
     onClickNotifications,
   } = props;
 
+  const {
+    config: { features },
+  } = useAppStore();
+
+  const isNotificationsHidden = isFeatureHidden('notification', features);
+
   return (
     <>
       <Tooltip
@@ -41,25 +49,27 @@ export function HomeButtons(props: HomeButtonsPropTypes) {
         </HeaderButton>
       </Tooltip>
 
-      <Tooltip
-        container={getContainer()}
-        side="top"
-        content={i18n.t('Notifications')}>
-        <Popover
-          align="center"
-          collisionBoundary={layoutRef}
-          collisionPadding={{ right: 20, left: 20 }}
+      {!isNotificationsHidden && (
+        <Tooltip
           container={getContainer()}
-          content={<NotificationContent />}>
-          <HeaderButton
-            size="small"
-            variant="ghost"
-            onClick={onClickNotifications}>
-            <NotificationsIcon size={18} color="black" />
-            <UnreadNotificationsBadge />
-          </HeaderButton>
-        </Popover>
-      </Tooltip>
+          side="top"
+          content={i18n.t('Notifications')}>
+          <Popover
+            align="center"
+            collisionBoundary={layoutRef}
+            collisionPadding={{ right: 20, left: 20 }}
+            container={getContainer()}
+            content={<NotificationContent />}>
+            <HeaderButton
+              size="small"
+              variant="ghost"
+              onClick={onClickNotifications}>
+              <NotificationsIcon size={18} color="black" />
+              <UnreadNotificationsBadge />
+            </HeaderButton>
+          </Popover>
+        </Tooltip>
+      )}
       <Tooltip
         container={getContainer()}
         side="top"

widget/embedded/src/components/Layout/Layout.tsx

@@ -5,9 +5,11 @@ import { BottomLogo, Divider, Header } from '@rango-dev/ui';
 import React from 'react';
 
 import { useNavigateBack } from '../../hooks/useNavigateBack';
+import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
+import { isFeatureHidden } from '../../utils/settings';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 
 import { Container, Content, Footer } from './Layout.styles';
@@ -22,6 +24,14 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
     fixedHeight = true,
   } = props;
   const connectedWallets = useWalletsStore.use.connectedWallets();
+  const {
+    config: { features },
+  } = useAppStore();
+
+  const isConnectWalletHidden = isFeatureHidden(
+    'connectWalletButton',
+    features
+  );
 
   const connectWalletsButtonDisabled =
     useUiStore.use.connectWalletsButtonDisabled();
@@ -44,7 +54,7 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
         suffix={
           <>
             {header.suffix}
-            {header.onWallet && (
+            {header.onWallet && !isConnectWalletHidden && (
               <WalletButton
                 container={getContainer()}
                 onClick={onConnectWallet}

widget/embedded/src/components/NoResult/NoResult.tsx

@@ -12,17 +12,14 @@ import React from 'react';
 
 import { errorMessages } from '../../constants/errors';
 import { useAppStore } from '../../store/AppStore';
-import { useSettingsStore } from '../../store/settings';
 
 import { makeInfo } from './NoResult.helpers';
 import { Container, Footer, PrefixIcon } from './NoResult.styles';
 
 export function NoResult(props: PropTypes) {
   const { fetch, error } = props;
-  const disabledLiquiditySources =
-    useSettingsStore.use.disabledLiquiditySources();
-  const toggleAllLiquiditySources =
-    useSettingsStore.use.toggleAllLiquiditySources();
+  const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
+  const toggleAllLiquiditySources = useAppStore().toggleAllLiquiditySources;
 
   const swappers = useAppStore().swappers();
 

widget/embedded/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../../constants/navigationRoutes';
-import { useSettingsStore } from '../../store/settings';
+import { useAppStore } from '../../store/AppStore';
 import { QuoteWarningType } from '../../types';
 import { getContainer } from '../../utils/common';
 
@@ -21,7 +21,7 @@ type PropsTypes = {
 };
 
 export function SlippageWarningModal(props: PropsTypes) {
-  const { customSlippage, slippage } = useSettingsStore();
+  const { customSlippage, slippage } = useAppStore();
   const { open, onClose, onConfirm, warning } = props;
   const navigate = useNavigate();
   const userSlippage = customSlippage ?? slippage;

widget/embedded/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>

widget/embedded/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);
   }, []);

widget/embedded/src/containers/Wallets/Wallets.tsx

@@ -28,7 +28,7 @@ export const WidgetContext = createContext<WidgetContextInterface>({
 });
 
 function Main(props: PropsWithChildren<PropTypes>) {
-  const { updateConfig } = useAppStore();
+  const { updateConfig, updateSettings } = useAppStore();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const walletOptions: ProvidersOptions = {
@@ -42,6 +42,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
   useEffect(() => {
     if (props.config) {
       updateConfig(props.config);
+      updateSettings(props.config);
     }
   }, [props.config]);
 

widget/embedded/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;

widget/embedded/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;
 

widget/embedded/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) {

widget/embedded/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)

widget/embedded/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,

widget/embedded/src/hooks/useTheme.ts

@@ -1,14 +1,13 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { WidgetTheme } from '../types';
-
 import {
   createTheme,
   darkTheme as defaultDarkTheme,
   lightTheme as defaultLightTheme,
 } 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);
 

widget/embedded/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 {

widget/embedded/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') {