From a16d2387cc2d6efeed7d6d9d40a70d48b6f22787 Mon Sep 17 00:00:00 2001 From: Jordan Frankfurt Date: Mon, 12 Dec 2022 10:01:00 -0600 Subject: [PATCH] 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) --- .../Button/LoadingButtonSpinner.tsx | 2 +- .../FiatOnrampAnnouncement/index.tsx | 6 ++-- src/components/FiatOnrampModal/index.tsx | 3 +- .../WalletDropdown/AuthenticatedHeader.tsx | 28 ++++++++----------- 4 files changed, 19 insertions(+), 20 deletions(-) diff --git a/src/components/Button/LoadingButtonSpinner.tsx b/src/components/Button/LoadingButtonSpinner.tsx index f429ffac04..7ad40ce5c8 100644 --- a/src/components/Button/LoadingButtonSpinner.tsx +++ b/src/components/Button/LoadingButtonSpinner.tsx @@ -1,7 +1,7 @@ import { SpinnerSVG } from 'theme' const ButtonLoadingSpinner = (props: React.ComponentPropsWithoutRef<'svg'>) => ( - + = MAX_RENDER_COUNT + acks.renderCount >= MAX_RENDER_COUNT || + (isIOS && isMobile) ) { return null } @@ -138,7 +140,7 @@ export function FiatOnrampAnnouncement() { Buy crypto - Get the lowest rates on the market on Uniswap with Moonpay. + Get tokens at the best prices in web3 on Uniswap, powered by Moonpay. diff --git a/src/components/FiatOnrampModal/index.tsx b/src/components/FiatOnrampModal/index.tsx index 35e8a0f0e6..35ed3ee4e7 100644 --- a/src/components/FiatOnrampModal/index.tsx +++ b/src/components/FiatOnrampModal/index.tsx @@ -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, diff --git a/src/components/WalletDropdown/AuthenticatedHeader.tsx b/src/components/WalletDropdown/AuthenticatedHeader.tsx index 38e5d52a10..4f48de9bad 100644 --- a/src/components/WalletDropdown/AuthenticatedHeader.tsx +++ b/src/components/WalletDropdown/AuthenticatedHeader.tsx @@ -1,4 +1,5 @@ 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 = () => { {balanceString} {nativeCurrencySymbol} - ${amountUSD.toFixed(2)} USD + {amountUSD !== undefined && {formatUSDPrice(amountUSD)} USD} { onClick={handleBuyCryptoClick} disabled={disableBuyCryptoButton} > - {fiatOnrampAvailabilityLoading ? ( - <> - - Checking availability - - ) : error ? ( + {error ? ( {error} ) : ( <> - Buy crypto + {fiatOnrampAvailabilityLoading ? : }{' '} + Buy crypto )} @@ -339,11 +339,7 @@ const AuthenticatedHeader = () => { Not available in your region - Moonpay is not supported in some regions in and outside of the US. Click to learn more. - - } + text={Moonpay is not available in some regions. Click to learn more.} >