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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.37.0",
+  "version": "0.37.1-next.1",
   "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.0",
+    "@rango-dev/provider-all": "^0.41.1-next.0",
     "@rango-dev/queue-manager-core": "^0.27.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.41.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.41.1-next.0",
     "@rango-dev/queue-manager-react": "^0.27.0",
-    "@rango-dev/signer-solana": "^0.35.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",
+    "@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",
     "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,5 +1,8 @@
-import type { SwapQueueContext } from '@rango-dev/queue-manager-rango-preset';
-import type { Network, WalletType } from '@rango-dev/wallets-shared';
+import type {
+  SwapQueueContext,
+  TargetNamespace,
+} from '@rango-dev/queue-manager-rango-preset';
+import type { WalletType } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
 
 import {
@@ -15,7 +18,6 @@ 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';
 
@@ -39,8 +41,8 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     });
   }, [props.apiKey]);
 
-  const blockchains = useAppStore().blockchains();
-  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const { blockchains, connectedWallets } = useAppStore();
+  const blockchainsList = blockchains();
 
   const wallets = {
     blockchains: connectedWallets.map((wallet) => ({
@@ -49,18 +51,23 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     })),
   };
 
-  const switchNetwork = async (wallet: WalletType, network: Network) => {
-    if (!canSwitchNetworkTo(wallet, network)) {
+  const switchNetwork = async (
+    wallet: WalletType,
+    namespace: TargetNamespace
+  ) => {
+    if (!canSwitchNetworkTo(wallet, namespace.network)) {
       return undefined;
     }
-    return connect(wallet, network);
+    const result = await connect(wallet, [namespace]);
+
+    return result;
   };
 
   const isMobileWallet = (walletType: WalletType): boolean =>
     !!getWalletInfo(walletType).mobileWallet;
 
   // TODO: this code copy & pasted from rango, should be refactored.
-  const allBlockchains = blockchains
+  const allBlockchains = blockchainsList
     .filter((blockchain) => blockchain.enabled)
     .reduce(
       (blockchainsObj: any, blockchain) => (
@@ -68,7 +75,7 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
       ),
       {}
     );
-  const evmBasedChains = blockchains.filter(isEvmBlockchain);
+  const evmBasedChains = blockchainsList.filter(isEvmBlockchain);
   const getSupportedChainNames = (type: WalletType) => {
     const { supportedChains } = getWalletInfo(type);
     return walletAndSupportedChainsNames(supportedChains);
@@ -88,7 +95,6 @@ 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/wallets';
-import type { ConfirmSwapWarnings, Wallet } from '../../types';
+import type { ConnectedWallet } from '../../store/slices/wallets';
+import type { Wallet } from '../../types';
 
 import { i18n } from '@lingui/core';
 import {
@@ -17,10 +17,8 @@ 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';
@@ -54,15 +52,11 @@ export function ConfirmWalletsModal(props: PropTypes) {
     customDestination,
     setCustomDestination,
   } = useQuoteStore();
-  const { connectedWallets, selectWallets } = useWalletsStore();
-  const { config } = useAppStore();
+  const { config, connectedWallets, setWalletsAsSelected } = 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
@@ -217,7 +211,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
     const lastSelectedWallets = selectableWallets.filter(
       (wallet) => wallet.selected
     );
-    selectWallets(lastSelectedWallets);
+    setWalletsAsSelected(lastSelectedWallets);
     selectQuoteWallets(lastSelectedWallets);
     setQuoteWalletConfirmed(true);
     onClose();
@@ -226,7 +220,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const onConfirmWallets = async () => {
     setBalanceWarnings([]);
     setError('');
-    setQuoteWarning(null);
 
     const result = await onCheckBalance?.({
       selectedWallets: selectableWallets.filter((wallet) => wallet.selected),
@@ -236,9 +229,7 @@ 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));
     }
@@ -418,16 +409,6 @@ 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,5 +1,6 @@
 import type { PropTypes } from './WalletList.type';
-import type { Wallet, WalletInfoWithExtra } from '../../types';
+import type { Wallet } from '../../types';
+import type { ExtendedModalWalletInfo } from '../../utils/wallets';
 
 import { i18n } from '@lingui/core';
 import { warn } from '@rango-dev/logging-core';
@@ -20,7 +21,6 @@ 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,10 +41,9 @@ export function WalletList(props: PropTypes) {
   const { chain, isSelected, selectWallet, limit, onShowMore } = props;
   const isActiveTab = useUiStore.use.isActiveTab();
 
-  const connectedWallets = useWalletsStore.use.connectedWallets();
-  const { blockchains } = useAppStore();
+  const { blockchains, connectedWallets } = useAppStore();
   const [selectedWalletToConnect, setSelectedWalletToConnect] =
-    useState<WalletInfoWithExtra>();
+    useState<ExtendedModalWalletInfo>();
   const [experimentalChainWallet, setExperimentalChainWallet] =
     useState<Wallet | null>(null);
   const [showExperimentalChainModal, setShowExperimentalChainModal] =
@@ -57,7 +56,7 @@ export function WalletList(props: PropTypes) {
     chain,
   });
 
-  const [sortedList, setSortedList] = useState<WalletInfoWithExtra[]>(list);
+  const [sortedList, setSortedList] = useState<ExtendedModalWalletInfo[]>(list);
   const numberOfSupportedWallets = list.length;
   const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
 
@@ -148,9 +147,13 @@ 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 (!!wallet.namespaces && !conciseAddress) {
+          } else if (isConnectedButDifferentThanTargetNamespace) {
             // wallet is connected on a different namespace
             await handleDisconnect(wallet.type);
 

package/src/components/Layout/Layout.tsx

@@ -13,7 +13,6 @@ 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';
@@ -28,9 +27,8 @@ 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 } = useAppStore();
+  const { fetchStatus, connectedWallets } = useAppStore();
   const [openRefreshModal, setOpenRefreshModal] = useState(false);
-  const connectedWallets = useWalletsStore.use.connectedWallets();
   const {
     config: { features, theme },
   } = useAppStore();

package/src/components/Quote/Quote.tsx

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

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

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

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

@@ -44,30 +44,50 @@ export function makeAlerts(
     return alertInfo;
   }
   if (warning) {
-    if (warning.type === QuoteWarningType.HIGH_VALUE_LOSS) {
-      const warningLevel = getPriceImpactLevel(warning.priceImpact);
-      if (warningLevel === 'high') {
-        alertInfo.alertType = 'error';
+    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;
       }
-      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';
+      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;
     }
+
     return alertInfo;
   }
   return null;

package/src/components/Quotes/Quotes.tsx

@@ -53,9 +53,8 @@ export function Quotes(props: PropTypes) {
       ...quote,
     };
 
-    return generateQuoteWarnings(mergedQuote, {
-      fromToken,
-      toToken,
+    return generateQuoteWarnings({
+      currentQuote: mergedQuote,
       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-shared';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 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 {
-  getCurrentBlockchainOfOrNull,
+  getCurrentNamespaceOfOrNull,
   getCurrentStep,
   getRelatedWalletOrNull,
 } from '@rango-dev/queue-manager-rango-preset';
@@ -138,8 +138,8 @@ export function SwapDetails(props: SwapDetailsProps) {
   const lastConvertedTokenInFailedSwap =
     getLastConvertedTokenInFailedSwap(swap);
 
-  const currentStepBlockchain = currentStep
-    ? getCurrentBlockchainOfOrNull(swap, currentStep)
+  const currentStepNamespace = currentStep
+    ? getCurrentNamespaceOfOrNull(swap, currentStep)
     : null;
   const currentStepWallet = currentStep
     ? getRelatedWalletOrNull(swap, currentStep)
@@ -154,13 +154,21 @@ export function SwapDetails(props: SwapDetailsProps) {
   const showSwitchNetwork =
     currentStepNetworkStatus ===
       PendingSwapNetworkStatus.WaitingForNetworkChange &&
-    !!currentStepBlockchain &&
+    !!currentStepNamespace &&
     !!currentStepWallet?.walletType &&
     (isMobileWallet(currentStepWallet.walletType) ||
-      canSwitchNetworkTo(currentStepWallet.walletType, currentStepBlockchain));
+      canSwitchNetworkTo(
+        currentStepWallet.walletType,
+        currentStepNamespace.network
+      ));
 
   const switchNetwork = showSwitchNetwork
-    ? connect.bind(null, currentStepWallet.walletType, currentStepBlockchain)
+    ? connect.bind(null, currentStepWallet.walletType, [
+        {
+          namespace: currentStepNamespace.namespace,
+          network: currentStepNamespace.network,
+        },
+      ])
     : 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,6 +12,7 @@ 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';
 
@@ -31,6 +32,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
     diagnosisUrl,
   } = props;
   const navigate = useNavigate();
+  const { showProfileBanner } = useUiStore();
 
   return (
     <WatermarkedModal
@@ -72,21 +74,32 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           description={description}
         />
       )}
-      <Divider size={32} />
+      <Divider size={30} />
       {status === 'success' && (
-        <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">
+        <>
+          {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);
+            }}>
             {i18n.t('Done')}
-          </Typography>
-        </Button>
+          </Button>
+        </>
       )}
       <Divider size={12} />
       {diagnosisUrl && (