Catch balance query in batch

src/components/currency.tsx

@@ -51,18 +51,12 @@ const AssetAmount: NextPage<{
   decimals: number
   symbol: string
   className?: string
-}> = ({ quantity, decimals, symbol, className }) => (
-  <NumberFormat
-    className={className}
-    value={toDecimal(quantity, decimals)}
-    decimalSeparator='.'
-    isNumericString={true}
-    thousandSeparator={false}
-    allowNegative={false}
-    decimalScale={decimals}
-    suffix={` ${symbol}`}
-    displayType='text' />
-)
+}> = ({ quantity, decimals, symbol, className }) => {
+  const value = toDecimal(quantity, decimals).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, "$1")
+  return (
+    <span className={className}>{`${value} ${symbol}`}</span>
+  )
+}
 
 const ADAAmount: NextPage<{
   lovelace: bigint

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 { Cardano, 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<{
+  cardano: Cardano
+  treasuries: Treasury[]
+}> = ({ cardano, treasuries }) => {
+  const [config, _] = useContext(ConfigContext)
+  const addresses = cardano && treasuries && treasuries.map((treasury) => {
+    const script = cardano.lib.NativeScript.from_bytes(treasury.script)
+    return cardano.getScriptAddress(script, config.isMainnet).to_bech32()
+  })
+  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 treasuries = useLiveQuery(async () => db.treasuries.toArray())
+  const cardano = useCardanoMultiplatformLib()
 
   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>
+      {cardano && treasuries && <TreasuryList cardano={cardano} 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