@rango-dev/widget-embedded 0.18.0 → 0.19.0

package/src/index.ts

@@ -1,5 +1,3 @@
-import type { WidgetProps } from './containers/Widget';
-import type { ConnectedWallet } from './store/wallets';
 import type {
   BlockchainAndTokenConfig,
   WidgetColors,
@@ -7,12 +5,10 @@ import type {
   WidgetConfig,
   WidgetTheme,
 } from './types';
+import type { WidgetProps } from './Widget';
 import type {
-  EventSeverity,
-  PendingSwapWithQueueID,
   Route,
   RouteEvent,
-  RouteExecutionEvents,
   RouteFailedEvent,
   RouteStartedEvent,
   RouteSucceededEvent,
@@ -31,16 +27,7 @@ import type {
   EventHandler as HandleWalletsUpdate,
   ProviderInterface,
 } from '@rango-dev/wallets-react';
-import type {
-  WalletInfo,
-  WalletState,
-  WalletType,
-} from '@rango-dev/wallets-shared';
-import type {
-  PendingSwap,
-  PendingSwapNetworkStatus,
-  PendingSwapStep,
-} from 'rango-types';
+import type { WalletType } from '@rango-dev/wallets-shared';
 
 import {
   MainEvents,
@@ -50,18 +37,10 @@ import {
   StepExecutionEventStatus,
   useEvents as useWidgetEvents,
 } from '@rango-dev/queue-manager-rango-preset';
-import {
-  readAccountAddress,
-  useWallets,
-  Events as WalletEvents,
-} from '@rango-dev/wallets-react';
-import { Networks, WalletTypes } from '@rango-dev/wallets-shared';
+import { useWallets } from '@rango-dev/wallets-react';
 
-import { WidgetWallets } from './containers/Wallets';
-import { Widget } from './containers/Widget';
-import { useWidget } from './containers/WidgetInfo';
-import { WidgetProvider } from './containers/WidgetProvider';
-import { customizedThemeTokens } from './utils/ui';
+import { WidgetWallets } from './Wallets';
+import { Widget } from './Widget';
 
 export type {
   WidgetConfig,
@@ -88,42 +67,15 @@ export type {
   StepApprovalTxSucceededEvent,
   StepOutputRevealedEvent,
   HandleWalletsUpdate,
-  ConnectedWallet,
 };
 export {
   Widget,
-  /**
-   * @deprecated Use `WidgetProvider` instead. This component will be removed in future versions.
-   */
   WidgetWallets,
-  WidgetProvider,
-  useWidget,
   useWallets,
   useWidgetEvents,
-  customizedThemeTokens,
   MainEvents,
   RouteEventType,
   StepEventType,
   StepExecutionEventStatus,
   StepExecutionBlockedEventStatus,
 };
-
-// Internal type exports for Rango
-export type {
-  WalletState,
-  WalletInfo,
-  PendingSwap,
-  PendingSwapWithQueueID,
-  PendingSwapStep,
-  RouteExecutionEvents,
-  EventSeverity,
-};
-
-// Internal function and enum exports for Rango
-export {
-  readAccountAddress,
-  Networks,
-  WalletEvents,
-  WalletTypes,
-  PendingSwapNetworkStatus,
-};

package/src/pages/ConfirmSwapPage.tsx

@@ -2,16 +2,20 @@
 import type {
   ConfirmSwap,
   ConfirmSwapFetchResult,
-} from '../hooks/useConfirmSwap/useConfirmSwap.types';
+} from '../hooks/useConfirmSwap';
+import type { WidgetConfig } from '../types';
 
 import { i18n } from '@lingui/core';
 import { useManager } from '@rango-dev/queue-manager-react';
 import {
   Alert,
+  BestRoute,
+  BestRouteSkeleton,
   Button,
-  css,
   Divider,
   IconButton,
+  MessageBox,
+  Modal,
   RefreshIcon,
   SettingsIcon,
   styled,
@@ -19,31 +23,66 @@ import {
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useNavigate } from 'react-router-dom';
 
-import { getRequiredWallets } from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
+import {
+  formatBestRoute,
+  getRequiredWallets,
+} from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
 import { ConfirmWalletsModal } from '../components/ConfirmWalletsModal/ConfirmWalletsModal';
 import { HeaderButton } from '../components/HeaderButtons/HeaderButtons.styles';
 import { Layout } from '../components/Layout';
+import { NoRoutes } from '../components/NoRoutes';
+import { getConfirmSwapErrorMessage } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { getQuoteUpdateWarningMessage } from '../constants/warnings';
-import { QuoteInfo } from '../containers/QuoteInfo';
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../constants/routing';
+import { getRouteWarningMessage } from '../constants/warnings';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
-import { useAppStore } from '../store/AppStore';
-import { useQuoteStore } from '../store/quote';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
-import { QuoteWarningType } from '../types';
+import {
+  ConfirmSwapErrorTypes,
+  RouteWarningType,
+  SlippageWarningType,
+} from '../types';
 import { getContainer } from '../utils/common';
+import {
+  numberToString,
+  secondsToString,
+  totalArrivalTime,
+} from '../utils/numbers';
+import { getPriceImpactLevel } from '../utils/routing';
+import { getPercentageChange, getTotalFeeInUsd } from '../utils/swap';
 
 const Container = styled('div', {
   position: 'relative',
   width: '100%',
-
-  '& .quote-update__alert': {
-    paddingTop: '$10',
+  '& .description': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingBottom: '$10',
+  },
+  '& .icon': {
+    width: '$24',
+    height: '$24',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 });
 
@@ -51,55 +90,54 @@ const Buttons = styled('div', {
   width: '100%',
   display: 'flex',
   justifyContent: 'space-between',
+  '& .confirm-button': {
+    flexGrow: 1,
+    paddingRight: '$10',
+  },
   [`& ${IconButton}`]: {
     width: '$48',
     height: '$48',
   },
 });
 
-const confirmBtnStyles = css({
-  flexGrow: 1,
-  paddingRight: '$10',
-});
-
-const iconStyles = css({
-  width: '$24',
-  height: '$24',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
+type PropTypes = {
+  config?: WidgetConfig;
+};
 
-const descriptionStyles = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-});
-
-export function ConfirmSwapPage() {
+export function ConfirmSwapPage(props: PropTypes) {
   //TODO: move component's logics to a custom hook
+  const { config } = props;
   const {
-    quote,
+    bestRoute,
+    inputAmount,
+    outputAmount,
+    inputUsdValue,
+    outputUsdValue,
     setInputAmount,
     selectedWallets,
-    quoteWalletsConfirmed,
-    setQuoteWalletConfirmed,
+    routeWalletsConfirmed,
+    setRouteWalletConfirmed,
     customDestination,
-    quoteWarningsConfirmed,
-  } = useQuoteStore();
+  } = useBestRouteStore();
   const navigate = useNavigate();
   const [dbErrorMessage, setDbErrorMessage] = useState<string>('');
+  const [showSlippageWarning, setShowSlippageWarning] = useState(false);
 
   const { connectedWallets } = useWalletsStore();
-  const showWalletsOnInit = !quoteWalletsConfirmed;
+  const showWalletsOnInit = !routeWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
-  const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
+  const {
+    meta: { tokens, blockchains },
+    loadingStatus: loadingMetaStatus,
+  } = useMetaStore();
+  const slippage = useSettingsStore.use.slippage();
+  const customSlippage = useSettingsStore.use.customSlippage();
   const { manager } = useManager();
+  const selectedSlippage = customSlippage || slippage;
   const {
     fetch: confirmSwap,
-    loading: fetchingConfirmationQuote,
+    loading: fetchingConfirmationRoute,
     cancelFetch,
   } = useConfirmSwap();
   const [confirmSwapResult, setConfirmSwapResult] =
@@ -108,8 +146,32 @@ export function ConfirmSwapPage() {
       error: null,
       warnings: null,
     });
+  const showSkeleton =
+    fetchingConfirmationRoute || loadingMetaStatus === 'loading';
+  const showNoRouteFound =
+    !fetchingConfirmationRoute &&
+    confirmSwapResult.error &&
+    [
+      ConfirmSwapErrorTypes.NO_ROUTE,
+      ConfirmSwapErrorTypes.REQUEST_FAILED,
+    ].includes(confirmSwapResult.error.type);
+  const showBestRoute =
+    !showNoRouteFound &&
+    !fetchingConfirmationRoute &&
+    bestRoute &&
+    bestRoute.result;
+
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
+  const percentageChange = numberToString(
+    getPercentageChange(
+      inputUsdValue?.toNumber() ?? 0,
+      outputUsdValue?.toNumber() ?? 0
+    ),
+    PERCENTAGE_CHANGE_MIN_DECIMALS,
+    PERCENTAGE_CHANGE_MAX_DECIMALS
+  );
 
-  const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
+  const warningLevel = getPriceImpactLevel(parseFloat(percentageChange));
 
   const onConfirmSwap: ConfirmSwap['fetch'] = async ({
     selectedWallets,
@@ -121,7 +183,7 @@ export function ConfirmSwapPage() {
   };
 
   const addNewSwap = async () => {
-    if (confirmSwapResult.swap && quoteWalletsConfirmed) {
+    if (confirmSwapResult.swap && routeWalletsConfirmed) {
       try {
         await manager?.create(
           'swap',
@@ -129,11 +191,12 @@ export function ConfirmSwapPage() {
           { id: confirmSwapResult.swap.requestId }
         );
         setSelectedSwap(confirmSwapResult.swap.requestId);
-
-        const swap_url = `../${navigationRoutes.swaps}/${confirmSwapResult.swap.requestId}`;
-        navigate(swap_url, {
-          replace: true,
-        });
+        navigate(
+          '/' + navigationRoutes.swaps + `/${confirmSwapResult.swap.requestId}`,
+          {
+            replace: true,
+          }
+        );
         setTimeout(() => {
           setInputAmount('');
         }, 0);
@@ -148,8 +211,8 @@ export function ConfirmSwapPage() {
   };
 
   const onStartConfirmSwap = async () => {
-    if (confirmSwapResult?.warnings?.quote && !quoteWarningsConfirmed) {
-      setShowQuoteWarningModal(true);
+    if (confirmSwapResult?.warnings?.slippage) {
+      setShowSlippageWarning(true);
     } else {
       await onConfirm();
     }
@@ -161,23 +224,13 @@ export function ConfirmSwapPage() {
       swap: null,
       warnings: null,
     });
-    confirmSwap({ selectedWallets, customDestination })
+    confirmSwap({ selectedWallets })
       .then((res) => {
         setConfirmSwapResult(res);
       })
       .catch((error) => console.error(error));
   };
 
-  useEffect(() => {
-    const disabledLiquiditySourceReset =
-      !!prevDisabledLiquiditySources.current.length &&
-      !disabledLiquiditySources.length;
-    if (disabledLiquiditySourceReset) {
-      void onRefresh();
-    }
-    prevDisabledLiquiditySources.current = disabledLiquiditySources;
-  }, [disabledLiquiditySources.length]);
-
   useEffect(() => {
     if (showWalletsOnInit) {
       cancelFetch();
@@ -199,10 +252,10 @@ export function ConfirmSwapPage() {
   }, []);
 
   useEffect(() => {
-    const quoteChanged =
-      confirmSwapResult.warnings?.quote?.type &&
-      Object.values(QuoteWarningType).includes(
-        confirmSwapResult.warnings?.quote?.type
+    const routeChanged =
+      confirmSwapResult.warnings?.route?.type &&
+      Object.values(RouteWarningType).includes(
+        confirmSwapResult.warnings?.route?.type
       );
 
     const selectedWalletDisconnected =
@@ -216,15 +269,16 @@ export function ConfirmSwapPage() {
         )
       );
 
-    let quoteWalletsChanged = false;
+    let routeWalletsChanged = false;
 
-    if (quoteChanged) {
-      let requiredWallets = getRequiredWallets(quote);
+    if (routeChanged) {
+      let requiredWallets = getRequiredWallets(bestRoute);
 
       const lastStepToBlockchain =
-        quote?.result?.swaps[quote.result.swaps.length - 1].to.blockchain;
+        bestRoute?.result?.swaps[bestRoute.result.swaps.length - 1].to
+          .blockchain;
 
-      const isLastWalletRequired = !!quote?.result?.swaps.find(
+      const isLastWalletRequired = !!bestRoute?.result?.swaps.find(
         (swap) => swap.from.blockchain === lastStepToBlockchain
       );
 
@@ -243,34 +297,26 @@ export function ConfirmSwapPage() {
       );
 
       if (!allRequiredWalletsSelected) {
-        quoteWalletsChanged = true;
+        routeWalletsChanged = true;
       }
     }
 
-    if (quote && (selectedWalletDisconnected || quoteWalletsChanged)) {
+    if (bestRoute && (selectedWalletDisconnected || routeWalletsChanged)) {
       queueMicrotask(() => flushSync(setShowWallets.bind(null, true)));
-      setQuoteWalletConfirmed(false);
+      setRouteWalletConfirmed(false);
     }
   }, [
-    confirmSwapResult.warnings?.quote,
+    confirmSwapResult.warnings?.route,
     selectedWallets.length,
     connectedWallets.length,
   ]);
 
-  useLayoutEffect(() => {
-    if (!quote) {
-      navigate(`../`);
-    }
-  }, []);
-
   return (
     <Layout
       header={{
         title: i18n.t('Confirm Swap'),
-        onWallet: () => {
-          const wallets_url = `../${navigationRoutes.wallets}`;
-          navigate(wallets_url);
-        },
+        onBack: navigate.bind(null, -1),
+        hasConnectWallet: true,
         suffix: (
           <Tooltip
             container={getContainer()}
@@ -279,7 +325,7 @@ export function ConfirmSwapPage() {
             <HeaderButton
               size="small"
               variant="ghost"
-              onClick={() => navigate('../' + navigationRoutes.settings)}>
+              onClick={() => navigate('/' + navigationRoutes.settings)}>
               <SettingsIcon size={18} color="black" />
             </HeaderButton>
           </Tooltip>
@@ -287,13 +333,13 @@ export function ConfirmSwapPage() {
       }}
       footer={
         <Buttons>
-          <div className={confirmBtnStyles()}>
+          <div className="confirm-button">
             <Button
               variant="contained"
               type="primary"
               size="large"
               fullWidth
-              loading={fetchingConfirmationQuote}
+              loading={fetchingConfirmationRoute}
               disabled={!!confirmSwapResult.error}
               onClick={onStartConfirmSwap}>
               {i18n.t('Start Swap')}
@@ -303,33 +349,86 @@ export function ConfirmSwapPage() {
             variant="contained"
             type="primary"
             size="large"
-            loading={fetchingConfirmationQuote}
+            loading={fetchingConfirmationRoute}
             onClick={setShowWallets.bind(null, true)}>
             <WalletIcon size={24} />
           </IconButton>
         </Buttons>
       }>
+      <Modal
+        anchor="bottom"
+        open={showSlippageWarning}
+        prefix={
+          <Button
+            size="small"
+            variant="ghost"
+            onClick={() => navigate('/' + navigationRoutes.settings)}>
+            <Typography variant="label" size="medium" color="$neutral700">
+              {i18n.t('Change settings')}
+            </Typography>
+          </Button>
+        }
+        container={document.querySelector('#swap-box') as HTMLDivElement}
+        onClose={setShowSlippageWarning.bind(null, (prevState) => !prevState)}>
+        {confirmSwapResult.warnings?.slippage && (
+          <MessageBox
+            type="warning"
+            title={
+              confirmSwapResult.warnings.slippage.type ===
+              SlippageWarningType.HIGH_SLIPPAGE
+                ? i18n.t('High slippage')
+                : i18n.t('Low slippage')
+            }
+            description={
+              confirmSwapResult.warnings.slippage.type ===
+              SlippageWarningType.HIGH_SLIPPAGE
+                ? i18n.t({
+                    id: ' Caution, your slippage is high (={selectedSlippage}). Your trade may be front run.',
+                    values: { selectedSlippage },
+                  })
+                : i18n.t({
+                    id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+                    values: {
+                      minRequiredSlippage:
+                        confirmSwapResult.warnings.slippage.slippage,
+                    },
+                  })
+            }>
+            <Divider size={18} />
+            <Divider size={32} />
+            <Button
+              size="large"
+              type="primary"
+              variant="contained"
+              fullWidth
+              onClick={onConfirm}>
+              {i18n.t('Confirm anyway')}
+            </Button>
+          </MessageBox>
+        )}
+      </Modal>
       {showWallets && (
         <ConfirmWalletsModal
           open={showWallets}
           onClose={() => setShowWallets(false)}
           onCancel={cancelFetch}
-          loading={fetchingConfirmationQuote}
+          loading={fetchingConfirmationRoute}
           onCheckBalance={onConfirmSwap}
+          config={config}
         />
       )}
 
       <Container>
-        <div className={descriptionStyles()}>
+        <div className="description">
           <Typography variant="title" size="small">
             {i18n.t('You get')}
           </Typography>
           <Button
             style={{ padding: '0' }}
             variant="ghost"
-            disabled={fetchingConfirmationQuote}
+            disabled={fetchingConfirmationRoute}
             onClick={onRefresh}>
-            <div className={iconStyles()}>
+            <div className="icon">
               <RefreshIcon size={16} />
             </div>
           </Button>
@@ -340,38 +439,88 @@ export function ConfirmSwapPage() {
             <Divider size={12} />
           </>
         )}
-        {confirmSwapResult.warnings?.quoteUpdate && (
-          <div className="quote-update__alert">
+        {confirmSwapResult.warnings?.route && (
+          <>
             <Alert
               variant="alarm"
               type="warning"
-              title={
-                confirmSwapResult.warnings.quoteUpdate &&
-                getQuoteUpdateWarningMessage(
-                  confirmSwapResult.warnings.quoteUpdate
-                )
+              title={getRouteWarningMessage(confirmSwapResult.warnings.route)}
+            />
+            <Divider size={12} />
+          </>
+        )}
+        {showSkeleton && <BestRouteSkeleton type="swap-preview" expanded />}
+        {showBestRoute && (
+          <BestRoute
+            expanded={true}
+            tooltipContainer={getContainer()}
+            steps={formatBestRoute(bestRoute, blockchains) ?? []}
+            input={{
+              value: numberToString(
+                inputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
+              usdValue: numberToString(
+                inputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
+            }}
+            output={{
+              value: numberToString(
+                outputAmount,
+                TOKEN_AMOUNT_MIN_DECIMALS,
+                TOKEN_AMOUNT_MAX_DECIMALS
+              ),
+              usdValue: numberToString(
+                outputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
+            }}
+            totalFee={numberToString(
+              totalFeeInUsd,
+              GAS_FEE_MIN_DECIMALS,
+              GAS_FEE_MAX_DECIMALS
+            )}
+            totalTime={secondsToString(
+              totalArrivalTime(bestRoute.result?.swaps)
+            )}
+            recommended={true}
+            type="swap-preview"
+            percentageChange={percentageChange}
+            warningLevel={warningLevel}
+          />
+        )}
+        {showNoRouteFound && (
+          <>
+            <Divider size={12} />
+            <NoRoutes
+              diagnosisMessage={
+                confirmSwapResult.error?.type === ConfirmSwapErrorTypes.NO_ROUTE
+                  ? confirmSwapResult.error.diagnosisMessage
+                  : undefined
               }
+              error={
+                confirmSwapResult.error?.type ===
+                ConfirmSwapErrorTypes.REQUEST_FAILED
+              }
+              fetch={onRefresh}
             />
-          </div>
+          </>
+        )}
+        {confirmSwapResult.error?.type ===
+          ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS && (
+          <>
+            <Alert
+              variant="alarm"
+              type="error"
+              title={getConfirmSwapErrorMessage(confirmSwapResult.error)}
+            />
+            <Divider size={12} />
+          </>
         )}
-        <QuoteInfo
-          quote={quote}
-          type="swap-preview"
-          expanded={true}
-          alertPosition="top"
-          error={confirmSwapResult.error}
-          loading={fetchingConfirmationQuote}
-          warning={confirmSwapResult.warnings?.quote ?? null}
-          refetchQuote={onRefresh}
-          showWarningModal={showQuoteWarningModal}
-          onOpenWarningModal={() => setShowQuoteWarningModal(true)}
-          onCloseWarningModal={() => setShowQuoteWarningModal(false)}
-          onConfirmWarningModal={async () => {
-            setShowQuoteWarningModal(false);
-            await addNewSwap();
-          }}
-          onChangeSettings={() => navigate('../' + navigationRoutes.settings)}
-        />
       </Container>
     </Layout>
   );