@aurora-is-near/intents-swap-widget 3.18.1 → 3.18.3

package/src/components/Input.tsx

@@ -7,19 +7,20 @@ import {
   useState,
 } from 'react';
 import { Input as UIInput } from '@headlessui/react';
+import { CloseW700 as Close } from '@material-symbols-svg/react-rounded/icons/close';
+import type { MaterialSymbolsComponent } from '@material-symbols-svg/react';
 import type { InputProps } from '@headlessui/react';
 import type { PropsWithChildren } from 'react';
-import type { LucideIcon } from 'lucide-react';
-import * as Icons from 'lucide-react';
 
 import { cn } from '@/utils/cn';
 
 type State = 'default' | 'disabled' | 'error' | 'fixed';
 
 export type Props = Omit<InputProps, 'size'> & {
-  icon?: LucideIcon;
+  icon?: MaterialSymbolsComponent;
   defaultValue?: string;
   focusOnMount?: boolean;
+  fontSize?: 'sm' | 'md';
   state?: State;
 };
 
@@ -121,7 +122,7 @@ export const Input = forwardRef<HTMLInputElement, PropsWithChildren<Props>>(
                       },
                     )}
                     onClick={handleClear}>
-                    <Icons.X className="h-sw-xl w-sw-xl" />
+                    <Close className="h-sw-xl w-sw-xl" />
                   </button>
                 ) : null}
               </div>

package/src/components/Notes.tsx

@@ -28,7 +28,7 @@ const NoteItem = ({
 
 const NotesList = ({ children, className }: Props) => {
   return (
-    <ul className={cn('gap-sw-2xl flex flex-col', className)}>{children}</ul>
+    <ul className={cn('gap-sw-xl flex flex-col', className)}>{children}</ul>
   );
 };
 

package/src/components/StatusWidget.tsx

@@ -1,23 +1,16 @@
-import * as Icons from 'lucide-react';
+import { CloseW700 as Close } from '@material-symbols-svg/react-rounded/icons/close';
+import { CheckCircleFillW700 as CheckCircleFill } from '@material-symbols-svg/react-rounded/icons/check-circle';
 
 const Error = ({ message }: { message: string }) => (
   <div className="flex flex-col gap-sw-lg py-sw-6xl items-center justify-center">
-    <Icons.CircleX
-      size={36}
-      strokeWidth={1.5}
-      className="text-sw-status-error"
-    />
+    <Close size={36} className="text-sw-status-error" />
     <span className="text-sw-label-sm text-sw-status-error">{message}</span>
   </div>
 );
 
 const Success = () => (
   <div className="flex flex-col gap-sw-lg py-sw-6xl items-center justify-center">
-    <Icons.CheckCircle2
-      size={36}
-      strokeWidth={1.5}
-      className="text-sw-status-success"
-    />
+    <CheckCircleFill size={36} className="text-sw-status-success" />
     <span className="text-sw-label-sm text-sw-status-success text-center">
       Transaction detected
     </span>

package/src/features/ChainsDropdown/AllNetworksIcon.tsx

@@ -1,7 +1,7 @@
-import * as Icons from 'lucide-react';
+import { TargetW700 as Target } from '@material-symbols-svg/react-rounded/icons/target';
 
 export const AllNetworksIcon = () => (
   <div className="bg-sw-accent-500 flex h-[28px] w-[28px] items-center justify-center">
-    <Icons.Target size={16} className="text-sw-accent-950" />
+    <Target size={16} className="text-sw-accent-950" />
   </div>
 );

package/src/features/ChainsDropdown/ChainItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import * as Icons from 'lucide-react';
+import { CheckW700 as Check } from '@material-symbols-svg/react-rounded/icons/check';
 
 import { cn } from '@/utils/cn';
 import { Icon } from '@/components/Icon';
@@ -34,7 +34,7 @@ export const ChainItem = React.forwardRef<HTMLButtonElement, Props>(
       )}>
       <Icon radius={10} label={label} icon={icon} />
       <span className="text-sw-label-md mr-auto">{label}</span>
-      {isSelected && <Icons.Check size={16} />}
+      {isSelected && <Check size={16} />}
     </button>
   ),
 );

package/src/features/ChainsDropdown/index.tsx

@@ -1,7 +1,7 @@
 import { Fragment, useMemo } from 'react';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
+import { ChevronLeftW700 as ChevronLeft } from '@material-symbols-svg/react-rounded/icons/chevron-left';
 import { AnimatePresence, motion } from 'framer-motion';
-import * as Icons from 'lucide-react';
 
 import { ChainItem } from './ChainItem';
 import { AllNetworksIcon } from './AllNetworksIcon';
@@ -79,9 +79,15 @@ export const ChainsDropdown = ({
                 })()}
 
                 {isOpen ? (
-                  <Icons.ChevronUp size={18} className="text-sw-gray-50" />
+                  <ChevronLeft
+                    size={18}
+                    className="text-sw-gray-50 rotate-90"
+                  />
                 ) : (
-                  <Icons.ChevronDown size={18} className="text-sw-gray-50" />
+                  <ChevronLeft
+                    size={18}
+                    className="text-sw-gray-50 -rotate-90"
+                  />
                 )}
               </div>
             )}

package/src/features/DepositMethodSwitcher.tsx

@@ -1,4 +1,5 @@
-import * as Icons from 'lucide-react';
+import { QrCodeW700 as QrCode } from '@material-symbols-svg/react-rounded/icons/qr-code';
+import { WalletW700 as Wallet } from '@material-symbols-svg/react-rounded/icons/wallet';
 
 import { cn } from '@/utils/cn';
 import { Card } from '@/components/Card';
@@ -26,7 +27,7 @@ export const DepositMethodSwitcher = ({ children, className }: Props) => {
       <div className="flex gap-sw-lg">
         <Button
           size="md"
-          icon={Icons.Wallet2}
+          icon={Wallet}
           state={ctx.isDepositFromExternalWallet ? 'default' : 'active'}
           variant={ctx.isDepositFromExternalWallet ? 'outlined' : 'primary'}
           onClick={() => onToggle(false)}>
@@ -34,7 +35,7 @@ export const DepositMethodSwitcher = ({ children, className }: Props) => {
         </Button>
         <Button
           size="md"
-          icon={Icons.QrCode}
+          icon={QrCode}
           state={ctx.isDepositFromExternalWallet ? 'active' : 'default'}
           variant={ctx.isDepositFromExternalWallet ? 'primary' : 'outlined'}
           onClick={() => onToggle(true)}>

package/src/features/ExternalDeposit.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
 import { GetExecutionStatusResponse } from '@defuse-protocol/one-click-sdk-typescript';
-import * as Icons from 'lucide-react';
+import { ProgressActivityW700 as ProgressActivity } from '@material-symbols-svg/react-rounded/icons/progress-activity';
 
 import { notReachable } from '@/utils';
 import { CHAIN_IDS_MAP } from '@/constants/chains';
@@ -50,7 +50,7 @@ const Skeleton = () => {
     <div className="flex flex-col gap-sw-2xl items-center">
       <div className="bg-sw-gray-800 h-[180px] w-[180px] animate-pulse rounded-sw-md" />
       <div className="bg-sw-gray-800 h-[44px] w-full animate-pulse rounded-sw-md flex items-center justify-center gap-sw-sm">
-        <Icons.Loader className="animate-spin text-sw-gray-100 h-sw-lg w-sw-lg" />
+        <ProgressActivity className="animate-spin text-sw-gray-100 h-sw-lg w-sw-lg" />
         <span className="text-sw-gray-100 text-sw-label-sm">
           {!isNotEmptyAmount(ctx.sourceTokenAmount)
             ? t('deposit.external.loading.waiting', 'Waiting for token amount')

package/src/features/SendAddress/index.tsx

@@ -1,7 +1,7 @@
-import * as Icons from 'lucide-react';
 import { Button } from '@headlessui/react';
 import { useEffect, useMemo, useState } from 'react';
 import { useDebounce } from 'use-debounce';
+import { WandShineW700 as WandShine } from '@material-symbols-svg/react-rounded/icons/wand-shine';
 import type { ChangeEvent } from 'react';
 
 import { useNotification } from './useNotification';
@@ -76,6 +76,7 @@ export const SendAddress = ({ error, className, onMsg }: Props) => {
         {t('sendAddress.label', 'Send to')}
       </h5>
       <Input
+        fontSize="sm"
         defaultValue={ctx.sendAddress}
         state={inputState}
         className="mb-sw-xl"
@@ -88,7 +89,7 @@ export const SendAddress = ({ error, className, onMsg }: Props) => {
           <Button
             className="absolute right-0 flex items-center gap-sw-md min-w-max cursor-pointer"
             onClick={() => fireEvent('addressSet', ctx.walletAddress ?? '')}>
-            <Icons.Wand2 size={14} />
+            <WandShine size={14} />
             <span className="text-sw-label-md">
               {t('sendAddress.button.magic.label', 'My wallet')}
             </span>

package/src/features/SuccessScreen/CopyableValue.tsx

@@ -0,0 +1,13 @@
+import { formatAddressTruncate } from '@/utils/formatters/formatAddressTruncate';
+import { CopyButton } from '@/components/CopyButton';
+
+type Props = {
+  value: string;
+};
+
+export const CopyableValue = ({ value }: Props) => (
+  <span className="text-sw-gray-50 flex items-center gap-sw-xs bg-sw-gray-800 rounded-full px-sw-sm py-sw-xs">
+    {formatAddressTruncate(value, 16)}
+    <CopyButton className="scale-80" value={value} />
+  </span>
+);

package/src/features/SuccessScreen/TokenRow.tsx

@@ -0,0 +1,26 @@
+import { Card } from '@/components/Card';
+import { TokenIcon } from '@/components/TokenIcon';
+import { formatUsdAmount } from '@/utils/formatters/formatUsdAmount';
+import type { Token } from '@/types/token';
+
+type Props = {
+  token: Token;
+  amount: string;
+  amountUsd: number | bigint;
+};
+
+export const TokenRow = ({ token, amount, amountUsd }: Props) => (
+  <Card className="flex items-center justify-between gap-sw-md pl-sw-2xl py-sw-lg">
+    <TokenIcon
+      token={token}
+      chainShowIcon={!token.isIntent}
+      className="border-sw-gray-900"
+    />
+    <div className="text-sw-label-md text-sw-gray-50 mr-auto">
+      {`${amount} ${token.symbol}`}
+    </div>
+    <span className="text-sw-label-sm text-sw-gray-200">
+      {formatUsdAmount(amountUsd)}
+    </span>
+  </Card>
+);

package/src/features/SuccessScreen/index.tsx

@@ -1,79 +1,185 @@
-import { Fragment } from 'react';
+import {
+  ArrowDownward,
+  Check,
+  OpenInNew,
+} from '@material-symbols-svg/react-rounded/w700';
 
-import { CheckIcon } from './CheckIcon';
-import { SummaryItem } from './SummaryItem';
-import { Hr } from '@/components/Hr';
-import { Card } from '@/components/Card';
+import { TokenRow } from './TokenRow';
+import { CopyableValue } from './CopyableValue';
+import { useSummaryItemsCount } from './useSummaryItemsCount';
+
+import { Notes } from '@/components/Notes';
+import { Button } from '@/components/Button';
 import { CloseButton } from '@/components/CloseButton';
-import type { TransferResult } from '@/types/transfer';
+import { Accordion } from '@/components/Accordion';
 
-import { fireEvent, useUnsafeSnapshot } from '@/machine';
+import { guardStates } from '@/machine/guards';
+import { useUnsafeSnapshot } from '@/machine/snap';
+import { formatUsdAmount } from '@/utils/formatters/formatUsdAmount';
+import { formatTinyNumber } from '@/utils/formatters/formatTinyNumber';
+import { formatBigToHuman } from '@/utils/formatters/formatBigToHuman';
 import { useTypedTranslation } from '@/localisation';
+import { useHandleKeyDown } from '@/hooks';
+import { logger } from '@/logger';
+
+import type { TransferResult } from '@/types/transfer';
+
+const NOTES_ITEM_HEIGHT = 44;
 
 type Msg = { type: 'on_dismiss_success' };
 
 type Props = TransferResult & {
-  message: string | string[];
-  onMsg?: (msg: Msg) => void;
-  hideHeader?: boolean;
+  title: string;
+  message?: string;
+  showTargetToken?: boolean;
+  onMsg: (msg: Msg) => void;
 };
 
 export const SuccessScreen = ({
-  intent,
-  transactionLink,
-  hash: txHash,
+  title,
   message,
+  showTargetToken = true,
+  transactionLink,
   onMsg,
-  hideHeader,
+  ...transferResult
 }: Props) => {
-  const { ctx } = useUnsafeSnapshot();
   const { t } = useTypedTranslation();
-  const lines = Array.isArray(message) ? message : [message];
+  const { ctx } = useUnsafeSnapshot();
+
+  const isValidState = guardStates(ctx, ['transfer_success']);
+  const handleClose = () => onMsg({ type: 'on_dismiss_success' });
+  const summaryItemsCount = useSummaryItemsCount(!!transferResult.intent);
+
+  useHandleKeyDown('Escape', handleClose);
 
-  const onDismiss = () => {
-    fireEvent('reset', { clearWalletAddress: false }).moveTo(
-      ctx.walletAddress ? 'initial_wallet' : 'initial_dry',
+  if (!isValidState) {
+    logger.warn(
+      '[WIDGET] Success screen can be rendered only in transfer_success state',
     );
-    onMsg?.({ type: 'on_dismiss_success' });
-  };
+
+    return null;
+  }
+
+  const sourceAmount = formatBigToHuman(
+    ctx.quote?.amountIn ?? ctx.sourceTokenAmount,
+    ctx.sourceToken.decimals,
+  );
+
+  const targetAmount = formatBigToHuman(
+    ctx.quote?.amountOut ?? ctx.targetTokenAmount,
+    ctx.targetToken.decimals,
+  );
+
+  const sourceAmountUsd = ctx.quote?.amountInUsd
+    ? parseFloat(ctx.quote.amountInUsd)
+    : ctx.sourceToken.price * parseFloat(sourceAmount);
+
+  const targetAmountUsd = ctx.quote?.amountOutUsd
+    ? parseFloat(ctx.quote.amountOutUsd)
+    : ctx.targetToken.price * parseFloat(targetAmount);
+
+  const targetTokenUnitPrice = targetAmountUsd / parseFloat(targetAmount);
+
+  const sourceTokenUnitAmount = formatTinyNumber(
+    targetTokenUnitPrice / (parseFloat(sourceAmount) / sourceAmountUsd),
+  );
 
   return (
-    <Card className="w-full">
-      {!hideHeader && (
-        <>
-          <header className="flex justify-between">
-            <CheckIcon />
-            <CloseButton onClick={onDismiss} />
-          </header>
-          <span className="text-sw-label-lg text-sw-gray-50">
-            {t('transfer.success.title', 'All done!')}
-          </span>
-        </>
+    <div className="flex flex-col gap-sw-2xl w-full">
+      <header className="flex items-center gap-sw-lg">
+        <div className="flex items-center justify-center p-sw-md bg-sw-status-success rounded-sw-md">
+          <Check size={20} className="text-sw-gray-900" />
+        </div>
+        <span className="text-sw-label-lg text-sw-status-success mr-auto">
+          {title}
+        </span>
+        <CloseButton onClick={handleClose} />
+      </header>
+
+      {!!message && (
+        <p className="text-sw-body-md text-sw-gray-200">{message}</p>
       )}
-      <p className="mt-sw-sm text-sw-body-md text-sw-gray-400">
-        {lines.map((line, idx) => (
-          <Fragment key={idx}>
-            {line}
-            {idx !== lines.length - 1 && <br />}
-          </Fragment>
-        ))}
-      </p>
-      <Hr className="mt-sw-xl mb-sw-md" />
-      <ul className="mt-sw-xl flex flex-col">
-        <SummaryItem
-          hasCopyAction
-          value={txHash}
-          externalUrl={transactionLink}
-          label={t('transfer.success.hash.label', 'Transaction hash')}
+
+      <div className="flex flex-col">
+        <TokenRow
+          token={ctx.sourceToken}
+          amount={sourceAmount}
+          amountUsd={sourceAmountUsd}
         />
-        {!!intent && (
-          <SummaryItem
-            hasCopyAction
-            label={t('transfer.success.intent.label', 'Intent')}
-            value={intent}
-          />
+        {showTargetToken && (
+          <>
+            <div className="flex items-center justify-center w-full h-[12px] z-1">
+              <div className="flex items-center justify-center p-sw-md bg-sw-gray-950 rounded-sw-md w-fit">
+                <ArrowDownward size={18} className="text-sw-gray-200" />
+              </div>
+            </div>
+            <TokenRow
+              token={ctx.targetToken}
+              amount={targetAmount}
+              amountUsd={targetAmountUsd}
+            />
+          </>
         )}
-      </ul>
-    </Card>
+      </div>
+
+      <Accordion
+        expandedByDefault={false}
+        expandedHeightPx={summaryItemsCount * NOTES_ITEM_HEIGHT}
+        title={t('transfer.success.details.label', 'Transaction details')}>
+        <Notes>
+          {ctx.sourceToken.symbol !== ctx.targetToken.symbol && (
+            <Notes.Item
+              label={t('transfer.success.details.rate', 'Rate')}
+              value={
+                <span
+                  className="text-sw-gray-50"
+                  style={{ borderBottomWidth: '2px', borderStyle: 'dotted' }}>
+                  {`1 ${ctx.targetToken.symbol} ≈ `} {sourceTokenUnitAmount}{' '}
+                  {`${ctx.sourceToken.symbol}`}
+                  <span>{` (${formatUsdAmount(targetTokenUnitPrice)})`}</span>
+                </span>
+              }
+            />
+          )}
+          {/* send address is missing if target token is on intents */}
+          {!!ctx.sendAddress && (
+            <Notes.Item
+              label={t(
+                'transfer.success.details.recipient',
+                'Recipient address',
+              )}
+              value={<CopyableValue value={ctx.sendAddress} />}
+            />
+          )}
+          {!!transferResult.intent && (
+            <Notes.Item
+              label={t('transfer.success.details.intent', 'Intent hash')}
+              value={<CopyableValue value={transferResult.intent} />}
+            />
+          )}
+          <Notes.Item
+            label={t('transfer.success.details.hash', 'Transaction hash')}
+            value={<CopyableValue value={transferResult.hash} />}
+          />
+        </Notes>
+      </Accordion>
+
+      <div className="flex flex-col gap-sw-lg">
+        <Button
+          fluid
+          as="a"
+          size="lg"
+          target="_blank"
+          variant="primary"
+          iconPosition="tail"
+          href={transactionLink}
+          icon={OpenInNew}>
+          {t('transfer.success.action.viewOnExplorer', 'View in explorer')}
+        </Button>
+        <Button fluid size="lg" variant="outlined" onClick={handleClose}>
+          {t('transfer.success.action.backToSwap', 'Back to swap')}
+        </Button>
+      </div>
+    </div>
   );
 };

package/src/features/SuccessScreen/useSummaryItemsCount.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+
+import { guardStates } from '@/machine/guards';
+import { useUnsafeSnapshot } from '@/machine/snap';
+
+export const useSummaryItemsCount = (hasIntentHash: boolean) => {
+  const { ctx } = useUnsafeSnapshot();
+  const isValidState = guardStates(ctx, ['transfer_success']);
+
+  const summaryItemsCount = useMemo(() => {
+    let count = 1;
+
+    if (!isValidState) {
+      return 0;
+    }
+
+    if (ctx.sourceToken.symbol !== ctx.targetToken.symbol) {
+      count += 1;
+    }
+
+    if (ctx.sendAddress) {
+      count += 1;
+    }
+
+    if (hasIntentHash) {
+      count += 1;
+    }
+
+    return count;
+  }, [hasIntentHash, ctx.sendAddress, ctx.sourceToken, ctx.targetToken]);
+
+  return summaryItemsCount;
+};

package/src/features/TokensModal.tsx

@@ -1,5 +1,5 @@
+import { SearchW700 as Search } from '@material-symbols-svg/react-rounded/icons/search';
 import { useRef, useState } from 'react';
-import * as Icons from 'lucide-react';
 
 import { TokensList } from './TokensList';
 import { ChainsDropdown } from './ChainsDropdown';
@@ -99,7 +99,7 @@ export const TokensModal = ({
       <div className="gap-sw-xl flex items-center">
         <Input
           focusOnMount
-          icon={Icons.Search}
+          icon={Search}
           ref={searchInputRef}
           defaultValue={search}
           className="w-full"

package/src/features/WalletCompatibilityCheck/WalletCompatibilityModal.tsx

@@ -1,12 +1,11 @@
-import {
-  AccountBalanceWalletFill,
-  ArmingCountdownFill,
-  BeenhereFill,
-  CheckCircleFill,
-  EncryptedFill,
-  GppBadFill,
-  type MaterialSymbolsComponent,
-} from '@material-symbols-svg/react-rounded';
+import { AccountBalanceWalletFillW700 as AccountBalanceWalletFill } from '@material-symbols-svg/react-rounded/icons/account-balance-wallet';
+import { ArmingCountdownFillW700 as ArmingCountdownFill } from '@material-symbols-svg/react-rounded/icons/arming-countdown';
+import { BeenhereFillW700 as BeenhereFill } from '@material-symbols-svg/react-rounded/icons/beenhere';
+import { CheckCircleFillW700 as CheckCircleFill } from '@material-symbols-svg/react-rounded/icons/check-circle';
+import { EncryptedFillW700 as EncryptedFill } from '@material-symbols-svg/react-rounded/icons/encrypted';
+import { GppBadFillW700 as GppBadFill } from '@material-symbols-svg/react-rounded/icons/gpp-bad';
+import type { MaterialSymbolsComponent } from '@material-symbols-svg/react-rounded';
+
 import { useTimer } from 'use-timer';
 import { useEffect } from 'react';
 

package/src/machine/events/reset.ts

@@ -2,15 +2,13 @@ import type { Machine } from '@/machine';
 import type { Context } from '@/machine/context';
 
 export type ResetPayload = {
+  keepSelectedTokens?: boolean;
   clearWalletAddress: boolean;
 };
 
 export const reset = (ctx: Context, payload: ResetPayload, m: Machine) => {
-  ctx.sourceToken = undefined;
   ctx.sourceTokenBalance = undefined;
   ctx.sourceTokenAmount = '';
-
-  ctx.targetToken = undefined;
   ctx.targetTokenAmount = '';
 
   ctx.sendAddress = undefined;
@@ -22,6 +20,11 @@ export const reset = (ctx: Context, payload: ResetPayload, m: Machine) => {
   ctx.quoteStatus = 'idle';
   ctx.transferStatus = { status: 'idle' };
 
+  if (!payload.keepSelectedTokens) {
+    ctx.sourceToken = undefined;
+    ctx.targetToken = undefined;
+  }
+
   if (payload.clearWalletAddress) {
     ctx.walletAddress = undefined;
   }

package/src/tailwind.css

@@ -102,6 +102,15 @@
 	}
 }
 
+@utility text-sw-label-2sm {
+	@layer components {
+		@apply font-semibold;
+		font-size: 0.825rem;
+		line-height: 0.875rem;
+		letter-spacing: -0.01875rem;
+	}
+}
+
 @utility text-sw-label-sm {
 	@layer components {
 		@apply font-semibold;

package/src/types/localisation.ts

@@ -14,9 +14,16 @@ export type LocalisationKeys =
   | 'wallet.recipient.message.receiveFunds'
   | 'wallet.connected.error.notSupportedChain'
   // transfer
-  | 'transfer.success.title'
-  | 'transfer.success.hash.label'
-  | 'transfer.success.intent.label'
+  | 'transfer.success.swap.title'
+  | 'transfer.success.withdrawal.title'
+  | 'transfer.success.deposit.title'
+  | 'transfer.success.details.label'
+  | 'transfer.success.details.hash'
+  | 'transfer.success.details.rate'
+  | 'transfer.success.details.intent'
+  | 'transfer.success.details.recipient'
+  | 'transfer.success.action.viewOnExplorer'
+  | 'transfer.success.action.backToSwap'
   // quote
   | 'quote.result.maxSlippage.label'
   | 'quote.result.processingTime.label'

package/src/widgets/WidgetDeposit/WidgetDepositContent.tsx

@@ -121,6 +121,10 @@ export const WidgetDepositContent = ({
     });
   }, [ctx.isDepositFromExternalWallet]);
 
+  const onBackToSwap = () => {
+    fireEvent('reset', { clearWalletAddress: false, keepSelectedTokens: true });
+  };
+
   if (!!isLoading || (tokensStatus !== 'error' && !ctx.sourceToken)) {
     return <WidgetDepositSkeleton />;
   }
@@ -150,14 +154,12 @@ export const WidgetDepositContent = ({
     return (
       <SuccessScreen
         {...transferResult}
-        message={[
-          'Your deposit has been successfully completed,',
-          'and the funds are now available in your account.',
-        ]}
+        title={t('transfer.success.deposit.title', 'Deposit successful')}
         onMsg={(msg) => {
           switch (msg.type) {
             case 'on_dismiss_success':
               setTransferResult(undefined);
+              onBackToSwap();
               break;
             default:
               notReachable(msg.type);