Feat: Support EVM connector

examples/example-react/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@casperdash/usewallet": "workspace:*",
+    "@casperdash/usewallet-evm": "workspace:*",
     "@hookform/resolvers": "^3.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
@@ -25,7 +26,8 @@
     "sonner": "^0.6.2",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.6",
-    "zod": "^3.21.4"
+    "zod": "^3.21.4",
+    "viem": "^1.19.4"
   },
   "devDependencies": {
     "@types/node": "18.11.10",

examples/example-react/src/App.tsx

@@ -15,6 +15,7 @@ import CasperDashWebButton from './components/ConnectButton/CasperDashWebButton'
 import CasperWalletButton from './components/ConnectButton/CasperWalletButton';
 import { Button } from './components/ui/Button';
 import { FormTabs } from './components/Form/FormTabs';
+import MetaMaskButton from './components/ConnectButton/MetaMaskButton';
 
 function App() {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -93,6 +94,8 @@ function App() {
               <CasperDashWebButton/>
               <br/>
               <CasperLedgerButton />
+              <br/>
+              <MetaMaskButton />
             </div>
           </>
         )}

examples/example-react/src/client/index.ts

@@ -0,0 +1,7 @@
+import { createWalletClient, custom } from 'viem';
+import { mainnet } from 'viem/chains';
+
+export const client = createWalletClient({
+  chain: mainnet,
+  transport: custom(window.ethereum!),
+});

examples/example-react/src/components/ConnectButton/MetaMaskButton.tsx

@@ -0,0 +1,23 @@
+import { EVMConnector } from '@casperdash/usewallet-evm';
+import {
+  useConnect,
+} from '@casperdash/usewallet';
+
+import { Button } from '../ui/Button';
+
+
+export const MetaMaskButton = () => {
+  const { connect } = useConnect({
+    connector: new EVMConnector({}),
+  });
+
+  return (
+    <div>
+        <Button onClick={async () => connect()} className='w-full'>
+          Connect with MetaMask
+        </Button>
+    </div>
+  );
+};
+
+export default MetaMaskButton;

examples/example-react/src/main.tsx

@@ -8,12 +8,18 @@ import {
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { CasperLedgerConnector } from '@casperdash/usewallet-ledger';
+import { EVMConnector } from '@casperdash/usewallet-evm';
 
 import App from './App';
 import '../app/globals.css';
 
 const client = createClient({
-  connectors: [new CasperSignerConnector(), new CasperDashConnector(), new CasperWalletConnector(), new CasperLedgerConnector()],
+  connectors: [
+    new CasperSignerConnector(),
+    new CasperDashConnector(),
+    new CasperWalletConnector(),
+    new CasperLedgerConnector(),
+    new EVMConnector()],
   // autoConnect: true,
 });
 

packages/evm/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@casperdash/usewallet-evm",
+  "version": "1.0.3",
+  "description": "A React hook for interacting with the Casper Network via Ledger",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CasperDash/useWallet.git",
+    "directory": "packages/ledger"
+  },
+  "homepage": "https://usewallet.casperdash.io/",
+  "contributors": [
+    "dev <dev@casperdash.io>"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc && vite build --mode development",
+    "dev": "tsup src/index.ts --watch",
+    "start": "pnpm build -- --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@ledgerhq/hw-transport-webusb": "^6.27.19",
+    "@zondax/ledger-casper": "^2.6.1",
+    "casper-js-sdk": "^2.15.3",
+    "@casperdash/usewallet-core": "workspace:*",
+    "@tanstack/query-core": "^4.35.3",
+    "@tanstack/react-query": "^4.35.3",
+    "typedjson": "^1.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "viem": "^1.19.4"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^13.4.0",
+    "@types/react": "18.0.26",
+    "typescript": ">=5.2.2",
+    "@rollup/plugin-inject": "5.0.3",
+    "vite": "^4.4.9",
+    "@vitejs/plugin-react-swc": "3.3.2",
+    "vite-plugin-dts": "^3.5.4",
+    "vite-plugin-node-polyfills": "^0.14.1"
+  }
+}

packages/evm/src/client.ts

@@ -0,0 +1,14 @@
+import { createWalletClient, custom } from 'viem';
+import { mainnet } from 'viem/chains';
+
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ethereum: any;
+  }
+}
+
+export const client = createWalletClient({
+  chain: mainnet,
+  transport: custom(window.ethereum),
+});

packages/evm/src/evm.ts

@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import TransportWebUSB from '@ledgerhq/hw-transport-webusb';
+import { JsonTypes } from 'typedjson';
+import {
+  Connector,
+  Deploy,
+} from '@casperdash/usewallet-core';
+import { WalletClient } from 'viem';
+
+import { client } from './client';
+
+
+type EVMConnectorOptions = {
+  enableDebugLogs?: boolean;
+  getEventProvider?: () => EventProvider;
+};
+
+type Provider = WalletClient;
+type EventProvider = Window;
+
+export class EVMConnector extends Connector<
+Provider,
+Window,
+EVMConnectorOptions
+>  {
+  public isReady!: boolean;
+  public readonly id: string = 'evm';
+  public transport!: TransportWebUSB;
+  public casperApp?: Provider;
+  public accountIndex?: string;
+
+  constructor({
+    options: defaultOptions,
+  }: { options?: EVMConnectorOptions } = {}) {
+    const options = {
+      name: 'EVM',
+      ...defaultOptions,
+    };
+
+    super({ options });
+  }
+
+  public async getProvider(): Promise<Provider> {
+    return client;
+  }
+
+  /**
+   * > This function returns the event provider that was passed in the options object
+   * @returns The event provider
+   */
+  public async getEventProvider(): Promise<EventProvider> {
+    throw new Error('Method not implemented.');
+  }
+
+  public async isConnected(): Promise<boolean> {
+    const publicKey = await this.getActivePublicKey();
+
+    return !!publicKey;
+  }
+
+  public async disconnect(): Promise<void> {
+    // Do nothing
+    return;
+  }
+
+  public async connect(): Promise<void> {
+    const provider = await this.getProvider();
+
+    await provider.requestAddresses();
+  }
+
+  public async getActivePublicKey(): Promise<string> {
+    const accounts = await (await this.getProvider()).getAddresses();
+
+    if (!accounts.length) {
+      throw new Error('No accounts found');
+    }
+
+    return accounts[0];
+  }
+
+  public async signMessage(message: string, signingPublicKeyHex?: string): Promise<string> {
+    const account = signingPublicKeyHex || await this.getActivePublicKey();
+    const provider = await this.getProvider();
+
+    return provider.signMessage({
+      account: account as `0x${string}`,
+      message,
+    });
+  }
+
+  public async sign(
+    deploy: { deploy: JsonTypes },
+    signingPublicKeyHex: string,
+    _targetPublicKeyHex: string,
+  ): Promise<Deploy> {
+    throw new Error('Method not implemented.');
+  }
+
+  public onConnected(_event: CustomEventInit): void {
+    throw new Error('Method not implemented.');
+  }
+
+  /**
+   * It emits a custom event called 'casper:disconnect'
+   */
+  public onDisconnected(): void {
+    throw new Error('Method not implemented.');
+  }
+
+  public onActiveKeyChanged(_event: CustomEventInit): void {
+    throw new Error('Method not implemented.');
+  }
+}

packages/evm/src/index.ts

@@ -0,0 +1 @@
+export * from './evm';

packages/evm/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "declaration": true,
+    "rootDir": "./src"
+  },
+  "include": [ "**/*.ts" ],
+  "exclude": ["node_modules", "dist"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

packages/evm/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": ["node_modules", "dist"],
+}

packages/evm/vite.config.js

@@ -0,0 +1,24 @@
+import { resolve } from 'path';
+
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    dts(),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'index',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react'],
+      output: {
+        format: 'esm',
+      },
+    },
+  },
+});

packages/ledger/vite.config.js

@@ -2,7 +2,6 @@ import { resolve } from 'path';
 
 import { defineConfig } from 'vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
-import inject from '@rollup/plugin-inject';
 import dts from 'vite-plugin-dts';
 
 // https://vitejs.dev/config/