@rango-dev/widget-embedded 0.20.1-next.2 → 0.20.1-next.20

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.tsx

@@ -24,18 +24,27 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
   const waitingForApproval =
     step.status === 'waitingForApproval' && !hasWarning;
   const inProgress = step.status === 'running' && !hasWarning;
+  const waitingProgress =
+    (inProgress && !hasAlreadyProceededToSign) ||
+    (waitingForApproval && !step.explorerUrl?.length);
+
   return (
     <Alerts>
       {step.explorerUrl?.map((explorerUrl, index, urls) => {
         const key = index + explorerUrl.url;
         const lastUrl = index === urls.length - 1;
-        const loading = (lastUrl && inProgress) || waitingForApproval;
+        const loading =
+          ((lastUrl && inProgress) || waitingForApproval) && !waitingProgress;
         const error = lastUrl && step.status === 'failed';
 
         return (
           <Fragment key={key}>
             <Alert
-              type={(loading && 'loading') || (error && 'error') || 'success'}
+              type={
+                lastUrl
+                  ? (loading && 'loading') || (error && 'error') || 'success'
+                  : 'success'
+              }
               title={
                 !explorerUrl.description
                   ? i18n.t('View transaction')
@@ -47,7 +56,7 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
                     variant="ghost"
                     size="xsmall"
                     onClick={() => window.open(explorerUrl.url, '_blank')}>
-                    <LinkIcon size={16} />
+                    <LinkIcon size={12} />
                   </IconButton>
                 )
               }
@@ -55,10 +64,7 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
           </Fragment>
         );
       })}
-      {((inProgress && !hasAlreadyProceededToSign) ||
-        (waitingForApproval && !step.explorerUrl?.length)) && (
-        <Alert type="loading" title={message.shortMessage} />
-      )}
+      {waitingProgress && <Alert type="loading" title={message.shortMessage} />}
       {step.status !== 'failed' && hasWarning && (
         <WarningAlert
           switchNetwork={switchNetwork}

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

@@ -6,6 +6,7 @@ import type {
   PendingSwap,
   PendingSwapNetworkStatus,
   PendingSwapStep,
+  SwapperMeta,
 } from 'rango-types';
 
 export interface SwapAlertsProps extends WaningAlertsProps {
@@ -26,4 +27,5 @@ export interface FailedAlertsProps {
 export type GetStep = {
   swap: PendingSwap;
   blockchains: BlockchainMeta[];
+  swappers: SwapperMeta[];
 } & Omit<SwapAlertsProps, 'step' | 'hasAlreadyProceededToSign'>;

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -4,6 +4,10 @@ import { i18n } from '@lingui/core';
 import { Divider, SwapListItem, Typography } from '@rango-dev/ui';
 import React from 'react';
 
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../../constants/routing';
 import { getContainer } from '../../utils/common';
 import { formatTooltipNumbers, numberToString } from '../../utils/numbers';
 
@@ -18,11 +22,11 @@ export function SwapsGroup(props: PropTypes) {
 
     const loadingGroups = [
       {
-        title: 'Today',
+        title: i18n.t('Today'),
         swaps,
       },
       {
-        title: 'This month',
+        title: i18n.t('This month'),
         swaps,
       },
     ];
@@ -36,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} />
@@ -69,7 +73,7 @@ export function SwapsGroup(props: PropTypes) {
                   variant="label"
                   size="medium"
                   className={groupStyles()}>
-                  {i18n.t(group.title)}
+                  {group.title}
                 </Typography>
               </Time>
               <Divider size={4} />
@@ -85,8 +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: {
@@ -96,7 +100,12 @@ export function SwapsGroup(props: PropTypes) {
                             blockchain: {
                               image: firstStep.fromBlockchainLogo || '',
                             },
-                            amount: swap.inputAmount,
+                            amount: numberToString(
+                              swap.inputAmount,
+                              TOKEN_AMOUNT_MIN_DECIMALS,
+                              TOKEN_AMOUNT_MAX_DECIMALS
+                            ),
+                            realAmount: formatTooltipNumbers(swap.inputAmount),
                           },
                           to: {
                             token: {
@@ -109,7 +118,9 @@ export function SwapsGroup(props: PropTypes) {
                             amount: numberToString(
                               lastStep.outputAmount ||
                                 lastStep.expectedOutputAmountHumanReadable ||
-                                ''
+                                '',
+                              TOKEN_AMOUNT_MIN_DECIMALS,
+                              TOKEN_AMOUNT_MAX_DECIMALS
                             ),
                             realAmount: formatTooltipNumbers(
                               lastStep.outputAmount ||

package/src/components/WidgetEvents.tsx

@@ -11,14 +11,12 @@ import { useEffect } from 'react';
 import { useAppStore } from '../store/AppStore';
 import { useNotificationStore } from '../store/notification';
 import { useWalletsStore } from '../store/wallets';
-import { validBlockedStatuses } from '../types/notification';
 
 export function WidgetEvents() {
   const tokens = useAppStore().tokens();
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
-  const setAsRead = useNotificationStore.use.setAsRead();
   const widgetEvents = useEvents();
 
   useEffect(() => {
@@ -43,18 +41,8 @@ export function WidgetEvents() {
         fromAccount && getWalletsDetails([fromAccount], tokens);
         toAccount && getWalletsDetails([toAccount], tokens);
       }
-      if (
-        (event.type === StepEventType.TX_EXECUTION_BLOCKED &&
-          validBlockedStatuses.includes(event.status)) ||
-        event.type === StepEventType.FAILED
-      ) {
-        setNotification(event, route);
-      } else if (
-        event.type === StepEventType.TX_EXECUTION ||
-        event.type === StepEventType.CHECK_STATUS
-      ) {
-        setAsRead(route.requestId);
-      }
+
+      setNotification(event, route);
     });
 
     return () => widgetEvents.all.clear();

package/src/constants/index.ts

@@ -1,3 +1,4 @@
 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';
+export const SCANNER_BASE_URL = 'https://scan.rango.exchange';

package/src/constants/quote.ts

@@ -0,0 +1,23 @@
+import type { SwapFee } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+
+export type NameOfFees =
+  | 'Swapper Fee'
+  | 'Affiliate Fee'
+  | 'Outbound network fee'
+  | 'Rango Fee'
+  | 'Network Fee';
+
+export const NAME_OF_FEES: Record<NameOfFees, string> = {
+  'Network Fee': i18n.t('Network Fee'),
+  'Swapper Fee': i18n.t('Protocol Fee'),
+  'Affiliate Fee': i18n.t('Affiliate Fee'),
+  'Outbound network fee': i18n.t('Outbound Fee'),
+  'Rango Fee': i18n.t('Rango Fee'),
+};
+
+export type FeesGroup = {
+  payable: { [key in NameOfFees]?: SwapFee[] };
+  nonePayable: { [key in NameOfFees]?: SwapFee[] };
+};

package/src/containers/App/App.tsx

@@ -20,7 +20,7 @@ export function Main() {
 
   const { config } = useAppStore();
   const { activeTheme } = useTheme(config?.theme || {});
-  const { activeLanguage, changeLanguage } = useLanguage();
+  const { activeLanguage } = useLanguage();
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
     useState<string>('');
   const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
@@ -30,9 +30,6 @@ export function Main() {
     void useNotificationStore.persist.rehydrate();
     widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
   }, []);
-  useEffect(() => {
-    changeLanguage(config?.language);
-  }, [config?.language]);
 
   return (
     <I18nManager language={activeLanguage}>

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/containers/WidgetInfo/WidgetInfo.tsx

@@ -3,7 +3,9 @@ import type { WidgetInfoContextInterface } from './WidgetInfo.types';
 import { useManager } from '@rango-dev/queue-manager-react';
 import React, { createContext, useContext } from 'react';
 
+import { useLanguage } from '../../hooks/useLanguage';
 import { useAppStore } from '../../store/AppStore';
+import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
 import { useWalletsStore } from '../../store/wallets';
 import { calculateWalletUsdValue } from '../../utils/wallets';
@@ -26,6 +28,8 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const tokens = useAppStore().tokens();
   const swappers = useAppStore().swappers();
   const loadingStatus = useAppStore().fetchStatus;
+  const resetLanguage = useLanguage().resetLanguage;
+  const notifications = useNotificationStore().getUnreadNotifications();
 
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   const value = {
@@ -42,6 +46,10 @@ export function WidgetInfo(props: React.PropsWithChildren) {
       swappers,
       loadingStatus,
     },
+    resetLanguage,
+    notifications: {
+      list: notifications,
+    },
   };
 
   return (

package/src/containers/WidgetInfo/WidgetInfo.types.ts

@@ -2,6 +2,7 @@ import type { WidgetHistory } from './WidgetInfo.helpers';
 import type { FetchStatus } from '../../store/slices/data';
 import type { ConnectedWallet } from '../../store/wallets';
 import type { Wallet } from '../../types';
+import type { Notification } from '../../types/notification';
 import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 
 export interface WidgetInfoContextInterface {
@@ -18,4 +19,8 @@ export interface WidgetInfoContextInterface {
     swappers: SwapperMeta[];
     loadingStatus: FetchStatus;
   };
+  resetLanguage: () => void;
+  notifications: {
+    list: Notification[];
+  };
 }

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -17,7 +17,8 @@ export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
       API_KEY: config?.apiKey || RANGO_PUBLIC_API_KEY,
       BASE_URL: config?.apiUrl || DEFAULT_BASE_URL,
     });
-  }, [config]);
+  }, [config.apiKey, config.apiUrl]);
+
   return (
     <WidgetWallets config={config} onUpdateState={onUpdateState}>
       <QueueManager apiKey={config.apiKey}>

package/src/hooks/useLanguage.ts

@@ -9,18 +9,20 @@ interface UseLanguage {
   languages: LanguageItem[];
   defaultLanguage: Language;
   activeLanguage: Language;
-  changeLanguage: (language?: Language) => void;
+  changeLanguage: (language?: Language | null) => void;
+  resetLanguage: () => void;
 }
 
 export function useLanguage(): UseLanguage {
-  const { setLanguage, language } = useAppStore();
+  const { setLanguage, language, config } = useAppStore();
   const languages = LANGUAGES;
-  const defaultLanguage = DEFAULT_LANGUAGE;
+  const defaultLanguage = config?.language || DEFAULT_LANGUAGE;
 
   return {
-    activeLanguage: language,
+    activeLanguage: language || defaultLanguage,
     languages,
     defaultLanguage,
     changeLanguage: (language) => setLanguage(language || DEFAULT_LANGUAGE),
+    resetLanguage: () => setLanguage(null),
   };
 }

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,13 +2,13 @@ import type { WidgetProps } from './containers/Widget';
 import type { ConnectedWallet } from './store/wallets';
 import type {
   BlockchainAndTokenConfig,
+  Tokens,
   WidgetColors,
   WidgetColorsKeys,
   WidgetConfig,
   WidgetTheme,
 } from './types';
 import type {
-  EventSeverity,
   PendingSwapWithQueueID,
   Route,
   RouteEvent,
@@ -39,6 +39,7 @@ import type {
 import type { PendingSwap, PendingSwapStep } from 'rango-types';
 
 import {
+  EventSeverity,
   MainEvents,
   RouteEventType,
   StepEventType,
@@ -86,6 +87,7 @@ export type {
   StepOutputRevealedEvent,
   HandleWalletsUpdate,
   ConnectedWallet,
+  Tokens,
 };
 export {
   Widget,
@@ -113,7 +115,6 @@ export type {
   PendingSwapWithQueueID,
   PendingSwapStep,
   RouteExecutionEvents,
-  EventSeverity,
 };
 
 // Internal function and enum exports for Rango
@@ -123,4 +124,5 @@ export {
   WalletEvents,
   WalletTypes,
   PendingSwapNetworkStatus,
+  EventSeverity,
 };

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

@@ -161,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)}
           />

package/src/pages/LiquiditySourcePage.tsx

@@ -40,6 +40,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
     getUniqueSwappersGroups(swappers, disabledLiquiditySources);
 
+  const types = { Exchanges: i18n.t('Exchanges'), Bridges: i18n.t('Bridges') };
   const validTypes: Array<LiquiditySourceType> = [];
   if (sourceType === 'Exchanges') {
     validTypes.push('DEX');
@@ -103,7 +104,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
         suffix: (
           <LiquiditySourceSuffix>
             <Button variant="ghost" size="xsmall" onClick={toggleAllSources}>
-              {i18n.t(hasSelectAll ? 'Deselect all' : 'Select all')}
+              {hasSelectAll ? i18n.t('Deselect all') : i18n.t('Select all')}
             </Button>
           </LiquiditySourceSuffix>
         ),
@@ -115,7 +116,9 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           fullWidth
           color="light"
           variant="contained"
-          placeholder={i18n.t('Search {sourceType}', { sourceType })}
+          placeholder={i18n.t('Search {sourceType}', {
+            sourceType: types[sourceType],
+          })}
           onChange={searchHandler}
         />
         {fetchStatus === 'loading' && <LoadingLiquiditySourceList />}

package/src/pages/SelectBlockchainPage.tsx

@@ -2,7 +2,7 @@ import { i18n } from '@lingui/core';
 import {
   Divider,
   getCountCategories,
-  SelectableCategoryList
+  SelectableCategoryList,
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
@@ -27,7 +27,7 @@ export function SelectBlockchainPage(props: PropTypes) {
   const fetchStatus = useAppStore().fetchStatus;
 
   const blockchains = useAppStore().blockchains({
-    type: type
+    type,
   });
 
   const countActiveCategories = getCountCategories(blockchains);
@@ -37,7 +37,7 @@ export function SelectBlockchainPage(props: PropTypes) {
   return (
     <Layout
       header={{
-        title: i18n.t(`Select Blockchain`)
+        title: i18n.t(`Select Blockchain`),
       }}>
       <Divider size={12} />
 

package/src/pages/SelectSwapItemsPage.tsx

@@ -68,11 +68,15 @@ export function SelectSwapItemsPage(props: PropTypes) {
       setToToken({ token, meta: { blockchains, tokens } });
     }
   };
+  const types = {
+    source: i18n.t('Source'),
+    destination: i18n.t('Destination'),
+  };
 
   return (
     <Layout
       header={{
-        title: i18n.t('Swap {type}', { type }),
+        title: i18n.t('Swap {type}', { type: types[type] }),
       }}>
       <BlockchainsSection
         blockchains={blockchains}