Version Packages (#3346)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/config.json

@@ -7,10 +7,7 @@
     }
   ],
   "commit": false,
-  "fixed": [
-    ["@thirdweb-dev/react-core", "@thirdweb-dev/react"],
-    ["@thirdweb-dev/react-native-compat", "@thirdweb-dev/react-native"]
-  ],
+  "fixed": [["@thirdweb-dev/react-core", "@thirdweb-dev/react"]],
   "linked": [],
   "access": "public",
   "baseBranch": "main",
@@ -21,7 +18,8 @@
     "bundlers-webpack",
     "bundlers-swc",
     "runtimes-node-commonjs",
-    "runtimes-node-module"
+    "runtimes-node-module",
+    "playground-web"
   ],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always",

.github/composite-actions/install/action.yml

@@ -20,6 +20,9 @@ runs:
         check-latest: true
         registry-url: "https://registry.npmjs.org"
         cache: "pnpm"
+    - name: Install node-gyp globally
+      shell: bash
+      run: pnpm install -g node-gyp node-gyp-build
 
     - name: Install dependencies
       shell: bash

.github/contributing.md

@@ -73,6 +73,10 @@ pnpm test:dev <YOUR TEST FILE PATH>
 
 > Specifying your test file path is optional, but will save time by only running specific tests each time. Before opening your PR, run `pnpm test` from the monorepo root (without specifying your test file) to ensure your changes didn't break any existing tests.
 
+Many of the tests use forked versions of live chains like mainnet. We fork these chains at a specific arbitrary block number so results are consistent across test runs. If you're interacting with on-chain data, you can write tests that interact with real contracts at the same block number by using `FORKED_ETHEREUM_CHAIN`. However, if you don't need to interact with existing contracts, we recommend running your tests against `ANVIL_CHAIN`.
+
+If you need to use accounts in your tests, use the predefined accounts in `test/src/test-wallets.ts`. These are the default anvil accounts that are pre-funded on the local test forks.
+
 #### Linting
 
 We use a linter to maintain best practices across projects. Once your changes are complete (or periodically while making changes), run the linter with the following command from the repo root:
@@ -83,39 +87,9 @@ pnpm lint
 
 If there are errors, try running `pnpm fix` to auto-fix any basic errors. Other linter errors, like missing documentation, will need to be fixed manually. See existing files for examples of inline documentation.
 
-#### Creating a Local Test Project
+#### Testing on the Demo Apps
 
-You can use [yalc](https://github.com/wclr/yalc) to test changes on a local project.
-
-Install the yalc CLI globally:
-
-```bash
-pnpm add yalc -g
-```
-
-First, create a test project where you can experiment with your changes. This can be any node project that uses your changes.
-
-
-Push your local version to your `yalc` store with:
-
-```bash
-pnpm build && pnpm push
-```
-
-Link your local changes in the monorepo to the test project by running the following command from your test repo:
-
-```bash
-yalc add thirdweb
-```
-
-Now, each time you make a change to the monorepo, you can run `pnpm push` from the monorepo then `yalc update thirdweb` from your test project to publish your latest changes to the test project.
-
-If your changes modify dependencies, you may need to reinstall dependencies on your test project with `pnpm install`
-
-To make sure your latest changes are used, in your test project you may need to:
-
-1. Delete the dependencies cache. If you're using Next.js, that's the `.next` directory, and if you're using CRA, that's the `node_modules/.cache` directory.
-2. Restart the development server.
+You can test your changes on any of the demo apps within the `/apps` directory without linking or publishing your changes to npm. When you run `pnpm dev` from the root directory, turbo will start the demo apps and watch the dependent packages for changes. Any time you make a change anywhere in the repo, the apps will hot reload and the changes will be reflected in the browser.
 
 #### Testing from npm
 
@@ -169,4 +143,3 @@ git push origin <YOUR BRANCH NAME>
 ```
 
 4. Create a [pull request](https://www.atlassian.com/git/tutorials/making-a-pull-request) to the `main` branch of the official (not your fork) SDK repo.
-

.github/workflows/CI.yml

@@ -11,6 +11,7 @@ on:
     paths:
       - "packages/**"
       - "package.json"
+      - ".github/**"
   # trigger on merge group as well (merge queue)
   merge_group:
     types: [checks_requested]
@@ -89,6 +90,10 @@ jobs:
     timeout-minutes: 15
     name: E2E Tests
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        package_manager: [npm, yarn, pnpm, bun]
+        bundler: [vite, webpack, esbuild]
     steps:
       - name: Check out the code
         uses: actions/checkout@v4
@@ -96,7 +101,58 @@ jobs:
       - name: Setup & Install
         uses: ./.github/composite-actions/install
 
-      # TODO actually run e2e tests
+      - name: Build Packages
+        run: pnpm build:packages
+
+      - name: Install Yarn (if needed)
+        if: matrix.package_manager == 'yarn'
+        run: npm install -g [email protected]
+
+      - name: Create test project
+        run: |
+          mkdir test-project
+          cd test-project
+          npm init -y
+          ${{ matrix.package_manager }} add react react-dom ../packages/thirdweb
+      - name: Create test file
+        run: |
+          cd test-project
+          echo "import { createThirdwebClient } from 'thirdweb'; console.log(createThirdwebClient({clientId: "foo_bar_baz"}));" > index.js
+      
+      - name: Bundle with vite
+        if: matrix.bundler == 'vite'
+        run: |
+          cd test-project
+          ${{matrix.package_manager}} add vite
+          echo 'import { defineConfig } from "vite"; import {resolve} from "path"; export default defineConfig({ build: { lib: { entry: resolve(__dirname, "index.js"), name: "e2e_test" }, outDir: "dist" }});' > vite.config.js
+          npx vite build
+    
+      - name: Bundle with webpack
+        if: matrix.bundler == 'webpack'
+        run: |
+          cd test-project
+          ${{matrix.package_manager}} add webpack webpack-cli
+          echo 'const path = require("path"); module.exports = { mode: "production", entry: "./index.js", output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js" }};' > webpack.config.js
+          npx webpack
+    
+      - name: Bundle with esbuild
+        if: matrix.bundler == 'esbuild'
+        run: |
+          cd test-project
+          ${{matrix.package_manager}} add esbuild
+          npx esbuild index.js --bundle --outdir=dist
+    
+      - name: Verify bundle
+        run: |
+          cd test-project/dist
+          file_count=$(find . -type f | wc -l)
+          if [ "$file_count" -gt 0 ]; then
+            echo "Bundling successful"
+          else
+            echo "Bundling failed"
+            exit 1
+          fi
+      
 
   benchmark:
     # cannot run benchmarks on merge group

.github/workflows/release-pr.yml

@@ -27,7 +27,7 @@ jobs:
         id: validate_user
         if: ${{ steps.check.outputs.triggered == 'true' }}
         run: |
-          if [[ "${AUTHOR_ASSOCIATION}" != 'MEMBER' && "${AUTHOR_ASSOCIATION}" != 'OWNER' && "${AUTHOR_ASSOCIATION}" != 'CONTRIBUTOR' ]]
+          if [[ "${AUTHOR_ASSOCIATION}" != 'MEMBER' && "${AUTHOR_ASSOCIATION}" != 'OWNER' ]]
           then
             echo "User authorization failed"
             exit 1
@@ -51,7 +51,7 @@ jobs:
     steps:
       - name: get pull request ref
         id: get_pull_request_ref
-        uses: octokit/[email protected].0
+        uses: octokit/[email protected].1
         with:
           route: GET /repos/{owner}/{repository}/pulls/{issue_id}
           owner: ${{ github.repository_owner }}

.vscode/settings.json

@@ -5,11 +5,15 @@
     "quickfix.biome": "explicit",
     "source.organizeImports.biome": "explicit"
   },
-  "typescript.preferences.importModuleSpecifier": "relative",
   "[typescriptreact]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
   "[markdown]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "typescript.preferences.autoImportFileExcludePatterns": ["/exports"],
+  "typescript.preferences.importModuleSpecifier": "relative"
 }

README.md

@@ -31,24 +31,24 @@
 
 ## Library Comparison
 
-|                                           | thirdweb | Wagmi              | Viem               | Ethers@6 |
-| ----------------------------------------- | -------- | ------------------ | ------------------ | -------- |
-| Type safe contract API                    | ✅       | ✅                 | ✅                 | ✅       |
-| Type safe wallet API                      | ✅       | ✅                 | ✅                 | ✅       |
-| EVM utils                                 | ✅       | ❌                 | ✅                 | ✅       |
-| RPC for any EVM                           | ✅       | ⚠️ public RPC only | ⚠️ public RPC only | ❌       |
-| Automatic ABI Resolution                  | ✅       | ❌                 | ❌                 | ❌       |
-| IPFS Upload/Download                      | ✅       | ❌                 | ❌                 | ❌       |
-| Embedded wallet (email/ social login)     | ✅       | ⚠️ via 3rd party   | ❌                 | ❌       |
-| Account abstraction (ERC4337) support     | ✅       | ⚠️ via 3rd party   | ⚠️ via 3rd party   | ❌       |
-| Web3 wallet connectors                    | ✅       | ✅                 | ❌                 | ❌       |
-| Local wallet creation                     | ✅       | ❌                 | ✅                 | ✅       |
-| Auth (SIWE)                               | ✅       | ⚠️ via 3rd party   | ❌                 | ❌       |
-| Extensions functions for common standards | ✅       | ❌                 | ❌                 | ❌       |
-| React Hooks                               | ✅       | ✅                 | ❌                 | ❌       |
-| React UI components                       | ✅       | ❌                 | ❌                 | ❌       |
-| React Native Hooks                        | ✅       | ❌                 | ❌                 | ❌       |
-| React Native UI Components                | ✅       | ❌                 | ❌                 | ❌       |
+|                                           | thirdweb | Wagmi + Viem              | Ethers@6 |
+| ----------------------------------------- | -------- | ------------------ | -------- |
+| Type safe contract API                    | ✅       | ✅                 | ✅       |
+| Type safe wallet API                      | ✅       | ✅                 | ✅       |
+| EVM utils                                 | ✅       | ✅                 | ✅       |
+| RPC for any EVM                           | ✅       | ⚠️ public RPC only  | ❌       |
+| Automatic ABI Resolution                  | ✅       | ❌                 | ❌       |
+| IPFS Upload/Download                      | ✅       | ❌                 | ❌       |
+| Embedded wallet (email/ social login)     | ✅       | ⚠️ via 3rd party   | ❌       |
+| Account abstraction (ERC4337) support     | ✅       | ⚠️ via 3rd party   | ❌       |
+| Web3 wallet connectors                    | ✅       | ✅                 | ❌       |
+| Local wallet creation                     | ✅       | ✅                 | ✅       |
+| Auth (SIWE)                               | ✅       | ✅                 | ❌       |
+| Extensions functions for common standards | ✅       | ✅                 | ❌       |
+| React Hooks                               | ✅       | ✅                 | ❌       |
+| React UI components                       | ✅       | ❌                 | ❌       |
+| React Native Hooks                        | ✅       | ✅                 | ❌       |
+| React Native UI Components                | ✅       | ❌                 | ❌       |
 
 ## Contributing
 

apps/playground-web/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_THIRDWEB_CLIENT_ID=""

apps/playground-web/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

apps/playground-web/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Turborepo
+.turbo

apps/playground-web/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/playground-web/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

apps/playground-web/next.config.mjs

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config) => {
+    config.externals.push("pino-pretty", "lokijs", "encoding");
+    return config;
+  },
+  serverExternalPackages: ["@shikijs/twoslash", "prettier", "shiki"],
+  experimental: {
+    reactCompiler: true,
+  },
+};
+
+export default nextConfig;

apps/playground-web/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "playground-web",
+  "version": "0.1.1",
+  "private": true,
+  "scripts": {
+    "dev": "rm -rf .next && next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@shikijs/twoslash": "^1.6.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.379.0",
+    "next": "15.0.0-rc.0",
+    "next-themes": "^0.3.0",
+    "prettier": "^3.2.5",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522",
+    "server-only": "^0.0.1",
+    "shiki": "^1.6.0",
+    "tailwind-merge": "^2.3.0",
+    "thirdweb": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5"
+  }
+}

apps/playground-web/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

apps/playground-web/src/app/connect/account-abstraction/page.tsx

@@ -0,0 +1,158 @@
+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 {
+  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,
+  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">
+                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
+                unlock gas sponsorship, batched transactions, session keys and
+                full wallet programmability.
+              </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/account-abstraction"
+                >
+                  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-[500px] p-8">
+              <Image
+                src={"/account-abstraction.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">
+        <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";
+
+  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"
+      />
+    </>
+  );
+}

apps/playground-web/src/app/connect/in-app-wallet/page.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"
+      />
+    </>
+  );
+}

apps/playground-web/src/app/connect/pay/page.tsx

@@ -0,0 +1,148 @@
+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 { StyledPayEmbedPreview } from "../../../components/pay/embed";
+import { PayTransactionButtonPreview } from "../../../components/pay/transaction-button";
+
+export const metadata: Metadata = {
+  metadataBase,
+  title: "Integrate Fiat & Cross-Chain Crypto Payments | thirdweb Pay",
+  description:
+    "The easiest way for users to transact in your app. Onramp users in clicks and generate revenue for each user transaction. Integrate for free.",
+};
+
+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">
+                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">
+        <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"
+      />
+    </>
+  );
+}

apps/playground-web/src/app/connect/sign-in/page.tsx

@@ -0,0 +1,185 @@
+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,
+  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">
+                Sign in
+              </h1>
+              <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
+                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">
+              <Button asChild size="lg">
+                <Link
+                  target="_blank"
+                  href="https://portal.thirdweb.com/connect/sign-in"
+                >
+                  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={"/connectors.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">
+        <ButtonComponent />
+      </section>
+
+      <section className="container px-4 md:px-6 space-y-8">
+        <EmbedComponent />
+      </section>
+
+      <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 { ConnectEmbed } from "thirdweb/react";
+
+const THIRDWEB_CLIENT = createThirdwebClient({
+clientId: "<YOUR_CLIENT_ID>"
+});
+
+function App(){
+return (
+<ConnectEmbed 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"
+      />
+    </>
+  );
+}

apps/playground-web/src/app/features/Footer.tsx

@@ -0,0 +1,9 @@
+export function Footer() {
+  return (
+    <footer className="bg-background flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center md:px-6 border-t">
+      <p className="text-xs text-gray-500 dark:text-gray-400">
+        © 2024 thirdweb. All rights reserved.
+      </p>
+    </footer>
+  );
+}

apps/playground-web/src/app/features/Header.tsx

@@ -0,0 +1,36 @@
+import { ThemeSelector } from "@/components/theme-selector";
+import { ThirdwebIcon } from "@/icons/thirdweb";
+import { GithubIcon } from "lucide-react";
+import Link from "next/link";
+import { Button } from "../../components/ui/button";
+
+export function Header() {
+  return (
+    <header className="flex w-full items-center border-b bg-background sticky top-0 z-50">
+      <div className="container flex items-center justify-between gap-6 py-3">
+        <div className="flex items-center gap">
+          <Link
+            className="flex items-center gap-2"
+            href="/"
+            aria-label="thirdweb Docs"
+            title="thirdweb Docs"
+          >
+            <ThirdwebIcon className="size-8" />
+            <span className="text-[23px] font-bold leading-none tracking-tight">
+              Playground
+            </span>
+          </Link>
+        </div>
+
+        <div className="flex items-center gap-1">
+          {/* <ThemeSelector /> */}
+          <Button asChild size="icon" variant="ghost">
+            <Link href="https://github.com/thirdweb-dev" target="_blank">
+              <GithubIcon strokeWidth={1} />
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+}

apps/playground-web/src/app/globals.css

@@ -0,0 +1,70 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 215.88 100% 60%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 215.88 100% 60%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 215.88 100% 60%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 215.88 100% 60%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}

apps/playground-web/src/app/layout.tsx

@@ -0,0 +1,68 @@
+import { metadataBase } from "@/lib/constants";
+import { cn } from "@/lib/utils";
+import type { Metadata } from "next";
+import { Fira_Code, Inter } from "next/font/google";
+import Script from "next/script";
+import { Footer } from "./features/Footer";
+import { Header } from "./features/Header";
+import "./globals.css";
+import { Providers } from "./providers";
+
+const sansFont = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+  weight: "variable",
+});
+
+const monoFont = Fira_Code({
+  subsets: ["latin"],
+  variable: "--font-mono",
+  weight: "variable",
+});
+
+export const metadata: Metadata = {
+  metadataBase,
+  title: "thirdweb playground",
+  description: "thirdweb playground",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <Script
+          src="https://thirdweb.com/js/pl.js"
+          defer
+          data-domain="playground.thirdweb.com"
+          data-api="https://pl.thirdweb.com/api/event"
+        />
+      </head>
+      <body
+        className={cn(
+          "h-screen bg-background font-sans antialiased overflow-x-hidden",
+          sansFont.variable,
+          monoFont.variable,
+        )}
+        suppressHydrationWarning
+      >
+        <Providers>
+          <div className="relative flex min-h-screen flex-col">
+            <Header />
+            {children}
+            <div
+              className="fixed bottom-0 left-0 right-0 h-[66%] z-[-1] bg-cover md:bg-[length:100%_100%] bg-no-repeat"
+              style={{
+                backgroundImage: "url(../../bottom-gradient.png)",
+              }}
+            />
+            <Footer />
+          </div>
+        </Providers>
+      </body>
+    </html>
+  );
+}

apps/playground-web/src/app/not-found.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <main className="flex grow items-center justify-center" data-noindex>
+      404 | Page Not Found
+    </main>
+  );
+}

apps/playground-web/src/app/page.tsx

@@ -0,0 +1,108 @@
+import {
+  PayIcon,
+  WalletsAuthIcon,
+  WalletsConnectIcon,
+  WalletsInAppIcon,
+  WalletsSmartIcon,
+} from "@/icons";
+import { CodeIcon, ConstructionIcon } from "lucide-react";
+import Link from "next/link";
+import type { PropsWithChildren } from "react";
+
+export default function Page() {
+  return (
+    <main className="container flex-1">
+      <WalletsSection />
+    </main>
+  );
+}
+
+function WalletsSection() {
+  return (
+    <section className="my-12">
+      <h2 className="text-2xl md:text-3xl font-semibold tracking-tight break-words">
+        Connect
+      </h2>
+
+      <div className="my-4 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <ArticleCardIndex
+          href="/connect/sign-in"
+          title="Sign In"
+          description="Integrate 350+ web3 wallets, in-app wallets, and smart accounts"
+          icon={WalletsConnectIcon}
+        />
+        <ArticleCardIndex
+          href="/connect/account-abstraction"
+          title="Account abstraction"
+          description="Complete toolkit for Account Abstraction"
+          icon={WalletsSmartIcon}
+        />
+        <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"
+            title="Auth"
+            description="Authenticate users with their wallets"
+            icon={WalletsAuthIcon}
+          />
+        </ComingSoonWrapper>
+        <ArticleCardIndex
+          href="/connect/pay"
+          title="Pay"
+          description="Add fiat and cross-chain crypto payments in your apps"
+          icon={PayIcon}
+        />
+        <ComingSoonWrapper>
+          <ArticleCardIndex
+            href="/connect/blockchain-api"
+            title="Blockchain API"
+            description="Performant, and reliable blockchain API"
+            icon={CodeIcon}
+          />
+        </ComingSoonWrapper>
+      </div>
+    </section>
+  );
+}
+
+/***
+ * This component is only for the index page
+ */
+function ArticleCardIndex(props: {
+  title: string;
+  description: string;
+  href: string;
+  icon?: React.FC<{ className?: string }>;
+}) {
+  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 min-h-32"
+    >
+      {props.icon && <props.icon className="size-10 shrink-0" />}
+      <div className="flex flex-col gap-1">
+        <h3 className="text-lg font-semibold">{props.title}</h3>
+        <p className="font-medium text-muted-foreground">{props.description}</p>
+      </div>
+    </Link>
+  );
+}
+
+const ComingSoonWrapper: React.FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <div className="relative pointer-events-none rounded-lg overflow-hidden">
+      {children}
+      <div className="absolute top-0 left-0 h-full w-full backdrop-blur-[2px] bg-color-overlay">
+        <div className="flex items-center justify-center h-full space-x-2">
+          <ConstructionIcon className="opacity-80" strokeWidth={1} />
+          <p className="font-semibold">Coming Soon</p>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/playground-web/src/app/providers.tsx

@@ -0,0 +1,17 @@
+"use client";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ThemeProviderProps } from "next-themes/dist/types";
+import type * as React from "react";
+import { ThirdwebProvider } from "thirdweb/react";
+
+export const Providers: React.FC<React.PropsWithChildren> = ({ children }) => {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="dark">
+      <ThirdwebProvider>{children}</ThirdwebProvider>
+    </ThemeProvider>
+  );
+};
+
+function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

apps/playground-web/src/components/account-abstraction/connect-smart-account.tsx

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

apps/playground-web/src/components/account-abstraction/constants.ts

@@ -0,0 +1,13 @@
+import { getContract } from "thirdweb";
+import { baseSepolia } from "thirdweb/chains";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+
+export const chain = baseSepolia;
+export const editionDropAddress = "0x638263e3eAa3917a53630e61B1fBa685308024fa";
+export const editionDropTokenId = 0n;
+
+export const editionDropContract = getContract({
+  address: editionDropAddress,
+  chain,
+  client: THIRDWEB_CLIENT,
+});

apps/playground-web/src/components/account-abstraction/sponsored-tx.tsx

@@ -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 SponsoredTxPreview() {
+  const wallet = useActiveWallet();
+  const { disconnect } = useDisconnect();
+  useEffect(() => {
+    if (wallet && wallet.id !== "smart") {
+      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 ? (
+            <div className="flex flex-col justify-center p-8">
+              <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>
+            </div>
+          ) : (
+            <p
+              style={{
+                textAlign: "center",
+                width: "100%",
+                marginTop: "10px",
+              }}
+            >
+              Login to mint this Kitten!
+            </p>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

apps/playground-web/src/components/code/code-example.tsx

@@ -0,0 +1,25 @@
+import type { BundledLanguage } from "shiki";
+import { Code } from "./code";
+
+export type CodeExampleProps = {
+  preview: JSX.Element;
+  code: string;
+  lang: BundledLanguage;
+};
+
+export const CodeExample: React.FC<CodeExampleProps> = ({
+  code,
+  lang,
+  preview,
+}) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 items-center rounded-3xl shadow-lg">
+      <div className="h-full border border-accent-foreground/10 border-b-0 md:border-b md:border-r-0 rounded-3xl md:rounded-r-none max-sm:rounded-b-none">
+        <Code code={code} lang={lang} />
+      </div>
+      <div className="py-8 h-full grid place-items-center backdrop-blur-md bg-accent/30 max-sm:rounded-b-3xl md:rounded-b-none md:rounded-r-3xl border border-accent-foreground/10">
+        {preview}
+      </div>
+    </div>
+  );
+};

apps/playground-web/src/components/code/code.tsx

@@ -0,0 +1,32 @@
+import * as parserBabel from "prettier/plugins/babel";
+import * as estree from "prettier/plugins/estree";
+import { format } from "prettier/standalone";
+import { type BundledLanguage, codeToHtml } from "shiki";
+
+export type CodeProps = {
+  code: string;
+  lang: BundledLanguage;
+};
+
+export const Code: React.FC<CodeProps> = async ({ code, lang }) => {
+  const formattedCode = await format(code, {
+    parser: "babel-ts",
+    plugins: [parserBabel, estree],
+    printWidth: 50,
+  });
+  const html = await codeToHtml(formattedCode, {
+    lang: lang,
+    themes: {
+      light: "github-light",
+      dark: "github-dark-default",
+    },
+  });
+
+  return (
+    <div
+      className="*:pointer-events-none *:md:pointer-events-auto *:w-full *:p-4 *:md:p-8 *:h-full h-full text-xs md:text-sm *:rounded-3xl *:max-sm:rounded-b-none *:md:rounded-r-none *:overflow-clip *:md:overflow-visible"
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: we know what we're doing here
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+};

apps/playground-web/src/components/in-app-wallet/connect-button.tsx

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

apps/playground-web/src/components/in-app-wallet/constants.ts

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

apps/playground-web/src/components/in-app-wallet/sponsored-tx.tsx

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

apps/playground-web/src/components/pay/embed.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { useTheme } from "next-themes";
+import { PayEmbed } from "thirdweb/react";
+
+export function StyledPayEmbedPreview() {
+  const { theme } = useTheme();
+
+  return (
+    <PayEmbed
+      client={THIRDWEB_CLIENT}
+      theme={theme === "light" ? "light" : "dark"}
+    />
+  );
+}

apps/playground-web/src/components/pay/transaction-button.tsx

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

apps/playground-web/src/components/sign-in/hooks.tsx

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

apps/playground-web/src/components/styled-connect-button.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { useTheme } from "next-themes";
+import { ConnectButton } from "thirdweb/react";
+import type { ConnectButtonProps } from "thirdweb/react";
+
+export function StyledConnectButton(
+  props?: Omit<ConnectButtonProps, "client" | "theme">,
+) {
+  const { theme } = useTheme();
+
+  return (
+    <ConnectButton
+      client={THIRDWEB_CLIENT}
+      theme={theme === "light" ? "light" : "dark"}
+      {...props}
+    />
+  );
+}

apps/playground-web/src/components/styled-connect-embed.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { useTheme } from "next-themes";
+import {
+  ConnectEmbed,
+  type ConnectEmbedProps,
+  useActiveAccount,
+} from "thirdweb/react";
+import { StyledConnectButton } from "./styled-connect-button";
+
+export function StyledConnectEmbed(
+  props?: Omit<ConnectEmbedProps, "client" | "theme">,
+) {
+  const { theme } = useTheme();
+  const account = useActiveAccount();
+
+  return account ? (
+    <div className="flex flex-col">
+      <StyledConnectButton />
+    </div>
+  ) : (
+    <ConnectEmbed
+      client={THIRDWEB_CLIENT}
+      theme={theme === "light" ? "light" : "dark"}
+      {...props}
+    />
+  );
+}

apps/playground-web/src/components/styled-pay-transaction.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { THIRDWEB_CLIENT } from "@/lib/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 { StyledConnectButton } from "./styled-connect-button";
+
+const contract = getContract({
+  address: "0x96B30d36f783c7BC68535De23147e2ce65788e93",
+  chain: polygon,
+  client: THIRDWEB_CLIENT,
+});
+
+export function StyledPayTransaction() {
+  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 />
+  );
+}

apps/playground-web/src/components/theme-selector.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import * as React from "react";
+
+export function ThemeSelector() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Sun
+            strokeWidth={1}
+            className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+          />
+          <Moon
+            strokeWidth={1}
+            className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+          />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

apps/playground-web/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

apps/playground-web/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

apps/playground-web/src/icons/frameworks/hardhat.svg

@@ -0,0 +1 @@
+<svg width="165" height="41" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M75.547 29.84v-7.782h-8.743v7.782H63.74V12.176h3.064V19.6h8.743v-7.425h3.093V29.84h-3.093ZM93.885 29.843l-.613-2.125c-.67 1.105-2.648 2.325-5.6 2.325-3.065 0-5.516-1.353-5.516-4.335 0-2.594 1.866-3.783 5.933-4.167l4.487-.442c-.084-2.054-.837-3.243-3.71-3.243-2.647 0-3.37 1.05-3.37 2.816l-2.903.029c0-2.927 1.226-5.188 6.241-5.188 5.822 0 6.661 2.486 6.661 6.292v8.033l-1.61.005Zm-1.31-6.514-4.036.442c-2.478.278-3.315.801-3.315 1.906 0 1.297 1.115 2.042 3.204 2.042 2.618 0 4.152-1.49 4.152-3.947l-.004-.443ZM105.419 18.082c-2.981 0-3.572 1.636-3.572 3.919v7.839h-2.975V15.708h1.589l.703 1.96c.446-.938 1.81-2.153 4.596-2.153h.475v2.623c-.288 0-.565-.056-.816-.056ZM119.74 29.841l-.67-2.016c-.501.967-2.089 2.21-5.465 2.21-4.708 0-6.103-3.395-6.103-7.26 0-3.865 1.338-7.259 6.073-7.259 2.815 0 4.236.994 4.849 1.933v-7.123h2.926v19.515h-1.61Zm-5.267-11.844c-3.258 0-3.927 1.932-3.927 4.775 0 2.842.67 4.83 3.901 4.83 3.315 0 4.011-1.932 4.011-4.83 0-2.73-.583-4.772-3.984-4.772l-.001-.003ZM135.204 29.841v-7.922c0-2.65-.447-3.919-3.485-3.919-3.007 0-3.65 1.242-3.65 3.919l-.054 7.922h-2.925V10.326h2.926v7.144c.556-1.014 1.809-1.959 4.541-1.959 4.653 0 5.6 2.623 5.6 6.68v7.645l-2.953.005ZM152.813 29.843l-.613-2.125c-.67 1.105-2.648 2.325-5.605 2.325-3.066 0-5.517-1.353-5.517-4.335 0-2.594 1.867-3.783 5.935-4.167l4.484-.442c-.078-2.054-.83-3.243-3.709-3.243-2.645 0-3.371 1.05-3.371 2.816l-2.903.029c0-2.927 1.227-5.188 6.241-5.188 5.823 0 6.662 2.486 6.662 6.292v8.033l-1.604.005Zm-1.309-6.514-4.037.442c-2.478.278-3.315.801-3.315 1.906 0 1.297 1.115 2.042 3.204 2.042 2.618 0 4.152-1.49 4.152-3.947l-.004-.443ZM161.256 18.082v7.7c0 1.326.557 1.933 3.65 1.796v2.369c-4.708.276-6.686-.829-6.686-4.17v-7.695h-2.036v-1.766l2.034-.607v-3.533h2.953v3.533h3.733v2.369l-3.648.004Z" fill="#fff"/><path d="M50.782 34.189v-2.421c0-.45-.757-.879-2.116-1.266l.033-3.013c0-4.642-1.44-9.171-4.126-12.975a22.825 22.825 0 0 0-10.886-8.29l-.097-.604a1.722 1.722 0 0 0-.408-.872 1.747 1.747 0 0 0-.815-.521 23.148 23.148 0 0 0-12.925 0c-.317.093-.6.273-.818.52-.217.246-.36.548-.41.872l-.093.563a22.831 22.831 0 0 0-10.962 8.283A22.498 22.498 0 0 0 3 27.488v3.026c-1.34.386-2.087.81-2.087 1.257v2.421A.59.59 0 0 0 1 34.6a5.852 5.852 0 0 1 2.247-1.015c2.072-.5 4.179-.85 6.303-1.046a4.25 4.25 0 0 1 3.307 1.057 8.95 8.95 0 0 0 6.009 2.312H32.83a8.943 8.943 0 0 0 6.008-2.314 4.253 4.253 0 0 1 3.308-1.069c2.123.196 4.23.544 6.302 1.042a5.26 5.26 0 0 1 2.13.925c.035.035.078.066.108.099a.6.6 0 0 0 .096-.402Z" fill="#FFF100"/><path d="M12.89 29.094a53.064 53.064 0 0 1-.03-1.673c.007-8.416 1.992-15.964 5.262-21.235A22.831 22.831 0 0 0 7.16 14.468 22.498 22.498 0 0 0 3 27.488v3.026a55.9 55.9 0 0 1 9.89-1.42Z" fill="url(#a)"/><path d="M48.697 27.488a22.425 22.425 0 0 0-5.215-14.396 46.55 46.55 0 0 1 2.162 14.325c0 .82-.022 1.63-.06 2.435a28.49 28.49 0 0 1 3.074.648l.038-3.012Z" fill="url(#b)"/><path d="M48.448 33.576c-2.073-.5-4.18-.85-6.303-1.046a4.252 4.252 0 0 0-3.308 1.062 8.943 8.943 0 0 1-6.009 2.313H18.87a8.948 8.948 0 0 1-6.006-2.312 4.249 4.249 0 0 0-3.308-1.071c-2.124.196-4.23.546-6.303 1.045a5.929 5.929 0 0 0-2.246 1.015c1.06 1.608 11.782 3.295 24.846 3.295 13.065 0 23.782-1.693 24.844-3.294-.037-.032-.078-.063-.109-.098a5.463 5.463 0 0 0-2.14-.909Z" fill="url(#c)"/><path d="M25.846 10.414 20.5 19.436l5.346 3.29V10.413Z" fill="#0A0A0A"/><path d="M25.848 10.417v12.306l5.345-3.284-5.345-9.022ZM25.848 24.51v4.291c.1-.142 5.345-7.58 5.345-7.583l-5.345 3.293Z" fill="#4B4D4D"/><path d="m25.848 24.512-5.346-3.288 5.346 7.58V24.51v.002Z" fill="#0A0A0A"/><defs><linearGradient id="a" x1="10.561" y1="30.514" x2="10.561" y2="6.186" gradientUnits="userSpaceOnUse"><stop stop-color="#EDCF00"/><stop offset=".33" stop-color="#F0D500"/><stop offset=".77" stop-color="#F9E500"/><stop offset="1" stop-color="#FFF100"/></linearGradient><linearGradient id="b" x1="46.089" y1="30.692" x2="46.089" y2="13.092" gradientUnits="userSpaceOnUse"><stop stop-color="#EDCF00"/><stop offset=".59" stop-color="#F7E100"/><stop offset="1" stop-color="#FFF100"/></linearGradient><radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(18.5398 0 0 18.4136 3.701 47.135)"><stop stop-color="#FFF100"/><stop offset=".23" stop-color="#F9E500"/><stop offset=".67" stop-color="#F0D500"/><stop offset="1" stop-color="#EDCF00"/></radialGradient></defs></svg>

apps/playground-web/src/icons/index.ts

@@ -0,0 +1,29 @@
+// sdks
+export { GoIcon } from "./sdks/GoIcon";
+export { PythonIcon } from "./sdks/PythonIcon";
+export { ReactIcon } from "./sdks/ReactIcon";
+export { SolidityIcon } from "./sdks/SolidityIcon";
+export { TypeScriptIcon } from "./sdks/TypeScriptIcon";
+export { UnityIcon } from "./sdks/UnityIcon";
+export { DotNetIcon } from "./sdks/DotNetIcon";
+// contracts
+export { ContractBuildIcon } from "./products/contracts/ContractBuildIcon";
+export { ContractDeployIcon } from "./products/contracts/ContractDeployIcon";
+export { ContractExploreIcon } from "./products/contracts/ContractExploreIcon";
+export { ContractInteractIcon } from "./products/contracts/ContractInteractIcon";
+export { ContractPublishIcon } from "./products/contracts/ContractPublishIcon";
+// infra
+export { InfraEngineIcon } from "./products/infra/InfraEngineIcon";
+export { InfraRPCIcon } from "./products/infra/InfraRPCIcon";
+export { InfraStorageIcon } from "./products/infra/InfraStorageIcon";
+// // payments
+export { PaymentsNFTCheckoutIcon } from "./products/payments/PaymentsNFTCheckoutIcon";
+export { PaymentsSponsoredIcon } from "./products/payments/PaymentsSponsoredIcon";
+export { PayIcon } from "./products/payments/PayIcon";
+// wallets
+export { WalletsAuthIcon } from "./products/wallets/WalletsAuthIcon";
+export { WalletsConnectIcon } from "./products/wallets/WalletsConnectIcon";
+export { WalletsInAppIcon } from "./products/wallets/WalletsInAppIcon";
+export { WalletsSmartIcon } from "./products/wallets/WalletsSmartIcon";
+// solutions
+export { GamingIcon } from "./solutions/GamingIcon";

apps/playground-web/src/icons/products/contracts/ContractBuildIcon.tsx

@@ -0,0 +1,86 @@
+export function ContractBuildIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<rect
+				x="7"
+				y="3"
+				width="10"
+				height="10"
+				rx="1.5"
+				fill="url(#paint0_linear_195_4064)"
+			/>
+			<g filter="url(#filter0_bi_195_4064)">
+				<rect
+					x="3"
+					y="11"
+					width="18"
+					height="10"
+					rx="1.5"
+					fill="#EBA4D2"
+					fillOpacity="0.8"
+				/>
+			</g>
+			<defs>
+				<filter
+					id="filter0_bi_195_4064"
+					x="1"
+					y="9"
+					width="22"
+					height="14"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+					<feComposite
+						in2="SourceAlpha"
+						operator="in"
+						result="effect1_backgroundBlur_195_4064"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_backgroundBlur_195_4064"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.05" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect2_innerShadow_195_4064"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_195_4064"
+					x1="3.1486"
+					y1="11.4658"
+					x2="16.0459"
+					y2="0.531421"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#F4009F" />
+					<stop offset="1" stopColor="#F856C8" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/contracts/ContractDeployIcon.tsx

@@ -0,0 +1,84 @@
+export function ContractDeployIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<g filter="url(#filter0_i_195_4030)">
+				<path
+					d="M4.96973 4.5C4.96973 3.67157 5.6413 3 6.46973 3H17.0755C17.9039 3 18.5755 3.67157 18.5755 4.5V19.5C18.5755 20.3284 17.9039 21 17.0755 21H6.46973C5.6413 21 4.96973 20.3284 4.96973 19.5V4.5Z"
+					fill="#EBA4D2"
+					fillOpacity="0.8"
+				/>
+			</g>
+			<path
+				d="M21.5778 13.6275C22.2445 14.0124 22.2445 14.9747 21.5778 15.3596L15.6488 18.7827C14.9822 19.1676 14.1488 18.6865 14.1488 17.9167L14.1488 11.0705C14.1488 10.3007 14.9822 9.81952 15.6488 10.2044L21.5778 13.6275Z"
+				fill="url(#paint0_linear_195_4030)"
+			/>
+			<path
+				d="M8.77258 7L14.7726 7.0001"
+				stroke="white"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+			/>
+			<path
+				d="M8.77258 10L11.7726 10.0001"
+				stroke="white"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+			/>
+			<defs>
+				<filter
+					id="filter0_i_195_4030"
+					x="4.96973"
+					y="3"
+					width="13.6058"
+					height="18.1"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="BackgroundImageFix"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.05" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect1_innerShadow_195_4030"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_195_4030"
+					x1="12.9991"
+					y1="3.95568"
+					x2="26.0167"
+					y2="19.3104"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#F4009F" />
+					<stop offset="1" stopColor="#F856C8" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/contracts/ContractExploreIcon.tsx

@@ -0,0 +1,85 @@
+export function ContractExploreIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<g clipPath="url(#clip0_195_3911)">
+				<path
+					d="M10.9709 11.527C11.4283 10.7348 12.5718 10.7348 13.0292 11.527L17.4763 19.2296C17.9337 20.0218 17.3619 21.0121 16.4471 21.0121H7.55296C6.63816 21.0121 6.06641 20.0218 6.52381 19.2296L10.9709 11.527Z"
+					fill="url(#paint0_linear_195_3911)"
+				/>
+				<g filter="url(#filter0_bi_195_3911)">
+					<circle
+						cx="12.0001"
+						cy="10.25"
+						r="7.25"
+						fill="#EBA4D2"
+						fillOpacity="0.8"
+					/>
+				</g>
+			</g>
+			<defs>
+				<filter
+					id="filter0_bi_195_3911"
+					x="2.75006"
+					y="1"
+					width="18.5"
+					height="18.5"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+					<feComposite
+						in2="SourceAlpha"
+						operator="in"
+						result="effect1_backgroundBlur_195_3911"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_backgroundBlur_195_3911"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.05" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect2_innerShadow_195_3911"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_195_3911"
+					x1="-1.29787"
+					y1="22.463"
+					x2="18.0785"
+					y2="6.03583"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#F4009F" />
+					<stop offset="1" stopColor="#F856C8" />
+				</linearGradient>
+				<clipPath id="clip0_195_3911">
+					<rect width="24" height="24" fill="white" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/contracts/ContractInteractIcon.tsx

@@ -0,0 +1,78 @@
+export function ContractInteractIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<path
+				d="M3.66284 8.02624V4.9941C3.66284 3.30429 5.62864 2.37603 6.93354 3.44965L19.6081 13.8777C20.0698 14.2576 20.3374 14.8242 20.3374 15.4221V18.8923C20.3374 20.6011 18.3329 21.5229 17.0356 20.4107L4.36111 9.54463C3.91791 9.16466 3.66284 8.61002 3.66284 8.02624Z"
+				fill="url(#paint0_linear_195_4132)"
+			/>
+			<g filter="url(#filter0_bi_195_4132)">
+				<path
+					d="M20.3372 8.02624V4.9941C20.3372 3.30429 18.3714 2.37603 17.0665 3.44965L4.39195 13.8777C3.93019 14.2576 3.66265 14.8242 3.66265 15.4221V18.8923C3.66265 20.6011 5.66708 21.5229 6.96439 20.4107L19.6389 9.54463C20.0821 9.16466 20.3372 8.61002 20.3372 8.02624Z"
+					fill="#EBA4D2"
+					fillOpacity="0.8"
+				/>
+			</g>
+			<defs>
+				<filter
+					id="filter0_bi_195_4132"
+					x="1.66265"
+					y="0.990295"
+					width="20.6745"
+					height="21.9059"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+					<feComposite
+						in2="SourceAlpha"
+						operator="in"
+						result="effect1_backgroundBlur_195_4132"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_backgroundBlur_195_4132"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.05" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect2_innerShadow_195_4132"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_195_4132"
+					x1="-2.75917"
+					y1="19.7919"
+					x2="23.7308"
+					y2="3.1356"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#F4009F" />
+					<stop offset="1" stopColor="#F856C8" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/contracts/ContractPublishIcon.tsx

@@ -0,0 +1,78 @@
+export function ContractPublishIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<path
+				d="M5.64838 4.5C5.64838 3.67157 6.31995 3 7.14838 3H16.8411C18.0294 3 18.7459 4.31597 18.101 5.31406L8.40826 20.315C7.59677 21.571 5.64838 20.9963 5.64838 19.501V4.5Z"
+				fill="url(#paint0_linear_195_3964)"
+			/>
+			<g filter="url(#filter0_bi_195_3964)">
+				<path
+					d="M18.3516 4.5C18.3516 3.67157 17.6801 3 16.8516 3H7.15889C5.97057 3 5.2541 4.31597 5.899 5.31406L15.5917 20.315C16.4032 21.571 18.3516 20.9963 18.3516 19.501V4.5Z"
+					fill="#EBA4D2"
+					fillOpacity="0.8"
+				/>
+			</g>
+			<defs>
+				<filter
+					id="filter0_bi_195_3964"
+					x="3.65643"
+					y="1"
+					width="16.6952"
+					height="22.0037"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+					<feComposite
+						in2="SourceAlpha"
+						operator="in"
+						result="effect1_backgroundBlur_195_3964"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_backgroundBlur_195_3964"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.05" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect2_innerShadow_195_3964"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_195_3964"
+					x1="0.758951"
+					y1="18.2415"
+					x2="21.4914"
+					y2="5.84722"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#F4009F" />
+					<stop offset="1" stopColor="#F856C8" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/infra/InfraEngineIcon.tsx

@@ -0,0 +1,82 @@
+export function InfraEngineIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M14.9523 11.9988C14.9523 11.9981 14.9518 11.9975 14.951 11.9975C14.9089 11.9992 14.8665 12 14.8239 12C13.0588 12 11.6278 10.5691 11.6278 8.8039C11.6278 7.03873 13.0588 5.60779 14.8239 5.60779C15.9762 5.60779 16.986 6.21756 17.5484 7.13202C17.695 7.37046 17.9908 7.48805 18.2658 7.43583C18.4057 7.40926 18.5501 7.39536 18.6978 7.39536C19.9694 7.39536 21.0001 8.42614 21.0001 9.69767C21.0001 10.9692 19.9694 12 18.6979 12C18.6979 12 18.6979 12 18.6979 12C18.6979 12 18.6979 12 18.6978 12H14.9536C14.9529 12 14.9523 11.9994 14.9523 11.9988Z"
+				fill="url(#paint0_linear_195_3943)"
+			/>
+			<g filter="url(#filter0_bi_195_3943)">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M6.18764 18.9251C6.17601 18.9253 6.16437 18.9253 6.15271 18.9253C4.41138 18.9253 2.99976 17.5137 2.99976 15.7724C2.99976 14.031 4.41138 12.6194 6.15271 12.6194C6.18301 12.6194 6.20685 12.5932 6.20379 12.563C6.18785 12.4057 6.1797 12.2463 6.1797 12.085C6.1797 9.37046 8.48997 7.16992 11.3398 7.16992C13.8545 7.16992 15.949 8.88324 16.407 11.1512C16.4682 11.4541 16.7615 11.6671 17.0697 11.6434C17.1634 11.6361 17.2581 11.6325 17.3536 11.6325C19.3675 11.6325 21 13.265 21 15.2789C21 17.2928 19.3675 18.9253 17.3536 18.9253C17.285 18.9253 17.2169 18.9234 17.1493 18.9197C17.1063 18.9234 17.0628 18.9253 17.0188 18.9253H6.20985C6.20243 18.9253 6.19503 18.9252 6.18764 18.9251Z"
+					fill="#BFB5FF"
+					fillOpacity="0.8"
+				/>
+			</g>
+			<defs>
+				<filter
+					id="filter0_bi_195_3943"
+					x="0.999756"
+					y="5.16992"
+					width="22.0003"
+					height="15.7554"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+					<feComposite
+						in2="SourceAlpha"
+						operator="in"
+						result="effect1_backgroundBlur_195_3943"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_backgroundBlur_195_3943"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.05" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect2_innerShadow_195_3943"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_195_3943"
+					x1="13.1976"
+					y1="10.8463"
+					x2="28.7967"
+					y2="2.94276"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#3F2DAF" />
+					<stop offset="1" stopColor="#917FFB" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/infra/InfraRPCIcon.tsx

@@ -0,0 +1,97 @@
+export function InfraRPCIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<rect
+				x="12.0015"
+				y="12.5007"
+				width="8.99854"
+				height="8.99854"
+				rx="1.5"
+				fill="url(#paint0_linear_195_3994)"
+			/>
+			<g filter="url(#filter0_i_195_3994)">
+				<path
+					d="M5 18C3.89543 18 3 17.1046 3 16L3 5C3 3.89543 3.89543 3 5 3L16 3C17.1046 3 18 3.89543 18 5L18 16C18 17.1046 17.1046 18 16 18L5 18Z"
+					fill="#BFB5FF"
+					fillOpacity="0.8"
+				/>
+			</g>
+			<path
+				d="M6.10608 9.20007C7.27946 8.04993 8.85702 7.4057 10.5001 7.4057C12.1431 7.4057 13.7207 8.04993 14.8941 9.20007"
+				stroke="white"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M8.30289 11.3971C8.88958 10.822 9.67836 10.4999 10.4999 10.4999C11.3214 10.4999 12.1102 10.822 12.6969 11.3971"
+				stroke="white"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M10.5 13.5941H10.5058"
+				stroke="white"
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<defs>
+				<filter
+					id="filter0_i_195_3994"
+					x="3"
+					y="3"
+					width="15"
+					height="15.2764"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="BackgroundImageFix"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.276368" />
+					<feGaussianBlur stdDeviation="0.138184" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect1_innerShadow_195_3994"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_195_3994"
+					x1="13.5087"
+					y1="19.8752"
+					x2="30.3227"
+					y2="14.0648"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#3F2DAF" />
+					<stop offset="1" stopColor="#917FFB" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/infra/InfraStorageIcon.tsx

@@ -0,0 +1,96 @@
+export function InfraStorageIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<circle
+				cx="7.60706"
+				cy="12.5001"
+				r="4.60706"
+				fill="url(#paint0_linear_195_4078)"
+			/>
+			<g filter="url(#filter0_bi_195_4078)">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M21 7.36067C20.9998 4.95232 18.2081 3 14.7644 3C11.3206 3 8.52887 4.95242 8.52887 7.36085C8.52887 7.36402 8.52887 7.36718 8.52888 7.37035V16.639C8.52888 16.6391 8.52888 16.6391 8.52888 16.6392C8.52888 19.0476 11.3206 21 14.7644 21C18.2082 21 21 19.0476 21 16.6392C21 16.6391 21 16.6391 21 16.639V7.36067H21Z"
+					fill="#BFB5FF"
+					fillOpacity="0.8"
+				/>
+			</g>
+			<path
+				d="M10.6782 9.802V9.802C13.1432 11.482 16.3855 11.482 18.8505 9.80197V9.80197"
+				stroke="white"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M10.6782 14.5669V14.5669C13.1432 16.2469 16.3855 16.2469 18.8505 14.5669V14.5669"
+				stroke="white"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<defs>
+				<filter
+					id="filter0_bi_195_4078"
+					x="6.52887"
+					y="1"
+					width="16.4711"
+					height="22"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+					<feComposite
+						in2="SourceAlpha"
+						operator="in"
+						result="effect1_backgroundBlur_195_4078"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_backgroundBlur_195_4078"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.05" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect2_innerShadow_195_4078"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_195_4078"
+					x1="4.5433"
+					y1="15.4442"
+					x2="21.7601"
+					y2="9.49462"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#3F2DAF" />
+					<stop offset="1" stopColor="#917FFB" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/payments/PayIcon.tsx

@@ -0,0 +1,84 @@
+export function PayIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<circle cx="15.9849" cy="16" r="5" fill="url(#paint0_linear_585_2)" />
+			<g filter="url(#filter0_bi_585_2)">
+				<path
+					d="M3 4.5C3 3.67157 3.67157 3 4.5 3H17.5C18.3284 3 19 3.67157 19 4.5V13.5C19 14.3284 18.3284 15 17.5 15H4.5C3.67157 15 3 14.3284 3 13.5V4.5Z"
+					fill="#B9DDFF"
+					fillOpacity="0.8"
+				/>
+			</g>
+			<rect
+				x="4.98955"
+				y="9.44861"
+				width="3.54886"
+				height="3.54886"
+				rx="1"
+				fill="white"
+			/>
+			<path d="M3.00316 5.99185H19" stroke="white" />
+			<defs>
+				<filter
+					id="filter0_bi_585_2"
+					x="1"
+					y="1"
+					width="20"
+					height="16"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+					<feComposite
+						in2="SourceAlpha"
+						operator="in"
+						result="effect1_backgroundBlur_585_2"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_backgroundBlur_585_2"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.05" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect2_innerShadow_585_2"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_585_2"
+					x1="19.003"
+					y1="15.1892"
+					x2="10.8494"
+					y2="17.6614"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#2567FF" />
+					<stop offset="1" stopColor="#22A7FF" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/payments/PaymentsNFTCheckoutIcon.tsx

@@ -0,0 +1,69 @@
+export function PaymentsNFTCheckoutIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<path
+				d="M15.1499 8.84222L15.1499 6.68768C15.1499 4.94804 13.7396 3.53778 12 3.53778V3.53778C10.2604 3.53778 8.8501 4.94804 8.8501 6.68768L8.8501 8.84222"
+				stroke="#03B29E"
+				strokeWidth="2"
+				strokeLinecap="round"
+			/>
+			<g filter="url(#filter0_bi_195_4013)">
+				<path
+					d="M4.91762 8.86385C4.98802 8.09138 5.63575 7.5 6.41143 7.5H17.5609C18.3356 7.5 18.9829 8.09 19.0545 8.86143L19.9822 18.8614C20.0638 19.7408 19.3718 20.5 18.4887 20.5H5.5C4.61782 20.5 3.92612 19.7424 4.00619 18.8638L4.91762 8.86385Z"
+					fill="#A7FFF5"
+					fillOpacity="0.8"
+				/>
+			</g>
+			<defs>
+				<filter
+					id="filter0_bi_195_4013"
+					x="1.99988"
+					y="5.5"
+					width="19.9889"
+					height="17"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+					<feComposite
+						in2="SourceAlpha"
+						operator="in"
+						result="effect1_backgroundBlur_195_4013"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_backgroundBlur_195_4013"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.1" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect2_innerShadow_195_4013"
+					/>
+				</filter>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/payments/PaymentsSponsoredIcon.tsx

@@ -0,0 +1,71 @@
+export function PaymentsSponsoredIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M6.78053 7.27741C7.24996 7.74684 7.88665 8.01057 8.55054 8.01057H11.0166H13.0562H15.5223C16.1862 8.01057 16.8229 7.74684 17.2923 7.27741C17.7618 6.80797 18.0255 6.17128 18.0255 5.5074C18.0255 4.84351 17.7618 4.20682 17.2923 3.73738C16.8229 3.26795 16.1862 3.00422 15.5223 3.00422C14.5564 2.98739 13.6099 3.45605 12.8062 4.34909C12.7047 4.46187 12.606 4.58075 12.5104 4.70541C12.2781 5.00833 11.7947 5.00833 11.5624 4.70541C11.4668 4.58075 11.3682 4.46187 11.2667 4.34909C10.463 3.45605 9.51645 2.98739 8.55054 3.00422C7.88665 3.00422 7.24996 3.26795 6.78053 3.73738C6.31109 4.20682 6.04736 4.84351 6.04736 5.5074C6.04736 6.17128 6.31109 6.80797 6.78053 7.27741Z"
+				fill="#03B39E"
+			/>
+			<g filter="url(#filter0_bi_195_4098)">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M5.03151 6.9884C4.2618 6.9884 3.63782 7.61238 3.63782 8.3821V10.2403C3.63782 11.0101 4.2618 11.634 5.03151 11.634H5.46727V18.6025C5.46727 19.3722 6.09125 19.9962 6.86096 19.9962H17.1395C17.9092 19.9962 18.5332 19.3722 18.5332 18.6025V11.634H18.9685C19.7382 11.634 20.3621 11.0101 20.3621 10.2403V8.3821C20.3621 7.61238 19.7382 6.9884 18.9685 6.9884H5.03151Z"
+					fill="#A7FFF5"
+					fillOpacity="0.8"
+				/>
+			</g>
+			<defs>
+				<filter
+					id="filter0_bi_195_4098"
+					x="1.63782"
+					y="4.9884"
+					width="20.7243"
+					height="17.0078"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+					<feComposite
+						in2="SourceAlpha"
+						operator="in"
+						result="effect1_backgroundBlur_195_4098"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_backgroundBlur_195_4098"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.05" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect2_innerShadow_195_4098"
+					/>
+				</filter>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/wallets/WalletsAuthIcon.tsx

@@ -0,0 +1,77 @@
+export function WalletsAuthIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<g clipPath="url(#clip0_195_4118)">
+				<path
+					d="M10.2679 4.7887C11.0377 3.45536 12.9622 3.45536 13.732 4.7887L20.7756 16.9886C21.5454 18.3219 20.5832 19.9886 19.0436 19.9886H4.95635C3.41675 19.9886 2.4545 18.3219 3.2243 16.9886L10.2679 4.7887Z"
+					fill="url(#paint0_linear_195_4118)"
+				/>
+				<g filter="url(#filter0_i_195_4118)">
+					<path
+						d="M11.1341 13.3799C11.519 12.7132 12.4812 12.7132 12.8661 13.3799L15.811 18.4806C16.1959 19.1473 15.7148 19.9806 14.945 19.9806H9.05519C8.28539 19.9806 7.80426 19.1473 8.18916 18.4806L11.1341 13.3799Z"
+						fill="#B9DDFF"
+						fillOpacity="0.8"
+					/>
+				</g>
+			</g>
+			<defs>
+				<filter
+					id="filter0_i_195_4118"
+					x="8.0537"
+					y="12.8799"
+					width="7.89278"
+					height="7.20072"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="BackgroundImageFix"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.05" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect1_innerShadow_195_4118"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_195_4118"
+					x1="3.35198"
+					y1="20.82"
+					x2="21.8618"
+					y2="12.4792"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#2567FF" />
+					<stop offset="1" stopColor="#22A7FF" />
+				</linearGradient>
+				<clipPath id="clip0_195_4118">
+					<rect width="24" height="24" fill="white" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/wallets/WalletsConnectIcon.tsx

@@ -0,0 +1,90 @@
+export function WalletsConnectIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<rect
+				x="3"
+				y="17.9988"
+				width="14.9988"
+				height="10.6499"
+				rx="2"
+				transform="rotate(-90 3 17.9988)"
+				fill="url(#paint0_linear_195_4047)"
+			/>
+			<g filter="url(#filter0_bi_195_4047)">
+				<path
+					d="M3 9C3 7.89543 3.89543 7 5 7H19C20.1046 7 21 7.89543 21 9V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V9Z"
+					fill="#B9DDFF"
+					fillOpacity="0.8"
+				/>
+			</g>
+			<path
+				d="M18.3004 12.6995V12.6995C17.5822 13.4177 17.5822 14.5822 18.3004 15.3004V15.3004"
+				stroke="white"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<defs>
+				<filter
+					id="filter0_bi_195_4047"
+					x="1"
+					y="5"
+					width="22"
+					height="18"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+					<feComposite
+						in2="SourceAlpha"
+						operator="in"
+						result="effect1_backgroundBlur_195_4047"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_backgroundBlur_195_4047"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.05" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect2_innerShadow_195_4047"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_195_4047"
+					x1="15.026"
+					y1="22.4602"
+					x2="3.73188"
+					y2="27.2831"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#2567FF" />
+					<stop offset="1" stopColor="#22A7FF" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/wallets/WalletsInAppIcon.tsx

@@ -0,0 +1,89 @@
+export function WalletsInAppIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<rect
+				x="21.5427"
+				y="11.2789"
+				width="16"
+				height="10"
+				rx="1.5"
+				transform="rotate(152.102 21.5427 11.2789)"
+				fill="url(#paint0_linear_327_3)"
+			/>
+			<g filter="url(#filter0_bi_327_3)">
+				<path
+					d="M3 10.9371C3 9.83256 3.89543 8.93713 5 8.93713H17C18.1046 8.93713 19 9.83256 19 10.9371V18.9371C19 20.0417 18.1046 20.9371 17 20.9371H5C3.89543 20.9371 3 20.0417 3 18.9371V10.9371Z"
+					fill="#B9DDFF"
+					fillOpacity="0.8"
+				/>
+			</g>
+			<path
+				d="M4.98647 12H8.10913C8.69614 12 9.24374 12.2955 9.56604 12.7861V12.7861C10.2546 13.8342 11.7913 13.8342 12.4799 12.7861V12.7861C12.8022 12.2955 13.3498 12 13.9368 12H17.0142"
+				stroke="white"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<defs>
+				<filter
+					id="filter0_bi_327_3"
+					x="1"
+					y="6.93713"
+					width="20"
+					height="16"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+					<feComposite
+						in2="SourceAlpha"
+						operator="in"
+						result="effect1_backgroundBlur_327_3"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_backgroundBlur_327_3"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.05" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect2_innerShadow_327_3"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_327_3"
+					x1="34.3715"
+					y1="15.4681"
+					x2="22.8403"
+					y2="21.0623"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#2567FF" />
+					<stop offset="1" stopColor="#22A7FF" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/products/wallets/WalletsSmartIcon.tsx

@@ -0,0 +1,91 @@
+export function WalletsSmartIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<rect
+				x="11.6693"
+				y="16.9566"
+				width="13.4583"
+				height="9.33069"
+				rx="1.49536"
+				transform="rotate(-90 11.6693 16.9566)"
+				fill="url(#paint0_linear_195_3925)"
+			/>
+			<g filter="url(#filter0_bi_195_3925)">
+				<path
+					d="M8.18321 21.2503C8.7189 21.581 9.37914 21.581 9.91484 21.2503C11.5871 20.2182 15.098 17.6396 15.098 14.1832V10.2763C15.098 9.44263 14.5809 8.69639 13.8003 8.40366L9.75127 6.88528C9.2985 6.71549 8.79955 6.71549 8.34678 6.88528L4.29775 8.40366C3.51715 8.69639 3 9.44263 3 10.2763V14.1832C3 17.6396 6.51095 20.2182 8.18321 21.2503Z"
+					fill="#B9DDFF"
+					fillOpacity="0.8"
+				/>
+			</g>
+			<path
+				d="M9.04903 14.4024C9.98975 14.4024 10.7524 13.6398 10.7524 12.6991C10.7524 11.7583 9.98975 10.9957 9.04903 10.9957C8.10831 10.9957 7.3457 11.7583 7.3457 12.6991C7.3457 13.6398 8.10831 14.4024 9.04903 14.4024Z"
+				fill="white"
+			/>
+			<path
+				d="M9.04906 13.6652C9.3792 13.6652 9.6472 13.9415 9.6472 14.2828V16.7528C9.6472 17.0937 9.37954 17.3704 9.04906 17.3704C8.71893 17.3704 8.45093 17.094 8.45093 16.7528V14.2828C8.45093 13.9419 8.71859 13.6652 9.04906 13.6652Z"
+				fill="white"
+			/>
+			<defs>
+				<filter
+					id="filter0_bi_195_3925"
+					x="1"
+					y="4.75793"
+					width="16.098"
+					height="18.7404"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+					<feComposite
+						in2="SourceAlpha"
+						operator="in"
+						result="effect1_backgroundBlur_195_3925"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_backgroundBlur_195_3925"
+						result="shape"
+					/>
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset dy="0.2" />
+					<feGaussianBlur stdDeviation="0.05" />
+					<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="shape"
+						result="effect2_innerShadow_195_3925"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_195_3925"
+					x1="22.4602"
+					y1="20.8654"
+					x2="12.4019"
+					y2="25.2643"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#2567FF" />
+					<stop offset="1" stopColor="#22A7FF" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/sdks/DotNetIcon.tsx

@@ -0,0 +1,31 @@
+export function DotNetIcon(props: { className?: string }) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			x="0px"
+			y="0px"
+			width="24"
+			height="24"
+			viewBox="0 0 456 456"
+			className={props.className}
+		>
+			<rect width="456" height="456" fill="#512BD4" />
+			<path
+				d="M81.2738 291.333C78.0496 291.333 75.309 290.259 73.052 288.11C70.795 285.906 69.6665 283.289 69.6665 280.259C69.6665 277.173 70.795 274.529 73.052 272.325C75.309 270.121 78.0496 269.019 81.2738 269.019C84.5518 269.019 87.3193 270.121 89.5763 272.325C91.887 274.529 93.0424 277.173 93.0424 280.259C93.0424 283.289 91.887 285.906 89.5763 288.11C87.3193 290.259 84.5518 291.333 81.2738 291.333Z"
+				fill="white"
+			/>
+			<path
+				d="M210.167 289.515H189.209L133.994 202.406C132.597 200.202 131.441 197.915 130.528 195.546H130.044C130.474 198.081 130.689 203.508 130.689 211.827V289.515H112.149V171H134.477L187.839 256.043C190.096 259.57 191.547 261.994 192.192 263.316H192.514C191.977 260.176 191.708 254.859 191.708 247.365V171H210.167V289.515Z"
+				fill="white"
+			/>
+			<path
+				d="M300.449 289.515H235.561V171H297.87V187.695H254.746V221.249H294.485V237.861H254.746V272.903H300.449V289.515Z"
+				fill="white"
+			/>
+			<path
+				d="M392.667 187.695H359.457V289.515H340.272V187.695H307.143V171H392.667V187.695Z"
+				fill="white"
+			/>
+		</svg>
+	);
+}

apps/playground-web/src/icons/sdks/GoIcon.tsx

@@ -0,0 +1,18 @@
+export function GoIcon(props: { className?: string }) {
+	return (
+		<svg
+			height="24"
+			viewBox="16.8 16.1 72.9 27.6"
+			width="24"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<switch>
+				<g fill="#00acd7">
+					<path d="m22.3 24.7c-.1 0-.2-.1-.1-.2l.7-1c.1-.1.2-.2.4-.2h12.6c.1 0 .2.1.1.2l-.6.9c-.1.1-.2.2-.4.2zm-5.3 3.2c-.1 0-.2-.1-.1-.2l.7-1c.1-.1.2-.2.4-.2h16.1c.1 0 .2.1.2.2l-.3 1c0 .1-.2.2-.3.2zm8.5 3.3c-.1 0-.2-.1-.1-.2l.5-.9c.1-.1.2-.2.4-.2h7c.1 0 .2.1.2.2l-.1.8c0 .1-.1.2-.2.2zm36.6-7.2-5.9 1.5c-.5.1-.6.2-1-.4-.5-.6-.9-1-1.7-1.3-2.2-1.1-4.4-.8-6.4.5-2.4 1.5-3.6 3.8-3.6 6.7 0 2.8 2 5.1 4.8 5.5 2.4.3 4.4-.5 6-2.3.3-.4.6-.8 1-1.3h-6.8c-.7 0-.9-.5-.7-1.1.5-1.1 1.3-2.9 1.8-3.8.1-.2.4-.6.9-.6h12.8c-.1 1-.1 1.9-.2 2.9-.4 2.5-1.3 4.9-2.9 6.9-2.5 3.3-5.8 5.4-10 6-3.5.5-6.7-.2-9.5-2.3-2.6-2-4.1-4.6-4.5-7.8-.5-3.8.7-7.3 3-10.3 2.5-3.3 5.8-5.4 9.9-6.1 3.3-.6 6.5-.2 9.3 1.7 1.9 1.2 3.2 2.9 4.1 5 .1.4 0 .5-.4.6z" />
+					<path d="m73.7 43.5c-3.2-.1-6.1-1-8.6-3.1-2.1-1.8-3.4-4.1-3.8-6.8-.6-4 .5-7.5 2.9-10.6 2.6-3.4 5.7-5.1 9.9-5.9 3.6-.6 7-.3 10 1.8 2.8 1.9 4.5 4.5 5 7.9.6 4.8-.8 8.6-4 11.9-2.3 2.4-5.2 3.8-8.4 4.5-1.1.2-2.1.2-3 .3zm8.4-14.2c0-.5 0-.8-.1-1.2-.6-3.5-3.8-5.5-7.2-4.7-3.3.7-5.4 2.8-6.2 6.1-.6 2.7.7 5.5 3.2 6.7 1.9.8 3.9.7 5.7-.2 2.9-1.4 4.4-3.7 4.6-6.7z" />
+				</g>
+			</switch>
+		</svg>
+	);
+}

apps/playground-web/src/icons/sdks/PythonIcon.tsx

@@ -0,0 +1,22 @@
+export function PythonIcon(props: { className?: string }) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			x="0px"
+			y="0px"
+			width="24"
+			height="24"
+			viewBox="0 0 48 48"
+			className={props.className}
+		>
+			<path
+				fill="#0277BD"
+				d="M24.047,5c-1.555,0.005-2.633,0.142-3.936,0.367c-3.848,0.67-4.549,2.077-4.549,4.67V14h9v2H15.22h-4.35c-2.636,0-4.943,1.242-5.674,4.219c-0.826,3.417-0.863,5.557,0,9.125C5.851,32.005,7.294,34,9.931,34h3.632v-5.104c0-2.966,2.686-5.896,5.764-5.896h7.236c2.523,0,5-1.862,5-4.377v-8.586c0-2.439-1.759-4.263-4.218-4.672C27.406,5.359,25.589,4.994,24.047,5z M19.063,9c0.821,0,1.5,0.677,1.5,1.502c0,0.833-0.679,1.498-1.5,1.498c-0.837,0-1.5-0.664-1.5-1.498C17.563,9.68,18.226,9,19.063,9z"
+			></path>
+			<path
+				fill="#FFC107"
+				d="M23.078,43c1.555-0.005,2.633-0.142,3.936-0.367c3.848-0.67,4.549-2.077,4.549-4.67V34h-9v-2h9.343h4.35c2.636,0,4.943-1.242,5.674-4.219c0.826-3.417,0.863-5.557,0-9.125C41.274,15.995,39.831,14,37.194,14h-3.632v5.104c0,2.966-2.686,5.896-5.764,5.896h-7.236c-2.523,0-5,1.862-5,4.377v8.586c0,2.439,1.759,4.263,4.218,4.672C19.719,42.641,21.536,43.006,23.078,43z M28.063,39c-0.821,0-1.5-0.677-1.5-1.502c0-0.833,0.679-1.498,1.5-1.498c0.837,0,1.5,0.664,1.5,1.498C29.563,38.32,28.899,39,28.063,39z"
+			></path>
+		</svg>
+	);
+}

apps/playground-web/src/icons/sdks/ReactIcon.tsx

@@ -0,0 +1,21 @@
+export function ReactIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 21 18"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<path
+				d="M20.2926 9.00206C20.2926 7.66308 18.6091 6.39414 16.0281 5.60723C16.6237 2.98695 16.359 0.902266 15.1925 0.234836C14.9237 0.0782787 14.6093 0.00411987 14.266 0.00411987V0.922866C14.4563 0.922866 14.6093 0.959945 14.7376 1.02998C15.3001 1.35134 15.5441 2.57496 15.3539 4.14878C15.3084 4.53605 15.2339 4.94392 15.1429 5.36004C14.3322 5.16228 13.447 5.00984 12.5164 4.91096C11.958 4.14878 11.3789 3.45663 10.7957 2.851C12.1441 1.60265 13.4098 0.918746 14.2702 0.918746V0C13.1327 0 11.6436 0.807508 10.138 2.20829C8.63241 0.815748 7.14335 0.0164798 6.00588 0.0164798V0.935225C6.86208 0.935225 8.13192 1.61501 9.48035 2.85512C8.90127 3.46075 8.32219 4.14878 7.77207 4.91096C6.83727 5.00984 5.9521 5.16228 5.14139 5.36416C5.04626 4.95216 4.97594 4.55253 4.92631 4.16937C4.7319 2.59556 4.97181 1.37194 5.5302 1.04646C5.65429 0.972305 5.81561 0.939345 6.00588 0.939345V0.0205997C5.65843 0.0205997 5.34407 0.0947585 5.07108 0.251316C3.90878 0.918746 3.6482 2.99931 4.24796 5.61135C1.67519 6.40238 0 7.6672 0 9.00206C0 10.341 1.68346 11.61 4.2645 12.3969C3.66888 15.0172 3.9336 17.1019 5.10003 17.7693C5.36889 17.9258 5.68325 18 6.03069 18C7.16817 18 8.65723 17.1925 10.1628 15.7917C11.6684 17.1843 13.1575 17.9835 14.295 17.9835C14.6424 17.9835 14.9568 17.9094 15.2298 17.7528C16.3921 17.0854 16.6527 15.0048 16.0529 12.3928C18.6174 11.6059 20.2926 10.3369 20.2926 9.00206ZM14.9071 6.25406C14.7541 6.78553 14.5638 7.33348 14.3487 7.88144C14.1792 7.55184 14.0013 7.22225 13.8069 6.89265C13.6166 6.56306 13.4139 6.2417 13.2113 5.92859C13.7986 6.01511 14.3653 6.12222 14.9071 6.25406ZM13.0127 10.6418C12.6901 11.198 12.3592 11.7253 12.0159 12.2156C11.3996 12.2692 10.775 12.298 10.1463 12.298C9.52171 12.298 8.89713 12.2692 8.28496 12.2197C7.94165 11.7295 7.60661 11.2062 7.28398 10.6542C6.96963 10.1144 6.68422 9.56649 6.42364 9.01442C6.68009 8.46235 6.96963 7.91028 7.27985 7.37056C7.60248 6.81437 7.93338 6.28702 8.27669 5.79675C8.893 5.74319 9.51758 5.71435 10.1463 5.71435C10.7709 5.71435 11.3954 5.74319 12.0076 5.79263C12.3509 6.2829 12.686 6.80613 13.0086 7.35821C13.323 7.89792 13.6084 8.44587 13.8689 8.99794C13.6084 9.55001 13.3229 10.1021 13.0127 10.6418ZM14.3487 10.1062C14.5721 10.6583 14.7624 11.2103 14.9196 11.7459C14.3777 11.8778 13.8069 11.989 13.2154 12.0755C13.4181 11.7583 13.6208 11.4328 13.811 11.0991C14.0013 10.7695 14.1792 10.4358 14.3487 10.1062ZM10.1546 14.5022C9.76989 14.1067 9.38521 13.6658 9.00468 13.1838C9.37694 13.2003 9.75748 13.2126 10.1422 13.2126C10.531 13.2126 10.9156 13.2044 11.292 13.1838C10.9198 13.6658 10.5351 14.1067 10.1546 14.5022ZM7.07717 12.0755C6.48982 11.989 5.92315 11.8819 5.3813 11.7501C5.53434 11.2186 5.72461 10.6706 5.93969 10.1227C6.10928 10.4523 6.28714 10.7819 6.48155 11.1115C6.67595 11.4411 6.87449 11.7624 7.07717 12.0755ZM10.1339 3.50195C10.5186 3.89746 10.9032 4.33829 11.2838 4.82032C10.9115 4.80384 10.531 4.79149 10.1463 4.79149C9.75748 4.79149 9.37281 4.79973 8.9964 4.82032C9.36867 4.33829 9.75334 3.89746 10.1339 3.50195ZM7.07304 5.92859C6.87036 6.24582 6.66768 6.5713 6.47741 6.90501C6.28714 7.23461 6.10928 7.5642 5.93969 7.8938C5.71634 7.34173 5.52607 6.78965 5.36889 6.25406C5.91074 6.12634 6.48155 6.01511 7.07304 5.92859ZM3.3297 11.0867C1.86546 10.4646 0.918254 9.64889 0.918254 9.00206C0.918254 8.35523 1.86546 7.53536 3.3297 6.91737C3.68542 6.76493 4.07423 6.62898 4.47545 6.50126C4.71122 7.30877 5.02144 8.14923 5.40611 9.0103C5.02558 9.86725 4.71949 10.7036 4.48786 11.507C4.07837 11.3793 3.68956 11.2392 3.3297 11.0867ZM5.55502 16.9741C4.99249 16.6528 4.74845 15.4292 4.93872 13.8553C4.98422 13.4681 5.05867 13.0602 5.14967 12.6441C5.96038 12.8418 6.84554 12.9943 7.7762 13.0932C8.3346 13.8553 8.91368 14.5475 9.49689 15.1531C8.14847 16.4015 6.88277 17.0854 6.02242 17.0854C5.83629 17.0813 5.67911 17.0442 5.55502 16.9741ZM15.3663 13.8347C15.5607 15.4086 15.3208 16.6322 14.7624 16.9577C14.6383 17.0318 14.477 17.0648 14.2867 17.0648C13.4305 17.0648 12.1607 16.385 10.8122 15.1449C11.3913 14.5393 11.9704 13.8512 12.5205 13.089C13.4553 12.9902 14.3405 12.8377 15.1512 12.6358C15.2463 13.052 15.3208 13.4516 15.3663 13.8347ZM16.9587 11.0867C16.603 11.2392 16.2142 11.3751 15.813 11.5029C15.5772 10.6954 15.267 9.85489 14.8823 8.99382C15.2629 8.13687 15.5689 7.30053 15.8006 6.49714C16.2101 6.62486 16.5989 6.76493 16.9629 6.91737C18.4271 7.53948 19.3743 8.35523 19.3743 9.00206C19.3702 9.64889 18.423 10.4688 16.9587 11.0867Z"
+				fill="#61DAFB"
+			/>
+			<path
+				d="M10.1421 10.8849C11.1861 10.8849 12.0324 10.0419 12.0324 9.00207C12.0324 7.96223 11.1861 7.11926 10.1421 7.11926C9.09814 7.11926 8.25183 7.96223 8.25183 9.00207C8.25183 10.0419 9.09814 10.8849 10.1421 10.8849Z"
+				fill="#61DAFB"
+			/>
+		</svg>
+	);
+}

apps/playground-web/src/icons/sdks/SolidityIcon.tsx

@@ -0,0 +1,43 @@
+export function SolidityIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<path
+				opacity="0.45"
+				d="M15.2398 3L12.3456 8.18978H6.56122L9.45343 3H15.2398Z"
+				fill="black"
+			/>
+			<path
+				opacity="0.6"
+				d="M12.3462 8.18978H18.1326L15.2404 3H9.45404L12.3462 8.18978Z"
+				fill="#DDDDDD"
+			/>
+			<path
+				opacity="0.8"
+				d="M9.4541 13.3139L12.3469 8.15793L9.4541 3L6.56122 8.15793L9.4541 13.3139Z"
+				fill="#DDDDDD"
+			/>
+			<path
+				opacity="0.45"
+				d="M9.45404 21L12.3476 15.8759H18.1326L15.2391 21H9.45404Z"
+				fill="black"
+			/>
+			<path
+				opacity="0.6"
+				d="M12.3476 15.8759H6.56122L9.4534 21H15.2398L12.3476 15.8759Z"
+				fill="#DDDDDD"
+			/>
+			<path
+				opacity="0.8"
+				d="M15.2388 10.7518L12.3469 15.8749L15.2388 21L18.1326 15.8749L15.2388 10.7518Z"
+				fill="#DDDDDD"
+			/>
+		</svg>
+	);
+}

apps/playground-web/src/icons/sdks/TypeScriptIcon.tsx

@@ -0,0 +1,23 @@
+export function TypeScriptIcon(props: { className?: string }) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			x="0px"
+			y="0px"
+			width="24"
+			height="24"
+			viewBox="0 0 48 48"
+			className={props.className}
+		>
+			<rect width="36" height="36" x="6" y="6" fill="#1976d2"></rect>
+			<polygon
+				fill="#fff"
+				points="27.49,22 14.227,22 14.227,25.264 18.984,25.264 18.984,40 22.753,40 22.753,25.264 27.49,25.264"
+			></polygon>
+			<path
+				fill="#fff"
+				d="M39.194,26.084c0,0-1.787-1.192-3.807-1.192s-2.747,0.96-2.747,1.986 c0,2.648,7.381,2.383,7.381,7.712c0,8.209-11.254,4.568-11.254,4.568V35.22c0,0,2.152,1.622,4.733,1.622s2.483-1.688,2.483-1.92 c0-2.449-7.315-2.449-7.315-7.878c0-7.381,10.658-4.469,10.658-4.469L39.194,26.084z"
+			></path>
+		</svg>
+	);
+}

apps/playground-web/src/icons/sdks/UnityIcon.tsx

@@ -0,0 +1,18 @@
+export function UnityIcon(props: { className?: string }) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			x="0px"
+			y="0px"
+			width="24"
+			height="24"
+			viewBox="0 0 48 48"
+			className={props.className}
+		>
+			<path
+				fill="#ccc"
+				d="M36.272,36.185l-7.243-12.184l7.243-12.221l3.502,12.221L36.272,36.185z M20.126,34.994l-9.115-8.991	H25.52l7.254,12.153L20.126,34.994z M20.126,12.934l12.611-3.162l-7.254,12.231H10.975L20.126,12.934z M38.653,3.782L22.172,8.061	l-2.455,4.204l-4.947-0.037L2.75,24.001l12.019,11.737l4.948-0.037l2.455,4.204l16.481,4.315l4.426-16.176l-2.478-4.04l2.477-4.047	L38.653,3.782z"
+			></path>
+		</svg>
+	);
+}

apps/playground-web/src/icons/solutions/GamingIcon.tsx

@@ -0,0 +1,32 @@
+export function GamingIcon(props: { className?: string }) {
+	return (
+		<svg
+			width="25"
+			height="24"
+			viewBox="0 0 25 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={props.className}
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M3.96889 8.07633C4.41321 5.71251 6.47761 4 8.88283 4H16.9871C19.3902 4 21.4534 5.70959 21.9 8.07085L23.299 15.4679C23.7357 17.7773 21.9647 19.9146 19.6144 19.9146C18.4011 19.9146 17.2627 19.3275 16.5592 18.3389L15.8743 17.3765C15.6867 17.1129 15.3831 16.9563 15.0595 16.9563L10.7919 16.9565C10.4725 16.9565 10.1722 17.1091 9.98401 17.3672L9.22096 18.4134C8.53547 19.3532 7.44943 19.9178 6.28637 19.939C3.93166 19.982 2.13143 17.8516 2.56649 15.5371L3.96889 8.07633ZM8.88283 6C7.4397 6 6.20106 7.0275 5.93446 8.4458L4.53207 15.9065C4.33116 16.9754 5.16251 17.9592 6.24991 17.9394C6.78702 17.9296 7.28855 17.6688 7.6051 17.2348L8.36816 16.1887C8.93287 15.4144 9.83349 14.9566 10.7918 14.9565L15.0594 14.9563C16.0302 14.9563 16.941 15.426 17.5038 16.2169L18.1887 17.1793C18.517 17.6406 19.0482 17.9146 19.6144 17.9146C20.7112 17.9146 21.5376 16.9172 21.3338 15.8396L19.9348 8.44251C19.6669 7.02575 18.429 6 16.9871 6H8.88283ZM8.18308 10.25V9H9.68308V10.25H10.9331V11.75H9.68308V13H8.18308V11.75H6.93308V10.25H8.18308ZM18.9331 10C18.9331 10.5523 18.4854 11 17.9331 11C17.3808 11 16.9331 10.5523 16.9331 10C16.9331 9.44772 17.3808 9 17.9331 9C18.4854 9 18.9331 9.44772 18.9331 10ZM15.9331 13C16.4854 13 16.9331 12.5523 16.9331 12C16.9331 11.4477 16.4854 11 15.9331 11C15.3808 11 14.9331 11.4477 14.9331 12C14.9331 12.5523 15.3808 13 15.9331 13Z"
+				fill="url(#paint0_linear_409_75)"
+			/>
+			<defs>
+				<linearGradient
+					id="paint0_linear_409_75"
+					x1="21.8754"
+					y1="-3.56284"
+					x2="1.29542"
+					y2="36.982"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="white" />
+					<stop offset="1" stopColor="white" stopOpacity="0" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

apps/playground-web/src/icons/thirdweb.tsx

@@ -0,0 +1,68 @@
+export function ThirdwebIcon(props: { className?: string }) {
+  return (
+    <svg viewBox="0 0 516 321" fill="none" className={props.className}>
+      <title>thirdweb</title>
+      <g clipPath="url(#clip0_3:35)">
+        <path
+          d="M1.40497 27.0011C-3.73633 14.022 5.84519 0 19.8669 0H106.919C115.098 0 122.342 4.86715 125.381 12.3996L194.671 185.299C196.541 189.935 196.541 195.149 194.671 199.901L151.087 308.484C144.427 325.056 120.823 325.056 114.163 308.484L1.40497 27.0011Z"
+          fill="url(#paint0_linear_3:35)"
+        />
+        <path
+          d="M169.547 26.4217C164.873 13.5585 174.454 0 188.242 0H264.077C272.49 0 279.968 5.2148 282.772 12.9791L345.753 185.879C347.272 190.166 347.272 194.918 345.753 199.321L307.894 303.27C301.585 320.652 276.813 320.652 270.503 303.27L169.547 26.4217Z"
+          fill="url(#paint1_linear_3:35)"
+        />
+        <path
+          d="M321.331 27.0011C316.19 14.022 325.771 0 339.793 0H426.845C435.024 0 442.269 4.86715 445.307 12.3996L514.597 185.299C516.467 189.935 516.467 195.149 514.597 199.901L471.013 308.484C464.353 325.056 440.75 325.056 434.089 308.484L321.331 27.0011Z"
+          fill="url(#paint2_linear_3:35)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_3:35"
+          x1="7.40492"
+          y1="55.24"
+          x2="260.485"
+          y2="164.437"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F213A4"></stop>
+          <stop offset="0.1517" stopColor="#E011A7"></stop>
+          <stop offset="0.4554" stopColor="#B20DAF"></stop>
+          <stop offset="0.8789" stopColor="#6806BB"></stop>
+          <stop offset="1" stopColor="#5204BF"></stop>
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_3:35"
+          x1="175.093"
+          y1="54.447"
+          x2="410.968"
+          y2="148.471"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F213A4"></stop>
+          <stop offset="0.1517" stopColor="#E011A7"></stop>
+          <stop offset="0.4554" stopColor="#B20DAF"></stop>
+          <stop offset="0.8789" stopColor="#6806BB"></stop>
+          <stop offset="1" stopColor="#5204BF"></stop>
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_3:35"
+          x1="327.331"
+          y1="55.24"
+          x2="580.411"
+          y2="164.437"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F213A4"></stop>
+          <stop offset="0.1517" stopColor="#E011A7"></stop>
+          <stop offset="0.4554" stopColor="#B20DAF"></stop>
+          <stop offset="0.8789" stopColor="#6806BB"></stop>
+          <stop offset="1" stopColor="#5204BF"></stop>
+        </linearGradient>
+        <clipPath id="clip0_3:35">
+          <rect width="516" height="321" fill="white"></rect>
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}