@rango-dev/widget-embedded 0.23.1-next.0 → 0.23.1-next.2

package/src/pages/Home.tsx

@@ -1,90 +1,59 @@
 import { i18n } from '@lingui/core';
-import { Button, Divider, styled, SwapInput, WarningIcon } from '@rango-dev/ui';
+import { Button, Divider, styled, WarningIcon } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { HeaderButtons } from '../components/HeaderButtons';
 import { Layout, PageContainer } from '../components/Layout';
 import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
-import { SwitchFromAndToButton } from '../components/SwitchFromAndTo';
-import { errorMessages } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import {
-  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 { ExpandedQuotes } from '../containers/ExpandedQuotes';
+import { Inputs } from '../containers/Inputs';
 import { QuoteInfo } from '../containers/QuoteInfo';
+import useMobileDetect from '../hooks/useMobileDetect';
 import { useSwapInput } from '../hooks/useSwapInput';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
-import { getContainer } from '../utils/common';
-import { formatTooltipNumbers, numberToString } from '../utils/numbers';
-import { getPriceImpact, getPriceImpactLevel } from '../utils/quote';
-import { canComputePriceImpact, getSwapButtonState } from '../utils/swap';
-import { formatBalance, isFetchingBalance } from '../utils/wallets';
+import { getSwapButtonState } from '../utils/swap';
 
-const FromContainer = styled('div', {
-  position: 'relative',
+const MainContainer = styled('div', {
+  display: 'grid',
+  gridTemplateColumns: 'auto auto',
+  alignItems: 'flex-start',
+  height: 700,
 });
+export const TIME_TO_NAVIGATE_ANOTHER_PAGE = 300;
 
-const InputsContainer = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 5,
-  alignSelf: 'stretch',
-});
 export function Home() {
   const navigate = useNavigate();
   const {
     fromToken,
-    fromBlockchain,
     toToken,
-    toBlockchain,
-    setInputAmount,
     inputAmount,
-    inputUsdValue,
-    outputAmount,
-    outputUsdValue,
     selectedQuote,
     refetchQuote,
     error: quoteError,
     warning: quoteWarning,
     quotes,
+    setSelectedQuote,
     resetQuoteWallets,
     setQuoteWarningsConfirmed,
     updateQuotePartialState,
   } = useQuoteStore();
-  const { fetch: fetchQuote, loading } = useSwapInput({ refetchQuote });
+  const [isVisibleExpanded, setIsVisibleExpanded] = useState<boolean>(false);
+  const isMobile = useMobileDetect();
 
+  const { fetch: fetchQuote, loading } = useSwapInput({ refetchQuote });
   const { config, fetchStatus: fetchMetaStatus } = useAppStore();
 
-  const { connectedWallets, getBalanceFor } = useWalletsStore();
+  const { connectedWallets } = useWalletsStore();
   const { isActiveTab } = useUiStore();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
-  const fetchingBalance =
-    !!fromBlockchain &&
-    isFetchingBalance(connectedWallets, fromBlockchain.name);
 
   const needsToWarnEthOnPath = false;
 
-  const priceImpactInputCanNotBeComputed = !canComputePriceImpact(
-    selectedQuote,
-    inputAmount,
-    inputUsdValue
-  );
-
-  const priceImpactOutputCanNotBeComputed = !canComputePriceImpact(
-    selectedQuote,
-    inputAmount,
-    outputUsdValue
-  );
-
   const swapButtonState = getSwapButtonState({
     fetchMetaStatus,
     fetchingQuote: loading,
@@ -95,204 +64,148 @@ export function Home() {
     warning: quoteWarning,
     needsToWarnEthOnPath,
   });
+  const isExpandable = config?.variant === 'expandable' && !isMobile;
+  const hasInputs =
+    !!inputAmount && !!fromToken && !!toToken && inputAmount !== '0';
+  const fetchingQuote = hasInputs && fetchMetaStatus === 'success' && loading;
 
-  const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
-
-  const fromTokenFormattedBalance =
-    formatBalance(fromTokenBalance)?.amount ?? '0';
-
-  const tokenBalanceReal =
-    !!fromBlockchain && !!fromToken && fromTokenBalance?.amount
-      ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
-      : '0';
-
-  const fetchingQuote =
-    fetchMetaStatus === 'success' &&
-    !!inputAmount &&
-    !!fromToken &&
-    !!toToken &&
-    loading;
+  const hasValidQuotes =
+    !isExpandable || (isExpandable && quotes?.results.length);
+  const hasWarningOrError = quoteWarning || quoteError;
+  const showMessages = hasValidQuotes && hasWarningOrError;
 
   useEffect(() => {
     resetQuoteWallets();
     updateQuotePartialState('refetchQuote', true);
   }, []);
 
-  const percentageChange =
-    !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
-      ? null
-      : getPriceImpact(inputUsdValue.toString(), outputUsdValue.toString());
+  useEffect(() => {
+    setIsVisibleExpanded(hasInputs);
+  }, [hasInputs]);
+
+  const onClickRefresh =
+    (!!selectedQuote || quoteError) && !showQuoteWarningModal
+      ? fetchQuote
+      : undefined;
+
+  const onHandleNavigation = (route: string) => {
+    if (isExpandable && isVisibleExpanded) {
+      setIsVisibleExpanded(false);
+      setTimeout(() => {
+        navigate(route);
+      }, TIME_TO_NAVIGATE_ANOTHER_PAGE);
+    } else {
+      navigate(route);
+    }
+  };
 
   return (
-    <Layout
-      height="auto"
-      footer={
-        <Button
-          type="primary"
-          size="large"
-          disabled={swapButtonState.disabled || !isActiveTab}
-          prefix={
-            swapButtonState.action === 'confirm-warning' && <WarningIcon />
-          }
-          fullWidth
-          onClick={() => {
-            if (swapButtonState.action === 'connect-wallet') {
-              navigate(navigationRoutes.wallets);
-            } else if (swapButtonState.action === 'confirm-warning') {
-              setShowQuoteWarningModal(true);
-            } else {
-              navigate(navigationRoutes.confirmSwap);
+    <MainContainer>
+      <Layout
+        height="auto"
+        footer={
+          <Button
+            type="primary"
+            size="large"
+            disabled={swapButtonState.disabled || !isActiveTab}
+            prefix={
+              swapButtonState.action === 'confirm-warning' && <WarningIcon />
             }
-          }}>
-          {swapButtonState.title}
-        </Button>
-      }
-      header={{
-        onWallet: () => {
-          navigate(navigationRoutes.wallets);
-        },
-        hasBackButton: false,
-        title: config.title || i18n.t('Swap'),
-        suffix: (
-          <HeaderButtons
-            onClickRefresh={
-              (!!selectedQuote || quoteError) && !showQuoteWarningModal
-                ? fetchQuote
-                : undefined
-            }
-            onClickHistory={() => navigate(navigationRoutes.swaps)}
-            onClickSettings={() => navigate(navigationRoutes.settings)}
-          />
-        ),
-      }}>
-      <PageContainer>
-        <InputsContainer>
-          <FromContainer>
-            <SwapInput
-              label={i18n.t('From')}
-              mode="From"
-              onInputChange={setInputAmount}
-              balance={fromTokenFormattedBalance}
-              chain={{
-                displayName: fromBlockchain?.displayName || '',
-                image: fromBlockchain?.logo || '',
-              }}
-              token={{
-                displayName: fromToken?.symbol || '',
-                image: fromToken?.image || '',
-              }}
-              onClickToken={() => navigate(navigationRoutes.fromSwap)}
-              price={{
-                value: inputAmount,
-                usdValue: priceImpactInputCanNotBeComputed
-                  ? undefined
-                  : numberToString(
-                      inputUsdValue,
-                      USD_VALUE_MIN_DECIMALS,
-                      USD_VALUE_MAX_DECIMALS
-                    ),
-                realUsdValue: priceImpactInputCanNotBeComputed
-                  ? undefined
-                  : formatTooltipNumbers(inputUsdValue),
-                error: priceImpactInputCanNotBeComputed
-                  ? errorMessages().unknownPriceError.impactTitle
-                  : undefined,
-              }}
-              disabled={fetchMetaStatus === 'failed'}
-              loading={fetchMetaStatus === 'loading'}
-              loadingBalance={fetchingBalance}
-              tooltipContainer={getContainer()}
-              onSelectMaxBalance={() => {
-                setInputAmount(tokenBalanceReal.split(',').join(''));
+            fullWidth
+            onClick={() => {
+              if (swapButtonState.action === 'connect-wallet') {
+                onHandleNavigation(navigationRoutes.wallets);
+              } else if (swapButtonState.action === 'confirm-warning') {
+                setShowQuoteWarningModal(true);
+              } else {
+                onHandleNavigation(navigationRoutes.confirmSwap);
+              }
+            }}>
+            {swapButtonState.title}
+          </Button>
+        }
+        header={{
+          onWallet: () => {
+            onHandleNavigation(navigationRoutes.wallets);
+          },
+          hasBackButton: false,
+          title: config.title || i18n.t('Swap'),
+          suffix: (
+            <HeaderButtons
+              hidden={isExpandable ? ['refresh'] : undefined}
+              onClickRefresh={onClickRefresh}
+              onClickHistory={() => onHandleNavigation(navigationRoutes.swaps)}
+              onClickSettings={() => {
+                onHandleNavigation(navigationRoutes.settings);
               }}
             />
-            <SwitchFromAndToButton />
-          </FromContainer>
-          <SwapInput
-            sharpBottomStyle={!!selectedQuote || fetchingQuote}
-            label={i18n.t('To')}
-            mode="To"
+          ),
+        }}>
+        <PageContainer>
+          <Inputs
             fetchingQuote={fetchingQuote}
-            chain={{
-              displayName: toBlockchain?.displayName || '',
-              image: toBlockchain?.logo || '',
-            }}
-            token={{
-              displayName: toToken?.symbol || '',
-              image: toToken?.image || '',
+            fetchMetaStatus={fetchMetaStatus}
+            onClickToken={(mode) => {
+              onHandleNavigation(
+                mode === 'from'
+                  ? navigationRoutes.fromSwap
+                  : navigationRoutes.toSwap
+              );
             }}
-            percentageChange={numberToString(
-              getPriceImpact(inputUsdValue, outputUsdValue),
-              PERCENTAGE_CHANGE_MIN_DECIMALS,
-              PERCENTAGE_CHANGE_MAX_DECIMALS
-            )}
-            warningLevel={getPriceImpactLevel(percentageChange ?? 0)}
-            price={{
-              value: numberToString(
-                outputAmount,
-                TOKEN_AMOUNT_MIN_DECIMALS,
-                TOKEN_AMOUNT_MAX_DECIMALS
-              ),
-              usdValue: priceImpactOutputCanNotBeComputed
-                ? undefined
-                : numberToString(
-                    outputUsdValue,
-                    USD_VALUE_MIN_DECIMALS,
-                    USD_VALUE_MAX_DECIMALS
-                  ),
-              realValue: formatTooltipNumbers(outputAmount),
-              realUsdValue: priceImpactOutputCanNotBeComputed
-                ? undefined
-                : formatTooltipNumbers(outputUsdValue),
-              error: priceImpactOutputCanNotBeComputed
-                ? errorMessages().unknownPriceError.impactTitle
-                : undefined,
-            }}
-            onClickToken={() => navigate(navigationRoutes.toSwap)}
-            disabled={fetchMetaStatus === 'failed'}
-            loading={fetchMetaStatus === 'loading'}
-            tooltipContainer={getContainer()}
           />
-        </InputsContainer>
-        <Divider size="2" />
-        <QuoteInfo
-          quote={selectedQuote}
-          loading={fetchingQuote}
-          error={quoteError}
-          tagHidden={false}
-          warning={quoteWarning}
-          type="basic"
-          onClickAllRoutes={
-            !!quotes && quotes.results.length > 1
-              ? () => {
-                  updateQuotePartialState('refetchQuote', false);
-                  navigate(navigationRoutes.routes);
-                }
-              : undefined
-          }
-        />
-        {quoteWarning || quoteError ? (
-          <>
-            <Divider size="10" />
-            <QuoteWarningsAndErrors
-              warning={quoteWarning}
-              error={quoteError}
+          <Divider size="2" />
+          {!isExpandable ? (
+            <QuoteInfo
+              quote={selectedQuote}
               loading={fetchingQuote}
-              refetchQuote={fetchQuote}
-              showWarningModal={showQuoteWarningModal}
-              confirmationDisabled={!isActiveTab}
-              onOpenWarningModal={() => setShowQuoteWarningModal(true)}
-              onCloseWarningModal={() => setShowQuoteWarningModal(false)}
-              onConfirmWarningModal={() => {
-                setShowQuoteWarningModal(false);
-                setQuoteWarningsConfirmed(true);
-                navigate(navigationRoutes.confirmSwap);
-              }}
-              onChangeSettings={() => navigate(navigationRoutes.settings)}
+              error={quoteError}
+              tagHidden={false}
+              warning={quoteWarning}
+              type="basic"
+              onClickAllRoutes={
+                !!quotes && quotes.results.length > 1
+                  ? () => {
+                      updateQuotePartialState('refetchQuote', false);
+                      onHandleNavigation(navigationRoutes.routes);
+                    }
+                  : undefined
+              }
             />
-          </>
-        ) : null}
-      </PageContainer>
-    </Layout>
+          ) : null}
+
+          {showMessages ? (
+            <>
+              <Divider size="10" />
+              <QuoteWarningsAndErrors
+                warning={quoteWarning}
+                error={quoteError}
+                refetchQuote={fetchQuote}
+                showWarningModal={showQuoteWarningModal}
+                confirmationDisabled={!isActiveTab}
+                onOpenWarningModal={() => setShowQuoteWarningModal(true)}
+                onCloseWarningModal={() => setShowQuoteWarningModal(false)}
+                onConfirmWarningModal={() => {
+                  setShowQuoteWarningModal(false);
+                  setQuoteWarningsConfirmed(true);
+                  onHandleNavigation(navigationRoutes.confirmSwap);
+                }}
+                onChangeSettings={() =>
+                  onHandleNavigation(navigationRoutes.settings)
+                }
+              />
+            </>
+          ) : null}
+        </PageContainer>
+      </Layout>
+      {isExpandable ? (
+        <ExpandedQuotes
+          loading={fetchingQuote}
+          onClickOnQuote={(quote) => setSelectedQuote(quote)}
+          fetch={fetchQuote}
+          onClickRefresh={onClickRefresh}
+          isVisible={isVisibleExpanded}
+        />
+      ) : null}
+    </MainContainer>
   );
 }

package/src/pages/Routes.tsx

@@ -1,42 +1,28 @@
 import type { SelectedQuote } from '../types';
-import type { MultiRouteSimulationResult } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
-import { Divider } from '@rango-dev/ui';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { HeaderButtons } from '../components/HeaderButtons';
 import { Layout, PageContainer } from '../components/Layout';
-import { QuoteSkeleton } from '../components/QuoteSkeleton';
+import { Quotes } from '../components/Quotes';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { QuoteInfo } from '../containers/QuoteInfo';
-import { getQuoteError } from '../hooks/useConfirmSwap/useConfirmSwap.helpers';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useSwapInput } from '../hooks/useSwapInput';
-import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
-import { generateQuoteWarnings } from '../utils/quote';
 
-const ITEM_SKELETON_COUNT = 3;
 export function RoutesPage() {
   const navigate = useNavigate();
   const navigateBack = useNavigateBack();
 
   const {
     selectedQuote,
-    quotes,
     refetchQuote,
     setSelectedQuote,
     updateQuotePartialState,
-    fromToken,
-    toToken,
     error: quoteError,
   } = useQuoteStore();
-  const { slippage, customSlippage } = useAppStore();
-  const tokens = useAppStore().tokens();
-
-  const userSlippage = customSlippage ?? slippage;
 
   const { fetch: fetchQuote, loading: fetchingQuote } = useSwapInput({
     refetchQuote,
@@ -47,22 +33,7 @@ export function RoutesPage() {
     updateQuotePartialState('refetchQuote', false);
     navigateBack();
   };
-  const getQuoteWarning = (quote: MultiRouteSimulationResult) => {
-    if (!fromToken || !toToken || !quotes) {
-      return null;
-    }
-    const mergedQuote: SelectedQuote = {
-      requestAmount: quotes.requestAmount, // Assuming quotes is an array
-      ...quote,
-    };
 
-    return generateQuoteWarnings(mergedQuote, {
-      fromToken,
-      toToken,
-      userSlippage,
-      tokens,
-    });
-  };
   const settings_url = `../${navigationRoutes.settings}`;
   const wallets_url = `../${navigationRoutes.wallets}`;
   return (
@@ -86,45 +57,11 @@ export function RoutesPage() {
         ),
       }}>
       <PageContainer>
-        {fetchingQuote
-          ? Array.from({ length: ITEM_SKELETON_COUNT }, (_, index) => (
-              <React.Fragment key={index}>
-                <QuoteSkeleton
-                  tagHidden={false}
-                  type="list-item"
-                  expanded={false}
-                />
-                <Divider size={16} />
-              </React.Fragment>
-            ))
-          : !!quotes &&
-            quotes.results?.map((quote) => {
-              const quoteWarning = getQuoteWarning(quote);
-              const quoteError = getQuoteError(quote.swaps);
-
-              return (
-                <React.Fragment key={quote.requestId}>
-                  <QuoteInfo
-                    selected={selectedQuote?.requestId === quote.requestId}
-                    tagHidden={false}
-                    quote={{ ...quote, requestAmount: quotes.requestAmount }}
-                    loading={fetchingQuote}
-                    error={quoteError?.options || null}
-                    warning={quoteWarning}
-                    onClick={(quote) => {
-                      updateQuotePartialState('warning', quoteWarning);
-                      updateQuotePartialState(
-                        'error',
-                        quoteError?.options || null
-                      );
-                      onClickOnQuote(quote);
-                    }}
-                    type="list-item"
-                  />
-                  <Divider size={16} />
-                </React.Fragment>
-              );
-            })}
+        <Quotes
+          fetch={fetchQuote}
+          loading={fetchingQuote}
+          onClickOnQuote={onClickOnQuote}
+        />
       </PageContainer>
     </Layout>
   );

package/src/types/config.ts

@@ -3,6 +3,8 @@ import type { ProviderInterface } from '@rango-dev/wallets-react';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Asset } from 'rango-sdk';
 
+export type WidgetVariant = 'default' | 'expandable';
+
 /**
  * The above type defines a set of optional color properties for a widget.
  * @property {string} background
@@ -179,6 +181,9 @@ export type Features = Partial<
  *   - 'connectWalletButton': Visibility state for the wallet connect icon.
  *   - 'language': Visibility state for the language.
  *   - 'experimentalRoute': Enablement state for the experimental route.
+ * @property {WidgetVariant} variant
+ *   If it is expandable, multiple routes will show up on the home page;
+ *   if not, you will need to go to a different page to see the suggested routes.
  */
 
 export type WidgetConfig = {
@@ -199,4 +204,5 @@ export type WidgetConfig = {
   externalWallets?: boolean;
   enableNewLiquiditySources?: boolean;
   features?: Features;
+  variant?: WidgetVariant;
 };

package/src/utils/common.ts

@@ -34,3 +34,6 @@ export function containsText(text: string, searchText: string): boolean {
 
 export const getContainer = () =>
   document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) as HTMLElement;
+
+export const getExpanded = () =>
+  document.getElementById(WIDGET_UI_ID.EXPANDED_BOX_ID) as HTMLElement;

package/dist/components/Quote/QuoteTrigger .d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QuoteTrigger .d.ts","sourceRoot":"","sources":["../../../src/components/Quote/QuoteTrigger .tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA2B,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWhF,OAAO,KAA8B,MAAM,OAAO,CAAC;AAkCnD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA6KpD"}