@rango-dev/widget-embedded 0.17.1-next.2 → 0.17.1-next.21

package/src/pages/Home.tsx

@@ -1,32 +1,16 @@
-import type { SwapResult } from 'rango-sdk';
-
 import { i18n } from '@lingui/core';
-import {
-  Alert,
-  BestRoute,
-  BestRouteSkeleton,
-  Button,
-  Divider,
-  styled,
-  SwapInput,
-  Typography,
-  WarningIcon,
-} from '@rango-dev/ui';
+import { Button, styled, SwapInput, WarningIcon } from '@rango-dev/ui';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { HomeButtons } from '../components/HeaderButtons';
 import { Layout } from '../components/Layout';
-import { NoRoutes } from '../components/NoRoutes';
-import { RouteErrors } from '../components/RouteErrors';
 import { SwitchFromAndToButton } from '../components/SwitchFromAndTo';
 import { errorMessages } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import {
   BALANCE_MAX_DECIMALS,
   BALANCE_MIN_DECIMALS,
-  GAS_FEE_MAX_DECIMALS,
-  GAS_FEE_MIN_DECIMALS,
   PERCENTAGE_CHANGE_MAX_DECIMALS,
   PERCENTAGE_CHANGE_MIN_DECIMALS,
   TOKEN_AMOUNT_MAX_DECIMALS,
@@ -34,36 +18,24 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../constants/routing';
+import { QuoteInfo } from '../containers/QuoteInfo';
 import { useSwapInput } from '../hooks/useSwapInput';
-import { useBestRouteStore } from '../store/bestRoute';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
-import { ButtonState } from '../types';
-import { getContainer } from '../utils/common';
-import { getBlockchainShortNameFor } from '../utils/meta';
-import {
-  numberToString,
-  secondsToString,
-  totalArrivalTime,
-} from '../utils/numbers';
-import { getFormattedBestRoute, getPriceImpactLevel } from '../utils/routing';
-import {
-  canComputePriceImpact,
-  getOutputRatio,
-  getPercentageChange,
-  getSwapButtonState,
-  getTotalFeeInUsd,
-  hasLimitError,
-  LimitErrorMessage,
-  outputRatioHasWarning,
-} from '../utils/swap';
+import { numberToString } from '../utils/numbers';
+import { getPriceImpact, getPriceImpactLevel } from '../utils/quote';
+import { canComputePriceImpact, getSwapButtonState } from '../utils/swap';
 import { getBalanceFromWallet } from '../utils/wallets';
 
 const Container = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   overflowY: 'visible',
+  '& .quote__container': {
+    paddingTop: '$2',
+  },
 });
 
 const FromContainer = styled('div', {
@@ -76,27 +48,13 @@ const InputsContainer = styled('div', {
   gap: 5,
   alignSelf: 'stretch',
 });
-
-const BestRouteContainer = styled('div', {
-  width: '100%',
-  paddingTop: '$2',
-});
-
-const FooterStepAlarm = styled('div', {
-  paddingBottom: '$15',
-});
-
-const FooterAlert = styled('div', {
-  width: '100%',
-  display: 'flex',
-});
-
 export function Home() {
   const navigate = useNavigate();
   const {
-    fetch: refetchBestRoute,
-    loading: fetchingBestRoute,
-    error: bestRouteError,
+    fetch: fetchQuote,
+    loading: fetchingQuote,
+    error: quoteError,
+    warning: quoteWarning,
   } = useSwapInput();
   const {
     fromToken,
@@ -108,56 +66,42 @@ export function Home() {
     inputUsdValue,
     outputAmount,
     outputUsdValue,
-    bestRoute,
-    resetRouteWallets,
-  } = useBestRouteStore();
+    quote,
+    resetQuoteWallets,
+    setQuoteWarningsConfirmed,
+  } = useQuoteStore();
 
-  const {
-    meta: { tokens, blockchains },
-    loadingStatus: loadingMetaStatus,
-  } = useMetaStore();
+  const fetchMetaStatus = useAppStore().fetchStatus;
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const setCurrentPage = useUiStore.use.setCurrentPage();
-  const [openWarningModal, setOpenWarningModal] = useState(false);
-  const {
-    fromAmountRangeError,
-    swap: swapHasError,
-    recommendation,
-  } = LimitErrorMessage(bestRoute);
+  const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
   const layoutRef = useRef<HTMLDivElement>(null);
 
-  const showBestRoute =
-    !!Number(inputAmount) &&
-    (!!bestRoute || fetchingBestRoute || !!bestRouteError);
-
   const needsToWarnEthOnPath = false;
 
-  const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
-  const highValueLoss = outputRatioHasWarning(inputUsdValue, outToInRatio);
-
   const priceImpactInputCanNotBeComputed = !canComputePriceImpact(
-    bestRoute,
+    quote,
     inputAmount,
     inputUsdValue
   );
 
   const priceImpactOutputCanNotBeComputed = !canComputePriceImpact(
-    bestRoute,
+    quote,
     inputAmount,
     outputUsdValue
   );
-  const swapButtonState = getSwapButtonState(
-    loadingMetaStatus,
-    connectedWallets,
-    fetchingBestRoute,
-    bestRoute,
-    hasLimitError(bestRoute),
-    highValueLoss,
-    priceImpactInputCanNotBeComputed || priceImpactOutputCanNotBeComputed,
+
+  const swapButtonState = getSwapButtonState({
+    fetchMetaStatus,
+    fetchingQuote,
+    inputAmount,
+    quote,
+    anyWalletConnected: connectedWallets.length > 0,
+    error: quoteError,
+    warning: quoteWarning,
     needsToWarnEthOnPath,
-    inputAmount
-  );
+  });
 
   const tokenBalance =
     !!fromBlockchain && !!fromToken
@@ -193,90 +137,14 @@ export function Home() {
 
   useEffect(() => {
     setCurrentPage(navigationRoutes.home);
-    resetRouteWallets();
+    resetQuoteWallets();
     return setCurrentPage.bind(null, '');
   }, []);
 
   const percentageChange =
     !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
       ? null
-      : getPercentageChange(
-          inputUsdValue.toNumber(),
-          outputUsdValue.toNumber()
-        );
-
-  const getBestRouteSteps = (swaps: SwapResult[]) => {
-    return swaps.map((swap, index) => ({
-      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:
-            index === 0
-              ? numberToString(
-                  inputAmount,
-                  TOKEN_AMOUNT_MIN_DECIMALS,
-                  TOKEN_AMOUNT_MAX_DECIMALS
-                )
-              : swap.fromAmount,
-        },
-      },
-      to: {
-        token: { displayName: swap.to.symbol, image: swap.to.logo },
-        chain: {
-          displayName:
-            getBlockchainShortNameFor(swap.to.blockchain, blockchains) ?? '',
-          image: swap.to.blockchainLogo,
-        },
-        price: {
-          value: swap.toAmount,
-        },
-      },
-      alerts:
-        swap.swapperId === swapHasError?.swapperId ? (
-          <FooterStepAlarm>
-            <Alert
-              type="error"
-              title={recommendation}
-              footer={
-                <FooterAlert>
-                  <Typography size="xsmall" variant="body" color="neutral700">
-                    {fromAmountRangeError}
-                  </Typography>
-                  <Divider direction="horizontal" size={8} />
-                  <Typography size="xsmall" variant="body" color="neutral700">
-                    |
-                  </Typography>
-                  <Divider direction="horizontal" size={8} />
-                  <Typography size="xsmall" variant="body" color="neutral700">
-                    {i18n.t({
-                      id: 'Yours: {amount} {symbol}',
-                      values: {
-                        amount: numberToString(
-                          swapHasError?.fromAmount || null,
-                          TOKEN_AMOUNT_MIN_DECIMALS,
-                          TOKEN_AMOUNT_MAX_DECIMALS
-                        ),
-                        symbol: swap?.from.symbol,
-                      },
-                    })}
-                  </Typography>
-                </FooterAlert>
-              }
-            />
-          </FooterStepAlarm>
-        ) : undefined,
-    }));
-  };
-
-  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
-
-  const bestRouteData = getFormattedBestRoute(bestRoute);
+      : getPriceImpact(inputUsdValue.toString(), outputUsdValue.toString());
 
   return (
     <Layout
@@ -289,15 +157,14 @@ export function Home() {
           size="large"
           disabled={swapButtonState.disabled}
           prefix={
-            !swapButtonState.disabled &&
-            swapButtonState.hasWarning && <WarningIcon />
+            swapButtonState.action === 'confirm-warning' && <WarningIcon />
           }
           fullWidth
           onClick={() => {
-            if (swapButtonState.state === ButtonState.WAITFORCONNECTING) {
+            if (swapButtonState.action === 'connect-wallet') {
               navigate(navigationRoutes.wallets);
-            } else if (swapButtonState.state === ButtonState.NEEDTOCONFIRM) {
-              setOpenWarningModal(true);
+            } else if (swapButtonState.action === 'confirm-warning') {
+              setShowQuoteWarningModal(true);
             } else {
               navigate(navigationRoutes.confirmSwap);
             }
@@ -306,14 +173,15 @@ export function Home() {
         </Button>
       }
       header={{
-        hasConnectWallet: true,
+        onWallet: () => {
+          navigate(navigationRoutes.wallets);
+        },
+        hasBackButton: false,
         title: i18n.t('Swap'),
         suffix: (
           <HomeButtons
             layoutRef={layoutRef.current}
-            onClickRefresh={
-              !!bestRoute || bestRouteError ? refetchBestRoute : undefined
-            }
+            onClickRefresh={!!quote || quoteError ? fetchQuote : undefined}
             onClickHistory={() => navigate(navigationRoutes.swaps)}
             onClickSettings={() => navigate(navigationRoutes.settings)}
           />
@@ -335,7 +203,7 @@ export function Home() {
                 displayName: fromToken?.symbol || '',
                 image: fromToken?.image || '',
               }}
-              onClickToken={() => navigate('from-swap')}
+              onClickToken={() => navigate(navigationRoutes.fromSwap)}
               price={{
                 value: inputAmount,
                 usdValue: priceImpactInputCanNotBeComputed
@@ -349,8 +217,8 @@ export function Home() {
                   ? errorMessages().unknownPriceError.impactTitle
                   : undefined,
               }}
-              disabled={loadingMetaStatus === 'failed'}
-              loading={loadingMetaStatus === 'loading'}
+              disabled={fetchMetaStatus === 'failed'}
+              loading={fetchMetaStatus === 'loading'}
               onSelectMaxBalance={() => {
                 if (tokenBalance !== '0') {
                   setInputAmount(tokenBalanceReal.split(',').join(''));
@@ -360,9 +228,10 @@ export function Home() {
             <SwitchFromAndToButton />
           </FromContainer>
           <SwapInput
-            sharpBottomStyle={!!bestRoute?.result || fetchingBestRoute}
+            sharpBottomStyle={!!quote?.result || fetchingQuote}
             label={i18n.t('To')}
             mode="To"
+            fetchingQuote={fetchingQuote}
             chain={{
               displayName: toBlockchain?.displayName || '',
               image: toBlockchain?.logo || '',
@@ -371,18 +240,12 @@ export function Home() {
               displayName: toToken?.symbol || '',
               image: toToken?.image || '',
             }}
-            percentageChange={
-              !!percentageChange?.lt(0)
-                ? numberToString(
-                    percentageChange,
-                    PERCENTAGE_CHANGE_MIN_DECIMALS,
-                    PERCENTAGE_CHANGE_MAX_DECIMALS
-                  )
-                : null
-            }
-            warningLevel={getPriceImpactLevel(
-              percentageChange?.toNumber() ?? 0
+            percentageChange={numberToString(
+              getPriceImpact(inputUsdValue, outputUsdValue),
+              PERCENTAGE_CHANGE_MIN_DECIMALS,
+              PERCENTAGE_CHANGE_MAX_DECIMALS
             )}
+            warningLevel={getPriceImpactLevel(percentageChange ?? 0)}
             price={{
               value: numberToString(
                 outputAmount,
@@ -400,89 +263,31 @@ export function Home() {
                 ? errorMessages().unknownPriceError.impactTitle
                 : undefined,
             }}
-            onClickToken={() => navigate('to-swap')}
-            disabled={loadingMetaStatus === 'failed'}
-            loading={loadingMetaStatus === 'loading'}
+            onClickToken={() => navigate(navigationRoutes.toSwap)}
+            disabled={fetchMetaStatus === 'failed'}
+            loading={fetchMetaStatus === 'loading'}
           />
         </InputsContainer>
-        {fetchingBestRoute && (
-          <BestRouteContainer>
-            <BestRouteSkeleton type="basic" />
-          </BestRouteContainer>
-        )}
-        {showBestRoute &&
-        !fetchingBestRoute &&
-        bestRouteData?.result?.swaps?.length ? (
-          <BestRouteContainer>
-            <BestRoute
-              type="basic"
-              recommended={true}
-              tooltipContainer={getContainer()}
-              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
-                ),
-              }}
-              steps={getBestRouteSteps(bestRouteData.result.swaps)}
-              percentageChange={numberToString(
-                percentageChange,
-                PERCENTAGE_CHANGE_MIN_DECIMALS,
-                PERCENTAGE_CHANGE_MAX_DECIMALS
-              )}
-              totalFee={numberToString(
-                totalFeeInUsd,
-                GAS_FEE_MIN_DECIMALS,
-                GAS_FEE_MAX_DECIMALS
-              )}
-              totalTime={secondsToString(
-                totalArrivalTime(bestRoute?.result?.swaps)
-              )}
-            />
-          </BestRouteContainer>
-        ) : showBestRoute && !fetchingBestRoute ? (
-          <>
-            <Divider size={20} />
-            <NoRoutes
-              diagnosisMessage={bestRouteData?.diagnosisMessages?.[0]}
-              fetch={refetchBestRoute}
-              error={!!bestRouteError}
-            />
-          </>
-        ) : null}
+        <div className="quote__container">
+          <QuoteInfo
+            quote={quote}
+            loading={fetchingQuote}
+            error={quoteError}
+            warning={quoteWarning}
+            type="basic"
+            refetchQuote={fetchQuote}
+            showWarningModal={showQuoteWarningModal}
+            onOpenWarningModal={() => setShowQuoteWarningModal(true)}
+            onCloseWarningModal={() => setShowQuoteWarningModal(false)}
+            onConfirmWarningModal={() => {
+              setShowQuoteWarningModal(false);
+              setQuoteWarningsConfirmed(true);
+              navigate(navigationRoutes.confirmSwap);
+            }}
+            onChangeSettings={() => navigate(navigationRoutes.settings)}
+          />
+        </div>
       </Container>
-      <RouteErrors
-        openModal={openWarningModal}
-        onToggle={setOpenWarningModal}
-        totalFeeInUsd={totalFeeInUsd}
-        outputUsdValue={outputUsdValue}
-        inputUsdValue={inputUsdValue}
-        percentageChange={percentageChange}
-        highValueLoss={highValueLoss}
-        priceImpactCanNotBeComputed={
-          priceImpactInputCanNotBeComputed || priceImpactOutputCanNotBeComputed
-        }
-        loading={fetchingBestRoute || loadingMetaStatus === 'loading'}
-        extraSpace={!!bestRoute?.result || !bestRoute}
-      />
     </Layout>
   );
 }

package/src/pages/LanguagePage.tsx

@@ -10,13 +10,9 @@ import React from 'react';
 
 import { Layout } from '../components/Layout';
 import { SettingsContainer } from '../components/SettingsContainer';
-import { navigationRoutes } from '../constants/navigationRoutes';
 import { useLanguage } from '../hooks/useLanguage';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 
 export function LanguagePage() {
-  const { navigateBackFrom } = useNavigateBack();
-
   const { activeLanguage, changeLanguage, languages } = useLanguage();
 
   const languageList = languages.map((languageItem) => {
@@ -38,7 +34,6 @@ export function LanguagePage() {
   return (
     <Layout
       header={{
-        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
         title: i18n.t('Language'),
       }}>
       <SettingsContainer>

package/src/pages/LiquiditySourcePage.tsx

@@ -23,32 +23,22 @@ import {
   NotFoundContainer,
   SettingsContainer,
 } from '../components/SettingsContainer';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useNavigateBack } from '../hooks/useNavigateBack';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useSettingsStore } from '../store/settings';
 import { containsText } from '../utils/numbers';
-import {
-  getUniqueSwappersGroups,
-  sortLiquiditySourcesByGroupTitle,
-} from '../utils/settings';
+import { getUniqueSwappersGroups } from '../utils/settings';
 
 interface PropTypes {
-  supportedSwappers?: string[];
   sourceType: 'Exchanges' | 'Bridges';
 }
 
-export function LiquiditySourcePage({
-  supportedSwappers,
-  sourceType,
-}: PropTypes) {
+export function LiquiditySourcePage({ sourceType }: PropTypes) {
+  const fetchStatus = useAppStore().fetchStatus;
+  const swappers = useAppStore().swappers();
   const [searchedFor, setSearchedFor] = useState<string>('');
   const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
-  const { navigateBackFrom } = useNavigateBack();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
-
   const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
-    getUniqueSwappersGroups(supportedSwappers);
+    getUniqueSwappersGroups(swappers);
 
   const validTypes: Array<LiquiditySourceType> = [];
   if (sourceType === 'Exchanges') {
@@ -79,22 +69,20 @@ export function LiquiditySourcePage({
     });
   };
 
-  const list = liquiditySources
-    .sort(sortLiquiditySourcesByGroupTitle)
-    .map((sourceItem) => {
-      const { selected, groupTitle, logo } = sourceItem;
-      return {
-        start: <Image src={logo} size={22} type="circular" />,
-        onClick: () => toggleLiquiditySource(groupTitle),
-        end: <Checkbox checked={selected} />,
-        title: (
-          <Typography variant="title" size="xmedium">
-            {i18n.t(groupTitle)}
-          </Typography>
-        ),
-        ...sourceItem,
-      };
-    });
+  const list = liquiditySources.map((sourceItem) => {
+    const { selected, groupTitle, logo } = sourceItem;
+    return {
+      start: <Image src={logo} size={22} type="circular" />,
+      onClick: () => toggleLiquiditySource(groupTitle),
+      end: <Checkbox checked={selected} />,
+      title: (
+        <Typography variant="title" size="xmedium">
+          {i18n.t(groupTitle)}
+        </Typography>
+      ),
+      ...sourceItem,
+    };
+  });
 
   const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
@@ -111,7 +99,6 @@ export function LiquiditySourcePage({
   return (
     <Layout
       header={{
-        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
         title: i18n.t(sourceType),
         suffix: (
           <LiquiditySourceSuffix>
@@ -131,7 +118,7 @@ export function LiquiditySourcePage({
           placeholder={i18n.t('Search {sourceType}', { sourceType })}
           onChange={searchHandler}
         />
-        {loadingMetaStatus === 'loading' && <LoadingLiquiditySourceList />}
+        {fetchStatus === 'loading' && <LoadingLiquiditySourceList />}
 
         {!filteredList.length && !!searchedFor ? (
           <NotFoundContainer>
@@ -141,7 +128,7 @@ export function LiquiditySourcePage({
             />
           </NotFoundContainer>
         ) : (
-          loadingMetaStatus === 'success' && (
+          fetchStatus === 'success' && (
             <LiquiditySourceList>
               {filteredList.map((sourceItem) => {
                 return (