diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/components/brave_wallet/browser/brave_wallet_constants.h index 087575c52798..850e5e96955e 100644 --- a/components/brave_wallet/browser/brave_wallet_constants.h +++ b/components/brave_wallet/browser/brave_wallet_constants.h @@ -186,6 +186,8 @@ constexpr webui::LocalizedString kLocalizedStrings[] = { {"braveWalletToolTipCopyToClipboard", IDS_BRAVE_WALLET_TOOL_TIP_COPY_TO_CLIPBOARD}, {"braveWalletAccountsPrimary", IDS_BRAVE_WALLET_ACCOUNTS_PRIMARY}, + {"braveWalletAccountsPrimaryDisclaimer", + IDS_BRAVE_WALLET_ACCOUNTS_PRIMARY_DISCLAIMER}, {"braveWalletAccountsSecondary", IDS_BRAVE_WALLET_ACCOUNTS_SECONDARY}, {"braveWalletAccountsSecondaryDisclaimer", IDS_BRAVE_WALLET_ACCOUNTS_SECONDARY_DISCLAIMER}, @@ -193,8 +195,20 @@ constexpr webui::LocalizedString kLocalizedStrings[] = { {"braveWalletAccountsEditVisibleAssets", IDS_BRAVE_WALLET_ACCOUNTS_EDIT_VISIBLE_ASSETS}, {"braveWalletAddAccountCreate", IDS_BRAVE_WALLET_ADD_ACCOUNT_CREATE}, + {"braveWalletCreateAccount", IDS_BRAVE_WALLET_CREATE_ACCOUNT}, {"braveWalletCreateAccountButton", IDS_BRAVE_WALLET_CREATE_ACCOUNT_BUTTON}, + {"braveWalletCreateAccountImportAccount", + IDS_BRAVE_WALLET_CREATE_ACCOUNT_IMPORT_ACCOUNT}, + {"braveWalletCreateAccountTitle", IDS_BRAVE_WALLET_CREATE_ACCOUNT_TITLE}, + {"braveWalletCreateAccountEthereumDescription", + IDS_BRAVE_WALLET_CREATE_ACCOUNT_ETHEREUM_DESCRIPTION}, + {"braveWalletCreateAccountSolanaDescription", + IDS_BRAVE_WALLET_CREATE_ACCOUNT_SOLANA_DESCRIPTION}, + {"braveWalletCreateAccountFilecoinDescription", + IDS_BRAVE_WALLET_CREATE_ACCOUNT_FILECOIN_DESCRIPTION}, {"braveWalletAddAccountImport", IDS_BRAVE_WALLET_ADD_ACCOUNT_IMPORT}, + {"braveWalletAddAccountImportHardware", + IDS_BRAVE_WALLET_ADD_ACCOUNT_IMPORT_HARDWARE}, {"braveWalletAddAccountHardware", IDS_BRAVE_WALLET_ADD_ACCOUNT_HARDWARE}, {"braveWalletAddAccountConnect", IDS_BRAVE_WALLET_ADD_ACCOUNT_CONNECT}, {"braveWalletAddAccountPlaceholder", diff --git a/components/brave_wallet_ui/assets/asset-icons/filecoin-asset-icon.svg b/components/brave_wallet_ui/assets/asset-icons/filecoin-asset-icon.svg new file mode 100644 index 000000000000..e29a55aa7af4 --- /dev/null +++ b/components/brave_wallet_ui/assets/asset-icons/filecoin-asset-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/components/brave_wallet_ui/assets/asset-icons/index.ts b/components/brave_wallet_ui/assets/asset-icons/index.ts index 256f6f540622..26aaf1434f74 100644 --- a/components/brave_wallet_ui/assets/asset-icons/index.ts +++ b/components/brave_wallet_ui/assets/asset-icons/index.ts @@ -4,6 +4,8 @@ import BNBIconUrl from './bnb-asset-icon.svg' import BTCIconUrl from './btc-asset-icon.svg' import ETHIconUrl from './eth-asset-icon.svg' import ZRXIconUrl from './zrx-asset-icon.svg' +import SOLIconUrl from './sol-asset-icon.svg' +import FILECOINIconUrl from './filecoin-asset-icon.svg' export { BATIconUrl, @@ -11,5 +13,7 @@ export { BNBIconUrl, BTCIconUrl, ETHIconUrl, - ZRXIconUrl + ZRXIconUrl, + SOLIconUrl, + FILECOINIconUrl } diff --git a/components/brave_wallet_ui/assets/asset-icons/sol-asset-icon.svg b/components/brave_wallet_ui/assets/asset-icons/sol-asset-icon.svg new file mode 100644 index 000000000000..a7707104fc47 --- /dev/null +++ b/components/brave_wallet_ui/assets/asset-icons/sol-asset-icon.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/account-type-item/index.tsx b/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/account-type-item/index.tsx new file mode 100644 index 000000000000..2c5dd38c1a50 --- /dev/null +++ b/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/account-type-item/index.tsx @@ -0,0 +1,50 @@ +import * as React from 'react' + +import { NavButton } from '../../../../extension' + +// Styled Components +import { + StyledWrapper, + InfoColumn, + Title, + Description, + NetworkIcon, + LeftSide +} from './style' + +export interface Props { + onClickCreate: () => void + icon: string + title: string + description: string + buttonText: string +} + +const AccountTypeItem = (props: Props) => { + const { + title, + description, + buttonText, + icon, + onClickCreate + } = props + + return ( + + + + + {title} + {description} + + + + + ) +} + +export default AccountTypeItem diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/account-type-item/style.ts b/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/account-type-item/style.ts new file mode 100644 index 000000000000..4d18ae8921eb --- /dev/null +++ b/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/account-type-item/style.ts @@ -0,0 +1,49 @@ +import styled from 'styled-components' + +export const StyledWrapper = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + height: 100px; +` + +export const InfoColumn = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: column; +` + +export const Title = styled.span` + font-family: Poppins; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.01em; + font-weight: 600; + color: ${(p) => p.theme.color.text01}; + margin-bottom: 5px; +` + +export const Description = styled.span` + font-family: Poppins; + font-size: 12px; + line-height: 18px; + letter-spacing: 0.01em; + color: ${(p) => p.theme.color.text02}; + max-width: 355px; +` + +export const NetworkIcon = styled.img` + width: 45px; + height: 45px; + margin-right: 10px; +` + +export const LeftSide = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; +` diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/hardware-wallet-connect/index.tsx b/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/hardware-wallet-connect/index.tsx index 8e42283913bf..7f507fc3d618 100644 --- a/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/hardware-wallet-connect/index.tsx +++ b/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/hardware-wallet-connect/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { getLocale } from '../../../../../../common/locale' import { NavButton } from '../../../../extension' -import { BraveWallet, WalletAccountType } from '../../../../../constants/types' +import { BraveWallet, WalletAccountType, CreateAccountOptionsType } from '../../../../../constants/types' // Styled Components import { DisclaimerText, InfoIcon } from '../style' import { @@ -29,11 +29,13 @@ export interface Props { onAddHardwareAccounts: (selected: BraveWallet.HardwareWalletAccount[]) => void getBalance: (address: string) => Promise preAddedHardwareWalletAccounts: WalletAccountType[] + selectedAccountType: CreateAccountOptionsType } const derivationBatch = 4 export default function (props: Props) { + const { selectedAccountType } = props const [selectedHardwareWallet, setSelectedHardwareWallet] = React.useState(BraveWallet.LEDGER_HARDWARE_VENDOR) const [isConnecting, setIsConnecting] = React.useState(false) const [accounts, setAccounts] = React.useState([]) @@ -189,7 +191,7 @@ export default function (props: Props) { {getLocale('braveWalletConnectHardwareInfo1').replace('$1', selectedHardwareWallet)} - {getLocale('braveWalletConnectHardwareInfo2')} + {getLocale('braveWalletConnectHardwareInfo2').replace('$1', selectedAccountType.name)} {connectionError && diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/index.tsx b/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/index.tsx index edebe72d160e..c7b279c88025 100644 --- a/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/index.tsx +++ b/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/index.tsx @@ -3,13 +3,15 @@ import * as React from 'react' import { BraveWallet, AddAccountNavTypes, - WalletAccountType + WalletAccountType, + CreateAccountOptionsType } from '../../../../constants/types' -import { AddAccountNavOptions } from '../../../../options/add-account-nav-options' import { Select } from 'brave-ui/components' -import { PopupModal, TopTabNav } from '../..' -import { NavButton } from '../../../extension' +import { PopupModal } from '../..' +import { NavButton, DividerLine } from '../../../extension' import { getLocale } from '../../../../../common/locale' +import AccountTypeItem from './account-type-item' +import { CreateAccountOptions } from '../../../../options/create-account-options' // Styled Components import { Input, @@ -19,7 +21,10 @@ import { SelectWrapper, ImportButton, ImportRow, - ErrorText + ErrorText, + SelectAccountTypeWrapper, + SelectAccountTitle, + SelectAccountItemWrapper } from './style' import { HardwareWalletConnectOpts } from './hardware-wallet-connect/types' @@ -39,14 +44,14 @@ export interface Props { onRouteBackToAccounts: () => void hasImportError: boolean accounts: WalletAccountType[] - title: string + tab: AddAccountNavTypes } const AddAccountModal = (props: Props) => { const { - title, accounts, hasImportError, + tab, onClose, onCreateAccount, onImportAccount, @@ -59,12 +64,12 @@ const AddAccountModal = (props: Props) => { onRouteBackToAccounts } = props const suggestedAccountName = `${getLocale('braveWalletAccount')} ${accounts.length + 1}` - const [tab, setTab] = React.useState('create') const [importOption, setImportOption] = React.useState('key') const [file, setFile] = React.useState() const [accountName, setAccountName] = React.useState(suggestedAccountName) const [privateKey, setPrivateKey] = React.useState('') const [password, setPassword] = React.useState('') + const [selectedAccountType, setSelectedAccountType] = React.useState(undefined) const passwordInputRef = React.useRef(null) const importError = React.useMemo(() => { @@ -104,9 +109,17 @@ const AddAccountModal = (props: Props) => { } /* eslint-enable @typescript-eslint/no-unused-vars */ - const onSubmit = () => { + const onClickCreateAccount = () => { if (tab === 'create') { - onCreateAccount(accountName) + if (selectedAccountType?.network === 'ethereum') { + onCreateAccount(accountName) + } + if (selectedAccountType?.network === 'solana') { + // logic here to create a solana account + } + if (selectedAccountType?.network === 'filecoin') { + // logic here to create a filecoin account + } onRouteBackToAccounts() return } @@ -130,20 +143,10 @@ const AddAccountModal = (props: Props) => { const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === 'Enter') { - onSubmit() + onClickCreateAccount() } } - const onSelectTab = (id: AddAccountNavTypes) => { - if (id === 'create') { - setAccountName(suggestedAccountName) - } else { - setAccountName('') - onRouteBackToAccounts() - } - setTab(id) - } - const onImportOptionChange = (value: string) => { setImportOption(value) } @@ -176,98 +179,153 @@ const AddAccountModal = (props: Props) => { return false }, [tab, importOption, accountName, privateKey, file]) - return ( - - + const modalTitle = React.useMemo((): string => { + switch (tab) { + case 'create': + // Will need different logic here to determine how many accounts a user has for each network. + setAccountName(selectedAccountType?.name + ' ' + suggestedAccountName) + return selectedAccountType + ? getLocale('braveWalletCreateAccount').replace('$1', selectedAccountType.name) + : getLocale('braveWalletCreateAccountButton') + case 'import': + setAccountName('') + return selectedAccountType + ? getLocale('braveWalletCreateAccountImportAccount').replace('$1', selectedAccountType.name) + : getLocale('braveWalletAddAccountImport') + case 'hardware': + setAccountName('') + return getLocale('braveWalletAddAccountImportHardware') + default: + return '' + } + }, [tab, selectedAccountType]) - - {tab === 'import' && - <> - - {getLocale('braveWalletImportAccountDisclaimer')} - - - - - {importError && - {getLocale('braveWalletImportAccountError')} - } - {importOption === 'key' ? ( - - ) : ( - <> - - {getLocale('braveWalletImportAccountUploadButton')} - {file ? reduceFileName(file[0].name) : getLocale('braveWalletImportAccountUploadPlaceholder')} - - + const onSelectAccountType = (accountType: CreateAccountOptionsType) => () => { + setSelectedAccountType(accountType) + } + + const buttonText = React.useMemo((): string => { + switch (tab) { + case 'create': + return getLocale('braveWalletAddAccountCreate') + case 'import': + return getLocale('braveWalletAddAccountImport') + case 'hardware': + return getLocale('braveWalletAddAccountConnect') + default: + return '' + } + }, [tab]) + + return ( + + + {selectedAccountType ? ( + + {tab === 'import' && + <> + + {getLocale('braveWalletImportAccountDisclaimer')} + + + + + {importError && + {getLocale('braveWalletImportAccountError')} + } + {importOption === 'key' ? ( - - )} - - } - {tab !== 'hardware' && - <> - - + + {getLocale('braveWalletImportAccountUploadButton')} + {file ? reduceFileName(file[0].name) : getLocale('braveWalletImportAccountUploadPlaceholder')} + + + + + )} + + } + {tab !== 'hardware' && + <> + + + + } + {tab === 'hardware' && + ['Ledger', 'Trezor'].includes(account.accountType)) } - buttonType='primary' /> - - } - {tab === 'hardware' && - ['Ledger', 'Trezor'].includes(account.accountType)) - } - /> - } - + } + + ) : ( + + {getLocale('braveWalletCreateAccountTitle')} + + {CreateAccountOptions().map((network) => + + + {network.network !== 'filecoin' && + + } + + )} + + )} ) } diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/style.ts b/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/style.ts index 17033cf9483e..8cacc9a22c59 100644 --- a/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/style.ts +++ b/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/style.ts @@ -119,3 +119,31 @@ export const ErrorText = styled.span` color: ${(p) => p.theme.color.errorText}; margin-bottom: 10px; ` + +export const SelectAccountTypeWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + width: 100%; + padding: 24px; + min-height: 320px; +` + +export const SelectAccountItemWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; +` + +export const SelectAccountTitle = styled.span` + font-family: Poppins; + font-size: 12px; + line-height: 18px; + font-weight: 600; + letter-spacing: 0.01em; + color: ${(p) => p.theme.color.text02}; + margin-bottom: 12px; +` diff --git a/components/brave_wallet_ui/components/desktop/views/accounts/index.tsx b/components/brave_wallet_ui/components/desktop/views/accounts/index.tsx index 6b80ee075437..78291ca759d4 100644 --- a/components/brave_wallet_ui/components/desktop/views/accounts/index.tsx +++ b/components/brave_wallet_ui/components/desktop/views/accounts/index.tsx @@ -6,7 +6,8 @@ import { UpdateAccountNamePayloadType, AccountTransactions, BraveWallet, - DefaultCurrencies + DefaultCurrencies, + AddAccountNavTypes } from '../../../../constants/types' import { reduceAddress } from '../../../../utils/reduce-address' import { copyToClipboard } from '../../../../utils/copy-to-clipboard' @@ -19,7 +20,6 @@ import { StyledWrapper, SectionTitle, PrimaryListContainer, - PrimaryRow, SecondaryListContainer, DisclaimerText, SubDivider, @@ -33,7 +33,12 @@ import { QRCodeIcon, EditIcon, SubviewSectionTitle, - TransactionPlaceholderContainer + TransactionPlaceholderContainer, + ButtonRow, + StyledButton, + HardwareIcon, + ButtonText, + WalletIcon } from './style' import { TransactionPlaceholderText, Spacer } from '../portfolio/style' @@ -60,7 +65,7 @@ export interface Props { onViewPrivateKey: (address: string, isDefault: boolean) => void onDoneViewingPrivateKey: () => void toggleNav: () => void - onClickAddAccount: () => void + onClickAddAccount: (tabId: AddAccountNavTypes) => () => void onUpdateAccountName: (payload: UpdateAccountNamePayloadType) => { success: boolean } onRemoveAccount: (address: string, hardware: boolean) => void onSelectAccount: (account: WalletAccountType) => void @@ -179,9 +184,9 @@ function Accounts (props: Props) { } {!selectedAccount ? ( <> - - {getLocale('braveWalletAccountsPrimary')} - + {getLocale('braveWalletAccountsPrimary')} + {getLocale('braveWalletAccountsPrimaryDisclaimer')} + {primaryAccounts.map((account) => )} + + + {getLocale('braveWalletAccountsSecondary')} {getLocale('braveWalletAccountsSecondaryDisclaimer')} @@ -233,11 +245,16 @@ function Accounts (props: Props) { )} )} - + + + + {getLocale('braveWalletAddAccountImport')} + + + + {getLocale('braveWalletAddAccountImportHardware')} + + ) : ( <> diff --git a/components/brave_wallet_ui/components/desktop/views/accounts/style.ts b/components/brave_wallet_ui/components/desktop/views/accounts/style.ts index 2acc59940ab7..dfcaa996b0d0 100644 --- a/components/brave_wallet_ui/components/desktop/views/accounts/style.ts +++ b/components/brave_wallet_ui/components/desktop/views/accounts/style.ts @@ -1,5 +1,6 @@ import styled from 'styled-components' -import { EditOIcon } from 'brave-ui/components/icons' +import { EditOIcon, WalletAddIcon } from 'brave-ui/components/icons' +import FlashdriveIcon from '../../../../assets/svg-icons/flashdrive-icon.svg' import QRICON from '../../../../assets/svg-icons/qr-code-icon.svg' import { WalletButton } from '../../../shared/style' @@ -17,15 +18,6 @@ export const StyledWrapper = styled.div` margin-bottom: 40px; ` -export const PrimaryRow = styled.div` - display: flex; - flex-direction: row; - align-items: flex-start; - justify-content: space-between; - width: 100%; - margin-top: 20px; -` - export const PrimaryListContainer = styled.div` display: flex; flex-direction: column; @@ -34,8 +26,8 @@ export const PrimaryListContainer = styled.div` width: 100%; background-color: ${(p) => p.theme.color.divider01}; border-radius: 16px; - margin-top: 20px; - margin-bottom: 30px; + margin-top: 14px; + margin-bottom: 14px; padding: 15px 15px 0px 15px; ` @@ -58,6 +50,7 @@ export const SectionTitle = styled.span` font-weight: 600; letter-spacing: 0.04em; color: ${(p) => p.theme.color.text02}; + margin-top: 10px; ` export const DisclaimerText = styled.span` @@ -71,7 +64,7 @@ export const DisclaimerText = styled.span` line-height: 18px; letter-spacing: 0.01em; text-align: flex-start; - margin-bottom: 10px; + margin-bottom: 14px; margin-top: 6px; color: ${(p) => p.theme.color.text03}; ` @@ -184,3 +177,48 @@ export const TransactionPlaceholderContainer = styled.div` height: 100px; padding-top: 10px; ` + +export const ButtonRow = styled.div` + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; + width: 100%; + margin-bottom: 20px; +` + +export const StyledButton = styled(WalletButton)` + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border-radius: 40px; + padding: 12px 22px; + outline: none; + background-color: transparent; + border: 1px solid ${(p) => p.theme.color.interactive08}; + margin-right: 8px; +` + +export const ButtonText = styled.span` + font-size: 13px; + font-weight: 600; + color: ${(p) => p.theme.color.interactive07}; +` + +export const WalletIcon = styled(WalletAddIcon)` + width: 15px; + height: 15px; + color: ${(p) => p.theme.color.text02}; + margin-right: 8px; +` + +export const HardwareIcon = styled.div` + width: 15px; + height: 15px; + background-color: ${(p) => p.theme.color.text02}; + -webkit-mask-image: url(${FlashdriveIcon}); + mask-image: url(${FlashdriveIcon}); + mask-size: cover; + margin-right: 8px; +` diff --git a/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx b/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx index 70ffcdb5b29b..845f5f5f622c 100644 --- a/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx +++ b/components/brave_wallet_ui/components/desktop/views/crypto/index.tsx @@ -10,7 +10,8 @@ import { WalletAccountType, UpdateAccountNamePayloadType, WalletRoutes, - DefaultCurrencies + DefaultCurrencies, + AddAccountNavTypes } from '../../../../constants/types' import { TopNavOptions } from '../../../../options/top-nav-options' import { TopTabNav, WalletBanner, AddAccountModal } from '../../' @@ -149,6 +150,7 @@ const CryptoView = (props: Props) => { const [showDefaultWalletBanner, setShowDefaultWalletBanner] = React.useState(needsBackup) const [selectedAccount, setSelectedAccount] = React.useState() const [showMore, setShowMore] = React.useState(false) + const [addAccountModalTab, setAddAccountModalTab] = React.useState('create') let { category, id } = useParams() @@ -204,8 +206,14 @@ const CryptoView = (props: Props) => { onHideAddModal() } - const onClickAddAccount = () => { - history.push(`${WalletRoutes.AddAccountModal}`) + const onClickAddAccount = (tabId: AddAccountNavTypes) => () => { + if (tabId === 'create') { + history.push(`${WalletRoutes.AddAccountModal}`) + setAddAccountModalTab(tabId) + return + } + setAddAccountModalTab(tabId) + onShowAddModal() } const onRouteBack = () => { @@ -357,7 +365,6 @@ const CryptoView = (props: Props) => { {showAddModal && { onImportAccountFromJson={onImportAccountFromJson} hasImportError={hasImportError} onSetImportError={onSetImportError} + tab={addAccountModalTab} /> } diff --git a/components/brave_wallet_ui/components/desktop/views/portfolio/index.tsx b/components/brave_wallet_ui/components/desktop/views/portfolio/index.tsx index daed78b654ab..e9680e2d379c 100644 --- a/components/brave_wallet_ui/components/desktop/views/portfolio/index.tsx +++ b/components/brave_wallet_ui/components/desktop/views/portfolio/index.tsx @@ -7,7 +7,8 @@ import { BraveWallet, WalletAccountType, AccountAssetOptionType, - DefaultCurrencies + DefaultCurrencies, + AddAccountNavTypes } from '../../../../constants/types' import { getLocale } from '../../../../../common/locale' import { CurrencySymbols } from '../../../../utils/currency-symbols' @@ -73,7 +74,7 @@ export interface Props { onChangeTimeline: (path: BraveWallet.AssetPriceTimeframe) => void onSelectAsset: (asset: BraveWallet.BlockchainToken | undefined) => void onSelectAccount: (account: WalletAccountType) => void - onClickAddAccount: () => void + onClickAddAccount: (tabId: AddAccountNavTypes) => () => void onSelectNetwork: (network: BraveWallet.EthereumChain) => void onAddUserAsset: (token: BraveWallet.BlockchainToken) => void onSetUserAssetVisible: (token: BraveWallet.BlockchainToken, isVisible: boolean) => void @@ -356,7 +357,7 @@ const Portfolio = (props: Props) => { diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts index dbb92ce438d0..15165f19fe13 100644 --- a/components/brave_wallet_ui/constants/types.ts +++ b/components/brave_wallet_ui/constants/types.ts @@ -520,3 +520,15 @@ export type BlockExplorerUrlTypes = | 'tx' | 'address' | 'token' + +export type CreateAccountType = + | 'ethereum' + | 'filecoin' + | 'solana' + +export interface CreateAccountOptionsType { + name: string + description: string + network: CreateAccountType + icon: string +} diff --git a/components/brave_wallet_ui/options/create-account-options.ts b/components/brave_wallet_ui/options/create-account-options.ts new file mode 100644 index 000000000000..e0c2a2c3a195 --- /dev/null +++ b/components/brave_wallet_ui/options/create-account-options.ts @@ -0,0 +1,29 @@ +import { CreateAccountOptionsType } from '../constants/types' +import { + ETHIconUrl + // SOLIconUrl, + // FILECOINIconUrl +} from '../assets/asset-icons' +import { getLocale } from '../../common/locale' + +export const CreateAccountOptions = (): CreateAccountOptionsType[] => [ + { + description: getLocale('braveWalletCreateAccountEthereumDescription'), + name: 'Ethereum', + network: 'ethereum', + icon: ETHIconUrl + } + // Commented out until we have support for these networks + // { + // description: getLocale('braveWalletCreateAccountSolanaDescription'), + // name: 'Solana', + // network: 'solana', + // icon: SOLIconUrl + // }, + // { + // description: getLocale('braveWalletCreateAccountFilecoinDescription'), + // name: 'Filecoin', + // network: 'filecoin', + // icon: FILECOINIconUrl + // } +] diff --git a/components/brave_wallet_ui/stories/locale.ts b/components/brave_wallet_ui/stories/locale.ts index 8c241de13ee1..1611f3d23cfd 100644 --- a/components/brave_wallet_ui/stories/locale.ts +++ b/components/brave_wallet_ui/stories/locale.ts @@ -153,18 +153,26 @@ provideStrings({ // Accounts Tab braveWalletAccountsPrimary: 'Primary crypto accounts', - braveWalletAccountsSecondary: 'Secondary accounts', + braveWalletAccountsPrimaryDisclaimer: 'You can create primary accounts in Brave Wallet that may be backed up or restored from your recovery phrase. To learn more about account types visit account help', + braveWalletAccountsSecondary: 'Imported accounts', braveWalletAccountsSecondaryDisclaimer: 'These accounts can be used with web 3 DApps, and can be shown in your portfolio. However, note that secondary accounts cannot be restored via recovery phrase from your primary account backup.', braveWalletAccountsAssets: 'Assets', braveWalletAccountsEditVisibleAssets: 'Visible assets', // Add Account Options + braveWalletCreateAccount: 'Create $1 account', braveWalletAddAccountCreate: 'Create', braveWalletAddAccountImport: 'Import', + braveWalletAddAccountImportHardware: 'Import from hardware wallet', braveWalletAddAccountHardware: 'Hardware', braveWalletAddAccountConnect: 'Connect', braveWalletAddAccountPlaceholder: 'Account name', braveWalletCreateAccountButton: 'Create account', + braveWalletCreateAccountImportAccount: 'Import $1 account', + braveWalletCreateAccountTitle: 'Select one of the following account types', + braveWalletCreateAccountEthereumDescription: 'Supports ERC compatible assets on the Ethereum blockchain (ERC-20, ERC-721, ERC-1551, ERC-1155)', + braveWalletCreateAccountSolanaDescription: 'Supports SLP compatible assets on the Solana blockchain', + braveWalletCreateAccountFilecoinDescription: 'Store FIL asset', // Import Account braveWalletImportAccountDisclaimer: 'These accounts can be used with web 3 DApps, and can be shown in your portfolio. However, note that secondary accounts cannot be restored via recovery phrase from your primary account backup.', @@ -178,7 +186,7 @@ provideStrings({ // Connect Hardware Wallet braveWalletConnectHardwareTitle: 'Select your hardware wallet device', braveWalletConnectHardwareInfo1: 'Connect your $1 wallet directly to your computer.', - braveWalletConnectHardwareInfo2: 'Unlock your device and select the Ethereum app.', + braveWalletConnectHardwareInfo2: 'Unlock your device and select the $1 app.', braveWalletConnectHardwareTrezor: 'Trezor', braveWalletConnectHardwareLedger: 'Ledger', braveWalletConnectingHardwareWallet: 'Connecting...', diff --git a/components/brave_wallet_ui/stories/screens/crypto-story-view.tsx b/components/brave_wallet_ui/stories/screens/crypto-story-view.tsx index da51a8846429..ccefc14b5c9e 100644 --- a/components/brave_wallet_ui/stories/screens/crypto-story-view.tsx +++ b/components/brave_wallet_ui/stories/screens/crypto-story-view.tsx @@ -15,7 +15,8 @@ import { AccountTransactions, WalletAccountType, UpdateAccountNamePayloadType, - DefaultCurrencies + DefaultCurrencies, + AddAccountNavTypes } from '../../constants/types' import { TopNavOptions } from '../../options/top-nav-options' import { TopTabNav, WalletBanner, AddAccountModal } from '../../components/desktop' @@ -139,6 +140,7 @@ const CryptoStoryView = (props: Props) => { AppsList()[0].appList[0] ]) const [selectedTab, setSelectedTab] = React.useState('portfolio') + const [addAccountModalTab, setAddAccountModalTab] = React.useState('create') const [showMore, setShowMore] = React.useState(false) const browseMore = () => { @@ -172,7 +174,8 @@ const CryptoStoryView = (props: Props) => { setShowBackupWarning(false) } - const onClickAddAccount = () => { + const onClickAddAccount = (tabId: AddAccountNavTypes) => () => { + setAddAccountModalTab(tabId) onToggleAddModal() } @@ -346,7 +349,6 @@ const CryptoStoryView = (props: Props) => { {showAddModal && { hasImportError={hasImportError} onSetImportError={onSetImportError} onRouteBackToAccounts={onRouteBackToAccounts} + tab={addAccountModalTab} /> } diff --git a/components/resources/wallet_strings.grdp b/components/resources/wallet_strings.grdp index 4856ee979408..cb09b292d8e3 100644 --- a/components/resources/wallet_strings.grdp +++ b/components/resources/wallet_strings.grdp @@ -131,13 +131,21 @@ New Password Copy to Clipboard Primary crypto accounts - Secondary accounts - These accounts can be used with web 3 DApps, and can be shown in your portfolio. However, note that secondary accounts cannot be restored via recovery phrase from your primary account backup. + Imported accounts + You can create primary accounts in Brave Wallet that may be backed up or restored from your recovery phrase. To learn more about account types visit account help + These accounts can be used with web 3 DApps, and can be shown in your portfolio. However, note that secondary accounts cannot be restored via recovery phrase from your primary account backup. Assets Visible assets Create Create account + Create Ethereum$1 account + Import Ethereum$1 account + Select one of the following account types + Supports ERC compatible assets on the Ethereum blockchain (ERC-20, ERC-721, ERC-1551, ERC-1155) + Supports SLP compatible assets on the Solana blockchain + Store FIL asset Import + Import from hardware wallet Hardware Connect Account name @@ -150,7 +158,7 @@ Failed to import account, please try again. Select your hardware wallet device Connect your Ledger$1 wallet directly to your computer. - Unlock your device and select the Ethereum app. + Unlock your device and select the Ethereum$1 app. This error may occur when the wrong application is open on the Ledger device. Trezor Ledger