Merge pull request #134 from unicape/1.x

Update playgrounds

.changeset/config.json

@@ -11,5 +11,5 @@
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   },
-  "ignore": ["vite-vue"]
+  "ignore": ["vite-vue", "vite-vue2.6", "nuxt"]
 }

packages/vue/README.md

@@ -1,13 +1,122 @@
-# wagmi
+[![npm (tag)](https://img.shields.io/npm/v/use-wagmi?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/use-wagmi) ![NPM](https://img.shields.io/npm/l/use-wagmi?style=flat&colorA=000000&colorB=000000)
 
-Vue Composition for Ethereum based on wagmi
+# use-wagmi
+
+Vue Composition for Ethereum
+
+Support for Vue 2.x via [vue-demi](https://github.com/vueuse/vue-demi)
+
+Based on [wagmi](https://wagmi.sh)
+
+## Features
+
+- 🚀 Composables for working with wallets, ENS, contracts, transactions, signing, etc.
+- 💼 Built-in wallet connectors for MetaMask, WalletConnect, Coinbase Wallet, and Injected
+- 👟 Caching, request deduplication, multicall, batching, and persistence
+- 🌀 Auto-refresh data on wallet, block, and network changes
+- 🦄 TypeScript ready
+
+...and a lot more.
+
+## Documentation
+
+`use-wagmi docs` visit [wagmi docs](https://wagmi.sh) as most of the concepts and APIs are the same.
 
 ## Installation
 
+Install use-wagmi and its [viem](https://viem.sh) peer dependency.
+
 ```bash
-pnpm add use-wagmi@beta viem@beta @tanstack/vue-query
+npm install use-wagmi viem @tanstack/vue-query
 ```
 
-## Documentation
+## Create Config
+
+Create and export a new Wagmi config using **createConfig**.
+
+```ts
+import { http, createConfig } from 'use-wagmi'
+import { mainnet, sepolia } from 'use-wagmi/chains'
+
+export const config = createConfig({
+  chains: [mainnet, sepolia],
+  transports: {
+    [mainnet.id]: http(),
+    [sepolia.id]: http(),
+  },
+})
+```
+
+In this example, Wagmi is configured to use the Mainnet and Sepolia chains, and **injected** connector. Check out the **createConfig** [docs](https://wagmi.sh/react/api/createConfig) for more configuration options.
+
+## Setup Use Wagmi
+
+Before using Vue Query, you need to initialize it using `UseWagmiPlugin`
+
+```ts
+import { UseWagmiPlugin } from 'use-wagmi'
+
+app.use(UseWagmiPlugin, { config })
+```
+
+## Setup TanStack Query
+
+Inside the `VueQueryPlugin`, wrap your app in a TanStack Query Vue Plugin, e.g. VueQueryPlugin, and pass a new QueryClient instance to the client property.
+
+```ts
+import { VueQueryPlugin } from "@tanstack/vue-query"
+
+app.use(VueQueryPlugin)
+```
+
+## Use of Composition API with `<script setup>`
+
+All examples in our documentation use `<script setup>` syntax.
+
+Vue 2 users can also use that syntax using this plugin. Please check the plugin documentation for installation details.
+
+If you are not a fan of `<script setup>` syntax, you can easily translate all the examples into normal Composition API syntax by moving the code under `setup()` function and returning the values used in the template.
+
+```vue
+<script setup>
+import { useAccount, useDisconnect } from 'use-wagmi'
+
+const { address, chainId, status } = useAccount()
+const { disconnect } = useDisconnect()
+</script>
+
+<template>
+  <div>
+    <h2>Account</h2>
+    <div>
+      account: {{ address }}
+      chainId: {{ chainId }}
+      status: {{ status }}
+    </div>
+
+    <button v-if="status !== 'disconnected'" type="button" @click="() => disconnect()">Disconnect</button>
+  </div>
+</template>
+```
+
+## Nuxt
+
+we provide the [@use-wagmi/nuxt](https://github.com/unicape/use-wagmi/tree/main/packages/nuxt) module. This module enables automatic importing of wagmi functionality into your Nuxt application.
+
+## Support
+
+If you find `use-wagmi` useful, please consider supporting development. Thank you 🙏
+
+ERC20-USDT: 0xb493c9555f5c2be907a3bfa363daf1fc22635fe5<br />TRC20-USDT: TLXcmNCTSngBXMxzmkZVHFdWE3XHEK5bBi
+
+> Please do not send other assets except USDT
+
+## Credits
+
+- [wagmi.sh](https://wagmi.sh/)
+- [VueUse](https://vueuse.org/)
+- [Vue Query](https://vue-query.vercel.app/)
+
+## License
 
-For documentation and guides, visit [wagmi.sh](https://wagmi.sh).
+MIT

playgrounds/nuxt/README.md

@@ -0,0 +1,29 @@
+# Nuxt 3 Minimal Starter
+
+We recommend to look at the [documentation](https://v3.nuxtjs.org).
+
+## Setup
+
+Make sure to install the dependencies
+
+```bash
+yarn install
+```
+
+## Development
+
+Start the development server on http://localhost:3000
+
+```bash
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+yarn build
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).

playgrounds/nuxt/app.vue

@@ -0,0 +1,17 @@
+<script setup>
+const { address, chainId, status } = useAccount()
+const { disconnect } = useDisconnect()
+</script>
+
+<template>
+  <div>
+    <h2>Account</h2>
+    <div>
+      account: {{ address }}
+      chainId: {{ chainId }}
+      status: {{ status }}
+    </div>
+
+    <button v-if="status !== 'disconnected'" type="button" @click="() => disconnect()">Disconnect</button>
+  </div>
+</template>

playgrounds/nuxt/nuxt.config.ts

@@ -0,0 +1,24 @@
+import inject from '@rollup/plugin-inject'
+import { defineNuxtConfig } from 'nuxt/config'
+
+// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
+export default defineNuxtConfig({
+  ssr: false,
+
+  vite: {
+    build: {
+      rollupOptions: {
+        plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
+      },
+    },
+  },
+
+  modules: [
+    [
+      '@use-wagmi/nuxt',
+      {
+        excludeImports: ['useQuery'],
+      },
+    ],
+  ],
+})

playgrounds/nuxt/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nuxt",
+  "private": true,
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@tanstack/query-persist-client-core": "5.8.1",
+    "@tanstack/query-sync-storage-persister": "5.8.1",
+    "@tanstack/vue-query": "5.8.1",
+    "@use-wagmi/nuxt": "^2.0.0",
+    "use-wagmi": "^1.0.0",
+    "viem": "^2.0.0",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@rollup/plugin-inject": "^5.0.5",
+    "buffer": "^6.0.3",
+    "nuxt": "^3.5.2"
+  }
+}

playgrounds/nuxt/plugins/query.ts

@@ -0,0 +1,31 @@
+import { persistQueryClient } from '@tanstack/query-persist-client-core'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+import { deserialize, serialize } from 'use-wagmi'
+
+export default defineNuxtPlugin((nuxt) => {
+  nuxt.vueApp.use(VueQueryPlugin, {
+    queryClientConfig: {
+      defaultOptions: {
+        queries: {
+          gcTime: 1_000 * 60 * 60 * 24, // 24 hours
+          networkMode: 'offlineFirst',
+          refetchOnWindowFocus: false,
+          retry: 0,
+        },
+        mutations: { networkMode: 'offlineFirst' },
+      },
+    },
+    clientPersister: (queryClient) => {
+      return persistQueryClient({
+        queryClient,
+        persister: createSyncStoragePersister({
+          key: 'vite-vue.cache',
+          serialize,
+          storage: window.localStorage,
+          deserialize,
+        }),
+      })
+    },
+  })
+})

playgrounds/nuxt/plugins/wagmi.ts

@@ -0,0 +1,29 @@
+import { http, UseWagmiPlugin, createConfig } from 'use-wagmi'
+import { celo, mainnet, optimism, sepolia } from 'use-wagmi/chains'
+import { coinbaseWallet, walletConnect } from 'use-wagmi/connectors'
+
+export default defineNuxtPlugin((nuxt) => {
+  const runtimeConfig = useRuntimeConfig()
+
+  const config = createConfig({
+    chains: [mainnet, sepolia, optimism, celo],
+    connectors: [
+      walletConnect({
+        projectId: runtimeConfig.public.VITE_WC_PROJECT_ID as string,
+      }),
+      coinbaseWallet({ appName: 'Vite Vue Playground', darkMode: true }),
+    ],
+    transports: {
+      [mainnet.id]: http(
+        'https://eth-mainnet.g.alchemy.com/v2/StF61Ht3J9nXAojZX-b21LVt9l0qDL38',
+      ),
+      [sepolia.id]: http(
+        'https://eth-sepolia.g.alchemy.com/v2/roJyEHxkj7XWg1T9wmYnxvktDodQrFAS',
+      ),
+      [optimism.id]: http(),
+      [celo.id]: http(),
+    },
+  })
+
+  nuxt.vueApp.use(UseWagmiPlugin, { config })
+})