Improvements to the Site Permissions Panel

components/brave_wallet/browser/brave_wallet_constants.h

@@ -375,6 +375,10 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
      IDS_BRAVE_WALLET_SITE_PERMISSIONS_TITLE},
     {"braveWalletSitePermissionsDisconnect",
      IDS_BRAVE_WALLET_SITE_PERMISSIONS_DISCONNECT},
+    {"braveWalletSitePermissionsSwitch",
+     IDS_BRAVE_WALLET_SITE_PERMISSIONS_SWITCH},
+    {"braveWalletSitePermissionsNewAccount",
+     IDS_BRAVE_WALLET_SITE_PERMISSIONS_NEW_ACCOUNT},
     {"braveWalletPanelNotConnected", IDS_BRAVE_WALLET_PANEL_NOT_CONNECTED},
     {"braveWalletTransactionDetailBoxFunction",
      IDS_BRAVE_WALLET_TRANSACTION_DETAIL_BOX_FUNCTION},

components/brave_wallet_ui/common/actions/wallet_actions.ts

@@ -21,6 +21,7 @@ import {
   UpdateUnapprovedTransactionGasFieldsType,
   SitePermissionsPayloadType,
   RemoveSitePermissionPayloadType,
+  AddSitePermissionPayloadType,
   UpdateUnapprovedTransactionSpendAllowanceType
 } from '../constants/action_types'
 import {
@@ -103,6 +104,7 @@ export const defaultBaseCurrencyChanged = createAction<DefaultBaseCurrencyChange
 export const defaultBaseCryptocurrencyChanged = createAction<DefaultBaseCryptocurrencyChanged>('defaultBaseCryptocurrencyChanged')
 export const setSitePermissions = createAction<SitePermissionsPayloadType>('setSitePermissions')
 export const removeSitePermission = createAction<RemoveSitePermissionPayloadType>('removeSitePermission')
+export const addSitePermission = createAction<AddSitePermissionPayloadType>('addSitePermission')
 export const queueNextTransaction = createAction('queueNextTransaction')
 export const refreshBalancesAndPrices = createAction('refreshBalancesAndPrices')
 export const setMetaMaskInstalled = createAction<boolean>('setMetaMaskInstalled')

components/brave_wallet_ui/common/async/handlers.ts

@@ -603,6 +603,12 @@ handler.on(WalletActions.removeSitePermission.getType(), async (store: Store, pa
   await refreshWalletInfo(store)
 })
 
+handler.on(WalletActions.addSitePermission.getType(), async (store: Store, payload: RemoveSitePermissionPayloadType) => {
+  const braveWalletService = getAPIProxy().braveWalletService
+  await braveWalletService.addEthereumPermission(payload.origin, payload.account)
+  await refreshWalletInfo(store)
+})
+
 handler.on(WalletActions.transactionStatusChanged.getType(), async (store: Store, payload: TransactionStatusChanged) => {
   const status = payload.txInfo.txStatus
   if (status === TransactionStatus.Confirmed || status === TransactionStatus.Error) {

components/brave_wallet_ui/common/constants/action_types.ts

@@ -102,3 +102,8 @@ export type RemoveSitePermissionPayloadType = {
   origin: string
   account: string
 }
+
+export type AddSitePermissionPayloadType = {
+  origin: string
+  account: string
+}

components/brave_wallet_ui/components/extension/connected-account-item/index.tsx

@@ -11,19 +11,31 @@ import {
   NameAndAddressColumn,
   AccountCircle,
   LeftSide,
-  DisconnectButton
+  PrimaryButton,
+  RightSide
 } from './style'
 
 // Utils
 import { reduceAddress } from '../../../utils/reduce-address'
 
 export interface Props {
+  isActive: boolean
+  hasPermission: boolean
   account: WalletAccountType
   onDisconnect: (address: string) => void
+  onConnect: (account: WalletAccountType) => void
+  onSwitchAccount: (account: WalletAccountType) => void
 }
 
-const ConnectedAccountItem = (props: Props) => {
-  const { account, onDisconnect } = props
+const SitePermissionAccountItem = (props: Props) => {
+  const {
+    account,
+    isActive,
+    hasPermission,
+    onDisconnect,
+    onConnect,
+    onSwitchAccount
+  } = props
 
   const orb = React.useMemo(() => {
     return create({ seed: account.address.toLowerCase(), size: 8, scale: 16 }).toDataURL()
@@ -33,6 +45,14 @@ const ConnectedAccountItem = (props: Props) => {
     onDisconnect(account.address)
   }
 
+  const onClickConnect = () => {
+    onConnect(account)
+  }
+
+  const onClickSwitchAccount = () => {
+    onSwitchAccount(account)
+  }
+
   return (
     <StyledWrapper>
       <LeftSide>
@@ -44,9 +64,27 @@ const ConnectedAccountItem = (props: Props) => {
           </AccountAddressText>
         </NameAndAddressColumn>
       </LeftSide>
-      <DisconnectButton onClick={onClickDisconnect}>{getLocale('braveWalletSitePermissionsDisconnect')}</DisconnectButton>
+      <RightSide>
+        <PrimaryButton
+          onClick={
+            hasPermission
+              ? isActive
+                ? onClickDisconnect
+                : onClickSwitchAccount
+              : onClickConnect
+          }
+        >
+          {
+            hasPermission
+              ? isActive
+                ? getLocale('braveWalletSitePermissionsDisconnect')
+                : getLocale('braveWalletSitePermissionsSwitch')
+              : getLocale('braveWalletAddAccountConnect')
+          }
+        </PrimaryButton>
+      </RightSide>
     </StyledWrapper>
   )
 }
 
-export default ConnectedAccountItem
+export default SitePermissionAccountItem

components/brave_wallet_ui/components/extension/connected-account-item/style.ts

@@ -28,6 +28,14 @@ export const LeftSide = styled.div`
   flex-direction: row;
 `
 
+export const RightSide = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-direction: column;
+  margin-right: 10px;
+`
+
 export const AccountCircle = styled.div<StyleProps>`
   width: 40px;
   height: 40px;
@@ -52,8 +60,8 @@ export const AccountAddressText = styled.span`
   color: ${(p) => p.theme.color.text02};
 `
 
-export const DisconnectButton = styled(WalletButton) <Partial<StyleProps>>`
-  display: flex;;
+export const PrimaryButton = styled(WalletButton) <Partial<StyleProps>>`
+  display: flex;
   cursor: pointer;
   outline: none;
   border: none;
@@ -65,7 +73,7 @@ export const DisconnectButton = styled(WalletButton) <Partial<StyleProps>>`
   font-weight: 600;
   color: ${(p) => p.theme.color.interactive05};
   @media (prefers-color-scheme: dark) {
-    color: ${(p) => p.theme.palette.white};
+    color: ${(p) => p.theme.palette.blurple300};
   }
   letter-spacing: 0.01em;
 `

components/brave_wallet_ui/components/extension/site-permissions-panel/index.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import { WalletAccountType } from '../../../constants/types'
 import { getLocale } from '../../../../common/locale'
 import {
-  ConnectHeader,
   DividerLine,
   ConnectedAccountItem
 } from '../'
@@ -12,43 +11,83 @@ import {
   StyledWrapper,
   AddressContainer,
   AddressScrollContainer,
-  AccountsTitle
+  AccountsTitle,
+  SiteOriginTitle,
+  HeaderRow,
+  HeaderColumn,
+  FavIcon,
+  NewAccountButton
 } from './style'
-// import { getLocale } from '../../../../common/locale'
 
 export interface Props {
-  onDisconnect: (origin: string, address: string) => void
+  onDisconnect: (origin: string, address: string, connectedAccounts: WalletAccountType[]) => void
+  onConnect: (origin: string, address: WalletAccountType) => void
+  onSwitchAccount: (account: WalletAccountType) => void
+  onAddAccount: () => void
+  selectedAccount: WalletAccountType
   siteURL: string
   connectedAccounts: WalletAccountType[]
+  accounts: WalletAccountType[]
 }
 
 const SitePermissions = (props: Props) => {
-  const { siteURL, connectedAccounts, onDisconnect } = props
+  const {
+    siteURL,
+    connectedAccounts,
+    selectedAccount,
+    accounts,
+    onDisconnect,
+    onConnect,
+    onSwitchAccount,
+    onAddAccount
+  } = props
 
   const onDisconnectFromOrigin = (address: string) => {
-    onDisconnect(siteURL, address)
+    const newConnectedAccounts = connectedAccounts.filter((accounts) => accounts.address.toLowerCase() !== address.toLowerCase())
+    onDisconnect(siteURL, address, newConnectedAccounts)
   }
 
+  const onConnectToOrigin = (account: WalletAccountType) => {
+    onConnect(siteURL, account)
+  }
+
+  const onClickSwitchAccount = (account: WalletAccountType) => {
+    onSwitchAccount(account)
+  }
+
+  const checkForPermission = React.useCallback((address: string): boolean => {
+    return connectedAccounts.some(account => account.address.toLowerCase() === address.toLowerCase())
+  }, [connectedAccounts])
+
+  const checkIsActive = React.useCallback((address: string): boolean => {
+    return address.toLowerCase() === selectedAccount.address.toLowerCase()
+  }, [selectedAccount])
+
   return (
     <StyledWrapper>
-      <ConnectHeader hideTitle={true} url={siteURL} />
+      <HeaderRow>
+        <FavIcon src={`chrome://favicon/size/64@1x/${siteURL}`} />
+        <HeaderColumn>
+          <SiteOriginTitle>{siteURL}</SiteOriginTitle>
+          <AccountsTitle>{getLocale('braveWalletSitePermissionsAccounts').replace('$1', connectedAccounts.length.toString())}</AccountsTitle>
+        </HeaderColumn>
+      </HeaderRow>
       <AddressContainer>
-        <AccountsTitle>{getLocale('braveWalletSitePermissionsAccounts').replace('$1', connectedAccounts.length.toString())}</AccountsTitle>
-        {connectedAccounts.length !== 0 &&
-          <>
-            <DividerLine />
-            <AddressScrollContainer>
-              {connectedAccounts.map((account) => (
-                <ConnectedAccountItem
-                  key={account.id}
-                  account={account}
-                  onDisconnect={onDisconnectFromOrigin}
-                />
-              ))}
-            </AddressScrollContainer>
-            <DividerLine />
-          </>
-        }
+        <NewAccountButton onClick={onAddAccount}>{getLocale('braveWalletSitePermissionsNewAccount')}</NewAccountButton>
+        <DividerLine />
+        <AddressScrollContainer>
+          {accounts.map((account) => (
+            <ConnectedAccountItem
+              isActive={checkIsActive(account.address)}
+              key={account.id}
+              account={account}
+              onDisconnect={onDisconnectFromOrigin}
+              onConnect={onConnectToOrigin}
+              onSwitchAccount={onClickSwitchAccount}
+              hasPermission={checkForPermission(account.address)}
+            />
+          ))}
+        </AddressScrollContainer>
       </AddressContainer>
     </StyledWrapper>
   )

components/brave_wallet_ui/components/extension/site-permissions-panel/style.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import { WalletButton } from '../../shared/style'
 
 export const StyledWrapper = styled.div`
   display: flex;
@@ -9,12 +10,29 @@ export const StyledWrapper = styled.div`
   justify-content: flex-start;
 `
 
-export const AddressContainer = styled.div`
+export const HeaderRow = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 4px 12px 12px ;
+`
+
+export const HeaderColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   justify-content: center;
+`
+
+export const AddressContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
   width: 100%;
+  height: 100%;
 `
 
 export const AddressScrollContainer = styled.div`
@@ -23,24 +41,61 @@ export const AddressScrollContainer = styled.div`
   align-items: center;
   justify-content: flex-start;
   width: 100%;
+  max-height: 240px;
   padding-top: 8px;
   padding-left: 10px;
   padding-right: 10px;
   overflow-y: scroll;
   overflow-x: hidden;
   position: relative;
-  max-height: 104px;
   box-sizing: border-box;
 `
 
+export const SiteOriginTitle = styled.span`
+  font-family: Poppins;
+  font-style: normal;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.01em;
+  color: ${(p) => p.theme.color.text02};
+  margin-bottom: 2px;
+`
+
 export const AccountsTitle = styled.span`
   font-family: Poppins;
   font-style: normal;
   font-size: 12px;
   line-height: 18px;
   letter-spacing: 0.01em;
-  margin-bottom: 12px;
   color: ${(p) => p.theme.color.text01};
-  opacity: 0.7;
-  margin-top: 20px;
+`
+
+export const FavIcon = styled.img`
+  width: 48px;
+  height: 48px;
+  border-radius: 5px;
+  background-color: ${(p) => p.theme.palette.grey200};
+  margin-left: 12px;
+  margin-right: 12px;
+`
+
+export const NewAccountButton = styled(WalletButton)`
+  display: flex;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  background: none;
+  padding: 0px;
+  margin: 0px;
+  font-family: Poppins;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  margin-left: 12px;
+  color: ${(p) => p.theme.color.interactive05};
+  @media (prefers-color-scheme: dark) {
+    color: ${(p) => p.theme.palette.blurple300};
+  }
+  letter-spacing: 0.01em;
 `