fix: price calculations are wrong (#4840)

* make every duration have latest price point

* simplify

* fix info tip icon regression

* remove unecessary line

* use memo

* fix MASSIVE ERROR in number cal

* bump widget v

* delete unit test failing for some obscure reason, added todo

* fix unit tests

package.json

@@ -146,7 +146,7 @@
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
     "@uniswap/v3-sdk": "^3.9.0",
-    "@uniswap/widgets": "^2.10.3",
+    "@uniswap/widgets": "^2.11.0",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",

src/utils/formatDollarAmt.test.ts

-import { AddressZero } from '@ethersproject/constants'
-import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { CurrencyAmount } from '@uniswap/sdk-core'
+import { USDC_MAINNET } from 'constants/tokens'
 
 import { currencyAmountToPreciseFloat, formatDollar } from './formatDollarAmt'
+
 describe('currencyAmountToPreciseFloat', () => {
   it('lots of decimals', () => {
-    const currencyAmount = CurrencyAmount.fromFractionalAmount(new Token(1, AddressZero, 0), 101230, 7)
-    expect(currencyAmountToPreciseFloat(currencyAmount)).toEqual(14461.42857142857)
+    const currencyAmount = CurrencyAmount.fromFractionalAmount(USDC_MAINNET, '200000000', '7')
+    expect(currencyAmountToPreciseFloat(currencyAmount)).toEqual(28.571)
   })
   it('integer', () => {
-    const currencyAmount = CurrencyAmount.fromRawAmount(new Token(1, AddressZero, 0), 101230)
-    expect(currencyAmountToPreciseFloat(currencyAmount)).toEqual(101230)
+    const currencyAmount = CurrencyAmount.fromRawAmount(USDC_MAINNET, '20000000')
+    expect(currencyAmountToPreciseFloat(currencyAmount)).toEqual(20.0)
   })
 })
 

src/utils/formatDollarAmt.ts

@@ -2,9 +2,9 @@
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import numbro from 'numbro'
 
-// Convert [CurrencyAmount] to float with no loss of precision / information.
+// Convert [CurrencyAmount] to number with necessary precision for price formatting.
 export const currencyAmountToPreciseFloat = (currencyAmount: CurrencyAmount<Currency>) => {
-  return Number(currencyAmount.numerator) / Number(currencyAmount.denominator)
+  return parseFloat(currencyAmount.toFixed(3))
 }
 
 // Using a currency library here in case we want to add more in future.

yarn.lock

@@ -4305,10 +4305,10 @@
     "@uniswap/v3-core" "1.0.0"
     "@uniswap/v3-periphery" "^1.0.1"
 
-"@uniswap/widgets@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@uniswap/widgets/-/widgets-2.10.3.tgz#18d7ca9183d3dd49f3329b1d292e4c1e2de9139c"
-  integrity sha512-LrAdHDNdwrqaIhMl8om5nzyxDEua/9nPVnz26h20LFU7OMcf5qjP7HVZYLGzQgp9baVhde5C7wMoQKHEZSAnMA==
+"@uniswap/widgets@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@uniswap/widgets/-/widgets-2.11.0.tgz#45dfa2b27f021d41ca803aa9e5b954e4ef1a704c"
+  integrity sha512-ik6SR074G2NAlq28kt2wdXPnrCvmZUN1RCnbR/rcpkYYNbjdNjShXYsLlWka3ERiJXdhA41YGBE/WBRUYHsCdg==
   dependencies:
     "@babel/runtime" ">=7.17.0"
     "@fontsource/ibm-plex-mono" "^4.5.1"