From 6bc6010a8ed8294c62cd64f2d2e88039ae8486cb Mon Sep 17 00:00:00 2001 From: Mariusz Jasuwienas Date: Thu, 10 Oct 2024 19:17:10 +0200 Subject: [PATCH] feat: Wagmi example usage with Hedera (#3000) * feat: Wagmi example usage with Hedera Signed-off-by: mateuszm-arianelabs * chore: typo in readme, remove unused import Signed-off-by: mateuszm-arianelabs * chore: typo in readme, cleanup in code Signed-off-by: mateuszm-arianelabs * chore: change pnpm to npm, small fixes Signed-off-by: mateuszm-arianelabs * feat: pr suggestions applied Signed-off-by: Mariusz Jasuwienas * feat: pr suggestions applied Signed-off-by: Mariusz Jasuwienas * feat: cancuns opcodes are supported in hedera already so this comment about them was no longer valid Signed-off-by: Mariusz Jasuwienas --------- Signed-off-by: mateuszm-arianelabs Signed-off-by: Mariusz Jasuwienas Co-authored-by: mateuszm-arianelabs --- tools/wagmi-example/.gitignore | 24 +++++ tools/wagmi-example/.npmrc | 1 + tools/wagmi-example/README.md | 23 +++++ tools/wagmi-example/biome.json | 13 +++ tools/wagmi-example/contract/Greeter.sol | 18 ++++ .../contract/contract_Greeter_sol_Greeter.bin | 1 + .../contract_Greeter_sol_Greeter.json | 1 + tools/wagmi-example/index.html | 12 +++ tools/wagmi-example/package.json | 32 +++++++ tools/wagmi-example/src/App.tsx | 35 ++++++++ .../wagmi-example/src/components/Contract.tsx | 59 +++++++++++++ .../wagmi-example/src/components/Profile.tsx | 77 ++++++++++++++++ tools/wagmi-example/src/hooks/use-balance.ts | 35 ++++++++ tools/wagmi-example/src/hooks/use-deploy.ts | 88 +++++++++++++++++++ tools/wagmi-example/src/index.css | 25 ++++++ tools/wagmi-example/src/main.tsx | 44 ++++++++++ tools/wagmi-example/src/vite-env.d.ts | 1 + tools/wagmi-example/src/wagmi.ts | 38 ++++++++ tools/wagmi-example/tsconfig.json | 25 ++++++ tools/wagmi-example/vite.config.ts | 7 ++ 20 files changed, 559 insertions(+) create mode 100644 tools/wagmi-example/.gitignore create mode 100644 tools/wagmi-example/.npmrc create mode 100644 tools/wagmi-example/README.md create mode 100644 tools/wagmi-example/biome.json create mode 100644 tools/wagmi-example/contract/Greeter.sol create mode 100644 tools/wagmi-example/contract/contract_Greeter_sol_Greeter.bin create mode 100644 tools/wagmi-example/contract/contract_Greeter_sol_Greeter.json create mode 100644 tools/wagmi-example/index.html create mode 100644 tools/wagmi-example/package.json create mode 100644 tools/wagmi-example/src/App.tsx create mode 100644 tools/wagmi-example/src/components/Contract.tsx create mode 100644 tools/wagmi-example/src/components/Profile.tsx create mode 100644 tools/wagmi-example/src/hooks/use-balance.ts create mode 100644 tools/wagmi-example/src/hooks/use-deploy.ts create mode 100644 tools/wagmi-example/src/index.css create mode 100644 tools/wagmi-example/src/main.tsx create mode 100644 tools/wagmi-example/src/vite-env.d.ts create mode 100644 tools/wagmi-example/src/wagmi.ts create mode 100644 tools/wagmi-example/tsconfig.json create mode 100644 tools/wagmi-example/vite.config.ts diff --git a/tools/wagmi-example/.gitignore b/tools/wagmi-example/.gitignore new file mode 100644 index 0000000000..a547bf36d8 --- /dev/null +++ b/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? diff --git a/tools/wagmi-example/.npmrc b/tools/wagmi-example/.npmrc new file mode 100644 index 0000000000..80bcbed90c --- /dev/null +++ b/tools/wagmi-example/.npmrc @@ -0,0 +1 @@ +legacy-peer-deps = true diff --git a/tools/wagmi-example/README.md b/tools/wagmi-example/README.md new file mode 100644 index 0000000000..ddb857e0a7 --- /dev/null +++ b/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` \ No newline at end of file diff --git a/tools/wagmi-example/biome.json b/tools/wagmi-example/biome.json new file mode 100644 index 0000000000..08eb8a26ab --- /dev/null +++ b/tools/wagmi-example/biome.json @@ -0,0 +1,13 @@ +{ + "formatter": { + "enabled": true, + "indentStyle": "space", + "lineWidth": 120 + }, + "linter": { + "enabled": true + }, + "organizeImports": { + "enabled": true + } +} diff --git a/tools/wagmi-example/contract/Greeter.sol b/tools/wagmi-example/contract/Greeter.sol new file mode 100644 index 0000000000..d3df58013f --- /dev/null +++ b/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; + } +} diff --git a/tools/wagmi-example/contract/contract_Greeter_sol_Greeter.bin b/tools/wagmi-example/contract/contract_Greeter_sol_Greeter.bin new file mode 100644 index 0000000000..a8d2e398bb --- /dev/null +++ b/tools/wagmi-example/contract/contract_Greeter_sol_Greeter.bin @@ -0,0 +1 @@ +608060405234801561000f575f80fd5b50604051610af2380380610af283398181016040528101906100319190610193565b805f908161003f91906103e7565b50506104b6565b5f604051905090565b5f80fd5b5f80fd5b5f80fd5b5f80fd5b5f601f19601f8301169050919050565b7f4e487b71000000000000000000000000000000000000000000000000000000005f52604160045260245ffd5b6100a58261005f565b810181811067ffffffffffffffff821117156100c4576100c361006f565b5b80604052505050565b5f6100d6610046565b90506100e2828261009c565b919050565b5f67ffffffffffffffff8211156101015761010061006f565b5b61010a8261005f565b9050602081019050919050565b8281835e5f83830152505050565b5f610137610132846100e7565b6100cd565b9050828152602081018484840111156101535761015261005b565b5b61015e848285610117565b509392505050565b5f82601f83011261017a57610179610057565b5b815161018a848260208601610125565b91505092915050565b5f602082840312156101a8576101a761004f565b5b5f82015167ffffffffffffffff8111156101c5576101c4610053565b5b6101d184828501610166565b91505092915050565b5f81519050919050565b7f4e487b71000000000000000000000000000000000000000000000000000000005f52602260045260245ffd5b5f600282049050600182168061022857607f821691505b60208210810361023b5761023a6101e4565b5b50919050565b5f819050815f5260205f209050919050565b5f6020601f8301049050919050565b5f82821b905092915050565b5f6008830261029d7fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff82610262565b6102a78683610262565b95508019841693508086168417925050509392505050565b5f819050919050565b5f819050919050565b5f6102eb6102e66102e1846102bf565b6102c8565b6102bf565b9050919050565b5f819050919050565b610304836102d1565b610318610310826102f2565b84845461026e565b825550505050565b5f90565b61032c610320565b6103378184846102fb565b505050565b5b8181101561035a5761034f5f82610324565b60018101905061033d565b5050565b601f82111561039f5761037081610241565b61037984610253565b81016020851015610388578190505b61039c61039485610253565b83018261033c565b50505b505050565b5f82821c905092915050565b5f6103bf5f19846008026103a4565b1980831691505092915050565b5f6103d783836103b0565b9150826002028217905092915050565b6103f0826101da565b67ffffffffffffffff8111156104095761040861006f565b5b6104138254610211565b61041e82828561035e565b5f60209050601f83116001811461044f575f841561043d578287015190505b61044785826103cc565b8655506104ae565b601f19841661045d86610241565b5f5b828110156104845784890151825560018201915060208501945060208101905061045f565b868310156104a1578489015161049d601f8916826103b0565b8355505b6001600288020188555050505b505050505050565b61062f806104c35f395ff3fe608060405234801561000f575f80fd5b5060043610610034575f3560e01c8063a413686214610038578063cfae321714610054575b5f80fd5b610052600480360381019061004d9190610260565b610072565b005b61005c610084565b6040516100699190610307565b60405180910390f35b805f9081610080919061052a565b5050565b60605f805461009290610354565b80601f01602080910402602001604051908101604052809291908181526020018280546100be90610354565b80156101095780601f106100e057610100808354040283529160200191610109565b820191905f5260205f20905b8154815290600101906020018083116100ec57829003601f168201915b5050505050905090565b5f604051905090565b5f80fd5b5f80fd5b5f80fd5b5f80fd5b5f601f19601f8301169050919050565b7f4e487b71000000000000000000000000000000000000000000000000000000005f52604160045260245ffd5b6101728261012c565b810181811067ffffffffffffffff821117156101915761019061013c565b5b80604052505050565b5f6101a3610113565b90506101af8282610169565b919050565b5f67ffffffffffffffff8211156101ce576101cd61013c565b5b6101d78261012c565b9050602081019050919050565b828183375f83830152505050565b5f6102046101ff846101b4565b61019a565b9050828152602081018484840111156102205761021f610128565b5b61022b8482856101e4565b509392505050565b5f82601f83011261024757610246610124565b5b81356102578482602086016101f2565b91505092915050565b5f602082840312156102755761027461011c565b5b5f82013567ffffffffffffffff81111561029257610291610120565b5b61029e84828501610233565b91505092915050565b5f81519050919050565b5f82825260208201905092915050565b8281835e5f83830152505050565b5f6102d9826102a7565b6102e381856102b1565b93506102f38185602086016102c1565b6102fc8161012c565b840191505092915050565b5f6020820190508181035f83015261031f81846102cf565b905092915050565b7f4e487b71000000000000000000000000000000000000000000000000000000005f52602260045260245ffd5b5f600282049050600182168061036b57607f821691505b60208210810361037e5761037d610327565b5b50919050565b5f819050815f5260205f209050919050565b5f6020601f8301049050919050565b5f82821b905092915050565b5f600883026103e07fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff826103a5565b6103ea86836103a5565b95508019841693508086168417925050509392505050565b5f819050919050565b5f819050919050565b5f61042e61042961042484610402565b61040b565b610402565b9050919050565b5f819050919050565b61044783610414565b61045b61045382610435565b8484546103b1565b825550505050565b5f90565b61046f610463565b61047a81848461043e565b505050565b5b8181101561049d576104925f82610467565b600181019050610480565b5050565b601f8211156104e2576104b381610384565b6104bc84610396565b810160208510156104cb578190505b6104df6104d785610396565b83018261047f565b50505b505050565b5f82821c905092915050565b5f6105025f19846008026104e7565b1980831691505092915050565b5f61051a83836104f3565b9150826002028217905092915050565b610533826102a7565b67ffffffffffffffff81111561054c5761054b61013c565b5b6105568254610354565b6105618282856104a1565b5f60209050601f831160018114610592575f8415610580578287015190505b61058a858261050f565b8655506105f1565b601f1984166105a086610384565b5f5b828110156105c7578489015182556001820191506020850194506020810190506105a2565b868310156105e457848901516105e0601f8916826104f3565b8355505b6001600288020188555050505b50505050505056fea2646970667358221220c4462f23962edba87cd01d76841a1ae026facaae75266d930953823abe8381eb64736f6c63430008190033 \ No newline at end of file diff --git a/tools/wagmi-example/contract/contract_Greeter_sol_Greeter.json b/tools/wagmi-example/contract/contract_Greeter_sol_Greeter.json new file mode 100644 index 0000000000..fe4d510312 --- /dev/null +++ b/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"}] \ No newline at end of file diff --git a/tools/wagmi-example/index.html b/tools/wagmi-example/index.html new file mode 100644 index 0000000000..5f841aab1b --- /dev/null +++ b/tools/wagmi-example/index.html @@ -0,0 +1,12 @@ + + + + + + Wagmi Hedera example + + +
+ + + diff --git a/tools/wagmi-example/package.json b/tools/wagmi-example/package.json new file mode 100644 index 0000000000..efe5c17766 --- /dev/null +++ b/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" + } +} diff --git a/tools/wagmi-example/src/App.tsx b/tools/wagmi-example/src/App.tsx new file mode 100644 index 0000000000..63a0f15360 --- /dev/null +++ b/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*/} + + {/*Deploy and interact with contract*/} + + + ) +} + +export default App diff --git a/tools/wagmi-example/src/components/Contract.tsx b/tools/wagmi-example/src/components/Contract.tsx new file mode 100644 index 0000000000..4f9cea022c --- /dev/null +++ b/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" ? ( +
+

Deploy greeter contract

+ {!isDeployed ? ( +
+ +
+ ) : ( +

Your contract is deployed on address: {contractAddress}

+ )} + + {isDeployed && ( +
+

Current greet: {JSON.stringify(data)}

+

Get greet status: {greetStatusView}

+
+
+ setGreetingInput(e.target.value)}/> + +
+

Send transaction status: {setGreetStatus}

+
+ )} +
+ ) : null; +} diff --git a/tools/wagmi-example/src/components/Profile.tsx b/tools/wagmi-example/src/components/Profile.tsx new file mode 100644 index 0000000000..41389a77a5 --- /dev/null +++ b/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 ( +
+ {isLoading && ( +
+

Loading...

+
+ )} + + { + status === "connected" && ( +
+

Account

+ +
+

status: {status}

+

addresses: {address ?? ""}

+

balance: {balance}

+
+ + +
+ ) + } + + {status === 'disconnected' && ( +
+

Connect your account

+
+ {connectors.map((connector) => ( + + ))} +
+
{walletError?.message}
+
+ )} +
+ ) +} diff --git a/tools/wagmi-example/src/hooks/use-balance.ts b/tools/wagmi-example/src/hooks/use-balance.ts new file mode 100644 index 0000000000..78b7c546ff --- /dev/null +++ b/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 }; +} diff --git a/tools/wagmi-example/src/hooks/use-deploy.ts b/tools/wagmi-example/src/hooks/use-deploy.ts new file mode 100644 index 0000000000..27c249e859 --- /dev/null +++ b/tools/wagmi-example/src/hooks/use-deploy.ts @@ -0,0 +1,88 @@ +/*- + * + * 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 { useDeployContract, useReadContract, useTransactionReceipt, useWriteContract } from 'wagmi'; +import { hederaTestnet } from 'wagmi/chains'; + +// You can find out in the documentation how to this files +import abi from '../../contract/contract_Greeter_sol_Greeter.json'; +// contract_Greeter_sol_Greeter.bin +const bin = + '608060405234801562000010575f80fd5b5060405162000b9438038062000b948339818101604052810190620000369190620001d3565b805f908162000046919062000459565b50506200053d565b5f604051905090565b5f80fd5b5f80fd5b5f80fd5b5f80fd5b5f601f19601f8301169050919050565b7f4e487b71000000000000000000000000000000000000000000000000000000005f52604160045260245ffd5b620000af8262000067565b810181811067ffffffffffffffff82111715620000d157620000d062000077565b5b80604052505050565b5f620000e56200004e565b9050620000f38282620000a4565b919050565b5f67ffffffffffffffff82111562000115576200011462000077565b5b620001208262000067565b9050602081019050919050565b5f5b838110156200014c5780820151818401526020810190506200012f565b5f8484015250505050565b5f6200016d6200016784620000f8565b620000da565b9050828152602081018484840111156200018c576200018b62000063565b5b620001998482856200012d565b509392505050565b5f82601f830112620001b857620001b76200005f565b5b8151620001ca84826020860162000157565b91505092915050565b5f60208284031215620001eb57620001ea62000057565b5b5f82015167ffffffffffffffff8111156200020b576200020a6200005b565b5b6200021984828501620001a1565b91505092915050565b5f81519050919050565b7f4e487b71000000000000000000000000000000000000000000000000000000005f52602260045260245ffd5b5f60028204905060018216806200027157607f821691505b6020821081036200028757620002866200022c565b5b50919050565b5f819050815f5260205f209050919050565b5f6020601f8301049050919050565b5f82821b905092915050565b5f60088302620002eb7fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff82620002ae565b620002f78683620002ae565b95508019841693508086168417925050509392505050565b5f819050919050565b5f819050919050565b5f620003416200033b62000335846200030f565b62000318565b6200030f565b9050919050565b5f819050919050565b6200035c8362000321565b620003746200036b8262000348565b848454620002ba565b825550505050565b5f90565b6200038a6200037c565b6200039781848462000351565b505050565b5b81811015620003be57620003b25f8262000380565b6001810190506200039d565b5050565b601f8211156200040d57620003d7816200028d565b620003e2846200029f565b81016020851015620003f2578190505b6200040a62000401856200029f565b8301826200039c565b50505b505050565b5f82821c905092915050565b5f6200042f5f198460080262000412565b1980831691505092915050565b5f6200044983836200041e565b9150826002028217905092915050565b620004648262000222565b67ffffffffffffffff81111562000480576200047f62000077565b5b6200048c825462000259565b62000499828285620003c2565b5f60209050601f831160018114620004cf575f8415620004ba578287015190505b620004c685826200043c565b86555062000535565b601f198416620004df866200028d565b5f5b828110156200050857848901518255600182019150602085019450602081019050620004e1565b8683101562000528578489015162000524601f8916826200041e565b8355505b6001600288020188555050505b505050505050565b610649806200054b5f395ff3fe608060405234801561000f575f80fd5b5060043610610034575f3560e01c8063a413686214610038578063cfae321714610054575b5f80fd5b610052600480360381019061004d9190610260565b610072565b005b61005c610084565b6040516100699190610321565b60405180910390f35b805f90816100809190610544565b5050565b60605f80546100929061036e565b80601f01602080910402602001604051908101604052809291908181526020018280546100be9061036e565b80156101095780601f106100e057610100808354040283529160200191610109565b820191905f5260205f20905b8154815290600101906020018083116100ec57829003601f168201915b5050505050905090565b5f604051905090565b5f80fd5b5f80fd5b5f80fd5b5f80fd5b5f601f19601f8301169050919050565b7f4e487b71000000000000000000000000000000000000000000000000000000005f52604160045260245ffd5b6101728261012c565b810181811067ffffffffffffffff821117156101915761019061013c565b5b80604052505050565b5f6101a3610113565b90506101af8282610169565b919050565b5f67ffffffffffffffff8211156101ce576101cd61013c565b5b6101d78261012c565b9050602081019050919050565b828183375f83830152505050565b5f6102046101ff846101b4565b61019a565b9050828152602081018484840111156102205761021f610128565b5b61022b8482856101e4565b509392505050565b5f82601f83011261024757610246610124565b5b81356102578482602086016101f2565b91505092915050565b5f602082840312156102755761027461011c565b5b5f82013567ffffffffffffffff81111561029257610291610120565b5b61029e84828501610233565b91505092915050565b5f81519050919050565b5f82825260208201905092915050565b5f5b838110156102de5780820151818401526020810190506102c3565b5f8484015250505050565b5f6102f3826102a7565b6102fd81856102b1565b935061030d8185602086016102c1565b6103168161012c565b840191505092915050565b5f6020820190508181035f83015261033981846102e9565b905092915050565b7f4e487b71000000000000000000000000000000000000000000000000000000005f52602260045260245ffd5b5f600282049050600182168061038557607f821691505b60208210810361039857610397610341565b5b50919050565b5f819050815f5260205f209050919050565b5f6020601f8301049050919050565b5f82821b905092915050565b5f600883026103fa7fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff826103bf565b61040486836103bf565b95508019841693508086168417925050509392505050565b5f819050919050565b5f819050919050565b5f61044861044361043e8461041c565b610425565b61041c565b9050919050565b5f819050919050565b6104618361042e565b61047561046d8261044f565b8484546103cb565b825550505050565b5f90565b61048961047d565b610494818484610458565b505050565b5b818110156104b7576104ac5f82610481565b60018101905061049a565b5050565b601f8211156104fc576104cd8161039e565b6104d6846103b0565b810160208510156104e5578190505b6104f96104f1856103b0565b830182610499565b50505b505050565b5f82821c905092915050565b5f61051c5f1984600802610501565b1980831691505092915050565b5f610534838361050d565b9150826002028217905092915050565b61054d826102a7565b67ffffffffffffffff8111156105665761056561013c565b5b610570825461036e565b61057b8282856104bb565b5f60209050601f8311600181146105ac575f841561059a578287015190505b6105a48582610529565b86555061060b565b601f1984166105ba8661039e565b5f5b828110156105e1578489015182556001820191506020850194506020810190506105bc565b868310156105fe57848901516105fa601f89168261050d565b8355505b6001600288020188555050505b50505050505056fea26469706673582212206a9622606bbe375c853566219d542a74563f89b1545eccc6fda54ae4187ec97c64736f6c63430008180033'; + +export function useDeploy() { + const { data: deployTxHash, deployContract, status: deployStatus } = useDeployContract(); + const { data: deployReceipt, status: receiptStatus } = useTransactionReceipt({ + hash: deployTxHash, + query: { + enabled: Boolean(deployTxHash), + }, + }); + + return { + deployContract: () => { + deployContract({ + bytecode: `0x${bin}`, + abi, + args: ['Hello from react'], + }); + }, + deployTxHash, + deployReceipt, + contractAddress: deployReceipt?.contractAddress ?? undefined, + isDeployed: deployStatus === 'success' && receiptStatus === 'success', + }; +} + +type ContractAddress = `0x${string}` | undefined; + +export function useWriteGreet(address: ContractAddress, refetch: () => void) { + const { writeContractAsync, status, data } = useWriteContract(); + + return { + setGreeting: async (greet: string) => { + if (!address) { + return; + } + await writeContractAsync({ + abi, + address, + functionName: 'setGreeting', + args: [greet], + }); + refetch(); + }, + status, + data, + }; +} + +export function useReadGreet(address: ContractAddress) { + return useReadContract({ + query: { + enabled: Boolean(address), + }, + abi, + address, + functionName: 'greet', + args: [], + chainId: hederaTestnet.id, + }); +} diff --git a/tools/wagmi-example/src/index.css b/tools/wagmi-example/src/index.css new file mode 100644 index 0000000000..1cb417d9cc --- /dev/null +++ b/tools/wagmi-example/src/index.css @@ -0,0 +1,25 @@ +: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; + } +} + +.flex { + display: flex; +} diff --git a/tools/wagmi-example/src/main.tsx b/tools/wagmi-example/src/main.tsx new file mode 100644 index 0000000000..cda3a08d7e --- /dev/null +++ b/tools/wagmi-example/src/main.tsx @@ -0,0 +1,44 @@ +/*- + * + * 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 {Buffer} from 'buffer' +import {QueryClient, QueryClientProvider} from '@tanstack/react-query' +import React from 'react' +import ReactDOM from 'react-dom/client' +import {WagmiProvider} from 'wagmi' + +import App from './App.tsx' +import {config} from './wagmi.ts' + +import './index.css' + +globalThis.Buffer = Buffer + +const queryClient = new QueryClient() + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + + + + + , +) diff --git a/tools/wagmi-example/src/vite-env.d.ts b/tools/wagmi-example/src/vite-env.d.ts new file mode 100644 index 0000000000..11f02fe2a0 --- /dev/null +++ b/tools/wagmi-example/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tools/wagmi-example/src/wagmi.ts b/tools/wagmi-example/src/wagmi.ts new file mode 100644 index 0000000000..21a4f2d3df --- /dev/null +++ b/tools/wagmi-example/src/wagmi.ts @@ -0,0 +1,38 @@ +/*- + * + * 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 { http, createConfig } from 'wagmi'; +import { hedera, hederaTestnet } from 'wagmi/chains'; +import { coinbaseWallet, injected } from 'wagmi/connectors'; + +export const config = createConfig({ + chains: [hederaTestnet, hedera], + connectors: [injected(), coinbaseWallet()], + transports: { + [hederaTestnet.id]: http(), + [hedera.id]: http(), + }, +}); + +declare module 'wagmi' { + interface Register { + config: typeof config; + } +} diff --git a/tools/wagmi-example/tsconfig.json b/tools/wagmi-example/tsconfig.json new file mode 100644 index 0000000000..1204fadf64 --- /dev/null +++ b/tools/wagmi-example/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "composite": true, + }, + "include": ["src", "vite.config.ts"], +} diff --git a/tools/wagmi-example/vite.config.ts b/tools/wagmi-example/vite.config.ts new file mode 100644 index 0000000000..36f7f4e1bc --- /dev/null +++ b/tools/wagmi-example/vite.config.ts @@ -0,0 +1,7 @@ +import react from '@vitejs/plugin-react' +import { defineConfig } from 'vite' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +})