@rango-dev/widget-embedded 0.17.1-next.18 → 0.17.1-next.19

package/src/pages/ConfirmSwapPage.tsx

@@ -18,7 +18,7 @@ import {
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useNavigate } from 'react-router-dom';
 
@@ -31,6 +31,7 @@ import { getQuoteUpdateWarningMessage } from '../constants/warnings';
 import { QuoteInfo } from '../containers/QuoteInfo';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
 import { useQuoteStore } from '../store/quote';
+import { useSettingsStore } from '../store/settings';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { QuoteWarningType } from '../types';
@@ -43,7 +44,6 @@ const Container = styled('div', {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingBottom: '$10',
   },
   '& .icon': {
     width: '$24',
@@ -52,6 +52,9 @@ const Container = styled('div', {
     justifyContent: 'center',
     alignItems: 'center',
   },
+  '& .quote-update__alert': {
+    paddingTop: '$10',
+  },
 });
 
 const Buttons = styled('div', {
@@ -86,6 +89,9 @@ export function ConfirmSwapPage() {
   const showWalletsOnInit = !quoteWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
+  const disabledLiquiditySources =
+    useSettingsStore.use.disabledLiquiditySources();
+  const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
   const { manager } = useManager();
   const {
     fetch: confirmSwap,
@@ -151,13 +157,23 @@ export function ConfirmSwapPage() {
       swap: null,
       warnings: null,
     });
-    confirmSwap({ selectedWallets })
+    confirmSwap({ selectedWallets, customDestination })
       .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();
@@ -237,6 +253,12 @@ export function ConfirmSwapPage() {
     connectedWallets.length,
   ]);
 
+  useLayoutEffect(() => {
+    if (!quote) {
+      navigate(`../`);
+    }
+  }, []);
+
   return (
     <Layout
       header={{
@@ -315,7 +337,7 @@ export function ConfirmSwapPage() {
           </>
         )}
         {confirmSwapResult.warnings?.quoteUpdate && (
-          <>
+          <div className="quote-update__alert">
             <Alert
               variant="alarm"
               type="warning"
@@ -326,13 +348,13 @@ export function ConfirmSwapPage() {
                 )
               }
             />
-            <Divider size={12} />
-          </>
+          </div>
         )}
         <QuoteInfo
           quote={quote}
           type="swap-preview"
           expanded={true}
+          alertPosition="top"
           error={confirmSwapResult.error}
           loading={fetchingConfirmationQuote}
           warning={confirmSwapResult.warnings?.quote ?? null}
@@ -344,6 +366,7 @@ export function ConfirmSwapPage() {
             setShowQuoteWarningModal(false);
             await addNewSwap();
           }}
+          onChangeSettings={() => navigate('../' + navigationRoutes.settings)}
         />
       </Container>
     </Layout>

package/src/pages/Home.tsx

@@ -24,23 +24,18 @@ 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 { numberToString } from '../utils/numbers';
 import { getPriceImpact, getPriceImpactLevel } from '../utils/quote';
-import {
-  canComputePriceImpact,
-  getOutputRatio,
-  getPercentageChange,
-  getSwapButtonState,
-  hasHighValueLoss,
-  hasLimitError,
-} from '../utils/swap';
+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', {
@@ -85,9 +80,6 @@ export function Home() {
 
   const needsToWarnEthOnPath = false;
 
-  const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
-  const highValueLoss = hasHighValueLoss(inputUsdValue, outToInRatio);
-
   const priceImpactInputCanNotBeComputed = !canComputePriceImpact(
     quote,
     inputAmount,
@@ -99,17 +91,17 @@ export function Home() {
     inputAmount,
     outputUsdValue
   );
-  const swapButtonState = getSwapButtonState(
+
+  const swapButtonState = getSwapButtonState({
     fetchMetaStatus,
-    connectedWallets,
     fetchingQuote,
+    inputAmount,
     quote,
-    hasLimitError(quote),
-    highValueLoss,
-    priceImpactInputCanNotBeComputed || priceImpactOutputCanNotBeComputed,
+    anyWalletConnected: connectedWallets.length > 0,
+    error: quoteError,
+    warning: quoteWarning,
     needsToWarnEthOnPath,
-    inputAmount
-  );
+  });
 
   const tokenBalance =
     !!fromBlockchain && !!fromToken
@@ -152,10 +144,8 @@ export function Home() {
   const percentageChange =
     !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
       ? null
-      : getPercentageChange(
-          inputUsdValue.toString(),
-          outputUsdValue.toString()
-        );
+      : getPriceImpact(inputUsdValue.toString(), outputUsdValue.toString());
+
   return (
     <Layout
       ref={layoutRef}
@@ -167,14 +157,13 @@ 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 (quoteWarning) {
+            } else if (swapButtonState.action === 'confirm-warning') {
               setShowQuoteWarningModal(true);
             } else {
               navigate(navigationRoutes.confirmSwap);
@@ -203,8 +192,6 @@ export function Home() {
           <FromContainer>
             <SwapInput
               label={i18n.t('From')}
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              //@ts-ignore
               mode="From"
               onInputChange={setInputAmount}
               balance={tokenBalance}
@@ -244,6 +231,7 @@ export function Home() {
             sharpBottomStyle={!!quote?.result || fetchingQuote}
             label={i18n.t('To')}
             mode="To"
+            fetchingQuote={fetchingQuote}
             chain={{
               displayName: toBlockchain?.displayName || '',
               image: toBlockchain?.logo || '',
@@ -280,22 +268,25 @@ export function Home() {
             loading={fetchMetaStatus === 'loading'}
           />
         </InputsContainer>
-        <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);
-          }}
-        />
+        <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>
     </Layout>
   );

package/src/types/swap.ts

@@ -5,19 +5,10 @@ export type PendingSwapSettings = Omit<
   'disabledSwappersIds'
 >;
 
-export enum ButtonState {
-  WAITFORCONNECTING = 'waitForConnecting',
-  SWAP = 'swap',
-  NEEDTOCONFIRM = 'needToConfirm',
-  WARNING = 'warning',
-}
-
-export type SwapButtonState = (
-  | { disabled: true }
-  | { disabled: false; hasWarning?: boolean }
-) & {
+export type SwapButtonState = {
+  disabled: boolean;
   title: string;
-  state: ButtonState;
+  action: 'connect-wallet' | 'confirm-warning' | 'confirm-swap';
 };
 
 export type ConvertedToken = {

package/src/utils/meta.ts

@@ -1,4 +1,4 @@
-import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
+import type { Asset, BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 
 import { tokensAreEqual } from './wallets';
 
@@ -17,6 +17,13 @@ export function getBlockchainShortNameFor(
     ?.shortName;
 }
 
+export function getSwapperDisplayName(
+  swapperId: string,
+  swappers: SwapperMeta[]
+) {
+  return swappers.find((swapper) => swapper.id === swapperId)?.swapperGroup;
+}
+
 export function findToken(t: Asset, tokens: Token[]) {
   return tokens.find((token) => tokensAreEqual(token, t)) ?? null;
 }

package/src/utils/quote.ts

@@ -238,11 +238,12 @@ export function generateQuoteWarnings(
   const outputUsdValue = getUsdValue(toToken, quote.result?.outputAmount ?? '');
 
   if (quote.result && inputUsdValue && outputUsdValue) {
-    const priceImpact = getPercentageChange(
+    const priceImpact = getPriceImpact(
       inputUsdValue.toString(),
       outputUsdValue.toString()
     );
-    const highValueLoss = hasHighValueLoss(inputUsdValue, priceImpact);
+    const highValueLoss =
+      !!priceImpact && hasHighValueLoss(inputUsdValue, priceImpact);
 
     if (highValueLoss) {
       const totalFee = getTotalFeeInUsd(quote.result.swaps, tokens);
@@ -320,13 +321,12 @@ export function generateQuoteErrors(
 export function getPriceImpact(
   inputUsdValue: BigNumber | string | null,
   outputUsdValue: BigNumber | string | null
-) {
+): number | null {
   const outputUsdValueIsInvalid =
     typeof outputUsdValue === 'string'
       ? parseFloat(outputUsdValue) <= 0
       : !outputUsdValue?.gt(0);
-
-  const priceImpact =
+  const percentageChange =
     !inputUsdValue || !outputUsdValue || outputUsdValueIsInvalid
       ? null
       : getPercentageChange(
@@ -334,5 +334,5 @@ export function getPriceImpact(
           outputUsdValue.toString()
         );
 
-  return priceImpact;
+  return percentageChange && percentageChange < 0 ? percentageChange : null;
 }

package/src/utils/swap.ts

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { FetchStatus } from '../store/slices/data';
-import type { ConnectedWallet } from '../store/wallets';
 import type {
   ConvertedToken,
+  QuoteError,
+  QuoteWarning,
   RecommendedSlippages,
   SwapButtonState,
   Wallet,
@@ -35,11 +36,11 @@ import {
   TOKEN_AMOUNT_MAX_DECIMALS,
   TOKEN_AMOUNT_MIN_DECIMALS,
 } from '../constants/routing';
-import { ButtonState } from '../types';
 
 import { removeDuplicateFrom } from './common';
+import { getBlockchainShortNameFor } from './meta';
 import { numberToString } from './numbers';
-import { getRequiredBalanceOfWallet } from './quote';
+import { getPriceImpact, getRequiredBalanceOfWallet } from './quote';
 import { getRequiredChains } from './wallets';
 
 export function getOutputRatio(
@@ -179,63 +180,70 @@ export function getLimitErrorMessage(quote: BestRouteResponse): {
   return { swap, fromAmountRangeError, recommendation };
 }
 
-export function getSwapButtonState(
-  loadingMetaStatus: FetchStatus,
-  connectedWallets: ConnectedWallet[],
-  loading: boolean,
-  quote: BestRouteResponse | null,
-  hasLimitError: boolean,
-  highValueLoss: boolean,
-  priceImpactCanNotBeComputed: boolean,
-  needsToWarnEthOnPath: boolean,
-  inputAmount: string
-): SwapButtonState {
-  if (loadingMetaStatus !== 'success') {
+export function getSwapButtonState(params: {
+  fetchMetaStatus: FetchStatus;
+  anyWalletConnected: boolean;
+  fetchingQuote: boolean;
+  inputAmount: string;
+  quote: BestRouteResponse | null;
+  warning: QuoteWarning | null;
+  error: QuoteError | null;
+  needsToWarnEthOnPath: boolean;
+}): SwapButtonState {
+  const {
+    fetchMetaStatus,
+    anyWalletConnected,
+    fetchingQuote,
+    inputAmount,
+    quote,
+    warning,
+    error,
+    needsToWarnEthOnPath,
+  } = params;
+  if (fetchMetaStatus !== 'success') {
     return {
       title: swapButtonTitles().connectWallet,
-      state: ButtonState.WAITFORCONNECTING,
+      action: 'connect-wallet',
       disabled: true,
     };
   }
-  if (connectedWallets.length == 0) {
+  if (!anyWalletConnected) {
     return {
       title: swapButtonTitles().connectWallet,
-      state: ButtonState.WAITFORCONNECTING,
+      action: 'connect-wallet',
       disabled: false,
     };
   }
   if (
-    loading ||
+    fetchingQuote ||
     !quote ||
     !quote.result ||
-    hasLimitError ||
+    error ||
     !inputAmount ||
     inputAmount === '0'
   ) {
     return {
       title: swapButtonTitles().swap,
+      action: 'confirm-swap',
       disabled: true,
-      state: ButtonState.SWAP,
     };
-  } else if (highValueLoss || priceImpactCanNotBeComputed) {
+  } else if (warning) {
     return {
       title: swapButtonTitles().swapAnyway,
+      action: 'confirm-warning',
       disabled: false,
-      hasWarning: true,
-      state: ButtonState.NEEDTOCONFIRM,
     };
   } else if (needsToWarnEthOnPath) {
     return {
       title: swapButtonTitles().ethWarning,
+      action: 'confirm-warning',
       disabled: false,
-      hasWarning: true,
-      state: ButtonState.WARNING,
     };
   }
   return {
     title: swapButtonTitles().swap,
+    action: 'confirm-swap',
     disabled: false,
-    state: ButtonState.SWAP,
   };
 }
 
@@ -359,7 +367,7 @@ export function checkSlippageWarnings(
   quote.result?.swaps.forEach((swap, index) => {
     if (
       swap.recommendedSlippage?.slippage &&
-      parseInt(swap.recommendedSlippage?.slippage) > userSlippage
+      parseFloat(swap.recommendedSlippage.slippage) > userSlippage
     ) {
       recommendedSlippages.set(index, swap.recommendedSlippage.slippage);
     }
@@ -590,10 +598,7 @@ export function isOutputAmountChangedALot(
   if (!oldOutputAmount || !newOutputAmount) {
     return false;
   }
-  const percentageChange = getPercentageChange(
-    oldOutputAmount,
-    newOutputAmount
-  );
+  const percentageChange = getPriceImpact(oldOutputAmount, newOutputAmount);
   if (!percentageChange) {
     return true;
   }
@@ -601,9 +606,10 @@ export function isOutputAmountChangedALot(
   return percentageChange <= -1;
 }
 
-export function getBalanceWarnings(
+export function generateBalanceWarnings(
   quote: BestRouteResponse,
-  selectedWallets: Wallet[]
+  selectedWallets: Wallet[],
+  blockchains: BlockchainMeta[]
 ) {
   const fee = quote.validationStatus;
   const requiredWallets = getRequiredChains(quote);
@@ -648,7 +654,10 @@ export function getBalanceWarnings(
           symbol,
           reason,
           currentAmount,
-          blockchain: asset.asset.blockchain,
+          blockchain: getBlockchainShortNameFor(
+            asset.asset.blockchain,
+            blockchains
+          ),
         },
       });
       return warningMessage;