feat: improve formatting of NFT prices with shared module (#5245)

* wip: change formatting of nft

chore: use a different package

use pure webpack instead

* revert changes to yarn.lock

* chore: update lock one more time

* chore: upgrade conedison

* chore: tweaks

* chore: handle 0

* chore: update to latest and use proper method

* chore: update conditional
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

craco.config.cjs

@@ -21,6 +21,16 @@ module.exports = {
         (plugin) => plugin instanceof MiniCssExtractPlugin
       )
       if (instanceOfMiniCssExtractPlugin !== undefined) instanceOfMiniCssExtractPlugin.options.ignoreOrder = true
+
+      // We're currently on Webpack 4.x that doesn't support the `exports` field in package.json.
+      // See https://github.com/webpack/webpack/issues/9509.
+      //
+      // In case you need to add more modules, make sure to remap them to the correct path.
+      //
+      // Map @uniswap/conedison to its dist folder.
+      // This is required because conedison uses * to redirect all imports to its dist.
+      webpackConfig.resolve.alias['@uniswap/conedison'] = '@uniswap/conedison/dist'
+
       return webpackConfig
     },
   },

package.json

@@ -133,6 +133,7 @@
     "@types/react-relay": "^13.0.2",
     "@uniswap/analytics": "1.1.1",
     "@uniswap/analytics-events": "1.1.0",
+    "@uniswap/conedison": "^1.1.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",

src/nft/components/explore/CarouselCard.tsx

+import { formatNumberOrString, NumberType } from '@uniswap/conedison/format'
 import { loadingAnimation } from 'components/Loader/styled'
 import { LoadingBubble } from 'components/Tokens/loading'
 import { useCollectionQuery } from 'graphql/data/nft/Collection'
@@ -164,15 +165,18 @@ const TableElement = styled.div`
 
 interface MarketplaceRowProps {
   marketplace: string
-  floorInEth?: string
-  listings?: string
+  floorInEth?: number
+  listings?: number
 }
 
 export const MarketplaceRow = ({ marketplace, floorInEth, listings }: MarketplaceRowProps) => {
   return (
     <>
       <TableElement>{marketplace}</TableElement>
-      <TableElement>{floorInEth ?? '-'} ETH</TableElement>
+      <TableElement>
+        {floorInEth !== undefined ? formatNumberOrString(floorInEth, NumberType.NFTTokenFloorPriceTrailingZeros) : '-'}{' '}
+        ETH
+      </TableElement>
       <TableElement>{listings ?? '-'}</TableElement>
     </>
   )
@@ -212,8 +216,8 @@ export const CarouselCard = ({ collection, onClick }: CarouselCardProps) => {
               <MarketplaceRow
                 key={`CarouselCard-key-${collection.address}-${marketplace.marketplace}`}
                 marketplace={MARKETS_ENUM_TO_NAME[market]}
-                listings={marketplace.count.toString()}
-                floorInEth={marketplace.floorPrice.toString()}
+                listings={marketplace.count}
+                floorInEth={marketplace.floorPrice}
               />
             )
           })}

yarn.lock

@@ -4136,6 +4136,11 @@
     react "^18.2.0"
     react-dom "^18.2.0"
 
+"@uniswap/conedison@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@uniswap/conedison/-/conedison-1.1.0.tgz#462a1e7dcfc70a653e765c145655faa207fd53f7"
+  integrity sha512-mHnYkvy+xKfWDzWsqzgWKFl/V8C/KmSrj/2PCgT1R2ASxPzMCU/wzTW29HtIxf1cJ+A6sPwH2HqDZsbnNhKqNQ==
+
 "@uniswap/default-token-list@^2.0.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@uniswap/default-token-list/-/default-token-list-2.2.0.tgz#d85a5c2520f57f4920bd989dfc9f01e1b701a567"