UI adjustment

compliant-reward-distribution/README.md

@@ -26,10 +26,14 @@ However, the easiest option is to use [docker-compose](https://docs.docker.com/c
 
 For this to work, you should do the following:
 
-1. Set the following environment variables:
+1. Initialize local dependencies:
+```
+git submodule update --init --recursive
+```
+2. Set the following environment variables:
    - (Optional) Set the `ADMIN_ACCOUNT` variable to an account address. This account can read and write to the database.
    - (Optional) Set the `CONCORDIUM_NODE` to the gRPC endpoint of the node you want to use. Defaults to `https://grpc.testnet.concordium.com:20000`.
-2. Run `docker-compose up` to build and start all the services.
+3. Run `docker-compose up` to build and start all the services.
 
 e.g.
 

compliant-reward-distribution/frontend/package.json

@@ -5,7 +5,7 @@
     "packageManager": "[email protected]",
     "scripts": {
         "dev": "vite",
-        "build": "tsc && vite build",
+        "build": "tsc && vite build && cp -r ./assets ./dist/",
         "lint": "eslint . --cache --max-warnings 0 --ext .ts,.tsx",
         "lint-fix": "yarn lint --fix",
         "fmt-check": "prettier --check .",

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

@@ -1,21 +1,24 @@
 import { useEffect, useRef, useState } from 'react';
-import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
-import { Button } from 'react-bootstrap';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
 import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport';
 import { ConcordiumGRPCClient } from '@concordium/web-sdk';
 
 import './styles.scss';
 import { WalletProvider } from './wallet-connection';
 import { version } from '../package.json';
+import { LandingPage } from './components/LandingPage';
 import { ConnectWallet } from './components/ConnectWallet';
 import { ZkProofSubmission } from './components/ZkProofSubmission';
 import { Admin } from './components/Admin/Admin';
 import { TweetSubmission } from './components/TweetSubmission';
+import { Alert } from 'react-bootstrap';
+import { FinalPage } from './components/FinalPage';
 
 export const App = () => {
     const [provider, setProvider] = useState<WalletProvider>();
     const [connectedAccount, setConnectedAccount] = useState<string>();
+    const [error, setError] = useState<string | undefined>();
 
     const grpcClient = useRef(new ConcordiumGRPCClient(new GrpcWebFetchTransport({ baseUrl: CONFIG.node }))).current;
     const capitalizedNetwork = CONFIG.network[0].toUpperCase() + CONFIG.network.substring(1);
@@ -41,64 +44,75 @@ export const App = () => {
     }, [provider]);
 
     const connectProvider = async (provider: WalletProvider) => {
-        const account = await provider.connect();
-        if (account) {
-            setConnectedAccount(account);
+        try {
+            setError(undefined);
+            const account = await provider.connect();
+            account ? setConnectedAccount(account) : setError('Connecting to wallet but no account found');
+        } catch (e) {
+            setError((e as Error).message);
+        } finally {
+            setProvider(provider);
         }
-        setProvider(provider);
     };
 
     return (
         <Router>
             <div className="navbar">
-                <div>
-                    <a
-                        target="_blank"
-                        rel="noreferrer"
-                        href={`https://github.com/Concordium/concordium-dapp-examples/tree/main/compliant-reward-distribution`}
-                    >
-                        Version {version} ({capitalizedNetwork})
-                    </a>
-                </div>
-                <Link className="secondary" to="/connectWallet">
-                    ConnectWallet
-                </Link>
-                <Link className="secondary" to="/tweetSubmission">
-                    SubmitTweet
-                </Link>
-                <Link className="secondary" to="/zkProofSubmission">
-                    SubmitZKProof
-                </Link>
-                <Link className="secondary" to="/admin">
-                    Admin
-                </Link>
+                <div className="centered">
+                    <div>
+                        <a
+                            className="customGreen"
+                            target="_blank"
+                            rel="noreferrer"
+                            href={`https://github.com/Concordium/concordium-dapp-examples/tree/main/compliant-reward-distribution`}
+                        >
+                            Version {version} ({capitalizedNetwork})
+                        </a>
+                    </div>
+
+                    {error && <Alert variant="error">{error}</Alert>}
 
-                <Button id="accountAddress" disabled={true}>
-                    {connectedAccount
-                        ? connectedAccount.slice(0, 5) + '...' + connectedAccount.slice(-5)
-                        : 'No Account Connected'}
-                </Button>
+                    {connectedAccount && (
+                        <a
+                            className="customGreen"
+                            target="_blank"
+                            rel="noreferrer"
+                            // TODO: add link to CCDscan account address.
+                            href={`https://testnet.ccdscan.io/`}
+                        >
+                            {connectedAccount.slice(0, 5) + '...' + connectedAccount.slice(-5)}
+                        </a>
+                    )}
+                </div>
             </div>
 
             <Routes>
+                <Route path="/" element={<LandingPage />} />
                 <Route
                     path="/connectWallet"
                     element={<ConnectWallet connectProvider={connectProvider} connectedAccount={connectedAccount} />}
                 />
+                <Route
+                    path="/tweetSubmission"
+                    element={<TweetSubmission signer={connectedAccount} provider={provider} grpcClient={grpcClient} />}
+                />
                 <Route
                     path="/zkProofSubmission"
                     element={
                         <ZkProofSubmission prover={connectedAccount} provider={provider} grpcClient={grpcClient} />
                     }
                 />
-                <Route
-                    path="/tweetSubmission"
-                    element={<TweetSubmission signer={connectedAccount} provider={provider} grpcClient={grpcClient} />}
-                />
-
+                <Route path="/finalPage" element={<FinalPage />} />
                 <Route
                     path="/Admin"
-                    element={<Admin signer={connectedAccount} provider={provider} grpcClient={grpcClient} />}
+                    element={
+                        <Admin
+                            signer={connectedAccount}
+                            provider={provider}
+                            grpcClient={grpcClient}
+                            connectProvider={connectProvider}
+                        />
+                    }
                 />
                 <Route path="/" element={<div></div>} />
             </Routes>

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

@@ -3,19 +3,43 @@ import { ConcordiumGRPCClient } from '@concordium/web-sdk';
 import { AdminGetAccountData } from './AdminGetAccountData';
 import { AdminGetPendingApprovals } from './AdminGetPendingApprovals';
 import { AdminSetClaimed } from './AdminSetClaimed';
-import { WalletProvider } from '../../wallet-connection';
+import { BrowserWalletProvider, WalletConnectProvider, WalletProvider } from '../../wallet-connection';
+import { Button } from 'react-bootstrap';
 
 interface Props {
     signer: string | undefined;
     grpcClient: ConcordiumGRPCClient | undefined;
     provider: WalletProvider | undefined;
+    connectProvider: (provider: WalletProvider) => void;
 }
 
 export function Admin(props: Props) {
-    const { signer, grpcClient, provider } = props;
+    const { signer, grpcClient, provider, connectProvider } = props;
 
     return (
         <div className="centered">
+            {!signer && (
+                <div className="card">
+                    <h2 className="centered white">Connect your wallet</h2>
+                    <br />
+                    <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>
+                </div>
+            )}
+
             <AdminGetPendingApprovals provider={provider} signer={signer} grpcClient={grpcClient} />
             <AdminGetAccountData provider={provider} signer={signer} grpcClient={grpcClient} />
             <AdminSetClaimed provider={provider} signer={signer} grpcClient={grpcClient} />

compliant-reward-distribution/frontend/src/components/Admin/AdminGetAccountData.tsx

@@ -59,11 +59,11 @@ export function AdminGetAccountData(props: Props) {
     return (
         <div className="centered">
             <div className="card">
-                <h2 className="centered">Get Account Data</h2>
+                <h2 className="centered white">Get Account Data</h2>
                 <br />
                 <Form onSubmit={handleSubmit(onSubmit)}>
                     <Form.Group className="col mb-3">
-                        <Form.Label>Address</Form.Label>
+                        <Form.Label className="white">Address</Form.Label>
                         <Form.Control
                             {...register('address', { required: true, validate: validateAccountAddress })}
                             placeholder="4bbdAUCDK2D6cUvUeprGr4FaSaHXKuYmYVjyCa4bXSCu3NUXzA"
@@ -78,7 +78,7 @@ export function AdminGetAccountData(props: Props) {
                     </Button>
 
                     <br />
-                    {accountData && <pre className="pre">{JSONbig.stringify(accountData, undefined, 2)}</pre>}
+                    {accountData && <pre className="pre white">{JSONbig.stringify(accountData, undefined, 2)}</pre>}
 
                     {error && <Alert variant="danger">{error}</Alert>}
                 </Form>

compliant-reward-distribution/frontend/src/components/Admin/AdminGetPendingApprovals.tsx

@@ -53,7 +53,7 @@ export function AdminGetPendingApprovals(props: Props) {
     return (
         <div className="centered">
             <div className="card">
-                <h2 className="centered">Get Pending Approvals</h2>
+                <h2 className="centered white">Get Pending Approvals</h2>
                 <br />
                 <Form onSubmit={handleSubmit(onSubmit)}>
                     <Button variant="primary" type="submit">
@@ -62,7 +62,9 @@ export function AdminGetPendingApprovals(props: Props) {
 
                     {error && <Alert variant="danger">{error}</Alert>}
 
-                    {pendingApprovals && <pre className="pre">{JSONbig.stringify(pendingApprovals, undefined, 2)}</pre>}
+                    {pendingApprovals && (
+                        <pre className="pre white">{JSONbig.stringify(pendingApprovals, undefined, 2)}</pre>
+                    )}
                 </Form>
             </div>
         </div>

compliant-reward-distribution/frontend/src/components/Admin/AdminSetClaimed.tsx

@@ -59,11 +59,11 @@ export function AdminSetClaimed(props: Props) {
     return (
         <div className="centered">
             <div className="card">
-                <h2 className="centered">Set Claimed</h2>
+                <h2 className="centered white">Set Claimed</h2>
                 <br />
                 <Form onSubmit={handleSubmit(onSubmit)}>
                     <Form.Group className="col mb-3">
-                        <Form.Label>Address</Form.Label>
+                        <Form.Label className="white">Address</Form.Label>
                         <Form.Control
                             {...register('address', { required: true, validate: validateAccountAddress })}
                             placeholder="4bbdAUCDK2D6cUvUeprGr4FaSaHXKuYmYVjyCa4bXSCu3NUXzA"