From 46d9d8e3df50253f2eaef9d0b5d957e83919136c Mon Sep 17 00:00:00 2001 From: Jordan Frankfurt Date: Tue, 29 Nov 2022 16:37:39 -0600 Subject: [PATCH] feat(fiat): announcement cleanup cleanup fix close button cleanup --- src/assets/svg/fiat_mask.svg | 21 +++ .../FiatOnrampAnnouncement/index.tsx | 131 ++++++++++++++++++ src/components/Web3Status/index.tsx | 2 + src/pages/App.tsx | 2 +- src/state/user/hooks.tsx | 16 ++- src/state/user/reducer.ts | 9 +- 6 files changed, 178 insertions(+), 3 deletions(-) create mode 100644 src/assets/svg/fiat_mask.svg create mode 100644 src/components/FiatOnrampAnnouncement/index.tsx diff --git a/src/assets/svg/fiat_mask.svg b/src/assets/svg/fiat_mask.svg new file mode 100644 index 0000000000..46ca98f7fc --- /dev/null +++ b/src/assets/svg/fiat_mask.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/FiatOnrampAnnouncement/index.tsx b/src/components/FiatOnrampAnnouncement/index.tsx new file mode 100644 index 0000000000..18f1eca500 --- /dev/null +++ b/src/components/FiatOnrampAnnouncement/index.tsx @@ -0,0 +1,131 @@ +import { Trans } from '@lingui/macro' +import { useWeb3React } from '@web3-react/core' +import fiatMaskUrl from 'assets/svg/fiat_mask.svg' +import { BaseVariant } from 'featureFlags' +import { useFiatOnrampFlag } from 'featureFlags/flags/fiatOnramp' +import { MouseEvent, useCallback } from 'react' +import { X } from 'react-feather' +import { useToggleWalletDropdown } from 'state/application/hooks' +import { useFiatOnrampAck } from 'state/user/hooks' +import styled from 'styled-components/macro' +import { ThemedText } from 'theme' +import { Z_INDEX } from 'theme/zIndex' + +const Arrow = styled.div` + top: -4px; + height: 16px; + position: absolute; + right: 16px; + width: 16px; + + ::before { + background: hsl(315.75, 93%, 83%); + border-top: none; + border-left: none; + box-sizing: border-box; + content: ''; + height: 16px; + position: absolute; + transform: rotate(45deg); + width: 16px; + } +` +const ArrowWrapper = styled.div` + position: absolute; + right: 16px; + top: 90%; + width: 100%; + max-width: 320px; + min-height: 92px; + z-index: ${Z_INDEX.dropdown - 1}; + + @media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) { + right: 36px; + } +` + +const CloseIcon = styled(X)` + color: white; + cursor: pointer; + position: absolute; + top: 8px; + right: 8px; + z-index: 1; +` +const Wrapper = styled.button` + background: radial-gradient(105% 250% at 100% 5%, hsla(318, 95%, 85%) 1%, hsla(331, 80%, 75%, 0.1) 84%), + linear-gradient(180deg, hsla(296, 92%, 67%, 0.5) 0%, hsla(313, 96%, 60%, 0.5) 130%); + background-color: hsla(297, 93%, 68%, 1); + border-radius: 12px; + border: none; + cursor: pointer; + outline: none; + overflow: hidden; + position: relative; + text-align: start; + max-width: 320px; + min-height: 92px; + width: 100%; + + :before { + background-image: url(${fiatMaskUrl}); + background-repeat: no-repeat; + content: ''; + height: 100%; + position: absolute; + right: -154px; // roughly width of fiat mask image + top: 0; + width: 100%; + } +` + +const Header = styled(ThemedText.SubHeader)` + color: white; + margin: 0; + padding: 12px 12px 4px; + position: relative; +` +const Body = styled(ThemedText.BodySmall)` + color: white; + margin: 0 12px 12px 12px !important; + position: relative; +` + +export function FiatOnrampAnnouncement() { + const { account } = useWeb3React() + const [fiatOnrampAcknowledged, acknowledge] = useFiatOnrampAck() + + const handleClose = useCallback( + (e: MouseEvent) => { + e.preventDefault() + e.stopPropagation() + acknowledge() + }, + [acknowledge] + ) + + const toggleWalletDropdown = useToggleWalletDropdown() + const handleClick = useCallback(() => { + toggleWalletDropdown() + acknowledge() + }, [acknowledge, toggleWalletDropdown]) + const fiatOnrampFlag = useFiatOnrampFlag() + + if (!account || fiatOnrampAcknowledged || fiatOnrampFlag === BaseVariant.Control) { + return null + } + return ( + + + + +
+ Buy crypto +
+ + Get the lowest rates on the market on Uniswap with Moonpay. + + + + ) +} diff --git a/src/components/Web3Status/index.tsx b/src/components/Web3Status/index.tsx index 4149c69271..b1ac156952 100644 --- a/src/components/Web3Status/index.tsx +++ b/src/components/Web3Status/index.tsx @@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro' import { TraceEvent } from '@uniswap/analytics' import { BrowserEvent, ElementName, EventName } from '@uniswap/analytics-events' import { useWeb3React } from '@web3-react/core' +import { FiatOnrampAnnouncement } from 'components/FiatOnrampAnnouncement' import { IconWrapper } from 'components/Identicon/StatusIcon' import WalletDropdown from 'components/WalletDropdown' import { getConnection } from 'connection/utils' @@ -312,6 +313,7 @@ export default function Web3Status() { return ( + diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 4befd5b373..311c3d9af4 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -111,7 +111,7 @@ const HeaderWrapper = styled.div<{ transparent?: boolean }>` justify-content: space-between; position: fixed; top: 0; - z-index: ${Z_INDEX.sticky}; + z-index: ${Z_INDEX.dropdown}; ` const Marginer = styled.div` diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx index 9907358bd9..cb365246b5 100644 --- a/src/state/user/hooks.tsx +++ b/src/state/user/hooks.tsx @@ -17,6 +17,7 @@ import { AppState } from '../index' import { addSerializedPair, addSerializedToken, + updateFiatOnrampAcknowledged, updateHideClosedPositions, updateHideNFTWelcomeModal, updateShowNftPromoBanner, @@ -25,7 +26,7 @@ import { updateUserDeadline, updateUserExpertMode, updateUserLocale, - updateUserSlippageTolerance, + updateUserSlippageTolerance } from './reducer' import { SerializedPair, SerializedToken } from './types' @@ -105,6 +106,19 @@ export function useExpertModeManager(): [boolean, () => void] { return [expertMode, toggleSetExpertMode] } +export function useFiatOnrampAck(): [boolean, (b?: boolean) => void] { + const dispatch = useAppDispatch() + const fiatOnrampAcknowledged = useAppSelector((state) => state.user.fiatOnrampAcknowledged) + + const toggleSetExpertMode = useCallback( + (b = true) => { + dispatch(updateFiatOnrampAcknowledged(b)) + }, + [dispatch] + ) + + return [fiatOnrampAcknowledged, toggleSetExpertMode] +} export function useHideNFTWelcomeModal(): [boolean | undefined, () => void] { const dispatch = useAppDispatch() const hideNFTWelcomeModal = useAppSelector((state) => state.user.hideNFTWelcomeModal) diff --git a/src/state/user/reducer.ts b/src/state/user/reducer.ts index 5189016441..4c6e0af0bc 100644 --- a/src/state/user/reducer.ts +++ b/src/state/user/reducer.ts @@ -9,6 +9,8 @@ import { SerializedPair, SerializedToken } from './types' const currentTimestamp = () => new Date().getTime() export interface UserState { + fiatOnrampAcknowledged: boolean + selectedWallet?: ConnectionType // the timestamp of the last updateVersion action @@ -61,6 +63,7 @@ function pairKey(token0Address: string, token1Address: string) { } export const initialState: UserState = { + fiatOnrampAcknowledged: false, selectedWallet: undefined, matchesDarkMode: false, userDarkMode: null, @@ -84,6 +87,9 @@ const userSlice = createSlice({ name: 'user', initialState, reducers: { + updateFiatOnrampAcknowledged(state, { payload }) { + state.fiatOnrampAcknowledged = payload + }, updateSelectedWallet(state, { payload: { wallet } }) { state.selectedWallet = wallet }, @@ -181,9 +187,10 @@ const userSlice = createSlice({ }) export const { - updateSelectedWallet, addSerializedPair, addSerializedToken, + updateFiatOnrampAcknowledged, + updateSelectedWallet, updateHideClosedPositions, updateMatchesDarkMode, updateUserClientSideRouter,