Merge pull request #11785 from brave/multi-chain-accounts-page-ui

feat(wallet): Accounts Page Multi Chain UI Support

components/brave_wallet/browser/brave_wallet_constants.h

@@ -186,15 +186,29 @@ 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},
     {"braveWalletAccountsAssets", IDS_BRAVE_WALLET_ACCOUNTS_ASSETS},
     {"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",

components/brave_wallet_ui/assets/asset-icons/index.ts

@@ -4,12 +4,16 @@ 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,
   ALGOIconUrl,
   BNBIconUrl,
   BTCIconUrl,
   ETHIconUrl,
-  ZRXIconUrl
+  ZRXIconUrl,
+  SOLIconUrl,
+  FILECOINIconUrl
 }

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 (
+    <StyledWrapper>
+      <LeftSide>
+        <NetworkIcon src={icon} />
+        <InfoColumn>
+          <Title>{title}</Title>
+          <Description>{description}</Description>
+        </InfoColumn>
+      </LeftSide>
+      <NavButton
+        buttonType='secondary'
+        onSubmit={onClickCreate}
+        text={buttonText}
+      />
+    </StyledWrapper>
+  )
+}
+
+export default AccountTypeItem

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;
+`

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<string>
   preAddedHardwareWalletAccounts: WalletAccountType[]
+  selectedAccountType: CreateAccountOptionsType
 }
 
 const derivationBatch = 4
 
 export default function (props: Props) {
+  const { selectedAccountType } = props
   const [selectedHardwareWallet, setSelectedHardwareWallet] = React.useState<HardwareVendor>(BraveWallet.LEDGER_HARDWARE_VENDOR)
   const [isConnecting, setIsConnecting] = React.useState<boolean>(false)
   const [accounts, setAccounts] = React.useState<BraveWallet.HardwareWalletAccount[]>([])
@@ -189,7 +191,7 @@ export default function (props: Props) {
           <DisclaimerText>
             {getLocale('braveWalletConnectHardwareInfo1').replace('$1', selectedHardwareWallet)}
           </DisclaimerText>
-          <DisclaimerText>{getLocale('braveWalletConnectHardwareInfo2')}</DisclaimerText>
+          <DisclaimerText>{getLocale('braveWalletConnectHardwareInfo2').replace('$1', selectedAccountType.name)}</DisclaimerText>
         </HardwareInfoColumn>
       </HardwareInfoRow>
       {connectionError &&