diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/components/brave_wallet/browser/brave_wallet_constants.h index 0a91bc60be54..7e3fef8d3e49 100644 --- a/components/brave_wallet/browser/brave_wallet_constants.h +++ b/components/brave_wallet/browser/brave_wallet_constants.h @@ -728,6 +728,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", diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/bridge-to-aurora-modal/bridge-to-aurora-modal-styles.tsx b/components/brave_wallet_ui/components/desktop/popup-modals/bridge-to-aurora-modal/bridge-to-aurora-modal-styles.tsx index 7bca88d6300d..799eed50da66 100644 --- a/components/brave_wallet_ui/components/desktop/popup-modals/bridge-to-aurora-modal/bridge-to-aurora-modal-styles.tsx +++ b/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; +` diff --git a/components/brave_wallet_ui/components/desktop/popup-modals/bridge-to-aurora-modal/bridge-to-aurora-modal.tsx b/components/brave_wallet_ui/components/desktop/popup-modals/bridge-to-aurora-modal/bridge-to-aurora-modal.tsx index 55161a18f170..252b869b029d 100644 --- a/components/brave_wallet_ui/components/desktop/popup-modals/bridge-to-aurora-modal/bridge-to-aurora-modal.tsx +++ b/components/brave_wallet_ui/components/desktop/popup-modals/bridge-to-aurora-modal/bridge-to-aurora-modal.tsx @@ -12,29 +12,45 @@ 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 ( {getLocale('braveWalletAuroraModalTitle')} - {getLocale('braveWalletAuroraModalDescription')} + + {getLocale('braveWalletAuroraModalDescription')} + + + + {getLocale('braveWalletAuroraModalDontShowAgain')} + + + + + {getLocale('braveWalletAuroraModalOPenButtonText')} + {getLocale('braveWalletAuroraModalLearnMore')} - - - {getLocale('braveWalletAuroraModalOPenButtonText')} - + {getLocale('braveWalletAuroraModalLearnMoreAboutRisk')} + ) diff --git a/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-asset.tsx b/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-asset.tsx index 610969b71f7e..c1271e66c940 100644 --- a/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-asset.tsx +++ b/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(false) - const [bridgeToAuroraWarningShown, setBridgeToAuroraWarningShown] = React.useState() + const [dontShowAuroraWarning, setDontShowAuroraWarning] = React.useState(false) const [isTokenSupported, setIsTokenSupported] = React.useState() const [showMore, setShowMore] = React.useState(false) const [showTokenDetailsModal, setShowTokenDetailsModal] = React.useState(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 && } diff --git a/components/brave_wallet_ui/stories/locale.ts b/components/brave_wallet_ui/stories/locale.ts index fe237cfbe61d..1ae73ff53b9a 100644 --- a/components/brave_wallet_ui/stories/locale.ts +++ b/components/brave_wallet_ui/stories/locale.ts @@ -705,11 +705,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', diff --git a/components/resources/wallet_strings.grdp b/components/resources/wallet_strings.grdp index 2d87fb4afac7..8198fecc1a90 100644 --- a/components/resources/wallet_strings.grdp +++ b/components/resources/wallet_strings.grdp @@ -525,10 +525,12 @@ Need help? See This hardware wallet does not support this operation. Enter your Brave Wallet password - Open rainbowbridge.app? - 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. - Learn more - Open rainbowbridge.app + Open the Rainbow Bridge app? + 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. + Learn more about using Rainbow Bridge + Learn more about mitigating risk on Rainbow Bridge + Don't show again + Open Rainbow Bridge app Learn more about Brave Wallet At least: 8 characters