Update playground pages (#3224)

2024-06-04 21:47:21 +12:00
parent 5d47e505ed
commit 95c4151f59
22 changed files with 855 additions and 223 deletions
@@ -1,11 +1,14 @@
-import { CodeExample } from "@/components/code/code-example";
-import { StyledConnectButton } from "@/components/styled-connect-button";
 import { Button } from "@/components/ui/button";
 import { metadataBase } from "@/lib/constants";
 import type { Metadata } from "next";
+import Image from "next/image";
 import Link from "next/link";
-import { chain } from "../../../components/account-abstraction/constants";
-import { SponsoredTx } from "../../../components/account-abstraction/sponsored-tx";
+import {
+  ConnectSmartAccountCustomPreview,
+  ConnectSmartAccountPreview,
+} from "../../../components/account-abstraction/connect-smart-account";
+import { SponsoredTxPreview } from "../../../components/account-abstraction/sponsored-tx";
+import { CodeExample } from "../../../components/code/code-example";

 export const metadata: Metadata = {
  metadataBase,
@@ -16,13 +19,13 @@ export const metadata: Metadata = {

 export default function Page() {
  return (
-    <main className="flex-1 content-center relative py-12 md:py-24 lg:py-32 xl:py-48 space-y-12 md:space-y-24 lg:space-y-32 xl:space-y-48">
+    <main className="flex-1 content-center relative py-12 md:py-24 lg:py-32 xl:py-48 space-y-12 md:space-y-24">
      <section className="container px-4 md:px-6">
        <div className="grid gap-10 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
          <div className="flex flex-col justify-center space-y-4 min-h-[100%]">
            <div className="space-y-2">
-              <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
-                Account abstraction made easy
+              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
+                Account abstraction
              </h1>
              <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
                Let users connect to their smart accounts with any wallet and
@@ -46,52 +49,110 @@ export default function Page() {
              </Button>
            </div>
          </div>
-          <div className="w-full mx-auto my-auto sm:w-full lg:order-last relative flex flex-col space-y-2">
-            <div className="mx-auto">
-              <StyledConnectButton
-                accountAbstraction={{
-                  chain,
-                  sponsorGas: true,
-                }}
+          <div className="w-full mx-auto my-auto sm:w-full order-first lg:order-last relative flex flex-col space-y-2">
+            <div className="max-w-full sm:max-w-[500px] p-8">
+              <Image
+                src={"/account-abstraction.png"}
+                width={600}
+                height={400}
+                objectFit={"contain"}
+                alt=""
+                priority={true}
              />
            </div>
-
-            <p className="md:text-xl text-center text-muted-foreground">
-              <small>👆 Connect to your smart account 👆</small>
-            </p>
          </div>
        </div>
      </section>

      <section className="container px-4 md:px-6 space-y-8">
-        <div className="space-y-2">
-          <h2 className="text-4xl font-semibold tracking-tight">
-            Sponsored Transactions
-          </h2>
-          <p className="max-w-[600px]">
-            One simple flag to enable transactions for your users.
-            <br />
-            Free on testnets, billed at the end of the month on mainnets.
-          </p>
-        </div>
+        <ConnectSmartAccount />
+      </section>

-        <CodeExample
-          preview={<SponsoredTx />}
-          code={`import { claimTo } from "thirdweb/extensions/erc1155";
-          import { ConnectButton, TransactionButton } from "thirdweb/react";
-
-          function App(){
-            return (<>
-{/* converts any wallet to a smart account */}
-<ConnectButton client={client} accountAbstraction={{ chain, sponsorGas: true }} />
-
-{/* all transactions will be sponsored */}
-<TransactionButton transaction={() => claimTo({ contract, to: "0x123...", tokenId: 0n, quantity: 1n })}>Mint</TransactionButton>
-</>);
-};`}
-          lang="tsx"
-        />
+      <section className="container px-4 md:px-6 space-y-8">
+        <SponsoredTx />
      </section>
    </main>
  );
 }
+
+function ConnectSmartAccount() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Connect smart accounts
+        </h2>
+        <p className="max-w-[600px]">
+          Enable smart accounts on the UI components or build your own UI.
+        </p>
+      </div>
+      <CodeExample
+        preview={<ConnectSmartAccountPreview />}
+        code={`// Using UI components
+  import { ConnectButton } from "thirdweb/react";
+
+  function App(){
+    return (<>
+<ConnectButton client={client} 
+// account abstraction options
+accountAbstraction={{ chain, sponsorGas: true }} />
+</>);
+};`}
+        lang="tsx"
+      />
+      <CodeExample
+        preview={<ConnectSmartAccountCustomPreview />}
+        code={`// Using your own UI
+  import { useConnect } from "thirdweb/react";
+  import { createWallet } from "thirdweb/wallets";
+
+  function App(){
+    const { connect } = useConnect({ client, 
+      // account abstraction options
+      accountAbstraction: { chain, sponsorGas: true }});
+
+    return (<>
+<button onClick={() => connect(async () => {
+  // any wallet connected here will be
+  // converted to a smart account
+  const adminWallet = createWallet("io.metamask");
+  await adminWallet.connect({ client });
+  return adminWallet;
+})}>Connect (metamask)</button>
+</>);
+};`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+function SponsoredTx() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Sponsored transactions
+        </h2>
+        <p className="max-w-[600px]">
+          Set `sponsorGas: true` to enable gas-free transactions for your users.
+          <br />
+          Free on testnets, billed at the end of the month on mainnets.
+        </p>
+      </div>
+      <CodeExample
+        preview={<SponsoredTxPreview />}
+        code={`import { claimTo } from "thirdweb/extensions/erc1155";
+  import { TransactionButton } from "thirdweb/react";
+
+  function App(){
+    return (<>
+{/* transactions will be sponsored */}
+<TransactionButton transaction={() => claimTo({ contract, to: "0x123...", tokenId: 0n, quantity: 1n })}>Mint</TransactionButton>
+</>);
+};`}
+        lang="tsx"
+      />
+    </>
+  );
+}
@@ -0,0 +1,156 @@
+import { CodeExample } from "@/components/code/code-example";
+import { Button } from "@/components/ui/button";
+import { metadataBase } from "@/lib/constants";
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { SponsoredInAppTxPreview } from "../../../components/in-app-wallet/sponsored-tx";
+import { StyledConnectEmbed } from "../../../components/styled-connect-embed";
+
+export const metadata: Metadata = {
+  metadataBase,
+  title: "Sign In, Account Abstraction and SIWE Auth | thirdweb Connect",
+  description:
+    "Let users sign up with their email, phone number, social media accounts or directly with a wallet. Seemlessly integrate account abstraction and SIWE auth.",
+};
+
+export default function Page() {
+  return (
+    <main className="flex-1 content-center relative py-12 md:py-24 lg:py-32 xl:py-48 space-y-12 md:space-y-24">
+      <section className="container px-4 md:px-6">
+        <div className="grid gap-10 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
+          <div className="flex flex-col justify-center space-y-4 min-h-[100%]">
+            <div className="space-y-2">
+              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
+                Onboard users to web3
+              </h1>
+              <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
+                Onboard anyone with flexible auth options, secure account
+                recovery, and smart account integration.
+              </p>
+            </div>
+            <div className="flex flex-col gap-4 min-[400px]:flex-row">
+              <Button asChild size="lg">
+                <Link
+                  target="_blank"
+                  href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
+                >
+                  View docs
+                </Link>
+              </Button>
+              <Button asChild variant="outline" size="lg">
+                <Link target="_blank" href="https://thirdweb.com/contact-us">
+                  Book a Demo
+                </Link>
+              </Button>
+            </div>
+          </div>
+          <div className="w-full mx-auto my-auto sm:w-full order-first lg:order-last relative flex flex-col space-y-2">
+            <div className="max-w-full sm:max-w-[600px]">
+              <Image
+                src={"/in-app-wallet.png"}
+                width={600}
+                height={400}
+                objectFit={"contain"}
+                alt=""
+                priority={true}
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="container px-4 md:px-6 space-y-8">
+        <AnyAuth />
+      </section>
+
+      <section className="container px-4 md:px-6 space-y-8">
+        <SponsoredInAppTx />
+      </section>
+    </main>
+  );
+}
+
+function AnyAuth() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Any Auth Method
+        </h2>
+        <p className="max-w-[600px]">
+          Use any of the built-in auth methods or bring your own.
+          <br />
+          Supports custom auth endpoints to integrate with your existing user
+          base.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<StyledConnectEmbed />}
+        code={`import { inAppWallet } from "thirdweb/wallets";
+        import { ConnectEmbed } from "thirdweb/react";
+
+        
+        const wallets = [
+          inAppWallet(
+            // built-in auth methods
+            { auth: { 
+              options: ["email", "phone", "passkey", "google", "apple", "facebook"] 
+              }
+            }
+            // or bring your own auth endpoint
+          )
+        ];
+
+        function App(){
+          return (
+<ConnectEmbed client={client} wallets={wallets} />);
+};`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+function SponsoredInAppTx() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Signless Sponsored Transactions
+        </h2>
+        <p className="max-w-[600px]">
+          With in-app wallets, users don&apos;t need to confirm every
+          transaction.
+          <br />
+          Combine it with smart account flag to cover gas costs for the best UX.
+        </p>
+      </div>
+      <CodeExample
+        preview={<SponsoredInAppTxPreview />}
+        code={`import { inAppWallet } from "thirdweb/wallets";
+  import { claimTo } from "thirdweb/extensions/erc1155";
+  import { ConnectButton, TransactionButton } from "thirdweb/react";
+
+  
+  const wallets = [
+    inAppWallet(
+      // turn on gas sponsorship for in-app wallets
+      { smartAccount: { chain, sponsorGas: true }}
+    )
+  ];
+
+  function App(){
+    return (<>
+<ConnectButton client={client} wallets={wallets} />
+
+{/* signless, sponsored transactions */}
+<TransactionButton transaction={() => claimTo({ contract, to: "0x123...", tokenId: 0n, quantity: 1n })}>Mint</TransactionButton>
+</>);
+};`}
+        lang="tsx"
+      />
+    </>
+  );
+}
@@ -1,10 +1,11 @@
-import { StyledPayEmbed } from "@/components/styled-pay-embed";
 import { Button } from "@/components/ui/button";
 import { metadataBase } from "@/lib/constants";
 import type { Metadata } from "next";
+import Image from "next/image";
 import Link from "next/link";
 import { CodeExample } from "../../../components/code/code-example";
-import { StyledPayTransaction } from "../../../components/styled-pay-transaction";
+import { StyledPayEmbedPreview } from "../../../components/pay/embed";
+import { PayTransactionButtonPreview } from "../../../components/pay/transaction-button";

 export const metadata: Metadata = {
  metadataBase,
@@ -15,88 +16,133 @@ export const metadata: Metadata = {

 export default function Page() {
  return (
-    <main className="flex-1 content-center relative">
-      <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48 z-10">
-        <div className="container px-4 md:px-6">
-          <div className="grid gap-10 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
-            <div className="flex flex-col justify-center space-y-4 min-h-[100%]">
-              <div className="space-y-2">
-                <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
-                  The easiest way for users to transact in your app
-                </h1>
-                <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
-                  Onramp users in clicks with credit card &amp; cross-chain
-                  crypto payments — and generate revenue for each user
-                  transaction. Integrate for free.
-                </p>
-              </div>
-              <div className="flex flex-col gap-4 min-[400px]:flex-row">
-                <Button asChild size="lg">
-                  <Link
-                    target="_blank"
-                    href="https://portal.thirdweb.com/connect/pay/get-started"
-                  >
-                    View docs
-                  </Link>
-                </Button>
-                <Button asChild variant="outline" size="lg">
-                  <Link target="_blank" href="https://thirdweb.com/contact-us">
-                    Book a Demo
-                  </Link>
-                </Button>
-              </div>
-            </div>
-            <div className="w-full mx-auto my-auto sm:w-full lg:order-last relative flex flex-col space-y-2">
-              <div className="shadow-xl md:w-[400px] md:mx-auto">
-                <StyledPayEmbed />
-              </div>
-              <p className="md:text-xl text-center text-muted-foreground">
-                <small>👆 This is live, try it out! 👆</small>
+    <main className="flex-1 content-center relative py-12 md:py-24 lg:py-32 xl:py-48 space-y-12 md:space-y-24">
+      <section className="container px-4 md:px-6">
+        <div className="grid gap-10 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
+          <div className="flex flex-col justify-center space-y-4 min-h-[100%]">
+            <div className="space-y-2">
+              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
+                The easiest way for users to transact in your app
+              </h1>
+              <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
+                Onramp users with credit card &amp; cross-chain crypto payments
+                — and generate revenue for each user transaction.
              </p>
            </div>
+            <div className="flex flex-col gap-4 min-[400px]:flex-row">
+              <Button asChild size="lg">
+                <Link
+                  target="_blank"
+                  href="https://portal.thirdweb.com/connect/pay/get-started"
+                >
+                  View docs
+                </Link>
+              </Button>
+              <Button asChild variant="outline" size="lg">
+                <Link target="_blank" href="https://thirdweb.com/contact-us">
+                  Book a Demo
+                </Link>
+              </Button>
+            </div>
+          </div>
+          <div className="w-full mx-auto my-auto sm:w-full order-first lg:order-last relative flex flex-col space-y-2">
+            <div className="max-w-full sm:max-w-[600px]">
+              <Image
+                width={600}
+                height={400}
+                src={"/pay.png"}
+                objectFit={"contain"}
+                alt=""
+                priority={true}
+              />
+            </div>
          </div>
        </div>
      </section>
      <section className="container px-4 md:px-6 space-y-8">
-        <div className="space-y-2">
-          <h2 className="text-4xl font-semibold tracking-tight">
-            Transaction Button
-          </h2>
-          <p className="max-w-[600px]">
-            Transaction Button is a handy component that handles transactions.
-            <br />
-            If your user doesn&apos;t have enough funds for that transaction, a
-            pre-filled pay modal will appear with the exact amount needed.
-          </p>
-        </div>
-
-        <CodeExample
-          preview={<StyledPayTransaction />}
-          code={`import { TransactionButton } from "thirdweb/react";
-
-
-function App() {
-  const account = useActiveAccount();
-
-  return (
-    <TransactionButton
-      transaction={() => {
-        // any transaction works
-        return claimTo({
-          contract,
-          quantity: 1n,
-          tokenId: 0n,
-          to: account?.address,
-        });
-      }}
-    >
-      Buy for 10 MATIC
-    </TransactionButton>
-  );
-};`}
-          lang="tsx"
-        />
+        <StyledPayEmbed />
+      </section>
+      <section className="container px-4 md:px-6 space-y-8">
+        <PayTransactionButton />
      </section>
    </main>
  );
 }
+
+function StyledPayEmbed() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Embed component
+        </h2>
+        <p className="max-w-[600px]">
+          Inline component that allows users to buy any currency.
+          <br />
+          Customize theme, currency, amounts, payment methods and more.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<StyledPayEmbedPreview />}
+        code={`
+        import { PayEmbed } from "thirdweb/react";
+
+        function App() {
+          return (
+            <PayEmbed
+              client={client}
+            />
+          );
+        };`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+function PayTransactionButton() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Transaction Button
+        </h2>
+        <p className="max-w-[600px]">
+          Transaction Button is a handy component that handles transactions.
+          <br />
+          If your user doesn&apos;t have enough funds for that transaction, a
+          pre-filled pay modal will appear with the exact amount needed.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<PayTransactionButtonPreview />}
+        code={`import { claimTo } from "thirdweb/extensions/erc1155";
+        import { TransactionButton, useActiveAccount } from "thirdweb/react";
+
+
+        function App() {
+          const account = useActiveAccount();
+        
+          return (
+            <TransactionButton
+              transaction={() => {
+                // any transaction works
+                return claimTo({
+                  contract,
+                  quantity: 1n,
+                  tokenId: 0n,
+                  to: account.address,
+                });
+              }}
+            >
+              Buy for 10 MATIC
+            </TransactionButton>
+          );
+        };`}
+        lang="tsx"
+      />
+    </>
+  );
+}
@@ -1,10 +1,12 @@
-import { CodeExample } from "@/components/code/code-example";
-import { StyledConnectButton } from "@/components/styled-connect-button";
-import { StyledConnectEmbed } from "@/components/styled-connect-embed";
 import { Button } from "@/components/ui/button";
 import { metadataBase } from "@/lib/constants";
 import type { Metadata } from "next";
+import Image from "next/image";
 import Link from "next/link";
+import { CodeExample } from "../../../components/code/code-example";
+import { HooksPreview } from "../../../components/sign-in/hooks";
+import { StyledConnectButton } from "../../../components/styled-connect-button";
+import { StyledConnectEmbed } from "../../../components/styled-connect-embed";

 export const metadata: Metadata = {
  metadataBase,
@@ -15,18 +17,18 @@ export const metadata: Metadata = {

 export default function Page() {
  return (
-    <main className="flex-1 content-center relative py-12 md:py-24 lg:py-32 xl:py-48 space-y-12 md:space-y-24 lg:space-y-32 xl:space-y-48">
+    <main className="flex-1 content-center relative py-12 md:py-24 lg:py-32 xl:py-48 space-y-12 md:space-y-24">
      <section className="container px-4 md:px-6">
        <div className="grid gap-10 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
          <div className="flex flex-col justify-center space-y-4 min-h-[100%]">
            <div className="space-y-2">
-              <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
-                The easiest way for users to sign in to your app
+              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
+                Sign in
              </h1>
              <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
-                Let users sign in with their email, phone number, social media
-                accounts or directly with a wallet. Seemlessly integrate account
-                abstraction and SIWE auth.
+                Create a login experience tailor-made for your app. Add your
+                wallets of choice, enable web2 sign-in options and create a
+                modal that fits your brand.
              </p>
            </div>
            <div className="flex flex-col gap-4 min-[400px]:flex-row">
@@ -45,78 +47,139 @@ export default function Page() {
              </Button>
            </div>
          </div>
-          <div className="w-full mx-auto my-auto sm:w-full lg:order-last relative flex flex-col space-y-2">
-            <div className="mx-auto">
-              <StyledConnectButton />
+          <div className="w-full mx-auto my-auto sm:w-full order-first lg:order-last relative flex flex-col space-y-2">
+            <div className="max-w-full sm:max-w-[600px]">
+              <Image
+                src={"/connectors.png"}
+                width={600}
+                height={400}
+                objectFit={"contain"}
+                alt=""
+                priority={true}
+              />
            </div>
-
-            <p className="md:text-xl text-center text-muted-foreground">
-              <small>👆 This is live, try it out! 👆</small>
-            </p>
          </div>
        </div>
      </section>

      <section className="container px-4 md:px-6 space-y-8">
-        <div className="space-y-2">
-          <h2 className="text-4xl font-semibold tracking-tight">
-            Connect Button
-          </h2>
-          <p className="max-w-[600px]">
-            When clicked opens a modal and allows users to connect to various
-            wallets.
-            <br />
-            It is extremely customizable and very easy to use.
-          </p>
-        </div>
-
-        <CodeExample
-          preview={<StyledConnectButton />}
-          code={`import { createThirdwebClient } from "thirdweb";
-import { ConnectButton } from "thirdweb/react";
-
-const THIRDWEB_CLIENT = createThirdwebClient({
-  clientId: "<YOUR_CLIENT_ID>"
-});
-
-function App(){
-  return (
-    <ConnectButton client={THIRDWEB_CLIENT} />
-  );
-};`}
-          lang="tsx"
-        />
+        <ButtonComponent />
      </section>

      <section className="container px-4 md:px-6 space-y-8">
-        <div className="space-y-2">
-          <h2 className="text-4xl font-semibold tracking-tight">
-            Connect Embed
-          </h2>
-          <p className="max-w-[600px]">
-            When clicked opens a modal and allows users to connect to various
-            wallets.
-            <br />
-            It is extremely customizable and very easy to use.
-          </p>
-        </div>
-        <CodeExample
-          preview={<StyledConnectEmbed />}
-          code={`import { createThirdwebClient } from "thirdweb";
-import { ConnectEmbed } from "thirdweb/react";
+        <EmbedComponent />
+      </section>

-const THIRDWEB_CLIENT = createThirdwebClient({
-  clientId: "<YOUR_CLIENT_ID>"
-});
-
-function App(){
-  return (
-    <ConnectEmbed client={THIRDWEB_CLIENT} />
-  );
-};`}
-          lang="tsx"
-        />
+      <section className="container px-4 md:px-6 space-y-8">
+        <Hooks />
      </section>
    </main>
  );
 }
+
+function ButtonComponent() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Button Component
+        </h2>
+        <p className="max-w-[600px]">
+          When clicked opens a modal and allows users to connect to various
+          wallets.
+          <br />
+          Extremely customizable and easy to use.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<StyledConnectButton />}
+        code={`import { createThirdwebClient } from "thirdweb";
+import { ConnectButton } from "thirdweb/react";
+
+const THIRDWEB_CLIENT = createThirdwebClient({
+clientId: "<YOUR_CLIENT_ID>"
+});
+
+function App(){
+return (
+<ConnectButton client={THIRDWEB_CLIENT} />
+);
+};`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+function EmbedComponent() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Embed Component
+        </h2>
+        <p className="max-w-[600px]">
+          Inline component to connect to various wallets.
+          <br />
+          Use this to create your own full screen login page.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<StyledConnectEmbed />}
+        code={`import { createThirdwebClient } from "thirdweb";
+import { ConnectButton } from "thirdweb/react";
+
+const THIRDWEB_CLIENT = createThirdwebClient({
+clientId: "<YOUR_CLIENT_ID>"
+});
+
+function App(){
+return (
+<ConnectButton client={THIRDWEB_CLIENT} />
+);
+};`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+function Hooks() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Custom UI
+        </h2>
+        <p className="max-w-[600px]">
+          Build your own connect UI using react hooks.
+          <br />
+          Wallet state management is all handled for you.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<HooksPreview />}
+        code={`// Using your own UI
+        import { useConnect } from "thirdweb/react";
+        import { createWallet } from "thirdweb/wallets";
+      
+        function App(){
+          const { connect } = useConnect();
+      
+          return (<>
+      <button onClick={() => connect(async () => {
+        // 350+ wallets supported with id autocomplete
+        const wallet = createWallet("io.metamask");
+        await wallet.connect({ client });
+        return wallet;
+      })}>Connect with Metamask</button>
+      </>);
+      };`}
+        lang="tsx"
+      />
+    </>
+  );
+}
@@ -23,7 +23,7 @@ export function Header() {
        </div>

        <div className="flex items-center gap-1">
-          <ThemeSelector />
+          {/* <ThemeSelector /> */}
          <Button asChild size="icon" variant="ghost">
            <Link href="https://github.com/thirdweb-dev" target="_blank">
              <GithubIcon strokeWidth={1} />
@@ -27,8 +27,8 @@ function WalletsSection() {
      <div className="my-4 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <ArticleCardIndex
          href="/connect/sign-in"
-          title="Sign-In"
-          description="Flexible user sign-up flow with wallet and social sign-in methods"
+          title="Sign In"
+          description="Integrate 350+ web3 wallets, in-app wallets, and smart accounts"
          icon={WalletsConnectIcon}
        />
        <ArticleCardIndex
@@ -37,14 +37,12 @@ function WalletsSection() {
          description="Complete toolkit for Account Abstraction"
          icon={WalletsSmartIcon}
        />
-        <ComingSoonWrapper>
-          <ArticleCardIndex
-            title="In-App Wallet"
-            description="Email & social login wallets for your customers"
-            href="/connect/in-app-wallet"
-            icon={WalletsInAppIcon}
-          />
-        </ComingSoonWrapper>
+        <ArticleCardIndex
+          title="In-App Wallet"
+          description="Onboard users with an email, social logins, passkey or your own auth system"
+          href="/connect/in-app-wallet"
+          icon={WalletsInAppIcon}
+        />
        <ComingSoonWrapper>
          <ArticleCardIndex
            href="/connect/auth"
@@ -56,7 +54,7 @@ function WalletsSection() {
        <ArticleCardIndex
          href="/connect/pay"
          title="Pay"
-          description="Easily integrate fiat onramps and cross-chain crypto purchases"
+          description="Add fiat and cross-chain crypto payments in your apps"
          icon={PayIcon}
        />
        <ComingSoonWrapper>
@@ -84,7 +82,7 @@ function ArticleCardIndex(props: {
  return (
    <Link
      href={props.href}
-      className="flex items-center gap-4 rounded-lg border p-4 transition-colors hover:border-ring hover:bg-ring/20 h-full"
+      className="flex items-center gap-4 rounded-lg border p-4 transition-colors hover:border-ring hover:bg-ring/20 min-h-32"
    >
      {props.icon && <props.icon className="size-10 shrink-0" />}
      <div className="flex flex-col gap-1">
@@ -6,7 +6,7 @@ import { ThirdwebProvider } from "thirdweb/react";

 export const Providers: React.FC<React.PropsWithChildren> = ({ children }) => {
  return (
-    <ThemeProvider attribute="class" enableSystem>
+    <ThemeProvider attribute="class" defaultTheme="dark">
      <ThirdwebProvider>{children}</ThirdwebProvider>
    </ThemeProvider>
  );
@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect } from "react";
+import {
+  useActiveAccount,
+  useActiveWallet,
+  useConnect,
+  useDisconnect,
+} from "thirdweb/react";
+import { shortenAddress } from "thirdweb/utils";
+import { createWallet } from "thirdweb/wallets";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+import { StyledConnectButton } from "../styled-connect-button";
+import { Button } from "../ui/button";
+import { chain } from "./constants";
+
+export function ConnectSmartAccountPreview() {
+  // force disconnect if not smart wallet already
+  const wallet = useActiveWallet();
+  const { disconnect } = useDisconnect();
+  useEffect(() => {
+    if (wallet && wallet.id !== "smart") {
+      disconnect(wallet);
+    }
+  }, [wallet, disconnect]);
+  return (
+    <div className="flex flex-col">
+      <StyledConnectButton
+        accountAbstraction={{
+          chain,
+          sponsorGas: true,
+        }}
+      />
+    </div>
+  );
+}
+
+export function ConnectSmartAccountCustomPreview() {
+  const account = useActiveAccount();
+  const wallet = useActiveWallet();
+  const connectMutation = useConnect({
+    client: THIRDWEB_CLIENT,
+    accountAbstraction: { chain, sponsorGas: true },
+  });
+  const { disconnect } = useDisconnect();
+
+  const connect = async () => {
+    const wallet = await connectMutation.connect(async () => {
+      const adminWallet = createWallet("io.metamask");
+      await adminWallet.connect({
+        client: THIRDWEB_CLIENT,
+      });
+      return adminWallet;
+    });
+    return wallet;
+  };
+
+  return (
+    <div className="flex flex-col">
+      {account && wallet ? (
+        <>
+          <p className="py-4">Connected as {shortenAddress(account.address)}</p>
+          <Button variant={"outline"} onClick={() => disconnect(wallet)}>
+            Disconnect
+          </Button>
+        </>
+      ) : (
+        <Button variant={"default"} onClick={connect}>
+          Connect (metamask)
+        </Button>
+      )}
+    </div>
+  );
+}
@@ -3,7 +3,6 @@ import { zkSyncSepolia } from "thirdweb/chains";
 import { THIRDWEB_CLIENT } from "../../lib/client";

 export const chain = zkSyncSepolia;
-export const tokenDropAddress = "0xd64A548A82c190083707CBEFD26958E5e6551D18";
 export const editionDropAddress = "0xd563ACBeD80e63B257B2524562BdD7Ec666eEE77";
 export const editionDropTokenId = 0n;

@@ -12,9 +11,3 @@ export const editionDropContract = getContract({
  chain,
  client: THIRDWEB_CLIENT,
 });
-
-export const tokenDropContract = getContract({
-  address: tokenDropAddress,
-  chain,
-  client: THIRDWEB_CLIENT,
-});
@@ -12,9 +12,10 @@ import {
  useReadContract,
 } from "thirdweb/react";
 import { THIRDWEB_CLIENT } from "../../lib/client";
+import { CodeExample } from "../code/code-example";
 import { editionDropContract, editionDropTokenId } from "./constants";

-export function SponsoredTx() {
+export function SponsoredTxPreview() {
  const wallet = useActiveWallet();
  const { disconnect } = useDisconnect();
  useEffect(() => {
@@ -1,8 +1,3 @@
-// enforces this only gets rendered on the server
-import "server-only";
-
-import { transformerTwoslash } from "@shikijs/twoslash";
-import "@shikijs/twoslash/style-rich.css";
 import * as parserBabel from "prettier/plugins/babel";
 import * as estree from "prettier/plugins/estree";
 import { format } from "prettier/standalone";
@@ -0,0 +1,33 @@
+"use client";
+
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { useTheme } from "next-themes";
+import { ConnectButton } from "thirdweb/react";
+import type { ConnectButtonProps } from "thirdweb/react";
+import { inAppWallet } from "thirdweb/wallets/in-app";
+import { chain } from "./constants";
+
+export function InAppConnectButton(
+  props?: Omit<ConnectButtonProps, "client" | "theme">,
+) {
+  const { theme } = useTheme();
+
+  return (
+    <ConnectButton
+      client={THIRDWEB_CLIENT}
+      theme={theme === "light" ? "light" : "dark"}
+      connectButton={{
+        label: "Sign in",
+      }}
+      wallets={[
+        inAppWallet({
+          smartAccount: {
+            chain,
+            sponsorGas: true,
+          },
+        }),
+      ]}
+      {...props}
+    />
+  );
+}
@@ -0,0 +1,20 @@
+import { getContract } from "thirdweb";
+import { baseSepolia } from "thirdweb/chains";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+
+export const chain = baseSepolia;
+export const tokenDropAddress = "0xd64A548A82c190083707CBEFD26958E5e6551D18";
+export const editionDropAddress = "0x638263e3eAa3917a53630e61B1fBa685308024fa";
+export const editionDropTokenId = 0n;
+
+export const editionDropContract = getContract({
+  address: editionDropAddress,
+  chain,
+  client: THIRDWEB_CLIENT,
+});
+
+export const tokenDropContract = getContract({
+  address: tokenDropAddress,
+  chain,
+  client: THIRDWEB_CLIENT,
+});
@@ -0,0 +1,91 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect } from "react";
+import { claimTo, getNFT, getOwnedNFTs } from "thirdweb/extensions/erc1155";
+import {
+  MediaRenderer,
+  TransactionButton,
+  useActiveAccount,
+  useActiveWallet,
+  useDisconnect,
+  useReadContract,
+} from "thirdweb/react";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+import { editionDropContract, editionDropTokenId } from "./constants";
+
+export function SponsoredInAppTxPreview() {
+  const wallet = useActiveWallet();
+  const { disconnect } = useDisconnect();
+  useEffect(() => {
+    if (wallet && wallet.id !== "inApp") {
+      disconnect(wallet);
+    }
+  }, [wallet, disconnect]);
+  const { theme } = useTheme();
+  const smartAccount = useActiveAccount();
+  const { data: nft, isLoading: isNftLoading } = useReadContract(getNFT, {
+    contract: editionDropContract,
+    tokenId: editionDropTokenId,
+  });
+  const { data: ownedNfts } = useReadContract(getOwnedNFTs, {
+    contract: editionDropContract,
+    // biome-ignore lint/style/noNonNullAssertion: handled by queryOptions
+    address: smartAccount?.address!,
+    queryOptions: { enabled: !!smartAccount },
+  });
+
+  return (
+    <div className="flex flex-col">
+      {isNftLoading ? (
+        <div className="w-full mt-24">Loading...</div>
+      ) : (
+        <>
+          {nft ? (
+            <MediaRenderer
+              client={THIRDWEB_CLIENT}
+              src={nft.metadata.image}
+              style={{ width: "100%", marginTop: "10px" }}
+            />
+          ) : null}
+          {smartAccount ? (
+            <>
+              <p className="font-semibold text-center mb-2">
+                You own {ownedNfts?.[0]?.quantityOwned.toString() || "0"}{" "}
+                Kittens
+              </p>
+              <TransactionButton
+                transaction={() =>
+                  claimTo({
+                    contract: editionDropContract,
+                    tokenId: editionDropTokenId,
+                    to: smartAccount.address,
+                    quantity: 1n,
+                  })
+                }
+                onError={(error) => {
+                  alert(`Error: ${error.message}`);
+                }}
+                onTransactionConfirmed={async () => {
+                  alert("Minted successful!");
+                }}
+              >
+                Mint
+              </TransactionButton>
+            </>
+          ) : (
+            <p
+              style={{
+                textAlign: "center",
+                width: "100%",
+                marginTop: "10px",
+              }}
+            >
+              Login to mint this Kitten!
+            </p>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
@@ -4,13 +4,13 @@ import { THIRDWEB_CLIENT } from "@/lib/client";
 import { useTheme } from "next-themes";
 import { PayEmbed } from "thirdweb/react";

-export function StyledPayEmbed() {
+export function StyledPayEmbedPreview() {
  const { theme } = useTheme();

  return (
    <PayEmbed
      client={THIRDWEB_CLIENT}
-      theme={theme === "light" ? "dark" : "light"}
+      theme={theme === "light" ? "light" : "dark"}
    />
  );
 }
@@ -0,0 +1,41 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { getContract } from "thirdweb";
+import { polygon } from "thirdweb/chains";
+import { claimTo } from "thirdweb/extensions/erc1155";
+import { TransactionButton, useActiveAccount } from "thirdweb/react";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+import { StyledConnectButton } from "../styled-connect-button";
+
+const contract = getContract({
+  address: "0x96B30d36f783c7BC68535De23147e2ce65788e93",
+  chain: polygon,
+  client: THIRDWEB_CLIENT,
+});
+
+export function PayTransactionButtonPreview() {
+  const account = useActiveAccount();
+  const { theme } = useTheme();
+
+  return account ? (
+    <TransactionButton
+      transaction={() => {
+        if (!account) throw new Error("No active account");
+        return claimTo({
+          contract,
+          quantity: 1n,
+          tokenId: 0n,
+          to: account?.address,
+        });
+      }}
+      payModal={{
+        theme: theme === "light" ? "light" : "dark",
+      }}
+    >
+      Buy for 10 MATIC
+    </TransactionButton>
+  ) : (
+    <StyledConnectButton />
+  );
+}
@@ -0,0 +1,47 @@
+"use client";
+
+import {
+  useActiveAccount,
+  useActiveWallet,
+  useConnect,
+  useDisconnect,
+} from "thirdweb/react";
+import { shortenAddress } from "thirdweb/utils";
+import { createWallet } from "thirdweb/wallets";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+import { Button } from "../ui/button";
+
+export function HooksPreview() {
+  const account = useActiveAccount();
+  const wallet = useActiveWallet();
+  const connectMutation = useConnect();
+  const { disconnect } = useDisconnect();
+
+  const connect = async () => {
+    const wallet = await connectMutation.connect(async () => {
+      const adminWallet = createWallet("io.metamask");
+      await adminWallet.connect({
+        client: THIRDWEB_CLIENT,
+      });
+      return adminWallet;
+    });
+    return wallet;
+  };
+
+  return (
+    <div className="flex flex-col">
+      {account && wallet ? (
+        <>
+          <p className="py-4">Connected as {shortenAddress(account.address)}</p>
+          <Button variant={"outline"} onClick={() => disconnect(wallet)}>
+            Disconnect
+          </Button>
+        </>
+      ) : (
+        <Button variant={"default"} onClick={connect}>
+          Connect with Metamask
+        </Button>
+      )}
+    </div>
+  );
+}
@@ -2,15 +2,28 @@

 import { THIRDWEB_CLIENT } from "@/lib/client";
 import { useTheme } from "next-themes";
-import { ConnectEmbed } from "thirdweb/react";
+import {
+  ConnectEmbed,
+  type ConnectEmbedProps,
+  useActiveAccount,
+} from "thirdweb/react";
+import { StyledConnectButton } from "./styled-connect-button";

-export function StyledConnectEmbed() {
+export function StyledConnectEmbed(
+  props?: Omit<ConnectEmbedProps, "client" | "theme">,
+) {
  const { theme } = useTheme();
+  const account = useActiveAccount();

-  return (
+  return account ? (
+    <div className="flex flex-col">
+      <StyledConnectButton />
+    </div>
+  ) : (
    <ConnectEmbed
      client={THIRDWEB_CLIENT}
      theme={theme === "light" ? "light" : "dark"}
+      {...props}
    />
  );
 }