feat: #96: sub-account selector

app/app.tsx

@@ -4,6 +4,7 @@ import { ReactNode } from 'react';
 import { enableStaticRendering } from 'mobx-react-lite';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { PenumbraUIProvider } from '@penumbra-zone/ui/PenumbraUIProvider';
+import { ToastProvider } from '@penumbra-zone/ui/Toast';
 import { Display } from '@penumbra-zone/ui/Display';
 import { Header, SyncBar } from '@/widgets/header';
 import { queryClient } from '@/shared/const/queryClient';
@@ -23,6 +24,7 @@ export const App = ({ children }: { children: ReactNode }) => {
             <Header />
             {children}
           </Display>
+          <ToastProvider />
         </QueryClientProvider>
       </PenumbraUIProvider>
     </StyledComponentsRegistry>

package.json

@@ -38,7 +38,7 @@
     "@penumbra-zone/protobuf": "^6.3.0",
     "@penumbra-zone/transport-dom": "^7.5.0",
     "@penumbra-zone/types": "^26.0.0",
-    "@penumbra-zone/ui": "^12.0.0",
+    "@penumbra-zone/ui": "^12.1.1",
     "@penumbra-zone/wasm": "^31.0.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@rehooks/component-size": "^1.0.3",

src/shared/model/connection/index.ts

@@ -4,13 +4,17 @@ import {
   PenumbraManifest,
   PenumbraClient,
 } from '@penumbra-zone/client';
-import { penumbra } from '@/shared/const/penumbra';
 import { makeAutoObservable } from 'mobx';
+import { openToast } from '@penumbra-zone/ui/Toast';
+import { penumbra } from '@/shared/const/penumbra';
 
 class ConnectionStateStore {
   connected = false;
   manifest: PenumbraManifest | undefined;
 
+  /** Index of the selected subaccount */
+  subaccount = 0;
+
   constructor() {
     makeAutoObservable(this);
 
@@ -27,6 +31,10 @@ class ConnectionStateStore {
     this.connected = connected;
   }
 
+  setSubaccount = (subaccount: string) => {
+    this.subaccount = parseInt(subaccount, 10);
+  };
+
   async reconnect() {
     const providers = PenumbraClient.getProviders();
     const connected = Object.keys(providers).find(origin =>
@@ -51,13 +59,18 @@ class ConnectionStateStore {
     } catch (error) {
       if (error instanceof Error && error.cause) {
         if (error.cause === PenumbraRequestFailure.Denied) {
-          // TODO: replace these alerts with toasts
-          alert(
-            'Connection denied: you may need to un-ignore this site in your extension settings.',
-          );
+          openToast({
+            type: 'error',
+            message: 'Connection denied',
+            description: 'You may need to un-ignore this site in your extension settings.',
+          });
         }
         if (error.cause === PenumbraRequestFailure.NeedsLogin) {
-          alert('Not logged in: please login into the extension and try again');
+          openToast({
+            type: 'error',
+            message: 'Not logged in',
+            description: 'Please login into the extension and try again.',
+          });
         }
       }
     }

src/widgets/header/api/subaccounts.ts

@@ -0,0 +1,37 @@
+import {
+  AddressView,
+  AddressView_Decoded,
+  AddressIndex,
+} from '@penumbra-zone/protobuf/penumbra/core/keys/v1/keys_pb';
+import { useQuery } from '@tanstack/react-query';
+import { ViewService } from '@penumbra-zone/protobuf';
+import { penumbra } from '@/shared/const/penumbra';
+
+const ACCOUNT_INDEXES = [0, 1, 2, 3, 4, 5];
+
+const fetchQuery = async (): Promise<AddressView[]> => {
+  const service = penumbra.service(ViewService);
+
+  return Promise.all(
+    ACCOUNT_INDEXES.map(async index => {
+      const response = await service.addressByIndex({ addressIndex: { account: index } });
+
+      return new AddressView({
+        addressView: {
+          case: 'decoded',
+          value: new AddressView_Decoded({
+            address: response.address,
+            index: new AddressIndex({ account: index }),
+          }),
+        },
+      });
+    }),
+  );
+};
+
+export const useSubaccounts = () => {
+  return useQuery({
+    queryKey: ['view-service-accounts'],
+    queryFn: fetchQuery,
+  });
+};

src/widgets/header/index.ts

@@ -1,2 +1,2 @@
-export { Header } from './header';
-export { SyncBar } from './sync-bar';
+export { Header } from './ui/header';
+export { SyncBar } from './ui/sync-bar';

src/widgets/header/connect-button.tsx → src/widgets/header/ui/connect-button.tsx

@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import Image from 'next/image';
+import { Wallet2 } from 'lucide-react';
 import { Text } from '@penumbra-zone/ui/Text';
 import { Button } from '@penumbra-zone/ui/Button';
+import { Density } from '@penumbra-zone/ui/Density';
 import { Dialog } from '@penumbra-zone/ui/Dialog';
 import { PenumbraClient } from '@penumbra-zone/client';
 import { connectionStore } from '@/shared/model/connection';
@@ -30,9 +32,11 @@ export const ConnectButton = observer(() => {
 
   return (
     <>
-      <Button actionType='accent' onClick={onClick}>
-        Connect
-      </Button>
+      <Density sparse>
+        <Button icon={Wallet2} actionType='accent' onClick={onClick}>
+          Connect wallet
+        </Button>
+      </Density>
 
       <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
         <Dialog.Content title='Choose wallet'>

src/widgets/header/connection.tsx → src/widgets/header/ui/connection.tsx

@@ -1,12 +1,12 @@
 import { observer } from 'mobx-react-lite';
 import { connectionStore } from '@/shared/model/connection';
-import { ProviderPopover } from './provider-popover';
 import { ConnectButton } from './connect-button';
+import { SubaccountSelector } from '@/widgets/header/ui/subaccount-selector';
 
 export const Connection = observer(() => {
   if (!connectionStore.connected) {
     return <ConnectButton />;
   }
 
-  return <ProviderPopover />;
+  return <SubaccountSelector />;
 });

src/widgets/header/status-popover.tsx → src/widgets/header/ui/status-popover.tsx

@@ -34,33 +34,35 @@ export const StatusPopover = observer(() => {
   }
 
   return (
-    <Popover>
-      <Popover.Trigger>
-        <Button icon={Blocks} iconOnly>
-          Status
-        </Button>
-      </Popover.Trigger>
-      <Popover.Content align='end' side='bottom'>
-        <Density compact>
-          <div className='flex flex-col gap-4'>
-            <div className='flex flex-col gap-2'>
-              <Text technical>Status</Text>
-              {pill}
-              {error}
-            </div>
-            {!loading && (
+    <Density sparse>
+      <Popover>
+        <Popover.Trigger>
+          <Button icon={Blocks} iconOnly>
+            Status
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content align='end' side='bottom'>
+          <Density compact>
+            <div className='flex flex-col gap-4'>
               <div className='flex flex-col gap-2'>
-                <Text technical>Block Height</Text>
-                <Pill context='technical-default'>
-                  {latestKnownBlockHeight !== fullSyncHeight
-                    ? `${fullSyncHeight} of ${latestKnownBlockHeight}`
-                    : `${latestKnownBlockHeight}`}
-                </Pill>
+                <Text technical>Status</Text>
+                {pill}
+                {error}
               </div>
-            )}
-          </div>
-        </Density>
-      </Popover.Content>
-    </Popover>
+              {!loading && (
+                <div className='flex flex-col gap-2'>
+                  <Text technical>Block Height</Text>
+                  <Pill context='technical-default'>
+                    {latestKnownBlockHeight !== fullSyncHeight
+                      ? `${fullSyncHeight} of ${latestKnownBlockHeight}`
+                      : `${latestKnownBlockHeight}`}
+                  </Pill>
+                </div>
+              )}
+            </div>
+          </Density>
+        </Popover.Content>
+      </Popover>
+    </Density>
   );
 });

src/widgets/header/ui/subaccount-selector.tsx

@@ -0,0 +1,67 @@
+import { Link2Off } from 'lucide-react';
+import { observer } from 'mobx-react-lite';
+import { DropdownMenu } from '@penumbra-zone/ui/DropdownMenu';
+import { Button } from '@penumbra-zone/ui/Button';
+import { Density } from '@penumbra-zone/ui/Density';
+import { Text } from '@penumbra-zone/ui/Text';
+import { AddressViewComponent } from '@penumbra-zone/ui/AddressViewComponent';
+import { getAddressIndex } from '@penumbra-zone/getters/address-view';
+import { connectionStore } from '@/shared/model/connection';
+import { useSubaccounts } from '../api/subaccounts';
+
+export const SubaccountSelector = observer(() => {
+  const { data: subaccounts } = useSubaccounts();
+  const { subaccount, setSubaccount } = connectionStore;
+
+  const value = subaccount.toString();
+  const valueAddress = subaccounts?.find(
+    account => getAddressIndex(account).account === subaccount,
+  );
+
+  return (
+    <Density sparse>
+      <DropdownMenu>
+        <DropdownMenu.Trigger>
+          <Button>
+            <AddressViewComponent copyable={false} addressView={valueAddress} />
+          </Button>
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <div className='flex flex-col gap-2'>
+            {subaccounts && (
+              <DropdownMenu.RadioGroup value={value} onChange={setSubaccount}>
+                <div className='flex flex-col gap-2'>
+                  {subaccounts.map(account => {
+                    const key = getAddressIndex(account).account.toString();
+                    return (
+                      <DropdownMenu.RadioItem key={key} value={key}>
+                        <div className={value !== key ? '-ml-7' : ''}>
+                          <AddressViewComponent
+                            hideIcon={value === key}
+                            copyable={false}
+                            addressView={account}
+                          />
+                        </div>
+                      </DropdownMenu.RadioItem>
+                    );
+                  })}
+                </div>
+              </DropdownMenu.RadioGroup>
+            )}
+
+            <DropdownMenu.Item
+              actionType='destructive'
+              icon={<Link2Off size={24} />}
+              onSelect={() => void connectionStore.disconnect()}
+            >
+              <Text strong color={color => color.destructive.light}>
+                Disconnect
+              </Text>
+            </DropdownMenu.Item>
+          </div>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </Density>
+  );
+});