Skip to content

Commit d85dfde

Browse files
NoahZinsmeisterNoahZinsmeister
committed
improve initializeConnector
fix webpack/next.js stuff
1 parent 002652f commit d85dfde

12 files changed

Lines changed: 196 additions & 191 deletions

File tree

‎.github/workflows/CI.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,4 @@ jobs:
3131
- run: yarn bootstrap
3232
- run: yarn build
3333
- run: yarn test
34+
- run: yarn lerna exec 'yarn next build' --scope=example

‎packages/core/src/index.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ describe('#initializeConnector', () => {
3333
let useConnector: UseStore<Web3ReactState>
3434

3535
beforeEach(() => {
36-
;[connector, useConnector] = initializeConnector(MockConnector)
36+
;[connector, useConnector] = initializeConnector((actions) => new MockConnector(actions))
3737
})
3838

3939
// #useChainId

‎packages/core/src/index.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createWeb3ReactStoreAndActions } from '@web3-react/store'
2-
import { Connector, Web3ReactState } from '@web3-react/types'
2+
import { Connector, Web3ReactState, Actions } from '@web3-react/types'
33
import create, { UseStore } from 'zustand'
44
import { useEffect, useMemo, useState } from 'react'
55
import { Web3Provider } from '@ethersproject/providers'
@@ -9,13 +9,10 @@ interface IConstructor<T> {
99
new (...args: any[]): T
1010
}
1111

12-
export function initializeConnector<T extends Connector>(
13-
Connector: IConstructor<T>,
14-
constructorArgs: any = [] // TODO: really unfortunate that we can't type this
15-
): [T, UseStore<Web3ReactState>] {
12+
export function initializeConnector<T extends Connector>(f: (actions: Actions) => T): [T, UseStore<Web3ReactState>] {
1613
const [store, actions] = createWeb3ReactStoreAndActions()
1714

18-
const instance = new Connector(actions, ...constructorArgs)
15+
const instance = f(actions)
1916
const useConnector = create<Web3ReactState>(store)
2017

2118
return [instance, useConnector]

‎packages/example/components/index.tsx‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
import { UseStore } from 'zustand/esm'
2+
import { Connector, Web3ReactState } from '@web3-react/types'
3+
import { connectors } from '../connectors'
4+
import { useChainId, useAccounts, useENSNames, useError, useActivating, useProvider } from '@web3-react/core'
5+
import { useEffect, useState } from 'react'
6+
import { BigNumber } from '@ethersproject/bignumber'
7+
import { formatEther } from '@ethersproject/units'
8+
9+
function Status({
10+
connector,
11+
useConnector,
12+
}: {
13+
connector: InstanceType<typeof Connector>
14+
useConnector: UseStore<Web3ReactState>
15+
}) {
16+
const chainId = useChainId(useConnector)
17+
const accounts = useAccounts(useConnector)
18+
const error = useError(useConnector)
19+
20+
const connected = Boolean(chainId && accounts)
21+
22+
return (
23+
<div>
24+
<b>{connector.constructor.name}</b>
25+
<br />
26+
{error ? (
27+
<>
28+
🛑 {error.name ?? 'Error'}: {error.message}
29+
</>
30+
) : connected ? (
31+
<>✅ Connected</>
32+
) : (
33+
<>⚠️ Disconnected</>
34+
)}
35+
</div>
36+
)
37+
}
38+
39+
function ChainId({ useConnector }: { useConnector: UseStore<Web3ReactState> }) {
40+
const chainId = useChainId(useConnector)
41+
42+
return <div>Chain Id: {chainId ? <b>{chainId}</b> : '-'}</div>
43+
}
44+
45+
function Accounts({
46+
connector,
47+
useConnector,
48+
}: {
49+
connector: InstanceType<typeof Connector>
50+
useConnector: UseStore<Web3ReactState>
51+
}) {
52+
const accounts = useAccounts(useConnector)
53+
const ENSNames = useENSNames(connector, useConnector)
54+
55+
const provider = useProvider(connector, useConnector)
56+
const [balances, setBalances] = useState<BigNumber[] | undefined>(undefined)
57+
useEffect(() => {
58+
if (provider && accounts?.length) {
59+
let stale = false
60+
61+
Promise.all(accounts.map((account) => provider.getBalance(account))).then((balances) => {
62+
if (!stale) {
63+
setBalances(balances)
64+
}
65+
})
66+
67+
return () => {
68+
stale = true
69+
setBalances(undefined)
70+
}
71+
}
72+
}, [accounts])
73+
74+
return (
75+
<div>
76+
Accounts:
77+
{accounts === undefined
78+
? ' -'
79+
: accounts.length === 0
80+
? ' None'
81+
: accounts?.map((account, i) => (
82+
<ul key={account} style={{ margin: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>
83+
<b>{ENSNames?.[i] ?? account}</b>
84+
{balances?.[i] ? ` (Ξ${formatEther(balances[i])})` : null}
85+
</ul>
86+
))}
87+
</div>
88+
)
89+
}
90+
91+
function Connect({ connector, useConnector }: { connector: Connector; useConnector: UseStore<Web3ReactState> }) {
92+
const activating = useActivating(useConnector)
93+
const error = useError(useConnector)
94+
95+
const chainId = useChainId(useConnector)
96+
const accounts = useAccounts(useConnector)
97+
const connected = Boolean(chainId && accounts)
98+
99+
if (error) {
100+
return (
101+
<button
102+
onClick={() => {
103+
connector.activate()
104+
}}
105+
>
106+
Try Again?
107+
</button>
108+
)
109+
} else if (connected) {
110+
return (
111+
<button
112+
onClick={() => {
113+
if (connector?.deactivate) {
114+
connector.deactivate()
115+
}
116+
}}
117+
disabled={connector.deactivate ? false : true}
118+
>
119+
{connector.deactivate ? 'Disconnect' : 'Connected'}
120+
</button>
121+
)
122+
} else {
123+
return (
124+
<button
125+
onClick={() => {
126+
if (!activating) {
127+
connector.activate()
128+
}
129+
}}
130+
disabled={activating ? true : false}
131+
>
132+
{activating ? 'Connecting...' : 'Activate'}
133+
</button>
134+
)
135+
}
136+
}
137+
138+
export function Connectors() {
139+
return (
140+
<div style={{ display: 'flex', flexFlow: 'wrap', fontFamily: 'sans-serif' }}>
141+
{connectors.map(([connector, useConnector], i) => (
142+
<div
143+
key={i}
144+
style={{
145+
display: 'flex',
146+
flexDirection: 'column',
147+
justifyContent: 'space-between',
148+
width: '20rem',
149+
padding: '1rem',
150+
margin: '1rem',
151+
overflow: 'auto',
152+
border: '1px solid',
153+
borderRadius: '1rem',
154+
}}
155+
>
156+
<div>
157+
<Status connector={connector} useConnector={useConnector} />
158+
<br />
159+
<ChainId useConnector={useConnector} />
160+
<Accounts connector={connector} useConnector={useConnector} />
161+
<br />
162+
</div>
163+
<Connect connector={connector} useConnector={useConnector} />
164+
</div>
165+
))}
166+
</div>
167+
)
168+
}

‎packages/example/connectors/frame.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import { initializeConnector } from '@web3-react/core'
22
import { Frame } from '@web3-react/frame'
33

4-
export const [frame, useFrame] = initializeConnector<Frame>(Frame, [])
4+
export const [frame, useFrame] = initializeConnector<Frame>((actions) => new Frame(actions))

‎packages/example/connectors/metaMask.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import { initializeConnector } from '@web3-react/core'
22
import { MetaMask } from '@web3-react/metamask'
33

4-
export const [metaMask, useMetaMask] = initializeConnector(MetaMask)
4+
export const [metaMask, useMetaMask] = initializeConnector<MetaMask>((actions) => new MetaMask(actions))

‎packages/example/connectors/network.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@ export const URLS = [
77
'https://cloudflare-eth.com',
88
].filter((url) => url)
99

10-
export const [network, useNetwork] = initializeConnector<Network>(Network, [URLS])
10+
export const [network, useNetwork] = initializeConnector<Network>((actions) => new Network(actions, URLS))

‎packages/example/connectors/walletConnect.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { initializeConnector } from '@web3-react/core'
22
import { WalletConnect } from '@web3-react/walletconnect'
33
import { URLS } from './network'
44

5-
export const [walletConnect, useWalletConnect] = initializeConnector<WalletConnect>(WalletConnect, [
6-
{
7-
rpc: { 1: URLS[0] },
8-
},
9-
])
5+
export const [walletConnect, useWalletConnect] = initializeConnector<WalletConnect>(
6+
(actions) =>
7+
new WalletConnect(actions, {
8+
rpc: { 1: URLS[0] },
9+
})
10+
)

‎packages/example/connectors/walletLink.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import { initializeConnector } from '@web3-react/core'
22
import { WalletLink } from '@web3-react/walletlink'
33
import { URLS } from './network'
44

5-
export const [walletLink, useWalletLink] = initializeConnector<WalletLink>(WalletLink, [
6-
{
7-
url: URLS[0],
8-
},
9-
])
5+
export const [walletLink, useWalletLink] = initializeConnector<WalletLink>(
6+
(actions) =>
7+
new WalletLink(actions, {
8+
url: URLS[0],
9+
appName: 'web3-react',
10+
})
11+
)

‎packages/example/next.config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ const nextConfig = {
88
},
99
esmExternals: true,
1010
webpack: (config) => {
11-
config.resolve.fallback = { events: require.resolve('events/'), process: require.resolve('process/browser') }
11+
config.resolve.fallback = {
12+
events: require.resolve('events/'),
13+
process: require.resolve('process/browser'),
14+
bufferutil: false,
15+
'utf-8-validate': false,
16+
}
1217
return config
1318
},
1419
}

0 commit comments

Comments
 (0)