@openocean.finance/widget 1.0.0

package/src/components/Search/SearchNotFound.style.tsx

@@ -0,0 +1,36 @@
+import type { BoxProps } from '@mui/material'
+import { Box, Typography, styled } from '@mui/material'
+import { searchContainerHeight } from './SearchInput.style.js'
+
+interface NotFoundContainerProps extends BoxProps {
+  adjustForStickySearchInput?: boolean
+}
+
+export const NotFoundContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'adjustForStickySearchInput',
+})<NotFoundContainerProps>(({ theme, adjustForStickySearchInput }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+  flex: 1,
+  padding: theme.spacing(3),
+  ...(adjustForStickySearchInput && theme.header?.position === 'fixed'
+    ? { paddingTop: `calc(${searchContainerHeight}px + ${theme.spacing(3)})` }
+    : {}),
+}))
+
+export const NotFoundMessage = styled(Typography)(({ theme }) => ({
+  fontSize: 14,
+  color: theme.palette.text.secondary,
+  textAlign: 'center',
+  flex: 1,
+  marginTop: theme.spacing(2),
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+}))
+
+export const NotFoundIconContainer = styled(Typography)(() => ({
+  fontSize: 48,
+  lineHeight: 1,
+}))

package/src/components/Search/SearchNotFound.tsx

@@ -0,0 +1,23 @@
+import { SearchOff } from '@mui/icons-material'
+import {
+  NotFoundContainer,
+  NotFoundIconContainer,
+  NotFoundMessage,
+} from './SearchNotFound.style.js'
+
+interface SearchNotFoundProps {
+  message: string
+  adjustForStickySearchInput?: boolean
+}
+
+export const SearchNotFound = ({
+  message,
+  adjustForStickySearchInput,
+}: SearchNotFoundProps) => (
+  <NotFoundContainer adjustForStickySearchInput={adjustForStickySearchInput}>
+    <NotFoundIconContainer>
+      <SearchOff fontSize="inherit" />
+    </NotFoundIconContainer>
+    <NotFoundMessage>{message}</NotFoundMessage>
+  </NotFoundContainer>
+)

package/src/components/Select.tsx

@@ -0,0 +1,42 @@
+import {
+  Select as MuiSelect,
+  inputBaseClasses,
+  listItemIconClasses,
+  outlinedInputClasses,
+  selectClasses,
+  styled,
+} from '@mui/material'
+
+export const Select = styled(MuiSelect, {
+  shouldForwardProp: (prop) => prop !== 'dense',
+})<{ dense?: boolean }>(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  [`.${inputBaseClasses.input}`]: {
+    padding: theme.spacing(2),
+    display: 'flex',
+    alignItems: 'center',
+  },
+  [`.${selectClasses.icon}`]: {
+    right: 10,
+    color: theme.palette.text.primary,
+  },
+  [`.${listItemIconClasses.root}`]: {
+    minWidth: 38,
+  },
+  [`.${outlinedInputClasses.notchedOutline}`]: {
+    display: 'none',
+  },
+  ...theme.applyStyles('light', {
+    backgroundColor: theme.palette.common.white,
+  }),
+  variants: [
+    {
+      props: ({ dense }) => dense,
+      style: {
+        [`.${inputBaseClasses.input}`]: {
+          padding: theme.spacing(1.625, 2, 1.5, 2),
+        },
+      },
+    },
+  ],
+}))

package/src/components/SelectChainAndToken.tsx

@@ -0,0 +1,53 @@
+import type { BoxProps, Theme } from '@mui/material'
+import { Box, useMediaQuery } from '@mui/material'
+import { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'
+import { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { DisabledUI, HiddenUI } from '../types/widget.js'
+import { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'
+
+export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
+  const prefersNarrowView = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down('sm')
+  )
+  const { disabledUI, hiddenUI, subvariant } = useWidgetConfig()
+
+  const [fromChain, toChain, fromToken, toToken] = useFieldValues(
+    'fromChain',
+    'toChain',
+    'fromToken',
+    'toToken'
+  )
+
+  const hiddenReverse =
+    subvariant === 'refuel' ||
+    disabledUI?.includes(DisabledUI.FromToken) ||
+    disabledUI?.includes(DisabledUI.ToToken) ||
+    hiddenUI?.includes(HiddenUI.ToToken) ||
+    hiddenUI?.includes(HiddenUI.ReverseTokensButton)
+
+  const hiddenToToken =
+    subvariant === 'custom' || hiddenUI?.includes(HiddenUI.ToToken)
+
+  const isCompact = false
+
+  return (
+    <Box
+      sx={{ display: 'flex', flexDirection: isCompact ? 'row' : 'column' }}
+      {...props}
+    >
+      <SelectTokenButton formType="from" compact={isCompact} />
+      {!hiddenToToken ? (
+        !hiddenReverse ? (
+          <ReverseTokensButton vertical={!isCompact} />
+        ) : (
+          <ReverseTokensButtonEmpty />
+        )
+      ) : null}
+      {!hiddenToToken ? (
+        <SelectTokenButton formType="to" compact={isCompact} />
+      ) : null}
+    </Box>
+  )
+}

package/src/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -0,0 +1,114 @@
+import {
+  CardContent as MuiCardContent,
+  cardHeaderClasses,
+  darken,
+  lighten,
+  styled,
+} from '@mui/material'
+import type { FormType } from '../../stores/form/types.js'
+import { Card } from '../Card/Card.js'
+import { CardHeader } from '../Card/CardHeader.js'
+
+export const SelectTokenCardHeader = styled(CardHeader, {
+  shouldForwardProp: (prop) =>
+    !['selected', 'compact'].includes(prop as string),
+})<{ selected?: boolean; compact?: boolean }>(
+  ({ theme, selected, compact }) => ({
+    padding: theme.spacing(2),
+    [`.${cardHeaderClasses.title}`]: {
+      color: theme.palette.text.secondary,
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      // width: 256,
+      fontSize: compact && !selected ? 16 : 18,
+      fontWeight: 500,
+      [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
+        // width: 224,
+      },
+    },
+    [`.${cardHeaderClasses.subheader}`]: {
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      // width: 256,
+      [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
+        // width: 224,
+      },
+    },
+    variants: [
+      {
+        props: ({ selected }) => selected,
+        style: {
+          [`.${cardHeaderClasses.title}`]: {
+            color: theme.palette.text.primary,
+            fontWeight: 600,
+          },
+        },
+      },
+      {
+        props: ({ compact }) => compact,
+        style: {
+          [`.${cardHeaderClasses.title}`]: {
+            width: 96,
+            [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
+              width: 96,
+            },
+          },
+          [`.${cardHeaderClasses.subheader}`]: {
+            width: 96,
+            [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
+              width: 96,
+            },
+          },
+        },
+      },
+    ],
+  })
+)
+
+export const SelectTokenCard = styled(Card)(({ theme }) => {
+  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
+  return {
+    flex: 1,
+    ...(cardVariant !== 'outlined' && {
+      background: 'none',
+      '&:hover': {
+        cursor: 'pointer',
+        background: 'none',
+      },
+    }),
+  }
+})
+
+export const CardContent = styled(MuiCardContent, {
+  shouldForwardProp: (prop) => prop !== 'formType' && prop !== 'compact',
+})<{ formType: FormType; compact: boolean }>(({ theme, formType, compact }) => {
+  const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
+  const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'
+  const horizontal = compact ? direction : '50%'
+  const vertical = compact ? '50%' : direction
+  return {
+    padding: 0,
+    transition: theme.transitions.create(['background-color'], {
+      duration: theme.transitions.duration.enteringScreen,
+      easing: theme.transitions.easing.easeOut,
+    }),
+    '&:last-child': {
+      paddingBottom: 0,
+    },
+    ...(cardVariant !== 'outlined' && {
+      backgroundColor: theme.palette.background.paper,
+      mask: `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`,
+    }),
+    ...(cardVariant === 'filled' && {
+      '&:hover': {
+        cursor: 'pointer',
+        backgroundColor:
+          theme.palette.mode === 'light'
+            ? darken(theme.palette.background.paper, 0.02)
+            : lighten(theme.palette.background.paper, 0.02),
+      },
+    }),
+  }
+})

package/src/components/SelectTokenButton/SelectTokenButton.tsx

@@ -0,0 +1,112 @@
+import { Skeleton, Box } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { useChain } from '../../hooks/useChain.js'
+import { useSwapOnly } from '../../hooks/useSwapOnly.js'
+import { useToken } from '../../hooks/useToken.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js'
+import { TokenAvatar } from '../Avatar/TokenAvatar.js'
+import { CardTitle } from '../Card/CardTitle.js'
+import { AmountInput } from '../AmountInput/AmountInput.js'
+
+import {
+  CardContent,
+  SelectTokenCard,
+  SelectTokenCardHeader,
+} from './SelectTokenButton.style.js'
+
+export const SelectTokenButton: React.FC<
+  FormTypeProps & {
+    compact: boolean
+  }
+> = ({ formType, compact }) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { disabledUI, subvariant } = useWidgetConfig()
+  const swapOnly = useSwapOnly()
+  const tokenKey = FormKeyHelper.getTokenKey(formType)
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    tokenKey
+  )
+  const { chain, isLoading: isChainLoading } = useChain(chainId)
+  const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress)
+
+  const handleClick = () => {
+    navigate(
+      formType === 'from'
+        ? navigationRoutes.fromToken
+        : subvariant === 'refuel'
+          ? navigationRoutes.toTokenNative
+          : navigationRoutes.toToken
+    )
+  }
+
+  const isSelected = !!(chain && token)
+  const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined
+  const defaultPlaceholder =
+    formType === 'to' && subvariant === 'refuel'
+      ? t('main.selectChain')
+      : formType === 'to' && swapOnly
+        ? t('main.selectToken')
+        : t('main.selectChainAndToken')
+  const cardTitle: string =
+    formType === 'from' && subvariant === 'custom'
+      ? t('header.payWith')
+      : t(`main.${formType}`)
+  return (
+    <SelectTokenCard component="div">
+      <CardContent formType={formType} compact={compact}>
+        <CardTitle>{cardTitle}</CardTitle>
+        <Box sx={{ display: 'flex', flexDirection: 'row' }}>
+          <Box flex={1} display="flex" alignItems="center" justifyContent="start">
+            {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (
+                <SelectTokenCardHeader
+                  sx={{ width: '50%' }}
+                  onClick={onClick}
+                  avatar={<AvatarBadgedSkeleton />}
+                  title={<Skeleton variant="text" width={64} height={24} />}
+                  subheader={<Skeleton variant="text" width={72} height={16} />}
+                  compact={compact}
+                />
+              ) : (
+                <SelectTokenCardHeader
+                  sx={{ width: '50%' }}
+                  onClick={onClick}
+                  avatar={
+                    isSelected ? (
+                      <TokenAvatar token={token} chain={chain} />
+                    ) : (
+                      <AvatarBadgedDefault />
+                    )
+                  }
+                  title={isSelected ? token.symbol : defaultPlaceholder}
+                  titleTypographyProps={{
+                    title: isSelected ? token.symbol : defaultPlaceholder,
+                  }}
+                  subheader={isSelected ? chain.name : null}
+                  subheaderTypographyProps={
+                    isSelected
+                      ? {
+                          title: chain.name,
+                        }
+                      : undefined
+                  }
+                  selected={isSelected}
+                  compact={compact}
+                />
+              )}
+          </Box>
+          <Box flex={1} display="flex" alignItems="center" justifyContent="end">
+            <AmountInput sx={{ width: '50%' }} formType={formType} />
+          </Box>
+        </Box>
+      </CardContent>
+    </SelectTokenCard>
+  )
+}

package/src/components/SelectTokenButton.tsx

@@ -0,0 +1,20 @@
+import { styled } from '@mui/material/styles'
+import { Card } from './Card/Card.js'
+import { ReactNode } from 'react'
+
+const StyledCard = styled(Card)`
+  // ... existing styles ...
+`
+
+interface SelectTokenButtonProps {
+  children: ReactNode
+  [key: string]: any
+}
+
+export const SelectTokenButton = ({ children, ...props }: SelectTokenButtonProps) => {
+  return (
+    <StyledCard as="div" {...props}>
+      {children}
+    </StyledCard>
+  )
+} 

package/src/components/SendToWallet/SendToWallet.style.tsx

@@ -0,0 +1,55 @@
+import { cardHeaderClasses, styled } from '@mui/material'
+import { CardHeader } from '../Card/CardHeader.js'
+
+export const SendToWalletCardHeader = styled(CardHeader, {
+  shouldForwardProp: (prop) => !['selected'].includes(prop as string),
+})<{ selected?: boolean }>(({ theme }) => ({
+  width: '100%',
+  [`.${cardHeaderClasses.title}`]: {
+    color: theme.palette.text.secondary,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    fontWeight: 500,
+    width: 254,
+    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
+      width: 224,
+    },
+  },
+  [`.${cardHeaderClasses.subheader}`]: {
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    width: 254,
+    [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
+      width: 224,
+    },
+  },
+  [`.${cardHeaderClasses.action}`]: {
+    marginRight: 0,
+  },
+  [`.${cardHeaderClasses.action} > button`]: {
+    fontSize: 16,
+  },
+  variants: [
+    {
+      props: ({ selected }) => selected,
+      style: {
+        [`.${cardHeaderClasses.title}`]: {
+          color: theme.palette.text.primary,
+          fontWeight: 600,
+          width: 224,
+          [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
+            width: 192,
+          },
+        },
+        [`.${cardHeaderClasses.subheader}`]: {
+          width: 224,
+          [theme.breakpoints.down(theme.breakpoints.values.sm)]: {
+            width: 192,
+          },
+        },
+      },
+    },
+  ],
+}))

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -0,0 +1,174 @@
+import { CloseRounded } from '@mui/icons-material'
+import { Box, Collapse } from '@mui/material'
+import { useAccount } from '@openocean.finance/wallet-management'
+import { type MouseEventHandler, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
+import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js'
+import { DisabledUI, HiddenUI } from '../../types/widget.js'
+import {
+  defaultChainIdsByType,
+  getChainTypeFromAddress,
+} from '../../utils/chainType.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { AccountAvatar } from '../Avatar/AccountAvatar.js'
+import type { CardProps } from '../Card/Card.js'
+import { Card } from '../Card/Card.js'
+import { CardIconButton } from '../Card/CardIconButton.js'
+import { CardTitle } from '../Card/CardTitle.js'
+import { SendToWalletCardHeader } from './SendToWallet.style.js'
+
+export const SendToWalletButton: React.FC<CardProps> = (props) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const {
+    disabledUI,
+    hiddenUI,
+    toAddress,
+    toAddresses,
+    subvariant,
+    subvariantOptions,
+  } = useWidgetConfig()
+  const { showSendToWallet } = useSendToWalletStore()
+  const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(
+    'toAddress',
+    'toChain',
+    'toToken'
+  )
+  const { setFieldValue } = useFieldActions()
+  const { selectedBookmark } = useBookmarks()
+  const { setSelectedBookmark } = useBookmarkActions()
+  const { accounts } = useAccount()
+  const { requiredToAddress } = useToAddressRequirements()
+  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)
+  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)
+
+  const address = toAddressFieldValue
+    ? shortenAddress(toAddressFieldValue)
+    : t('sendToWallet.enterAddress', {
+        context: 'short',
+      })
+
+  const matchingConnectedAccount = accounts.find(
+    (account) => account.address === toAddressFieldValue
+  )
+
+  const chainType = !matchingConnectedAccount
+    ? selectedBookmark?.chainType ||
+      (toAddressFieldValue
+        ? getChainTypeFromAddress(toAddressFieldValue)
+        : undefined)
+    : undefined
+
+  const chainId =
+    toChainId && toTokenAddress
+      ? toChainId
+      : matchingConnectedAccount
+        ? matchingConnectedAccount.chainId
+        : chainType
+          ? defaultChainIdsByType[chainType]
+          : undefined
+
+  const isConnectedAccount =
+    selectedBookmark?.isConnectedAccount &&
+    matchingConnectedAccount?.isConnected
+  const connectedAccountName = matchingConnectedAccount?.connector?.name
+  const bookmarkName = selectedBookmark?.name
+
+  const headerTitle = isConnectedAccount
+    ? connectedAccountName || address
+    : bookmarkName || connectedAccountName || address
+
+  const headerSubheader =
+    isConnectedAccount || bookmarkName || connectedAccountName ? address : null
+
+  const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress
+
+  const handleOnClick = () => {
+    navigate(
+      toAddresses?.length
+        ? navigationRoutes.configuredWallets
+        : navigationRoutes.sendToWallet
+    )
+  }
+
+  const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation()
+    setFieldValue('toAddress', '', { isTouched: true })
+    setSelectedBookmark()
+  }
+
+  // The collapse opens instantly on first page load/component mount when there is an address to display
+  // After which it needs an animated transition for open and closing.
+  // collapseTransitionTime is used specify the transition time for opening and closing
+  const collapseTransitionTime = useRef(0)
+
+  // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
+  useEffect(() => {
+    setTimeout(() => {
+      collapseTransitionTime.current = 225
+    }, 0)
+  }, [collapseTransitionTime])
+
+  const isOpenCollapse =
+    requiredToAddress || (showSendToWallet && !hiddenToAddress)
+
+  const title =
+    subvariant === 'custom' && subvariantOptions?.custom === 'deposit'
+      ? t('header.depositTo')
+      : t('header.sendToWallet')
+
+  return (
+    <Collapse
+      timeout={collapseTransitionTime.current}
+      in={isOpenCollapse}
+      mountOnEnter
+      unmountOnExit
+    >
+      <Card
+        // biome-ignore lint/a11y/useSemanticElements:
+        role="button"
+        onClick={disabledForChanges ? undefined : handleOnClick}
+        sx={{ width: '100%', ...props.sx }}
+      >
+        <CardTitle required={requiredToAddress}>{title}</CardTitle>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <SendToWalletCardHeader
+            avatar={
+              <AccountAvatar
+                chainId={chainId}
+                account={matchingConnectedAccount}
+                toAddress={toAddress}
+                empty={!toAddressFieldValue}
+              />
+            }
+            title={headerTitle}
+            subheader={headerSubheader}
+            selected={!!toAddressFieldValue || disabledToAddress}
+            action={
+              !!toAddressFieldValue && !disabledForChanges ? (
+                <CardIconButton onClick={clearSelectedBookmark} size="small">
+                  <CloseRounded fontSize="inherit" />
+                </CardIconButton>
+              ) : null
+            }
+          />
+        </Box>
+      </Card>
+    </Collapse>
+  )
+}

package/src/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -0,0 +1,58 @@
+import { Wallet } from '@mui/icons-material'
+import { Button, Tooltip } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js'
+import { WidgetEvent } from '../../types/events.js'
+import { DisabledUI, HiddenUI } from '../../types/widget.js'
+
+export const SendToWalletExpandButton: React.FC = () => {
+  const { t } = useTranslation()
+  const { disabledUI, hiddenUI } = useWidgetConfig()
+  const { setFieldValue } = useFieldActions()
+  const { setSelectedBookmark } = useBookmarkActions()
+  const emitter = useWidgetEvents()
+  const { showSendToWallet, setSendToWallet } = useSendToWalletStore()
+  const [toAddressFieldValue] = useFieldValues('toAddress')
+  const { requiredToAddress } = useToAddressRequirements()
+
+  if (requiredToAddress || hiddenUI?.includes(HiddenUI.ToAddress)) {
+    return null
+  }
+
+  const handleClick = () => {
+    if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
+      setFieldValue('toAddress', '', { isTouched: true })
+      setSelectedBookmark()
+    }
+    setSendToWallet(!showSendToWallet)
+    emitter.emit(
+      WidgetEvent.SendToWalletToggled,
+      useSendToWalletStore.getState().showSendToWallet
+    )
+  }
+
+  const buttonVariant =
+    showSendToWallet || Boolean(toAddressFieldValue) ? 'contained' : 'text'
+
+  return (
+    <Tooltip title={t('main.sendToWallet')} placement="bottom-end">
+      <Button
+        variant={buttonVariant}
+        onClick={handleClick}
+        sx={{
+          minWidth: 48,
+          width: 48,
+          height: 48,
+        }}
+      >
+        <Wallet />
+      </Button>
+    </Tooltip>
+  )
+}