@openocean.finance/widget 1.0.0

package/src/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -0,0 +1,74 @@
+import { Box } from '@mui/material'
+import type { FC } from 'react'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'
+import { FullPageContainer } from '../../components/FullPageContainer.js'
+import { TokenList } from '../../components/TokenList/TokenList.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useListHeight } from '../../hooks/useListHeight.js'
+import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js'
+import { useSwapOnly } from '../../hooks/useSwapOnly.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { SearchTokenInput } from './SearchTokenInput.js'
+
+export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
+  useScrollableOverflowHidden()
+  const { navigateBack } = useNavigateBack()
+  const headerRef = useRef<HTMLElement>(null)
+  const listParentRef = useRef<HTMLUListElement | null>(null)
+  const { listHeight, minListHeight } = useListHeight({
+    listParentRef,
+    headerRef,
+  })
+
+  const swapOnly = useSwapOnly()
+
+  const { subvariant } = useWidgetConfig()
+  const { t } = useTranslation()
+  const title =
+    formType === 'from'
+      ? subvariant === 'custom'
+        ? t('header.payWith')
+        : t('header.from')
+      : t('header.to')
+
+  useHeader(title)
+
+  const hideChainSelect = swapOnly && formType === 'to'
+
+  return (
+    <FullPageContainer disableGutters>
+      <Box
+        ref={headerRef}
+        sx={{
+          pb: 2,
+          px: 3,
+        }}
+      >
+        {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
+        <Box
+          sx={{
+            mt: !hideChainSelect ? 2 : 0,
+          }}
+        >
+          <SearchTokenInput />
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          height: minListHeight,
+        }}
+      >
+        <TokenList
+          parentRef={listParentRef}
+          height={listHeight}
+          onClick={navigateBack}
+          formType={formType}
+        />
+      </Box>
+    </FullPageContainer>
+  )
+}

package/src/pages/SelectTokenPage/types.ts

@@ -0,0 +1,4 @@
+export enum TokenFilterType {
+  My = 0,
+  All = 1,
+}

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -0,0 +1,237 @@
+import {
+  Error as ErrorIcon,
+  TurnedIn,
+  WarningRounded,
+} from '@mui/icons-material'
+import { Button, Typography } from '@mui/material'
+import type { ChangeEvent, MutableRefObject } from 'react'
+import { forwardRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { Input } from '../../components/Input.js'
+import { AlertMessage } from '../../components/Messages/AlertMessage.js'
+import { useAddressValidation } from '../../hooks/useAddressValidation.js'
+import type { Bookmark } from '../../stores/bookmarks/types.js'
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
+import {
+  AddressInput,
+  BookmarkInputFields,
+  IconContainer,
+  SendToWalletButtonRow,
+  SendToWalletCard,
+  SendToWalletSheetContainer,
+  SheetAddressContainer,
+  SheetTitle,
+  ValidationAlert,
+} from './SendToWalletPage.style.js'
+import type { BookmarkError } from './types.js'
+
+interface BookmarkAddressProps {
+  onAddBookmark: (bookmark: Bookmark) => void
+  validatedWallet?: Bookmark
+}
+
+export const BookmarkAddressSheet = forwardRef<
+  BottomSheetBase,
+  BookmarkAddressProps
+>(({ validatedWallet, onAddBookmark }, ref) => {
+  const { t } = useTranslation()
+  const [name, setName] = useState('')
+  const [address, setAddress] = useState('')
+  const [error, setError] = useState<BookmarkError>()
+  const { validateAddress, isValidating } = useAddressValidation()
+  const { getBookmark } = useBookmarkActions()
+
+  const nameValue = name.trim() || validatedWallet?.name || ''
+  const addressValue = address || validatedWallet?.address || ''
+
+  const handleCancel = () => {
+    setError(undefined)
+    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+  }
+
+  const validateWithAddressFromInput = async () => {
+    const validationResult = await validateAddress({ value: address })
+    if (!validationResult.isValid) {
+      setError({ type: 'address', message: validationResult.error })
+      return
+    }
+
+    return {
+      name: nameValue,
+      address: validationResult.address,
+      chainType: validationResult.chainType,
+    }
+  }
+
+  const validateWithValidatedWallet = (validatedWallet: Bookmark) => {
+    if (error) {
+      setError(undefined)
+    }
+    return {
+      name: nameValue,
+      address: validatedWallet.address,
+      chainType: validatedWallet.chainType,
+    }
+  }
+
+  const handleBookmark = async () => {
+    if (isValidating) {
+      return
+    }
+    if (!nameValue) {
+      setError({
+        type: 'name',
+        message: t('error.title.bookmarkNameRequired'),
+      })
+      return
+    }
+    if (!addressValue) {
+      setError({
+        type: 'address',
+        message: t('error.title.walletAddressRequired'),
+      })
+      return
+    }
+
+    //  If the validatedWallet is supplied as a prop then we should assume
+    //  the address has already been validated
+    const validatedBookmark = validatedWallet
+      ? validateWithValidatedWallet(validatedWallet)
+      : await validateWithAddressFromInput()
+
+    if (validatedBookmark) {
+      const existingBookmark = getBookmark(validatedBookmark.address)
+      if (existingBookmark) {
+        setError({
+          type: 'address',
+          message: t('error.title.bookmarkAlreadyExists', {
+            name: existingBookmark.name,
+          }),
+        })
+        return
+      }
+      ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+
+      onAddBookmark({
+        name: validatedBookmark.name,
+        address: validatedBookmark.address,
+        chainType: validatedBookmark.chainType,
+      })
+    }
+  }
+
+  const handleAddressInputChange = (e: ChangeEvent) => {
+    if (error) {
+      setError(undefined)
+    }
+    setAddress((e.target as HTMLInputElement).value.trim())
+  }
+
+  const handleNameInputChange = (e: ChangeEvent) => {
+    if (error) {
+      setError(undefined)
+    }
+    setName((e.target as HTMLInputElement).value)
+  }
+
+  const resetValues = () => {
+    setName('')
+    setAddress('')
+  }
+
+  return (
+    <BottomSheet ref={ref} onClose={resetValues}>
+      <SendToWalletSheetContainer>
+        <IconContainer>
+          <TurnedIn sx={{ fontSize: 40 }} />
+        </IconContainer>
+        <SheetTitle>{t('sendToWallet.bookmarkWallet')}</SheetTitle>
+        {validatedWallet ? (
+          <SheetAddressContainer>
+            {validatedWallet?.name ? (
+              <Typography
+                sx={{
+                  fontWeight: 600,
+                  mb: 0.5,
+                }}
+              >
+                {validatedWallet?.name}
+              </Typography>
+            ) : null}
+            <Typography>{validatedWallet?.address}</Typography>
+          </SheetAddressContainer>
+        ) : null}
+        <BookmarkInputFields>
+          <SendToWalletCard type={error?.type === 'name' ? 'error' : 'default'}>
+            <Input
+              size="small"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              onChange={handleNameInputChange}
+              value={name}
+              placeholder={validatedWallet?.name || t('sendToWallet.enterName')}
+              aria-label={validatedWallet?.name || t('sendToWallet.enterName')}
+              inputProps={{ maxLength: 128 }}
+            />
+          </SendToWalletCard>
+          {!validatedWallet && (
+            <SendToWalletCard
+              type={error?.type === 'address' ? 'error' : 'default'}
+            >
+              <AddressInput
+                size="small"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                onChange={handleAddressInputChange}
+                value={address}
+                placeholder={t('sendToWallet.enterAddress', {
+                  context: 'long',
+                })}
+                aria-label={t('sendToWallet.enterAddress', {
+                  context: 'long',
+                })}
+                maxRows={2}
+                inputProps={{ maxLength: 128 }}
+                multiline
+              />
+            </SendToWalletCard>
+          )}
+          {error ? (
+            <ValidationAlert icon={<ErrorIcon />}>
+              {error.message}
+            </ValidationAlert>
+          ) : null}
+        </BookmarkInputFields>
+        <AlertMessage
+          title={
+            <Typography variant="body2" sx={{ color: 'text.primary' }}>
+              {t('warning.message.fundsLossPrevention')}
+            </Typography>
+          }
+          icon={<WarningRounded />}
+        />
+        <SendToWalletButtonRow>
+          <Button variant="text" onClick={handleCancel} fullWidth>
+            {t('button.cancel')}
+          </Button>
+          <Button
+            variant="contained"
+            onClick={handleBookmark}
+            loading={isValidating}
+            loadingPosition="center"
+            fullWidth
+            focusRipple
+          >
+            {t('button.bookmark')}
+          </Button>
+        </SendToWalletButtonRow>
+      </SendToWalletSheetContainer>
+    </BottomSheet>
+  )
+})

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -0,0 +1,201 @@
+import {
+  ContentCopyRounded,
+  DeleteOutline,
+  MoreHoriz,
+  OpenInNewRounded,
+  TurnedIn,
+} from '@mui/icons-material'
+import { Button, 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 { ListItemButton } from '../../components/ListItem//ListItemButton.js'
+import { ListItem } from '../../components/ListItem/ListItem.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 { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.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 { shortenAddress } from '../../utils/wallet.js'
+import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'
+import { EmptyListIndicator } from './EmptyListIndicator.js'
+import {
+  BookmarkButtonContainer,
+  BookmarksListContainer,
+  FullHeightAdjustablePageContainer,
+  OptionsMenuButton,
+} from './SendToWalletPage.style.js'
+
+export const BookmarksPage = () => {
+  const { t } = useTranslation()
+  const [bookmark, setBookmark] = useState<Bookmark>()
+  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)
+  const { bookmarks } = useBookmarks()
+  const { requiredToChainType } = useToAddressRequirements()
+  const { addBookmark, removeBookmark, setSelectedBookmark } =
+    useBookmarkActions()
+  const navigate = useNavigate()
+  const { setFieldValue } = useFieldActions()
+  const { setSendToWallet } = useSendToWalletActions()
+  const { variant } = useWidgetConfig()
+  const { getAddressLink } = useExplorer()
+
+  useHeader(t('header.bookmarkedWallets'))
+
+  const handleAddBookmark = () => {
+    bookmarkAddressSheetRef.current?.open()
+  }
+
+  const handleBookmarkSelected = (bookmark: Bookmark) => {
+    setFieldValue('toAddress', bookmark.address, {
+      isTouched: true,
+      isDirty: true,
+    })
+    setSelectedBookmark(bookmark)
+    setSendToWallet(true)
+    navigate('../../', {
+      relative: 'path',
+      replace: true,
+    })
+  }
+
+  const moreMenuId = useId()
+  const [moreMenuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>()
+  const open = Boolean(moreMenuAnchorEl)
+  const closeMenu = () => {
+    setMenuAnchorEl(null)
+  }
+
+  const handleMenuOpen = (el: HTMLElement, bookmark: Bookmark) => {
+    setMenuAnchorEl(el)
+    setBookmark(bookmark)
+  }
+
+  const handleCopyAddress = () => {
+    if (bookmark) {
+      navigator.clipboard.writeText(bookmark.address)
+    }
+    closeMenu()
+  }
+
+  const handleViewOnExplorer = () => {
+    if (bookmark) {
+      window.open(
+        getAddressLink(
+          bookmark.address,
+          defaultChainIdsByType[bookmark.chainType]
+        ),
+        '_blank'
+      )
+    }
+    closeMenu()
+  }
+
+  const handleRemoveBookmark = () => {
+    if (bookmark) {
+      removeBookmark(bookmark.address)
+    }
+    closeMenu()
+  }
+
+  return (
+    <FullHeightAdjustablePageContainer
+      disableGutters
+      enableFullHeight={variant !== 'drawer'}
+    >
+      <BookmarksListContainer>
+        {bookmarks.map((bookmark) => (
+          <ListItem key={bookmark.address} sx={{ position: 'relative' }}>
+            <ListItemButton
+              onClick={() => handleBookmarkSelected(bookmark)}
+              disabled={
+                requiredToChainType &&
+                requiredToChainType !== bookmark.chainType
+              }
+            >
+              <ListItemAvatar>
+                <AccountAvatar
+                  chainId={defaultChainIdsByType[bookmark.chainType]}
+                />
+              </ListItemAvatar>
+              <ListItemText
+                primary={bookmark.name}
+                secondary={shortenAddress(bookmark.address)}
+              />
+            </ListItemButton>
+            <OptionsMenuButton
+              aria-label={t('button.options')}
+              aria-controls={
+                open && bookmark.address === bookmark?.address
+                  ? moreMenuId
+                  : undefined
+              }
+              aria-haspopup="true"
+              aria-expanded={open ? 'true' : undefined}
+              onClick={(e) => handleMenuOpen(e.target as HTMLElement, bookmark)}
+              sx={{
+                opacity:
+                  requiredToChainType &&
+                  requiredToChainType !== bookmark.chainType
+                    ? 0.5
+                    : 1,
+              }}
+            >
+              <MoreHoriz fontSize="small" />
+            </OptionsMenuButton>
+          </ListItem>
+        ))}
+        {!bookmarks.length && (
+          <EmptyListIndicator icon={<TurnedIn sx={{ fontSize: 48 }} />}>
+            {t('sendToWallet.noBookmarkedWallets')}
+          </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={handleRemoveBookmark}>
+            <DeleteOutline />
+            {t('button.delete')}
+          </MenuItem>
+        </Menu>
+      </BookmarksListContainer>
+      <BookmarkButtonContainer>
+        <Button variant="contained" onClick={handleAddBookmark}>
+          {t('sendToWallet.addBookmark')}
+        </Button>
+      </BookmarkButtonContainer>
+      <BookmarkAddressSheet
+        ref={bookmarkAddressSheetRef}
+        onAddBookmark={addBookmark}
+      />
+    </FullHeightAdjustablePageContainer>
+  )
+}

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -0,0 +1,111 @@
+import { Wallet, WarningRounded } from '@mui/icons-material'
+import { Button, Typography } from '@mui/material'
+import type { MutableRefObject } from 'react'
+import { forwardRef, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { AlertMessage } from '../../components/Messages/AlertMessage.js'
+import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
+import type { Bookmark } from '../../stores/bookmarks/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
+import {
+  IconContainer,
+  SendToWalletButtonRow,
+  SendToWalletSheetContainer,
+  SheetAddressContainer,
+  SheetTitle,
+} from './SendToWalletPage.style.js'
+
+interface ConfirmAddressSheetProps {
+  onConfirm: (wallet: Bookmark) => void
+  validatedBookmark?: Bookmark
+}
+
+interface ConfirmAddressSheetContentProps extends ConfirmAddressSheetProps {
+  onClose: () => void
+}
+
+export const ConfirmAddressSheet = forwardRef<
+  BottomSheetBase,
+  ConfirmAddressSheetProps
+>((props, ref) => {
+  const handleClose = () => {
+    ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
+  }
+
+  return (
+    <BottomSheet ref={ref}>
+      <ConfirmAddressSheetContent {...props} onClose={handleClose} />
+    </BottomSheet>
+  )
+})
+
+const ConfirmAddressSheetContent: React.FC<ConfirmAddressSheetContentProps> = ({
+  validatedBookmark,
+  onConfirm,
+  onClose,
+}) => {
+  const { t } = useTranslation()
+  const { navigateBack } = useNavigateBack()
+  const { setFieldValue } = useFieldActions()
+  const { setSendToWallet } = useSendToWalletActions()
+
+  const containerRef = useRef<HTMLElement>(null)
+  useSetContentHeight(containerRef)
+
+  const handleConfirm = () => {
+    if (validatedBookmark) {
+      setFieldValue('toAddress', validatedBookmark.address, {
+        isTouched: true,
+        isDirty: true,
+      })
+      onConfirm?.(validatedBookmark)
+      setSendToWallet(true)
+      onClose()
+      navigateBack()
+    }
+  }
+
+  return (
+    <SendToWalletSheetContainer ref={containerRef}>
+      <IconContainer>
+        <Wallet sx={{ fontSize: 40 }} />
+      </IconContainer>
+      <SheetTitle>{t('sendToWallet.confirmWalletAddress')}</SheetTitle>
+      <SheetAddressContainer>
+        {validatedBookmark?.name ? (
+          <Typography
+            sx={{
+              fontWeight: 600,
+              mb: 0.5,
+            }}
+          >
+            {validatedBookmark?.name}
+          </Typography>
+        ) : null}
+        <Typography>{validatedBookmark?.address}</Typography>
+      </SheetAddressContainer>
+      <AlertMessage
+        severity="warning"
+        title={
+          <Typography variant="body2" sx={{ color: 'text.primary' }}>
+            {t('warning.message.fundsLossPrevention')}
+          </Typography>
+        }
+        icon={<WarningRounded />}
+        multiline
+      />
+      <SendToWalletButtonRow>
+        <Button variant="text" onClick={onClose} fullWidth>
+          {t('button.cancel')}
+        </Button>
+        <Button variant="contained" onClick={handleConfirm} fullWidth>
+          {t('button.confirm')}
+        </Button>
+      </SendToWalletButtonRow>
+    </SendToWalletSheetContainer>
+  )
+}