Update playground pages (thirdweb-dev#3224)

Author: joaquim-verges

apps/playground-web/public/account-abstraction.png

@@ -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>
+
+      <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";
 
-        <CodeExample
-          preview={<SponsoredTx />}
-          code={`import { claimTo } from "thirdweb/extensions/erc1155";
-          import { ConnectButton, TransactionButton } 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(){
-            return (<>
-{/* converts any wallet to a smart account */}
-<ConnectButton client={client} accountAbstraction={{ chain, sponsorGas: true }} />
+  function App(){
+    const { connect } = useConnect({ client, 
+      // account abstraction options
+      accountAbstraction: { chain, sponsorGas: true }});
 
-{/* all transactions will be sponsored */}
+    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"
-        />
-      </section>
-    </main>
+        lang="tsx"
+      />
+    </>
   );
 }

apps/playground-web/public/connectors.png

@@ -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"
+      />
+    </>
+  );
+}