Merge pull request #146 from unicape/1.x

chore: add example

playgrounds/vite-vue/src/App.vue

@@ -8,6 +8,10 @@ import Connections from './components/Connections.vue'
 import BlockNumber from './components/BlockNumber.vue'
 import Balance from './components/Balance.vue'
 import ConnectorClient from './components/ConnectorClient.vue'
+import SendTransaction from './components/SendTransaction.vue'
+import ReadContract from './components/ReadContract.vue'
+import ReadContracts from './components/ReadContracts.vue'
+import WriteContract from './components/WriteContract.vue'
 </script>
 
 <template>
@@ -20,4 +24,8 @@ import ConnectorClient from './components/ConnectorClient.vue'
 	<BlockNumber />
 	<Balance />
 	<ConnectorClient />
+	<SendTransaction />
+	<ReadContract />
+	<ReadContracts />
+	<WriteContract />
 </template>

playgrounds/vite-vue/src/components/ReadContract.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useReadContract } from 'use-wagmi'
+import { wagmiContractConfig } from '../contracts'
+
+const { data: balance } = useReadContract({
+  ...wagmiContractConfig,
+  functionName: 'balanceOf',
+  args: ['0x03A71968491d55603FFe1b11A9e23eF013f75bCF'],
+})
+</script>
+
+<template>
+  <div>
+    <h2>Read Contract</h2>
+    <div>Balance: {{ balance?.toString() }}</div>
+  </div>
+</template>

playgrounds/vite-vue/src/components/ReadContracts.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useReadContracts } from 'use-wagmi'
+import { wagmiContractConfig } from '../contracts'
+
+const { data } = useReadContracts({
+  allowFailure: false,
+  contracts: [
+    {
+      ...wagmiContractConfig,
+      functionName: 'balanceOf',
+      args: ['0x03A71968491d55603FFe1b11A9e23eF013f75bCF'],
+    },
+    {
+      ...wagmiContractConfig,
+      functionName: 'ownerOf',
+      args: [69n],
+    },
+    {
+      ...wagmiContractConfig,
+      functionName: 'totalSupply',
+    },
+  ],
+})
+
+const balance = computed(() => (data.value || [])[0])
+const ownerOf = computed(() => (data.value || [])[1])
+const totalSupply = computed(() => (data.value || [])[2])
+</script>
+
+<template>
+  <div>
+    <h2>Read Contract</h2>
+    <div>Balance: {{ balance?.toString() }}</div>
+    <div>Owner of Token 69: {{ ownerOf?.toString() }}</div>
+    <div>Total Supply: {{ totalSupply?.toString() }}</div>
+  </div>
+</template>

playgrounds/vite-vue/src/components/SendTransaction.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { BaseError, useSendTransaction, useWaitForTransactionReceipt } from 'use-wagmi'
+import { Hex, parseEther } from 'viem'
+
+const { data: hash, error, isPending, sendTransaction } = useSendTransaction()
+
+async function submit(e: Event) {
+  e.preventDefault()
+  const formData = new FormData(e.target as HTMLFormElement)
+  const to = formData.get('address') as Hex
+  const value = formData.get('value') as string
+  sendTransaction({ to, value: parseEther(value) })
+}
+
+const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
+  hash,
+})
+</script>
+
+<template>
+  <div>
+    <h2>Send Transaction</h2>
+    {{ a }}
+    <form @submit="submit">
+      <input name="address" placeholder="Address" required />
+      <input name="value" placeholder="Amount (ETH)" type="number" step="0.000000001" required />
+      <button :disabled="isPending" type="submit">
+        {{ isPending ? 'Confirming...' : 'Send' }}
+      </button>
+    </form>
+    <div v-if="hash">Transaction Hash: {hash}</div>
+    <div v-if="isConfirming">Waiting for confirmation...</div>
+    <div v-if="isConfirmed">Transaction confirmed.</div>
+    <div v-if="error">Error: {{ (error as BaseError).shortMessage || error.message }}</div>
+  </div>
+</template>

playgrounds/vite-vue/src/components/WriteContract.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { parseAbi } from 'viem'
+import { BaseError, useWriteContract, useWaitForTransactionReceipt } from 'use-wagmi'
+
+const { data: hash, error, isPending, writeContract } = useWriteContract()
+
+async function submit(e: Event) {
+  e.preventDefault()
+  const formData = new FormData(e.target as HTMLFormElement)
+  const tokenId = formData.get('tokenId') as string
+  writeContract({
+    address: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2',
+    abi: parseAbi(['function mint(uint256 tokenId)']),
+    functionName: 'mint',
+    args: [BigInt(tokenId)],
+  })
+}
+
+const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
+  hash,
+})
+</script>
+
+<template>
+  <div>
+    <h2>Write Contract</h2>
+    <form @submit="submit">
+      <input name="tokenId" placeholder="Token ID" required />
+      <button :disabled="isPending" type="submit">
+        {{ isPending ? 'Confirming...' : 'Mint' }}
+      </button>
+    </form>
+    <div v-if="hash">Transaction Hash: {hash}</div>
+    <div v-if="isConfirming">Waiting for confirmation...</div>
+    <div v-if="isConfirmed">Transaction confirmed.</div>
+    <div v-if="error">Error: {{ (error as BaseError).shortMessage || error.message }}</div>
+  </div>
+</template>

playgrounds/vite-vue/src/contracts.ts

@@ -0,0 +1,202 @@
+export const wagmiContractConfig = {
+  address: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2',
+  abi: [
+    { inputs: [], stateMutability: 'nonpayable', type: 'constructor' },
+    {
+      anonymous: false,
+      inputs: [
+        {
+          indexed: true,
+          name: 'owner',
+          type: 'address',
+        },
+        {
+          indexed: true,
+          name: 'approved',
+          type: 'address',
+        },
+        {
+          indexed: true,
+          name: 'tokenId',
+          type: 'uint256',
+        },
+      ],
+      name: 'Approval',
+      type: 'event',
+    },
+    {
+      anonymous: false,
+      inputs: [
+        {
+          indexed: true,
+          name: 'owner',
+          type: 'address',
+        },
+        {
+          indexed: true,
+          name: 'operator',
+          type: 'address',
+        },
+        {
+          indexed: false,
+          name: 'approved',
+          type: 'bool',
+        },
+      ],
+      name: 'ApprovalForAll',
+      type: 'event',
+    },
+    {
+      anonymous: false,
+      inputs: [
+        {
+          indexed: true,
+          name: 'from',
+          type: 'address',
+        },
+        { indexed: true, name: 'to', type: 'address' },
+        {
+          indexed: true,
+          name: 'tokenId',
+          type: 'uint256',
+        },
+      ],
+      name: 'Transfer',
+      type: 'event',
+    },
+    {
+      inputs: [
+        { name: 'to', type: 'address' },
+        { name: 'tokenId', type: 'uint256' },
+      ],
+      name: 'approve',
+      outputs: [],
+      stateMutability: 'nonpayable',
+      type: 'function',
+    },
+    {
+      inputs: [{ name: 'owner', type: 'address' }],
+      name: 'balanceOf',
+      outputs: [{ name: '', type: 'uint256' }],
+      stateMutability: 'view',
+      type: 'function',
+    },
+    {
+      inputs: [{ name: 'tokenId', type: 'uint256' }],
+      name: 'getApproved',
+      outputs: [{ name: '', type: 'address' }],
+      stateMutability: 'view',
+      type: 'function',
+    },
+    {
+      inputs: [
+        { name: 'owner', type: 'address' },
+        { name: 'operator', type: 'address' },
+      ],
+      name: 'isApprovedForAll',
+      outputs: [{ name: '', type: 'bool' }],
+      stateMutability: 'view',
+      type: 'function',
+    },
+    {
+      inputs: [],
+      name: 'mint',
+      outputs: [],
+      stateMutability: 'nonpayable',
+      type: 'function',
+    },
+    {
+      inputs: [{ internalType: 'uint256', name: 'tokenId', type: 'uint256' }],
+      name: 'mint',
+      outputs: [],
+      stateMutability: 'nonpayable',
+      type: 'function',
+    },
+    {
+      inputs: [],
+      name: 'name',
+      outputs: [{ name: '', type: 'string' }],
+      stateMutability: 'view',
+      type: 'function',
+    },
+    {
+      inputs: [{ name: 'tokenId', type: 'uint256' }],
+      name: 'ownerOf',
+      outputs: [{ name: '', type: 'address' }],
+      stateMutability: 'view',
+      type: 'function',
+    },
+    {
+      inputs: [
+        { name: 'from', type: 'address' },
+        { name: 'to', type: 'address' },
+        { name: 'tokenId', type: 'uint256' },
+      ],
+      name: 'safeTransferFrom',
+      outputs: [],
+      stateMutability: 'nonpayable',
+      type: 'function',
+    },
+    {
+      inputs: [
+        { name: 'from', type: 'address' },
+        { name: 'to', type: 'address' },
+        { name: 'tokenId', type: 'uint256' },
+        { name: '_data', type: 'bytes' },
+      ],
+      name: 'safeTransferFrom',
+      outputs: [],
+      stateMutability: 'nonpayable',
+      type: 'function',
+    },
+    {
+      inputs: [
+        { name: 'operator', type: 'address' },
+        { name: 'approved', type: 'bool' },
+      ],
+      name: 'setApprovalForAll',
+      outputs: [],
+      stateMutability: 'nonpayable',
+      type: 'function',
+    },
+    {
+      inputs: [{ name: 'interfaceId', type: 'bytes4' }],
+      name: 'supportsInterface',
+      outputs: [{ name: '', type: 'bool' }],
+      stateMutability: 'view',
+      type: 'function',
+    },
+    {
+      inputs: [],
+      name: 'symbol',
+      outputs: [{ name: '', type: 'string' }],
+      stateMutability: 'view',
+      type: 'function',
+    },
+    {
+      inputs: [{ name: 'tokenId', type: 'uint256' }],
+      name: 'tokenURI',
+      outputs: [{ name: '', type: 'string' }],
+      stateMutability: 'pure',
+      type: 'function',
+    },
+    {
+      inputs: [],
+      name: 'totalSupply',
+      outputs: [{ name: '', type: 'uint256' }],
+      stateMutability: 'view',
+      type: 'function',
+    },
+    {
+      inputs: [
+        { name: 'from', type: 'address' },
+        { name: 'to', type: 'address' },
+        { name: 'tokenId', type: 'uint256' },
+      ],
+      name: 'transferFrom',
+      outputs: [],
+      stateMutability: 'nonpayable',
+      type: 'function',
+    },
+  ],
+} as const

playgrounds/vite-vue/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;
+  }
+}

playgrounds/vite-vue/src/main.ts

@@ -6,6 +6,8 @@ import App from './App.vue'
 import { vueQueryOptions } from './query'
 import { config } from './wagmi'
 
+import './index.css'
+
 // `@coinbase-wallet/sdk` uses `Buffer`
 globalThis.Buffer = Buffer