From 3e86a240d0ad58a7cf8aee8a6426853a7d547b85 Mon Sep 17 00:00:00 2001 From: brave-builds Date: Sat, 13 Nov 2021 05:38:49 +0000 Subject: [PATCH] Uplift of #11069 (squashed) to beta --- .../browser/brave_wallet_constants.h | 3 ++ .../brave_wallet_ui/common/async/handlers.ts | 5 ++- .../buy-send-swap-layout/style.ts | 2 +- .../components/buy-send-swap/swap/index.tsx | 36 +++++++++++++-- .../components/buy-send-swap/swap/style.ts | 40 ++++++++++++++++- .../components/desktop/index.ts | 4 +- .../desktop/portfolio-account-item/index.tsx | 5 --- .../components/desktop/swap-tooltip/index.tsx | 44 +++++++++++++++++++ .../components/desktop/swap-tooltip/style.ts | 38 ++++++++++++++++ components/brave_wallet_ui/stories/locale.ts | 2 + components/resources/wallet_strings.grdp | 2 + 11 files changed, 168 insertions(+), 13 deletions(-) create mode 100644 components/brave_wallet_ui/components/desktop/swap-tooltip/index.tsx create mode 100644 components/brave_wallet_ui/components/desktop/swap-tooltip/style.ts diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/components/brave_wallet/browser/brave_wallet_constants.h index fe366a8171a8..cf2f29f85828 100644 --- a/components/brave_wallet/browser/brave_wallet_constants.h +++ b/components/brave_wallet/browser/brave_wallet_constants.h @@ -122,6 +122,9 @@ constexpr webui::LocalizedString kLocalizedStrings[] = { IDS_BRAVE_WALLET_SLIPPAGE_TOLERANCE_TITLE}, {"braveWalletExpiresInTitle", IDS_BRAVE_WALLET_EXPIRES_IN_TITLE}, {"braveWalletSendPlaceholder", IDS_BRAVE_WALLET_SEND_PLACEHOLDER}, + {"braveWalletSwapDisclaimer", IDS_BRAVE_WALLET_SWAP_DISCLAIMER}, + {"braveWalletSwapDisclaimerDescription", + IDS_BRAVE_WALLET_SWAP_DISCLAIMER_DESCRIPTION}, {"braveWalletButtonContinue", IDS_BRAVE_WALLET_BUTTON_CONTINUE}, {"braveWalletButtonCopy", IDS_BRAVE_WALLET_BUTTON_COPY}, {"braveWalletButtonVerify", IDS_BRAVE_WALLET_BUTTON_VERIFY}, diff --git a/components/brave_wallet_ui/common/async/handlers.ts b/components/brave_wallet_ui/common/async/handlers.ts index 0277ea3c15aa..cdabed95432f 100644 --- a/components/brave_wallet_ui/common/async/handlers.ts +++ b/components/brave_wallet_ui/common/async/handlers.ts @@ -197,9 +197,12 @@ handler.on(WalletActions.selectAccount.getType(), async (store: Store, payload: }) handler.on(WalletActions.initialized.getType(), async (store: Store, payload: WalletInfo) => { + const keyringController = getAPIProxy().keyringController const isWalletLocked = getWalletState(store).isWalletLocked + if (!isWalletLocked) { + keyringController.notifyUserInteraction() + } interactionNotifier.beginWatchingForInteraction(50000, isWalletLocked, async () => { - const keyringController = getAPIProxy().keyringController keyringController.notifyUserInteraction() }) // This can be 0 when the wallet is locked diff --git a/components/brave_wallet_ui/components/buy-send-swap/buy-send-swap-layout/style.ts b/components/brave_wallet_ui/components/buy-send-swap/buy-send-swap-layout/style.ts index 32bc9d60e3db..6817408b66d9 100644 --- a/components/brave_wallet_ui/components/buy-send-swap/buy-send-swap-layout/style.ts +++ b/components/brave_wallet_ui/components/buy-send-swap/buy-send-swap-layout/style.ts @@ -43,7 +43,7 @@ export const MainContainer = styled.div>` border: ${(p) => `2px solid ${p.theme.color.divider01}`}; border-radius: ${(p) => p.selectedTab === 'buy' ? '0px 8px 8px 8px' : p.selectedTab === 'swap' ? '8px 0px 8px 8px' : '8px'}; - max-height: 510px; + max-height: 525px; overflow: hidden; ` diff --git a/components/brave_wallet_ui/components/buy-send-swap/swap/index.tsx b/components/brave_wallet_ui/components/buy-send-swap/swap/index.tsx index ac52381e8f27..52cde1235c92 100644 --- a/components/brave_wallet_ui/components/buy-send-swap/swap/index.tsx +++ b/components/brave_wallet_ui/components/buy-send-swap/swap/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { getLocale } from '../../../../common/locale' +import { getLocale, splitStringForTag } from '../../../../common/locale' import { AccountAssetOptionType, OrderTypes, @@ -11,6 +11,7 @@ import { SwapValidationErrorType } from '../../../constants/types' import SwapInputComponent from '../swap-input-component' +import { SwapTooltip } from '../../desktop' // Styled Components import { @@ -19,7 +20,11 @@ import { ArrowButton, SwapNavButton, SwapButtonText, - SwapButtonLoader + SwapButtonLoader, + SwapDisclaimerText, + SwapDisclaimerButton, + SwapDisclaimerRow, + AlertIcon } from './style' import { LoaderIcon } from 'brave-ui/components/icons' @@ -115,6 +120,17 @@ function Swap (props: Props) { return getLocale('braveWalletSwap') }, [validationError]) + const disclaimerText = getLocale('braveWalletSwapDisclaimer') + const { beforeTag, duringTag, afterTag } = splitStringForTag(disclaimerText) + + const onClick0x = () => { + chrome.tabs.create({ url: 'https://0x.org' }, () => { + if (chrome.runtime.lastError) { + console.error('tabs.create failed: ' + chrome.runtime.lastError.message) + } + }) + } + return ( { isFetchingQuote - ? - : {submitText} + ? + : {submitText} } + + + {beforeTag} + {duringTag} + {afterTag} + + + + + ) } diff --git a/components/brave_wallet_ui/components/buy-send-swap/swap/style.ts b/components/brave_wallet_ui/components/buy-send-swap/swap/style.ts index 58190000a060..38aa95d535ee 100644 --- a/components/brave_wallet_ui/components/buy-send-swap/swap/style.ts +++ b/components/brave_wallet_ui/components/buy-send-swap/swap/style.ts @@ -1,5 +1,5 @@ import styled from 'styled-components' -import { CaratStrongDownIcon } from 'brave-ui/components/icons' +import { CaratStrongDownIcon, AlertCircleIcon } from 'brave-ui/components/icons' import { StyledButton } from '../../extension/buttons/nav-button/style' import { WalletButton } from '../../shared/style' @@ -49,3 +49,41 @@ export const SwapButtonText = styled.span` export const SwapButtonLoader = styled(SwapButtonText)` width: 15px; ` + +export const SwapDisclaimerRow = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin-top: 12px; +` + +export const SwapDisclaimerText = styled.span` + font-family: Poppins; + letter-spacing: 0.01em; + font-size: 12px; + line-height: 16px; + color: ${(p) => p.theme.color.text02}; + word-break: break-word; + margin-right: 6px; +` + +export const SwapDisclaimerButton = styled(WalletButton)` + cursor: pointer; + outline: none; + background: none; + border: none; + font-family: Poppins; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.01em; + color: ${(p) => p.theme.color.interactive05}; + margin: 0px; + padding: 0px; +` + +export const AlertIcon = styled(AlertCircleIcon)` + width: 14px; + height: 14px; + color: ${(p) => p.theme.color.interactive05}; +` diff --git a/components/brave_wallet_ui/components/desktop/index.ts b/components/brave_wallet_ui/components/desktop/index.ts index 8743a71d4fb6..581926e7f82a 100644 --- a/components/brave_wallet_ui/components/desktop/index.ts +++ b/components/brave_wallet_ui/components/desktop/index.ts @@ -21,6 +21,7 @@ import EditVisibleAssetsModal from './popup-modals/edit-visible-assets-modal' import AssetWatchlistItem from './asset-watchlist-item' import SelectNetworkDropdown from './select-network-dropdown' import TransactionPopup from './transaction-popup' +import SwapTooltip from './swap-tooltip' import { CryptoView, PortfolioView } from './views' import { OnboardingWelcome, @@ -64,5 +65,6 @@ export { SelectNetworkDropdown, EditVisibleAssetsModal, OnboardingImportMetaMaskOrLegacy, - TransactionPopup + TransactionPopup, + SwapTooltip } diff --git a/components/brave_wallet_ui/components/desktop/portfolio-account-item/index.tsx b/components/brave_wallet_ui/components/desktop/portfolio-account-item/index.tsx index b065ee98d140..9aba56346d67 100644 --- a/components/brave_wallet_ui/components/desktop/portfolio-account-item/index.tsx +++ b/components/brave_wallet_ui/components/desktop/portfolio-account-item/index.tsx @@ -89,11 +89,6 @@ const PortfolioAccountItem = (props: Props) => { onClick={onClickViewOnBlockExplorer} text={getLocale('braveWalletTransactionExplorer')} /> - - } diff --git a/components/brave_wallet_ui/components/desktop/swap-tooltip/index.tsx b/components/brave_wallet_ui/components/desktop/swap-tooltip/index.tsx new file mode 100644 index 000000000000..09946a4288c7 --- /dev/null +++ b/components/brave_wallet_ui/components/desktop/swap-tooltip/index.tsx @@ -0,0 +1,44 @@ +import * as React from 'react' + +import { + StyledWrapper, + Tip, + Pointer +} from './style' + +export interface Props { + children?: React.ReactNode + text: string +} + +function SwapTooltip (props: Props) { + const { children, text } = props + const [active, setActive] = React.useState(false) + + const showTip = () => { + setActive(true) + } + + const hideTip = () => { + setActive(false) + } + + return ( + + {children} + {active && + <> + + + {text} + + + } + + ) +} + +export default SwapTooltip diff --git a/components/brave_wallet_ui/components/desktop/swap-tooltip/style.ts b/components/brave_wallet_ui/components/desktop/swap-tooltip/style.ts new file mode 100644 index 000000000000..338a038f7134 --- /dev/null +++ b/components/brave_wallet_ui/components/desktop/swap-tooltip/style.ts @@ -0,0 +1,38 @@ +import styled from 'styled-components' + +export const StyledWrapper = styled.div` + flex: 1; + display: flex; + position: relative; + height: 100%; +` + +export const Tip = styled.div` + position: absolute; + border-radius: 4px; + left: -65px; + transform: translateX(calc(-50% - 30px)) translateY(25%); + padding: 6px; + color: ${(p) => p.theme.palette.white}; + background: ${(p) => p.theme.palette.black}; + z-index: 120; + font-family: Poppins; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.01em; + top: -124px; + width: 240px; +` + +export const Pointer = styled.div` + width: 0; + height: 0; + border-style: solid; + position: absolute; + left: 50%; + top: -12px; + transform: translateX(-50%) translateY(25%) rotate(180deg); + border-width: 0 7px 8px 7px; + z-index: 120; + border-color: transparent transparent ${(p) => p.theme.palette.black} transparent; +` diff --git a/components/brave_wallet_ui/stories/locale.ts b/components/brave_wallet_ui/stories/locale.ts index beb958eaf9c9..7cde7e34601d 100644 --- a/components/brave_wallet_ui/stories/locale.ts +++ b/components/brave_wallet_ui/stories/locale.ts @@ -75,6 +75,8 @@ provideStrings({ braveWalletSlippageToleranceTitle: 'Slippage tolerance', braveWalletExpiresInTitle: 'Expires in', braveWalletSendPlaceholder: '0x address or url', + braveWalletSwapDisclaimer: 'Brave uses $10x$2 as a DEX aggregator.', + braveWalletSwapDisclaimerDescription: '0x will process the Ethereum address and IP address to fulfill a transaction (including getting quotes). 0x will ONLY use this data for the purposes of processing transactions.', // Buttons braveWalletButtonContinue: 'Continue', diff --git a/components/resources/wallet_strings.grdp b/components/resources/wallet_strings.grdp index 59925ec57dca..99ed9ea76670 100644 --- a/components/resources/wallet_strings.grdp +++ b/components/resources/wallet_strings.grdp @@ -77,6 +77,8 @@ Slippage tolerance Expires in 0x address or url + Brave uses $10x$2 as a DEX aggregator. + 0x will process the Ethereum address and IP address to fulfill a transaction (including getting quotes). 0x will ONLY use this data for the purposes of processing transactions. Continue Copy Verify