@rango-dev/widget-embedded 0.37.1-next.1 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.37.1-next.1",
+  "version": "0.38.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.6.0",
-    "@rango-dev/provider-all": "^0.41.1-next.0",
+    "@rango-dev/provider-all": "^0.42.0",
     "@rango-dev/queue-manager-core": "^0.27.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.41.1-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.41.0",
     "@rango-dev/queue-manager-react": "^0.27.0",
-    "@rango-dev/signer-solana": "^0.35.1-next.0",
-    "@rango-dev/ui": "^0.43.1-next.0",
-    "@rango-dev/wallets-core": "^0.40.1-next.8",
-    "@rango-dev/wallets-react": "^0.27.1-next.0",
-    "@rango-dev/wallets-shared": "^0.41.1-next.0",
+    "@rango-dev/signer-solana": "^0.36.0",
+    "@rango-dev/ui": "^0.43.0",
+    "@rango-dev/wallets-core": "^0.40.0",
+    "@rango-dev/wallets-react": "^0.27.0",
+    "@rango-dev/wallets-shared": "^0.41.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/QueueManager.tsx

@@ -1,8 +1,5 @@
-import type {
-  SwapQueueContext,
-  TargetNamespace,
-} from '@rango-dev/queue-manager-rango-preset';
-import type { WalletType } from '@rango-dev/wallets-shared';
+import type { SwapQueueContext } from '@rango-dev/queue-manager-rango-preset';
+import type { Network, WalletType } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
 
 import {
@@ -18,6 +15,7 @@ import React, { useMemo } from 'react';
 import { eventEmitter } from './services/eventEmitter';
 import { useAppStore } from './store/AppStore';
 import { useUiStore } from './store/ui';
+import { useWalletsStore } from './store/wallets';
 import { getConfig } from './utils/configs';
 import { walletAndSupportedChainsNames } from './utils/wallets';
 
@@ -41,8 +39,8 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     });
   }, [props.apiKey]);
 
-  const { blockchains, connectedWallets } = useAppStore();
-  const blockchainsList = blockchains();
+  const blockchains = useAppStore().blockchains();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
 
   const wallets = {
     blockchains: connectedWallets.map((wallet) => ({
@@ -51,23 +49,18 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     })),
   };
 
-  const switchNetwork = async (
-    wallet: WalletType,
-    namespace: TargetNamespace
-  ) => {
-    if (!canSwitchNetworkTo(wallet, namespace.network)) {
+  const switchNetwork = async (wallet: WalletType, network: Network) => {
+    if (!canSwitchNetworkTo(wallet, network)) {
       return undefined;
     }
-    const result = await connect(wallet, [namespace]);
-
-    return result;
+    return connect(wallet, network);
   };
 
   const isMobileWallet = (walletType: WalletType): boolean =>
     !!getWalletInfo(walletType).mobileWallet;
 
   // TODO: this code copy & pasted from rango, should be refactored.
-  const allBlockchains = blockchainsList
+  const allBlockchains = blockchains
     .filter((blockchain) => blockchain.enabled)
     .reduce(
       (blockchainsObj: any, blockchain) => (
@@ -75,7 +68,7 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
       ),
       {}
     );
-  const evmBasedChains = blockchainsList.filter(isEvmBlockchain);
+  const evmBasedChains = blockchains.filter(isEvmBlockchain);
   const getSupportedChainNames = (type: WalletType) => {
     const { supportedChains } = getWalletInfo(type);
     return walletAndSupportedChainsNames(supportedChains);
@@ -95,6 +88,7 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     providers: allProviders,
     switchNetwork,
     canSwitchNetworkTo,
+    connect,
     state,
     isMobileWallet,
   };

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -1,6 +1,6 @@
 import type { PropTypes } from './ConfirmWalletsModal.types';
-import type { ConnectedWallet } from '../../store/slices/wallets';
-import type { Wallet } from '../../types';
+import type { ConnectedWallet } from '../../store/wallets';
+import type { ConfirmSwapWarnings, Wallet } from '../../types';
 
 import { i18n } from '@lingui/core';
 import {
@@ -17,8 +17,10 @@ import { useNavigate } from 'react-router-dom';
 
 import { WIDGET_UI_ID } from '../../constants';
 import { getQuoteErrorMessage } from '../../constants/errors';
+import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
+import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainShortNameFor } from '../../utils/meta';
 import { isConfirmSwapDisabled } from '../../utils/swap';
 import { getQuoteWallets } from '../../utils/wallets';
@@ -52,11 +54,15 @@ export function ConfirmWalletsModal(props: PropTypes) {
     customDestination,
     setCustomDestination,
   } = useQuoteStore();
-  const { config, connectedWallets, setWalletsAsSelected } = useAppStore();
+  const { connectedWallets, selectWallets } = useWalletsStore();
+  const { config } = useAppStore();
 
   const [showMoreWalletFor, setShowMoreWalletFor] = useState('');
   const [balanceWarnings, setBalanceWarnings] = useState<string[]>([]);
   const [error, setError] = useState('');
+  const [quoteWarning, setQuoteWarning] = useState<
+    ConfirmSwapWarnings['quoteUpdate'] | null
+  >(null);
 
   const [isCustomDestinationOpen, setCustomDestinationOpen] = useState(
     !!customDestination
@@ -211,7 +217,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
     const lastSelectedWallets = selectableWallets.filter(
       (wallet) => wallet.selected
     );
-    setWalletsAsSelected(lastSelectedWallets);
+    selectWallets(lastSelectedWallets);
     selectQuoteWallets(lastSelectedWallets);
     setQuoteWalletConfirmed(true);
     onClose();
@@ -220,6 +226,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const onConfirmWallets = async () => {
     setBalanceWarnings([]);
     setError('');
+    setQuoteWarning(null);
 
     const result = await onCheckBalance?.({
       selectedWallets: selectableWallets.filter((wallet) => wallet.selected),
@@ -229,7 +236,9 @@ export function ConfirmWalletsModal(props: PropTypes) {
     if (warnings?.balance?.messages) {
       setBalanceWarnings(warnings.balance.messages);
     }
-
+    if (warnings?.quoteUpdate) {
+      setQuoteWarning(warnings.quoteUpdate);
+    }
     if (result.error) {
       setError(getQuoteErrorMessage(result.error));
     }
@@ -409,6 +418,16 @@ export function ConfirmWalletsModal(props: PropTypes) {
               <Divider size={12} />
             </>
           )}
+          {quoteWarning && (
+            <>
+              <Alert
+                variant="alarm"
+                type="warning"
+                title={getQuoteUpdateWarningMessage(quoteWarning)}
+              />
+              <Divider size={12} />
+            </>
+          )}
           <Wallets>
             {quoteWallets.map((requiredWallet, index) => {
               const blockchain = blockchains.find(

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -1,6 +1,5 @@
 import type { PropTypes } from './WalletList.type';
-import type { Wallet } from '../../types';
-import type { ExtendedModalWalletInfo } from '../../utils/wallets';
+import type { Wallet, WalletInfoWithExtra } from '../../types';
 
 import { i18n } from '@lingui/core';
 import { warn } from '@rango-dev/logging-core';
@@ -21,6 +20,7 @@ import {
 import { useWalletList } from '../../hooks/useWalletList';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
+import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainDisplayNameFor } from '../../utils/meta';
 import {
   getAddress,
@@ -41,9 +41,10 @@ export function WalletList(props: PropTypes) {
   const { chain, isSelected, selectWallet, limit, onShowMore } = props;
   const isActiveTab = useUiStore.use.isActiveTab();
 
-  const { blockchains, connectedWallets } = useAppStore();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const { blockchains } = useAppStore();
   const [selectedWalletToConnect, setSelectedWalletToConnect] =
-    useState<ExtendedModalWalletInfo>();
+    useState<WalletInfoWithExtra>();
   const [experimentalChainWallet, setExperimentalChainWallet] =
     useState<Wallet | null>(null);
   const [showExperimentalChainModal, setShowExperimentalChainModal] =
@@ -56,7 +57,7 @@ export function WalletList(props: PropTypes) {
     chain,
   });
 
-  const [sortedList, setSortedList] = useState<ExtendedModalWalletInfo[]>(list);
+  const [sortedList, setSortedList] = useState<WalletInfoWithExtra[]>(list);
   const numberOfSupportedWallets = list.length;
   const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
 
@@ -147,13 +148,9 @@ export function WalletList(props: PropTypes) {
 
         const onSelectableWalletClick = async () => {
           const isDisconnected = wallet.state === WalletState.DISCONNECTED;
-          const isConnectedButDifferentThanTargetNamespace = wallet.isHub
-            ? !conciseAddress
-            : !!wallet.needsNamespace && !conciseAddress;
-
           if (isDisconnected) {
             setSelectedWalletToConnect(wallet);
-          } else if (isConnectedButDifferentThanTargetNamespace) {
+          } else if (!!wallet.namespaces && !conciseAddress) {
             // wallet is connected on a different namespace
             await handleDisconnect(wallet.type);
 

package/src/components/Layout/Layout.tsx

@@ -13,6 +13,7 @@ import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
 import { tabManager, useUiStore } from '../../store/ui';
+import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
 import { getPendingSwaps } from '../../utils/queue';
 import { isFeatureHidden } from '../../utils/settings';
@@ -27,8 +28,9 @@ import { Container, Content, Footer, LayoutContainer } from './Layout.styles';
 function Layout(props: PropsWithChildren<PropTypes>) {
   const { connectHeightObserver, disconnectHeightObserver } = useIframe();
   const { children, header, footer, height = 'fixed' } = props;
-  const { fetchStatus, connectedWallets } = useAppStore();
+  const { fetchStatus } = useAppStore();
   const [openRefreshModal, setOpenRefreshModal] = useState(false);
+  const connectedWallets = useWalletsStore.use.connectedWallets();
   const {
     config: { features, theme },
   } = useAppStore();

package/src/components/Quote/Quote.tsx

@@ -17,11 +17,7 @@ import {
 import BigNumber from 'bignumber.js';
 import React, { useRef, useState } from 'react';
 
-import {
-  GAS_FEE_MAX,
-  ROUTE_TIME_MAX,
-  SECONDS_IN_MINUTE,
-} from '../../constants/quote';
+import { GAS_FEE_MAX } from '../../constants/quote';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -315,8 +311,7 @@ export function Quote(props: QuoteProps) {
   const container = propContainer || getContainer();
   const sortedQuoteTags = sortTags(props.quote.tags || []);
   const showAllRoutesButton = !!onClickAllRoutes;
-  const totalDurationSeconds = totalArrivalTime(quote?.swaps);
-  const totalTime = roundedSecondsToString(totalDurationSeconds);
+  const totalTime = roundedSecondsToString(totalArrivalTime(quote?.swaps));
   const totalFee = getTotalFeeInUsd(quote?.swaps ?? [], findToken);
   const fee = numberToString(
     totalFee,
@@ -325,8 +320,6 @@ export function Quote(props: QuoteProps) {
   );
 
   const feeWarning = totalFee.gte(new BigNumber(GAS_FEE_MAX));
-  const timeWarning =
-    totalDurationSeconds / SECONDS_IN_MINUTE >= ROUTE_TIME_MAX;
 
   return fullExpandedMode ? (
     <FullExpandedQuote
@@ -336,18 +329,7 @@ export function Quote(props: QuoteProps) {
       tooltipContainer={getExpanded()}
       steps={steps}
       tags={sortedQuoteTags}
-      quoteCost={
-        <QuoteCostDetails
-          quote={quote}
-          fullExpandedMode
-          time={totalTime}
-          fee={fee}
-          feeWarning={feeWarning}
-          timeWarning={timeWarning}
-          showModalFee={showModalFee}
-          steps={numberOfSteps}
-        />
-      }
+      feeWarning={feeWarning}
       percentageChange={percentageChange}
       warningLevel={priceImpactWarningLevel}
       outputPrice={{
@@ -386,7 +368,6 @@ export function Quote(props: QuoteProps) {
             time={totalTime}
             fee={fee}
             feeWarning={feeWarning}
-            timeWarning={timeWarning}
             showModalFee={showModalFee}
             steps={numberOfSteps}
           />

package/src/components/Quote/Quote.types.ts

@@ -48,7 +48,5 @@ export type QuoteCostDetailsProps = {
   fee: string;
   time: string;
   feeWarning?: boolean;
-  timeWarning?: boolean;
   showModalFee: boolean;
-  fullExpandedMode?: boolean;
 };

package/src/components/Quote/QuoteCostDetails.styles.ts

@@ -28,6 +28,7 @@ export const ModalContainer = styled('div', {
 
 export const ModalHeader = styled('div', {
   padding: '$20 $20 $10',
+  textAlign: 'center',
   position: 'relative',
   '._icon-button': {
     position: 'absolute',

package/src/components/Quote/QuoteCostDetails.tsx

@@ -21,7 +21,7 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
-import { getContainer, getExpanded } from '../../utils/common';
+import { getContainer } from '../../utils/common';
 import { numberToString } from '../../utils/numbers';
 import { getFeesGroup, getTotalFeesInUsd, getUsdFee } from '../../utils/swap';
 import { WatermarkedModal } from '../common/WatermarkedModal';
@@ -57,18 +57,9 @@ const NonPayableFee = (props: { fee: BigNumber; label: string }) => {
 export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   const [open, setOpen] = useState<boolean>(false);
   const [openCollapse, setOpenCollapse] = useState<boolean>(false);
-  const {
-    steps,
-    quote,
-    fee,
-    time,
-    feeWarning,
-    timeWarning,
-    showModalFee,
-    fullExpandedMode = false,
-  } = props;
+  const { steps, quote, fee, time, feeWarning, showModalFee } = props;
   const swaps = quote?.swaps ?? [];
-  const container = fullExpandedMode ? getExpanded() : getContainer();
+  const container = getContainer();
 
   const feesGroup = getFeesGroup(swaps);
 
@@ -85,7 +76,6 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
         }
         fee={fee}
         feeWarning={feeWarning}
-        timeWarning={timeWarning}
         time={time}
         steps={steps}
         tooltipGas={showModalFee ? i18n.t('View more info') : undefined}
@@ -95,17 +85,8 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
       <WatermarkedModal
         container={container}
         open={open}
-        anchor={fullExpandedMode ? 'center' : 'bottom'}
-        styles={{
-          container: {
-            maxWidth: fullExpandedMode ? '484px' : 'unset',
-          },
-        }}
         header={
-          <ModalHeader
-            style={{
-              textAlign: fullExpandedMode ? 'left' : 'center',
-            }}>
+          <ModalHeader>
             <Typography variant="title" size="medium">
               {i18n.t('Gas & Fee Explanation')}
             </Typography>

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts

@@ -44,50 +44,30 @@ export function makeAlerts(
     return alertInfo;
   }
   if (warning) {
-    switch (warning.type) {
-      case QuoteWarningType.HIGH_VALUE_LOSS: {
-        const warningLevel = getPriceImpactLevel(warning.priceImpact);
-        if (warningLevel === 'high') {
-          alertInfo.alertType = 'error';
-        }
-        alertInfo.action = 'show-info';
-        alertInfo.title = errorMessages().highValueLossError.title;
-        break;
+    if (warning.type === QuoteWarningType.HIGH_VALUE_LOSS) {
+      const warningLevel = getPriceImpactLevel(warning.priceImpact);
+      if (warningLevel === 'high') {
+        alertInfo.alertType = 'error';
       }
-      case QuoteWarningType.EXCESSIVE_OUTPUT_AMOUNT_CHANGE: {
-        alertInfo.title = i18n.t({
-          id: 'Output amount changed by {percentageChange}% (${usdValueChange}).',
-          values: {
-            percentageChange: warning.percentageChange,
-            usdValueChange: warning.usdValueChange,
-          },
-        });
-        break;
-      }
-      case QuoteWarningType.UNKNOWN_PRICE: {
-        alertInfo.title = errorMessages().unknownPriceError.title;
-        break;
-      }
-      case QuoteWarningType.INSUFFICIENT_SLIPPAGE: {
-        alertInfo.title = i18n.t({
-          id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
-          values: {
-            minRequiredSlippage: warning.minRequiredSlippage,
-          },
-        });
-        alertInfo.action = 'change-settings';
-        break;
-      }
-      case QuoteWarningType.HIGH_SLIPPAGE: {
-        alertInfo.title = i18n.t('Caution, your slippage is high.');
-        alertInfo.action = 'change-settings';
-        break;
-      }
-
-      default:
-        break;
+      alertInfo.action = 'show-info';
+      alertInfo.title = errorMessages().highValueLossError.title;
+    }
+    if (warning.type === QuoteWarningType.UNKNOWN_PRICE) {
+      alertInfo.title = errorMessages().unknownPriceError.title;
+    }
+    if (warning.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE) {
+      alertInfo.title = i18n.t({
+        id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+        values: {
+          minRequiredSlippage: warning.minRequiredSlippage,
+        },
+      });
+      alertInfo.action = 'change-settings';
+    }
+    if (warning.type === QuoteWarningType.HIGH_SLIPPAGE) {
+      alertInfo.title = i18n.t('Caution, your slippage is high.');
+      alertInfo.action = 'change-settings';
     }
-
     return alertInfo;
   }
   return null;

package/src/components/Quotes/Quotes.tsx

@@ -53,8 +53,9 @@ export function Quotes(props: PropTypes) {
       ...quote,
     };
 
-    return generateQuoteWarnings({
-      currentQuote: mergedQuote,
+    return generateQuoteWarnings(mergedQuote, {
+      fromToken,
+      toToken,
       userSlippage,
       findToken,
     });

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -1,6 +1,6 @@
 import type { Result } from '../../hooks/useStatefulConnect';
 import type { WalletInfoWithExtra } from '../../types';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { Namespace } from '@rango-dev/wallets-shared';
 
 import { Divider } from '@rango-dev/ui';
 import React, { useEffect, useRef, useState } from 'react';

package/src/components/SwapDetails/SwapDetails.tsx

@@ -3,7 +3,7 @@ import type { ModalState } from '../SwapDetailsModal';
 
 import { i18n } from '@lingui/core';
 import {
-  getCurrentNamespaceOfOrNull,
+  getCurrentBlockchainOfOrNull,
   getCurrentStep,
   getRelatedWalletOrNull,
 } from '@rango-dev/queue-manager-rango-preset';
@@ -138,8 +138,8 @@ export function SwapDetails(props: SwapDetailsProps) {
   const lastConvertedTokenInFailedSwap =
     getLastConvertedTokenInFailedSwap(swap);
 
-  const currentStepNamespace = currentStep
-    ? getCurrentNamespaceOfOrNull(swap, currentStep)
+  const currentStepBlockchain = currentStep
+    ? getCurrentBlockchainOfOrNull(swap, currentStep)
     : null;
   const currentStepWallet = currentStep
     ? getRelatedWalletOrNull(swap, currentStep)
@@ -154,21 +154,13 @@ export function SwapDetails(props: SwapDetailsProps) {
   const showSwitchNetwork =
     currentStepNetworkStatus ===
       PendingSwapNetworkStatus.WaitingForNetworkChange &&
-    !!currentStepNamespace &&
+    !!currentStepBlockchain &&
     !!currentStepWallet?.walletType &&
     (isMobileWallet(currentStepWallet.walletType) ||
-      canSwitchNetworkTo(
-        currentStepWallet.walletType,
-        currentStepNamespace.network
-      ));
+      canSwitchNetworkTo(currentStepWallet.walletType, currentStepBlockchain));
 
   const switchNetwork = showSwitchNetwork
-    ? connect.bind(null, currentStepWallet.walletType, [
-        {
-          namespace: currentStepNamespace.namespace,
-          network: currentStepNamespace.network,
-        },
-      ])
+    ? connect.bind(null, currentStepWallet.walletType, currentStepBlockchain)
     : undefined;
 
   const stepMessage = getSwapMessages(swap, currentStep);

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.types.ts

@@ -15,7 +15,7 @@ export interface SwapAlertsProps extends WaningAlertsProps {
 }
 
 export interface WaningAlertsProps extends FailedAlertsProps {
-  switchNetwork: (() => Promise<ConnectResult[]>) | undefined;
+  switchNetwork: (() => Promise<ConnectResult>) | undefined;
   showNetworkModal: PendingSwapNetworkStatus | null | undefined;
   setNetworkModal: (network: ModalState) => void;
 }

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -12,7 +12,6 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { WIDGET_UI_ID } from '../../constants';
-import { useUiStore } from '../../store/ui';
 import { getContainer } from '../../utils/common';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 
@@ -32,7 +31,6 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
     diagnosisUrl,
   } = props;
   const navigate = useNavigate();
-  const { showProfileBanner } = useUiStore();
 
   return (
     <WatermarkedModal
@@ -74,32 +72,21 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           description={description}
         />
       )}
-      <Divider size={30} />
+      <Divider size={32} />
       {status === 'success' && (
-        <>
-          {showProfileBanner && (
-            <>
-              <img
-                src={
-                  'https://raw.githubusercontent.com/rango-exchange/assets/main/banners/widget/profile.png'
-                }
-                alt="Profile Banner"
-              />
-              <Divider size={30} />
-            </>
-          )}
-          <Button
-            id="widget-swap-details-modal-done-btn"
-            variant="contained"
-            type="primary"
-            size="large"
-            onClick={() => {
-              const home = '../../';
-              navigate(home);
-            }}>
+        <Button
+          id="widget-swap-details-modal-done-btn"
+          variant="contained"
+          type="primary"
+          size="large"
+          onClick={() => {
+            const home = '../../';
+            navigate(home);
+          }}>
+          <Typography variant="title" size="medium" color="neutral100">
             {i18n.t('Done')}
-          </Button>
-        </>
+          </Typography>
+        </Button>
       )}
       <Divider size={12} />
       {diagnosisUrl && (