git.iko.soy/bridge
on 69dc015 help sign in
bridge/src/views/Network.js
202 lines 5.5 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 componentDidMount() {
38 const { networkType } = this.props
39 this.handleNetworkChange(networkType)
40 }
42 handleNetworkChange(network) {
43 const { setNetworkType, setNetwork } = this.props
45 if (network === NETWORK_NAMES.LOCAL) {
46 setNetworkType(network)
48 const endpoint = 'ws://localhost:8545'
49 const provider = new Web3.providers.WebsocketProvider(endpoint)
50 const web3 = new Web3(provider)
51 const contracts = azimuth.initContracts(web3, CONTRACT_ADDRESSES.DEV)
53 setNetwork(Maybe.Just(web3), Maybe.Just(contracts))
54 }
56 if (network === NETWORK_NAMES.ROPSTEN) {
57 setNetworkType(network)
59 const endpoint =
60 `https://ropsten.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`
62 const provider = new Web3.providers.HttpProvider(endpoint)
63 const web3 = new Web3(provider)
64 const contracts = azimuth.initContracts(web3, CONTRACT_ADDRESSES.ROPSTEN)
66 setNetwork(Maybe.Just(web3), Maybe.Just(contracts))
67 }
69 if (network === NETWORK_NAMES.MAINNET) {
70 setNetworkType(network)
72 const endpoint =
73 `https://mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`
75 const provider = new Web3.providers.HttpProvider(endpoint)
76 const web3 = new Web3(provider)
77 const contracts = azimuth.initContracts(web3, CONTRACT_ADDRESSES.MAINNET)
79 setNetwork(Maybe.Just(web3), Maybe.Just(contracts))
80 }
82 if (network === NETWORK_NAMES.OFFLINE) {
83 setNetworkType(network)
85 // NB (jtobin):
86 //
87 // The 'offline' network type targets the mainnet contracts, but does not
88 // actually use a provider to connect. We use a web3 instance to
89 // initalise the contracts, but the network itself is set to Nothing.
90 //
91 // We may want to offer the ability to select a target network for
92 // transactions when offline.
94 const web3 = new Web3()
96 const target =
97 process.env.NODE_ENV === 'development'
98 ? CONTRACT_ADDRESSES.DEV
99 : CONTRACT_ADDRESSES.MAINNET
101 const contracts = azimuth.initContracts(web3, target)
103 setNetwork(Maybe.Nothing(), Maybe.Just(contracts))
104 }
105 }
107 selectClose(f) {
108 f()
109 this.setState({ dropdownOpen: false })
110 }
113 close () {
114 this.setState({ dropdownOpen: false })
115 }
117 render() {
118 const { dropdownOpen } = this.state
119 const { networkType, pushRoute } = this.props
121 return (
122 <Row>
123 <Col>
124 <H1>{ 'Select Network' }</H1>
127 <P>
128 {
129 "Please select the Ethereum node you'd like to send " +
130 "transactions to. If you don't know, the default should be " +
131 "fine. For sensitive transactions, please select offline mode."
132 }
133 </P>
136 <InnerLabelDropdown
137 className={'mt-6'}
138 handleToggle={this.toggle}
139 handleClose={this.close}
140 isOpen={dropdownOpen}
141 title={'Node:'}
142 currentSelectionTitle={renderNetworkType(networkType)}
143 >
145 <DropdownItem
146 isSelected={ false }
147 onClick={
148 () => this.selectClose(() => this.handleNetworkChange(NETWORK_NAMES.MAINNET))
149 }
150 >
151 { 'Main Network (default)' }
152 </DropdownItem>
154 <DropdownItem
155 isSelected={false}
156 onClick={
157 () => this.selectClose(() => this.handleNetworkChange(NETWORK_NAMES.LOCAL))
158 }
159 >
160 { //'Ganache Node @ Port 8545 (Default)'
161 }
162 {'Local Node'}
163 </DropdownItem>
165 <DropdownItem
166 // disabled={ true }
167 isSelected={ false }
168 onClick={
169 () => this.selectClose(() => this.handleNetworkChange(NETWORK_NAMES.ROPSTEN))
170 }
171 >
172 { 'Ropsten' }
173 </DropdownItem>
175 <DropdownDivider />
177 <DropdownItem
178 // disabled={ true }
179 isSelected={ false }
180 onClick={
181 () => this.selectClose(() => this.handleNetworkChange(NETWORK_NAMES.OFFLINE))
182 }
183 >
184 { 'Offline' }
185 </DropdownItem>
187 </InnerLabelDropdown>
189 <Button
190 className={'mt-10'}
191 onClick={ () => pushRoute(ROUTE_NAMES.WALLET) }
192 >
193 { 'Continue →' }
194 </Button>
196 </Col>
197 </Row>
198 )
199 }
202export default Network