Skip to content

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

fix: FoR polish (#47) 

* fix: remove currencyCode config property from moonpay url

* add 8px padding to moonpay iframe

* don't switch button text when loading

* update tooltip text

* update announcement text

* remove FoR announcement on iOS mobile

* improve fiat quote format in account dropdown

fix: typo (#51)
parent cae56ec3
Hide whitespace changes
Inline Side-by-side
Showing with 19 additions and 20 deletions
src/components/Button/LoadingButtonSpinner.tsx
View file @ a16d2387
import { SpinnerSVG } from 'theme' import { SpinnerSVG } from 'theme'
const ButtonLoadingSpinner = (props: React.ComponentPropsWithoutRef<'svg'>) => ( const ButtonLoadingSpinner = (props: React.ComponentPropsWithoutRef<'svg'>) => (
<SpinnerSVG width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}> <SpinnerSVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
<path <path
opacity="0.1" opacity="0.1"
d="M18.8334 10.0003C18.8334 14.6027 15.1025 18.3337 10.5001 18.3337C5.89771 18.3337 2.16675 14.6027 2.16675 10.0003C2.16675 5.39795 5.89771 1.66699 10.5001 1.66699C15.1025 1.66699 18.8334 5.39795 18.8334 10.0003ZM4.66675 10.0003C4.66675 13.222 7.27842 15.8337 10.5001 15.8337C13.7217 15.8337 16.3334 13.222 16.3334 10.0003C16.3334 6.77867 13.7217 4.16699 10.5001 4.16699C7.27842 4.16699 4.66675 6.77867 4.66675 10.0003Z" d="M18.8334 10.0003C18.8334 14.6027 15.1025 18.3337 10.5001 18.3337C5.89771 18.3337 2.16675 14.6027 2.16675 10.0003C2.16675 5.39795 5.89771 1.66699 10.5001 1.66699C15.1025 1.66699 18.8334 5.39795 18.8334 10.0003ZM4.66675 10.0003C4.66675 13.222 7.27842 15.8337 10.5001 15.8337C13.7217 15.8337 16.3334 13.222 16.3334 10.0003C16.3334 6.77867 13.7217 4.16699 10.5001 4.16699C7.27842 4.16699 4.66675 6.77867 4.66675 10.0003Z"
......
src/components/FiatOnrampAnnouncement/index.tsx
View file @ a16d2387
...@@ -10,6 +10,7 @@ import { useFiatOnrampAck } from 'state/user/hooks' ...@@ -10,6 +10,7 @@ import { useFiatOnrampAck } from 'state/user/hooks'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import { ThemedText } from 'theme' import { ThemedText } from 'theme'
import { Z_INDEX } from 'theme/zIndex' import { Z_INDEX } from 'theme/zIndex'
import { isIOS, isMobile } from 'utils/userAgent'
const Arrow = styled.div` const Arrow = styled.div`
top: -4px; top: -4px;
...@@ -125,7 +126,8 @@ export function FiatOnrampAnnouncement() { ...@@ -125,7 +126,8 @@ export function FiatOnrampAnnouncement() {
fiatOnrampFlag === BaseVariant.Control || fiatOnrampFlag === BaseVariant.Control ||
locallyDismissed || locallyDismissed ||
sessionStorage.getItem(ANNOUNCEMENT_DISMISSED) || sessionStorage.getItem(ANNOUNCEMENT_DISMISSED) ||
acks.renderCount >= MAX_RENDER_COUNT acks.renderCount >= MAX_RENDER_COUNT ||
(isIOS && isMobile)
) { ) {
return null return null
} }
...@@ -138,7 +140,7 @@ export function FiatOnrampAnnouncement() { ...@@ -138,7 +140,7 @@ export function FiatOnrampAnnouncement() {
<Trans>Buy crypto</Trans> <Trans>Buy crypto</Trans>
</Header> </Header>
<Body> <Body>
<Trans>Get the lowest rates on the market on Uniswap with Moonpay.</Trans> <Trans>Get tokens at the best prices in web3 on Uniswap, powered by Moonpay.</Trans>
</Body> </Body>
</Wrapper> </Wrapper>
</ArrowWrapper> </ArrowWrapper>
......
src/components/FiatOnrampModal/index.tsx
View file @ a16d2387
...@@ -35,6 +35,7 @@ const StyledIframe = styled.iframe` ...@@ -35,6 +35,7 @@ const StyledIframe = styled.iframe`
left: 0; left: 0;
height: 100%; height: 100%;
margin: auto; margin: auto;
padding: 8px;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
...@@ -90,7 +91,7 @@ export default function FiatOnrampModal() { ...@@ -90,7 +91,7 @@ export default function FiatOnrampModal() {
colorCode: theme.accentAction, colorCode: theme.accentAction,
defaultCurrencyCode: 'eth', defaultCurrencyCode: 'eth',
redirectUrl: 'https://app.uniswap.org/#/swap', redirectUrl: 'https://app.uniswap.org/#/swap',
walletAddressed: MOONPAY_SUPPORTED_CURRENCY_CODES.reduce( walletAddresses: MOONPAY_SUPPORTED_CURRENCY_CODES.reduce(
(acc, currencyCode) => ({ (acc, currencyCode) => ({
...acc, ...acc,
[currencyCode]: account, [currencyCode]: account,
......
src/components/WalletDropdown/AuthenticatedHeader.tsx
View file @ a16d2387
import { Trans } from '@lingui/macro' import { Trans } from '@lingui/macro'
import { formatUSDPrice } from '@uniswap/conedison/format'
import { CurrencyAmount, Token } from '@uniswap/sdk-core' import { CurrencyAmount, Token } from '@uniswap/sdk-core'
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
import { ButtonEmphasis, ButtonSize, LoadingButtonSpinner, ThemeButton } from 'components/Button' import { ButtonEmphasis, ButtonSize, LoadingButtonSpinner, ThemeButton } from 'components/Button'
...@@ -161,7 +162,9 @@ const StyledInfoIcon = styled(Info)` ...@@ -161,7 +162,9 @@ const StyledInfoIcon = styled(Info)`
width: 12px; width: 12px;
flex: 1 1 auto; flex: 1 1 auto;
` `
const StyledLoadingButtonSpinner = styled(LoadingButtonSpinner)`
fill: ${({ theme }) => theme.accentAction};
`
const BalanceWrapper = styled.div` const BalanceWrapper = styled.div`
padding: 16px 0; padding: 16px 0;
` `
...@@ -199,7 +202,7 @@ const AuthenticatedHeader = () => { ...@@ -199,7 +202,7 @@ const AuthenticatedHeader = () => {
const isUnclaimed = useUserHasAvailableClaim(account) const isUnclaimed = useUserHasAvailableClaim(account)
const connectionType = getConnection(connector).type const connectionType = getConnection(connector).type
const nativeCurrency = useNativeCurrency() const nativeCurrency = useNativeCurrency()
const nativeCurrencyPrice = useStablecoinPrice(nativeCurrency ?? undefined) || 0 const nativeCurrencyPrice = useStablecoinPrice(nativeCurrency ?? undefined)
const openClaimModal = useToggleModal(ApplicationModal.ADDRESS_CLAIM) const openClaimModal = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
const openNftModal = useToggleModal(ApplicationModal.UNISWAP_NFT_AIRDROP_CLAIM) const openNftModal = useToggleModal(ApplicationModal.UNISWAP_NFT_AIRDROP_CLAIM)
const disconnect = useCallback(() => { const disconnect = useCallback(() => {
...@@ -211,8 +214,9 @@ const AuthenticatedHeader = () => { ...@@ -211,8 +214,9 @@ const AuthenticatedHeader = () => {
}, [connector, dispatch]) }, [connector, dispatch])
const amountUSD = useMemo(() => { const amountUSD = useMemo(() => {
if (!nativeCurrencyPrice || !balanceString) return undefined
const price = parseFloat(nativeCurrencyPrice.toFixed(5)) const price = parseFloat(nativeCurrencyPrice.toFixed(5))
const balance = parseFloat(balanceString || '0') const balance = parseFloat(balanceString)
return price * balance return price * balance
}, [balanceString, nativeCurrencyPrice]) }, [balanceString, nativeCurrencyPrice])
...@@ -302,7 +306,7 @@ const AuthenticatedHeader = () => { ...@@ -302,7 +306,7 @@ const AuthenticatedHeader = () => {
<Text fontSize={36} fontWeight={400}> <Text fontSize={36} fontWeight={400}>
{balanceString} {nativeCurrencySymbol} {balanceString} {nativeCurrencySymbol}
</Text> </Text>
<USDText>${amountUSD.toFixed(2)} USD</USDText> {amountUSD !== undefined && <USDText>{formatUSDPrice(amountUSD)} USD</USDText>}
</BalanceWrapper> </BalanceWrapper>
<ProfileButton <ProfileButton
data-testid="nft-view-self-nfts" data-testid="nft-view-self-nfts"
...@@ -321,16 +325,12 @@ const AuthenticatedHeader = () => { ...@@ -321,16 +325,12 @@ const AuthenticatedHeader = () => {
onClick={handleBuyCryptoClick} onClick={handleBuyCryptoClick}
disabled={disableBuyCryptoButton} disabled={disableBuyCryptoButton}
> >
{fiatOnrampAvailabilityLoading ? ( {error ? (
<>
<LoadingButtonSpinner />
<Trans>Checking availability</Trans>
</>
) : error ? (
<ThemedText.BodyPrimary>{error}</ThemedText.BodyPrimary> <ThemedText.BodyPrimary>{error}</ThemedText.BodyPrimary>
) : ( ) : (
<> <>
<CreditCard /> <Trans>Buy crypto</Trans> {fiatOnrampAvailabilityLoading ? <StyledLoadingButtonSpinner /> : <CreditCard />}{' '}
<Trans>Buy crypto</Trans>
</> </>
)} )}
</BuyCryptoButton> </BuyCryptoButton>
...@@ -339,11 +339,7 @@ const AuthenticatedHeader = () => { ...@@ -339,11 +339,7 @@ const AuthenticatedHeader = () => {
<Trans>Not available in your region</Trans> <Trans>Not available in your region</Trans>
<Tooltip <Tooltip
show={showFiatOnrampUnavailableTooltip} show={showFiatOnrampUnavailableTooltip}
text={ text={<Trans>Moonpay is not available in some regions. Click to learn more.</Trans>}
<Trans>
Moonpay is not supported in some regions in and outside of the US. Click to learn more.
</Trans>
}
> >
<FiatOnrampAvailabilityExternalLink <FiatOnrampAvailabilityExternalLink
onMouseEnter={openFiatOnrampUnavailableTooltip} onMouseEnter={openFiatOnrampUnavailableTooltip}
......
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