Catch balance query in batch

src/components/layout.tsx

@@ -9,7 +9,10 @@ import { db, Treasury } from '../db'
 import { useRouter } from 'next/router'
 import Image from 'next/image'
 import { getTreasuriesPath } from '../route'
-import { encodeCardanoData } from '../cardano/multiplatform-lib'
+import { encodeCardanoData, useCardanoMultiplatformLib } from '../cardano/multiplatform-lib'
+import { getBalanceByPaymentAddresses, usePaymentAddressesQuery } from '../cardano/query-api'
+import type { Value } from '../cardano/query-api'
+import { ADAAmount } from './currency'
 
 const Toggle: NextPage<{
   isOn: boolean
@@ -143,34 +146,67 @@ const PrimaryBar: NextPage = () => {
 
 const TreasuryListing: NextPage<{
   treasury: Treasury
-}> = ({ treasury }) => {
+  balance?: Value
+}> = ({ treasury, balance }) => {
   const { name, script } = treasury
   const base64CBOR = encodeCardanoData(script, 'base64')
+  const lovelace = balance?.lovelace
   return (
     <NavLink
       href={getTreasuriesPath(encodeURIComponent(base64CBOR))}
       onPageClassName='bg-sky-700 font-semibold'
       className='block w-full p-4 truncate hover:bg-sky-700'>
-      {name}
+      <div>{name}</div>
+      {lovelace && <div className='text-sm font-normal'><ADAAmount lovelace={lovelace} /></div>}
     </NavLink>
   )
 }
 
+const TreasuryList: NextPage<{
+  addresses: string[]
+  treasuries: Treasury[]
+}> = ({ addresses, treasuries }) => {
+  const { data } = usePaymentAddressesQuery({
+    variables: { addresses },
+    fetchPolicy: 'cache-first',
+    pollInterval: 10000
+  })
+  const balanceMap = new Map<string, Value>()
+  data?.paymentAddresses.forEach((paymentAddress) => {
+    const address = paymentAddress.address
+    const balance = getBalanceByPaymentAddresses([paymentAddress])
+    balanceMap.set(address, balance)
+  })
+  const balances = (addresses ?? []).map((address) => balanceMap.get(address))
+
+  return (
+    <nav className='block w-full'>
+      {treasuries.map((treasury, index) => <TreasuryListing key={index} treasury={treasury} balance={balances[index]} />)}
+    </nav>
+  )
+}
+
 const SecondaryBar: NextPage = () => {
+  const [config, _] = useContext(ConfigContext)
   const treasuries = useLiveQuery(async () => db.treasuries.toArray())
+  const cardano = useCardanoMultiplatformLib()
+  const addresses = cardano && treasuries && treasuries.map((treasury) => {
+    const script = cardano.lib.NativeScript.from_bytes(treasury.script)
+    return cardano.getScriptAddress(script, config.isMainnet).to_bech32()
+  })
 
   return (
     <aside className='flex flex-col w-60 bg-sky-800 items-center text-white overflow-y-auto'>
-      <div className='w-full bg-sky-900 font-semibold'>
+      <nav className='w-full bg-sky-900 font-semibold'>
         <NavLink
           href='/treasuries/new'
           onPageClassName='bg-sky-700'
           className='flex w-full p-4 items-center space-x-1 justify-center hover:bg-sky-700'>
           <PlusIcon className='w-4' />
           <span>New Treasury</span>
         </NavLink>
-      </div>
-      {treasuries && treasuries.map((treasury, index) => <TreasuryListing key={index} treasury={treasury} />)}
+      </nav>
+      {addresses && treasuries && <TreasuryList addresses={addresses} treasuries={treasuries} />}
     </aside>
   )
 }

src/pages/treasuries/[base64CBOR]/index.tsx

@@ -20,7 +20,11 @@ const ShowBalance: NextPage<{
 }> = ({ cardano, script, className }) => {
   const [config, _] = useContext(ConfigContext)
   const address = cardano.getScriptAddress(script, config.isMainnet).to_bech32()
-  const { loading, error, data } = usePaymentAddressesQuery({ variables: { addresses: [address] }, fetchPolicy: 'network-only' })
+  const { loading, error, data } = usePaymentAddressesQuery({
+    variables: { addresses: [address] },
+    fetchPolicy: 'cache-first',
+    pollInterval: 2000
+  })
 
   if (loading) return null
   if (error) return null