diff --git a/src/resources/trendingTokens/trendingTokens.ts b/src/resources/trendingTokens/trendingTokens.ts index e51ff7084e4..5b65ee9df38 100644 --- a/src/resources/trendingTokens/trendingTokens.ts +++ b/src/resources/trendingTokens/trendingTokens.ts @@ -33,6 +33,8 @@ export type TrendingToken = { primary: string; }; icon_url: string; + transferable: boolean; + creationDate: string | null; }; // /////////////////////////////////////////////// @@ -99,6 +101,8 @@ async function fetchTrendingTokens({ colors: { primary: colors.primary, }, + transferable: token.transferable, + creationDate: token.creationDate ?? null, }); } diff --git a/src/screens/expandedAssetSheet/components/sections/marketSection/AssetInfoList.tsx b/src/screens/expandedAssetSheet/components/sections/marketSection/AssetInfoList.tsx index 8ac33e61a23..37790628abc 100644 --- a/src/screens/expandedAssetSheet/components/sections/marketSection/AssetInfoList.tsx +++ b/src/screens/expandedAssetSheet/components/sections/marketSection/AssetInfoList.tsx @@ -2,13 +2,14 @@ import React, { useMemo } from 'react'; import { Bleed, AnimatedText, Box, Stack, Text, TextIcon, TextShadow } from '@/design-system'; import { bigNumberFormat } from '@/helpers/bigNumberFormat'; import { Row } from '../../shared/Row'; -import { abbreviateNumber, greaterThanOrEqualTo } from '@/helpers/utilities'; +import { abbreviateNumber } from '@/helpers/utilities'; import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from 'react-native-reanimated'; import { GestureHandlerButton } from '@/__swaps__/screens/Swap/components/GestureHandlerButton'; import { useExpandedAssetSheetContext } from '@/screens/expandedAssetSheet/context/ExpandedAssetSheetContext'; import { SPRING_CONFIGS } from '@/components/animations/animationConfigs'; +import { formatDate } from '@/utils/formatDate'; -const DEFAULT_VISIBLE_ITEM_COUNT = 2; +const DEFAULT_VISIBLE_ITEM_COUNT = 3; function AssetInfoItem({ title, value, icon, highlighted }: { title: string; value: string; icon: string; highlighted: boolean }) { return ( @@ -31,7 +32,7 @@ function AssetInfoItem({ title, value, icon, highlighted }: { title: string; val } export function AssetInfoList() { - const { accentColors, assetMetadata: metadata } = useExpandedAssetSheetContext(); + const { accentColors, assetMetadata: metadata, basicAsset: asset } = useExpandedAssetSheetContext(); const isExpanded = useSharedValue(false); const expandedText = useDerivedValue(() => { @@ -58,21 +59,28 @@ export function AssetInfoList() { if (metadata.marketCap) { items.push({ title: 'Market Cap', - value: bigNumberFormat(metadata.marketCap, 'USD', greaterThanOrEqualTo(metadata.marketCap, 1000000000)), + value: bigNumberFormat(metadata.marketCap, 'USD', true), icon: '􁎢', }); } if (metadata.volume1d) { items.push({ title: '24h Volume', - value: bigNumberFormat(metadata.volume1d, 'USD', greaterThanOrEqualTo(metadata.volume1d, 1000000000)), + value: bigNumberFormat(metadata.volume1d, 'USD', true), icon: '􀣉', }); } + if (asset.creationDate) { + items.push({ + title: 'Created', + value: formatDate(asset.creationDate, 'minutes'), + icon: '􁖩', + }); + } if (metadata.fullyDilutedValuation) { items.push({ title: 'Fully Diluted Valuation', - value: bigNumberFormat(metadata.fullyDilutedValuation, 'USD', greaterThanOrEqualTo(metadata.fullyDilutedValuation, 10000)), + value: bigNumberFormat(metadata.fullyDilutedValuation, 'USD', true), icon: '􀠏', }); } diff --git a/src/screens/expandedAssetSheet/context/ExpandedAssetSheetContext.tsx b/src/screens/expandedAssetSheet/context/ExpandedAssetSheetContext.tsx index ecbc2eabfa7..34983d4a79c 100644 --- a/src/screens/expandedAssetSheet/context/ExpandedAssetSheetContext.tsx +++ b/src/screens/expandedAssetSheet/context/ExpandedAssetSheetContext.tsx @@ -62,6 +62,7 @@ type BasicAsset = { relative_change_24h: number | undefined; value: number | undefined; }; + creationDate: string | null; }; function isTrendingToken(token: ParsedAddressAsset | TrendingToken): token is TrendingToken { @@ -84,6 +85,7 @@ function normalizeTrendingToken(token: TrendingToken): BasicAsset { relative_change_24h: token.priceChange.day, value: token.price, }, + creationDate: token.creationDate, }; } @@ -103,6 +105,7 @@ function normalizeParsedAddressAsset(token: ParsedAddressAsset): BasicAsset { relative_change_24h: token.price?.relative_change_24h, value: token.price?.value, }, + creationDate: null, }; } @@ -139,6 +142,8 @@ export function ExpandedAssetSheetContextProvider({ asset, address, chainId, chi const accountAsset = useAccountAsset(assetUniqueId, nativeCurrency); const isOwnedAsset = !!accountAsset; + console.log('param asset', asset); + const basicAsset = useMemo(() => { if (isTrendingToken(asset)) return normalizeTrendingToken(asset); return normalizeParsedAddressAsset(asset); diff --git a/src/utils/formatDate.ts b/src/utils/formatDate.ts index 8bb40dc1897..074d0cb08da 100644 --- a/src/utils/formatDate.ts +++ b/src/utils/formatDate.ts @@ -1,15 +1,31 @@ import * as i18n from '@/languages'; -export const formatDate = (dateString: string) => { +export const formatDate = (dateString: string, precision: 'hours' | 'minutes' | 'days' = 'days') => { const date = new Date(dateString); const now = new Date(); const diffTime = Math.abs(now.getTime() - date.getTime()); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); const diffWeeks = Math.floor(diffDays / 7); const diffMonths = Math.floor(diffDays / 30.44); + const diffHours = Math.floor(diffTime / (1000 * 60 * 60)); + const diffMinutes = Math.floor(diffTime / (1000 * 60)); + const useHours = precision === 'hours' || precision === 'minutes'; + const useMinutes = precision === 'minutes'; - if (diffDays === 0) { - return i18n.t(i18n.l.walletconnect.simulation.formatted_dates.today); + if (diffDays <= 1) { + if (useHours) { + if (diffHours === 0) { + if (useMinutes) { + return `${diffMinutes} ${i18n.t(i18n.l.walletconnect.simulation.formatted_dates.minutes_ago)}`; + } else { + return `${diffHours} ${i18n.t(i18n.l.walletconnect.simulation.formatted_dates.hours_ago)}`; + } + } else { + return `${diffHours} ${i18n.t(i18n.l.walletconnect.simulation.formatted_dates.hours_ago)}`; + } + } else { + return i18n.t(i18n.l.walletconnect.simulation.formatted_dates.today); + } } else if (diffDays === 1) { return `${diffDays} ${i18n.t(i18n.l.walletconnect.simulation.formatted_dates.day_ago)}`; } else if (diffDays < 7) {