chore(rwa): choose an account if you have multiple (#2688)

.changeset/giant-rings-allow.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/rwa-demo/src/app/(app)/SideBar.tsx

@@ -69,7 +69,9 @@ export const SideBar: FC = () => {
       context={
         <>
           <SideBarItemsInline>
-            <ContextMenu trigger={<Button variant="outlined">Profile</Button>}>
+            <ContextMenu
+              trigger={<Button variant="outlined">{account?.alias}</Button>}
+            >
               <ContextMenuItem
                 endVisual={<MonoLogout />}
                 label="Logout"

packages/apps/rwa-demo/src/app/(loggedout)/login/page.tsx

@@ -1,19 +1,28 @@
 'use client';
 import { useAccount } from '@/hooks/account';
 import { Button } from '@kadena/kode-ui';
-import { useRouter } from 'next/navigation';
 
 const Home = () => {
-  const { login } = useAccount();
-  const router = useRouter();
+  const { login, accounts, selectAccount } = useAccount();
   const handleConnect = async () => {
     await login();
-    router.push('/');
   };
 
   return (
     <div>
       <Button onPress={handleConnect}>Connect</Button>
+
+      {accounts && accounts.length > 1 && (
+        <ul>
+          {accounts.map((account) => (
+            <li key={account.address}>
+              <Button onPress={() => selectAccount(account)}>
+                {account.alias}
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 };

packages/apps/rwa-demo/src/components/AccountProvider/AccountProvider.tsx

@@ -14,25 +14,30 @@ interface IAccountError {
 
 export interface IAccountContext {
   account?: IWalletAccount;
+  accounts?: IWalletAccount[];
   error?: IAccountError;
   isMounted: boolean;
   login: () => void;
   logout: () => void;
   sign: (tx: IUnsignedCommand) => Promise<ICommand | undefined>;
   isAgent: boolean;
+  selectAccount: (account: IWalletAccount) => void;
 }
 
 export const AccountContext = createContext<IAccountContext>({
   account: undefined,
+  accounts: undefined,
   isMounted: false,
   login: () => {},
   logout: () => {},
   sign: async () => undefined,
   isAgent: false,
+  selectAccount: () => {},
 });
 
 export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
   const [account, setAccount] = useState<IWalletAccount>();
+  const [accounts, setAccounts] = useState<IWalletAccount[]>();
   const [isMounted, setIsMounted] = useState(false);
   const [isAgentState, setIsAgentState] = useState(false);
 
@@ -43,6 +48,12 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
     setIsAgentState(!!resIsAgent);
   };
 
+  const selectAccount = (account: IWalletAccount) => {
+    setAccount(account);
+    localStorage.setItem(getAccountCookieName(), JSON.stringify(account)!);
+    router.replace('/');
+  };
+
   const login = useCallback(async () => {
     const { message, focus, close } = await getWalletConnection();
     focus();
@@ -53,12 +64,18 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
     if ((response.payload as any).status !== 'accepted') {
       return;
     }
-    const { payload } = await message('GET_STATUS', {
+    const { payload } = (await message('GET_STATUS', {
       name: 'RWA-demo',
-    });
+    })) as { payload: IState };
 
-    const account = (payload as IState).accounts[0] as IWalletAccount;
-    localStorage.setItem(getAccountCookieName(), JSON.stringify(account)!);
+    if (payload.accounts.length > 1) {
+      setAccounts(payload.accounts);
+      close();
+      return;
+    }
+
+    setAccounts(undefined);
+    setAccount(payload.accounts[0]);
     close();
   }, [router]);
 
@@ -106,7 +123,16 @@ export const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
 
   return (
     <AccountContext.Provider
-      value={{ account, login, logout, sign, isMounted, isAgent: isAgentState }}
+      value={{
+        account,
+        accounts,
+        login,
+        logout,
+        sign,
+        isMounted,
+        isAgent: isAgentState,
+        selectAccount,
+      }}
     >
       {children}
     </AccountContext.Provider>