-
Notifications
You must be signed in to change notification settings - Fork 5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: extend privacy and terms (#2623)
* initial iteration * add logging * added hook * polish * remove unused import * add hash * addressed pr feedback * remove autorouter icon * use firebase store * style * adjust recat ga * log remove liquidity * update copy * addressed pr feedback * addressed pr feedback * prevent privacy content from dismissing modal * make top-level key origin * use hostname * restore trm
- Loading branch information
Justin Domingue
committed
Oct 25, 2021
1 parent
36cfe62
commit abe6bf5
Showing
15 changed files
with
1,057 additions
and
122 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
| import { Trans } from '@lingui/macro' | ||
| import Card, { DarkGreyCard } from 'components/Card' | ||
| import { AutoRow, RowBetween } from 'components/Row' | ||
| import { useEffect, useRef } from 'react' | ||
| import { ArrowDown, Info, X } from 'react-feather' | ||
| import ReactGA from 'react-ga' | ||
| import styled from 'styled-components/macro' | ||
| import { ExternalLink, TYPE } from 'theme' | ||
| import { isMobile } from 'utils/userAgent' | ||
|
|
||
| import { useModalOpen, useTogglePrivacyPolicy } from '../../state/application/hooks' | ||
| import { ApplicationModal } from '../../state/application/reducer' | ||
| import { AutoColumn } from '../Column' | ||
| import Modal from '../Modal' | ||
|
|
||
| const Wrapper = styled.div` | ||
| max-height: 70vh; | ||
| overflow: auto; | ||
| padding: 0 1rem; | ||
| ` | ||
|
|
||
| const StyledExternalCard = styled(Card)` | ||
| background-color: ${({ theme }) => theme.primary5}; | ||
| padding: 0.5rem; | ||
| width: 100%; | ||
| :hover, | ||
| :focus, | ||
| :active { | ||
| background-color: ${({ theme }) => theme.primary4}; | ||
| } | ||
| ` | ||
|
|
||
| const HoverText = styled.div` | ||
| text-decoration: none; | ||
| color: ${({ theme }) => theme.text1}; | ||
| display: flex; | ||
| align-items: center; | ||
| :hover { | ||
| cursor: pointer; | ||
| } | ||
| ` | ||
|
|
||
| const StyledLinkOut = styled(ArrowDown)` | ||
| transform: rotate(230deg); | ||
| ` | ||
|
|
||
| const EXTERNAL_APIS = [ | ||
| { | ||
| name: 'Auto Router', | ||
| description: <Trans>The app fetches the optimal trade route from a Uniswap Labs server.</Trans>, | ||
| }, | ||
| { | ||
| name: 'Infura', | ||
| description: <Trans>The app fetches on-chain data and constructs contract calls with an Infura API.</Trans>, | ||
| }, | ||
| { | ||
| name: 'TRM Labs', | ||
| description: ( | ||
| <Trans> | ||
| The app securely collects your wallet address and shares it with TRM Labs Inc. for risk and compliance reasons. | ||
| </Trans> | ||
| ), | ||
| }, | ||
| { | ||
| name: 'Google Analytics', | ||
| description: <Trans>The app logs anonymized usage statistics in order to improve over time.</Trans>, | ||
| }, | ||
| { | ||
| name: 'The Graph', | ||
| description: <Trans>The app fetches blockchain data from The Graph’s hosted service.</Trans>, | ||
| }, | ||
| ] | ||
|
|
||
| export function PrivacyPolicyModal() { | ||
| const node = useRef<HTMLDivElement>() | ||
| const open = useModalOpen(ApplicationModal.PRIVACY_POLICY) | ||
| const toggle = useTogglePrivacyPolicy() | ||
|
|
||
| useEffect(() => { | ||
| if (!open) return | ||
|
|
||
| ReactGA.event({ | ||
| category: 'Modal', | ||
| action: 'Show Legal', | ||
| }) | ||
| }, [open]) | ||
|
|
||
| return ( | ||
| <Modal isOpen={open} onDismiss={() => toggle()}> | ||
| <AutoColumn gap="12px" ref={node as any}> | ||
| <RowBetween padding="1rem 1rem 0.5rem 1rem"> | ||
| <TYPE.mediumHeader> | ||
| <Trans>Legal & Privacy</Trans> | ||
| </TYPE.mediumHeader> | ||
| <HoverText onClick={() => toggle()}> | ||
| <X size={24} /> | ||
| </HoverText> | ||
| </RowBetween> | ||
| <PrivacyPolicy /> | ||
| </AutoColumn> | ||
| </Modal> | ||
| ) | ||
| } | ||
|
|
||
| export function PrivacyPolicy() { | ||
| return ( | ||
| <Wrapper | ||
| draggable="true" | ||
| onTouchMove={(e) => { | ||
| // prevent modal gesture handler from dismissing modal when content is scrolling | ||
| if (isMobile) { | ||
| e.stopPropagation() | ||
| } | ||
| }} | ||
| > | ||
| <AutoColumn gap="16px"> | ||
| <AutoColumn gap="8px" style={{ width: '100%' }}> | ||
| <StyledExternalCard> | ||
| <ExternalLink href={'https://uniswap.org/terms-of-service'}> | ||
| <RowBetween> | ||
| <AutoRow gap="4px"> | ||
| <Info size={20} /> | ||
| <TYPE.main fontSize={14} color={'primaryText1'}> | ||
| <Trans>Uniswap Labs' Terms of Service</Trans> | ||
| </TYPE.main> | ||
| </AutoRow> | ||
| <StyledLinkOut size={20} /> | ||
| </RowBetween> | ||
| </ExternalLink> | ||
| </StyledExternalCard> | ||
| <StyledExternalCard> | ||
| <ExternalLink href={'https://uniswap.org/disclaimer/'}> | ||
| <RowBetween> | ||
| <AutoRow gap="4px"> | ||
| <Info size={20} /> | ||
| <TYPE.main fontSize={14} color={'primaryText1'}> | ||
| <Trans>Protocol Disclaimer</Trans> | ||
| </TYPE.main> | ||
| </AutoRow> | ||
| <StyledLinkOut size={20} /> | ||
| </RowBetween> | ||
| </ExternalLink> | ||
| </StyledExternalCard> | ||
| </AutoColumn> | ||
| <TYPE.main fontSize={14}> | ||
| <Trans>This app uses the following third-party APIs:</Trans> | ||
| </TYPE.main> | ||
| <AutoColumn gap="12px"> | ||
| {EXTERNAL_APIS.map(({ name, description }, i) => ( | ||
| <DarkGreyCard key={i}> | ||
| <AutoColumn gap="8px"> | ||
| <AutoRow gap="4px"> | ||
| <Info size={18} /> | ||
| <TYPE.main fontSize={14} color={'text1'}> | ||
| {name} | ||
| </TYPE.main> | ||
| </AutoRow> | ||
| <TYPE.main fontSize={14}>{description}</TYPE.main> | ||
| </AutoColumn> | ||
| </DarkGreyCard> | ||
| ))} | ||
| <div /> | ||
| </AutoColumn> | ||
| </AutoColumn> | ||
| </Wrapper> | ||
| ) | ||
| } |
Oops, something went wrong.
abe6bf5There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
interface – ./
interface-uniswap.vercel.app
interface-git-main-uniswap.vercel.app