Cleanup PR

.github/workflows/yarn-build-fmt-lint.yaml

@@ -6,7 +6,7 @@ on:
 
   pull_request:
     branches: main
-  
+
 env:
   NODE_VERSION: "lts/*"
 
@@ -29,6 +29,7 @@ jobs:
           - sponsoredTransactionsAuction/frontend
           - trackAndTrace/frontend
           - testnet-faucet
+          - compliant-reward-distribution/frontend
 
     steps:
       - name: Checkout
@@ -71,6 +72,7 @@ jobs:
           - sponsoredTransactionsAuction/frontend
           - trackAndTrace/frontend
           - testnet-faucet
+          - compliant-reward-distribution/frontend
 
     steps:
       - name: Checkout
@@ -93,7 +95,7 @@ jobs:
       - name: Run Prettier
         working-directory: ${{ matrix.packages }}
         run: yarn prettier -c .
-  
+
   build:
     name: Building Frontend
     # Don't run on draft pull requests
@@ -115,6 +117,7 @@ jobs:
           - sponsoredTransactionsAuction/frontend
           - trackAndTrace/frontend
           - testnet-faucet
+          - compliant-reward-distribution/frontend
 
     steps:
       - name: Checkout

compliant-reward-distribution/frontend/.eslintignore

@@ -2,4 +2,3 @@
 .yarn/
 node_modules/
 dist/
-generated/

compliant-reward-distribution/frontend/.prettierignore

@@ -1,2 +1 @@
 .vite
-generated

compliant-reward-distribution/frontend/package.json

@@ -13,35 +13,33 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@concordium/react-components": "^0.4.0",
-        "@concordium/wallet-connectors": "^0.4.0",
+        "@concordium/browser-wallet-api-helpers": "^3.0.1",
         "@concordium/web-sdk": "^7.3.2",
-        "@types/sha256": "^0.2.2",
+        "@protobuf-ts/grpcweb-transport": "^2.9.4",
+        "@walletconnect/qrcode-modal": "^1.8.0",
+        "@walletconnect/sign-client": "^2.16.1",
         "bootstrap": "^5.3.3",
         "buffer": "^6.0.3",
         "json-bigint": "^1.0.0",
-        "moment": "^2.30.1",
         "react": "^18.2.0",
         "react-bootstrap": "^2.10.1",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.50.1",
         "react-router-dom": "^6.22.1",
-        "react-select": "^5.8.0",
-        "react-switch": "^7.0.0",
         "rollup-plugin-node-polyfills": "^0.2.1",
         "sha256": "^0.2.0",
         "vite-plugin-node-polyfills": "^0.21.0"
     },
     "devDependencies": {
-        "@concordium/ccd-js-gen": "^1.2.0",
-        "@swc-jotai/react-refresh": "^0.1.0",
         "@types/json-bigint": "^1.0.4",
         "@types/react": "^18.2.55",
         "@types/react-dom": "^18.2.19",
         "@types/react-router-dom": "^5.3.3",
+        "@types/sha256": "^0.2.2",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "@typescript-eslint/parser": "^6.20.0",
         "@vitejs/plugin-react-swc": "^3.6.0",
+        "@walletconnect/types": "^2.16.1",
         "dotenv": "^16.3.1",
         "eslint": "^8.45.0",
         "eslint-config-prettier": "^9.0.0",

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

@@ -1,9 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
 import { Button } from 'react-bootstrap';
 
-import { TESTNET, useGrpcClient } from '@concordium/react-components';
-
 import { WalletProvider } from './wallet-connection';
 import { version } from '../package.json';
 import './styles.scss';
@@ -12,12 +10,15 @@ import { ConnectWallet } from './components/ConnectWallet';
 import { ZkProofSubmission } from './components/ZkProofSubmission';
 import { Admin } from './components/Admin/Admin';
 import { TweetSubmission } from './components/TweetSubmission';
+import { ConcordiumGRPCClient } from '@concordium/web-sdk';
+import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport';
+import { GRPC_NODE_URL } from './constants';
 
 export const App = () => {
     const [provider, setProvider] = useState<WalletProvider>();
     const [account, setAccount] = useState<string>();
 
-    const grpcClient = useGrpcClient(TESTNET);
+    const grpcClient = useRef(new ConcordiumGRPCClient(new GrpcWebFetchTransport(GRPC_NODE_URL))).current;
 
     useEffect(() => {
         if (provider !== undefined) {

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

@@ -15,11 +15,13 @@ interface Props {
     grpcClient: ConcordiumGRPCClient | undefined;
 }
 
-const checkTweetdFromUrl = (url: string) => {
+const checkTweetUrlFormat = (url: string) => {
     // eslint-disable-next-line no-useless-escape
     const regex = /^https:\/\/(x\.com|twitter\.com)\/[^\/]+\/status\/(\d+)$/;
     if (!url.match(regex)) {
-        throw Error(`Not a valid tweet URL (expected format: https://x.com/MaxMustermann/status/1818198789817077916)`);
+        throw Error(
+            `Not a valid tweet URL (expected format: https://x.com/MaxMustermann/status/1818198789817077916 or https://twitter.com/JohnDoe/status/1818198789817077916)`,
+        );
     }
 };
 
@@ -44,7 +46,7 @@ export function TweetSubmission(props: Props) {
         setSuccessfulSubmission(undefined);
 
         try {
-            checkTweetdFromUrl(tweet);
+            checkTweetUrlFormat(tweet);
 
             if (!signer) {
                 throw Error(`'signer' is undefined. Connect your wallet.`);
@@ -70,7 +72,11 @@ export function TweetSubmission(props: Props) {
                 <Form onSubmit={handleSubmit(onSubmit)}>
                     <Form.Group className="col mb-3">
                         <Form.Label>Tweet</Form.Label>
-                        <Form.Control {...register('tweet', { required: true })} type="text" placeholder="12345" />
+                        <Form.Control
+                            {...register('tweet', { required: true })}
+                            type="text"
+                            placeholder="https://x.com/JohnDoe/status/1818198789817077916"
+                        />
                         {formState.errors.tweet && <Alert variant="info">Tweet is required </Alert>}
                         <Form.Text />
                     </Form.Group>

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

@@ -76,7 +76,7 @@ export function ZkProofSubmission(props: Props) {
                 )
             ) {
                 throw Error(
-                    `When approving the ZK proof in the wallet, select your connected account from the drop-down menu in the wallet (expect proof for ${accountAddress}).`,
+                    `When approving the ZK proof in the wallet, select your connected account from the drop-down menu in the wallet (expect proof for account: ${accountAddress}).`,
                 );
             }
 

compliant-reward-distribution/frontend/src/constants.ts

@@ -1,12 +1,13 @@
 import { SignClientTypes } from '@walletconnect/types';
-import { TESTNET, MAINNET } from '@concordium/wallet-connectors';
 
 const { protocol, hostname, port } = new URL(CONFIG.node);
 export const NODE_HOST = `${protocol}//${hostname}`;
 export const NODE_PORT = Number(port);
 
-/** The Concordium network used for the application. */
-export const NETWORK = CONFIG.network === 'testnet' ? TESTNET : MAINNET;
+// The Concordium node url used for the application.
+export const GRPC_NODE_URL = {
+    baseUrl: `${CONFIG.network === 'testnet' ? `https://grpc.testnet.concordium.com:20000` : `https://grpc.mainnet.concordium.software:20000`}`,
+};
 
 // The string "CONCORDIUM_COMPLIANT_REWARD_DISTRIBUTION_DAPP" is used
 // as context for signing messages and generating ZK proofs. The same account
@@ -32,7 +33,7 @@ export const walletConnectOpts: SignClientTypes.Options = {
 
 // To create the schemas:
 
-// 1. Step: Use expected Rust type from the backend as an input parameter to a smart contract function e.g.:
+// 1. Step: Use the expected Rust type from the backend as an input parameter to a smart contract function e.g.:
 //
 // #[derive(SchemaType)]
 // pub struct TweetParam {