feat: Wagmi example usage with Hedera (#3000)

* feat: Wagmi example usage with Hedera

Signed-off-by: mateuszm-arianelabs <mateusz.marcinkowski@arianelabs.com>

* chore: typo in readme, remove unused import

Signed-off-by: mateuszm-arianelabs <mateusz.marcinkowski@arianelabs.com>

* chore: typo in readme, cleanup in code

Signed-off-by: mateuszm-arianelabs <mateusz.marcinkowski@arianelabs.com>

* chore: change pnpm to npm, small fixes

Signed-off-by: mateuszm-arianelabs <mateusz.marcinkowski@arianelabs.com>

* feat: pr suggestions applied

Signed-off-by: Mariusz Jasuwienas <mariusz.jasuwienas@arianelabs.com>

* feat: pr suggestions applied

Signed-off-by: Mariusz Jasuwienas <mariusz.jasuwienas@arianelabs.com>

* feat: cancuns opcodes are supported in hedera already so this comment about them was no longer valid

Signed-off-by: Mariusz Jasuwienas <mariusz.jasuwienas@arianelabs.com>

---------

Signed-off-by: mateuszm-arianelabs <mateusz.marcinkowski@arianelabs.com>
Signed-off-by: Mariusz Jasuwienas <mariusz.jasuwienas@arianelabs.com>
Co-authored-by: mateuszm-arianelabs <mateusz.marcinkowski@arianelabs.com>

tools/wagmi-example/.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?

tools/wagmi-example/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps = true

tools/wagmi-example/README.md

@@ -0,0 +1,23 @@
+# Wagmi Hedera Example
+
+Wagmi is a library for building Web3 apps, offering hooks (React version) for wallet connections, blockchain data, and transactions.
+
+Learn more [here](https://wagmi.sh).
+
+## How to run example?
+1. Install dependencies `npm install`
+2. Run project `npm dev`
+
+## Example
+Example of using Wagmi with Hedera covers
+1. Sign in with wallet
+2. Check account balance
+3. Deploy contract from bytecode
+4. Read from contract
+5. Write to contract
+
+## Generate contract abi, bin
+Using solc from [NPM](https://www.npmjs.com/package/solc)
+
+1. `solcjs contract/Greeter.sol --optimize --abi --bin -o contract/` or `npm run compile`
+2. Change file extension in one of generated files from `.abi` to `.json`

tools/wagmi-example/biome.json

@@ -0,0 +1,13 @@
+{
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "lineWidth": 120
+  },
+  "linter": {
+    "enabled": true
+  },
+  "organizeImports": {
+    "enabled": true
+  }
+}

tools/wagmi-example/contract/Greeter.sol

@@ -0,0 +1,18 @@
+//SPDX-License-Identifier: Unlicense
+pragma solidity ^0.8.0;
+
+contract Greeter {
+    string private greeting;
+
+    constructor(string memory _greeting) {
+        greeting = _greeting;
+    }
+
+    function greet() external view returns (string memory) {
+        return greeting;
+    }
+
+    function setGreeting(string memory _greeting) external {
+        greeting = _greeting;
+    }
+}

tools/wagmi-example/contract/contract_Greeter_sol_Greeter.bin

@@ -0,0 +1 @@
+608060405234801561000f575f80fd5b50604051610af2380380610af283398181016040528101906100319190610193565b805f908161003f91906103e7565b50506104b6565b5f604051905090565b5f80fd5b5f80fd5b5f80fd5b5f80fd5b5f601f19601f8301169050919050565b7f4e487b71000000000000000000000000000000000000000000000000000000005f52604160045260245ffd5b6100a58261005f565b810181811067ffffffffffffffff821117156100c4576100c361006f565b5b80604052505050565b5f6100d6610046565b90506100e2828261009c565b919050565b5f67ffffffffffffffff8211156101015761010061006f565b5b61010a8261005f565b9050602081019050919050565b8281835e5f83830152505050565b5f610137610132846100e7565b6100cd565b9050828152602081018484840111156101535761015261005b565b5b61015e848285610117565b509392505050565b5f82601f83011261017a57610179610057565b5b815161018a848260208601610125565b91505092915050565b5f602082840312156101a8576101a761004f565b5b5f82015167ffffffffffffffff8111156101c5576101c4610053565b5b6101d184828501610166565b91505092915050565b5f81519050919050565b7f4e487b71000000000000000000000000000000000000000000000000000000005f52602260045260245ffd5b5f600282049050600182168061022857607f821691505b60208210810361023b5761023a6101e4565b5b50919050565b5f819050815f5260205f209050919050565b5f6020601f8301049050919050565b5f82821b905092915050565b5f6008830261029d7fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff82610262565b6102a78683610262565b95508019841693508086168417925050509392505050565b5f819050919050565b5f819050919050565b5f6102eb6102e66102e1846102bf565b6102c8565b6102bf565b9050919050565b5f819050919050565b610304836102d1565b610318610310826102f2565b84845461026e565b825550505050565b5f90565b61032c610320565b6103378184846102fb565b505050565b5b8181101561035a5761034f5f82610324565b60018101905061033d565b5050565b601f82111561039f5761037081610241565b61037984610253565b81016020851015610388578190505b61039c61039485610253565b83018261033c565b50505b505050565b5f82821c905092915050565b5f6103bf5f19846008026103a4565b1980831691505092915050565b5f6103d783836103b0565b9150826002028217905092915050565b6103f0826101da565b67ffffffffffffffff8111156104095761040861006f565b5b6104138254610211565b61041e82828561035e565b5f60209050601f83116001811461044f575f841561043d578287015190505b61044785826103cc565b8655506104ae565b601f19841661045d86610241565b5f5b828110156104845784890151825560018201915060208501945060208101905061045f565b868310156104a1578489015161049d601f8916826103b0565b8355505b6001600288020188555050505b505050505050565b61062f806104c35f395ff3fe608060405234801561000f575f80fd5b5060043610610034575f3560e01c8063a413686214610038578063cfae321714610054575b5f80fd5b610052600480360381019061004d9190610260565b610072565b005b61005c610084565b6040516100699190610307565b60405180910390f35b805f9081610080919061052a565b5050565b60605f805461009290610354565b80601f01602080910402602001604051908101604052809291908181526020018280546100be90610354565b80156101095780601f106100e057610100808354040283529160200191610109565b820191905f5260205f20905b8154815290600101906020018083116100ec57829003601f168201915b5050505050905090565b5f604051905090565b5f80fd5b5f80fd5b5f80fd5b5f80fd5b5f601f19601f8301169050919050565b7f4e487b71000000000000000000000000000000000000000000000000000000005f52604160045260245ffd5b6101728261012c565b810181811067ffffffffffffffff821117156101915761019061013c565b5b80604052505050565b5f6101a3610113565b90506101af8282610169565b919050565b5f67ffffffffffffffff8211156101ce576101cd61013c565b5b6101d78261012c565b9050602081019050919050565b828183375f83830152505050565b5f6102046101ff846101b4565b61019a565b9050828152602081018484840111156102205761021f610128565b5b61022b8482856101e4565b509392505050565b5f82601f83011261024757610246610124565b5b81356102578482602086016101f2565b91505092915050565b5f602082840312156102755761027461011c565b5b5f82013567ffffffffffffffff81111561029257610291610120565b5b61029e84828501610233565b91505092915050565b5f81519050919050565b5f82825260208201905092915050565b8281835e5f83830152505050565b5f6102d9826102a7565b6102e381856102b1565b93506102f38185602086016102c1565b6102fc8161012c565b840191505092915050565b5f6020820190508181035f83015261031f81846102cf565b905092915050565b7f4e487b71000000000000000000000000000000000000000000000000000000005f52602260045260245ffd5b5f600282049050600182168061036b57607f821691505b60208210810361037e5761037d610327565b5b50919050565b5f819050815f5260205f209050919050565b5f6020601f8301049050919050565b5f82821b905092915050565b5f600883026103e07fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff826103a5565b6103ea86836103a5565b95508019841693508086168417925050509392505050565b5f819050919050565b5f819050919050565b5f61042e61042961042484610402565b61040b565b610402565b9050919050565b5f819050919050565b61044783610414565b61045b61045382610435565b8484546103b1565b825550505050565b5f90565b61046f610463565b61047a81848461043e565b505050565b5b8181101561049d576104925f82610467565b600181019050610480565b5050565b601f8211156104e2576104b381610384565b6104bc84610396565b810160208510156104cb578190505b6104df6104d785610396565b83018261047f565b50505b505050565b5f82821c905092915050565b5f6105025f19846008026104e7565b1980831691505092915050565b5f61051a83836104f3565b9150826002028217905092915050565b610533826102a7565b67ffffffffffffffff81111561054c5761054b61013c565b5b6105568254610354565b6105618282856104a1565b5f60209050601f831160018114610592575f8415610580578287015190505b61058a858261050f565b8655506105f1565b601f1984166105a086610384565b5f5b828110156105c7578489015182556001820191506020850194506020810190506105a2565b868310156105e457848901516105e0601f8916826104f3565b8355505b6001600288020188555050505b50505050505056fea2646970667358221220c4462f23962edba87cd01d76841a1ae026facaae75266d930953823abe8381eb64736f6c63430008190033

tools/wagmi-example/contract/contract_Greeter_sol_Greeter.json

@@ -0,0 +1 @@
+[{"inputs":[{"internalType":"string","name":"_greeting","type":"string"}],"stateMutability":"nonpayable","type":"constructor"},{"inputs":[],"name":"greet","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"string","name":"_greeting","type":"string"}],"name":"setGreeting","outputs":[],"stateMutability":"nonpayable","type":"function"}]

tools/wagmi-example/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>Wagmi Hedera example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

tools/wagmi-example/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "wagmi-example",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "biome check .",
+    "preview": "vite preview",
+    "compile": "solcjs contract/Greeter.sol --optimize --abi --bin -o contract/"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "5.45.1",
+    "@wagmi/core": "^2.13.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "viem": "^2.21.0",
+    "wagmi": "^2.12.7",
+    "solc": "^0.8.26"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.8.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@wagmi/cli": "^2.1.15",
+    "buffer": "^6.0.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11"
+  }
+}

tools/wagmi-example/src/App.tsx

@@ -0,0 +1,35 @@
+/*-
+ *
+ * Hedera JSON RPC Relay - Wagmi Example
+ *
+ * Copyright (C) 2024 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {Profile} from "./components/Profile.tsx";
+import {Contract} from "./components/Contract.tsx";
+
+function App() {
+  return (
+    <>
+      {/*This part covers account handling*/}
+      <Profile/>
+      {/*Deploy and interact with contract*/}
+      <Contract/>
+    </>
+  )
+}
+
+export default App

tools/wagmi-example/src/components/Contract.tsx

@@ -0,0 +1,59 @@
+/*-
+ *
+ * Hedera JSON RPC Relay - Wagmi Example
+ *
+ * Copyright (C) 2024 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {useDeploy, useReadGreet, useWriteGreet,} from "../hooks/use-deploy.ts";
+import {useState} from "react";
+import {useAccount} from "wagmi";
+
+export function Contract() {
+  const {status} = useAccount()
+
+  const {deployContract, contractAddress, isDeployed} = useDeploy();
+  const {data, status: greetStatusView, refetch} = useReadGreet(contractAddress)
+  const {status: setGreetStatus, setGreeting} = useWriteGreet(contractAddress, refetch)
+
+  const [greetingInput, setGreetingInput] = useState("")
+
+  return status === "connected" ? (
+    <div>
+      <h2>Deploy greeter contract</h2>
+      {!isDeployed ? (
+        <div>
+          <button onClick={deployContract}>Deploy</button>
+        </div>
+      ) : (
+        <p>Your contract is deployed on address: {contractAddress}</p>
+      )}
+
+      {isDeployed && (
+        <div>
+          <p>Current greet: {JSON.stringify(data)}</p>
+          <p>Get greet status: {greetStatusView}</p>
+          <hr/>
+          <div className="flex">
+            <input type="text" value={greetingInput} onChange={(e) => setGreetingInput(e.target.value)}/>
+            <button onClick={() => setGreeting(greetingInput)}>Call contract</button>
+          </div>
+          <p>Send transaction status: {setGreetStatus}</p>
+        </div>
+      )}
+    </div>
+  ) : null;
+}

tools/wagmi-example/src/components/Profile.tsx

@@ -0,0 +1,77 @@
+/*-
+ *
+ * Hedera JSON RPC Relay - Wagmi Example
+ *
+ * Copyright (C) 2024 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {useAccountBalance} from "../hooks/use-balance.ts";
+import {useAccount, useConnect, useDisconnect} from "wagmi";
+
+export function Profile() {
+  const {status, address} = useAccount()
+  const {disconnect} = useDisconnect()
+  const {balance} = useAccountBalance();
+  const {connectors, connect, status: statusWalletConnect, error: walletError} = useConnect()
+
+  const isLoading = statusWalletConnect === "pending" || status === "connecting" || status === "reconnecting";
+
+  return (
+    <div>
+      {isLoading && (
+        <div>
+          <p>Loading...</p>
+        </div>
+      )}
+
+      {
+        status === "connected" && (
+          <div>
+            <h2>Account</h2>
+
+            <div>
+              <p>status: {status}</p>
+              <p>addresses: {address ?? ""}</p>
+              <p>balance: {balance}</p>
+            </div>
+
+            <button type="button" onClick={() => disconnect()}>
+              Disconnect
+            </button>
+          </div>
+        )
+      }
+
+      {status === 'disconnected' && (
+        <div>
+          <h2>Connect your account</h2>
+          <div style={{display: 'flex', gap: '0.5rem'}}>
+            {connectors.map((connector) => (
+              <button
+                key={connector.uid}
+                onClick={() => connect({connector})}
+                type="button"
+              >
+                {connector.name}
+              </button>
+            ))}
+          </div>
+          <div>{walletError?.message}</div>
+        </div>
+      )}
+    </div>
+  )
+}

tools/wagmi-example/src/hooks/use-balance.ts

@@ -0,0 +1,35 @@
+/*-
+ *
+ * Hedera JSON RPC Relay - Wagmi Example
+ *
+ * Copyright (C) 2024 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { useAccount, useBalance } from 'wagmi';
+
+function calculateBalance(value: BigInt, decimals: number) {
+  return Number(value) / 10 ** decimals;
+}
+
+export function useAccountBalance() {
+  const { address } = useAccount();
+
+  const { data } = useBalance({ address });
+
+  const balance = data && calculateBalance(data.value, data.decimals);
+
+  return { balance };
+}