[example] open wallet connect modal

src/App.tsx

@@ -1,93 +1,42 @@
-import { ConnectWallet } from "@thirdweb-dev/react";
+import {
+  useAddress,
+  useConnect,
+  useConnectionStatus,
+  useDisconnect,
+  walletConnect,
+} from "@thirdweb-dev/react";
 import "./styles/Home.css";
 
-export default function Home() {
+const config = walletConnect({
+  projectId: "57e1cfc18509bb9cc4d51638ce8d18ed",
+  recommended: true,
+  qrModal: "walletConnect",
+});
+
+export default function Example() {
+  const connect = useConnect();
+  const disconnect = useDisconnect();
+  const address = useAddress();
+  const connectionStatus = useConnectionStatus();
+
+  async function handleConnect() {
+    await connect(config);
+  }
+
   return (
     <main className="main">
       <div className="container">
-        <div className="header">
-          <h1 className="title">
-            Welcome to{" "}
-            <span className="gradient-text-0">
-              <a
-                href="https://thirdweb.com/"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                thirdweb.
-              </a>
-            </span>
-          </h1>
-
-          <p className="description">
-            Get started by configuring your desired network in{" "}
-            <code className="code">src/index.js</code>, then modify the{" "}
-            <code className="code">src/App.js</code> file!{" "}
-          </p>
-
-          <div className="connect">
-            <ConnectWallet />
-          </div>
-        </div>
+        {connectionStatus !== "connected" && (
+          <button onClick={handleConnect}>connect</button>
+        )}
 
-        <div className="grid">
-          <a
-            href="https://portal.thirdweb.com/"
-            className="card"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <img
-              src="/images/portal-preview.png"
-              alt="Placeholder preview of starter"
-            />
-            <div className="card-text">
-              <h2 className="gradient-text-1">Portal ➜</h2>
-              <p>
-                Guides, references, and resources that will help you build with
-                thirdweb.
-              </p>
-            </div>
-          </a>
+        <p> {connectionStatus === "connecting" && "opening modal..."}</p>
 
-          <a
-            href="https://thirdweb.com/dashboard"
-            className="card"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <img
-              src="/images/dashboard-preview.png"
-              alt="Placeholder preview of starter"
-            />
-            <div className="card-text">
-              <h2 className="gradient-text-2">Dashboard ➜</h2>
-              <p>
-                Deploy, configure, and manage your smart contracts from the
-                dashboard.
-              </p>
-            </div>
-          </a>
+        {address && <p> connected to {address}</p>}
 
-          <a
-            href="https://thirdweb.com/templates"
-            className="card"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <img
-              src="/images/templates-preview.png"
-              alt="Placeholder preview of templates"
-            />
-            <div className="card-text">
-              <h2 className="gradient-text-3">Templates ➜</h2>
-              <p>
-                Discover and clone template projects showcasing thirdweb
-                features.
-              </p>
-            </div>
-          </a>
-        </div>
+        {connectionStatus === "connected" && (
+          <button onClick={disconnect}> disconnect </button>
+        )}
       </div>
     </main>
   );

src/styles/Home.css

@@ -1,7 +1,7 @@
 .container {
   width: 100%;
-  max-width: 1440px;
-  padding: 0 1rem;
+  max-width: 900px;
+  padding: 1rem;
   margin: 0 auto;
 }
 

src/styles/globals.css

@@ -20,3 +20,9 @@ body {
   color: #e7e8e8;
   background: #070707;
 }
+
+button {
+  padding: 0.6rem 1rem;
+  font-size: 20px;
+  border-radius: 8px;
+}