@aurora-is-near/intents-swap-widget 3.15.1 → 3.15.2

package/dist/widgets/WidgetWithdraw/WidgetWithdrawContent.js

@@ -3,11 +3,12 @@ import { useState as w, useEffect as b } from "react";
 import { useTokenModal as B } from "../../hooks/useTokenModal.js";
 import { WidgetWithdrawSkeleton as y } from "./WidgetWithdrawSkeleton.js";
 import { useTypedTranslation as D } from "../../localisation.js";
-import { b as N, u as O, y as Q, n as j, c as q, p as S, o as F, S as U } from "../../config-DCXH00Br.js";
+import { b as N, u as O, y as Q, n as j, c as q, p as S, o as F, S as U } from "../../config-CJfcVohD.js";
 import "@tanstack/react-query";
 import "@headlessui/react";
 import "framer-motion";
 import "lucide-react";
+import "../../features/ChainsDropdown/ChainItem.js";
 import "../../utils/cn.js";
 import "../../constants/chains.js";
 import { notReachable as r } from "../../utils/notReachable.js";
@@ -42,7 +43,7 @@ import "copy-text-to-clipboard";
 import "../../components/InputAmount.js";
 import "../../components/Notes.js";
 import { WalletCompatibilityCheck as X } from "../../features/WalletCompatibilityCheck/index.js";
-const Ke = ({
+const Pe = ({
   providers: u,
   makeTransfer: T,
   onMsg: a,
@@ -242,6 +243,6 @@ const Ke = ({
   }
 };
 export {
-  Ke as WidgetWithdrawContent
+  Pe as WidgetWithdrawContent
 };
 //# sourceMappingURL=WidgetWithdrawContent.js.map

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  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-DCXH00Br.js";
+import { y as x } from "../../config-CJfcVohD.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.15.1",
+  "version": "3.15.2",
   "description": "Provides components and hooks to build your own Intents swap widget",
   "author": "Maksim Vashchuk",
   "license": "MIT",

package/src/features/ChainsDropdown/ChainItem.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import * as Icons from 'lucide-react';
 
 import { cn } from '@/utils/cn';
@@ -8,25 +9,32 @@ type Msg = { type: 'on_click_chain'; chain: 'intents' | 'all' | Chains };
 
 type Props = {
   label: string;
+  isFocused: boolean;
   isSelected: boolean;
   chain: 'intents' | 'all' | Chains;
   icon: string | React.ReactElement;
+  className?: string;
   onMsg: (msg: Msg) => void;
 };
 
-export const ChainItem = ({ chain, label, icon, isSelected, onMsg }: Props) => {
-  return (
+export const ChainItem = React.forwardRef<HTMLButtonElement, Props>(
+  ({ chain, label, icon, isFocused, isSelected, className, onMsg }, ref) => (
     <button
+      ref={ref}
       type="button"
       onClick={() => onMsg({ type: 'on_click_chain', chain })}
       className={cn(
         'gap-sw-md px-sw-lg py-sw-sm text-sw-gray-50 flex cursor-pointer items-center justify-between rounded-sw-md transition-colors',
-        { 'hover:text-sw-accent-200 hover:bg-sw-gray-700': !isSelected },
-        { 'bg-sw-gray-700': isSelected },
+        { 'bg-sw-gray-700': isSelected || isFocused },
+        {
+          'hover:text-sw-accent-200 hover:bg-sw-gray-700':
+            !isSelected && !isFocused,
+        },
+        className,
       )}>
       <Icon radius={10} label={label} icon={icon} />
       <span className="text-sw-label-md mr-auto">{label}</span>
       {isSelected && <Icons.Check size={16} />}
     </button>
-  );
-};
+  ),
+);

package/src/features/ChainsDropdown/index.tsx

@@ -98,59 +98,37 @@ export const ChainsDropdown = ({
                 className="hide-scrollbar gap-sw-xxs p-sw-md z-10 flex max-h-[400px] min-w-[200px] flex-col rounded-sw-lg bg-sw-gray-800 shadow-[0_6px_48px_0_rgba(36,38,45,0.3)] ring-1 ring-inset ring-sw-gray-700 outline-none">
                 {chains.length > 1 && (
                   <MenuItem>
-                    <ChainItem
-                      chain="all"
-                      label="All networks"
-                      isSelected={selected === 'all'}
-                      icon={<AllNetworksIcon />}
-                      onMsg={(msg) => {
-                        switch (msg.type) {
-                          case 'on_click_chain':
-                            close();
-                            onMsg(msg);
-                            break;
-                          default:
-                            notReachable(msg.type, { throwError: false });
-                        }
-                      }}
-                    />
+                    {({ focus }) => (
+                      <ChainItem
+                        chain="all"
+                        label="All networks"
+                        isSelected={selected === 'all'}
+                        isFocused={focus}
+                        icon={<AllNetworksIcon />}
+                        onMsg={(msg) => {
+                          switch (msg.type) {
+                            case 'on_click_chain':
+                              close();
+                              onMsg(msg);
+                              break;
+                            default:
+                              notReachable(msg.type, { throwError: false });
+                          }
+                        }}
+                      />
+                    )}
                   </MenuItem>
                 )}
 
                 {hasIntentsAccountMenuItem && (
                   <MenuItem>
-                    <ChainItem
-                      chain="intents"
-                      label={`${appName} account`}
-                      isSelected={selected === 'intents'}
-                      icon={appIcon}
-                      onMsg={(msg) => {
-                        switch (msg.type) {
-                          case 'on_click_chain':
-                            close();
-                            onMsg(msg);
-                            break;
-                          default:
-                            notReachable(msg.type, { throwError: false });
-                        }
-                      }}
-                    />
-                  </MenuItem>
-                )}
-
-                {!!chains.length &&
-                  !!(chains.length > 1 || hasIntentsAccountMenuItem) && (
-                    <Hr className="shrink-0 my-sw-sm bg-sw-gray-700" />
-                  )}
-
-                {chains.map((chain) => {
-                  return (
-                    <MenuItem key={chain.id}>
+                    {({ focus }) => (
                       <ChainItem
-                        chain={chain.id}
-                        label={chain.label}
-                        icon={CHAINS_LIST[chain.id].icon}
-                        isSelected={selected === chain.id}
+                        chain="intents"
+                        label={`${appName} account`}
+                        isSelected={selected === 'intents'}
+                        isFocused={focus}
+                        icon={appIcon}
                         onMsg={(msg) => {
                           switch (msg.type) {
                             case 'on_click_chain':
@@ -162,6 +140,37 @@ export const ChainsDropdown = ({
                           }
                         }}
                       />
+                    )}
+                  </MenuItem>
+                )}
+
+                {!!chains.length &&
+                  !!(chains.length > 1 || hasIntentsAccountMenuItem) && (
+                    <Hr className="shrink-0 my-sw-sm bg-sw-gray-700" />
+                  )}
+
+                {chains.map((chain) => {
+                  return (
+                    <MenuItem key={chain.id}>
+                      {({ focus }) => (
+                        <ChainItem
+                          chain={chain.id}
+                          label={chain.label}
+                          icon={CHAINS_LIST[chain.id].icon}
+                          isSelected={selected === chain.id}
+                          isFocused={focus}
+                          onMsg={(msg) => {
+                            switch (msg.type) {
+                              case 'on_click_chain':
+                                close();
+                                onMsg(msg);
+                                break;
+                              default:
+                                notReachable(msg.type, { throwError: false });
+                            }
+                          }}
+                        />
+                      )}
                     </MenuItem>
                   );
                 })}

package/src/features/TokensModal.tsx

@@ -12,6 +12,7 @@ import { CloseButton } from '@/components/CloseButton';
 
 import { cn } from '@/utils/cn';
 import { useConfig } from '@/config';
+import { useHandleKeyDown } from '@/hooks';
 import { useUnsafeSnapshot } from '@/machine/snap';
 import { notReachable } from '@/utils/notReachable';
 import { useTypedTranslation } from '@/localisation';
@@ -48,6 +49,10 @@ export const TokensModal = ({
   const [search, setSearch] = useState('');
   const chains = useChains(variant);
 
+  const handleClose = () => onMsg({ type: 'on_dismiss_tokens_modal' });
+
+  useHandleKeyDown('Escape', handleClose);
+
   // If there is only one chain available, select it by default
   const defaultChain =
     chains.length === 1 && chains[0]?.id ? chains[0]?.id : 'all';
@@ -72,9 +77,7 @@ export const TokensModal = ({
       )}>
       <header className="flex items-center justify-between">
         <h2 className="text-sw-label-lg text-sw-gray-50">Select token</h2>
-        <CloseButton
-          onClick={() => onMsg({ type: 'on_dismiss_tokens_modal' })}
-        />
+        <CloseButton onClick={handleClose} />
       </header>
 
       <div className="gap-sw-xl flex items-center">

package/src/features/WalletCompatibilityCheck/WalletCompatibilityModal.tsx

@@ -13,6 +13,7 @@ import { useEffect } from 'react';
 import { useTypedTranslation } from '@/localisation';
 
 import { cn } from '@/utils';
+import { useHandleKeyDown } from '@/hooks';
 import { Button, Card, CloseButton } from '@/components';
 
 type Msg = { type: 'on_close' | 'on_check_compatibility' | 'on_sign_out' };
@@ -58,15 +59,16 @@ const FakeButton = ({
 
 export const Initial = ({ isSigned, isSigning, onMsg }: Props) => {
   const { t } = useTypedTranslation();
+  const handleClose = () => onMsg({ type: 'on_close' });
+
+  useHandleKeyDown('Escape', handleClose);
 
   const showTimer = useTimer({
     endTime: 0,
     autostart: false,
     timerType: 'DECREMENTAL',
     initialTime: 7,
-    onTimeOver: () => {
-      onMsg({ type: 'on_close' });
-    },
+    onTimeOver: handleClose,
   });
 
   useEffect(() => {
@@ -80,7 +82,7 @@ export const Initial = ({ isSigned, isSigning, onMsg }: Props) => {
   return (
     <Card className="relative w-full gap-sw-2xl flex flex-col">
       <CloseButton
-        onClick={() => onMsg({ type: 'on_close' })}
+        onClick={handleClose}
         className="absolute top-sw-2xl right-sw-2xl"
       />
       <ArmingCountdownFill size={48} className="text-sw-status-warning" />
@@ -176,11 +178,14 @@ interface ErrorProps {
 
 export const ErrorView = ({ onMsg }: ErrorProps) => {
   const { t } = useTypedTranslation();
+  const handleClose = () => onMsg({ type: 'on_close' });
+
+  useHandleKeyDown('Escape', handleClose);
 
   return (
     <Card className="relative w-full gap-sw-2xl flex flex-col">
       <CloseButton
-        onClick={() => onMsg({ type: 'on_close' })}
+        onClick={handleClose}
         className="absolute top-sw-2xl right-sw-2xl"
       />
       <GppBadFill size={48} className="text-sw-status-error" />

package/src/hooks/index.ts

@@ -16,3 +16,4 @@ export { useWalletBalance } from './useWalletBalance';
 export { useExternalDepositStatus } from './useExternalDepositStatus';
 export { useIsCompatibilityCheckRequired } from './useIsCompatibilityCheckRequired';
 export { useToggleTheme } from './useToggleTheme';
+export { useHandleKeyDown } from './useHandleKeyDown';

package/src/hooks/useHandleKeyDown.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+export const useHandleKeyDown = (key: string, onKeyPress: () => void) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === key) {
+        onKeyPress();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [key]);
+};