add custom button

dapps/web3modal/next/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.17.19",
-    "@web3modal/wagmi": "4.0.0-alpha.2",
+    "@web3modal/wagmi": "4.0.0-alpha.3",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",

dapps/web3modal/next/src/app/page.module.css

@@ -1,8 +1,9 @@
 .main {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   padding: 6rem;
+  gap: 40px;
   min-height: 100vh;
 }

dapps/web3modal/next/src/app/page.tsx

@@ -1,10 +1,11 @@
-import Connect from '@/components/Connect'
+import Connect, { Custom } from '@/components/Connect'
 import styles from './page.module.css'
 
 export default function Home() {
   return (
     <main className={styles.main}>
       <Connect />
+      <Custom/>
     </main>
   )
 }

dapps/web3modal/next/src/components/Connect.tsx

@@ -1,5 +1,12 @@
 'use client'
 
+import { useWeb3Modal } from "@web3modal/wagmi/react"
+
 export default function Connect() {
   return <w3m-button />
 }
+
+export function Custom(){
+  const { open } = useWeb3Modal()
+  return <button onClick={()=>open()} >open modal</button>
+}