add created at list item for trending tokens

rainbow-me · Jan 16, 2025 · 511cc97 · 511cc97
1 parent 3888345
commit 511cc97
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) {