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
Show 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'
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
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"
......
src/components/FiatOnrampAnnouncement/index.tsx
View file @ a16d2387
......@@ -10,6 +10,7 @@ import { useFiatOnrampAck } from 'state/user/hooks'
import styled from 'styled-components/macro'
import { ThemedText } from 'theme'
import { Z_INDEX } from 'theme/zIndex'
import { isIOS, isMobile } from 'utils/userAgent'
const Arrow = styled.div`
top: -4px;
......@@ -125,7 +126,8 @@ export function FiatOnrampAnnouncement() {
fiatOnrampFlag === BaseVariant.Control ||
locallyDismissed ||
sessionStorage.getItem(ANNOUNCEMENT_DISMISSED) ||
acks.renderCount >= MAX_RENDER_COUNT
acks.renderCount >= MAX_RENDER_COUNT ||
(isIOS && isMobile)
) {
return null
}
......@@ -138,7 +140,7 @@ export function FiatOnrampAnnouncement() {
<Trans>Buy crypto</Trans>
</Header>
<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>
</Wrapper>
</ArrowWrapper>
......
src/components/FiatOnrampModal/index.tsx
View file @ a16d2387
......@@ -35,6 +35,7 @@ const StyledIframe = styled.iframe`
left: 0;
height: 100%;
margin: auto;
padding: 8px;
position: absolute;
right: 0;
top: 0;
......@@ -90,7 +91,7 @@ export default function FiatOnrampModal() {
colorCode: theme.accentAction,
defaultCurrencyCode: 'eth',
redirectUrl: 'https://app.uniswap.org/#/swap',
walletAddressed: MOONPAY_SUPPORTED_CURRENCY_CODES.reduce(
walletAddresses: MOONPAY_SUPPORTED_CURRENCY_CODES.reduce(
(acc, currencyCode) => ({
...acc,
[currencyCode]: account,
......
src/components/WalletDropdown/AuthenticatedHeader.tsx
View file @ a16d2387
import { Trans } from '@lingui/macro'
import { formatUSDPrice } from '@uniswap/conedison/format'
import { CurrencyAmount, Token } from '@uniswap/sdk-core'
import { useWeb3React } from '@web3-react/core'
import { ButtonEmphasis, ButtonSize, LoadingButtonSpinner, ThemeButton } from 'components/Button'
......@@ -161,7 +162,9 @@ const StyledInfoIcon = styled(Info)`
width: 12px;
flex: 1 1 auto;
`
const StyledLoadingButtonSpinner = styled(LoadingButtonSpinner)`
fill: ${({ theme }) => theme.accentAction};
`
const BalanceWrapper = styled.div`
padding: 16px 0;
`
......@@ -199,7 +202,7 @@ const AuthenticatedHeader = () => {
const isUnclaimed = useUserHasAvailableClaim(account)
const connectionType = getConnection(connector).type
const nativeCurrency = useNativeCurrency()
const nativeCurrencyPrice = useStablecoinPrice(nativeCurrency ?? undefined) || 0
const nativeCurrencyPrice = useStablecoinPrice(nativeCurrency ?? undefined)
const openClaimModal = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
const openNftModal = useToggleModal(ApplicationModal.UNISWAP_NFT_AIRDROP_CLAIM)
const disconnect = useCallback(() => {
......@@ -211,8 +214,9 @@ const AuthenticatedHeader = () => {
}, [connector, dispatch])
const amountUSD = useMemo(() => {
if (!nativeCurrencyPrice || !balanceString) return undefined
const price = parseFloat(nativeCurrencyPrice.toFixed(5))
const balance = parseFloat(balanceString || '0')
const balance = parseFloat(balanceString)
return price * balance
}, [balanceString, nativeCurrencyPrice])
......@@ -302,7 +306,7 @@ const AuthenticatedHeader = () => {
<Text fontSize={36} fontWeight={400}>
{balanceString} {nativeCurrencySymbol}
</Text>
<USDText>${amountUSD.toFixed(2)} USD</USDText>
{amountUSD !== undefined && <USDText>{formatUSDPrice(amountUSD)} USD</USDText>}
</BalanceWrapper>
<ProfileButton
data-testid="nft-view-self-nfts"
......@@ -321,16 +325,12 @@ const AuthenticatedHeader = () => {
onClick={handleBuyCryptoClick}
disabled={disableBuyCryptoButton}
>
{fiatOnrampAvailabilityLoading ? (
<>
<LoadingButtonSpinner />
<Trans>Checking availability</Trans>
</>
) : error ? (
{error ? (
<ThemedText.BodyPrimary>{error}</ThemedText.BodyPrimary>
) : (
<>
<CreditCard /> <Trans>Buy crypto</Trans>
{fiatOnrampAvailabilityLoading ? <StyledLoadingButtonSpinner /> : <CreditCard />}{' '}
<Trans>Buy crypto</Trans>
</>
)}
</BuyCryptoButton>
......@@ -339,11 +339,7 @@ const AuthenticatedHeader = () => {
<Trans>Not available in your region</Trans>
<Tooltip
show={showFiatOnrampUnavailableTooltip}
text={
<Trans>
Moonpay is not supported in some regions in and outside of the US. Click to learn more.
</Trans>
}
text={<Trans>Moonpay is not available in some regions. Click to learn more.</Trans>}
>
<FiatOnrampAvailabilityExternalLink
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