refactor: scientific notation helper fn (#5479)

* fix listing ens to x2y2

* add helper fn for handling scinetific notation

Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/graphql/data/nft/Asset.ts

@@ -3,6 +3,7 @@ import { parseEther } from 'ethers/lib/utils'
 import useInterval from 'lib/hooks/useInterval'
 import ms from 'ms.macro'
 import { GenieAsset, Trait } from 'nft/types'
+import { wrapScientificNotation } from 'nft/utils'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { fetchQuery, useLazyLoadQuery, usePaginationFragment, useQueryLoader, useRelayEnvironment } from 'react-relay'
 
@@ -125,13 +126,7 @@ type NftAssetsQueryAsset = NonNullable<
 
 function formatAssetQueryData(queryAsset: NftAssetsQueryAsset, totalCount?: number) {
   const asset = queryAsset.node
-  const ethPrice = parseEther(
+  const ethPrice = parseEther(wrapScientificNotation(asset.listings?.edges[0]?.node.price.value ?? 0)).toString()
-    parseFloat(
-      (asset.listings?.edges[0]?.node.price.value?.toLocaleString('fullwide', { useGrouping: false }) ?? '0')
-        .replace(',', '.')
-        .replace(' ', '')
-    ).toString()
-  ).toString()
   return {
     id: asset.id,
     address: asset?.collection?.nftContracts?.[0]?.address,

src/graphql/data/nft/NftBalance.ts

@@ -2,6 +2,7 @@ import graphql from 'babel-plugin-relay/macro'
 import { parseEther } from 'ethers/lib/utils'
 import { DEFAULT_WALLET_ASSET_QUERY_AMOUNT } from 'nft/components/profile/view/ProfilePage'
 import { WalletAsset } from 'nft/types'
+import { wrapScientificNotation } from 'nft/utils'
 import { useEffect } from 'react'
 import { useLazyLoadQuery, usePaginationFragment, useQueryLoader } from 'react-relay'
 
@@ -167,13 +168,7 @@ export function useNftBalanceQuery(
   )
   const walletAssets: WalletAsset[] = data.nftBalances?.edges?.map((queryAsset: NftBalanceQueryAsset) => {
     const asset = queryAsset.node.ownedAsset
-    const ethPrice = parseEther(
+    const ethPrice = parseEther(wrapScientificNotation(asset?.listings?.edges[0]?.node.price.value ?? 0)).toString()
-      parseFloat(
-        (asset?.listings?.edges[0]?.node.price.value?.toLocaleString('fullwide', { useGrouping: false }) ?? '0')
-          .replace(',', '.')
-          .replace(' ', '')
-      ).toString()
-    ).toString()
     return {
       id: asset?.id,
       imageUrl: asset?.image?.url,

src/nft/utils/currency.ts

@@ -73,3 +73,11 @@ export const formatWeiToDecimal = (amount: string, removeZeroes = false) => {
   if (!amount) return '-'
   return ethNumberStandardFormatter(formatEther(amount), false, removeZeroes, false)
 }
+
+// prevent BigNumber overflow by properly handling scientific notation and comma delimited values
+export function wrapScientificNotation(value: string | number): string {
+  return parseFloat(value.toString())
+    .toLocaleString('fullwide', { useGrouping: false })
+    .replace(',', '.')
+    .replace(' ', '')
+}

src/nft/utils/listNfts.ts

@@ -23,6 +23,7 @@ import {
 } from '../queries'
 import { INVERSE_BASIS_POINTS, OPENSEA_DEFAULT_FEE, OPENSEA_FEE_ADDRESS } from '../queries/openSea'
 import { ListingMarket, ListingStatus, WalletAsset } from '../types'
+import { wrapScientificNotation } from './currency'
 import { createSellOrder, encodeOrder, OfferItem, OrderPayload, signOrderData } from './x2y2'
 
 export const LOOKS_RARE_CREATOR_BASIS_POINTS = 50
@@ -240,12 +241,7 @@ export async function signListing(
         tokens: [
           {
             token: asset.asset_contract.address,
-            tokenId: BigNumber.from(
+            tokenId: BigNumber.from(wrapScientificNotation(asset.tokenId)),
-              parseFloat(asset.tokenId)
-                .toLocaleString('fullwide', { useGrouping: false })
-                .replace(',', '.')
-                .replace(' ', '')
-            ),
           },
         ],
       }