From 345b536e47244bf046984112642ce9f7a154de24 Mon Sep 17 00:00:00 2001 From: brave-builds Date: Fri, 2 Sep 2022 06:20:47 +0000 Subject: [PATCH] Uplift of #14798 (squashed) to beta --- .../browser/brave_wallet_constants.h | 4 ++ .../bridge-to-aurora-modal-styles.tsx | 13 +++++-- .../bridge-to-aurora-modal.tsx | 39 +++++++++++++------ .../views/portfolio/portfolio-asset.tsx | 18 ++++++--- components/brave_wallet_ui/stories/locale.ts | 11 +++--- components/resources/wallet_strings.grdp | 10 +++-- 6 files changed, 66 insertions(+), 29 deletions(-) diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/components/brave_wallet/browser/brave_wallet_constants.h index bb92a38a6da6..34550050f4dc 100644 --- a/components/brave_wallet/browser/brave_wallet_constants.h +++ b/components/brave_wallet/browser/brave_wallet_constants.h @@ -717,6 +717,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 d3b2c9b0300c..fa1a3c9d1b09 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 @@ -76,7 +76,7 @@ import { CoinStats } from './components/coin-stats/coin-stats' 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 @@ -86,7 +86,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() // routing const history = useHistory() @@ -360,13 +360,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) @@ -426,7 +430,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 @@ -517,8 +521,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 6a09a6e448b0..788e5b6c8c06 100644 --- a/components/brave_wallet_ui/stories/locale.ts +++ b/components/brave_wallet_ui/stories/locale.ts @@ -698,11 +698,12 @@ provideStrings({ braveWalletHelpCenterText: 'Need help? See', // 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 9421efb3e27f..35eb3f9df112 100644 --- a/components/resources/wallet_strings.grdp +++ b/components/resources/wallet_strings.grdp @@ -522,10 +522,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