@rango-dev/widget-embedded 0.17.1-next.0 → 0.17.1-next.10

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -18,11 +18,11 @@ import {
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { getConfirmSwapErrorMessage } from '../../constants/errors';
+import { getQuoteErrorMessage } from '../../constants/errors';
 import { navigationRoutes } from '../../constants/navigationRoutes';
-import { getRouteWarningMessage } from '../../constants/warnings';
-import { useBestRouteStore } from '../../store/bestRoute';
-import { useMetaStore } from '../../store/meta';
+import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
 import { confirmSwapDisabled } from '../../utils/swap';
 
@@ -50,23 +50,24 @@ 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 {
-    bestRoute,
-    setSelectedWallets: selectRouteWallets,
-    routeWalletsConfirmed,
-    setRouteWalletConfirmed,
+    quote,
+    setSelectedWallets: selectQuoteWallets,
+    quoteWalletsConfirmed: quoteWalletsConfirmed,
+    setQuoteWalletConfirmed: setQuoteWalletConfirmed,
     customDestination,
     setCustomDestination,
-  } = useBestRouteStore();
+  } = useQuoteStore();
   const { connectedWallets, selectWallets } = useWalletsStore();
 
   const [showMoreWalletFor, setShowMoreWalletFor] = useState('');
   const [balanceWarnings, setBalanceWarnings] = useState<string[]>([]);
   const [error, setError] = useState('');
-  const [routeWarning, setRouteWarning] = useState<
-    ConfirmSwapWarnings['route'] | null
+  const [quoteWarning, setQuoteWarning] = useState<
+    ConfirmSwapWarnings['quoteUpdate'] | null
   >(null);
   const [destination, setDestination] = useState(customDestination);
   const [showCustomDestination, setShowCustomDestination] = useState(
@@ -74,22 +75,15 @@ export function ConfirmWalletsModal(props: PropTypes) {
   );
   const customDestinationRef = useRef<HTMLDivElement | null>(null);
 
-  const requiredWallets = getRequiredWallets(bestRoute);
-  const customDestinationEnabled =
-    typeof config?.customDestination === 'undefined'
-      ? true
-      : config.customDestination;
+  const requiredWallets = getRequiredWallets(quote);
 
   const lastStepToBlockchain = blockchains.find(
     (blockchain) =>
       blockchain.name ===
-      bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to
-        .blockchain
+      quote?.result?.swaps[quote?.result?.swaps.length - 1].to.blockchain
   );
   const isWalletRequiredFor = (blockchain: string) =>
-    !!bestRoute?.result?.swaps.find(
-      (swap) => swap.from.blockchain === blockchain
-    );
+    !!quote?.result?.swaps.find((swap) => swap.from.blockchain === blockchain);
 
   const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
     connectedWallets.filter((connectedWallet) => {
@@ -175,16 +169,16 @@ export function ConfirmWalletsModal(props: PropTypes) {
       (wallet) => wallet.selected
     );
     selectWallets(lastSelectedWallets);
-    selectRouteWallets(lastSelectedWallets);
+    selectQuoteWallets(lastSelectedWallets);
     setCustomDestination(destination);
-    setRouteWalletConfirmed(true);
+    setQuoteWalletConfirmed(true);
     onClose();
   };
 
   const onConfirmWallets = async () => {
     setBalanceWarnings([]);
     setError('');
-    setRouteWarning(null);
+    setQuoteWarning(null);
     const selectedWallets = connectedWallets.filter((connectedWallet) =>
       selectableWallets.find(
         (selectableWallet) =>
@@ -201,11 +195,11 @@ export function ConfirmWalletsModal(props: PropTypes) {
     if (warnings?.balance?.messages) {
       setBalanceWarnings(warnings.balance.messages);
     }
-    if (warnings?.route) {
-      setRouteWarning(warnings.route);
+    if (warnings?.quoteUpdate) {
+      setQuoteWarning(warnings.quoteUpdate);
     }
     if (result.error) {
-      setError(getConfirmSwapErrorMessage(result.error));
+      setError(getQuoteErrorMessage(result.error));
     }
 
     if (!result.error && (!warnings?.balance?.messages.length || 0 > 0)) {
@@ -249,7 +243,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
     <Modal
       open={open}
       onClose={() => {
-        if (!routeWalletsConfirmed) {
+        if (!quoteWalletsConfirmed) {
           navigate(navigationRoutes.home, { replace: true });
         }
         onClose();
@@ -265,7 +259,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                 loading,
                 showCustomDestination,
                 destination,
-                bestRoute,
+                quote,
                 selectableWallets,
                 lastStepToBlockchain
               )}
@@ -323,9 +317,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>
@@ -339,12 +330,12 @@ export function ConfirmWalletsModal(props: PropTypes) {
               <Divider size={12} />
             </>
           )}
-          {routeWarning && (
+          {quoteWarning && (
             <>
               <Alert
                 variant="alarm"
                 type="warning"
-                title={getRouteWarningMessage(routeWarning)}
+                title={getQuoteUpdateWarningMessage(quoteWarning)}
               />
               <Divider size={12} />
             </>
@@ -383,9 +374,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 ?? '')
@@ -393,7 +381,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,11 +1,9 @@
-import type { WidgetConfig } from '../..';
-import type { ConfirmSwap } from '../../hooks/useConfirmSwap';
+import type { ConfirmSwap } from '../../hooks/useConfirmSwap/useConfirmSwap.types';
 
 export type PropTypes = {
   open: boolean;
   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/LoadingSwapDetails/LoadingSwapDetails.styles.ts

@@ -10,11 +10,11 @@ export const Container = styled('div', {
     display: 'flex',
   },
 
-  '.route-summary': {
+  '.quote-summary': {
     padding: '$15 $0',
   },
 
-  '.route-summary-item': {
+  '.quote-summary-item': {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
@@ -26,7 +26,7 @@ export const Container = styled('div', {
     alignItems: 'center',
   },
 
-  '.route-summary-separator': {
+  '.quote-summary-separator': {
     width: '0px',
     height: '$16',
     borderLeft: '1px solid $neutral400',

package/src/components/LoadingSwapDetails/LoadingSwapDetails.tsx

@@ -6,8 +6,8 @@ import { Container, StepSeparator } from './LoadingSwapDetails.styles';
 import { LoadingSwapDetailStep } from './LoadingSwapDetailStep';
 
 export function LoadingSwapDetails() {
-  const routeSummary = (
-    <div className="route-summary-item">
+  const quoteSummary = (
+    <div className="quote-summary-item">
       <div className="token-amount">
         <ChainToken loading size="medium" chainImage="" tokenImage="" />
         <Divider size={8} direction="horizontal" />
@@ -27,10 +27,10 @@ export function LoadingSwapDetails() {
         <Skeleton width={60} height={10} variant="rounded" />
       </div>
 
-      <div className="route-summary">
-        {routeSummary}
-        <div className="route-summary-separator"></div>
-        {routeSummary}
+      <div className="quote-summary">
+        {quoteSummary}
+        <div className="quote-summary-separator"></div>
+        {quoteSummary}
       </div>
 
       <div className="swaps-steps">

package/src/components/{NoRoutes/NoRoutes.helper.ts → NoResult/NoResult.helpers.ts}

@@ -1,33 +1,40 @@
-import type { Info } from './NoRoutes.types';
+import type { Info } from './NoResult.types';
 
 import { i18n } from '@lingui/core';
 
 import { errorMessages } from '../../constants/errors';
+import {
+  type NoResultError,
+  QuoteErrorType,
+  type QuoteRequestFailed,
+} from '../../types';
 
 export function makeInfo(
-  diagnosisMessage: string | null,
+  error: NoResultError | QuoteRequestFailed | null,
   disabledLiquiditySources: string[],
-  hasError: boolean,
   toggleAllLiquiditySources: (shouldReset: boolean) => void,
-  refetchBestRoute: () => void
+  refetchQuote: () => void
 ): Info {
-  if (hasError) {
+  if (error?.type === QuoteErrorType.REQUEST_FAILED) {
     return {
       alert: {
         type: 'warning',
         text: errorMessages().genericServerError,
         action: {
-          onClick: refetchBestRoute,
+          onClick: refetchQuote,
           title: i18n.t('Retry'),
         },
       },
       description: '',
     };
-  } else if (diagnosisMessage) {
+  } else if (
+    error?.type === QuoteErrorType.NO_RESULT &&
+    error.diagnosisMessage
+  ) {
     return {
       alert: {
         type: 'error',
-        text: diagnosisMessage,
+        text: error.diagnosisMessage,
         action: null,
       },
       description: '',
@@ -47,6 +54,6 @@ export function makeInfo(
   }
   return {
     alert: null,
-    description: errorMessages().noRoutesError.description,
+    description: errorMessages().noResultError.description,
   };
 }

package/src/components/{NoRoutes/NoRoutes.styles.ts → NoResult/NoResult.styles.ts}

@@ -1,9 +1,11 @@
 import { styled } from '@rango-dev/ui';
 
 export const Container = styled('div', {
+  minHeight: '162px',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
+  justifyContent: 'center',
 });
 
 export const Footer = styled('div', {

package/src/components/{NoRoutes/NoRoutes.tsx → NoResult/NoResult.tsx}

@@ -1,4 +1,4 @@
-import type { PropTypes } from './NoRoutes.types';
+import type { PropTypes } from './NoResult.types';
 
 import {
   Alert,
@@ -11,27 +11,25 @@ import {
 import React from 'react';
 
 import { errorMessages } from '../../constants/errors';
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useSettingsStore } from '../../store/settings';
 
-import { makeInfo } from './NoRoutes.helper';
-import { Container, Footer, PrefixIcon } from './NoRoutes.styles';
+import { makeInfo } from './NoResult.helpers';
+import { Container, Footer, PrefixIcon } from './NoResult.styles';
 
-export function NoRoutes(props: PropTypes) {
-  const { diagnosisMessage, fetch, error } = props;
+export function NoResult(props: PropTypes) {
+  const { fetch, error } = props;
   const disabledLiquiditySources =
     useSettingsStore.use.disabledLiquiditySources();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const toggleAllLiquiditySources =
     useSettingsStore.use.toggleAllLiquiditySources();
 
-  const hasError = error || loadingMetaStatus === 'failed';
+  const swappers = useAppStore().swappers();
 
   const info = makeInfo(
-    diagnosisMessage ?? null,
+    error,
     disabledLiquiditySources,
-    hasError,
-    toggleAllLiquiditySources,
+    () => toggleAllLiquiditySources(swappers, true),
     fetch
   );
 
@@ -40,7 +38,7 @@ export function NoRoutes(props: PropTypes) {
       <NoRouteIcon size={24} color="gray" />
       <Divider size={4} />
       <Typography variant="title" size="small">
-        {errorMessages().noRoutesError.title}
+        {errorMessages().noResultError.title}
       </Typography>
       {!!info.description && (
         <Typography

package/src/components/{NoRoutes/NoRoutes.types.ts → NoResult/NoResult.types.ts}

@@ -1,7 +1,8 @@
+import type { NoResultError, QuoteRequestFailed } from '../../types';
+
 export interface PropTypes {
   fetch: () => void;
-  error: boolean;
-  diagnosisMessage?: string;
+  error: NoResultError | QuoteRequestFailed | null;
 }
 
 type AlertAction = {

package/src/components/NoResult/index.ts

@@ -0,0 +1 @@
+export { NoResult } from './NoResult';

package/src/components/NotificationContent/NotificationContent.tsx

@@ -10,7 +10,7 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useMetaStore } from '../../store/meta';
+import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useUiStore } from '../../store/ui';
 
@@ -26,7 +26,8 @@ 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);

package/src/components/Quote/Quote.styles.ts

@@ -0,0 +1,212 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { darkTheme, styled } from '@rango-dev/ui';
+
+import { CollapsibleContent } from '../ConfirmWalletsModal/ConfirmWallets.styles';
+
+export const EXPANDABLE_QUOTE_TRANSITION_DURATION = 300;
+
+export const QuoteContainer = styled(Collapsible.Root, {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  width: '100%',
+  borderRadius: '$xm',
+  variants: {
+    recommended: {
+      true: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+      false: {
+        $$color: '$colors$neutral400',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral200',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+  '& .steps-details': {
+    padding: '$10 $15',
+  },
+});
+
+export const SummaryContainer = styled('div', {
+  borderRadius: '$xm',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  justifyContent: 'space-between',
+  color: '$foreground',
+  cursor: 'pointer',
+  boxSizing: 'border-box',
+  position: 'relative',
+  variants: {
+    recommended: {
+      true: {
+        $$color: '$colors$info100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary600',
+        },
+        backgroundColor: '$$color',
+        '&:hover': {
+          backgroundColor: '$$color',
+        },
+      },
+      false: {
+        $$color: '$colors$neutral200',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral500',
+        },
+        backgroundColor: '$$color',
+        '&:hover': {
+          backgroundColor: '$$color',
+        },
+      },
+    },
+    basic: { true: { borderTopRightRadius: '0', borderTopLeftRadius: '0' } },
+    listItem: {
+      true: {},
+      false: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      listItem: true,
+      recommended: true,
+      css: {
+        '&:hover': {
+          $$color: '$colors$secondary200',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$secondary700',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+    },
+    {
+      listItem: true,
+      recommended: false,
+      css: {
+        '&:hover': {
+          $$color: '$colors$neutral300',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral400',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+    },
+  ],
+  '& .summary': {
+    width: '100%',
+    padding: '$15 $15 $10 $15',
+  },
+  '& .basic-info': {
+    paddingTop: '$10',
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export const Chains = styled(Collapsible.Trigger, {
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: '$36',
+  padding: '$10 $15',
+  boxSizing: 'border-box',
+  cursor: 'pointer',
+  border: 'none',
+  outline: 'none',
+  backgroundColor: 'transparent',
+  variants: {
+    error: {
+      true: {
+        [`& ${Image}`]: {
+          border: '1px $warning500 solid',
+          borderRadius: '100%',
+        },
+      },
+      false: {
+        [`& ${Image}`]: {
+          border: '1px transparent solid',
+          borderRadius: '100%',
+        },
+      },
+    },
+    recommended: {
+      true: {
+        $$color: '$colors$info300',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$secondary800',
+        },
+        backgroundColor: '$$color',
+      },
+      false: {
+        $$color: '$colors$neutral400',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral200',
+        },
+        backgroundColor: '$$color',
+      },
+    },
+  },
+  '& div:nth-child(1)': { display: 'flex' },
+});
+
+export const Content = styled(CollapsibleContent, {
+  width: '100%',
+});
+
+export const IconContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '$2',
+  transition: `all ${EXPANDABLE_QUOTE_TRANSITION_DURATION}ms ease`,
+  variants: {
+    orientation: {
+      down: {
+        transform: 'rotate(0)',
+      },
+      up: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+});
+
+export const Separator = styled('div', {
+  height: '$12',
+  marginLeft: '$10',
+  marginRight: '$10',
+  borderLeft: '1px solid $foreground',
+});
+
+export const HorizontalSeparator = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  margin: '0 $15',
+  borderTop: '1px solid',
+  $$color: '$colors$neutral300',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral400',
+  },
+  borderColor: '$$color',
+});
+
+export const FrameIcon = styled('div', {
+  width: '$16',
+  height: '$16',
+  justifyContent: 'center',
+  alignItems: 'center',
+  display: 'flex',
+});