Display 0x Privacy Policy and Bug Fix (uplift to 1.33.x)

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},

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

components/brave_wallet_ui/components/buy-send-swap/buy-send-swap-layout/style.ts

@@ -43,7 +43,7 @@ export const MainContainer = styled.div<Partial<StyleProps>>`
   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;
 `
 

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 (
     <StyledWrapper>
       <SwapInputComponent
@@ -168,10 +184,22 @@ function Swap (props: Props) {
       >
         {
           isFetchingQuote
-          ? <SwapButtonLoader><LoaderIcon /></SwapButtonLoader>
-          : <SwapButtonText>{submitText}</SwapButtonText>
+            ? <SwapButtonLoader><LoaderIcon /></SwapButtonLoader>
+            : <SwapButtonText>{submitText}</SwapButtonText>
         }
       </SwapNavButton>
+      <SwapDisclaimerRow>
+        <SwapDisclaimerText>
+          {beforeTag}
+          <SwapDisclaimerButton onClick={onClick0x}>{duringTag}</SwapDisclaimerButton>
+          {afterTag}
+        </SwapDisclaimerText>
+        <SwapTooltip
+          text={getLocale('braveWalletSwapDisclaimerDescription')}
+        >
+          <AlertIcon />
+        </SwapTooltip>
+      </SwapDisclaimerRow>
     </StyledWrapper>
   )
 }

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};
+`

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
 }

components/brave_wallet_ui/components/desktop/portfolio-account-item/index.tsx

@@ -89,11 +89,6 @@ const PortfolioAccountItem = (props: Props) => {
               onClick={onClickViewOnBlockExplorer}
               text={getLocale('braveWalletTransactionExplorer')}
             />
-
-            <TransactionPopupItem
-              onClick={onClickViewOnBlockExplorer}
-              text={getLocale('braveWalletTransactionExplorer')}
-            />
           </TransactionPopup>
         }
       </RightSide>

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 (
+    <StyledWrapper
+      onMouseEnter={showTip}
+      onMouseLeave={hideTip}
+    >
+      {children}
+      {active &&
+        <>
+          <Pointer />
+          <Tip>
+            {text}
+          </Tip>
+        </>
+      }
+    </StyledWrapper>
+  )
+}
+
+export default SwapTooltip

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;
+`

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',

components/resources/wallet_strings.grdp

@@ -77,6 +77,8 @@
   <message name="IDS_BRAVE_WALLET_SLIPPAGE_TOLERANCE_TITLE" desc="BuySendSwapo slippage tolerance title">Slippage tolerance</message>
   <message name="IDS_BRAVE_WALLET_EXPIRES_IN_TITLE" desc="BuySendSwap expires in title">Expires in</message>
   <message name="IDS_BRAVE_WALLET_SEND_PLACEHOLDER" desc="BuySendSwap send placeholder">0x address or url</message>
+  <message name="IDS_BRAVE_WALLET_SWAP_DISCLAIMER" desc="Swap 0x Security and Privacy Disclaimer">Brave uses <ph name="LINK_BEFORE">$1</ph>0x<ph name="LINK_AFTER">$2</ph> as a DEX aggregator.</message>
+  <message name="IDS_BRAVE_WALLET_SWAP_DISCLAIMER_DESCRIPTION" desc="Swap 0x Security and Privacy Disclaimer Description">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.</message>
   <message name="IDS_BRAVE_WALLET_BUTTON_CONTINUE" desc="General Continue button">Continue</message>
   <message name="IDS_BRAVE_WALLET_BUTTON_COPY" desc="General Copy button">Copy</message>
   <message name="IDS_BRAVE_WALLET_BUTTON_VERIFY" desc="General Verify button">Verify</message>