From bd07c20e47e0ed6113bb88a72ccb4d5e8acc2411 Mon Sep 17 00:00:00 2001
From: Yusuf Seyrek <yusufseyrek@users.noreply.github.com>
Date: Fri, 28 Jul 2023 12:12:13 +0300
Subject: [PATCH] feat: vault modal header (#323)

* feat: vault modal header

* fix: displaying zero values

* feat: code comments
---
 .../Modals/LendAndReclaim/DetailsHeader.tsx   |  4 +-
 .../Modals/Vault/VaultModalContentHeader.tsx  | 73 +++++++++++++++++++
 src/components/Modals/Vault/index.tsx         | 48 +++++++++---
 src/types/interfaces/vaults.d.ts              |  2 +-
 4 files changed, 114 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Modals/Vault/VaultModalContentHeader.tsx

diff --git a/src/components/Modals/LendAndReclaim/DetailsHeader.tsx b/src/components/Modals/LendAndReclaim/DetailsHeader.tsx
index f949c4ec..e8f0e587 100644
--- a/src/components/Modals/LendAndReclaim/DetailsHeader.tsx
+++ b/src/components/Modals/LendAndReclaim/DetailsHeader.tsx
@@ -20,7 +20,7 @@ function DetailsHeader({ data }: Props) {
         <>
           <TitleAndSubCell
             title={
-              <>
+              <div className='flex flex-row'>
                 <FormattedNumber amount={assetApy.toNumber()} options={{ suffix: '%' }} animate />
                 <FormattedNumber
                   className='ml-2 text-xs'
@@ -28,7 +28,7 @@ function DetailsHeader({ data }: Props) {
                   options={{ suffix: '%/day' }}
                   animate
                 />
-              </>
+              </div>
             }
             sub={'APY'}
           />
diff --git a/src/components/Modals/Vault/VaultModalContentHeader.tsx b/src/components/Modals/Vault/VaultModalContentHeader.tsx
new file mode 100644
index 00000000..d0bb8188
--- /dev/null
+++ b/src/components/Modals/Vault/VaultModalContentHeader.tsx
@@ -0,0 +1,73 @@
+import { useMemo } from 'react'
+
+import DisplayCurrency from 'components/DisplayCurrency'
+import { FormattedNumber } from 'components/FormattedNumber'
+import TitleAndSubCell from 'components/TitleAndSubCell'
+import { BN_ZERO } from 'constants/math'
+import { BNCoin } from 'types/classes/BNCoin'
+import { PRICE_ORACLE_DECIMALS } from 'constants/query'
+import { BN } from 'utils/helpers'
+
+interface Props {
+  vault: Vault | DepositedVault
+}
+
+export default function VaultModalContentHeader({ vault }: Props) {
+  const depositedValue = useMemo(() => {
+    if ('values' in vault) {
+      const value = vault.values.primary
+        .plus(vault.values.secondary)
+        .shiftedBy(-PRICE_ORACLE_DECIMALS)
+
+      // To eliminate super small leftover amounts
+      // If USD value is smaller than 0.001 returns 0
+      return BN(value.toFixed(PRICE_ORACLE_DECIMALS / 2))
+    } else {
+      return BN_ZERO
+    }
+  }, [vault])
+
+  return (
+    <div className='flex gap-6 border-b border-white/5 px-6 py-4 gradient-header'>
+      {vault.apy && (
+        <>
+          <TitleAndSubCell
+            title={
+              <div className='flex flex-row'>
+                <FormattedNumber
+                  amount={vault.apy}
+                  options={{ suffix: '%', decimals: -2 }}
+                  animate
+                />
+                <FormattedNumber
+                  className='ml-2 text-xs'
+                  amount={vault.apy / 365}
+                  options={{ suffix: '%/day', decimals: -2 }}
+                  animate
+                />
+              </div>
+            }
+            sub={'Deposit APY'}
+          />
+          <div className='h-100 w-[1px] bg-white/10'></div>
+        </>
+      )}
+      {!depositedValue.isZero() && (
+        <>
+          <TitleAndSubCell
+            title={<DisplayCurrency coin={BNCoin.fromDenomAndBigNumber('usd', depositedValue)} />}
+            sub={'Deposited'}
+          />
+          <div className='h-100 w-[1px] bg-white/10'></div>
+        </>
+      )}
+
+      <TitleAndSubCell
+        title={
+          <DisplayCurrency coin={BNCoin.fromDenomAndBigNumber(vault.cap.denom, vault.cap.max)} />
+        }
+        sub={'Deposit Cap'}
+      />
+    </div>
+  )
+}
diff --git a/src/components/Modals/Vault/index.tsx b/src/components/Modals/Vault/index.tsx
index 0e05373f..8285e256 100644
--- a/src/components/Modals/Vault/index.tsx
+++ b/src/components/Modals/Vault/index.tsx
@@ -1,3 +1,6 @@
+import { useCallback, useMemo } from 'react'
+import moment from 'moment'
+
 import VaultLogo from 'components/Earn/Farm/VaultLogo'
 import Modal from 'components/Modal'
 import VaultModalContent from 'components/Modals/Vault/VaultModalContent'
@@ -5,6 +8,9 @@ import Text from 'components/Text'
 import { ASSETS } from 'constants/assets'
 import useCurrentAccount from 'hooks/useCurrentAccount'
 import useStore from 'store'
+import VaultModalContentHeader from 'components/Modals/Vault/VaultModalContentHeader'
+import { InfoCircle } from 'components/Icons'
+import { Tooltip } from 'components/Tooltip'
 
 export default function VaultModalController() {
   const currentAccount = useCurrentAccount()
@@ -32,28 +38,50 @@ interface Props {
 }
 
 function VaultModal(props: Props) {
-  function onClose() {
+  const {
+    modal: { vault, isDeposited },
+    primaryAsset,
+    secondaryAsset,
+    currentAccount,
+  } = props
+
+  const onClose = useCallback(() => {
     useStore.setState({ vaultModal: null })
-  }
+  }, [])
+
+  const unlockTime = useMemo(() => {
+    if ('unlocksAt' in vault && vault.unlocksAt) {
+      return moment(vault.unlocksAt)
+    }
+  }, [vault])
 
   return (
     <Modal
       onClose={onClose}
       header={
-        <span className='flex items-center gap-4 px-4'>
-          <VaultLogo vault={props.modal.vault} />
-          <Text>{props.modal.vault.name}</Text>
+        <span className='flex items-center px-4'>
+          <VaultLogo vault={vault} />
+          <Text className='pl-3 pr-2'>{vault.name}</Text>
+          {unlockTime && (
+            <Tooltip
+              content={`Account position for this vault unlocks at ${unlockTime}`}
+              type={'info'}
+            >
+              <InfoCircle width={16} height={16} />
+            </Tooltip>
+          )}
         </span>
       }
       headerClassName='gradient-header pl-2 pr-2.5 py-2.5 border-b-white/5 border-b'
       contentClassName='flex flex-col'
     >
+      <VaultModalContentHeader vault={vault} />
       <VaultModalContent
-        vault={props.modal.vault}
-        primaryAsset={props.primaryAsset}
-        secondaryAsset={props.secondaryAsset}
-        account={props.currentAccount}
-        isDeposited={props.modal.isDeposited}
+        vault={vault}
+        primaryAsset={primaryAsset}
+        secondaryAsset={secondaryAsset}
+        account={currentAccount}
+        isDeposited={isDeposited}
       />
     </Modal>
   )
diff --git a/src/types/interfaces/vaults.d.ts b/src/types/interfaces/vaults.d.ts
index 7713ec1e..d98416b2 100644
--- a/src/types/interfaces/vaults.d.ts
+++ b/src/types/interfaces/vaults.d.ts
@@ -45,7 +45,7 @@ interface VaultValuesAndAmounts {
     secondary: BigNumber
     locked: BigNumber
     unlocked: BigNumber
-    unlocking: BigNumer
+    unlocking: BigNumber
   }
   values: {
     primary: BigNumber