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

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.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@rango-dev/ui';
+import { ImageContainer, styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -12,7 +12,7 @@ export const List = styled('ul', {
   listStyle: 'none',
   overflowY: 'auto',
   paddingRight: '$5',
-  '.image-container': {
+  [`& ${ImageContainer}`]: {
     borderRadius: '$xm',
     overflow: 'hidden',
   },

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/ConfirmWallets.styles.ts

@@ -1,6 +1,7 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import {
   Button,
+  css,
   darkTheme,
   IconButton,
   keyframes,
@@ -110,12 +111,13 @@ export const NavigateBack = styled(IconButton, {
 
 export const WalletsContainer = styled('div', {
   paddingTop: '$20',
-  '& .wallets-list': {
-    display: 'grid',
-    gap: '$10',
-    gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
-    alignContent: 'baseline',
-  },
+});
+
+export const walletsListStyles = css({
+  display: 'grid',
+  gap: '$10',
+  gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
+  alignContent: 'baseline',
 });
 
 export const CollapsibleRoot = styled(Collapsible.Root, {
@@ -171,6 +173,10 @@ export const CustomDestination = styled('div', {
   '& .alarms': { paddingTop: '5px' },
 });
 
+export const alarmsStyles = css({
+  paddingTop: '5px',
+});
+
 export const ExpandedIcon = styled('div', {
   transition: `all ${EXPANDABLE_TRANSITION_DURATION}ms ease`,
   variants: {

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -19,15 +19,16 @@ 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';
 import {
+  alarmsStyles,
   CollapsibleContent,
   CollapsibleRoot,
   ConfirmButton,
@@ -43,6 +44,7 @@ import {
   Trigger,
   Wallets,
   WalletsContainer,
+  walletsListStyles,
 } from './ConfirmWallets.styles';
 import { WalletList } from './WalletList';
 
@@ -50,8 +52,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 +78,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 +246,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 +288,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>
@@ -315,14 +320,11 @@ export function ConfirmWalletsModal(props: PropTypes) {
       </Modal>
       {showMoreWalletFor && (
         <WalletsContainer>
-          <div className="wallets-list">
+          <div className={walletsListStyles()}>
             <WalletList
               chain={showMoreWalletFor}
               isSelected={isSelected}
               selectWallet={onChange}
-              multiWallets={config?.multiWallets ?? true}
-              supportedWallets={config?.wallets ?? []}
-              config={config}
               onShowMore={setShowMoreWalletFor.bind(null, showMoreWalletFor)}
             />
           </div>
@@ -361,7 +363,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 +372,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 +382,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 +389,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                     />
                   </ListContainer>
                   {!isLastWallet && <Divider size={32} />}
-                  {isLastWallet && customDestinationEnabled && (
+                  {isLastWallet && config?.customDestination && (
                     <CustomDestination>
                       <CollapsibleRoot
                         ref={customDestinationRef}
@@ -461,7 +460,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                         </CollapsibleContent>
                       </CollapsibleRoot>
                       {isAddressMatched && (
-                        <div className="alarms">
+                        <div className={alarmsStyles()}>
                           <Alert
                             variant="alarm"
                             type="error"

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/LoadingSwapDetails/LoadingSwapDetailStep.tsx

@@ -3,35 +3,42 @@ import type { StepSkeletonPropsTypes } from './LoadingSwapDetails.types';
 import { ChainToken, Divider, NextIcon, Skeleton } from '@rango-dev/ui';
 import React from 'react';
 
-import { StepContainer } from './LoadingSwapDetails.styles';
+import {
+  extraInfoStyles,
+  StepContainer,
+  stepIconStyles,
+  stepInfoStyles,
+  stepTitleStyles,
+  stepTokensStyles,
+} from './LoadingSwapDetails.styles';
 
 export function LoadingSwapDetailStep(props: StepSkeletonPropsTypes) {
   const { extraInfo } = props;
   return (
     <StepContainer>
-      <div className="step-title">
+      <div className={stepTitleStyles()}>
         <Skeleton height={28} width={28} variant="circular" />
         <Divider direction="horizontal" size={8} />
         <Skeleton height={15} width={148} variant="rounded" />
       </div>
-      <div className="step-tokens">
+      <div className={stepTokensStyles()}>
         <Divider direction="horizontal" size={20} />
-        <div className="step-token-info">
+        <div className={stepInfoStyles()}>
           <ChainToken size="small" loading chainImage="" tokenImage="" />
           <Divider direction="horizontal" size={8} />
           <Skeleton height={12} width={76} variant="rounded" />
         </div>
-        <div className="step-icon-container">
+        <div className={stepIconStyles()}>
           <NextIcon color="gray" size={16} />
         </div>
-        <div className="step-token-info">
+        <div className={stepInfoStyles()}>
           <ChainToken size="small" loading chainImage="" tokenImage="" />
           <Divider direction="horizontal" size={8} />
           <Skeleton height={12} width={76} variant="rounded" />
         </div>
       </div>
       {extraInfo && (
-        <div className="extra-info">
+        <div className={extraInfoStyles()}>
           <Divider direction="horizontal" size={20} />
           <Skeleton height={22} width={297} variant="rectangular" />
         </div>