feat: utility wallet connector (#305)

* feat: initial commit

* feat: wallet card

* feat: cardano types

* feat: wallet info view

* feat: secitons

* refactor: move wallet info section

* feat: stricter checks

* feat: panels

* feat: cbor editor

* feat: hex2diag

* feat: reactive cbor editor

* feat: response

* feat: submit tx function

* feat: clean hex

* feat: to be implemented

* feat: enable all wallets

* feat: json mode

* feat: json editor

* fix: extract api data handling

* refactor: move components to common

* feat: file upload

* feat: extension field

* fix: types

* feat: linters

* chore: lintfix

* chore: lintfix

* chore: remove lint issues

* chore: fmt

* chore: lintfix

* ci: build local

* docs: earthfile

* fix: copied

* feat: re-enable

* chore: remove console.log

* docs: readme

* feat: decoder

* feat: unsigned tx function

* feat: tx builder interaction

* feat: advanced config

* chore: lintfix

* feat: badge

* feat: complete sign tx

* chore: lint

* feat: badge variant

* fix: selection state

* fix: submit status

* chore: remove unused pkgs

* fix: lint

* feat: col fmt

* chore: lintfix

* fix: change title

* refactor: rename to wallet tester

* refactor: fix words

* fix: markdown lint docs

* chore: remove tanstack

* feat: builder fields

* chore: lintfix

* feat: certificate stake delegation

* feat: apply builder fields to builder function

* feat: certs build

* feat: selection

* feat: complete tx builder

* feat: reward network field

* feat: cbor metadata

* feat: input display amount

* fix: minor

* feat: cleanup

* chore: remove unused comment

* fix: cspell

* fixซ: mdlint

* fix: cert fields len

* fix: docs: earthfile

* chore: remove empty switch button component

---------

Co-authored-by: Oleksandr Prokhorenko <[email protected]>

.config/dictionaries/project.dic

@@ -7,6 +7,7 @@ androidx
 appspot
 Arbritrary
 ARGB
+asmjs
 asyncio
 asyncpg
 auditability
@@ -17,6 +18,8 @@ BROTLI
 canvaskit
 cardano
 Catalyst
+CBOR
+cborg
 CEST
 cfbundle
 chromedriver
@@ -42,6 +45,7 @@ drep
 dreps
 earthfile
 Edgedriver
+emurgo
 encryptor
 endfunction
 endfunction
@@ -59,6 +63,7 @@ genhtml
 gethostname
 gmtime
 gradlew
+headlessui
 icudtl
 ideascale
 idents
@@ -104,6 +109,7 @@ pg_isready
 plpgsql
 podfile
 podhelper
+postcss
 preprod
 projectcatalyst
 Prokhorenko
@@ -143,12 +149,18 @@ testunit
 thiserror
 thollander
 timelike
+toastify
+Toastify
 tojunit
 Traceback
 TXNZD
 Typer
 unmanaged
+UTXO
 utxo
+Utxos
+utxos
+vite
 vitss
 vkey
 voteplan

utilities/wallet-tester/.eslintrc.yaml

@@ -0,0 +1,84 @@
+parser: "@typescript-eslint/parser"
+root: true
+env:
+  es2021: true
+  browser: true
+  node: true
+extends:
+  - plugin:@typescript-eslint/eslint-recommended
+  - plugin:@typescript-eslint/recommended
+  - plugin:react/recommended
+  - plugin:react/jsx-runtime
+  - plugin:react-hooks/recommended
+  - plugin:jsx-a11y/strict
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: latest
+  sourceType: module
+  tsconfigRootDir: ./
+  project:
+    - ./tsconfig.json
+    - ./tsconfig.node.json
+plugins:
+  - "@typescript-eslint"
+  - react
+  - react-hooks
+  - jsx-a11y
+  - import
+  - react-refresh
+overrides:
+  - files:
+      - "*.yaml"
+      - "*.yml"
+    parser: yaml-eslint-parser
+    extends:
+      - plugin:yml/standard
+settings:
+  react:
+    version: detect
+ignorePatterns:
+  - node_modules
+rules:
+  # import
+  import/order:
+    - warn
+    - newlines-between: always
+      alphabetize:
+        order: asc
+        caseInsensitive: false
+      pathGroups:
+        # internal
+        - pattern: "common/**"
+          group: parent
+        - pattern: "modules/**"
+          group: parent
+        - pattern: "styles/**"
+          group: parent
+        - pattern: "types/**"
+          group: parent
+        # sibling
+        - pattern: "../**"
+          group: sibling
+        # styles
+        - pattern: "./*.css"
+          group: sibling
+          position: after
+      pathGroupsExcludedImportTypes: []
+
+  # vanilla js
+  quotes:
+    - error
+    - double
+
+  # react-refresh
+  react-refresh/only-export-components:
+    - error
+    - allowConstantExport: true
+
+  # typescript
+  "@typescript-eslint/semi": error
+  "@typescript-eslint/member-delimiter-style":
+    - error
+    - singleline:
+        requireLast: true

utilities/wallet-tester/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

utilities/wallet-tester/.prettierrc.yaml

@@ -0,0 +1,6 @@
+printWidth: 100
+trailingComma: es5
+useTabs: false
+tabWidth: 2
+semi: true
+singleQuote: false

utilities/wallet-tester/Earthfile

@@ -0,0 +1,37 @@
+VERSION --try --global-cache 0.7
+
+# builder - Installs node packages.
+builder:
+  FROM node:20-alpine
+  WORKDIR /app
+  COPY package.json package-lock.json .
+  COPY index.html postcss.config.js tailwind.config.js tsconfig* vite.config.ts .eslintrc.yaml .prettierrc.yaml .
+  COPY src ./src
+
+  RUN npm i
+
+# check - Runs checks against the source code including type checks and linting.
+check:
+  FROM +builder
+
+  RUN npm run check
+
+# build - Builds the source code for deployment
+build:
+  FROM +builder
+
+  RUN npm run build
+
+  SAVE ARTIFACT dist
+
+# local - Makes a docker image that can serve the app for development purposes.
+local:
+  FROM nginx:1.25-alpine
+
+  COPY +build/dist /usr/share/nginx/html
+
+  EXPOSE 80
+
+  CMD ["nginx", "-g", "daemon off;"]
+
+  SAVE IMAGE cat-wallet-connector:latest

utilities/wallet-tester/README.md

@@ -0,0 +1,42 @@
+# Cardano Utility Wallet Connector
+
+## Setup Project
+
+1. Make sure you have the version of Node.js 18 or 20 on your current machine as the requirement to run Vite.
+2. Install all dependencies via `npm i`.
+3. Done.
+  You can develop the project via the `npm run dev` command, and build the project by running the `npm run build` command.
+  See more scripts in `package.json`.
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+## Tools
+
+* **Scripting**: TypeScript 5
+* **UI Framework**: React 18
+* **Styling**: Tailwind CSS
+* **UI Components**: Headless UI
+* **Utilities**: Lodash
+* **Icons**: Material UI Icons
+* **Build Tool**: Vite
+
+## Runs with Earthly
+
+Type command `earthly +local` to build the app with Nginx wrapped as a web server.
+
+And run with docker:
+
+```sh
+docker run -p ...:80 -t cat-wallet-connector
+```
+
+## What it can do
+
+First step, the tool will scan all accessible wallets installed as browser extensions.
+It executes fundamental wallet actions as outlined in [CIP30](https://cips.cardano.org/cip/CIP-30/) including:
+
+* Retrieving wallet details
+* Simultaneously signing transactions using multiple wallets
+* (WIP) Simultaneously signing data with multiple wallets
+* (WIP) Simultaneously submitting transactions using multiple wallets

utilities/wallet-tester/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="/src/main.tsx"></script>
+    <title>Cardano Wallet Tester</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>