From b6d79d9df4e108291e58aaeb307512fdb6da5b80 Mon Sep 17 00:00:00 2001 From: Douglas Daniel Date: Wed, 23 Mar 2022 16:09:48 -0600 Subject: [PATCH] Update UI to fix URL wrapping and highlight eTDL+1 --- .../brave_wallet_ui/common/async/lib.ts | 2 +- .../common/reducers/wallet_reducer.ts | 11 +++--- .../allow-add-change-network-panel/index.tsx | 21 +++++++---- .../allow-add-change-network-panel/style.ts | 12 ------- .../confirm-transaction-panel/index.tsx | 28 +++++++++------ .../confirm-transaction-panel/style.ts | 12 ------- .../extension/connect-header/index.tsx | 25 ++++++++++--- .../extension/connect-header/style.ts | 13 +------ .../connect-with-site-panel/index.tsx | 10 +++--- .../extension/connected-panel/index.tsx | 9 ++--- .../extension/encryption-key-panel/index.tsx | 35 ++++++++++++++++--- .../extension/encryption-key-panel/style.ts | 2 +- .../extension/shared-panel-styles.ts | 14 ++++++++ .../site-permissions-panel/index.tsx | 21 +++++++---- .../extension/site-permissions-panel/style.ts | 7 ++-- .../shared/create-site-origin/index.tsx | 25 +++++++++++++ .../components/shared/index.ts | 4 ++- components/brave_wallet_ui/constants/types.ts | 9 +++-- .../panel/async/wallet_panel_async_handler.ts | 4 +-- .../panel/constants/action_types.ts | 4 +-- .../brave_wallet_ui/panel/container.tsx | 25 ++++++------- .../panel/reducers/panel_reducer.ts | 5 ++- components/brave_wallet_ui/stories/locale.ts | 4 +-- .../stories/mock-data/mock-wallet-state.ts | 5 ++- .../stories/wallet-extension-panels.tsx | 25 ++++++++----- components/resources/wallet_strings.grdp | 4 +-- 26 files changed, 216 insertions(+), 120 deletions(-) create mode 100644 components/brave_wallet_ui/components/shared/create-site-origin/index.tsx diff --git a/components/brave_wallet_ui/common/async/lib.ts b/components/brave_wallet_ui/common/async/lib.ts index 6b20ac1ed5d4..5527c58a9cc3 100644 --- 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 index 9b552eaffb96..32bac846ef20 100644 --- 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 index 532732518505..2536729846aa 100644 --- 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 ( - - {siteOrigin} + + + + {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 index a3f0058f006e..e83df04cd792 100644 --- 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 index 8aa513f734e3..71e737f0fef5 100644 --- 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,7 +75,8 @@ import { PanelTitle, AccountCircle, AddressAndOrb, - AddressText + AddressText, + URLText } from '../shared-panel-styles' import AdvancedTransactionSettingsButton from '../advanced-transaction-settings/button' import AdvancedTransactionSettings from '../advanced-transaction-settings' @@ -82,7 +84,7 @@ 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) { {transactionInfo.txType === BraveWallet.TransactionType.ERC20Approve ? ( <> - - {siteURL} + + + + {getLocale('braveWalletAllowSpendTitle').replace('$1', foundTokenInfoByContractAddress?.symbol ?? '')} {getLocale('braveWalletAllowSpendDescription').replace('$1', foundTokenInfoByContractAddress?.symbol ?? '')} {transactionDetails.isApprovalUnlimited && - + {getLocale('braveWalletAllowSpendUnlimitedWarningTitle')} @@ -394,7 +400,7 @@ function ConfirmTransactionPanel (props: Props) { /> @@ -439,7 +445,7 @@ function ConfirmTransactionPanel (props: Props) { transactionDetails.isApprovalUnlimited ? getLocale('braveWalletTransactionApproveUnlimited') : new Amount(transactionDetails.valueExact) - .formatAsAsset(undefined, transactionDetails.symbol) + .formatAsAsset(undefined, transactionDetails.symbol) } 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 index 3650e4a2db28..0a0f13a716a9 100644 --- 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 index eae8c4c73947..7ddae9c6fe5a 100644 --- 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 ( - - {url} + + + + {!hideTitle && {getLocale('braveWalletConnectWithSiteHeaderTitle')} } diff --git a/components/brave_wallet_ui/components/extension/connect-header/style.ts b/components/brave_wallet_ui/components/extension/connect-header/style.ts index 4ebe547cca8b..75a5100b36c9 100644 --- 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 index 878f8a1539f5..4f15c1d7594d 100644 --- 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 ( - + {isReady ? ( diff --git a/components/brave_wallet_ui/components/extension/connected-panel/index.tsx b/components/brave_wallet_ui/components/extension/connected-panel/index.tsx index 92a9ea045bab..5ea5601a6757 100644 --- 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(false) @@ -134,7 +135,7 @@ const ConnectedPanel = (props: Props) => { /> - {!activeOrigin.startsWith('chrome://') ? ( + {!originInfo?.origin?.startsWith('chrome://') ? ( {isConnected && } {isConnected ? getLocale('braveWalletPanelConnected') : getLocale('braveWalletPanelNotConnected')} diff --git a/components/brave_wallet_ui/components/extension/encryption-key-panel/index.tsx b/components/brave_wallet_ui/components/extension/encryption-key-panel/index.tsx index aade3f1478ff..cc7fb799939a 100644 --- a/components/brave_wallet_ui/components/extension/encryption-key-panel/index.tsx +++ b/components/brave_wallet_ui/components/extension/encryption-key-panel/index.tsx @@ -5,11 +5,12 @@ import { BraveWallet, WalletAccountType } from '../../../constants/types' // Utils import { reduceAccountDisplayName } from '../../../utils/reduce-account-name' -import { getLocale } from '../../../../common/locale' +import { getLocale, splitStringForTag } from '../../../../common/locale' // Components import { create } from 'ethereum-blockies' import { NavButton, PanelTab } from '..' +import { CreateSiteOrigin } from '../../shared' // Styled Components import { @@ -25,13 +26,14 @@ import { DecryptButton } from './style' -import { TabRow } from '../shared-panel-styles' +import { TabRow, URLText } from '../shared-panel-styles' export interface Props { panelType: 'request' | 'read' accounts: WalletAccountType[] selectedNetwork: BraveWallet.NetworkInfo encryptionKeyPayload: BraveWallet.GetEncryptionPublicKeyRequest + eTldPlusOne: string onProvideOrAllow: () => void onCancel: () => void } @@ -42,6 +44,7 @@ function EncryptionKeyPanel (props: Props) { accounts, selectedNetwork, encryptionKeyPayload, + eTldPlusOne, onProvideOrAllow, onCancel } = props @@ -59,6 +62,9 @@ function EncryptionKeyPanel (props: Props) { setIsDecrypted(true) } + const descriptionString = getLocale('braveWalletProvideEncryptionKeyDescription').replace('$url', encryptionKeyPayload.origin.url) + const { duringTag, afterTag } = splitStringForTag(descriptionString) + return ( @@ -66,10 +72,22 @@ function EncryptionKeyPanel (props: Props) { {reduceAccountDisplayName(foundAccountName ?? '', 14)} + {panelType === 'read' && + + + + } {panelType === 'request' ? getLocale('braveWalletProvideEncryptionKeyTitle') - : getLocale('braveWalletReadEncryptedMessageTitle').replace('$1', encryptionKeyPayload.origin.url)} + : getLocale('braveWalletReadEncryptedMessageTitle')} {panelType === 'request' - ? getLocale('braveWalletProvideEncryptionKeyDescription').replace('$1', encryptionKeyPayload.origin.url) + ? <> + + {afterTag} + : encryptionKeyPayload.message} )} diff --git a/components/brave_wallet_ui/components/extension/encryption-key-panel/style.ts b/components/brave_wallet_ui/components/extension/encryption-key-panel/style.ts index da6748af9637..425d166219e6 100644 --- a/components/brave_wallet_ui/components/extension/encryption-key-panel/style.ts +++ b/components/brave_wallet_ui/components/extension/encryption-key-panel/style.ts @@ -62,7 +62,7 @@ export const PanelTitle = styled.span` text-align: center; color: ${(p) => p.theme.color.text01}; font-weight: 600; - margin-bottom: 15px; + margin-bottom: 6px; ` export const MessageBox = styled.div>` diff --git a/components/brave_wallet_ui/components/extension/shared-panel-styles.ts b/components/brave_wallet_ui/components/extension/shared-panel-styles.ts index 84c7726874d7..e25f5c9d9c04 100644 --- a/components/brave_wallet_ui/components/extension/shared-panel-styles.ts +++ b/components/brave_wallet_ui/components/extension/shared-panel-styles.ts @@ -120,3 +120,17 @@ export const DetailTextDark = styled.span` letter-spacing: 0.01em; color: ${(p) => p.theme.color.text02}; ` + +export const URLText = styled.span` + font-family: Poppins; + font-style: normal; + font-weight: normal; + font-size: 10px; + line-height: 16px; + text-align: center; + letter-spacing: 0.01em; + margin-bottom: 8px; + color: ${(p) => p.theme.color.text02}; + max-width: 80%; + word-break: break-word; +` diff --git a/components/brave_wallet_ui/components/extension/site-permissions-panel/index.tsx b/components/brave_wallet_ui/components/extension/site-permissions-panel/index.tsx index 3b2ad0253739..e7b2137e683e 100644 --- a/components/brave_wallet_ui/components/extension/site-permissions-panel/index.tsx +++ b/components/brave_wallet_ui/components/extension/site-permissions-panel/index.tsx @@ -1,10 +1,13 @@ import * as React from 'react' -import { WalletAccountType } from '../../../constants/types' +import { OriginInfo, WalletAccountType } from '../../../constants/types' import { getLocale } from '../../../../common/locale' + +// Components import { DividerLine, ConnectedAccountItem } from '../' +import { CreateSiteOrigin } from '../../shared' // Styled Components import { @@ -25,14 +28,14 @@ export interface Props { onSwitchAccount: (account: WalletAccountType) => void onAddAccount: () => void selectedAccount: WalletAccountType - siteURL: string + originInfo: OriginInfo connectedAccounts: WalletAccountType[] accounts: WalletAccountType[] } const SitePermissions = (props: Props) => { const { - siteURL, + originInfo, connectedAccounts, selectedAccount, accounts, @@ -44,11 +47,11 @@ const SitePermissions = (props: Props) => { const onDisconnectFromOrigin = (address: string) => { const newConnectedAccounts = connectedAccounts.filter((accounts) => accounts.address.toLowerCase() !== address.toLowerCase()) - onDisconnect(siteURL, address, newConnectedAccounts) + onDisconnect(originInfo.origin, address, newConnectedAccounts) } const onConnectToOrigin = (account: WalletAccountType) => { - onConnect(siteURL, account) + onConnect(originInfo.origin, account) } const onClickSwitchAccount = (account: WalletAccountType) => { @@ -66,9 +69,13 @@ const SitePermissions = (props: Props) => { return ( - + - {siteURL} + + + {getLocale('braveWalletSitePermissionsAccounts').replace('$1', connectedAccounts.length.toString())} diff --git a/components/brave_wallet_ui/components/extension/site-permissions-panel/style.ts b/components/brave_wallet_ui/components/extension/site-permissions-panel/style.ts index f8782e453585..9faee4d583fa 100644 --- a/components/brave_wallet_ui/components/extension/site-permissions-panel/style.ts +++ b/components/brave_wallet_ui/components/extension/site-permissions-panel/style.ts @@ -54,11 +54,13 @@ export const AddressScrollContainer = styled.div` export const SiteOriginTitle = styled.span` font-family: Poppins; font-style: normal; - font-size: 14px; - line-height: 20px; + font-size: 12px; + line-height: 18px; letter-spacing: 0.01em; color: ${(p) => p.theme.color.text02}; margin-bottom: 2px; + margin-right: 10px; + word-break: break-word; ` export const AccountsTitle = styled.span` @@ -68,6 +70,7 @@ export const AccountsTitle = styled.span` line-height: 18px; letter-spacing: 0.01em; color: ${(p) => p.theme.color.text01}; + margin-top: 4px; ` export const FavIcon = styled.img` diff --git a/components/brave_wallet_ui/components/shared/create-site-origin/index.tsx b/components/brave_wallet_ui/components/shared/create-site-origin/index.tsx new file mode 100644 index 000000000000..569edf306af9 --- /dev/null +++ b/components/brave_wallet_ui/components/shared/create-site-origin/index.tsx @@ -0,0 +1,25 @@ +import * as React from 'react' +import { OriginInfo } from '../../../constants/types' + +export interface Props { + originInfo: OriginInfo +} + +const CreateSiteOrigin = (props: Props) => { + const { originInfo } = props + + const { eTldPlusOne, origin } = originInfo + + const url = React.useMemo(() => { + if (eTldPlusOne) { + const before = origin.split(eTldPlusOne)[0] + const after = origin.split(eTldPlusOne)[1] + // Will inherit styling from parent container + return {before}{eTldPlusOne}{after} + } + return {origin} + }, [eTldPlusOne, origin]) + + return (<>{url}) +} +export default CreateSiteOrigin diff --git a/components/brave_wallet_ui/components/shared/index.ts b/components/brave_wallet_ui/components/shared/index.ts index 1236d6d39c70..36e8ff4f9dc9 100644 --- a/components/brave_wallet_ui/components/shared/index.ts +++ b/components/brave_wallet_ui/components/shared/index.ts @@ -10,6 +10,7 @@ import withPlaceholderIcon from './create-placeholder-icon' import CreateNetworkIcon from './create-network-icon' import SelectNetworkButton from './select-network-button' import LoadingSkeleton from './loading-skeleton' +import CreateSiteOrigin from './create-site-origin' export { AppListItem, @@ -23,5 +24,6 @@ export { withPlaceholderIcon, CreateNetworkIcon, SelectNetworkButton, - LoadingSkeleton + LoadingSkeleton, + CreateSiteOrigin } diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts index 6c13d11bea53..4cb8b539e353 100644 --- a/components/brave_wallet_ui/constants/types.ts +++ b/components/brave_wallet_ui/constants/types.ts @@ -211,7 +211,7 @@ export interface WalletState { transactionSpotPrices: BraveWallet.AssetPrice[] addUserAssetError: boolean defaultWallet: BraveWallet.DefaultWallet - activeOrigin: string + activeOrigin: OriginInfo gasEstimates?: BraveWallet.GasEstimation1559 connectedAccounts: WalletAccountType[] isMetaMaskInstalled: boolean @@ -223,7 +223,7 @@ export interface WalletState { export interface PanelState { hasInitialized: boolean - connectToSiteOrigin: string + connectToSiteOrigin: OriginInfo selectedPanel: PanelTypes panelTitle: string connectingAccounts: string[] @@ -624,3 +624,8 @@ export enum CoinTypesMap { FIL = BraveWallet.CoinType.FIL, SOL = BraveWallet.CoinType.SOL } + +export type OriginInfo = { + origin: string + eTldPlusOne: string +} diff --git a/components/brave_wallet_ui/panel/async/wallet_panel_async_handler.ts b/components/brave_wallet_ui/panel/async/wallet_panel_async_handler.ts index ae5775671b07..b4aa0d53ec13 100644 --- a/components/brave_wallet_ui/panel/async/wallet_panel_async_handler.ts +++ b/components/brave_wallet_ui/panel/async/wallet_panel_async_handler.ts @@ -161,8 +161,8 @@ handler.on(WalletActions.initialize.getType(), async (store) => { if (url.hash === '#connectWithSite') { const accounts = url.searchParams.getAll('addr') || [] const origin = url.searchParams.get('origin') || '' - // const eTLDPlusOne = url.searchParams.get('etld-plus-one') || '' - store.dispatch(PanelActions.showConnectToSite({ accounts, origin })) + const eTldPlusOne = url.searchParams.get('etld-plus-one') || '' + store.dispatch(PanelActions.showConnectToSite({ accounts, origin: { origin, eTldPlusOne } })) return } else { const unlockRequest = await hasPendingUnlockRequest() diff --git a/components/brave_wallet_ui/panel/constants/action_types.ts b/components/brave_wallet_ui/panel/constants/action_types.ts index 27a82cf2d977..dc668bcd0d20 100644 --- a/components/brave_wallet_ui/panel/constants/action_types.ts +++ b/components/brave_wallet_ui/panel/constants/action_types.ts @@ -3,7 +3,7 @@ // 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 { BraveWallet, Url, WalletAccountType } from '../../constants/types' +import { BraveWallet, Url, WalletAccountType, OriginInfo } from '../../constants/types' export type AccountPayloadType = { selectedAccounts: WalletAccountType[] @@ -12,7 +12,7 @@ export type AccountPayloadType = { export type ShowConnectToSitePayload = { accounts: string[] - origin: string + origin: OriginInfo } export type EthereumChainRequestPayload = { diff --git a/components/brave_wallet_ui/panel/container.tsx b/components/brave_wallet_ui/panel/container.tsx index b9a004280909..827fa990c09d 100644 --- a/components/brave_wallet_ui/panel/container.tsx +++ b/components/brave_wallet_ui/panel/container.tsx @@ -277,7 +277,7 @@ function Container (props: Props) { const onSubmit = () => { props.walletPanelActions.connectToSite({ selectedAccounts, - siteToConnectTo: connectToSiteOrigin + siteToConnectTo: connectToSiteOrigin.origin }) } const primaryAction = () => { @@ -295,7 +295,7 @@ function Container (props: Props) { } else { props.walletPanelActions.cancelConnectToSite({ selectedAccounts, - siteToConnectTo: props.panel.connectToSiteOrigin + siteToConnectTo: props.panel.connectToSiteOrigin.origin }) setSelectedAccounts([]) setReadyToConnect(false) @@ -543,7 +543,7 @@ function Container (props: Props) { } const isConnectedToSite = React.useMemo((): boolean => { - if (activeOrigin === WalletOrigin) { + if (activeOrigin.origin === WalletOrigin) { return true } else { return connectedAccounts.some(account => account.address === selectedAccount.address) @@ -604,7 +604,7 @@ function Container (props: Props) { - + + - + ) } @@ -1024,7 +1025,7 @@ function Container (props: Props) { navAction={navigateTo} onLockWallet={onLockWallet} onOpenSettings={onOpenSettings} - activeOrigin={activeOrigin} + originInfo={activeOrigin} isSwapSupported={isSwapSupported} /> diff --git a/components/brave_wallet_ui/panel/reducers/panel_reducer.ts b/components/brave_wallet_ui/panel/reducers/panel_reducer.ts index a3b9429730ff..bf2d43d00a0d 100644 --- a/components/brave_wallet_ui/panel/reducers/panel_reducer.ts +++ b/components/brave_wallet_ui/panel/reducers/panel_reducer.ts @@ -19,7 +19,10 @@ import { HardwareWalletResponseCodeType } from '../../common/hardware/types' const defaultState: PanelState = { hasInitialized: false, - connectToSiteOrigin: '', + connectToSiteOrigin: { + origin: '', + eTldPlusOne: '' + }, selectedPanel: 'main', panelTitle: '', connectingAccounts: [], diff --git a/components/brave_wallet_ui/stories/locale.ts b/components/brave_wallet_ui/stories/locale.ts index 7ce76da8fb03..97b53cf4a40e 100644 --- a/components/brave_wallet_ui/stories/locale.ts +++ b/components/brave_wallet_ui/stories/locale.ts @@ -287,9 +287,9 @@ provideStrings({ // Encryption Key Panel braveWalletProvideEncryptionKeyTitle: 'A DApp is requesting your public encryption key', - braveWalletProvideEncryptionKeyDescription: '$1 is requesting your wallets public encryption key. If you consent to providing this key, the site will be able to compose encrypted messages to you.', + braveWalletProvideEncryptionKeyDescription: '$1$url$2 is requesting your wallets public encryption key. If you consent to providing this key, the site will be able to compose encrypted messages to you.', braveWalletProvideEncryptionKeyButton: 'Provide', - braveWalletReadEncryptedMessageTitle: '$1 would like to read this message to complete your request', + braveWalletReadEncryptedMessageTitle: 'This DApp would like to read this message to complete your request', braveWalletReadEncryptedMessageDecryptButton: 'Decrypt message', braveWalletReadEncryptedMessageButton: 'Allow', diff --git a/components/brave_wallet_ui/stories/mock-data/mock-wallet-state.ts b/components/brave_wallet_ui/stories/mock-data/mock-wallet-state.ts index be7f7eef6df1..6277a82713ac 100644 --- a/components/brave_wallet_ui/stories/mock-data/mock-wallet-state.ts +++ b/components/brave_wallet_ui/stories/mock-data/mock-wallet-state.ts @@ -144,7 +144,10 @@ export const mockWalletState: WalletState = { accounts: [ mockAccount ], - activeOrigin: '', + activeOrigin: { + origin: 'https://app.uniswap.org', + eTldPlusOne: 'uniswap.org' + }, addUserAssetError: false, connectedAccounts: [], defaultCurrencies: { diff --git a/components/brave_wallet_ui/stories/wallet-extension-panels.tsx b/components/brave_wallet_ui/stories/wallet-extension-panels.tsx index 065f26842266..0211956c6630 100644 --- a/components/brave_wallet_ui/stories/wallet-extension-panels.tsx +++ b/components/brave_wallet_ui/stories/wallet-extension-panels.tsx @@ -30,7 +30,8 @@ import { WalletAccountType, PanelTypes, AppsListType, - BuySendSwapViewTypes + BuySendSwapViewTypes, + OriginInfo } from '../constants/types' import { UpdateUnapprovedTransactionGasFieldsType, @@ -62,6 +63,11 @@ export default { } } +const originInfo: OriginInfo = { + origin: 'https://app.uniswap.org/With_A_Really_Looooooong_Site_Name/fixme', + eTldPlusOne: 'uniswap.org' +} + const accounts: WalletAccountType[] = [ { id: '1', @@ -190,7 +196,7 @@ export const _ConfirmTransaction = () => { { return ( { selectedNetwork={mockNetworks[0]} onCancel={onCancel} onProvideOrAllow={onProvide} + eTldPlusOne={originInfo.eTldPlusOne} /> ) @@ -336,6 +343,7 @@ export const _ReadEncryptedMessage = () => { selectedNetwork={mockNetworks[0]} onCancel={onCancel} onProvideOrAllow={onAllow} + eTldPlusOne={originInfo.eTldPlusOne} /> ) @@ -350,7 +358,6 @@ export const _ConnectWithSite = () => { accounts[0] ]) const [readyToConnect, setReadyToConnect] = React.useState(false) - const url = 'https://app.uniswap.org' const selectAccount = (account: WalletAccountType) => { const newList = [...selectedAccounts, account] setSelectedAccounts(newList) @@ -362,7 +369,7 @@ export const _ConnectWithSite = () => { setSelectedAccounts(newList) } const onSubmit = () => { - alert(`Connecting to ${url} using: ${JSON.stringify(selectedAccounts)}`) + alert(`Connecting to ${originInfo.origin} using: ${JSON.stringify(selectedAccounts)}`) } const primaryAction = () => { if (!readyToConnect) { @@ -381,7 +388,7 @@ export const _ConnectWithSite = () => { return ( { navAction={navigateTo} onLockWallet={onLockWallet} onOpenSettings={onOpenSettings} - activeOrigin='' + originInfo={originInfo} isSwapSupported={true} /> ) : ( @@ -732,7 +739,7 @@ export const _ConnectedPanel = (args: { locked: boolean }) => { {selectedPanel === 'sitePermissions' && Message Sign A DApp is requesting your public encryption key - https://app.skiff.org$1 is requesting your wallets public encryption key. If you consent to providing this key, the site will be able to compose encrypted messages to you. + $1$url$2 is requesting your wallets public encryption key. If you consent to providing this key, the site will be able to compose encrypted messages to you. Provide - https://app.skiff.org$1 would like to read this message to complete your request + This DApp would like to read this message to complete your request Decrypt message Allow Allow this app to spend your ETH$1?