add vault stats to contribution modal (#2)

components/ContributionModal.tsx

@@ -11,6 +11,8 @@ import Slider from './Slider'
 import Loading from './Loading'
 import WalletIcon from './WalletIcon'
 import useLargestAccounts from '../hooks/useLargestAccounts'
+import useVaults from '../hooks/useVaults'
+import moment from 'moment'
 
 const StyledModalWrapper = styled.div`
   height: 414px;
@@ -44,6 +46,14 @@ const ContributionModal = () => {
   const connected = useWalletStore((s) => s.connected)
   const wallet = useWalletStore((s) => s.current)
   const largestAccounts = useLargestAccounts()
+  const vaults = useVaults()
+
+  const pool = useWalletStore((s) => s.pool)
+  const startIdo = pool ? moment.unix(pool.startIdoTs.toNumber()) : undefined
+  const endIdo = pool ? moment.unix(pool.endIdoTs.toNumber()) : undefined
+  const endDeposits = pool
+    ? moment.unix(pool.endDepositsTs.toNumber())
+    : undefined
 
   const usdcBalance = largestAccounts.usdc?.balance || 0
   const redeemableBalance = largestAccounts.redeemable?.balance || 0
@@ -280,6 +290,23 @@ const ContributionModal = () => {
         )}
       </StyledModalWrapper>
       <StyledModalBorder animate={submitted && connected} />
+      <p>
+        Start: {startIdo?.fromNow()} ({startIdo?.format()})
+      </p>
+      <p>
+        End Deposits: {endDeposits?.fromNow()} ({endDeposits?.format()})
+      </p>
+      <p>
+        End Withdraws: {endIdo?.fromNow()} ({endIdo?.format()})
+      </p>
+      <p>Current USDC in Pool: {vaults.usdc?.balance || 'N/A'}</p>
+      <p>Locked MNGO in Pool: {vaults.mango?.balance || 'N/A'}</p>
+      <p>
+        Estimated Price per Token:{' '}
+        {vaults.usdc && vaults.mango
+          ? vaults.usdc.balance / vaults.mango.balance
+          : 'N/A'}
+      </p>
     </div>
   )
 }

hooks/useLargestAccounts.tsx

@@ -1,19 +1,7 @@
-import BN from 'bn.js'
 import useWalletStore from '../stores/useWalletStore'
+import { calculateBalance } from '../utils/balance'
 import { ProgramAccount, TokenAccount } from '../utils/tokens'
 
-function fixedPointToNumber(value: BN, decimals: number) {
-  const divisor = new BN(10).pow(new BN(decimals))
-  const quotient = value.div(divisor)
-  const remainder = value.mod(divisor)
-  return quotient.toNumber() + remainder.toNumber() / divisor.toNumber()
-}
-
-function calculateBalance(mints, account: TokenAccount): number {
-  const mint = mints[account.mint.toBase58()]
-  return mint ? fixedPointToNumber(account.amount, mint.decimals) : 0
-}
-
 export function findLargestBalanceAccountForMint(
   mints,
   tokenAccounts: ProgramAccount<TokenAccount>[],

hooks/useVaults.tsx

@@ -0,0 +1,26 @@
+import { useMemo } from 'react'
+import useWalletStore from '../stores/useWalletStore'
+import { calculateBalance } from '../utils/balance'
+
+export default function useVaults() {
+  const mints = useWalletStore((s) => s.mints)
+  const usdcVault = useWalletStore((s) => s.usdcVault)
+  const mangoVault = useWalletStore((s) => s.mangoVault)
+
+  const usdc = useMemo(
+    () =>
+      usdcVault
+        ? { account: usdcVault, balance: calculateBalance(mints, usdcVault) }
+        : undefined,
+    [usdcVault, mints]
+  )
+  const mango = useMemo(
+    () =>
+      mangoVault
+        ? { account: mangoVault, balance: calculateBalance(mints, mangoVault) }
+        : undefined,
+    [mangoVault, mints]
+  )
+
+  return { usdc, mango }
+}

hooks/useWallet.tsx

@@ -103,10 +103,7 @@ export default function useWallet() {
           wallet.publicKey.toString().substr(-5),
       })
       await actions.fetchPool()
-      await Promise.all([
-        actions.fetchWalletTokenAccounts(),
-        actions.fetchMints(),
-      ])
+      await actions.fetchWalletTokenAccounts()
     })
     wallet.on('disconnect', () => {
       setWalletStore((state) => {
@@ -129,8 +126,17 @@ export default function useWallet() {
     }
   }, [wallet, setWalletStore])
 
+  // fetch pool on page load
+  useEffect(() => {
+    (async () => {
+      await actions.fetchPool()
+      actions.fetchMints()
+    })()
+  }, [])
+
+  // refresh usdc vault regularly
   useInterval(async () => {
-    await actions.fetchUsdcVault()
+    actions.fetchUsdcVault()
   }, 20 * SECONDS)
 
   return { connected, wallet }

package.json

@@ -30,6 +30,7 @@
     "@solana/spl-token": "^0.1.3",
     "@solana/web3.js": "^1.5.0",
     "immer": "^9.0.1",
+    "moment": "^2.29.1",
     "next": "latest",
     "next-themes": "^0.0.14",
     "rc-slider": "^9.7.2",

stores/useWalletStore.tsx

@@ -108,12 +108,11 @@ const useWalletStore = create<WalletStore>((set, get) => ({
   actions: {
     async fetchPool() {
       const connection = get().connection.current
-      const connected = get().connected
       const wallet = get().current
       const programId = get().connection.programId
 
-      console.log('fetchPool', connected, poolIdl)
-      if (connection && connected) {
+      console.log('fetchPool', connection, poolIdl)
+      if (connection) {
         const provider = new anchor.Provider(
           connection,
           wallet,
@@ -292,6 +291,7 @@ const useWalletStore = create<WalletStore>((set, get) => ({
       }
 
       await actions.fetchWalletTokenAccounts()
+      actions.fetchUsdcVault()
     },
   },
   set: (fn) => set(produce(fn)),

utils/balance.tsx

@@ -0,0 +1,17 @@
+import BN from 'bn.js'
+import { MintAccount, TokenAccount } from './tokens'
+
+function fixedPointToNumber(value: BN, decimals: number) {
+  const divisor = new BN(10).pow(new BN(decimals))
+  const quotient = value.div(divisor)
+  const remainder = value.mod(divisor)
+  return quotient.toNumber() + remainder.toNumber() / divisor.toNumber()
+}
+
+export function calculateBalance(
+  mints: { [pk: string]: MintAccount },
+  account: TokenAccount
+): number {
+  const mint = mints[account.mint.toBase58()]
+  return mint ? fixedPointToNumber(account.amount, mint.decimals) : 0
+}

yarn.lock

@@ -4227,6 +4227,11 @@ modern-normalize@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.0.0.tgz#539d84a1e141338b01b346f3e27396d0ed17601e"
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"