Version Packages (#3287)

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

.github/contributing.md

@@ -73,6 +73,10 @@ pnpm test:dev <YOUR TEST FILE PATH>
 
 > Specifying your test file path is optional, but will save time by only running specific tests each time. Before opening your PR, run `pnpm test` from the monorepo root (without specifying your test file) to ensure your changes didn't break any existing tests.
 
+Many of the tests use forked versions of live chains like mainnet. We fork these chains at a specific arbitrary block number so results are consistent across test runs. If you're interacting with on-chain data, you can write tests that interact with real contracts at the same block number by using `FORKED_ETHEREUM_CHAIN`. However, if you don't need to interact with existing contracts, we recommend running your tests against `ANVIL_CHAIN`.
+
+If you need to use accounts in your tests, use the predefined accounts in `test/src/test-wallets.ts`. These are the default anvil accounts that are pre-funded on the local test forks.
+
 #### Linting
 
 We use a linter to maintain best practices across projects. Once your changes are complete (or periodically while making changes), run the linter with the following command from the repo root:

.github/workflows/CI.yml

@@ -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

.github/workflows/release-pr.yml

@@ -27,7 +27,7 @@ jobs:
         id: validate_user
         if: ${{ steps.check.outputs.triggered == 'true' }}
         run: |
-          if [[ "${AUTHOR_ASSOCIATION}" != 'MEMBER' && "${AUTHOR_ASSOCIATION}" != 'OWNER' && "${AUTHOR_ASSOCIATION}" != 'CONTRIBUTOR' ]]
+          if [[ "${AUTHOR_ASSOCIATION}" != 'MEMBER' && "${AUTHOR_ASSOCIATION}" != 'OWNER' ]]
           then
             echo "User authorization failed"
             exit 1

README.md

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

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

@@ -0,0 +1,158 @@
+import { Button } from "@/components/ui/button";
+import { metadataBase } from "@/lib/constants";
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import {
+  ConnectSmartAccountCustomPreview,
+  ConnectSmartAccountPreview,
+} from "../../../components/account-abstraction/connect-smart-account";
+import { SponsoredTxPreview } from "../../../components/account-abstraction/sponsored-tx";
+import { CodeExample } from "../../../components/code/code-example";
+
+export const metadata: Metadata = {
+  metadataBase,
+  title: "Sign In, Account Abstraction and SIWE Auth | thirdweb Connect",
+  description:
+    "Let users sign up with their email, phone number, social media accounts or directly with a wallet. Seemlessly integrate account abstraction and SIWE auth.",
+};
+
+export default function Page() {
+  return (
+    <main className="flex-1 content-center relative py-12 md:py-24 lg:py-32 xl:py-48 space-y-12 md:space-y-24">
+      <section className="container px-4 md:px-6">
+        <div className="grid gap-10 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
+          <div className="flex flex-col justify-center space-y-4 min-h-[100%]">
+            <div className="space-y-2">
+              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
+                Account abstraction
+              </h1>
+              <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
+                Let users connect to their smart accounts with any wallet and
+                unlock gas sponsorship, batched transactions, session keys and
+                full wallet programmability.
+              </p>
+            </div>
+            <div className="flex flex-col gap-4 min-[400px]:flex-row">
+              <Button asChild size="lg">
+                <Link
+                  target="_blank"
+                  href="https://portal.thirdweb.com/connect/account-abstraction"
+                >
+                  View docs
+                </Link>
+              </Button>
+              <Button asChild variant="outline" size="lg">
+                <Link target="_blank" href="https://thirdweb.com/contact-us">
+                  Book a Demo
+                </Link>
+              </Button>
+            </div>
+          </div>
+          <div className="w-full mx-auto my-auto sm:w-full order-first lg:order-last relative flex flex-col space-y-2">
+            <div className="max-w-full sm:max-w-[500px] p-8">
+              <Image
+                src={"/account-abstraction.png"}
+                width={600}
+                height={400}
+                objectFit={"contain"}
+                alt=""
+                priority={true}
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="container px-4 md:px-6 space-y-8">
+        <ConnectSmartAccount />
+      </section>
+
+      <section className="container px-4 md:px-6 space-y-8">
+        <SponsoredTx />
+      </section>
+    </main>
+  );
+}
+
+function ConnectSmartAccount() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Connect smart accounts
+        </h2>
+        <p className="max-w-[600px]">
+          Enable smart accounts on the UI components or build your own UI.
+        </p>
+      </div>
+      <CodeExample
+        preview={<ConnectSmartAccountPreview />}
+        code={`// Using UI components
+  import { ConnectButton } from "thirdweb/react";
+
+  function App(){
+    return (<>
+<ConnectButton client={client} 
+// account abstraction options
+accountAbstraction={{ chain, sponsorGas: true }} />
+</>);
+};`}
+        lang="tsx"
+      />
+      <CodeExample
+        preview={<ConnectSmartAccountCustomPreview />}
+        code={`// Using your own UI
+  import { useConnect } from "thirdweb/react";
+  import { createWallet } from "thirdweb/wallets";
+
+  function App(){
+    const { connect } = useConnect({ client, 
+      // account abstraction options
+      accountAbstraction: { chain, sponsorGas: true }});
+
+    return (<>
+<button onClick={() => connect(async () => {
+  // any wallet connected here will be
+  // converted to a smart account
+  const adminWallet = createWallet("io.metamask");
+  await adminWallet.connect({ client });
+  return adminWallet;
+})}>Connect (metamask)</button>
+</>);
+};`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+function SponsoredTx() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Sponsored transactions
+        </h2>
+        <p className="max-w-[600px]">
+          Set `sponsorGas: true` to enable gas-free transactions for your users.
+          <br />
+          Free on testnets, billed at the end of the month on mainnets.
+        </p>
+      </div>
+      <CodeExample
+        preview={<SponsoredTxPreview />}
+        code={`import { claimTo } from "thirdweb/extensions/erc1155";
+  import { TransactionButton } from "thirdweb/react";
+
+  function App(){
+    return (<>
+{/* transactions will be sponsored */}
+<TransactionButton transaction={() => claimTo({ contract, to: "0x123...", tokenId: 0n, quantity: 1n })}>Mint</TransactionButton>
+</>);
+};`}
+        lang="tsx"
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,156 @@
+import { CodeExample } from "@/components/code/code-example";
+import { Button } from "@/components/ui/button";
+import { metadataBase } from "@/lib/constants";
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { SponsoredInAppTxPreview } from "../../../components/in-app-wallet/sponsored-tx";
+import { StyledConnectEmbed } from "../../../components/styled-connect-embed";
+
+export const metadata: Metadata = {
+  metadataBase,
+  title: "Sign In, Account Abstraction and SIWE Auth | thirdweb Connect",
+  description:
+    "Let users sign up with their email, phone number, social media accounts or directly with a wallet. Seemlessly integrate account abstraction and SIWE auth.",
+};
+
+export default function Page() {
+  return (
+    <main className="flex-1 content-center relative py-12 md:py-24 lg:py-32 xl:py-48 space-y-12 md:space-y-24">
+      <section className="container px-4 md:px-6">
+        <div className="grid gap-10 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
+          <div className="flex flex-col justify-center space-y-4 min-h-[100%]">
+            <div className="space-y-2">
+              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
+                Onboard users to web3
+              </h1>
+              <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
+                Onboard anyone with flexible auth options, secure account
+                recovery, and smart account integration.
+              </p>
+            </div>
+            <div className="flex flex-col gap-4 min-[400px]:flex-row">
+              <Button asChild size="lg">
+                <Link
+                  target="_blank"
+                  href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
+                >
+                  View docs
+                </Link>
+              </Button>
+              <Button asChild variant="outline" size="lg">
+                <Link target="_blank" href="https://thirdweb.com/contact-us">
+                  Book a Demo
+                </Link>
+              </Button>
+            </div>
+          </div>
+          <div className="w-full mx-auto my-auto sm:w-full order-first lg:order-last relative flex flex-col space-y-2">
+            <div className="max-w-full sm:max-w-[600px]">
+              <Image
+                src={"/in-app-wallet.png"}
+                width={600}
+                height={400}
+                objectFit={"contain"}
+                alt=""
+                priority={true}
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="container px-4 md:px-6 space-y-8">
+        <AnyAuth />
+      </section>
+
+      <section className="container px-4 md:px-6 space-y-8">
+        <SponsoredInAppTx />
+      </section>
+    </main>
+  );
+}
+
+function AnyAuth() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Any Auth Method
+        </h2>
+        <p className="max-w-[600px]">
+          Use any of the built-in auth methods or bring your own.
+          <br />
+          Supports custom auth endpoints to integrate with your existing user
+          base.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<StyledConnectEmbed />}
+        code={`import { inAppWallet } from "thirdweb/wallets";
+        import { ConnectEmbed } from "thirdweb/react";
+
+        
+        const wallets = [
+          inAppWallet(
+            // built-in auth methods
+            { auth: { 
+              options: ["email", "phone", "passkey", "google", "apple", "facebook"] 
+              }
+            }
+            // or bring your own auth endpoint
+          )
+        ];
+
+        function App(){
+          return (
+<ConnectEmbed client={client} wallets={wallets} />);
+};`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+function SponsoredInAppTx() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Signless Sponsored Transactions
+        </h2>
+        <p className="max-w-[600px]">
+          With in-app wallets, users don&apos;t need to confirm every
+          transaction.
+          <br />
+          Combine it with smart account flag to cover gas costs for the best UX.
+        </p>
+      </div>
+      <CodeExample
+        preview={<SponsoredInAppTxPreview />}
+        code={`import { inAppWallet } from "thirdweb/wallets";
+  import { claimTo } from "thirdweb/extensions/erc1155";
+  import { ConnectButton, TransactionButton } from "thirdweb/react";
+
+  
+  const wallets = [
+    inAppWallet(
+      // turn on gas sponsorship for in-app wallets
+      { smartAccount: { chain, sponsorGas: true }}
+    )
+  ];
+
+  function App(){
+    return (<>
+<ConnectButton client={client} wallets={wallets} />
+
+{/* signless, sponsored transactions */}
+<TransactionButton transaction={() => claimTo({ contract, to: "0x123...", tokenId: 0n, quantity: 1n })}>Mint</TransactionButton>
+</>);
+};`}
+        lang="tsx"
+      />
+    </>
+  );
+}

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

@@ -1,8 +1,11 @@
-import { StyledPayEmbed } from "@/components/styled-pay-embed";
 import { Button } from "@/components/ui/button";
 import { metadataBase } from "@/lib/constants";
 import type { Metadata } from "next";
+import Image from "next/image";
 import Link from "next/link";
+import { CodeExample } from "../../../components/code/code-example";
+import { StyledPayEmbedPreview } from "../../../components/pay/embed";
+import { PayTransactionButtonPreview } from "../../../components/pay/transaction-button";
 
 export const metadata: Metadata = {
   metadataBase,
@@ -13,48 +16,133 @@ export const metadata: Metadata = {
 
 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>
+    <main className="flex-1 content-center relative py-12 md:py-24 lg:py-32 xl:py-48 space-y-12 md:space-y-24">
+      <section className="container px-4 md:px-6">
+        <div className="grid gap-10 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
+          <div className="flex flex-col justify-center space-y-4 min-h-[100%]">
+            <div className="space-y-2">
+              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
+                The easiest way for users to transact in your app
+              </h1>
+              <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
+                Onramp users with credit card &amp; cross-chain crypto payments
+                — and generate revenue for each user transaction.
               </p>
             </div>
+            <div className="flex flex-col gap-4 min-[400px]:flex-row">
+              <Button asChild size="lg">
+                <Link
+                  target="_blank"
+                  href="https://portal.thirdweb.com/connect/pay/get-started"
+                >
+                  View docs
+                </Link>
+              </Button>
+              <Button asChild variant="outline" size="lg">
+                <Link target="_blank" href="https://thirdweb.com/contact-us">
+                  Book a Demo
+                </Link>
+              </Button>
+            </div>
+          </div>
+          <div className="w-full mx-auto my-auto sm:w-full order-first lg:order-last relative flex flex-col space-y-2">
+            <div className="max-w-full sm:max-w-[600px]">
+              <Image
+                width={600}
+                height={400}
+                src={"/pay.png"}
+                objectFit={"contain"}
+                alt=""
+                priority={true}
+              />
+            </div>
           </div>
         </div>
       </section>
+      <section className="container px-4 md:px-6 space-y-8">
+        <StyledPayEmbed />
+      </section>
+      <section className="container px-4 md:px-6 space-y-8">
+        <PayTransactionButton />
+      </section>
     </main>
   );
 }
+
+function StyledPayEmbed() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Embed component
+        </h2>
+        <p className="max-w-[600px]">
+          Inline component that allows users to buy any currency.
+          <br />
+          Customize theme, currency, amounts, payment methods and more.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<StyledPayEmbedPreview />}
+        code={`
+        import { PayEmbed } from "thirdweb/react";
+
+        function App() {
+          return (
+            <PayEmbed
+              client={client}
+            />
+          );
+        };`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+function PayTransactionButton() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Transaction Button
+        </h2>
+        <p className="max-w-[600px]">
+          Transaction Button is a handy component that handles transactions.
+          <br />
+          If your user doesn&apos;t have enough funds for that transaction, a
+          pre-filled pay modal will appear with the exact amount needed.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<PayTransactionButtonPreview />}
+        code={`import { claimTo } from "thirdweb/extensions/erc1155";
+        import { TransactionButton, useActiveAccount } from "thirdweb/react";
+
+
+        function App() {
+          const account = useActiveAccount();
+        
+          return (
+            <TransactionButton
+              transaction={() => {
+                // any transaction works
+                return claimTo({
+                  contract,
+                  quantity: 1n,
+                  tokenId: 0n,
+                  to: account.address,
+                });
+              }}
+            >
+              Buy for 10 MATIC
+            </TransactionButton>
+          );
+        };`}
+        lang="tsx"
+      />
+    </>
+  );
+}

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

@@ -1,10 +1,12 @@
-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 Image from "next/image";
 import Link from "next/link";
+import { CodeExample } from "../../../components/code/code-example";
+import { HooksPreview } from "../../../components/sign-in/hooks";
+import { StyledConnectButton } from "../../../components/styled-connect-button";
+import { StyledConnectEmbed } from "../../../components/styled-connect-embed";
 
 export const metadata: Metadata = {
   metadataBase,
@@ -15,18 +17,18 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <main className="flex-1 content-center relative py-12 md:py-24 lg:py-32 xl:py-48 space-y-12 md:space-y-24 lg:space-y-32 xl:space-y-48">
+    <main className="flex-1 content-center relative py-12 md:py-24 lg:py-32 xl:py-48 space-y-12 md:space-y-24">
       <section className="container px-4 md:px-6">
         <div className="grid gap-10 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
           <div className="flex flex-col justify-center space-y-4 min-h-[100%]">
             <div className="space-y-2">
-              <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
-                The easiest way for users to sign in to your app
+              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none font-inter mb-6 text-balance">
+                Sign in
               </h1>
               <p className="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-300 mb-6 font-inter">
-                Let users sign in with their email, phone number, social media
-                accounts or directly with a wallet. Seemlessly integrate account
-                abstraction and SIWE auth.
+                Create a login experience tailor-made for your app. Add your
+                wallets of choice, enable web2 sign-in options and create a
+                modal that fits your brand.
               </p>
             </div>
             <div className="flex flex-col gap-4 min-[400px]:flex-row">
@@ -35,7 +37,7 @@ export default function Page() {
                   target="_blank"
                   href="https://portal.thirdweb.com/connect/sign-in"
                 >
-                  Get Started
+                  View docs
                 </Link>
               </Button>
               <Button asChild variant="outline" size="lg">
@@ -45,78 +47,139 @@ export default function Page() {
               </Button>
             </div>
           </div>
-          <div className="w-full mx-auto my-auto sm:w-full lg:order-last relative flex flex-col space-y-2">
-            <div className="mx-auto">
-              <StyledConnectButton />
+          <div className="w-full mx-auto my-auto sm:w-full order-first lg:order-last relative flex flex-col space-y-2">
+            <div className="max-w-full sm:max-w-[600px]">
+              <Image
+                src={"/connectors.png"}
+                width={600}
+                height={400}
+                objectFit={"contain"}
+                alt=""
+                priority={true}
+              />
             </div>
-
-            <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"
-        />
+        <ButtonComponent />
       </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";
+        <EmbedComponent />
+      </section>
 
-const THIRDWEB_CLIENT = createThirdwebClient({
-  clientId: "<YOUR_CLIENT_ID>"
-});
-
-function App(){
-  return (
-    <ConnectEmbed client={THIRDWEB_CLIENT} />
-  );
-};`}
-          lang="tsx"
-        />
+      <section className="container px-4 md:px-6 space-y-8">
+        <Hooks />
       </section>
     </main>
   );
 }
+
+function ButtonComponent() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Button Component
+        </h2>
+        <p className="max-w-[600px]">
+          When clicked opens a modal and allows users to connect to various
+          wallets.
+          <br />
+          Extremely customizable and easy to use.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<StyledConnectButton />}
+        code={`import { createThirdwebClient } from "thirdweb";
+import { ConnectButton } from "thirdweb/react";
+
+const THIRDWEB_CLIENT = createThirdwebClient({
+clientId: "<YOUR_CLIENT_ID>"
+});
+
+function App(){
+return (
+<ConnectButton client={THIRDWEB_CLIENT} />
+);
+};`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+function EmbedComponent() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Embed Component
+        </h2>
+        <p className="max-w-[600px]">
+          Inline component to connect to various wallets.
+          <br />
+          Use this to create your own full screen login page.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<StyledConnectEmbed />}
+        code={`import { createThirdwebClient } from "thirdweb";
+import { ConnectEmbed } from "thirdweb/react";
+
+const THIRDWEB_CLIENT = createThirdwebClient({
+clientId: "<YOUR_CLIENT_ID>"
+});
+
+function App(){
+return (
+<ConnectEmbed client={THIRDWEB_CLIENT} />
+);
+};`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+function Hooks() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight">
+          Custom UI
+        </h2>
+        <p className="max-w-[600px]">
+          Build your own connect UI using react hooks.
+          <br />
+          Wallet state management is all handled for you.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={<HooksPreview />}
+        code={`// Using your own UI
+        import { useConnect } from "thirdweb/react";
+        import { createWallet } from "thirdweb/wallets";
+      
+        function App(){
+          const { connect } = useConnect();
+      
+          return (<>
+      <button onClick={() => connect(async () => {
+        // 350+ wallets supported with id autocomplete
+        const wallet = createWallet("io.metamask");
+        await wallet.connect({ client });
+        return wallet;
+      })}>Connect with Metamask</button>
+      </>);
+      };`}
+        lang="tsx"
+      />
+    </>
+  );
+}

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

@@ -23,7 +23,7 @@ export function Header() {
         </div>
 
         <div className="flex items-center gap-1">
-          <ThemeSelector />
+          {/* <ThemeSelector /> */}
           <Button asChild size="icon" variant="ghost">
             <Link href="https://github.com/thirdweb-dev" target="_blank">
               <GithubIcon strokeWidth={1} />

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

@@ -27,27 +27,22 @@ function WalletsSection() {
       <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"
+          title="Sign In"
+          description="Integrate 350+ web3 wallets, in-app wallets, and smart accounts"
           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>
+        <ArticleCardIndex
+          href="/connect/account-abstraction"
+          title="Account abstraction"
+          description="Complete toolkit for Account Abstraction"
+          icon={WalletsSmartIcon}
+        />
+        <ArticleCardIndex
+          title="In-App Wallet"
+          description="Onboard users with an email, social logins, passkey or your own auth system"
+          href="/connect/in-app-wallet"
+          icon={WalletsInAppIcon}
+        />
         <ComingSoonWrapper>
           <ArticleCardIndex
             href="/connect/auth"
@@ -59,7 +54,7 @@ function WalletsSection() {
         <ArticleCardIndex
           href="/connect/pay"
           title="Pay"
-          description="Easily integrate fiat onramps and cross-chain crypto purchases"
+          description="Add fiat and cross-chain crypto payments in your apps"
           icon={PayIcon}
         />
         <ComingSoonWrapper>
@@ -87,7 +82,7 @@ function ArticleCardIndex(props: {
   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"
+      className="flex items-center gap-4 rounded-lg border p-4 transition-colors hover:border-ring hover:bg-ring/20 min-h-32"
     >
       {props.icon && <props.icon className="size-10 shrink-0" />}
       <div className="flex flex-col gap-1">

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

@@ -6,7 +6,7 @@ import { ThirdwebProvider } from "thirdweb/react";
 
 export const Providers: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
-    <ThemeProvider attribute="class" enableSystem>
+    <ThemeProvider attribute="class" defaultTheme="dark">
       <ThirdwebProvider>{children}</ThirdwebProvider>
     </ThemeProvider>
   );

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

@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect } from "react";
+import {
+  useActiveAccount,
+  useActiveWallet,
+  useConnect,
+  useDisconnect,
+} from "thirdweb/react";
+import { shortenAddress } from "thirdweb/utils";
+import { createWallet } from "thirdweb/wallets";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+import { StyledConnectButton } from "../styled-connect-button";
+import { Button } from "../ui/button";
+import { chain } from "./constants";
+
+export function ConnectSmartAccountPreview() {
+  // force disconnect if not smart wallet already
+  const wallet = useActiveWallet();
+  const { disconnect } = useDisconnect();
+  useEffect(() => {
+    if (wallet && wallet.id !== "smart") {
+      disconnect(wallet);
+    }
+  }, [wallet, disconnect]);
+  return (
+    <div className="flex flex-col">
+      <StyledConnectButton
+        accountAbstraction={{
+          chain,
+          sponsorGas: true,
+        }}
+      />
+    </div>
+  );
+}
+
+export function ConnectSmartAccountCustomPreview() {
+  const account = useActiveAccount();
+  const wallet = useActiveWallet();
+  const connectMutation = useConnect({
+    client: THIRDWEB_CLIENT,
+    accountAbstraction: { chain, sponsorGas: true },
+  });
+  const { disconnect } = useDisconnect();
+
+  const connect = async () => {
+    const wallet = await connectMutation.connect(async () => {
+      const adminWallet = createWallet("io.metamask");
+      await adminWallet.connect({
+        client: THIRDWEB_CLIENT,
+      });
+      return adminWallet;
+    });
+    return wallet;
+  };
+
+  return (
+    <div className="flex flex-col">
+      {account && wallet ? (
+        <>
+          <p className="py-4">Connected as {shortenAddress(account.address)}</p>
+          <Button variant={"outline"} onClick={() => disconnect(wallet)}>
+            Disconnect
+          </Button>
+        </>
+      ) : (
+        <Button variant={"default"} onClick={connect}>
+          Connect (metamask)
+        </Button>
+      )}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,92 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect } from "react";
+import { claimTo, getNFT, getOwnedNFTs } from "thirdweb/extensions/erc1155";
+import {
+  MediaRenderer,
+  TransactionButton,
+  useActiveAccount,
+  useActiveWallet,
+  useDisconnect,
+  useReadContract,
+} from "thirdweb/react";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+import { CodeExample } from "../code/code-example";
+import { editionDropContract, editionDropTokenId } from "./constants";
+
+export function SponsoredTxPreview() {
+  const wallet = useActiveWallet();
+  const { disconnect } = useDisconnect();
+  useEffect(() => {
+    if (wallet && wallet.id !== "smart") {
+      disconnect(wallet);
+    }
+  }, [wallet, disconnect]);
+  const { theme } = useTheme();
+  const smartAccount = useActiveAccount();
+  const { data: nft, isLoading: isNftLoading } = useReadContract(getNFT, {
+    contract: editionDropContract,
+    tokenId: editionDropTokenId,
+  });
+  const { data: ownedNfts } = useReadContract(getOwnedNFTs, {
+    contract: editionDropContract,
+    // biome-ignore lint/style/noNonNullAssertion: handled by queryOptions
+    address: smartAccount?.address!,
+    queryOptions: { enabled: !!smartAccount },
+  });
+
+  return (
+    <div className="flex flex-col">
+      {isNftLoading ? (
+        <div className="w-full mt-24">Loading...</div>
+      ) : (
+        <>
+          {nft ? (
+            <MediaRenderer
+              client={THIRDWEB_CLIENT}
+              src={nft.metadata.image}
+              style={{ width: "100%", marginTop: "10px" }}
+            />
+          ) : null}
+          {smartAccount ? (
+            <>
+              <p className="font-semibold text-center mb-2">
+                You own {ownedNfts?.[0]?.quantityOwned.toString() || "0"}{" "}
+                Kittens
+              </p>
+              <TransactionButton
+                transaction={() =>
+                  claimTo({
+                    contract: editionDropContract,
+                    tokenId: editionDropTokenId,
+                    to: smartAccount.address,
+                    quantity: 1n,
+                  })
+                }
+                onError={(error) => {
+                  alert(`Error: ${error.message}`);
+                }}
+                onTransactionConfirmed={async () => {
+                  alert("Minted successful!");
+                }}
+              >
+                Mint
+              </TransactionButton>
+            </>
+          ) : (
+            <p
+              style={{
+                textAlign: "center",
+                width: "100%",
+                marginTop: "10px",
+              }}
+            >
+              Login to mint this Kitten!
+            </p>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -1,8 +1,3 @@
-// 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";
@@ -14,22 +9,17 @@ export type CodeProps = {
 };
 
 export const Code: React.FC<CodeProps> = async ({ code, lang }) => {
-  const formattedCode = await format(
-    `// @noErrors
-  ${code}`,
-    {
-      parser: "babel-ts",
-      plugins: [parserBabel, estree],
-      printWidth: 50,
-    },
-  );
+  const formattedCode = await format(code, {
+    parser: "babel-ts",
+    plugins: [parserBabel, estree],
+    printWidth: 50,
+  });
   const html = await codeToHtml(formattedCode, {
     lang: lang,
     themes: {
       light: "github-light",
       dark: "github-dark-default",
     },
-    transformers: [transformerTwoslash()],
   });
 
   return (

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

@@ -0,0 +1,33 @@
+"use client";
+
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { useTheme } from "next-themes";
+import { ConnectButton } from "thirdweb/react";
+import type { ConnectButtonProps } from "thirdweb/react";
+import { inAppWallet } from "thirdweb/wallets/in-app";
+import { chain } from "./constants";
+
+export function InAppConnectButton(
+  props?: Omit<ConnectButtonProps, "client" | "theme">,
+) {
+  const { theme } = useTheme();
+
+  return (
+    <ConnectButton
+      client={THIRDWEB_CLIENT}
+      theme={theme === "light" ? "light" : "dark"}
+      connectButton={{
+        label: "Sign in",
+      }}
+      wallets={[
+        inAppWallet({
+          smartAccount: {
+            chain,
+            sponsorGas: true,
+          },
+        }),
+      ]}
+      {...props}
+    />
+  );
+}

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

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

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

@@ -0,0 +1,91 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect } from "react";
+import { claimTo, getNFT, getOwnedNFTs } from "thirdweb/extensions/erc1155";
+import {
+  MediaRenderer,
+  TransactionButton,
+  useActiveAccount,
+  useActiveWallet,
+  useDisconnect,
+  useReadContract,
+} from "thirdweb/react";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+import { editionDropContract, editionDropTokenId } from "./constants";
+
+export function SponsoredInAppTxPreview() {
+  const wallet = useActiveWallet();
+  const { disconnect } = useDisconnect();
+  useEffect(() => {
+    if (wallet && wallet.id !== "inApp") {
+      disconnect(wallet);
+    }
+  }, [wallet, disconnect]);
+  const { theme } = useTheme();
+  const smartAccount = useActiveAccount();
+  const { data: nft, isLoading: isNftLoading } = useReadContract(getNFT, {
+    contract: editionDropContract,
+    tokenId: editionDropTokenId,
+  });
+  const { data: ownedNfts } = useReadContract(getOwnedNFTs, {
+    contract: editionDropContract,
+    // biome-ignore lint/style/noNonNullAssertion: handled by queryOptions
+    address: smartAccount?.address!,
+    queryOptions: { enabled: !!smartAccount },
+  });
+
+  return (
+    <div className="flex flex-col">
+      {isNftLoading ? (
+        <div className="w-full mt-24">Loading...</div>
+      ) : (
+        <>
+          {nft ? (
+            <MediaRenderer
+              client={THIRDWEB_CLIENT}
+              src={nft.metadata.image}
+              style={{ width: "100%", marginTop: "10px" }}
+            />
+          ) : null}
+          {smartAccount ? (
+            <>
+              <p className="font-semibold text-center mb-2">
+                You own {ownedNfts?.[0]?.quantityOwned.toString() || "0"}{" "}
+                Kittens
+              </p>
+              <TransactionButton
+                transaction={() =>
+                  claimTo({
+                    contract: editionDropContract,
+                    tokenId: editionDropTokenId,
+                    to: smartAccount.address,
+                    quantity: 1n,
+                  })
+                }
+                onError={(error) => {
+                  alert(`Error: ${error.message}`);
+                }}
+                onTransactionConfirmed={async () => {
+                  alert("Minted successful!");
+                }}
+              >
+                Mint
+              </TransactionButton>
+            </>
+          ) : (
+            <p
+              style={{
+                textAlign: "center",
+                width: "100%",
+                marginTop: "10px",
+              }}
+            >
+              Login to mint this Kitten!
+            </p>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { getContract } from "thirdweb";
+import { polygon } from "thirdweb/chains";
+import { claimTo } from "thirdweb/extensions/erc1155";
+import { TransactionButton, useActiveAccount } from "thirdweb/react";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+import { StyledConnectButton } from "../styled-connect-button";
+
+const contract = getContract({
+  address: "0x96B30d36f783c7BC68535De23147e2ce65788e93",
+  chain: polygon,
+  client: THIRDWEB_CLIENT,
+});
+
+export function PayTransactionButtonPreview() {
+  const account = useActiveAccount();
+  const { theme } = useTheme();
+
+  return account ? (
+    <TransactionButton
+      transaction={() => {
+        if (!account) throw new Error("No active account");
+        return claimTo({
+          contract,
+          quantity: 1n,
+          tokenId: 0n,
+          to: account?.address,
+        });
+      }}
+      payModal={{
+        theme: theme === "light" ? "light" : "dark",
+      }}
+    >
+      Buy for 10 MATIC
+    </TransactionButton>
+  ) : (
+    <StyledConnectButton />
+  );
+}

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

@@ -0,0 +1,47 @@
+"use client";
+
+import {
+  useActiveAccount,
+  useActiveWallet,
+  useConnect,
+  useDisconnect,
+} from "thirdweb/react";
+import { shortenAddress } from "thirdweb/utils";
+import { createWallet } from "thirdweb/wallets";
+import { THIRDWEB_CLIENT } from "../../lib/client";
+import { Button } from "../ui/button";
+
+export function HooksPreview() {
+  const account = useActiveAccount();
+  const wallet = useActiveWallet();
+  const connectMutation = useConnect();
+  const { disconnect } = useDisconnect();
+
+  const connect = async () => {
+    const wallet = await connectMutation.connect(async () => {
+      const adminWallet = createWallet("io.metamask");
+      await adminWallet.connect({
+        client: THIRDWEB_CLIENT,
+      });
+      return adminWallet;
+    });
+    return wallet;
+  };
+
+  return (
+    <div className="flex flex-col">
+      {account && wallet ? (
+        <>
+          <p className="py-4">Connected as {shortenAddress(account.address)}</p>
+          <Button variant={"outline"} onClick={() => disconnect(wallet)}>
+            Disconnect
+          </Button>
+        </>
+      ) : (
+        <Button variant={"default"} onClick={connect}>
+          Connect with Metamask
+        </Button>
+      )}
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { useTheme } from "next-themes";
+import { getContract } from "thirdweb";
+import { polygon } from "thirdweb/chains";
+import { claimTo } from "thirdweb/extensions/erc1155";
+import { TransactionButton, useActiveAccount } from "thirdweb/react";
+import { StyledConnectButton } from "./styled-connect-button";
+
+const contract = getContract({
+  address: "0x96B30d36f783c7BC68535De23147e2ce65788e93",
+  chain: polygon,
+  client: THIRDWEB_CLIENT,
+});
+
+export function StyledPayTransaction() {
+  const account = useActiveAccount();
+  const { theme } = useTheme();
+
+  return account ? (
+    <TransactionButton
+      transaction={() => {
+        if (!account) throw new Error("No active account");
+        return claimTo({
+          contract,
+          quantity: 1n,
+          tokenId: 0n,
+          to: account?.address,
+        });
+      }}
+      payModal={{
+        theme: theme === "light" ? "light" : "dark",
+      }}
+    >
+      Buy for 10 MATIC
+    </TransactionButton>
+  ) : (
+    <StyledConnectButton />
+  );
+}

apps/playground-web/tsconfig.json

@@ -1,10 +1,6 @@
 {
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -22,19 +18,10 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     },
-    "target": "ES2017"
+    "target": "ES2020"
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

biome.json

@@ -22,6 +22,7 @@
       "packages/thirdweb/src/crypto/aes/lib/md5.ts",
       "packages/thirdweb/src/utils/promise/p-limit.ts",
       "packages/thirdweb/src/utils/bytecode/cbor-decode.ts",
+      "packages/thirdweb/src/wallets/in-app/native/helpers/wallet/sss.ts",
       "packages/thirdweb/src/**/__generated__/**"
     ]
   },

legacy_e2e/bundlers/swc/package.json

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@swc/cli": "0.3.10",
-    "@swc/core": "^1.4.12",
+    "@swc/core": "^1.5.24",
     "ora": "^6.3.1"
   }
 }

legacy_packages/auth/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @thirdweb-dev/auth
 
+## 4.1.92
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/wallets@2.5.34
+
+## 4.1.91
+
+### Patch Changes
+
+- Updated dependencies [[`5698b0c`](https://github.com/thirdweb-dev/js/commit/5698b0c5a9779830fa2d2582e551d050427c6254), [`913f99a`](https://github.com/thirdweb-dev/js/commit/913f99a9a4d002b82fcd9e55db41c64aab99cf83), [`d2cbb1e`](https://github.com/thirdweb-dev/js/commit/d2cbb1ee7ebe5aea9021d5be57cd80abd1df7a1c)]:
+  - @thirdweb-dev/wallets@2.5.33
+
+## 4.1.90
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/wallets@2.5.32
+
+## 4.1.89
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/wallets@2.5.31
+
+## 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

legacy_packages/auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/auth",
-  "version": "4.1.86",
+  "version": "4.1.92",
   "main": "dist/thirdweb-dev-auth.cjs.js",
   "module": "dist/thirdweb-dev-auth.esm.js",
   "browser": {
@@ -85,7 +85,7 @@
     "@microsoft/tsdoc": "^0.14.2",
     "@preconstruct/cli": "2.7.0",
     "@swc-node/register": "^1.9.0",
-    "@swc/core": "^1.4.12",
+    "@swc/core": "^1.5.24",
     "@thirdweb-dev/tsconfig": "workspace:*",
     "@types/cookie": "^0.6.0",
     "@types/cookie-parser": "^1.4.7",

legacy_packages/chains/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @thirdweb-dev/chains
 
+## 0.1.118
+
+### Patch Changes
+
+- [#3279](https://github.com/thirdweb-dev/js/pull/3279) [`9f42e4d`](https://github.com/thirdweb-dev/js/commit/9f42e4d2412df536d1b5f03a4e2a8b516911facb) Thanks [@github-actions](https://github.com/apps/github-actions)! - Synced Chains Package
+
+## 0.1.117
+
+### Patch Changes
+
+- [#3222](https://github.com/thirdweb-dev/js/pull/3222) [`efae2f3`](https://github.com/thirdweb-dev/js/commit/efae2f36b60e0bcade159608903c9b756843151c) Thanks [@github-actions](https://github.com/apps/github-actions)! - Synced Chains Package
+
+## 0.1.116
+
+### Patch Changes
+
+- [#3168](https://github.com/thirdweb-dev/js/pull/3168) [`f13a40b`](https://github.com/thirdweb-dev/js/commit/f13a40ba9905a05d02640aa6672557f53567b087) Thanks [@github-actions](https://github.com/apps/github-actions)! - Synced Chains Package
+
+## 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

legacy_packages/chains/chains/1.ts

@@ -14,7 +14,13 @@ export default {
     {
       "name": "blockscout",
       "url": "https://eth.blockscout.com",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
     },
     {
       "name": "dexguru",

legacy_packages/chains/chains/10.ts

@@ -11,7 +11,13 @@ export default {
     {
       "name": "blockscout",
       "url": "https://optimism.blockscout.com",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
     },
     {
       "name": "dexguru",

legacy_packages/chains/chains/100.ts

@@ -6,7 +6,13 @@ export default {
     {
       "name": "blockscout",
       "url": "https://gnosis.blockscout.com",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
     },
     {
       "name": "gnosisscan",
@@ -30,6 +36,12 @@ export default {
     "https://stakely.io/faucet/gnosis-chain-xdai",
     "https://faucet.prussia.dev/xdai"
   ],
+  "icon": {
+    "url": "ipfs://bafybeidk4swpgdyqmpz6shd5onvpaujvwiwthrhypufnwr6xh3dausz2dm",
+    "width": 1800,
+    "height": 1800,
+    "format": "png"
+  },
   "infoURL": "https://docs.gnosischain.com",
   "name": "Gnosis",
   "nativeCurrency": {

legacy_packages/chains/chains/100011.ts

@@ -0,0 +1,26 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "QuarkChain",
+  "chainId": 100011,
+  "explorers": [],
+  "faucets": [],
+  "infoURL": "https://www.quarkchain.io",
+  "name": "QuarkChain L2 Mainnet",
+  "nativeCurrency": {
+    "name": "QKC",
+    "symbol": "QKC",
+    "decimals": 18
+  },
+  "networkId": 100011,
+  "parent": {
+    "type": "L2",
+    "chain": "eip155-100000"
+  },
+  "rpc": [
+    "https://100011.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://mainnet-l2-ethapi.quarkchain.io"
+  ],
+  "shortName": "qkc-l2",
+  "slug": "quarkchain-l2",
+  "testnet": false
+} as const satisfies Chain;

legacy_packages/chains/chains/100100.ts

@@ -4,6 +4,12 @@ export default {
   "chainId": 100100,
   "explorers": [],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://bafybeidk4swpgdyqmpz6shd5onvpaujvwiwthrhypufnwr6xh3dausz2dm",
+    "width": 1800,
+    "height": 1800,
+    "format": "png"
+  },
   "infoURL": "https://docs.gnosischain.com",
   "name": "Deprecated CHI",
   "nativeCurrency": {

legacy_packages/chains/chains/1008.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "eurusexplorer",
       "url": "https://explorer.eurus.network",
-      "standard": "none"
+      "standard": "none",
+      "icon": {
+        "url": "ipfs://QmaGd5L9jGPbfyGXBFhu9gjinWJ66YtNrXq8x6Q98Eep9e",
+        "width": 471,
+        "height": 471,
+        "format": "svg"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmaGd5L9jGPbfyGXBFhu9gjinWJ66YtNrXq8x6Q98Eep9e",
+    "width": 471,
+    "height": 471,
+    "format": "svg"
+  },
   "infoURL": "https://eurus.network",
   "name": "Eurus Mainnet",
   "nativeCurrency": {

legacy_packages/chains/chains/1011.ts

@@ -6,15 +6,33 @@ export default {
     {
       "name": "Rebus EVM Explorer (Blockscout)",
       "url": "https://evm.rebuschain.com",
-      "standard": "none"
+      "standard": "none",
+      "icon": {
+        "url": "ipfs://bafkreifzag46dhp33vb2uldg4htqbqipuqrapjga6ml6pnhn5yibbvb4gq",
+        "width": 512,
+        "height": 512,
+        "format": "png"
+      }
     },
     {
       "name": "Rebus Cosmos Explorer (ping.pub)",
       "url": "https://cosmos.rebuschain.com",
-      "standard": "none"
+      "standard": "none",
+      "icon": {
+        "url": "ipfs://bafkreifzag46dhp33vb2uldg4htqbqipuqrapjga6ml6pnhn5yibbvb4gq",
+        "width": 512,
+        "height": 512,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://bafkreifzag46dhp33vb2uldg4htqbqipuqrapjga6ml6pnhn5yibbvb4gq",
+    "width": 512,
+    "height": 512,
+    "format": "png"
+  },
   "infoURL": "https://www.rebuschain.com",
   "name": "Rebus Mainnet",
   "nativeCurrency": {

legacy_packages/chains/chains/10200.ts

@@ -6,12 +6,24 @@ export default {
     {
       "name": "blockscout",
       "url": "https://gnosis-chiado.blockscout.com",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
     }
   ],
   "faucets": [
     "https://gnosisfaucet.com"
   ],
+  "icon": {
+    "url": "ipfs://bafybeidk4swpgdyqmpz6shd5onvpaujvwiwthrhypufnwr6xh3dausz2dm",
+    "width": 1800,
+    "height": 1800,
+    "format": "png"
+  },
   "infoURL": "https://docs.gnosischain.com",
   "name": "Gnosis Chiado Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/102031.ts

@@ -6,7 +6,13 @@ export default {
     {
       "name": "blockscout",
       "url": "https://creditcoin-testnet.blockscout.com",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],

legacy_packages/chains/chains/10222.ts

@@ -0,0 +1,41 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "GLC",
+  "chainId": 10222,
+  "explorers": [
+    {
+      "name": "GLScan Explorer",
+      "url": "https://glscan.io",
+      "standard": "none",
+      "icon": {
+        "url": "ipfs://QmTw21p6UfXVH2BCU81G2Ck28ecoknz4v9mC35fF8Z987i",
+        "width": 512,
+        "height": 557,
+        "format": "png"
+      }
+    }
+  ],
+  "faucets": [],
+  "icon": {
+    "url": "ipfs://QmTw21p6UfXVH2BCU81G2Ck28ecoknz4v9mC35fF8Z987i",
+    "width": 512,
+    "height": 557,
+    "format": "png"
+  },
+  "infoURL": "https://glscan.io/",
+  "name": "GLScan",
+  "nativeCurrency": {
+    "name": "GLC",
+    "symbol": "GLC",
+    "decimals": 18
+  },
+  "networkId": 10222,
+  "rpc": [
+    "https://10222.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://glc-dataseed.glscan.io/"
+  ],
+  "shortName": "glc",
+  "slip44": 1,
+  "slug": "glscan",
+  "testnet": false
+} as const satisfies Chain;

legacy_packages/chains/chains/10242.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "blockscout",
       "url": "https://explorer.arthera.net",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmYQp3e52KjkT4bYdAvB6ACEEpXs2D8DozsDitaADRY2Ak",
+    "width": 1024,
+    "height": 998,
+    "format": "png"
+  },
   "infoURL": "https://docs.arthera.net/build/developing-sc/using-hardhat",
   "name": "Arthera Mainnet",
   "nativeCurrency": {

legacy_packages/chains/chains/10243.ts

@@ -6,12 +6,24 @@ export default {
     {
       "name": "blockscout",
       "url": "https://explorer-test.arthera.net",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
     }
   ],
   "faucets": [
     "https://faucet.arthera.net"
   ],
+  "icon": {
+    "url": "ipfs://QmYQp3e52KjkT4bYdAvB6ACEEpXs2D8DozsDitaADRY2Ak",
+    "width": 1024,
+    "height": 998,
+    "format": "png"
+  },
   "infoURL": "https://docs.arthera.net",
   "name": "Arthera Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/103.ts

@@ -10,6 +10,12 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmYZNTfK3byhgLsTjXP8vPubVHRz2CWsBrTJxZrQmKq6JZ",
+    "width": 3509,
+    "height": 2482,
+    "format": "png"
+  },
   "infoURL": "https://worldland.foundation",
   "name": "WorldLand Mainnet",
   "nativeCurrency": {

legacy_packages/chains/chains/10395.ts

@@ -10,6 +10,12 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmYZNTfK3byhgLsTjXP8vPubVHRz2CWsBrTJxZrQmKq6JZ",
+    "width": 3509,
+    "height": 2482,
+    "format": "png"
+  },
   "infoURL": "https://worldland.foundation",
   "name": "WorldLand Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/104.ts

@@ -6,7 +6,13 @@ export default {
     {
       "name": "kaibascan",
       "url": "https://kaibascan.io",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://bafybeihbsw3ky7yf6llpww6fabo4dicotcgwjpefscoxrppstjx25dvtea",
+        "width": 932,
+        "height": 932,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],

legacy_packages/chains/chains/10507.ts

@@ -10,6 +10,12 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://bafkreie3ba6ofosjqqiya6empkyw6u5xdrtcfzi2evvyt4u6utzeiezyhi",
+    "width": 1500,
+    "height": 1500,
+    "format": "png"
+  },
   "infoURL": "https://numbersprotocol.io",
   "name": "Numbers Mainnet",
   "nativeCurrency": {

legacy_packages/chains/chains/10508.ts

@@ -13,6 +13,12 @@ export default {
     "https://faucet.avax.network/?subnet=num",
     "https://faucet.num.network"
   ],
+  "icon": {
+    "url": "ipfs://bafkreie3ba6ofosjqqiya6empkyw6u5xdrtcfzi2evvyt4u6utzeiezyhi",
+    "width": 1500,
+    "height": 1500,
+    "format": "png"
+  },
   "infoURL": "https://numbersprotocol.io",
   "name": "Numbers Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/106.ts

@@ -10,6 +10,12 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmNXiCXJxEeBd7ZYGYjPSMTSdbDd2nfodLC677gUfk9ku5",
+    "width": 924,
+    "height": 800,
+    "format": "png"
+  },
   "infoURL": "https://velas.com",
   "name": "Velas EVM Mainnet",
   "nativeCurrency": {

legacy_packages/chains/chains/1071.ts

@@ -13,6 +13,12 @@ export default {
     "https://evm-toolkit.evm.testnet.shimmer.network",
     "https://evm-faucet.testnet.shimmer.network"
   ],
+  "icon": {
+    "url": "ipfs://bafkreibky2sy6qhi6arktayvologkrgu5kudpgdxfkx4uosbvmstz7v4di",
+    "width": 720,
+    "height": 720,
+    "format": "png"
+  },
   "infoURL": "https://shimmer.network",
   "name": "ShimmerEVM Testnet Deprecated",
   "nativeCurrency": {

legacy_packages/chains/chains/1072.ts

@@ -13,6 +13,12 @@ export default {
     "https://evm-toolkit.evm.testnet.shimmer.network",
     "https://evm-faucet.testnet.shimmer.network"
   ],
+  "icon": {
+    "url": "ipfs://bafkreibky2sy6qhi6arktayvologkrgu5kudpgdxfkx4uosbvmstz7v4di",
+    "width": 720,
+    "height": 720,
+    "format": "png"
+  },
   "infoURL": "https://shimmer.network",
   "name": "ShimmerEVM Testnet Deprecated 1072",
   "nativeCurrency": {

legacy_packages/chains/chains/1073.ts

@@ -13,6 +13,12 @@ export default {
     "https://evm-toolkit.evm.testnet.shimmer.network",
     "https://evm-faucet.testnet.shimmer.network"
   ],
+  "icon": {
+    "url": "ipfs://bafkreibky2sy6qhi6arktayvologkrgu5kudpgdxfkx4uosbvmstz7v4di",
+    "width": 720,
+    "height": 720,
+    "format": "png"
+  },
   "infoURL": "https://shimmer.network",
   "name": "ShimmerEVM Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/1075.ts

@@ -12,6 +12,12 @@ export default {
   "faucets": [
     "https://evm-toolkit.evm.testnet.iotaledger.net"
   ],
+  "icon": {
+    "url": "ipfs://bafkreibky2sy6qhi6arktayvologkrgu5kudpgdxfkx4uosbvmstz7v4di",
+    "width": 720,
+    "height": 720,
+    "format": "png"
+  },
   "infoURL": "https://www.iota.org",
   "name": "IOTA EVM Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/108160679.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Oraichain",
+  "chainId": 108160679,
+  "explorers": [],
+  "faucets": [],
+  "features": [
+    {
+      "name": "EIP155"
+    },
+    {
+      "name": "EIP1559"
+    }
+  ],
+  "infoURL": "https://orai.io",
+  "name": "Oraichain Mainnet",
+  "nativeCurrency": {
+    "name": "Oraichain Token",
+    "symbol": "ORAI",
+    "decimals": 18
+  },
+  "networkId": 108160679,
+  "rpc": [
+    "https://108160679.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://evm.orai.io"
+  ],
+  "shortName": "Oraichain",
+  "slug": "oraichain",
+  "testnet": false,
+  "title": "Oraichain Mainnet"
+} as const satisfies Chain;

legacy_packages/chains/chains/10823.ts

@@ -10,6 +10,12 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmPw1ixYYeXvTiRWoCt2jWe4YMd3B5o7TzL18SBEHXvhXX",
+    "width": 200,
+    "height": 200,
+    "format": "png"
+  },
   "infoURL": "https://www.cryptocoinpay.co",
   "name": "CryptoCoinPay",
   "nativeCurrency": {

legacy_packages/chains/chains/10849.ts

@@ -2,9 +2,19 @@ import type { Chain } from "../src/types";
 export default {
   "chain": "Avalanche",
   "chainId": 10849,
-  "explorers": [],
+  "explorers": [
+    {
+      "name": "Lamina1 Explorer",
+      "url": "https://subnets.avax.network/lamina1",
+      "standard": "EIP3091"
+    }
+  ],
   "faucets": [],
-  "features": [],
+  "features": [
+    {
+      "name": "EIP1559"
+    }
+  ],
   "icon": {
     "url": "https://images.ctfassets.net/9bazykntljf6/62CceHSYsRS4D9fgDSkLRB/877cb8f26954e1743ff535fd7fdaf78f/avacloud-placeholder.svg",
     "width": 256,
@@ -25,6 +35,7 @@ export default {
     "https://subnets.avax.network/lamina1/mainnet/rpc"
   ],
   "shortName": "Lamina1",
+  "slip44": 1,
   "slug": "lamina1",
   "testnet": false
 } as const satisfies Chain;

legacy_packages/chains/chains/10850.ts

@@ -2,9 +2,19 @@ import type { Chain } from "../src/types";
 export default {
   "chain": "Avalanche",
   "chainId": 10850,
-  "explorers": [],
+  "explorers": [
+    {
+      "name": "Lamina1 Identity Explorer",
+      "url": "https://subnets.avax.network/lamina1id",
+      "standard": "EIP3091"
+    }
+  ],
   "faucets": [],
-  "features": [],
+  "features": [
+    {
+      "name": "EIP1559"
+    }
+  ],
   "icon": {
     "url": "https://images.ctfassets.net/9bazykntljf6/62CceHSYsRS4D9fgDSkLRB/877cb8f26954e1743ff535fd7fdaf78f/avacloud-placeholder.svg",
     "width": 256,
@@ -25,6 +35,7 @@ export default {
     "https://subnets.avax.network/lamina1id/mainnet/rpc"
   ],
   "shortName": "Lamina1 Identity",
+  "slip44": 1,
   "slug": "lamina1-identity",
   "testnet": false
 } as const satisfies Chain;

legacy_packages/chains/chains/1089.ts

@@ -6,7 +6,13 @@ export default {
     {
       "name": "explorer.guru",
       "url": "https://humans.explorers.guru",
-      "standard": "none"
+      "standard": "none",
+      "icon": {
+        "url": "ipfs://QmU83haX3TNifDDjBx6RP6ByqES1Kg9VqeJC87X9ipKyCS",
+        "width": 386,
+        "height": 397,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],

legacy_packages/chains/chains/109.ts

@@ -4,16 +4,23 @@ export default {
   "chainId": 109,
   "explorers": [
     {
-      "name": "shibariumscan",
+      "name": "Shibariumscan",
       "url": "https://www.shibariumscan.io",
-      "standard": "none"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "https://www.shibariumscan.io/assets/configs/network_icon_dark.png",
+        "width": 360,
+        "height": 360,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],
+  "features": [],
   "icon": {
-    "url": "ipfs://QmYNVkoZgRjDBQzJz6kog9mA2yPzQFW2oSKvhnkwuBhLQE",
-    "width": 2000,
-    "height": 2000,
+    "url": "https://chewyswap.dog/images/chains/109.png",
+    "width": 200,
+    "height": 200,
     "format": "png"
   },
   "infoURL": "https://shibariumecosystem.com",
@@ -24,8 +31,10 @@ export default {
     "decimals": 18
   },
   "networkId": 109,
+  "redFlags": [],
   "rpc": [
     "https://109.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://rpc.shibrpc.com",
     "https://www.shibrpc.com"
   ],
   "shortName": "shibariumecosystem",

legacy_packages/chains/chains/10946.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "explorer",
       "url": "https://explorer.quadrans.io",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmZFiYHnE4TrezPz8wSap9nMxG6m98w4fv7ataj2TfLNck",
+        "width": 1024,
+        "height": 1024,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmZFiYHnE4TrezPz8wSap9nMxG6m98w4fv7ataj2TfLNck",
+    "width": 1024,
+    "height": 1024,
+    "format": "png"
+  },
   "infoURL": "https://quadrans.io",
   "name": "Quadrans Blockchain",
   "nativeCurrency": {

legacy_packages/chains/chains/10947.ts

@@ -6,12 +6,24 @@ export default {
     {
       "name": "explorer",
       "url": "https://explorer.testnet.quadrans.io",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmZFiYHnE4TrezPz8wSap9nMxG6m98w4fv7ataj2TfLNck",
+        "width": 1024,
+        "height": 1024,
+        "format": "png"
+      }
     }
   ],
   "faucets": [
     "https://faucetpage.quadrans.io"
   ],
+  "icon": {
+    "url": "ipfs://QmZFiYHnE4TrezPz8wSap9nMxG6m98w4fv7ataj2TfLNck",
+    "width": 1024,
+    "height": 1024,
+    "format": "png"
+  },
   "infoURL": "https://quadrans.io",
   "name": "Quadrans Blockchain Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/110011.ts

@@ -0,0 +1,26 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "QuarkChain",
+  "chainId": 110011,
+  "explorers": [],
+  "faucets": [],
+  "infoURL": "https://www.quarkchain.io",
+  "name": "QuarkChain L2 Testnet",
+  "nativeCurrency": {
+    "name": "QKC",
+    "symbol": "QKC",
+    "decimals": 18
+  },
+  "networkId": 110011,
+  "parent": {
+    "type": "L2",
+    "chain": "eip155-110000"
+  },
+  "rpc": [
+    "https://110011.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://testnet-l2-ethapi.quarkchain.io"
+  ],
+  "shortName": "qkc-l2-t",
+  "slug": "quarkchain-l2-testnet",
+  "testnet": true
+} as const satisfies Chain;

legacy_packages/chains/chains/1101.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "blockscout",
       "url": "https://zkevm.polygonscan.com",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmNmJZkQgx9RcFLS3rvxQTVYcPfyAFPr667keHTUxB9PDv",
+        "width": 122,
+        "height": 135,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmNmJZkQgx9RcFLS3rvxQTVYcPfyAFPr667keHTUxB9PDv",
+    "width": 122,
+    "height": 135,
+    "format": "png"
+  },
   "infoURL": "https://polygon.technology/polygon-zkevm",
   "name": "Polygon zkEVM",
   "nativeCurrency": {

legacy_packages/chains/chains/111.ts

@@ -6,6 +6,12 @@ export default {
   "faucets": [
     "https://etherlite.org/faucets"
   ],
+  "icon": {
+    "url": "ipfs://QmbNAai1KnBnw4SPQKgrf6vBddifPCQTg2PePry1bmmZYy",
+    "width": 88,
+    "height": 88,
+    "format": "png"
+  },
   "infoURL": "https://etherlite.org",
   "name": "EtherLite Chain",
   "nativeCurrency": {

legacy_packages/chains/chains/111000.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "Siberium Testnet Explorer - blockscout",
       "url": "https://explorer.test.siberium.net",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYeMdWDZ1iaBFeSPorRyPi7RuSXTdDKTgW3rfnUf3W5ne",
+        "width": 512,
+        "height": 512,
+        "format": "svg"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmYeMdWDZ1iaBFeSPorRyPi7RuSXTdDKTgW3rfnUf3W5ne",
+    "width": 512,
+    "height": 512,
+    "format": "svg"
+  },
   "infoURL": "https://siberium.net",
   "name": "Siberium Test Network",
   "nativeCurrency": {

legacy_packages/chains/chains/111111.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "Siberium Mainnet Explorer - blockscout - 2",
       "url": "https://explorer.main.siberium.net.ru",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYeMdWDZ1iaBFeSPorRyPi7RuSXTdDKTgW3rfnUf3W5ne",
+        "width": 512,
+        "height": 512,
+        "format": "svg"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmYeMdWDZ1iaBFeSPorRyPi7RuSXTdDKTgW3rfnUf3W5ne",
+    "width": 512,
+    "height": 512,
+    "format": "svg"
+  },
   "infoURL": "https://siberium.net",
   "name": "Siberium Network",
   "nativeCurrency": {

legacy_packages/chains/chains/111188.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "blockscout",
       "url": "https://explorer.re.al",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmNUmWC7jNEBcTs6ZqkrQ5vMAQG8qjq7n3FcZnXvJZLoQ9",
+        "width": 301,
+        "height": 302,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmNUmWC7jNEBcTs6ZqkrQ5vMAQG8qjq7n3FcZnXvJZLoQ9",
+    "width": 301,
+    "height": 302,
+    "format": "png"
+  },
   "infoURL": "https://re.al",
   "name": "re.al",
   "nativeCurrency": {

legacy_packages/chains/chains/111223.ts

@@ -0,0 +1,30 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 111223,
+  "explorers": [],
+  "faucets": [],
+  "features": [],
+  "icon": {
+    "url": "https://images.ctfassets.net/9bazykntljf6/62CceHSYsRS4D9fgDSkLRB/877cb8f26954e1743ff535fd7fdaf78f/avacloud-placeholder.svg",
+    "width": 256,
+    "height": 256,
+    "format": "svg"
+  },
+  "infoURL": "https://avacloud.io",
+  "name": "Chennai Testnet",
+  "nativeCurrency": {
+    "name": "Chennai Testnet Token",
+    "symbol": "ZOD",
+    "decimals": 18
+  },
+  "networkId": 111223,
+  "redFlags": [],
+  "rpc": [
+    "https://111223.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avax.network/chennai/testnet/rpc"
+  ],
+  "shortName": "Chennai Testnet",
+  "slug": "chennai-testnet",
+  "testnet": true
+} as const satisfies Chain;

legacy_packages/chains/chains/1113.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "B2 Hub Habitat Testnet Explorer",
       "url": "https://testnet-hub-explorer.bsquared.network",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmPV6ASrQDEkEW3g3ni7p2rJMPeciRLpEpvrAc1QfzVkx9",
+        "width": 640,
+        "height": 640,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmPV6ASrQDEkEW3g3ni7p2rJMPeciRLpEpvrAc1QfzVkx9",
+    "width": 640,
+    "height": 640,
+    "format": "png"
+  },
   "infoURL": "https://www.bsquared.network",
   "name": "B2 Hub Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/11155420.ts

@@ -6,7 +6,13 @@ export default {
     {
       "name": "opscout",
       "url": "https://optimism-sepolia.blockscout.com",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
     }
   ],
   "faucets": [

legacy_packages/chains/chains/111557560.ts

@@ -10,6 +10,12 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmR8NuaSqALStb95YsMsJRG2BoYkibjS1XE1pZFtvEkAXY",
+    "width": 213,
+    "height": 212,
+    "format": "svg"
+  },
   "infoURL": "https://cyber.co/",
   "name": "Cyber Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/1117.ts

@@ -12,6 +12,12 @@ export default {
   "faucets": [
     "https://faucet.dogcoin.network"
   ],
+  "icon": {
+    "url": "ipfs://QmZCadkExKThak3msvszZjo6UnAbUJKE61dAcg4TixuMC3",
+    "width": 160,
+    "height": 171,
+    "format": "png"
+  },
   "infoURL": "https://dogcoin.network",
   "name": "Dogcoin Mainnet",
   "nativeCurrency": {

legacy_packages/chains/chains/112.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "blockscout",
       "url": "https://coinbit-explorer.chain.sbcrypto.app",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmdaQRUbAXJGfHeJ8jaB8WVh8CCmHExq8VjvAfXpLWWQEo",
+    "width": 760,
+    "height": 760,
+    "format": "png"
+  },
   "infoURL": "https://crypto.stockbit.com/",
   "name": "Coinbit Mainnet",
   "nativeCurrency": {

legacy_packages/chains/chains/11227.ts

@@ -2,9 +2,19 @@ import type { Chain } from "../src/types";
 export default {
   "chain": "Avalanche",
   "chainId": 11227,
-  "explorers": [],
+  "explorers": [
+    {
+      "name": "JIRITSUTES Explorer",
+      "url": "https://subnets-test.avax.network/jiritsutes",
+      "standard": "EIP3091"
+    }
+  ],
   "faucets": [],
-  "features": [],
+  "features": [
+    {
+      "name": "EIP1559"
+    }
+  ],
   "icon": {
     "url": "https://images.ctfassets.net/9bazykntljf6/62CceHSYsRS4D9fgDSkLRB/877cb8f26954e1743ff535fd7fdaf78f/avacloud-placeholder.svg",
     "width": 256,

legacy_packages/chains/chains/1123.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "blockscout",
       "url": "https://testnet-explorer.bsquared.network",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmPV6ASrQDEkEW3g3ni7p2rJMPeciRLpEpvrAc1QfzVkx9",
+        "width": 640,
+        "height": 640,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmPV6ASrQDEkEW3g3ni7p2rJMPeciRLpEpvrAc1QfzVkx9",
+    "width": 640,
+    "height": 640,
+    "format": "png"
+  },
   "infoURL": "https://www.bsquared.network",
   "name": "B2 Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/112358.ts

@@ -6,7 +6,13 @@ export default {
     {
       "name": "blockscout",
       "url": "https://explorer.metachain.one",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],

legacy_packages/chains/chains/1135.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "blockscout",
       "url": "https://blockscout.lisk.com",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmVTS8jmWD5e7jVEn86wLjJsuMnc6s8fym3JbtE4etzSKf",
+    "width": 400,
+    "height": 400,
+    "format": "png"
+  },
   "infoURL": "https://lisk.com",
   "name": "Lisk",
   "nativeCurrency": {

legacy_packages/chains/chains/1147.ts

@@ -0,0 +1,36 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Flag",
+  "chainId": 1147,
+  "explorers": [
+    {
+      "name": "Flag Testnet Explorer",
+      "url": "https://testnet-explorer.flagscan.xyz",
+      "standard": "EIP3091"
+    }
+  ],
+  "faucets": [
+    "https://faucet.flagscan.xyz"
+  ],
+  "icon": {
+    "url": "ipfs://bafybeibcrxeavdxpwwmj4mc6hhp232nkrfbpvfpngcqux2v5rmoshycj3u",
+    "width": 500,
+    "height": 500,
+    "format": "png"
+  },
+  "infoURL": "https://testnet-explorer.flagscan.xyz",
+  "name": "Flag Testnet",
+  "nativeCurrency": {
+    "name": "Flag Testnet",
+    "symbol": "FLAG",
+    "decimals": 18
+  },
+  "networkId": 1147,
+  "rpc": [
+    "https://1147.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://testnet-rpc.flagscan.xyz"
+  ],
+  "shortName": "tFLAG",
+  "slug": "flag-testnet",
+  "testnet": true
+} as const satisfies Chain;

legacy_packages/chains/chains/11612.ts

@@ -12,6 +12,12 @@ export default {
   "faucets": [
     "https://faucet.sardisnetwork.com"
   ],
+  "icon": {
+    "url": "ipfs://QmdR9QJjQEh1mBnf2WbJfehverxiP5RDPWMtEECbDP2rc3",
+    "width": 512,
+    "height": 512,
+    "format": "png"
+  },
   "infoURL": "https://mysardis.com",
   "name": "Sardis Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/11888.ts

@@ -1,6 +1,6 @@
 import type { Chain } from "../src/types";
 export default {
-  "chain": "Santiment Intelligence Network",
+  "chain": "Santiment Intelligence Network DEPRECATED",
   "chainId": 11888,
   "explorers": [
     {
@@ -10,11 +10,17 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmPLMg5mYD8XRknvYbDkD2x7FXxYan7MPTeUWZC2CihwDM",
+    "width": 2048,
+    "height": 2048,
+    "format": "png"
+  },
   "infoURL": "https://sanr.app",
-  "name": "Santiment Intelligence Network",
+  "name": "Santiment Intelligence Network DEPRECATED",
   "nativeCurrency": {
-    "name": "SANR",
-    "symbol": "SANR",
+    "name": "SANold",
+    "symbol": "SANold",
     "decimals": 18
   },
   "networkId": 11888,
@@ -31,7 +37,8 @@ export default {
     "https://11888.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://sanrchain-node.santiment.net"
   ],
-  "shortName": "SAN",
-  "slug": "santiment-intelligence-network",
+  "shortName": "SANold",
+  "slug": "santiment-intelligence-network-deprecated",
+  "status": "deprecated",
   "testnet": false
 } as const satisfies Chain;

legacy_packages/chains/chains/119.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "enulsscan",
       "url": "https://evmscan.nuls.io",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYz8LK5WkUN8UwqKfWUjnyLuYqQZWihT7J766YXft4TSy",
+        "width": 26,
+        "height": 41,
+        "format": "svg"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmYz8LK5WkUN8UwqKfWUjnyLuYqQZWihT7J766YXft4TSy",
+    "width": 26,
+    "height": 41,
+    "format": "svg"
+  },
   "infoURL": "https://nuls.io",
   "name": "ENULS Mainnet",
   "nativeCurrency": {

legacy_packages/chains/chains/1197.ts

@@ -10,6 +10,12 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://bafybeiehps5cqdhqottu2efo4jeehwpkz5rbux3cjxd75rm6rjm4sgs2wi",
+    "width": 250,
+    "height": 250,
+    "format": "png"
+  },
   "infoURL": "https://iorachain.com",
   "name": "Iora Chain",
   "nativeCurrency": {

legacy_packages/chains/chains/120.ts

@@ -6,12 +6,24 @@ export default {
     {
       "name": "enulsscan",
       "url": "https://beta.evmscan.nuls.io",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYz8LK5WkUN8UwqKfWUjnyLuYqQZWihT7J766YXft4TSy",
+        "width": 26,
+        "height": 41,
+        "format": "svg"
+      }
     }
   ],
   "faucets": [
     "http://faucet.nuls.io"
   ],
+  "icon": {
+    "url": "ipfs://QmYz8LK5WkUN8UwqKfWUjnyLuYqQZWihT7J766YXft4TSy",
+    "width": 26,
+    "height": 41,
+    "format": "svg"
+  },
   "infoURL": "https://nuls.io",
   "name": "ENULS Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/12009.ts

@@ -10,6 +10,12 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmRegpZQBW4o1imYNsW3d27MQjygBSU23Gf6JKje26nvs7",
+    "width": 1251,
+    "height": 1251,
+    "format": "png"
+  },
   "infoURL": "https://satoshichain.net",
   "name": "SatoshiChain Mainnet",
   "nativeCurrency": {

legacy_packages/chains/chains/12020.ts

@@ -6,7 +6,13 @@ export default {
     {
       "name": "blockscout",
       "url": "https://explorer.aternoschain.com",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
     }
   ],
   "faucets": [

legacy_packages/chains/chains/1209.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "Saitascan explorer",
       "url": "https://saitascan.io",
-      "standard": "none"
+      "standard": "none",
+      "icon": {
+        "url": "ipfs://QmVFWTqfqnMXbiPKpDFucE9QSQ1SVsUWs4HxBqRGjgQCbu",
+        "width": 974,
+        "height": 263,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmVFWTqfqnMXbiPKpDFucE9QSQ1SVsUWs4HxBqRGjgQCbu",
+    "width": 974,
+    "height": 263,
+    "format": "png"
+  },
   "infoURL": "https://saitachain.com",
   "name": "SaitaBlockChain(SBC)",
   "nativeCurrency": {

legacy_packages/chains/chains/1210.ts

@@ -0,0 +1,38 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "CuckooAI",
+  "chainId": 1210,
+  "explorers": [
+    {
+      "name": "Cuckoo Sepolia Explorer",
+      "url": "https://testnet-scan.cuckoo.network",
+      "standard": "EIP3091"
+    }
+  ],
+  "faucets": [
+    "https://cuckoo.network/portal/faucet/"
+  ],
+  "icon": {
+    "url": "ipfs://QmZjVDfk56DjqkCPymaweJJaj9ASGjjgcwJ95XsFDzj9us",
+    "width": 512,
+    "height": 512,
+    "format": "png"
+  },
+  "infoURL": "https://cuckoo.network",
+  "name": "Cuckoo Sepolia",
+  "nativeCurrency": {
+    "name": "CuckooAI",
+    "symbol": "CAI",
+    "decimals": 18
+  },
+  "networkId": 1210,
+  "rpc": [
+    "https://1210.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://testnet-rpc.cuckoo.network",
+    "wss://testnet-rpc.cuckoo.network"
+  ],
+  "shortName": "caisepolia",
+  "slug": "cuckoo-sepolia",
+  "testnet": true,
+  "title": "Cuckoo AI Testnet Sepolia"
+} as const satisfies Chain;

legacy_packages/chains/chains/12123.ts

@@ -12,6 +12,12 @@ export default {
   "faucets": [
     "https://faucet.brcchain.io"
   ],
+  "icon": {
+    "url": "ipfs://QmX8qGX7xoZqYUpHxA85uZwQX2fgbTHvmddE1NfseDyBED",
+    "width": 512,
+    "height": 512,
+    "format": "png"
+  },
   "infoURL": "https://bridge.brcchain.io",
   "name": "BRC Chain Mainnet",
   "nativeCurrency": {

legacy_packages/chains/chains/1214.ts

@@ -6,10 +6,22 @@ export default {
     {
       "name": "Enter Explorer - Expenter",
       "url": "https://explorer.entercoin.net",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://Qmb2UYVc1MjLPi8vhszWRxqBJYoYkWQVxDJRSmtrgk6j2E",
+        "width": 64,
+        "height": 64,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://Qmb2UYVc1MjLPi8vhszWRxqBJYoYkWQVxDJRSmtrgk6j2E",
+    "width": 64,
+    "height": 64,
+    "format": "png"
+  },
   "infoURL": "https://entercoin.net",
   "name": "EnterChain Mainnet",
   "nativeCurrency": {

legacy_packages/chains/chains/122.ts

@@ -6,7 +6,13 @@ export default {
     {
       "name": "blockscout",
       "url": "https://explorer.fuse.io",
-      "standard": "EIP3091"
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
     }
   ],
   "faucets": [],

legacy_packages/chains/chains/1220.ts

@@ -25,6 +25,6 @@ export default {
     "https://testnet.flagscan.io"
   ],
   "shortName": "Flag",
-  "slug": "flag-testnet",
+  "slug": "flag-testnet-flag",
   "testnet": true
 } as const satisfies Chain;

legacy_packages/chains/chains/1221.ts

@@ -4,6 +4,12 @@ export default {
   "chainId": 1221,
   "explorers": [],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmeC4mKGbBpwmLfFxUSsareWkSWJomevUmex8ajjxo1zHx",
+    "width": 500,
+    "height": 500,
+    "format": "png"
+  },
   "infoURL": "https://www.cyclenetwork.io/",
   "name": "Cycle Network Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/1224.ts

@@ -10,6 +10,12 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmdGfvH9qfvbMXYKosS1nHbw3q5UtFJky4hdMDmmKDTx8Y",
+    "width": 250,
+    "height": 250,
+    "format": "png"
+  },
   "infoURL": "https://buildonhybrid.com",
   "name": "Hybrid Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/1229.ts

@@ -10,6 +10,12 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://QmeYpc2JfEsHa2Bh11SKRx3sgDtMeg6T8KpXNLepBEKnbJ",
+    "width": 128,
+    "height": 128,
+    "format": "png"
+  },
   "infoURL": "https://exzo.network",
   "name": "Exzo Network Mainnet",
   "nativeCurrency": {

legacy_packages/chains/chains/12321.ts

@@ -6,6 +6,12 @@ export default {
   "faucets": [
     "https://faucet.blgchain.com"
   ],
+  "icon": {
+    "url": "ipfs://QmUN5j2cre8GHKv52JE8ag88aAnRmuHMGFxePPvKMogisC",
+    "width": 512,
+    "height": 512,
+    "format": "svg"
+  },
   "infoURL": "https://blgchain.com",
   "name": "BLG Testnet",
   "nativeCurrency": {

legacy_packages/chains/chains/12324.ts

@@ -10,6 +10,12 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://Qmf1cim2ZvkgszKiFtmZj3K1z2YgVY7A4VtLkWw8kQxijq",
+    "width": 100,
+    "height": 100,
+    "format": "png"
+  },
   "infoURL": "https://l3x.com",
   "name": "L3X Protocol",
   "nativeCurrency": {

legacy_packages/chains/chains/12325.ts

@@ -10,6 +10,12 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://Qmf1cim2ZvkgszKiFtmZj3K1z2YgVY7A4VtLkWw8kQxijq",
+    "width": 100,
+    "height": 100,
+    "format": "png"
+  },
   "infoURL": "https://l3x.com",
   "name": "L3X Protocol Testnet",
   "nativeCurrency": {