Skip to content

I
interface
Commit 46d9d8e3 authored by Jordan Frankfurt's avatar Jordan Frankfurt
Browse files
Options

feat(fiat): announcement 

cleanup

cleanup

fix close button

cleanup
parent 680d3a3f
Hide whitespace changes
Inline Side-by-side
Showing with 178 additions and 3 deletions
src/assets/svg/fiat_mask.svg 0 → 100644
View file @ 46d9d8e3
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/FiatOnrampAnnouncement/index.tsx 0 → 100644
View file @ 46d9d8e3
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>
)
}
src/components/Web3Status/index.tsx
View file @ 46d9d8e3
......@@ -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}>
......
src/pages/App.tsx
View file @ 46d9d8e3
......@@ -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`
......
src/state/user/hooks.tsx
View file @ 46d9d8e3
......@@ -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)
......
src/state/user/reducer.ts
View file @ 46d9d8e3
......@@ -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,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment