fix(wallet): Update aurora modal text

components/brave_wallet/browser/brave_wallet_constants.h

@@ -722,6 +722,10 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
      IDS_BRAVE_WALLET_AURORA_MODAL_DESCRIPTION},
     {"braveWalletAuroraModalLearnMore",
      IDS_BRAVE_WALLET_AURORA_MODAL_LEARN_MORE},
+    {"braveWalletAuroraModalLearnMoreAboutRisk",
+     IDS_BRAVE_WALLET_AURORA_MODAL_LEARN_MORE_ABOUT_RISK},
+    {"braveWalletAuroraModalDontShowAgain",
+     IDS_BRAVE_WALLET_AURORA_MODAL_DONT_SHOW_AGAIN},
     {"braveWalletAuroraModalOPenButtonText",
      IDS_BRAVE_WALLET_AURORA_MODAL_OPEN_BUTTON_TEXT},
     {"braveWalletPasswordStrengthTooltipHeading",

components/brave_wallet_ui/components/desktop/popup-modals/bridge-to-aurora-modal/bridge-to-aurora-modal-styles.tsx

@@ -7,8 +7,6 @@ import styled from 'styled-components'
 import { WalletButton } from '../../../shared/style'
 import GlobeConnectIcon from '../../../../assets/svg-icons/globe-connect-icon.svg'
 
-export const modalWidth = '442px'
-
 export const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -48,7 +46,7 @@ export const LearnMoreLink = styled.a`
   color: ${p => p.theme.color.interactive05};
   text-decoration: none;
   display: block;
-  padding-bottom: 56px;
+  margin-top: 6px;
 `
 
 export const OpenRainbowAppButton = styled(WalletButton)`
@@ -64,6 +62,8 @@ export const OpenRainbowAppButton = styled(WalletButton)`
   background-color: ${(p) => p.theme.palette.blurple500};
   border: none;
   align-self: center;
+  margin-top: 36px;
+  margin-bottom: 12px;
 `
 
 export const ButtonText = styled.span`
@@ -81,3 +81,10 @@ export const GlobeIcon = styled.div`
   background: url(${GlobeConnectIcon});
   margin-right: 8px;
 `
+
+export const CheckboxWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 12px 0;
+`

components/brave_wallet_ui/components/desktop/popup-modals/bridge-to-aurora-modal/bridge-to-aurora-modal.tsx

@@ -12,42 +12,59 @@ import {
   Description,
   GlobeIcon,
   LearnMoreLink,
-  modalWidth,
   OpenRainbowAppButton,
   StyledWrapper,
-  Title
+  Title,
+  CheckboxWrapper
 } from './bridge-to-aurora-modal-styles'
+import { Checkbox } from '../../../shared/checkbox/checkbox'
 
 interface Props {
+  dontShowWarningAgain: boolean
   onClose: () => void
   onOpenRainbowAppClick: () => void
+  onDontShowAgain: (selected: boolean) => void
 }
 
-const learnMoreLink = 'https://ethereum.org/en/bridges/#bridge-risk'
+const learnMoreLink = 'https://doc.aurora.dev/bridge/bridge-overview/'
+const learnMoreRiskMitigation = 'https://rainbowbridge.app/approvals'
 
-export const BridgeToAuroraModal = ({ onClose, onOpenRainbowAppClick }: Props) => {
+export const BridgeToAuroraModal = ({ dontShowWarningAgain, onClose, onOpenRainbowAppClick, onDontShowAgain }: Props) => {
   return (
     <PopupModal
       title=''
       onClose={onClose}
-      width={modalWidth}
     >
       <StyledWrapper>
         <Title>{getLocale('braveWalletAuroraModalTitle')}</Title>
-        <Description>{getLocale('braveWalletAuroraModalDescription')}</Description>
+        <Description>
+          {getLocale('braveWalletAuroraModalDescription')}
+        </Description>
+        <CheckboxWrapper>
+          <Checkbox isChecked={dontShowWarningAgain} onChange={onDontShowAgain}>
+            {getLocale('braveWalletAuroraModalDontShowAgain')}
+          </Checkbox>
+        </CheckboxWrapper>
+        <OpenRainbowAppButton
+          onClick={onOpenRainbowAppClick}
+        >
+          <GlobeIcon />
+          <ButtonText>{getLocale('braveWalletAuroraModalOPenButtonText')}</ButtonText>
+        </OpenRainbowAppButton>
         <LearnMoreLink
           rel='noopener noreferrer'
           target='_blank'
           href={learnMoreLink}
         >
           {getLocale('braveWalletAuroraModalLearnMore')}
         </LearnMoreLink>
-        <OpenRainbowAppButton
-          onClick={onOpenRainbowAppClick}
+        <LearnMoreLink
+          rel='noopener noreferrer'
+          target='_blank'
+          href={learnMoreRiskMitigation}
         >
-          <GlobeIcon />
-          <ButtonText>{getLocale('braveWalletAuroraModalOPenButtonText')}</ButtonText>
-        </OpenRainbowAppButton>
+          {getLocale('braveWalletAuroraModalLearnMoreAboutRisk')}
+        </LearnMoreLink>
       </StyledWrapper>
     </PopupModal>
   )

components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-asset.tsx

@@ -82,7 +82,7 @@ import { HideTokenModal } from './components/hide-token-modal/hide-token-modal'
 
 const AssetIconWithPlaceholder = withPlaceholderIcon(AssetIcon, { size: 'big', marginLeft: 0, marginRight: 12 })
 const rainbowbridgeLink = 'https://rainbowbridge.app'
-const bridgeToAuroraWarningShownKey = 'bridgeToAuroraWarningShown'
+const bridgeToAuroraDontShowAgainKey = 'bridgeToAuroraDontShowAgain'
 
 interface Props {
   isShowingMarketData?: boolean
@@ -92,7 +92,7 @@ export const PortfolioAsset = (props: Props) => {
   const { isShowingMarketData } = props
   // state
   const [showBridgeToAuroraModal, setShowBridgeToAuroraModal] = React.useState<boolean>(false)
-  const [bridgeToAuroraWarningShown, setBridgeToAuroraWarningShown] = React.useState<boolean>()
+  const [dontShowAuroraWarning, setDontShowAuroraWarning] = React.useState<boolean>(false)
   const [isTokenSupported, setIsTokenSupported] = React.useState<boolean>()
   const [showMore, setShowMore] = React.useState<boolean>(false)
   const [showTokenDetailsModal, setShowTokenDetailsModal] = React.useState<boolean>(false)
@@ -378,13 +378,17 @@ export const PortfolioAsset = (props: Props) => {
   }, [])
 
   const onBridgeToAuroraButton = React.useCallback(() => {
-    if (bridgeToAuroraWarningShown) {
+    if (dontShowAuroraWarning) {
       onOpenRainbowAppClick()
     } else {
-      localStorage.setItem(bridgeToAuroraWarningShownKey, 'true')
       setShowBridgeToAuroraModal(true)
     }
-  }, [bridgeToAuroraWarningShown, onOpenRainbowAppClick])
+  }, [dontShowAuroraWarning, onOpenRainbowAppClick])
+
+  const onDontShowAgain = React.useCallback((selected: boolean) => {
+    setDontShowAuroraWarning(selected)
+    localStorage.setItem(bridgeToAuroraDontShowAgainKey, JSON.stringify(selected))
+  }, [])
 
   const onCloseAuroraModal = React.useCallback(() => {
     setShowBridgeToAuroraModal(false)
@@ -481,7 +485,7 @@ export const PortfolioAsset = (props: Props) => {
   }, [nftIframeLoaded, nftDetailsRef, selectedAsset, nftMetadata, networkList])
 
   React.useEffect(() => {
-    setBridgeToAuroraWarningShown(localStorage.getItem(bridgeToAuroraWarningShownKey) === 'true')
+    setDontShowAuroraWarning(JSON.parse(localStorage.getItem(bridgeToAuroraDontShowAgainKey) || 'false'))
   })
 
   // token list needs to load before we can find an asset to select from the url params
@@ -583,8 +587,10 @@ export const PortfolioAsset = (props: Props) => {
 
       {showBridgeToAuroraModal &&
         <BridgeToAuroraModal
+          dontShowWarningAgain={dontShowAuroraWarning}
           onClose={onCloseAuroraModal}
           onOpenRainbowAppClick={onOpenRainbowAppClick}
+          onDontShowAgain={onDontShowAgain}
         />
       }
 

components/brave_wallet_ui/stories/locale.ts

@@ -704,11 +704,12 @@ provideStrings({
   braveWalletRemoveAccountModalTitle: 'Are you sure you want to remove "$1"?',
 
   // Bridge to Aurora
-  braveWalletAuroraModalTitle: 'Open rainbowbridge.app',
-  braveWalletAuroraModalDescription: 'Bridging assets across networks allows you to use your crypto on other networks and other DApp' +
-    ' ecosystems. Bridging assets to other networks has some risks',
-  braveWalletAuroraModalLearnMore: 'Learn more',
-  braveWalletAuroraModalOPenButtonText: 'Open rainbowbridge.app',
+  braveWalletAuroraModalTitle: 'Open the Rainbow Bridge app?',
+  braveWalletAuroraModalDescription: 'Rainbow Bridge is an independent service that helps you bridge assets across networks, and use your crypto on other networks and DApp ecosystems. Bridging assets to other networks has some risks.',
+  braveWalletAuroraModalLearnMore: 'Learn more about using Rainbow Bridge',
+  braveWalletAuroraModalLearnMoreAboutRisk: 'Learn more about mitigating risk on Rainbow Bridge',
+  braveWalletAuroraModalDontShowAgain: 'Don\'t show again',
+  braveWalletAuroraModalOPenButtonText: 'Open the Rainbow Bridge app',
 
   // Input field labels
   braveWalletInputLabelPassword: 'Password',

components/resources/wallet_strings.grdp

@@ -525,10 +525,12 @@
   <message name="IDS_BRAVE_WALLET_HELP_CENTER_TEXT" desc="Help Center text description below buy-send-swap">Need help? See</message>
   <message name="IDS_BRAVE_WALLET_HARDWARE_OPERATION_UNSUPPORTED_ERROR" desc="Error message of unsupported hardware wallet operation">This hardware wallet does not support this operation.</message>
   <message name="IDS_BRAVE_WALLET_ENTER_YOUR_PASSWORD" desc="Prompt for the user to enter their password">Enter your Brave Wallet password</message>
-  <message name="IDS_BRAVE_WALLET_AURORA_MODAL_TITLE" desc="Bridge to Aurora modal title">Open rainbowbridge.app?</message>
-  <message name="IDS_BRAVE_WALLET_AURORA_MODAL_DESCRIPTION" desc="Bridge to Aurora modal description">Bridging assets across networks allows you to use your crypto on other networks and other DApp ecosystems. Bridging assets to other networks has some risks.</message>
-  <message name="IDS_BRAVE_WALLET_AURORA_MODAL_LEARN_MORE" desc="Bridge to Aurora modal learn more link text">Learn more</message>
-  <message name="IDS_BRAVE_WALLET_AURORA_MODAL_OPEN_BUTTON_TEXT" desc="Bridge to Aurora modal action button text">Open rainbowbridge.app</message>
+  <message name="IDS_BRAVE_WALLET_AURORA_MODAL_TITLE" desc="Bridge to Aurora modal title">Open the Rainbow Bridge app?</message>
+  <message name="IDS_BRAVE_WALLET_AURORA_MODAL_DESCRIPTION" desc="Bridge to Aurora modal description">Rainbow Bridge is an independent service that helps you bridge assets across networks, and use your crypto on other networks and DApp ecosystems. Bridging assets to other networks has some risks.</message>
+  <message name="IDS_BRAVE_WALLET_AURORA_MODAL_LEARN_MORE" desc="Bridge to Aurora modal learn more about rainbow bridge">Learn more about using Rainbow Bridge</message>
+  <message name="IDS_BRAVE_WALLET_AURORA_MODAL_LEARN_MORE_ABOUT_RISK" desc="Bridge to Aurora modal learn more about risk mitigation">Learn more about mitigating risk on Rainbow Bridge</message>
+  <message name="IDS_BRAVE_WALLET_AURORA_MODAL_DONT_SHOW_AGAIN" desc="Bridge to Aurora modal don't show again checkbox label">Don't show again</message>
+  <message name="IDS_BRAVE_WALLET_AURORA_MODAL_OPEN_BUTTON_TEXT" desc="Bridge to Aurora modal action button text">Open Rainbow Bridge app</message>
   <message name="IDS_BRAVE_WALLET_LEARN_MORE_ABOUT_BRAVE_WALLET" desc="Link to article explaining crypto wallets">Learn more about Brave Wallet</message>
   <message name="IDS_BRAVE_WALLET_PASSWORD_STRENGTH_TOOLTIP_HEADING" desc="Heading of password strength tooltip">At least:</message>
   <message name="IDS_BRAVE_WALLET_PASSWORD_STRENGTH_TOOLTIP_IS_LONG_ENOUGH" desc="Password strength length requirements">8 characters</message>