Add note when import filecoin private key, also make desc link clickable

Resolves brave/brave-browser#23523 Resolves brave/brave-browser#23531 The same note as when export filecoin acc is added Plaintext link changed to anchor
brave · Jun 17, 2022 · f7a62d3 · f7a62d3
1 parent 835f7a7
commit f7a62d3
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 (
     <PopupModal title={title} onClose={onClickClose}>
       {!hideNav &&
@@ -200,7 +204,13 @@ const AddAccountModal = (props: Props) => {
             </WarningWrapper>
             {showPrivateKey && account.coin === BraveWallet.CoinType.FIL &&
             <WarningWrapper>
-               <WarningText>{getLocale('braveWalletFilExportPrivateKeyFormatDescription')}</WarningText>
+               <WarningText>
+                 {filPrivateKeyFormatDescriptionTextParts.beforeTag}
+                  <a target='_blank' href={FILECOIN_FORMAT_DESCRIPTION_URL}>
+                    {filPrivateKeyFormatDescriptionTextParts.duringTag}
+                  </a>
+                  {filPrivateKeyFormatDescriptionTextParts.afterTag}
+                </WarningText>
             </WarningWrapper>
             }
             {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
@@ -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/...allet_ui/components/desktop/popup-modals/add-account-modal/add-imported-account-modal.tsx b/...allet_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 (
     <PopupModal title={modalTitle} onClose={onClickClose}>
@@ -206,6 +215,17 @@ export const ImportAccountModal = () => {
             <DisclaimerText>{getLocale('braveWalletImportAccountDisclaimer')}</DisclaimerText>
           </ImportDisclaimer>
 
+          {selectedAccountType?.coin === BraveWallet.CoinType.FIL &&
+            <WarningWrapper>
+               <WarningText>
+                 {filPrivateKeyFormatDescriptionTextParts.beforeTag}
+                  <a target='_blank' href={FILECOIN_FORMAT_DESCRIPTION_URL}>
+                    {filPrivateKeyFormatDescriptionTextParts.duringTag}
+                  </a>
+                {filPrivateKeyFormatDescriptionTextParts.afterTag}</WarningText>
+            </WarningWrapper>
+          }
+
           {selectedAccountType?.coin === BraveWallet.CoinType.ETH &&
             <SelectWrapper>
               <Select

diff --git a/components/resources/wallet_strings.grdp b/components/resources/wallet_strings.grdp
@@ -212,7 +212,8 @@
   <message name="IDS_BRAVE_WALLET_ICON_URL" desc="Visible assets modal Icon URL label">Icon URL</message>
   <message name="IDS_BRAVE_WALLET_ADD_ASSET" desc="Asset Panel add asset button">Add asset</message>
   <message name="IDS_BRAVE_WALLET_ACCOUNT_SETTINGS_DISCLAIMER" desc="Account settings modal warning">WARNING: Never share your recovery phrase. Anyone with this phrase can take your assets forever.</message>
-  <message name="IDS_BRAVE_WALLET_FIL_EXPORT_PRIVATE_KEY_FORMAT_DESCRIPTION" desc="Filecoin private key format description">NOTE: Private key is provided as a hex-encoded JSON that contains private key and protocol information. See https://lotus.filecoin.io/lotus/manage/lotus-cli/#lotus-wallet-import for more info.</message>
+  <message name="IDS_BRAVE_WALLET_FIL_EXPORT_PRIVATE_KEY_FORMAT_DESCRIPTION" desc="Filecoin private key format description">NOTE: Private key is provided as a hex-encoded JSON that contains private key and protocol information. <ph name="LINK_START">$1</ph>Learn more<ph name="LINK_END">$2</ph>.</message>
+  <message name="IDS_BRAVE_WALLET_FIL_IMPORT_PRIVATE_KEY_FORMAT_DESCRIPTION" desc="Filecoin private key format description">NOTE: Private key must be provided as a hex-encoded JSON that contains private key and protocol information. <ph name="LINK_START">$1</ph>Learn more<ph name="LINK_END">$2</ph>.</message>
   <message name="IDS_BRAVE_WALLET_ACCOUNT_SETTINGS_SHOW_KEY" desc="Account settings modal show key button">Show key</message>
   <message name="IDS_BRAVE_WALLET_ACCOUNT_SETTINGS_HIDE_KEY" desc="Account settings modal hide key button">Hide key</message>
   <message name="IDS_BRAVE_WALLET_ACCOUNT_SETTINGS_UPDATE_ERROR" desc="Account settings modal failed to updated name error">Failed to update account name, please try again.</message>