@rango-dev/widget-embedded 0.29.1-next.9 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.29.1-next.9",
+  "version": "0.30.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -24,15 +24,15 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/logging-core": "^0.4.0",
-    "@rango-dev/provider-all": "^0.34.1-next.5",
+    "@rango-dev/logging-core": "^0.5.0",
+    "@rango-dev/provider-all": "^0.35.0",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.34.1-next.5",
+    "@rango-dev/queue-manager-rango-preset": "^0.35.0",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/signer-solana": "^0.29.1-next.1",
-    "@rango-dev/ui": "^0.35.1-next.5",
-    "@rango-dev/wallets-react": "^0.20.1-next.4",
-    "@rango-dev/wallets-shared": "^0.34.1-next.4",
+    "@rango-dev/signer-solana": "^0.30.0",
+    "@rango-dev/ui": "^0.36.0",
+    "@rango-dev/wallets-react": "^0.21.0",
+    "@rango-dev/wallets-shared": "^0.35.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/QueueManager.tsx

@@ -12,6 +12,7 @@ import { convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-share
 import { isEvmBlockchain } from 'rango-types';
 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';
@@ -32,6 +33,9 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     return makeQueueDefinition({
       API_KEY: props.apiKey || getConfig('API_KEY'),
       BASE_URL: getConfig('BASE_URL'),
+      emitter: {
+        emit: eventEmitter.emit,
+      },
     });
   }, [props.apiKey]);
 

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -18,7 +18,13 @@ import {
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { WIDGET_UI_ID } from '../../constants';
@@ -87,10 +93,14 @@ export function ConfirmWalletsModal(props: PropTypes) {
 
   const isFirefox = navigator?.userAgent.includes('Firefox');
 
-  const quoteWallets = getQuoteWallets({
-    filter: 'all',
-    quote: selectedQuote,
-  });
+  const quoteWallets = useMemo(
+    () =>
+      getQuoteWallets({
+        filter: 'all',
+        quote: selectedQuote,
+      }),
+    [selectedQuote]
+  );
 
   const requiredWallets = getQuoteWallets({
     filter: 'required',
@@ -113,7 +123,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
           quoteWallets.includes(connectedWallet.chain)
         );
       }),
-    [connectedWallets.length, quoteWallets.length]
+    [connectedWallets, quoteWallets]
   );
 
   const [selectableWallets, setSelectableWallets] = useState<ConnectedWallet[]>(
@@ -333,7 +343,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
       );
       return nextState;
     });
-  }, [connectedWallets.length, quoteWallets.length]);
+  }, [connectedWallets, quoteWallets]);
 
   useEffect(() => {
     const nextState: typeof nextSelectedWallets = [];
@@ -353,7 +363,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
       });
       setNextSelectedWallets(nextState);
     }
-  }, [connectedWallets.length, nextSelectedWallets.length]);
+  }, [connectedWallets, nextSelectedWallets]);
 
   const modalContainer = document.getElementById(
     WIDGET_UI_ID.SWAP_BOX_ID
@@ -513,7 +523,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                     />
                   </ListContainer>
                   {!isLastWallet && <Divider size={32} />}
-                  {isLastWallet && config?.customDestination && (
+                  {isLastWallet && config?.customDestination !== false && (
                     <CustomDestination>
                       <CustomCollapsible
                         onOpenChange={

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -1,5 +1,5 @@
 import type { PropTypes } from './WalletList.type';
-import type { Wallet, WalletInfoWithNamespaces } from '../../types';
+import type { Wallet, WalletInfoWithExtra } from '../../types';
 import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
@@ -31,6 +31,7 @@ import {
   isExperimentalChain,
 } from '../../utils/wallets';
 import { WatermarkedModal } from '../common/WatermarkedModal';
+import { WalletDerivationPathModal } from '../WalletDerivationPathModal';
 import { WalletModal } from '../WalletModal';
 import { WalletNamespacesModal } from '../WalletNamespacesModal';
 
@@ -42,12 +43,20 @@ import {
 } from './WalletList.styles';
 
 interface WalletNamespacesModalState {
+  open: boolean;
   providerType: string;
   providerImage: string;
   availableNamespaces?: Namespace[];
   singleNamespace?: boolean;
 }
 
+interface DerivationPathModalState {
+  open: boolean;
+  providerType: string;
+  providerImage: string;
+  namespace: Namespace;
+}
+
 const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
 export function WalletList(props: PropTypes) {
   const { chain, isSelected, selectWallet, limit, onShowMore, onConnect } =
@@ -66,6 +75,8 @@ export function WalletList(props: PropTypes) {
     useState<'in-progress' | 'completed' | 'rejected' | null>(null);
   const [namespacesModalState, setNamespacesModalState] =
     useState<WalletNamespacesModalState | null>(null);
+  const [derivationPathModalState, setDerivationPathModalState] =
+    useState<DerivationPathModalState | null>(null);
   const { suggestAndConnect } = useWallets();
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
   const {
@@ -91,8 +102,7 @@ export function WalletList(props: PropTypes) {
       }, TIME_TO_CLOSE_MODAL);
     },
   });
-  const [sortedList, setSortedList] =
-    useState<WalletInfoWithNamespaces[]>(list);
+  const [sortedList, setSortedList] = useState<WalletInfoWithExtra[]>(list);
   const numberOfSupportedWallets = list.length;
   const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
 
@@ -107,8 +117,27 @@ export function WalletList(props: PropTypes) {
     }
   };
 
-  const handleOpenNamespacesModal = (wallet: WalletInfoWithNamespaces) => {
+  const handleCloseNamespaceModal = () => {
+    if (namespacesModalState) {
+      setNamespacesModalState({
+        ...namespacesModalState,
+        open: false,
+      });
+    }
+  };
+
+  const handleCloseDerivationPathModal = () => {
+    if (derivationPathModalState) {
+      setDerivationPathModalState({
+        ...derivationPathModalState,
+        open: false,
+      });
+    }
+  };
+
+  const handleOpenNamespacesModal = (wallet: WalletInfoWithExtra) => {
     setNamespacesModalState({
+      open: true,
       providerType: wallet.type,
       providerImage: wallet.image,
       availableNamespaces: wallet.namespaces,
@@ -116,6 +145,42 @@ export function WalletList(props: PropTypes) {
     });
   };
 
+  const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
+    const wallet = sortedList.find(
+      (wallet) => wallet.type === namespacesModalState?.providerType
+    );
+    if (
+      wallet?.singleNamespace && // Currently we support derivation path only for single namespace wallets
+      wallet?.needsDerivationPath &&
+      selectedNamespaces[0]
+    ) {
+      setDerivationPathModalState({
+        open: true,
+        providerType: wallet.type,
+        providerImage: wallet.image,
+        namespace: selectedNamespaces[0],
+      });
+    } else {
+      void handleClick(
+        namespacesModalState?.providerType as string,
+        selectedNamespaces.map((namespace) => ({
+          namespace,
+        }))
+      );
+    }
+    handleCloseNamespaceModal();
+  };
+
+  const handleDerivationPathConfirm = (derivationPath: string) => {
+    if (derivationPath && derivationPathModalState?.namespace) {
+      void handleClick(derivationPathModalState.providerType, [
+        { namespace: derivationPathModalState.namespace, derivationPath },
+      ]);
+    }
+
+    handleCloseDerivationPathModal();
+  };
+
   useEffect(() => {
     setSortedList((sortedList) => {
       const selectedWalletIndex = list.findIndex((wallet) =>
@@ -238,19 +303,21 @@ export function WalletList(props: PropTypes) {
               error={error}
             />
             <WalletNamespacesModal
-              open={!!namespacesModalState}
-              onClose={() => setNamespacesModalState(null)}
-              onConfirm={(namespaces) => {
-                void handleClick(
-                  namespacesModalState?.providerType as string,
-                  namespaces
-                );
-                setNamespacesModalState(null);
-              }}
+              open={!!namespacesModalState?.open}
+              onClose={handleCloseNamespaceModal}
+              onConfirm={handleConfirmNamespaces}
               image={namespacesModalState?.providerImage}
-              namespaces={namespacesModalState?.availableNamespaces}
+              availableNamespaces={namespacesModalState?.availableNamespaces}
               singleNamespace={namespacesModalState?.singleNamespace}
             />
+            <WalletDerivationPathModal
+              open={!!derivationPathModalState?.open}
+              selectedNamespace={derivationPathModalState?.namespace}
+              type={derivationPathModalState?.providerType}
+              image={derivationPathModalState?.providerImage}
+              onClose={handleCloseDerivationPathModal}
+              onConfirm={handleDerivationPathConfirm}
+            />
             {!!experimentalChainWallet && (
               <WatermarkedModal
                 open={!!experimentalChainWallet && showExperimentalChainModal}

package/src/components/HistoryGroupedList/HistoryGroupedList.tsx

@@ -15,7 +15,7 @@ import {
   TOKEN_AMOUNT_MIN_DECIMALS,
 } from '../../constants/routing';
 import { getContainer } from '../../utils/common';
-import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
+import { numberToString } from '../../utils/numbers';
 
 import { calculateGroupsSoFar } from './HistoryGroupedList.helpers';
 import {
@@ -130,7 +130,7 @@ export function HistoryGroupedList(props: PropTypes) {
                     TOKEN_AMOUNT_MIN_DECIMALS,
                     TOKEN_AMOUNT_MAX_DECIMALS
                   ),
-                  realAmount: formatTooltipNumbers(swap.inputAmount),
+                  realAmount: swap.inputAmount,
                 },
                 to: {
                   token: {
@@ -147,10 +147,10 @@ export function HistoryGroupedList(props: PropTypes) {
                     TOKEN_AMOUNT_MIN_DECIMALS,
                     TOKEN_AMOUNT_MAX_DECIMALS
                   ),
-                  realAmount: formatTooltipNumbers(
+                  realAmount:
                     lastStep.outputAmount ||
-                      lastStep.expectedOutputAmountHumanReadable
-                  ),
+                    lastStep.expectedOutputAmountHumanReadable ||
+                    '',
                 },
               }}
             />

package/src/components/NotificationContent/NotificationContent.tsx

@@ -1,32 +1,13 @@
 import type { Notification } from '../../types/notification';
 
-import { i18n } from '@lingui/core';
-import { EventSeverity } from '@rango-dev/queue-manager-rango-preset';
-import {
-  ChainToken,
-  ChevronRightIcon,
-  Divider,
-  Typography,
-} from '@rango-dev/ui';
+import { Notifications } from '@rango-dev/ui';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
-
-import {
-  ClearAllButton,
-  Container,
-  Header,
-  IconContainer,
-  Images,
-  List,
-  ListItem,
-} from './NotificationContent.styles';
-import { NotificationNotFound } from './NotificationNotFound';
-
-const MAX_NOTIFICATIONS_DISPLAYED = 4;
+import { getBlockchainImage } from '../../utils/meta';
 
 export function NotificationContent() {
   const navigate = useNavigate();
@@ -36,102 +17,20 @@ export function NotificationContent() {
   const notifications: Notification[] = getNotifications();
   const blockchains = useAppStore().blockchains();
   const { findToken } = useAppStore();
-  const sortedNotification = notifications
-    .sort((a, b) => b.creationTime - a.creationTime)
-    .slice(0, MAX_NOTIFICATIONS_DISPLAYED);
 
-  const handleOnClick = (requestId: Notification['requestId']) => {
+  const onClickItem = (requestId: Notification['requestId']) => {
     navigate(`${navigationRoutes.swaps}/${requestId}`);
   };
 
   return (
-    <Container>
-      {sortedNotification.length > 0 && (
-        <>
-          <Header>
-            <Typography variant="label" size="medium">
-              {i18n.t('Notifications')}
-            </Typography>
-            <ClearAllButton
-              variant="ghost"
-              size="xsmall"
-              onClick={clearNotifications}>
-              <Typography variant="body" size="xsmall">
-                {i18n.t('Clear all')}
-              </Typography>
-            </ClearAllButton>
-          </Header>
-          <Divider direction="vertical" size={4} />
-        </>
-      )}
-      {sortedNotification.length ? (
-        <List>
-          {sortedNotification.map((notificationItem, index) => {
-            const { route, requestId, event } = notificationItem;
-            const fromToken = findToken(route.from);
-
-            const fromBlockchain = blockchains.find(
-              (blockchainItem) => blockchainItem.name === route.from.blockchain
-            );
-
-            const toToken = findToken(route.to);
-
-            const toBlockchain = blockchains.find(
-              (blockchainItem) => blockchainItem.name === route.to.blockchain
-            );
-
-            return (
-              <React.Fragment key={requestId}>
-                {index > 0 && <Divider size={4} />}
-                <ListItem
-                  onClick={() => handleOnClick(requestId)}
-                  actionRequired={
-                    event.messageSeverity === EventSeverity.WARNING
-                  }
-                  title={
-                    <Typography
-                      variant="body"
-                      size="small"
-                      color={
-                        event.messageSeverity === EventSeverity.WARNING
-                          ? '$foreground'
-                          : '$neutral700'
-                      }>
-                      {i18n.t(event.message)}
-                    </Typography>
-                  }
-                  id={requestId}
-                  start={
-                    <Images>
-                      <div className="from-chain-token">
-                        <ChainToken
-                          tokenImage={fromToken ? fromToken.image : ''}
-                          chainImage={fromBlockchain ? fromBlockchain.logo : ''}
-                          size="small"
-                        />
-                      </div>
-                      <div className="to-chain-token">
-                        <ChainToken
-                          tokenImage={toToken ? toToken.image : ''}
-                          chainImage={toBlockchain ? toBlockchain.logo : ''}
-                          size="small"
-                        />
-                      </div>
-                    </Images>
-                  }
-                  end={
-                    <IconContainer>
-                      <ChevronRightIcon size={12} color="gray" />
-                    </IconContainer>
-                  }
-                />
-              </React.Fragment>
-            );
-          })}
-        </List>
-      ) : (
-        <NotificationNotFound />
-      )}
-    </Container>
+    <Notifications
+      list={notifications}
+      getBlockchainImage={(blockchain) =>
+        getBlockchainImage(blockchain, blockchains) ?? ''
+      }
+      getTokenImage={(token) => findToken(token)?.image ?? ''}
+      onClickItem={onClickItem}
+      onClearAll={clearNotifications}
+    />
   );
 }

package/src/components/Quote/Quote.tsx

@@ -8,10 +8,10 @@ import {
   Divider,
   FullExpandedQuote,
   InfoIcon,
+  NumericTooltip,
   QuoteTag,
   StepDetails,
   TokenAmount,
-  Tooltip,
   Typography,
 } from '@rango-dev/ui';
 import BigNumber from 'bignumber.js';
@@ -40,7 +40,6 @@ import {
   getSwapperDisplayName,
 } from '../../utils/meta';
 import {
-  formatTooltipNumbers,
   numberToString,
   roundedSecondsToString,
   totalArrivalTime,
@@ -156,16 +155,15 @@ export function Quote(props: QuoteProps) {
 
       return {
         swapper: {
-          displayName: getSwapperDisplayName(swap.swapperId, swappers),
+          displayName: getSwapperDisplayName(swap.swapperId, swappers) ?? '',
           image: swap.swapperLogo,
         },
         from: {
           token: { displayName: swap.from.symbol, image: swap.from.logo },
           chain: {
-            displayName: getBlockchainShortNameFor(
-              swap.from.blockchain,
-              blockchains
-            ),
+            displayName:
+              getBlockchainShortNameFor(swap.from.blockchain, blockchains) ??
+              '',
             image: swap.from.blockchainLogo,
           },
           price: {
@@ -186,23 +184,17 @@ export function Quote(props: QuoteProps) {
               USD_VALUE_MIN_DECIMALS,
               USD_VALUE_MAX_DECIMALS
             ),
-            realValue: formatTooltipNumbers(
-              index === 0 ? input.value : swap.fromAmount
-            ),
-            realUsdValue: formatTooltipNumbers(
-              new BigNumber(swap.from.usdPrice ?? 0).multipliedBy(
-                swap.fromAmount
-              )
-            ),
+            realValue: index === 0 ? input.value : swap.fromAmount,
+            realUsdValue: new BigNumber(swap.from.usdPrice ?? 0)
+              .multipliedBy(swap.fromAmount)
+              .toString(),
           },
         },
         to: {
           token: { displayName: swap.to.symbol, image: swap.to.logo },
           chain: {
-            displayName: getBlockchainShortNameFor(
-              swap.to.blockchain,
-              blockchains
-            ),
+            displayName:
+              getBlockchainShortNameFor(swap.to.blockchain, blockchains) || '',
             image: swap.to.blockchainLogo,
           },
           price: {
@@ -216,10 +208,10 @@ export function Quote(props: QuoteProps) {
               USD_VALUE_MIN_DECIMALS,
               USD_VALUE_MAX_DECIMALS
             ),
-            realValue: formatTooltipNumbers(swap.toAmount),
-            realUsdValue: formatTooltipNumbers(
-              new BigNumber(swap.to.usdPrice ?? 0).multipliedBy(swap.toAmount)
-            ),
+            realValue: swap.toAmount,
+            realUsdValue: new BigNumber(swap.to.usdPrice ?? 0)
+              .multipliedBy(swap.toAmount)
+              .toString(),
           },
         },
         state: stepState,
@@ -343,8 +335,8 @@ export function Quote(props: QuoteProps) {
       outputPrice={{
         value: roundedOutput,
         usdValue: roundedOutputUsdValue,
-        realValue: formatTooltipNumbers(output.value),
-        realUsdValue: formatTooltipNumbers(output.usdValue),
+        realValue: output.value,
+        realUsdValue: output.usdValue,
       }}
     />
   ) : (
@@ -414,8 +406,8 @@ export function Quote(props: QuoteProps) {
               <BasicInfoOutput size="small" variant="body">
                 {`${roundedInput} ${steps[0].from.token.displayName} = `}
               </BasicInfoOutput>
-              <Tooltip
-                content={formatTooltipNumbers(output.value)}
+              <NumericTooltip
+                content={output.value}
                 container={container}
                 open={!output.value ? false : undefined}>
                 <BasicInfoOutput size="small" variant="body">
@@ -424,16 +416,14 @@ export function Quote(props: QuoteProps) {
                     steps[steps.length - 1].to.token.displayName
                   }`}
                 </BasicInfoOutput>
-              </Tooltip>
+              </NumericTooltip>
             </ContainerInfoOutput>
-            <Tooltip
-              content={formatTooltipNumbers(output.usdValue)}
-              container={container}>
+            <NumericTooltip content={output.usdValue} container={container}>
               <Divider size={2} direction="horizontal" />
               <Typography color="$neutral600" size="xsmall" variant="body">
                 {`($${roundedOutputUsdValue})`}
               </Typography>
-            </Tooltip>
+            </NumericTooltip>
           </div>
         )}
         {type === 'list-item' && (
@@ -444,8 +434,8 @@ export function Quote(props: QuoteProps) {
             price={{
               value: roundedOutput,
               usdValue: roundedOutputUsdValue,
-              realValue: formatTooltipNumbers(output.value),
-              realUsdValue: formatTooltipNumbers(output.usdValue),
+              realValue: output.value,
+              realUsdValue: output.usdValue,
             }}
             token={{
               displayName: steps[numberOfSteps - 1].to.token.displayName,

package/src/components/Quote/QuoteCostDetails.tsx

@@ -8,13 +8,13 @@ import {
   CloseIcon,
   Divider,
   IconButton,
+  NumericTooltip,
   QuoteCost,
-  Tooltip,
   Typography,
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
-import { NAME_OF_FEES } from '../../constants/quote';
+import { getFeeLabel } from '../../constants/quote';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -22,7 +22,7 @@ import {
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
 import { getContainer } from '../../utils/common';
-import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
+import { numberToString } from '../../utils/numbers';
 import { getFeesGroup, getTotalFeesInUsd, getUsdFee } from '../../utils/swap';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 import { CustomCollapsible } from '../CustomCollapsible/CustomCollapsible';
@@ -115,11 +115,9 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
                       variant="label"
                       size="medium"
                       color="neutral600">
-                      {NAME_OF_FEES[payableFeesKey as NameOfFees]}
+                      {getFeeLabel(payableFeesKey as NameOfFees, i18n.t)}
                     </Typography>
-                    <Tooltip
-                      content={formatTooltipNumbers(fee.amount)}
-                      container={container}>
+                    <NumericTooltip content={fee.amount} container={container}>
                       <Typography variant="label" size="medium">
                         {numberToString(
                           fee.amount,
@@ -134,7 +132,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
                         )}
                         )
                       </Typography>
-                    </Tooltip>
+                    </NumericTooltip>
                   </FeeSection>
                 );
               })
@@ -184,7 +182,10 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
               {Object.entries(feesGroup.nonePayable).map(
                 ([nonPayableFeesKey, fees], index) => {
                   const totalFeeInUsd = getTotalFeesInUsd(fees);
-                  const label = NAME_OF_FEES[nonPayableFeesKey as NameOfFees];
+                  const label = getFeeLabel(
+                    nonPayableFeesKey as NameOfFees,
+                    i18n.t
+                  );
                   const key = `non-payable-fee-${index}`;
                   return (
                     <NonPayableFee

package/src/components/SearchInput/SearchInput.types.ts

@@ -1,3 +1,4 @@
+import type * as Stitches from '@stitches/react';
 import type React from 'react';
 
 export type PropTypes = {
@@ -7,4 +8,5 @@ export type PropTypes = {
   size?: 'small' | 'large';
   value: string;
   setValue?: (value: string) => void;
+  style?: Stitches.CSS;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value'>;

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -22,7 +22,7 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
   return (
     <Layout
       header={{
-        title: i18n.t('Swap and Bridge'),
+        title: i18n.t('Swap Details'),
         suffix: <SuffixContainer />,
       }}>
       {showSkeleton && (