Harmony-React

Search…
Harmony-React
A web3-react toolkit for Harmony wallets
​Harmony-React adds support for using OneWallet and MathWallet together with web3-react.
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!
For a more in-depth implementation example check here.
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:
Store: https://github.com/harmony-one/token-faucet-demo-dapp/blob/main/ui/src/stores/index.jsx​
UnlockModal: https://github.com/harmony-one/token-faucet-demo-dapp/blob/main/ui/src/components/unlock/unlockModal.jsx​
Unlock: https://github.com/harmony-one/token-faucet-demo-dapp/blob/main/ui/src/components/unlock/index.jsx​
WalletComponent: https://github.com/harmony-one/token-faucet-demo-dapp/blob/main/ui/src/components/unlock/walletComponent.jsx​
Harmony Ganache
Oracles
Last modified 5mo ago
Export as PDF
Copy link
Contents
Using Harmony-React
Installation
Usage