feat: vault modal header (#323)

* feat: vault modal header

* fix: displaying zero values

* feat: code comments

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'}
           />

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>
+  )
+}

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>
   )

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