chore: add example

iosh · Sep 26, 2024 · b0acf4a · b0acf4a
1 parent 1c160f8
commit b0acf4a
Show file tree

Hide file tree

Showing 11 changed files with 547 additions and 6 deletions.
diff --git a/examples/README.md b/examples/README.md
@@ -18,7 +18,7 @@ The `examples/` directory is a growing & living folder, and open for contributio
   - [ ] Multicall
   - [ ] Call
   - [ ] Events
-  - [ ] Simulating Method Calls
+  - [x] Simulating Method Calls
 - Filters & Logs
   - [ ] Blocks
   - [ ] Pending Transactions

diff --git a/examples/contracts_simulating_contract/README.md b/examples/contracts_simulating_contract/README.md
@@ -0,0 +1,3 @@
+# simulating contract Example
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github.com/iosh/cive/tree/main/examples/contracts_simulating_contract)
diff --git a/examples/contracts_simulating_contract/index.html b/examples/contracts_simulating_contract/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <h1 class="title has-text-centered">simulating contract Example</h1>
+    <div class="container" id="app">Loading...</div>
+    <script type="module">
+      import './index.tsx';
+    </script>
+  </body>
+</html>
diff --git a/examples/contracts_simulating_contract/index.tsx b/examples/contracts_simulating_contract/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './src/App'
+import 'bulma/css/bulma.css'
+ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/examples/contracts_simulating_contract/package.json b/examples/contracts_simulating_contract/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "contracts_simulating_contract",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "bulma": "^1.0.2",
+    "cive": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.4"
+  }
+}
diff --git a/examples/contracts_simulating_contract/src/App.tsx b/examples/contracts_simulating_contract/src/App.tsx
@@ -0,0 +1,192 @@
+import {
+  http,
+  type Address,
+  type Hash,
+  type SimulateContractErrorType,
+  type SimulateContractReturnType,
+  type WaitForTransactionReceiptErrorType,
+  type WaitForTransactionReceiptReturnType,
+  createPublicClient,
+  createWalletClient,
+  custom,
+  parseUnits,
+} from 'cive'
+import { mainnet, testnet } from 'cive/chains'
+import { useCallback, useState } from 'react'
+import 'cive/window'
+import contract from './contract'
+
+const CONTRACT_ADDRESS = 'cfxtest:acfrcwu7yn4ysjybux326my6a743zw2zwjps5had1g'
+
+const client = createPublicClient({
+  chain: testnet,
+  transport: http(),
+})
+const walletClient = createWalletClient({
+  chain: testnet,
+  transport: custom(window.fluent!),
+})
+export default function App() {
+  const [account, setAccount] = useState<Address>()
+  const [mint, setMint] =
+    useState<
+      SimulateContractReturnType<
+        (typeof contract)['abi'],
+        'mint',
+        [Address, bigint]
+      >
+    >()
+  const [approve, setApprove] =
+    useState<
+      SimulateContractReturnType<
+        (typeof contract)['abi'],
+        'approve',
+        [Address, bigint]
+      >
+    >()
+  const [error, setError] = useState<string>()
+
+  const connect = useCallback(async () => {
+    const [address] = await walletClient.requestAddresses()
+    setAccount(address)
+  }, [])
+
+  const handleSimulateMint = useCallback(async () => {
+    setError('')
+    if (!account) return
+    try {
+      const result = await client.simulateContract({
+        account,
+        address: CONTRACT_ADDRESS,
+        abi: contract.abi,
+        functionName: 'mint',
+        args: [account, parseUnits('1', 18)],
+      })
+      setMint(result)
+    } catch (e: unknown) {
+      const err = e as SimulateContractErrorType
+
+      setError(err.name)
+    }
+  }, [account])
+
+  const handleSimulateApprove = useCallback(async () => {
+    setError('')
+    if (!account) return
+    try {
+      const result = await client.simulateContract({
+        account,
+        address: CONTRACT_ADDRESS,
+        abi: contract.abi,
+        functionName: 'approve',
+        args: [account, parseUnits('1', 18)],
+      })
+      setApprove(result)
+    } catch (e: unknown) {
+      const err = e as SimulateContractErrorType
+      setError(err.name)
+    }
+  }, [account])
+  return (
+    <div className="box">
+      <div className="column">
+        {account ? (
+          <div className="columns is-3 is-flex-direction-column">
+            <span>Account: {account}</span>
+            <div className="column">
+              <div className="is-flex is-flex-direction-column is-align-items-center">
+                <button className="button" onClick={handleSimulateMint}>
+                  Simulate Mint
+                </button>
+                <span className="is-size-5">Result: {`${mint?.result}`}</span>
+
+                {mint?.request && (
+                  <div>
+                    <p className="is-size-5">Simulate Mint request:</p>
+                    <table className="table">
+                      <thead>
+                        <tr>
+                          <th>#</th>
+                          <th>Key</th>
+                          <th>Value</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {mint?.request &&
+                          Object.entries(mint?.request).map(
+                            ([key, value], idx) => (
+                              <tr key={key}>
+                                <td>{idx}</td>
+                                <td>{key}</td>
+                                <td>{`${value}`}</td>
+                              </tr>
+                            ),
+                          )}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="column">
+              <div className="is-flex is-flex-direction-column is-align-items-center">
+                <button className="button" onClick={handleSimulateApprove}>
+                  Simulate Approve
+                </button>
+
+                <span className="is-size-5">
+                  Result: {`${approve?.result}`}
+                </span>
+                <p className="is-size-5">
+                  you can use the simulateContract to get the contract's return
+                  value
+                </p>
+
+                {approve?.request && (
+                  <div>
+                    <p className="is-size-5">Simulate Approve request:</p>
+                    <table className="table">
+                      <thead>
+                        <tr>
+                          <th>#</th>
+                          <th>Key</th>
+                          <th>Value</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {approve?.request &&
+                          Object.entries(approve?.request).map(
+                            ([key, value], idx) => (
+                              <tr key={key}>
+                                <td>{idx}</td>
+                                <td>{key}</td>
+                                <td>{`${value}`}</td>
+                              </tr>
+                            ),
+                          )}
+                      </tbody>
+                    </table>
+                    <p className="is-size-5">
+                      you can use the request to call writeContract function
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {error && (
+              <div className="column">
+                <p>Error: {error}</p>
+              </div>
+            )}
+          </div>
+        ) : (
+          <button className="button" onClick={connect}>
+            Connect Wallet
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# simulating contract Example

		[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github.com/iosh/cive/tree/main/examples/contracts_simulating_contract)