feat(dw): plugins

.github/labeler.yml

@@ -154,3 +154,6 @@ e2e-proof-of-us:
 wallet-sdk-example-app:
   - changed-files:
       - any-glob-to-any-file: packages/apps/wallet-sdk-example/*
+'@kadena/dev-wallet-plugin':
+  - changed-files:
+      - any-glob-to-any-file: packages/apps/dev-wallet-plugin/*

packages.json

@@ -71,6 +71,12 @@
     "private": true,
     "path": "packages/apps/dev-wallet-example"
   },
+  {
+    "name": "@kadena/dev-wallet-plugin",
+    "version": "0.0.1",
+    "private": true,
+    "path": "packages/apps/dev-wallet-plugin"
+  },
   {
     "name": "@kadena/docs",
     "version": "0.8.0",

packages/apps/dev-wallet-plugin/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+    "@typescript-eslint/no-explicit-any": "warn",
+  },
+};

packages/apps/dev-wallet-plugin/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@kadena/dev-wallet-plugin",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Kadena developer wallet plugin",
+  "type": "module",
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite --force",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "verify": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.2.0",
+    "@kadena/chainweb-node-client": "workspace:*",
+    "@kadena/client": "workspace:*",
+    "@kadena/client-utils": "workspace:*",
+    "@kadena/cryptography-utils": "workspace:*",
+    "@kadena/hd-wallet": "workspace:*",
+    "@kadena/kode-icons": "workspace:*",
+    "@kadena/kode-ui": "workspace:*",
+    "@kadena/pactjs": "workspace:*",
+    "@kadena/pactjs-generator": "workspace:*",
+    "@scure/bip39": "1.2.1",
+    "@tauri-apps/api": "^1.4.0",
+    "@vanilla-extract/css": "1.14.2",
+    "@vanilla-extract/dynamic": "^2.1.2",
+    "@vanilla-extract/recipes": "0.5.1",
+    "asn1js": "^3.0.5",
+    "cbor-web": "^9.0.2",
+    "chrome-types": "^0.1.248",
+    "classnames": "^2.3.1",
+    "ed25519-keygen": "0.4.8",
+    "elliptic": "^6.5.5",
+    "js-yaml": "~4.1.0",
+    "react": "^18.2.0",
+    "react-aria": "^3.31.1",
+    "react-console-emulator": "^5.0.2",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.45.4",
+    "react-qrcode-logo": "^2.9.0",
+    "react-router-dom": "^6.26.2",
+    "swr": "^2.2.2",
+    "usehooks-ts": "^2.9.1",
+    "yup": "^1.2.0"
+  },
+  "devDependencies": {
+    "@kadena-dev/eslint-config": "workspace:*",
+    "@kadena-dev/lint-package": "workspace:*",
+    "@kadena-dev/shared-config": "workspace:*",
+    "@kadena/pactjs-cli": "workspace:*",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@types/elliptic": "^6.4.18",
+    "@types/js-yaml": "4.0.9",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@vanilla-extract/esbuild-plugin": "^2.3.11",
+    "@vanilla-extract/vite-plugin": "4.0.17",
+    "@vitejs/plugin-react-swc": "^3.2.2",
+    "chokidar-cli": "^3.0.0",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "5.4.5",
+    "vite": "^5.4.8",
+    "vite-plugin-static-copy": "^1.0.0",
+    "vite-tsconfig-paths": "^4.2.1",
+    "vitest": "^1.6.0"
+  }
+}

packages/apps/dev-wallet-plugin/src/communicate.ts

@@ -0,0 +1,34 @@
+import { INetwork } from './network';
+
+interface ResponsePayload {
+  GET_NETWORK_LIST: INetwork[];
+}
+
+interface IResponseType<T extends MessageType> {
+  id: string;
+  type: string;
+  payload: ResponsePayload[T];
+  error: unknown;
+}
+
+type MessageType = 'GET_NETWORK_LIST';
+
+export const communicate =
+  (client: Window, server: Window, pluginId: string, sessionId: string) =>
+  <T extends MessageType>(
+    type: MessageType,
+    payload?: Record<string, unknown>,
+  ): Promise<IResponseType<T>> => {
+    const id = `${pluginId}:${crypto.randomUUID()}`;
+    return new Promise((resolve) => {
+      const handler = (event: MessageEvent) => {
+        console.log('event', event);
+        if (event.data && event.data.id === id) {
+          client.removeEventListener('message', handler);
+          resolve(event.data);
+        }
+      };
+      client.addEventListener('message', handler);
+      server.postMessage({ payload, id, sessionId, type }, '*');
+    });
+  };

packages/apps/dev-wallet-plugin/src/network.ts

@@ -0,0 +1,80 @@
+import { getHostUrl, INetworkOptions } from '@kadena/client';
+
+export type UUID = `${string}-${string}-${string}-${string}-${string}`;
+
+export interface INetwork {
+  uuid: UUID;
+  networkId: string;
+  name?: string;
+  default?: boolean;
+  disabled?: boolean;
+  faucetContract?: string;
+  hosts: Array<{
+    url: string;
+    submit: boolean;
+    read: boolean;
+    confirm: boolean;
+  }>;
+}
+
+export const fetchNetworkId = async (host: string) => {
+  const url = host.endsWith('/') ? `${host}info` : `${host}/info`;
+  return fetch(url)
+    .then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      return Promise.reject(new Error('Network is not healthy'));
+    })
+    .then((data) => {
+      return data.nodeVersion;
+    })
+    .catch(() => {
+      return undefined;
+    });
+};
+
+export const hostUrlGenerator = (networks: INetwork[]) => {
+  let healthyNetworks = networks;
+  let lastCheckTime = Date.now();
+  const checkNetworks = async () => {
+    lastCheckTime = Date.now();
+    healthyNetworks = await Promise.all(
+      networks.map(async (network) => {
+        const hosts = await Promise.all(
+          network.hosts.map(async (host) => {
+            const nodeVersion = await fetchNetworkId(host.url);
+            return {
+              ...host,
+              isHealthy: nodeVersion === network.networkId,
+              checkTime: Date.now(),
+            };
+          }),
+        );
+        return {
+          ...network,
+          hosts: hosts.filter((host) => host.isHealthy),
+        };
+      }),
+    );
+  };
+  checkNetworks().catch((er) =>
+    console.log('Error while checking networks', er),
+  );
+  return ({ networkId, chainId }: INetworkOptions) => {
+    if (Date.now() - lastCheckTime > 30000) {
+      checkNetworks().catch((er) =>
+        console.log('Error while checking networks', er),
+      );
+    }
+    const network = healthyNetworks.find(
+      (network) => network.networkId === networkId,
+    );
+    // TODO: we can add more logic here to handle multiple hosts
+    const host = network?.hosts[0];
+    if (!host) {
+      throw new Error('No healthy host found');
+    }
+    return getHostUrl(host.url)({ networkId, chainId });
+  };
+};

packages/apps/dev-wallet-plugin/src/pact-console.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+
+describe('pact-remote-console', () => {
+  // TODO: Add tests
+  it('test', () => {
+    expect(true).toBe(true);
+  });
+});