@rango-dev/widget-embedded 0.17.1-next.3 → 0.17.1-next.30

package/src/components/AppRoutes.tsx

@@ -1,5 +1,3 @@
-import type { WidgetConfig } from '../types';
-
 import React from 'react';
 import { useRoutes } from 'react-router-dom';
 
@@ -16,15 +14,7 @@ import { SwapDetailsPage } from '../pages/SwapDetailsPage';
 import { ThemePage } from '../pages/ThemePage';
 import { WalletsPage } from '../pages/WalletsPage';
 
-const getAbsolutePath = (path: string) => path.replace('/', '');
-
-interface PropTypes {
-  config?: WidgetConfig;
-}
-
-export function AppRoutes(props: PropTypes) {
-  const { config } = props;
-
+export function AppRoutes() {
   return useRoutes([
     {
       path: navigationRoutes.home,
@@ -32,77 +22,75 @@ export function AppRoutes(props: PropTypes) {
     },
     {
       path: navigationRoutes.fromSwap,
-      element: <SelectSwapItemsPage type="source" />,
+      children: [
+        {
+          index: true,
+          element: <SelectSwapItemsPage type="source" />,
+        },
+        {
+          path: navigationRoutes.blockchains,
+          element: <SelectBlockchainPage type="source" />,
+        },
+      ],
     },
     {
       path: navigationRoutes.toSwap,
-      element: <SelectSwapItemsPage type="destination" />,
-    },
-    {
-      path: navigationRoutes.fromBlockchain,
-      element: <SelectBlockchainPage type="source" />,
-    },
-    {
-      path: navigationRoutes.toBlockchain,
-      element: <SelectBlockchainPage type="destination" />,
+      children: [
+        {
+          index: true,
+          element: <SelectSwapItemsPage type="destination" />,
+        },
+        {
+          path: navigationRoutes.blockchains,
+          element: <SelectBlockchainPage type="destination" />,
+        },
+      ],
     },
     {
       path: navigationRoutes.settings,
-      element: (
-        <SettingsPage
-          singleTheme={config?.theme?.singleTheme}
-          supportedSwappers={config?.liquiditySources}
-        />
-      ),
-    },
-    {
-      path: navigationRoutes.themes,
-      element: <ThemePage />,
-    },
-    {
-      path: navigationRoutes.languages,
-      element: <LanguagePage />,
-    },
-    {
-      path: navigationRoutes.exchanges,
-      element: (
-        <LiquiditySourcePage
-          sourceType="Exchanges"
-          supportedSwappers={config?.liquiditySources}
-        />
-      ),
-    },
-    {
-      path: navigationRoutes.bridges,
-      element: (
-        <LiquiditySourcePage
-          sourceType="Bridges"
-          supportedSwappers={config?.liquiditySources}
-        />
-      ),
+      children: [
+        {
+          index: true,
+          element: <SettingsPage />,
+        },
+        {
+          path: navigationRoutes.themes,
+          element: <ThemePage />,
+        },
+        {
+          path: navigationRoutes.languages,
+          element: <LanguagePage />,
+        },
+        {
+          path: navigationRoutes.exchanges,
+          element: <LiquiditySourcePage sourceType="Exchanges" />,
+        },
+        {
+          path: navigationRoutes.bridges,
+          element: <LiquiditySourcePage sourceType="Bridges" />,
+        },
+      ],
     },
-    { path: navigationRoutes.swaps, element: <HistoryPage /> },
     {
-      path: navigationRoutes.swapDetails,
-      element: <SwapDetailsPage />,
+      path: navigationRoutes.swaps,
+      children: [
+        {
+          index: true,
+          element: <HistoryPage />,
+        },
+        {
+          path: navigationRoutes.swapDetails,
+          element: <SwapDetailsPage />,
+        },
+      ],
     },
     {
       path: navigationRoutes.wallets,
-      element: (
-        <WalletsPage
-          supportedWallets={config?.wallets}
-          multiWallets={
-            typeof config?.multiWallets === 'undefined'
-              ? true
-              : config.multiWallets
-          }
-          config={config}
-        />
-      ),
+      element: <WalletsPage />,
     },
     {
-      path: getAbsolutePath(navigationRoutes.confirmSwap),
-      element: <ConfirmSwapPage config={config} />,
+      path: navigationRoutes.confirmSwap,
+      element: <ConfirmSwapPage />,
     },
   ]);
 }

package/src/components/BlockchainList/BlockchainList.tsx

@@ -11,7 +11,7 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 
 import { filterBlockchains } from './BlockchainList.helpers';
 import { Container, List } from './BlockchainList.styles';
@@ -20,7 +20,7 @@ import { LoadingBlockchainList } from './LoadingBlockchainList';
 export function BlockchainList(props: PropTypes) {
   const { list, searchedFor, onChange, blockchainCategory } = props;
   const [blockchains, setBlockchains] = useState<BlockchainMeta[]>(list);
-  const loadingStatus = useMetaStore.use.loadingStatus();
+  const { fetchStatus } = useAppStore();
 
   useEffect(() => {
     setBlockchains([
@@ -66,8 +66,8 @@ export function BlockchainList(props: PropTypes) {
         {i18n.t('Select Blockchain')}
       </Typography>
       <Divider size={4} />
-      {loadingStatus === 'loading' && <LoadingBlockchainList />}
-      {loadingStatus === 'success' && renderList()}
+      {fetchStatus === 'loading' && <LoadingBlockchainList />}
+      {fetchStatus === 'success' && renderList()}
     </Container>
   );
 }

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -13,7 +13,7 @@ import React from 'react';
 
 import { BLOCKCHAIN_LIST_SIZE } from '../../constants/configs';
 import { usePrepareBlockchainList } from '../../hooks/usePrepareBlockchainList';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 
 import { Container } from './BlockchainsSection.styles';
@@ -27,7 +27,7 @@ export function BlockchainsSection(props: PropTypes) {
     selected: blockchain?.name,
   });
 
-  const loadingStatus = useMetaStore.use.loadingStatus();
+  const { fetchStatus } = useAppStore();
   const resetToBlockchain = useQuoteStore.use.resetToBlockchain();
   const resetFromBlockchain = useQuoteStore.use.resetFromBlockchain();
   const hasMoreItemsInList = blockchainsList.more.length > 0;
@@ -45,11 +45,11 @@ export function BlockchainsSection(props: PropTypes) {
       </Typography>
       <Divider size={12} />
       <Container>
-        {loadingStatus === 'loading' &&
+        {fetchStatus === 'loading' &&
           Array.from(Array(NUMBER_OF_LOADING), (e) => (
             <Skeleton key={e} variant="rounded" height={50} />
           ))}
-        {loadingStatus === 'success' && (
+        {fetchStatus === 'success' && (
           <>
             <BlockchainsChip
               selected={!blockchain}

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -19,11 +19,11 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { getQuoteErrorMessage } from '../../constants/errors';
-import { navigationRoutes } from '../../constants/navigationRoutes';
 import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
+import { getBlockchainShortNameFor } from '../../utils/meta';
 import { confirmSwapDisabled } from '../../utils/swap';
 
 import { getRequiredWallets, isValidAddress } from './ConfirmWallets.helpers';
@@ -50,8 +50,9 @@ const NUMBER_OF_WALLETS_TO_DISPLAY = 2;
 
 export function ConfirmWalletsModal(props: PropTypes) {
   //TODO: move component's logics to a custom hook
-  const { open, onClose, onCancel, onCheckBalance, config, loading } = props;
-  const { blockchains } = useMetaStore.use.meta();
+  const { open, onClose, onCancel, onCheckBalance, loading } = props;
+  const config = useAppStore().config;
+  const blockchains = useAppStore().blockchains();
   const {
     quote,
     setSelectedWallets: selectQuoteWallets,
@@ -75,10 +76,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const customDestinationRef = useRef<HTMLDivElement | null>(null);
 
   const requiredWallets = getRequiredWallets(quote);
-  const customDestinationEnabled =
-    typeof config?.customDestination === 'undefined'
-      ? true
-      : config.customDestination;
 
   const lastStepToBlockchain = blockchains.find(
     (blockchain) =>
@@ -247,7 +244,8 @@ export function ConfirmWalletsModal(props: PropTypes) {
       open={open}
       onClose={() => {
         if (!quoteWalletsConfirmed) {
-          navigate(navigationRoutes.home, { replace: true });
+          const home = '../';
+          navigate(home, { replace: true });
         }
         onClose();
       }}
@@ -288,7 +286,12 @@ export function ConfirmWalletsModal(props: PropTypes) {
             <Typography variant="headline" size="small">
               {i18n.t({
                 id: 'Your {blockchainName} wallets',
-                values: { blockchainName: showMoreWalletFor },
+                values: {
+                  blockchainName: getBlockchainShortNameFor(
+                    showMoreWalletFor,
+                    blockchains
+                  ),
+                },
               })}
             </Typography>
           </ShowMoreHeader>
@@ -320,9 +323,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
               chain={showMoreWalletFor}
               isSelected={isSelected}
               selectWallet={onChange}
-              multiWallets={config?.multiWallets ?? true}
-              supportedWallets={config?.wallets ?? []}
-              config={config}
               onShowMore={setShowMoreWalletFor.bind(null, showMoreWalletFor)}
             />
           </div>
@@ -361,7 +361,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                     <Typography variant="title" size="xmedium">
                       {i18n.t({
                         id: 'Your {blockchainName} wallets',
-                        values: { blockchainName: blockchain?.displayName },
+                        values: { blockchainName: blockchain?.shortName },
                       })}
                     </Typography>
                     <Typography
@@ -370,7 +370,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                       size="medium">
                       {i18n.t({
                         id: 'You need to connect a {blockchainName} wallet.',
-                        values: { blockchainName: blockchain?.displayName },
+                        values: { blockchainName: blockchain?.shortName },
                       })}
                     </Typography>
                   </Title>
@@ -380,9 +380,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
                       chain={requiredWallet}
                       isSelected={isSelected}
                       selectWallet={onChange}
-                      multiWallets={config?.multiWallets ?? true}
-                      supportedWallets={config?.wallets ?? []}
-                      config={config}
                       limit={NUMBER_OF_WALLETS_TO_DISPLAY}
                       onShowMore={() =>
                         setShowMoreWalletFor(blockchain?.name ?? '')
@@ -390,7 +387,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                     />
                   </ListContainer>
                   {!isLastWallet && <Divider size={32} />}
-                  {isLastWallet && customDestinationEnabled && (
+                  {isLastWallet && config?.customDestination && (
                     <CustomDestination>
                       <CollapsibleRoot
                         ref={customDestinationRef}

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.types.ts

@@ -1,4 +1,3 @@
-import type { WidgetConfig } from '../..';
 import type { ConfirmSwap } from '../../hooks/useConfirmSwap/useConfirmSwap.types';
 
 export type PropTypes = {
@@ -6,6 +5,5 @@ export type PropTypes = {
   onClose: () => void;
   onCancel: () => void;
   onCheckBalance: ConfirmSwap['fetch'];
-  config?: WidgetConfig;
   loading: boolean;
 };

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -23,7 +23,7 @@ import {
   TIME_TO_CLOSE_MODAL,
   TIME_TO_IGNORE_MODAL,
 } from '../../pages/WalletsPage';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainDisplayNameFor } from '../../utils/meta';
 import {
@@ -41,10 +41,11 @@ import {
 } from './WalletList.styles';
 
 export function WalletList(props: PropTypes) {
-  const { config, chain, isSelected, selectWallet, limit, onShowMore } = props;
+  const { chain, isSelected, selectWallet, limit, onShowMore } = props;
+  const { config } = useAppStore();
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
-  const { blockchains } = useMetaStore.use.meta();
+  const { blockchains } = useAppStore();
   const [openWalletStateModal, setOpenWalletStateModal] =
     useState<WalletType>('');
   const [experimentalChainWallet, setExperimentalChainWallet] =
@@ -137,7 +138,7 @@ export function WalletList(props: PropTypes) {
         });
         const conciseAddress = address ? getConciseAddress(address) : '';
 
-        const experimentalChain = isExperimentalChain(blockchains, chain);
+        const experimentalChain = isExperimentalChain(blockchains(), chain);
 
         const experimentalChainNotAdded = !connectedWallets.find(
           (connectedWallet) =>
@@ -180,7 +181,7 @@ export function WalletList(props: PropTypes) {
           experimentalChainWallet?.chain
             ? getBlockchainDisplayNameFor(
                 experimentalChainWallet.chain,
-                blockchains
+                blockchains()
               )
             : undefined;
         return (

package/src/components/ConfirmWalletsModal/WalletList.type.ts

@@ -1,12 +1,9 @@
-import type { Wallet, WidgetConfig } from '../../types';
+import type { Wallet } from '../../types';
 
 export type PropTypes = {
   chain: string;
-  supportedWallets: WidgetConfig['wallets'];
   isSelected: (walletType: string, chain: string) => boolean;
   selectWallet: (wallet: Wallet) => void;
-  multiWallets: boolean;
-  config?: WidgetConfig;
   limit?: number;
   onShowMore: () => void;
 };

package/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"

package/src/components/Layout/Layout.tsx

@@ -3,12 +3,13 @@ import type { PropsWithChildren } from 'react';
 
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
+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';
@@ -23,25 +24,37 @@ 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();
-  const navigate = useNavigate();
+  const navigateBack = useNavigateBack();
 
   const onConnectWallet = () => {
-    if (!connectWalletsButtonDisabled) {
-      navigate('/' + navigationRoutes.wallets);
+    if (!connectWalletsButtonDisabled && header.onWallet) {
+      header.onWallet();
     }
   };
+
+  const showBackButton =
+    typeof header.hasBackButton === 'undefined' || header.hasBackButton;
+
   return (
     <Container ref={ref} fixedHeight={fixedHeight} id="swap-box">
       <Header
-        prefix={<>{header.onBack && <BackButton onClick={header.onBack} />}</>}
+        prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
         title={header.title}
         suffix={
           <>
             {header.suffix}
-            {header.hasConnectWallet && (
+            {header.onWallet && !isConnectWalletHidden && (
               <WalletButton
                 container={getContainer()}
                 onClick={onConnectWallet}

package/src/components/Layout/Layout.types.ts

@@ -1,10 +1,10 @@
 export interface PropTypes {
   header: {
     title: string;
-    hasConnectWallet?: boolean;
+    onWallet?: () => void;
     hasSettings?: boolean;
     suffix?: React.ReactNode;
-    onBack?: () => void;
+    hasBackButton?: boolean;
     onCancel?: () => void;
   };
   hasLogo?: boolean;

package/src/components/NoResult/NoResult.helpers.ts

@@ -27,18 +27,6 @@ export function makeInfo(
       },
       description: '',
     };
-  } else if (
-    error?.type === QuoteErrorType.NO_RESULT &&
-    error.diagnosisMessage
-  ) {
-    return {
-      alert: {
-        type: 'error',
-        text: error.diagnosisMessage,
-        action: null,
-      },
-      description: '',
-    };
   } else if (disabledLiquiditySources.length) {
     return {
       alert: {
@@ -51,6 +39,18 @@ export function makeInfo(
       },
       description: errorMessages().liquiditySourcesError.description,
     };
+  } else if (
+    error?.type === QuoteErrorType.NO_RESULT &&
+    error.diagnosisMessage
+  ) {
+    return {
+      alert: {
+        type: 'error',
+        text: error.diagnosisMessage,
+        action: null,
+      },
+      description: '',
+    };
   }
   return {
     alert: null,

package/src/components/NoResult/NoResult.tsx

@@ -11,22 +11,22 @@ import {
 import React from 'react';
 
 import { errorMessages } from '../../constants/errors';
-import { useSettingsStore } from '../../store/settings';
+import { useAppStore } from '../../store/AppStore';
 
 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();
 
   const info = makeInfo(
     error,
     disabledLiquiditySources,
-    toggleAllLiquiditySources,
+    () => toggleAllLiquiditySources(swappers, true),
     fetch
   );
 

package/src/components/NotificationContent/NotificationContent.tsx

@@ -10,7 +10,8 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useMetaStore } from '../../store/meta';
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useUiStore } from '../../store/ui';
 
@@ -26,14 +27,15 @@ export function NotificationContent() {
   const { getUnreadNotifications } = useNotificationStore();
 
   const notifications: Notification[] = getUnreadNotifications();
-  const { tokens, blockchains } = useMetaStore.use.meta();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
   const sortedNotification = notifications
     .sort((a, b) => b.creationTime - a.creationTime)
     .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
 
   const handleOnClick = (requestId: Notification['requestId']) => {
     setSelectedSwap(requestId);
-    navigate(`/swaps/${requestId}`);
+    navigate(`${navigationRoutes.swaps}/${requestId}`);
   };
 
   return (