feat(fiat): announcement
cleanup cleanup fix close button cleanup
This commit is contained in:
Jordan Frankfurt
parent
680d3a3f26
commit
46d9d8e3df
21
src/assets/svg/fiat_mask.svg
Normal file
21
src/assets/svg/fiat_mask.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 3.5 MiB |
131
src/components/FiatOnrampAnnouncement/index.tsx
Normal file
131
src/components/FiatOnrampAnnouncement/index.tsx
Normal file
@ -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<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>
|
||||
)
|
||||
}
|
||||
@ -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}>
|
||||
|
||||
@ -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`
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user