Update UI to fix URL wrapping and highlight eTDL+1

brave · Mar 26, 2022 · b6d79d9 · b6d79d9
1 parent 42289a6
commit b6d79d9
Show file tree

Hide file tree

Showing 26 changed files with 216 additions and 120 deletions.
diff --git a/components/brave_wallet_ui/common/async/lib.ts b/components/brave_wallet_ui/common/async/lib.ts
@@ -527,7 +527,7 @@ export function refreshSitePermissions () {
 
     // Get a list of accounts with permissions of the active origin
     const getAllPermissions = await Promise.all(accounts.map(async (account) => {
-      const result = await braveWalletService.hasEthereumPermission(activeOrigin, account.address)
+      const result = await braveWalletService.hasEthereumPermission(activeOrigin.origin, account.address)
       if (result.hasPermission) {
         return account
       }

diff --git a/components/brave_wallet_ui/common/reducers/wallet_reducer.ts b/components/brave_wallet_ui/common/reducers/wallet_reducer.ts
@@ -76,7 +76,10 @@ const defaultState: WalletState = {
   transactionSpotPrices: [],
   addUserAssetError: false,
   defaultWallet: BraveWallet.DefaultWallet.BraveWalletPreferExtension,
-  activeOrigin: '',
+  activeOrigin: {
+    origin: '',
+    eTldPlusOne: ''
+  },
   gasEstimates: undefined,
   connectedAccounts: [],
   isMetaMaskInstalled: false,
@@ -309,8 +312,8 @@ export const createWalletReducer = (initialState: WalletState) => {
 
   reducer.on(WalletActions.transactionStatusChanged, (state: WalletState, payload: TransactionStatusChanged): WalletState => {
     const newPendingTransactions = state.pendingTransactions
-    .filter((tx: BraveWallet.TransactionInfo) => tx.id !== payload.txInfo.id)
-    .concat(payload.txInfo.txStatus === BraveWallet.TransactionStatus.Unapproved ? [payload.txInfo] : [])
+      .filter((tx: BraveWallet.TransactionInfo) => tx.id !== payload.txInfo.id)
+      .concat(payload.txInfo.txStatus === BraveWallet.TransactionStatus.Unapproved ? [payload.txInfo] : [])
 
     const sortedTransactionList = sortTransactionByDate(newPendingTransactions)
 
@@ -368,7 +371,7 @@ export const createWalletReducer = (initialState: WalletState) => {
   reducer.on(WalletActions.activeOriginChanged, (state: WalletState, payload: ActiveOriginChanged): WalletState => {
     return {
       ...state,
-      activeOrigin: payload.origin
+      activeOrigin: payload
     }
   })
 

diff --git a/components/brave_wallet_ui/components/extension/allow-add-change-network-panel/index.tsx b/components/brave_wallet_ui/components/extension/allow-add-change-network-panel/index.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react'
-import { BraveWallet } from '../../../constants/types'
+import { BraveWallet, OriginInfo } from '../../../constants/types'
 import { getLocale } from '../../../../common/locale'
+
+// Components
 import { NavButton, PanelTab } from '..'
+import { CreateSiteOrigin } from '../../shared'
 
 // Styled Components
 import {
@@ -11,7 +14,6 @@ import {
   DetailsButton,
   ButtonRow,
   FavIcon,
-  URLText,
   NetworkDetail,
   TabRow
 } from './style'
@@ -20,13 +22,14 @@ import {
   StyledWrapper,
   CenterColumn,
   Description,
-  PanelTitle
+  PanelTitle,
+  URLText
 } from '../shared-panel-styles'
 
 export type tabs = 'network' | 'details'
 
 export interface Props {
-  siteOrigin: string
+  originInfo: OriginInfo
   networkPayload: BraveWallet.NetworkInfo
   panelType: 'add' | 'change'
   onCancel: () => void
@@ -37,7 +40,7 @@ export interface Props {
 
 function AllowAddChangeNetworkPanel (props: Props) {
   const {
-    siteOrigin,
+    originInfo,
     networkPayload,
     panelType,
     onCancel,
@@ -56,8 +59,12 @@ function AllowAddChangeNetworkPanel (props: Props) {
   return (
     <StyledWrapper>
       <CenterColumn>
-        <FavIcon src={`chrome://favicon/size/64@1x/${siteOrigin}`} />
-        <URLText>{siteOrigin}</URLText>
+        <FavIcon src={`chrome://favicon/size/64@1x/${originInfo.origin}`} />
+        <URLText>
+          <CreateSiteOrigin
+            originInfo={originInfo}
+          />
+        </URLText>
         <PanelTitle>
           {panelType === 'change'
             ? getLocale('braveWalletAllowChangeNetworkTitle')

diff --git a/components/brave_wallet_ui/components/extension/allow-add-change-network-panel/style.ts b/components/brave_wallet_ui/components/extension/allow-add-change-network-panel/style.ts
@@ -36,18 +36,6 @@ export const ButtonRow = styled.div`
   margin-bottom: 14px;
 `
 
-export const URLText = styled.span`
-  font-family: Poppins;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 13px;
-  line-height: 20px;
-  text-align: center;
-  letter-spacing: 0.01em;
-  margin-bottom: 6px;
-  color: ${(p) => p.theme.color.text02};
-`
-
 export const FavIcon = styled.img`
   width: 48px;
   height: 48px;

diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/index.tsx b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/index.tsx
@@ -4,7 +4,8 @@ import { create } from 'ethereum-blockies'
 import {
   BraveWallet,
   WalletAccountType,
-  DefaultCurrencies
+  DefaultCurrencies,
+  OriginInfo
 } from '../../../constants/types'
 import {
   UpdateUnapprovedTransactionGasFieldsType,
@@ -23,8 +24,9 @@ import { usePricing, useTransactionParser, useTokenInfo } from '../../../common/
 import { useLib } from '../../../common/hooks/useLib'
 
 import { getLocale } from '../../../../common/locale'
-import { withPlaceholderIcon } from '../../shared'
 
+// Components
+import { withPlaceholderIcon, CreateSiteOrigin } from '../../shared'
 import { NavButton, PanelTab, TransactionDetailBox } from '../'
 import EditGas, { MaxPriorityPanels } from '../edit-gas'
 import EditAllowance from '../edit-allowance'
@@ -53,7 +55,6 @@ import {
   SectionRightColumn,
   EditButton,
   FavIcon,
-  URLText,
   QueueStepText,
   QueueStepRow,
   QueueStepButton,
@@ -74,15 +75,16 @@ import {
   PanelTitle,
   AccountCircle,
   AddressAndOrb,
-  AddressText
+  AddressText,
+  URLText
 } from '../shared-panel-styles'
 import AdvancedTransactionSettingsButton from '../advanced-transaction-settings/button'
 import AdvancedTransactionSettings from '../advanced-transaction-settings'
 
 export type confirmPanelTabs = 'transaction' | 'details'
 
 export interface Props {
-  siteURL: string
+  originInfo: OriginInfo
   accounts: WalletAccountType[]
   visibleTokens: BraveWallet.BlockchainToken[]
   fullTokenList: BraveWallet.BlockchainToken[]
@@ -106,7 +108,7 @@ export interface Props {
 
 function ConfirmTransactionPanel (props: Props) {
   const {
-    siteURL,
+    originInfo,
     accounts,
     selectedNetwork,
     transactionInfo,
@@ -329,15 +331,19 @@ function ConfirmTransactionPanel (props: Props) {
       </TopRow>
       {transactionInfo.txType === BraveWallet.TransactionType.ERC20Approve ? (
         <>
-          <FavIcon src={`chrome://favicon/size/64@1x/${siteURL}`} />
-          <URLText>{siteURL}</URLText>
+          <FavIcon src={`chrome://favicon/size/64@1x/${originInfo.origin}`} />
+          <URLText>
+            <CreateSiteOrigin
+              originInfo={originInfo}
+            />
+          </URLText>
           <PanelTitle>{getLocale('braveWalletAllowSpendTitle').replace('$1', foundTokenInfoByContractAddress?.symbol ?? '')}</PanelTitle>
           <Description>{getLocale('braveWalletAllowSpendDescription').replace('$1', foundTokenInfoByContractAddress?.symbol ?? '')}</Description>
 
           {transactionDetails.isApprovalUnlimited &&
             <WarningBox>
               <WarningTitleRow>
-                <WarningIcon/>
+                <WarningIcon />
                 <WarningTitle>
                   {getLocale('braveWalletAllowSpendUnlimitedWarningTitle')}
                 </WarningTitle>
@@ -394,7 +400,7 @@ function ConfirmTransactionPanel (props: Props) {
         />
 
         <AdvancedTransactionSettingsButton
-          onSubmit={ onToggleAdvancedTransactionSettings }
+          onSubmit={onToggleAdvancedTransactionSettings}
         />
       </TabRow>
       <MessageBox isDetails={selectedTab === 'details'} isApprove={transactionInfo.txType === BraveWallet.TransactionType.ERC20Approve}>
@@ -439,7 +445,7 @@ function ConfirmTransactionPanel (props: Props) {
                         transactionDetails.isApprovalUnlimited
                           ? getLocale('braveWalletTransactionApproveUnlimited')
                           : new Amount(transactionDetails.valueExact)
-                              .formatAsAsset(undefined, transactionDetails.symbol)
+                            .formatAsAsset(undefined, transactionDetails.symbol)
                       }
                     </TransactionTypeText>
                     <TransactionText />

diff --git a/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts b/components/brave_wallet_ui/components/extension/confirm-transaction-panel/style.ts
@@ -257,18 +257,6 @@ export const FiatRow = styled.div`
   width: 100%;
 `
 
-export const URLText = styled.span`
-  font-family: Poppins;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 13px;
-  line-height: 20px;
-  text-align: center;
-  letter-spacing: 0.01em;
-  margin-bottom: 6px;
-  color: ${(p) => p.theme.color.text02};
-`
-
 export const FavIcon = styled.img`
   width: 48px;
   height: 48px;

diff --git a/components/brave_wallet_ui/components/extension/connect-header/index.tsx b/components/brave_wallet_ui/components/extension/connect-header/index.tsx
@@ -1,20 +1,35 @@
 import * as React from 'react'
+import { OriginInfo } from '../../../constants/types'
+
+// Utils
 import { getLocale } from '../../../../common/locale'
 
+// Components
+import { CreateSiteOrigin } from '../../shared'
+
 // Styled Components
-import { StyledWrapper, FavIcon, URLText, PanelTitle } from './style'
+import {
+  StyledWrapper,
+  FavIcon,
+  PanelTitle
+} from './style'
+
+import { URLText } from '../shared-panel-styles'
 
 export interface Props {
-  url: string
+  originInfo: OriginInfo
   hideTitle?: boolean
 }
 
 function ConnectHeader (props: Props) {
-  const { url, hideTitle } = props
+  const { originInfo, hideTitle } = props
+
   return (
     <StyledWrapper>
-      <FavIcon src={`chrome://favicon/size/64@1x/${url}`} />
-      <URLText>{url}</URLText>
+      <FavIcon src={`chrome://favicon/size/64@1x/${originInfo.origin}`} />
+      <URLText>
+        <CreateSiteOrigin originInfo={originInfo} />
+      </URLText>
       {!hideTitle &&
         <PanelTitle>{getLocale('braveWalletConnectWithSiteHeaderTitle')}</PanelTitle>
       }

diff --git a/components/brave_wallet_ui/components/extension/connect-header/style.ts b/components/brave_wallet_ui/components/extension/connect-header/style.ts
@@ -9,18 +9,6 @@ export const StyledWrapper = styled.div`
   padding-top: 25px;
 `
 
-export const URLText = styled.span`
-  font-family: Poppins;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 13px;
-  line-height: 20px;
-  text-align: center;
-  letter-spacing: 0.01em;
-  margin-bottom: 11px;
-  color: ${(p) => p.theme.color.text02};
-`
-
 export const PanelTitle = styled.span`
   font-family: Poppins;
   font-style: normal;
@@ -30,6 +18,7 @@ export const PanelTitle = styled.span`
   text-align: center;
   letter-spacing: 0.04em;
   color: ${(p) => p.theme.color.text01};
+  margin-top: 5px;
 `
 
 export const FavIcon = styled.img`

diff --git a/components/brave_wallet_ui/components/extension/connect-with-site-panel/index.tsx b/components/brave_wallet_ui/components/extension/connect-with-site-panel/index.tsx
@@ -1,5 +1,8 @@
 import * as React from 'react'
 
+// Types
+import { OriginInfo, WalletAccountType } from '../../../constants/types'
+
 // Components
 import {
   DividerLine,
@@ -26,11 +29,10 @@ import {
 
 // Utils
 import { reduceAddress } from '../../../utils/reduce-address'
-import { WalletAccountType } from '../../../constants/types'
 import { getLocale } from '../../../../common/locale'
 
 export interface Props {
-  siteURL: string
+  originInfo: OriginInfo
   accounts: WalletAccountType[]
   primaryAction: () => void
   secondaryAction: () => void
@@ -45,7 +47,7 @@ function ConnectWithSite (props: Props) {
     secondaryAction,
     removeAccount,
     selectAccount,
-    siteURL,
+    originInfo,
     accounts,
     isReady,
     selectedAccounts
@@ -87,7 +89,7 @@ function ConnectWithSite (props: Props) {
 
   return (
     <StyledWrapper>
-      <ConnectHeader url={siteURL} />
+      <ConnectHeader originInfo={originInfo} />
       <MiddleWrapper>
         {isReady ? (
           <AccountListWrapper>

diff --git a/components/brave_wallet_ui/components/extension/connected-panel/index.tsx b/components/brave_wallet_ui/components/extension/connected-panel/index.tsx
@@ -39,7 +39,8 @@ import {
   PanelTypes,
   BraveWallet,
   BuySupportedChains,
-  DefaultCurrencies
+  DefaultCurrencies,
+  OriginInfo
 } from '../../../constants/types'
 import { create, background } from 'ethereum-blockies'
 import { getLocale } from '../../../../common/locale'
@@ -49,7 +50,7 @@ export interface Props {
   selectedAccount: WalletAccountType
   selectedNetwork: BraveWallet.NetworkInfo
   isConnected: boolean
-  activeOrigin: string
+  originInfo: OriginInfo
   isSwapSupported: boolean
   defaultCurrencies: DefaultCurrencies
   navAction: (path: PanelTypes) => void
@@ -67,7 +68,7 @@ const ConnectedPanel = (props: Props) => {
     navAction,
     selectedAccount,
     selectedNetwork,
-    activeOrigin,
+    originInfo,
     defaultCurrencies
   } = props
   const [showMore, setShowMore] = React.useState<boolean>(false)
@@ -134,7 +135,7 @@ const ConnectedPanel = (props: Props) => {
       />
       <CenterColumn>
         <StatusRow>
-          {!activeOrigin.startsWith('chrome://') ? (
+          {!originInfo?.origin?.startsWith('chrome://') ? (
             <OvalButton onClick={onShowSitePermissions}>
               {isConnected && <BigCheckMark />}
               <OvalButtonText>{isConnected ? getLocale('braveWalletPanelConnected') : getLocale('braveWalletPanelNotConnected')}</OvalButtonText>