🏗️ Developers
🌏
Network
Harmony-React
A web3-react toolkit for Harmony wallets
Harmony-React is not a fork of web3-react, but rather built on top of web3-react to ensure that the library can be upgraded whenever web3-react gets updated.
Using Harmony-React
Installation
Add
web3-react/core and the wallets you want to use (OneWallet, MathWallet or both) to package.json:1
"@web3-react/core": "latest",
2
"@harmony-react/mathwallet-connector": "latest",
3
"@harmony-react/onewallet-connector": "latest",
Copied!
Install using
yarn install or npm install.Usage
Import packages:
1
import { OneWalletConnector } from '@harmony-react/onewallet-connector'
2
import { MathWalletConnector } from '@harmony-react/mathwallet-connector'
Copied!
Instantiate wallets:
1
const onewallet = new OneWalletConnector({ chainId: 1 }) // 1 = Mainnet, 2 = Testnet
2
const mathwallet = new MathWalletConnector({ chainId: 1 }) // 1 = Mainnet, 2 = Testnet
Copied!
Store the wallet references in a store or a suitable structure, e.g:
1
this.store = {
2
...
3
web3context: null,
4
connectorsByName: {
5
OneWallet: onewallet,
6
MathWallet: mathwallet,
7
}
8
...
9
}
Copied!
Create a wallet connection/unlock modal (or other suitable UI element):
1
import React from "react";
2
import {
3
DialogContent,
4
Dialog,
5
Slide
6
} from '@material-ui/core';
7
8
import Unlock from './index.jsx';
9
10
export default function UnlockModal(props) {
11
const { closeModal, modalOpen } = props
12
const fullScreen = window.innerWidth < 450
13
const Transition = React.forwardRef((props, ref) => <Slide direction="up" {...props} ref={ref} />)
14
15
return (
16
<Dialog open={ modalOpen } onClose={ closeModal } fullWidth={ true } maxWidth={ 'sm' } TransitionComponent={ Transition } fullScreen={ fullScreen }>
17
<DialogContent>
18
<Unlock closeModal={ closeModal } />
19
</DialogContent>
20
</Dialog>
21
)
22
}
Copied!
Implement the
Unlock component:1
...
2
import { Web3ReactProvider, useWeb3React } from '@web3-react/core'
3
...
4
5
export default function Unlock({ closeModal }) {
6
...
7
8
return (
9
<div className={ classes.root }>
10
<div className={ classes.closeIcon } onClick={ closeModal }><CloseIcon /></div>
11
<div className={ classes.contentContainer }>
12
<Web3ReactProvider getLibrary={ getLibrary }>
13
<WalletComponent closeModal={ closeModal } />
14
</Web3ReactProvider>
15
</div>
16
</div>
17
)
18
}
Copied!
And finally, implement the
WalletComponent:1
export default function WalletComponent({ closeModal }) {
2
const context = useWeb3React()
3
const localContext = store.getStore('web3context')
4
var localConnector = null;
5
if (localContext) {
6
localConnector = localContext.connector
7
}
8
9
const {
10
connector,
11
library,
12
account,
13
activate,
14
deactivate,
15
active,
16
error
17
} = context;
18
19
var connectorsByName = store.getStore('connectorsByName')
20
21
const [activatingConnector, setActivatingConnector] = React.useState()
22
useEffect(() => {
23
if (activatingConnector && activatingConnector === connector) {
24
setActivatingConnector(undefined);
25
}
26
}, [activatingConnector, connector]);
27
28
useEffect(() => {
29
if (account && active && library) {
30
store.setStore({ account: { address: account }, web3context: context })
31
emitter.emit(CONNECTION_CONNECTED)
32
}
33
}, [account, active, closeModal, context, library]);
34
35
const [hoveredConnectorButtons, setHoveredConnectorButtons] = React.useState(new Map());
36
const updateHoveredConnectorButtons = (k,v) => {
37
setHoveredConnectorButtons(new Map(hoveredConnectorButtons.set(k,v)));
38
}
39
40
// useEffect(() => {
41
// if (storeContext && storeContext.active && !active) {
42
// console.log("we are deactive: "+storeContext.account)
43
// store.setStore({ account: {}, web3context: null })
44
// }
45
// }, [active, storeContext]);
46
47
// handle logic to eagerly connect to the injected ethereum provider, if it exists and has granted access already
48
// const triedEager = useEagerConnect();
49
50
// handle logic to connect in reaction to certain events on the injected ethereum provider, if it exists
51
// useInactiveListener(!triedEager || !!activatingConnector);
52
const width = window.innerWidth
53
54
return (
55
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: (width > 650 ? 'space-between' : 'center'), alignItems: 'center' }}>
56
{Object.keys(connectorsByName).map(name => {
57
const currentConnector = connectorsByName[name];
58
const activating = currentConnector === activatingConnector;
59
const connected = (currentConnector === connector||currentConnector === localConnector);
60
const disabled =
61
!!activatingConnector || !!error;
62
63
var url;
64
var display = (hovered && connected) ? 'Disconnect' : name;
65
if (name === 'OneWallet') {
66
url = HarmonyLogo
67
} else if (name === 'MathWallet') {
68
url = MathWalletLogo
69
}
70
71
return (
72
// UI to generate list of wallets
73
)
74
}) }
75
76
// UI to disconnect active wallet
77
)
78
}
Copied!
For full reference implementations of
Store, UnlockModal, Unlock, and WalletComponent:Last modified 1yr ago
Export as PDF
Copy link