@aurora-is-near/intents-swap-widget 3.14.0-redesign.2 → 3.14.0-redesign.7

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(true);\n\n  useEffect(() => {\n    if (!isCompatibilityCheckRequired) {\n      setIsCompatibilityOpen(false);\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  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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"}

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-Bmc4hOIl.js";
+import { y as x } from "../../config-Behl5hcc.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.14.0-redesign.2",
+  "version": "3.14.0-redesign.7",
   "description": "Provides components and hooks to build your own Intents swap widget",
   "author": "Maksim Vashchuk",
   "license": "MIT",
@@ -109,10 +109,11 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/browser-or-node": "^1.3.2",
     "@types/jest": "^30.0.0",
     "@types/jest-image-snapshot": "^6.4.0",
     "@types/puppeteer": "^7.0.4",
-    "glob": "^13.0.0",
+    "glob": "^10.5.0",
     "is-ci": "^4.1.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-image-snapshot": "^6.5.1",

package/src/components/BlockingError.tsx

@@ -10,13 +10,16 @@ type Props = {
 
 export const BlockingError = ({ message, onClickRetry }: Props) => (
   <Card className="w-full">
-    <div className="gap-sw-2xl py-6xl flex min-h-[200px] flex-col items-center justify-center w-full">
-      <div className="gap-sw-md flex flex-col items-center justify-center">
+    <div className="gap-sw-4xl py-6xl flex min-h-[200px] flex-col items-center justify-center w-full">
+      <div className="gap-sw-xl flex flex-col items-center justify-center">
         <header className="gap-sw-md flex items-center">
-          <Icons.X strokeWidth={2.5} className="text-sw-accent-500 h-7 w-7" />
+          <Icons.X
+            strokeWidth={2.5}
+            className="text-sw-accent-500 h-sw-4xl w-sw-4xl"
+          />
           <h3 className="text-sw-value-lg text-sw-accent-500">Ooops...</h3>
         </header>
-        <p className="text-sw-label-sm text-center text-sw-gray-100">
+        <p className="text-sw-body-md text-center text-sw-gray-100">
           {message} <br /> Please try again or contact support.
         </p>
       </div>

package/src/components/CloseButton.tsx

@@ -12,7 +12,7 @@ export const CloseButton = ({ className, onClick }: Props) => {
     <button
       type="button"
       className={cn(
-        'flex cursor-pointer items-center justify-center text-sw-gray-200 transition-colors hover:text-sw-gray-50 p-sw-md rounded-sw-md bg-sw-gray-950 hover:bg-sw-gray-800',
+        'flex cursor-pointer items-center justify-center text-sw-gray-200 transition-colors hover:text-sw-gray-50 p-sw-md w-[34px] h-[34px] rounded-sw-md bg-sw-gray-950 hover:bg-sw-gray-800',
         className,
       )}
       onClick={onClick}>

package/src/features/DepositMethodSwitcher.tsx

@@ -1,5 +1,5 @@
 import * as Icons from 'lucide-react';
-import { useMemo } from 'react';
+
 import { cn } from '@/utils/cn';
 import { Card } from '@/components/Card';
 import { Button } from '@/components/Button';
@@ -18,14 +18,6 @@ export const DepositMethodSwitcher = ({ children, className }: Props) => {
     fireEvent('depositTypeSet', { isExternal });
   };
 
-  const state = useMemo(() => {
-    if (ctx.isDepositFromExternalWallet) {
-      return { state: 'default' as const };
-    }
-
-    return { state: 'disabled' as const };
-  }, [ctx.isDepositFromExternalWallet]);
-
   return (
     <Card className={cn('gap-sw-2xl p-sw-2xl flex flex-col', className)}>
       <span className="text-sw-label-md text-sw-gray-50">
@@ -34,20 +26,16 @@ export const DepositMethodSwitcher = ({ children, className }: Props) => {
       <div className="flex gap-sw-lg">
         <Button
           size="md"
-          variant="primary"
           icon={Icons.Wallet2}
-          onClick={() => onToggle(false)}
-          {...(!ctx.isDepositFromExternalWallet
-            ? { state: 'default' }
-            : { state: 'active' })}>
+          variant={ctx.isDepositFromExternalWallet ? 'outlined' : 'primary'}
+          onClick={() => onToggle(false)}>
           My wallet
         </Button>
         <Button
           size="md"
-          variant="primary"
           icon={Icons.QrCode}
-          onClick={() => onToggle(true)}
-          {...state}>
+          variant={ctx.isDepositFromExternalWallet ? 'primary' : 'outlined'}
+          onClick={() => onToggle(true)}>
           QR / Address
         </Button>
       </div>

package/src/features/ExternalDeposit.tsx

@@ -30,12 +30,12 @@ type Props = {
 
 const QrCode = ({ address }: { address: string }) => (
   <div className="flex flex-col gap-sw-2xl items-center">
-    <div className="p-sw-lg m-sw-lg mx-auto w-fit rounded-md bg-white">
-      <QRCodeSVG size={156} value={address} fgColor="#31343d" />
+    <div className="p-sw-lg m-sw-lg mx-auto w-fit rounded-sw-md bg-[#fff]">
+      <QRCodeSVG size={156} value={address} fgColor="#161926" />
     </div>
-    <div className="py-sw-lg px-sw-lg w-full flex items-center justify-between rounded-md bg-sw-gray-600">
+    <div className="py-sw-lg px-sw-lg w-full flex items-center justify-between rounded-sw-md bg-sw-gray-800">
       <span className="text-sw-label-md text-sw-gray-100">
-        {formatAddressTruncate(address, 42)}
+        {formatAddressTruncate(address, 38)}
       </span>
       <CopyButton value={address} />
     </div>
@@ -48,8 +48,8 @@ const Skeleton = () => {
 
   return (
     <div className="flex flex-col gap-sw-2xl items-center">
-      <div className="bg-sw-gray-600 h-[180px] w-[180px] animate-pulse rounded-md" />
-      <div className="bg-sw-gray-600 h-[44px] w-full animate-pulse rounded-md flex items-center justify-center gap-sw-sm">
+      <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" />
         <span className="text-sw-gray-100 text-sw-label-sm">
           {!isNotEmptyAmount(ctx.sourceTokenAmount)
@@ -139,7 +139,8 @@ export const ExternalDeposit = ({ onMsg }: Props) => {
       default:
         notReachable(status);
     }
-  }, [depositStatusQuery.data, ctx.sourceToken, onMsg]);
+    // do not include onMsg to avoid infinite loop
+  }, [depositStatusQuery.data, ctx.sourceToken]);
 
   if (!isValidState) {
     return <Skeleton />;

package/src/features/SubmitButton/index.tsx

@@ -125,6 +125,46 @@ const useGetErrorButton = (ctx: Context) => {
     );
   }
 
+  if (ctx.error?.code === 'EXTERNAL_TRANSFER_FAILED') {
+    return (
+      <Button state="error" {...commonBtnProps}>
+        {t('submit.error.externalTransferFailed.label', 'Transfer failed')}
+      </Button>
+    );
+  }
+
+  if (ctx.error?.code === 'EXTERNAL_TRANSFER_INCOMPLETE') {
+    return (
+      <div className="gap-sw-md flex flex-col">
+        <Button state="error" {...commonBtnProps}>
+          {t('submit.error.externalTransferFailed.label', 'Transfer failed')}
+        </Button>
+        <ErrorMessage>
+          {t(
+            'submit.error.externalTransferFailed.incompleteMessage',
+            'Incomplete transfer. Deposited amount will be refunded.',
+          )}
+        </ErrorMessage>
+      </div>
+    );
+  }
+
+  if (ctx.error?.code === 'EXTERNAL_TRANSFER_REFUNDED') {
+    return (
+      <div className="gap-sw-md flex flex-col">
+        <Button state="error" {...commonBtnProps}>
+          {t('submit.error.externalTransferFailed.label', 'Transfer failed')}
+        </Button>
+        <ErrorMessage>
+          {t(
+            'submit.error.externalTransferFailed.refundedMessage',
+            'Deposited amount will be refunded.',
+          )}
+        </ErrorMessage>
+      </div>
+    );
+  }
+
   if (ctx.error?.code === 'DIRECT_TRANSFER_ERROR') {
     return (
       <div className="gap-sw-md flex flex-col">

package/src/features/SuccessScreen/SummaryItem.tsx

@@ -16,9 +16,9 @@ export const SummaryItem = ({
   externalUrl,
 }: Props) => (
   <li className="py-sw-md flex items-center justify-between">
-    <span className="text-sw-label-s text-sw-gray-100">{label}</span>
+    <span className="text-sw-label-sm text-sw-gray-100">{label}</span>
     <div className="gap-sw-md flex items-center">
-      <span className="text-sw-label-s text-sw-accent-300">
+      <span className="text-sw-label-sm text-sw-accent-300">
         {formatTxHash(value)}
       </span>
       {!!externalUrl && <ExternalAction url={externalUrl} />}

package/src/features/SuccessScreen/index.tsx

@@ -1,10 +1,10 @@
 import { Fragment } from 'react';
 
 import { CheckIcon } from './CheckIcon';
-import { CloseButton } from './CloseButton';
 import { SummaryItem } from './SummaryItem';
 import { Hr } from '@/components/Hr';
 import { Card } from '@/components/Card';
+import { CloseButton } from '@/components/CloseButton';
 import type { TransferResult } from '@/types/transfer';
 
 import { fireEvent, useUnsafeSnapshot } from '@/machine';
@@ -45,10 +45,12 @@ export const SuccessScreen = ({
             <CheckIcon />
             <CloseButton onClick={onDismiss} />
           </header>
-          <span className="text-sw-label-l text-sw-gray-50">All done</span>
+          <span className="text-sw-label-lg text-sw-gray-50">
+            {t('transfer.success.title', 'All done!')}
+          </span>
         </>
       )}
-      <p className="mt-sw-sm text-sw-p-s text-sw-gray-100">
+      <p className="mt-sw-sm text-sw-body-md text-sw-gray-400">
         {lines.map((line, idx) => (
           <Fragment key={idx}>
             {line}

package/src/features/SwapQuote/SwapQuote.tsx

@@ -38,7 +38,7 @@ export const SwapQuote = ({ className }: Props) => {
           <span style={{ borderBottomWidth: '2px', borderStyle: 'dotted' }}>
             {`1 ${ctx.sourceToken.symbol} ≈ `} {formatTinyNumber(price ?? 0)}{' '}
             {`${ctx.targetToken.symbol}`}
-            <span className="text-sw-gray-50">{`(${formatUsdAmount(ctx.sourceToken.price)})`}</span>
+            <span className="text-sw-gray-50">{` (${formatUsdAmount(ctx.sourceToken.price)})`}</span>
           </span>
         ) : (
           <span style={{ borderBottomWidth: '2px', borderStyle: 'dotted' }}>

package/src/features/WalletCompatibilityCheck/WalletCompatibilityModal.tsx

@@ -64,6 +64,9 @@ export const Initial = ({ isSigned, isSigning, onMsg }: Props) => {
     autostart: false,
     timerType: 'DECREMENTAL',
     initialTime: 7,
+    onTimeOver: () => {
+      onMsg({ type: 'on_close' });
+    },
   });
 
   useEffect(() => {

package/src/features/WalletCompatibilityCheck/index.tsx

@@ -53,14 +53,12 @@ export function WalletCompatibilityCheck({ onMsg, providers }: Props) {
       onMsg={async (msg) => {
         switch (msg.type) {
           case 'on_close':
-            onMsg({ type: 'on_close' });
+          case 'on_sign_out':
+            onMsg({ type: msg.type });
             break;
           case 'on_try_again':
             setHasError(false);
             break;
-          case 'on_sign_out':
-            onMsg({ type: 'on_sign_out' });
-            break;
           default:
             notReachable(msg.type);
         }
@@ -73,14 +71,12 @@ export function WalletCompatibilityCheck({ onMsg, providers }: Props) {
       onMsg={async (msg) => {
         switch (msg.type) {
           case 'on_close':
-            onMsg({ type: 'on_close' });
+          case 'on_sign_out':
+            onMsg({ type: msg.type });
             break;
           case 'on_check_compatibility':
             await handleCompatibilityCheck();
             break;
-          case 'on_sign_out':
-            onMsg({ type: 'on_sign_out' });
-            break;
           default:
             notReachable(msg.type);
         }

package/src/hooks/useExternalDepositStatus/usePoaExternalDepositStatus.ts

@@ -28,7 +28,7 @@ type DepositResult = {
   account_id: string;
   created_at: string;
   near_token_id: string;
-  status: 'COMPLETED' | 'PENDING' | 'FAILED';
+  status: 'COMPLETED' | 'PENDING' | 'FAILED' | 'CREDITED';
   tx_hash?: string;
 };
 
@@ -92,6 +92,7 @@ const oneClickBridgeStatusMap: Record<
   DepositResult['status'],
   GetExecutionStatusResponse.status
 > = {
+  CREDITED: GetExecutionStatusResponse.status.PROCESSING,
   PENDING: GetExecutionStatusResponse.status.PROCESSING,
   COMPLETED: GetExecutionStatusResponse.status.SUCCESS,
   FAILED: GetExecutionStatusResponse.status.FAILED,

package/src/hooks/useIsCompatibilityCheckRequired.ts

@@ -5,5 +5,5 @@ export const useIsCompatibilityCheckRequired = () => {
   const { ctx } = useUnsafeSnapshot();
   const verifiedWallets = localStorageTyped.getItem('verifiedWallets');
 
-  return ctx.walletAddress && !verifiedWallets.includes(ctx.walletAddress);
+  return !!(ctx.walletAddress && !verifiedWallets.includes(ctx.walletAddress));
 };

package/src/hooks/useToggleTheme.ts

@@ -1,11 +1,13 @@
 import { useEffect, useState } from 'react';
 import { isBrowser } from 'browser-or-node';
 
+import { useConfig } from '@/config';
+
 type ThemeMode = 'light' | 'dark' | 'auto';
 
-const applyThemeDataAttr = (theme: ThemeMode) => {
+const applyThemeDataAttr = (theme: ThemeMode, parentEl: Element | null) => {
   if (isBrowser) {
-    document.body?.setAttribute('data-sw-theme', theme);
+    (parentEl ?? document.body).setAttribute('data-sw-theme', theme);
   }
 };
 
@@ -13,6 +15,7 @@ export const useToggleTheme = (
   defaultTheme?: ThemeMode,
   onChange?: (colorPalette: 'light' | 'dark') => void,
 ) => {
+  const { themeParentElementSelector } = useConfig();
   const [colorPalette, setColorPalette] = useState<'light' | 'dark'>();
   const [theme, setTheme] = useState<ThemeMode | undefined>(() => {
     if (isBrowser && defaultTheme === undefined) {
@@ -24,6 +27,10 @@ export const useToggleTheme = (
 
   useEffect(() => {
     if (isBrowser) {
+      const themeParentElement = themeParentElementSelector
+        ? document.querySelector(themeParentElementSelector)
+        : null;
+
       if (theme === undefined) {
         setTheme((localStorage.getItem('theme') as ThemeMode) || 'dark');
       } else if (theme === 'auto') {
@@ -31,7 +38,7 @@ export const useToggleTheme = (
         const updateTheme = () => {
           const palette = mediaQuery.matches ? 'dark' : 'light';
 
-          applyThemeDataAttr(palette);
+          applyThemeDataAttr(palette, themeParentElement);
           setColorPalette(palette);
           onChange?.(palette);
         };
@@ -43,7 +50,7 @@ export const useToggleTheme = (
         return () => mediaQuery.removeEventListener('change', updateTheme);
       } else {
         localStorage.setItem('theme', theme);
-        applyThemeDataAttr(theme);
+        applyThemeDataAttr(theme, themeParentElement);
         setColorPalette(theme);
         onChange?.(theme);
       }

package/src/machine/computed/getIsDirectNearTokenWithdrawal.ts

@@ -10,6 +10,7 @@ export const getIsDirectNearTokenWithdrawal = (
     ctx.sourceToken.isIntent &&
     !ctx.targetToken.isIntent &&
     ctx.targetToken.symbol === ctx.sourceToken.symbol &&
-    ctx.targetToken.blockchain === 'near'
+    ctx.targetToken.blockchain === 'near' &&
+    ctx.sourceToken.blockchain === 'near'
   );
 };

package/src/machine/computed/getIsDirectTokenOnNearDeposit.ts

@@ -10,6 +10,7 @@ export const getIsDirectTokenOnNearDeposit = (
     ctx.targetToken.isIntent &&
     !ctx.sourceToken.isIntent &&
     ctx.targetToken.assetId === ctx.sourceToken.assetId &&
-    ctx.targetToken.blockchain === 'near'
+    ctx.targetToken.blockchain === 'near' &&
+    ctx.sourceToken.blockchain === 'near'
   );
 };

package/src/machine/computed/getIsDirectTokenOnNearTransfer.ts

@@ -10,6 +10,7 @@ export const getIsDirectTokenOnNearTransfer = (
     !ctx.targetToken.isIntent &&
     !ctx.sourceToken.isIntent &&
     ctx.targetToken.assetId === ctx.sourceToken.assetId &&
-    ctx.targetToken.blockchain === 'near'
+    ctx.targetToken.blockchain === 'near' &&
+    ctx.sourceToken.blockchain === 'near'
   );
 };

package/src/theme/ThemeProvider.tsx

@@ -1,15 +1,31 @@
+import { isBrowser } from 'browser-or-node';
 import { createContext, type ReactNode, useEffect, useMemo } from 'react';
+
 import { ColorPalette, ColorScheme, HexColor, Theme } from '../types/theme';
 import { createColorPalette } from './createColorPalette';
+import { useConfig } from '@/config';
 
-const setColorVariables = (palette: ColorPalette, colorKey: string) => {
-  Object.entries(palette).forEach(([key, value]) => {
-    document.body.style.setProperty(`--c-sw-${colorKey}-${key}`, value);
-  });
+const setColorVariables = (
+  palette: ColorPalette,
+  colorKey: string,
+  parentEl: Element | null,
+) => {
+  if (isBrowser) {
+    let parentElement = document.body;
+
+    if (parentEl instanceof HTMLElement) {
+      parentElement = parentEl;
+    }
+
+    Object.entries(palette).forEach(([key, value]) => {
+      parentElement.style.setProperty(`--c-sw-${colorKey}-${key}`, value);
+    });
+  }
 };
 
 const setColorPalette = (
   colorKey: string,
+  parentEl: Element | null,
   baseColor?: HexColor,
   colorScheme?: ColorScheme,
 ) => {
@@ -21,16 +37,14 @@ const setColorPalette = (
     return;
   }
 
-  setColorVariables(palette, colorKey);
+  setColorVariables(palette, colorKey, parentEl);
 };
 
-const loadTheme = ({
-  primaryColor = '#D5B7FF',
-  surfaceColor = '#7E8396',
-  colorScheme = 'dark',
-}: Theme) => {
-  setColorPalette('accent', primaryColor, colorScheme);
-  setColorPalette('gray', surfaceColor, colorScheme);
+const loadTheme = (parentEl: Element | null, theme: Theme) => {
+  const { primaryColor, surfaceColor, colorScheme } = theme;
+
+  setColorPalette('accent', parentEl, primaryColor, colorScheme);
+  setColorPalette('gray', parentEl, surfaceColor, colorScheme);
 };
 
 export const ThemeContext = createContext<Theme | undefined>(undefined);
@@ -41,11 +55,16 @@ type ThemeProviderProps = {
 };
 
 export const ThemeProvider = ({ children, theme }: ThemeProviderProps) => {
+  const { themeParentElementSelector } = useConfig();
   const value = useMemo((): Theme | undefined => theme, [theme]);
 
   useEffect(() => {
-    if (theme) {
-      loadTheme(theme);
+    if (theme && isBrowser) {
+      const themeParentElement = themeParentElementSelector
+        ? document.querySelector(themeParentElementSelector)
+        : null;
+
+      loadTheme(themeParentElement, theme);
     }
   }, [theme]);
 

package/src/types/config.ts

@@ -65,4 +65,5 @@ export type WidgetConfig = {
   // UI
   hideSendAddress?: boolean;
   hideTokenInputHeadings?: boolean;
+  themeParentElementSelector?: string;
 };

package/src/types/localisation.ts

@@ -14,6 +14,7 @@ export type LocalisationKeys =
   | 'wallet.recipient.message.receiveFunds'
   | 'wallet.connected.error.notSupportedChain'
   // transfer
+  | 'transfer.success.title'
   | 'transfer.success.hash.label'
   | 'transfer.success.intent.label'
   // quote
@@ -48,6 +49,9 @@ export type LocalisationKeys =
   | 'submit.error.quoteFailed.message'
   | 'submit.error.transfer.noFees'
   | 'submit.error.transfer.failed'
+  | 'submit.error.externalTransferFailed.label'
+  | 'submit.error.externalTransferFailed.incompleteMessage'
+  | 'submit.error.externalTransferFailed.refundedMessage'
   // send address
   | 'sendAddress.label'
   | 'sendAddress.button.magic.label'