ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: FoR polish (#47)

Browse Source 
* 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)
This commit is contained in:
Jordan Frankfurt 2022-12-12 10:01:00 -06:00
parent cae56ec385
commit a16d2387cc
4 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Button/LoadingButtonSpinner.tsx
View File

@ -1,7 +1,7 @@
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"

6
src/components/FiatOnrampAnnouncement/index.tsx
View File

@ -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>

3
src/components/FiatOnrampModal/index.tsx
View File

@ -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,

28
src/components/WalletDropdown/AuthenticatedHeader.tsx
View File

@ -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 = () => {
<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}