From 4b4a926f891dd1672bdd9ebdcdf5fba02430d636 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 9 Nov 2022 14:14:57 +0000 Subject: [PATCH] special veOCEAN number treatment (#1782) * special veOCEAN number treatment * path fix * fix duplicate AllLocked declarations * so many duplicate declarations * bold numbers on asset teasers * update test * unify number formatting in more generic `formatNumber()` method --- src/@utils/numbers.ts | 15 ++++++++ src/@utils/veAllocation.ts | 35 ++++++++++--------- .../@shared/AssetTeaser/index.module.css | 2 +- src/components/@shared/AssetTeaser/index.tsx | 34 ++++++++++++------ src/components/@shared/Price/PriceUnit.tsx | 17 +++------ .../Asset/AssetActions/AssetStats/index.tsx | 6 ++-- src/components/Footer/MarketStats/index.tsx | 15 ++++++-- src/components/Home/MostViews/index.test.tsx | 2 +- 8 files changed, 80 insertions(+), 46 deletions(-) diff --git a/src/@utils/numbers.ts b/src/@utils/numbers.ts index e7b4a4327..aa82804b5 100644 --- a/src/@utils/numbers.ts +++ b/src/@utils/numbers.ts @@ -1,5 +1,20 @@ +import { formatCurrency } from '@coingecko/cryptoformat' import { Decimal } from 'decimal.js' +export function formatNumber( + price: number, + locale: string, + decimals?: string +): string { + return formatCurrency(price, '', locale, false, { + // Not exactly clear what `significant figures` are for this library, + // but setting this seems to give us the formatting we want. + // See https://github.com/oceanprotocol/market/issues/70 + significantFigures: 4, + ...(decimals && { decimalPlaces: Number(decimals) }) + }) +} + // Run decimal.js comparison // http://mikemcl.github.io/decimal.js/#cmp export function compareAsBN(balance: string, price: string): boolean { diff --git a/src/@utils/veAllocation.ts b/src/@utils/veAllocation.ts index bba0ea067..98ab7fc66 100644 --- a/src/@utils/veAllocation.ts +++ b/src/@utils/veAllocation.ts @@ -1,7 +1,7 @@ -import { AllLocked } from 'src/@types/subgraph/AllLocked' -import { OwnAllocations } from 'src/@types/subgraph/OwnAllocations' -import { NftOwnAllocation } from 'src/@types/subgraph/NftOwnAllocation' -import { OceanLocked } from 'src/@types/subgraph/OceanLocked' +import { AllLockedQuery } from 'src/@types/subgraph/AllLockedQuery' +import { OwnAllocationsQuery } from 'src/@types/subgraph/OwnAllocationsQuery' +import { NftOwnAllocationQuery } from 'src/@types/subgraph/NftOwnAllocationQuery' +import { OceanLockedQuery } from 'src/@types/subgraph/OceanLockedQuery' import { gql, OperationResult } from 'urql' import { fetchData, getQueryContext } from './subgraph' import axios from 'axios' @@ -12,11 +12,11 @@ import { NetworkType } from '@hooks/useNetworkMetadata' import { getAssetsFromNftList } from './aquarius' -import { chainIdsSupported } from 'app.config' +import { chainIdsSupported } from '../../app.config' import { Asset } from '@oceanprotocol/lib' const AllLocked = gql` - query AllLocked { + query AllLockedQuery { veOCEANs(first: 1000) { lockedAmount } @@ -24,7 +24,7 @@ const AllLocked = gql` ` const OwnAllocations = gql` - query OwnAllocations($address: String) { + query OwnAllocationsQuery($address: String) { veAllocations(where: { allocationUser: $address }) { id nftAddress @@ -33,7 +33,7 @@ const OwnAllocations = gql` } ` const NftOwnAllocation = gql` - query NftOwnAllocation($address: String, $nftAddress: String) { + query NftOwnAllocationQuery($address: String, $nftAddress: String) { veAllocations( where: { allocationUser: $address, nftAddress: $nftAddress } ) { @@ -42,7 +42,7 @@ const NftOwnAllocation = gql` } ` const OceanLocked = gql` - query OceanLocked($address: ID!) { + query OceanLockedQuery($address: ID!) { veOCEAN(id: $address) { id lockedAmount @@ -87,7 +87,7 @@ export async function getNftOwnAllocation( ): Promise { const veNetworkId = getVeChainNetworkId(networkId) const queryContext = getQueryContext(veNetworkId) - const fetchedAllocation: OperationResult = + const fetchedAllocation: OperationResult = await fetchData( NftOwnAllocation, { @@ -115,7 +115,7 @@ export async function getTotalAllocatedAndLocked(): Promise { 0 ) - const fetchedLocked: OperationResult = await fetchData( + const fetchedLocked: OperationResult = await fetchData( AllLocked, null, queryContext @@ -136,11 +136,12 @@ export async function getLocked( const veNetworkIds = getVeChainNetworkIds(networkIds) for (let i = 0; i < veNetworkIds.length; i++) { const queryContext = getQueryContext(veNetworkIds[i]) - const fetchedLocked: OperationResult = await fetchData( - OceanLocked, - { address: userAddress.toLowerCase() }, - queryContext - ) + const fetchedLocked: OperationResult = + await fetchData( + OceanLocked, + { address: userAddress.toLowerCase() }, + queryContext + ) fetchedLocked.data?.veOCEAN?.lockedAmount && (total += Number(fetchedLocked.data?.veOCEAN?.lockedAmount)) @@ -157,7 +158,7 @@ export async function getOwnAllocations( const veNetworkIds = getVeChainNetworkIds(networkIds) for (let i = 0; i < veNetworkIds.length; i++) { const queryContext = getQueryContext(veNetworkIds[i]) - const fetchedAllocations: OperationResult = + const fetchedAllocations: OperationResult = await fetchData( OwnAllocations, { address: userAddress.toLowerCase() }, diff --git a/src/components/@shared/AssetTeaser/index.module.css b/src/components/@shared/AssetTeaser/index.module.css index c88f6f700..336f4f780 100644 --- a/src/components/@shared/AssetTeaser/index.module.css +++ b/src/components/@shared/AssetTeaser/index.module.css @@ -48,7 +48,7 @@ } .footer { - margin-top: calc(var(--spacer) / 12); + margin-top: calc(var(--spacer) / 24); } .typeLabel { diff --git a/src/components/@shared/AssetTeaser/index.tsx b/src/components/@shared/AssetTeaser/index.tsx index 1b8b0d5ee..f91b2c302 100644 --- a/src/components/@shared/AssetTeaser/index.tsx +++ b/src/components/@shared/AssetTeaser/index.tsx @@ -8,8 +8,8 @@ import AssetType from '@shared/AssetType' import NetworkName from '@shared/NetworkName' import styles from './index.module.css' import { getServiceByName } from '@utils/ddo' -import { formatPrice } from '@shared/Price/PriceUnit' import { useUserPreferences } from '@context/UserPreferences' +import { formatNumber } from '@utils/numbers' export declare type AssetTeaserProps = { asset: AssetExtended @@ -77,23 +77,37 @@ export default function AssetTeaser({
{allocated && allocated > 0 ? ( - {allocated < 0 - ? '' - : `${formatPrice(allocated, locale)} veOCEAN`} + {allocated < 0 ? ( + '' + ) : ( + <> + {formatNumber(allocated, locale, '0')}{' '} + veOCEAN + + )} ) : null} {orders && orders > 0 ? ( - {orders < 0 - ? 'N/A' - : `${orders} ${orders === 1 ? 'sale' : 'sales'}`} + {orders < 0 ? ( + 'N/A' + ) : ( + <> + {orders} {orders === 1 ? 'sale' : 'sales'} + + )} ) : null} {asset.views && asset.views > 0 ? ( - {asset.views < 0 - ? 'N/A' - : `${asset.views} ${asset.views === 1 ? 'view' : 'views'}`} + {asset.views < 0 ? ( + 'N/A' + ) : ( + <> + {asset.views}{' '} + {asset.views === 1 ? 'view' : 'views'} + + )} ) : null}
diff --git a/src/components/@shared/Price/PriceUnit.tsx b/src/components/@shared/Price/PriceUnit.tsx index 12a1ea7e4..1ddd742a0 100644 --- a/src/components/@shared/Price/PriceUnit.tsx +++ b/src/components/@shared/Price/PriceUnit.tsx @@ -1,17 +1,8 @@ import React, { ReactElement } from 'react' -import { formatCurrency } from '@coingecko/cryptoformat' import Conversion from './Conversion' import styles from './PriceUnit.module.css' import { useUserPreferences } from '@context/UserPreferences' - -export function formatPrice(price: number, locale: string): string { - return formatCurrency(price, '', locale, false, { - // Not exactly clear what `significant figures` are for this library, - // but setting this seems to give us the formatting we want. - // See https://github.com/oceanprotocol/market/issues/70 - significantFigures: 4 - }) -} +import { formatNumber } from '@utils/numbers' export default function PriceUnit({ price, @@ -19,7 +10,8 @@ export default function PriceUnit({ size = 'small', conversion, symbol, - type + type, + decimals }: { price: number type?: string @@ -27,6 +19,7 @@ export default function PriceUnit({ size?: 'small' | 'mini' | 'large' conversion?: boolean symbol?: string + decimals?: string }): ReactElement { const { locale } = useUserPreferences() @@ -37,7 +30,7 @@ export default function PriceUnit({ ) : ( <>
- {Number.isNaN(price) ? '-' : formatPrice(price, locale)}{' '} + {Number.isNaN(price) ? '-' : formatNumber(price, locale, decimals)}{' '} {symbol}
{conversion && } diff --git a/src/components/Asset/AssetActions/AssetStats/index.tsx b/src/components/Asset/AssetActions/AssetStats/index.tsx index a32dc2d38..4d02d0352 100644 --- a/src/components/Asset/AssetActions/AssetStats/index.tsx +++ b/src/components/Asset/AssetActions/AssetStats/index.tsx @@ -2,7 +2,7 @@ import { useAsset } from '@context/Asset' import { useUserPreferences } from '@context/UserPreferences' import { useWeb3 } from '@context/Web3' import Tooltip from '@shared/atoms/Tooltip' -import { formatPrice } from '@shared/Price/PriceUnit' +import { formatNumber } from '@utils/numbers' import { getNftOwnAllocation } from '@utils/veAllocation' import React, { useEffect, useState } from 'react' import styles from './index.module.css' @@ -33,8 +33,8 @@ export default function AssetStats() { {asset?.stats?.allocated && asset?.stats?.allocated > 0 ? ( - {formatPrice(asset.stats.allocated, locale)} - + {formatNumber(asset.stats.allocated, locale, '0')} + {' '} veOCEAN ) : null} diff --git a/src/components/Footer/MarketStats/index.tsx b/src/components/Footer/MarketStats/index.tsx index 19f4ab32d..99caa2923 100644 --- a/src/components/Footer/MarketStats/index.tsx +++ b/src/components/Footer/MarketStats/index.tsx @@ -124,8 +124,19 @@ export default function MarketStats(): ReactElement { />
- locked.{' '} - {' '} + {' '} + locked.{' '} + {' '} allocated.
diff --git a/src/components/Home/MostViews/index.test.tsx b/src/components/Home/MostViews/index.test.tsx index 8c61a3787..dbdb91cb8 100644 --- a/src/components/Home/MostViews/index.test.tsx +++ b/src/components/Home/MostViews/index.test.tsx @@ -32,7 +32,7 @@ describe('components/Home/MostViews', () => { ) queryMetadataMock.mockResolvedValue(queryMetadataBaseReturn) render() - await screen.findByText('666 views') + await screen.findByText('666') }) it('catches errors', async () => {