@lifi/widget 0.0.0-preview-6cc63bac

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -0,0 +1,134 @@
+import { useAccount } from '@lifi/wallet-management'
+import type { Account } from '@lifi/widget-provider'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import Wallet from '@mui/icons-material/Wallet'
+import { List, ListItemAvatar, ListItemText } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import { type JSX, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'
+import { ContextMenu } from '../../components/ContextMenu.js'
+import { EmptyListIndicator } from '../../components/EmptyListIndicator/EmptyListIndicator.js'
+import { ListItem } from '../../components/ListItem/ListItem.js'
+import { ListItemButton } from '../../components/ListItem/ListItemButton.js'
+import { PageContainer } from '../../components/PageContainer.js'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useListHeight } from '../../hooks/useListHeight.js'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { shortenAddress } from '../../utils/wallet.js'
+
+export const ConnectedWalletsPage = (): JSX.Element => {
+  const { t } = useTranslation()
+  const { accounts } = useAccount()
+  const { setSelectedBookmark } = useBookmarkActions()
+  const { requiredToChainType } = useToAddressRequirements()
+  const navigate = useNavigate()
+  const { setFieldValue } = useFieldActions()
+  const { getAddressLink } = useExplorer()
+  const listParentRef = useRef<HTMLUListElement | null>(null)
+
+  useHeader(t('sendToWallet.connectedWallets'))
+
+  const { listHeight } = useListHeight({ listParentRef })
+
+  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,
+    })
+    navigate({
+      to: navigationRoutes.home,
+      replace: true,
+    })
+  }
+
+  return (
+    <PageContainer disableGutters>
+      <List
+        className="long-list"
+        ref={listParentRef}
+        style={{ height: listHeight, overflow: 'auto' }}
+        disablePadding
+        sx={{ paddingTop: 1.5 }}
+      >
+        {accounts.map((account) => {
+          const walletAddress = shortenAddress(account.address)
+          const menuItems = [
+            {
+              icon: <ContentCopyRounded />,
+              label: t('button.copyAddress'),
+              onClick: () => {
+                if (account.address) {
+                  navigator.clipboard.writeText(account.address)
+                }
+              },
+            },
+            ...(account.chainId
+              ? [
+                  {
+                    icon: <OpenInNewRounded />,
+                    label: t('button.viewOnExplorer'),
+                    onClick: () => {
+                      if (account.address) {
+                        window.open(
+                          getAddressLink(account.address, account.chainId),
+                          '_blank'
+                        )
+                      }
+                    },
+                  },
+                ]
+              : []),
+          ]
+
+          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>
+              <ContextMenu
+                items={menuItems}
+                disabled={
+                  !!(
+                    requiredToChainType &&
+                    requiredToChainType !== account.chainType
+                  )
+                }
+              />
+            </ListItem>
+          )
+        })}
+        {!accounts.length && (
+          <EmptyListIndicator
+            icon={<Wallet />}
+            title={t('sendToWallet.noConnectedWallets')}
+            message={t('sendToWallet.noConnectedWalletsMessage')}
+          />
+        )}
+      </List>
+    </PageContainer>
+  )
+}

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -0,0 +1,161 @@
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import DeleteOutline from '@mui/icons-material/DeleteOutlined'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import TurnedInNot from '@mui/icons-material/TurnedInNot'
+import { List, ListItemAvatar, ListItemText } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import { type JSX, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { ContextMenu } from '../../components/ContextMenu.js'
+import { EmptyListIndicator } from '../../components/EmptyListIndicator/EmptyListIndicator.js'
+import { ListItem } from '../../components/ListItem/ListItem.js'
+import { ListItemButton } from '../../components/ListItem/ListItemButton.js'
+import { PageContainer } from '../../components/PageContainer.js'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useListHeight } from '../../hooks/useListHeight.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 { defaultChainIdsByType } from '../../utils/chainType.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'
+
+export const RecentWalletsPage = (): JSX.Element => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const [bookmarkTarget, setBookmarkTarget] = useState<Bookmark>()
+  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)
+  const listParentRef = useRef<HTMLUListElement | null>(null)
+  const { recentWallets } = useBookmarks()
+  const { requiredToChainType } = useToAddressRequirements()
+  const {
+    removeRecentWallet,
+    addBookmark,
+    setSelectedBookmark,
+    addRecentWallet,
+  } = useBookmarkActions()
+  const { setFieldValue } = useFieldActions()
+  const { getAddressLink } = useExplorer()
+
+  useHeader(t('header.recentWallets'))
+
+  const { listHeight } = useListHeight({ listParentRef })
+
+  const handleRecentSelected = (recentWallet: Bookmark) => {
+    addRecentWallet(recentWallet)
+    setFieldValue('toAddress', recentWallet.address, {
+      isTouched: true,
+      isDirty: true,
+    })
+    setSelectedBookmark(recentWallet)
+    navigate({
+      to: navigationRoutes.home,
+      replace: true,
+    })
+  }
+
+  const handleAddBookmark = (bookmark: Bookmark) => {
+    addBookmark(bookmark)
+    navigate({ to: navigationRoutes.bookmarks, replace: true })
+  }
+
+  return (
+    <PageContainer disableGutters>
+      <List
+        className="long-list"
+        ref={listParentRef}
+        style={{ height: listHeight, overflow: 'auto' }}
+        disablePadding
+        sx={{ paddingTop: 1.5 }}
+      >
+        {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>
+            <ContextMenu
+              disabled={
+                !!(
+                  requiredToChainType &&
+                  requiredToChainType !== recentWallet.chainType
+                )
+              }
+              items={[
+                {
+                  icon: <ContentCopyRounded />,
+                  label: t('button.copyAddress'),
+                  onClick: () =>
+                    navigator.clipboard.writeText(recentWallet.address),
+                },
+                {
+                  icon: <OpenInNewRounded />,
+                  label: t('button.viewOnExplorer'),
+                  onClick: () =>
+                    window.open(
+                      getAddressLink(
+                        recentWallet.address,
+                        defaultChainIdsByType[recentWallet.chainType]
+                      ),
+                      '_blank'
+                    ),
+                },
+                {
+                  icon: <TurnedInNot />,
+                  label: t('button.bookmark'),
+                  onClick: () => {
+                    setBookmarkTarget(recentWallet)
+                    bookmarkAddressSheetRef.current?.open()
+                  },
+                },
+                {
+                  icon: <DeleteOutline />,
+                  label: t('button.delete'),
+                  onClick: () => removeRecentWallet(recentWallet.address),
+                },
+              ]}
+            />
+          </ListItem>
+        ))}
+        {!recentWallets.length && (
+          <EmptyListIndicator
+            icon={<AccountBalanceWalletIcon />}
+            title={t('sendToWallet.noRecentWallets')}
+            message={t('sendToWallet.noRecentWalletsMessage')}
+          />
+        )}
+      </List>
+      <BookmarkAddressSheet
+        ref={bookmarkAddressSheetRef}
+        validatedWallet={bookmarkTarget}
+        onAddBookmark={handleAddBookmark}
+      />
+    </PageContainer>
+  )
+}

package/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -0,0 +1,110 @@
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import { List, ListItemAvatar, ListItemText } from '@mui/material'
+import { type JSX, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'
+import { ContextMenu } from '../../components/ContextMenu.js'
+import { ListItem } from '../../components/ListItem/ListItem.js'
+import { ListItemButton } from '../../components/ListItem/ListItemButton.js'
+import { PageContainer } from '../../components/PageContainer.js'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useListHeight } from '../../hooks/useListHeight.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'
+
+export const SendToConfiguredWalletPage = (): JSX.Element => {
+  const { t } = useTranslation()
+  const navigateBack = useNavigateBack()
+  const { toAddresses } = useWidgetConfig()
+  const { requiredToChainType } = useToAddressRequirements()
+  const { setSelectedBookmark } = useBookmarkActions()
+  const { setFieldValue } = useFieldActions()
+  const { getAddressLink } = useExplorer()
+  const listParentRef = useRef<HTMLUListElement | null>(null)
+
+  useHeader(t('header.sendToWallet'))
+
+  const { listHeight } = useListHeight({ listParentRef })
+
+  const handleCuratedSelected = (toAddress: ToAddress) => {
+    setSelectedBookmark(toAddress)
+    setFieldValue('toAddress', toAddress.address, {
+      isTouched: true,
+      isDirty: true,
+    })
+    navigateBack()
+  }
+
+  return (
+    <PageContainer disableGutters>
+      <List
+        className="long-list"
+        ref={listParentRef}
+        style={{ height: listHeight, overflow: 'auto' }}
+        disablePadding
+        sx={{ paddingTop: 1.5 }}
+      >
+        {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>
+            <ContextMenu
+              disabled={
+                !!(
+                  requiredToChainType &&
+                  requiredToChainType !== toAddress.chainType
+                )
+              }
+              items={[
+                {
+                  icon: <ContentCopyRounded />,
+                  label: t('button.copyAddress'),
+                  onClick: () =>
+                    navigator.clipboard.writeText(toAddress.address),
+                },
+                {
+                  icon: <OpenInNewRounded />,
+                  label: t('button.viewOnExplorer'),
+                  onClick: () =>
+                    window.open(
+                      getAddressLink(
+                        toAddress.address,
+                        defaultChainIdsByType[toAddress.chainType]
+                      ),
+                      '_blank'
+                    ),
+                },
+              ]}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </PageContainer>
+  )
+}

package/src/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -0,0 +1,137 @@
+import {
+  Alert,
+  alertClasses,
+  Box,
+  inputBaseClasses,
+  styled,
+  Typography,
+} from '@mui/material'
+import type React from 'react'
+import { ButtonTertiary } from '../../components/ButtonTertiary.js'
+import { InputCard } from '../../components/Card/InputCard.js'
+import { Input } from '../../components/Input.js'
+import type { PageContainerProps } from '../../components/PageContainer.js'
+import { PageContainer } from '../../components/PageContainer.js'
+
+export const AddressInput: React.FC<
+  React.ComponentProps<typeof Input> & PageContainerProps
+> = styled(Input)(({ theme }) => ({
+  padding: 0,
+  [`.${inputBaseClasses.input}`]: {
+    padding: theme.spacing(2),
+    minHeight: 48,
+  },
+}))
+
+export const BookmarkInputFields: React.FC<
+  React.ComponentProps<typeof Box> & PageContainerProps
+> = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(2),
+  width: '100%',
+}))
+
+interface FullHeightAdjustablePageContainerProps extends PageContainerProps {
+  enableFullHeight?: boolean
+}
+
+export const FullHeightAdjustablePageContainer: React.FC<
+  React.ComponentProps<typeof PageContainer> &
+    FullHeightAdjustablePageContainerProps
+> = styled(PageContainer, {
+  shouldForwardProp: (prop) => prop !== 'enableFullHeight',
+})<FullHeightAdjustablePageContainerProps>(({ theme, enableFullHeight }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
+  justifyContent: 'space-between',
+  ...(enableFullHeight && theme.container?.height === '100%'
+    ? {
+        height: '100%',
+      }
+    : {}),
+}))
+
+export const SendToWalletCard: React.FC<
+  React.ComponentProps<typeof InputCard>
+> = styled(InputCard)({
+  display: 'flex',
+  flexDirection: 'column',
+})
+
+export const SendToWalletSheetContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: theme.spacing(4, 3, 3),
+  gap: theme.spacing(2),
+}))
+
+export const SendToWalletButtonRow: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    width: '100%',
+    gap: theme.spacing(1),
+  }))
+
+export const SendToWalletIconButton: React.FC<
+  React.ComponentProps<typeof ButtonTertiary>
+> = styled(ButtonTertiary)(({ theme }) => ({
+  padding: theme.spacing(1.25),
+  minWidth: 40,
+}))
+
+export const IconContainer: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 80,
+  height: 80,
+  borderRadius: '50%',
+  color: theme.vars.palette.grey[800],
+  background: theme.vars.palette.grey[300],
+  ...theme.applyStyles('dark', {
+    color: theme.vars.palette.grey[300],
+    background: theme.vars.palette.grey[800],
+  }),
+}))
+
+export const SheetTitle: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(() => ({
+    fontSize: 18,
+    fontWeight: 700,
+  }))
+
+export const SheetAddressContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(() => ({
+    width: '100%',
+    wordWrap: 'break-word',
+  }))
+
+export const BookmarkButtonContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
+  background: theme.vars.palette.background.default,
+  display: 'flex',
+  flexDirection: 'column',
+  flexShrink: 0,
+  padding: theme.spacing(2, 3, 3),
+  width: '100%',
+}))
+
+export const ValidationAlert: React.FC<React.ComponentProps<typeof Alert>> =
+  styled(Alert)(({ theme }) => ({
+    backgroundColor: 'transparent',
+    padding: 0,
+    color: theme.vars.palette.text.primary,
+    [`.${alertClasses.icon}`]: {
+      padding: 0,
+      color: theme.vars.palette.error.main,
+    },
+    [`.${alertClasses.message}`]: { padding: theme.spacing(0.25, 0, 0, 0) },
+  }))