fix: password-protect account private key reveal

components/brave_wallet/browser/brave_wallet_constants.h

@@ -39,6 +39,7 @@ constexpr char kRampBuyUrl[] =
 constexpr char kRampID[] = "8yxja8782as5essk2myz3bmh4az6gpq4nte9n2gf";
 
 constexpr webui::LocalizedString kLocalizedStrings[] = {
+    {"braveWalletEnterYourPassword", IDS_BRAVE_WALLET_ENTER_YOUR_PASSWORD},
     {"braveWallet", IDS_BRAVE_WALLET},
     {"braveWalletDefiCategory", IDS_BRAVE_WALLET_DEFI_CATEGORY},
     {"braveWalletNftCategory", IDS_BRAVE_WALLET_NFT_CATEGORY},

components/brave_wallet_ui/common/async/__mocks__/bridge.ts

@@ -68,6 +68,10 @@ export class MockedWalletApiProxy {
     })
   }
 
+  keyringService = {
+    validatePassword: async () => ({ result: true })
+  }
+
   ethTxManagerProxy = {
     getGasEstimation1559: async () => {
       return {
@@ -93,6 +97,12 @@ export class MockedWalletApiProxy {
   }
 }
 
-export default function getAPIProxy (): Partial<WalletApiProxy> {
+export function getAPIProxy (): Partial<WalletApiProxy> {
   return new MockedWalletApiProxy() as unknown as Partial<WalletApiProxy> & MockedWalletApiProxy
 }
+
+export function getMockedAPIProxy (): WalletApiProxy {
+  return new MockedWalletApiProxy() as unknown as WalletApiProxy
+}
+
+export default getAPIProxy

components/brave_wallet_ui/common/async/bridge.ts

@@ -7,7 +7,9 @@ import WalletApiProxy from '../wallet_api_proxy'
 import getWalletPanelApiProxy from '../../panel/wallet_panel_api_proxy'
 import getWalletPageApiProxy from '../../page/wallet_page_api_proxy'
 
-export default function getAPIProxy (): WalletApiProxy {
+export function getAPIProxy (): WalletApiProxy {
   return window.location.hostname === 'wallet-panel.top-chrome'
     ? getWalletPanelApiProxy() : getWalletPageApiProxy()
 }
+
+export default getAPIProxy

components/brave_wallet_ui/common/context/api-proxy.context.ts

@@ -0,0 +1,10 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+
+import WalletApiProxy from '../wallet_api_proxy'
+
+export const ApiProxyContext = React.createContext<WalletApiProxy | undefined>(undefined)

components/brave_wallet_ui/common/hooks/use-api-proxy.ts

@@ -0,0 +1,16 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+
+import { ApiProxyContext } from '../context/api-proxy.context'
+
+export const useApiProxy = () => {
+  const context = React.useContext(ApiProxyContext)
+  if (context === undefined) {
+    throw new Error('useApiProxy must be used within a ApiProxyContext.Provider')
+  }
+  return context
+}

components/brave_wallet_ui/common/wallet_api_proxy.ts

@@ -8,7 +8,7 @@ import { Store } from './async/types'
 import { getBraveKeyring } from './api/hardware_keyrings'
 import { BraveWallet } from '../constants/types'
 
-export default class WalletApiProxy {
+export class WalletApiProxy {
   walletHandler = new BraveWallet.WalletHandlerRemote()
   jsonRpcService = new BraveWallet.JsonRpcServiceRemote()
   swapService = new BraveWallet.SwapServiceRemote()
@@ -109,3 +109,5 @@ export default class WalletApiProxy {
     this.braveWalletService.addObserver(braveWalletServiceObserverReceiver.$.bindNewPipeAndPassRemote())
   }
 }
+
+export default WalletApiProxy

components/brave_wallet_ui/components/desktop/index.ts

@@ -21,7 +21,7 @@ import WalletMorePopup from './wallet-more-popup'
 import WalletBanner from './wallet-banner'
 import PopupModal from './popup-modals'
 import { AddAccountModal } from './popup-modals/add-account-modal'
-import AccountSettingsModal from './popup-modals/account-settings-modal'
+import { AccountSettingsModal } from './popup-modals/account-settings-modal/account-settings-modal'
 import EditVisibleAssetsModal from './popup-modals/edit-visible-assets-modal'
 import AssetWatchlistItem from './asset-watchlist-item'
 import SelectNetworkDropdown from './select-network-dropdown'

components/brave_wallet_ui/components/desktop/popup-modals/account-settings-modal/style.ts → components/brave_wallet_ui/components/desktop/popup-modals/account-settings-modal/account-settings-modal.style.ts

@@ -1,4 +1,10 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
 import styled from 'styled-components'
+
 import ClipboardIcon from '../../../../assets/svg-icons/clipboard-icon.svg'
 import { WalletButton } from '../../../shared/style'
 
@@ -48,6 +54,13 @@ export const Input = styled.input`
     margin: 0;
   }
 `
+export const InputLabelText = styled.label`
+  display: block;
+  margin-bottom: 8px;
+  color: ${(p) => p.theme.color.text03};
+  text-align: left;
+  width: 100%;
+`
 
 export const QRCodeWrapper = styled.img`
   display: flex;

components/brave_wallet_ui/components/desktop/popup-modals/account-settings-modal/index.tsx → components/brave_wallet_ui/components/desktop/popup-modals/account-settings-modal/account-settings-modal.tsx

@@ -1,27 +1,44 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
 import * as React from 'react'
 import * as qr from 'qr-image'
+
+// utils
+import { reduceAddress } from '../../../../utils/reduce-address'
+import { getLocale, getLocaleWithTag } from '../../../../../common/locale'
+
+// constants
+import { FILECOIN_FORMAT_DESCRIPTION_URL } from '../../../../common/constants/urls'
+
+// types
 import {
   AccountSettingsNavTypes,
   BraveWallet,
   WalletAccountType,
   UpdateAccountNamePayloadType,
   TopTabNavObjectType
 } from '../../../../constants/types'
-import {
-  PopupModal,
-  TopTabNav
-} from '../..'
+
+// options
 import {
   AccountSettingsNavOptions,
   HardwareAccountSettingsNavOptions
 } from '../../../../options/account-settings-nav-options'
-import { FILECOIN_FORMAT_DESCRIPTION_URL } from '../../../../common/constants/urls'
-import { reduceAddress } from '../../../../utils/reduce-address'
+
+// components
 import { NavButton } from '../../../extension'
 import { CopyTooltip } from '../../../shared/copy-tooltip/copy-tooltip'
-import { getLocale, getLocaleWithTag } from '../../../../../common/locale'
+import TopTabNav from '../../top-tab-nav/index'
+import PopupModal from '../index'
+import PasswordInput from '../../../shared/password-input/index'
 
-// Styled Components
+// hooks
+import { useApiProxy } from '../../../../common/hooks/use-api-proxy'
+
+// style
 import {
   Input,
   StyledWrapper,
@@ -34,10 +51,11 @@ import {
   WarningWrapper,
   PrivateKeyBubble,
   ButtonWrapper,
-  ErrorText
-} from './style'
+  ErrorText,
+  InputLabelText
+} from './account-settings-modal.style'
 
-export interface Props {
+interface Props {
   onClose: () => void
   onUpdateAccountName: (payload: UpdateAccountNamePayloadType) => { success: boolean }
   onChangeTab: (id: AccountSettingsNavTypes) => void
@@ -52,28 +70,32 @@ export interface Props {
   account: WalletAccountType
 }
 
-const AddAccountModal = (props: Props) => {
-  const {
-    title,
-    account,
-    tab,
-    hideNav,
-    privateKey,
-    onClose,
-    onToggleNav,
-    onUpdateAccountName,
-    onChangeTab,
-    onRemoveAccount,
-    onViewPrivateKey,
-    onDoneViewingPrivateKey
-  } = props
+export const AccountSettingsModal = ({
+  title,
+  account,
+  tab,
+  hideNav,
+  privateKey,
+  onClose,
+  onToggleNav,
+  onUpdateAccountName,
+  onChangeTab,
+  onRemoveAccount,
+  onViewPrivateKey,
+  onDoneViewingPrivateKey
+}: Props) => {
+  // state
   const [accountName, setAccountName] = React.useState<string>(account.name)
   const [showPrivateKey, setShowPrivateKey] = React.useState<boolean>(false)
   const [updateError, setUpdateError] = React.useState<boolean>(false)
+  const [password, setPassword] = React.useState<string>('')
+  const [isCorrectPassword, setIsCorrectPassword] = React.useState<boolean>(true)
   const [qrCode, setQRCode] = React.useState<string>('')
 
   // custom hooks
+  const { keyringService } = useApiProxy()
 
+  // methods
   const handleAccountNameChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
     setAccountName(event.target.value)
     setUpdateError(false)
@@ -99,11 +121,8 @@ const AddAccountModal = (props: Props) => {
       })
   }
 
-  React.useEffect(() => {
-    generateQRData()
-  })
-
   const onSelectTab = (id: AccountSettingsNavTypes) => {
+    setShowPrivateKey(false)
     onChangeTab(id)
   }
 
@@ -113,7 +132,25 @@ const AddAccountModal = (props: Props) => {
     onClose()
   }
 
-  const onShowPrivateKey = () => {
+  const onShowPrivateKey = async () => {
+    if (!password) { // require password to view key
+      return
+    }
+
+    // entered password must be correct
+    const {
+      result: isPasswordValid
+    } = await keyringService.validatePassword(password)
+
+    if (!isPasswordValid) {
+      setIsCorrectPassword(isPasswordValid) // set or clear error
+      return // need valid password to continue
+    }
+
+    // clear entered password & error
+    setPassword('')
+    setIsCorrectPassword(true)
+
     if (onViewPrivateKey) {
       const isDefault = account?.accountType === 'Primary'
       onViewPrivateKey(account?.address ?? '', isDefault, account?.coin)
@@ -138,16 +175,35 @@ const AddAccountModal = (props: Props) => {
     }
   }
 
+  const onPasswordChange = (value: string): void => {
+    setIsCorrectPassword(true) // clear error
+    setPassword(value)
+  }
+
+  const handlePasswordKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      onShowPrivateKey()
+    }
+  }
+
+  // memos / computed
   const tabList = React.useMemo((): TopTabNavObjectType[] => {
     return account.accountType === 'Trezor' ||
       account.accountType === 'Ledger'
       ? HardwareAccountSettingsNavOptions()
       : AccountSettingsNavOptions()
   }, [account])
 
-  const filPrivateKeyFormatDescriptionTextParts =
-      getLocaleWithTag('braveWalletFilExportPrivateKeyFormatDescription')
+  const filPrivateKeyFormatDescriptionTextParts = getLocaleWithTag(
+    'braveWalletFilExportPrivateKeyFormatDescription'
+  )
+
+  // effects
+  React.useEffect(() => {
+    generateQRData()
+  })
 
+  // render
   return (
     <PopupModal title={title} onClose={onClickClose}>
       {!hideNav &&
@@ -195,27 +251,46 @@ const AddAccountModal = (props: Props) => {
             <WarningWrapper>
               <WarningText>{getLocale('braveWalletAccountSettingsDisclaimer')}</WarningText>
             </WarningWrapper>
-            {showPrivateKey && account.coin === BraveWallet.CoinType.FIL &&
-            <WarningWrapper>
-               <WarningText>
-                 {filPrivateKeyFormatDescriptionTextParts.beforeTag}
-                  <a target='_blank' href={FILECOIN_FORMAT_DESCRIPTION_URL}>
-                    {filPrivateKeyFormatDescriptionTextParts.duringTag}
-                  </a>
-                  {filPrivateKeyFormatDescriptionTextParts.afterTag}
-                </WarningText>
-            </WarningWrapper>
-            }
-            {showPrivateKey &&
-              <CopyTooltip text={privateKey}>
-                <PrivateKeyBubble>{privateKey}</PrivateKeyBubble>
-              </CopyTooltip>
+            {showPrivateKey
+              ? <>
+                {account.coin === BraveWallet.CoinType.FIL &&
+                  <WarningWrapper>
+                    <WarningText>
+                      {filPrivateKeyFormatDescriptionTextParts.beforeTag}
+                        <a target='_blank' href={FILECOIN_FORMAT_DESCRIPTION_URL} rel='noopener noreferrer'>
+                          {filPrivateKeyFormatDescriptionTextParts.duringTag}
+                        </a>
+                        {filPrivateKeyFormatDescriptionTextParts.afterTag}
+                      </WarningText>
+                  </WarningWrapper>
+                }
+                <CopyTooltip text={privateKey}>
+                  <PrivateKeyBubble>{privateKey}</PrivateKeyBubble>
+                </CopyTooltip>
+              </>
+              : <>
+                <InputLabelText>{getLocale('braveWalletEnterYourPassword')}</InputLabelText>
+                <PasswordInput
+                  placeholder={getLocale('braveWalletCreatePasswordInput')}
+                  onChange={onPasswordChange}
+                  hasError={!!password && !isCorrectPassword}
+                  error={getLocale('braveWalletLockScreenError')}
+                  autoFocus={false}
+                  value={password}
+                  onKeyDown={handlePasswordKeyDown}
+                />
+              </>
             }
             <ButtonWrapper>
               <NavButton
                 onSubmit={!showPrivateKey ? onShowPrivateKey : onHidePrivateKey}
                 text={!showPrivateKey ? getLocale('braveWalletAccountSettingsShowKey') : getLocale('braveWalletAccountSettingsHideKey')}
                 buttonType='primary'
+                disabled={
+                  showPrivateKey
+                    ? false
+                    : password ? !isCorrectPassword : true
+                }
               />
             </ButtonWrapper>
           </PrivateKeyWrapper>
@@ -224,5 +299,3 @@ const AddAccountModal = (props: Props) => {
     </PopupModal>
   )
 }
-
-export default AddAccountModal

components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/add-imported-account-modal.tsx

@@ -43,7 +43,7 @@ import {
 import {
   WarningText,
   WarningWrapper
-} from '../account-settings-modal/style'
+} from '../account-settings-modal/account-settings-modal.style'
 
 interface Params {
   accountTypeName: string