Version Packages (#2195)

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

.github/workflows/release-artifacts.yml

@@ -0,0 +1,66 @@
+# On the Version Packages branch
+# Generate and Commit the Typedoc JSON files and the Snippets JSON files
+
+name: Commit Release Artifacts
+
+on:
+  push:
+    branches:
+      - changeset-release/main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release-artifacts:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v3
+
+      # bun setup is required, because pnpm typdoc will run pnpm build and some packages uses bun for build
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: 1.0.21
+
+      - name: Install
+        uses: ./.github/composite-actions/install
+
+      - name: Build
+        run: pnpm build
+
+      - name: Typedoc
+        run: pnpm typedoc
+
+      - name: Generate Docs
+        run: |
+          cd packages/sdk
+          pnpm generate-docs
+          cd ../react-core
+          pnpm generate-docs
+          cd ../react
+          pnpm generate-docs
+          cd ../..
+
+      - name: Generate Snippets
+        run: pnpm generate-snippets
+
+      - name: Commit changes
+        run: |
+          git config --local user.email "[email protected]"
+          git config --local user.name "GitHub Action"
+          git status
+          git add packages/react/typedoc/documentation.json
+          git add packages/react-core/typedoc/documentation.json
+          git add packages/react-native/typedoc/documentation.json
+          git add packages/sdk/typedoc/documentation.json
+          git add packages/storage/typedoc/documentation.json
+          git add packages/wallets/typedoc/documentation.json
+          git add snippets/feature_snippets_react.json
+          git add snippets/feature_snippets_sdk.json
+          git add snippets/snippets.json
+          git commit -m "Commit Release Artifacts [skip ci]"
+          git push
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -1,3 +1,6 @@
+# Using CUSTOM_GITHUB_TOKEN instead of GITHUB_TOKEN is required to trigger workflows in "Version Packages" PR created by changesets/action
+# CUSTOM_GITHUB_TOKEN should be a PAT with write access to the repo and has to be created and set as a secret in the repo manually
+
 name: Release Nightly & Stable
 
 on:
@@ -25,6 +28,8 @@ jobs:
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
+          # Do not use the GITHUB_TOKEN by default
+          token: ${{ secrets.CUSTOM_GITHUB_TOKEN }}
 
       - name: Setup bun
         uses: oven-sh/setup-bun@v1
@@ -46,7 +51,7 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.CUSTOM_GITHUB_TOKEN }}
 
       - name: Create @nightly release
         if: steps.changesets.outputs.published != 'true'
@@ -56,18 +61,4 @@ jobs:
           pnpm release:nightly
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Generate docs
-        if: steps.changesets.outputs.published == 'true'
-        run: |
-          pnpm typedoc
-          pnpm generate-docs
-          pnpm generate-snippets
-          git config --local user.email "[email protected]"
-          git config --local user.name "GitHub Action"
-          git add -A
-          git commit -m "doc automation: update JSON files [skip ci]"
-          git push
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.CUSTOM_GITHUB_TOKEN }}

package.json

@@ -15,7 +15,6 @@
     "e2e": "turbo run e2e",
     "build": "turbo run build --filter=./packages/*",
     "typedoc": "turbo run typedoc",
-    "generate-docs": "turbo run generate-docs",
     "generate-snippets": "node ./scripts/generate-snippets/index.mjs",
     "build:release": "turbo run build --force --filter=./packages/*",
     "dev": "turbo run dev --no-cache --parallel --continue",

packages/auth/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @thirdweb-dev/auth
 
+## 4.1.25
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/wallets@2.4.3
+
+## 4.1.24
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/wallets@2.4.2
+
 ## 4.1.23
 
 ### Patch Changes

packages/auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/auth",
-  "version": "4.1.23",
+  "version": "4.1.25",
   "main": "dist/thirdweb-dev-auth.cjs.js",
   "module": "dist/thirdweb-dev-auth.esm.js",
   "browser": {

packages/chains/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @thirdweb-dev/chains
 
+## 0.1.65
+
+### Patch Changes
+
+- [#2203](https://github.com/thirdweb-dev/js/pull/2203) [`3f2ee85a`](https://github.com/thirdweb-dev/js/commit/3f2ee85a1ab70e74aefe7f458379a2ccaf4058a9) Thanks [@iketw](https://github.com/iketw)! - Syncs Chains
+
+## 0.1.64
+
+### Patch Changes
+
+- [#2187](https://github.com/thirdweb-dev/js/pull/2187) [`e21f7bb1`](https://github.com/thirdweb-dev/js/commit/e21f7bb171334fa3003c954060e60c1ce8c1228f) Thanks [@gerrysaporito](https://github.com/gerrysaporito)! - synced chains package with chains db
+
 ## 0.1.63
 
 ### Patch Changes

packages/chains/chains/1001.ts

@@ -31,5 +31,5 @@ export default {
   "shortName": "Baobab",
   "slip44": 1,
   "slug": "klaytn-testnet-baobab",
-  "testnet": false
+  "testnet": true
 } as const satisfies Chain;

packages/chains/chains/11297108099.ts

@@ -4,9 +4,14 @@ export default {
   "chainId": 11297108099,
   "explorers": [
     {
-      "name": "Palm Testnet Explorer",
-      "url": "https://explorer.palm-uat.xyz",
+      "name": "Chainlens",
+      "url": "https://testnet.palm.chainlens.com",
       "standard": "EIP3091"
+    },
+    {
+      "name": "Dora",
+      "url": "https://www.ondora.xyz/network/palm-testnet",
+      "standard": "none"
     }
   ],
   "faucets": [],
@@ -16,7 +21,7 @@ export default {
     "height": 72,
     "format": "svg"
   },
-  "infoURL": "https://palm.io",
+  "infoURL": "https://palm.network",
   "name": "Palm Testnet",
   "nativeCurrency": {
     "name": "PALM",
@@ -27,7 +32,8 @@ export default {
   "rpc": [
     "https://palm-testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://11297108099.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
-    "https://palm-testnet.infura.io/v3/${INFURA_API_KEY}"
+    "https://palm-testnet.infura.io/v3/${INFURA_API_KEY}",
+    "https://palm-testnet.public.blastapi.io"
   ],
   "shortName": "tpalm",
   "slip44": 1,

packages/chains/chains/11297108109.ts

@@ -4,9 +4,14 @@ export default {
   "chainId": 11297108109,
   "explorers": [
     {
-      "name": "Palm Explorer",
-      "url": "https://explorer.palm.io",
+      "name": "Chainlens",
+      "url": "https://palm.chainlens.com",
       "standard": "EIP3091"
+    },
+    {
+      "name": "Dora",
+      "url": "https://www.ondora.xyz/network/palm",
+      "standard": "none"
     }
   ],
   "faucets": [],
@@ -16,7 +21,7 @@ export default {
     "height": 72,
     "format": "svg"
   },
-  "infoURL": "https://palm.io",
+  "infoURL": "https://palm.network",
   "name": "Palm",
   "nativeCurrency": {
     "name": "PALM",
@@ -27,7 +32,8 @@ export default {
   "rpc": [
     "https://palm.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://11297108109.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
-    "https://palm-mainnet.infura.io/v3/${INFURA_API_KEY}"
+    "https://palm-mainnet.infura.io/v3/${INFURA_API_KEY}",
+    "https://palm-mainnet.public.blastapi.io"
   ],
   "shortName": "palm",
   "slug": "palm",

packages/chains/chains/11437.ts

@@ -10,12 +10,6 @@ export default {
     }
   ],
   "faucets": [],
-  "icon": {
-    "url": "ipfs://QmUkFZC2ZmoYPTKf7AHdjwRPZoV2h1MCuHaGM4iu8SNFpi",
-    "width": 400,
-    "height": 400,
-    "format": "svg"
-  },
   "infoURL": "https://shyft.network",
   "name": "Shyft Testnet",
   "nativeCurrency": {

packages/chains/chains/129.ts

@@ -0,0 +1,37 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Jumbo",
+  "chainId": 129,
+  "explorers": [
+    {
+      "name": "ProtoJumbo",
+      "url": "https://protojumbo.jumbochain.org",
+      "standard": "EIP3091"
+    }
+  ],
+  "faucets": [
+    "https://protojumbo.jumbochain.org/faucet-smart"
+  ],
+  "features": [
+    {
+      "name": "EIP155"
+    }
+  ],
+  "infoURL": "https://jumbochain.org",
+  "name": "ProtoJumbo Testnet",
+  "nativeCurrency": {
+    "name": "JNFTC",
+    "symbol": "JNFTC",
+    "decimals": 18
+  },
+  "networkId": 129,
+  "rpc": [
+    "https://protojumbo-testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://129.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://testnode.jumbochain.org"
+  ],
+  "shortName": "ProtoJumbo",
+  "slip44": 1,
+  "slug": "protojumbo-testnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/1380012617.ts

@@ -0,0 +1,40 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Rari",
+  "chainId": 1380012617,
+  "explorers": [],
+  "faucets": [],
+  "features": [],
+  "icon": {
+    "url": "ipfs://QmUQWUvJxi5yNof638U42ihmUmfTzGiMaYgYatQqzvy3mr/rari.png",
+    "width": 512,
+    "height": 512,
+    "format": "png"
+  },
+  "infoURL": "https://rari-mainnet.caldera.dev/",
+  "name": "Rari Mainnet",
+  "nativeCurrency": {
+    "name": "Ether",
+    "symbol": "ETH",
+    "decimals": 18
+  },
+  "networkId": 1380012617,
+  "parent": {
+    "type": "L2",
+    "chain": "eip155-1",
+    "bridges": [
+      {
+        "url": "https://rari.calderabridge.xyz/"
+      }
+    ]
+  },
+  "redFlags": [],
+  "rpc": [
+    "https://rari.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://1380012617.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://rari.calderachain.xyz/http"
+  ],
+  "shortName": "rari",
+  "slug": "rari",
+  "testnet": false
+} as const satisfies Chain;

packages/chains/chains/1501.ts

@@ -4,8 +4,8 @@ export default {
   "chainId": 1501,
   "explorers": [
     {
-      "name": "bevm scan",
-      "url": "https://scan.bevm.io",
+      "name": "bevm canary scan",
+      "url": "https://scan-canary.bevm.io",
       "standard": "none"
     }
   ],
@@ -18,7 +18,7 @@ export default {
     "format": "png"
   },
   "infoURL": "https://chainx.org",
-  "name": "BEVM",
+  "name": "BEVM Canary",
   "nativeCurrency": {
     "name": "BTC",
     "symbol": "BTC",
@@ -27,12 +27,12 @@ export default {
   "networkId": 1501,
   "redFlags": [],
   "rpc": [
-    "https://bevm.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://bevm-canary.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://1501.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
-    "https://rpc-1.bevm.io/",
-    "https://rpc-2.bevm.io/"
+    "https://rpc-canary-1.bevm.io/",
+    "https://rpc-canary-2.bevm.io/"
   ],
   "shortName": "chainx",
-  "slug": "bevm",
+  "slug": "bevm-canary",
   "testnet": false
 } as const satisfies Chain;

packages/chains/chains/1701.ts

@@ -6,24 +6,12 @@ export default {
     {
       "name": "Anytype Explorer",
       "url": "https://explorer.anytype.io",
-      "standard": "EIP3091",
-      "icon": {
-        "url": "ipfs://QmaARJiAQUn4Z6wG8GLEry3kTeBB3k6RfHzSZU9SPhBgcG",
-        "width": 200,
-        "height": 200,
-        "format": "png"
-      }
+      "standard": "EIP3091"
     }
   ],
   "faucets": [
     "https://evm.anytype.io/faucet"
   ],
-  "icon": {
-    "url": "ipfs://QmaARJiAQUn4Z6wG8GLEry3kTeBB3k6RfHzSZU9SPhBgcG",
-    "width": 200,
-    "height": 200,
-    "format": "png"
-  },
   "infoURL": "https://evm.anytype.io",
   "name": "Anytype EVM Chain",
   "nativeCurrency": {

packages/chains/chains/1731313.ts

@@ -14,7 +14,7 @@ export default {
   "rpc": [
     "https://turkey-demo-dev.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://1731313.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
-    "https://blockscout-poa.huabeizhenxuan.com"
+    "https://devchain-poa.huabeizhenxuan.com"
   ],
   "shortName": "TDD",
   "slug": "turkey-demo-dev",

packages/chains/chains/18303.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 18303,
+  "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": "Zeroone Testnet",
+  "nativeCurrency": {
+    "name": "Zeroone Testnet Token",
+    "symbol": "ZERO",
+    "decimals": 18
+  },
+  "networkId": 18303,
+  "redFlags": [],
+  "rpc": [
+    "https://zeroone-testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://18303.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avax.network/zeroonetes/testnet/rpc"
+  ],
+  "shortName": "Zeroone Testnet",
+  "slug": "zeroone-testnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/1838.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 1838,
+  "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": "Traderlands Testnet",
+  "nativeCurrency": {
+    "name": "Traderlands Testnet Token",
+    "symbol": "TDL3",
+    "decimals": 18
+  },
+  "networkId": 1838,
+  "redFlags": [],
+  "rpc": [
+    "https://traderlands-testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://1838.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avax.network/traderland/testnet/rpc"
+  ],
+  "shortName": "Traderlands Testnet",
+  "slug": "traderlands-testnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/199.ts

@@ -10,7 +10,7 @@ export default {
     }
   ],
   "faucets": [],
-  "infoURL": "https:/bt.io",
+  "infoURL": "https://bt.io",
   "name": "BitTorrent Chain Mainnet",
   "nativeCurrency": {
     "name": "BitTorrent",
@@ -21,7 +21,7 @@ export default {
   "rpc": [
     "https://bittorrent-chain.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://199.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
-    "https://rpc.bittorrentchain.io/"
+    "https://rpc.bt.io"
   ],
   "shortName": "BTT",
   "slug": "bittorrent-chain",

packages/chains/chains/2016.ts

@@ -9,9 +9,7 @@ export default {
       "standard": "EIP3091"
     }
   ],
-  "faucets": [
-    "https://faucet.mainnetz.io"
-  ],
+  "faucets": [],
   "icon": {
     "url": "ipfs://QmT5gJ5weBiLT3GoYuF5yRTRLdPLCVZ3tXznfqW7M8fxgG",
     "width": 400,
@@ -21,7 +19,7 @@ export default {
   "infoURL": "https://mainnetz.io",
   "name": "MainnetZ Mainnet",
   "nativeCurrency": {
-    "name": "mainnetz",
+    "name": "MainnetZ",
     "symbol": "NetZ",
     "decimals": 18
   },
@@ -32,7 +30,7 @@ export default {
     "https://mainnet-rpc.mainnetz.io",
     "https://eu-rpc.mainnetz.io"
   ],
-  "shortName": "NetZm",
+  "shortName": "netz",
   "slug": "z-mainnet",
   "testnet": false
 } as const satisfies Chain;

packages/chains/chains/21758.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 21758,
+  "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": "FST 01-16 Multi",
+  "nativeCurrency": {
+    "name": "FST 01-16 Multi Token",
+    "symbol": "RUI",
+    "decimals": 18
+  },
+  "networkId": 21758,
+  "redFlags": [],
+  "rpc": [
+    "https://fst-01-16-multi.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://21758.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avax.network/defi-kingdoms/dfk-chain/rpc"
+  ],
+  "shortName": "FST 01-16 Multi",
+  "slug": "fst-01-16-multi",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/222000222.ts

@@ -3,6 +3,17 @@ export default {
   "chain": "Kanazawa",
   "chainId": 222000222,
   "explorers": [
+    {
+      "name": "explorer",
+      "url": "https://testnet.meldscan.io",
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmRhB4AbjDrhvwfSAQi2JvKirFiDWxzJvKEvG8S8AdDdED",
+        "width": 4000,
+        "height": 4000,
+        "format": "png"
+      }
+    },
     {
       "name": "explorer",
       "url": "https://subnets-test.avax.network/meld",
@@ -34,7 +45,7 @@ export default {
   "rpc": [
     "https://kanazawa.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://222000222.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
-    "https://subnets.avax.network/meld/testnet/rpc"
+    "https://testnet-rpc.meld.com"
   ],
   "shortName": "kanazawa",
   "slip44": 1,

packages/chains/chains/2221.ts

@@ -6,24 +6,12 @@ export default {
     {
       "name": "Kava Testnet Explorer",
       "url": "http://testnet.kavascan.com",
-      "standard": "EIP3091",
-      "icon": {
-        "url": "ipfs://QmdpRTk6oL1HRW9xC6cAc4Rnf9gs6zgdAcr4Z3HcLztusm",
-        "width": 1186,
-        "height": 360,
-        "format": "svg"
-      }
+      "standard": "EIP3091"
     }
   ],
   "faucets": [
     "https://faucet.kava.io"
   ],
-  "icon": {
-    "url": "ipfs://QmdpRTk6oL1HRW9xC6cAc4Rnf9gs6zgdAcr4Z3HcLztusm",
-    "width": 1186,
-    "height": 360,
-    "format": "svg"
-  },
   "infoURL": "https://www.kava.io",
   "name": "Kava Testnet",
   "nativeCurrency": {

packages/chains/chains/2222.ts

@@ -6,22 +6,10 @@ export default {
     {
       "name": "Kava EVM Explorer",
       "url": "https://kavascan.com",
-      "standard": "EIP3091",
-      "icon": {
-        "url": "ipfs://QmdpRTk6oL1HRW9xC6cAc4Rnf9gs6zgdAcr4Z3HcLztusm",
-        "width": 1186,
-        "height": 360,
-        "format": "svg"
-      }
+      "standard": "EIP3091"
     }
   ],
   "faucets": [],
-  "icon": {
-    "url": "ipfs://QmdpRTk6oL1HRW9xC6cAc4Rnf9gs6zgdAcr4Z3HcLztusm",
-    "width": 1186,
-    "height": 360,
-    "format": "svg"
-  },
   "infoURL": "https://www.kava.io",
   "name": "Kava",
   "nativeCurrency": {

packages/chains/chains/271.ts

@@ -9,9 +9,7 @@ export default {
       "standard": "EIP3091"
     }
   ],
-  "faucets": [
-    "https://faucet.egonscan.com"
-  ],
+  "faucets": [],
   "icon": {
     "url": "ipfs://QmNZiMmzMQYjyGtNSghtzLg4UooYhDgMQsa677DAP5KsBg",
     "width": 512,

packages/chains/chains/28122024.ts

@@ -0,0 +1,36 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Ancient8",
+  "chainId": 28122024,
+  "explorers": [
+    {
+      "name": "scan-testnet",
+      "url": "https://scanv2-testnet.ancient8.gg",
+      "standard": "EIP3091"
+    }
+  ],
+  "faucets": [],
+  "icon": {
+    "url": "ipfs://QmXLmYMqZ2ZKyaaEjayNjLai4RUo2YmorUDwkk95xmdTUr",
+    "width": 80,
+    "height": 80,
+    "format": "png"
+  },
+  "infoURL": "https://ancient8.gg/",
+  "name": "Ancient8 Testnet",
+  "nativeCurrency": {
+    "name": "Ether",
+    "symbol": "ETH",
+    "decimals": 18
+  },
+  "networkId": 28122024,
+  "rpc": [
+    "https://ancient8-testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://28122024.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://rpcv2-testnet.ancient8.gg"
+  ],
+  "shortName": "a8",
+  "slip44": 1,
+  "slug": "ancient8-testnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/2863311531.ts

@@ -11,13 +11,13 @@ export default {
   ],
   "faucets": [],
   "icon": {
-    "url": "ipfs://QmSX8sHToRzyFupT8BvPQjVsegRWFYz2mdnLkVnqBFKohY",
-    "width": 901,
-    "height": 901,
+    "url": "ipfs://QmXLmYMqZ2ZKyaaEjayNjLai4RUo2YmorUDwkk95xmdTUr",
+    "width": 80,
+    "height": 80,
     "format": "png"
   },
   "infoURL": "https://ancient8.gg/",
-  "name": "Ancient8 Testnet",
+  "name": "Ancient8 Testnet (deprecated)",
   "nativeCurrency": {
     "name": "Ether",
     "symbol": "ETH",
@@ -25,12 +25,13 @@ export default {
   },
   "networkId": 2863311531,
   "rpc": [
-    "https://ancient8-testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://ancient8-testnet-deprecated.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://2863311531.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://rpc-testnet.ancient8.gg"
   ],
-  "shortName": "a8",
+  "shortName": "a8old",
   "slip44": 1,
-  "slug": "ancient8-testnet",
+  "slug": "ancient8-testnet-deprecated",
+  "status": "deprecated",
   "testnet": true
 } as const satisfies Chain;

packages/chains/chains/28982.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 28982,
+  "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": "Testnet",
+  "nativeCurrency": {
+    "name": "Testnet Token",
+    "symbol": "RUI",
+    "decimals": 18
+  },
+  "networkId": 28982,
+  "redFlags": [],
+  "rpc": [
+    "https://testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://28982.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avax.network/defi-kingdoms/dfk-chain/rpc"
+  ],
+  "shortName": "Testnet",
+  "slug": "testnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/31414.ts

@@ -0,0 +1,37 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Evoke",
+  "chainId": 31414,
+  "explorers": [
+    {
+      "name": "Evoke SmartChain Testnet Explorer",
+      "url": "https://testnet-explorer.evokescan.org",
+      "standard": "EIP3091"
+    }
+  ],
+  "faucets": [
+    "https://faucet.evokescan.org"
+  ],
+  "icon": {
+    "url": "ipfs://bafkreia5q26knsvxgkwxze7woepvsqat5n2hodokh4ozzphmhexqez5s34",
+    "width": 100,
+    "height": 100,
+    "format": "png"
+  },
+  "infoURL": "https://testnet-explorer.evokescan.org",
+  "name": "Evoke Testnet",
+  "nativeCurrency": {
+    "name": "MTHN Testnet",
+    "symbol": "MTHN",
+    "decimals": 18
+  },
+  "networkId": 31414,
+  "rpc": [
+    "https://evoke-testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://31414.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://testnet-rpc.evokescan.org"
+  ],
+  "shortName": "tmthn",
+  "slug": "evoke-testnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/32001.ts

@@ -0,0 +1,42 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "ETH",
+  "chainId": 32001,
+  "explorers": [
+    {
+      "name": "W3Gamez Holesky Explorer",
+      "url": "https://w3gamez-holesky.web3games.com",
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmUc57w3UTHiWapNW9oQb1dP57ymtdemTTbpvGkjVHBRCo",
+        "width": 192,
+        "height": 192,
+        "format": "png"
+      }
+    }
+  ],
+  "faucets": [],
+  "icon": {
+    "url": "ipfs://QmaQdiE7vwxKeuWCjk4nKBikcpg4XCzQkFWGrAZHmMKnrq",
+    "width": 400,
+    "height": 400,
+    "format": "png"
+  },
+  "infoURL": "https://web3games.com/",
+  "name": "W3Gamez Holesky Testnet",
+  "nativeCurrency": {
+    "name": "W3Gamez Testnet Ether",
+    "symbol": "ETH",
+    "decimals": 18
+  },
+  "networkId": 32001,
+  "rpc": [
+    "https://w3gamez-holesky-testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://32001.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://rpc-holesky.w3gamez.network"
+  ],
+  "shortName": "w3gamez",
+  "slip44": 1,
+  "slug": "w3gamez-holesky-testnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/333000333.ts

@@ -3,6 +3,17 @@ export default {
   "chain": "MELD",
   "chainId": 333000333,
   "explorers": [
+    {
+      "name": "explorer",
+      "url": "https://meldscan.io",
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmRhB4AbjDrhvwfSAQi2JvKirFiDWxzJvKEvG8S8AdDdED",
+        "width": 4000,
+        "height": 4000,
+        "format": "png"
+      }
+    },
     {
       "name": "explorer",
       "url": "https://subnets.avax.network/meld",
@@ -34,7 +45,7 @@ export default {
   "rpc": [
     "https://meld.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://333000333.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
-    "https://subnets.avax.network/meld/mainnet/rpc"
+    "https://rpc-1.meld.com"
   ],
   "shortName": "meld",
   "slug": "meld",

packages/chains/chains/34.ts

@@ -9,9 +9,7 @@ export default {
       "standard": "EIP3091"
     }
   ],
-  "faucets": [
-    "https://faucet.securechain.ai"
-  ],
+  "faucets": [],
   "icon": {
     "url": "ipfs://Qme2Z8VFYjhHGfLQPBnfseNpEdRfmTDy7VXqrdH4AHETJf",
     "width": 150,

packages/chains/chains/35439.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 35439,
+  "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": "QI M 2401122",
+  "nativeCurrency": {
+    "name": "QI M 2401122 Token",
+    "symbol": "HZU",
+    "decimals": 18
+  },
+  "networkId": 35439,
+  "redFlags": [],
+  "rpc": [
+    "https://qi-m-2401122.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://35439.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avacloud-dev.io/f14d837e-de8f-446d-8222-0077f26e6694"
+  ],
+  "shortName": "QI M 2401122",
+  "slug": "qi-m-2401122",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/37714555429.ts

@@ -0,0 +1,42 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Xai Sepolia",
+  "chainId": 37714555429,
+  "explorers": [
+    {
+      "name": "blockscout",
+      "url": "https://testnet-explorer-v2.xai-chain.net/",
+      "standard": "EIP3091"
+    }
+  ],
+  "faucets": [],
+  "features": [],
+  "icon": {
+    "url": "ipfs://QmZKFekbHxDkB8gFmmmjWz89SLhwg38GkALmAKo3gn753N/2024-01-10%2012.50.15.jpg",
+    "width": 512,
+    "height": 512,
+    "format": "jpg"
+  },
+  "infoURL": "https://xai.games",
+  "name": "Xai Sepolia",
+  "nativeCurrency": {
+    "name": "sXAI",
+    "symbol": "sXAI",
+    "decimals": 18
+  },
+  "networkId": 37714555429,
+  "parent": {
+    "type": "L3",
+    "chain": "eip155-1",
+    "bridges": []
+  },
+  "redFlags": [],
+  "rpc": [
+    "https://xai-sepolia.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://37714555429.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://testnet-v2.xai-chain.net/rpc"
+  ],
+  "shortName": "xai-sepolia",
+  "slug": "xai-sepolia",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/3799.ts

@@ -0,0 +1,46 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Tangle Testnet",
+  "chainId": 3799,
+  "explorers": [
+    {
+      "name": "ttntscan",
+      "url": "https://testnet-explorer.tangle.tools",
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmYtUimyqHkkFxYdbXXRbUqNg2VLPUg6Uu2C2nmFWowiZM",
+        "width": 551,
+        "height": 540,
+        "format": "png"
+      }
+    }
+  ],
+  "faucets": [
+    "https://faucet.tangle.tools"
+  ],
+  "icon": {
+    "url": "ipfs://QmbxMNBTeQgch8t9GpWdLiS2R3wPYCzVRaX5kCQ4o5QU3w",
+    "width": 1600,
+    "height": 1600,
+    "format": "png"
+  },
+  "infoURL": "https://docs.tangle.tools",
+  "name": "Tangle Testnet",
+  "nativeCurrency": {
+    "name": "Testnet Tangle Network Token",
+    "symbol": "tTNT",
+    "decimals": 18
+  },
+  "networkId": 3799,
+  "rpc": [
+    "https://tangle-testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://3799.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://testnet-rpc.tangle.tools",
+    "https://testnet-rpc-archive.tangle.tools",
+    "wss://testnet-rpc.tangle.tools",
+    "wss://testnet-rpc-archive.tangle.tools"
+  ],
+  "shortName": "tTangle",
+  "slug": "tangle-testnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/39098.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 39098,
+  "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": "QI 20240108",
+  "nativeCurrency": {
+    "name": "QI 20240108 Token",
+    "symbol": "COZ",
+    "decimals": 18
+  },
+  "networkId": 39098,
+  "redFlags": [],
+  "rpc": [
+    "https://qi-20240108.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://39098.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avacloud-dev.io/f575b5b1-8b60-47f3-af28-13f3f3de2ba5"
+  ],
+  "shortName": "QI 20240108",
+  "slug": "qi-20240108",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/39747.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 39747,
+  "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": "QaUser41Testnet",
+  "nativeCurrency": {
+    "name": "QaUser41Testnet Token",
+    "symbol": "GYF",
+    "decimals": 18
+  },
+  "networkId": 39747,
+  "redFlags": [],
+  "rpc": [
+    "https://qauser41testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://39747.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avax.network/defi-kingdoms/dfk-chain/rpc"
+  ],
+  "shortName": "QaUser41Testnet",
+  "slug": "qauser41testnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/45510.ts

@@ -0,0 +1,38 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "DEE",
+  "chainId": 45510,
+  "explorers": [
+    {
+      "name": "Deelance Mainnet Explorer",
+      "url": "https://deescan.com",
+      "standard": "EIP3091"
+    }
+  ],
+  "faucets": [
+    "https://faucet.deelance.com"
+  ],
+  "icon": {
+    "url": "ipfs://Qmay2j8biuo5xLJL8NcLtrzubAEHuCWz65cdbKE1pSnGf6",
+    "width": 500,
+    "height": 500,
+    "format": "png"
+  },
+  "infoURL": "https://deelance.com",
+  "name": "Deelance Mainnet",
+  "nativeCurrency": {
+    "name": "Deelance",
+    "symbol": "DEE",
+    "decimals": 18
+  },
+  "networkId": 45510,
+  "rpc": [
+    "https://deelance.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://45510.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://rpc.deelance.com"
+  ],
+  "shortName": "dee",
+  "slug": "deelance",
+  "testnet": false,
+  "title": "Deelance Network Mainnet"
+} as const satisfies Chain;

packages/chains/chains/463.ts

@@ -27,7 +27,11 @@ export default {
   "rpc": [
     "https://areon-network.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://463.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
-    "https://mainnet-rpc.areon.network"
+    "https://mainnet-rpc.areon.network",
+    "https://mainnet-rpc2.areon.network",
+    "https://mainnet-rpc3.areon.network",
+    "https://mainnet-rpc4.areon.network",
+    "https://mainnet-rpc5.areon.network"
   ],
   "shortName": "area",
   "slug": "areon-network",

packages/chains/chains/53383.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 53383,
+  "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": "Jambon's Testnet",
+  "nativeCurrency": {
+    "name": "Jambon's Testnet Token",
+    "symbol": "GNF",
+    "decimals": 18
+  },
+  "networkId": 53383,
+  "redFlags": [],
+  "rpc": [
+    "https://jambon-s-testnet-jambon's testnet-53383.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://53383.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avacloud-dev.io/c37c3f83-6d95-4473-b5c7-626fad519f50"
+  ],
+  "shortName": "Jambon's Testnet",
+  "slug": "jambon-s-testnet-jambon's testnet-53383",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/56570.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 56570,
+  "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": "QaUser4Testnet",
+  "nativeCurrency": {
+    "name": "QaUser4Testnet Token",
+    "symbol": "GYF",
+    "decimals": 18
+  },
+  "networkId": 56570,
+  "redFlags": [],
+  "rpc": [
+    "https://qauser4testnet-qauser4testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://56570.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avax.network/defi-kingdoms/dfk-chain/rpc"
+  ],
+  "shortName": "QaUser4Testnet",
+  "slug": "qauser4testnet-qauser4testnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/61514.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 61514,
+  "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": "QI011624I1",
+  "nativeCurrency": {
+    "name": "QI011624I1 Token",
+    "symbol": "DGQ",
+    "decimals": 18
+  },
+  "networkId": 61514,
+  "redFlags": [],
+  "rpc": [
+    "https://qi011624i1.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://61514.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avacloud-dev.io/e81adde6-3c1b-46ce-8dfe-e7a689f8c7eb"
+  ],
+  "shortName": "QI011624I1",
+  "slug": "qi011624i1",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/63367.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 63367,
+  "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": "ReSFT 1-16-24",
+  "nativeCurrency": {
+    "name": "ReSFT 1-16-24 Token",
+    "symbol": "ZAF",
+    "decimals": 18
+  },
+  "networkId": 63367,
+  "redFlags": [],
+  "rpc": [
+    "https://resft-1-16-24.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://63367.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avax.network/defi-kingdoms/dfk-chain/rpc"
+  ],
+  "shortName": "ReSFT 1-16-24",
+  "slug": "resft-1-16-24",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/653.ts

@@ -10,8 +10,14 @@ export default {
     }
   ],
   "faucets": [],
+  "icon": {
+    "url": "ipfs://bafkreieox7v337p3jfhd37dz74mq6mn3uk5i5475rmzpirmyp6ydcfzzqi",
+    "width": 350,
+    "height": 350,
+    "format": "png"
+  },
   "infoURL": "https://kalichain.com",
-  "name": "Kalichain Mainnet",
+  "name": "Kalichain Testnet",
   "nativeCurrency": {
     "name": "kalis",
     "symbol": "KALIS",
@@ -19,11 +25,11 @@ export default {
   },
   "networkId": 653,
   "rpc": [
-    "https://kalichain.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://kalichain-testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://653.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://rpc.kalichain.com"
   ],
   "shortName": "kalichain",
-  "slug": "kalichain",
-  "testnet": false
+  "slug": "kalichain-testnet",
+  "testnet": true
 } as const satisfies Chain;

packages/chains/chains/654.ts

@@ -25,11 +25,11 @@ export default {
   },
   "networkId": 654,
   "rpc": [
-    "https://kalichain-kalichainmainnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://kalichain.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://654.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
     "https://mainnet.kalichain.com"
   ],
   "shortName": "kalichainMainnet",
-  "slug": "kalichain-kalichainmainnet",
+  "slug": "kalichain",
   "testnet": false
 } as const satisfies Chain;

packages/chains/chains/6701.ts

@@ -0,0 +1,41 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "PAXB",
+  "chainId": 6701,
+  "explorers": [
+    {
+      "name": "PAXB Explorer",
+      "url": "https://scan.paxb.io",
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmSP66CHynXpMYkjV28uLjTR4kjuoJyy92igYYpvLoqHtG",
+        "width": 300,
+        "height": 300,
+        "format": "png"
+      }
+    }
+  ],
+  "faucets": [],
+  "icon": {
+    "url": "ipfs://QmSP66CHynXpMYkjV28uLjTR4kjuoJyy92igYYpvLoqHtG",
+    "width": 300,
+    "height": 300,
+    "format": "png"
+  },
+  "infoURL": "https://paxb.io/",
+  "name": "PAXB Mainnet",
+  "nativeCurrency": {
+    "name": "PAXB",
+    "symbol": "PAXB",
+    "decimals": 18
+  },
+  "networkId": 6701,
+  "rpc": [
+    "https://paxb.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://6701.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://chain.paxb.io"
+  ],
+  "shortName": "PAXB",
+  "slug": "paxb",
+  "testnet": false
+} as const satisfies Chain;

packages/chains/chains/68295.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 68295,
+  "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": "qr0116y1s",
+  "nativeCurrency": {
+    "name": "qr0116y1s Token",
+    "symbol": "ANG",
+    "decimals": 18
+  },
+  "networkId": 68295,
+  "redFlags": [],
+  "rpc": [
+    "https://qr0116y1s.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://68295.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avax.network/qr0116y1s/testnet/rpc"
+  ],
+  "shortName": "qr0116y1s",
+  "slug": "qr0116y1s",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/7341.ts

@@ -10,12 +10,6 @@ export default {
     }
   ],
   "faucets": [],
-  "icon": {
-    "url": "ipfs://QmUkFZC2ZmoYPTKf7AHdjwRPZoV2h1MCuHaGM4iu8SNFpi",
-    "width": 400,
-    "height": 400,
-    "format": "svg"
-  },
   "infoURL": "https://shyft.network",
   "name": "Shyft Mainnet",
   "nativeCurrency": {

packages/chains/chains/80085.ts

@@ -0,0 +1,25 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Berachain",
+  "chainId": 80085,
+  "explorers": [],
+  "faucets": [],
+  "features": [],
+  "infoURL": "https://www.berachain.com/",
+  "name": "Berachain Artio",
+  "nativeCurrency": {
+    "name": "BERA",
+    "symbol": "BERA",
+    "decimals": 18
+  },
+  "networkId": 80085,
+  "redFlags": [],
+  "rpc": [
+    "https://berachain-artio.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://80085.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://artio.rpc.berachain.com/"
+  ],
+  "shortName": "bera-artio",
+  "slug": "berachain-artio",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/810.ts

@@ -0,0 +1,51 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "haven1",
+  "chainId": 810,
+  "explorers": [
+    {
+      "name": "Haven1 Explorer",
+      "url": "https://testnet-explorer.haven1.org",
+      "standard": "EIP3091",
+      "icon": {
+        "url": "ipfs://QmbSwngVDEiGaw3JzdME7fz5mYBWKbbz1ZerTpimaAxNXR",
+        "width": 32,
+        "height": 33,
+        "format": "svg"
+      }
+    }
+  ],
+  "faucets": [
+    "https://www.haven1.org/faucet"
+  ],
+  "features": [
+    {
+      "name": "EIP155"
+    },
+    {
+      "name": "EIP1559"
+    }
+  ],
+  "icon": {
+    "url": "ipfs://QmbSwngVDEiGaw3JzdME7fz5mYBWKbbz1ZerTpimaAxNXR",
+    "width": 32,
+    "height": 33,
+    "format": "svg"
+  },
+  "infoURL": "https://www.haven1.org",
+  "name": "Haven1 Testnet",
+  "nativeCurrency": {
+    "name": "Haven1",
+    "symbol": "H1",
+    "decimals": 18
+  },
+  "networkId": 810,
+  "rpc": [
+    "https://haven1-testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://810.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://testnet-rpc.haven1.org"
+  ],
+  "shortName": "h1",
+  "slug": "haven1-testnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/82368.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 82368,
+  "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": "QR0116S1",
+  "nativeCurrency": {
+    "name": "QR0116S1 Token",
+    "symbol": "USJ",
+    "decimals": 18
+  },
+  "networkId": 82368,
+  "redFlags": [],
+  "rpc": [
+    "https://qr0116s1.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://82368.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avax.network/qr0116s1/testnet/rpc"
+  ],
+  "shortName": "QR0116S1",
+  "slug": "qr0116s1",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/83900.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 83900,
+  "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": "QI0122I1 Testnet",
+  "nativeCurrency": {
+    "name": "QI0122I1 Testnet Token",
+    "symbol": "XTT",
+    "decimals": 18
+  },
+  "networkId": 83900,
+  "redFlags": [],
+  "rpc": [
+    "https://qi0122i1-testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://83900.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avacloud-test.io/a5f62fea-1375-4ddd-b88f-72b56b435259"
+  ],
+  "shortName": "QI0122I1 Testnet",
+  "slug": "qi0122i1-testnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/84623.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 84623,
+  "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": "QI M 2401221",
+  "nativeCurrency": {
+    "name": "QI M 2401221 Token",
+    "symbol": "HZU",
+    "decimals": 18
+  },
+  "networkId": 84623,
+  "redFlags": [],
+  "rpc": [
+    "https://qi-m-2401221.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://84623.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avacloud-dev.io/f14d837e-de8f-446d-8222-0077f26e6694"
+  ],
+  "shortName": "QI M 2401221",
+  "slug": "qi-m-2401221",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/85023.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 85023,
+  "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": "NishiOgikubo Subnet",
+  "nativeCurrency": {
+    "name": "NishiOgikubo Subnet Token",
+    "symbol": "NOS",
+    "decimals": 18
+  },
+  "networkId": 85023,
+  "redFlags": [],
+  "rpc": [
+    "https://nishiogikubo-subnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://85023.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avax.network/nishiogiku/testnet/rpc"
+  ],
+  "shortName": "NishiOgikubo Subnet",
+  "slug": "nishiogikubo-subnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/85678.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 85678,
+  "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": "QI0122I1 Testnet",
+  "nativeCurrency": {
+    "name": "QI0122I1 Testnet Token",
+    "symbol": "KIP",
+    "decimals": 18
+  },
+  "networkId": 85678,
+  "redFlags": [],
+  "rpc": [
+    "https://qi0122i1-testnet-qi0122i1 testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://85678.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avax.network/defi-kingdoms/dfk-chain/rpc"
+  ],
+  "shortName": "QI0122I1 Testnet",
+  "slug": "qi0122i1-testnet-qi0122i1 testnet",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/chains/881.ts

@@ -0,0 +1,36 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Hypr",
+  "chainId": 881,
+  "explorers": [],
+  "faucets": [],
+  "features": [],
+  "icon": {
+    "url": "ipfs://bafybeie6wdqkhub4p346rixkvft3l2bxa3kzo4q6dh5c5vgq6oejwlhu4a/",
+    "width": 3600,
+    "height": 3600,
+    "format": "PNG"
+  },
+  "infoURL": "https://www.hypr.network",
+  "name": "Hypr Mainnet",
+  "nativeCurrency": {
+    "name": "Ether",
+    "symbol": "ETH",
+    "decimals": 18
+  },
+  "networkId": 881,
+  "parent": {
+    "type": "OP Stack",
+    "chain": "OP",
+    "bridges": []
+  },
+  "redFlags": [],
+  "rpc": [
+    "https://hypr.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://881.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://rpc.hypr.network"
+  ],
+  "shortName": "ether",
+  "slug": "hypr",
+  "testnet": false
+} as const satisfies Chain;

packages/chains/chains/9395.ts

@@ -0,0 +1,35 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "MTHN",
+  "chainId": 9395,
+  "explorers": [
+    {
+      "name": "Evoke SmartChain Explorer",
+      "url": "https://explorer.evokescan.org",
+      "standard": "EIP3091"
+    }
+  ],
+  "faucets": [],
+  "icon": {
+    "url": "ipfs://bafkreia5q26knsvxgkwxze7woepvsqat5n2hodokh4ozzphmhexqez5s34",
+    "width": 100,
+    "height": 100,
+    "format": "png"
+  },
+  "infoURL": "https://explorer.evokescan.org",
+  "name": "Evoke Mainnet",
+  "nativeCurrency": {
+    "name": "MTHN",
+    "symbol": "MTHN",
+    "decimals": 18
+  },
+  "networkId": 9395,
+  "rpc": [
+    "https://evoke.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://9395.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://mainnet-rpc.evokescan.org"
+  ],
+  "shortName": "MTHN",
+  "slug": "evoke",
+  "testnet": false
+} as const satisfies Chain;

packages/chains/chains/94565.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "../src/types";
+export default {
+  "chain": "Avalanche",
+  "chainId": 94565,
+  "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": "T 0117",
+  "nativeCurrency": {
+    "name": "T 0117 Token",
+    "symbol": "RUI",
+    "decimals": 18
+  },
+  "networkId": 94565,
+  "redFlags": [],
+  "rpc": [
+    "https://t-0117.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://94565.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://subnets.avax.network/defi-kingdoms/dfk-chain/rpc"
+  ],
+  "shortName": "T 0117",
+  "slug": "t-0117",
+  "testnet": true
+} as const satisfies Chain;

packages/chains/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/chains",
-  "version": "0.1.63",
+  "version": "0.1.65",
   "main": "dist/thirdweb-dev-chains.cjs.js",
   "module": "dist/thirdweb-dev-chains.esm.js",
   "exports": {

packages/cli/CHANGELOG.md

@@ -1,5 +1,25 @@
 # thirdweb
 
+## 0.13.33
+
+### Patch Changes
+
+- Updated dependencies [[`3f2ee85a`](https://github.com/thirdweb-dev/js/commit/3f2ee85a1ab70e74aefe7f458379a2ccaf4058a9)]:
+  - @thirdweb-dev/chains@0.1.65
+  - @thirdweb-dev/sdk@4.0.28
+  - @thirdweb-dev/wallets@2.4.3
+  - @thirdweb-dev/auth@4.1.25
+
+## 0.13.32
+
+### Patch Changes
+
+- Updated dependencies [[`9a23de2b`](https://github.com/thirdweb-dev/js/commit/9a23de2be0c47a7a3702d65041ff654159d8e264), [`e21f7bb1`](https://github.com/thirdweb-dev/js/commit/e21f7bb171334fa3003c954060e60c1ce8c1228f)]:
+  - @thirdweb-dev/sdk@4.0.27
+  - @thirdweb-dev/chains@0.1.64
+  - @thirdweb-dev/wallets@2.4.2
+  - @thirdweb-dev/auth@4.1.24
+
 ## 0.13.31
 
 ### Patch Changes

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "thirdweb",
   "main": "dist/cli/index.js",
-  "version": "0.13.31",
+  "version": "0.13.33",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/cli",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",

packages/react-core/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @thirdweb-dev/react-core
 
+## 4.4.0
+
+### Patch Changes
+
+- [#2202](https://github.com/thirdweb-dev/js/pull/2202) [`ba978f55`](https://github.com/thirdweb-dev/js/commit/ba978f55b0c6a7458801a7c02f28db3266718e14) Thanks [@kien-ngo](https://github.com/kien-ngo)! - Update code sample for useTokenSupply
+
+- Updated dependencies [[`3f2ee85a`](https://github.com/thirdweb-dev/js/commit/3f2ee85a1ab70e74aefe7f458379a2ccaf4058a9)]:
+  - @thirdweb-dev/chains@0.1.65
+  - @thirdweb-dev/sdk@4.0.28
+  - @thirdweb-dev/wallets@2.4.3
+  - @thirdweb-dev/auth@4.1.25
+
+## 4.3.2
+
+### Patch Changes
+
+- Updated dependencies [[`9a23de2b`](https://github.com/thirdweb-dev/js/commit/9a23de2be0c47a7a3702d65041ff654159d8e264), [`e21f7bb1`](https://github.com/thirdweb-dev/js/commit/e21f7bb171334fa3003c954060e60c1ce8c1228f)]:
+  - @thirdweb-dev/sdk@4.0.27
+  - @thirdweb-dev/chains@0.1.64
+  - @thirdweb-dev/wallets@2.4.2
+  - @thirdweb-dev/auth@4.1.24
+
+## 4.3.1
+
 ## 4.3.0
 
 ### Minor Changes

packages/react-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react-core",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-core",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",

packages/react-core/src/evm/hooks/async/nft.ts

@@ -335,8 +335,26 @@ export function useTotalCirculatingSupply(
  * @param ownerWalletAddress -
  * The wallet address to get owned tokens for. Likely, you will want to view the connected wallet’s NFTs. use the `useAddress` hook to get this value.
  *
- * @param queryParams - Query params to pass to the query for pagination
+ * @param queryParams - 
+ * Paginate the results by providing a `queryParams` object as an argument.
  *
+ * ```jsx
+ * import { useOwnedNFTs, useContract, useAddress } from "@thirdweb-dev/react";
+ *
+ * function App() {
+ *   const { contract } = useContract(contractAddress);
+ *   const address = useAddress();
+ *   const { data, isLoading, error } = useOwnedNFTs(
+ *     contract,
+ *     address
+ *     {
+ *       count: 10, // Limit the number of results
+ *       start: 0, // Start from the nth result (useful for pagination)
+ *     },
+ *   );
+ * }
+ * ```
+ * 
  * @returns Query result object that includes the list of owned `NFT` objects
  *
  * @twfeature ERC721Enumerable | ERC1155Enumerable | ERC721Supply

packages/react-core/src/evm/hooks/async/token.ts

@@ -40,7 +40,8 @@ import invariant from "tiny-invariant";
  * import { useTokenSupply } from "@thirdweb-dev/react";
  *
  * function App() {
- *   const { data, isLoading, error } = useTokenSupply(contractAddress);
+ *   const { contract } = useContract(contractAddress);
+ *   const { data, isLoading, error } = useTokenSupply(contract);
  * }
  * ```
  *

packages/react-native-compat/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @thirdweb-dev/react-native-compat
 
+## 0.6.3
+
+## 0.6.2
+
+## 0.6.1
+
 ## 0.6.0
 
 ## 0.5.6

packages/react-native-compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thirdweb-dev/react-native-compat",
   "description": "Shims for Thirdweb in React Native Projects",
-  "version": "0.6.0",
+  "version": "0.6.3",
   "author": "thirdweb eng <[email protected]>",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-native-compat",
   "license": "Apache-2.0",

packages/react-native/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @thirdweb-dev/react-native
 
+## 0.6.3
+
+### Patch Changes
+
+- [#2198](https://github.com/thirdweb-dev/js/pull/2198) [`94e4dc9a`](https://github.com/thirdweb-dev/js/commit/94e4dc9aab2b4fee0c444e10b2f860ed9f7c0fc9) Thanks [@iketw](https://github.com/iketw)! - UI improvements
+
+- [#2197](https://github.com/thirdweb-dev/js/pull/2197) [`212b2e7b`](https://github.com/thirdweb-dev/js/commit/212b2e7bc28c8e88207a9935756f7e6133a5b7d3) Thanks [@MananTank](https://github.com/MananTank)! - - The "Request Testnet funds" button is now hidden by default in `ConnectWallet` Details Modal
+
+  - You can add it back by setting `hideTestnetFaucet` to `false` in the `ConnectWallet` component.
+
+- Updated dependencies [[`3f2ee85a`](https://github.com/thirdweb-dev/js/commit/3f2ee85a1ab70e74aefe7f458379a2ccaf4058a9), [`ba978f55`](https://github.com/thirdweb-dev/js/commit/ba978f55b0c6a7458801a7c02f28db3266718e14)]:
+  - @thirdweb-dev/chains@0.1.65
+  - @thirdweb-dev/react-core@4.4.0
+  - @thirdweb-dev/sdk@4.0.28
+  - @thirdweb-dev/wallets@2.4.3
+
+## 0.6.2
+
+### Patch Changes
+
+- [#2182](https://github.com/thirdweb-dev/js/pull/2182) [`c4f1309d`](https://github.com/thirdweb-dev/js/commit/c4f1309dcdb599b8b5f014436bce8e63a7f5a9c6) Thanks [@iketw](https://github.com/iketw)! - Reports only react-nativec
+
+- [#2185](https://github.com/thirdweb-dev/js/pull/2185) [`324330d3`](https://github.com/thirdweb-dev/js/commit/324330d3549176542b05be5bede84ebd8f2684ca) Thanks [@iketw](https://github.com/iketw)! - Exports standalone ConnectEmbed UI
+
+  Devs can now show the Connect modal UI directly into their apps.
+  This component will render the wallets defined in our ThirdwebProvider.
+
+  ```tsx
+  <ConnectEmbed
+    modalTitleIconUrl="<my-icon-url>"
+    modalTitle="Sign In"
+    theme={"light"}
+    onConnect={() => {
+      console.log("wallet connected");
+    }}
+    container={{
+      paddingVertical: "md",
+      marginHorizontal: "md",
+      borderRadius: "md",
+    }}
+  />
+  ```
+
+- Updated dependencies [[`9a23de2b`](https://github.com/thirdweb-dev/js/commit/9a23de2be0c47a7a3702d65041ff654159d8e264), [`e21f7bb1`](https://github.com/thirdweb-dev/js/commit/e21f7bb171334fa3003c954060e60c1ce8c1228f)]:
+  - @thirdweb-dev/[email protected]
+  - @thirdweb-dev/[email protected]
+  - @thirdweb-dev/[email protected]
+  - @thirdweb-dev/[email protected]
+
+## 0.6.1
+
+### Patch Changes
+
+- [#2165](https://github.com/thirdweb-dev/js/pull/2165) [`7a74bd9c`](https://github.com/thirdweb-dev/js/commit/7a74bd9c8a2be42ea2827a3e480f8ac0d60bf1d5) Thanks [@iketw](https://github.com/iketw)! - Upgrade min RN version requirenment to 0.71 and mmkv to 2.11.0
+
+- Updated dependencies []:
+  - @thirdweb-dev/[email protected]
+
 ## 0.6.0
 
 ### Minor Changes

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react-native",
-  "version": "0.6.0",
+  "version": "0.6.3",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-native",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",
@@ -78,7 +78,6 @@
     "react-native": "^0.71.11",
     "react-native-camera": "^4.2.1",
     "react-native-device-info": "10.6.0",
-    "react-native-mmkv": "2.5.1",
     "react-native-safe-area-context": "4.7.4",
     "react-native-webview": "12.1.0",
     "rimraf": "^3.0.2",
@@ -100,7 +99,8 @@
     "ethers": ">=5.5.1 <6",
     "expo": ">=47 <50",
     "react": ">=18.0.0",
-    "react-native": ">=0.70.0"
+    "react-native": ">=0.71.0",
+    "react-native-mmkv": ">=2.11.0"
   },
   "engines": {
     "node": ">=18"

packages/react-native/src/core/storage/uploader.ts

@@ -5,7 +5,6 @@ import {
   TW_UPLOAD_SERVER_URL,
 } from "@thirdweb-dev/storage";
 import { IpfsUploaderOptions, UploadDataValue } from "./types";
-import { Platform } from "react-native";
 import { appBundleId, packageVersion } from "../../evm/utils/version";
 import { BUNDLE_ID_HEADER } from "../../evm/constants/headers";
 
@@ -40,7 +39,7 @@ export class IpfsUploader implements IStorageUploader<IpfsUploadBatchOptions> {
     };
 
     const { version, name: packageName } = packageVersion;
-    const platform = `react-native-${Platform.OS}`;
+    const platform = "react-native";
 
     if ("uri" in data[0] && "type" in data[0] && "name" in data[0]) {
       // then it's an array of files

packages/react-native/src/evm/components/ConnectWallet.tsx

@@ -50,7 +50,12 @@ export type ConnectWalletProps = {
   /**
    * Hide option to request testnet funds for testnets in dropdown
    *
-   * The default is `false`
+   * By default it is `true`, If you want to show the "Request Testnet funds" link when user is connected to a testnet, set this prop to `false`
+   *
+   * @example
+   * ```tsx
+   * <ConnectWallet hideTestnetFaucet={false} />
+   * ```
    */
   hideTestnetFaucet?: boolean;
 

packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx

@@ -220,6 +220,10 @@ export const ConnectWalletDetailsModal = ({
     hideSwitchToPersonalWallet,
   ]);
 
+  // by default we hide faucet link
+  const showFaucet =
+    hideTestnetFaucet === undefined ? false : !hideTestnetFaucet;
+
   return (
     <ThemeProvider>
       <TWModal isVisible={isVisible} onBackdropPress={onClosePress}>
@@ -288,7 +292,7 @@ export const ConnectWalletDetailsModal = ({
               </Text>
             </View>
             <NetworkButton chain={chain} enableSwitchModal={true} />
-            {!hideTestnetFaucet && chain?.testnet && chain?.faucets?.length ? (
+            {showFaucet && chain?.testnet && chain?.faucets?.length ? (
               <IconTextButton
                 mt="xs"
                 text={l.connect_wallet_details.request_testnet_funds}

packages/react-native/src/evm/components/ConnectWalletFlow/ChooseWallet/ChooseWallet.tsx

@@ -6,7 +6,7 @@ import {
   useConnect,
   useWalletContext,
 } from "@thirdweb-dev/react-core";
-import { ReactNode, useMemo, useState } from "react";
+import { ReactNode, useCallback, useMemo, useState } from "react";
 import Box from "../../base/Box";
 import Text from "../../base/Text";
 import ThirdwebLogo from "../../../assets/thirdweb-logo";
@@ -23,7 +23,7 @@ export type ChooseWalletProps = {
   headerText?: ReactNode | string;
   subHeaderText?: ReactNode | string;
   onChooseWallet: (wallet: WalletConfig<any>, data?: any) => void;
-  onClose: () => void;
+  onClose?: () => void;
   wallets: WalletConfig<any>[];
   excludeWalletIds?: string[];
   modalTitleIconUrl?: string;
@@ -112,6 +112,22 @@ export function ChooseWallet({
     }
   };
 
+  const getHeaderText = useCallback(() => {
+    if (typeof headerText === "string" && headerText.length === 0) {
+      return null;
+    }
+
+    if (!headerText || typeof headerText === "string") {
+      return (
+        <Text variant="headerBold" ml="xxs" fontSize={20} lineHeight={24}>
+          {headerText ? headerText : l.connect_wallet_details.connect}
+        </Text>
+      );
+    }
+
+    return headerText;
+  }, [headerText, l.connect_wallet_details.connect]);
+
   const connect = useConnect();
   const address = useAddress();
   const {
@@ -150,9 +166,7 @@ export function ChooseWallet({
                 color={theme.colors.backgroundInverted}
               />
             )}
-            <Text variant="headerBold" ml="xxs" fontSize={20} lineHeight={24}>
-              {headerText ? headerText : l.connect_wallet_details.connect}
-            </Text>
+            {getHeaderText()}
           </Box>
         }
         subHeaderText={subHeaderText}

packages/react-native/src/evm/components/ConnectWalletFlow/ConnectEmbed.tsx

@@ -13,32 +13,134 @@ import { useColorScheme } from "react-native";
 import {
   useGlobalTheme,
   useLocale,
-  useModalState,
+  useUIContext,
 } from "../../providers/ui-context-provider";
-import {
-  CLOSE_MODAL_STATE,
-  ConnectWalletFlowModal,
-} from "../../utils/modalTypes";
+import { CLOSE_MODAL_STATE } from "../../utils/modalTypes";
 import Box from "../base/Box";
 import { ThemeProvider } from "../../styles/ThemeProvider";
+import { Theme } from "../../styles/theme";
 
-export const ConnectWalletFlow = () => {
+export type ConnectEmbedProps = {
+  /**
+   * Set a custom title for the Connect Wallet modal
+   *
+   * The default is `"Choose your wallet"`
+   */
+  modalTitle?: string;
+
+  /**
+   * Replace the thirdweb icon next to modalTitle and set your own iconUrl
+   *
+   * Set to empty string to hide the icon
+   */
+  modalTitleIconUrl?: string;
+
+  /**
+   * theme for the ConnectEmbed
+   *
+   * If a theme is set on the [`ThirdWebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider) component, it will be used as the default theme for all thirdweb components, else the default will be "dark"
+   *
+   * theme can be set to either "dark" or "light" or a custom theme object.
+   *
+   * You can also import `lightTheme` or `darkTheme` functions from `@thirdweb-dev/react-native` to use the default themes as base and overrides parts of it.
+   *
+   * @example
+   * ```ts
+   * import { lightTheme } from "@thirdweb-dev/react-native";
+   * const customTheme = lightTheme({
+   *  colors: {
+   *    accentButtonTextColor: 'red'
+   *  }
+   * })
+   * ```
+   */
+  theme?: "dark" | "light" | Theme;
+
+  /**
+   * If provided, Embed will show a Terms of Service message at the bottom with below link
+   */
+  termsOfServiceUrl?: string;
+
+  /**
+   * If provided, Embed will show a Privacy Policy message at the bottom with below link
+   */
+  privacyPolicyUrl?: string;
+
+  /**
+   * Callback to be called on successful connection of wallet
+   *
+   * ```tsx
+   * <ConnectEmbed
+   *  onConnect={() => {
+   *    console.log("wallet connected")
+   *  }}
+   * />
+   * ```
+   *
+   * Note that this does not include the sign in, If you want to call a callback after user connects AND signs in with their wallet, use `auth.onLogin` prop instead
+   *
+   * ```tsx
+   * <ConnectEmbed
+   *  auth={{
+   *   onLogin: () => {
+   *     console.log("wallet connected and signed in")
+   *   }
+   *  }}
+   * />
+   * ```
+   *
+   */
+  onConnect?: () => void;
+
+  /**
+   * Props to be passed to the Embed container component to control padding, margin, etc.
+   *
+   * ```tsx
+   * <ConnectEmbed container={{
+   *       paddingVertical: 'md',
+   *       marginHorizontal: 'md',
+   *       borderRadius: 'md',
+   *     }} />
+   * ```
+   */
+  container?: React.ComponentProps<typeof Box>;
+};
+
+export const ConnectEmbed = (props: ConnectEmbedProps) => {
+  return (
+    <ConnectEmbedUI
+      container={{
+        borderRadius: "xxl",
+        paddingBottom: "lg",
+      }}
+      {...props}
+      isModal={false}
+    />
+  );
+};
+
+export const ConnectEmbedUI = ({
+  modalTitle,
+  modalTitleIconUrl,
+  privacyPolicyUrl,
+  termsOfServiceUrl,
+  isModal = true,
+  theme,
+  container: container,
+  onConnect,
+}: ConnectEmbedProps & { isModal: boolean }) => {
   const l = useLocale();
-  const { modalState, setModalState } = useModalState();
-  const {
-    modalTitle,
-    modalTitleIconUrl,
-    privacyPolicyUrl,
-    termsOfServiceUrl,
-    walletConfig,
-  } = (modalState as ConnectWalletFlowModal).data;
+  const supportedWallets = useWallets();
+  const setModalState = useUIContext().setModalState;
+  const walletConfig =
+    supportedWallets.length === 1 ? supportedWallets[0] : undefined;
   const [modalVisible, setModalVisible] = useState(false);
   const [activeWallet, setActiveWallet] = useState<WalletConfig | undefined>();
   const [isConnecting, setIsConnecting] = useState(false);
   const [selectionData, setSelectionData] = useState<any>();
-  const supportedWallets = useWallets();
-  const theme = useColorScheme();
+  const colorTheme = useColorScheme();
   const appTheme = useGlobalTheme();
+  const setTheme = useUIContext().setTheme;
   const address = useAddress();
   const {
     activeWallet: connectedWallet,
@@ -65,13 +167,14 @@ export const ConnectWalletFlow = () => {
       setIsConnecting(true);
       try {
         await connect(wallet, { ...data });
+        onConnect?.();
       } catch (error) {
         console.error("Error connecting to the wallet", error);
       } finally {
         onClose(true);
       }
     },
-    [connect, onClose],
+    [connect, onClose, onConnect],
   );
 
   const onChooseWallet = useCallback(
@@ -87,6 +190,12 @@ export const ConnectWalletFlow = () => {
     [connectActiveWallet],
   );
 
+  useEffect(() => {
+    if (theme) {
+      setTheme(theme);
+    }
+  }, [setTheme, theme]);
+
   useEffect(() => {
     // case when only one wallet is passed in supportedWallets
     if (walletConfig) {
@@ -128,7 +237,7 @@ export const ConnectWalletFlow = () => {
       return (
         <activeWallet.connectUI
           modalSize="compact"
-          theme={theme || "dark"}
+          theme={colorTheme || "dark"}
           goBack={onBackPress}
           connected={handleClose}
           isOpen={modalVisible}
@@ -164,12 +273,12 @@ export const ConnectWalletFlow = () => {
     setConnectedWallet,
     setConnectionStatus,
     supportedWallets,
-    theme,
+    colorTheme,
   ]);
 
   return (
     <ThemeProvider theme={appTheme}>
-      <Box flexDirection="column">
+      <Box flexDirection="column" backgroundColor="background" {...container}>
         {activeWallet ? (
           isConnecting ? (
             <ConnectingWallet
@@ -182,7 +291,7 @@ export const ConnectWalletFlow = () => {
                 ) : undefined
               }
               wallet={activeWallet}
-              onClose={onClose}
+              onClose={isModal ? onClose : undefined}
               onBackPress={onBackPress}
             />
           ) : (
@@ -196,7 +305,7 @@ export const ConnectWalletFlow = () => {
             termsOfServiceUrl={termsOfServiceUrl}
             wallets={supportedWallets}
             onChooseWallet={onChooseWallet}
-            onClose={onClose}
+            onClose={isModal ? onClose : undefined}
           />
         )}
       </Box>

packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx

@@ -1,6 +1,6 @@
 import { ActivityIndicator, StyleSheet } from "react-native";
 import { BaseButton, Text } from "../base";
-import { useConnectionStatus, useWallets } from "@thirdweb-dev/react-core";
+import { useConnectionStatus } from "@thirdweb-dev/react-core";
 import { useState, useEffect } from "react";
 import {
   useGlobalTheme,
@@ -53,7 +53,6 @@ export const ConnectWalletButton = ({
   const connectionStatus = useConnectionStatus();
   const isWalletConnecting = connectionStatus === "connecting";
 
-  const supportedWallets = useWallets();
   const [showButtonSpinner, setShowButtonSpinner] = useState(false);
   const { setModalState } = useModalState();
 
@@ -88,8 +87,6 @@ export const ConnectWalletButton = ({
         modalTitleIconUrl,
         termsOfServiceUrl,
         privacyPolicyUrl,
-        walletConfig:
-          supportedWallets.length === 1 ? supportedWallets[0] : undefined,
       },
       caller: "ConnectWallet",
     });

packages/react-native/src/evm/components/ConnectWalletFlow/ConnectingWallet/ConnectingWallet.tsx

@@ -11,7 +11,7 @@ export type ConnectingWalletProps = {
   subHeaderText?: string;
   footer?: ReactNode;
   content?: ReactNode;
-  onClose: () => void;
+  onClose?: () => void;
   onBackPress: () => void;
   wallet: WalletConfig<any>;
 };
@@ -27,11 +27,13 @@ export function ConnectingWallet({
   const l = useLocale();
   return (
     <Box paddingHorizontal="xl">
-      <ConnectWalletHeader
-        onBackPress={onBackPress}
-        subHeaderText={subHeaderText}
-        onClose={onClose}
-      />
+      <Box marginVertical="lg">
+        <ConnectWalletHeader
+          onBackPress={onBackPress}
+          subHeaderText={subHeaderText}
+          onClose={onClose}
+        />
+      </Box>
       <WalletLoadingThumbnail imageSize={85}>
         <ImageSvgUri height={80} width={80} imageUrl={wallet.meta.iconURL} />
       </WalletLoadingThumbnail>

packages/react-native/src/evm/components/ConnectWalletFlow/ConnectingWallet/ConnectingWalletHeader.tsx

@@ -7,7 +7,7 @@ import Text from "../../base/Text";
 import { FlexAlignType, StyleSheet, View } from "react-native";
 
 interface ConnectWalletHeaderProps {
-  onClose: () => void;
+  onClose?: () => void;
   onBackPress?: () => void;
   middleContent?: React.ReactNode;
   headerText?: string;
@@ -46,13 +46,17 @@ export const ConnectWalletHeader = ({
           <View />
         )}
         {middleContent ? middleContent : null}
-        <Icon
-          type="close"
-          width={14}
-          height={14}
-          onPress={onClose}
-          color={theme.colors.iconPrimary}
-        />
+        {onClose ? (
+          <Icon
+            type="close"
+            width={14}
+            height={14}
+            onPress={onClose}
+            color={theme.colors.iconPrimary}
+          />
+        ) : (
+          <View />
+        )}
       </View>
       <View style={{ ...styles.headerContainer, alignItems: alignHeader }}>
         {headerText ? (

packages/react-native/src/evm/components/MainModal.tsx

@@ -2,7 +2,7 @@ import {
   useGlobalTheme,
   useModalState,
 } from "../providers/ui-context-provider";
-import { ConnectWalletFlow } from "./ConnectWalletFlow/ConnectWalletFlow";
+import { ConnectEmbedUI } from "./ConnectWalletFlow/ConnectEmbed";
 import { Dimensions, StyleSheet, View } from "react-native";
 import { useMemo } from "react";
 import { ThemeProvider } from "../styles/ThemeProvider";
@@ -10,6 +10,7 @@ import { SessionRequestModal } from "./ConnectWalletDetails/SessionRequestModal"
 import { SessionProposalModal } from "./ConnectWalletDetails/SessionProposalModal";
 import { TWModal } from "./base/modal/TWModal";
 import Box from "./base/Box";
+import { ConnectWalletFlowModal } from "../utils/modalTypes";
 
 const MODAL_HEIGHT = Dimensions.get("window").height * 0.7;
 const DEVICE_WIDTH = Dimensions.get("window").width;
@@ -23,7 +24,12 @@ export const MainModal = () => {
   const view = useMemo(() => {
     switch (modalState?.view) {
       case "ConnectWalletFlow":
-        return <ConnectWalletFlow />;
+        return (
+          <ConnectEmbedUI
+            {...(modalState as ConnectWalletFlowModal).data}
+            isModal={true}
+          />
+        );
       case "WalletConnectSessionRequestModal":
         return <SessionRequestModal />;
       case "WalletConnectSessionProposalModal":
@@ -31,7 +37,7 @@ export const MainModal = () => {
       default:
         return null;
     }
-  }, [modalState.view]);
+  }, [modalState]);
 
   return (
     <ThemeProvider theme={theme}>

packages/react-native/src/evm/components/base/WalletButton.tsx

@@ -43,7 +43,6 @@ export const WalletButton = ({
       paddingHorizontal="md"
       paddingVertical="sm"
       borderRadius="sm"
-      backgroundColor="background"
       onPress={onPress}
       {...props}
     >

packages/react-native/src/evm/components/base/modal/ModalHeaderTextClose.tsx

@@ -57,13 +57,13 @@ export const ModalHeaderTextClose = ({
           <View />
         )}
       </Box>
-      <Box flexDirection="row" justifyContent="space-between" mt="md">
-        {typeof subHeaderText === "string" ? (
+      {!subHeaderText ? null : typeof subHeaderText === "string" ? (
+        <Box mt="md">
           <Text variant="subHeader">{subHeaderText}</Text>
-        ) : (
-          subHeaderText
-        )}
-      </Box>
+        </Box>
+      ) : (
+        <Box mt="md">{subHeaderText}</Box>
+      )}
     </>
   );
 };

packages/react-native/src/evm/index.ts

@@ -38,6 +38,12 @@ export {
   ConnectWallet,
   type ConnectWalletProps,
 } from "./components/ConnectWallet";
+
+export {
+  ConnectEmbed,
+  type ConnectEmbedProps,
+} from "./components/ConnectWalletFlow/ConnectEmbed";
+
 export {
   Web3Button,
   type Web3ButtonProps,

packages/react-native/src/evm/providers/ui-context-provider.tsx

@@ -100,7 +100,7 @@ export const useGlobalTheme = (theme?: ThemeProviderProps["theme"]): Theme => {
   const resultTheme = useMemo(() => {
     const resp = getThemeObj(context.theme) || getThemeObj(theme) || appTheme;
     return resp;
-  }, [theme, context, appTheme]);
+  }, [theme, context.theme, appTheme]);
 
   return resultTheme;
 };

packages/react-native/src/evm/utils/modalTypes.ts

@@ -1,4 +1,3 @@
-import { WalletConfig } from "@thirdweb-dev/react-core";
 import { WCProposal, WCRequest } from "@thirdweb-dev/wallets";
 
 export const CLOSE_MODAL_STATE = (caller: Caller): ModalState => {
@@ -50,17 +49,16 @@ export type ClosedModal = {
 } & SheetModal;
 
 // connect wallet flow
-export type ConnectWalletFlowData = {
+export type ConnectEmbedData = {
   modalTitle?: string;
   modalTitleIconUrl?: string;
   termsOfServiceUrl?: string;
   privacyPolicyUrl?: string;
-  walletConfig?: WalletConfig;
 };
 
 export type ConnectWalletFlowModal = {
   view: "ConnectWalletFlow";
-  data: ConnectWalletFlowData;
+  data: ConnectEmbedData;
 } & SheetModal;
 
 // wallet details

packages/react/CHANGELOG.md

@@ -1,5 +1,107 @@
 # @thirdweb-dev/react
 
+## 4.4.0
+
+### Minor Changes
+
+- [#2197](https://github.com/thirdweb-dev/js/pull/2197) [`212b2e7b`](https://github.com/thirdweb-dev/js/commit/212b2e7bc28c8e88207a9935756f7e6133a5b7d3) Thanks [@MananTank](https://github.com/MananTank)! - - Change ConnectWallet Details dropdown to a Modal with a few UI improvements.
+
+  - Because of this the `dropdownPosition` prop has been removed from `ConnectWallet` component
+  - The "Request Testnet funds" button is now hidden by default in the new Modal UI.
+
+    - You can add it back by setting `hideTestnetFaucet` to `false` in the `ConnectWallet` component.
+
+### Patch Changes
+
+- [#2209](https://github.com/thirdweb-dev/js/pull/2209) [`f29f91d7`](https://github.com/thirdweb-dev/js/commit/f29f91d7e0837b2084d7257288e80ef2cbc70942) Thanks [@joaquim-verges](https://github.com/joaquim-verges)! - Show specific error message for embedded wallet limits reached
+
+- Updated dependencies [[`3f2ee85a`](https://github.com/thirdweb-dev/js/commit/3f2ee85a1ab70e74aefe7f458379a2ccaf4058a9), [`ba978f55`](https://github.com/thirdweb-dev/js/commit/ba978f55b0c6a7458801a7c02f28db3266718e14)]:
+  - @thirdweb-dev/chains@0.1.65
+  - @thirdweb-dev/react-core@4.4.0
+  - @thirdweb-dev/sdk@4.0.28
+  - @thirdweb-dev/wallets@2.4.3
+
+## 4.3.2
+
+### Patch Changes
+
+- [#1884](https://github.com/thirdweb-dev/js/pull/1884) [`89641e33`](https://github.com/thirdweb-dev/js/commit/89641e33784ff74c32fcbb51db72b67065ba85cb) Thanks [@tommaay](https://github.com/tommaay)! - Add prop `switchNetworkBtnTitle` to `ConnectWallet` and `Web3Button` components to allow changing the "Switch Network" label on the button which is displayed when user needs to switch the network in the connected wallet.
+
+  ```tsx
+  <ConnectWallet switchNetworkBtnTitle="Switch Chain" />
+  ```
+
+  ```tsx
+  <Web3Button
+    switchNetworkBtnTitle="Switch Chain"
+    contractAddress="0x..."
+    action={someAction}
+  />
+  ```
+
+- [#2193](https://github.com/thirdweb-dev/js/pull/2193) [`0efd0f9d`](https://github.com/thirdweb-dev/js/commit/0efd0f9d2626d1cb8d7a49f26b9beaa4c27bca15) Thanks [@MananTank](https://github.com/MananTank)! - add `useSetWalletModalConfig` hook to customize the ConnectWallet Modal to programmatically open the modal without using the `ConnectWallet` component along with `useSetIsWalletModalOpen`
+
+  ```tsx
+  import {
+    useSetWalletModalConfig,
+    useSetIsWalletModalOpen,
+  } from "@thirdweb-dev/react";
+
+  function Example() {
+    const setWalletModalConfig = useSetWalletModalConfig();
+    const setIsWalletModalOpen = useSetIsWalletModalOpen();
+
+    return (
+      <button
+        onClick={() => {
+          // customize the modal
+          setWalletModalConfig({
+            modalSize: "wide",
+            theme: "light",
+          });
+          // open the modal
+          setIsWalletModalOpen(true);
+        }}
+      >
+        open connect modal
+      </button>
+    );
+  }
+  ```
+
+- [#2177](https://github.com/thirdweb-dev/js/pull/2177) [`e11e645c`](https://github.com/thirdweb-dev/js/commit/e11e645c7407a37545e78bbf8976ecc31e40bee7) Thanks [@dependabot](https://github.com/apps/dependabot)! - Bump fuse.js from 6.6.2 to 7.0.0
+
+- Updated dependencies [[`9a23de2b`](https://github.com/thirdweb-dev/js/commit/9a23de2be0c47a7a3702d65041ff654159d8e264), [`e21f7bb1`](https://github.com/thirdweb-dev/js/commit/e21f7bb171334fa3003c954060e60c1ce8c1228f)]:
+  - @thirdweb-dev/[email protected]
+  - @thirdweb-dev/[email protected]
+  - @thirdweb-dev/[email protected]
+  - @thirdweb-dev/[email protected]
+
+## 4.3.1
+
+### Patch Changes
+
+- [#2169](https://github.com/thirdweb-dev/js/pull/2169) [`e249a568`](https://github.com/thirdweb-dev/js/commit/e249a56892f04df1313b5cbd40d21a0bd5ac5f4e) Thanks [@MananTank](https://github.com/MananTank)! - Add `onConnect` prop to `ConnectWallet` and `ConnectEmbed` components.
+
+  ```tsx
+  <ConnectWallet
+    onConnect={() => {
+      console.log("connected");
+    }}
+  />
+  ```
+
+  ```tsx
+  <ConnectEmbed
+    onConnect={() => {
+      console.log("connected");
+    }}
+  />
+  ```
+
+- Updated dependencies []:
+  - @thirdweb-dev/[email protected]
+
 ## 4.3.0
 
 ### Minor Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",
@@ -84,7 +84,6 @@
     "@thirdweb-dev/auth": "workspace:*",
     "@thirdweb-dev/sdk": "workspace:*",
     "@thirdweb-dev/tsconfig": "workspace:*",
-    "@types/color": "^3.0.3",
     "@types/qrcode": "^1.5.2",
     "@types/react": "^18.2.17",
     "@types/react-dom": "^18.2.7",
@@ -115,13 +114,11 @@
     "@headlessui/react": "1.7.6",
     "@radix-ui/colors": "^0.1.9",
     "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-focus-scope": "^1.0.4",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
-    "@react-icons/all-files": "^4.1.0",
     "@tanstack/react-query": "^4.33.0",
     "@thirdweb-dev/chains": "workspace:*",
     "@thirdweb-dev/payments": "workspace:*",
@@ -131,7 +128,7 @@
     "buffer": "^6.0.3",
     "copy-to-clipboard": "^3.3.2",
     "detect-browser": "^5.3.0",
-    "fuse.js": "^6.6.2",
+    "fuse.js": "^7.0.0",
     "qrcode": "^1.5.3",
     "tiny-invariant": "^1.2.0"
   },

packages/react/src/components/Tooltip.tsx

@@ -48,7 +48,7 @@ const TooltipContent = /* @__PURE__ */ (() =>
       background: theme.colors.tooltipBg,
       color: theme.colors.tooltipText,
       borderRadius: radius.sm,
-      padding: `${spacing.sm} ${spacing.md}`,
+      padding: `${spacing.xs} ${spacing.sm}`,
       fontSize: fontSize.sm,
       boxShadow: shadow.sm,
       userSelect: "none",

packages/react/src/design-system/index.ts

@@ -71,7 +71,6 @@ export type Theme = {
     secondaryButtonHoverBg: string;
 
     modalBg: string;
-    dropdownBg: string;
 
     tooltipBg: string;
     tooltipText: string;
@@ -122,7 +121,6 @@ function createThemeObj(colors: ThemeColors): Theme {
       secondaryButtonHoverBg: colors.base4,
 
       modalBg: colors.base1,
-      dropdownBg: colors.base1,
 
       tooltipBg: colors.primaryText,
       tooltipText: colors.base1,

packages/react/src/evm/components/Web3Button/index.tsx

@@ -186,6 +186,11 @@ export interface Web3ButtonProps<TActionFn extends ActionFn> {
      */
     welcomeScreen?: WelcomeScreen;
   };
+
+  /**
+   * Set a custom label for the "Switch Network" button
+   */
+  switchNetworkBtnTitle?: string;
 }
 
 /**
@@ -255,6 +260,8 @@ export const Web3Button = <TAction extends ActionFn>(
   const theme = props.theme || contextTheme || "dark";
 
   const locale = useTWLocale();
+  const switchNetworkLabel =
+    props.switchNetworkBtnTitle || locale.connectWallet.switchNetwork;
 
   const [confirmStatus, setConfirmStatus] = useState<"idle" | "waiting">(
     "idle",
@@ -337,7 +344,7 @@ export const Web3Button = <TAction extends ActionFn>(
         {confirmStatus === "waiting" ? (
           <Spinner size="sm" color={"primaryButtonText"} />
         ) : (
-          locale.connectWallet.switchNetwork
+          switchNetworkLabel
         )}
       </Button>
     );

packages/react/src/evm/index.ts

@@ -1,6 +1,8 @@
 export {
   useIsWalletModalOpen,
   useSetIsWalletModalOpen,
+  type ModalConfigOptions,
+  useSetWalletModalConfig,
 } from "./providers/wallet-ui-states-provider";
 
 export { useSafe } from "./connectors/gnosis";
@@ -28,8 +30,6 @@ export {
   type NetworkSelectorChainProps,
 } from "../wallet/ConnectWallet/NetworkSelector";
 
-export type { DropDownPosition } from "../wallet/ConnectWallet/Details";
-
 // UI components
 export * from "./components/MediaRenderer";
 export * from "./components/NftMedia";

packages/react/src/evm/locales/en.ts

@@ -44,7 +44,7 @@ export function enDefault() {
       transactionHistory: "Transaction History",
       backupWallet: "Backup Wallet",
       guestWalletWarning:
-        "This is a temporary guest wallet. Backup if you don't want to lose access to it",
+        "This is a temporary guest wallet. Backup wallet if you don't want to lose access to it",
       switchTo: "Switch to", // Used in "Switch to <Wallet-Name>"
       connectedToSmartWallet: "Connected To Smart Wallet",
       confirmInWallet: "Confirm in wallet",
@@ -212,6 +212,8 @@ export function enDefault() {
         signIn: "Sign in",
         emailRequired: "Email address is required",
         invalidEmail: "Invalid email address",
+        maxAccountsExceeded:
+          "Maximum number of accounts exceeded. Please notify the app developer.",
         socialLoginScreen: {
           title: "Sign in",
           instruction: "Sign into your account in the pop-up",

packages/react/src/evm/locales/es.ts

@@ -215,6 +215,7 @@ export function esDefault(): ThirdwebLocale {
         signIn: "Iniciar sesión",
         emailRequired: "Se requiere dirección de correo electrónico",
         invalidEmail: "Dirección de correo electrónico inválida",
+        maxAccountsExceeded: "Número máximo de cuentas alcanzado",
         socialLoginScreen: {
           title: "Iniciar sesión",
           instruction: "Inicie sesión en su cuenta en la ventana abierta",

packages/react/src/evm/locales/ja.ts

@@ -214,6 +214,7 @@ export function jaDefault(): ThirdwebLocale {
         emailRequired: "メールアドレスが必要です",
         invalidEmail: "無効なメールアドレス",
         signIn: "サインイン",
+        maxAccountsExceeded: "アカウントの最大数を超えました",
         socialLoginScreen: {
           title: "サインイン",
           instruction: "ポップアップウィンドウでアカウントにサインインします", // TODO: check if this is correct

packages/react/src/evm/locales/tl.ts

@@ -86,7 +86,8 @@ export function tlDefault(): ThirdwebLocale {
       },
       receiveFundsScreen: {
         title: "Matanggap ang Pondo",
-        instruction: "Kopyahin ang address ng wallet para ipadala ang pondo dito",
+        instruction:
+          "Kopyahin ang address ng wallet para ipadala ang pondo dito",
       },
       sendFundsScreen: {
         title: "Ipadala ang Pondo",
@@ -126,21 +127,24 @@ export function tlDefault(): ThirdwebLocale {
     },
     wallets: {
       walletConnect: {
-        scanInstruction: "I-scan ito gamit ang iyong wallet app para makakonekta",
+        scanInstruction:
+          "I-scan ito gamit ang iyong wallet app para makakonekta",
       },
       smartWallet: {
         connecting: "Kumokonekta sa Smart Wallet",
         failedToConnect: "Hindi nagawa ang pagkonekta sa Smart Wallet",
         wrongNetworkScreen: {
           title: "Maling Network",
-          subtitle: "Hindi konektado ang iyong wallet sa kinakailangang network",
+          subtitle:
+            "Hindi konektado ang iyong wallet sa kinakailangang network",
           failedToSwitch: "Hindi nagawa ang pagpapalit ng network",
         },
       },
       safeWallet: {
         connectWalletScreen: {
           title: "Kumonekta ng personal na wallet",
-          subtitle: "Konektahin ang iyong personal na wallet para magamit ang Safe.",
+          subtitle:
+            "Konektahin ang iyong personal na wallet para magamit ang Safe.",
           learnMoreLink: "Alamin pa",
         },
         accountDetailsScreen: {
@@ -148,7 +152,8 @@ export function tlDefault(): ThirdwebLocale {
           findSafeAddressIn: "Maaari mong mahanap ang iyong safe address sa", // You can find your safe address in + <dashboardLink>
           dashboardLink: "Safe Dashboard", // <dashboardLink>
           network: "Safe Network",
-          selectNetworkPlaceholder: "Network kung saan inilunsad ang iyong safe",
+          selectNetworkPlaceholder:
+            "Network kung saan inilunsad ang iyong safe",
           invalidChainConfig:
             "Hindi magamit ang Safe: Walang mga suportadong chain ng Safe na nakakonfigure sa App",
           failedToConnect:
@@ -212,6 +217,7 @@ export function tlDefault(): ThirdwebLocale {
         signIn: "Mag-sign in",
         emailRequired: "Kinakailangan ang email address",
         invalidEmail: "Hindi wastong email address",
+        maxAccountsExceeded: "Naabot mo na ang maximum na bilang ng accounts",
         socialLoginScreen: {
           title: "Mag-sign in",
           instruction: "Mag-sign in sa iyong account sa pop-up",
@@ -261,7 +267,8 @@ export function tlDefault(): ThirdwebLocale {
         invalidEmail: "Hindi wastong email address",
         invalidPhone: "Hindi wastong numero ng telepono",
         invalidEmailOrPhone: "Hindi wastong email address o numero ng telepono",
-        countryCodeMissing: "Ang numero ng telepono ay dapat magsimula sa country code",
+        countryCodeMissing:
+          "Ang numero ng telepono ay dapat magsimula sa country code",
         emailPlaceholder: "Ilagay ang iyong email address",
         emailRequired: "Kinakailangan ang email address",
       },
@@ -301,7 +308,8 @@ export function tlDefault(): ThirdwebLocale {
           title: "Mag-import ng Wallet",
           description1:
             "Ang application ay maaaring mag-authorize ng anumang mga transaksyon sa ngalan ng wallet nang walang anumang mga approval",
-          description2: "Minumungkahi naming kumonekta lamang sa mga pinagkakatiwalaang application",
+          description2:
+            "Minumungkahi naming kumonekta lamang sa mga pinagkakatiwalaang application",
           import: "Mag-import",
           uploadJSON: "Mangyaring mag-upload ng isang JSON file",
           uploadedSuccessfully: "Matagumpay na na-upload",

packages/react/src/evm/locales/types.ts

@@ -164,6 +164,7 @@ export type ThirdwebLocale = {
         title: string;
       };
       submitEmail: string;
+      maxAccountsExceeded: string;
     };
     frameWallet: {
       connectionFailedScreen: {

packages/react/src/evm/providers/wallet-ui-states-provider.tsx

@@ -21,6 +21,7 @@ export type ModalConfig = {
     onLogout?: () => void;
   };
   isEmbed?: boolean;
+  onConnect?: () => void;
 };
 
 const WalletModalOpen = /* @__PURE__ */ createContext(false);
@@ -54,6 +55,7 @@ export const WalletUIStatesProvider = (
       onLogin?: (token: string) => void;
       onLogout?: () => void;
     };
+    onConnect?: () => void;
   }>,
 ) => {
   const [isWalletModalOpen, setIsWalletModalOpen] = useState(false);
@@ -71,6 +73,7 @@ export const WalletUIStatesProvider = (
     titleIconUrl: props.titleIconUrl,
     isEmbed: props.isEmbed,
     auth: props.auth,
+    onConnect: props.onConnect,
   });
 
   return (
@@ -136,3 +139,288 @@ export const useSetIsWalletModalOpen = () => {
   }
   return context;
 };
+
+export type ModalConfigOptions = {
+  /**
+   * Title of the Modal
+   */
+  title?: string;
+  /**
+   * Set the theme for the Modal
+   *
+   * By default it is set to "dark" if `theme` is not set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
+   * If a `theme` is set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider) then that theme will be used by default
+   *
+   * theme can be set to either `"dark"` or `"light"` or a custom theme object. You can also import `lightTheme` or `darkTheme` functions from `@thirdweb-dev/react` to use the default themes as base and overrides parts of it.
+   *
+   * ```ts
+   * import { lightTheme } from "@thirdweb-dev/react";
+   * const customTheme = lightTheme({
+   *  colors: {
+   *    modalBg: 'red'
+   *  }
+   * })
+   * ```
+   */
+  theme?: "light" | "dark" | Theme;
+  /**
+   * Set the size of the modal - `compact` or `wide` on desktop
+   *
+   * Modal size is always `compact` on mobile
+   *
+   * By default it is `"wide"` for desktop.
+   */
+  modalSize: "wide" | "compact";
+  /**
+   * URL of the "terms of service" page
+   *
+   * If provided, Modal will show a Terms of Service message at the bottom with below link
+   */
+  termsOfServiceUrl?: string;
+  /**
+   * URL of the "privacy policy" page
+   *
+   * If provided, Modal will show a Privacy Policy message at the bottom with below link
+   */
+  privacyPolicyUrl?: string;
+  /**
+   * Customize the welcome screen. This is only applicable when `modalSize` is set to "wide".
+   * On "wide" Modal size, a welcome screen is shown on the right side of the modal.
+   *
+   * This screen can be customized in two ways
+   *
+   * #### 1. Customize Metadata and Image
+   *
+   * ```tsx
+   * const welcomeScreen = {
+   *  title: "your title",
+   *  subtitle: "your subtitle",
+   *  img: {
+   *   src: "https://your-image-url.png",
+   *   width: 300,
+   *   height: 50,
+   *  },
+   * }
+   * ```
+   *
+   * #### 2. Render Custom Component
+   *
+   * ```tsx
+   * const welcomeScreen = () => {
+   *  return <YourCustomComponent />
+   * }
+   * ```
+   */
+  welcomeScreen?: WelcomeScreen;
+  /**
+   * Replace the thirdweb icon next to modalTitle and set your own iconUrl
+   */
+  titleIconUrl?: string;
+  /**
+   * The object contains the following properties to customize the authentication
+   * - `loginOptional` - specify whether signing in is optional or not. By default it is `false` ( Sign in is required ) if `authConfig` is set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
+   * - `onLogin` - Callback to be called after user signs in with their wallet
+   * - `onLogout` - Callback to be called after user signs out
+   */
+  auth?: {
+    loginOptional?: boolean;
+    onLogin?: (token: string) => void;
+    onLogout?: () => void;
+  };
+  /**
+   * Callback to be called on successful connection of wallet
+   *
+   * Note that this does not include the sign in, If you want to call a callback after user connects AND signs in with their wallet, use `auth.onLogin` instead
+   */
+  onConnect?: () => void;
+};
+
+/**
+ * Set Modal config for the [`ConnectWallet`](https://portal.thirdweb.com/react/v4/components/ConnectWallet) Modal.
+ * This is useful if you want to open the Modal using the `useSetIsWalletModalOpen` hook and want to configure the Modal before opening it.
+ *
+ * @example
+ * ```tsx
+ * function Example() {
+ *  const setModalConfig = useSetWalletModalConfig();
+ *  const setIsWalletModalOpen = useSetIsWalletModalOpen();
+ *
+ *  function openModal() {
+ *    setIsWalletModalOpen(true);
+ *    setModalConfig({
+ *      modalSize: "compact",
+ *      theme: "light"
+ *    })
+ *  }
+ *
+ *  return <button onClick={openModal}> Open Modal </button>
+ * }
+ * ```
+ *
+ * @returns Function to set the Modal config
+ *
+ * The function takes an object with the following properties
+ *
+ * ### title
+ * Title of the Modal
+ *
+ * ### theme
+ * theme to use in Modal
+ *
+ * By default it is set to "dark" if `theme` is not set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
+ * If a `theme` is set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider) then that theme will be used by default
+ *
+ * theme can be set to either `"dark"` or `"light"` or a custom theme object. You can also import `lightTheme` or `darkTheme` functions from `@thirdweb-dev/react` to use the default themes as base and overrides parts of it.
+ *
+ * ```ts
+ * import { lightTheme } from "@thirdweb-dev/react";
+ * const customTheme = lightTheme({
+ *  colors: {
+ *    modalBg: 'red'
+ *  }
+ * })
+ * ```
+ *
+ * ### modalSize
+ * Set the size of the modal - `compact` or `wide` on desktop
+ *
+ * Modal size is always `compact` on mobile
+ *
+ * By default it is `"wide"` for desktop.
+ *
+ * ### termsOfServiceUrl
+ * URL of the "terms of service" page
+ *
+ * If provided, Modal will show a Terms of Service message at the bottom with below link
+ *
+ * ### privacyPolicyUrl
+ * URL of the "privacy policy" page
+ *
+ * If provided, Modal will show a Privacy Policy message at the bottom with below link
+ *
+ * ### welcomeScreen
+ * Customize the welcome screen. This is only applicable when `modalSize` is set to "wide".
+ * On "wide" Modal size, a welcome screen is shown on the right side of the modal.
+ *
+ * This screen can be customized in two ways
+ *
+ * #### 1. Customize Metadata and Image
+ *
+ * ```tsx
+ * function Example() {
+ *  const setModalConfig = useSetWalletModalConfig();
+ *  const setIsWalletModalOpen = useSetIsWalletModalOpen();
+ *
+ *  function openModal() {
+ *    setIsWalletModalOpen(true);
+ *    setModalConfig({
+ *      welcomeScreen: {
+ *        title: "your title",
+ *        subtitle: "your subtitle",
+ *        img: {
+ *          src: "https://your-image-url.png",
+ *          width: 300,
+ *          height: 50,
+ *        }
+ *      }
+ *    })
+ *  }
+ *
+ *  return <button onClick={openModal}> Open Modal </button>
+ * }
+ * ```
+ *
+ * #### 2. Render Custom Component
+ *
+ * ```tsx
+ * function Example() {
+ *  const setModalConfig = useSetWalletModalConfig();
+ *  const setIsWalletModalOpen = useSetIsWalletModalOpen();
+ *
+ *  function openModal() {
+ *    setIsWalletModalOpen(true);
+ *    setModalConfig({
+ *      welcomeScreen() {
+ *       return <YourCustomComponent />
+ *      }
+ *    })
+ *  }
+ *
+ *  return <button onClick={openModal}> Open Modal </button>
+ * }
+ * ```
+ *
+ * ### titleIconUrl
+ * Replace the thirdweb icon next to modalTitle and set your own iconUrl
+ *
+ * ### auth
+ * The object contains the following properties to customize the authentication
+ * - `loginOptional` - specify whether signing in is optional or not. By default it is `false` ( Sign in is required ) if `authConfig` is set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
+ * - `onLogin` - Callback to be called after user signs in with their wallet
+ * - `onLogout` - Callback to be called after user signs out
+ *
+ * ### onConnect
+ * Callback to be called on successful connection of wallet
+ *
+ *
+ * ```tsx
+ * function Example() {
+ *  const setModalConfig = useSetWalletModalConfig();
+ *  const setIsWalletModalOpen = useSetIsWalletModalOpen();
+ *
+ *  function openModal() {
+ *    setIsWalletModalOpen(true);
+ *    setModalConfig({
+ *      onConnect() {
+ *        console.log("wallet connected")
+ *      }
+ *    })
+ *  }
+ *
+ *  return <button onClick={openModal}> Open Modal </button>
+ * }
+ * ```
+ *
+ * Note that this does not include the sign in, If you want to call a callback after user connects AND signs in with their wallet, use `auth.onLogin` prop instead
+ *
+ * ```tsx
+ * function Example() {
+ *  const setModalConfig = useSetWalletModalConfig();
+ *  const setIsWalletModalOpen = useSetIsWalletModalOpen();
+ *
+ *  function openModal() {
+ *    setIsWalletModalOpen(true);
+ *    setModalConfig({
+ *      auth: {
+ *        onLogin() {
+ *           console.log("wallet connected and signed in")
+ *        }
+ *      }
+ *    })
+ *  }
+ *
+ *  return <button onClick={openModal}> Open Modal </button>
+ * }
+ * ```
+ */
+export const useSetWalletModalConfig = () => {
+  const context = useContext(SetModalConfigCtx);
+  const _isMobile = isMobile();
+  const locale = useTWLocale();
+
+  if (context === undefined) {
+    throw new Error(
+      "useSetWalletModalConfig must be used within a ThirdwebProvider",
+    );
+  }
+  return (value: ModalConfigOptions) => {
+    const { title, theme, modalSize, ...rest } = value;
+    return context({
+      title: title || locale.connectWallet.defaultModalTitle,
+      data: undefined,
+      theme: theme || "dark",
+      modalSize: (_isMobile ? "compact" : modalSize) || "wide",
+      ...rest,
+    });
+  };
+};

packages/react/src/payments/components/CheckoutWithCard.tsx

@@ -44,21 +44,23 @@ interface CheckoutWithCardProps {
   locale?: Locale;
 }
 
-export const CheckoutWithCard = ({
-  clientId,
-  sdkClientSecret,
-  appName,
-  options = {
-    ...DEFAULT_BRAND_OPTIONS,
-  },
-  onPaymentSuccess,
-  onReview,
-  onError,
-  onBeforeModalOpen,
-  onPriceUpdate,
-  locale,
-  configs,
-}: CheckoutWithCardProps): React.ReactElement => {
+export function CheckoutWithCard(props: CheckoutWithCardProps) {
+  const {
+    clientId,
+    sdkClientSecret,
+    appName,
+    options = {
+      ...DEFAULT_BRAND_OPTIONS,
+    },
+    onPaymentSuccess,
+    onReview,
+    onError,
+    onBeforeModalOpen,
+    onPriceUpdate,
+    locale,
+    configs,
+  } = props;
+
   const { appName: appNameContext } = usePaymentsSDKContext();
   const [isCardDetailIframeLoading, setIsCardDetailIframeLoading] =
     useState<boolean>(true);
@@ -113,15 +115,13 @@ export const CheckoutWithCard = ({
   ]);
 
   return (
-    <>
-      <div
-        className={iframeContainer}
-        ref={CheckoutWithCardIframeContainerRef}
-        // Label the package version.
-        data-thirdweb-sdk-version={`${packageJson.name}@${packageJson.version}`}
-      >
-        {isCardDetailIframeLoading && <SpinnerWrapper />}
-      </div>
-    </>
+    <div
+      className={iframeContainer}
+      ref={CheckoutWithCardIframeContainerRef}
+      // Label the package version.
+      data-thirdweb-sdk-version={`${packageJson.name}@${packageJson.version}`}
+    >
+      {isCardDetailIframeLoading && <SpinnerWrapper />}
+    </div>
   );
-};
+}

packages/react/src/wallet/ConnectWallet/ConnectWallet.tsx

@@ -1,5 +1,5 @@
 import { Theme, iconSize } from "../../design-system";
-import { ConnectedWalletDetails, type DropDownPosition } from "./Details";
+import { ConnectedWalletDetails } from "./Details";
 import {
   useAddress,
   useConnectionStatus,
@@ -79,6 +79,11 @@ export type ConnectWalletProps = {
    */
   btnTitle?: string;
 
+  /**
+   * Set a custom label for the "Switch Network" button
+   */
+  switchNetworkBtnTitle?: string;
+
   /**
    * Change the title of ConnectWallet Modal
    *
@@ -112,22 +117,6 @@ export type ConnectWalletProps = {
    */
   detailsBtn?: () => JSX.Element;
 
-  /**
-   * When user connects the wallet using ConnectWallet Modal, a "Details Button" is rendered. Clicking on this button opens a dropdown which opens in a certain direction relative to the Details button.
-   *
-   * `dropdownPosition` prop allows you to customize the direction the dropdown should open relative to the Details button.
-   *
-   * ```tsx
-   * <ConnectWallet
-   *  dropdownPosition={{
-   *    side: "bottom", // or use:  "top" | "bottom" | "left" | "right"
-   *    align: "end", // or use:  "start" | "center" | "end";
-   *  }}
-   *  />
-   * ```
-   */
-  dropdownPosition?: DropDownPosition;
-
   /**
    * Enforce that users must sign in with their wallet using [auth](https://portal.thirdweb.com/wallets/auth) after connecting their wallet.
    *
@@ -137,7 +126,7 @@ export type ConnectWalletProps = {
     /**
      * specify whether signing in is optional or not.
      *
-     * By default it is `true` if `authConfig` is set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
+     * By default it is `false` ( sign in required )  if `authConfig` is set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
      */
     loginOptional?: boolean;
     /**
@@ -164,9 +153,9 @@ export type ConnectWalletProps = {
   >;
 
   /**
-   * Hide the "Request Testnet funds" link in ConnectWallet dropdown which is shown when user is connected to a testnet.
+   * Hide the "Request Testnet funds" link in ConnectWallet Details Modal when user is connected to a testnet.
    *
-   * By default it is `false`
+   * By default it is `true`, If you want to show the "Request Testnet funds" link when user is connected to a testnet, set this prop to `false`
    *
    * @example
    * ```tsx
@@ -196,6 +185,8 @@ export type ConnectWalletProps = {
   modalSize?: "compact" | "wide";
 
   /**
+   * URL of the "terms of service" page
+   *
    * If provided, Modal will show a Terms of Service message at the bottom with below link
    *
    * @example
@@ -206,6 +197,8 @@ export type ConnectWalletProps = {
   termsOfServiceUrl?: string;
 
   /**
+   * URL of the "privacy policy" page
+   *
    * If provided, Modal will show a Privacy Policy message at the bottom with below link
    *
    * @example
@@ -308,7 +301,7 @@ export type ConnectWalletProps = {
   hideSwitchToPersonalWallet?: boolean;
 
   /**
-   * Hide the "Disconnect Wallet" button in the ConnectWallet Dropdown.
+   * Hide the "Disconnect Wallet" button in the ConnectWallet Details Modal.
    *
    * By default it is `false`
    *
@@ -318,6 +311,32 @@ export type ConnectWalletProps = {
    * ```
    */
   hideDisconnect?: boolean;
+
+  /**
+   * Callback to be called on successful connection of wallet
+   *
+   * ```tsx
+   * <ConnectWallet
+   *  onConnect={() => {
+   *    console.log("wallet connected")
+   *  }}
+   * />
+   * ```
+   *
+   * Note that this does not include the sign in, If you want to call a callback after user connects AND signs in with their wallet, use `auth.onLogin` prop instead
+   *
+   * ```tsx
+   * <ConnectWallet
+   *  auth={{
+   *   onLogin: () => {
+   *     console.log("wallet connected and signed in")
+   *   }
+   *  }}
+   * />
+   * ```
+   *
+   */
+  onConnect?: () => void;
 };
 
 const TW_CONNECT_WALLET = "tw-connect-wallet";
@@ -365,7 +384,7 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  *
  * ### auth (optional)
  * The object contains the following properties to customize the authentication
- * - `loginOptional` - specify whether signing in is optional or not. By default it is `true` if `authConfig` is set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
+ * - `loginOptional` - specify whether signing in is optional or not. By default it is `false` ( Sign in is required ) if `authConfig` is set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
  * - `onLogin` - Callback to be called after user signs in with their wallet
  * - `onLogout` - Callback to be called after user signs out
  *
@@ -406,19 +425,6 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  * />
  * ```
  *
- * ### dropdownPosition (optional)
- * When user connects the wallet using ConnectWallet Modal, a "Details Button" is rendered. Clicking on this button opens a dropdown which opens in a certain direction relative to the Details button.
- *
- * `dropdownPosition` prop allows you to customize the direction the dropdown should open relative to the Details button.
- *
- * ```tsx
- * <ConnectWallet
- *  dropdownPosition={{
- *    side: "bottom", // or use:  "top" | "bottom" | "left" | "right"
- *    align: "end", // or use:  "start" | "center" | "end";
- *  }}
- *  />
- * ```
  *
  * ### style (optional)
  * CSS styles to apply to the button element
@@ -427,9 +433,9 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  * Customize the Network selector shown
  *
  * ### hideTestnetFaucet (optional)
- * Hide the "Request Testnet funds" link in ConnectWallet dropdown which is shown when user is connected to a testnet.
+ * Hide the "Request Testnet funds" link in ConnectWallet Details Modal when user is connected to a testnet. By default it is `true`
  *
- * By default it is `false`
+ * If you want to show the "Request Testnet funds" link when user is connected to a testnet, set this prop to `false`
  *
  * ```tsx
  * <ConnectWallet hideTestnetFaucet={false} />
@@ -546,7 +552,7 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  * ```
  *
  * ### hideDisconnect
- * Hide the "Disconnect Wallet" button in the ConnectWallet dropdown
+ * Hide the "Disconnect Wallet" button in the ConnectWallet Details Modal
  *
  * By default it is `false`
  *
@@ -671,6 +677,7 @@ export function ConnectWallet(props: ConnectWalletProps) {
                   welcomeScreen: props.welcomeScreen,
                   titleIconUrl: props.modalTitleIconUrl,
                   auth: props.auth,
+                  onConnect: props.onConnect,
                 });
                 setIsWalletModalOpen(true);
               }}
@@ -695,6 +702,7 @@ export function ConnectWallet(props: ConnectWalletProps) {
             <SwitchNetworkButton
               style={props.style}
               className={props.className}
+              switchNetworkBtnTitle={props.switchNetworkBtnTitle}
             />
           );
         }
@@ -732,7 +740,6 @@ export function ConnectWallet(props: ConnectWalletProps) {
           <ConnectedWalletDetails
             theme={theme}
             networkSelector={props.networkSelector}
-            dropdownPosition={props.dropdownPosition}
             className={props.className}
             style={props.style}
             detailsBtn={props.detailsBtn}
@@ -757,12 +764,16 @@ export function ConnectWallet(props: ConnectWalletProps) {
 function SwitchNetworkButton(props: {
   style?: React.CSSProperties;
   className?: string;
+  switchNetworkBtnTitle?: string;
 }) {
   const { activeChain } = useWalletContext();
   const switchChain = useSwitchChain();
   const [switching, setSwitching] = useState(false);
   const locale = useTWLocale();
 
+  const switchNetworkBtnTitle =
+    props.switchNetworkBtnTitle ?? locale.connectWallet.switchNetwork;
+
   return (
     <AnimatedButton
       className={`${TW_CONNECT_WALLET}--switch-network ${
@@ -791,7 +802,7 @@ function SwitchNetworkButton(props: {
       {switching ? (
         <Spinner size="sm" color="primaryButtonText" />
       ) : (
-        locale.connectWallet.switchNetwork
+        switchNetworkBtnTitle
       )}
     </AnimatedButton>
   );

packages/react/src/wallet/ConnectWallet/Details.tsx

@@ -4,7 +4,6 @@ import { Img } from "../../components/Img";
 import { Modal } from "../../components/Modal";
 import { Skeleton } from "../../components/Skeleton";
 import { Spacer } from "../../components/Spacer";
-import { ToolTip } from "../../components/Tooltip";
 import { Button, IconButton } from "../../components/buttons";
 import {
   fontSize,
@@ -15,18 +14,19 @@ import {
   Theme,
 } from "../../design-system";
 import { isMobile } from "../../evm/utils/isMobile";
-import { NetworkSelector, type NetworkSelectorProps } from "./NetworkSelector";
-import { ExitIcon } from "./icons/ExitIcon";
-import { keyframes } from "@emotion/react";
+import {
+  NetworkSelectorContent,
+  type NetworkSelectorProps,
+} from "./NetworkSelector";
 import styled from "@emotion/styled";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import {
   ChevronRightIcon,
   EnterIcon,
   PaperPlaneIcon,
   PinBottomIcon,
   ShuffleIcon,
-  TextAlignLeftIcon,
+  TextAlignJustifyIcon,
+  ExitIcon,
 } from "@radix-ui/react-icons";
 import { Localhost } from "@thirdweb-dev/chains";
 import {
@@ -48,7 +48,7 @@ import {
   walletIds,
   type EmbeddedWallet,
 } from "@thirdweb-dev/wallets";
-import { Container } from "../../components/basic";
+import { Container, Line } from "../../components/basic";
 import { FundsIcon } from "./icons/FundsIcon";
 import { ExportLocalWallet } from "../wallets/localWallet/ExportLocalWallet";
 import { useWalletContext } from "@thirdweb-dev/react-core";
@@ -62,11 +62,7 @@ import { ReceiveFunds } from "./ReceiveFunds";
 import { smartWalletIcon } from "./icons/dataUris";
 import { useTWLocale } from "../../evm/providers/locale-provider";
 import { shortenString } from "@thirdweb-dev/react-core";
-import {
-  StyledButton,
-  StyledDiv,
-  StyledLabel,
-} from "../../design-system/elements";
+import { StyledButton, StyledDiv } from "../../design-system/elements";
 import { useCustomTheme } from "../../design-system/CustomThemeProvider";
 import {
   appleIconUri,
@@ -74,16 +70,18 @@ import {
   googleIconUri,
 } from "./icons/socialLogins";
 import { useEmbeddedWalletUserEmail } from "../../evm/hooks/wallets/useEmbeddedWallet";
-
-export type DropDownPosition = {
-  side: "top" | "bottom" | "left" | "right";
-  align: "start" | "center" | "end";
-};
+import { onModalUnmount } from "./constants";
 
 const TW_CONNECTED_WALLET = "tw-connected-wallet";
 
+type WalletDetailsModalScreen =
+  | "main"
+  | "export"
+  | "send"
+  | "receive"
+  | "network-switcher";
+
 export const ConnectedWalletDetails: React.FC<{
-  dropdownPosition?: DropDownPosition;
   onDisconnect: () => void;
   style?: React.CSSProperties;
   networkSelector?: Omit<
@@ -127,14 +125,8 @@ export const ConnectedWalletDetails: React.FC<{
     string | undefined
   >(undefined);
 
-  // modals
-  const [showNetworkSelector, setShowNetworkSelector] = useState(false);
-  const [showExportModal, setShowExportModal] = useState(false);
-  const [showSendModal, setShowSendModal] = useState(false);
-  const [showReceiveModal, setShowReceiveModal] = useState(false);
-
-  // dropdown
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");
+  const [isOpen, setIsOpen] = useState(false);
 
   const sdk = useSDK();
 
@@ -152,7 +144,7 @@ export const ConnectedWalletDetails: React.FC<{
   const isActuallyMetaMask =
     activeWallet && activeWallet instanceof MetaMaskWallet;
 
-  const shortAddress = address ? shortenString(address) : "";
+  const shortAddress = address ? shortenString(address, false) : "";
 
   const addressOrENS = ensQuery.data?.ens || shortAddress;
   const avatarUrl = ensQuery.data?.avatarUrl;
@@ -183,6 +175,14 @@ export const ConnectedWalletDetails: React.FC<{
     }
   }, [activeWallet]);
 
+  useEffect(() => {
+    if (!isOpen) {
+      onModalUnmount(() => {
+        setScreen("main");
+      });
+    }
+  }, [isOpen]);
+
   const walletIconUrl =
     overrideWalletIconUrl || activeWalletConfig?.meta.iconURL || "";
   const avatarOrWalletIconUrl = avatarUrl || walletIconUrl;
@@ -250,14 +250,14 @@ export const ConnectedWalletDetails: React.FC<{
     </WalletInfoButton>
   );
 
-  let networkSwitcherButton = (
+  const networkSwitcherButton = (
     <MenuButton
       type="button"
       disabled={disableSwitchChain}
       onClick={() => {
-        setIsDropdownOpen(false);
-        setShowNetworkSelector(true);
+        setScreen("network-switcher");
       }}
+      data-variant="primary"
     >
       <div
         style={{
@@ -268,7 +268,7 @@ export const ConnectedWalletDetails: React.FC<{
       >
         <ChainIcon chain={chain} size={iconSize.md} active />
       </div>
-      <Text size="sm" color="primaryText" multiline>
+      <Text color="primaryText" multiline>
         {chain?.name || `Unknown chain #${walletChainId}`}
       </Text>
       <StyledChevronRightIcon
@@ -282,19 +282,17 @@ export const ConnectedWalletDetails: React.FC<{
     </MenuButton>
   );
 
-  if (!disableSwitchChain) {
-    networkSwitcherButton = (
-      <ToolTip tip={locale.switchNetwork}>{networkSwitcherButton}</ToolTip>
-    );
-  }
+  // by default we hide faucet link
+  const showFaucet =
+    props.hideTestnetFaucet === undefined ? false : !props.hideTestnetFaucet;
 
-  const content = (
+  let content = (
     <div>
-      {/* Balance and Account Address */}
-      <Container flex="row" gap="sm">
+      <Spacer y="xl" />
+      <Container px="lg" flex="column" center="x">
         <Img
-          width={iconSize.xl}
-          height={iconSize.xl}
+          width={iconSize.xxl}
+          height={iconSize.xxl}
           src={avatarOrWalletIconUrl}
           alt=""
           style={{
@@ -302,360 +300,319 @@ export const ConnectedWalletDetails: React.FC<{
           }}
         />
 
+        <Spacer y="md" />
+
+        {/* Address */}
         <div
           style={{
-            flexGrow: 1,
+            display: "flex",
+            gap: spacing.xxs,
+            alignItems: "center",
+            transform: "translateX(10px)",
           }}
+          data-test="connected-wallet-address"
+          data-address={address}
         >
-          {/* row 1 */}
-          <Container gap="xs" flex="row" center="y">
-            <div
-              style={{
-                display: "flex",
-                gap: spacing.xs,
-                alignItems: "center",
-              }}
-              data-test="connected-wallet-address"
-              data-address={address}
-            >
-              <Text color="primaryText" weight={500}>
-                {addressOrENS}
-              </Text>
-              <IconButton
-                style={{
-                  padding: "3px",
-                }}
-                data-test="copy-address"
-              >
-                <CopyIcon
-                  text={address || ""}
-                  tip={locale.copyAddress}
-                  side="bottom"
-                />
-              </IconButton>
-            </div>
-
-            {!props.hideDisconnect && (
-              <ToolTip
-                tip={locale.disconnectWallet}
-                side="bottom"
-                align={"end"}
-                sideOffset={10}
-              >
-                <DisconnectIconButton
-                  type="button"
-                  onClick={() => {
-                    disconnect();
-                    props.onDisconnect();
-                  }}
-                >
-                  <ExitIcon size={iconSize.md} />
-                </DisconnectIconButton>
-              </ToolTip>
-            )}
-          </Container>
-
-          {/* row 2 */}
-          <Text weight={500} size="sm">
-            {" "}
-            {balanceQuery.data ? (
-              Number(balanceQuery.data.displayValue).toFixed(3)
-            ) : (
-              <Skeleton height="1em" width="100px" />
-            )}{" "}
-            {balanceQuery.data?.symbol}{" "}
+          <Text color="primaryText" weight={500} size="md">
+            {addressOrENS}
           </Text>
-        </div>
-      </Container>
-
-      <Spacer y="lg" />
-
-      <ConnectedToSmartWallet />
-      <EmbeddedWalletEmail />
-
-      {/* Send and Receive */}
-      <Container
-        style={{
-          display: "grid",
-          gridTemplateColumns: "1fr 1fr",
-          gap: spacing.sm,
-        }}
-      >
-        <Button
-          variant="outline"
-          style={{
-            fontSize: fontSize.sm,
-            display: "flex",
-            gap: spacing.xs,
-            alignItems: "center",
-            padding: spacing.sm,
-          }}
-          onClick={() => {
-            setShowSendModal(true);
-            setIsDropdownOpen(false);
-          }}
-        >
-          <PaperPlaneIcon
-            width={iconSize.sm}
-            height={iconSize.sm}
+          <IconButton
             style={{
-              transform: "translateY(-10%) rotate(-45deg) ",
+              padding: "3px",
             }}
-          />
-          {locale.send}
-        </Button>
+            data-test="copy-address"
+          >
+            <CopyIcon
+              text={address || ""}
+              tip={locale.copyAddress}
+              side="top"
+            />
+          </IconButton>
+        </div>
 
-        <Button
-          variant="outline"
-          style={{
-            fontSize: fontSize.sm,
-            display: "flex",
-            gap: spacing.xs,
-            alignItems: "center",
-            padding: spacing.sm,
-          }}
-          onClick={() => {
-            setShowReceiveModal(true);
-            setIsDropdownOpen(false);
-          }}
-        >
-          <PinBottomIcon width={iconSize.sm} height={iconSize.sm} />{" "}
-          {locale.receive}{" "}
-        </Button>
+        <Spacer y="xxs" />
+
+        {/* Balance */}
+        <Text weight={500} size="sm">
+          {" "}
+          {balanceQuery.data ? (
+            Number(balanceQuery.data.displayValue).toFixed(3)
+          ) : (
+            <Skeleton height="1em" width="100px" />
+          )}{" "}
+          {balanceQuery.data?.symbol}{" "}
+        </Text>
       </Container>
 
       <Spacer y="lg" />
 
-      {/* Network Switcher */}
-      <div>
-        <DropdownLabel>{locale.currentNetwork}</DropdownLabel>
-        <Spacer y="xs" />
-        {networkSwitcherButton}
-      </div>
+      <Container px="lg">
+        <ConnectedToSmartWallet />
+        <EmbeddedWalletEmail />
+
+        {/* Send and Receive */}
+        <Container
+          style={{
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: spacing.sm,
+          }}
+        >
+          <Button
+            variant="outline"
+            style={{
+              fontSize: fontSize.sm,
+              display: "flex",
+              gap: spacing.xs,
+              alignItems: "center",
+              padding: spacing.sm,
+            }}
+            onClick={() => {
+              setScreen("send");
+            }}
+          >
+            <PaperPlaneIcon
+              width={iconSize.sm}
+              height={iconSize.sm}
+              style={{
+                transform: "translateY(-10%) rotate(-45deg) ",
+              }}
+            />
+            {locale.send}
+          </Button>
+
+          <Button
+            variant="outline"
+            style={{
+              fontSize: fontSize.sm,
+              display: "flex",
+              gap: spacing.xs,
+              alignItems: "center",
+              padding: spacing.sm,
+            }}
+            onClick={() => {
+              setScreen("receive");
+            }}
+          >
+            <PinBottomIcon width={iconSize.sm} height={iconSize.sm} />{" "}
+            {locale.receive}{" "}
+          </Button>
+        </Container>
+      </Container>
 
       <Spacer y="md" />
 
-      <Container flex="column" gap="sm">
-        {/* Switch to Personal Wallet for Safe */}
-        {personalWallet &&
-          personalWalletConfig &&
-          !props.hideSwitchToPersonalWallet && (
+      <Container px="md">
+        {/* Network Switcher */}
+        <Container
+          flex="column"
+          style={{
+            gap: "1px",
+          }}
+        >
+          {networkSwitcherButton}
+
+          {/* Switch to Personal Wallet for Safe */}
+          {personalWallet &&
+            personalWalletConfig &&
+            !props.hideSwitchToPersonalWallet && (
+              <WalletSwitcher
+                wallet={personalWallet}
+                name={locale.personalWallet}
+              />
+            )}
+
+          {/* Switch to Wrapper Wallet */}
+          {wrapperWalletConfig && wrapperWallet && (
             <WalletSwitcher
-              wallet={personalWallet}
-              name={locale.personalWallet}
+              name={
+                wrapperWallet.walletId === walletIds.smartWallet
+                  ? locale.smartWallet
+                  : wrapperWalletConfig.meta.name
+              }
+              wallet={wrapperWallet}
             />
           )}
 
-        {/* Switch to Wrapper Wallet */}
-        {wrapperWalletConfig && wrapperWallet && (
-          <WalletSwitcher
-            name={
-              wrapperWallet.walletId === walletIds.smartWallet
-                ? locale.smartWallet
-                : wrapperWalletConfig.meta.name
-            }
-            wallet={wrapperWallet}
-          />
-        )}
+          {/* Switch Account for Metamask */}
+          {isActuallyMetaMask &&
+            activeWalletConfig &&
+            activeWalletConfig.isInstalled &&
+            activeWalletConfig.isInstalled() &&
+            !isMobile() && (
+              <MenuButton
+                type="button"
+                onClick={() => {
+                  (activeWallet as MetaMaskWallet).switchAccount();
+                  setIsOpen(false);
+                }}
+              >
+                <ShuffleIcon width={iconSize.md} height={iconSize.md} />
+                <Text color="primaryText">{locale.switchAccount}</Text>
+              </MenuButton>
+            )}
 
-        {/* Switch Account for Metamask */}
-        {isActuallyMetaMask &&
-          activeWalletConfig &&
-          activeWalletConfig.isInstalled &&
-          activeWalletConfig.isInstalled() &&
-          !isMobile() && (
-            <MenuButton
-              type="button"
-              onClick={() => {
-                (activeWallet as MetaMaskWallet).switchAccount();
-                setIsDropdownOpen(false);
-              }}
-              style={{
-                fontSize: fontSize.sm,
-              }}
-            >
-              <Container color="secondaryText">
-                <ShuffleIcon width={iconSize.sm} height={iconSize.sm} />
-              </Container>
-              {locale.switchAccount}
-            </MenuButton>
-          )}
+          {/* Request Testnet funds */}
+          {showFaucet &&
+            ((chain?.faucets && chain.faucets.length > 0) ||
+              chain?.chainId === Localhost.chainId) && (
+              <MenuLink
+                href={chain?.faucets ? chain.faucets[0] : "#"}
+                target="_blank"
+                as="a"
+                onClick={async (e) => {
+                  if (chain.chainId === Localhost.chainId) {
+                    e.preventDefault();
+                    setIsOpen(false);
+                    await sdk?.wallet.requestFunds(10);
+                    await balanceQuery.refetch();
+                  }
+                }}
+                style={{
+                  textDecoration: "none",
+                  color: "inherit",
+                }}
+              >
+                <Container flex="row" center="both" color="secondaryText">
+                  <FundsIcon size={iconSize.md} />
+                </Container>
+                {locale.requestTestnetFunds}
+              </MenuLink>
+            )}
 
-        {/* Request Testnet funds */}
-        {!props.hideTestnetFaucet &&
-          ((chain?.faucets && chain.faucets.length > 0) ||
-            chain?.chainId === Localhost.chainId) && (
+          {/* Explorer link */}
+          {chain?.explorers && chain.explorers[0]?.url && (
             <MenuLink
-              href={chain?.faucets ? chain.faucets[0] : "#"}
+              href={chain.explorers[0].url + "/address/" + address}
               target="_blank"
               as="a"
-              onClick={async (e) => {
-                if (chain.chainId === Localhost.chainId) {
-                  e.preventDefault();
-                  setIsDropdownOpen(false);
-                  await sdk?.wallet.requestFunds(10);
-                  await balanceQuery.refetch();
-                }
-              }}
               style={{
                 textDecoration: "none",
                 color: "inherit",
-                fontSize: fontSize.sm,
               }}
             >
-              <Container flex="row" center="both" color="secondaryText">
-                <FundsIcon size={iconSize.sm} />
+              <Container flex="row" center="y" color="secondaryText">
+                <TextAlignJustifyIcon
+                  width={iconSize.md}
+                  height={iconSize.md}
+                />
               </Container>
-              {locale.requestTestnetFunds}
+              {locale.transactionHistory}
             </MenuLink>
           )}
 
-        {/* Explorer link */}
-        {chain?.explorers && chain.explorers[0]?.url && (
-          <MenuLink
-            href={chain.explorers[0].url + "/address/" + address}
-            target="_blank"
-            as="a"
-            style={{
-              textDecoration: "none",
-              color: "inherit",
-              fontSize: fontSize.sm,
-            }}
-          >
-            <Container flex="row" center="both" color="secondaryText">
-              <TextAlignLeftIcon width={iconSize.sm} height={iconSize.sm} />
-            </Container>
-            {locale.transactionHistory}
-          </MenuLink>
-        )}
+          {/* Export  Wallet */}
+          {activeWallet?.walletId === walletIds.localWallet && (
+            <div>
+              <MenuButton
+                onClick={() => {
+                  setScreen("export");
+                }}
+                style={{
+                  fontSize: fontSize.sm,
+                }}
+              >
+                <PinBottomIcon width={iconSize.md} height={iconSize.md} />
+                <Text color="primaryText">{locale.backupWallet}</Text>
+              </MenuButton>
+            </div>
+          )}
+        </Container>
 
-        {/* Export  Wallet */}
-        {activeWallet?.walletId === walletIds.localWallet && (
-          <div>
+        <Spacer y="md" />
+      </Container>
+
+      {props.hideDisconnect !== true && (
+        <Container>
+          <Line />
+          <Spacer y="sm" />
+          <Container px="md">
             <MenuButton
+              data-variant="danger"
+              type="button"
               onClick={() => {
-                setShowExportModal(true);
-                setIsDropdownOpen(false);
-              }}
-              style={{
-                fontSize: fontSize.sm,
+                disconnect();
+                props.onDisconnect();
               }}
             >
-              <Container flex="row" center="both" color="secondaryText">
-                <PinBottomIcon width={iconSize.sm} height={iconSize.sm} />
-              </Container>
-              {locale.backupWallet}{" "}
+              <ExitIcon width={iconSize.md} height={iconSize.md} />
+              <Text color="primaryText">{locale.disconnectWallet}</Text>
             </MenuButton>
-            <Spacer y="md" />
+          </Container>
+          <Spacer y="sm" />
+        </Container>
+      )}
+
+      {activeWallet?.walletId === walletIds.localWallet && (
+        <>
+          <Line />
+          <Container py="md">
             <Text size="xs" center multiline color="danger" balance>
               {locale.guestWalletWarning}
             </Text>
-          </div>
-        )}
-      </Container>
+          </Container>
+        </>
+      )}
     </div>
   );
 
-  return (
-    <>
-      {isMobile() ? (
-        <Modal
-          size={"compact"}
-          trigger={trigger}
-          open={isDropdownOpen}
-          setOpen={setIsDropdownOpen}
-          hideCloseIcon={true}
-        >
-          <Container p="lg">{content}</Container>
-        </Modal>
-      ) : (
-        <DropdownMenu.Root
-          open={isDropdownOpen}
-          onOpenChange={setIsDropdownOpen}
-        >
-          <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>
-          <DropdownMenu.Portal>
-            <DropDownContent
-              asChild
-              side={props.dropdownPosition?.side || "bottom"}
-              align={props.dropdownPosition?.align || "end"}
-              sideOffset={10}
-            >
-              {content}
-            </DropDownContent>
-          </DropdownMenu.Portal>
-        </DropdownMenu.Root>
-      )}
-
-      <NetworkSelector
-        open={showNetworkSelector}
+  if (screen === "network-switcher") {
+    content = (
+      <NetworkSelectorContent
+        open={true}
         theme={props.theme}
         chains={chains}
         {...props.networkSelector}
-        onClose={() => setShowNetworkSelector(false)}
+        onClose={() => {
+          setIsOpen(false);
+        }}
+        onBack={() => {
+          setScreen("main");
+        }}
       />
+    );
+  } else if (screen === "export") {
+    content = (
+      <ExportLocalWallet
+        modalSize="compact"
+        localWalletConfig={activeWalletConfig as LocalWalletConfig}
+        onExport={() => {
+          setIsOpen(false);
+        }}
+        walletAddress={address}
+        walletInstance={activeWallet}
+        onBack={() => {
+          setScreen("main");
+        }}
+      />
+    );
+  } else if (screen === "send") {
+    content = (
+      <SendFunds
+        supportedTokens={props.supportedTokens}
+        onBack={() => {
+          setScreen("main");
+        }}
+      />
+    );
+  } else if (screen === "receive") {
+    content = (
+      <ReceiveFunds
+        iconUrl={walletIconUrl}
+        onBack={() => {
+          setScreen("main");
+        }}
+      />
+    );
+  }
 
-      <Modal
-        size={"compact"}
-        open={showExportModal}
-        setOpen={setShowExportModal}
-      >
-        <ExportLocalWallet
-          modalSize="compact"
-          localWalletConfig={activeWalletConfig as LocalWalletConfig}
-          onExport={() => {
-            setShowExportModal(false);
-          }}
-          walletAddress={address}
-          walletInstance={activeWallet}
-        />
-      </Modal>
-
-      <Modal size={"compact"} open={showSendModal} setOpen={setShowSendModal}>
-        <SendFunds supportedTokens={props.supportedTokens} />
-      </Modal>
-
-      <Modal
-        size={"compact"}
-        open={showReceiveModal}
-        setOpen={setShowReceiveModal}
-      >
-        <ReceiveFunds iconUrl={walletIconUrl} />
-      </Modal>
-    </>
+  return (
+    <Modal size={"compact"} trigger={trigger} open={isOpen} setOpen={setIsOpen}>
+      {content}
+    </Modal>
   );
 };
 
-const dropdownContentFade = keyframes`
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-`;
-
-const DropDownContent = /* @__PURE__ */ (() =>
-  styled(DropdownMenu.Content)(() => {
-    const theme = useCustomTheme();
-    return {
-      width: "360px",
-      boxSizing: "border-box",
-      maxWidth: "100%",
-      borderRadius: radius.lg,
-      padding: spacing.lg,
-      animation: `${dropdownContentFade} 400ms cubic-bezier(0.16, 1, 0.3, 1)`,
-      willChange: "transform, opacity",
-      border: `1px solid ${theme.colors.borderColor}`,
-      backgroundColor: theme.colors.dropdownBg,
-      "--bg": theme.colors.dropdownBg,
-      zIndex: 1000000,
-      lineHeight: "normal",
-    };
-  }))();
-
 const WalletInfoButton = /* @__PURE__ */ StyledButton(() => {
   const theme = useCustomTheme();
   return {
@@ -688,15 +645,6 @@ const WalletInfoButton = /* @__PURE__ */ StyledButton(() => {
   };
 });
 
-const DropdownLabel = /* @__PURE__ */ StyledLabel(() => {
-  const theme = useCustomTheme();
-  return {
-    fontSize: fontSize.sm,
-    color: theme.colors.secondaryText,
-    fontWeight: 500,
-  };
-});
-
 const MenuButton = /* @__PURE__ */ StyledButton(() => {
   const theme = useCustomTheme();
   return {
@@ -704,7 +652,7 @@ const MenuButton = /* @__PURE__ */ StyledButton(() => {
     padding: `${spacing.sm} ${spacing.sm}`,
     borderRadius: radius.md,
     backgroundColor: "transparent",
-    border: `1px solid ${theme.colors.borderColor}`,
+    // border: `1px solid ${theme.colors.borderColor}`,
     boxSizing: "border-box",
     display: "flex",
     alignItems: "center",
@@ -712,14 +660,17 @@ const MenuButton = /* @__PURE__ */ StyledButton(() => {
     cursor: "pointer",
     fontSize: fontSize.md,
     fontWeight: 500,
-    color: `${theme.colors.primaryText} !important`,
+    color: theme.colors.secondaryText,
     gap: spacing.sm,
     WebkitTapHighlightColor: "transparent",
     lineHeight: 1.3,
-    "&:not([disabled]):hover": {
-      transition: "box-shadow 250ms ease, border-color 250ms ease",
-      border: `1px solid ${theme.colors.accentText}`,
-      boxShadow: `0 0 0 1px ${theme.colors.accentText}`,
+    transition: "background-color 200ms ease, transform 200ms ease",
+    "&:hover": {
+      backgroundColor: theme.colors.walletSelectorButtonHoverBg,
+      transform: "scale(1.01)",
+      svg: {
+        color: theme.colors.accentText,
+      },
     },
     "&[disabled]": {
       cursor: "not-allowed",
@@ -727,10 +678,15 @@ const MenuButton = /* @__PURE__ */ StyledButton(() => {
         display: "none",
       },
     },
-    "&[disabled]:hover": {
-      transition: "box-shadow 250ms ease, border-color 250ms ease",
-      border: `1px solid ${theme.colors.danger}`,
-      boxShadow: `0 0 0 1px ${theme.colors.danger}`,
+    svg: {
+      color: theme.colors.secondaryText,
+      transition: "color 200ms ease",
+    },
+    "&[data-variant='danger']:hover svg": {
+      color: theme.colors.danger + "!important",
+    },
+    "&[data-variant='primary']:hover svg": {
+      color: theme.colors.primaryText + "!important",
     },
   };
 });
@@ -746,19 +702,6 @@ export const StyledChevronRightIcon = /* @__PURE__ */ styled(
   };
 });
 
-const DisconnectIconButton = /* @__PURE__ */ styled(IconButton)(() => {
-  const theme = useCustomTheme();
-  return {
-    marginRight: `-${spacing.xxs}`,
-    marginLeft: "auto",
-    color: theme.colors.secondaryText,
-    "&:hover": {
-      color: theme.colors.danger,
-      background: "none",
-    },
-  };
-});
-
 function WalletSwitcher({
   wallet,
   name,
@@ -779,10 +722,10 @@ function WalletSwitcher({
         fontSize: fontSize.sm,
       }}
     >
-      <Container color="secondaryText">
-        <EnterIcon width={iconSize.sm} height={iconSize.sm} />
-      </Container>
-      {locale.switchTo} {name}
+      <EnterIcon width={iconSize.md} height={iconSize.md} />
+      <Text color="primaryText">
+        {locale.switchTo} {name}
+      </Text>
     </MenuButton>
   );
 }
@@ -817,22 +760,9 @@ function ConnectedToSmartWallet() {
   }, [activeWallet]);
 
   const content = (
-    <Container
-      flex="row"
-      gap="xs"
-      center="y"
-      style={{
-        width: "100%",
-        justifyContent: "space-between",
-      }}
-    >
-      <Container flex="row" gap="xs" center="y">
-        <ActiveDot />
-        {locale.connectedToSmartWallet}
-      </Container>
-      {isSmartWalletDeployed && (
-        <ChevronRightIcon width={iconSize.sm} height={iconSize.sm} />
-      )}
+    <Container flex="row" gap="xxs" center="both">
+      <ActiveDot />
+      {locale.connectedToSmartWallet}
     </Container>
   );
 
@@ -867,11 +797,13 @@ function EmbeddedWalletEmail() {
   if (emailQuery.data) {
     return (
       <Container
+        flex="row"
+        center="x"
         style={{
           paddingBottom: spacing.md,
         }}
       >
-        <Text color="primaryText">{emailQuery.data}</Text>
+        <Text size="sm">{emailQuery.data}</Text>
       </Container>
     );
   }