fix: wevm#72

Author: tmm

examples/next/next.config.js

@@ -1,6 +1,4 @@
-const withPreconstruct = require('@preconstruct/next')
-
 /** @type {import('next').NextConfig} */
-module.exports = withPreconstruct({
+module.exports = {
   reactStrictMode: true,
-})
+}

examples/next/package.json

@@ -15,7 +15,6 @@
     "wagmi": "0.1.3"
   },
   "devDependencies": {
-    "@preconstruct/next": "^3.0.1",
     "@types/node": "17.0.5",
     "@types/react": "17.0.38",
     "eslint": "8.5.0",

examples/next/src/components/Account.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { useAccount } from 'wagmi'
+
+export const Account = () => {
+  const [{ data: accountData }, disconnect] = useAccount({
+    fetchEns: true,
+  })
+
+  if (!accountData) return <div>No account connected</div>
+
+  return (
+    <div>
+      <div>
+        <button onClick={() => disconnect()}>
+          Disconnect from {accountData?.connector?.name}
+        </button>
+      </div>
+
+      <div>
+        {accountData?.ens?.name ?? accountData?.address}
+        {accountData?.ens ? ` (${accountData?.address})` : null}
+      </div>
+
+      {accountData?.ens?.avatar && (
+        <img src={accountData.ens.avatar} style={{ height: 40, width: 40 }} />
+      )}
+    </div>
+  )
+}

examples/next/src/components/Connect.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { useConnect } from 'wagmi'
+
+export const Connect = () => {
+  const [
+    {
+      data: { connector, connectors },
+      error,
+      loading,
+    },
+    connect,
+  ] = useConnect()
+
+  return (
+    <div>
+      <div>
+        {connectors.map((x) => (
+          <button disabled={!x.ready} key={x.name} onClick={() => connect(x)}>
+            {x.name}
+            {!x.ready && ' (unsupported)'}
+            {loading && x.name === connector?.name && '…'}
+          </button>
+        ))}
+      </div>
+      <div>{error && (error?.message ?? 'Failed to connect')}</div>
+    </div>
+  )
+}

examples/next/src/components/NetworkSwitcher.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { useNetwork } from 'wagmi'
+
+export const NetworkSwitcher = () => {
+  const [{ data: networkData, error: switchNetworkError }, switchNetwork] =
+    useNetwork()
+
+  return (
+    <div>
+      <div>
+        Connected to {networkData.chain?.name ?? networkData.chain?.id}{' '}
+        {networkData.chain?.unsupported && '(unsupported)'}
+      </div>
+
+      {switchNetwork &&
+        networkData.chains.map((x) =>
+          x.id === networkData.chain?.id ? null : (
+            <button key={x.id} onClick={() => switchNetwork(x.id)}>
+              Switch to {x.name}
+            </button>
+          ),
+        )}
+
+      {switchNetworkError && switchNetworkError?.message}
+    </div>
+  )
+}

examples/next/src/components/index.ts

@@ -0,0 +1,3 @@
+export { Account } from './Account'
+export { Connect } from './Connect'
+export { NetworkSwitcher } from './NetworkSwitcher'

examples/next/src/pages/index.tsx

@@ -1,7 +1,20 @@
 import * as React from 'react'
+import { useAccount } from 'wagmi'
+
+import { Account, Connect, NetworkSwitcher } from '../components'
 
 const Page = () => {
-  return <main>wagmi</main>
+  const [{ data: accountData }] = useAccount()
+
+  if (accountData?.address)
+    return (
+      <>
+        <Account />
+        <NetworkSwitcher />
+      </>
+    )
+
+  return <Connect />
 }
 
 export default Page

examples/next/tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],

examples/vite-react/src/App.tsx

@@ -1,31 +1,17 @@
 import { useAccount } from 'wagmi'
 
-import {
-  Account,
-  Connect,
-  ContractFunction,
-  NetworkSwitcher,
-  SignMessage,
-  Transaction,
-} from './components'
+import { Account, Connect, NetworkSwitcher } from './components'
 
 export const App = () => {
   const [{ data: accountData }] = useAccount()
 
   if (accountData?.address)
     return (
-      <main style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <>
         <Account />
         <NetworkSwitcher />
-        <Transaction />
-        <SignMessage />
-        <ContractFunction />
-      </main>
+      </>
     )
 
-  return (
-    <main>
-      <Connect />
-    </main>
-  )
+  return <Connect />
 }