diff --git a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md index f0253a60f..e6ee59706 100644 --- a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md +++ b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md @@ -108,6 +108,10 @@ type InitOptions { wallets: WalletInit[] chains: Chain[] appMetadata?: AppMetadata + /** Web3-Onboard module to add Wagmi support + * see https://www.npmjs.com/package/@web3-onboard/wagmi + */ + wagmi?: typeof wagmi i18n?: i18nOptions accountCenter?: AccountCenterOptions apiKey?: string @@ -388,6 +392,57 @@ It will allow you to customize the look and feel of Web3 Onboard, try different --- +#### wagmi + +To add [WAGMI API](https://wagmi.sh/core/getting-started) support to your project you can simply install `web3-onboard/wagmi` import and pass in the [wagmi package](/docs/modules/wagmi) export directly into your onboard configuration. After doing so you can use all of the native WAGMI API functions directly from `@web3-onboard/wagmi`. This will give access to all WAGMI function available on or before `@wagmi/core` version `2.10.4`. +After initialization an up-to-date WAGMI config will will be available from the onboard state object `onboard.state.get().wagmiConfig` which will need to be passed as the first prop of most [@wagmi/core](https://wagmi.sh/core/getting-started) methods. Wallets will also have a [wagmiConnector](#state) prop within the onboard state object which will allow you to target specific wallets for interactions. This can also be bi-passed if the primary or most recently connected wallet is the wallet meant for the transactions. +The config and connectors can be used with the WAGMI API returned from this module or an external WAGMI instance. + +Full documentation for the `@web3-onboard/wagmi` module can be found [here](/docs/modules/wagmi). + +```typescript +import Onboard from '@web3-onboard/core' +import wagmi from '@web3-onboard/wagmi' +import { + sendTransaction as wagmiSendTransaction, + switchChain, + disconnect, + getConnectors +} from '@web3-onboard/wagmi' + +const injected = injectedModule() + +const onboard = Onboard({ + // This javascript object is unordered meaning props do not require a certain order + wagmi, + wallets: [injected], + chains: [ + { + id: '0x1', + token: 'ETH', + label: 'Ethereum', + rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e' + } + ] + // ... other Onboard options +}) + +const sendTransaction = async () => { + // current primary wallet - as multiple wallets can connect this value is the currently active + const [activeWallet] = onboard.state.get().wallets + const { wagmiConnector } = activeWallet + const wagmiConfig = onboard.state.get().wagmiConfig + const result = await wagmiSendTransaction(wagmiConfig, { + to: toAddress, + // desired connector to send txn from + connector: wagmiConnector, + value: parseEther('0.001') + }) + console.log(result) +} +``` +--- + #### disableFontDownload If set to `true` the default `Inter` font will not be imported and instead the web based `sans-serif` font will be used if a font is not defined through the `Theme` or exposed css variable. @@ -845,6 +900,13 @@ type WalletState = { accounts: Account[] chains: ConnectedChain[] instance?: unknown + /** + * WAGMI Connector object + * Can be used to leverage all WAGMI functions from + * the @web3-onboard/wagmi module + * See https://www.npmjs.com/package/@web3-onboard/wagmi for more details + */ + wagmiConnector?: Connector } type Account = { diff --git a/docs/src/routes/docs/[...3]modules/[...3]react/+page.md b/docs/src/routes/docs/[...3]modules/[...3]react/+page.md index 77265fa88..7f52e9c91 100644 --- a/docs/src/routes/docs/[...3]modules/[...3]react/+page.md +++ b/docs/src/routes/docs/[...3]modules/[...3]react/+page.md @@ -137,11 +137,11 @@ function MyApp({ Component, pageProps }) { export default MyApp ``` -## `init` +## init The `init` function must be called before any hooks can be used. The `init` function just initializes `web3-onboard` and makes it available for all hooks to use. For reference check out the [initialization docs for `@web3-onboard/core`](../../modules/core.md#initialization) -## `useConnectWallet` +## useConnectWallet This hook allows you to connect the user's wallet and track the state of the connection status and the wallet that is connected. @@ -203,7 +203,7 @@ setPrimaryWallet(wallets[1]) setPrimaryWallet(wallets[1], wallets[1].accounts[2].address) ``` -## `useSetChain` +## useSetChain This hook allows you to set the chain of a user's connected wallet, keep track of the current chain the user is connected to and the status of setting the chain. Passing in a wallet label will operate on that connected wallet, otherwise it will default to the last connected wallet. If a chain was instantiated without an rpcUrl, token, or label, add these options for wallets that require this information for adding a new chain. @@ -243,7 +243,64 @@ const [ ] = useSetChain() ``` -## `useNotifications` +## useWagmiConfig + +This hook allows you to get the WagmiConfig (Config from the Wagmi project) from @web3-onboard/core if W3O has been initialized with the [WAGMI property imported and passing into the web3-onboard/core config](../../modules/wagmi.md#usage). + +```ts +import Onboard from '@web3-onboard/core' +import injectedModule from '@web3-onboard/injected-wallets' +import wagmi from '@web3-onboard/wagmi' +import { + sendTransaction as wagmiSendTransaction, + switchChain, + disconnect, + getConnectors +} from '@web3-onboard/wagmi' +import { parseEther, isHex, fromHex } from 'viem' + +const injected = injectedModule() + +const onboard = Onboard({ + wagmi, + wallets: [injected], + chains: [ + { + id: '0x1', + token: 'ETH', + label: 'Ethereum', + rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e' + } + ] + // ... other Onboard options +}) + +const sendTransaction = async () => { + // current primary wallet - as multiple wallets can connect this value is the currently active + const [activeWallet] = onboard.state.get().wallets + const { wagmiConnector } = activeWallet + const wagmiConfig = onboard.state.get().wagmiConfig + const result = await wagmiSendTransaction(wagmiConfig, { + to: toAddress, + // desired connector to send txn from + connector: wagmiConnector, + value: parseEther('0.001') + }) + console.log(result) +} + +async function signMessage(chainId) { + // current primary wallet - as multiple wallets can connect this value is the currently active + const [activeWallet] = onboard.state.get().wallets + const wagmiConfig = onboard.state.get().wagmiConfig + await wagmiSignMessage(wagmiConfig, { + message: 'This is my message to you', + connector: activeWallet.wagmiConnector + }) +} +``` + +## useNotifications This hook allows the dev to access all notifications if enabled, send custom notifications, and update notify **note** This requires an API key be added to the initialization, enabled by default if an API key exists @@ -410,7 +467,7 @@ const sendTransactionWithPreFlightNotifications = async () => { ``` -## `useWallets` +## useWallets This hook allows you to track the state of all the currently connected wallets: @@ -422,7 +479,7 @@ type UseWallets = (): WalletState[] const connectedWallets = useWallets() ``` -## `useAccountCenter` +## useAccountCenter This hook allows you to track and update the state of the Account Center: @@ -449,7 +506,7 @@ type AccountCenter = { const updateAccountCenter = useAccountCenter() ``` -## `useSetLocale` +## useSetLocale This hook allows you to set the locale of your application to allow language updates associated with the i18n config: @@ -725,31 +782,3 @@ export default { } } ``` - -## `useWagmiConfig` - -This hook allows you to get the WagmiConfig (Config from the Wagmi project) from @web3-onboard/core if W3O has been initialized with the [WAGMI property imported and passing into the web3-onboard/core config](../../modules/wagmi.md#usage). - -```typescript -import { sendTransaction as wagmiSendTransaction } from '@web3-onboard/wagmi' -import { parseEther } from 'viem' -import { useWagmiConfig, wallets } from '@web3-onboard/react' -import type { WagmiConfig } from '@web3-onboard/core' - -type useWagmiConfig = (): WagmiConfig - -const wagmiConfig = useWagmiConfig() -const w3OWallets = useWallets() - -const sendTransaction = async () => { - // current primary wallet - as multiple wallets can connect this value is the currently active - const [currentPrimaryWallet] = w3OWallets - const result = await wagmiSendTransaction(wagmiConfig, { - to: toAddress, - // desired connector to send txn from - account: currentPrimaryWallet.accounts[0], - value: parseEther('0.001') - }) - console.log(result) -} -``` diff --git a/docs/src/routes/docs/[...3]modules/[...8]wagmi/+page.md b/docs/src/routes/docs/[...3]modules/[...8]wagmi/+page.md index af928652e..137b32b6e 100644 --- a/docs/src/routes/docs/[...3]modules/[...8]wagmi/+page.md +++ b/docs/src/routes/docs/[...3]modules/[...8]wagmi/+page.md @@ -1,5 +1,5 @@ --- -title: wagmi +title: WAGMI --- # {$frontmatter.title} @@ -25,7 +25,21 @@ npm install @web3-onboard/wagmi -## Usage +## WAGMI Usage + +To add [WAGMI API](https://wagmi.sh/core/getting-started) support to your project you can simply install `web3-onboard/wagmi` import and pass in the WAGMI package default export directly into your onboard configuration. After doing so you can use all of the native WAGMI API functions directly from `@web3-onboard/wagmi`. This will give access to all WAGMI function available on or before `@wagmi/core` version `2.10.4`. + +Full documentation for `wagmi/core` API functions can be found [here](https://wagmi.sh/core/getting-started). + +### wagmiConfig + +After initialization an up-to-date WAGMI config will will be available from the onboard state object `onboard.state.get().wagmiConfig` which will need to be passed as the first prop of most [@wagmi/core](https://wagmi.sh/core/getting-started) methods. + +### wagmiConnector and Connectors +Wallets will also have a `wagmiConnector` prop within the onboard state object which will allow you to target specific wallets for interactions. This can also be bi-passed if the primary or most recently connected wallet is the wallet meant for the transactions. +The config and connectors can be used with the WAGMI API returned from this module or an external WAGMI instance. + +## WAGMI Example This example assumes you have already setup web3-onboard to connect wallets to your dapp. For more information see [web3-onboard docs](https://onboard.blocknative.com/docs/modules/core#install). @@ -34,7 +48,6 @@ For more information see [web3-onboard docs](https://onboard.blocknative.com/doc import Onboard from '@web3-onboard/core' import injectedModule from '@web3-onboard/injected-wallets' import wagmi from '@web3-onboard/wagmi' -import { parseEther } from 'viem' import { sendTransaction as wagmiSendTransaction, switchChain, @@ -47,7 +60,6 @@ const injected = injectedModule() const onboard = Onboard({ // This javascript object is unordered meaning props do not require a certain order - // ... other Onboard options wagmi, wallets: [injected], chains: [ @@ -63,18 +75,32 @@ const onboard = Onboard({ const sendTransaction = async () => { // current primary wallet - as multiple wallets can connect this value is the currently active - const [currentPrimaryWallet] = onboard.state.get().wallets + const [activeWallet] = onboard.state.get().wallets + const { wagmiConnector } = activeWallet const wagmiConfig = onboard.state.get().wagmiConfig const result = await wagmiSendTransaction(wagmiConfig, { to: toAddress, // desired connector to send txn from - account: currentPrimaryWallet.accounts[0], + connector: wagmiConnector, value: parseEther('0.001') }) console.log(result) } +async function signMessage(chainId) { + // current primary wallet - as multiple wallets can connect this value is the currently active + const [activeWallet] = onboard.state.get().wallets + const wagmiConfig = onboard.state.get().wagmiConfig + await wagmiSignMessage(wagmiConfig, { + message: 'This is my message to you', + connector: activeWallet.wagmiConnector + }) +} + async function switchWagmiChain(chainId) { + // current primary wallet - as multiple wallets can connect this value is the currently active + const [activeWallet] = onboard.state.get().wallets + const { wagmiConnector } = activeWallet let chainAsNumber if (isHex(chainId)) { chainAsNumber = fromHex(chainId, 'number') @@ -84,14 +110,16 @@ async function switchWagmiChain(chainId) { throw new Error('Invalid chainId') } const wagmiConfig = onboard.state.get().wagmiConfig - await switchChain(wagmiConfig, { chainId: chainAsNumber }) + await switchChain(wagmiConfig, { + chainId: chainAsNumber, + connector: wagmiConnector + }) } async function disconnectWallet() { const wagmiConfig = onboard.state.get().wagmiConfig - const disconnectThisWallet = getConnectors(wagmiConfig).find( - (connector) => connector.name === label - ) - disconnect(wagmiConfig, { connector: disconnectThisWallet }) + const [activeWallet] = onboard.state.get().wallets + const { wagmiConnector } = activeWallet + disconnect(wagmiConfig, { connector: wagmiConnector }) } ``` diff --git a/docs/yarn.lock b/docs/yarn.lock index e75536387..b85d4e557 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1747,31 +1747,6 @@ bech32 "1.1.4" ws "7.4.6" -"@ethersproject/providers@5.5.2": - version "5.5.2" - resolved "https://registry.yarnpkg.com/@ethersproject/providers/-/providers-5.5.2.tgz#131ccf52dc17afd0ab69ed444b8c0e3a27297d99" - integrity sha512-hkbx7x/MKcRjyrO4StKXCzCpWer6s97xnm34xkfPiarhtEUVAN4TBBpamM+z66WcTt7H5B53YwbRj1n7i8pZoQ== - dependencies: - "@ethersproject/abstract-provider" "^5.5.0" - "@ethersproject/abstract-signer" "^5.5.0" - "@ethersproject/address" "^5.5.0" - "@ethersproject/basex" "^5.5.0" - "@ethersproject/bignumber" "^5.5.0" - "@ethersproject/bytes" "^5.5.0" - "@ethersproject/constants" "^5.5.0" - "@ethersproject/hash" "^5.5.0" - "@ethersproject/logger" "^5.5.0" - "@ethersproject/networks" "^5.5.0" - "@ethersproject/properties" "^5.5.0" - "@ethersproject/random" "^5.5.0" - "@ethersproject/rlp" "^5.5.0" - "@ethersproject/sha2" "^5.5.0" - "@ethersproject/strings" "^5.5.0" - "@ethersproject/transactions" "^5.5.0" - "@ethersproject/web" "^5.5.0" - bech32 "1.1.4" - ws "7.4.6" - "@ethersproject/providers@5.5.3": version "5.5.3" resolved "https://registry.yarnpkg.com/@ethersproject/providers/-/providers-5.5.3.tgz#56c2b070542ac44eb5de2ed3cf6784acd60a3130" @@ -4964,6 +4939,14 @@ ethers "5.5.4" joi "17.9.1" +"@web3-onboard/common@2.4.0-alpha.2": + version "2.4.0-alpha.2" + resolved "https://registry.yarnpkg.com/@web3-onboard/common/-/common-2.4.0-alpha.2.tgz#707f782532c5bbe0d5984ecae4b4bf9bb7068fa3" + integrity sha512-BrDuLLiJfUoy+h3DHLLorWUhEFKd/gA7BH2Jegi/Jn9fBHirovYqciqXzqLKY8ow9vpSA8qttgnuOvqTZjPl9w== + dependencies: + joi "17.9.1" + viem "2.12.0" + "@web3-onboard/common@^2.3.1", "@web3-onboard/common@^2.3.3", "@web3-onboard/common@^2.3.4": version "2.3.4" resolved "https://registry.yarnpkg.com/@web3-onboard/common/-/common-2.3.4.tgz#1ce41e090c19e8ac802c45737de3dda3dabea751" @@ -4973,16 +4956,14 @@ ethers "5.5.4" joi "17.9.1" -"@web3-onboard/core@^2.21.6": - version "2.21.6" - resolved "https://registry.yarnpkg.com/@web3-onboard/core/-/core-2.21.6.tgz#e2307fb569ef131440c2bce1a8a87d3ff16bcfae" - integrity sha512-eb9bmIK/n6U7ZpC3Bd8tXrBdc5XDh5pzhcXArqMxR2MKxoB6i7aeLO9A3AJcwwEql3eNF+UDnhzK+KXTBOVPEQ== +"@web3-onboard/core@^2.21.7-alpha.1": + version "2.22.0-alpha.6" + resolved "https://registry.yarnpkg.com/@web3-onboard/core/-/core-2.22.0-alpha.6.tgz#647c84d74cf884aba299f7cfe393d29e425a31af" + integrity sha512-nw5lu7Lken0VGgajCldMLqfELP/XJPqOvUHB+pTpj77jCAP6wBhqPwGU0tlHzHKe9k/XbyuvS0fNxU1oC9eobQ== dependencies: - "@web3-onboard/common" "^2.3.4" - bignumber.js "^9.0.0" + "@web3-onboard/common" "2.4.0-alpha.2" bnc-sdk "^4.6.7" bowser "^2.11.0" - ethers "5.5.3" eventemitter3 "^4.0.7" joi "17.9.1" lodash.merge "^4.6.2" @@ -4991,6 +4972,7 @@ rxjs "^7.5.5" svelte "^3.49.0" svelte-i18n "^3.3.13" + viem "2.12.0" "@web3-onboard/dcent@^2.2.7": version "2.2.8" @@ -7609,42 +7591,6 @@ ethereumjs-vm@^2.3.4: rustbn.js "~0.2.0" safe-buffer "^5.1.1" -ethers@5.5.3: - version "5.5.3" - resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.5.3.tgz#1e361516711c0c3244b6210e7e3ecabf0c75fca0" - integrity sha512-fTT4WT8/hTe/BLwRUtl7I5zlpF3XC3P/Xwqxc5AIP2HGlH15qpmjs0Ou78az93b1rLITzXLFxoNX63B8ZbUd7g== - dependencies: - "@ethersproject/abi" "5.5.0" - "@ethersproject/abstract-provider" "5.5.1" - "@ethersproject/abstract-signer" "5.5.0" - "@ethersproject/address" "5.5.0" - "@ethersproject/base64" "5.5.0" - "@ethersproject/basex" "5.5.0" - "@ethersproject/bignumber" "5.5.0" - "@ethersproject/bytes" "5.5.0" - "@ethersproject/constants" "5.5.0" - "@ethersproject/contracts" "5.5.0" - "@ethersproject/hash" "5.5.0" - "@ethersproject/hdnode" "5.5.0" - "@ethersproject/json-wallets" "5.5.0" - "@ethersproject/keccak256" "5.5.0" - "@ethersproject/logger" "5.5.0" - "@ethersproject/networks" "5.5.2" - "@ethersproject/pbkdf2" "5.5.0" - "@ethersproject/properties" "5.5.0" - "@ethersproject/providers" "5.5.2" - "@ethersproject/random" "5.5.1" - "@ethersproject/rlp" "5.5.0" - "@ethersproject/sha2" "5.5.0" - "@ethersproject/signing-key" "5.5.0" - "@ethersproject/solidity" "5.5.0" - "@ethersproject/strings" "5.5.0" - "@ethersproject/transactions" "5.5.0" - "@ethersproject/units" "5.5.0" - "@ethersproject/wallet" "5.5.0" - "@ethersproject/web" "5.5.1" - "@ethersproject/wordlists" "5.5.0" - ethers@5.5.4: version "5.5.4" resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.5.4.tgz#e1155b73376a2f5da448e4a33351b57a885f4352" @@ -11983,6 +11929,20 @@ verror@1.10.0: core-util-is "1.0.2" extsprintf "^1.2.0" +viem@2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/viem/-/viem-2.12.0.tgz#699ba326a1ce0df81042dc8b6f22fa751f9cefce" + integrity sha512-XBvORspE4x2/gfy7idH6IVFwkJiXirygFCU3lxUH6fttsj8zufLtgiokfvZF/LAZUEDvdxSgL08whSYgffM2fw== + dependencies: + "@adraffy/ens-normalize" "1.10.0" + "@noble/curves" "1.2.0" + "@noble/hashes" "1.3.2" + "@scure/bip32" "1.3.2" + "@scure/bip39" "1.2.1" + abitype "1.0.0" + isows "1.0.4" + ws "8.13.0" + viem@^1.0.0, viem@^1.1.4, viem@^1.6.0: version "1.21.4" resolved "https://registry.yarnpkg.com/viem/-/viem-1.21.4.tgz#883760e9222540a5a7e0339809202b45fe6a842d" diff --git a/packages/core/README.md b/packages/core/README.md index 291e553a6..ebaaa4b5d 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -793,7 +793,13 @@ type WalletState = { accounts: Account[] chains: ConnectedChain[] instance?: unknown -} + /** + * WAGMI Connector object + * Can be used to leverage all WAGMI functions from + * the @web3-onboard/wagmi module + * See https://www.npmjs.com/package/@web3-onboard/wagmi for more details + */ + wagmiConnector?: Connector} type Account = { address: string diff --git a/packages/core/package.json b/packages/core/package.json index 8ccfa7ddf..686547c66 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.22.0-alpha.6", + "version": "2.22.0-alpha.7", "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", "keywords": [ "Ethereum", diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 3d3655098..81d5e07d0 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -34,7 +34,8 @@ import { updateConnectModal, updateTheme, updateAppMetadata, - updateChain + updateChain, + updateWallet } from './store/actions.js' import type { PatchedEIP1193Provider } from '@web3-onboard/transaction-preview' import { getBlocknativeSdk } from './services.js' diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 4e1128608..a2cf322e0 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -9,6 +9,7 @@ import { nanoid } from 'nanoid' import { dispatch } from './index.js' import { configuration } from '../configuration.js' import { handleThemeChange, returnTheme } from '../themes.js' +import { state } from '../store/index.js' import type { Account, @@ -192,6 +193,9 @@ export function setPrimaryWallet(wallet: WalletState, address?: string): void { } } + // Update wagmi config if wagmi is being used + handleWagmiConnectorUpdate(wallet) + // add wallet will set it to first wallet since it already exists addWallet(wallet) } @@ -478,10 +482,7 @@ export function updateAppMetadata( dispatch(action as UpdateAppMetadataAction) } -export function updateWagmiConfig( - update: Config -): void { - +export function updateWagmiConfig(update: Config): void { const action = { type: UPDATE_WAGMI_CONFIG, payload: update @@ -489,3 +490,22 @@ export function updateWagmiConfig( dispatch(action as UpdateWagmiConfigAction) } + +function handleWagmiConnectorUpdate(wallet: WalletState) { + const { wagmi } = configuration + if (!wagmi) return + + try { + const { label } = wallet + const { wagmiConnect, getWagmiConnector } = wagmi + const wagmiConfig = state.get().wagmiConfig + const wagmiConnector = getWagmiConnector(label) + wagmiConnect(wagmiConfig, { connector: wagmiConnector }).then(() => { + updateWallet(label, { wagmiConnector }) + }) + } catch (e) { + console.error( + `Error updating Wagmi connector on primary wallet switch ${e}` + ) + } +} diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index bf46ce048..2fbc11b8f 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -20,7 +20,7 @@ import type { TransactionPreviewAPI } from '@web3-onboard/transaction-preview' import type en from './i18n/en.json' import type { EthereumTransactionData, Network } from 'bnc-sdk' import type { GetEnsTextReturnType } from 'viem' -import type { Config, WagmiModuleAPI } from '@web3-onboard/wagmi' +import type { Config, Connector, WagmiModuleAPI } from '@web3-onboard/wagmi' import type wagmi from '@web3-onboard/wagmi' export type { Config as WagmiConfig } from '@web3-onboard/wagmi' @@ -60,7 +60,9 @@ export interface InitOptions { notify?: Partial | Partial /** Gas module */ gas?: typeof gas - /** Wagmi module */ + /** Web3-Onboard module to add Wagmi support + * see https://www.npmjs.com/package/@web3-onboard/wagmi + */ wagmi?: typeof wagmi /** * Object mapping for W3O components with the key being the DOM @@ -143,6 +145,13 @@ export interface WalletState { // is connected to multiple chains at once chains: ConnectedChain[] instance?: unknown + /** + * WAGMI Connector object + * Can be used to leverage all WAGMI functions from + * the @web3-onboard/wagmi module + * See https://www.npmjs.com/package/@web3-onboard/wagmi for more details + */ + wagmiConnector?: Connector } export type Account = { diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts index 400d0eaab..da3882516 100644 --- a/packages/core/src/validation.ts +++ b/packages/core/src/validation.ts @@ -98,7 +98,8 @@ const wallet = Joi.object({ provider: unknownObject, instance: unknownObject, accounts, - chains: Joi.array().items(connectedChain) + chains: Joi.array().items(connectedChain), + wagmiConnector: unknownObject }) .required() .error(new Error('wallet must be defined')) diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte index f89d099fc..55146b441 100644 --- a/packages/core/src/views/connect/Index.svelte +++ b/packages/core/src/views/connect/Index.svelte @@ -32,7 +32,7 @@ import { getBNMulitChainSdk } from '../../services.js' import { MOBILE_WINDOW_WIDTH, STORAGE_KEYS } from '../../constants.js' import { defaultBnIcon } from '../../icons/index.js' - import type { Config } from '@web3-onboard/wagmi' + import type { Config, Connector } from '@web3-onboard/wagmi' import { BehaviorSubject, distinctUntilChanged, @@ -210,15 +210,14 @@ try { let address + let wagmiConnector: Connector | undefined if (wagmi) { - const { buildWagmiConfig, wagmiConnect } = wagmi + const { buildWagmiConfig, wagmiConnect, getWagmiConnector } = wagmi const wagmiConfig: Config = await buildWagmiConfig(chains, { label, provider }) updateWagmiConfig(wagmiConfig) - const wagmiConnector = wagmiConfig.connectors.find(con => { - return con.name === label - }) + wagmiConnector = getWagmiConnector(label) const accountsReq = await Promise.race([ wagmiConnect(wagmiConfig, { @@ -302,9 +301,10 @@ } } - const update: Pick = { + const update: Pick = { accounts: [{ address, ens: null, uns: null, balance: null }], - chains: [{ namespace: 'evm', id: chain }] + chains: [{ namespace: 'evm', id: chain }], + wagmiConnector } addWallet({ ...selectedWallet, ...update }) diff --git a/packages/demo/package.json b/packages/demo/package.json index 4171eae8e..6ff98622d 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -32,7 +32,7 @@ "@web3-onboard/blocto": "^2.1.0-alpha.2", "@web3-onboard/capsule": "2.1.0-alpha.2", "@web3-onboard/cede-store": "^2.3.0-alpha.2", - "@web3-onboard/core": "^2.22.0-alpha.6", + "@web3-onboard/core": "^2.22.0-alpha.7", "@web3-onboard/coinbase": "^2.3.0-alpha.2", "@web3-onboard/dcent": "^2.2.7", "@web3-onboard/enkrypt": "^2.1.0-alpha.2", @@ -40,7 +40,7 @@ "@web3-onboard/frame": "^2.1.0-alpha.2", "@web3-onboard/frontier": "^2.1.0-alpha.2", "@web3-onboard/gas": "^2.2.0-alpha.2", - "@web3-onboard/wagmi": "^2.0.0-alpha.5", + "@web3-onboard/wagmi": "^2.0.0-alpha.6", "@web3-onboard/gnosis": "^2.3.0-alpha.2", "@web3-onboard/infinity-wallet": "^2.1.0-alpha.2", "@web3-onboard/injected-wallets": "^2.11.0-alpha.2", diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index 3d6693d65..611d47e61 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -57,7 +57,8 @@ switchChain, disconnect, signMessage as wagmiSignMessage, - getConnectors + getConnectors, + watchConnectors } from '@web3-onboard/wagmi' import { parseEther, isHex, fromHex } from 'viem' import passportModule, { Network } from '@web3-onboard/passport' @@ -510,11 +511,11 @@ // const receipt = await txn.wait() // console.log(receipt) - const wagmiConfig = onboard.state.get().wagmiConfig - console.log(wagmiConfig) + const [primaryWallet] = onboard.state.get().wallets const result = await wagmiSendTransaction(wagmiConfig, { to: toAddress, - value: parseEther('0.001') + value: parseEther('0.001'), + connector: primaryWallet.wagmiConnector }) console.log(result) } @@ -555,7 +556,7 @@ console.log(transactionHash) } - const signMessage = async (provider, address) => { + const signMessage = async (wagmiConnector, address) => { // if using ethers v6 this is: // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') // const ethersProvider = new ethers.providers.Web3Provider(provider, 'any') @@ -564,9 +565,10 @@ // const signature = await signer?.signMessage(signMsg) // let verifySign = false // let recoveredAddress = null - const wagmiConfig = onboard.state.get().wagmiConfig - console.log('signMessage', wagmiConfig) - await wagmiSignMessage(wagmiConfig, { message: signMsg }) + await wagmiSignMessage(wagmiConfig, { + message: signMsg, + connector: wagmiConnector + }) // try { // recoveredAddress = recoverAddress( // arrayify(hashMessage(signMsg)), @@ -675,8 +677,12 @@ } else { throw new Error('Invalid chainId') } - const wagmiConfig = onboard.state.get().wagmiConfig - await switchChain(wagmiConfig, { chainId: chainAsNumber }) + const [primaryWallet] = onboard.state.get().wallets + const { wagmiConnector } = primaryWallet + await switchChain(wagmiConfig, { + chainId: chainAsNumber, + connector: wagmiConnector + }) } @@ -889,7 +895,7 @@ {/if} {#if $wallets$} - {#each $wallets$ as { icon, label, accounts, chains, provider, instance }} + {#each $wallets$ as { icon, label, accounts, chains, provider, instance, wagmiConnector }}
@@ -945,7 +951,7 @@ bind:value={toAddress} data-testid="sendTransaction" /> -
@@ -969,7 +975,7 @@ placeholder="Message..." bind:value={signMsg} /> -
@@ -979,7 +985,7 @@ type="text" class="sign-transaction-textarea" /> -
@@ -991,7 +997,7 @@ class="sign-transaction-textarea" />