Merge pull request #12386 from brave/encryption-key-panel

feat(wallet): Built Out Encryption Key Panel UI

components/brave_wallet/browser/brave_wallet_constants.h

@@ -344,6 +344,18 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
      IDS_BRAVE_WALLET_SIGN_TRANSACTION_MESSAGE_TITLE},
     {"braveWalletSignTransactionButton",
      IDS_BRAVE_WALLET_SIGN_TRANSACTION_BUTTON},
+    {"braveWalletProvideEncryptionKeyTitle",
+     IDS_BRAVE_WALLET_PROVIDE_ENCRYPTION_KEY_TITLE},
+    {"braveWalletProvideEncryptionKeyDescription",
+     IDS_BRAVE_WALLET_PROVIDE_ENCRYPTION_KEY_DESCRIPTION},
+    {"braveWalletProvideEncryptionKeyButton",
+     IDS_BRAVE_WALLET_PROVIDE_ENCRYPTION_KEY_BUTTON},
+    {"braveWalletReadEncryptedMessageTitle",
+     IDS_BRAVE_WALLET_READ_ENCRYPTED_MESSAGE_TITLE},
+    {"braveWalletReadEncryptedMessageDecryptButton",
+     IDS_BRAVE_WALLET_READ_ENCRYPTED_MESSAGE_DECRYPT_BUTTON},
+    {"braveWalletReadEncryptedMessageButton",
+     IDS_BRAVE_WALLET_READ_ENCRYPTED_MESSAGE_BUTTON},
     {"braveWalletAllowSpendTitle", IDS_BRAVE_WALLET_ALLOW_SPEND_TITLE},
     {"braveWalletAllowSpendDescription",
      IDS_BRAVE_WALLET_ALLOW_SPEND_DESCRIPTION},

components/brave_wallet/common/brave_wallet.mojom

@@ -910,3 +910,9 @@ enum DefaultWallet {
   BraveWalletPreferExtension,
   BraveWallet
 };
+
+struct EncryptionKeyRequest {
+  string origin;
+  string address;
+  string? message;
+};

components/brave_wallet_ui/components/extension/encryption-key-panel/index.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react'
+
+// Types
+import { BraveWallet, WalletAccountType } from '../../../constants/types'
+
+// Utils
+import { reduceAccountDisplayName } from '../../../utils/reduce-account-name'
+import { getLocale } from '../../../../common/locale'
+
+// Components
+import { create } from 'ethereum-blockies'
+import { NavButton, PanelTab } from '..'
+
+// Styled Components
+import {
+  StyledWrapper,
+  AccountCircle,
+  AccountNameText,
+  TopRow,
+  NetworkText,
+  PanelTitle,
+  MessageBox,
+  MessageText,
+  ButtonRow,
+  DecryptButton
+} from './style'
+
+import { TabRow } from '../shared-panel-styles'
+
+export interface Props {
+  panelType: 'request' | 'read'
+  accounts: WalletAccountType[]
+  selectedNetwork: BraveWallet.EthereumChain
+  encryptionKeyPayload: BraveWallet.EncryptionKeyRequest
+  onProvideOrAllow: () => void
+  onCancel: () => void
+}
+
+function EncryptionKeyPanel (props: Props) {
+  const {
+    panelType,
+    accounts,
+    selectedNetwork,
+    encryptionKeyPayload,
+    onProvideOrAllow,
+    onCancel
+  } = props
+  const [isDecrypted, setIsDecrypted] = React.useState<boolean>(false)
+
+  const foundAccountName = React.useMemo(() => {
+    return accounts.find((account) => account.address.toLowerCase() === encryptionKeyPayload.address.toLowerCase())?.name
+  }, [encryptionKeyPayload])
+
+  const orb = React.useMemo(() => {
+    return create({ seed: encryptionKeyPayload.address.toLowerCase(), size: 8, scale: 16 }).toDataURL()
+  }, [encryptionKeyPayload])
+
+  const onDecryptMessage = () => {
+    setIsDecrypted(true)
+  }
+
+  return (
+    <StyledWrapper>
+      <TopRow>
+        <NetworkText>{selectedNetwork.chainName}</NetworkText>
+      </TopRow>
+      <AccountCircle orb={orb} />
+      <AccountNameText>{reduceAccountDisplayName(foundAccountName ?? '', 14)}</AccountNameText>
+      <PanelTitle>
+        {panelType === 'request'
+          ? getLocale('braveWalletProvideEncryptionKeyTitle')
+          : getLocale('braveWalletReadEncryptedMessageTitle').replace('$1', encryptionKeyPayload.origin)}
+      </PanelTitle>
+      <TabRow>
+        <PanelTab
+          isSelected={true}
+          text={getLocale('braveWalletSignTransactionMessageTitle')}
+        />
+      </TabRow>
+      <MessageBox
+        needsCenterAlignment={panelType === 'read' && !isDecrypted}
+      >
+        {panelType === 'read' && !isDecrypted ? (
+          <DecryptButton
+            onClick={onDecryptMessage}
+          >
+            {getLocale('braveWalletReadEncryptedMessageDecryptButton')}
+          </DecryptButton>
+        ) : (
+          <MessageText>
+            {panelType === 'request'
+              ? getLocale('braveWalletProvideEncryptionKeyDescription').replace('$1', encryptionKeyPayload.origin)
+              : encryptionKeyPayload.message}
+          </MessageText>
+        )}
+      </MessageBox>
+      <ButtonRow>
+        <NavButton
+          buttonType='secondary'
+          text={getLocale('braveWalletBackupButtonCancel')}
+          onSubmit={onCancel}
+        />
+        <NavButton
+          buttonType='primary'
+          text={
+            panelType === 'request'
+              ? getLocale('braveWalletProvideEncryptionKeyButton')
+              : getLocale('braveWalletReadEncryptedMessageButton')
+          }
+          onSubmit={onProvideOrAllow}
+        />
+      </ButtonRow>
+    </StyledWrapper>
+  )
+}
+
+export default EncryptionKeyPanel

components/brave_wallet_ui/components/extension/encryption-key-panel/style.ts

@@ -0,0 +1,117 @@
+import styled from 'styled-components'
+import { WalletButton } from '../../shared/style'
+
+interface StyleProps {
+  orb: string
+  needsCenterAlignment: boolean
+}
+
+export const StyledWrapper = styled.div`
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${(p) => p.theme.color.background01};
+`
+
+export const TopRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 100%;
+  padding: 15px 15px 0px 15px;
+`
+
+export const AccountCircle = styled.div<Partial<StyleProps>>`
+  width: 54px;
+  height: 54px;
+  border-radius: 100%;
+  background-image: url(${(p) => p.orb});
+  background-size: cover;
+  margin-bottom: 13px;
+`
+
+export const AccountNameText = styled.span`
+  font-family: Poppins;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  line-height: 20px;
+  color: ${(p) => p.theme.color.text02};
+  margin-bottom: 2px;
+`
+
+export const NetworkText = styled.span`
+  font-family: Poppins;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.01em;
+  color: ${(p) => p.theme.color.text03};
+`
+
+export const PanelTitle = styled.span`
+  width: 80%;
+  font-family: Poppins;
+  font-size: 18px;
+  line-height: 26px;
+  letter-spacing: 0.02em;
+  text-align: center;
+  color: ${(p) => p.theme.color.text01};
+  font-weight: 600;
+  margin-bottom: 15px;
+`
+
+export const MessageBox = styled.div<Partial<StyleProps>>`
+  display: flex;
+  align-items: ${(p) => p.needsCenterAlignment ? 'center' : 'flex-start'};
+  justify-content: ${(p) => p.needsCenterAlignment ? 'center' : 'flex-start'};
+  flex-direction: column;
+  border: 1px solid ${(p) => p.theme.color.divider01};
+  box-sizing: border-box;
+  border-radius: 4px;
+  width: 255px;
+  height: 140px;
+  padding: 8px 14px;
+  margin-bottom: 14px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+`
+
+export const MessageText = styled.span`
+  font-family: Poppins;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.01em;
+  text-align: left;
+  color: ${(p) => p.theme.color.text02};
+  word-break: break-word;
+`
+
+export const ButtonRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  width: 100%;
+  margin-bottom: 14px;
+`
+
+export const DecryptButton = styled(WalletButton)`
+  cursor: pointer;
+  outline: none;
+  border: none;
+  font-weight: 600;
+  font-family: Poppins;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.01em;
+  background: none;
+  color: ${(p) => p.theme.color.interactive05};
+  @media (prefers-color-scheme: dark) {
+    color: ${(p) => p.theme.palette.blurple300};
+  }
+`

components/brave_wallet_ui/components/extension/index.ts

@@ -23,6 +23,7 @@ import TransactionsPanel from './transactions-panel'
 import TransactionsListItem from './transaction-list-item'
 import TransactionDetailPanel from './transaction-detail-panel'
 import AssetsPanel from './assets-panel'
+import EncryptionKeyPanel from './encryption-key-panel'
 import { NavButton } from './buttons'
 
 export {
@@ -51,5 +52,6 @@ export {
   TransactionsPanel,
   TransactionsListItem,
   TransactionDetailPanel,
-  AssetsPanel
+  AssetsPanel,
+  EncryptionKeyPanel
 }

components/brave_wallet_ui/constants/types.ts

@@ -103,6 +103,8 @@ export type PanelTypes =
   | 'transactions'
   | 'transactionDetails'
   | 'assets'
+  | 'provideEncryptionKey'
+  | 'allowReadingEncryptedMessage'
 
 export type NavTypes =
   | 'crypto'
@@ -225,6 +227,7 @@ export interface PanelState {
   swapQuote?: BraveWallet.SwapResponse
   swapError?: SwapErrorResponse
   signMessageData: BraveWallet.SignMessageRequest[]
+  publicEncryptionKeyData: BraveWallet.EncryptionKeyRequest
   switchChainRequest: BraveWallet.SwitchChainRequest
   hardwareWalletCode?: HardwareWalletResponseCodeType
   suggestedToken?: BraveWallet.BlockchainToken

components/brave_wallet_ui/panel/container.tsx

@@ -19,7 +19,8 @@ import {
   AddSuggestedTokenPanel,
   TransactionsPanel,
   TransactionDetailPanel,
-  AssetsPanel
+  AssetsPanel,
+  EncryptionKeyPanel
 } from '../components/extension'
 import {
   Send,
@@ -125,7 +126,8 @@ function Container (props: Props) {
     swapError,
     signMessageData,
     switchChainRequest,
-    suggestedToken
+    suggestedToken,
+    publicEncryptionKeyData
   } = props.panel
 
   // TODO(petemill): If initial data or UI takes a noticeable amount of time to arrive
@@ -562,6 +564,22 @@ function Container (props: Props) {
     props.walletPanelActions.navigateTo('transactions')
   }
 
+  const onAllowReadingEncryptedMessage = () => {
+    // Logic here to allow reading encrypted message
+  }
+
+  const onProvideEncryptionKey = () => {
+    // Logic here to provide encryption key
+  }
+
+  const onCancelAllowReadingEncryptedMessage = () => {
+    // Logic here to cancel allow reading encrypted message
+  }
+
+  const onCancelProvideEncryptionKey = () => {
+    // Logic here to cancel provide encryption key
+  }
+
   const isConnectedToSite = React.useMemo((): boolean => {
     if (activeOrigin === WalletOrigin) {
       return true
@@ -718,6 +736,38 @@ function Container (props: Props) {
     )
   }
 
+  if (
+    selectedPanel === 'provideEncryptionKey' ||
+    selectedPanel === 'allowReadingEncryptedMessage'
+  ) {
+    return (
+      <PanelWrapper isLonger={true}>
+        <LongWrapper>
+          <EncryptionKeyPanel
+            panelType={
+              selectedPanel === 'provideEncryptionKey'
+                ? 'request'
+                : 'read'
+            }
+            encryptionKeyPayload={publicEncryptionKeyData}
+            accounts={accounts}
+            selectedNetwork={selectedNetwork}
+            onCancel={
+              selectedPanel === 'provideEncryptionKey'
+                ? onCancelProvideEncryptionKey
+                : onCancelAllowReadingEncryptedMessage
+            }
+            onProvideOrAllow={
+              selectedPanel === 'provideEncryptionKey'
+                ? onProvideEncryptionKey
+                : onAllowReadingEncryptedMessage
+            }
+          />
+        </LongWrapper>
+      </PanelWrapper>
+    )
+  }
+
   if (showSelectAsset) {
     let assets: BraveWallet.BlockchainToken[]
     if (selectedPanel === 'buy') {

components/brave_wallet_ui/panel/reducers/panel_reducer.ts

@@ -45,6 +45,11 @@ const defaultState: PanelState = {
     domainHash: '',
     primaryHash: ''
   }],
+  publicEncryptionKeyData: {
+    address: '',
+    message: '',
+    origin: ''
+  },
   switchChainRequest: {
     origin: {
       url: ''