refactor VaultManageViewComponent to use HistoricalYieldChart; update…

… useAmount hook for better amount display handling

apps/earn-protocol/components/layout/VaultManageView/VaultManageViewComponent.tsx

@@ -26,7 +26,7 @@ import { capitalize } from 'lodash-es'
 
 import { vaultExposureRawData } from '@/components/layout/VaultOpenView/mocks'
 import { TransactionHashPill } from '@/components/molecules/TransactionHashPill/TransactionHashPill'
-import { MockedLineChart } from '@/components/organisms/Charts/MockedLineChart'
+import { HistoricalYieldChart } from '@/components/organisms/Charts/HistoricalYieldChart'
 import { RebalancingActivity } from '@/components/organisms/RebalancingActivity/RebalancingActivity'
 import { UserActivity } from '@/components/organisms/UserActivity/UserActivity'
 import { VaultExposure } from '@/components/organisms/VaultExposure/VaultExposure'
@@ -56,15 +56,8 @@ export const VaultManageViewComponent = ({
   const { publicClient, transactionClient, tokenBalance, tokenBalanceLoading } = useClient({
     vault,
   })
-  const {
-    amountParsed,
-    amountDisplay,
-    amountRaw,
-    manualSetAmount,
-    handleAmountChange,
-    onFocus,
-    onBlur,
-  } = useAmount({ vault })
+  const { amountParsed, amountDisplay, manualSetAmount, handleAmountChange, onFocus, onBlur } =
+    useAmount({ vault })
   const {
     sidebar,
     txHashes,
@@ -178,7 +171,7 @@ export const VaultManageViewComponent = ({
             }
             defaultExpanded
           >
-            <MockedLineChart />
+            <HistoricalYieldChart aprHourlyList={vault.aprValues} />
           </Expander>
           <Expander
             title={

apps/earn-protocol/components/organisms/Charts/HistoricalYieldChart.tsx

@@ -30,10 +30,13 @@ export const HistoricalYieldChart = ({
   const parsedData = useMemo(() => {
     const now = dayjs().startOf('hour')
 
-    return [...aprHourlyList].reverse().map((item, itemIndex) => ({
-      name: now.subtract(itemIndex, 'hour').format('MMM DD, HH:mm'),
-      'Summer Strategy': new BigNumber(item).toFixed(2),
-    }))
+    return [...aprHourlyList]
+      .reverse()
+      .map((item, itemIndex) => ({
+        name: now.subtract(itemIndex, 'hour').format('MMM DD, HH:mm'),
+        'Summer Strategy': new BigNumber(item).toFixed(2),
+      }))
+      .reverse()
   }, [aprHourlyList])
 
   return (

apps/earn-protocol/hooks/use-amount.ts

@@ -1,4 +1,4 @@
-import { type ChangeEvent, useMemo, useState } from 'react'
+import { type ChangeEvent, useEffect, useMemo, useState } from 'react'
 import { type SDKVaultishType } from '@summerfi/app-types'
 import BigNumber from 'bignumber.js'
 
@@ -13,18 +13,28 @@ export const useAmount = ({ vault }: UseAmountProps) => {
   const [amountRaw, setAmountRaw] = useState<string>()
 
   const amountDisplay = useMemo(() => {
-    if (!amountRaw) {
-      return ''
+    if (!amountRaw && amountRaw !== '0') {
+      return '0.00'
     }
 
     if (new BigNumber(amountRaw).isNaN() || editMode) {
       return amountRaw
     }
 
-    return new BigNumber(amountRaw).toFixed(vaultTokenDecimals).replace(/(\.\d*?[1-9])0+$/gu, '$1')
-    // remove trailing dot
+    const amountWithNoFollowingZeroes = new BigNumber(
+      // double parsing removes zeroes at the end
+      new BigNumber(amountRaw).toFixed(vaultTokenDecimals), // and this gives it a "max" decimals
+    ).toString()
+
+    return amountWithNoFollowingZeroes
   }, [amountRaw, editMode, vaultTokenDecimals])
 
+  useEffect(() => {
+    if (!editMode) {
+      setAmountRaw(amountDisplay)
+    }
+  }, [editMode, amountDisplay])
+
   const amountParsed = useMemo(() => {
     if (!amountRaw || new BigNumber(amountRaw).isNaN()) {
       return new BigNumber(0)
@@ -56,7 +66,7 @@ export const useAmount = ({ vault }: UseAmountProps) => {
       // only numbers and dots
       /[^0-9.]/gu.test(value) ||
       // leading numbers max is vaultTokenDecimals
-      (decimal || '').length >= vaultTokenDecimals
+      (decimal || '').length > vaultTokenDecimals
     ) {
       ev.stopPropagation()
       ev.preventDefault()