git.iko.soy/bridge
on 4efb153 help sign in
bridge/src/views/Network.js
197 lines 5.4 kB history raw
1import Maybe from 'folktale/maybe'
2import React from 'react'
3import { Button } from '../components/Base'
4import {
5 DropdownItem,
6 InnerLabelDropdown,
7 DropdownDivider,
8} from '../components/Base'
9import { Row, Col, H1, P } from '../components/Base'
10import * as azimuth from 'azimuth-js'
11import Web3 from 'web3'
13import { CONTRACT_ADDRESSES } from '../lib/contracts'
14import { NETWORK_NAMES, renderNetworkType } from '../lib/network'
15import { ROUTE_NAMES } from '../lib/router'
17class Network extends React.Component {
19 constructor(props) {
20 super(props)
22 this.state = {
23 dropdownOpen: false
24 };
26 this.toggle = this.toggle.bind(this);
27 this.close = this.close.bind(this);
28 this.handleNetworkChange = this.handleNetworkChange.bind(this);
29 }
31 toggle() {
32 this.setState((state, _) => ({
33 dropdownOpen: !state.dropdownOpen
34 }))
35 }
37 handleNetworkChange(network) {
38 const { setNetworkType, setNetwork } = this.props
40 if (network === NETWORK_NAMES.LOCAL) {
41 setNetworkType(network)
43 const endpoint = 'ws://localhost:8545'
44 const provider = new Web3.providers.WebsocketProvider(endpoint)
45 const web3 = new Web3(provider)
46 const contracts = azimuth.initContracts(web3, CONTRACT_ADDRESSES.DEV)
48 setNetwork(Maybe.Just(web3), Maybe.Just(contracts))
49 }
51 if (network === NETWORK_NAMES.ROPSTEN) {
52 setNetworkType(network)
54 const endpoint =
55 `https://ropsten.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`
57 const provider = new Web3.providers.HttpProvider(endpoint)
58 const web3 = new Web3(provider)
59 const contracts = azimuth.initContracts(web3, CONTRACT_ADDRESSES.ROPSTEN)
61 setNetwork(Maybe.Just(web3), Maybe.Just(contracts))
62 }
64 if (network === NETWORK_NAMES.MAINNET) {
65 setNetworkType(network)
67 const endpoint =
68 `https://mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`
70 const provider = new Web3.providers.HttpProvider(endpoint)
71 const web3 = new Web3(provider)
72 const contracts = azimuth.initContracts(web3, CONTRACT_ADDRESSES.MAINNET)
74 setNetwork(Maybe.Just(web3), Maybe.Just(contracts))
75 }
77 if (network === NETWORK_NAMES.OFFLINE) {
78 setNetworkType(network)
80 // NB (jtobin):
81 //
82 // The 'offline' network type targets the mainnet contracts, but does not
83 // actually use a provider to connect. We use a web3 instance to
84 // initalise the contracts, but the network itself is set to Nothing.
85 //
86 // We may want to offer the ability to select a target network for
87 // transactions when offline.
89 const web3 = new Web3()
91 const target =
92 process.env.NODE_ENV === 'development'
93 ? CONTRACT_ADDRESSES.DEV
94 : CONTRACT_ADDRESSES.MAINNET
96 const contracts = azimuth.initContracts(web3, target)
98 setNetwork(Maybe.Nothing(), Maybe.Just(contracts))
99 }
100 }
102 selectClose(f) {
103 f()
104 this.setState({ dropdownOpen: false })
105 }
108 close () {
109 this.setState({ dropdownOpen: false })
110 }
112 render() {
113 const { dropdownOpen } = this.state
114 const { networkType, pushRoute } = this.props
116 return (
117 <Row>
118 <Col>
119 <H1>{ 'Select Network' }</H1>
122 <P>
123 {
124 "Please select the Ethereum node you'd like to send " +
125 "transactions to. For highly valuable keys, please select " +
126 "offline mode."
127 }
128 </P>
131 <InnerLabelDropdown
132 className={'mt-6'}
133 handleToggle={this.toggle}
134 handleClose={this.close}
135 isOpen={dropdownOpen}
136 title={'Node:'}
137 currentSelectionTitle={renderNetworkType(networkType)}
138 >
140 <DropdownItem
141 isSelected={ false }
142 onClick={
143 () => this.selectClose(() => this.handleNetworkChange(NETWORK_NAMES.MAINNET))
144 }
145 >
146 { 'Main Network (default)' }
147 </DropdownItem>
149 <DropdownItem
150 isSelected={false}
151 onClick={
152 () => this.selectClose(() => this.handleNetworkChange(NETWORK_NAMES.LOCAL))
153 }
154 >
155 { //'Ganache Node @ Port 8545 (Default)'
156 }
157 {'Local Node'}
158 </DropdownItem>
160 <DropdownItem
161 // disabled={ true }
162 isSelected={ false }
163 onClick={
164 () => this.selectClose(() => this.handleNetworkChange(NETWORK_NAMES.ROPSTEN))
165 }
166 >
167 { 'Ropsten' }
168 </DropdownItem>
170 <DropdownDivider />
172 <DropdownItem
173 // disabled={ true }
174 isSelected={ false }
175 onClick={
176 () => this.selectClose(() => this.handleNetworkChange(NETWORK_NAMES.OFFLINE))
177 }
178 >
179 { 'Offline' }
180 </DropdownItem>
182 </InnerLabelDropdown>
184 <Button
185 className={'mt-10'}
186 onClick={ () => pushRoute(ROUTE_NAMES.WALLET) }
187 >
188 { 'Continue →' }
189 </Button>
191 </Col>
192 </Row>
193 )
194 }
197export default Network