diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/components/brave_wallet/browser/brave_wallet_constants.h index 3f124d827d17..d47fa6795f6a 100644 --- a/components/brave_wallet/browser/brave_wallet_constants.h +++ b/components/brave_wallet/browser/brave_wallet_constants.h @@ -273,6 +273,8 @@ constexpr webui::LocalizedString kLocalizedStrings[] = { IDS_BRAVE_WALLET_ACCOUNT_SETTINGS_DISCLAIMER}, {"braveWalletFilExportPrivateKeyFormatDescription", IDS_BRAVE_WALLET_FIL_EXPORT_PRIVATE_KEY_FORMAT_DESCRIPTION}, + {"braveWalletFilImportPrivateKeyFormatDescription", + IDS_BRAVE_WALLET_FIL_IMPORT_PRIVATE_KEY_FORMAT_DESCRIPTION}, {"braveWalletAccountSettingsShowKey", IDS_BRAVE_WALLET_ACCOUNT_SETTINGS_SHOW_KEY}, {"braveWalletAccountSettingsHideKey", diff --git a/components/brave_wallet_ui/common/constants/urls.ts b/components/brave_wallet_ui/common/constants/urls.ts new file mode 100644 index 000000000000..e29d28ca727b --- /dev/null +++ b/components/brave_wallet_ui/common/constants/urls.ts @@ -0,0 +1,6 @@ +// 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/. + +export const FILECOIN_FORMAT_DESCRIPTION_URL = 'https://lotus.filecoin.io/lotus/manage/lotus-cli/#lotus-wallet-import' diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/account-settings-modal/index.tsx b/components/brave_wallet_ui/components/desktop/popup-modals/account-settings-modal/index.tsx index 3bd0f38ffcd7..df34f8d2b8f6 100644 --- a/components/brave_wallet_ui/components/desktop/popup-modals/account-settings-modal/index.tsx +++ b/components/brave_wallet_ui/components/desktop/popup-modals/account-settings-modal/index.tsx @@ -15,11 +15,12 @@ import { AccountSettingsNavOptions, HardwareAccountSettingsNavOptions } from '../../../../options/account-settings-nav-options' +import { FILECOIN_FORMAT_DESCRIPTION_URL } from '../../../../common/constants/urls' import { reduceAddress } from '../../../../utils/reduce-address' import { copyToClipboard } from '../../../../utils/copy-to-clipboard' import { NavButton } from '../../../extension' import { Tooltip } from '../../../shared' -import { getLocale } from '../../../../../common/locale' +import { getLocale, getLocaleWithTag } from '../../../../../common/locale' // Styled Components import { @@ -151,6 +152,9 @@ const AddAccountModal = (props: Props) => { : AccountSettingsNavOptions() }, [account]) + const filPrivateKeyFormatDescriptionTextParts = + getLocaleWithTag('braveWalletFilExportPrivateKeyFormatDescription') + return ( {!hideNav && @@ -200,7 +204,13 @@ const AddAccountModal = (props: Props) => { {showPrivateKey && account.coin === BraveWallet.CoinType.FIL && - {getLocale('braveWalletFilExportPrivateKeyFormatDescription')} + + {filPrivateKeyFormatDescriptionTextParts.beforeTag} + + {filPrivateKeyFormatDescriptionTextParts.duringTag} + + {filPrivateKeyFormatDescriptionTextParts.afterTag} + } {showPrivateKey && diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/account-settings-modal/style.ts b/components/brave_wallet_ui/components/desktop/popup-modals/account-settings-modal/style.ts index bff14766f468..22335cd6b8c7 100644 --- a/components/brave_wallet_ui/components/desktop/popup-modals/account-settings-modal/style.ts +++ b/components/brave_wallet_ui/components/desktop/popup-modals/account-settings-modal/style.ts @@ -122,6 +122,10 @@ export const WarningText = styled.span` letter-spacing: 0.01em; text-align: center; color: ${(p) => p.theme.color.text02}; + a { + color: inherit; + text-decoration: underline; + } ` export const PrivateKeyBubble = styled(WalletButton)` diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/add-imported-account-modal.tsx b/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/add-imported-account-modal.tsx index 1298c1116520..b9316f961082 100644 --- a/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/add-imported-account-modal.tsx +++ b/components/brave_wallet_ui/components/desktop/popup-modals/add-account-modal/add-imported-account-modal.tsx @@ -8,7 +8,8 @@ import { useDispatch, useSelector } from 'react-redux' import { useHistory, useParams } from 'react-router' // utils -import { getLocale } from '$web-common/locale' +import { FILECOIN_FORMAT_DESCRIPTION_URL } from '../../../../common/constants/urls' +import { getLocale, getLocaleWithTag } from '$web-common/locale' import { copyToClipboard } from '../../../../utils/copy-to-clipboard' // options @@ -38,6 +39,11 @@ import { StyledWrapper } from './style' +import { + WarningText, + WarningWrapper +} from '../account-settings-modal/style' + interface Params { accountTypeName: string } @@ -187,6 +193,9 @@ export const ImportAccountModal = () => { ? getLocale('braveWalletCreateAccountImportAccount').replace('$1', selectedAccountType.name) : getLocale('braveWalletAddAccountImport') + const filPrivateKeyFormatDescriptionTextParts = + getLocaleWithTag('braveWalletFilImportPrivateKeyFormatDescription') + // render return ( @@ -206,6 +215,17 @@ export const ImportAccountModal = () => { {getLocale('braveWalletImportAccountDisclaimer')} + {selectedAccountType?.coin === BraveWallet.CoinType.FIL && + + + {filPrivateKeyFormatDescriptionTextParts.beforeTag} + + {filPrivateKeyFormatDescriptionTextParts.duringTag} + + {filPrivateKeyFormatDescriptionTextParts.afterTag} + + } + {selectedAccountType?.coin === BraveWallet.CoinType.ETH &&