From ed526d66ee15d08dca280bd195c666c2e1770984 Mon Sep 17 00:00:00 2001 From: Doris Benda Date: Mon, 22 Apr 2024 20:00:03 +0300 Subject: [PATCH 1/6] Add signing of binary messages in mobile wallets --- deps/concordium-dapp-libraries | 2 +- .../front-end/.eslintrc.cjs | 32 + .../front-end/.eslintrc.js | 67 --- wallet-connect-test-bench/front-end/README.md | 11 +- .../front-end/src/Main.tsx | 13 +- .../front-end/src/Root.tsx | 9 +- .../src/WalletConnectorTypeButton.tsx | 4 +- .../front-end/src/constants.ts | 15 + .../front-end/src/writing_to_blockchain.ts | 1 - wallet-connect-test-bench/front-end/yarn.lock | 563 ++++++++++-------- 10 files changed, 366 insertions(+), 351 deletions(-) create mode 100644 wallet-connect-test-bench/front-end/.eslintrc.cjs delete mode 100644 wallet-connect-test-bench/front-end/.eslintrc.js diff --git a/deps/concordium-dapp-libraries b/deps/concordium-dapp-libraries index 5f0da435..08445153 160000 --- a/deps/concordium-dapp-libraries +++ b/deps/concordium-dapp-libraries @@ -1 +1 @@ -Subproject commit 5f0da435efb7ff2a12de19b46c02ebb680c732e0 +Subproject commit 08445153925709bc4841a10cc4b13b10a0f33cb2 diff --git a/wallet-connect-test-bench/front-end/.eslintrc.cjs b/wallet-connect-test-bench/front-end/.eslintrc.cjs new file mode 100644 index 00000000..0ee5dc19 --- /dev/null +++ b/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", + }, +}; diff --git a/wallet-connect-test-bench/front-end/.eslintrc.js b/wallet-connect-test-bench/front-end/.eslintrc.js deleted file mode 100644 index d6221577..00000000 --- a/wallet-connect-test-bench/front-end/.eslintrc.js +++ /dev/null @@ -1,67 +0,0 @@ -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, - }, - ], - }, -}; diff --git a/wallet-connect-test-bench/front-end/README.md b/wallet-connect-test-bench/front-end/README.md index b4109df0..0829b6b7 100644 --- a/wallet-connect-test-bench/front-end/README.md +++ b/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) diff --git a/wallet-connect-test-bench/front-end/src/Main.tsx b/wallet-connect-test-bench/front-end/src/Main.tsx index e1b16a0d..fc3a9053 100644 --- a/wallet-connect-test-bench/front-end/src/Main.tsx +++ b/wallet-connect-test-bench/front-end/src/Main.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import { useEffect, useState, ChangeEvent, PropsWithChildren } from "react"; import Switch from "react-switch"; import { toBuffer, serializeTypeValue } from "@concordium/web-sdk"; @@ -179,7 +178,7 @@ export default function Main(props: WalletConnectionProps) { }; // Refresh accountInfo periodically. - // eslint-disable-next-line consistent-return + useEffect(() => { if (grpcClient && account) { const interval = setInterval(() => { @@ -201,7 +200,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 +222,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(() => { @@ -258,10 +257,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 +276,7 @@ export default function Main(props: WalletConnectionProps) { }, [grpcClient]); useEffect(() => { - if (grpcClient && account) { + if (grpcClient) { view(grpcClient) .then((value) => { if (value !== undefined) { diff --git a/wallet-connect-test-bench/front-end/src/Root.tsx b/wallet-connect-test-bench/front-end/src/Root.tsx index d6125c3e..49a06781 100644 --- a/wallet-connect-test-bench/front-end/src/Root.tsx +++ b/wallet-connect-test-bench/front-end/src/Root.tsx @@ -1,16 +1,21 @@ 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"; +import { PARTIAL_WALLET_CONNECT_NAMESPACE_CONFIG } from "./constants"; ReactDOM.createRoot(document.getElementById("root")!).render( - + {(props) =>
} diff --git a/wallet-connect-test-bench/front-end/src/WalletConnectorTypeButton.tsx b/wallet-connect-test-bench/front-end/src/WalletConnectorTypeButton.tsx index 5d4ca241..a37373bc 100644 --- a/wallet-connect-test-bench/front-end/src/WalletConnectorTypeButton.tsx +++ b/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 (