feat(fiat): announcement

cleanup cleanup fix close button cleanup

feat(fiat): announcement
cleanup cleanup fix close button cleanup
46d9d8e3 · Jordan Frankfurt · 680d3a3f · 46d9d8e3 · 46d9d8e3 · 46d9d8e3
Commit 46d9d8e3 authored Nov 29, 2022 by Jordan Frankfurt
6 changed files
--- a/src/assets/svg/fiat_mask.svg
+++ b/src/assets/svg/fiat_mask.svg
--- a/src/components/FiatOnrampAnnouncement/index.tsx
+++ b/src/components/FiatOnrampAnnouncement/index.tsx
+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<HTMLOrSVGElement>) => {
+      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 (
+    <ArrowWrapper>
+      <Arrow />
+      <CloseIcon onClick={handleClose} />
+      <Wrapper onClick={handleClick}>
+        <Header>
+          <Trans>Buy crypto</Trans>
+        </Header>
+        <Body>
+          <Trans>Get the lowest rates on the market on Uniswap with Moonpay.</Trans>
+        </Body>
+      </Wrapper>
+    </ArrowWrapper>
+  )
+}
--- 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 (
    <span ref={ref}>
      <Web3StatusInner />
+      <FiatOnrampAnnouncement />
      <WalletModal ENSName={ENSName ?? undefined} pendingTransactions={pending} confirmedTransactions={confirmed} />
      <Portal>
        <span ref={walletRef}>

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

--- 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)

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