[v3] test danger rule

.eslintrc.json

@@ -75,6 +75,7 @@
     "@typescript-eslint/promise-function-async": "off",
     "@typescript-eslint/no-confusing-void-expression": "off",
     "@typescript-eslint/prefer-nullish-coalescing": "off",
-    "@typescript-eslint/no-unnecessary-condition": "off"
+    "@typescript-eslint/no-unnecessary-condition": "off",
+    "@typescript-eslint/no-unsafe-argument": "off"
   }
 }

apps/laboratory/src/pages/index.tsx

@@ -1,21 +1,11 @@
 import { Center, VStack } from '@chakra-ui/react'
-import { Web3Modal } from '@web3modal/wagmi'
+import { Web3Modal, walletConnectProvider } from '@web3modal/wagmi'
 import { useEffect, useState } from 'react'
 import { WagmiConfig, configureChains, createConfig } from 'wagmi'
-import {
-  arbitrum,
-  avalanche,
-  fantom,
-  gnosis,
-  mainnet,
-  optimism,
-  polygon,
-  sepolia
-} from 'wagmi/chains'
+import { arbitrum, avalanche, bsc, gnosis, mainnet, optimism, polygon, zkSync } from 'wagmi/chains'
 import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
 import { InjectedConnector } from 'wagmi/connectors/injected'
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
-import { publicProvider } from 'wagmi/providers/public'
 import { ConnectButton } from '../components/ConnectButton'
 import { NetworksButton } from '../components/NetworksButton'
 
@@ -27,8 +17,8 @@ if (!projectId) {
 
 // 2. Create wagmiConfig
 const { chains, publicClient } = configureChains(
-  [mainnet, arbitrum, avalanche, polygon, gnosis, optimism, sepolia, fantom],
-  [publicProvider()]
+  [mainnet, arbitrum, polygon, avalanche, bsc, optimism, gnosis, zkSync],
+  [walletConnectProvider({ projectId })]
 )
 const wagmiConfig = createConfig({
   autoConnect: true,

dangerfile.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-await-in-loop */
 import { danger, fail, message, warn } from 'danger'
+import corePackageJson from './packages/core/package.json' assert { type: 'json' }
 
 // -- Constants ---------------------------------------------------------------
 const TYPE_COMMENT = `// -- Types --------------------------------------------- //`
@@ -231,3 +232,19 @@ async function checkClientPackages() {
   }
 }
 checkClientPackages()
+
+// -- Check sdkVersion ------------------------------------------------------------
+async function checkSdkVersion() {
+  const wagmiConstantsPath = 'packages/wagmi/src/utils/constants.ts'
+  const wagmiConstants = all_files.find(f => f.includes(wagmiConstantsPath))
+
+  if (wagmiConstants) {
+    const diff = await diffForFile(wagmiConstants)
+    if (!diff?.added.includes(`VERSION = ${corePackageJson.version}`)) {
+      fail(`VERSION in ${wagmiConstantsPath} does not match latest packages/core version`)
+    }
+  } else {
+    fail(`Could not find ${wagmiConstantsPath} file`)
+  }
+}
+checkSdkVersion()

examples/react-wagmi/src/App.jsx

@@ -1,10 +1,10 @@
-import { useWeb3Modal } from '@web3modal/wagmi'
+import { walletConnectProvider } from '@web3modal/wagmi'
+import { createWeb3Modal, useWeb3Modal } from '@web3modal/wagmi/react'
 import { WagmiConfig, configureChains, createConfig } from 'wagmi'
 import { arbitrum, mainnet } from 'wagmi/chains'
 import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
 import { InjectedConnector } from 'wagmi/connectors/injected'
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
-import { publicProvider } from 'wagmi/providers/public'
 
 // 1. Get projectId
 const projectId = import.meta.env.VITE_PROJECT_ID
@@ -13,24 +13,32 @@ if (!projectId) {
 }
 
 // 2. Create wagmiConfig
-const { chains, publicClient } = configureChains([mainnet, arbitrum], [publicProvider()])
+const { chains, publicClient } = configureChains(
+  [mainnet, arbitrum],
+  [walletConnectProvider({ projectId })]
+)
+
 const wagmiConfig = createConfig({
   autoConnect: true,
   connectors: [
-    new WalletConnectConnector({ chains, options: { projectId, showQrModal: false } }),
-    new InjectedConnector({ chains, options: { shimDisconnect: true } }),
-    new CoinbaseWalletConnector({ chains, options: { appName: 'Web3Modal' } })
+    new WalletConnectConnector({ options: { projectId, showQrModal: false } }),
+    new InjectedConnector({ options: { shimDisconnect: true } }),
+    new CoinbaseWalletConnector({ options: { appName: 'Web3Modal' } })
   ],
   publicClient
 })
 
+// 3. Create modal
+createWeb3Modal({ wagmiConfig, projectId, chains })
+
 export default function App() {
-  // 3. Create modal
-  const modal = useWeb3Modal({ wagmiConfig, projectId, chains })
+  // 4. Use modal hook
+  const modal = useWeb3Modal()
 
   return (
     <WagmiConfig config={wagmiConfig}>
-      <button onClick={() => modal.open()}>Open Modal</button>
+      <button onClick={() => modal.open()}>Open Connect Modal</button>
+      <button onClick={() => modal.open({ view: 'Networks' })}>Open Network Modal</button>
     </WagmiConfig>
   )
 }

examples/vue-wagmi/src/App.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { useWeb3Modal } from '@web3modal/wagmi/vue'
 import { configureChains, createConfig } from '@wagmi/core'
-import { arbitrum, mainnet } from 'wagmi/chains'
+import { mainnet, arbitrum } from '@wagmi/core/chains'
 import { CoinbaseWalletConnector } from '@wagmi/core/connectors/coinbaseWallet'
 import { InjectedConnector } from '@wagmi/core/connectors/injected'
 import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect'
-import { publicProvider } from '@wagmi/core/providers/public'
+import { walletConnectProvider } from '@web3modal/wagmi'
+import { createWeb3Modal, useWeb3Modal } from '@web3modal/wagmi/vue'
 
 // 1. Get projectId
 const projectId = import.meta.env.VITE_PROJECT_ID
@@ -14,21 +14,29 @@ if (!projectId) {
 }
 
 // 2. Create wagmiConfig
-const { chains, publicClient } = configureChains([mainnet, arbitrum], [publicProvider()])
+const { chains, publicClient } = configureChains(
+  [mainnet, arbitrum],
+  [walletConnectProvider({ projectId })]
+)
+
 const wagmiConfig = createConfig({
   autoConnect: true,
   connectors: [
-    new WalletConnectConnector({ chains, options: { projectId, showQrModal: false } }),
-    new InjectedConnector({ chains, options: { shimDisconnect: true } }),
-    new CoinbaseWalletConnector({ chains, options: { appName: 'Web3Modal' } })
+    new WalletConnectConnector({ options: { projectId, showQrModal: false } }),
+    new InjectedConnector({ options: { shimDisconnect: true } }),
+    new CoinbaseWalletConnector({ options: { appName: 'Web3Modal' } })
   ],
   publicClient
 })
 
 // 3. Create modal
-const modal = useWeb3Modal({ wagmiConfig, projectId, chains })
+createWeb3Modal({ wagmiConfig, projectId, chains })
+
+// 4. Use modal composable
+const modal = useWeb3Modal()
 </script>
 
 <template>
-  <button @click="() => modal.open()">Open Modal</button>
+  <button @click="modal.open()">Open Connect Modal</button>
+  <button @click="modal.open({ view: 'Networks' })">Open Network Modal</button>
 </template>

package.json

@@ -7,7 +7,7 @@
     "build": "turbo run build",
     "gallery": "turbo run dev:gallery --parallel",
     "laboratory": "turbo run dev:laboratory --parallel",
-    "examples": "turbo run dev:example",
+    "examples": "turbo run dev:example --parallel",
     "build:gallery": "turbo run build:gallery",
     "build:laboratory": "turbo run build:laboratory",
     "test": "turbo run test --parallel",

packages/core/index.ts

@@ -44,5 +44,6 @@ export type {
   Connector,
   ConnectorType,
   Platform,
-  ProjectId
+  ProjectId,
+  SdkVersion
 } from './src/utils/TypeUtils.js'

packages/core/package.json

@@ -9,10 +9,9 @@
   ],
   "scripts": {
     "build:clean": "rm -rf dist",
-    "build:types": "tsc --declaration --emitDeclarationOnly --outDir ./dist/types",
-    "build:source": "tsc --outDir ./dist/esm",
-    "build": "npm run build:clean; npm run build:types; npm run build:source",
-    "watch": "npm run build:clean; tsc --watch --outDir ./dist/esm",
+    "build:dist": "tsc --build",
+    "build": "npm run build:clean; npm run build:dist",
+    "watch": "npm run build:clean; tsc --watch",
     "typecheck": "tsc --noEmit",
     "test": "vitest run --dir tests"
   },

packages/core/src/controllers/ApiController.ts

@@ -6,19 +6,20 @@ import type {
   ApiGetWalletsRequest,
   ApiGetWalletsResponse,
   ApiWallet,
-  ProjectId
+  ProjectId,
+  SdkVersion
 } from '../utils/TypeUtils.js'
 
 // -- Helpers ------------------------------------------- //
 const api = new FetchUtil({ baseUrl: 'https://api.web3modal.com' })
 const entries = 24
 const recommendedEntries = 4
-const sdkVersion = `js-3.0.0`
 const sdkType = 'w3m'
 
 // -- Types --------------------------------------------- //
 export interface ApiControllerState {
   projectId: ProjectId
+  sdkVersion: SdkVersion
   page: number
   count: number
   recommended: ApiWallet[]
@@ -32,6 +33,7 @@ type StateKey = keyof ApiControllerState
 // -- State --------------------------------------------- //
 const state = proxy<ApiControllerState>({
   projectId: '',
+  sdkVersion: 'html-wagmi-undefined',
   page: 1,
   count: 0,
   recommended: [],
@@ -52,11 +54,15 @@ export const ApiController = {
     state.projectId = projectId
   },
 
+  setSdkVersion(sdkVersion: ApiControllerState['sdkVersion']) {
+    state.sdkVersion = sdkVersion
+  },
+
   getApiHeaders() {
     return {
       'x-project-id': state.projectId,
       'x-sdk-type': sdkType,
-      'x-sdk-version': sdkVersion
+      'x-sdk-version': state.sdkVersion
     }
   },
 

packages/core/src/utils/TypeUtils.ts

@@ -8,51 +8,6 @@ export interface CaipNetwork {
   imageSrc?: string
 }
 
-export interface ExplorerListing {
-  id: string
-  name: string
-  homepage: string
-  image_id: string
-  app: {
-    browser?: string
-    ios?: string
-    android?: string
-    mac?: string
-    windows?: string
-    linux?: string
-    chrome?: string
-    firefox?: string
-    safari?: string
-    edge?: string
-    opera?: string
-  }
-  injected: {
-    injected_id: string
-    namespace: string
-  }[]
-  mobile: {
-    native: string
-    universal: string
-  }
-  desktop: {
-    native: string
-    universal: string
-  }
-}
-
-export interface ExplorerListingsRequest {
-  page?: number
-}
-
-export interface ExplorerSearchRequest {
-  search: string
-}
-
-export interface ExplorerListingsResponse {
-  listings: ExplorerListing[]
-  total: number
-}
-
 export interface LinkingRecord {
   redirect: string
   href: string
@@ -80,6 +35,8 @@ export type CaipNamespaces = Record<
   }
 >
 
+export type SdkVersion = `${'html' | 'react' | 'vue'}-wagmi-${string}`
+
 // --- new api types ----
 export interface ApiWallet {
   id: string

packages/core/tsconfig.json

@@ -1,4 +1,9 @@
 {
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./dist/esm",
+    "declarationDir": "./dist/types"
+  },
   "extends": "../../tsconfig.json",
   "include": ["index.ts", "src"]
 }

packages/scaffold/package.json

@@ -9,10 +9,9 @@
   ],
   "scripts": {
     "build:clean": "rm -rf dist",
-    "build:types": "tsc --declaration --emitDeclarationOnly --outDir ./dist/types",
-    "build:source": "tsc --outDir ./dist/esm",
-    "build": "npm run build:clean; npm run build:types; npm run build:source",
-    "watch": "npm run build:clean; tsc --watch --outDir ./dist/esm",
+    "build:dist": "tsc --build",
+    "build": "npm run build:clean; npm run build:dist",
+    "watch": "npm run build:clean; tsc --watch",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

packages/scaffold/src/client.ts

@@ -22,6 +22,7 @@ interface Options {
   networkControllerClient: NetworkControllerClient
   connectionControllerClient: ConnectionControllerClient
   projectId: ApiControllerState['projectId']
+  sdkVersion: ApiControllerState['sdkVersion']
 }
 
 // -- Client --------------------------------------------------------------------
@@ -100,6 +101,7 @@ export class Web3ModalScaffold {
     NetworkController.setClient(options.networkControllerClient)
     ConnectionController.setClient(options.connectionControllerClient)
     ApiController.setProjectId(options.projectId)
+    ApiController.setSdkVersion(options.sdkVersion)
   }
 
   private async initOrContinue() {

packages/scaffold/tsconfig.json

@@ -1,4 +1,9 @@
 {
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./dist/esm",
+    "declarationDir": "./dist/types"
+  },
   "extends": "../../tsconfig.json",
   "include": ["index.ts", "src"]
 }

packages/ui/package.json

@@ -9,10 +9,9 @@
   ],
   "scripts": {
     "build:clean": "rm -rf dist",
-    "build:types": "tsc --declaration --emitDeclarationOnly --outDir ./dist/types",
-    "build:source": "tsc --outDir ./dist/esm",
-    "build": "npm run build:clean; npm run build:types; npm run build:source",
-    "watch": "npm run build:clean; tsc --watch --outDir ./dist/esm",
+    "build:dist": "tsc --build",
+    "build": "npm run build:clean; npm run build:dist",
+    "watch": "npm run build:clean; tsc --watch",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

packages/ui/tsconfig.json

@@ -1,4 +1,9 @@
 {
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./dist/esm",
+    "declarationDir": "./dist/types"
+  },
   "extends": "../../tsconfig.json",
   "include": ["index.ts", "src"]
 }

packages/wagmi/index.ts

@@ -1,3 +1,3 @@
 export { Web3Modal } from './src/client.js'
-export { walletConnectProvider } from './src/utils.js'
 export type { Web3ModalOptions } from './src/client.js'
+export { walletConnectProvider } from './src/utils/provider.js'