Version Packages (#3172 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: GitHub Action <[email protected]>
Add forked chains explainer to contributing guide (#3189 )
2024-06-01 07:14:56 +12:00 · 2024-05-31 07:51:51 +00:00 · 2024-05-31 19:50:38 +12:00 · 2024-05-31 16:12:10 +12:00 · 2024-05-31 14:30:07 +12:00 · 2024-05-31 00:06:09 +00:00
316 changed files with 9185 additions and 1171 deletions
@@ -7,9 +7,7 @@
    }
  ],
  "commit": false,
-  "fixed": [
-    ["@thirdweb-dev/react-core", "@thirdweb-dev/react"]
-  ],
+  "fixed": [["@thirdweb-dev/react-core", "@thirdweb-dev/react"]],
  "linked": [],
  "access": "public",
  "baseBranch": "main",
@@ -20,7 +18,8 @@
    "bundlers-webpack",
    "bundlers-swc",
    "runtimes-node-commonjs",
-    "runtimes-node-module"
+    "runtimes-node-module",
+    "playground-web"
  ],
  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
    "updateInternalDependents": "always",
@@ -73,6 +73,10 @@ pnpm test:dev <YOUR TEST FILE PATH>

 > Specifying your test file path is optional, but will save time by only running specific tests each time. Before opening your PR, run `pnpm test` from the monorepo root (without specifying your test file) to ensure your changes didn't break any existing tests.

+Many of the tests use forked versions of live chains like mainnet. We fork these chains at a specific arbitrary block number so results are consistent across test runs. If you're interacting with on-chain data, you can write tests that interact with real contracts at the same block number by using `FORKED_ETHEREUM_CHAIN`. However, if you don't need to interact with existing contracts, we recommend running your tests against `ANVIL_CHAIN`.
+
+If you need to use accounts in your tests, use the predefined accounts in `test/src/test-wallets.ts`. These are the default anvil accounts that are pre-funded on the local test forks.
+
 #### Linting

 We use a linter to maintain best practices across projects. Once your changes are complete (or periodically while making changes), run the linter with the following command from the repo root:
@@ -90,6 +90,10 @@ jobs:
    timeout-minutes: 15
    name: E2E Tests
    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        package_manager: [npm, yarn, pnpm, bun]
+        bundler: [vite, webpack, esbuild]
    steps:
      - name: Check out the code
        uses: actions/checkout@v4
@@ -97,7 +101,58 @@ jobs:
      - name: Setup & Install
        uses: ./.github/composite-actions/install

-      # TODO actually run e2e tests
+      - name: Build Packages
+        run: pnpm build:packages
+
+      - name: Install Yarn (if needed)
+        if: matrix.package_manager == 'yarn'
+        run: npm install -g yarn
+
+      - name: Create test project
+        run: |
+          mkdir test-project
+          cd test-project
+          npm init -y
+          ${{ matrix.package_manager }} add react react-dom ../packages/thirdweb
+      - name: Create test file
+        run: |
+          cd test-project
+          echo "import { createThirdwebClient } from 'thirdweb'; console.log(createThirdwebClient({clientId: "foo_bar_baz"}));" > index.js
+      
+      - name: Bundle with vite
+        if: matrix.bundler == 'vite'
+        run: |
+          cd test-project
+          ${{matrix.package_manager}} add vite
+          echo 'import { defineConfig } from "vite"; import {resolve} from "path"; export default defineConfig({ build: { lib: { entry: resolve(__dirname, "index.js"), name: "e2e_test" }, outDir: "dist" }});' > vite.config.js
+          npx vite build
+    
+      - name: Bundle with webpack
+        if: matrix.bundler == 'webpack'
+        run: |
+          cd test-project
+          ${{matrix.package_manager}} add webpack webpack-cli
+          echo 'const path = require("path"); module.exports = { mode: "production", entry: "./index.js", output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js" }};' > webpack.config.js
+          npx webpack
+    
+      - name: Bundle with esbuild
+        if: matrix.bundler == 'esbuild'
+        run: |
+          cd test-project
+          ${{matrix.package_manager}} add esbuild
+          npx esbuild index.js --bundle --outdir=dist
+    
+      - name: Verify bundle
+        run: |
+          cd test-project/dist
+          file_count=$(find . -type f | wc -l)
+          if [ "$file_count" -gt 0 ]; then
+            echo "Bundling successful"
+          else
+            echo "Bundling failed"
+            exit 1
+          fi
+      

  benchmark:
    # cannot run benchmarks on merge group
@@ -31,24 +31,24 @@

 ## Library Comparison

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

 ## Contributing

@@ -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"
+  }
+}
@@ -4,6 +4,10 @@ const nextConfig = {
    config.externals.push("pino-pretty", "lokijs", "encoding");
    return config;
  },
+  serverExternalPackages: ["@shikijs/twoslash", "prettier", "shiki"],
+  experimental: {
+    reactCompiler: true,
+  },
 };

 export default nextConfig;
@@ -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"
+  }
+}
@@ -0,0 +1,102 @@
+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";
+import { CodeExample } from "../../../components/code/code-example";
+import { StyledPayTransaction } from "../../../components/styled-pay-transaction";
+
+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>
+      <section className="container px-4 md:px-6 space-y-8">
+        <div className="space-y-2">
+          <h2 className="text-4xl font-semibold tracking-tight">
+            Transaction Button
+          </h2>
+          <p className="max-w-[600px]">
+            Transaction Button is a handy component that handles transactions.
+            <br />
+            If your user doesn&apos;t have enough funds for that transaction, a
+            pre-filled pay modal will appear with the exact amount needed.
+          </p>
+        </div>
+
+        <CodeExample
+          preview={<StyledPayTransaction />}
+          code={`import { TransactionButton } from "thirdweb/react";
+
+
+function App() {
+  const account = useActiveAccount();
+
+  return (
+    <TransactionButton
+      transaction={() => {
+        // any transaction works
+        return claimTo({
+          contract,
+          quantity: 1n,
+          tokenId: 0n,
+          to: account?.address,
+        });
+      }}
+    >
+      Buy for 10 MATIC
+    </TransactionButton>
+  );
+};`}
+          lang="tsx"
+        />
+      </section>
+    </main>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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;
+}
@@ -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>
+  );
+}
@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <main className="flex grow items-center justify-center" data-noindex>
+      404 | Page Not Found
+    </main>
+  );
+}
@@ -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>
+  );
+};
@@ -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>;
+}
@@ -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>
+  );
+};
@@ -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 }}
+    />
+  );
+};
@@ -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"}
+    />
+  );
+}
@@ -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"}
+    />
+  );
+}
@@ -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"}
+    />
+  );
+}
@@ -0,0 +1,41 @@
+"use client";
+
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { useTheme } from "next-themes";
+import { getContract } from "thirdweb";
+import { polygon } from "thirdweb/chains";
+import { claimTo } from "thirdweb/extensions/erc1155";
+import { TransactionButton, useActiveAccount } from "thirdweb/react";
+import { StyledConnectButton } from "./styled-connect-button";
+
+const contract = getContract({
+  address: "0x96B30d36f783c7BC68535De23147e2ce65788e93",
+  chain: polygon,
+  client: THIRDWEB_CLIENT,
+});
+
+export function StyledPayTransaction() {
+  const account = useActiveAccount();
+  const { theme } = useTheme();
+
+  return account ? (
+    <TransactionButton
+      transaction={() => {
+        if (!account) throw new Error("No active account");
+        return claimTo({
+          contract,
+          quantity: 1n,
+          tokenId: 0n,
+          to: account?.address,
+        });
+      }}
+      payModal={{
+        theme: theme === "light" ? "light" : "dark",
+      }}
+    >
+      Buy for 10 MATIC
+    </TransactionButton>
+  ) : (
+    <StyledConnectButton />
+  );
+}
@@ -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>
+  );
+}
@@ -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 }
@@ -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,
+}
@@ -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>
@@ -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";
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -1,18 +1,19 @@
-export const ThirdwebIcon: React.FC = ({}) => {
+export function ThirdwebIcon(props: { className?: string }) {
  return (
-    <svg viewBox="0 0 516 321" fill="none" className="aspect-square w-10 h-10">
+    <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)"}
+          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)"}
+          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)"}
+          fill="url(#paint2_linear_3:35)"
        />
      </g>
      <defs>
@@ -24,11 +25,11 @@ export const ThirdwebIcon: React.FC = ({}) => {
          y2="164.437"
          gradientUnits="userSpaceOnUse"
        >
-          <stop stopColor="#F213A4" />
-          <stop offset="0.1517" stopColor="#E011A7" />
-          <stop offset="0.4554" stopColor="#B20DAF" />
-          <stop offset="0.8789" stopColor="#6806BB" />
-          <stop offset="1" stopColor="#5204BF" />
+          <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"
@@ -38,11 +39,11 @@ export const ThirdwebIcon: React.FC = ({}) => {
          y2="148.471"
          gradientUnits="userSpaceOnUse"
        >
-          <stop stopColor="#F213A4" />
-          <stop offset="0.1517" stopColor="#E011A7" />
-          <stop offset="0.4554" stopColor="#B20DAF" />
-          <stop offset="0.8789" stopColor="#6806BB" />
-          <stop offset="1" stopColor="#5204BF" />
+          <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"
@@ -52,16 +53,16 @@ export const ThirdwebIcon: React.FC = ({}) => {
          y2="164.437"
          gradientUnits="userSpaceOnUse"
        >
-          <stop stopColor="#F213A4" />
-          <stop offset="0.1517" stopColor="#E011A7" />
-          <stop offset="0.4554" stopColor="#B20DAF" />
-          <stop offset="0.8789" stopColor="#6806BB" />
-          <stop offset="1" stopColor="#5204BF" />
+          <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 width="516" height="321" fill="white"></rect>
        </clipPath>
      </defs>
    </svg>
  );
-};
+}
@@ -0,0 +1,3 @@
+export const metadataBase = process.env.VERCEL_ENV
+  ? new URL("https://playground.thirdweb.com")
+  : undefined;
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
@@ -1,13 +1,9 @@
-import type { Config } from "tailwindcss";
+import { fontFamily } from "tailwindcss/defaultTheme";

-const config = {
+/** @type {import('tailwindcss').Config} */
+module.exports = {
  darkMode: ["class"],
-  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-  ],
+  content: ["./src/**/*.{ts,tsx}"],
  prefix: "",
  theme: {
    container: {
@@ -72,9 +68,11 @@ const config = {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
+      fontFamily: {
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+        mono: ["var(--font-mono)", ...fontFamily.mono],
+      },
    },
  },
  plugins: [require("tailwindcss-animate")],
-} satisfies Config;
-
-export default config;
+};
@@ -19,7 +19,8 @@
    ],
    "paths": {
      "@/*": ["./src/*"]
-    }
+    },
+    "target": "ES2020"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
@@ -1,8 +0,0 @@
-# playground-web
-
-## 0.1.1
-
-### Patch Changes
-
- Updated dependencies [[`a22eb5c`](https://github.com/thirdweb-dev/js/commit/a22eb5c4bff839aa5137b0a743d75afc929b49f1), [`a2275c4`](https://github.com/thirdweb-dev/js/commit/a2275c409c4a7f8f595bd1ee7250fee46d54f1e7), [`da63eab`](https://github.com/thirdweb-dev/js/commit/da63eab29a53ff04cbe1dc175c6a6b6066a1ee9d), [`f49f8ca`](https://github.com/thirdweb-dev/js/commit/f49f8cacb4f69dc46551b023c22bda71712df04a), [`5994685`](https://github.com/thirdweb-dev/js/commit/599468559d2c63b337f770fb492d386cdd90e7ae), [`f8e0a50`](https://github.com/thirdweb-dev/js/commit/f8e0a50136a600b93c05802322f208c133a9c81e), [`57f7cd5`](https://github.com/thirdweb-dev/js/commit/57f7cd5a661ac3b0611782f17e96a3e30a3485ae), [`b46173f`](https://github.com/thirdweb-dev/js/commit/b46173f982dd3b31795739b9a834046ed3599dba), [`7abbe03`](https://github.com/thirdweb-dev/js/commit/7abbe03a11fc38a02a64329de201636d8e1c5b44), [`f55fa4c`](https://github.com/thirdweb-dev/js/commit/f55fa4ca856924a0a1eb6b8e5fe743d76b6e2760), [`49aa6e4`](https://github.com/thirdweb-dev/js/commit/49aa6e41d5df93204821b72f17f1ba5c3cfe41f7), [`9c9969e`](https://github.com/thirdweb-dev/js/commit/9c9969e41abb86f819bad55f5bb3dd36447e41e4)]:
-  - thirdweb@5.23.0
@@ -1,28 +0,0 @@
-{
-  "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": {
-    "next": "14.2.3",
-    "react": "^18",
-    "react-dom": "^18",
-    "thirdweb": "workspace:*"
-  },
-  "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.3",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5"
-  }
-}
@@ -1,76 +0,0 @@
-@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: 0 0% 3.9%;
-
-      --primary: 0 0% 9%;
-      --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: 0 0% 3.9%;
-
-      --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: 0 0% 98%;
-      --primary-foreground: 0 0% 9%;
-
-      --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: 0 0% 83.1%;
-    }
-  }
-
-  @layer base {
-    * {
-      @apply border-border;
-    }
-    body {
-      @apply bg-background text-foreground;
-    }
-  }
@@ -1,22 +0,0 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en" className="dark">
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
-}
@@ -1,83 +0,0 @@
-"use client";
-import { THIRDWEB_CLIENT } from "@/lib/client";
-import Link from "next/link";
-import { PayEmbed, ThirdwebProvider } from "thirdweb/react";
-import { ThirdwebIcon } from "../icons/thirdweb";
-
-export default function Index() {
-  return (
-    <ThirdwebProvider>
-      <div className="flex flex-col min-h-[100dvh]">
-        <header className="px-4 lg:px-6 h-14 flex items-center">
-          <Link
-            className="flex items-center justify-center"
-            target="_blank"
-            href="https://thirdweb.com"
-          >
-            <ThirdwebIcon />
-            <span className="sr-only">thirdweb</span>
-          </Link>
-        </header>
-        <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-4 text-balance">
-                      Unlock seamless transactions with thirdweb pay
-                    </h1>
-                    <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 font-inter">
-                      Thirdweb Pay enables your users to easily purchase
-                      cryptocurrencies and execute transactions using their
-                      credit or debit card.
-                    </p>
-                    <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 font-inter">
-                      Experience hassle-free cross-chain routing and token
-                      transactions like never before.
-                    </p>
-                  </div>
-                  <div className="flex flex-col gap-2 min-[400px]:flex-row">
-                    <Link
-                      className="inline-flex h-10 items-center justify-center rounded-md bg-gray-900 px-8 text-sm font-medium text-gray-50 shadow transition-colors hover:bg-gray-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 dark:focus-visible:ring-gray-300 font-inter"
-                      target="_blank"
-                      href="https://portal.thirdweb.com/connect/pay/get-started"
-                    >
-                      Get Started
-                    </Link>
-                    <Link
-                      className="inline-flex h-10 items-center justify-center rounded-md border border-gray-20 bg-white px-8 text-sm font-medium shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-800 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus-visible:ring-gray-300 font-inter"
-                      target="_blank"
-                      href="https://portal.thirdweb.com/connect/pay/overview"
-                    >
-                      Learn More
-                    </Link>
-                  </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">
-                    <PayEmbed client={THIRDWEB_CLIENT} theme="light" />
-                  </div>
-                  <p className="text-gray-500 md:text-xl dark:text-gray-300 font-inter text-center">
-                    <small>👆 This is live, try it out! 👆</small>
-                  </p>
-                </div>
-              </div>
-            </div>
-          </section>
-          <div
-            className="absolute bottom-0 left-0 right-0 h-full z-[-1] bg-cover md:bg-[length:100%_100%] bg-no-repeat"
-            style={{
-              backgroundImage: "url(bottom-gradient.png)",
-            }}
-          />
-        </main>
-        <footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t">
-          <p className="text-xs text-gray-500 dark:text-gray-400 font-inter">
-            © 2024 thirdweb. All rights reserved.
-          </p>
-        </footer>
-      </div>
-    </ThirdwebProvider>
-  );
-}
@@ -6,7 +6,10 @@
  "linter": {
    "enabled": true,
    "rules": {
-      "recommended": true
+      "recommended": true,
+      "style": {
+        "noUselessElse": "off"
+      }
    }
  },
  "formatter": {
@@ -1,5 +1,33 @@
 # @thirdweb-dev/auth

+## 4.1.88
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/wallets@2.5.30
+
+## 4.1.87
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/wallets@2.5.29
+
+## 4.1.86
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/wallets@2.5.28
+
+## 4.1.85
+
+### Patch Changes
+
+- Updated dependencies [[`4abd559`](https://github.com/thirdweb-dev/js/commit/4abd5591068bfa9217ec65e5830fba0cd14d11b9), [`642e7e9`](https://github.com/thirdweb-dev/js/commit/642e7e9f100dce2714e5eecd72cdc48aa9670004)]:
+  - @thirdweb-dev/wallets@2.5.27
+
 ## 4.1.84

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@thirdweb-dev/auth",
-  "version": "4.1.84",
+  "version": "4.1.88",
  "main": "dist/thirdweb-dev-auth.cjs.js",
  "module": "dist/thirdweb-dev-auth.esm.js",
  "browser": {
@@ -1,5 +1,23 @@
 # @thirdweb-dev/chains

+## 0.1.115
+
+### Patch Changes
+
+- [#3164](https://github.com/thirdweb-dev/js/pull/3164) [`8d0c985`](https://github.com/thirdweb-dev/js/commit/8d0c985c45fc85b220784f841c1de7533ad8ebf8) Thanks [@github-actions](https://github.com/apps/github-actions)! - Synced Chains Package
+
+## 0.1.114
+
+### Patch Changes
+
+- [#3132](https://github.com/thirdweb-dev/js/pull/3132) [`bd8fb7a`](https://github.com/thirdweb-dev/js/commit/bd8fb7a576ada21381625f1a241b10a6e68ef1f7) Thanks [@github-actions](https://github.com/apps/github-actions)! - Synced Chains Package
+
+## 0.1.113
+
+### Patch Changes
+
+- [#3108](https://github.com/thirdweb-dev/js/pull/3108) [`32df45f`](https://github.com/thirdweb-dev/js/commit/32df45f9b07fa07e6f3ad218af095d721cacc76a) Thanks [@github-actions](https://github.com/apps/github-actions)! - Synced Chains Package
+
 ## 0.1.112

 ### Patch Changes
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jonas Daniels GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>GitHub Action	c1e155d04f	Version Packages (#3172 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: GitHub Action <[email protected]>	2024-06-01 07:14:56 +12:00
gregandGitHub	91e658035d	Add forked chains explainer to contributing guide (#3189 )	2024-05-31 07:51:51 +00:00
gregandGitHub	8491675e2e	Fix AutoConnect on MIPD wallets (#3190 )	2024-05-31 19:50:38 +12:00
Joaquim VergesandGitHub	1b2edb4c09	show connect button if disconnected in pay playground (#3188 )	2024-05-31 16:12:10 +12:00
Joaquim VergesandGitHub	874747b3e0	chore: update cb SDK (#3187 )	2024-05-31 14:30:07 +12:00
FirekeeperandGitHub	01f883f637	Unity 4.14.1 (#3185 )	2024-05-31 00:06:09 +00:00
gregandGitHub	123275bbe2	Catch any rogue poller errors in `watchBlockNumber` (#3186 )	2024-05-30 17:05:52 -07:00
Manan TankandGitHub	7bb241f7db	Improved OTP input in v4 SDK using input-otp lib (#3183 )	2024-05-30 15:34:20 +00:00
Jonas DanielsandGitHub	a1f53a2b9e	refactor: Improve CI workflow configuration and setup (#3182 )	2024-05-30 08:46:42 +00:00
gregandGitHub	46e9072576	Adds predefined hardhat chain (#3176 )	2024-05-30 02:48:31 +00:00
Kacper GitHub Joaquim Verges	501ef9339d	fix: peerDependency version of react-native-quick-crypto (#3174 ) Signed-off-by: Kacper <[email protected]> Co-authored-by: Joaquim Verges <[email protected]>	2024-05-30 13:52:26 +12:00
Joaquim VergesandGitHub	3dca028a7e	fix: transaction button gas estimation for pay (#3178 )	2024-05-30 00:31:40 +00:00
Edward SunandGitHub	fd777c71c2	Upgrade dependencies for legacy_packages/wallets, add new AuthProviders (#3175 )	2024-05-29 21:42:53 +00:00
Joaquim VergesandGitHub	fbec24e260	chore: add tsdoc tags (#3177 )	2024-05-30 09:22:45 +12:00
Kien Ngo GitHub greg	bbf65acc80	Add some basic tests for React (#3165 ) Co-authored-by: greg <[email protected]>	2024-05-29 20:46:08 +00:00
gregandGitHub	b569eb48ad	Adds EIP-5792 hooks and `waitForBundle` fn (#3161 )	2024-05-29 00:00:29 +00:00
gregandGitHub	b6b0eb9120	Improve connect wallet copy (#3171 )	2024-05-28 23:37:51 +00:00
FirekeeperandGitHub	7cfe6745e8	Unity 4.14.0 (#3170 )	2024-05-28 23:18:20 +00:00
Jonas Daniels GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>GitHub Action	46a3caaeb3	Version Packages (#3166 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: GitHub Action <[email protected]>	2024-05-29 11:06:21 +12:00
Joaquim VergesandGitHub	f8cad774ec	fix optional dependencies (#3169 )	2024-05-29 10:44:34 +12:00
github-actions[bot]GitHubgithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	8d0c985c45	chore(chains): update chains (#3164 ) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2024-05-28 13:25:49 -07:00
jxom GitHub greg	4004957df1	chore: update readme comparison (#3149 ) Signed-off-by: jxom <[email protected]> Co-authored-by: greg <[email protected]>	2024-05-28 13:25:32 -07:00
Jonas Daniels GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>GitHub Action	31a4943175	Version Packages (#3147 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: GitHub Action <[email protected]>	2024-05-29 07:54:47 +12:00
github-actions[bot]GitHubgithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	bd8fb7a576	chore(chains): update chains (#3132 ) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2024-05-28 09:42:33 -07:00
Joaquim VergesandGitHub	c4fa6fca0c	fix tsdoc (#3163 )	2024-05-28 20:59:28 +12:00
Joaquim VergesandGitHub	b9b185b665	Add support for cb wallet in react native (#3162 )	2024-05-28 20:40:12 +12:00
Joaquim VergesandGitHub	8b606b51e4	handle disconnect when multiple connected wallets + wallet utility exports (#3151 )	2024-05-28 00:22:03 +00:00
gregandGitHub	3b03cd0987	Cleanup default copy on connect modal QR code UI (#3153 ) Signed-off-by: greg <[email protected]>	2024-05-27 20:21:03 +00:00
gregandGitHub	99d11bb859	WalletConnect copy link button (#3154 )	2024-05-27 20:17:51 +00:00
gregandGitHub	fc1b65888f	Allow exporting in-app wallets (#3140 )	2024-05-27 00:23:30 +00:00
gregandGitHub	9c417d9be3	`onDisconnect` callback on `<ConnectButton />` (#3150 )	2024-05-27 00:21:24 +00:00
Kien NgoandGitHub	1ff79a0691	add test coverage (#3148 )	2024-05-26 08:39:12 +00:00
Joaquim VergesandGitHub	c1d3a5a259	fix: resolveScheme for native apps (#3144 )	2024-05-25 19:42:00 +12:00
Jonas Daniels GitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>GitHub Action	31f5947153	Version Packages (#3119 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: GitHub Action <[email protected]>	2024-05-24 21:30:49 +12:00
Joaquim VergesandGitHub	b72daa4f45	Expose useWalletBalance in react native (#3143 )	2024-05-24 20:50:47 +12:00
Joaquim VergesandGitHub	c3c6345af3	chore: update changesets (#3142 )	2024-05-24 20:19:23 +12:00
gregandGitHub	4eda306645	`signTypedData`: throw error for incorrectly typed chainId (#3139 ) Signed-off-by: greg <[email protected]>	2024-05-24 03:51:00 +00:00
Manan Tank GitHub Joaquim Verges	8b3e1e2682	Use Native wallet link for android in WalletConnect session (#3136 ) Co-authored-by: Joaquim Verges <[email protected]>	2024-05-24 03:50:31 +00:00
Joaquim Verges GitHub Jonas Daniels	764bce2ba9	feat: support for WC compatible wallets in react native (#3126 ) Co-authored-by: Jonas Daniels <[email protected]>	2024-05-24 14:56:51 +12:00
greg GitHub Jonas Daniels	5031e44d92	Adds delayed reveal extensions for ERC721 contracts (#3127 ) Co-authored-by: Jonas Daniels <[email protected]>	2024-05-23 23:09:02 +00:00
Jonas DanielsandGitHub	198049f679	Jd/metadata base pls (#3138 )	2024-05-23 14:17:02 -07:00
Jonas DanielsandGitHub	6c92476874	feat: add metadataBase to page components (#3137 )	2024-05-23 14:12:39 -07:00
Jonas DanielsandGitHub	6ecbc4bd36	chore: Update next.config.mjs and package.json (#3135 )	2024-05-23 12:54:21 -07:00
Jonas DanielsandGitHub	00db937949	playground: update to next15, update OG image (#3134 )	2024-05-23 11:39:15 -07:00
greg GitHub Jonas Daniels	c3a92bfe90	Expose `useWalletBalance` to public API (#3125 ) Co-authored-by: Jonas Daniels <[email protected]>	2024-05-23 07:54:07 +00:00
Jonas DanielsandGitHub	b22df1d81c	style: add mono font to tailwind.config.ts (#3131 )	2024-05-22 23:26:19 -07:00
Jonas DanielsandGitHub	364129e9c3	Jd/playground fixes (#3130 )	2024-05-22 23:22:26 -07:00
Jonas DanielsandGitHub	7d445b0a6e	Jd/playground fixes (#3129 )	2024-05-22 23:13:11 -07:00
Jonas DanielsandGitHub	67e077b8f2	refactor(connect/pay): remove unused code (#3128 )	2024-05-22 22:45:24 -07:00
github-actions[bot]GitHubgithub-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	32df45f9b0	chore(chains): update chains (#3108 ) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2024-05-22 22:21:02 -07:00
Jonas DanielsandGitHub	606bef57aa	update playground (#3121 )	2024-05-22 22:19:55 -07:00
gregandGitHub	546d2db93e	Add react native to thirdweb create CLI (#3118 )	2024-05-22 23:56:20 +00:00
gregandGitHub	4abd559106	[V4 SDK]: Fix AWS KMS Signers signTypedData (#3124 )	2024-05-22 22:33:16 +00:00
gregandGitHub	642e7e9f10	[V4 SDK] Adds ethers-compatible _signTypedData to legacy GCP KMS wallet (#3123 )	2024-05-22 22:09:45 +00:00
Manan TankandGitHub	ca0a45a70c	Revert text alignment change done in ModalHeader (#3117 )	2024-05-22 19:48:39 +00:00
Manan TankandGitHub	d021f4e5ef	WalletConnect QR scan fixes and add retry UI (#3104 )	2024-05-22 17:38:46 +00:00
Manan Tank GitHub Jonas Daniels	2774d1fa73	Add useConnectModal (#2943 ) Co-authored-by: Jonas Daniels <[email protected]>	2024-05-22 17:38:33 +00:00
gregandGitHub	a76c638dff	Adds signMessage test for viem adapter (#3115 )	2024-05-22 05:26:26 +00:00
				`@@ -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>