fix: fix bugs

Author: Ikari-Shinji-re

widget/embedded/src/components/InsufficientBalanceModal/InsufficientBalanceModal.tsx

@@ -75,7 +75,7 @@ export function InsufficientBalanceModal(props: PropTypes) {
                     messages.length > 1 && index !== messages.length - 1;
 
                   return (
-                    <Fragment key={message.blockchain}>
+                    <Fragment key={message.blockchain + message.asset.symbol}>
                       <InsufficientBalanceWarning
                         warning={{
                           title: warningItemReason[message.reason],

widget/embedded/src/containers/Inputs/SourceInput/MaxBalance/MaxBalance.styles.ts

@@ -31,4 +31,8 @@ export const Container = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+
+  '& .max-balance': {
+    width: 'max-content',
+  },
 });

widget/embedded/src/containers/Inputs/SourceInput/MaxBalance/MaxBalance.tsx

@@ -16,7 +16,11 @@ export function MaxBalance(props: PropTypes) {
         <Skeleton variant="text" size="large" width={105} />
       ) : (
         <>
-          <Typography variant="body" size="xsmall" color="neutral600">
+          <Typography
+            variant="body"
+            size="xsmall"
+            color="neutral600"
+            className="max-balance">
             {t('Balance')}: {balance ?? '0.00'}
           </Typography>
           <Divider direction="horizontal" size={4} />

widget/embedded/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -20,7 +20,7 @@ export function useConfirmSwap() {
       warnings: null,
     });
 
-  const handleConfirmSwap = async () => {
+  const handleConfirmSwap = async (callback?: () => void) => {
     if (!sourceWallet) {
       return;
     }
@@ -31,15 +31,15 @@ export function useConfirmSwap() {
     });
 
     setConfirmSwapResult(result);
-
-    if (result.warnings?.balance?.messages) {
+    if (result.warnings?.balance?.messages || result.error) {
       return;
     }
 
     setConfirmSwapData({
       proceedAnyway: false,
       quoteData: result.quoteData,
     });
+    callback?.();
   };
 
   const clear = () => setConfirmSwapResult(null);

widget/embedded/src/hooks/useHandleSwap/useHandleSwap.ts

@@ -30,7 +30,6 @@ export function useHandleSwap(): ConfirmSwap {
     selectedQuote: initialQuote,
     customDestination: customDestinationFromStore,
     confirmSwapData,
-    resetAlerts,
   } = useQuoteStore()();
   const { manager } = useManager();
   const { swapMode } = useSwapMode();
@@ -54,7 +53,10 @@ export function useHandleSwap(): ConfirmSwap {
   const fetch: ConfirmSwap['fetch'] = async (params) => {
     const selectedWallets = params.selectedWallets;
     const customDestination =
-      params?.customDestination ?? customDestinationFromStore;
+      params?.customDestination ??
+      selectedWallets[1]?.address ??
+      customDestinationFromStore ??
+      destinationWallet?.address;
 
     if (!fromToken || !toToken || !inputAmount) {
       return {
@@ -112,8 +114,6 @@ export function useHandleSwap(): ConfirmSwap {
           findToken,
         });
 
-        resetAlerts();
-
         return {
           quoteData: result,
           error: null,

widget/embedded/src/pages/Home.tsx

@@ -1,7 +1,7 @@
 import type { SelectedQuote, SwapButtonState } from '../types';
 
 import { i18n } from '@lingui/core';
-import { Button, Divider, styled, WarningIcon } from '@rango-dev/ui';
+import { Alert, Button, Divider, styled, WarningIcon } from '@rango-dev/ui';
 import BigNumber from 'bignumber.js';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -14,6 +14,7 @@ import { SameTokensWarning } from '../components/SameTokensWarning';
 import { SlippageWarningsAndErrors } from '../components/SlippageWarningsAndErrors/SlippageWarningsAndErrors';
 import { SwapMetrics } from '../components/SwapMetrics';
 import { WalletAddressErrorModal } from '../components/WalletAddressErrorModal/WalletAddressErrorModal';
+import { getQuoteErrorMessage } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { SLIPPAGES } from '../constants/swapSettings';
 import { ExpandedQuotes } from '../containers/ExpandedQuotes';
@@ -26,7 +27,7 @@ import { useSwapMode } from '../hooks/useSwapMode';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
-import { UiEventTypes } from '../types';
+import { QuoteErrorType, UiEventTypes } from '../types';
 import { isVariantExpandable } from '../utils/configs';
 import { emitPreventableEvent } from '../utils/events';
 import { getSlippageValidation } from '../utils/settings';
@@ -59,11 +60,11 @@ export function Home() {
     setQuoteWarningsConfirmed,
     updateQuotePartialState,
     setConfirmSwapData,
+    resetAlerts,
   } = useQuoteStore()();
 
   const [isVisibleExpanded, setIsVisibleExpanded] = useState<boolean>(false);
   const { isLargeScreen, isExtraLargeScreen } = useScreenDetect();
-
   const { fetch: fetchQuote, loading } = useSwapInput({ refetchQuote });
   const {
     config,
@@ -130,7 +131,6 @@ export function Home() {
 
   const currentQuoteWarning =
     slippageValidation?.quoteValidation || quoteWarning;
-
   const hasValidQuotes =
     !isExpandable || (isExpandable && quotes?.results.length);
   const hasWarningOrError = currentQuoteWarning || quoteError;
@@ -204,7 +204,9 @@ export function Home() {
       onHandleNavigation(navigationRoutes.destinationWallet),
     'confirm-warning': () => setShowQuoteWarningModal(true),
     'show-wallet-address-error': () => setShowWalletAddressError(true),
-    'confirm-swap': handleConfirmSwap,
+    'confirm-swap': async () => {
+      await handleConfirmSwap(() => navigate(navigationRoutes.confirmSwap));
+    },
     'select-route-wallets': () =>
       onHandleNavigation(navigationRoutes.routeWallets),
   };
@@ -218,6 +220,7 @@ export function Home() {
   };
 
   const onConfirmBalanceWarning = () => {
+    resetAlerts();
     if (confirmSwapResult?.quoteData) {
       setConfirmSwapData({
         proceedAnyway: true,
@@ -339,7 +342,7 @@ export function Home() {
                 skipAlerts={!!slippageValidation}
                 couldChangeSettings={true}
                 refetchQuote={fetchQuote}
-                showWarningModal={showQuoteWarningModal || showBalanceWarning}
+                showWarningModal={showQuoteWarningModal}
                 confirmationDisabled={!isActiveTab}
                 onOpenWarningModal={() => setShowQuoteWarningModal(true)}
                 onCloseWarningModal={() => setShowQuoteWarningModal(false)}
@@ -366,6 +369,20 @@ export function Home() {
               />
             </>
           )}
+
+          {!!confirmSwapResult?.error &&
+            confirmSwapResult.error.type === QuoteErrorType.REQUEST_FAILED && (
+              <>
+                <Divider size={8} />
+                <Alert
+                  type="error"
+                  variant="alarm"
+                  titleAlign="left"
+                  title={getQuoteErrorMessage(confirmSwapResult.error)}
+                />
+                <Divider size={8} />
+              </>
+            )}
           <SameTokensWarning />
         </PageContainer>
       </Layout>

widget/embedded/src/pages/RouteWalletsPage/RouteWalletsPage.tsx

@@ -1,6 +1,5 @@
 import type { SupportedWalletsPropTypes } from './RouteWalletsPage.types';
 import type { ConfirmSwapFetchResult } from '../../hooks/useHandleSwap/useHandleSwap.types';
-import type { Wallet } from '../../types';
 
 import { i18n } from '@lingui/core';
 import { Alert, Button, Divider, Typography } from '@rango-dev/ui';
@@ -12,11 +11,13 @@ import { InsufficientBalanceModal } from '../../components/InsufficientBalanceMo
 import { Layout } from '../../components/Layout';
 import { MoreWalletsToSelect } from '../../components/MoreWalletsToSelect/MoreWalletsToSelect';
 import { ListContainer } from '../../components/MoreWalletsToSelect/MoreWalletsToSelect.styles';
+import { getQuoteErrorMessage } from '../../constants/errors';
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useConfirmSwap } from '../../hooks/useConfirmSwap';
 import { useWalletList } from '../../hooks/useWalletList';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
+import { QuoteErrorType, type Wallet } from '../../types';
 
 import { getRouteBlockchains } from './RouteWalletsPage.helpers';
 import { Container, Title } from './RouteWalletsPage.styles';
@@ -132,6 +133,7 @@ export function RouteWalletsPage() {
   };
 
   const handleConfirmWallets = () => {
+    resetConfirmSwapState();
     const everyRequiredWalletsSelected = !requiredBlockchains.some(
       (blockchain) => !routeWallets?.[blockchain]
     );
@@ -141,7 +143,7 @@ export function RouteWalletsPage() {
       return;
     }
 
-    void handleConfirmSwap();
+    void handleConfirmSwap(() => navigateToConfirmSwapPage());
   };
 
   return (
@@ -170,6 +172,19 @@ export function RouteWalletsPage() {
             </Button>
           }>
           <Container>
+            {!!confirmSwapResult?.error &&
+              confirmSwapResult.error.type ===
+                QuoteErrorType.REQUEST_FAILED && (
+                <>
+                  <Alert
+                    type="error"
+                    variant="alarm"
+                    titleAlign="left"
+                    title={getQuoteErrorMessage(confirmSwapResult.error)}
+                  />
+                  <Divider size={8} />
+                </>
+              )}
             {showRouteWalletsError && (
               <>
                 <Alert

widget/embedded/src/utils/swap.ts

@@ -48,6 +48,7 @@ import {
   TOKEN_AMOUNT_MAX_DECIMALS,
   TOKEN_AMOUNT_MIN_DECIMALS,
 } from '../constants/routing';
+import { getRouteBlockchains } from '../pages/RouteWalletsPage/RouteWalletsPage.helpers';
 
 import { uniqueBy } from './common';
 import { isValidTokenAddress } from './meta';
@@ -313,7 +314,7 @@ export function getSwapButtonState(params: {
     };
   }
   const allChains = getQuoteChains({ quote, filter: 'all' });
-  const requiredChains = getQuoteChains({ quote, filter: 'required' });
+  const requiredChains = getRouteBlockchains(quote);
 
   /**
    * For a simple on-chain swap,
@@ -334,8 +335,7 @@ export function getSwapButtonState(params: {
       };
     }
   }
-
-  if (requiredChains.length > 1) {
+  if (requiredChains.length > 0) {
     return {
       title: swapButtonTitles().swap,
       action: 'select-route-wallets',
@@ -745,7 +745,7 @@ export function generateBalanceWarnings(
     if (!acc[item.blockchain]) {
       acc[item.blockchain] = [];
     }
-    acc[item.blockchain].push(item);
+    acc[item.blockchain]?.push(item);
     return acc;
   }, {});
 }

widget/ui/src/containers/SwapInput/SwapInput.styles.ts

@@ -10,7 +10,7 @@ export const Container = styled('div', {
   },
   backgroundColor: '$$color',
   borderRadius: '$xm',
-  padding: '$15',
+  padding: '$8 $15',
   borderTopLeftRadius: '$0',
   borderTopRightRadius: '$0',
   variants: {
@@ -50,6 +50,7 @@ export const TokenValue = styled('div', {
   display: 'flex',
   flexDirection: 'row-reverse',
   justifyContent: 'space-between',
+  padding: '$4 0',
 });
 
 export const ValueTypography = styled('div', {

widget/ui/src/containers/SwapInput/SwapInput.tsx

@@ -106,7 +106,6 @@ export function SwapInput(props: SwapInputPropTypes) {
           )}
         </div>
       </div>
-      <Divider size={4} />
       <TokenValue>
         <PriceImpact
           size="medium"