added wagmi-v1 example + viem test

oasisprotocol · Jun 11, 2024 · d05539d · d05539d
1 parent 3dbff31
commit d05539d
Show file tree

Hide file tree

Showing 24 changed files with 1,798 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -42,7 +42,7 @@ This monorepo includes the source code for the following Sapphire packages:
 [hardhat-size]: https://img.shields.io/bundlephobia/minzip/@oasisprotocol/sapphire-hardhat
 [client-size]: https://img.shields.io/bundlephobia/minzip/@oasisprotocol/sapphire-paratime
 [ethers-v6-size]: https://img.shields.io/bundlephobia/minzip/@oasisprotocol/sapphire-ethers-v6
-[wagmi-v2-size]: https://img.shields.io/bundlephobia/minzip/@oasisprotocol/sapphire-viem-v2
+[viem-v2-size]: https://img.shields.io/bundlephobia/minzip/@oasisprotocol/sapphire-viem-v2
 [wagmi-v2-size]: https://img.shields.io/bundlephobia/minzip/@oasisprotocol/sapphire-wagmi-v2
 
 [hardhat-bundlephobia]: https://bundlephobia.com/package/@oasisprotocol/sapphire-hardhat

diff --git a/clients/js/CHANGELOG.md b/clients/js/CHANGELOG.md
@@ -6,7 +6,7 @@ The format is inspired by [Keep a Changelog].
 
 [Keep a Changelog]: https://keepachangelog.com/en/1.0.0/
 
-## 1.3.3 (2024-04-05)
+## 2.0.0-alpha.1 (2024-06)
 
 ### Added
 

diff --git a/clients/js/README.md b/clients/js/README.md
@@ -54,8 +54,7 @@ then you'll see this error.
 
 **Fix:** The simplest thing to do is connect a provider. Alternatively, you can pass in
 a pre-initialized `Cipher` object as the second argument to `wrap`; and then also generate
-signed queries manually using the `overrides` parameter to `SignedCallDataPack.make`. This
-latter approach
+signed queries manually using the `overrides` parameter to `SignedCallDataPack.make`.
 
 ## See Also
 

diff --git a/clients/js/package.json b/clients/js/package.json
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@noble/hashes": "1.3.2",
-    "@oasisprotocol/deoxysii": "0.0.5",
+    "@oasisprotocol/deoxysii": "0.0.6",
     "cborg": "1.10.2"
   },
   "devDependencies": {

diff --git a/clients/js/scripts/proxy.ts b/clients/js/scripts/proxy.ts
@@ -1,8 +1,8 @@
 import { createServer, IncomingMessage, ServerResponse } from 'node:http';
 
-import { formatEther, getBytes, toBigInt, Transaction } from 'ethers';
+import { formatEther, toBigInt, Transaction } from 'ethers';
 
-import { Envelope, EnvelopeError } from '@oasisprotocol/sapphire-paratime';
+import { Envelope, EnvelopeError, getBytes } from '@oasisprotocol/sapphire-paratime';
 
 import { decode as cborgDecode } from 'cborg';
 

diff --git a/clients/js/src/provider.ts b/clients/js/src/provider.ts
@@ -93,7 +93,7 @@ export function wrapEthereumProvider<P extends EIP2696_EthereumProvider>(
 
   const filled_options = fillOptions(options);
 
-  // if it providers a send() function but no request function
+  // if upstream provides a send() function but not request function
   // then derive a request() function from the send() function
   // if we do this, don't then re-wrap the send() function
   // only wrap the send() function if there was a request() function

diff --git a/examples/wagmi-v1/.gitignore b/examples/wagmi-v1/.gitignore
@@ -0,0 +1,3 @@
+dist
+stats.html
+
diff --git a/examples/wagmi-v1/Makefile b/examples/wagmi-v1/Makefile
@@ -0,0 +1,28 @@
+NPM ?= pnpm
+
+all: build
+
+build:
+	$(NPM) build
+
+clean:
+	rm -rf dist stats.html
+
+distclean: clean
+	rm -rf node_modules
+
+dependencies:
+	$(MAKE) -C ../../integrations/wagmi-v2 full
+
+full: dependencies build
+
+test:
+	@echo Please make tests for wagmi-v2 example!
+
+run:
+	$(NPM) run dev
+
+run-proxied:
+	SAPPHIRE_LOCALNET_HTTP_PROXY_PORT=3001 $(NPM) run dev
+
+.PHONY: all clean distclean dependencies full test run run-proxied
diff --git a/examples/wagmi-v1/index.html b/examples/wagmi-v1/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>
diff --git a/examples/wagmi-v1/package.json b/examples/wagmi-v1/package.json
@@ -0,0 +1,33 @@
+{
+	"name": "sapphire-examples-wagmi-v1",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"license": "Apache-2.0",
+	"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-paratime": "workspace:^",
+		"abitype": "^1.0.2",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"wagmi": "1.4.13",
+		"viem": "2.9.19"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^1.7.0",
+		"@types/react": "^18.2.79",
+		"@types/react-dom": "^18.2.25",
+		"@vitejs/plugin-react": "^4.2.1",
+		"buffer": "^6.0.3",
+		"rollup-plugin-visualizer": "^5.12.0",
+		"typescript": "^5.4.5",
+		"vite": "^4.5.3"
+	}
+}
diff --git a/examples/wagmi-v1/src/App.tsx b/examples/wagmi-v1/src/App.tsx
@@ -0,0 +1,224 @@
+import { useEffect, useState } from "react";
+import {
+	useAccount,
+	useConnect,
+	useDisconnect,
+	useNetwork,
+	usePublicClient,
+	useTransaction,
+	useWalletClient,
+} from "wagmi";
+import { isCalldataEnveloped } from '@oasisprotocol/sapphire-paratime';
+import type { Abi } from "abitype";
+import { waitForTransaction } from "wagmi/actions";
+import { TransactionReceipt } from "viem";
+
+/*
+// SPDX-License-Identifier: Apache-2.0
+pragma solidity >=0.8.2 <0.9.0;
+contract Storage {
+    uint256 number;
+    function store(uint256 num) public {
+        number = num;
+    }
+    function retrieve() public view returns (uint256){
+        return number;
+    }
+}
+*/
+const StorageBytecode =
+	"0x608060405234801561000f575f80fd5b506101438061001d5f395ff3fe608060405234801561000f575f80fd5b5060043610610034575f3560e01c80632e64cec1146100385780636057361d14610056575b5f80fd5b610040610072565b60405161004d919061009b565b60405180910390f35b610070600480360381019061006b91906100e2565b61007a565b005b5f8054905090565b805f8190555050565b5f819050919050565b61009581610083565b82525050565b5f6020820190506100ae5f83018461008c565b92915050565b5f80fd5b6100c181610083565b81146100cb575f80fd5b50565b5f813590506100dc816100b8565b92915050565b5f602082840312156100f7576100f66100b4565b5b5f610104848285016100ce565b9150509291505056fea26469706673582212201bc715d5ea5b4244a667a55f9fd36929a52a02208d9b458fdf543f5495011b2164736f6c63430008180033";
+
+const StorageABI = [
+	{
+		inputs: [],
+		name: "retrieve",
+		outputs: [
+			{
+				internalType: "uint256",
+				name: "",
+				type: "uint256",
+			},
+		],
+		stateMutability: "view",
+		type: "function",
+	},
+	{
+		inputs: [
+			{
+				internalType: "uint256",
+				name: "num",
+				type: "uint256",
+			},
+		],
+		name: "store",
+		outputs: [],
+		stateMutability: "nonpayable",
+		type: "function",
+	},
+] as const satisfies Abi;
+
+function App() {
+	const account = useAccount();
+	const network = useNetwork();
+	const { connectors, connect, status, error } = useConnect();
+	const { disconnect } = useDisconnect();
+	const { data: walletClient } = useWalletClient();
+	const [deployHash, setDeployHash] = useState<undefined | `0x${string}`>();
+	const [contractAddress, setContractAddress] = useState<
+		undefined | `0x${string}`
+	>();
+	const [writeTxHash, setWriteTxHash] = useState<undefined | `0x${string}`>();
+	const [readResult, setReadResult] = useState<bigint | undefined>();
+	const publicClient = usePublicClient()!;
+	const [deployReceipt,setDeployReceipt] = useState<TransactionReceipt|undefined>(); // = waitForTransaction({ hash: deployHash, confirmations: 1 });
+
+	const [writeReceipt,setWriteReceipt] = useState<TransactionReceipt|undefined>(); // = waitForTransaction({ hash: writeTxHash, confirmations: 1 });
+
+	const { data: writeTxInfo } = useTransaction({hash: writeReceipt?.transactionHash});
+
+	async function doDeploy() {
+		const hash = await walletClient?.deployContract({
+			abi: StorageABI,
+			bytecode: StorageBytecode,
+			account: account.address,
+			chain: network.chain,
+			args: [],
+		});
+		if (hash) {
+			console.log("Deploy hash set to", hash);
+			setDeployHash(hash);
+			setDeployReceipt(await waitForTransaction({hash}));
+		}
+	}
+
+	useEffect(() => {
+		if (deployReceipt?.contractAddress) {
+			setContractAddress(deployReceipt.contractAddress);
+		}
+	}, [deployReceipt]);
+
+	async function doWrite() {
+		if (contractAddress) {
+			const callArgs = {
+				account: account.address!,
+				chain: network.chain,
+				abi: StorageABI,
+				address: contractAddress,
+				functionName: "store",
+				args: [BigInt(Math.round((Math.random() * 100000)))],
+			} as const;
+			const hash = await walletClient!.writeContract({
+				...callArgs,
+				gas: await publicClient.estimateContractGas(callArgs)
+			});
+			setWriteTxHash(hash);
+			setWriteReceipt(await waitForTransaction({hash}))
+		}
+	}
+
+	async function doRead() {
+		if (contractAddress) {
+			const result = await publicClient.readContract({
+				abi: StorageABI,
+				address: contractAddress,
+				functionName: "retrieve",
+				args: [],
+			});
+			setReadResult(result);
+		}
+	}
+
+	return (
+		<>
+			<h2>Account</h2>
+			<div>
+				status: {account.status}
+				<br />
+				{account.address && (
+					<>
+						address: <span id="accountAddress">{account.address}</span>
+					</>
+				)}
+				<br />
+			</div>
+			<hr />
+
+			<button type="button" onClick={doDeploy}>
+				Deploy
+			</button>
+			{deployHash}
+			<br />
+			{deployReceipt && (
+				<>
+					Contract:{" "}
+					<span id="deployContractAddress">
+						{deployReceipt?.contractAddress}
+					</span>
+					<br />
+					<hr />
+					<button type="button" onClick={doWrite}>
+						Write
+					</button>
+					<br />
+					{writeTxHash && (
+						<>
+							Write Tx Hash: {writeTxHash}
+							<br />
+							{writeReceipt && (
+								<>
+									Write Tx Gas: {writeReceipt.gasUsed.toString()}
+									<br />
+									Write Tx BlockHash:&nbsp;
+									<span id="writeReceiptBlockHash">
+										{writeReceipt.blockHash}
+									</span>
+									<br />
+									Write Tx Calldata:&nbsp;
+									<span id="isWriteEnveloped">
+										{isCalldataEnveloped(writeTxInfo?.input) ? 'encrypted' : 'plaintext'}
+									</span>
+								</>
+							)}
+						</>
+					)}
+					<hr />
+					<button type="button" onClick={doRead}>
+						Read
+					</button>
+					{readResult !== undefined && (
+						<>
+							<span id="readResult">{readResult.toString()}</span>
+						</>
+					)}
+					<br />
+				</>
+			)}
+			<hr />
+
+			{account.status === "connected" && (
+				<button type="button" onClick={() => disconnect()}>
+					Disconnect
+				</button>
+			)}
+
+			<div>
+				<h2>Connect</h2>
+				{connectors.map((connector) => (
+					<button
+						key={connector.id}
+						onClick={() => connect({ connector })}
+						type="button"
+						id={"connect-" + connector.id}
+					>
+						{connector.name}
+					</button>
+				))}
+				<div>{status}</div>
+				<div>{error?.message}</div>
+			</div>
+		</>
+	);
+}
+
+export default App;
diff --git a/examples/wagmi-v1/src/index.css b/examples/wagmi-v1/src/index.css
@@ -0,0 +1,21 @@
+:root {
+  background-color: #181818;
+  color: rgba(255, 255, 255, 0.87);
+  color-scheme: light dark;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-synthesis: none;
+  font-weight: 400;
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    background-color: #f8f8f8;
+    color: #181818;
+  }
+}