A useWalletAccountsDetails() hook you can use to let the list of co…

…nnected (authorized) accounts for a wallet

packages/react/package.json

@@ -68,6 +68,7 @@
         "@solana/addresses": "workspace:*",
         "@solana/errors": "workspace:*",
         "@solana/wallet-standard-chains": "^1.1.0",
+        "@solana/wallet-standard-features": "^1.2.0",
         "@wallet-standard/base": "^1",
         "@wallet-standard/features": "^1"
     },

packages/react/src/__tests__/useWalletAccounts-test.ts

@@ -0,0 +1,56 @@
+import { address } from '@solana/addresses';
+import { Wallet } from '@wallet-standard/base';
+
+import { renderHook } from '../test-renderer';
+import { useWalletAccounts } from '../useWalletAccounts';
+import { useWalletAccounts_INTERNAL_ONLY_DO_NOT_EXPORT } from '../wallet-accounts-internal';
+
+jest.mock('../wallet-accounts-internal');
+
+describe('useWalletAccounts', () => {
+    beforeEach(() => {
+        jest.mocked(useWalletAccounts_INTERNAL_ONLY_DO_NOT_EXPORT).mockReturnValue([
+            {
+                address: address('Httx5rAMNW3zA6NtXbgpnq22RdS9qK6rRBiNi8Msoc8a'),
+                chains: ['solana:devnet'],
+                features: ['solana:signMessage', 'solana:signAndSendTransaction'],
+                icon: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIBAAA=',
+                label: 'My Test Account',
+                publicKey: new Uint8Array([
+                    251, 6, 90, 16, 167, 85, 10, 206, 169, 88, 60, 180, 238, 49, 109, 108, 152, 101, 243, 178, 93, 190,
+                    195, 73, 206, 97, 76, 131, 200, 38, 175, 179,
+                ]),
+            },
+            {
+                address: address('Bho2jw9KVthJ4eXHu91gFT4pmTHWBP8kXnB1DkxvB9gx'),
+                chains: ['solana:devnet', 'solana:mainnet', 'solana:testnet'],
+                features: ['solana:signMessage', 'solana:signAndSendTransaction'],
+                icon: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIBAAA=',
+                label: 'My Personal Account',
+                publicKey: new Uint8Array([
+                    159, 8, 37, 221, 244, 25, 37, 131, 55, 40, 233, 211, 111, 235, 4, 250, 61, 170, 129, 95, 102, 117,
+                    14, 137, 115, 154, 196, 5, 68, 224, 212, 45,
+                ]),
+            },
+        ]);
+        // Suppresses console output when an `ErrorBoundary` is hit.
+        // See https://stackoverflow.com/a/72632884/802047
+        jest.spyOn(console, 'error').mockImplementation();
+        jest.spyOn(console, 'warn').mockImplementation();
+    });
+    it("returns an array of display details about the wallet's accounts", () => {
+        const { result } = renderHook(() => useWalletAccounts([] as unknown as Wallet, 'devnet'));
+        expect(result.current).toStrictEqual([
+            {
+                address: address('Httx5rAMNW3zA6NtXbgpnq22RdS9qK6rRBiNi8Msoc8a'),
+                icon: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIBAAA=',
+                label: 'My Test Account',
+            },
+            {
+                address: address('Bho2jw9KVthJ4eXHu91gFT4pmTHWBP8kXnB1DkxvB9gx'),
+                icon: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIBAAA=',
+                label: 'My Personal Account',
+            },
+        ]);
+    });
+});

packages/react/src/index.ts

@@ -1 +1 @@
-export default {};
+export * from './useWalletAccounts';

packages/react/src/useWalletAccounts.ts

@@ -0,0 +1,20 @@
+import { Address, address } from '@solana/addresses';
+import { SolanaChain } from '@solana/wallet-standard-chains';
+import { Wallet, WalletAccount } from '@wallet-standard/base';
+
+import { ChainToCluster } from './chain';
+import { useWalletAccounts_INTERNAL_ONLY_DO_NOT_EXPORT } from './wallet-accounts-internal';
+
+type WalletAccountDetails = Pick<WalletAccount, 'icon' | 'label'> & Readonly<{ address: Address }>;
+
+export function useWalletAccounts<TWallet extends Wallet>(
+    wallet: TWallet,
+    cluster: ChainToCluster<TWallet['chains'][number] & SolanaChain>,
+): readonly WalletAccountDetails[] {
+    const accounts = useWalletAccounts_INTERNAL_ONLY_DO_NOT_EXPORT(wallet, cluster);
+    return accounts.map(({ address: rawAddress, icon, label }) => ({
+        address: address(rawAddress),
+        icon,
+        label,
+    }));
+}