@rango-dev/widget-embedded 0.17.1-next.9 → 0.19.0

package/src/components/ConfirmWalletsModal/ConfirmWallets.helpers.ts

@@ -1,9 +1,71 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { Step } from '@rango-dev/ui/dist/widget/ui/src/components/BestRoute/BestRoute.types';
 import type { BestRouteResponse, BlockchainMeta } from 'rango-sdk';
 
-export function getRequiredWallets(quote: BestRouteResponse | null): string[] {
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { getBlockchainShortNameFor } from '../../utils/meta';
+import { numberToString } from '../../utils/numbers';
+
+export function formatBestRoute(
+  bestRoute: BestRouteResponse,
+  blockchains: BlockchainMeta[]
+): Step[] | undefined {
+  return bestRoute.result?.swaps.map((swap) => {
+    return {
+      swapper: { displayName: swap.swapperId, image: swap.swapperLogo },
+      from: {
+        token: { displayName: swap.from.symbol, image: swap.from.logo },
+        chain: {
+          displayName:
+            getBlockchainShortNameFor(swap.from.blockchain, blockchains) ?? '',
+          image: swap.from.blockchainLogo,
+        },
+        price: {
+          value: numberToString(
+            swap.fromAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          usdValue: numberToString(
+            swap.from.usdPrice?.toString(),
+            USD_VALUE_MIN_DECIMALS,
+            USD_VALUE_MAX_DECIMALS
+          ),
+        },
+      },
+      to: {
+        token: { displayName: swap.to.symbol, image: swap.to.logo },
+        chain: {
+          displayName:
+            getBlockchainShortNameFor(swap.to.blockchain, blockchains) ?? '',
+          image: swap.to.blockchainLogo,
+        },
+        price: {
+          value: numberToString(
+            swap.toAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          usdValue: numberToString(
+            swap.to.usdPrice?.toString(),
+            USD_VALUE_MIN_DECIMALS,
+            USD_VALUE_MAX_DECIMALS
+          ),
+        },
+      },
+    };
+  });
+}
+
+export function getRequiredWallets(route: BestRouteResponse | null): string[] {
   const wallets: string[] = [];
 
-  quote?.result?.swaps.forEach((swap) => {
+  route?.result?.swaps.forEach((swap) => {
     const currentStepFromBlockchain = swap.from.blockchain;
     const currentStepToBlockchain = swap.to.blockchain;
     let lastAddedWallet = wallets[wallets.length - 1];

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

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

@@ -1,9 +1,11 @@
-import type { ConfirmSwap } from '../../hooks/useConfirmSwap/useConfirmSwap.types';
+import type { WidgetConfig } from '../..';
+import type { ConfirmSwap } from '../../hooks/useConfirmSwap';
 
 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 { useAppStore } from '../../store/AppStore';
+import { useMetaStore } from '../../store/meta';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainDisplayNameFor } from '../../utils/meta';
 import {
@@ -41,11 +41,10 @@ import {
 } from './WalletList.styles';
 
 export function WalletList(props: PropTypes) {
-  const { chain, isSelected, selectWallet, limit, onShowMore } = props;
-  const { config } = useAppStore();
+  const { config, chain, isSelected, selectWallet, limit, onShowMore } = props;
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
-  const { blockchains } = useAppStore();
+  const { blockchains } = useMetaStore.use.meta();
   const [openWalletStateModal, setOpenWalletStateModal] =
     useState<WalletType>('');
   const [experimentalChainWallet, setExperimentalChainWallet] =
@@ -138,7 +137,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) =>
@@ -181,7 +180,7 @@ export function WalletList(props: PropTypes) {
           experimentalChainWallet?.chain
             ? getBlockchainDisplayNameFor(
                 experimentalChainWallet.chain,
-                blockchains()
+                blockchains
               )
             : undefined;
         return (

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

@@ -1,9 +1,12 @@
-import type { Wallet } from '../../types';
+import type { Wallet, WidgetConfig } 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',
   },
 
-  '.quote-summary': {
+  '.route-summary': {
     padding: '$15 $0',
   },
 
-  '.quote-summary-item': {
+  '.route-summary-item': {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
@@ -26,7 +26,7 @@ export const Container = styled('div', {
     alignItems: 'center',
   },
 
-  '.quote-summary-separator': {
+  '.route-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 quoteSummary = (
-    <div className="quote-summary-item">
+  const routeSummary = (
+    <div className="route-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="quote-summary">
-        {quoteSummary}
-        <div className="quote-summary-separator"></div>
-        {quoteSummary}
+      <div className="route-summary">
+        {routeSummary}
+        <div className="route-summary-separator"></div>
+        {routeSummary}
       </div>
 
       <div className="swaps-steps">

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

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

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

@@ -1,11 +1,9 @@
 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/{NoResult/NoResult.tsx → NoRoutes/NoRoutes.tsx}

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

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

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

package/src/components/NoRoutes/index.ts

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

package/src/components/NotificationContent/NotificationContent.tsx

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

package/src/components/RouteErrors/RouteErrors.tsx

@@ -0,0 +1,79 @@
+import type { PropTypes } from './RouteErrors.types';
+
+import { Alert, Divider, InfoIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { errorMessages } from '../../constants/errors';
+import { useBestRouteStore } from '../../store/bestRoute';
+import { hasLimitError, LimitErrorMessage } from '../../utils/swap';
+
+import { Action, Alerts } from './RouteErrors.styles';
+import { RouteErrorsModal } from './RouteErrorsModal';
+
+const WARNING_LEVEL_LIMIT = -10;
+
+export function RouteErrors(props: PropTypes) {
+  const { bestRoute } = useBestRouteStore();
+  const {
+    highValueLoss,
+    percentageChange,
+    priceImpactCanNotBeComputed,
+    openModal,
+    onToggle,
+    totalFeeInUsd,
+    outputUsdValue,
+    inputUsdValue,
+    loading,
+    extraSpace,
+  } = props;
+  const error = hasLimitError(bestRoute);
+  const { recommendation } = LimitErrorMessage(bestRoute);
+
+  const showWarnings = !error && (highValueLoss || priceImpactCanNotBeComputed);
+  const showAlerts = showWarnings || error;
+
+  return (
+    <>
+      {(loading || (extraSpace && !showAlerts)) && <Divider size={20} />}
+      {showAlerts && (
+        <Alerts>
+          {showWarnings && (
+            <>
+              <Alert
+                title={
+                  highValueLoss
+                    ? errorMessages().highValueLossError.title
+                    : errorMessages().unknownPriceError.title
+                }
+                type={
+                  highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)
+                    ? 'error'
+                    : 'warning'
+                }
+                variant="alarm"
+                action={
+                  <Action onClick={() => onToggle(true)}>
+                    <InfoIcon size={12} color="gray" />
+                  </Action>
+                }
+              />
+            </>
+          )}
+          {error && (
+            <Alert type="error" variant="alarm" title={recommendation} />
+          )}
+        </Alerts>
+      )}
+
+      <RouteErrorsModal
+        highValueLoss={highValueLoss}
+        open={openModal}
+        onToggle={onToggle}
+        percentageChange={percentageChange}
+        inputUsdValue={inputUsdValue}
+        outputUsdValue={outputUsdValue}
+        totalFeeInUsd={totalFeeInUsd}
+      />
+    </>
+  );
+}

package/src/components/RouteErrors/RouteErrors.types.ts

@@ -0,0 +1,29 @@
+import type BigNumber from 'bignumber.js';
+
+export interface PropTypes {
+  openModal: boolean;
+  onToggle: (open: boolean) => void;
+  totalFeeInUsd: BigNumber | null;
+  outputUsdValue: BigNumber | null;
+  inputUsdValue: BigNumber | null;
+  percentageChange: BigNumber | null;
+  highValueLoss: boolean;
+  priceImpactCanNotBeComputed: boolean;
+  loading: boolean;
+  extraSpace: boolean;
+}
+
+type ModalPropTypesKeys = keyof Omit<
+  PropTypes,
+  'priceImpactCanNotBeComputed' | 'openModal' | 'extraSpace' | 'loading'
+>;
+
+export type ModalPropTypes = Pick<PropTypes, ModalPropTypesKeys> & {
+  open: boolean;
+};
+
+export interface ModalContentData {
+  title: string;
+  value: string;
+  valueColor?: string;
+}