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.} >