ui: display relevant accounts

package.json

@@ -36,14 +36,14 @@
     "@grpc/proto-loader": "^0.7.13",
     "@penumbra-labs/registry": "^12.0.0",
     "@penumbra-zone/bech32m": "^10.0.0",
-    "@penumbra-zone/client": "^21.0.0",
+    "@penumbra-zone/client": "^21.1.0",
     "@penumbra-zone/crypto-web": "^30.0.0",
     "@penumbra-zone/getters": "^20.0.0",
     "@penumbra-zone/perspective": "^40.0.0",
     "@penumbra-zone/protobuf": "^6.3.0",
     "@penumbra-zone/transport-dom": "^7.5.0",
     "@penumbra-zone/types": "^26.3.0",
-    "@penumbra-zone/ui": "^13.4.2",
+    "@penumbra-zone/ui": "^13.5.0",
     "@penumbra-zone/wasm": "^34.0.0",
     "@radix-ui/react-icons": "^1.3.2",
     "@rehooks/component-size": "^1.0.3",

src/widgets/header/api/subaccounts.ts

@@ -6,14 +6,29 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import { ViewService } from '@penumbra-zone/protobuf';
 import { penumbra } from '@/shared/const/penumbra';
+import { useBalances } from '@/shared/api/balances';
+import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb';
 
-const ACCOUNT_INDEXES = [0, 1, 2, 3, 4, 5];
-
-const fetchQuery = async (): Promise<AddressView[]> => {
+const fetchQuery = async (balances: BalancesResponse[]): Promise<AddressView[]> => {
   const service = penumbra.service(ViewService);
 
+  // Include main account for fresh wallets to display address view
+  let accountIndexes: number[] = [0];
+
+  for (const balance of balances) {
+    if (
+      balance.accountAddress?.addressView.case === 'decoded' &&
+      balance.accountAddress.addressView.value.index?.account !== undefined
+    ) {
+      accountIndexes.push(balance.accountAddress.addressView.value.index.account);
+    }
+  }
+
+  // Filter by unique account indices
+  accountIndexes = accountIndexes.filter((value, index, self) => self.indexOf(value) === index);
+
   return Promise.all(
-    ACCOUNT_INDEXES.map(async index => {
+    accountIndexes.map(async index => {
       const response = await service.addressByIndex({ addressIndex: { account: index } });
 
       return new AddressView({
@@ -30,8 +45,13 @@ const fetchQuery = async (): Promise<AddressView[]> => {
 };
 
 export const useSubaccounts = () => {
+  // Query account balances from view service
+  const { data: balances } = useBalances();
+
   return useQuery({
     queryKey: ['view-service-accounts'],
-    queryFn: fetchQuery,
+    queryFn: () => {
+      return fetchQuery(balances!);
+    },
   });
 };