Add wallet connection

compliant-reward-distribution/frontend/src/App.tsx

@@ -1,27 +1,33 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
 import { Button } from 'react-bootstrap';
 
-import { WalletConnectionProps, useConnection, useConnect } from '@concordium/react-components';
-
-import './styles.scss';
-import { AdminCreateItem } from './components/AdminCreateItem';
-import { AdminChangeRoles } from './components/AdminChangeRoles';
-import { ChangeItemStatus } from './components/ChangeItemStatus';
-import { Explorer } from './components/Explorer';
-import { AddTransitionRule } from './components/AddTransitionRule';
-import * as constants from './constants';
+import { WalletProvider } from '../wallet-connection';
+import { ConnectWallet } from './components/ConnectWallet';
+import { ZkProofSubmission } from './components/ZkProofSubmission';
 import { version } from '../package.json';
+import './styles.scss';
 
-export const App = (props: WalletConnectionProps) => {
-    const { setActiveConnectorType, activeConnectorError, activeConnector, connectedAccounts, genesisHashes } = props;
-
-    const { connection, setConnection, account } = useConnection(connectedAccounts, genesisHashes);
-    const { connect } = useConnect(activeConnector, setConnection);
+export const App = () => {
+    const [provider, setProvider] = useState<WalletProvider>();
+    const [account, setAccount] = useState<string>();
 
     useEffect(() => {
-        setActiveConnectorType(constants.BROWSER_WALLET);
-    }, [setActiveConnectorType]);
+        if (provider !== undefined) {
+            return () => {
+                provider?.disconnect?.().then(() => provider.removeAllListeners());
+            };
+        }
+    }, [provider]);
+
+    const connectProvider = async (provider: WalletProvider) => {
+        const accounts = await provider.connect();
+        // TODO if no account or wrong network; report error.
+        if (accounts && accounts?.length != 0) {
+            setAccount(accounts[0]);
+        }
+        setProvider(provider);
+    };
 
     return (
         <Router>
@@ -35,67 +41,57 @@ export const App = (props: WalletConnectionProps) => {
                         Version {version}
                     </a>
                 </div>
-                <Link className="secondary" to="/explorer">
-                    Explorer
+                <Link className="secondary" to="/connectWallet">
+                    ConnectWallet
                 </Link>
-                <Link className="secondary" to="/changeItemStatus">
-                    Admin1
+                <Link className="secondary" to="/tweetSubmission">
+                    Tweet
                 </Link>
-                <Link className="secondary" to="/adminCreateItem">
-                    Admin2
+                <Link className="secondary" to="/zkProofSubmission">
+                    ZKProof
                 </Link>
                 <Link className="secondary" to="/adminChangeRoles">
                     Admin3
                 </Link>
                 <Link className="secondary" to="/addTransitionRule">
                     Admin4
                 </Link>
-                <Button
-                    variant="primary"
-                    id="account"
-                    disabled={activeConnector && !account ? false : true}
-                    onClick={connect}
-                >
-                    {account
-                        ? account.slice(0, 5) + '...' + account.slice(-5)
-                        : activeConnector
-                          ? 'Connect Wallet'
-                          : 'Loading...'}
+
+                <Button id="accountAddress" disabled={true}>
+                    {account ? account.slice(0, 5) + '...' + account.slice(-5) : 'No Account Connected'}
                 </Button>
             </div>
 
             <Routes>
-                <Route path="/explorer" element={<Explorer />} />
                 <Route
-                    path="/adminCreateItem"
-                    element={
-                        <AdminCreateItem
-                            activeConnectorError={activeConnectorError}
-                            connection={connection}
-                            accountAddress={account}
-                        />
-                    }
+                    path="/connectWallet"
+                    element={<ConnectWallet connectProvider={connectProvider} account={account} />}
                 />
                 <Route
-                    path="/adminChangeRoles"
+                    path="/zkProofSubmission"
+                    element={<ZkProofSubmission accountAddress={account} provider={provider} />}
+                />
+                {/* <Route
+                    path="/tweetSubmission"
                     element={
-                        <AdminChangeRoles
+                        <TweetSubmission
                             activeConnectorError={activeConnectorError}
                             connection={connection}
                             accountAddress={account}
                         />
                     }
                 />
                 <Route
-                    path="/changeItemStatus"
+                    path="/adminChangeRoles"
                     element={
-                        <ChangeItemStatus
+                        <AdminChangeRoles
                             activeConnectorError={activeConnectorError}
                             connection={connection}
                             accountAddress={account}
                         />
                     }
                 />
+
                 <Route
                     path="/addTransitionRule"
                     element={
@@ -105,7 +101,7 @@ export const App = (props: WalletConnectionProps) => {
                             accountAddress={account}
                         />
                     }
-                />
+                /> */}
                 <Route path="/" element={<div></div>} />
             </Routes>
         </Router>

compliant-reward-distribution/frontend/src/components/ConnectWallet.tsx

@@ -0,0 +1,49 @@
+import { Button } from 'react-bootstrap';
+import { BrowserWalletProvider, WalletConnectProvider, WalletProvider } from '../../wallet-connection';
+
+interface Props {
+    account: string | undefined;
+    connectProvider: (provider: WalletProvider) => void;
+}
+
+export function ConnectWallet(props: Props) {
+    const { account, connectProvider } = props;
+
+    return (
+        <div className="centered">
+            <div className="card">
+                <h2 className="centered"> Connect your wallet</h2>
+                <Button
+                    variant="primary"
+                    onClick={async () => connectProvider(await BrowserWalletProvider.getInstance())}
+                >
+                    Browser wallet
+                </Button>
+                <br />
+                <Button
+                    variant="primary"
+                    onClick={async () => connectProvider(await WalletConnectProvider.getInstance())}
+                >
+                    Android CryptoX Wallet
+                </Button>
+                <br />
+                <Button
+                    variant="primary"
+                    disabled={true}
+                    onClick={async () => connectProvider(await WalletConnectProvider.getInstance())}
+                >
+                    iOS CryptoX Wallet [Coming Soon]
+                </Button>
+                <br />
+                {account && (
+                    <>
+                        <div className="centered">Connected Account:</div>
+                        <Button variant="info" id="accountAddress" disabled={true} hidden={account === undefined}>
+                            {account ? account : 'No Account Connected'}
+                        </Button>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}

compliant-reward-distribution/frontend/src/components/ChangeItemStatus.tsx → compliant-reward-distribution/frontend/src/components/TweetSubmission.tsx

@@ -10,7 +10,7 @@ import { useGrpcClient } from '@concordium/react-components';
 import { AccountAddress, Timestamp } from '@concordium/web-sdk';
 
 import { TxHashLink } from './CCDScanLinks';
-import * as constants from '.././constants';
+import * as constants from '../constants';
 import { nonceOf } from '../track_and_trace_contract';
 import * as TrackAndTraceContract from '../../generated/module_track_and_trace'; // Code generated from a smart contract module. The naming convention of the generated file is `moduleName_smartContractName`.
 import { ToTokenIdU64 } from '../utils';
@@ -72,7 +72,7 @@ function generateMessage(
     }
 }
 
-export function ChangeItemStatus(props: Props) {
+export function TweetSubmission(props: Props) {
     const { connection, accountAddress, activeConnectorError } = props;
 
     interface FormType {