Version Packages (#3147)

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",

.env.example

@@ -3,4 +3,5 @@
 
 # used for unit tests that hit real IPFS gateway
 # get a secret key from https://thirdweb.com/create-api-key
-TW_SECRET_KEY=""
+# Learn more about API keys. https://portal.thirdweb.com/account/api-keys
+TW_SECRET_KEY=""

.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,56 @@ 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:
+#### 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 +135,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/pull_request_template.md

@@ -11,3 +11,9 @@ Short description of the bug fixed or feature added
 
 - [ ] Automated tests: link to unit test file
 - [ ] Manual tests: step by step instructions on how to test
+
+## Contributor NFT
+
+Paste in your wallet address below and we will airdrop you a special NFT when your pull request is merged. 
+
+```Address: ```

.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,144 @@
+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
+    steps:
+      - name: Check out the code
+        uses: actions/checkout@v4
+
+      - name: Setup & Install
+        uses: ./.github/composite-actions/install
+
+      # TODO actually run e2e tests
+
+  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

@@ -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 | ⚠️ public RPC only | ❌       |
+| Automatic ABI Resolution                  | ✅       | ❌                 | ❌                 | ❌       |
+| IPFS Upload/Download                      | ✅       | ❌                 | ❌                 | ❌       |
+| Embedded wallet (email/ social login)     | ✅       | ⚠️ via 3rd party   | ❌                 | ❌       |
+| Account abstraction (ERC4337) support     | ✅       | ⚠️ via 3rd party   | ⚠️ via 3rd party   | ❌       |
+| Web3 wallet connectors                    | ✅       | ✅                 | ❌                 | ❌       |
+| Local wallet creation                     | ✅       | ❌                 | ✅                 | ✅       |
+| Auth (SIWE)                               | ✅       | ⚠️ via 3rd party   | ❌                 | ❌       |
+| Extensions functions for common standards | ✅       | ❌                 | ❌                 | ❌       |
+| React Hooks                               | ✅       | ✅                 | ❌                 | ❌       |
+| React UI components                       | ✅       | ❌                 | ❌                 | ❌       |
+| React Native Hooks                        | ✅       | ❌                 | ❌                 | ❌       |
+| React Native UI Components                | ✅       | ❌                 | ❌                 | ❌       |
 
 ## 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/pay/page.tsx

@@ -0,0 +1,60 @@
+import { StyledPayEmbed } from "@/components/styled-pay-embed";
+import { Button } from "@/components/ui/button";
+import { metadataBase } from "@/lib/constants";
+import type { Metadata } from "next";
+import Link from "next/link";
+
+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">
+      <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48 z-10">
+        <div className="container px-4 md:px-6">
+          <div className="grid gap-10 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
+            <div className="flex flex-col justify-center space-y-4 min-h-[100%]">
+              <div className="space-y-2">
+                <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
+                  The easiest way for users to transact in your app
+                </h1>
+                <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
+                  Onramp users in clicks with credit card &amp; cross-chain
+                  crypto payments — and generate revenue for each user
+                  transaction. Integrate for free.
+                </p>
+              </div>
+              <div className="flex flex-col gap-4 min-[400px]:flex-row">
+                <Button asChild size="lg">
+                  <Link
+                    target="_blank"
+                    href="https://portal.thirdweb.com/connect/pay/get-started"
+                  >
+                    Get Started
+                  </Link>
+                </Button>
+                <Button asChild variant="outline" size="lg">
+                  <Link target="_blank" href="https://thirdweb.com/contact-us">
+                    Book a Demo
+                  </Link>
+                </Button>
+              </div>
+            </div>
+            <div className="w-full mx-auto my-auto sm:w-full lg:order-last relative flex flex-col space-y-2">
+              <div className="shadow-xl md:w-[400px] md:mx-auto">
+                <StyledPayEmbed />
+              </div>
+              <p className="md:text-xl text-center text-muted-foreground">
+                <small>👆 This is live, try it out! 👆</small>
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

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

@@ -0,0 +1,122 @@
+import { CodeExample } from "@/components/code/code-example";
+import { StyledConnectButton } from "@/components/styled-connect-button";
+import { StyledConnectEmbed } from "@/components/styled-connect-embed";
+import { Button } from "@/components/ui/button";
+import { metadataBase } from "@/lib/constants";
+import type { Metadata } from "next";
+import Link from "next/link";
+
+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 lg:space-y-32 xl:space-y-48">
+      <section className="container px-4 md:px-6">
+        <div className="grid gap-10 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
+          <div className="flex flex-col justify-center space-y-4 min-h-[100%]">
+            <div className="space-y-2">
+              <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
+                The easiest way for users to sign in to your app
+              </h1>
+              <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
+                Let users sign in with their email, phone number, social media
+                accounts or directly with a wallet. Seemlessly integrate account
+                abstraction and SIWE auth.
+              </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"
+                >
+                  Get Started
+                </Link>
+              </Button>
+              <Button asChild variant="outline" size="lg">
+                <Link target="_blank" href="https://thirdweb.com/contact-us">
+                  Book a Demo
+                </Link>
+              </Button>
+            </div>
+          </div>
+          <div className="w-full mx-auto my-auto sm:w-full lg:order-last relative flex flex-col space-y-2">
+            <div className="mx-auto">
+              <StyledConnectButton />
+            </div>
+
+            <p className="md:text-xl text-center text-muted-foreground">
+              <small>👆 This is live, try it out! 👆</small>
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="container px-4 md:px-6 space-y-8">
+        <div className="space-y-2">
+          <h2 className="text-4xl font-semibold tracking-tight">
+            Connect Button
+          </h2>
+          <p className="max-w-[600px]">
+            When clicked opens a modal and allows users to connect to various
+            wallets.
+            <br />
+            It is extremely customizable and very easy to use.
+          </p>
+        </div>
+
+        <CodeExample
+          preview={<StyledConnectButton />}
+          code={`import { createThirdwebClient } from "thirdweb";
+import { ConnectButton } from "thirdweb/react";
+
+const THIRDWEB_CLIENT = createThirdwebClient({
+  clientId: "<YOUR_CLIENT_ID>"
+});
+
+function App(){
+  return (
+    <ConnectButton client={THIRDWEB_CLIENT} />
+  );
+};`}
+          lang="tsx"
+        />
+      </section>
+
+      <section className="container px-4 md:px-6 space-y-8">
+        <div className="space-y-2">
+          <h2 className="text-4xl font-semibold tracking-tight">
+            Connect Embed
+          </h2>
+          <p className="max-w-[600px]">
+            When clicked opens a modal and allows users to connect to various
+            wallets.
+            <br />
+            It is extremely customizable and very easy to use.
+          </p>
+        </div>
+        <CodeExample
+          preview={<StyledConnectEmbed />}
+          code={`import { createThirdwebClient } from "thirdweb";
+import { ConnectEmbed } from "thirdweb/react";
+
+const THIRDWEB_CLIENT = createThirdwebClient({
+  clientId: "<YOUR_CLIENT_ID>"
+});
+
+function App(){
+  return (
+    <ConnectEmbed client={THIRDWEB_CLIENT} />
+  );
+};`}
+          lang="tsx"
+        />
+      </section>
+    </main>
+  );
+}

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,113 @@
+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="Flexible user sign-up flow with wallet and social sign-in methods"
+          icon={WalletsConnectIcon}
+        />
+
+        <ComingSoonWrapper>
+          <ArticleCardIndex
+            href="/connect/account-abstraction"
+            title="Account abstraction"
+            description="Complete toolkit for Account Abstraction"
+            icon={WalletsSmartIcon}
+          />
+        </ComingSoonWrapper>
+        <ComingSoonWrapper>
+          <ArticleCardIndex
+            title="In-App Wallet"
+            description="Email & social login wallets for your customers"
+            href="/connect/in-app-wallet"
+            icon={WalletsInAppIcon}
+          />
+        </ComingSoonWrapper>
+        <ComingSoonWrapper>
+          <ArticleCardIndex
+            href="/connect/auth"
+            title="Auth"
+            description="Authenticate users with their wallets"
+            icon={WalletsAuthIcon}
+          />
+        </ComingSoonWrapper>
+        <ArticleCardIndex
+          href="/connect/pay"
+          title="Pay"
+          description="Easily integrate fiat onramps and cross-chain crypto purchases"
+          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 h-full"
+    >
+      {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" enableSystem>
+      <ThirdwebProvider>{children}</ThirdwebProvider>
+    </ThemeProvider>
+  );
+};
+
+function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

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,42 @@
+// enforces this only gets rendered on the server
+import "server-only";
+
+import { transformerTwoslash } from "@shikijs/twoslash";
+import "@shikijs/twoslash/style-rich.css";
+import * as parserBabel from "prettier/plugins/babel";
+import * as estree from "prettier/plugins/estree";
+import { format } from "prettier/standalone";
+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(
+    `// @noErrors
+  ${code}`,
+    {
+      parser: "babel-ts",
+      plugins: [parserBabel, estree],
+      printWidth: 50,
+    },
+  );
+  const html = await codeToHtml(formattedCode, {
+    lang: lang,
+    themes: {
+      light: "github-light",
+      dark: "github-dark-default",
+    },
+    transformers: [transformerTwoslash()],
+  });
+
+  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/styled-connect-button.tsx

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

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

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

apps/playground-web/src/components/styled-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 StyledPayEmbed() {
+  const { theme } = useTheme();
+
+  return (
+    <PayEmbed
+      client={THIRDWEB_CLIENT}
+      theme={theme === "light" ? "dark" : "light"}
+    />
+  );
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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