@mx-cartographer/experiences 4.0.14-alpha.JB1 → 4.0.14-alpha.JB2

package/src/transactions/components/shared/transactiondetails/actions/CategoryAction.tsx

@@ -1,149 +0,0 @@
-import React from 'react'
-
-import Avatar from '@mui/material/Avatar'
-import ListItem from '@mui/material/ListItem'
-import ListItemAvatar from '@mui/material/ListItemAvatar'
-import ListItemButton from '@mui/material/ListItemButton'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import ListItemText from '@mui/material/ListItemText'
-
-import { CategoryIcon, CategoryIconVariants, Icon, IconWeight, Text } from '@kyper/mui'
-
-import { CategorySelectorDrawer } from '../../../../../categories'
-
-import {
-  ANALYTICS_EVENTS,
-  buildDynamicCopy,
-  Dialog,
-  useCategoryStore,
-  useGlobalCopyStore,
-} from '../../../../../common'
-
-import type { Transaction } from '../../../../../common'
-
-import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
-import { useTransactionsUiStore } from '../../../../context/hooks'
-import { useEvent, useTransactionStore } from '../../../../../common'
-
-interface CategoryActionProps {
-  transaction: Transaction
-}
-
-const CategoryAction: React.FC<CategoryActionProps> = ({ transaction }) => {
-  const { addOrUpdateTransactionRule, updateTransaction } = useTransactionStore()
-  const { categories } = useCategoryStore()
-  const { onEvent } = useEvent()
-  const { setShouldDisableDrawerScroll, updateManualTransaction } = useTransactionsUiStore()
-  const { transactions: copy } = useGlobalCopyStore()
-
-  const [open, setOpen] = React.useState(false)
-  const [selectedGuid, setSelectedGuid] = React.useState('')
-
-  const handleCategoryChange = async (applyToAll: boolean) => {
-    await updateTransaction({ ...transaction, category_guid: selectedGuid })
-    if (applyToAll) {
-      await addOrUpdateTransactionRule(selectedGuid, transaction)
-    }
-    setSelectedGuid('')
-    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_CATEGORY, {
-      transaction_guid: transaction.guid,
-    })
-  }
-
-  const handleSelected = (guid: string) => {
-    if (transaction.is_manual && !transaction.guid) {
-      const category = categories.find((c) => c.guid === guid)
-      updateManualTransaction({
-        ...transaction,
-        category: category?.name,
-        category_guid: guid,
-        top_level_category_guid: category?.parent_guid || guid,
-      })
-    } else {
-      setSelectedGuid(guid)
-    }
-
-    handleCloseDrawer()
-  }
-
-  const handleCloseDrawer = () => {
-    setOpen(false)
-    setShouldDisableDrawerScroll(false)
-  }
-
-  const category = React.useMemo(
-    () => categories.find((item) => item.guid === selectedGuid),
-    [selectedGuid],
-  )
-
-  return (
-    <React.Fragment>
-      <ListItem disableGutters={true} disablePadding={true}>
-        <ListItemButton
-          onClick={() => {
-            onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_CATEGORY_CLICK)
-            setOpen(true)
-          }}
-        >
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: 'border.light' }} variant="rounded">
-              <CategoryIcon
-                categoryGuid={transaction.top_level_category_guid}
-                size={24}
-                sx={{ color: 'text.primary' }}
-                variant={CategoryIconVariants.Transparent}
-              />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary="Category"
-            primaryTypographyProps={{ variant: 'XSmall' }}
-            secondary={
-              <Text bold={true} variant="Body">
-                {transaction.category ?? copy.actions_select_a_category}
-              </Text>
-            }
-          />
-          <ListItemIcon>
-            <Icon name="chevron_right" weight={IconWeight.Dark} />
-          </ListItemIcon>
-        </ListItemButton>
-      </ListItem>
-
-      <CategorySelectorDrawer
-        initialSelected={transaction.category_guid}
-        onClose={handleCloseDrawer}
-        onSelect={handleSelected}
-        showDrawer={open}
-        title={copy.actions_select_a_category}
-      />
-
-      <Dialog
-        copy={{
-          title: buildDynamicCopy(
-            copy.actions_apply_to_all_transaction_types,
-            transaction.description,
-          ) as string,
-        }}
-        isOpen={Boolean(selectedGuid)}
-        onClose={() => setSelectedGuid('')}
-        onPrimaryAction={() => handleCategoryChange(true)}
-        onSecondaryAction={() => handleCategoryChange(false)}
-        primaryText={copy.actions_apply_to_all}
-        secondaryText={copy.actions_this_time_only}
-      >
-        <Text>
-          {
-            buildDynamicCopy(
-              copy.actions_all_past_and_future,
-              transaction.description,
-              category?.name,
-            ) as string
-          }
-        </Text>
-      </Dialog>
-    </React.Fragment>
-  )
-}
-
-export default CategoryAction

package/src/transactions/components/shared/transactiondetails/actions/DateAction.tsx

@@ -1,119 +0,0 @@
-import React from 'react'
-import { fromUnixTime } from 'date-fns/fromUnixTime'
-import { getUnixTime } from 'date-fns/getUnixTime'
-
-import Avatar from '@mui/material/Avatar'
-import Box from '@mui/material/Box'
-import Stack from '@mui/material/Stack'
-import ListItem from '@mui/material/ListItem'
-import ListItemAvatar from '@mui/material/ListItemAvatar'
-import ListItemButton from '@mui/material/ListItemButton'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import ListItemText from '@mui/material/ListItemText'
-
-import { Icon, IconWeight, Text, useTokens } from '@kyper/mui'
-
-import {
-  ANALYTICS_EVENTS,
-  Calendar,
-  CalendarSelectionTypes,
-  DATE_FORMATS_INTL,
-  Drawer,
-  formatDate,
-  useEvent,
-  useGlobalCopyStore,
-  useTransactionStore,
-} from '../../../../../common'
-
-import type { Transaction } from '../../../../../common'
-
-import { useTransactionsUiStore } from '../../../../context/hooks'
-import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
-
-interface DateActionProps {
-  transaction: Transaction
-}
-
-const DateAction: React.FC<DateActionProps> = ({ transaction }) => {
-  const tokens = useTokens()
-
-  const { onEvent } = useEvent()
-  const { updateTransaction } = useTransactionStore()
-  const { updateManualTransaction } = useTransactionsUiStore()
-  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
-
-  const [open, setOpen] = React.useState(false)
-  const [date, setDate] = React.useState<number>(transaction.date)
-
-  const handleDateSelected = (date: Date) => {
-    setDate(getUnixTime(date))
-  }
-
-  const handleSave = async () => {
-    if (transaction.is_manual && !transaction.guid) {
-      updateManualTransaction({ ...transaction, date })
-      setOpen(false)
-      return
-    }
-
-    await updateTransaction({ ...transaction, date })
-    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_DATE, { transaction_guid: transaction.guid })
-    setOpen(false)
-  }
-
-  return (
-    <Box className="mx-txn-date-action">
-      <ListItem disableGutters={true} disablePadding={true}>
-        <ListItemButton
-          onClick={() => {
-            onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DATE_CLICK)
-            setOpen(true)
-          }}
-        >
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: 'border.light' }} variant="rounded">
-              <Icon name="calendar_month" sx={{ color: 'text.primary' }} weight={IconWeight.Dark} />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={copy.date_title}
-            primaryTypographyProps={{ variant: 'XSmall' }}
-            secondary={
-              <Text bold={true} variant="Body">
-                {formatDate(fromUnixTime(transaction.date), DATE_FORMATS_INTL.YEAR_MONTH_DAY)}
-              </Text>
-            }
-          />
-          <ListItemIcon>
-            <Icon name="chevron_right" weight={IconWeight.Dark} />
-          </ListItemIcon>
-        </ListItemButton>
-      </ListItem>
-
-      <Drawer
-        ariaLabelClose={commonCopy.close_aria}
-        isOpen={open}
-        onClose={() => setOpen(false)}
-        onPrimaryAction={handleSave}
-        primaryText={commonCopy.save_button}
-        secondaryText={commonCopy.cancel_button}
-        title={copy.date_edit_title}
-      >
-        <Stack alignItems="center" mt={tokens.Spacing.XXLarge}>
-          <Calendar
-            beginDate={fromUnixTime(date)}
-            copy={{
-              nextAria: copy.date_next_aria,
-              prevAria: copy.date_prev_aria,
-              today: commonCopy.date_range_picker.today,
-            }}
-            onDateSelected={handleDateSelected}
-            selectionType={CalendarSelectionTypes.Single}
-          />
-        </Stack>
-      </Drawer>
-    </Box>
-  )
-}
-
-export default DateAction

package/src/transactions/components/shared/transactiondetails/actions/DeleteAction.tsx

@@ -1,85 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
-
-import Avatar from '@mui/material/Avatar'
-import Box from '@mui/material/Box'
-import ListItem from '@mui/material/ListItem'
-import ListItemAvatar from '@mui/material/ListItemAvatar'
-import ListItemButton from '@mui/material/ListItemButton'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import ListItemText from '@mui/material/ListItemText'
-
-import { Text } from '@kyper/mui'
-
-import { Dialog, useEvent, useGlobalCopyStore, useTransactionStore } from '../../../../../common'
-
-import type { Transaction } from '../../../../../common'
-
-import { useTransactionsUiStore } from '../../../../context/hooks'
-import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
-
-interface DeleteActionProps {
-  transaction: Transaction
-}
-
-const DeleteAction: React.FC<DeleteActionProps> = ({ transaction }) => {
-  const { onEvent } = useEvent()
-  const { removeTransaction } = useTransactionStore()
-  const { setShouldDisableDrawerScroll } = useTransactionsUiStore()
-  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
-
-  const [open, setOpen] = React.useState(false)
-  const handleDelete = async () => {
-    await removeTransaction(transaction.guid)
-    onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_DELETED)
-  }
-
-  return (
-    <Box className="mx-txn-delete">
-      {transaction && (
-        <ListItem disableGutters={true} disablePadding={true}>
-          <ListItemButton
-            onClick={() => {
-              onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_CLICK)
-              setShouldDisableDrawerScroll(true)
-              setOpen(true)
-            }}
-          >
-            <ListItemAvatar>
-              <Avatar variant="rounded">
-                <DeleteOutlinedIcon color="secondary" fontSize="small" />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText
-              primary={copy.manual_transaction_delete_title}
-              secondary={copy.manual_transaction_delete_subtitle}
-            />
-            <ListItemIcon>
-              <DeleteOutlinedIcon />
-            </ListItemIcon>
-          </ListItemButton>
-        </ListItem>
-      )}
-      <Dialog
-        copy={{ title: copy.manual_transaction_delete_title }}
-        isOpen={open}
-        onClose={() => {
-          setShouldDisableDrawerScroll(false)
-          setOpen(false)
-        }}
-        onPrimaryAction={handleDelete}
-        onSecondaryAction={() => onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_CANCEL)}
-        primaryText={commonCopy.delete_button}
-        secondaryText={commonCopy.cancel_button}
-      >
-        <Text sx={{ whiteSpace: 'normal' }} variant="Paragraph">
-          {copy.manual_transaction_delete_description}
-        </Text>
-      </Dialog>
-    </Box>
-  )
-}
-
-export default observer(DeleteAction)

package/src/transactions/components/shared/transactiondetails/actions/DeleteLogoAction.tsx

@@ -1,88 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Avatar from '@mui/material/Avatar'
-import Box from '@mui/material/Box'
-import ListItem from '@mui/material/ListItem'
-import ListItemAvatar from '@mui/material/ListItemAvatar'
-import ListItemButton from '@mui/material/ListItemButton'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import ListItemText from '@mui/material/ListItemText'
-
-import { Icon, IconWeight, Text } from '@kyper/mui'
-
-import { ANALYTICS_EVENTS, Dialog, useGlobalCopyStore } from '../../../../../common'
-
-import type { Transaction } from '../../../../../common'
-
-import { useTransactionsUiStore } from '../../../../context/hooks'
-import { useEvent, useTransactionStore } from '../../../../../common'
-import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
-
-interface DeleteLogoActionProps {
-  transaction: Transaction
-}
-
-const DeleteLogoAction: React.FC<DeleteLogoActionProps> = ({ transaction }) => {
-  const { onEvent } = useEvent()
-  const { updateTransaction } = useTransactionStore()
-  const { setShouldDisableDrawerScroll } = useTransactionsUiStore()
-  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
-
-  const [open, setOpen] = React.useState(false)
-
-  const handleDeleteLogo = async () => {
-    await updateTransaction({ ...transaction, merchant_guid: '' })
-    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_DELETE_LOGO, {
-      transaction_guid: transaction.guid,
-    })
-  }
-
-  return (
-    <Box className="mx-txn-delete-logo">
-      {transaction && (
-        <ListItem disableGutters={true} disablePadding={true}>
-          <ListItemButton
-            onClick={() => {
-              onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_LOGO_CLICK)
-              setOpen(true)
-            }}
-          >
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: 'border.light' }} variant="rounded">
-                <Icon name="delete" sx={{ color: 'text.primary' }} weight={IconWeight.Dark} />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={copy.merchant_logo_title} secondary={copy.merchant_logo_desc} />
-            <ListItemIcon>
-              <Icon name="chevron_right" weight={IconWeight.Dark} />
-            </ListItemIcon>
-          </ListItemButton>
-        </ListItem>
-      )}
-
-      <Dialog
-        copy={{ title: copy.merchant_logo_modal_title }}
-        isOpen={open}
-        onClose={() => {
-          setShouldDisableDrawerScroll(false)
-          setOpen(false)
-        }}
-        onPrimaryAction={handleDeleteLogo}
-        onSecondaryAction={() => onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DELETE_LOGO_CANCEL)}
-        primaryText={commonCopy.delete_button}
-        secondaryText={commonCopy.cancel_button}
-        title={copy.merchant_logo_modal_title}
-      >
-        <Text sx={{ whiteSpace: 'normal' }} variant="Paragraph">
-          {copy.merchant_logo_modal_desc}
-        </Text>
-        <Text bold={true} sx={{ whiteSpace: 'normal' }} variant="Paragraph">
-          {` ${copy.merchant_logo_modal_desc_bold}`}
-        </Text>
-      </Dialog>
-    </Box>
-  )
-}
-
-export default observer(DeleteLogoAction)

package/src/transactions/components/shared/transactiondetails/actions/HideAction.tsx

@@ -1,126 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Avatar from '@mui/material/Avatar'
-import Box from '@mui/material/Box'
-import ListItem from '@mui/material/ListItem'
-import ListItemAvatar from '@mui/material/ListItemAvatar'
-import ListItemButton from '@mui/material/ListItemButton'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import ListItemText from '@mui/material/ListItemText'
-import Switch from '@mui/material/Switch'
-
-import { Icon, IconWeight, Text } from '@kyper/mui'
-
-import { Dialog, useEvent, useGlobalCopyStore, useTransactionStore } from '../../../../../common'
-
-import type { Transaction } from '../../../../../common'
-
-import { useTransactionsUiStore } from '../../../../context/hooks'
-import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
-
-interface HideActionProps {
-  transaction: Transaction
-}
-
-const HideAction: React.FC<HideActionProps> = ({ transaction }) => {
-  const { onEvent } = useEvent()
-  const { updateTransaction } = useTransactionStore()
-  const { setShouldDisableDrawerScroll } = useTransactionsUiStore()
-  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
-
-  const [open, setOpen] = React.useState(false)
-
-  const isHidden = transaction.is_hidden
-
-  const toggleHide = async () => {
-    await updateTransaction({ ...transaction, is_hidden: !transaction.is_hidden })
-    onEvent(
-      isHidden ? ON_CLICK_EVENTS.ON_TRANSACTION_UNHIDDEN : ON_CLICK_EVENTS.ON_TRANSACTION_HIDDEN,
-    )
-  }
-
-  return (
-    <Box className="mx-txn-hide-transaction">
-      {transaction && (
-        <ListItem disableGutters={true} disablePadding={true}>
-          <ListItemButton
-            aria-checked={isHidden}
-            onClick={() => {
-              onEvent(
-                isHidden
-                  ? ON_CLICK_EVENTS.ON_TRANSACTION_UNHIDE_CLICK
-                  : ON_CLICK_EVENTS.ON_TRANSACTION_HIDE_CLICK,
-              )
-              onEvent(
-                isHidden
-                  ? 'transaction_details_click_unhide_transaction'
-                  : 'transaction_details_click_hide_transaction',
-                {
-                  transaction_guid: transaction.guid,
-                },
-              )
-              setOpen(true)
-            }}
-            role="switch"
-          >
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: 'border.light' }} variant="rounded">
-                {isHidden ? (
-                  <Icon
-                    name="visibilityOff"
-                    sx={{ color: 'text.primary' }}
-                    weight={IconWeight.Dark}
-                  />
-                ) : (
-                  <Icon name="visibility" sx={{ color: 'text.primary' }} weight={IconWeight.Dark} />
-                )}
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText
-              primary={
-                isHidden ? copy.hide_trnx_subtitle_unhide_trnx : copy.hide_trnx_subtitle_hide_trnx
-              }
-              secondary={isHidden ? copy.hide_trnx_desc_unhiding : copy.hide_trnx_desc_hiding}
-            />
-            <ListItemIcon>
-              <Switch
-                checked={isHidden}
-                id="hide-transaction"
-                name="hide-transaction"
-                tabIndex={-1}
-              />
-            </ListItemIcon>
-          </ListItemButton>
-        </ListItem>
-      )}
-
-      <Dialog
-        copy={{
-          title: isHidden ? copy.hide_trnx_subtitle_unhide_trnx : copy.hide_trnx_subtitle_hide_trnx,
-        }}
-        isOpen={open}
-        onClose={() => {
-          setShouldDisableDrawerScroll(false)
-          setOpen(false)
-        }}
-        onPrimaryAction={toggleHide}
-        onSecondaryAction={() =>
-          onEvent(
-            isHidden
-              ? ON_CLICK_EVENTS.ON_TRANSACTION_UNHIDE_CANCEL_CLICK
-              : ON_CLICK_EVENTS.ON_TRANSACTION_HIDE_CANCEL_CLICK,
-          )
-        }
-        primaryText={isHidden ? commonCopy.unhide_button : commonCopy.hide_button}
-        secondaryText={commonCopy.cancel_button}
-      >
-        <Text truncate={false} variant="Paragraph">
-          {isHidden ? copy.hide_trnx_desc_unhiding : copy.hide_trnx_desc_hiding}
-        </Text>
-      </Dialog>
-    </Box>
-  )
-}
-
-export default observer(HideAction)

package/src/transactions/components/shared/transactiondetails/actions/MemoAction.tsx

@@ -1,112 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Avatar from '@mui/material/Avatar'
-import ListItem from '@mui/material/ListItem'
-import ListItemAvatar from '@mui/material/ListItemAvatar'
-import ListItemButton from '@mui/material/ListItemButton'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import ListItemText from '@mui/material/ListItemText'
-import TextField from '@mui/material/TextField'
-
-import { Icon, IconWeight, Text } from '@kyper/mui'
-
-import { ANALYTICS_EVENTS, Drawer, useGlobalCopyStore } from '../../../../../common'
-
-import type { Transaction } from '../../../../../common'
-
-import { useTransactionsUiStore } from '../../../../context/hooks'
-import { useEvent, useTransactionStore } from '../../../../../common'
-import { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'
-
-import TransactionAmountHeader from '../TransactionAmountHeader'
-
-interface MemoActionProps {
-  transaction: Transaction
-}
-
-const MemoAction: React.FC<MemoActionProps> = ({ transaction }) => {
-  const { onEvent } = useEvent()
-  const { updateTransaction } = useTransactionStore()
-  const { updateManualTransaction } = useTransactionsUiStore()
-  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()
-
-  const [open, setOpen] = React.useState(false)
-  const [memoText, setMemoText] = React.useState('')
-
-  React.useEffect(() => {
-    if (open) {
-      setMemoText(transaction.memo ? transaction.memo : '')
-    }
-  }, [open])
-
-  const handleSave = async () => {
-    if (transaction.is_manual && !transaction.guid) {
-      updateManualTransaction({ ...transaction, memo: memoText })
-      setOpen(false)
-      return
-    }
-
-    await updateTransaction({ ...transaction, memo: memoText })
-    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_MEMO, { transaction_guid: transaction.guid })
-    setOpen(false)
-  }
-
-  return (
-    <div className="mx-txn-memo-action">
-      <ListItem disableGutters={true} disablePadding={true}>
-        <ListItemButton
-          onClick={() => {
-            onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_MEMO_CLICK)
-            setOpen(true)
-          }}
-        >
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: 'border.light' }} variant="rounded">
-              <Icon name="article" sx={{ color: 'text.primary' }} weight={IconWeight.Dark} />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={copy.memo_title}
-            primaryTypographyProps={{ variant: 'XSmall' }}
-            secondary={
-              <Text
-                bold={true}
-                sx={{ overflowWrap: 'break-word', whiteSpace: 'wrap' }}
-                variant="Body"
-              >
-                {transaction.memo ? transaction.memo : copy.memo_desc}
-              </Text>
-            }
-          />
-          <ListItemIcon>
-            <Icon name="chevron_right" weight={IconWeight.Dark} />
-          </ListItemIcon>
-        </ListItemButton>
-      </ListItem>
-
-      <Drawer
-        ariaLabelClose={commonCopy.close_aria}
-        isOpen={open}
-        onClose={() => setOpen(false)}
-        onPrimaryAction={handleSave}
-        title={copy.memo_title}
-      >
-        <TransactionAmountHeader transaction={transaction} />
-        <TextField
-          aria-label={copy.memo_desc_aria}
-          focused={true}
-          multiline={true}
-          name="memo"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMemoText(e.target.value)}
-          placeholder={copy.memo_desc}
-          rows={4}
-          sx={{ px: 16 }}
-          value={memoText}
-        />
-      </Drawer>
-    </div>
-  )
-}
-
-export default observer(MemoAction)