@openocean.finance/widget 1.0.0

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

@@ -0,0 +1,159 @@
+import {
+  Alert,
+  Box,
+  IconButton,
+  List,
+  Typography,
+  alertClasses,
+  inputBaseClasses,
+  styled,
+} from '@mui/material'
+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'
+import { getContrastAlphaColor } from '../../utils/colors.js'
+
+export const AddressInput = styled(Input)(({ theme }) => ({
+  padding: 0,
+  [`.${inputBaseClasses.input}`]: {
+    padding: theme.spacing(2),
+    minHeight: 48,
+  },
+}))
+
+export const BookmarkInputFields = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(2),
+  width: '100%',
+}))
+
+export const SendToWalletPageContainer = styled(
+  PageContainer
+)<PageContainerProps>(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
+}))
+
+interface FullHeightAdjustablePageContainerProps extends PageContainerProps {
+  enableFullHeight?: boolean
+}
+
+export const FullHeightAdjustablePageContainer = styled(
+  SendToWalletPageContainer,
+  {
+    shouldForwardProp: (prop) => prop !== 'enableFullHeight',
+  }
+)<FullHeightAdjustablePageContainerProps>(({ theme, enableFullHeight }) => ({
+  justifyContent: 'space-between',
+  ...(enableFullHeight && theme.container?.height === '100%'
+    ? {
+        justifyContent: 'space-between',
+        height: '100%',
+      }
+    : {}),
+}))
+
+export const SendToWalletCard = styled(InputCard)({
+  display: 'flex',
+  flexDirection: 'column',
+})
+
+export const SendToWalletSheetContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: theme.spacing(4, 3, 3),
+  gap: theme.spacing(2),
+}))
+
+export const SendToWalletButtonRow = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  width: '100%',
+  gap: theme.spacing(1),
+}))
+
+export const SendToWalletIconButton = styled(ButtonTertiary)(({ theme }) => ({
+  padding: theme.spacing(1.25),
+  minWidth: 40,
+}))
+
+export const IconContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 80,
+  height: 80,
+  color: theme.palette.grey[300],
+  background: theme.palette.grey[800],
+  borderRadius: '50%',
+  ...theme.applyStyles('light', {
+    color: theme.palette.grey[700],
+    background: theme.palette.grey[200],
+  }),
+}))
+
+export const SheetTitle = styled(Typography)(() => ({
+  fontSize: 18,
+  fontWeight: 700,
+}))
+
+export const SheetAddressContainer = styled(Box)(() => ({
+  width: '100%',
+  wordWrap: 'break-word',
+}))
+
+export const ListContainer = styled(List)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: 0,
+  minHeight: 400,
+}))
+
+export const BookmarksListContainer = styled(ListContainer)(({ theme }) => ({
+  ...(theme.container?.height === '100%'
+    ? { minHeight: 360, height: 360, flexGrow: 1, overflow: 'auto' }
+    : { minHeight: 440 }),
+}))
+export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
+  background: theme.palette.background.default,
+  display: 'flex',
+  flexDirection: 'column',
+  bottom: 0,
+  padding: theme.spacing(0, 3, 3),
+  zIndex: 2,
+  position: 'sticky',
+  width: '100%',
+}))
+
+export const EmptyContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexGrow: 1,
+  gap: theme.spacing(2),
+}))
+
+export const ValidationAlert = styled(Alert)(({ theme }) => ({
+  backgroundColor: 'transparent',
+  padding: 0,
+  color: theme.palette.text.primary,
+  [`.${alertClasses.icon}`]: {
+    padding: 0,
+    color: theme.palette.error.main,
+  },
+  [`.${alertClasses.message}`]: { padding: theme.spacing(0.25, 0, 0, 0) },
+}))
+
+export const OptionsMenuButton = styled(IconButton)(({ theme }) => ({
+  position: 'absolute',
+  top: theme.spacing(1.75),
+  right: theme.spacing(2),
+  '&:hover': {
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
+  },
+}))

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -0,0 +1,301 @@
+import {
+  Error as ErrorIcon,
+  History,
+  TurnedIn,
+  Wallet,
+} from '@mui/icons-material'
+import { Box, Tooltip, Typography } from '@mui/material'
+import { useAccount } from '@openocean.finance/wallet-management'
+import type { ChangeEvent } from 'react'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { ButtonTertiary } from '../../components/ButtonTertiary.js'
+import { CardButton } from '../../components/Card/CardButton.js'
+import {
+  AddressType,
+  useAddressValidation,
+} from '../../hooks/useAddressValidation.js'
+import { useChain } from '../../hooks/useChain.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 { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'
+import { ConfirmAddressSheet } from './ConfirmAddressSheet.js'
+import {
+  AddressInput,
+  FullHeightAdjustablePageContainer,
+  SendToWalletButtonRow,
+  SendToWalletCard,
+  SendToWalletIconButton,
+  ValidationAlert,
+} from './SendToWalletPage.style.js'
+
+export const SendToWalletPage = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)
+  const confirmAddressSheetRef = useRef<BottomSheetBase>(null)
+  const { bookmarks, recentWallets } = useBookmarks()
+  const {
+    addBookmark,
+    getBookmark,
+    setSelectedBookmark,
+    getSelectedBookmark,
+    addRecentWallet,
+  } = useBookmarkActions()
+  const { setFieldValue } = useFieldActions()
+  const [inputAddressValue, setInputAddressValue] = useState(
+    () => getSelectedBookmark()?.address ?? ''
+  )
+  const [validatedWallet, setValidatedWallet] = useState<Bookmark>()
+  const [errorMessage, setErrorMessage] = useState('')
+  const { validateAddress, isValidating } = useAddressValidation()
+  const { requiredToChainType } = useToAddressRequirements()
+  const [toChainId] = useFieldValues('toChain')
+  const { chain: toChain } = useChain(toChainId)
+  const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false)
+  const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false)
+  const { variant } = useWidgetConfig()
+
+  const { accounts } = useAccount()
+  const connectedWallets = accounts.filter((account) => account.isConnected)
+
+  useHeader(t('header.sendToWallet'))
+
+  const handleInputChange = (e: ChangeEvent) => {
+    if (errorMessage) {
+      setErrorMessage('')
+    }
+    if (getSelectedBookmark()) {
+      setFieldValue('toAddress', '', { isTouched: true })
+      setSelectedBookmark()
+    }
+    setInputAddressValue((e.target as HTMLInputElement).value.trim())
+  }
+
+  const handleDone = async () => {
+    if (isValidating) {
+      return
+    }
+    if (!inputAddressValue) {
+      setErrorMessage(t('error.title.walletAddressRequired'))
+      return
+    }
+    setIsDoneButtonLoading(true)
+    const validationResult = await validateAddress({
+      value: inputAddressValue,
+      chainType: requiredToChainType,
+      chain: toChain,
+    })
+    setIsDoneButtonLoading(false)
+    if (!validationResult.isValid) {
+      setErrorMessage(validationResult.error)
+      return
+    }
+
+    if (
+      requiredToChainType &&
+      requiredToChainType !== validationResult.chainType
+    ) {
+      setErrorMessage(
+        t('error.title.walletChainTypeInvalid', {
+          chainName: toChain?.name,
+        })
+      )
+      return
+    }
+
+    setValidatedWallet({
+      name:
+        validationResult.addressType === AddressType.NameService
+          ? inputAddressValue
+          : undefined,
+      address: validationResult.address,
+      chainType: validationResult.chainType,
+    })
+    confirmAddressSheetRef.current?.open()
+  }
+
+  const handleBookmarkAddress = async () => {
+    if (isValidating) {
+      return
+    }
+    if (!inputAddressValue) {
+      setErrorMessage(t('error.title.walletAddressRequired'))
+      return
+    }
+
+    const existingBookmarkWallet = getBookmark(inputAddressValue)
+    if (existingBookmarkWallet) {
+      setErrorMessage(
+        t('error.title.bookmarkAlreadyExists', {
+          name: existingBookmarkWallet.name,
+        })
+      )
+      return
+    }
+    setIsBookmarkButtonLoading(true)
+    const validationResult = await validateAddress({
+      value: inputAddressValue,
+    })
+    setIsBookmarkButtonLoading(false)
+
+    if (validationResult.isValid) {
+      setValidatedWallet({
+        name:
+          validationResult.addressType === AddressType.NameService
+            ? inputAddressValue
+            : undefined,
+        address: validationResult.address,
+        chainType: validationResult.chainType,
+      })
+      bookmarkAddressSheetRef.current?.open()
+    } else {
+      setErrorMessage(validationResult.error)
+    }
+  }
+
+  const handleRecentWalletsClick = () => {
+    navigate(navigationRoutes.recentWallets)
+  }
+
+  const handleConnectedWalletsClick = () => {
+    navigate(navigationRoutes.connectedWallets)
+  }
+  const handleBookmarkedWalletsClick = () => {
+    navigate(navigationRoutes.bookmarks)
+  }
+
+  const handleAddBookmark = (bookmark: Bookmark) => {
+    addBookmark(bookmark)
+    navigate(navigationRoutes.bookmarks)
+  }
+
+  const handleOnConfirm = (confirmedWallet: Bookmark) => {
+    setSelectedBookmark(confirmedWallet)
+    addRecentWallet(confirmedWallet)
+  }
+
+  const placeholder = t('sendToWallet.enterAddress', {
+    context: 'long',
+  })
+
+  return (
+    <FullHeightAdjustablePageContainer
+      bottomGutters
+      enableFullHeight={variant !== 'drawer'}
+    >
+      <SendToWalletCard
+        type={errorMessage ? 'error' : 'default'}
+        sx={{
+          marginBottom: 6,
+        }}
+      >
+        <AddressInput
+          size="small"
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck="false"
+          onChange={handleInputChange}
+          value={inputAddressValue}
+          placeholder={placeholder}
+          aria-label={placeholder}
+          maxRows={2}
+          inputProps={{ maxLength: 128 }}
+          multiline
+        />
+        {errorMessage ? (
+          <ValidationAlert icon={<ErrorIcon />} sx={{ pb: 2, paddingX: 2 }}>
+            {errorMessage}
+          </ValidationAlert>
+        ) : null}
+        <SendToWalletButtonRow sx={{ paddingX: 2, paddingBottom: 2 }}>
+          <ButtonTertiary
+            variant="text"
+            onClick={handleDone}
+            loading={isDoneButtonLoading}
+            loadingPosition="center"
+            sx={{ flexGrow: 1 }}
+          >
+            {t('button.done')}
+          </ButtonTertiary>
+          <Tooltip title={t('button.bookmark')}>
+            <SendToWalletIconButton
+              onClick={handleBookmarkAddress}
+              loading={isBookmarkButtonLoading}
+              loadingPosition="center"
+            >
+              <TurnedIn fontSize="small" />
+            </SendToWalletIconButton>
+          </Tooltip>
+        </SendToWalletButtonRow>
+        <ConfirmAddressSheet
+          ref={confirmAddressSheetRef}
+          validatedBookmark={validatedWallet}
+          onConfirm={handleOnConfirm}
+        />
+        <BookmarkAddressSheet
+          ref={bookmarkAddressSheetRef}
+          validatedWallet={validatedWallet}
+          onAddBookmark={handleAddBookmark}
+        />
+      </SendToWalletCard>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+        <CardButton
+          title={t('header.recentWallets')}
+          icon={<History />}
+          onClick={handleRecentWalletsClick}
+        >
+          {!!recentWallets.length && (
+            <Typography
+              sx={{
+                color: 'text.secondary',
+              }}
+            >
+              {recentWallets.length}
+            </Typography>
+          )}
+        </CardButton>
+        <CardButton
+          title={t('sendToWallet.connectedWallets')}
+          icon={<Wallet />}
+          onClick={handleConnectedWalletsClick}
+        >
+          {!!connectedWallets.length && (
+            <Typography
+              sx={{
+                color: 'text.secondary',
+              }}
+            >
+              {connectedWallets.length}
+            </Typography>
+          )}
+        </CardButton>
+        <CardButton
+          title={t('header.bookmarkedWallets')}
+          icon={<TurnedIn />}
+          onClick={handleBookmarkedWalletsClick}
+        >
+          {!!bookmarks.length && (
+            <Typography
+              sx={{
+                color: 'text.secondary',
+              }}
+            >
+              {bookmarks.length}
+            </Typography>
+          )}
+        </CardButton>
+      </Box>
+    </FullHeightAdjustablePageContainer>
+  )
+}

package/src/pages/SendToWallet/types.ts

@@ -0,0 +1,4 @@
+export interface BookmarkError {
+  type: 'name' | 'address'
+  message: string
+}

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -0,0 +1,50 @@
+import { AirlineStops, SwapHoriz } from '@mui/icons-material'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { shallow } from 'zustand/shallow'
+import { CardButton } from '../../components/Card/CardButton.js'
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
+import { useSettingsStore } from '../../stores/settings/useSettingsStore.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { BadgedValue } from './SettingsCard/BadgedValue.js'
+
+const supportedIcons = {
+  Bridges: AirlineStops,
+  Exchanges: SwapHoriz,
+}
+
+export const BridgeAndExchangeSettings: React.FC<{
+  type: 'Bridges' | 'Exchanges'
+}> = ({ type }) => {
+  const { isBridgesChanged, isExchangesChanged } = useSettingMonitor()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const [enabledTools, tools] = useSettingsStore((state) => {
+    const enabledTools = Object.values(state[`_enabled${type}`])
+    return [enabledTools.filter(Boolean).length, enabledTools.length]
+  }, shallow)
+
+  const customisationLookUp = {
+    Bridges: isBridgesChanged,
+    Exchanges: isExchangesChanged,
+  }
+
+  const handleClick = () => {
+    navigate(navigationRoutes[type.toLowerCase() as 'bridges' | 'exchanges'])
+  }
+
+  const Icon = supportedIcons[type]
+
+  return (
+    <CardButton
+      onClick={handleClick}
+      icon={<Icon />}
+      title={t(`settings.enabled${type}`)}
+    >
+      <BadgedValue
+        badgeColor="info"
+        showBadge={customisationLookUp[type]}
+      >{`${enabledTools}/${tools}`}</BadgedValue>
+    </CardButton>
+  )
+}

package/src/pages/SettingsPage/GasPriceSettings.tsx

@@ -0,0 +1,47 @@
+import { EvStation } from '@mui/icons-material'
+import { useTranslation } from 'react-i18next'
+import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import { BadgedValue } from './SettingsCard/BadgedValue.js'
+import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'
+
+export const GasPriceSettings: React.FC = () => {
+  const { t } = useTranslation()
+  const { setValue } = useSettingsActions()
+  const { isGasPriceChanged } = useSettingMonitor()
+  const { gasPrice } = useSettings(['gasPrice'])
+
+  const handleGasPriceChange = (_: React.SyntheticEvent, gasPrice: string) => {
+    setValue('gasPrice', gasPrice)
+  }
+
+  return (
+    <SettingCardExpandable
+      value={
+        <BadgedValue badgeColor="info" showBadge={isGasPriceChanged}>
+          {t(`settings.gasPrice.${gasPrice}` as any)}
+        </BadgedValue>
+      }
+      icon={<EvStation />}
+      title={t('settings.gasPrice.title')}
+    >
+      <CardTabs
+        value={gasPrice}
+        aria-label="tabs"
+        indicatorColor="primary"
+        onChange={handleGasPriceChange}
+        sx={{ mt: 1.5 }}
+      >
+        <Tab label={t('settings.gasPrice.slow')} value="slow" disableRipple />
+        <Tab
+          label={t('settings.gasPrice.normal')}
+          value="normal"
+          disableRipple
+        />
+        <Tab label={t('settings.gasPrice.fast')} value="fast" disableRipple />
+      </CardTabs>
+    </SettingCardExpandable>
+  )
+}

package/src/pages/SettingsPage/LanguageSetting.tsx

@@ -0,0 +1,34 @@
+import { Language } from '@mui/icons-material'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { CardButton } from '../../components/Card/CardButton.js'
+import { CardValue } from '../../components/Card/CardButton.style.js'
+import { useLanguages } from '../../hooks/useLanguages.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { HiddenUI } from '../../types/widget.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+
+export const LanguageSetting: React.FC = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { hiddenUI } = useWidgetConfig()
+  const { selectedLanguageDisplayName } = useLanguages()
+
+  if (hiddenUI?.includes(HiddenUI.Language)) {
+    return null
+  }
+
+  const handleClick = () => {
+    navigate(navigationRoutes.languages)
+  }
+
+  return (
+    <CardButton
+      onClick={handleClick}
+      icon={<Language />}
+      title={t('language.title')}
+    >
+      <CardValue>{selectedLanguageDisplayName}</CardValue>
+    </CardButton>
+  )
+}

package/src/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -0,0 +1,11 @@
+import { Box, styled } from '@mui/material'
+import { getContrastAlphaColor } from '../../utils/colors.js'
+
+export const ResetButtonContainer = styled(Box)(({ theme }) => ({
+  background: getContrastAlphaColor(theme, 0.04),
+  borderRadius: '16px',
+  padding: '16px',
+  svg: {
+    fill: getContrastAlphaColor(theme, 0.4),
+  },
+}))

package/src/pages/SettingsPage/ResetSettingsButton.tsx

@@ -0,0 +1,81 @@
+import { InfoRounded } from '@mui/icons-material'
+import {
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from '@mui/material'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Dialog } from '../../components/Dialog.js'
+import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
+import { ResetButtonContainer } from './ResetSettingsButton.style.js'
+
+export const ResetSettingsButton: React.FC = () => {
+  const { t } = useTranslation()
+  const { isCustomRouteSettings, reset } = useSettingMonitor()
+  const [open, setOpen] = useState(false)
+
+  const toggleDialog = useCallback(() => {
+    setOpen((open) => !open)
+  }, [])
+
+  const handleReset = () => {
+    reset()
+    toggleDialog()
+  }
+
+  if (!isCustomRouteSettings) {
+    return null
+  }
+
+  return (
+    <Box
+      sx={{
+        mt: 2,
+      }}
+    >
+      <ResetButtonContainer>
+        <Box
+          sx={{
+            display: 'flex',
+            marginBottom: '12px',
+          }}
+        >
+          <InfoRounded
+            sx={{
+              marginRight: '8px',
+            }}
+          />
+          <Box
+            sx={{
+              fontSize: 14,
+            }}
+          >
+            {t('settings.resetSettings')}
+          </Box>
+        </Box>
+        <Button onClick={toggleDialog} fullWidth>
+          {t('button.resetSettings')}
+        </Button>
+
+        <Dialog open={open} onClose={toggleDialog}>
+          <DialogTitle>{t('warning.title.resetSettings')}</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              {t('warning.message.resetSettings')}
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={toggleDialog}>{t('button.cancel')}</Button>
+            <Button variant="contained" onClick={handleReset} autoFocus>
+              {t('button.reset')}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </ResetButtonContainer>
+    </Box>
+  )
+}