Merge pull request #10 from unicape/example-nuxt

feat: examples nuxt

Author: unicape

.gitignore

@@ -1,7 +1,7 @@
 *.local
 .DS_Store
 .eslintcache
-.next
+.nuxt
 .pnpm-debug.log*
 cache
 coverage

.npmrc

@@ -1,4 +1,5 @@
 link-workspace-packages=false
 prefer-workspace-packages=false
 strict-peer-dependencies=false
-ignore-workspace-root-check=true
+ignore-workspace-root-check=true
+shamefully-hoist=true

examples/nuxt/app.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div>
+      <button
+        v-for="x in connectors"
+        :key="x.name"
+        :disabled="!x.ready || isReconnecting || connector?.id === x.id"
+        @click="() => connect({ connector: x })"
+      >
+        <span>{{ x.name }}</span>
+        <span v-if="!x.ready"> (unsupported)</span>
+        <span v-if="isLoading && x.id === pendingConnector?.id">…</span>
+      </button>
+    </div>
+
+    <div>{{ error && error.message }}</div>
+
+    <div>
+      <span>{{ ensName ?? address }}</span>
+      <span v-if="ensName"> ({{ address }})</span>
+    </div>
+
+    <img v-if="ensAvatar" :src="ensAvatar" width="40" height="40">
+
+    <div>
+      <button v-if="address" @click="() => disconnect()">Disconnect</button>
+      <span v-if="connector?.name">Connected to {{ connector.name }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAccount, useDisconnect, useEnsAvatar, useEnsName, useConnect } from 'use-wagmi'
+
+const { connector, isReconnecting } = useAccount()
+const { connect, connectors, isLoading, error, pendingConnector } = useConnect()
+
+const { address } = useAccount({
+  onConnect: (data) => console.log('connected', data),
+  onDisconnect: () => console.log('disconnected')
+})
+
+const { data: ensName } = useEnsName({
+  address,
+  chainId: 1
+})
+
+const { data: ensAvatar } = useEnsAvatar({
+  name: ensName,
+  chainId: 1
+})
+
+const { disconnect } = useDisconnect()
+</script>

examples/nuxt/nuxt.config.ts

@@ -0,0 +1,32 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
+import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
+
+export default defineNuxtConfig({
+  vite: {
+    resolve: {
+      alias: {
+        process: 'process/browser',
+        util: 'util',
+      },
+    },
+    optimizeDeps: {
+      esbuildOptions: {
+        target: 'esnext',
+        define: {
+          global: 'globalThis',
+        },
+        plugins: [
+          NodeGlobalsPolyfillPlugin({
+            process: true,
+            buffer: true
+          }),
+          NodeModulesPolyfillPlugin()
+        ],
+        supported: {
+          bigint: true,
+        },
+      },
+    },
+  }
+})

examples/nuxt/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "nuxt",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "use-wagmi": "workspace:*",
+    "viem": "~0.3.18"
+  },
+  "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+    "@types/node": "^18",
+    "nuxt": "^3.4.3"
+  }
+}

examples/nuxt/plugins/use-wagmi.ts

@@ -0,0 +1,81 @@
+import { UseWagmiPlugin, configureChains, createConfig } from 'use-wagmi'
+import { avalanche, goerli, mainnet, optimism } from 'use-wagmi/chains'
+
+import { CoinbaseWalletConnector } from 'use-wagmi/connectors/coinbaseWallet'
+import { InjectedConnector } from 'use-wagmi/connectors/injected'
+import { LedgerConnector } from 'use-wagmi/connectors/ledger'
+import { MetaMaskConnector } from 'use-wagmi/connectors/metaMask'
+import { SafeConnector } from 'use-wagmi/connectors/safe'
+import { WalletConnectConnector } from 'use-wagmi/connectors/walletConnect'
+import { WalletConnectLegacyConnector } from 'use-wagmi/connectors/walletConnectLegacy'
+
+import { alchemyProvider } from 'use-wagmi/providers/alchemy'
+import { infuraProvider } from 'use-wagmi/providers/infura'
+import { publicProvider } from 'use-wagmi/providers/public'
+
+export default defineNuxtPlugin(nuxtApp => {
+  const { chains, publicClient, webSocketPublicClient } = configureChains(
+    [mainnet, goerli, optimism, avalanche],
+    [
+      alchemyProvider({ apiKey: '' }), //TODO: your API Key
+      infuraProvider({ apiKey: '' }), //TODO: your API Key
+      publicProvider(),
+    ],
+  )
+  
+  const config = createConfig({
+    autoConnect: true,
+    connectors: [
+      new MetaMaskConnector({
+        chains,
+        options: {
+          UNSTABLE_shimOnConnectSelectAccount: true,
+        },
+      }),
+      new CoinbaseWalletConnector({
+        chains,
+        options: {
+          appName: 'use-wagmi',
+        },
+      }),
+      new WalletConnectConnector({
+        chains,
+        options: {
+          projectId: '', //TODO: your project ID
+        },
+      }),
+      new WalletConnectLegacyConnector({
+        chains,
+        options: {
+          qrcode: true,
+        },
+      }),
+      new LedgerConnector({
+        chains,
+      }),
+      new InjectedConnector({
+        chains,
+        options: {
+          name: (detectedName) =>
+            `Injected (${
+              typeof detectedName === 'string'
+                ? detectedName
+                : detectedName.join(', ')
+            })`,
+          shimDisconnect: true,
+        },
+      }),
+      new SafeConnector({
+        chains,
+        options: {
+          allowedDomains: [/https:\/\/app.safe.global$/],
+          debug: false,
+        },
+      }),
+    ],
+    publicClient,
+    webSocketPublicClient,
+  })
+
+  nuxtApp.vueApp.use(UseWagmiPlugin, config)
+})

examples/nuxt/public/favicon.ico

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.server.json"
+}

examples/nuxt/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

examples/nuxt/tsconfig.json

@@ -17,9 +17,9 @@
     "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "typescript": "^5.0.4",
-    "vite": "^3.2.5",
+    "vite": "^4.3.6",
     "vue-tsc": "^1.2.0"
   }
 }