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

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,14 +1,13 @@
-import type { WidgetConfig } from '../types';
 import type { Asset } from 'rango-sdk';
 
 import { useEffect, useMemo, useRef } from 'react';
 
-import { useBestRouteStore } from '../store/bestRoute';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
 import { useSettingsStore } from '../store/settings';
 import { tokensAreEqual } from '../utils/wallets';
 
-export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
+export function useSyncStoresWithConfig() {
   const {
     setInputAmount,
     setToToken,
@@ -19,12 +18,12 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     toToken,
     fromBlockchain,
     toBlockchain,
-  } = useBestRouteStore();
+  } = useQuoteStore();
 
-  const {
-    meta: { tokens, blockchains },
-    loadingStatus: loadingMetaStatus,
-  } = useMetaStore();
+  const config = useAppStore().config;
+  const fetchMetaStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
 
   const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
     useSettingsStore();
@@ -55,7 +54,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   }, [config?.amount]);
 
   useEffect(() => {
-    if (loadingMetaStatus === 'success') {
+    if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.from?.blockchain
       );
@@ -67,8 +66,10 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
         setFromBlockchain(chain ?? null);
       }
 
-      if (token || (!token && prevConfigFromToken.current)) {
-        setFromToken(token ?? null);
+      if (token) {
+        setFromToken({ token, meta: { blockchains, tokens } });
+      } else if (!token && prevConfigFromToken.current) {
+        setFromToken({ token: null });
       }
 
       prevConfigFromBlockchain.current = config?.from?.blockchain;
@@ -79,13 +80,13 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     config?.from?.token?.address,
     config?.from?.token?.blockchain,
     config?.from?.blockchain,
-    loadingMetaStatus,
+    fetchMetaStatus,
   ]);
 
   useEffect(() => {
     if (fromToken && fromTokensConfig) {
       if (!fromTokensConfig.some((token) => tokensAreEqual(token, fromToken))) {
-        setFromToken(null);
+        setFromToken({ token: null });
       }
     }
 
@@ -99,7 +100,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   useEffect(() => {
     if (toToken && toTokensConfig) {
       if (!toTokensConfig.some((token) => tokensAreEqual(token, toToken))) {
-        setToToken(null);
+        setToToken({ token: null });
       }
     }
 
@@ -111,7 +112,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   }, [toTokensConfig, toBlockchainsConfig]);
 
   useEffect(() => {
-    if (loadingMetaStatus === 'success') {
+    if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.to?.blockchain
       );
@@ -123,8 +124,10 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
         setToBlockchain(chain ?? null);
       }
 
-      if (token || (!token && prevConfigToToken.current)) {
-        setToToken(token ?? null);
+      if (token) {
+        setToToken({ token, meta: { blockchains, tokens } });
+      } else if (!token && prevConfigToToken.current) {
+        setToToken({ token: null });
       }
 
       prevConfigToBlockchain.current = config?.to?.blockchain;
@@ -135,7 +138,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     config?.to?.token?.address,
     config?.to?.token?.blockchain,
     config?.to?.blockchain,
-    loadingMetaStatus,
+    fetchMetaStatus,
   ]);
 
   useEffect(() => {

package/src/hooks/useWalletList.ts

@@ -10,7 +10,7 @@ import {
 } from '@rango-dev/wallets-shared';
 import { useEffect, useState } from 'react';
 
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useWalletsStore } from '../store/wallets';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
@@ -37,9 +37,7 @@ export function useWalletList(params: Params) {
   const { config, chain, onBeforeConnect, onConnect } = params;
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const { connectedWallets } = useWalletsStore();
-  const { blockchains } = useMetaStore().meta;
-  const multiWallets =
-    typeof config?.multiWallets === 'undefined' ? true : config.multiWallets;
+  const blockchains = useAppStore().blockchains();
 
   /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
   const listAvailableWalletTypes =
@@ -76,7 +74,7 @@ export function useWalletList(params: Params) {
         const atLeastOneWalletIsConnected = !!wallets.find(
           (w) => w.state === WalletState.CONNECTED
         );
-        if (!multiWallets && atLeastOneWalletIsConnected) {
+        if (!config?.multiWallets && atLeastOneWalletIsConnected) {
           return;
         }
         onBeforeConnect?.(type);

package/src/index.ts

@@ -1,3 +1,4 @@
+import type { WidgetProps } from './containers/Widget';
 import type {
   BlockchainAndTokenConfig,
   WidgetColors,
@@ -5,7 +6,6 @@ import type {
   WidgetConfig,
   WidgetTheme,
 } from './types';
-import type { WidgetProps } from './Widget';
 import type {
   Route,
   RouteEvent,
@@ -39,8 +39,10 @@ import {
 } from '@rango-dev/queue-manager-rango-preset';
 import { useWallets } from '@rango-dev/wallets-react';
 
-import { WidgetWallets } from './Wallets';
-import { Widget } from './Widget';
+import { WidgetWallets } from './containers/Wallets';
+import { Widget } from './containers/Widget';
+import { useWidget } from './containers/WidgetInfo';
+import { WidgetProvider } from './containers/WidgetProvider';
 
 export type {
   WidgetConfig,
@@ -70,7 +72,12 @@ export type {
 };
 export {
   Widget,
+  /**
+   * @deprecated Use `WidgetProvider` instead. This component will be removed in future versions.
+   */
   WidgetWallets,
+  WidgetProvider,
+  useWidget,
   useWallets,
   useWidgetEvents,
   MainEvents,

package/src/pages/ConfirmSwapPage.tsx

@@ -2,20 +2,15 @@
 import type {
   ConfirmSwap,
   ConfirmSwapFetchResult,
-} from '../hooks/useConfirmSwap';
-import type { WidgetConfig } from '../types';
+} from '../hooks/useConfirmSwap/useConfirmSwap.types';
 
 import { i18n } from '@lingui/core';
 import { useManager } from '@rango-dev/queue-manager-react';
 import {
   Alert,
-  BestRoute,
-  BestRouteSkeleton,
   Button,
   Divider,
   IconButton,
-  MessageBox,
-  Modal,
   RefreshIcon,
   SettingsIcon,
   styled,
@@ -27,46 +22,19 @@ import React, { useEffect, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useNavigate } from 'react-router-dom';
 
-import {
-  formatBestRoute,
-  getRequiredWallets,
-} from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
+import { 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 {
-  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 { getQuoteUpdateWarningMessage } from '../constants/warnings';
+import { QuoteInfo } from '../containers/QuoteInfo';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
-import { useBestRouteStore } from '../store/bestRoute';
-import { useMetaStore } from '../store/meta';
-import { useSettingsStore } from '../store/settings';
+import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
-import {
-  ConfirmSwapErrorTypes,
-  RouteWarningType,
-  SlippageWarningType,
-} from '../types';
+import { QuoteWarningType } 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',
@@ -100,44 +68,28 @@ const Buttons = styled('div', {
   },
 });
 
-type PropTypes = {
-  config?: WidgetConfig;
-};
-
-export function ConfirmSwapPage(props: PropTypes) {
+export function ConfirmSwapPage() {
   //TODO: move component's logics to a custom hook
-  const { config } = props;
   const {
-    bestRoute,
-    inputAmount,
-    outputAmount,
-    inputUsdValue,
-    outputUsdValue,
+    quote,
     setInputAmount,
     selectedWallets,
-    routeWalletsConfirmed,
-    setRouteWalletConfirmed,
+    quoteWalletsConfirmed,
+    setQuoteWalletConfirmed,
     customDestination,
-  } = useBestRouteStore();
+    quoteWarningsConfirmed,
+  } = useQuoteStore();
   const navigate = useNavigate();
   const [dbErrorMessage, setDbErrorMessage] = useState<string>('');
-  const [showSlippageWarning, setShowSlippageWarning] = useState(false);
 
   const { connectedWallets } = useWalletsStore();
-  const showWalletsOnInit = !routeWalletsConfirmed;
+  const showWalletsOnInit = !quoteWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  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: fetchingConfirmationRoute,
+    loading: fetchingConfirmationQuote,
     cancelFetch,
   } = useConfirmSwap();
   const [confirmSwapResult, setConfirmSwapResult] =
@@ -146,32 +98,8 @@ export function ConfirmSwapPage(props: PropTypes) {
       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 warningLevel = getPriceImpactLevel(parseFloat(percentageChange));
+  const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
 
   const onConfirmSwap: ConfirmSwap['fetch'] = async ({
     selectedWallets,
@@ -183,7 +111,7 @@ export function ConfirmSwapPage(props: PropTypes) {
   };
 
   const addNewSwap = async () => {
-    if (confirmSwapResult.swap && routeWalletsConfirmed) {
+    if (confirmSwapResult.swap && quoteWalletsConfirmed) {
       try {
         await manager?.create(
           'swap',
@@ -211,8 +139,8 @@ export function ConfirmSwapPage(props: PropTypes) {
   };
 
   const onStartConfirmSwap = async () => {
-    if (confirmSwapResult?.warnings?.slippage) {
-      setShowSlippageWarning(true);
+    if (confirmSwapResult?.warnings?.quote && !quoteWarningsConfirmed) {
+      setShowQuoteWarningModal(true);
     } else {
       await onConfirm();
     }
@@ -252,10 +180,10 @@ export function ConfirmSwapPage(props: PropTypes) {
   }, []);
 
   useEffect(() => {
-    const routeChanged =
-      confirmSwapResult.warnings?.route?.type &&
-      Object.values(RouteWarningType).includes(
-        confirmSwapResult.warnings?.route?.type
+    const quoteChanged =
+      confirmSwapResult.warnings?.quote?.type &&
+      Object.values(QuoteWarningType).includes(
+        confirmSwapResult.warnings?.quote?.type
       );
 
     const selectedWalletDisconnected =
@@ -269,16 +197,15 @@ export function ConfirmSwapPage(props: PropTypes) {
         )
       );
 
-    let routeWalletsChanged = false;
+    let quoteWalletsChanged = false;
 
-    if (routeChanged) {
-      let requiredWallets = getRequiredWallets(bestRoute);
+    if (quoteChanged) {
+      let requiredWallets = getRequiredWallets(quote);
 
       const lastStepToBlockchain =
-        bestRoute?.result?.swaps[bestRoute.result.swaps.length - 1].to
-          .blockchain;
+        quote?.result?.swaps[quote.result.swaps.length - 1].to.blockchain;
 
-      const isLastWalletRequired = !!bestRoute?.result?.swaps.find(
+      const isLastWalletRequired = !!quote?.result?.swaps.find(
         (swap) => swap.from.blockchain === lastStepToBlockchain
       );
 
@@ -297,16 +224,16 @@ export function ConfirmSwapPage(props: PropTypes) {
       );
 
       if (!allRequiredWalletsSelected) {
-        routeWalletsChanged = true;
+        quoteWalletsChanged = true;
       }
     }
 
-    if (bestRoute && (selectedWalletDisconnected || routeWalletsChanged)) {
+    if (quote && (selectedWalletDisconnected || quoteWalletsChanged)) {
       queueMicrotask(() => flushSync(setShowWallets.bind(null, true)));
-      setRouteWalletConfirmed(false);
+      setQuoteWalletConfirmed(false);
     }
   }, [
-    confirmSwapResult.warnings?.route,
+    confirmSwapResult.warnings?.quote,
     selectedWallets.length,
     connectedWallets.length,
   ]);
@@ -315,7 +242,7 @@ export function ConfirmSwapPage(props: PropTypes) {
     <Layout
       header={{
         title: i18n.t('Confirm Swap'),
-        onBack: navigate.bind(null, -1),
+        onBack: () => navigate(-1),
         hasConnectWallet: true,
         suffix: (
           <Tooltip
@@ -339,7 +266,7 @@ export function ConfirmSwapPage(props: PropTypes) {
               type="primary"
               size="large"
               fullWidth
-              loading={fetchingConfirmationRoute}
+              loading={fetchingConfirmationQuote}
               disabled={!!confirmSwapResult.error}
               onClick={onStartConfirmSwap}>
               {i18n.t('Start Swap')}
@@ -349,72 +276,19 @@ export function ConfirmSwapPage(props: PropTypes) {
             variant="contained"
             type="primary"
             size="large"
-            loading={fetchingConfirmationRoute}
+            loading={fetchingConfirmationQuote}
             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={fetchingConfirmationRoute}
+          loading={fetchingConfirmationQuote}
           onCheckBalance={onConfirmSwap}
-          config={config}
         />
       )}
 
@@ -426,7 +300,7 @@ export function ConfirmSwapPage(props: PropTypes) {
           <Button
             style={{ padding: '0' }}
             variant="ghost"
-            disabled={fetchingConfirmationRoute}
+            disabled={fetchingConfirmationQuote}
             onClick={onRefresh}>
             <div className="icon">
               <RefreshIcon size={16} />
@@ -439,88 +313,37 @@ export function ConfirmSwapPage(props: PropTypes) {
             <Divider size={12} />
           </>
         )}
-        {confirmSwapResult.warnings?.route && (
+        {confirmSwapResult.warnings?.quoteUpdate && (
           <>
             <Alert
               variant="alarm"
               type="warning"
-              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
+              title={
+                confirmSwapResult.warnings.quoteUpdate &&
+                getQuoteUpdateWarningMessage(
+                  confirmSwapResult.warnings.quoteUpdate
+                )
               }
-              error={
-                confirmSwapResult.error?.type ===
-                ConfirmSwapErrorTypes.REQUEST_FAILED
-              }
-              fetch={onRefresh}
-            />
-          </>
-        )}
-        {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}
+          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();
+          }}
+        />
       </Container>
     </Layout>
   );

package/src/pages/HistoryPage.tsx

@@ -78,7 +78,7 @@ export function HistoryPage() {
   return (
     <Layout
       header={{
-        onBack: navigateBackFrom.bind(null, navigationRoutes.swaps),
+        onBack: () => navigateBackFrom(navigationRoutes.swaps),
         title: i18n.t('History'),
       }}>
       <Container>