Initial test bench front end

.github/workflows/ci.yaml

@@ -34,6 +34,7 @@ jobs:
           - chain-prometheus-exporter/Cargo.toml
           - recover-id-object/Cargo.toml
           - generator/Cargo.toml
+          - wallet-connect-test-bench/smart-contract/Cargo.toml
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -69,6 +70,7 @@ jobs:
           - chain-prometheus-exporter/Cargo.toml
           - recover-id-object/Cargo.toml
           - generator/Cargo.toml
+          - wallet-connect-test-bench/smart-contract/Cargo.toml
     steps:
       - name: Checkout
         uses: actions/checkout@v2

.gitignore

@@ -1,9 +1,10 @@
 
 **/target
-*.json
 /genesis-creator/genesis.dat
 /genesis-creator/genesis_hash
 /id-demo/dist/*
+/wallet-connect-test-bench/front-end/node_modules
+/wallet-connect-test-bench/front-end/.yarn
 
 # dependencies
 node_modules

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "deps/concordium-rust-sdk"]
 	path = deps/concordium-rust-sdk
 	url = ../concordium-rust-sdk.git
+[submodule "deps/concordium-dapp-libraries"]
+	path = deps/concordium-dapp-libraries
+	url = [email protected]:Concordium/concordium-dapp-libraries.git

state-compare/Cargo.toml

@@ -14,4 +14,4 @@ clap = { version = "3", features = ["derive", "env"] }
 chrono = "0.4"
 tonic = "0.8"
 serde_json = "1.0"
-colored = "2"
+colored = "2"

wallet-connect-test-bench/README.md

@@ -0,0 +1,7 @@
+# Test Bench
+
+A test bench front end for testing various positive/negative scenarios of how the wallets could interact with a smart contract using either a mobile wallet (using wallet connect) or the browser wallet. The front end displays all responses (e.g. error messages returned as well as transaction hashes returned) for further investigation.
+
+The front end uses the [react-components/wallet-connectors libraries](https://github.com/Concordium/concordium-dapp-libraries/tree/main/packages) to create the connection between the wallets and the front end. 
+
+The project has two folders (the `smart-contract` folder and the `front end` folder). 

wallet-connect-test-bench/front-end/.eslintignore

@@ -0,0 +1,9 @@
+.eslintcache
+.yarn
+node_modules
+
+# OSX
+.DS_Store
+
+dist
+

wallet-connect-test-bench/front-end/.eslintrc.js

@@ -0,0 +1,57 @@
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    extends: ['airbnb', 'airbnb-typescript', 'plugin:prettier/recommended', 'plugin:@typescript-eslint/recommended'],
+    parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        ecmaFeatures: {
+            jsx: true,
+        },
+        project: 'tsconfig.json',
+        createDefaultProgram: true,
+    },
+    env: {
+        browser: true,
+        jest: true,
+        node: true,
+    },
+    rules: {
+        'import/prefer-default-export': 0,
+        'no-restricted-exports': 0,
+        'no-restricted-syntax': ['error', 'ForInStatement', 'LabeledStatement', 'WithStatement'],
+        'react/jsx-props-no-spreading': 0,
+        'react/require-default-props': 0,
+        'class-methods-use-this': 0,
+        'jsx-a11y/no-autofocus': 0,
+        'no-await-in-loop': 0,
+        'import/no-extraneous-dependencies': [
+            'error',
+            {
+                devDependencies: [
+                    '**/*.stories.tsx',
+                    '**/build/**/*',
+                    '**/*.config.js',
+                    '**/*.config.ts',
+                    '**/test/**/*',
+                ],
+            },
+        ],
+        'jsx-a11y/label-has-associated-control': [
+            'error',
+            {
+                required: {
+                    some: ['nesting', 'id'],
+                },
+            },
+        ],
+        'prettier/prettier': [
+            'error',
+            {
+                trailingComma: 'es5',
+                singleQuote: true,
+                printWidth: 120,
+                tabWidth: 4,
+            },
+        ],
+    },
+};

wallet-connect-test-bench/front-end/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

wallet-connect-test-bench/front-end/Dockerfile

@@ -0,0 +1,36 @@
+ARG base_image=node:16-slim
+
+FROM ${base_image} AS build
+
+# Copy front end files
+WORKDIR /app
+COPY ./package.json ./front-end/
+COPY ./tsconfig.json ./front-end/
+COPY ./esbuild.config.ts ./front-end/
+COPY ./src ./front-end/src
+COPY ./yarn.lock ./front-end/
+
+# Remove local preinstall command in `package.json` file which causes errors since the patch does not exist in the container
+RUN cd ./front-end/ && sed -i '/preinstall/d' package.json
+
+# Install git
+RUN apt-get update && \
+    apt-get upgrade -y && \
+    apt-get install -y git
+
+# Build dapp libraries
+RUN git clone https://github.com/Concordium/concordium-dapp-libraries.git
+RUN cd ./concordium-dapp-libraries/ && yarn && yarn build
+
+# Install front end dependencies
+RUN cd ./front-end/ && yarn && yarn cache clean
+
+# Copy dapp libaries into front end `node_modules` folder
+RUN cp -r ./concordium-dapp-libraries/packages/react-components ./front-end/node_modules/@concordium/react-components; cp -r ./concordium-dapp-libraries/packages/wallet-connectors ./front-end/node_modules/@concordium/wallet-connectors
+
+# Build front end
+RUN cd ./front-end/ && yarn build
+
+# Serve front end
+FROM nginx
+COPY --from=build ./app/front-end/dist ./usr/share/nginx/html

wallet-connect-test-bench/front-end/Jenkinsfile

@@ -0,0 +1,35 @@
+// Expected parameters:
+// - image_tag: Tag that will be used for the new image.
+// - build_image: Base image that the image being built extends.
+pipeline {
+    agent any
+    environment {
+        image_repo = "concordium/wallet-connect-test-bench"
+        image_name = "${image_repo}:${image_tag}"
+    }
+    stages {
+        stage('dockerhub-login') {
+            environment {
+                // Defines 'CRED_USR' and 'CRED_PSW'
+                // (see 'https://www.jenkins.io/doc/book/pipeline/jenkinsfile/#handling-credentials').
+                CRED = credentials('jenkins-dockerhub')
+            }
+            steps {
+                sh 'docker login --username "${CRED_USR}" --password "${CRED_PSW}"'
+            }
+        }
+        stage('build-push') {
+            steps {
+                sh '''\
+                    docker build \
+                      --build-arg build_image="${build_image}" \
+                      --label build_image="${build_image}" \
+                      --tag="${image_name}" \
+                      --pull \
+                      ./wallet-connect-test-bench
+                    docker push "${image_name}"
+                '''.stripIndent()
+            }
+        }
+    }
+}

wallet-connect-test-bench/front-end/README.md

@@ -0,0 +1,81 @@
+# Test Bench
+
+A test bench for testing mobile wallets (via walletConnect) or the browser wallet.
+
+## Prerequisites
+
+-   Browser wallet extension must be installed in Chrome browser and the Concordium testnet needs to be selected or a mobile wallet needs to be set up that supports walletConnect in order to view smart contract details or submit transactions.
+
+## Running the test bench front-end
+
+Clone the repo:
+
+```shell
+git clone --recursive-submodules [email protected]:Concordium/concordium-misc-tools
+```
+
+Navigate into ./deps/concordium-dapplibraries and build the dApp libraries packages:
+
+```shell
+cd ./deps/concordium-dapp-libraries/
+yarn
+yarn build
+```
+
+Navigate into this folder:
+```shell
+cd ../wallet-connect-test-bench/front-end
+```
+
+-   Run `yarn install` in this folder.
+-   Run `preinstall` in this folder.
+-   Run `yarn build` in a terminal in this folder.
+-   Run `yarn start`.
+-   Open URL logged in console (typically http://127.0.0.1:8080).
+
+To have hot-reload (useful for development), do the following instead:
+
+-   Run `yarn watch` in a terminal.
+-   Run `yarn start` in another terminal.
+-   Open URL logged in console (typically http://127.0.0.1:8080).
+
+## Using yarn (on unix/macOS systems)
+Some of the node modules have Windows-type line endings (\r\n), instead of unix line endings (\n), which causes problems when using an old yarn package manager.
+
+If you see an error message similar to this when executing `yarn start`, then you've run into the problem:
+```shell
+env: node\r: No such file or directory
+```
+
+Use `npm install` instead of `yarn install` in the above command or use an up-to-date `yarn` version. `npm` (newer `yarn` version) will correct the line ending.
+
+Additional information can be found [here](https://techtalkbook.com/env-noder-no-such-file-or-directory/).
+
+## Build and run the Docker image
+
+To build the docker image run the following command in this folder:
+
+```
+docker build -t test_bench:$PROJECT_VERSION .
+```
+
+e.g.
+
+```
+docker build -t test_bench:3.0.0 .
+```
+
+To run the docker image run the following command:
+
+```
+docker run -it -d -p 8080:80 --name web test_bench:$PROJECT_VERSION
+```
+
+e.g.
+
+```
+docker run -it -d -p 8080:80 --name web test_bench:3.0.0
+```
+
+Open http://127.0.0.1:8080 in your browser.
+

wallet-connect-test-bench/front-end/esbuild.config.ts

@@ -0,0 +1,63 @@
+/* eslint-disable no-console */
+/* eslint-disable import/no-extraneous-dependencies */
+import esbuild, { BuildOptions } from 'esbuild';
+import { htmlPlugin } from '@craftamap/esbuild-plugin-html';
+import svgrPlugin from 'esbuild-plugin-svgr';
+import fs from 'fs';
+
+const watch = Boolean(process.env.WATCH);
+
+const main = 'src/index.tsx';
+
+const htmlTemplate = fs.readFileSync('src/index.html').toString();
+const htmlOut = 'index.html';
+
+const config: BuildOptions = {
+    entryPoints: [main],
+    entryNames: '[name]',
+    bundle: true,
+    minify: true,
+    metafile: true,
+    logLevel: 'info',
+    sourcemap: 'inline',
+    target: ['chrome67'],
+    outdir: 'dist',
+    plugins: [
+        htmlPlugin({
+            files: [
+                {
+                    entryPoints: [main],
+                    filename: htmlOut,
+                    htmlTemplate,
+                },
+            ],
+        }),
+        svgrPlugin(),
+    ],
+    // https://github.com/evanw/esbuild/issues/73#issuecomment-1204706295
+    define: {
+        global: 'window',
+    },
+};
+
+if (watch) {
+    config.watch = {
+        onRebuild(error) {
+            if (error) {
+                console.error('watch build failed:', error);
+                return;
+            }
+
+            console.log('rebuild successful');
+        },
+    };
+}
+
+esbuild
+    .build(config)
+    .then(() => {
+        if (watch) {
+            console.log('watching for changes...');
+        }
+    })
+    .catch(() => process.exit(1));