Version Packages (#3352)

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

.changeset/config.json

@@ -7,24 +7,19 @@
     }
   ],
   "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",
   "updateInternalDependencies": "patch",
   "ignore": [
-    "e2e-cra-5",
-    "e2e-next-13",
-    "e2e-vite-3",
     "bundlers-esbuild",
     "bundlers-vite",
     "bundlers-webpack",
     "bundlers-swc",
     "runtimes-node-commonjs",
-    "runtimes-node-module"
+    "runtimes-node-module",
+    "playground-web"
   ],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always",

.github/CODEOWNERS

@@ -2,28 +2,52 @@
 
 # Platform team owns everything by default
 
-* @thirdweb-dev/platform
+- @jnsdls @joaquim-verges @MananTank @gregfromstl
 
-# Devrel owns all markdown files (README etc.)
+# legacy packages
 
-*.md @thirdweb-dev/devrel
-.changeset/
+legacy_packages/auth/ @jnsdls
+legacy_packages/chains/ @jnsdls
+legacy_packages/cli/ @jnsdls
+legacy_packages/contracts-js/ @jnsdls
+legacy_packages/crypto/ @jnsdls
+legacy_packages/generated-abis/ @jnsdls
+legacy_packages/merkletree/ @jnsdls
+legacy_packages/pay/ @jnsdls
+legacy_packages/payments/ @jnsdls
+legacy_packages/react/ @MananTank @jnsdls
+legacy_packages/react-core/ @MananTank @jnsdls
+legacy_packages/react-native/ @jnsdls
+legacy_packages/react-native-compat/ @jnsdls
+legacy_packages/sdk/ @joaquim-verges @jnsdls
+legacy_packages/storage/ @jnsdls
+legacy_packages/wallets/ @MananTank @jnsdls
 
-# Shared ownership of the react and react-core packages
+# legacy e2e
 
-packages/react/ @thirdweb-dev/product @thirdweb-dev/platform
-packages/react-core/ @thirdweb-dev/product @thirdweb-dev/platform
+legacy_e2e/ @jnsdls
 
-# Shared ownership of the CLI
+# packages
 
-packages/cli/ @thirdweb-dev/product @thirdweb-dev/platform
+## specific thirdweb pieces
 
-# Chains is owned specifically by jonas for now
+packages/thirdweb/src/react/ @MananTank
+packages/thirdweb/src/reactive/ @MananTank
+packages/thirdweb/src/gas/ @joaquim-verges
+packages/thirdweb/src/pay/ @MananTank @IDubuque
 
-packages/chains/ @jnsdls
+packages/typedoc-gen/ @MananTank
 
-# .github folder + .changeset + turbo config is owned by joaquim and jonas for now
+# owned by phil for now
 
-.github/ @jnsdls @joaquim-verges
-.changeset/config.json @jnsdls @joaquim-verges
-turbo.json @joaquim-verges @jnsdls
+packages/service-utils/ @arcoraven
+packages/eslint-config-thirdweb/ @jnsdls
+packages/tw-tsconfig/ @jnsdls
+packages/unity-js-bridge/ @joaquim-verges @0xFirekeeper
+
+# .github folder + .changeset + turbo config is owned by jonas for now
+
+scripts/ @jnsdls
+.github/ @jnsdls
+.changeset/config.json @jnsdls
+turbo.json @jnsdls

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

@@ -4,15 +4,25 @@ description: "Sets up Node.js and runs install"
 runs:
   using: composite
   steps:
-    - uses: pnpm/action-setup@v2
+    # we use bun for some test suites
+    - name: Setup bun
+      uses: oven-sh/setup-bun@v1
+      with:
+        bun-version: 1.0.35
+    # pnpm for our dependencies
+    - uses: pnpm/action-setup@v3
       with:
         version: 8
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: 20
+        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

@@ -1,9 +1,5 @@
 # Contributing to thirdweb
 
-You can find a full video tutorial on how to contribute to thirdweb below:
-
-https://www.youtube.com/watch?v=TXsQ3qok3B0
-
 ## Getting Started
 
 To get started, read the [How this repo works](#how-this-repo-works) section below to learn about the structure of this repo.
@@ -12,23 +8,19 @@ From there, you can take a look at our [Good First Issues](https://github.com/th
 
 If you have any questions about the issue, feel free to ask on our [Discord server](https://discord.gg/thirdweb) in the `#contributors` channel; where you'll be able to get help from our team and other contributors.
 
-<br/>
+<br />
 
 ## How this repo works
 
-[@thirdweb-dev/js](https://github.com/thirdweb-dev/js) is a monorepo, meaning it contains many projects within it.
+We use [Turborepo](https://turbo.build/repo/docs) to manage the repository, and help speed up the [CI/CD](https://www.atlassian.com/continuous-delivery/principles/continuous-integration-vs-delivery-vs-deployment) pipeline to ship to production faster 🚢. Turborepo is a project dependency, and doesn't need to be installed separately.
 
-We use [Turborepo](https://turborepo.org/docs/getting-started) to manage the monorepo, and help speed up the [CI/CD](https://www.atlassian.com/continuous-delivery/principles/continuous-integration-vs-delivery-vs-deployment) pipeline to ship to production faster 🚢.
+We use [pnpm](https://pnpm.io) for package management across the repo. `pnpm` is similar to `npm` or `yarn` but with more efficient disk space usage.
 
-You can see a quick outline of each of the projects within this repo below, each living within the [/packages](/packages) directory:
+**With the v5 SDK, we've consolidated everything into a single project at [/packages/thirdweb](./packages/thirdweb). You can still find the legacy packages at [/legacy_packages](./legacy_packages).**
 
-| Package                        | Description                                                          | Latest Version                                                                                                                                                                   |
-| ------------------------------ | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [/sdk](./packages/sdk)         | Best in class web3 SDK for Browser, Node and Mobile apps             | <a href="https://www.npmjs.com/package/@thirdweb-dev/sdk"><img src="https://img.shields.io/npm/v/@thirdweb-dev/sdk?color=red&label=npm&logo=npm" alt="npm version"/></a>         |
-| [/react](./packages/react)     | Ultimate collection of React hooks for your web3 apps                | <a href="https://www.npmjs.com/package/@thirdweb-dev/react"><img src="https://img.shields.io/npm/v/@thirdweb-dev/react?color=red&label=npm&logo=npm" alt="npm version"/></a>     |
-| [/auth](./packages/auth)       | Best in class wallet authentication for Node backends                | <a href="https://www.npmjs.com/package/@thirdweb-dev/auth"><img src="https://img.shields.io/npm/v/@thirdweb-dev/auth?color=red&label=npm&logo=npm" alt="npm version"/></a>       |
-| [/storage](./packages/storage) | Best in class decentralized storage SDK for Browser and Node         | <a href="https://www.npmjs.com/package/@thirdweb-dev/storage"><img src="https://img.shields.io/npm/v/@thirdweb-dev/storage?color=red&label=npm&logo=npm" alt="npm version"/></a> |
-| [/cli](./packages/cli)         | Publish and deploy smart contracts without dealing with private keys | <a href="https://www.npmjs.com/package/thirdweb"><img src="https://img.shields.io/npm/v/thirdweb?color=red&label=npm&logo=npm" alt="npm version"/></a>                           |
+This single package provides a performant & lightweight SDK to interact with any EVM chain across Node, React, and React Native. Learn more about how to use the thirdweb SDK in our [documentation](https://portal.thirdweb.com/typescript/v5).
+
+<br />
 
 ## How to contribute
 
@@ -36,7 +28,7 @@ Let's explore how you can set up the repo on your local machine and start contri
 
 This section requires some existing knowledge of [Git](https://git-scm.com/), [Node.js](https://nodejs.org/en/) and [pnpm](https://pnpm.io/).
 
-<br/>
+<br />
 
 ### Getting the repo
 
@@ -50,67 +42,60 @@ To begin:
 
 3. Create a new branch on your fork to start working on your changes:
 
-   ```
-   git checkout -b MY_BRANCH_NAME
+   ```bash
+   git checkout -b <YOUR BRANCH NAME>
    ```
 
 4. Install the dependencies:
-   ```
+   ```bash
    pnpm install
    ```
    If you are on windows, use the `--ignore-scripts` flag
-   ```
+   ```bash
    pnpm install --ignore-scripts
    ```
 
-Now you have got the repo on your local machine, and you're ready to start making your changes!
+Now you have the repo on your local machine, and you're ready to start making your changes!
 
 <br/>
 
 ### Test Your Changes
 
-We use [yalc](https://github.com/wclr/yalc) to test changes locally.
+#### Writing Unit Tests
 
-Install the yalc CLI globally:
+Try to include unit test coverage with your changes where appropriate. We use `vitest` for testing, look for files with the `.test.ts` extension for examples of how to structure your unit tests.
+
+To run your tests, run the following from the package directory (most likely /packages/thirdweb):
 
 ```bash
-pnpm add yalc -g
+pnpm test:dev <YOUR TEST FILE PATH>
 ```
 
-First, create a test project where you can experiment with your changes:
+> 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.
 
-You can create a basic starter project with the `sdk` and `react` packages installed using the CLI:
+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:
 
 ```bash
-npx thirdweb create --app
+pnpm lint
 ```
 
-Use `yalc` to link your local changes in the monorepo to the test project, by running the following command from your test repo:
+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.
 
-```bash
-yalc add @thirdweb-dev/react # Link the react package
-yalc add @thirdweb-dev/sdk # Link the sdk package
-# etc...
-```
+#### Testing on the Demo Apps
 
-From the monorepo, run the following command to publish your local changes to the test project:
-
-```bash
-pnpm push
-```
-
-Now, each time you make a change to the monorepo, you can run `pnpm push` to publish your changes to the test project.
-
-In your test project, you need to:
-
-1. Delete the dependencies cache. If you're using Next.js, that is the `.next` directory, and if you're using CRA, that is 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
 
 You can also test your changes by publishing a dev package to npm and adding your package as you normally do in your projects.
 
-Once you have your PR up you can add a comment with the text: `/release-pr`. This will trigger a GitHub action that will publish a dev version to npm.
+**Once you have your PR up** you can add a comment with the text: `/release-pr`. This will trigger a GitHub action that will publish a dev version to npm.
 
 You can see the action progress in GitHub's `Actions` tab, look for the workflow: `release-pr`.
 
@@ -154,9 +139,7 @@ git commit -am "My commit message"
 3. Push your changes to the SDK:
 
 ```
-git push origin MY_BRANCH_NAME
+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.
-
-It's helpful to tag PRs with `[SDK]`, `[REACT]`, `[AUTH]`, (the name of the package you're modifying) to indicate the package that you are engaging with.

.github/dependabot.yml

@@ -9,3 +9,8 @@ updates:
     directory: "/" # Location of package manifests
     schedule:
       interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      # Check for updates to GitHub Actions every week
+      interval: "weekly"

.github/stale.yml

@@ -1,5 +1,5 @@
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
+daysUntilStale: 14
 # Number of days of inactivity before a stale issue is closed
 daysUntilClose: 7
 # Issues with these labels will never be considered stale

.github/workflows/CI.yml

@@ -0,0 +1,199 @@
+name: CI
+
+on:
+  push:
+    branches: ["main"]
+    paths:
+      - "packages/**"
+      - "package.json"
+  pull_request:
+    types: [opened, synchronize]
+    paths:
+      - "packages/**"
+      - "package.json"
+      - ".github/**"
+  # trigger on merge group as well (merge queue)
+  merge_group:
+    types: [checks_requested]
+    branches: ["main"]
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+  # To use Remote Caching, uncomment the next lines and follow the steps below.
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+  TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
+  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build Packages
+    steps:
+      - name: Check out the code
+        uses: actions/checkout@v4
+
+      - name: Setup & Install
+        uses: ./.github/composite-actions/install
+
+      - name: Build Packages
+        run: pnpm build:packages
+
+  lint:
+    timeout-minutes: 15
+    name: Lint Packages
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the code
+        uses: actions/checkout@v4
+
+      - name: Setup & Install
+        uses: ./.github/composite-actions/install
+
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+        with:
+          version: latest  
+
+      - run: pnpm lint
+
+  test:
+    timeout-minutes: 15
+    name: Unit Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the code
+        uses: actions/checkout@v4
+
+      - name: Setup & Install
+        uses: ./.github/composite-actions/install
+
+      - name: Set up foundry
+        uses: foundry-rs/foundry-toolchain@v1
+        with:
+          cache: false
+
+      - run: pnpm test
+
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          directory: packages/
+          flags: packages
+          verbose: true
+
+  e2e:
+    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
+
+      - name: Setup & Install
+        uses: ./.github/composite-actions/install
+
+      - 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
+    if: github.event_name != 'merge_group'
+    timeout-minutes: 15
+    name: "Benchmarks"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the code
+        uses: actions/checkout@v4
+
+      - name: Setup & Install
+        uses: ./.github/composite-actions/install
+
+      - name: Set up foundry
+        uses: foundry-rs/foundry-toolchain@v1
+        with:
+          cache: false
+
+      - name: Run benchmarks
+        uses: CodSpeedHQ/action@v2
+        with:
+          token: ${{ secrets.CODSPEED_TOKEN }}
+          run: "pnpm bench"
+
+  size:
+    # only run on pull requests
+    if: github.event_name == 'pull_request'
+    timeout-minutes: 15
+    name: "Size"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the code
+        uses: actions/checkout@v4
+
+      - name: Setup & Install
+        uses: ./.github/composite-actions/install
+
+      - name: Report bundle size
+        uses: andresz1/size-limit-action@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          package_manager: pnpm
+          directory: packages/thirdweb

.github/workflows/CI_legacy.yml

@@ -0,0 +1,98 @@
+name: CI (Legacy Packages)
+
+on:
+  push:
+    branches: ["main"]
+    paths:
+      - "legacy_packages/**"
+      - "legacy_e2e/**"
+      - "package.json"
+  pull_request:
+    types: [opened, synchronize]
+    paths:
+      - "legacy_packages/**"
+      - "legacy_e2e/**"
+      - "package.json"
+  # trigger on merge group as well (merge queue)
+  merge_group:
+    types: [checks_requested]
+    branches: ["main"]
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+  # To use Remote Caching, uncomment the next lines and follow the steps below.
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+  TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
+  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest-16
+    name: Build Packages
+    steps:
+      - name: Check out the code
+        uses: actions/checkout@v4
+
+      - name: Setup & Install
+        uses: ./.github/composite-actions/install
+
+      - name: Build Packages
+        run: pnpm build:legacy_packages
+
+  lint:
+    timeout-minutes: 15
+    name: Lint Packages
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the code
+        uses: actions/checkout@v4
+
+      - name: Setup & Install
+        uses: ./.github/composite-actions/install
+
+      - run: pnpm lint:legacy
+
+  test:
+    timeout-minutes: 15
+    name: Unit Tests
+    runs-on: ubuntu-latest-16
+    steps:
+      - name: Check out the code
+        uses: actions/checkout@v4
+
+      - name: Setup & Install
+        uses: ./.github/composite-actions/install
+
+      - run: pnpm test:legacy
+
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          directory: legacy_packages/
+          flags: legacy_packages
+          verbose: true
+
+  e2e:
+    timeout-minutes: 15
+    name: E2E Tests
+    runs-on: ubuntu-latest-16
+    steps:
+      - name: Check out the code
+        uses: actions/checkout@v4
+
+      - name: Setup & Install
+        uses: ./.github/composite-actions/install
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Run e2e tests
+        run: pnpm e2e:legacy
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
+          CLI_E2E_API_KEY: ${{ secrets.CLI_E2E_API_KEY }}

.github/workflows/build-test-lint.yml

@@ -1,157 +0,0 @@
-name: Build, Lint & Test
-
-on:
-  push:
-    branches: ["main"]
-  pull_request:
-    types: [opened, synchronize]
-  # trigger on merge group as well (merge queue)
-  merge_group:
-    types: [checks_requested]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-  # To use Remote Caching, uncomment the next lines and follow the steps below.
-env:
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-  TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
-
-jobs:
-  build:
-    timeout-minutes: 15
-    name: Build
-    runs-on: ubuntu-latest-16
-
-    steps:
-      - name: Check out code
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 25
-
-      - name: Setup bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.0.21
-
-      - name: Install
-        uses: ./.github/composite-actions/install
-
-      - run: pnpm build
-
-        # We use week in the turbo cache key to keep the cache from infinitely growing
-      - id: get-week
-        run: echo "WEEK=$(date +%U)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        timeout-minutes: 5
-        id: cache-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-  lint:
-    timeout-minutes: 15
-    name: Lint Packages
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-          check-latest: true
-
-      - name: Setup bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.0.21
-
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-
-      - uses: actions/cache@v3
-        timeout-minutes: 5
-        id: restore-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - run: pnpm lint
-
-  test:
-    timeout-minutes: 15
-    name: Unit Tests
-    runs-on: ubuntu-latest-16
-    needs: build
-    steps:
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-          check-latest: true
-
-      # we use bun for some test suites
-      - name: Setup bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.0.21
-
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-
-      - uses: actions/cache@v3
-        timeout-minutes: 5
-        id: restore-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - run: pnpm test
-
-      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v3
-        with:
-          files: ./packages/sdk/coverage/evm/lcov.info
-
-  e2e:
-    timeout-minutes: 15
-    name: E2E Tests
-    runs-on: ubuntu-latest-16
-    needs: build
-    steps:
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-          check-latest: true
-
-      # we use bun for some test suites
-      - name: Setup bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.0.21
-
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-
-      - uses: actions/cache@v3
-        timeout-minutes: 5
-        id: restore-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Install Playwright
-        run: npx playwright install --with-deps
-
-      - name: Run e2e tests
-        run: pnpm e2e
-        env:
-          NODE_OPTIONS: "--max_old_space_size=4096"
-          CLI_E2E_API_KEY: ${{ secrets.CLI_E2E_API_KEY }}

.github/workflows/codeql-analysis.yml

@@ -13,12 +13,16 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "main" ]
+    branches: ["main"]
   schedule:
-    - cron: '37 9 * * 3'
+    - cron: "37 9 * * 3"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 
 jobs:
   analyze:
@@ -32,41 +36,40 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: ["javascript"]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        
-        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
 
-        
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+          # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v3
 
-    #   If the Autobuild fails above, remove it and uncomment the following three lines. 
-    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
 
-    # - run: |
-    #   echo "Run, Build Application using script"
-    #   ./location_of_script_within_repo/buildscript.sh
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      # - run: |
+      #   echo "Run, Build Application using script"
+      #   ./location_of_script_within_repo/buildscript.sh
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3

.github/workflows/release-artifacts.yml

@@ -10,21 +10,27 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
+  # cancel any previous runs if they were started before this one
   cancel-in-progress: true
 
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+  TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
+
 jobs:
   release-artifacts:
-    timeout-minutes: 15
+    timeout-minutes: 60
     runs-on: ubuntu-latest-16
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # bun setup is required, because pnpm typdoc will run pnpm build and some packages uses bun for build
       - name: Setup bun
         uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.0.21
+          bun-version: 1.0.35
 
       - name: Install
         uses: ./.github/composite-actions/install
@@ -37,7 +43,7 @@ jobs:
 
       - name: Generate Docs
         run: |
-          cd packages/sdk
+          cd legacy_packages/sdk
           pnpm generate-docs
           cd ../react-core
           pnpm generate-docs
@@ -53,12 +59,13 @@ jobs:
           git config --local user.email "[email protected]"
           git config --local user.name "GitHub Action"
           git status
-          git add packages/react/typedoc/documentation.json.gz
-          git add packages/react-core/typedoc/documentation.json.gz
-          git add packages/react-native/typedoc/documentation.json.gz
-          git add packages/sdk/typedoc/documentation.json.gz
-          git add packages/storage/typedoc/documentation.json.gz
-          git add packages/wallets/typedoc/documentation.json.gz
+          git add legacy_packages/react/typedoc/documentation.json.gz
+          git add legacy_packages/react-core/typedoc/documentation.json.gz
+          git add legacy_packages/react-native/typedoc/documentation.json.gz
+          git add legacy_packages/sdk/typedoc/documentation.json.gz
+          git add legacy_packages/storage/typedoc/documentation.json.gz
+          git add legacy_packages/wallets/typedoc/documentation.json.gz
+          git add packages/thirdweb/typedoc/documentation.json.gz
           git add snippets/feature_snippets_react.json
           git add snippets/feature_snippets_sdk.json
           git add snippets/snippets.json

.github/workflows/release-next.yml

@@ -1,47 +0,0 @@
-name: Release Next
-
-on:
-  push:
-    paths:
-      - ".changeset/**"
-      - "packages/**"
-    branches:
-      - next
-
-env:
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-
-jobs:
-  release:
-    name: Release
-    timeout-minutes: 30
-    runs-on: ubuntu-latest-16
-    steps:
-      - name: Checkout branch
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-
-      - name: Setup bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.0.21
-
-      - name: Install
-        uses: ./.github/composite-actions/install
-
-      - name: Build
-        run: pnpm build
-
-      - name: Create @next release
-        run: |
-          git checkout next
-          pnpm version-packages:next
-          pnpm release:next
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.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/request-action@v2.1.0
+        uses: octokit/request-action@v2.3.1
         with:
           route: GET /repos/{owner}/{repository}/pulls/{issue_id}
           owner: ${{ github.repository_owner }}
@@ -61,7 +61,7 @@ jobs:
           GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
 
       - name: pull the repo.
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: true
           repository: ${{ fromJson(steps.get_pull_request_ref.outputs.data).head.repo.full_name }}
@@ -70,7 +70,7 @@ jobs:
       - name: Setup bun
         uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.0.21
+          bun-version: 1.0.35
 
       - name: Install
         uses: ./.github/composite-actions/install

.github/workflows/release.yml

@@ -8,6 +8,7 @@ on:
     paths:
       - ".changeset/**"
       - "packages/**"
+      - "legacy_packages/**"
     branches:
       - main
 
@@ -25,7 +26,7 @@ jobs:
     runs-on: ubuntu-latest-16
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
           # Do not use the GITHUB_TOKEN by default
@@ -34,7 +35,7 @@ jobs:
       - name: Setup bun
         uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.0.21
+          bun-version: 1.0.35
 
       - name: Install
         uses: ./.github/composite-actions/install

.github/workflows/sync-chains.yml

@@ -10,16 +10,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Install bun
         uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.0.21
+          bun-version: 1.0.35
 
       - name: Run chains sync
         run: bun run db:sync
-        working-directory: ./packages/chains
+        working-directory: ./legacy_packages/chains
 
       - name: Check for Changes
         id: git-check
@@ -42,14 +42,14 @@ jobs:
       - name: Commit Changes
         if: env.CHANGES_FOUND == 'true'
         run: |
-          git config --local user.email "action@github.com"
-          git config --local user.name "GitHub Action"
+          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
           git add -A
           git commit -m "chore(chains): sync from db"
 
       - name: Create or Update Pull Request
         if: env.CHANGES_FOUND == 'true'
-        uses: peter-evans/create-pull-request@v3
+        uses: peter-evans/create-pull-request@v6
         with:
           title: "chore(chains): update chains"
           branch: "sync-chains"

.gitignore

@@ -10,14 +10,16 @@ dist-ssr
 .cache
 server/dist
 public/dist
-./packages/contracts-js/abis
+./legacy_packages/contracts-js/abis
 .idea/
 .yalc/
 yalc.lock
 build/
 playwright-report/
-.vscode/
 .env/
 
 # Artifacts
-packages/cli/artifacts/
+legacy_packages/cli/artifacts/
+
+# codecov binary
+codecov

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+	"recommendations": ["biomejs.biome"],
+	"unwantedRecommendations": [
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode"
+	]
+}

.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
+  },
+  "[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

@@ -1,53 +1,70 @@
 <p align="center">
     <br />
     <a href="https://thirdweb.com">
-        <img src="https://github.com/thirdweb-dev/js/blob/main/packages/sdk/logo.svg?raw=true" width="200" alt=""/></a>
+        <img src="https://github.com/thirdweb-dev/js/blob/main/legacy_packages/sdk/logo.svg?raw=true" width="200" alt=""/></a>
     <br />
 </p>
 
-<h1 align="center"><a href='https://thirdweb.com/'>thirdweb</a> JavaScript/TypeScript monorepo</h1>
+<h1 align="center"><a href='https://thirdweb.com/'>thirdweb</a> TypeScript SDK</h1>
 
 <p align="center">
-    <a href="https://github.com/thirdweb-dev/js/actions/workflows/build-test-lint.yml">
-        <img alt="Build Status" src="https://github.com/thirdweb-dev/js/actions/workflows/build-test-lint.yml/badge.svg"/>
+    <a href="https://github.com/thirdweb-dev/js/actions/workflows/CI.yml">
+        <img alt="Build Status" src="https://github.com/thirdweb-dev/js/actions/workflows/CI.yml/badge.svg"/>
     </a>
     <a href="https://discord.gg/thirdweb">
         <img alt="Join our Discord!" src="https://img.shields.io/discord/834227967404146718.svg?color=7289da&label=discord&logo=discord&style=flat"/>
     </a>
 </p>
 
-<p align="center"><strong>Best in class web3 SDKs for Browser, Node and Mobile apps</strong></p>
+<p align="center"><strong>All-in-one web3 SDK for Browser, Node and Mobile apps</strong></p>
 
-## Packages
+## Features
 
-| Package                                  | Description                                                                 | Latest Version                                                                                                                                                                             |
-| ---------------------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [/sdk](./packages/sdk)                   | Best in class web3 SDK for Browser, Node and Mobile apps                    | <a href="https://www.npmjs.com/package/@thirdweb-dev/sdk"><img src="https://img.shields.io/npm/v/@thirdweb-dev/sdk?color=red&label=npm&logo=npm" alt="npm version"/></a>                   |
-| [/wallets](./packages/wallets)           | Unified web3 Wallet library to integrate any wallet into your applications. | <a href="https://www.npmjs.com/package/@thirdweb-dev/wallets"><img src="https://img.shields.io/npm/v/@thirdweb-dev/wallets?color=red&label=npm&logo=npm" alt="npm version"/></a>           |
-| [/react](./packages/react)               | Ultimate collection of React hooks for your web3 apps                       | <a href="https://www.npmjs.com/package/@thirdweb-dev/react"><img src="https://img.shields.io/npm/v/@thirdweb-dev/react?color=red&label=npm&logo=npm" alt="npm version"/></a>               |
-| [/react-native](./packages/react-native) | Ultimate collection of React hooks for your native mobile web3 apps         | <a href="https://www.npmjs.com/package/@thirdweb-dev/react-native"><img src="https://img.shields.io/npm/v/@thirdweb-dev/react-native?color=red&label=npm&logo=npm" alt="npm version"/></a> |
-| [/auth](./packages/auth)                 | Best in class wallet authentication for Node backends                       | <a href="https://www.npmjs.com/package/@thirdweb-dev/auth"><img src="https://img.shields.io/npm/v/@thirdweb-dev/auth?color=red&label=npm&logo=npm" alt="npm version"/></a>                 |
-| [/storage](./packages/storage)           | Best in class decentralized storage SDK for Browser and Node                | <a href="https://www.npmjs.com/package/@thirdweb-dev/storage"><img src="https://img.shields.io/npm/v/@thirdweb-dev/storage?color=red&label=npm&logo=npm" alt="npm version"/></a>           |
-| [/cli](./packages/cli)                   | Publish and deploy smart contracts without dealing with private keys        | <a href="https://www.npmjs.com/package/thirdweb"><img src="https://img.shields.io/npm/v/thirdweb?color=red&label=npm&logo=npm" alt="npm version"/></a>                                     |
-| [/chains](./packages/chains)             | All EVM chain information as JS objects for easy handling                   | <a href="https://www.npmjs.com/package/@thirdweb-dev/chains"><img src="https://img.shields.io/npm/v/@thirdweb-dev/chains?color=red&label=npm&logo=npm" alt="npm version"/></a>             |
+- Support for React & React-Native
+- First party support for [Embedded Wallets](https://portal.thirdweb.com/connect/embedded-wallet/overview) (social/email login)
+- First party support for [Account Abstraction](https://portal.thirdweb.com/connect/account-abstraction)
+- Instant connection to any chain with RPC Edge integration
+- Integrated IPFS upload/download
+- UI Components for connection, transactions, nft rendering
+- High level contract extensions for interacting with common standards
+- Automatic ABI resolution
 
-## Documentation
+## Library Comparison
 
-Visit [https://portal.thirdweb.com/](https://portal.thirdweb.com/) to view the full documentation.
-
-<br />
+|                                           | 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
 
-We welcome contributions from all developers, regardless of experience level. If you are interested in contributing, please read our [Contributing Guide](.github/contributing.md) where you'll learn how the repo works, how to test your changes, and how to submit a pull request.
+We welcome contributions from all developers regardless of experience level. If you are interested in contributing, please read our [Contributing Guide](.github/contributing.md) to learn how the repo works, how to test your changes, and how to submit a pull request.
 
-<br />
+See our [open source page](https://thirdweb.com/open-source) for more information on our open-source bounties and program.
 
-## Community
+## Additional Resources
 
-The best place to discuss your ideas, ask questions, and troubleshoot issues is our [Discord server](https://discord.gg/thirdweb).
+- [Documentation](https://portal.thirdweb.com/typescript/v5)
+- [Templates](https://thirdweb.com/templates)
+- [YouTube](https://www.youtube.com/c/thirdweb)
 
-<br/>
+## Support
+
+For help or feedback, please [visit our support site](https://thirdweb.com/support)
 
 ## Security
 

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,249 @@
+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 { CustomizedConnect } from "../../../components/sign-in/custom";
+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">
+        <CustomizedComponent />
+      </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 CustomizedComponent() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Customized Component
+        </h2>
+        <p className="max-w-[600px]">
+          Change the look and feel of the connect button without rewriting your
+          own.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<CustomizedConnect />}
+        code={`import { createThirdwebClient } from "thirdweb";
+import { ConnectEmbed } from "thirdweb/react";
+
+const THIRDWEB_CLIENT = createThirdwebClient({
+clientId: "<YOUR_CLIENT_ID>"
+});
+
+function App(){
+return (
+<ConnectButton
+      client={THIRDWEB_CLIENT}
+      connectButton={{
+        label: "Custom Connect Button",
+      }}
+      showAllWallets={false}
+      connectModal={{
+        title: "Custom Connect Modal",
+        size: "compact",
+      }}
+      theme={darkTheme({
+        colors: {
+          modalBg: "#281866",
+          accentButtonBg: "#281866",
+          connectedButtonBgHover: "#281866",
+          borderColor: "rgba(256, 256,256, 0.1)",
+          accentText: "rgba(256, 256,256, 0.1)",
+          connectedButtonBg: "#281866",
+          tertiaryBg: "rgba(256, 256,256, 0.1)",
+          primaryButtonBg: "#281866",
+          secondaryButtonBg: "rgba(256, 256,256, 0.1)",
+          primaryButtonText: "#E7E8E9",
+          primaryText: "#E7E8E9",
+          separatorLine: "rgba(256, 256,256, 0.1)",
+        },
+      })}
+    />
+);
+};`}
+        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/custom.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { ConnectButton } from "thirdweb/react";
+import { darkTheme, lightTheme } from "thirdweb/react";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+
+export const CustomizedConnect = () => {
+  return (
+    <ConnectButton
+      client={THIRDWEB_CLIENT}
+      connectButton={{
+        label: "Custom Connect Button",
+      }}
+      showAllWallets={false}
+      connectModal={{
+        title: "Custom Connect Modal",
+        size: "compact",
+      }}
+      theme={darkTheme({
+        colors: {
+          modalBg: "#281866",
+          accentButtonBg: "#281866",
+          connectedButtonBgHover: "#281866",
+          borderColor: "rgba(256, 256,256, 0.1)",
+          accentText: "rgba(256, 256,256, 0.1)",
+          connectedButtonBg: "#281866",
+          tertiaryBg: "rgba(256, 256,256, 0.1)",
+          primaryButtonBg: "#281866",
+          secondaryButtonBg: "rgba(256, 256,256, 0.1)",
+          primaryButtonText: "#E7E8E9",
+          primaryText: "#E7E8E9",
+          separatorLine: "rgba(256, 256,256, 0.1)",
+        },
+      })}
+    />
+  );
+};

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