feat(example-portfolio): add use(Primary)Account(s) hooks (#1109)

Signed-off-by: Jasper Van der Jeugt <jasper.vanderjeugt@digitalasset.com>

Author: jaspervdj-da

examples/portfolio/src/components/types.ts

@@ -1,3 +1,6 @@
+// Copyright (c) 2025-2026 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
 export interface ActionItem {
     id: string
     tag: string

examples/portfolio/src/components/utils.ts

@@ -1,3 +1,6 @@
+// Copyright (c) 2025-2026 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
 import type { ActionItem } from './types'
 
 export const isReceiver = (item: ActionItem) => {

examples/portfolio/src/contexts/ConnectionContext.tsx

@@ -2,11 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { createContext, useContext } from 'react'
+import * as sdk from '@canton-network/dapp-sdk'
 
 export type ConnectionStatus = {
     connected: boolean
     sessionToken?: string
     primaryParty?: string
+    accounts: sdk.dappAPI.Wallet[]
     error?: string
 }
 

examples/portfolio/src/contexts/ConnectionProvider.tsx

@@ -10,6 +10,7 @@ export const ConnectionProvider: React.FC<{ children: React.ReactNode }> = ({
 }) => {
     const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>({
         connected: false,
+        accounts: [],
     })
 
     const connect = () => {
@@ -19,10 +20,15 @@ export const ConnectionProvider: React.FC<{ children: React.ReactNode }> = ({
                     connected: status.isConnected,
                     sessionToken: status.session?.accessToken,
                     error: undefined,
+                    accounts: [],
                 })
             })
             .catch((err) => {
-                setConnectionStatus({ connected: false, error: err.details })
+                setConnectionStatus({
+                    connected: false,
+                    error: err.details,
+                    accounts: [],
+                })
             })
     }
 
@@ -32,6 +38,7 @@ export const ConnectionProvider: React.FC<{ children: React.ReactNode }> = ({
         sdk.disconnect().then(() =>
             setConnectionStatus({
                 connected: false,
+                accounts: [],
             })
         )
     }
@@ -84,21 +91,10 @@ export const ConnectionProvider: React.FC<{ children: React.ReactNode }> = ({
             .then((wallets) => {
                 const requestedAccounts =
                     wallets as sdk.dappAPI.RequestAccountsResult
-                if (requestedAccounts?.length > 0) {
-                    const primaryWallet = requestedAccounts.find(
-                        (w) => w.primary
-                    )
-                    if (primaryWallet) {
-                        setConnectionStatus((c) => ({
-                            ...c,
-                            primaryParty: primaryWallet.partyId,
-                        }))
-                    } else {
-                        // TODO: Throw error
-                    }
-                } else {
-                    // TODO: Throw error
-                }
+                setConnectionStatus((c) => ({
+                    ...c,
+                    accounts: requestedAccounts,
+                }))
             })
             .catch((err) => {
                 console.error('Error requesting wallets:', err)
@@ -112,23 +108,10 @@ export const ConnectionProvider: React.FC<{ children: React.ReactNode }> = ({
         const onAccountsChanged = (
             wallets: sdk.dappAPI.AccountsChangedEvent
         ) => {
-            let primaryWallet = undefined
-            if (wallets.length > 0) {
-                primaryWallet = wallets.find((w) => w.primary)
-            }
-
-            if (primaryWallet) {
-                setConnectionStatus((c) => ({
-                    ...c,
-                    primaryParty: primaryWallet!.partyId,
-                }))
-            } else {
-                setConnectionStatus((c) => {
-                    const noParty = { ...c }
-                    delete noParty.primaryParty
-                    return noParty
-                })
-            }
+            setConnectionStatus((c) => ({
+                ...c,
+                accounts: wallets,
+            }))
         }
         provider.on<sdk.dappAPI.TxChangedEvent>('txChanged', messageListener)
         provider.on<sdk.dappAPI.AccountsChangedEvent>(

examples/portfolio/src/hooks/query-keys.ts

@@ -1,3 +1,6 @@
+// Copyright (c) 2025-2026 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
 export const queryKeys = {
     listPendingTransfers: (party: string | undefined) => [
         'listPendingTransfers',

examples/portfolio/src/hooks/query-options.ts

@@ -1,3 +1,6 @@
+// Copyright (c) 2025-2026 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
 import { queryOptions } from '@tanstack/react-query'
 import { listPendingTransfers } from '../services/portfolio-service-implementation'
 import { queryKeys } from './query-keys'

examples/portfolio/src/hooks/useAccounts.ts

@@ -0,0 +1,18 @@
+// Copyright (c) 2025-2026 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useMemo } from 'react'
+import * as sdk from '@canton-network/dapp-sdk'
+import { useConnection } from '../contexts/ConnectionContext'
+
+export const useAccounts = (): sdk.dappAPI.Wallet[] => {
+    const {
+        status: { accounts },
+    } = useConnection()
+    return accounts
+}
+
+export const usePrimaryAccount = (): sdk.dappAPI.Wallet | null => {
+    const accounts = useAccounts()
+    return useMemo(() => accounts.find((a) => a.primary) ?? null, [accounts])
+}

examples/portfolio/src/hooks/useAllocationRequests.ts

@@ -4,15 +4,13 @@
 import { type PrettyContract } from '@canton-network/core-ledger-client'
 import { type AllocationRequestView } from '@canton-network/core-token-standard'
 import { useQuery, type UseQueryResult } from '@tanstack/react-query'
-import { useConnection } from '../contexts/ConnectionContext'
 import { usePortfolio } from '../contexts/PortfolioContext'
+import { usePrimaryAccount } from './useAccounts'
 
 export const useAllocationRequests = (): UseQueryResult<
     PrettyContract<AllocationRequestView>[] | undefined
 > => {
-    const {
-        status: { primaryParty },
-    } = useConnection()
+    const primaryParty = usePrimaryAccount()?.partyId
     const { listAllocationRequests } = usePortfolio()
     return useQuery({
         queryKey: ['listAllocationRequests', primaryParty],

examples/portfolio/src/hooks/useAllocations.ts

@@ -4,15 +4,13 @@
 import { type PrettyContract } from '@canton-network/core-ledger-client'
 import { type AllocationView } from '@canton-network/core-token-standard'
 import { useQuery, type UseQueryResult } from '@tanstack/react-query'
-import { useConnection } from '../contexts/ConnectionContext'
+import { usePrimaryAccount } from './useAccounts'
 import { usePortfolio } from '../contexts/PortfolioContext'
 
 export const useAllocations = (): UseQueryResult<
     PrettyContract<AllocationView>[] | undefined
 > => {
-    const {
-        status: { primaryParty },
-    } = useConnection()
+    const primaryParty = usePrimaryAccount()?.partyId
     const { listAllocations } = usePortfolio()
     return useQuery({
         queryKey: ['listAllocations', primaryParty],

examples/portfolio/src/hooks/useExerciseTransfer.ts

@@ -1,3 +1,6 @@
+// Copyright (c) 2025-2026 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
 import { PartyId } from '@canton-network/core-types'
 import { useQueryClient, useMutation } from '@tanstack/react-query'
 import { usePortfolio } from '../contexts/PortfolioContext'