chore: add example

iosh · Sep 25, 2024 · 1c160f8 · 1c160f8
1 parent 3140ac7
commit 1c160f8
Show file tree

Hide file tree

Showing 10 changed files with 488 additions and 1 deletion.
diff --git a/examples/README.md b/examples/README.md
@@ -14,7 +14,7 @@ The `examples/` directory is a growing & living folder, and open for contributio
 - Contracts
   - [x] Deploying
   - [x] Reading
-  - [ ] Writing
+  - [x] Writing
   - [ ] Multicall
   - [ ] Call
   - [ ] Events

diff --git a/examples/contracts_writing_contract/README.md b/examples/contracts_writing_contract/README.md
@@ -0,0 +1,3 @@
+# Writing 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_writing_contract)
diff --git a/examples/contracts_writing_contract/index.html b/examples/contracts_writing_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">Writing Contract Example</h1>
+    <div class="container" id="app">Loading...</div>
+    <script type="module">
+      import './index.tsx';
+    </script>
+  </body>
+</html>
diff --git a/examples/contracts_writing_contract/index.tsx b/examples/contracts_writing_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_writing_contract/package.json b/examples/contracts_writing_contract/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "contracts_writing_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_writing_contract/src/App.tsx b/examples/contracts_writing_contract/src/App.tsx
@@ -0,0 +1,138 @@
+import {
+  http,
+  createPublicClient,
+  createWalletClient,
+  custom,
+  Address,
+  Hash,
+  WaitForTransactionReceiptReturnType,
+  WaitForTransactionReceiptErrorType,
+  SimulateContractErrorType,
+} 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 [hash, setHash] = useState<Hash>()
+  const [receipt, setReceipt] = useState<WaitForTransactionReceiptReturnType>()
+  const [error, setError] = useState<string>()
+
+  const connect = useCallback(async () => {
+    const [address] = await walletClient.requestAddresses()
+    setAccount(address)
+  }, [])
+
+  const mint = useCallback(async () => {
+    setError('')
+    if (!account) return
+    try {
+      const { request } = await client.simulateContract({
+        account,
+        address: CONTRACT_ADDRESS,
+        abi: contract.abi,
+        functionName: 'mint',
+        args: [account, 1n * 10n ** 18n],
+      })
+      // writeContract before simulateContract first
+      const hash = await walletClient.writeContract(request)
+      setHash(hash)
+
+      client
+        .waitForTransactionReceipt({ hash, retryCount: 11 })
+        .then((receipt) => {
+          setReceipt(receipt)
+        })
+    } catch (e: unknown) {
+      const err = e as
+        | WaitForTransactionReceiptErrorType
+        | 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-align-items-center">
+                <button className="button" onClick={mint}>
+                  Mint to self
+                </button>
+                <span className="is-size-5">result: </span>
+              </div>
+            </div>
+            <div className="column">
+              <div className="is-flex is-align-items-center">
+                <span className="is-size-5">
+                  {hash ? `transaction hash : ${hash}` : ''}
+                </span>
+              </div>
+            </div>
+
+            {hash && (
+              <div className="column">
+                <div className="is-flex is-align-items-center">
+                  <span className="is-size-5">
+                    wait for transaction receipt
+                  </span>
+                </div>
+              </div>
+            )}
+
+            {receipt && (
+              <div>
+                <p className="is-size-5">Transaction receipt:</p>
+                <table className="table">
+                  <thead>
+                    <tr>
+                      <th>#</th>
+                      <th>Key</th>
+                      <th>Value</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {receipt &&
+                      Object.entries(receipt).map(([key, value], idx) => (
+                        <tr key={key}>
+                          <td>{idx}</td>
+                          <td>{key}</td>
+                          <td>{`${value}`}</td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            {error && (
+              <div className="column">
+                <p>Error: {error}</p>
+              </div>
+            )}
+          </div>
+        ) : (
+          <button className="button" onClick={connect}>
+            Connect Wallet
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}