@openocean.finance/widget 1.0.0

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -0,0 +1,173 @@
+import {
+  ContentCopyRounded,
+  MoreHoriz,
+  OpenInNewRounded,
+  Wallet,
+} from '@mui/icons-material'
+import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
+import type { Account } from '@openocean.finance/wallet-management'
+import { useAccount } from '@openocean.finance/wallet-management'
+import { useId, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'
+import { ListItem } from '../../components/ListItem/ListItem.js'
+import { ListItemButton } from '../../components/ListItem/ListItemButton.js'
+import { Menu } from '../../components/Menu.js'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { EmptyListIndicator } from './EmptyListIndicator.js'
+import {
+  ListContainer,
+  OptionsMenuButton,
+  SendToWalletPageContainer,
+} from './SendToWalletPage.style.js'
+
+export const ConnectedWalletsPage = () => {
+  const { t } = useTranslation()
+  const [selectedAccount, setSelectedAccount] = useState<Account>()
+  const { accounts } = useAccount()
+  const { setSelectedBookmark } = useBookmarkActions()
+  const { requiredToChainType } = useToAddressRequirements()
+  const navigate = useNavigate()
+  const { setFieldValue } = useFieldActions()
+  const { setSendToWallet } = useSendToWalletActions()
+  const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>()
+  const moreMenuId = useId()
+  const open = Boolean(moreMenuAnchorEl)
+  const { getAddressLink } = useExplorer()
+
+  useHeader(t('sendToWallet.connectedWallets'))
+
+  const handleWalletSelected = (account: Account) => {
+    setFieldValue('toAddress', account.address!, {
+      isTouched: true,
+      isDirty: true,
+    })
+    setSelectedBookmark({
+      name: account.connector?.name,
+      address: account.address!,
+      chainType: account.chainType!,
+      isConnectedAccount: true,
+    })
+    setSendToWallet(true)
+    navigate('../../', {
+      relative: 'path',
+      replace: true,
+    })
+  }
+
+  const closeMenu = () => {
+    setMenuAnchorEl(null)
+  }
+
+  const handleMenuOpen = (el: HTMLElement, connectedWallet: Account) => {
+    setMenuAnchorEl(el)
+    setSelectedAccount(connectedWallet)
+  }
+
+  const handleCopyAddress = () => {
+    if (selectedAccount?.address) {
+      navigator.clipboard.writeText(selectedAccount.address)
+    }
+    closeMenu()
+  }
+
+  const handleViewOnExplorer = () => {
+    if (selectedAccount?.chainId) {
+      if (selectedAccount.address) {
+        window.open(
+          getAddressLink(selectedAccount.address, selectedAccount.chainId),
+          '_blank'
+        )
+      }
+    }
+    closeMenu()
+  }
+
+  return (
+    <SendToWalletPageContainer disableGutters>
+      <ListContainer>
+        {accounts.map((account) => {
+          const walletAddress = shortenAddress(account.address)
+
+          return (
+            <ListItem key={account.address} sx={{ position: 'relative' }}>
+              <ListItemButton
+                onClick={() => handleWalletSelected(account)}
+                disabled={
+                  requiredToChainType &&
+                  requiredToChainType !== account.chainType
+                }
+              >
+                <ListItemAvatar>
+                  <AccountAvatar chainId={account.chainId} account={account} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={account.connector?.name}
+                  secondary={walletAddress}
+                />
+              </ListItemButton>
+              <OptionsMenuButton
+                aria-label={t('button.options')}
+                aria-controls={
+                  open && account.address === selectedAccount?.address
+                    ? moreMenuId
+                    : undefined
+                }
+                aria-haspopup="true"
+                aria-expanded={open ? 'true' : undefined}
+                onClick={(e) =>
+                  handleMenuOpen(e.target as HTMLElement, account)
+                }
+                sx={{
+                  opacity:
+                    requiredToChainType &&
+                    requiredToChainType !== account.chainType
+                      ? 0.5
+                      : 1,
+                }}
+              >
+                <MoreHoriz fontSize="small" />
+              </OptionsMenuButton>
+            </ListItem>
+          )
+        })}
+        {!accounts.length && (
+          <EmptyListIndicator icon={<Wallet sx={{ fontSize: 48 }} />}>
+            {t('sendToWallet.noConnectedWallets')}
+          </EmptyListIndicator>
+        )}
+        <Menu
+          id={moreMenuId}
+          elevation={0}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          anchorEl={moreMenuAnchorEl}
+          open={open}
+          onClose={closeMenu}
+        >
+          <MenuItem onClick={handleCopyAddress}>
+            <ContentCopyRounded />
+            {t('button.copyAddress')}
+          </MenuItem>
+          <MenuItem onClick={handleViewOnExplorer}>
+            <OpenInNewRounded />
+            {t('button.viewOnExplorer')}
+          </MenuItem>
+        </Menu>
+      </ListContainer>
+    </SendToWalletPageContainer>
+  )
+}

package/src/pages/SendToWallet/EmptyListIndicator.tsx

@@ -0,0 +1,24 @@
+import { Typography } from '@mui/material'
+import type { PropsWithChildren, ReactNode } from 'react'
+import { EmptyContainer, IconContainer } from './SendToWalletPage.style.js'
+
+interface EmptyListIndicatorProps extends PropsWithChildren {
+  icon: ReactNode
+}
+export const EmptyListIndicator = ({
+  icon,
+  children,
+}: EmptyListIndicatorProps) => (
+  <EmptyContainer>
+    <IconContainer>{icon}</IconContainer>
+    <Typography
+      sx={{
+        fontSize: 14,
+        fontWeight: 700,
+        color: 'text.secondary',
+      }}
+    >
+      {children}
+    </Typography>
+  </EmptyContainer>
+)

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -0,0 +1,222 @@
+import {
+  ContentCopyRounded,
+  DeleteOutline,
+  History,
+  MoreHoriz,
+  OpenInNewRounded,
+  TurnedInNot,
+} from '@mui/icons-material'
+import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
+import { useId, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { ListItem } from '../../components/ListItem/ListItem.js'
+import { ListItemButton } from '../../components/ListItem/ListItemButton.js'
+import { Menu } from '../../components/Menu.js'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import type { Bookmark } from '../../stores/bookmarks/types.js'
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
+import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
+import { defaultChainIdsByType } from '../../utils/chainType.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'
+import { EmptyListIndicator } from './EmptyListIndicator.js'
+import {
+  ListContainer,
+  OptionsMenuButton,
+  SendToWalletPageContainer,
+} from './SendToWalletPage.style.js'
+
+export const RecentWalletsPage = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const [selectedRecent, setSelectedRecent] = useState<Bookmark>()
+  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)
+  const { recentWallets } = useBookmarks()
+  const { requiredToChainType } = useToAddressRequirements()
+  const {
+    removeRecentWallet,
+    addBookmark,
+    setSelectedBookmark,
+    addRecentWallet,
+  } = useBookmarkActions()
+  const { setFieldValue } = useFieldActions()
+  const { setSendToWallet } = useSendToWalletActions()
+  const moreMenuId = useId()
+  const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>()
+  const open = Boolean(moreMenuAnchorEl)
+  const { getAddressLink } = useExplorer()
+
+  useHeader(t('header.recentWallets'))
+
+  const handleRecentSelected = (recentWallet: Bookmark) => {
+    addRecentWallet(recentWallet)
+    setFieldValue('toAddress', recentWallet.address, {
+      isTouched: true,
+      isDirty: true,
+    })
+    setSelectedBookmark(recentWallet)
+    setSendToWallet(true)
+    navigate('../../', {
+      relative: 'path',
+      replace: true,
+    })
+  }
+
+  const handleAddBookmark = (bookmark: Bookmark) => {
+    addBookmark(bookmark)
+    navigate(`../${navigationRoutes.bookmarks}`, {
+      relative: 'path',
+      replace: true,
+    })
+  }
+
+  const closeMenu = () => {
+    setMenuAnchorEl(null)
+  }
+
+  const handleMenuOpen = (el: HTMLElement, recentWallet: Bookmark) => {
+    setMenuAnchorEl(el)
+    setSelectedRecent(recentWallet)
+  }
+
+  const handleCopyAddress = () => {
+    if (selectedRecent) {
+      navigator.clipboard.writeText(selectedRecent.address)
+    }
+    closeMenu()
+  }
+
+  const handleViewOnExplorer = () => {
+    if (selectedRecent) {
+      window.open(
+        getAddressLink(
+          selectedRecent.address,
+          defaultChainIdsByType[selectedRecent.chainType]
+        ),
+        '_blank'
+      )
+    }
+    closeMenu()
+  }
+
+  const handleOpenBookmarkSheet = () => {
+    if (selectedRecent) {
+      setSelectedRecent(selectedRecent)
+      bookmarkAddressSheetRef.current?.open()
+    }
+    closeMenu()
+  }
+
+  const handleRemoveRecentWallet = () => {
+    if (selectedRecent) {
+      removeRecentWallet(selectedRecent.address)
+    }
+    closeMenu()
+  }
+
+  return (
+    <SendToWalletPageContainer disableGutters>
+      <ListContainer>
+        {recentWallets.map((recentWallet) => (
+          <ListItem key={recentWallet.address} sx={{ position: 'relative' }}>
+            <ListItemButton
+              disabled={
+                requiredToChainType &&
+                requiredToChainType !== recentWallet.chainType
+              }
+              onClick={() => handleRecentSelected(recentWallet)}
+            >
+              <ListItemAvatar>
+                <AccountAvatar
+                  chainId={defaultChainIdsByType[recentWallet.chainType]}
+                />
+              </ListItemAvatar>
+              <ListItemText
+                primary={
+                  recentWallet.name || shortenAddress(recentWallet.address)
+                }
+                secondary={
+                  recentWallet.name
+                    ? shortenAddress(recentWallet.address)
+                    : undefined
+                }
+              />
+            </ListItemButton>
+            <OptionsMenuButton
+              aria-label={t('button.options')}
+              aria-controls={
+                open && recentWallet.address === selectedRecent?.address
+                  ? moreMenuId
+                  : undefined
+              }
+              aria-haspopup="true"
+              aria-expanded={open ? 'true' : undefined}
+              onClick={(e) =>
+                handleMenuOpen(e.target as HTMLElement, recentWallet)
+              }
+              sx={{
+                opacity:
+                  requiredToChainType &&
+                  requiredToChainType !== recentWallet.chainType
+                    ? 0.5
+                    : 1,
+              }}
+            >
+              <MoreHoriz fontSize="small" />
+            </OptionsMenuButton>
+          </ListItem>
+        ))}
+        {!recentWallets.length && (
+          <EmptyListIndicator icon={<History sx={{ fontSize: 48 }} />}>
+            {t('sendToWallet.noRecentWallets')}
+          </EmptyListIndicator>
+        )}
+        <Menu
+          id={moreMenuId}
+          elevation={0}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          anchorEl={moreMenuAnchorEl}
+          open={open}
+          onClose={closeMenu}
+        >
+          <MenuItem onClick={handleCopyAddress}>
+            <ContentCopyRounded />
+            {t('button.copyAddress')}
+          </MenuItem>
+          <MenuItem onClick={handleViewOnExplorer}>
+            <OpenInNewRounded />
+            {t('button.viewOnExplorer')}
+          </MenuItem>
+          <MenuItem onClick={handleOpenBookmarkSheet}>
+            <TurnedInNot />
+            {t('button.bookmark')}
+          </MenuItem>
+          <MenuItem onClick={handleRemoveRecentWallet}>
+            <DeleteOutline />
+            {t('button.delete')}
+          </MenuItem>
+        </Menu>
+      </ListContainer>
+      <BookmarkAddressSheet
+        ref={bookmarkAddressSheetRef}
+        validatedWallet={selectedRecent}
+        onAddBookmark={handleAddBookmark}
+      />
+    </SendToWalletPageContainer>
+  )
+}

package/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -0,0 +1,158 @@
+import {
+  ContentCopyRounded,
+  MoreHoriz,
+  OpenInNewRounded,
+} from '@mui/icons-material'
+import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
+import { useId, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'
+import { ListItem } from '../../components/ListItem/ListItem.js'
+import { ListItemButton } from '../../components/ListItem/ListItemButton.js'
+import { Menu } from '../../components/Menu.js'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import type { ToAddress } from '../../types/widget.js'
+import { defaultChainIdsByType } from '../../utils/chainType.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import {
+  ListContainer,
+  OptionsMenuButton,
+  SendToWalletPageContainer,
+} from './SendToWalletPage.style.js'
+
+export const SendToConfiguredWalletPage = () => {
+  const { t } = useTranslation()
+  const { navigateBack } = useNavigateBack()
+  const { toAddresses } = useWidgetConfig()
+  const [selectedToAddress, setSelectedToAddress] = useState<ToAddress>()
+  const { requiredToChainType } = useToAddressRequirements()
+  const { setSelectedBookmark } = useBookmarkActions()
+  const { setFieldValue } = useFieldActions()
+  const moreMenuId = useId()
+  const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>()
+  const open = Boolean(moreMenuAnchorEl)
+  const { getAddressLink } = useExplorer()
+
+  useHeader(t('header.sendToWallet'))
+
+  const handleCuratedSelected = (toAddress: ToAddress) => {
+    setSelectedBookmark(toAddress)
+    setFieldValue('toAddress', toAddress.address, {
+      isTouched: true,
+      isDirty: true,
+    })
+    navigateBack()
+  }
+
+  const closeMenu = () => {
+    setMenuAnchorEl(null)
+  }
+
+  const handleMenuOpen = (el: HTMLElement, toAddress: ToAddress) => {
+    setMenuAnchorEl(el)
+    setSelectedToAddress(toAddress)
+  }
+
+  const handleCopyAddress = () => {
+    if (selectedToAddress) {
+      navigator.clipboard.writeText(selectedToAddress.address)
+    }
+    closeMenu()
+  }
+
+  const handleViewOnExplorer = () => {
+    if (selectedToAddress) {
+      window.open(
+        getAddressLink(
+          selectedToAddress.address,
+          defaultChainIdsByType[selectedToAddress.chainType]
+        ),
+        '_blank'
+      )
+    }
+    closeMenu()
+  }
+
+  return (
+    <SendToWalletPageContainer disableGutters>
+      <ListContainer sx={{ minHeight: 418 }}>
+        {toAddresses?.map((toAddress) => (
+          <ListItem key={toAddress.address} sx={{ position: 'relative' }}>
+            <ListItemButton
+              disabled={
+                requiredToChainType &&
+                requiredToChainType !== toAddress.chainType
+              }
+              onClick={() => handleCuratedSelected(toAddress)}
+            >
+              <ListItemAvatar>
+                <AccountAvatar
+                  chainId={defaultChainIdsByType[toAddress.chainType]}
+                  toAddress={toAddress}
+                />
+              </ListItemAvatar>
+              <ListItemText
+                primary={toAddress.name || shortenAddress(toAddress.address)}
+                secondary={
+                  toAddress.name ? shortenAddress(toAddress.address) : undefined
+                }
+              />
+            </ListItemButton>
+            <OptionsMenuButton
+              aria-label={t('button.options')}
+              aria-controls={
+                open && toAddress.address === selectedToAddress?.address
+                  ? moreMenuId
+                  : undefined
+              }
+              aria-haspopup="true"
+              aria-expanded={open ? 'true' : undefined}
+              onClick={(e) =>
+                handleMenuOpen(e.target as HTMLElement, toAddress)
+              }
+              sx={{
+                opacity:
+                  requiredToChainType &&
+                  requiredToChainType !== toAddress.chainType
+                    ? 0.5
+                    : 1,
+              }}
+            >
+              <MoreHoriz fontSize="small" />
+            </OptionsMenuButton>
+          </ListItem>
+        ))}
+        <Menu
+          id={moreMenuId}
+          elevation={0}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          anchorEl={moreMenuAnchorEl}
+          open={open}
+          onClose={closeMenu}
+        >
+          <MenuItem onClick={handleCopyAddress}>
+            <ContentCopyRounded />
+            {t('button.copyAddress')}
+          </MenuItem>
+          <MenuItem onClick={handleViewOnExplorer}>
+            <OpenInNewRounded />
+            {t('button.viewOnExplorer')}
+          </MenuItem>
+        </Menu>
+      </ListContainer>
+    </SendToWalletPageContainer>
+  )
+}