From cb362f1b2cef3c88ec96a370505b988eccba1cd3 Mon Sep 17 00:00:00 2001
From: Charles Bachmeier <charles@bachmeier.io>
Date: Fri, 9 Jun 2023 09:10:40 -0700
Subject: [PATCH] fix: Handle scientific notation for NFT Details pricing
 (#6707)

* fix: Handle scientific notation for NFT Details pricing

* add test case

---------

Co-authored-by: Charles Bachmeier <charlie@genie.xyz>
---
 src/graphql/data/nft/Details.test.ts | 38 ++++++++++++++++++++++++++++
 src/graphql/data/nft/Details.ts      |  3 ++-
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 src/graphql/data/nft/Details.test.ts

diff --git a/src/graphql/data/nft/Details.test.ts b/src/graphql/data/nft/Details.test.ts
new file mode 100644
index 0000000000..c8f42070a7
--- /dev/null
+++ b/src/graphql/data/nft/Details.test.ts
@@ -0,0 +1,38 @@
+import { renderHook } from 'test-utils/render'
+
+import { useNftAssetDetails } from './Details'
+
+describe('useNftAssetDetails', () => {
+  it('should handle listing.price.value of 1e-18 without crashing', () => {
+    // Mock the useDetailsQuery hook
+    const mockUseDetailsQuery = jest.fn(() => ({
+      data: {
+        nftAssets: {
+          edges: [
+            {
+              node: {
+                listings: {
+                  edges: [
+                    {
+                      node: {
+                        price: {
+                          value: 1e-18,
+                        },
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+      },
+      loading: false,
+    }))
+    jest.mock('../__generated__/types-and-hooks', () => ({
+      useDetailsQuery: mockUseDetailsQuery,
+    }))
+    const { result } = renderHook(() => useNftAssetDetails('address', 'tokenId'))
+    expect(result.current.data[0].priceInfo.ETHPrice).toBe('0')
+  })
+})
diff --git a/src/graphql/data/nft/Details.ts b/src/graphql/data/nft/Details.ts
index f34e8c198b..334f4a2f0e 100644
--- a/src/graphql/data/nft/Details.ts
+++ b/src/graphql/data/nft/Details.ts
@@ -1,6 +1,7 @@
 import { parseEther } from '@ethersproject/units'
 import gql from 'graphql-tag'
 import { CollectionInfoForAsset, GenieAsset, Markets, SellOrder } from 'nft/types'
+import { wrapScientificNotation } from 'nft/utils'
 import { useMemo } from 'react'
 
 import { NftAsset, useDetailsQuery } from '../__generated__/types-and-hooks'
@@ -105,7 +106,7 @@ export function useNftAssetDetails(
   const asset = queryData?.nftAssets?.edges[0]?.node as NonNullable<NftAsset> | undefined
   const collection = asset?.collection
   const listing = asset?.listings?.edges[0]?.node
-  const ethPrice = parseEther(listing?.price?.value?.toString() ?? '0').toString()
+  const ethPrice = parseEther(wrapScientificNotation(listing?.price?.value?.toString() ?? '0')).toString()
 
   return useMemo(
     () => ({