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

package/dist/widgets/WidgetWithdraw/WidgetWithdrawContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetWithdrawContent.js","sources":["../../../src/widgets/WidgetWithdraw/WidgetWithdrawContent.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { CommonWidgetProps, TokenInputType } from '../types';\nimport { useTokenModal } from '../../hooks/useTokenModal';\nimport { WidgetWithdrawSkeleton } from './WidgetWithdrawSkeleton';\nimport { useTypedTranslation } from '../../localisation';\nimport {\n  SendAddress,\n  SubmitButton,\n  SuccessScreen,\n  SwapQuote,\n  TokenInput,\n  TokensModal,\n} from '@/features';\n\nimport { BlockingError, Card, DirectionSwitcher } from '@/components';\nimport { WalletCompatibilityCheck } from '@/features/WalletCompatibilityCheck';\n\nimport { useStoreSideEffects } from '@/machine/effects';\nimport { useComputedSnapshot, useUnsafeSnapshot } from '@/machine/snap';\nimport { fireEvent } from '@/machine/events/utils/fireEvent';\n\nimport {\n  useIsCompatibilityCheckRequired,\n  useTokenInputPair,\n  useTokens,\n} from '@/hooks';\nimport { useConfig } from '@/config';\n\nimport { isDebug, notReachable } from '@/utils';\n\nimport type { Token, TransferResult } from '@/types';\n\ntype Msg =\n  | { type: 'on_select_token'; token: Token; variant: TokenInputType }\n  | { type: 'on_transfer_success' }\n  | { type: 'on_tokens_modal_toggled'; isOpen: boolean };\n\nexport type Props = CommonWidgetProps<Msg>;\n\nexport const WidgetWithdrawContent = ({\n  providers,\n  makeTransfer,\n  onMsg,\n  isLoading,\n}: Props) => {\n  const { t } = useTypedTranslation();\n  const { ctx } = useUnsafeSnapshot();\n  const { isDirectNearTokenWithdrawal } = useComputedSnapshot();\n  const {\n    chainsFilter,\n    alchemyApiKey,\n    refetchQuoteInterval,\n    intentsAccountType,\n    onWalletSignout,\n  } = useConfig();\n\n  const { status: tokensStatus, refetch: refetchTokens } = useTokens();\n  const { tokenModalOpen, updateTokenModalState } = useTokenModal({ onMsg });\n  const { onChangeAmount, onChangeToken, lastChangedInput } =\n    useTokenInputPair();\n\n  const isCompatibilityCheckRequired = useIsCompatibilityCheckRequired();\n  const [isCompatibilityOpen, setIsCompatibilityOpen] = useState(false);\n\n  useEffect(() => {\n    if (isCompatibilityCheckRequired) {\n      setIsCompatibilityOpen(true);\n    }\n  }, [isCompatibilityCheckRequired]);\n\n  const [transferResult, setTransferResult] = useState<\n    TransferResult | undefined\n  >();\n\n  useEffect(() => {\n    fireEvent('reset', { clearWalletAddress: true });\n  }, []);\n\n  useStoreSideEffects({\n    debug: isDebug(),\n    listenTo: [\n      'checkWalletConnection',\n      'setSourceTokenBalance',\n      [\n        'setDefaultSelectedTokens',\n        { skipIntents: false, target: 'same-asset' },\n      ],\n      [\n        'makeQuote',\n        {\n          message: undefined,\n          type: lastChangedInput === 'target' ? 'exact_out' : 'exact_in',\n          refetchQuoteInterval,\n        },\n      ],\n      ['setBalancesUsingAlchemyExt', { alchemyApiKey }],\n    ],\n  });\n\n  if (!!isLoading || (tokensStatus !== 'error' && !ctx.sourceToken)) {\n    return <WidgetWithdrawSkeleton />;\n  }\n\n  if (isCompatibilityOpen) {\n    return (\n      <WalletCompatibilityCheck\n        providers={providers}\n        onMsg={(msg) => {\n          switch (msg.type) {\n            case 'on_sign_out':\n              onWalletSignout?.(intentsAccountType);\n              setIsCompatibilityOpen(false);\n              break;\n            case 'on_close':\n              setIsCompatibilityOpen(false);\n              break;\n            default:\n              notReachable(msg.type);\n          }\n        }}\n      />\n    );\n  }\n\n  if (ctx.state === 'transfer_success' && !!transferResult) {\n    return (\n      <SuccessScreen\n        {...transferResult}\n        message={[\n          'Your withdrawal has been successfully completed,',\n          'and the funds have been sent to the specified destination.',\n        ]}\n        onMsg={(msg) => {\n          switch (msg.type) {\n            case 'on_dismiss_success':\n              setTransferResult(undefined);\n              break;\n            default:\n              notReachable(msg.type);\n          }\n        }}\n      />\n    );\n  }\n\n  switch (tokensStatus) {\n    case 'error':\n      return (\n        <BlockingError\n          message=\"Couldn't load tokens list.\"\n          onClickRetry={refetchTokens}\n        />\n      );\n\n    case 'success': {\n      if (tokenModalOpen !== 'none') {\n        return (\n          <TokensModal\n            showBalances\n            variant={tokenModalOpen}\n            showChainsSelector={tokenModalOpen === 'target'}\n            groupTokens={false}\n            chainsFilter={\n              tokenModalOpen === 'source'\n                ? chainsFilter.source\n                : chainsFilter.target\n            }\n            onMsg={(msg) => {\n              switch (msg.type) {\n                case 'on_select_token':\n                  onChangeToken(tokenModalOpen, msg.token);\n                  updateTokenModalState('none');\n                  onMsg?.({\n                    type: msg.type,\n                    token: msg.token,\n                    variant: tokenModalOpen,\n                  });\n                  break;\n                case 'on_dismiss_tokens_modal':\n                  updateTokenModalState('none');\n                  break;\n                default:\n                  notReachable(msg);\n              }\n            }}\n          />\n        );\n      }\n\n      return (\n        <div className=\"gap-sw-2xl relative flex flex-col\">\n          <div className=\"gap-[10px] relative flex flex-col\">\n            <Card padding=\"none\">\n              <TokenInput.Source\n                heading={t(\n                  'tokenInput.heading.source.withdraw',\n                  'Withdraw token',\n                )}\n                isChanging={lastChangedInput === 'source'}\n                onMsg={(msg) => {\n                  switch (msg.type) {\n                    case 'on_select_token':\n                      onChangeToken('source', msg.token);\n                      break;\n                    case 'on_change_amount':\n                      onChangeAmount('source', msg.amount);\n                      break;\n                    case 'on_click_select_token':\n                      updateTokenModalState('source');\n                      break;\n                    default:\n                      notReachable(msg);\n                  }\n                }}\n              />\n            </Card>\n\n            <DirectionSwitcher isEnabled={false} />\n\n            <Card padding=\"none\">\n              <TokenInput.Target\n                heading={t(\n                  'tokenInput.heading.target.withdraw',\n                  'Receive token',\n                )}\n                isChanging={lastChangedInput === 'target'}\n                onMsg={(msg) => {\n                  switch (msg.type) {\n                    case 'on_select_token':\n                      onChangeToken('target', msg.token);\n                      break;\n                    case 'on_change_amount':\n                      onChangeAmount('target', msg.amount);\n                      break;\n                    case 'on_click_select_token':\n                      updateTokenModalState('target');\n                      break;\n                    default:\n                      notReachable(msg);\n                  }\n                }}\n              />\n            </Card>\n          </div>\n\n          {!!ctx.walletAddress &&\n            ctx.targetToken &&\n            !ctx.targetToken.isIntent && (\n              <SendAddress\n                onMsg={(msg) => {\n                  switch (msg.type) {\n                    case 'on_change_send_address':\n                      break;\n                    default:\n                      notReachable(msg.type, { throwError: false });\n                  }\n                }}\n              />\n            )}\n\n          {!isDirectNearTokenWithdrawal && <SwapQuote />}\n\n          <SubmitButton\n            providers={providers}\n            makeTransfer={makeTransfer}\n            label={t('submit.active.withdraw', 'Swap & withdraw')}\n            onSuccess={(transfer) => {\n              setTransferResult(transfer);\n              onMsg?.({ type: 'on_transfer_success' });\n            }}\n          />\n        </div>\n      );\n    }\n\n    case 'pending':\n    default:\n      return <WidgetWithdrawSkeleton />;\n  }\n};\n"],"names":["WidgetWithdrawContent","providers","makeTransfer","onMsg","isLoading","t","useTypedTranslation","ctx","useUnsafeSnapshot","isDirectNearTokenWithdrawal","useComputedSnapshot","chainsFilter","alchemyApiKey","refetchQuoteInterval","intentsAccountType","onWalletSignout","useConfig","tokensStatus","refetchTokens","useTokens","tokenModalOpen","updateTokenModalState","useTokenModal","onChangeAmount","onChangeToken","lastChangedInput","useTokenInputPair","isCompatibilityCheckRequired","useIsCompatibilityCheckRequired","isCompatibilityOpen","setIsCompatibilityOpen","useState","useEffect","transferResult","setTransferResult","fireEvent","useStoreSideEffects","isDebug","WidgetWithdrawSkeleton","jsx","WalletCompatibilityCheck","msg","notReachable","SuccessScreen","BlockingError","TokensModal","jsxs","Card","TokenInput","DirectionSwitcher","SendAddress","SwapQuote","SubmitButton","transfer"],"mappings":"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"}
+{"version":3,"file":"WidgetWithdrawContent.js","sources":["../../../src/widgets/WidgetWithdraw/WidgetWithdrawContent.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { CommonWidgetProps, TokenInputType } from '../types';\nimport { useTokenModal } from '../../hooks/useTokenModal';\nimport { WidgetWithdrawSkeleton } from './WidgetWithdrawSkeleton';\nimport { useTypedTranslation } from '../../localisation';\nimport {\n  SendAddress,\n  SubmitButton,\n  SuccessScreen,\n  SwapQuote,\n  TokenInput,\n  TokensModal,\n} from '@/features';\n\nimport { BlockingError, Card, DirectionSwitcher } from '@/components';\nimport { WalletCompatibilityCheck } from '@/features/WalletCompatibilityCheck';\n\nimport { useStoreSideEffects } from '@/machine/effects';\nimport { useComputedSnapshot, useUnsafeSnapshot } from '@/machine/snap';\nimport { fireEvent } from '@/machine/events/utils/fireEvent';\n\nimport {\n  useIsCompatibilityCheckRequired,\n  useTokenInputPair,\n  useTokens,\n} from '@/hooks';\nimport { useConfig } from '@/config';\n\nimport { isDebug, notReachable } from '@/utils';\n\nimport type { Token, TransferResult } from '@/types';\n\ntype Msg =\n  | { type: 'on_select_token'; token: Token; variant: TokenInputType }\n  | { type: 'on_transfer_success' }\n  | { type: 'on_tokens_modal_toggled'; isOpen: boolean };\n\nexport type Props = CommonWidgetProps<Msg>;\n\nexport const WidgetWithdrawContent = ({\n  providers,\n  makeTransfer,\n  onMsg,\n  isLoading,\n}: Props) => {\n  const { t } = useTypedTranslation();\n  const { ctx } = useUnsafeSnapshot();\n  const { isDirectNearTokenWithdrawal } = useComputedSnapshot();\n  const {\n    chainsFilter,\n    alchemyApiKey,\n    refetchQuoteInterval,\n    intentsAccountType,\n    onWalletSignout,\n  } = useConfig();\n\n  const { status: tokensStatus, refetch: refetchTokens } = useTokens();\n  const { tokenModalOpen, updateTokenModalState } = useTokenModal({ onMsg });\n  const { onChangeAmount, onChangeToken, lastChangedInput } =\n    useTokenInputPair();\n\n  const isCompatibilityCheckRequired = useIsCompatibilityCheckRequired();\n  const [isCompatibilityOpen, setIsCompatibilityOpen] = useState(false);\n\n  useEffect(() => {\n    if (isCompatibilityCheckRequired) {\n      setIsCompatibilityOpen(true);\n    }\n  }, [isCompatibilityCheckRequired]);\n\n  const [transferResult, setTransferResult] = useState<\n    TransferResult | undefined\n  >();\n\n  useEffect(() => {\n    fireEvent('reset', { clearWalletAddress: true });\n  }, []);\n\n  useStoreSideEffects({\n    debug: isDebug(),\n    listenTo: [\n      'checkWalletConnection',\n      'setSourceTokenBalance',\n      [\n        'setDefaultSelectedTokens',\n        { skipIntents: false, target: 'same-asset' },\n      ],\n      [\n        'makeQuote',\n        {\n          message: undefined,\n          type: lastChangedInput === 'target' ? 'exact_out' : 'exact_in',\n          refetchQuoteInterval,\n        },\n      ],\n      ['setBalancesUsingAlchemyExt', { alchemyApiKey }],\n    ],\n  });\n\n  const onBackToSwap = () => {\n    fireEvent('reset', { clearWalletAddress: false, keepSelectedTokens: true });\n  };\n\n  if (!!isLoading || (tokensStatus !== 'error' && !ctx.sourceToken)) {\n    return <WidgetWithdrawSkeleton />;\n  }\n\n  if (isCompatibilityOpen) {\n    return (\n      <WalletCompatibilityCheck\n        providers={providers}\n        onMsg={(msg) => {\n          switch (msg.type) {\n            case 'on_sign_out':\n              onWalletSignout?.(intentsAccountType);\n              setIsCompatibilityOpen(false);\n              break;\n            case 'on_close':\n              setIsCompatibilityOpen(false);\n              break;\n            default:\n              notReachable(msg.type);\n          }\n        }}\n      />\n    );\n  }\n\n  if (ctx.state === 'transfer_success' && !!transferResult) {\n    return (\n      <SuccessScreen\n        showTargetToken\n        title={t('transfer.success.withdrawal.title', 'Withdrawal successful')}\n        {...transferResult}\n        onMsg={(msg) => {\n          switch (msg.type) {\n            case 'on_dismiss_success':\n              setTransferResult(undefined);\n              onBackToSwap();\n              break;\n            default:\n              notReachable(msg.type);\n          }\n        }}\n      />\n    );\n  }\n\n  switch (tokensStatus) {\n    case 'error':\n      return (\n        <BlockingError\n          message=\"Couldn't load tokens list.\"\n          onClickRetry={refetchTokens}\n        />\n      );\n\n    case 'success': {\n      if (tokenModalOpen !== 'none') {\n        return (\n          <TokensModal\n            showBalances\n            variant={tokenModalOpen}\n            showChainsSelector={tokenModalOpen === 'target'}\n            groupTokens={false}\n            chainsFilter={\n              tokenModalOpen === 'source'\n                ? chainsFilter.source\n                : chainsFilter.target\n            }\n            onMsg={(msg) => {\n              switch (msg.type) {\n                case 'on_select_token':\n                  onChangeToken(tokenModalOpen, msg.token);\n                  updateTokenModalState('none');\n                  onMsg?.({\n                    type: msg.type,\n                    token: msg.token,\n                    variant: tokenModalOpen,\n                  });\n                  break;\n                case 'on_dismiss_tokens_modal':\n                  updateTokenModalState('none');\n                  break;\n                default:\n                  notReachable(msg);\n              }\n            }}\n          />\n        );\n      }\n\n      return (\n        <div className=\"gap-sw-2xl relative flex flex-col\">\n          <div className=\"gap-[10px] relative flex flex-col\">\n            <Card padding=\"none\">\n              <TokenInput.Source\n                heading={t(\n                  'tokenInput.heading.source.withdraw',\n                  'Withdraw token',\n                )}\n                isChanging={lastChangedInput === 'source'}\n                onMsg={(msg) => {\n                  switch (msg.type) {\n                    case 'on_select_token':\n                      onChangeToken('source', msg.token);\n                      break;\n                    case 'on_change_amount':\n                      onChangeAmount('source', msg.amount);\n                      break;\n                    case 'on_click_select_token':\n                      updateTokenModalState('source');\n                      break;\n                    default:\n                      notReachable(msg);\n                  }\n                }}\n              />\n            </Card>\n\n            <DirectionSwitcher isEnabled={false} />\n\n            <Card padding=\"none\">\n              <TokenInput.Target\n                heading={t(\n                  'tokenInput.heading.target.withdraw',\n                  'Receive token',\n                )}\n                isChanging={lastChangedInput === 'target'}\n                onMsg={(msg) => {\n                  switch (msg.type) {\n                    case 'on_select_token':\n                      onChangeToken('target', msg.token);\n                      break;\n                    case 'on_change_amount':\n                      onChangeAmount('target', msg.amount);\n                      break;\n                    case 'on_click_select_token':\n                      updateTokenModalState('target');\n                      break;\n                    default:\n                      notReachable(msg);\n                  }\n                }}\n              />\n            </Card>\n          </div>\n\n          {!!ctx.walletAddress &&\n            ctx.targetToken &&\n            !ctx.targetToken.isIntent && (\n              <SendAddress\n                onMsg={(msg) => {\n                  switch (msg.type) {\n                    case 'on_change_send_address':\n                      break;\n                    default:\n                      notReachable(msg.type, { throwError: false });\n                  }\n                }}\n              />\n            )}\n\n          {!isDirectNearTokenWithdrawal && <SwapQuote />}\n\n          <SubmitButton\n            providers={providers}\n            makeTransfer={makeTransfer}\n            label={t('submit.active.withdraw', 'Swap & withdraw')}\n            onSuccess={(transfer) => {\n              setTransferResult(transfer);\n              onMsg?.({ type: 'on_transfer_success' });\n            }}\n          />\n        </div>\n      );\n    }\n\n    case 'pending':\n    default:\n      return <WidgetWithdrawSkeleton />;\n  }\n};\n"],"names":["WidgetWithdrawContent","providers","makeTransfer","onMsg","isLoading","t","useTypedTranslation","ctx","useUnsafeSnapshot","isDirectNearTokenWithdrawal","useComputedSnapshot","chainsFilter","alchemyApiKey","refetchQuoteInterval","intentsAccountType","onWalletSignout","useConfig","tokensStatus","refetchTokens","useTokens","tokenModalOpen","updateTokenModalState","useTokenModal","onChangeAmount","onChangeToken","lastChangedInput","useTokenInputPair","isCompatibilityCheckRequired","useIsCompatibilityCheckRequired","isCompatibilityOpen","setIsCompatibilityOpen","useState","useEffect","transferResult","setTransferResult","fireEvent","useStoreSideEffects","isDebug","onBackToSwap","WidgetWithdrawSkeleton","jsx","WalletCompatibilityCheck","msg","notReachable","SuccessScreen","BlockingError","TokensModal","jsxs","Card","TokenInput","DirectionSwitcher","SendAddress","SwapQuote","SubmitButton","transfer"],"mappings":"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"}

package/dist/widgets/WidgetWithdraw/WidgetWithdrawSkeleton.js

@@ -1,7 +1,7 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import o from "clsx";
 import { SkeletonBox as l } from "../../components/SkeletonBox.js";
-import { y as x } from "../../config-CgCb5P7j.js";
+import { y as x } from "../../config-BMvXuF1-.js";
 const p = () => {
   const { hideTokenInputHeadings: s } = x();
   return /* @__PURE__ */ a("div", { className: "w-full gap-sw-xl relative flex flex-col", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurora-is-near/intents-swap-widget",
-  "version": "3.18.2",
+  "version": "3.18.3",
   "description": "Provides components and hooks to build your own Intents swap widget",
   "author": "Maksim Vashchuk",
   "license": "MIT",

package/src/components/Accordion.tsx

@@ -29,12 +29,11 @@ export const Accordion = ({
   const [isExpanded, setIsExpanded] = useState(expandedByDefault);
 
   return (
-    <Card
-      isClickable
-      className={cn('py-sw-lg', className)}
-      onClick={() => setIsExpanded((p) => !p)}>
-      <header className="align-center flex w-full justify-between">
-        <span className="gap-sw-xs text-sw-label-md mt-sw-xs flex text-center text-sw-gray-200">
+    <Card className={cn('py-sw-xl', className)}>
+      <header
+        onClick={() => setIsExpanded((p) => !p)}
+        className="items-center flex w-full justify-between cursor-pointer">
+        <span className="gap-sw-xs text-sw-label-md flex text-center text-sw-gray-200">
           {title}
         </span>
         {isBadgeLoading ? (

package/src/components/Button.tsx

@@ -22,7 +22,11 @@ type Props = {
 } & (
   | { icon: MaterialSymbolsComponent; iconPosition?: 'head' | 'tail' }
   | { icon?: never; iconPosition?: never }
-);
+) &
+  (
+    | { as?: 'button'; href?: never; target?: never }
+    | { as: 'a'; href: string; target?: '_blank' | '_self' }
+  );
 
 const styles = {
   icon: 'h-sw-xl w-sw-xl',
@@ -76,20 +80,26 @@ const ButtonPrimary = ({
   size,
   className,
   children,
+  as = 'button',
   state = 'default',
   onClick,
   fluid,
+  href,
+  target,
   ...props
 }: Omit<Props, 'variant'>) => {
+  const anchorProps = as === 'a' ? { href, target } : {};
   const isDisabled = ['disabled', 'loading', 'error'].includes(state)
     ? true
     : undefined;
 
   return (
     <UIButton
+      as={as}
       disabled={isDisabled}
       data-active={state === 'active' ? true : undefined}
       onClick={() => state === 'default' && onClick?.()}
+      {...anchorProps}
       className={clsx(
         styles.common,
         styles.width(fluid),
@@ -115,20 +125,26 @@ const ButtonOutlined = ({
   size,
   className,
   children,
+  as = 'button',
   state = 'default',
   onClick,
   fluid,
+  href,
+  target,
   ...props
 }: Omit<Props, 'variant'>) => {
+  const anchorProps = as === 'a' ? { href, target } : {};
   const isDisabled = ['disabled', 'loading', 'error'].includes(state)
     ? true
     : undefined;
 
   return (
     <UIButton
+      as={as}
       disabled={isDisabled}
       data-active={state === 'active' ? true : undefined}
       onClick={() => state === 'default' && onClick?.()}
+      {...anchorProps}
       className={clsx(
         styles.common,
         styles.width(fluid),

package/src/components/CopyButton.tsx

@@ -1,11 +1,21 @@
 import copy from 'copy-text-to-clipboard';
 import { ContentCopyW700 as ContentCopy } from '@material-symbols-svg/react-rounded/icons/content-copy';
 
-export const CopyButton = ({ value }: { value: string }) => (
+import { cn } from '@/utils/cn';
+
+type Props = {
+  value: string;
+  className?: string;
+};
+
+export const CopyButton = ({ value, className }: Props) => (
   <button
     type="button"
     onClick={() => copy(value)}
-    className="text-sw-gray-200 hover:text-sw-gray-50 cursor-pointer transition-all duration-300 [transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)] active:-translate-y-1 active:scale-x-90 active:scale-y-110">
+    className={cn(
+      'text-sw-gray-200 hover:text-sw-gray-50 cursor-pointer transition-all duration-300 [transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)] active:-translate-y-1 active:scale-x-90 active:scale-y-110',
+      className,
+    )}>
     <ContentCopy size={16} />
   </button>
 );

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/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/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/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);

package/src/widgets/WidgetSwap/WidgetSwapContent.tsx

@@ -83,6 +83,10 @@ export const WidgetSwapContent = ({
     fireEvent('reset', { clearWalletAddress: true });
   }, []);
 
+  const onBackToSwap = () => {
+    fireEvent('reset', { clearWalletAddress: false, keepSelectedTokens: true });
+  };
+
   useStoreSideEffects({
     debug: isDebug(),
     listenTo: [
@@ -129,15 +133,14 @@ export const WidgetSwapContent = ({
   if (ctx.state === 'transfer_success' && !!transferResult) {
     return (
       <SuccessScreen
+        showTargetToken
+        title={t('transfer.success.swap.title', 'Swap successful')}
         {...transferResult}
-        message={[
-          'Your swap has been successfully completed,',
-          'and the funds are now available in your account.',
-        ]}
         onMsg={(msg) => {
           switch (msg.type) {
             case 'on_dismiss_success':
               setTransferResult(undefined);
+              onBackToSwap();
               break;
             default:
               notReachable(msg.type);