Enable on account change

Concordium · Sep 23, 2024 · f23b8a1 · f23b8a1
1 parent 0d4361b
commit f23b8a1
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 41 deletions.
diff --git a/compliant-reward-distribution/frontend/src/App.tsx b/compliant-reward-distribution/frontend/src/App.tsx
@@ -15,23 +15,35 @@ import { TweetSubmission } from './components/TweetSubmission';
 
 export const App = () => {
     const [provider, setProvider] = useState<WalletProvider>();
-    const [account, setAccount] = useState<string>();
+    const [connectedAccount, setConnectedAccount] = useState<string>();
 
     const grpcClient = useRef(new ConcordiumGRPCClient(new GrpcWebFetchTransport({ baseUrl: CONFIG.node }))).current;
     const capitalizedNetwork = CONFIG.network[0].toUpperCase() + CONFIG.network.substring(1);
 
     useEffect(() => {
-        if (provider !== undefined) {
+        if (provider) {
             return () => {
                 provider?.disconnect?.().then(() => provider.removeAllListeners());
             };
         }
     }, [provider]);
 
+    useEffect(() => {
+        const handleAccountChange = (newAccount: string | undefined) => {
+            setConnectedAccount(newAccount);
+        };
+
+        provider?.on('accountChanged', handleAccountChange);
+
+        return () => {
+            provider?.off('accountChanged', handleAccountChange);
+        };
+    }, [provider]);
+
     const connectProvider = async (provider: WalletProvider) => {
-        const accounts = await provider.connect();
-        if (accounts && accounts?.length != 0) {
-            setAccount(accounts[0]);
+        const account = await provider.connect();
+        if (account) {
+            setConnectedAccount(account);
         }
         setProvider(provider);
     };
@@ -62,25 +74,32 @@ export const App = () => {
                 </Link>
 
                 <Button id="accountAddress" disabled={true}>
-                    {account ? account.slice(0, 5) + '...' + account.slice(-5) : 'No Account Connected'}
+                    {connectedAccount
+                        ? connectedAccount.slice(0, 5) + '...' + connectedAccount.slice(-5)
+                        : 'No Account Connected'}
                 </Button>
             </div>
 
             <Routes>
                 <Route
                     path="/connectWallet"
-                    element={<ConnectWallet connectProvider={connectProvider} account={account} />}
+                    element={<ConnectWallet connectProvider={connectProvider} connectedAccount={connectedAccount} />}
                 />
                 <Route
                     path="/zkProofSubmission"
-                    element={<ZkProofSubmission prover={account} provider={provider} grpcClient={grpcClient} />}
+                    element={
+                        <ZkProofSubmission prover={connectedAccount} provider={provider} grpcClient={grpcClient} />
+                    }
                 />
                 <Route
                     path="/tweetSubmission"
-                    element={<TweetSubmission signer={account} provider={provider} grpcClient={grpcClient} />}
+                    element={<TweetSubmission signer={connectedAccount} provider={provider} grpcClient={grpcClient} />}
                 />
 
-                <Route path="/Admin" element={<Admin signer={account} provider={provider} grpcClient={grpcClient} />} />
+                <Route
+                    path="/Admin"
+                    element={<Admin signer={connectedAccount} provider={provider} grpcClient={grpcClient} />}
+                />
                 <Route path="/" element={<div></div>} />
             </Routes>
         </Router>

diff --git a/compliant-reward-distribution/frontend/src/components/Admin/AdminSetClaimed.tsx b/compliant-reward-distribution/frontend/src/components/Admin/AdminSetClaimed.tsx
@@ -81,14 +81,8 @@ export function AdminSetClaimed(props: Props) {
                     {error && <Alert variant="danger">{error}</Alert>}
 
                     <br />
-                    <Button
-                        variant="info"
-                        id="accountAddress"
-                        disabled={true}
-                        hidden={successfulSubmission === undefined}
-                    >
-                        Success
-                    </Button>
+
+                    {successfulSubmission && <Alert variant="info">Success</Alert>}
                 </Form>
             </div>
         </div>

diff --git a/compliant-reward-distribution/frontend/src/components/ConnectWallet.tsx b/compliant-reward-distribution/frontend/src/components/ConnectWallet.tsx
@@ -2,12 +2,12 @@ import { Button } from 'react-bootstrap';
 import { BrowserWalletProvider, WalletConnectProvider, WalletProvider } from '../wallet-connection';
 
 interface Props {
-    account: string | undefined;
+    connectedAccount: string | undefined;
     connectProvider: (provider: WalletProvider) => void;
 }
 
 export function ConnectWallet(props: Props) {
-    const { account, connectProvider } = props;
+    const { connectedAccount, connectProvider } = props;
 
     return (
         <div className="centered">
@@ -35,11 +35,16 @@ export function ConnectWallet(props: Props) {
                     iOS CryptoX Wallet [Coming Soon]
                 </Button>
                 <br />
-                {account && (
+                {connectedAccount && (
                     <>
                         <div className="centered">Connected Account:</div>
-                        <Button variant="info" id="accountAddress" disabled={true} hidden={account === undefined}>
-                            {account ? account : 'No Account Connected'}
+                        <Button
+                            variant="info"
+                            id="accountAddress"
+                            disabled={true}
+                            hidden={connectedAccount === undefined}
+                        >
+                            {connectedAccount ? connectedAccount : 'No Account Connected'}
                         </Button>
                     </>
                 )}

diff --git a/compliant-reward-distribution/frontend/src/wallet-connection.tsx b/compliant-reward-distribution/frontend/src/wallet-connection.tsx
@@ -27,7 +27,8 @@ import {
 } from './constants';
 
 export abstract class WalletProvider extends EventEmitter {
-    abstract connect(): Promise<string[] | undefined>;
+    connectedAccount: string | undefined;
+    abstract connect(): Promise<string | undefined>;
 
     abstract requestVerifiablePresentation(
         challenge: HexString,
@@ -46,8 +47,9 @@ export abstract class WalletProvider extends EventEmitter {
     /**
      * @param account string when account is changed, undefined when disconnected
      */
-    protected onAccountChanged(account: string | undefined) {
-        this.emit('accountChanged', account);
+    protected onAccountChanged(new_account: string | undefined) {
+        this.connectedAccount = new_account;
+        this.emit('accountChanged', new_account);
     }
 }
 
@@ -109,8 +111,10 @@ export class BrowserWalletProvider extends WalletProvider {
         return this.provider.signMessage(accountAddress, messageToSign);
     }
 
-    async connect(): Promise<string[] | undefined> {
-        return this.provider.requestAccounts();
+    async connect(): Promise<string | undefined> {
+        const new_connected_account = (await this.provider.requestAccounts())[0];
+        super.onAccountChanged(new_connected_account ?? undefined);
+        return new_connected_account;
     }
 
     async requestVerifiablePresentation(
@@ -124,22 +128,21 @@ export class BrowserWalletProvider extends WalletProvider {
 let walletConnectInstance: WalletConnectProvider | undefined;
 
 export class WalletConnectProvider extends WalletProvider {
-    private account: string | undefined;
     private topic: string | undefined;
 
     constructor(private client: SignClient) {
         super();
 
         this.client.on('session_update', ({ params }) => {
-            this.account = this.getAccount(params.namespaces);
-            super.onAccountChanged(this.account);
+            this.connectedAccount = this.getAccount(params.namespaces);
+            super.onAccountChanged(this.connectedAccount);
         });
 
         this.client.on('session_delete', () => {
-            this.account = undefined;
+            this.connectedAccount = undefined;
             this.topic = undefined;
 
-            super.onAccountChanged(this.account);
+            super.onAccountChanged(this.connectedAccount);
         });
     }
 
@@ -155,7 +158,7 @@ export class WalletConnectProvider extends WalletProvider {
         return walletConnectInstance;
     }
 
-    async connect(): Promise<string[] | undefined> {
+    async connect(): Promise<string | undefined> {
         const { uri, approval } = await this.client.connect({
             requiredNamespaces: {
                 [WALLET_CONNECT_SESSION_NAMESPACE]: {
@@ -168,10 +171,10 @@ export class WalletConnectProvider extends WalletProvider {
 
         // Connecting to an existing pairing; it can be assumed that the account is already available.
         if (!uri) {
-            if (this.account == undefined) {
+            if (this.connectedAccount == undefined) {
                 return undefined;
             } else {
-                return [this.account];
+                return this.connectedAccount;
             }
         }
 
@@ -181,16 +184,16 @@ export class WalletConnectProvider extends WalletProvider {
         // Await session approval from the wallet.
         const session = await approval();
 
-        this.account = this.getAccount(session.namespaces);
+        this.connectedAccount = this.getAccount(session.namespaces);
         this.topic = session.topic;
 
         // Close the QRCode modal in case it was open.
         QRCodeModal.close();
 
-        if (this.account == undefined) {
+        if (this.connectedAccount == undefined) {
             return undefined;
         } else {
-            return [this.account];
+            return this.connectedAccount;
         }
     }
 
@@ -289,10 +292,10 @@ export class WalletConnectProvider extends WalletProvider {
             },
         });
 
-        this.account = undefined;
+        this.connectedAccount = undefined;
         this.topic = undefined;
 
-        super.onAccountChanged(this.account);
+        super.onAccountChanged(this.connectedAccount);
     }
 
     private getAccount(ns: SessionTypes.Namespaces): string | undefined {