Merge pull request #107 from brave/update-privacy-policy

fix(swap): Update Privacy Policy

interface/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brave/swap-interface",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "description": "Brave Swap - an open-source swap interface by Brave, focussed on usability and multi-chain support.",
   "type": "module",
   "license": "MPL-2.0",

interface/src/components/swap/account-modal/account-modal.tsx

@@ -38,19 +38,18 @@ interface Props {
   refreshBlockchainState: (
     overrides: Partial<RefreshBlockchainStateParams>
   ) => Promise<void>
-  showPrivacyModal: () => void
 }
 
 export const AccountModal = (props: Props) => {
-  const { onHideModal, refreshBlockchainState, showPrivacyModal } = props
+  const { onHideModal, refreshBlockchainState } = props
 
   // Context
   const { getLocale, routeBackToWallet, walletAccounts, network, switchAccount, disconnectWallet } =
     useSwapContext()
 
   // Memos
   const networkAccounts = React.useMemo(() => {
-      return walletAccounts.filter(account => account.coin === network.coin)
+    return walletAccounts.filter(account => account.coin === network.coin)
   }, [walletAccounts, network])
 
   // Methods
@@ -147,12 +146,6 @@ export const AccountModal = (props: Props) => {
           />
         )}
 
-        <AccountModalButton
-          text={getLocale('braveSwapPrivacy')}
-          icon={HelpIcon}
-          onClick={showPrivacyModal}
-        />
-
         <AccountModalButton
           text={getLocale('braveSwapHelpCenter')}
           icon={HelpIcon}

interface/src/components/swap/header.tsx

@@ -32,11 +32,10 @@ interface Props {
   refreshBlockchainState: (
     overrides: Partial<RefreshBlockchainStateParams>
   ) => Promise<void>
-  showPrivacyModal: () => void
 }
 
 export const Header = (props: Props) => {
-  const { refreshBlockchainState, showPrivacyModal } = props
+  const { refreshBlockchainState } = props
 
   // Wallet State
   const { network, supportedNetworks, isWalletConnected, connectWallet, switchNetwork } =
@@ -117,11 +116,6 @@ export const Header = (props: Props) => {
     setShowAccountModal(prev => !prev)
   }, [isWalletConnected, connectWallet])
 
-  const onClickShowPrivacyModal = React.useCallback(() => {
-    setShowAccountModal(false)
-    showPrivacyModal()
-  }, [showPrivacyModal])
-
   return (
     <Wrapper>
       <BraveLogo />
@@ -148,7 +142,6 @@ export const Header = (props: Props) => {
           <ConnectWalletButton onClick={onClickConnectWalletButton} />
           {showAccountModal && (
             <AccountModal
-              showPrivacyModal={onClickShowPrivacyModal}
               refreshBlockchainState={refreshBlockchainState}
               onHideModal={() => setShowAccountModal(false)}
             />

interface/src/components/swap/privacy-modal.tsx

@@ -43,7 +43,7 @@ export const PrivacyModal = React.forwardRef<HTMLDivElement, Props>(
       >
         <Row rowWidth='full' horizontalPadding={24} verticalPadding={20}>
           <Text textSize='18px' isBold={true}>
-            {getLocale('braveSwapPrivacy')}
+            {getLocale('braveSwapPrivacyPolicy')}
           </Text>
           <IconButton icon={CloseIcon} onClick={onClose} size={20} />
         </Row>
@@ -83,6 +83,13 @@ export const PrivacyModal = React.forwardRef<HTMLDivElement, Props>(
             >
               {getLocale('braveSwapZeroXDisclaimer')}
             </Text>
+            <Link
+              rel='noopener noreferrer'
+              target='_blank'
+              href='https://www.0x.org/privacy'
+            >
+              {getLocale('braveSwapZeroXPrivacy')}
+            </Link>
           </Section>
           <VerticalSpacer size={20} />
           <Section
@@ -106,6 +113,13 @@ export const PrivacyModal = React.forwardRef<HTMLDivElement, Props>(
             >
               {getLocale('braveSwapJupiterDisclaimer')}
             </Text>
+            <Link
+              rel='noopener noreferrer'
+              target='_blank'
+              href='https://docs.jup.ag/legal/privacy-policy'
+            >
+              {getLocale('braveSwapJupiterPrivacy')}
+            </Link>
           </Section>
           <VerticalSpacer size={20} />
         </Column>

interface/src/components/swap/swap-container.tsx

@@ -13,7 +13,7 @@ import { useSwapContext } from '~/context/swap.context'
 import { Header } from './header'
 
 // Styled Components
-import { StyledDiv } from '~/components/shared.styles'
+import { StyledDiv, StyledButton } from '~/components/shared.styles'
 
 // Types
 import { RefreshBlockchainStateParams } from '~/constants/types'
@@ -29,7 +29,7 @@ interface Props {
 export const SwapContainer = (props: Props) => {
   const { children, refreshBlockchainState, showPrivacyModal } = props
 
-  const { network } = useSwapContext()
+  const { network, getLocale } = useSwapContext()
 
   // State
   const [backgroundHeight, setBackgroundHeight] = React.useState<number>(0)
@@ -55,10 +55,10 @@ export const SwapContainer = (props: Props) => {
   return (
     <Wrapper>
       <Header
-        showPrivacyModal={showPrivacyModal}
         refreshBlockchainState={refreshBlockchainState}
       />
       <Container ref={ref}>{children}</Container>
+      <PrivacyButton onClick={showPrivacyModal}>{getLocale('braveSwapPrivacyPolicy')}</PrivacyButton>
       <Background
         height={backgroundHeight}
         network={network.chainId ?? ''}
@@ -86,7 +86,7 @@ const Wrapper = styled(StyledDiv)`
 }
 `
 
-const Background = styled(StyledDiv)<{
+const Background = styled(StyledDiv) <{
   height: number
   network: string
   backgroundOpacity: number
@@ -164,7 +164,20 @@ const Container = styled(StyledDiv)`
   width: 512px;
   position: relative;
   z-index: 9;
+  margin-bottom: 10px;
   @media screen and (max-width: 570px) {
     width: 90%;
   }
 `
+
+export const PrivacyButton = styled(StyledButton)`
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: ${(p) => p.theme.color.legacy.interactive05};
+  @media (prefers-color-scheme: dark) {
+    color: ${(p) => p.theme.color.legacy.interactive06};
+  }
+`

sites/mock/src/constants/locale.ts

@@ -62,8 +62,10 @@ export const locale: Registry = {
   braveSwapWallet: 'Wallet',
   braveSwapBest: 'Best',
   braveSwapHelpCenter: 'Help Center',
-  braveSwapPrivacy: 'Privacy',
-  braveSwapPrivacyDescription: 'This app uses the folowwing third-party APIs:',
-  braveSwapZeroXDisclaimer: 'Brave Swap uses 0x as a DEX aggregator for supported EVM networks. 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.',
-  braveSwapJupiterDisclaimer: 'Brave Swap uses Jupiter as a DEX aggregator for Solana network. Jupiter will process the Solana address and IP address to fulfill a transaction (including getting quotes). Jupiter will ONLY use this data for the purposes of processing transactions.',
+  braveSwapPrivacyPolicy: 'Privacy Policy',
+  braveSwapPrivacyDescription: 'This app uses the following third-party APIs:',
+  braveSwapZeroXDisclaimer: 'Brave Swap uses 0x as a DEX aggregator for supported EVM networks. 0x will process the Ethereum wallet address and IP address to fulfill a transaction (including getting quotes). 0x will ONLY use this data for the purposes of processing transactions.',
+  braveSwapJupiterDisclaimer: 'Brave Swap uses Jupiter as a DEX aggregator for Solana network. Jupiter will process the Solana wallet address and IP address to fulfill a transaction (including getting quotes). Jupiter will ONLY use this data for the purposes of processing transactions.',
+  braveSwapZeroXPrivacy: 'Click here for 0x Privacy Policy.',
+  braveSwapJupiterPrivacy: 'Click here for Jupiter Privacy Policy.',
 }