(null)
+
+ const { safe, safeLoaded, safeAddress } = useSafeInfo()
+ const { data: subaccounts } = useGetSafesByOwnerQuery(
+ safeLoaded ? { chainId: safe.chainId, ownerAddress: safeAddress } : skipToken,
+ )
+
+ const rows = useMemo(() => {
+ return subaccounts?.safes.map((subaccount) => {
+ return {
+ cells: {
+ owner: {
+ rawValue: subaccount,
+ content: (
+
+ ),
+ },
+ actions: {
+ rawValue: '',
+ sticky: true,
+ content: (
+
+
+ {(isOk) => (
+
+ )}
+
+
+ ),
+ },
+ },
+ }
+ })
+ }, [subaccounts?.safes])
+
+ return (
+ <>
+
+
+
+
+ Subaccounts
+
+
+
+
+
+ Subaccounts are separate wallets owned by your main Account, perfect for organizing different funds and
+ projects.{' '}
+
+ Learn more
+
+
+
+ {subaccounts?.safes.length === 0 && (
+
+ You don't have any Subaccounts yet. Set one up now to better organize your assets
+
+ )}
+
+
+ {(isOk) => (
+
+ )}
+
+
+ {rows && rows.length > 0 && }
+
+
+
+
+ {addressToRename && (
+ setAddressToRename(null)}
+ defaultValues={{ name: '', address: addressToRename }}
+ chainIds={[safe.chainId]}
+ disableAddressInput
+ />
+ )}
+
+ )
+}
diff --git a/src/components/sidebar/SafeListContextMenu/index.tsx b/src/components/sidebar/SafeListContextMenu/index.tsx
index d715110463..7c5002a33a 100644
--- a/src/components/sidebar/SafeListContextMenu/index.tsx
+++ b/src/components/sidebar/SafeListContextMenu/index.tsx
@@ -8,24 +8,35 @@ import ListItemText from '@mui/material/ListItemText'
import EntryDialog from '@/components/address-book/EntryDialog'
import SafeListRemoveDialog from '@/components/sidebar/SafeListRemoveDialog'
+import SubaccountsIcon from '@/public/images/sidebar/subaccounts-icon.svg'
import EditIcon from '@/public/images/common/edit.svg'
import DeleteIcon from '@/public/images/common/delete.svg'
import PlusIcon from '@/public/images/common/plus.svg'
import ContextMenu from '@/components/common/ContextMenu'
-import { trackEvent, OVERVIEW_EVENTS, OVERVIEW_LABELS } from '@/services/analytics'
+import { trackEvent, OVERVIEW_EVENTS, OVERVIEW_LABELS, type AnalyticsEvent } from '@/services/analytics'
import { SvgIcon } from '@mui/material'
import useAddressBook from '@/hooks/useAddressBook'
import { AppRoutes } from '@/config/routes'
import router from 'next/router'
import { CreateSafeOnNewChain } from '@/features/multichain/components/CreateSafeOnNewChain'
+import { useGetSafesByOwnerQuery } from '@/store/slices'
+import { SubaccountsPopover } from '../SubaccountsPopover'
+import { SUBACCOUNT_EVENTS, SUBACCOUNT_LABELS } from '@/services/analytics/events/subaccounts'
+import { skipToken } from '@reduxjs/toolkit/query'
enum ModalType {
+ SUBACCOUNTS = 'subaccounts',
RENAME = 'rename',
REMOVE = 'remove',
ADD_CHAIN = 'add_chain',
}
-const defaultOpen = { [ModalType.RENAME]: false, [ModalType.REMOVE]: false, [ModalType.ADD_CHAIN]: false }
+const defaultOpen = {
+ [ModalType.SUBACCOUNTS]: false,
+ [ModalType.RENAME]: false,
+ [ModalType.REMOVE]: false,
+ [ModalType.ADD_CHAIN]: false,
+}
const SafeListContextMenu = ({
name,
@@ -42,10 +53,11 @@ const SafeListContextMenu = ({
rename: boolean
undeployedSafe: boolean
}): ReactElement => {
+ const { data: subaccounts } = useGetSafesByOwnerQuery(address ? { chainId, ownerAddress: address } : skipToken)
const addressBook = useAddressBook()
const hasName = address in addressBook
- const [anchorEl, setAnchorEl] = useState()
+ const [anchorEl, setAnchorEl] = useState(null)
const [open, setOpen] = useState(defaultOpen)
const trackingLabel =
@@ -56,17 +68,17 @@ const SafeListContextMenu = ({
}
const handleCloseContextMenu = () => {
- setAnchorEl(undefined)
+ setAnchorEl(null)
}
- const handleOpenModal =
- (type: keyof typeof open, event: typeof OVERVIEW_EVENTS.SIDEBAR_RENAME | typeof OVERVIEW_EVENTS.SIDEBAR_RENAME) =>
- () => {
+ const handleOpenModal = (type: keyof typeof open, event: AnalyticsEvent) => () => {
+ if (type !== ModalType.SUBACCOUNTS) {
handleCloseContextMenu()
- setOpen((prev) => ({ ...prev, [type]: true }))
-
- trackEvent({ ...event, label: trackingLabel })
}
+ setOpen((prev) => ({ ...prev, [type]: true }))
+
+ trackEvent({ ...event, label: trackingLabel })
+ }
const handleCloseModal = () => {
setOpen(defaultOpen)
@@ -78,6 +90,20 @@ const SafeListContextMenu = ({
({ color: palette.border.main })} />
+ {!undeployedSafe && subaccounts?.safes && subaccounts.safes.length > 0 && (
+
+ )}
+
{rename && (
+ {open[ModalType.SUBACCOUNTS] && (
+
+ )}
+
{open[ModalType.RENAME] && (
{
const { balances } = useVisibleBalances()
@@ -114,6 +116,10 @@ const SafeHeader = (): ReactElement => {
+
+
diff --git a/src/components/sidebar/SubaccountInfo/index.tsx b/src/components/sidebar/SubaccountInfo/index.tsx
new file mode 100644
index 0000000000..6bf792ab89
--- /dev/null
+++ b/src/components/sidebar/SubaccountInfo/index.tsx
@@ -0,0 +1,62 @@
+import { Tooltip, SvgIcon, Typography, List, ListItem, Box, ListItemAvatar, Avatar, ListItemText } from '@mui/material'
+import CheckIcon from '@mui/icons-material/Check'
+import type { ReactElement } from 'react'
+
+import SubaccountsIcon from '@/public/images/sidebar/subaccounts-icon.svg'
+import Subaccounts from '@/public/images/sidebar/subaccounts.svg'
+import InfoIcon from '@/public/images/notifications/info.svg'
+
+export function SubaccountInfo(): ReactElement {
+ return (
+
+
+
+ No Subaccounts yet
+
+
+
+
+
+
+
+
+
+
+
+ Subaccounts allow you to:
+
+
+
+ {[
+ 'rebuild your organizational structure onchain',
+ 'explore new DeFi opportunities without exposing your main Account',
+ 'deploy specialized modules and enable easier access through passkeys and other signers',
+ ].map((item) => {
+ return (
+
+
+
+
+
+
+
+ {item}
+
+
+ )
+ })}
+
+
+ )
+}
diff --git a/src/components/sidebar/SubaccountsButton/index.tsx b/src/components/sidebar/SubaccountsButton/index.tsx
new file mode 100644
index 0000000000..27df8050a6
--- /dev/null
+++ b/src/components/sidebar/SubaccountsButton/index.tsx
@@ -0,0 +1,50 @@
+import { Tooltip, IconButton, SvgIcon, Badge, Typography } from '@mui/material'
+import { useState } from 'react'
+import type { ReactElement } from 'react'
+
+import SubaccountsIcon from '@/public/images/sidebar/subaccounts-icon.svg'
+import { SubaccountsPopover } from '@/components/sidebar/SubaccountsPopover'
+import { useGetSafesByOwnerQuery } from '@/store/slices'
+import { skipToken } from '@reduxjs/toolkit/query'
+
+import headerCss from '@/components/sidebar/SidebarHeader/styles.module.css'
+import css from './styles.module.css'
+
+export function SubaccountsButton({ chainId, safeAddress }: { chainId: string; safeAddress: string }): ReactElement {
+ const [anchorEl, setAnchorEl] = useState(null)
+ const { data } = useGetSafesByOwnerQuery(safeAddress ? { chainId, ownerAddress: safeAddress } : skipToken)
+ const subaccounts = data?.safes ?? []
+
+ const onClick = (event: React.MouseEvent) => {
+ setAnchorEl(event.currentTarget)
+ }
+ const onClose = () => {
+ setAnchorEl(null)
+ }
+
+ return (
+ <>
+
+ 0} variant="dot" className={css.badge}>
+
+
+ {subaccounts.length > 0 && (
+
+ {subaccounts.length}
+
+ )}
+
+
+
+
+
+ )
+}
diff --git a/src/components/sidebar/SubaccountsButton/styles.module.css b/src/components/sidebar/SubaccountsButton/styles.module.css
new file mode 100644
index 0000000000..e7f1cb4f90
--- /dev/null
+++ b/src/components/sidebar/SubaccountsButton/styles.module.css
@@ -0,0 +1,22 @@
+.badge :global .MuiBadge-badge {
+ border: 1px solid var(--color-background-main);
+ border-radius: 50%;
+ box-sizing: content-box;
+ right: 12px;
+ top: 8px;
+ background-color: var(--color-secondary-main);
+ height: 6px;
+ min-width: 6px;
+}
+
+.count {
+ margin-left: calc(var(--space-1) / 2);
+ background-color: var(--color-success-light);
+ border-radius: 100%;
+ width: 18px;
+ height: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--color-static-main);
+}
diff --git a/src/components/sidebar/SubaccountsList/index.tsx b/src/components/sidebar/SubaccountsList/index.tsx
new file mode 100644
index 0000000000..867745af04
--- /dev/null
+++ b/src/components/sidebar/SubaccountsList/index.tsx
@@ -0,0 +1,109 @@
+import Track from '@/components/common/Track'
+import { SUBACCOUNT_EVENTS, SUBACCOUNT_LABELS } from '@/services/analytics/events/subaccounts'
+import { ChevronRight } from '@mui/icons-material'
+import { List, ListItem, ListItemAvatar, ListItemButton, ListItemText, Typography } from '@mui/material'
+import { useState, type ReactElement } from 'react'
+import Identicon from '@/components/common/Identicon'
+import { shortenAddress } from '@/utils/formatters'
+import useAddressBook from '@/hooks/useAddressBook'
+import { trackEvent } from '@/services/analytics'
+import Link from 'next/link'
+import { AppRoutes } from '@/config/routes'
+import { useCurrentChain } from '@/hooks/useChains'
+
+const MAX_SUBACCOUNTS = 5
+
+export function SubaccountsList({
+ onClose,
+ subaccounts,
+}: {
+ onClose: () => void
+ subaccounts: Array
+}): ReactElement {
+ const [showAll, setShowAll] = useState(false)
+ const subaccountsToShow = showAll ? subaccounts : subaccounts.slice(0, MAX_SUBACCOUNTS)
+
+ const onShowAll = () => {
+ setShowAll(true)
+ }
+
+ return (
+
+ {subaccountsToShow.map((subaccount) => {
+ return
+ })}
+ {subaccounts.length > MAX_SUBACCOUNTS && !showAll && (
+
+ )}
+
+ )
+}
+
+function SubaccountListItem({ onClose, subaccount }: { onClose: () => void; subaccount: string }): ReactElement {
+ const chain = useCurrentChain()
+ const addressBook = useAddressBook()
+ const name = addressBook[subaccount]
+
+ const onClick = () => {
+ // Note: using the Track element breaks accessibility/styles
+ trackEvent({ ...SUBACCOUNT_EVENTS.OPEN_SUBACCOUNT, label: SUBACCOUNT_LABELS.list })
+
+ onClose()
+ }
+
+ return (
+ `1px solid ${palette.border.light}`,
+ borderRadius: ({ shape }) => `${shape.borderRadius}px`,
+ p: 0,
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/sidebar/SubaccountsPopover/index.tsx b/src/components/sidebar/SubaccountsPopover/index.tsx
new file mode 100644
index 0000000000..0d6b229534
--- /dev/null
+++ b/src/components/sidebar/SubaccountsPopover/index.tsx
@@ -0,0 +1,77 @@
+import { SvgIcon, Popover, Button, Box } from '@mui/material'
+import { useContext } from 'react'
+import type { ReactElement } from 'react'
+
+import AddIcon from '@/public/images/common/add.svg'
+import { ModalDialogTitle } from '@/components/common/ModalDialog'
+import { CreateSubaccount } from '@/components/tx-flow/flows/CreateSubaccount'
+import { TxModalContext } from '@/components/tx-flow'
+import { SubaccountsList } from '@/components/sidebar/SubaccountsList'
+import { SubaccountInfo } from '@/components/sidebar/SubaccountInfo'
+import Track from '@/components/common/Track'
+import { SUBACCOUNT_EVENTS } from '@/services/analytics/events/subaccounts'
+
+export function SubaccountsPopover({
+ anchorEl,
+ onClose,
+ subaccounts,
+}: {
+ anchorEl: HTMLElement | null
+ onClose: () => void
+ subaccounts: Array
+}): ReactElement {
+ const { setTxFlow } = useContext(TxModalContext)
+
+ const onAdd = () => {
+ setTxFlow()
+ onClose()
+ }
+
+ return (
+
+ `1px solid ${palette.border.light}` }}
+ >
+ Subaccounts
+
+
+ {subaccounts.length === 0 ? (
+
+ ) : (
+
+
+
+ )}
+
+
+
+ )
+}
diff --git a/src/components/tx-flow/flows/CreateSubaccount/ReviewSubaccount.tsx b/src/components/tx-flow/flows/CreateSubaccount/ReviewSubaccount.tsx
new file mode 100644
index 0000000000..6f8b0e5553
--- /dev/null
+++ b/src/components/tx-flow/flows/CreateSubaccount/ReviewSubaccount.tsx
@@ -0,0 +1,151 @@
+import { useContext, useEffect, useMemo } from 'react'
+
+import SignOrExecuteForm from '@/components/tx/SignOrExecuteForm'
+import { SafeTxContext } from '@/components/tx-flow/SafeTxProvider'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import useBalances from '@/hooks/useBalances'
+import { useCurrentChain } from '@/hooks/useChains'
+import { useAppDispatch } from '@/store'
+import { upsertAddressBookEntries } from '@/store/addressBookSlice'
+import { getLatestSafeVersion } from '@/utils/chains'
+import useAsync from '@/hooks/useAsync'
+import { createNewUndeployedSafeWithoutSalt, encodeSafeCreationTx } from '@/components/new-safe/create/logic'
+import {
+ SetupSubaccountFormAssetFields,
+ type SetupSubaccountForm,
+} from '@/components/tx-flow/flows/CreateSubaccount/SetupSubaccount'
+import { useGetSafesByOwnerQuery } from '@/store/slices'
+import { predictAddressBasedOnReplayData } from '@/features/multichain/utils/utils'
+import { useWeb3ReadOnly } from '@/hooks/wallets/web3'
+import { createTokenTransferParams } from '@/services/tx/tokenTransferParams'
+import { createMultiSendCallOnlyTx, createTx } from '@/services/tx/tx-sender'
+import type { MetaTransactionData, SafeTransaction } from '@safe-global/safe-core-sdk-types'
+import EthHashInfo from '@/components/common/EthHashInfo'
+import { Grid, Typography } from '@mui/material'
+import { skipToken } from '@reduxjs/toolkit/query'
+
+export function ReviewSubaccount({ params }: { params: SetupSubaccountForm }) {
+ const dispatch = useAppDispatch()
+ const { safeAddress, safe, safeLoaded } = useSafeInfo()
+ const chain = useCurrentChain()
+ const { setSafeTx, setSafeTxError } = useContext(SafeTxContext)
+ const { balances } = useBalances()
+ const provider = useWeb3ReadOnly()
+ const { data: subaccounts } = useGetSafesByOwnerQuery(
+ safeLoaded ? { chainId: safe.chainId, ownerAddress: safeAddress } : skipToken,
+ )
+ const version = getLatestSafeVersion(chain)
+
+ const safeAccountConfig = useMemo(() => {
+ if (!chain || !subaccounts) {
+ return
+ }
+
+ const undeployedSafe = createNewUndeployedSafeWithoutSalt(
+ version,
+ {
+ owners: [safeAddress],
+ threshold: 1,
+ },
+ chain,
+ )
+ const saltNonce = Date.now().toString()
+
+ return {
+ ...undeployedSafe,
+ saltNonce,
+ }
+ }, [chain, safeAddress, subaccounts, version])
+
+ const [predictedSafeAddress] = useAsync(async () => {
+ if (provider && safeAccountConfig) {
+ return predictAddressBasedOnReplayData(safeAccountConfig, provider)
+ }
+ }, [provider, safeAccountConfig])
+
+ useEffect(() => {
+ if (!chain || !safeAccountConfig || !predictedSafeAddress) {
+ return
+ }
+
+ const deploymentTx = {
+ to: safeAccountConfig.factoryAddress,
+ data: encodeSafeCreationTx(safeAccountConfig, chain),
+ value: '0',
+ }
+
+ const fundingTxs: Array = []
+
+ for (const asset of params.assets) {
+ const token = balances.items.find((item) => {
+ return item.tokenInfo.address === asset[SetupSubaccountFormAssetFields.tokenAddress]
+ })
+
+ if (token) {
+ fundingTxs.push(
+ createTokenTransferParams(
+ predictedSafeAddress,
+ asset[SetupSubaccountFormAssetFields.amount],
+ token.tokenInfo.decimals,
+ token.tokenInfo.address,
+ ),
+ )
+ }
+ }
+
+ const createSafeTx = async (): Promise => {
+ const isMultiSend = fundingTxs.length > 0
+ return isMultiSend ? createMultiSendCallOnlyTx([deploymentTx, ...fundingTxs]) : createTx(deploymentTx)
+ }
+
+ createSafeTx().then(setSafeTx).catch(setSafeTxError)
+ }, [chain, params.assets, safeAccountConfig, predictedSafeAddress, balances.items, setSafeTx, setSafeTxError])
+
+ const onSubmit = () => {
+ if (!predictedSafeAddress) {
+ return
+ }
+ dispatch(
+ upsertAddressBookEntries({
+ chainIds: [safe.chainId],
+ address: predictedSafeAddress,
+ name: params.name,
+ }),
+ )
+ }
+
+ return (
+
+ {predictedSafeAddress && (
+
+
+
+ Subaccount
+
+
+
+
+
+
+
+ )}
+
+ )
+}
diff --git a/src/components/tx-flow/flows/CreateSubaccount/SetupSubaccount.tsx b/src/components/tx-flow/flows/CreateSubaccount/SetupSubaccount.tsx
new file mode 100644
index 0000000000..f2851e068d
--- /dev/null
+++ b/src/components/tx-flow/flows/CreateSubaccount/SetupSubaccount.tsx
@@ -0,0 +1,260 @@
+import {
+ Box,
+ Button,
+ CardActions,
+ Divider,
+ FormControl,
+ IconButton,
+ InputAdornment,
+ InputLabel,
+ MenuItem,
+ SvgIcon,
+ TextField,
+ Tooltip,
+ Typography,
+} from '@mui/material'
+import classNames from 'classnames'
+import { Controller, FormProvider, useFieldArray, useForm, useFormContext } from 'react-hook-form'
+
+import InfoIcon from '@/public/images/notifications/info.svg'
+import AddIcon from '@/public/images/common/add.svg'
+import DeleteIcon from '@/public/images/common/delete.svg'
+import TxCard from '@/components/tx-flow/common/TxCard'
+import useSafeAddress from '@/hooks/useSafeAddress'
+import useAddressBook from '@/hooks/useAddressBook'
+import NameInput from '@/components/common/NameInput'
+import tokenInputCss from '@/components/common/TokenAmountInput/styles.module.css'
+import NumberField from '@/components/common/NumberField'
+import { useVisibleBalances } from '@/hooks/useVisibleBalances'
+import { AutocompleteItem } from '@/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer'
+import { validateDecimalLength, validateLimitedAmount } from '@/utils/validation'
+import { safeFormatUnits } from '@/utils/formatters'
+import { useMnemonicSafeName } from '@/hooks/useMnemonicName'
+
+import css from '@/components/tx-flow/flows/CreateSubaccount/styles.module.css'
+import commonCss from '@/components/tx-flow/common/styles.module.css'
+
+export type SetupSubaccountForm = {
+ [SetupSubaccountFormFields.name]: string
+ [SetupSubaccountFormFields.assets]: Array>
+}
+
+export enum SetupSubaccountFormFields {
+ name = 'name',
+ assets = 'assets',
+}
+
+export enum SetupSubaccountFormAssetFields {
+ tokenAddress = 'tokenAddress',
+ amount = 'amount',
+}
+
+export function SetUpSubaccount({
+ params,
+ onSubmit,
+}: {
+ params: SetupSubaccountForm
+ onSubmit: (params: SetupSubaccountForm) => void
+}) {
+ const addressBook = useAddressBook()
+ const safeAddress = useSafeAddress()
+ const randomName = useMnemonicSafeName()
+ const fallbackName = `${addressBook[safeAddress] ?? randomName} Subaccount`
+
+ const formMethods = useForm({
+ defaultValues: params,
+ mode: 'onChange',
+ })
+
+ const onFormSubmit = (data: SetupSubaccountForm) => {
+ onSubmit({
+ ...data,
+ [SetupSubaccountFormFields.name]: data[SetupSubaccountFormFields.name] || fallbackName,
+ })
+ }
+
+ return (
+
+
+
+
+
+ )
+}
+
+/**
+ * Note: the following is very similar to TokenAmountInput but with key differences to support
+ * a field array. Adjusting the former was initially attempted but proved to be too complex.
+ * We should consider refactoring both to be more "pure" to share easier across components.
+ */
+function AssetInputs({ name }: { name: SetupSubaccountFormFields.assets }) {
+ const { balances } = useVisibleBalances()
+
+ const formMethods = useFormContext()
+ const fieldArray = useFieldArray({ name })
+
+ const selectedAssets = formMethods.watch(name)
+ const nonSelectedAssets = balances.items.filter((item) => {
+ return !selectedAssets.map((asset) => asset.tokenAddress).includes(item.tokenInfo.address)
+ })
+ const defaultAsset: SetupSubaccountForm[typeof name][number] = {
+ tokenAddress: nonSelectedAssets[0]?.tokenInfo.address,
+ amount: '',
+ }
+
+ return (
+ <>
+ {fieldArray.fields.map((field, index) => {
+ const errors = formMethods.formState.errors?.[name]?.[index]
+ const label =
+ errors?.[SetupSubaccountFormAssetFields.tokenAddress]?.message ||
+ errors?.[SetupSubaccountFormAssetFields.amount]?.message ||
+ 'Amount'
+ const isError = !!errors && Object.keys(errors).length > 0
+
+ const thisAsset = balances.items.find((item) => {
+ return item.tokenInfo.address === selectedAssets[index][SetupSubaccountFormAssetFields.tokenAddress]
+ })
+ const thisAndNonSelectedAssets = balances.items.filter((item) => {
+ return (
+ item.tokenInfo.address === thisAsset?.tokenInfo.address ||
+ nonSelectedAssets.some((nonSelected) => item.tokenInfo.address === nonSelected.tokenInfo.address)
+ )
+ })
+ return (
+
+
+
+ {label}
+
+
+
+
{
+ return (
+ validateLimitedAmount(value, thisAsset?.tokenInfo.decimals, thisAsset?.balance) ||
+ validateDecimalLength(value, thisAsset?.tokenInfo.decimals)
+ )
+ },
+ }}
+ render={({ field }) => {
+ const onClickMax = () => {
+ if (thisAsset) {
+ const maxAmount = safeFormatUnits(thisAsset.balance, thisAsset.tokenInfo.decimals)
+ field.onChange(maxAmount)
+ }
+ }
+ return (
+
+ Max
+
+ ),
+ }}
+ className={tokenInputCss.amount}
+ required
+ placeholder="0"
+ {...field}
+ />
+ )
+ }}
+ />
+
+
+
+ {
+ return (
+
+ {thisAndNonSelectedAssets.map((item) => {
+ return (
+
+ )
+ })}
+
+ )
+ }}
+ />
+