Merge pull request #145 from Concordium/enable-signing-of-binary-mess…

…ages

Enable the tests in the wallet-test-bench for signing of binary messages in the mobile wallets

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

@@ -0,0 +1,32 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    // React plugins
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    // Other plugins:
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react", "@typescript-eslint"],
+  parserOptions: {
+    ecmaVersion: "latest",
+    ecmaFeatures: { jsx: true },
+    sourceType: "module",
+    project: ["./tsconfig.json", "./tsconfig.node.json"],
+    tsconfigRootDir: __dirname,
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  rules: {
+    "@typescript-eslint/no-unused-vars": "warn",
+  },
+};

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

@@ -1,8 +1,14 @@
 ## Unreleased changes
 
+## 1.5.4
+
+- Update `@concordium/web-sdk` dependency to version 7.0.0.
+- Update `dapp-library` dependency.
+- Enable tests for signing of byte messages in the mobile wallets.
+
 ## 1.5.3
 
-Update smart contract to be more efficient.
+- Update smart contract to be more efficient.
 
 ## 1.5.2
 
@@ -18,12 +24,12 @@ Update smart contract to be more efficient.
 
 ## 1.4.1
 
-- Add maxEnergy input field
+- Add maxEnergy input field.
 
 ## 1.4.0
 
-- Add link to source code
-- Change that selected switch option is in bold font
+- Add link to source code.
+- Change that selected switch option is in bold font.
 
 ## 1.2.0
 

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

@@ -26,15 +26,8 @@ cd ../wallet-connect-test-bench/front-end
 
 To start the front end locally, do the following:
 
-- Run `yarn build` in this folder.
-- Run `yarn start` in this folder.
-- 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 this folder in a terminal.
-- Run `yarn start` in this folder in another terminal.
-- Open URL logged in console (typically http://127.0.0.1:8080).
+- Run `yarn dev` in this folder.
+- Open URL logged in console (typically http://localhost:5174/).
 
 ## Using yarn (on Unix/macOS systems)
 

wallet-connect-test-bench/front-end/package.json

@@ -1,19 +1,19 @@
 {
   "name": "test-bench-for-wallets",
   "packageManager": "[email protected]",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "license": "Apache-2.0",
   "type": "module",
   "engines": {
     "node": ">=16.x"
   },
   "dependencies": {
-    "@concordium/browser-wallet-api-helpers": "^2.4.0",
+    "@concordium/browser-wallet-api-helpers": "^3.0.0",
     "@concordium/react-components": "../../deps/concordium-dapp-libraries/packages/react-components",
     "@concordium/wallet-connectors": "../../deps/concordium-dapp-libraries/packages/wallet-connectors",
-    "@concordium/web-sdk": "^6.0.0",
+    "@concordium/web-sdk": "^7.0.0",
     "@walletconnect/types": "^2.1.4",
-    "eslint": "^8.37.0",
+    "json-bigint": "^1.0.0",
     "moment": "^2.29.4",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
@@ -22,9 +22,10 @@
   "resolutions": {
     "@concordium/wallet-connectors": "../../deps/concordium-dapp-libraries/packages/wallet-connectors",
     "@concordium/react-components": "../../deps/concordium-dapp-libraries/packages/react-components",
-    "@concordium/web-sdk": "^6.0.0"
+    "@concordium/web-sdk": "^7.0.0"
   },
   "devDependencies": {
+    "@types/json-bigint": "^1.0.4",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^6.0.0",

wallet-connect-test-bench/front-end/src/Main.tsx

@@ -1,6 +1,7 @@
-/* eslint-disable no-console */
 import { useEffect, useState, ChangeEvent, PropsWithChildren } from "react";
 import Switch from "react-switch";
+import JSONbig from "json-bigint";
+import { Buffer } from "buffer/";
 import { toBuffer, serializeTypeValue } from "@concordium/web-sdk";
 import {
   useGrpcClient,
@@ -179,15 +180,15 @@ export default function Main(props: WalletConnectionProps) {
   };
 
   // Refresh accountInfo periodically.
-  // eslint-disable-next-line consistent-return
+
   useEffect(() => {
     if (grpcClient && account) {
       const interval = setInterval(() => {
         console.log("refreshing1");
         accountInfo(grpcClient, account)
           .then((value) => {
             if (value !== undefined) {
-              setAccountBalance(value.accountAmount.toString());
+              setAccountBalance(value.accountAmount.microCcdAmount.toString());
             }
             setViewError("");
           })
@@ -201,7 +202,7 @@ export default function Main(props: WalletConnectionProps) {
   }, [grpcClient, account]);
 
   // Refresh smartContractInfo periodically.
-  // eslint-disable-next-line consistent-return
+
   useEffect(() => {
     if (grpcClient) {
       const interval = setInterval(() => {
@@ -223,7 +224,7 @@ export default function Main(props: WalletConnectionProps) {
   }, [grpcClient, account]);
 
   // Refresh view periodically.
-  // eslint-disable-next-line consistent-return
+
   useEffect(() => {
     if (grpcClient && account) {
       const interval = setInterval(() => {
@@ -249,7 +250,7 @@ export default function Main(props: WalletConnectionProps) {
       accountInfo(grpcClient, account)
         .then((value) => {
           if (value !== undefined) {
-            setAccountBalance(value.accountAmount.toString());
+            setAccountBalance(value.accountAmount.microCcdAmount.toString());
           }
           setViewError("");
         })
@@ -258,10 +259,10 @@ export default function Main(props: WalletConnectionProps) {
           setAccountBalance("");
         });
     }
-  }, [grpcClient]);
+  }, [grpcClient, account]);
 
   useEffect(() => {
-    if (grpcClient && account) {
+    if (grpcClient) {
       smartContractInfo(grpcClient)
         .then((value) => {
           if (value !== undefined) {
@@ -277,7 +278,7 @@ export default function Main(props: WalletConnectionProps) {
   }, [grpcClient]);
 
   useEffect(() => {
-    if (grpcClient && account) {
+    if (grpcClient) {
       view(grpcClient)
         .then((value) => {
           if (value !== undefined) {
@@ -577,7 +578,7 @@ export default function Main(props: WalletConnectionProps) {
                         getValue(grpcClient, useModuleSchema, readDropDown)
                           .then((value) => {
                             if (value !== undefined) {
-                              setReturnValue(JSON.stringify(value));
+                              setReturnValue(JSONbig.stringify(value));
                             }
                           })
                           .catch((e) => {
@@ -1113,7 +1114,7 @@ export default function Main(props: WalletConnectionProps) {
                       setByteSignature("");
                       const promise = connection.signMessage(account, {
                         type: "BinaryMessage",
-                        value: serializedMessage,
+                        value: Buffer.from(serializedMessage.buffer),
                         schema: {
                           type: "TypeSchema",
                           value: toBuffer(
@@ -1238,7 +1239,7 @@ export default function Main(props: WalletConnectionProps) {
               <br />
               <div className="label">Smart contract state:</div>
               <pre className="largeText">
-                {JSON.stringify(record, null, "\t")}
+                {JSONbig.stringify(record, null, "\t")}
               </pre>
             </div>
           </div>

wallet-connect-test-bench/front-end/src/Root.tsx

@@ -1,11 +1,12 @@
 import { WithWalletConnector, TESTNET } from "@concordium/react-components";
-import Main from "./Main";
 
 /**
  * Connect to wallet, setup application state context, and render children when the wallet API is ready for use.
  */
 import React from "react";
 import ReactDOM from "react-dom/client";
+
+import Main from "./Main";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(

wallet-connect-test-bench/front-end/src/WalletConnectorTypeButton.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import { useCallback } from "react";
 import {
   ConnectorType,
@@ -32,7 +30,7 @@ export function WalletConnectionTypeButton(props: Props) {
   const onClick = useCallback(() => {
     setWaitingForUser(false);
     select();
-  }, [select]);
+  }, [select, setWaitingForUser]);
   return (
     <button
       className="btn btn-primary"

wallet-connect-test-bench/front-end/src/constants.ts

@@ -3,6 +3,9 @@ import {
   ephemeralConnectorType,
   WalletConnectConnector,
   CONCORDIUM_WALLET_CONNECT_PROJECT_ID,
+  WalletConnectNamespaceConfig,
+  WalletConnectEvent,
+  WalletConnectMethod,
 } from "@concordium/react-components";
 import { SignClientTypes } from "@walletconnect/types";
 import moment from "moment";
@@ -100,9 +103,24 @@ const WALLET_CONNECT_OPTS: SignClientTypes.Options = {
   },
 };
 
+// This `WALLET_CONNECT_SCOPE` currently excludes the `RequestVerifiablePresentation` method compared to the default `FULL_WALLET_CONNECT_NAMESPACE_CONFIG`. This method is not supported by legacy wallets. To continue testing legacy wallets it is excluded here.
+export const WALLET_CONNECT_SCOPE: WalletConnectNamespaceConfig = {
+  methods: [
+    WalletConnectMethod.SignMessage,
+    WalletConnectMethod.SignAndSendTransaction,
+  ],
+  events: [WalletConnectEvent.AccountsChanged, WalletConnectEvent.ChainChanged],
+};
+
 export const BROWSER_WALLET = ephemeralConnectorType(
   BrowserWalletConnector.create
 );
-export const WALLET_CONNECT = ephemeralConnectorType(
-  WalletConnectConnector.create.bind(undefined, WALLET_CONNECT_OPTS)
+
+export const WALLET_CONNECT = ephemeralConnectorType((delegate, network) =>
+  WalletConnectConnector.create(
+    WALLET_CONNECT_OPTS,
+    delegate,
+    network,
+    WALLET_CONNECT_SCOPE
+  )
 );