Skip to content

Commit 47a3e6f

Browse files
Adamj1232Adamj1232
committed
Refine wagmi API
1 parent 18a205c commit 47a3e6f

File tree

16 files changed

+179
-66
lines changed

16 files changed

+179
-66
lines changed

‎docs/src/routes/docs/[...3]modules/[...1]core/+page.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -845,6 +845,13 @@ type WalletState = {
845845
accounts: Account[]
846846
chains: ConnectedChain[]
847847
instance?: unknown
848+
/**
849+
* WAGMI Connector object
850+
* Can be used to leverage all WAGMI functions from
851+
* the @web3-onboard/wagmi module
852+
* See https://www.npmjs.com/package/@web3-onboard/wagmi for more details
853+
*/
854+
wagmiConnector?: Connector
848855
}
849856

850857
type Account = {

‎docs/src/routes/docs/[...3]modules/[...3]react/+page.md

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -730,26 +730,60 @@ export default {
730730

731731
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).
732732

733-
```typescript
734-
import { sendTransaction as wagmiSendTransaction } from '@web3-onboard/wagmi'
735-
import { parseEther } from 'viem'
736-
import { useWagmiConfig, wallets } from '@web3-onboard/react'
737-
import type { WagmiConfig } from '@web3-onboard/core'
733+
```ts
734+
import Onboard from '@web3-onboard/core'
735+
import injectedModule from '@web3-onboard/injected-wallets'
736+
import wagmi from '@web3-onboard/wagmi'
737+
import {
738+
sendTransaction as wagmiSendTransaction,
739+
switchChain,
740+
disconnect,
741+
getConnectors
742+
} from '@web3-onboard/wagmi'
743+
import { parseEther, isHex, fromHex } from 'viem'
738744

739-
type useWagmiConfig = (): WagmiConfig
745+
const injected = injectedModule()
740746

741-
const wagmiConfig = useWagmiConfig()
742-
const w3OWallets = useWallets()
747+
const onboard = Onboard({
748+
wagmi,
749+
wallets: [injected],
750+
chains: [
751+
{
752+
id: '0x1',
753+
token: 'ETH',
754+
label: 'Ethereum',
755+
rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e'
756+
}
757+
]
758+
// ... other Onboard options
759+
})
743760

744761
const sendTransaction = async () => {
745762
// current primary wallet - as multiple wallets can connect this value is the currently active
746-
const [currentPrimaryWallet] = w3OWallets
763+
const [activeWallet] = onboard.state.get().wallets
764+
const { wagmiConnector } = activeWallet
765+
const wagmiConfig = onboard.state.get().wagmiConfig
747766
const result = await wagmiSendTransaction(wagmiConfig, {
748767
to: toAddress,
749768
// desired connector to send txn from
750-
account: currentPrimaryWallet.accounts[0],
769+
connector: wagmiConnector,
751770
value: parseEther('0.001')
752771
})
753772
console.log(result)
754773
}
755-
```
774+
775+
async function switchWagmiChain(chainId) {
776+
// current primary wallet - as multiple wallets can connect this value is the currently active
777+
const [activeWallet] = onboard.state.get().wallets
778+
let chainAsNumber
779+
if (isHex(chainId)) {
780+
chainAsNumber = fromHex(chainId, 'number')
781+
} else if (!isHex(chainId) && typeof chainId === 'number') {
782+
chainAsNumber = chainId
783+
} else {
784+
throw new Error('Invalid chainId')
785+
}
786+
const wagmiConfig = onboard.state.get().wagmiConfig
787+
await switchChain(wagmiConfig, {
788+
chainId: chainAsNumber,
789+
connector:

‎docs/src/routes/docs/[...3]modules/[...8]wagmi/+page.md

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,11 @@ npm install @web3-onboard/wagmi
3030
This example assumes you have already setup web3-onboard to connect wallets to your dapp.
3131
For more information see [web3-onboard docs](https://onboard.blocknative.com/docs/modules/core#install).
3232

33+
### `wagmiConnector` and Connectors
34+
35+
`wagmiConnector` is a property returned as part of the wallet state object and can be used to interact with
36+
the WAGMI API returned from this module or an external WAGMI instance. Please see examples below...
37+
3338
```ts
3439
import Onboard from '@web3-onboard/core'
3540
import injectedModule from '@web3-onboard/injected-wallets'
@@ -45,8 +50,6 @@ import { parseEther, isHex, fromHex } from 'viem'
4550
const injected = injectedModule()
4651

4752
const onboard = Onboard({
48-
// This javascript object is unordered meaning props do not require a certain order
49-
// ... other Onboard options
5053
wagmi,
5154
wallets: [injected],
5255
chains: [
@@ -62,22 +65,22 @@ const onboard = Onboard({
6265

6366
const sendTransaction = async () => {
6467
// current primary wallet - as multiple wallets can connect this value is the currently active
65-
const [currentPrimaryWallet] = onboard.state.get().wallets
66-
const { label } = currentPrimaryWallet
67-
const transactWithThisWallet = getConnectors(wagmiConfig).find(
68-
(connector) => connector.name === label
69-
)
68+
const [activeWallet] = onboard.state.get().wallets
69+
const { wagmiConnector } = activeWallet
7070
const wagmiConfig = onboard.state.get().wagmiConfig
7171
const result = await wagmiSendTransaction(wagmiConfig, {
7272
to: toAddress,
7373
// desired connector to send txn from
74-
connector: transactWithThisWallet,
74+
connector: wagmiConnector,
7575
value: parseEther('0.001')
7676
})
7777
console.log(result)
7878
}
7979

8080
async function switchWagmiChain(chainId) {
81+
// current primary wallet - as multiple wallets can connect this value is the currently active
82+
const [activeWallet] = onboard.state.get().wallets
83+
const { wagmiConnector } = activeWallet
8184
let chainAsNumber
8285
if (isHex(chainId)) {
8386
chainAsNumber = fromHex(chainId, 'number')
@@ -87,14 +90,16 @@ async function switchWagmiChain(chainId) {
8790
throw new Error('Invalid chainId')
8891
}
8992
const wagmiConfig = onboard.state.get().wagmiConfig
90-
await switchChain(wagmiConfig, { chainId: chainAsNumber })
93+
await switchChain(wagmiConfig, {
94+
chainId: chainAsNumber,
95+
connector: wagmiConnector
96+
})
9197
}
9298

9399
async function disconnectWallet() {
94100
const wagmiConfig = onboard.state.get().wagmiConfig
95-
const disconnectThisWallet = getConnectors(wagmiConfig).find(
96-
(connector) => connector.name === label
97-
)
98-
disconnect(wagmiConfig, { connector: disconnectThisWallet })
101+
const [activeWallet] = onboard.state.get().wallets
102+
const { wagmiConnector } = activeWallet
103+
disconnect(wagmiConfig, { connector: wagmiConnector })
99104
}
100105
```

‎packages/core/README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -793,7 +793,13 @@ type WalletState = {
793793
accounts: Account[]
794794
chains: ConnectedChain[]
795795
instance?: unknown
796-
}
796+
/**
797+
* WAGMI Connector object
798+
* Can be used to leverage all WAGMI functions from
799+
* the @web3-onboard/wagmi module
800+
* See https://www.npmjs.com/package/@web3-onboard/wagmi for more details
801+
*/
802+
wagmiConnector?: Connector}
797803

798804
type Account = {
799805
address: string

‎packages/core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/core",
3-
"version": "2.22.0-alpha.5",
3+
"version": "2.22.0-alpha.6",
44
"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.",
55
"keywords": [
66
"Ethereum",

‎packages/core/src/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ import {
3434
updateConnectModal,
3535
updateTheme,
3636
updateAppMetadata,
37-
updateChain
37+
updateChain,
38+
updateWallet
3839
} from './store/actions.js'
3940
import type { PatchedEIP1193Provider } from '@web3-onboard/transaction-preview'
4041
import { getBlocknativeSdk } from './services.js'

‎packages/core/src/types.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import type { TransactionPreviewAPI } from '@web3-onboard/transaction-preview'
2020
import type en from './i18n/en.json'
2121
import type { EthereumTransactionData, Network } from 'bnc-sdk'
2222
import type { GetEnsTextReturnType } from 'viem'
23-
import type { Config, WagmiModuleAPI } from '@web3-onboard/wagmi'
23+
import type { Config, Connector, WagmiModuleAPI } from '@web3-onboard/wagmi'
2424
import type wagmi from '@web3-onboard/wagmi'
2525
export type { Config as WagmiConfig } from '@web3-onboard/wagmi'
2626

@@ -143,6 +143,13 @@ export interface WalletState {
143143
// is connected to multiple chains at once
144144
chains: ConnectedChain[]
145145
instance?: unknown
146+
/**
147+
* WAGMI Connector object
148+
* Can be used to leverage all WAGMI functions from
149+
* the @web3-onboard/wagmi module
150+
* See https://www.npmjs.com/package/@web3-onboard/wagmi for more details
151+
*/
152+
wagmiConnector?: Connector
146153
}
147154

148155
export type Account = {

‎packages/core/src/validation.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,8 @@ const wallet = Joi.object({
9898
provider: unknownObject,
9999
instance: unknownObject,
100100
accounts,
101-
chains: Joi.array().items(connectedChain)
101+
chains: Joi.array().items(connectedChain),
102+
wagmiConnector: unknownObject
102103
})
103104
.required()
104105
.error(new Error('wallet must be defined'))

‎packages/core/src/views/connect/Index.svelte

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
import { getBNMulitChainSdk } from '../../services.js'
3333
import { MOBILE_WINDOW_WIDTH, STORAGE_KEYS } from '../../constants.js'
3434
import { defaultBnIcon } from '../../icons/index.js'
35-
import type { Config } from '@web3-onboard/wagmi'
35+
import type { Config, Connector } from '@web3-onboard/wagmi'
3636
import {
3737
BehaviorSubject,
3838
distinctUntilChanged,
@@ -210,15 +210,14 @@
210210
211211
try {
212212
let address
213+
let wagmiConnector: Connector | undefined
213214
214215
if (wagmi) {
215-
const { buildWagmiConfig, wagmiConnect } = wagmi
216+
const { buildWagmiConfig, wagmiConnect, getWagmiConnector } = wagmi
216217
217218
const wagmiConfig: Config = await buildWagmiConfig(chains, { label, provider })
218219
updateWagmiConfig(wagmiConfig)
219-
const wagmiConnector = wagmiConfig.connectors.find(con => {
220-
return con.name === label
221-
})
220+
wagmiConnector = getWagmiConnector(label)
222221
223222
const accountsReq = await Promise.race([
224223
wagmiConnect(wagmiConfig, {
@@ -302,9 +301,10 @@
302301
}
303302
}
304303
305-
const update: Pick<WalletState, 'accounts' | 'chains'> = {
304+
const update: Pick<WalletState, 'accounts' | 'chains' | 'wagmiConnector'> = {
306305
accounts: [{ address, ens: null, uns: null, balance: null }],
307-
chains: [{ namespace: 'evm', id: chain }]
306+
chains: [{ namespace: 'evm', id: chain }],
307+
wagmiConnector
308308
}
309309
310310
addWallet({ ...selectedWallet, ...update })

‎packages/demo/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,15 @@
3232
"@web3-onboard/blocto": "^2.1.0-alpha.2",
3333
"@web3-onboard/capsule": "2.1.0-alpha.2",
3434
"@web3-onboard/cede-store": "^2.3.0-alpha.2",
35-
"@web3-onboard/core": "^2.22.0-alpha.5",
35+
"@web3-onboard/core": "^2.22.0-alpha.6",
3636
"@web3-onboard/coinbase": "^2.3.0-alpha.2",
3737
"@web3-onboard/dcent": "^2.2.7",
3838
"@web3-onboard/enkrypt": "^2.1.0-alpha.2",
3939
"@web3-onboard/fortmatic": "^2.1.0-alpha.2",
4040
"@web3-onboard/frame": "^2.1.0-alpha.2",
4141
"@web3-onboard/frontier": "^2.1.0-alpha.2",
4242
"@web3-onboard/gas": "^2.2.0-alpha.2",
43-
"@web3-onboard/wagmi": "^2.0.0-alpha.5",
43+
"@web3-onboard/wagmi": "^2.0.0-alpha.6",
4444
"@web3-onboard/gnosis": "^2.3.0-alpha.2",
4545
"@web3-onboard/infinity-wallet": "^2.1.0-alpha.2",
4646
"@web3-onboard/injected-wallets": "^2.11.0-alpha.2",

‎packages/react/README.md

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -453,26 +453,60 @@ updateLocale('es')
453453

454454
This hook allows you to get the WagmiConfig (Config from the Wagmi project) from @web3-onboard/core if web3-onboard has been initialized with the wagmi property imported and passing into the web3-onboard/core config.
455455

456-
```typescript
457-
import { sendTransaction as wagmiSendTransaction } from '@web3-onboard/wagmi'
458-
import { parseEther } from 'viem'
459-
import { useWagmiConfig, wallets } from '@web3-onboard/react'
460-
import type { WagmiConfig } from '@web3-onboard/core'
456+
```ts
457+
import Onboard from '@web3-onboard/core'
458+
import injectedModule from '@web3-onboard/injected-wallets'
459+
import wagmi from '@web3-onboard/wagmi'
460+
import {
461+
sendTransaction as wagmiSendTransaction,
462+
switchChain,
463+
disconnect,
464+
getConnectors
465+
} from '@web3-onboard/wagmi'
466+
import { parseEther, isHex, fromHex } from 'viem'
461467

462-
type useWagmiConfig = (): WagmiConfig
468+
const injected = injectedModule()
463469

464-
const wagmiConfig = useWagmiConfig()
465-
const w3OWallets = useWallets()
470+
const onboard = Onboard({
471+
wagmi,
472+
wallets: [injected],
473+
chains: [
474+
{
475+
id: '0x1',
476+
token: 'ETH',
477+
label: 'Ethereum',
478+
rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e'
479+
}
480+
]
481+
// ... other Onboard options
482+
})
466483

467484
const sendTransaction = async () => {
468485
// current primary wallet - as multiple wallets can connect this value is the currently active
469-
const [currentPrimaryWallet] = w3OWallets
486+
const [activeWallet] = onboard.state.get().wallets
487+
const { wagmiConnector } = activeWallet
488+
const wagmiConfig = onboard.state.get().wagmiConfig
470489
const result = await wagmiSendTransaction(wagmiConfig, {
471490
to: toAddress,
472491
// desired connector to send txn from
473-
account: currentPrimaryWallet.accounts[0],
492+
connector: wagmiConnector,
474493
value: parseEther('0.001')
475494
})
476495
console.log(result)
477496
}
478-
```
497+
498+
async function switchWagmiChain(chainId) {
499+
// current primary wallet - as multiple wallets can connect this value is the currently active
500+
const [activeWallet] = onboard.state.get().wallets
501+
let chainAsNumber
502+
if (isHex(chainId)) {
503+
chainAsNumber = fromHex(chainId, 'number')
504+
} else if (!isHex(chainId) && typeof chainId === 'number') {
505+
chainAsNumber = chainId
506+
} else {
507+
throw new Error('Invalid chainId')
508+
}
509+
const wagmiConfig = onboard.state.get().wagmiConfig
510+
await switchChain(wagmiConfig, {
511+
chainId: chainAsNumber,
512+
connector:

‎packages/react/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/react",
3-
"version": "2.9.0-alpha.5",
3+
"version": "2.9.0-alpha.6",
44
"description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, 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.",
55
"keywords": [
66
"Ethereum",
@@ -61,7 +61,7 @@
6161
"typescript": "^5.4.5"
6262
},
6363
"dependencies": {
64-
"@web3-onboard/core": "^2.22.0-alpha.5",
64+
"@web3-onboard/core": "^2.22.0-alpha.6",
6565
"@web3-onboard/common": "^2.4.0-alpha.2",
6666
"use-sync-external-store": "1.0.0"
6767
},

0 commit comments

Comments
 (0)