-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Major overhaul of native token / ticker handling
- Make less assumptions about tokens used - Rename a NativeTicker to Ticker - Add EUROe token (and logo) - Add some meta-info about all native tokens - Ticker (symbol) - Is this a free token? - CoinGecko id - Generalize RosePriceCard to TokenPriceCard - Enhance layer token configuration - Describe the token, not the ticker - Support multiple tokens per layer - Define the tokens for the Pontus-X layer - CoinGecko: support pulling all wanted prices - Nexus API: - When loading data, observe the layer token configuration - Added dedicated component for displaying fiat money value, summarizing data from multiple tokens - ParaTimeSnapshot: display price/faucet for first token
- Loading branch information
Showing
26 changed files
with
356 additions
and
197 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { styled } from '@mui/material/styles' | ||
| import WarningIcon from '@mui/icons-material/WarningAmber' | ||
| import Box from '@mui/material/Box' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { FC } from 'react' | ||
| import { CoinGeckoReferral } from '../CoinGeckoReferral' | ||
| import { FiatValueInfo } from './hooks' | ||
| import Tooltip from '@mui/material/Tooltip' | ||
| import Skeleton from '@mui/material/Skeleton' | ||
|
|
||
| export const FiatMoneyAmountBox = styled(Box)(() => ({ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'space-between', | ||
| gap: 4, | ||
| flex: 1, | ||
| })) | ||
|
|
||
| export const FiatMoneyAmount: FC<FiatValueInfo> = ({ value, hasUsedCoinGecko, unknownTickers, loading }) => { | ||
| const { t } = useTranslation() | ||
| return ( | ||
| <FiatMoneyAmountBox> | ||
| <span> | ||
| {t('common.fiatValueInUSD', { | ||
| value, | ||
| formatParams: { | ||
| value: { | ||
| currency: 'USD', // TODO: why are we fixated on USD? | ||
| } satisfies Intl.NumberFormatOptions, | ||
| }, | ||
| })} | ||
| {!!unknownTickers.length && ( | ||
| <Tooltip | ||
| title={t('account.failedToLookUpTickers', { tickers: unknownTickers.join(', ') })} | ||
| placement="top" | ||
| > | ||
| <WarningIcon /> | ||
| </Tooltip> | ||
| )} | ||
| {loading && <Skeleton variant="rectangular" sx={{ height: 200 }} />} | ||
| </span> | ||
| {hasUsedCoinGecko && <CoinGeckoReferral />} | ||
| </FiatMoneyAmountBox> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { FC } from 'react' | ||
| import { RuntimeSdkBalance } from '../../../oasis-nexus/api' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat' | ||
|
|
||
| export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefined }> = ({ | ||
| balances = [], | ||
| }) => { | ||
| const { t } = useTranslation() | ||
| if (balances.length === 0 || balances[0].balance === undefined) { | ||
| return t('common.missing') | ||
| } | ||
| return ( | ||
| <> | ||
| {balances.map(balance => ( | ||
| <span key={balance.token_symbol}> | ||
| {t('common.valueInToken', { | ||
| ...getPreciseNumberFormat(balance.balance), | ||
| ticker: balance.token_symbol, | ||
| })} | ||
| </span> | ||
| ))} | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import { RuntimeSdkBalance } from '../../../oasis-nexus/api' | ||
| import { AllTokenPrices } from '../../../coin-gecko/api' | ||
| import BigNumber from 'bignumber.js' | ||
| import { Ticker } from '../../../types/ticker' | ||
|
|
||
| export const hasRuntimeBalance = (balances: RuntimeSdkBalance[] = []) => | ||
| balances.some(balance => balance.token_decimals) | ||
|
|
||
| export type FiatValueInfo = { | ||
| /** | ||
| * Do we have any known real value? | ||
| */ | ||
| hasValue: boolean | ||
|
|
||
| /** | ||
| * The fiat value, to the best of our information | ||
| */ | ||
| value?: string | ||
|
|
||
| /** | ||
| * Have we used CoinGecko for calculating this value? | ||
| */ | ||
| hasUsedCoinGecko: boolean | ||
|
|
||
| /** | ||
| * Is the value of one of the tokens still being loaded? | ||
| */ | ||
| loading: boolean | ||
|
|
||
| /** | ||
| * Any tokens for which we don't know the value? | ||
| */ | ||
| unknownTickers: Ticker[] | ||
| } | ||
|
|
||
| export const calculateFiatValue = ( | ||
| balances: RuntimeSdkBalance[] = [], | ||
| tokenPrices: AllTokenPrices, | ||
| ): FiatValueInfo => { | ||
| let hasValue = false | ||
| let value = new BigNumber(0) | ||
| let hasUsedCoinGecko = false | ||
| let loading = false | ||
| const unknown: Ticker[] = [] | ||
|
|
||
| balances.forEach(balance => { | ||
| const priceInfo = tokenPrices[balance.token_symbol as Ticker] | ||
| if (priceInfo) { | ||
| if (priceInfo.isLoading) { | ||
| loading = true | ||
| } else { | ||
| hasUsedCoinGecko = hasUsedCoinGecko || priceInfo.hasUsedCoinGecko | ||
| if (!priceInfo.isFree) { | ||
| const tokenFiatValue = priceInfo.price | ||
| hasValue = true | ||
| if (tokenFiatValue === undefined) { | ||
| unknown.push(balance.token_symbol as Ticker) | ||
| } else { | ||
| value = value.plus(new BigNumber(balance.balance).multipliedBy(tokenFiatValue)) | ||
| } | ||
| } | ||
| } | ||
| } else { | ||
| unknown.push(balance.token_symbol as Ticker) | ||
| hasValue = true | ||
| } | ||
| }) | ||
|
|
||
| return { | ||
| hasValue, | ||
| hasUsedCoinGecko, | ||
| loading, | ||
| unknownTickers: unknown, | ||
| value: value.toFixed(), | ||
| } | ||
| } |
2 changes: 1 addition & 1 deletion
2
src/app/components/logo/SmallLogo.tsx → src/app/components/logo/SmallOasisLogo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| import { FC } from 'react' | ||
| import logo from '../../../../public/logo512.png' | ||
|
|
||
| export const SmallLogo: FC<{ size?: number }> = ({ size = 25 }) => ( | ||
| export const SmallOasisLogo: FC<{ size?: number }> = ({ size = 25 }) => ( | ||
| <img src={logo} height={size} width={size} alt="" /> | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { FC } from 'react' | ||
| import { Ticker } from '../../../types/ticker' | ||
| import { SmallOasisLogo } from './SmallOasisLogo' | ||
| import euroELogo from '../../../../public/euroe.png' | ||
|
|
||
| export const SmallTokenLogo: FC<{ ticker: Ticker }> = ({ ticker }) => { | ||
| switch (ticker) { | ||
| case 'ROSE': | ||
| return <SmallOasisLogo /> | ||
| case 'EUROe': | ||
| return <img src={euroELogo} width={25} alt={ticker} /> | ||
| default: | ||
| return null | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.