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

chore: formatter to use local currency price (#7273)

Browse Source 
* chore: updating formatCurrencyAmount to handle multiple langs and currencies

* missed advanced swap details

* missed confirmed swap modal

* removing updating visual effects

* removing it from parseLocale

* chore: displaying local currency and language formatting

* making effects visible

* moving to hook

* useFormatCurrencyAmount

* moving it to useformatter hook

* exporting formatting locales

* missed one parsed remote

* initial passover of using conversion rate in formatting function

* moving hook to bottom of file

* moving to bottom

* moving to bottom

* fallback to usd

* refactors

* better fallback protection

* moving to function

* fixing typecheck
This commit is contained in:
Jack Short 2023-09-11 14:42:48 -04:00 committed by GitHub
parent 86e4dd5153
commit 184d515e16
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 76 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/swap/SwapModalHeader.tsx
View File

@ -1,7 +1,7 @@
import { Trans } from '@lingui/macro'
import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
import Column, { AutoColumn } from 'components/Column'
import { useLocalCurrencyPrice } from 'hooks/useLocalCurrencyPrice'
import { useUSDPrice } from 'hooks/useUSDPrice'
import { InterfaceTrade } from 'state/routing/types'
import { Field } from 'state/swap/actions'
import styled from 'styled-components'
@ -26,8 +26,8 @@ export default function SwapModalHeader({
inputCurrency?: Currency
allowedSlippage: Percent
}) {
const fiatValueInput = useLocalCurrencyPrice(trade.inputAmount)
const fiatValueOutput = useLocalCurrencyPrice(trade.postTaxOutputAmount)
const fiatValueInput = useUSDPrice(trade.inputAmount)
const fiatValueOutput = useUSDPrice(trade.postTaxOutputAmount)
return (
<HeaderContainer gap="sm">

6
src/components/swap/TradePrice.tsx
View File

@ -1,6 +1,6 @@
import { Trans } from '@lingui/macro'
import { Currency, Price } from '@uniswap/sdk-core'
import { useLocalCurrencyPrice } from 'hooks/useLocalCurrencyPrice'
import { useUSDPrice } from 'hooks/useUSDPrice'
import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
import { useCallback, useMemo, useState } from 'react'
import styled from 'styled-components'
@ -33,9 +33,7 @@ export default function TradePrice({ price }: TradePriceProps) {
const [showInverted, setShowInverted] = useState<boolean>(false)
const { baseCurrency, quoteCurrency } = price
const { data: usdPrice } = useLocalCurrencyPrice(
tryParseCurrencyAmount('1', showInverted ? baseCurrency : quoteCurrency)
)
const { data: usdPrice } = useUSDPrice(tryParseCurrencyAmount('1', showInverted ? baseCurrency : quoteCurrency))
const formattedPrice = useMemo(() => {
try {

27
src/hooks/useLocalCurrencyPrice.ts
View File

@ -1,27 +0,0 @@
import { Currency } from 'graphql/data/__generated__/types-and-hooks'
import { useLocalCurrencyConversionRate } from 'graphql/data/ConversionRate'
import { useActiveLocalCurrency } from './useActiveLocalCurrency'
import { useUSDPrice } from './useUSDPrice'
type useUSDPriceParameters = Parameters<typeof useUSDPrice>
export function useLocalCurrencyPrice(...useUSDPriceParameters: useUSDPriceParameters) {
const activeLocalCurrency = useActiveLocalCurrency()
const activeLocalCurrencyIsUSD = activeLocalCurrency === Currency.Usd
const { data: usdPrice, isLoading: isUSDPriceLoading } = useUSDPrice(...useUSDPriceParameters)
const { data: localCurrencyConversionRate, isLoading: isLocalCurrencyConversionRateLoading } =
useLocalCurrencyConversionRate(activeLocalCurrency, activeLocalCurrencyIsUSD)
if (activeLocalCurrencyIsUSD) {
return { data: usdPrice, isLoading: isUSDPriceLoading }
}
const isLoading = isUSDPriceLoading || isLocalCurrencyConversionRateLoading
if (!usdPrice || !localCurrencyConversionRate) {
return { data: undefined, isLoading }
}
return { data: usdPrice * localCurrencyConversionRate, isLoading: false }
}

4
src/nft/hooks/useUsdPrice.ts
View File

@ -1,6 +1,6 @@
import { formatEther } from '@ethersproject/units'
import { ChainId } from '@uniswap/sdk-core'
import { useLocalCurrencyPrice } from 'hooks/useLocalCurrencyPrice'
import { useUSDPrice } from 'hooks/useUSDPrice'
import useNativeCurrency from 'lib/hooks/useNativeCurrency'
import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
import { GenieAsset } from 'nft/types'
@ -8,7 +8,7 @@ import { GenieAsset } from 'nft/types'
export const useNativeUsdPrice = (chainId: number = ChainId.MAINNET): number => {
const nativeCurrency = useNativeCurrency(chainId)
const parsedAmount = tryParseCurrencyAmount('1', nativeCurrency)
const usdcValue = useLocalCurrencyPrice(parsedAmount)?.data ?? 0
const usdcValue = useUSDPrice(parsedAmount)?.data ?? 0
return usdcValue
}

12
src/pages/Swap/index.tsx
View File

@ -35,12 +35,12 @@ import { getSwapCurrencyId, TOKEN_SHORTHANDS } from 'constants/tokens'
import { useUniswapXDefaultEnabled } from 'featureFlags/flags/uniswapXDefault'
import { useCurrency, useDefaultActiveTokens } from 'hooks/Tokens'
import { useIsSwapUnsupported } from 'hooks/useIsSwapUnsupported'
import { useLocalCurrencyPrice } from 'hooks/useLocalCurrencyPrice'
import { useMaxAmountIn } from 'hooks/useMaxAmountIn'
import usePermit2Allowance, { AllowanceState } from 'hooks/usePermit2Allowance'
import usePrevious from 'hooks/usePrevious'
import { SwapResult, useSwapCallback } from 'hooks/useSwapCallback'
import { useSwitchChain } from 'hooks/useSwitchChain'
import { useUSDPrice } from 'hooks/useUSDPrice'
import useWrapCallback, { WrapErrorText, WrapType } from 'hooks/useWrapCallback'
import JSBI from 'jsbi'
import { formatSwapQuoteReceivedEventProperties } from 'lib/utils/analytics'
@ -314,8 +314,8 @@ export function Swap({
[independentField, parsedAmount, showWrap, trade]
)
const fiatValueInput = useLocalCurrencyPrice(parsedAmounts[Field.INPUT], currencies[Field.INPUT] ?? undefined)
const fiatValueOutput = useLocalCurrencyPrice(parsedAmounts[Field.OUTPUT], currencies[Field.OUTPUT] ?? undefined)
const fiatValueInput = useUSDPrice(parsedAmounts[Field.INPUT], currencies[Field.INPUT] ?? undefined)
const fiatValueOutput = useUSDPrice(parsedAmounts[Field.OUTPUT], currencies[Field.OUTPUT] ?? undefined)
const showFiatValueInput = Boolean(parsedAmounts[Field.INPUT])
const showFiatValueOutput = Boolean(parsedAmounts[Field.OUTPUT])
@ -328,9 +328,9 @@ export function Swap({
[trade, tradeState]
)
const fiatValueTradeInput = useLocalCurrencyPrice(trade?.inputAmount)
const fiatValueTradeOutput = useLocalCurrencyPrice(trade?.postTaxOutputAmount)
const preTaxFiatValueTradeOutput = useLocalCurrencyPrice(trade?.outputAmount)
const fiatValueTradeInput = useUSDPrice(trade?.inputAmount)
const fiatValueTradeOutput = useUSDPrice(trade?.postTaxOutputAmount)
const preTaxFiatValueTradeOutput = useUSDPrice(trade?.outputAmount)
const [stablecoinPriceImpact, preTaxStablecoinPriceImpact] = useMemo(
() =>
routeIsSyncing || !isClassicTrade(trade)

73
src/utils/formatNumbers.ts
View File

@ -6,8 +6,11 @@ import {
} from 'constants/localCurrencies'
import { DEFAULT_LOCALE, SupportedLocale } from 'constants/locales'
import { useCurrencyConversionFlagEnabled } from 'featureFlags/flags/currencyConversion'
import { Currency as GqlCurrency } from 'graphql/data/__generated__/types-and-hooks'
import { useLocalCurrencyConversionRate } from 'graphql/data/ConversionRate'
import { useActiveLocalCurrency } from 'hooks/useActiveLocalCurrency'
import { useActiveLocale } from 'hooks/useActiveLocale'
import usePrevious from 'hooks/usePrevious'
import { useCallback, useMemo } from 'react'
type Nullish<T> = T | null | undefined
@ -362,12 +365,15 @@ const TYPE_TO_FORMATTER_RULES = {
[NumberType.NFTCollectionStats]: ntfCollectionStatsFormatter,
}
function getFormatterRule(input: number, type: NumberType): FormatterRule {
function getFormatterRule(input: number, type: NumberType, conversionRate?: number): FormatterRule {
const rules = TYPE_TO_FORMATTER_RULES[type]
for (const rule of rules) {
const shouldConvertInput = rule.formatterOptions.currency && conversionRate
const convertedInput = shouldConvertInput ? input * conversionRate : input
if (
(rule.exact !== undefined && input === rule.exact) ||
(rule.upperBound !== undefined && input < rule.upperBound)
(rule.exact !== undefined && convertedInput === rule.exact) ||
(rule.upperBound !== undefined && convertedInput < rule.upperBound)
) {
return rule
}
@ -382,6 +388,7 @@ interface FormatNumberOptions {
placeholder?: string
locale?: SupportedLocale
localCurrency?: SupportedLocalCurrency
conversionRate?: number
}
export function formatNumber({
@ -390,14 +397,16 @@ export function formatNumber({
placeholder = '-',
locale = DEFAULT_LOCALE,
localCurrency = DEFAULT_LOCAL_CURRENCY,
conversionRate,
}: FormatNumberOptions): string {
if (input === null || input === undefined) {
return placeholder
}
const { hardCodedInput, formatterOptions } = getFormatterRule(input, type)
const { hardCodedInput, formatterOptions } = getFormatterRule(input, type, conversionRate)
if (formatterOptions.currency) {
input = conversionRate ? input * conversionRate : input
formatterOptions.currency = localCurrency
formatterOptions.currencyDisplay = LOCAL_CURRENCY_SYMBOL_DISPLAY_TYPE[localCurrency]
}
@ -421,6 +430,7 @@ interface FormatCurrencyAmountOptions {
placeholder?: string
locale?: SupportedLocale
localCurrency?: SupportedLocalCurrency
conversionRate?: number
}
export function formatCurrencyAmount({
@ -429,6 +439,7 @@ export function formatCurrencyAmount({
placeholder,
locale = DEFAULT_LOCALE,
localCurrency = DEFAULT_LOCAL_CURRENCY,
conversionRate,
}: FormatCurrencyAmountOptions): string {
return formatNumber({
input: amount ? parseFloat(amount.toSignificant()) : undefined,
@ -436,6 +447,7 @@ export function formatCurrencyAmount({
placeholder,
locale,
localCurrency,
conversionRate,
})
}
@ -567,20 +579,61 @@ export function useFormatterLocales(): {
}
}
function handleFallbackCurrency(
selectedCurrency: SupportedLocalCurrency,
previousSelectedCurrency: SupportedLocalCurrency | undefined,
shouldFallbackToUSD: boolean,
shouldFallbackToPrevious: boolean
) {
if (shouldFallbackToUSD) return DEFAULT_LOCAL_CURRENCY
if (shouldFallbackToPrevious) return previousSelectedCurrency
return selectedCurrency
}
// Constructs an object that injects the correct locale and local currency into each of the above formatter functions.
export function useFormatter() {
const activeLocalCurrency = useActiveLocalCurrency()
const { formatterLocale, formatterLocalCurrency } = useFormatterLocales()
const activeLocalCurrencyIsUSD = activeLocalCurrency === GqlCurrency.Usd
const { data: localCurrencyConversionRate, isLoading: localCurrencyConversionRateIsLoading } =
useLocalCurrencyConversionRate(activeLocalCurrency, activeLocalCurrencyIsUSD)
const previousSelectedCurrency = usePrevious(activeLocalCurrency)
const previousConversionRate = usePrevious(localCurrencyConversionRate)
const shouldFallbackToPrevious = !localCurrencyConversionRate && localCurrencyConversionRateIsLoading
const shouldFallbackToUSD = !localCurrencyConversionRate && !localCurrencyConversionRateIsLoading
const currencyToFormatWith = handleFallbackCurrency(
formatterLocalCurrency,
previousSelectedCurrency,
shouldFallbackToUSD,
shouldFallbackToPrevious
)
const localCurrencyConversionRateToFormatWith = shouldFallbackToPrevious
? previousConversionRate
: localCurrencyConversionRate
const formatNumberWithLocales = useCallback(
(options: Omit<FormatNumberOptions, 'locale' | 'localCurrency'>) =>
formatNumber({ ...options, locale: formatterLocale, localCurrency: formatterLocalCurrency }),
[formatterLocalCurrency, formatterLocale]
(options: Omit<FormatNumberOptions, 'locale' | 'localCurrency' | 'conversionRate'>) =>
formatNumber({
...options,
locale: formatterLocale,
localCurrency: currencyToFormatWith,
conversionRate: localCurrencyConversionRateToFormatWith,
}),
[currencyToFormatWith, formatterLocale, localCurrencyConversionRateToFormatWith]
)
const formatCurrencyAmountWithLocales = useCallback(
(options: Omit<FormatCurrencyAmountOptions, 'locale' | 'localCurrency'>) =>
formatCurrencyAmount({ ...options, locale: formatterLocale, localCurrency: formatterLocalCurrency }),
[formatterLocalCurrency, formatterLocale]
(options: Omit<FormatCurrencyAmountOptions, 'locale' | 'localCurrency' | 'conversionRate'>) =>
formatCurrencyAmount({
...options,
locale: formatterLocale,
localCurrency: currencyToFormatWith,
conversionRate: localCurrencyConversionRateToFormatWith,
}),
[currencyToFormatWith, formatterLocale, localCurrencyConversionRateToFormatWith]
)
return useMemo(