integrations/wagmi: initial re-work of wagmi support

.github/workflows/ci-test.yaml

@@ -114,8 +114,6 @@ jobs:
             clients/js/lib
 
       - name: Test JS client
-        env:
-          NODE_OPTIONS: "--no-experimental-fetch" # https://github.com/nock/nock/issues/2397
         run: pnpm test
 
   test-integration-hardhat:

clients/js/CHANGELOG.md

@@ -6,6 +6,16 @@ The format is inspired by [Keep a Changelog].
 
 [Keep a Changelog]: https://keepachangelog.com/en/1.0.0/
 
+## 1.3.2 (2024-03-24)
+
+### Fixed
+
+- Wagmi v2 & Viem v2 support
+
+### Changed
+
+- Supports only Node v18+
+
 ## 1.3.1 (2024-01-26)
 
 ### Fixed

clients/js/package.json

@@ -60,7 +60,6 @@
     "eslint-config-prettier": "^8.5.0",
     "jest": "^29.7.0",
     "nock": "^13.4.0",
-    "node-fetch": "^2.6.7",
     "prettier": "^2.7.1",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.2",

clients/js/scripts/proxy.ts

@@ -22,7 +22,7 @@ async function getBody(request: IncomingMessage): Promise<string> {
   });
 }
 
-const LISTEN_PORT = 3000;
+const LISTEN_PORT = 3001;
 const DIE_ON_UNENCRYPTED = true;
 const UPSTREAM_URL = 'http://127.0.0.1:8545';
 const SHOW_ENCRYPTED_RESULTS = false;
@@ -43,7 +43,11 @@ interface JSONRPCRequest {
 
 async function onRequest(req: IncomingMessage, response: ServerResponse) {
   if (req.method !== 'POST') {
-    response.writeHead(500, 'Not POST!');
+    // An initial prefetch request will be made to determine if CORS is allowed.
+    response.writeHead(200, 'Not POST!', {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Headers': '*',
+    });
     response.end();
     return;
   }
@@ -159,7 +163,11 @@ async function onRequest(req: IncomingMessage, response: ServerResponse) {
     console.log(' - RESULT', pj);
   }
 
-  response.writeHead(200, 'OK');
+  response.writeHead(200, 'OK', {
+    'Content-Type': 'application/json',
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Headers': '*',
+  });
   response.write(JSON.stringify(pj));
   response.end();
 }

clients/js/src/calldatapublickey.ts

@@ -58,37 +58,7 @@ function toCallDataPublicKey(
   } as CallDataPublicKey;
 }
 
-// TODO: remove, this is unecessary, node has `fetch` now?
-async function fetchRuntimePublicKeyNode(
-  gwUrl: string,
-): Promise<RawCallDataPublicKeyResponse> {
-  // Import http or https, depending on the URI scheme.
-  const https = await import(/* webpackIgnore: true */ gwUrl.split(':')[0]);
-
-  const body = makeCallDataPublicKeyBody();
-  return new Promise((resolve, reject) => {
-    const opts = {
-      method: 'POST',
-      headers: {
-        'content-type': 'application/json',
-        'content-length': body.length,
-      },
-    };
-    const req = https.request(gwUrl, opts, (res: any) => {
-      const chunks: Buffer[] = [];
-      res.on('error', (err: any) => reject(err));
-      res.on('data', (chunk: any) => chunks.push(chunk));
-      res.on('end', () => {
-        resolve(JSON.parse(Buffer.concat(chunks).toString()));
-      });
-    });
-    req.on('error', (err: Error) => reject(err));
-    req.write(body);
-    req.end();
-  });
-}
-
-async function fetchRuntimePublicKeyBrowser(
+export async function fetchRuntimePublicKeyFromURL(
   gwUrl: string,
   fetchImpl: typeof fetch,
 ): Promise<RawCallDataPublicKeyResponse> {
@@ -124,9 +94,10 @@ export async function fetchRuntimePublicKeyByChainId(
       `Unable to fetch runtime public key for network with unknown ID: ${chainId}.`,
     );
   const fetchImpl = opts?.fetch ?? globalThis?.fetch;
-  const res = await (fetchImpl
-    ? fetchRuntimePublicKeyBrowser(defaultGateway, fetchImpl)
-    : fetchRuntimePublicKeyNode(defaultGateway));
+  if (!fetchImpl) {
+    throw new Error('No fetch implementation found!');
+  }
+  const res = await fetchRuntimePublicKeyFromURL(defaultGateway, fetchImpl);
   return toCallDataPublicKey(res.result, chainId);
 }
 

clients/js/src/compat.ts

@@ -82,6 +82,11 @@ export function wrap<U extends Ethers5Signer>(
   options?: SapphireWrapOptions,
 ): U & SapphireAnnex; // Ethers signers
 
+export function wrap<U extends string>(
+  upstream: U,
+  options?: SapphireWrapOptions,
+): Ethers5Provider & EIP1193Provider & SapphireAnnex; // Gateway URL
+
 export function wrap<U extends UpstreamProvider>(
   upstream: U,
   options?: SapphireWrapOptions,
@@ -124,7 +129,7 @@ function isEIP1193Provider(upstream: object): upstream is EIP1193Provider {
   return 'request' in upstream;
 }
 
-function wrapEIP1193Provider<P extends EIP1193Provider>(
+export function wrapEIP1193Provider<P extends EIP1193Provider>(
   upstream: P,
   options?: SapphireWrapOptions,
 ): P & SapphireAnnex {
@@ -156,7 +161,7 @@ function hookEIP1193Request(
   return async (args: Web3ReqArgs) => {
     const signer = await provider.getSigner();
     const cipher = await options.fetcher.cipher(provider);
-    const { method, params } = await prepareRequest(args, signer, cipher);
+    const { method, params } = await prepareRequest(args, cipher, signer);
     const res = await signer.provider.send(method, params ?? []);
     if (method === 'eth_call') {
       return await cipher.decryptEncoded(res);
@@ -247,6 +252,26 @@ export function wrapEthersProvider<P extends Provider | Ethers5Provider>(
     estimateGas: hookEthersCall(provider, 'estimateGas', filled_options),
   };
 
+  // Provide an EIP-1193 compatible endpoint for Ethers providers
+  if (!('request' in provider) && 'send' in provider) {
+    hooks['request'] = async function (args: {
+      method: string;
+      params: any[];
+    }) {
+      const cipher = await filled_options.fetcher.cipher(provider);
+      const { method, params } = await prepareRequest(
+        args,
+        cipher,
+        signer as any,
+      );
+      const res = await (provider as any).send(method, params ?? []);
+      if (method === 'eth_call') {
+        return await cipher.decryptEncoded(res);
+      }
+      return res;
+    };
+  }
+
   // When a signer is also provided, we can re-pack transactions
   // But only if they've been signed by the same address as the signer
   if (signer) {
@@ -404,8 +429,8 @@ async function callNeedsSigning(
 
 async function prepareRequest(
   { method, params }: Web3ReqArgs,
-  signer: JsonRpcSigner,
   cipher: Cipher,
+  signer?: JsonRpcSigner,
 ): Promise<{ method: string; params?: Array<any> }> {
   if (!Array.isArray(params)) return { method, params };
 
@@ -417,6 +442,7 @@ async function prepareRequest(
   }
 
   if (
+    signer &&
     (method === 'eth_call' || method === 'eth_estimateGas') &&
     (await callNeedsSigning(params[0]))
   ) {

clients/js/type-only-test/index.ts

@@ -46,3 +46,7 @@ test('EIP-1193', () => {
     const provider = sapphire.wrap(window.ethereum);
   }
 });
+
+test('URL', () => {
+  const provider = sapphire.wrap('https://sapphire.oasis.io');
+});

docs/browser.md

@@ -48,6 +48,9 @@ out [line 66]. Read [the guide](guide.mdx#contract-logs) to learn more.
 
 :::
 
+[`wagmi`]: https://wagmi.sh/
+[`viem`]: https://viem.sh/
+
 ## Signing Sapphire Calls and Transactions in Browser
 
 Now, let's explore the frontend of our dApp. Begin by moving into the
@@ -65,11 +68,11 @@ the following changes:
 --- a/hardhat-boilerplate/frontend/src/components/Dapp.js
 +++ b/hardhat-boilerplate/frontend/src/components/Dapp.js
 @@ -2,6 +2,7 @@
- 
+
  // We'll use ethers to interact with the Ethereum network and our contract
  import { ethers } from "ethers";
 +import * as sapphire from '@oasisprotocol/sapphire-paratime';
- 
+
  // We import the contract's artifacts and address here, as we are going to be
  // using them with ethers
 @@ -22,7 +23,7 @@
@@ -78,16 +81,16 @@ the following changes:
  // to use when deploying to other networks.
 -const HARDHAT_NETWORK_ID = '1337';
 +const HARDHAT_NETWORK_ID = '23295'; // Sapphire Testnet
- 
+
  // This is an error code that indicates that the user canceled a transaction
  const ERROR_CODE_TX_REJECTED_BY_USER = 4001;
 @@ -225,14 +226,20 @@
- 
+
    async _initializeEthers() {
      // We first initialize ethers by creating a provider using window.ethereum
 -    this._provider = new ethers.providers.Web3Provider(window.ethereum);
 +    this._provider = sapphire.wrap(new ethers.providers.Web3Provider(window.ethereum));
- 
+
 -    // Then, we initialize the contract using that provider and the token's
 -    // artifact. You can do this same thing with your contracts.
 +    // Then, we initialize two contract instances:
@@ -105,26 +108,26 @@ the following changes:
 +      this._provider.getSigner()
      );
    }
- 
+
 @@ -294,7 +301,7 @@
- 
+
        // We send the transaction, and save its hash in the Dapp's state. This
        // way we can indicate that we are waiting for it to be mined.
 -      const tx = await this._token.transfer(to, amount);
 +      const tx = await this._tokenWrite.transfer(to, amount);
        this.setState({ txBeingSent: tx.hash });
- 
+
        // We use .wait() to wait for the transaction to be mined. This method
 @@ -360,8 +367,8 @@
        return true;
      }
- 
--    this.setState({ 
+
+-    this.setState({
 -      networkError: 'Please connect Metamask to Localhost:8545'
 +    this.setState({
 +      networkError: 'Please connect to Sapphire ParaTime Testnet'
      });
- 
+
      return false;
 ```
 

docs/guide.mdx

@@ -104,7 +104,6 @@ but it's made simple by our compatibility library, [@oasisprotocol/sapphire-para
 
 There are compatibility layers in other languages, which may be found in [the repo].
 
-
 [@oasisprotocol/sapphire-paratime]: https://www.npmjs.com/package/@oasisprotocol/sapphire-paratime
 [the repo]: https://github.com/oasisprotocol/sapphire-paratime/tree/main/clients
 
@@ -113,15 +112,15 @@ There are compatibility layers in other languages, which may be found in [the re
 ### Wallets
 
 Sapphire is compatible with popular self-custodial wallets including MetaMask,
-Ledger, Brave, and so forth. You can also use libraries like Web3.js and Ethers
+Ledger, Brave, and so forth. You can also use libraries like Wagmi and Ethers
 to create programmatic wallets. In general, if it generates secp256k1 signatures,
 it'll work just fine.
 
 ### Languages & Frameworks
 
-Sapphire is programmable using any language that targets the EVM, such as Solidity
-or Vyper. If you prefer to use an Ethereum framework like Hardhat or Foundry, you
-can also use those with Sapphire; all you need to do is set your Web3 gateway URL.
+Sapphire is programmable using any language that targets the EVM, such as Solidity,
+Fe or Vyper. If you prefer to use an Ethereum framework like Hardhat or Foundry,
+you can also use those with Sapphire; all you need to do is set your Web3 gateway URL.
 You can find the details of the Oasis Sapphire Web3 endpoints
 [here](https://github.com/oasisprotocol/docs/blob/main/docs/dapp/sapphire/README.mdx#rpc-endpoints).
 

examples/wagmi-v2/.gitignore

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

examples/wagmi-v2/README.md

@@ -0,0 +1 @@
+This is a [Vite](https://vitejs.dev) project bootstrapped with [`create-wagmi`](https://github.com/wevm/wagmi/tree/main/packages/create-wagmi).

examples/wagmi-v2/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Create Wagmi</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/wagmi-v2/package.json

@@ -0,0 +1,33 @@
+{
+	"name": "example-wagmi",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc && vite build",
+		"lint": "biome check .",
+		"format": "biome format --write .",
+		"preview": "vite preview",
+		"start:server": "vite --port 3000"
+	},
+	"dependencies": {
+		"@oasisprotocol/sapphire-wagmi-v2": "workspace:^",
+		"@tanstack/react-query": "5.0.5",
+		"abitype": "^1.0.2",
+		"react": ">=18",
+		"react-dom": ">=18",
+		"viem": "2.x",
+		"wagmi": "2.x"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^1.6.1",
+		"@types/react": "^18.2.67",
+		"@types/react-dom": "^18.2.22",
+		"@vitejs/plugin-react": "^4.2.1",
+		"buffer": "^6.0.3",
+		"rollup-plugin-visualizer": "^5.12.0",
+		"typescript": "^5.4.2",
+		"vite": "^4.5.2"
+	}
+}