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

package/src/components/Quote/QuoteSummary.tsx

@@ -1,8 +1,11 @@
 import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 
+import { i18n } from '@lingui/core';
 import { TokenAmount } from '@rango-dev/ui';
 import React from 'react';
 
+import { getContainer } from '../../utils/common';
+
 import { Container, separatorStyles } from './QuoteSummary.styles';
 
 type PropTypes = {
@@ -14,13 +17,20 @@ type PropTypes = {
 
 export function QuoteSummary(props: PropTypes) {
   const { from, to, percentageChange, warningLevel } = props;
+
   return (
     <Container>
       <TokenAmount
         direction="horizontal"
-        label="Swap input"
+        label={i18n.t('Swap input')}
         type="input"
-        price={{ value: from.price.value, usdValue: from.price.usdValue }}
+        tooltipContainer={getContainer()}
+        price={{
+          value: from.price.value,
+          usdValue: from.price.usdValue,
+          realValue: from.price.realValue,
+          realUsdValue: from.price.realUsdValue,
+        }}
         token={{
           displayName: from.token.displayName,
           image: from.token.image,
@@ -30,9 +40,15 @@ export function QuoteSummary(props: PropTypes) {
       <div className={separatorStyles()} />
       <TokenAmount
         direction="horizontal"
-        label="Estimated output"
+        tooltipContainer={getContainer()}
+        label={i18n.t('Estimated output')}
         type="output"
-        price={{ value: to.price.value, usdValue: to.price.usdValue }}
+        price={{
+          value: to.price.value,
+          usdValue: to.price.usdValue,
+          realValue: to.price.realValue,
+          realUsdValue: to.price.realUsdValue,
+        }}
         token={{
           displayName: to.token.displayName,
           image: to.token.image,

package/src/components/Slippage/Slippage.tsx

@@ -72,12 +72,12 @@ export function Slippage() {
           value={customSlippage || ''}
           color="dark"
           onChange={(event) => {
-            const parsedValue = parseFloat(event.target.value);
-            if (
-              !parsedValue ||
-              (parsedValue >= MIN_SLIPPGAE && parsedValue <= MAX_SLIPPAGE)
-            ) {
+            const value = event.target.value;
+            const parsedValue = parseFloat(value);
+            if (parsedValue >= MIN_SLIPPGAE && parsedValue <= MAX_SLIPPAGE) {
               setCustomSlippage(parsedValue);
+            } else {
+              setCustomSlippage(null);
             }
           }}
           suffix={

package/src/components/SwapDetails/SwapDetails.helpers.tsx

@@ -20,7 +20,10 @@ export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
   const hasAlreadyProceededToSign = swap.hasAlreadyProceededToSign !== false;
   return swap.steps.map((step, index) => {
     const amountToConvert =
-      index === 0 ? swap.inputAmount : swap.steps[index - 1].outputAmount;
+      index === 0
+        ? swap.inputAmount
+        : swap.steps[index - 1].outputAmount ||
+          swap.steps[index - 1].expectedOutputAmountHumanReadable;
     return {
       from: {
         token: { displayName: step.fromSymbol, image: step.fromLogo ?? '' },
@@ -35,6 +38,7 @@ export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
             TOKEN_AMOUNT_MIN_DECIMALS,
             TOKEN_AMOUNT_MAX_DECIMALS
           ),
+          realValue: amountToConvert,
         },
       },
       to: {
@@ -50,6 +54,8 @@ export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
             TOKEN_AMOUNT_MIN_DECIMALS,
             TOKEN_AMOUNT_MAX_DECIMALS
           ),
+          realValue:
+            step.outputAmount || step.expectedOutputAmountHumanReadable,
         },
       },
       swapper: { displayName: step.swapperId, image: step.swapperLogo ?? '' },

package/src/components/SwapDetails/SwapDetails.tsx

@@ -18,6 +18,7 @@ import {
   useCopyToClipboard,
 } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
+import BigNumber from 'bignumber.js';
 import { PendingSwapNetworkStatus } from 'rango-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -35,7 +36,9 @@ import {
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
+import { getContainer } from '../../utils/common';
 import {
+  formatTooltipNumbers,
   numberToString,
   secondsToString,
   totalArrivalTime,
@@ -188,6 +191,16 @@ export function SwapDetails(props: SwapDetailsProps) {
     USD_VALUE_MAX_DECIMALS
   );
 
+  const realOutputUsdValue = outputAmount
+    ? formatTooltipNumbers(
+        new BigNumber(outputAmount).multipliedBy(lastStep.toUsdPrice || 0)
+      )
+    : '';
+
+  const realInputUsdValue = formatTooltipNumbers(
+    new BigNumber(swap.inputAmount).multipliedBy(firstStep.fromUsdPrice || 0)
+  );
+
   const percentageChange = getPriceImpact(inputUsdValue, outputUsdValue);
 
   const completeModalDesc =
@@ -280,7 +293,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           </div>
           <div className={rowStyles()}>
             <Typography variant="label" size="large" color="neutral700">
-              {`${i18n.t('Created at')}:`}
+              {`${i18n.t(swap.finishTime ? 'Finished at' : 'Created at')}:`}
             </Typography>
             <Typography variant="label" size="small" color="neutral700">
               {swapDate}
@@ -307,6 +320,8 @@ export function SwapDetails(props: SwapDetailsProps) {
                   TOKEN_AMOUNT_MAX_DECIMALS
                 ),
                 usdValue: inputUsdValue,
+                realUsdValue: realInputUsdValue,
+                realValue: swap.inputAmount,
               },
               token: {
                 displayName: steps[0].from.token.displayName,
@@ -325,6 +340,8 @@ export function SwapDetails(props: SwapDetailsProps) {
                   TOKEN_AMOUNT_MAX_DECIMALS
                 ),
                 usdValue: outputUsdValue,
+                realUsdValue: realOutputUsdValue,
+                realValue: outputAmount,
               },
               token: {
                 displayName: steps[numberOfSteps - 1].to.token.displayName,
@@ -368,6 +385,7 @@ export function SwapDetails(props: SwapDetailsProps) {
                 hasSeparator={index !== 0}
                 tabIndex={key}
                 isFocused={isFocused}
+                tooltipContainer={getContainer()}
               />
             );
           })}
@@ -393,6 +411,8 @@ export function SwapDetails(props: SwapDetailsProps) {
           TOKEN_AMOUNT_MAX_DECIMALS
         )}
         usdValue={outputUsdValue}
+        realUsdValue={realOutputUsdValue}
+        realValue={formatTooltipNumbers(outputAmount)}
         percentageChange={numberToString(
           percentageChange,
           PERCENTAGE_CHANGE_MIN_DECIMALS,

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -12,6 +12,9 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { RANGO_SWAP_BOX_ID } from '../../constants';
+import { getContainer } from '../../utils/common';
+
 export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const {
     open,
@@ -19,6 +22,8 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
     status,
     priceValue,
     usdValue,
+    realUsdValue,
+    realValue,
     token,
     chain,
     percentageChange,
@@ -31,16 +36,19 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
     <Modal
       open={open}
       onClose={onClose}
-      container={document.getElementById('swap-box') || document.body}>
+      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
       {status === 'success' ? (
         <MessageBox type="success" title={i18n.t('Swap Successful')}>
           <TokenAmount
             direction="vertical"
+            tooltipContainer={getContainer()}
             type="output"
             centerAlign={true}
             price={{
               value: priceValue,
               usdValue,
+              realUsdValue,
+              realValue,
             }}
             token={token}
             chain={chain}

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -4,6 +4,8 @@ import { Modal } from '@rango-dev/ui';
 import { PendingSwapNetworkStatus } from 'rango-types';
 import React from 'react';
 
+import { RANGO_SWAP_BOX_ID } from '../../constants';
+
 import { CancelContent } from './SwapDetailsModal.Cancel';
 import { DeleteContent } from './SwapDetailsModal.Delete';
 import { modalNetworkValues } from './SwapDetailsModal.helpers';
@@ -22,7 +24,7 @@ export function SwapDetailsModal(props: ModalPropTypes) {
     <Modal
       open={!!state}
       onClose={onClose}
-      container={document.getElementById('swap-box') || document.body}>
+      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
       {showWalletStateContent && (
         <WalletStateContent
           type={modalNetworkValues[state].type}

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -24,7 +24,9 @@ export interface CompleteModalPropTypes {
   onClose: () => void;
   status: 'success' | 'failed';
   priceValue: string;
+  realValue: string;
   usdValue: string;
+  realUsdValue: string;
   percentageChange: string;
   chain: {
     displayName?: string;

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -4,7 +4,12 @@ import { i18n } from '@lingui/core';
 import { Divider, SwapListItem, Typography } from '@rango-dev/ui';
 import React from 'react';
 
-import { limitDecimalPlaces } from '../../utils/numbers';
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../../constants/routing';
+import { getContainer } from '../../utils/common';
+import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
 
 import { Group, groupStyles, SwapList, Time } from './SwapsGroup.styles';
 
@@ -17,11 +22,11 @@ export function SwapsGroup(props: PropTypes) {
 
     const loadingGroups = [
       {
-        title: 'Today',
+        title: i18n.t('Today'),
         swaps,
       },
       {
-        title: 'Last month',
+        title: i18n.t('This month'),
         swaps,
       },
     ];
@@ -35,7 +40,7 @@ export function SwapsGroup(props: PropTypes) {
                   variant="label"
                   size="medium"
                   className={groupStyles()}>
-                  {i18n.t(group.title)}
+                  {group.title}
                 </Typography>
               </Time>
               <Divider size={4} />
@@ -68,13 +73,14 @@ export function SwapsGroup(props: PropTypes) {
                   variant="label"
                   size="medium"
                   className={groupStyles()}>
-                  {i18n.t(group.title)}
+                  {group.title}
                 </Typography>
               </Time>
               <Divider size={4} />
               <SwapList>
                 {group.swaps.map((swap) => {
                   const firstStep = swap.steps[0];
+
                   const lastStep = swap.steps[swap.steps.length - 1];
                   return (
                     <React.Fragment key={swap.requestId}>
@@ -83,7 +89,8 @@ export function SwapsGroup(props: PropTypes) {
                         creationTime={swap.creationTime}
                         status={swap.status}
                         onClick={onSwapClick}
-                        onlyShowTime={group.title === 'Today'}
+                        tooltipContainer={getContainer()}
+                        onlyShowTime={group.title === i18n.t('Today')}
                         swapTokenData={{
                           from: {
                             token: {
@@ -93,7 +100,12 @@ export function SwapsGroup(props: PropTypes) {
                             blockchain: {
                               image: firstStep.fromBlockchainLogo || '',
                             },
-                            amount: limitDecimalPlaces(swap.inputAmount),
+                            amount: numberToString(
+                              swap.inputAmount,
+                              TOKEN_AMOUNT_MIN_DECIMALS,
+                              TOKEN_AMOUNT_MAX_DECIMALS
+                            ),
+                            realAmount: formatTooltipNumbers(swap.inputAmount),
                           },
                           to: {
                             token: {
@@ -103,11 +115,16 @@ export function SwapsGroup(props: PropTypes) {
                             blockchain: {
                               image: lastStep.toBlockchainLogo || '',
                             },
-                            amount: limitDecimalPlaces(
-                              lastStep.outputAmount || ''
+                            amount: numberToString(
+                              lastStep.outputAmount ||
+                                lastStep.expectedOutputAmountHumanReadable ||
+                                '',
+                              TOKEN_AMOUNT_MIN_DECIMALS,
+                              TOKEN_AMOUNT_MAX_DECIMALS
                             ),
-                            estimatedAmount: limitDecimalPlaces(
-                              lastStep.expectedOutputAmountHumanReadable || ''
+                            realAmount: formatTooltipNumbers(
+                              lastStep.outputAmount ||
+                                lastStep.expectedOutputAmountHumanReadable
                             ),
                           },
                         }}

package/src/components/WalletModal/WalletModal.tsx

@@ -3,6 +3,8 @@ import type { PropTypes } from './WalletModal.types';
 import { Divider, Modal } from '@rango-dev/ui';
 import React from 'react';
 
+import { RANGO_SWAP_BOX_ID } from '../../constants';
+
 import { ModalContent } from './WalletModalContent';
 
 export function WalletModal(props: PropTypes) {
@@ -12,7 +14,7 @@ export function WalletModal(props: PropTypes) {
     <Modal
       open={open}
       onClose={onClose}
-      container={document.getElementById('swap-box') || document.body}>
+      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
       <ModalContent {...otherProps} />
       <Divider direction="vertical" size={32} />
     </Modal>

package/src/constants/index.ts

@@ -1,2 +1,3 @@
 export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
 export const DEFAULT_BASE_URL = 'https://api.rango.exchange';
+export const RANGO_SWAP_BOX_ID = 'rango-swap-box';

package/src/constants/routing.ts

@@ -15,3 +15,5 @@ export const PERCENTAGE_CHANGE_MAX_DECIMALS = 2;
 
 export const BALANCE_MIN_DECIMALS = 8;
 export const BALANCE_MAX_DECIMALS = 8;
+
+export const TOOLTIP_DECIMALS = 12;

package/src/containers/App/App.styles.ts

@@ -1,7 +1,6 @@
 import { styled } from '@rango-dev/ui';
 
 export const MainContainer = styled('div', {
-  width: '100%',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -9,10 +8,10 @@ export const MainContainer = styled('div', {
   boxSizing: 'border-box',
   '& *, *::before, *::after': {
     boxSizing: 'inherit',
-    listStyleType: 'none',
   },
   '& *:focus-visible': {
     outlineColor: '$info500',
     transition: 'none',
   },
+  '& ul, ol, li': { listStyleType: 'none' },
 });

package/src/containers/Wallets/Wallets.tsx

@@ -3,6 +3,7 @@ import type {
   PropTypes,
   WidgetContextInterface,
 } from './Wallets.types';
+import type { Wallet } from '../../types/wallets';
 import type { ProvidersOptions } from '../../utils/providers';
 import type { EventHandler } from '@rango-dev/wallets-react';
 import type { Network } from '@rango-dev/wallets-shared';
@@ -10,7 +11,7 @@ import type { PropsWithChildren } from 'react';
 
 import { Events, Provider } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-sdk';
-import React, { createContext, useEffect, useRef } from 'react';
+import React, { createContext, useEffect, useRef, useState } from 'react';
 
 import { useSyncStoresWithConfig } from '../../hooks/useSyncStoresWithConfig';
 import { useWalletProviders } from '../../hooks/useWalletProviders';
@@ -34,6 +35,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const walletOptions: ProvidersOptions = {
     walletConnectProjectId: props.config?.walletConnectProjectId,
   };
+  const [accounts, setAccounts] = useState<Wallet[]>([]);
   const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
@@ -66,7 +68,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
           supportedChainNames,
           meta.isContractWallet
         );
-        connectWallet(data, tokens);
+        setAccounts(data);
       } else {
         disconnectWallet(type);
       }
@@ -99,6 +101,13 @@ function Main(props: PropsWithChildren<PropTypes>) {
       props.onUpdateState(type, event, value, state, meta);
     }
   };
+
+  useEffect(() => {
+    if (accounts.length) {
+      connectWallet(accounts, tokens);
+    }
+  }, [accounts, tokens]);
+
   return (
     <WidgetContext.Provider
       // eslint-disable-next-line react/jsx-no-constructed-context-values

package/src/hooks/useSwapInput.ts

@@ -48,6 +48,7 @@ export function useSwapInput(): UseSwapInput {
     toToken,
     inputAmount,
     inputUsdValue,
+    quote,
     resetQuote,
     setQuote,
   } = useQuoteStore();
@@ -63,9 +64,9 @@ export function useSwapInput(): UseSwapInput {
   const [error, setError] = useState<QuoteError | null>(null);
   const [warning, setWarning] = useState<QuoteWarning | null>(null);
   const userSlippage = customSlippage ?? slippage;
-  const hasTokensValue = !fromToken || !toToken;
+  const tokensValueInvalid = !fromToken || !toToken;
   const shouldSkipRequest =
-    hasTokensValue ||
+    tokensValueInvalid ||
     tokensAreEqual(fromToken, toToken) ||
     !isPositiveNumber(inputAmount);
 
@@ -153,6 +154,9 @@ export function useSwapInput(): UseSwapInput {
       return;
     }
     if (shouldSkipRequest) {
+      if (quote) {
+        resetQuote();
+      }
       return;
     }
     resetQuote();

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,9 +1,13 @@
 import type { Asset } from 'rango-sdk';
 
-import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { useEffect, useLayoutEffect, useRef } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
+import {
+  isBlockchainExcludedInConfig,
+  isTokenExcludedInConfig,
+} from '../utils/configs';
 import { tokensAreEqual } from '../utils/wallets';
 
 export function useSyncStoresWithConfig() {
@@ -27,22 +31,10 @@ export function useSyncStoresWithConfig() {
   const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
     useAppStore();
 
-  const fromTokensConfig = useMemo(
-    () => config?.from?.tokens,
-    [config?.from?.tokens]
-  );
-  const fromBlockchainsConfig = useMemo(
-    () => config?.from?.blockchains,
-    [config?.from?.blockchains]
-  );
-  const toTokensConfig = useMemo(
-    () => config?.to?.tokens,
-    [config?.to?.tokens]
-  );
-  const toBlockchainsConfig = useMemo(
-    () => config?.to?.blockchains,
-    [config?.to?.blockchains]
-  );
+  const fromTokensConfig = config?.from?.tokens;
+  const fromBlockchainsConfig = config?.from?.blockchains;
+  const toTokensConfig = config?.to?.tokens;
+  const toBlockchainsConfig = config?.to?.blockchains;
   const prevConfigFromToken = useRef<Asset | undefined>(undefined);
   const prevConfigToToken = useRef<Asset | undefined>(undefined);
   const prevConfigFromBlockchain = useRef<string | undefined>(undefined);
@@ -90,30 +82,21 @@ export function useSyncStoresWithConfig() {
   ]);
 
   useEffect(() => {
-    if (fromToken && fromTokensConfig) {
-      if (!fromTokensConfig.some((token) => tokensAreEqual(token, fromToken))) {
-        setFromToken({ token: null });
-      }
+    if (isTokenExcludedInConfig(fromToken, fromTokensConfig)) {
+      setFromToken({ token: null });
     }
 
-    if (fromBlockchain && fromBlockchainsConfig) {
-      if (!fromBlockchainsConfig.includes(fromBlockchain.name)) {
-        setFromBlockchain(null);
-      }
+    if (isBlockchainExcludedInConfig(fromBlockchain, fromBlockchainsConfig)) {
+      setFromBlockchain(null);
     }
   }, [fromTokensConfig, fromBlockchainsConfig]);
 
   useEffect(() => {
-    if (toToken && toTokensConfig) {
-      if (!toTokensConfig.some((token) => tokensAreEqual(token, toToken))) {
-        setToToken({ token: null });
-      }
+    if (isTokenExcludedInConfig(toToken, toTokensConfig)) {
+      setFromToken({ token: null });
     }
-
-    if (toBlockchain && toBlockchainsConfig) {
-      if (!toBlockchainsConfig.includes(toBlockchain.name)) {
-        setToBlockchain(null);
-      }
+    if (isBlockchainExcludedInConfig(toBlockchain, toBlockchainsConfig)) {
+      setToBlockchain(null);
     }
   }, [toTokensConfig, toBlockchainsConfig]);
 

package/src/index.ts

@@ -2,6 +2,7 @@ import type { WidgetProps } from './containers/Widget';
 import type { ConnectedWallet } from './store/wallets';
 import type {
   BlockchainAndTokenConfig,
+  Tokens,
   WidgetColors,
   WidgetColorsKeys,
   WidgetConfig,
@@ -86,6 +87,7 @@ export type {
   StepOutputRevealedEvent,
   HandleWalletsUpdate,
   ConnectedWallet,
+  Tokens,
 };
 export {
   Widget,

package/src/pages/ConfirmSwapPage.tsx

@@ -12,7 +12,6 @@ import {
   css,
   Divider,
   IconButton,
-  RefreshIcon,
   SettingsIcon,
   styled,
   Tooltip,
@@ -26,6 +25,7 @@ import { useNavigate } from 'react-router-dom';
 import { getRequiredWallets } from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
 import { ConfirmWalletsModal } from '../components/ConfirmWalletsModal/ConfirmWalletsModal';
 import { HeaderButton } from '../components/HeaderButtons/HeaderButtons.styles';
+import { RefreshButton } from '../components/HeaderButtons/RefreshButton';
 import { Layout } from '../components/Layout';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { getQuoteUpdateWarningMessage } from '../constants/warnings';
@@ -324,15 +324,17 @@ export function ConfirmSwapPage() {
           <Typography variant="title" size="small">
             {i18n.t('You get')}
           </Typography>
-          <Button
-            style={{ padding: '0' }}
-            variant="ghost"
-            disabled={fetchingConfirmationQuote}
-            onClick={onRefresh}>
-            <div className={iconStyles()}>
-              <RefreshIcon size={16} />
-            </div>
-          </Button>
+          <div className={iconStyles()}>
+            <RefreshButton
+              onClick={
+                !fetchingConfirmationQuote &&
+                !showWallets &&
+                !showQuoteWarningModal
+                  ? onRefresh
+                  : undefined
+              }
+            />
+          </div>
         </div>
         {dbErrorMessage && (
           <>

package/src/pages/Home.tsx

@@ -22,7 +22,8 @@ import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
-import { numberToString } from '../utils/numbers';
+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';
@@ -160,7 +161,11 @@ export function Home() {
         suffix: (
           <HomeButtons
             layoutRef={layoutRef.current}
-            onClickRefresh={!!quote || quoteError ? fetchQuote : undefined}
+            onClickRefresh={
+              (!!quote || quoteError) && !showQuoteWarningModal
+                ? fetchQuote
+                : undefined
+            }
             onClickHistory={() => navigate(navigationRoutes.swaps)}
             onClickSettings={() => navigate(navigationRoutes.settings)}
           />
@@ -192,6 +197,9 @@ export function Home() {
                       USD_VALUE_MIN_DECIMALS,
                       USD_VALUE_MAX_DECIMALS
                     ),
+                realUsdValue: priceImpactInputCanNotBeComputed
+                  ? undefined
+                  : formatTooltipNumbers(inputUsdValue),
                 error: priceImpactInputCanNotBeComputed
                   ? errorMessages().unknownPriceError.impactTitle
                   : undefined,
@@ -199,6 +207,7 @@ export function Home() {
               disabled={fetchMetaStatus === 'failed'}
               loading={fetchMetaStatus === 'loading'}
               loadingBalance={fetchingBalance}
+              tooltipContainer={getContainer()}
               onSelectMaxBalance={() => {
                 if (fromTokenFormattedBalance !== '0') {
                   setInputAmount(tokenBalanceReal.split(',').join(''));
@@ -239,6 +248,10 @@ export function Home() {
                     USD_VALUE_MIN_DECIMALS,
                     USD_VALUE_MAX_DECIMALS
                   ),
+              realValue: formatTooltipNumbers(outputAmount),
+              realUsdValue: priceImpactOutputCanNotBeComputed
+                ? undefined
+                : formatTooltipNumbers(outputUsdValue),
               error: priceImpactOutputCanNotBeComputed
                 ? errorMessages().unknownPriceError.impactTitle
                 : undefined,
@@ -246,6 +259,7 @@ export function Home() {
             onClickToken={() => navigate(navigationRoutes.toSwap)}
             disabled={fetchMetaStatus === 'failed'}
             loading={fetchMetaStatus === 'loading'}
+            tooltipContainer={getContainer()}
           />
         </InputsContainer>
         <div className="quote__container">