Configured Prettier (#60)

* Apply prettier fixes for UI

* Integrate prettier into linting. Remove duplicate .prettierrc.

* Common .eslintignore. Removed reduntant prettier check

* Apply prettier on ui script

* Correct linting

* Duplicate plugin

* Common plugin
This commit is contained in:
Przemyslaw Rzad 2019-05-22 16:31:09 +02:00 committed by GitHub
parent 19a3314c42
commit 6dc4fc6acd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
91 changed files with 1544 additions and 1243 deletions

@ -1,3 +1,4 @@
node_modules
submodules
coverage
lib

22
.eslintrc Normal file

@ -0,0 +1,22 @@
{
"extends": [
"plugin:prettier/recommended"
],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
"arrow-body-style": "off",
"func-names": "off",
"no-await-in-loop": "off",
"no-console": "off",
"no-else-return": "off",
"no-param-reassign": "off",
"no-plusplus": "off",
"no-restricted-syntax": "off",
"no-shadow": "off",
"no-use-before-define": ["error", { "functions": false }],
"import/no-dynamic-require": "off",
"prefer-template": "off",
"no-underscore-dangle": "off"
}
}

@ -1,21 +1,11 @@
{
"plugins": ["node", "prettier"],
"plugins": ["node"],
"extends": [
"plugin:node/recommended",
"airbnb-base",
"plugin:prettier/recommended"
"../.eslintrc"
],
"rules": {
"prettier/prettier": "error",
"arrow-body-style": "off",
"no-await-in-loop": "off",
"no-console": "off",
"no-else-return": "off",
"no-plusplus": "off",
"no-restricted-syntax": "off",
"no-shadow": "off",
"prefer-template": "off",
"no-use-before-define": "off",
"no-underscore-dangle": "off"
"no-use-before-define": "off"
}
}

@ -5,7 +5,7 @@
"main": "index.js",
"scripts": {
"start": "node index.js",
"lint": "eslint .",
"lint": "eslint . --ignore-path ../.eslintignore",
"lint:fix": "eslint . --fix"
},
"author": "",

@ -1,7 +0,0 @@
{
"extends": "../.eslintrc",
"globals": {
"describe": false,
"it": false
}
}

@ -2,20 +2,8 @@
"extends": [
"plugin:node/recommended",
"airbnb-base",
"plugin:prettier/recommended"
"../.eslintrc"
],
"plugins": ["node"],
"rules": {
"arrow-body-style": "off",
"func-names": "off",
"no-await-in-loop": "off",
"no-console": "off",
"no-else-return": "off",
"no-param-reassign": "off",
"no-plusplus": "off",
"no-restricted-syntax": "off",
"no-shadow": "off",
"no-use-before-define": ["error", { "functions": false }],
"import/no-dynamic-require": "off"
}
"rules": {}
}

@ -1,5 +0,0 @@
{
"semi": false,
"singleQuote": true,
"printWidth": 100
}

@ -4,7 +4,7 @@
"description": "",
"main": "index.js",
"scripts": {
"lint": "eslint .",
"lint": "eslint . --ignore-path ../.eslintignore",
"watcher:signature-request": "./scripts/start-worker.sh watcher signature-request-watcher",
"watcher:collected-signatures": "./scripts/start-worker.sh watcher collected-signatures-watcher",
"watcher:affirmation-request": "./scripts/start-worker.sh watcher affirmation-request-watcher",

@ -1,4 +0,0 @@
node_modules
submodules
coverage
e2e-script

@ -1,5 +1,11 @@
{
"extends": "react-app",
"extends": [
"react-app",
"../.eslintrc"
],
"rules": {
"no-use-before-define": "off"
},
"parserOptions": {
"ecmaFeatures": {
"legacyDecorators": true

@ -1,10 +1,3 @@
const {
addDecoratorsLegacy,
disableEsLint,
override
} = require("customize-cra");
const { addDecoratorsLegacy, disableEsLint, override } = require('customize-cra')
module.exports = override(
addDecoratorsLegacy(),
disableEsLint()
);
module.exports = override(addDecoratorsLegacy(), disableEsLint())

@ -32,7 +32,7 @@
"web3-utils": "1.0.0-beta.30"
},
"scripts": {
"lint": "eslint .",
"lint": "eslint . --ignore-path ../.eslintignore",
"select-css-theme": "node scripts/selectTheme.js",
"build-css": "node-sass-chokidar src/assets/stylesheets -o src/assets/stylesheets --output-style=compressed -m application*.css",
"watch-css": "nodemon -e scss -x \"npm run build-css\"",

@ -1,12 +1,12 @@
const path = require('path');
const path = require('path')
require('dotenv').config({
path: path.resolve(__dirname, '..', '.env')
});
const fs = require('fs');
})
const fs = require('fs')
const stylePath = path.resolve(__dirname, '..', 'src', 'assets', 'stylesheets');
const destinationFilename = 'application.css';
let filename;
const stylePath = path.resolve(__dirname, '..', 'src', 'assets', 'stylesheets')
const destinationFilename = 'application.css'
let filename
if (process.env.APP_STYLES === 'classic') {
filename = 'application.classic.css'
@ -14,4 +14,4 @@ if (process.env.APP_STYLES === 'classic') {
filename = 'application.core.css'
}
fs.copyFileSync(path.resolve(stylePath, filename), path.resolve(stylePath, destinationFilename));
fs.copyFileSync(path.resolve(stylePath, filename), path.resolve(stylePath, destinationFilename))

@ -1,7 +1,16 @@
import React from 'react';
import { Header, Bridge, RelayEvents, Footer, SweetAlert, Loading, StatusPage, StatisticsPage } from './components';
import React from 'react'
import {
Header,
Bridge,
RelayEvents,
Footer,
SweetAlert,
Loading,
StatusPage,
StatisticsPage
} from './components'
import { Route } from 'react-router-dom'
import './assets/stylesheets/application.css';
import './assets/stylesheets/application.css'
import { Disclaimer } from './components'
import { ModalContainer } from './components'
import { NoWallet } from './components'
@ -36,12 +45,11 @@ export class App extends React.Component {
<div className={showMobileMenu ? 'mobile-menu-is-open' : ''}>
<Route component={Loading} />
<Route component={SweetAlert} />
<Route render={() =>
<Header
onMenuToggle={this.toggleMobileMenu}
showMobileMenu={showMobileMenu}
<Route
render={() => (
<Header onMenuToggle={this.toggleMobileMenu} showMobileMenu={showMobileMenu} />
)}
/>
}/>
<div className="app-container">
{showMobileMenu && <Route render={() => <div className="mobile-menu-open" />} />}
<Route exact path="/" component={Bridge} />
@ -50,9 +58,7 @@ export class App extends React.Component {
<Route exact path="/statistics" component={StatisticsPage} />
</div>
<Route component={Footer} />
<ModalContainer
showModal={showDisclaimer}
>
<ModalContainer showModal={showDisclaimer}>
<Disclaimer onConfirmation={this.closeDisclaimer} />
</ModalContainer>
<NoWallet showModal={!showDisclaimer} />

@ -2,9 +2,9 @@ import React from 'react'
export const Authority = ({ address, number, logoIndex }) => (
<div className="authority">
<span className='authority-number'>{number}</span>
<span className="authority-number">{number}</span>
<div className="separator" />
<div className={`authority-logo authority-logo-${logoIndex}`} />
<span className='authority-address'>{address}</span>
<span className="authority-address">{address}</span>
</div>
);
)

@ -1,5 +1,5 @@
import BN from 'bignumber.js'
import React from 'react';
import React from 'react'
import { toHex } from 'web3-utils'
import foreignLogoPurple from '../assets/images/logos/logo-poa-20-purple@2x.png'
import homeLogoPurple from '../assets/images/logos/logo-poa-sokol-purple@2x.png'
@ -12,10 +12,10 @@ import { ModalContainer } from './ModalContainer'
import { NetworkDetails } from './NetworkDetails'
import { TransferAlert } from './TransferAlert'
import { getFeeToApply, validFee } from '../stores/utils/rewardable'
import { inject, observer } from "mobx-react";
import { inject, observer } from 'mobx-react'
import { toDecimals } from '../stores/utils/decimals'
@inject("RootStore")
@inject('RootStore')
@observer
export class Bridge extends React.Component {
state = {
@ -66,23 +66,35 @@ export class Bridge extends React.Component {
const isErcToErcMode = bridgeMode === BRIDGE_MODES.ERC_TO_ERC
const { isLessThan, isGreaterThan } = this
if (web3Store.metamaskNet.id.toString() !== web3Store.homeNet.id.toString()) {
swal("Error", `Please switch wallet to ${web3Store.homeNet.name} network`, "error")
swal('Error', `Please switch wallet to ${web3Store.homeNet.name} network`, 'error')
return
}
if (isLessThan(amount, homeStore.minPerTx)) {
alertStore.pushError(`The amount is less than current minimum per transaction amount.\nThe minimum per transaction amount is: ${homeStore.minPerTx} ${homeStore.symbol}`)
alertStore.pushError(
`The amount is less than current minimum per transaction amount.\nThe minimum per transaction amount is: ${
homeStore.minPerTx
} ${homeStore.symbol}`
)
return
}
if (isGreaterThan(amount, homeStore.maxPerTx)) {
alertStore.pushError(`The amount is above current maximum per transaction limit.\nThe maximum per transaction limit is: ${homeStore.maxPerTx} ${homeStore.symbol}`)
alertStore.pushError(
`The amount is above current maximum per transaction limit.\nThe maximum per transaction limit is: ${
homeStore.maxPerTx
} ${homeStore.symbol}`
)
return
}
if (isGreaterThan(amount, homeStore.maxCurrentDeposit)) {
alertStore.pushError(`The amount is above current daily limit.\nThe max deposit today: ${homeStore.maxCurrentDeposit} ${homeStore.symbol}`)
alertStore.pushError(
`The amount is above current daily limit.\nThe max deposit today: ${
homeStore.maxCurrentDeposit
} ${homeStore.symbol}`
)
return
}
if (isGreaterThan(amount, homeStore.getDisplayedBalance())) {
alertStore.pushError("Insufficient balance")
alertStore.pushError('Insufficient balance')
} else {
try {
alertStore.setLoading(true)
@ -115,23 +127,37 @@ export class Bridge extends React.Component {
const isExternalErc20 = foreignStore.tokenType === ERC_TYPES.ERC20
const { isLessThan, isGreaterThan } = this
if (web3Store.metamaskNet.id.toString() !== web3Store.foreignNet.id.toString()) {
swal("Error", `Please switch wallet to ${web3Store.foreignNet.name} network`, "error")
swal('Error', `Please switch wallet to ${web3Store.foreignNet.name} network`, 'error')
return
}
if (!isExternalErc20 && isLessThan(amount, foreignStore.minPerTx)) {
alertStore.pushError(`The amount is less than minimum amount per transaction.\nThe min per transaction is: ${foreignStore.minPerTx} ${foreignStore.symbol}`)
alertStore.pushError(
`The amount is less than minimum amount per transaction.\nThe min per transaction is: ${
foreignStore.minPerTx
} ${foreignStore.symbol}`
)
return
}
if (!isExternalErc20 && isGreaterThan(amount, foreignStore.maxPerTx)) {
alertStore.pushError(`The amount is above maximum amount per transaction.\nThe max per transaction is: ${foreignStore.maxPerTx} ${foreignStore.symbol}`)
alertStore.pushError(
`The amount is above maximum amount per transaction.\nThe max per transaction is: ${
foreignStore.maxPerTx
} ${foreignStore.symbol}`
)
return
}
if (!isExternalErc20 && isGreaterThan(amount, foreignStore.maxCurrentDeposit)) {
alertStore.pushError(`The amount is above current daily limit.\nThe max withdrawal today: ${foreignStore.maxCurrentDeposit} ${foreignStore.symbol}`)
alertStore.pushError(
`The amount is above current daily limit.\nThe max withdrawal today: ${
foreignStore.maxCurrentDeposit
} ${foreignStore.symbol}`
)
return
}
if (isGreaterThan(amount, foreignStore.balance)) {
alertStore.pushError(`Insufficient token balance. Your balance is ${foreignStore.balance} ${foreignStore.symbol}`)
alertStore.pushError(
`Insufficient token balance. Your balance is ${foreignStore.balance} ${foreignStore.symbol}`
)
} else {
try {
alertStore.setLoading(true)
@ -160,19 +186,21 @@ export class Bridge extends React.Component {
isGreaterThan = (amount, base) => new BN(amount).gt(new BN(base))
onTransfer = async (e) => {
onTransfer = async e => {
e.preventDefault()
const amount = this.state.amount.trim();
const amount = this.state.amount.trim()
if (!amount) {
swal("Error", "Please specify amount", "error")
swal('Error', 'Please specify amount', 'error')
return
}
const { foreignStore, web3Store, homeStore } = this.props.RootStore
if((web3Store.metamaskNotSetted && web3Store.metamaskNet.name === '')
|| web3Store.defaultAccount.address === undefined) {
if (
(web3Store.metamaskNotSetted && web3Store.metamaskNet.name === '') ||
web3Store.defaultAccount.address === undefined
) {
web3Store.showInstallMetamaskAlert()
return
}
@ -209,9 +237,9 @@ export class Bridge extends React.Component {
const { reverse } = this.state
this.setState({ showConfirmation: false, confirmationData: {} })
const amount = this.state.amount.trim();
const amount = this.state.amount.trim()
if (!amount) {
swal("Error", "Please specify amount", "error")
swal('Error', 'Please specify amount', 'error')
return
}
@ -222,7 +250,10 @@ export class Bridge extends React.Component {
await this._sendToHome(amount)
}
} catch (e) {
if(!e.message.includes('not mined within 50 blocks') && !e.message.includes('Failed to subscribe to new newBlockHeaders')) {
if (
!e.message.includes('not mined within 50 blocks') &&
!e.message.includes('Failed to subscribe to new newBlockHeaders')
) {
alertStore.setLoading(false)
}
}
@ -231,7 +262,8 @@ export class Bridge extends React.Component {
loadHomeDetails = () => {
const { web3Store, homeStore, bridgeMode } = this.props.RootStore
const isErcToErcMode = bridgeMode === BRIDGE_MODES.ERC_TO_ERC
const isExternalErc20 = bridgeMode === BRIDGE_MODES.ERC_TO_ERC || bridgeMode === BRIDGE_MODES.ERC_TO_NATIVE
const isExternalErc20 =
bridgeMode === BRIDGE_MODES.ERC_TO_ERC || bridgeMode === BRIDGE_MODES.ERC_TO_NATIVE
const modalData = {
isHome: true,
@ -284,28 +316,24 @@ export class Bridge extends React.Component {
this.setState({ modalData, showModal: true })
}
getNetworkTitle = (networkName) => {
const index = networkName.indexOf(" ")
getNetworkTitle = networkName => {
const index = networkName.indexOf(' ')
if (index === -1) {
return networkName
}
return networkName.substring(0, index)
}
getNetworkSubTitle = (networkName) => {
const index = networkName.indexOf(" ")
getNetworkSubTitle = networkName => {
const index = networkName.indexOf(' ')
if (index === -1) {
return false
}
return networkName.substring(index + 1, networkName.length)
}
render() {
@ -329,10 +357,7 @@ export class Bridge extends React.Component {
return (
<div className="bridge-container">
<div className="bridge">
<BridgeAddress
isHome={true}
reverse={reverse}
/>
<BridgeAddress isHome={true} reverse={reverse} />
<div className="bridge-transfer">
<div className="left-image-wrapper">
<div className="left-image" />
@ -370,23 +395,23 @@ export class Bridge extends React.Component {
<div className="right-image" />
</div>
</div>
<BridgeAddress
isHome={false}
reverse={reverse}
/>
<BridgeAddress isHome={false} reverse={reverse} />
<ModalContainer
hideModal={() => {this.setState({showModal: false})}}
hideModal={() => {
this.setState({ showModal: false })
}}
showModal={showModal}
>
<NetworkDetails {...modalData} />
</ModalContainer>
<ModalContainer
showModal={showConfirmation}
>
<ModalContainer showModal={showConfirmation}>
<TransferAlert
onConfirmation={this.onTransferConfirmation}
onCancel={() => {this.setState({showConfirmation: false, confirmationData: {}})}}
{...confirmationData} />
onCancel={() => {
this.setState({ showConfirmation: false, confirmationData: {} })
}}
{...confirmationData}
/>
</ModalContainer>
</div>
</div>

@ -1,27 +1,30 @@
import React from 'react'
export const BridgeAddress = ({ isHome, reverse }) => {
const getAddress = () => isHome ?
(<div className="home-address-container" />)
:
(<div className="foreign-address-container" />)
const getAddress = () =>
isHome ? (
<div className="home-address-container" />
) : (
<div className="foreign-address-container" />
)
return isHome ?
(<div className="bridge-home">
return isHome ? (
<div className="bridge-home">
<div className="bridge-home-container">
<div className="home-logo-container">
<div className={reverse ? 'foreign-logo' : 'home-logo'} />
</div>
</div>
{getAddress()}
</div>)
:
(<div className="bridge-foreign">
</div>
) : (
<div className="bridge-foreign">
{getAddress()}
<div className="bridge-foreign-container">
<div className="foreign-logo-container">
<div className={reverse ? 'home-logo' : 'foreign-logo'} />
</div>
</div>
</div>)
</div>
)
}

@ -7,16 +7,21 @@ export const BridgeForm = ({ reverse, currency, onTransfer, onInputChange, displ
<div className="bridge-form-input-container">
<input
onChange={onInputChange}
name='amount'
name="amount"
pattern="[0-9]+([.][0-9]{1,18})?"
type="text"
className="bridge-form-input"
id="amount"
placeholder="0" />
<label htmlFor="amount" className="bridge-form-label">{currency}</label>
placeholder="0"
/>
<label htmlFor="amount" className="bridge-form-label">
{currency}
</label>
</div>
<div>
<button type="submit" className="bridge-form-button">Transfer</button>
<button type="submit" className="bridge-form-button">
Transfer
</button>
</div>
</div>
</form>

@ -16,16 +16,22 @@ export const BridgeNetwork = ({
? numeral(0).format('0,0.00', Math.floor)
: numeral(balance).format('0,0.00', Math.floor)
const showMore = () => isHome ?
(<div className="bridge-network-data" onClick={showModal}>
<span className="info-icon info-icon-left"><InfoIcon /></span>
const showMore = () =>
isHome ? (
<div className="bridge-network-data" onClick={showModal}>
<span className="info-icon info-icon-left">
<InfoIcon />
</span>
<span className="network-show-more">Show More</span>
</div>)
:
(<div className="bridge-network-data" onClick={showModal}>
</div>
) : (
<div className="bridge-network-data" onClick={showModal}>
<span className="network-show-more">Show More</span>
<span className="info-icon info-icon-right"><InfoIcon /></span>
</div>)
<span className="info-icon info-icon-right">
<InfoIcon />
</span>
</div>
)
return (
<div className={`network-container-${containerName}`}>
@ -35,7 +41,10 @@ export const BridgeNetwork = ({
</p>
<p>
<span className="network-basic-label">Balance:</span>
<span className="network-balance"> {formattedBalance} {currency}</span>
<span className="network-balance">
{' '}
{formattedBalance} {currency}
</span>
</p>
{showMore()}
</div>

@ -2,13 +2,17 @@ import React from 'react'
import numeral from 'numeral'
import { DataBlock } from './DataBlock'
export const BridgeStatistics = ({ users, totalBridged, homeBalance, homeNativeSupplyTitle, foreignSupply, homeSymbol, foreignSymbol }) => (
export const BridgeStatistics = ({
users,
totalBridged,
homeBalance,
homeNativeSupplyTitle,
foreignSupply,
homeSymbol,
foreignSymbol
}) => (
<div className="statistics-bridge-data">
<DataBlock
description="Users"
value={numeral(users).format('0,0')}
type=''
/>
<DataBlock description="Users" value={numeral(users).format('0,0')} type="" />
<div className="separator" />
<DataBlock
description={`Total ${foreignSymbol} Bridged`}
@ -28,4 +32,4 @@ export const BridgeStatistics = ({ users, totalBridged, homeBalance, homeNativeS
type={foreignSymbol}
/>
</div>
);
)

@ -2,34 +2,34 @@ import React from 'react'
import numeral from 'numeral'
import { DataBlock } from './DataBlock'
export const Configuration = ({ requiredSignatures, authorities, symbol, maxSingleDeposit, maxTotalBalance }) => (
export const Configuration = ({
requiredSignatures,
authorities,
symbol,
maxSingleDeposit,
maxTotalBalance
}) => (
<div className="status-configuration-data">
<DataBlock
description="Required Signatures"
value={numeral(requiredSignatures).format('0')}
type=''
type=""
/>
<div className="separator" />
<DataBlock description="Authorities" value={numeral(authorities).format('0')} type="" />
{maxSingleDeposit && maxSingleDeposit !== '0' && <div className="separator" /> && (
<DataBlock
description="Authorities"
value={numeral(authorities).format('0')}
type=''
/>
{maxSingleDeposit && maxSingleDeposit !== '0'
&& <div className="separator" />
&& <DataBlock
description="Max Single Deposit"
value={numeral(maxSingleDeposit).format('0.00 a', Math.floor)}
type={symbol}
/>
}
{maxSingleDeposit && maxSingleDeposit !== '0'
&& <div className="separator" />
&& <DataBlock
)}
{maxSingleDeposit && maxSingleDeposit !== '0' && <div className="separator" /> && (
<DataBlock
description={`Remaining Daily ${symbol} Quota`}
value={numeral(maxTotalBalance).format('0.00 a', Math.floor)}
type={symbol}
/>
}
)}
</div>
);
)

@ -1,9 +1,8 @@
import React from 'react'
import { inject, observer } from "mobx-react"
import { inject, observer } from 'mobx-react'
import numeral from 'numeral'
@inject("RootStore")
@inject('RootStore')
@observer
export class DailyQuotaModal extends React.Component {
state = {
@ -18,9 +17,9 @@ export class DailyQuotaModal extends React.Component {
getPosition = () => {
const offsetsElement = document.getElementsByClassName('header-wallet')
if (offsetsElement.length > 0) {
const offsets = offsetsElement[0].getBoundingClientRect();
const height = offsets.height;
const left = offsets.left;
const offsets = offsetsElement[0].getBoundingClientRect()
const height = offsets.height
const left = offsets.left
this.setState({ left, top: height + 20 })
} else {
setTimeout(this.getPosition, 100)
@ -38,18 +37,18 @@ export class DailyQuotaModal extends React.Component {
const to = isHome ? foreignStore.symbol : homeStore.symbol
const networkNameFrom = isHome ? homeStore.networkName : foreignStore.networkName
const networkNameTo = isHome ? foreignStore.networkName : homeStore.networkName
const description = limit && limit !== '0' ? `${numeral(value).format('0,0.0', Math.floor)} ${from} on ${networkNameFrom + ' '}
const description =
limit && limit !== '0'
? `${numeral(value).format('0,0.0', Math.floor)} ${from} on ${networkNameFrom + ' '}
remaining for transfer to ${to + ' '}
on ${networkNameTo}`
: `No limit configured`
return (
<div className="daily-quota-modal-container">
<div className="daily-quota-modal" style={{ left, top }}>
<div className='modal-container'>
<div className="modal-container">
<span className="daily-quota-title">Daily Quota</span>
<span className="daily-quota-description">
{description}
</span>
<span className="daily-quota-description">{description}</span>
</div>
</div>
</div>

@ -4,8 +4,8 @@ export const DataBlock = ({ description, value, type, dataTestid }) => (
<div className="datablock-container" data-testid={dataTestid}>
<p>
<span className="datablock-value">{value}</span>
<span className={ type ? "datablock-type" : ""}>{type}</span>
<span className={type ? 'datablock-type' : ''}>{type}</span>
</p>
<p className="datablock-description">{description}</p>
</div>
);
)

@ -7,30 +7,42 @@ export const Disclaimer = ({ onConfirmation }) => (
<img className="disclaimer-icon" src={disclaimerIcon} alt="disclaimer icon" />
</div>
<div className="alert-container">
<span className="disclaimer-title">Welcome to the<br/> TokenBridge UI App Beta+</span>
<span className="disclaimer-title">
Welcome to the
<br /> TokenBridge UI App Beta+
</span>
<p className="disclaimer-description">
Were launching our TokenBridge and our UI App on a beta-testing basis. While weve
worked long and hard to develop the core features of the software, we expect that our
users may detect bugs and other issues. Help us improve by posting any difficulties to our
<a href="https://forum.poa.network/c/support/tokenbridge-support" target="_blank"
rel="noopener noreferrer"> support page</a>.
Were launching our TokenBridge and our UI App on a beta-testing basis. While weve worked
long and hard to develop the core features of the software, we expect that our users may
detect bugs and other issues. Help us improve by posting any difficulties to our
<a
href="https://forum.poa.network/c/support/tokenbridge-support"
target="_blank"
rel="noopener noreferrer"
>
{' '}
support page
</a>
.
<br />
<br />
Use of this app and the TokenBridge is at your own risk. Users may experience
unexpected delays, unexpected visual artifacts, unexpected loss of tokens or funds from
improper app configuration, or other negative outcomes.
Use of this app and the TokenBridge is at your own risk. Users may experience unexpected
delays, unexpected visual artifacts, unexpected loss of tokens or funds from improper app
configuration, or other negative outcomes.
<br />
<br />
By hitting the "continue" button, you are representing that youve read our
<a
href="https://forum.poa.network/t/end-user-licensing-agreement-and-terms-of-service/2197"
target="_blank" rel="noopener noreferrer">Terms of
Service</a> in full, and that you agree to be legally bound by them.
target="_blank"
rel="noopener noreferrer"
>
Terms of Service
</a>{' '}
in full, and that you agree to be legally bound by them.
</p>
<div className="disclaimer-buttons">
<button
className="disclaimer-confirm"
onClick={onConfirmation}>
<button className="disclaimer-confirm" onClick={onConfirmation}>
Continue
</button>
</div>

@ -1,11 +1,26 @@
import React from 'react'
export const EventsListHeader = ({selected, homeName, homeValue, foreignName, foreignValue, onChangeList, handleChange, handleKeyDown}) => (
export const EventsListHeader = ({
selected,
homeName,
homeValue,
foreignName,
foreignValue,
onChangeList,
handleChange,
handleKeyDown
}) => (
<div>
<div className="events-header">
<span className="events-header-title">Events</span>
<div className="events-filter-container">
<input onChange={handleChange} onKeyDown={handleKeyDown} type="text" className="events-filter" placeholder="Tx Hash or Block Number..." />
<input
onChange={handleChange}
onKeyDown={handleKeyDown}
type="text"
className="events-filter"
placeholder="Tx Hash or Block Number..."
/>
<span className="events-filter-icon" />
<select value={selected} onChange={onChangeList} className="events-select">
<option value={homeValue}>{homeName}</option>

@ -2,11 +2,7 @@ import React from 'react'
import { CSSTransition } from 'react-transition-group'
export const Fade = ({ children, ...props }) => (
<CSSTransition
{...props}
timeout={1000}
classNames="fade"
>
<CSSTransition {...props} timeout={1000} classNames="fade">
{children}
</CSSTransition>
)

@ -3,35 +3,30 @@ import numeral from 'numeral'
import { DataBlock } from './DataBlock'
export const FeeStatistics = ({ depositFeeCollected, withdrawFeeCollected }) => (
<div className='statistics-fee-container' data-testid="fee-statistics">
{
(depositFeeCollected.shouldDisplay || withdrawFeeCollected.shouldDisplay)
&& <span className='statistics-bridge-title statistics-title'>Fee Statistics</span>
}
<div className="statistics-fee-container" data-testid="fee-statistics">
{(depositFeeCollected.shouldDisplay || withdrawFeeCollected.shouldDisplay) && (
<span className="statistics-bridge-title statistics-title">Fee Statistics</span>
)}
<div className="statistics-fee-data" data-testid="fee-statistics-data">
{
depositFeeCollected.shouldDisplay &&
{depositFeeCollected.shouldDisplay && (
<DataBlock
description="Deposit Fees"
value={numeral(depositFeeCollected.value).format('0,0.00 a', Math.floor)}
type={depositFeeCollected.type}
dataTestid="deposit-fees-block"
/>
}
{
depositFeeCollected.shouldDisplay &&
withdrawFeeCollected.shouldDisplay &&
)}
{depositFeeCollected.shouldDisplay && withdrawFeeCollected.shouldDisplay && (
<div className="separator" />
}
{
withdrawFeeCollected.shouldDisplay &&
)}
{withdrawFeeCollected.shouldDisplay && (
<DataBlock
description="Withdrawal Fees"
value={numeral(withdrawFeeCollected.value).format('0,0.00 a', Math.floor)}
type={withdrawFeeCollected.type}
dataTestid="withdrawal-fees-block"
/>
}
)}
</div>
</div>
)

@ -7,17 +7,27 @@ import { MobileMenu } from './MobileMenu'
import { MobileMenuButton } from './MobileMenuButton'
import { inject, observer } from 'mobx-react/index'
@inject("RootStore")
@inject('RootStore')
@observer
export class Header extends React.Component {
render() {
const { showMobileMenu, onMenuToggle, RootStore: { alertStore, web3Store } } = this.props
const { REACT_APP_HOME_WITHOUT_EVENTS: HOME, REACT_APP_FOREIGN_WITHOUT_EVENTS: FOREIGN } = process.env
const withoutEvents = web3Store.metamaskNet.id === web3Store.homeNet.id.toString() ? yn(HOME) : yn(FOREIGN)
const {
showMobileMenu,
onMenuToggle,
RootStore: { alertStore, web3Store }
} = this.props
const {
REACT_APP_HOME_WITHOUT_EVENTS: HOME,
REACT_APP_FOREIGN_WITHOUT_EVENTS: FOREIGN
} = process.env
const withoutEvents =
web3Store.metamaskNet.id === web3Store.homeNet.id.toString() ? yn(HOME) : yn(FOREIGN)
return (
<header className="header">
{showMobileMenu ? <MobileMenu withoutEvents={withoutEvents} onMenuToggle={onMenuToggle} /> : null}
{showMobileMenu ? (
<MobileMenu withoutEvents={withoutEvents} onMenuToggle={onMenuToggle} />
) : null}
<div className="container">
<Link to="/" onClick={showMobileMenu ? onMenuToggle : null} className="header-logo" />
<HeaderMenu withoutEvents={withoutEvents} onMenuToggle={onMenuToggle} />

@ -1,5 +1,5 @@
import React from "react";
import { MenuItems } from "./MenuItems";
import React from 'react'
import { MenuItems } from './MenuItems'
import { Wallet } from './Wallet'
export const HeaderMenu = ({ withoutEvents }) => (
@ -7,4 +7,4 @@ export const HeaderMenu = ({ withoutEvents }) => (
<MenuItems withoutEvents={withoutEvents} />
<Wallet />
</div>
);
)

@ -1,29 +1,36 @@
import React from 'react';
import { inject, observer } from "mobx-react";
import React from 'react'
import { inject, observer } from 'mobx-react'
import { ProgressRing } from './ProgressRing'
import { PreventExit } from './PreventExit'
@inject("RootStore")
@inject('RootStore')
@observer
export class Loading extends React.Component {
render() {
const { alertStore } = this.props.RootStore
const { loadingStepIndex, loadingSteps, blockConfirmations } = alertStore
const style = alertStore.showLoading ? { display: 'flex' } : { display: 'none' }
const progress = loadingStepIndex === 3 ? 100 : (loadingStepIndex) * 25 + blockConfirmations * 4
const progress = loadingStepIndex === 3 ? 100 : loadingStepIndex * 25 + blockConfirmations * 4
return (
<div className={`loading-container ${loadingStepIndex > 0 ? 'mobile-container' : ''}`} style={style}>
{loadingStepIndex > 0 && <ProgressRing
<div
className={`loading-container ${loadingStepIndex > 0 ? 'mobile-container' : ''}`}
style={style}
>
{loadingStepIndex > 0 && (
<ProgressRing
confirmationNumber={blockConfirmations}
hideConfirmationNumber={loadingStepIndex > 1}
progress={progress}
radius={40}
stroke={4}
/>}
{loadingStepIndex === 0 && (<div className="loading-logo" />)}
/>
)}
{loadingStepIndex === 0 && <div className="loading-logo" />}
{loadingStepIndex === 0 && <div className="loading-i" />}
{loadingStepIndex > 0 && (<div className="loading-text">{loadingSteps[loadingStepIndex]}</div>)}
{loadingStepIndex > 0 && (
<div className="loading-text">{loadingSteps[loadingStepIndex]}</div>
)}
{alertStore.showLoading && <PreventExit />}
</div>
)

@ -1,26 +1,26 @@
import React from "react"
import { EventsIcon, StatusIcon, StatisticsIcon } from "./menu-icons"
import { Link } from "react-router-dom"
import React from 'react'
import { EventsIcon, StatusIcon, StatisticsIcon } from './menu-icons'
import { Link } from 'react-router-dom'
export const MenuItems = ({ onMenuToggle = null, withoutEvents }) => {
const menuItems = [
{
hide: withoutEvents,
icon: <EventsIcon />,
link: "/events",
text: "Events"
link: '/events',
text: 'Events'
},
{
hide: false,
icon: <StatusIcon />,
link: "/status",
text: "Status"
link: '/status',
text: 'Status'
},
{
hide: withoutEvents,
icon: <StatisticsIcon />,
link: "/statistics",
text: "Statistics"
link: '/statistics',
text: 'Statistics'
}
]
@ -30,6 +30,6 @@ export const MenuItems = ({ onMenuToggle = null, withoutEvents }) => {
<span className="menu-items-icon">{item.icon}</span>
<span className="menu-items-text">{item.text}</span>
</Link>
);
)
})
}

@ -1,5 +1,5 @@
import React from "react";
import { MenuItems } from "./MenuItems";
import React from 'react'
import { MenuItems } from './MenuItems'
export const MobileMenu = ({ onMenuToggle, withoutEvents }) => (
<div className="mobile-menu">
@ -7,4 +7,4 @@ export const MobileMenu = ({ onMenuToggle, withoutEvents }) => (
<MenuItems withoutEvents={withoutEvents} onMenuToggle={onMenuToggle} />
</div>
</div>
);
)

@ -4,7 +4,7 @@ import { MobileMenuCloseIcon } from './menu-icons/MobileMenuCloseIcon'
export const MobileMenuButton = ({ showMobileMenu, onMenuToggle }) => {
return (
<div className='mobile-menu-button' onClick={onMenuToggle}>
<div className="mobile-menu-button" onClick={onMenuToggle}>
{showMobileMenu ? <MobileMenuCloseIcon /> : <MobileMenuIcon />}
</div>
)

@ -1,23 +1,30 @@
import React from 'react'
export const ModalContainer = (props) => {
export const ModalContainer = props => {
if (props.showModal)
return (
<div className="network-modal loading-container"
onClick={props.hideModal
? (e) => {
if(e.target.classList.contains('network-details') || e.target.classList.contains('loading-container')) {
<div
className="network-modal loading-container"
onClick={
props.hideModal
? e => {
if (
e.target.classList.contains('network-details') ||
e.target.classList.contains('loading-container')
) {
props.hideModal()
}
}
: () => {}}
>
<div className='modal'>
{props.children}
{props.hideModal
? <div className='close-button' onClick={() => props.hideModal()}><i className="icon"/></div>
: null
: () => {}
}
>
<div className="modal">
{props.children}
{props.hideModal ? (
<div className="close-button" onClick={() => props.hideModal()}>
<i className="icon" />
</div>
) : null}
</div>
</div>
)

@ -26,7 +26,9 @@ export const NetworkDetails = ({
const networkTitle = isHome ? 'Bridge Home' : 'Bridge Foreign'
const logoClass = isHome ? 'home-logo home-logo-modal' : 'foreign-logo foreign-logo-modal'
const totalTitle = isHome
? nativeSupplyTitle ? `Native Coins Amount` : `Totally minted by the bridge`
? nativeSupplyTitle
? `Native Coins Amount`
: `Totally minted by the bridge`
: `${currency} Tokens Amount`
const totalAmount = isHome ? totalBalance : totalSupply
const formattedBalance = isNaN(numeral(balance).format('0.00', Math.floor))
@ -46,35 +48,59 @@ export const NetworkDetails = ({
<p className="details-data-container">
<span className="details-label">{networkTitle} Address</span>
<span className="details-description details-copy">
<a className="details-description" href={getExplorerAddressUrl(address)} target="_blank" >
<a
className="details-description"
href={getExplorerAddressUrl(address)}
target="_blank"
>
{address.slice(0, 27).concat('...')}
</a>
<CopyToClipboard text={address}>
<span className="copy-icon copy-icon-right"><CopyIcon /></span>
<span className="copy-icon copy-icon-right">
<CopyIcon />
</span>
</CopyToClipboard>
</span>
</p>
{displayBridgeLimits && <p className="details-data-container">
{displayBridgeLimits && (
<p className="details-data-container">
<span className="details-label">Remaining Daily {currency} Quota</span>
<span className="details-description-black">{numeral(maxCurrentLimit).format('0,0.0', Math.floor)} {currency}</span>
</p>}
{displayBridgeLimits && <p className="details-data-container">
<span className="details-description-black">
{numeral(maxCurrentLimit).format('0,0.0', Math.floor)} {currency}
</span>
</p>
)}
{displayBridgeLimits && (
<p className="details-data-container">
<span className="details-label">Maximum Amount Per Transaction</span>
<span className="details-description-black">{numeral(maxPerTx).format('0,0.0', Math.floor)} {currency}</span>
</p>}
{displayBridgeLimits && <p className="details-data-container">
<span className="details-description-black">
{numeral(maxPerTx).format('0,0.0', Math.floor)} {currency}
</span>
</p>
)}
{displayBridgeLimits && (
<p className="details-data-container">
<span className="details-label">Minimum Amount Per Transaction</span>
<span className="details-description-black">{numeral(minPerTx).format('0,0.000', Math.floor)} {currency}</span>
</p>}
<span className="details-description-black">
{numeral(minPerTx).format('0,0.000', Math.floor)} {currency}
</span>
</p>
)}
{displayTokenAddress && (
<p className="details-data-container">
<span className="details-label">Token Address</span>
<span className="details-description details-copy">
<a className="details-description" href={getExplorerAddressUrl(tokenAddress)} target="_blank" >
<a
className="details-description"
href={getExplorerAddressUrl(tokenAddress)}
target="_blank"
>
{tokenAddress.slice(0, 27).concat('...')}
</a>
<CopyToClipboard text={tokenAddress}>
<span className="copy-icon copy-icon-right"><CopyIcon /></span>
<span className="copy-icon copy-icon-right">
<CopyIcon />
</span>
</CopyToClipboard>
</span>
</p>
@ -87,11 +113,15 @@ export const NetworkDetails = ({
)}
<p className="details-data-container">
<span className="details-label">{totalTitle}</span>
<span className="details-description-black">{numeral(totalAmount).format('0,0.000', Math.floor)} {currency}</span>
<span className="details-description-black">
{numeral(totalAmount).format('0,0.000', Math.floor)} {currency}
</span>
</p>
<p className="details-data-container">
<span className="details-label">Your {currency} Balance</span>
<span className="details-description-black">{formattedBalance} {currency}</span>
<span className="details-description-black">
{formattedBalance} {currency}
</span>
</p>
</div>
</div>

@ -15,7 +15,12 @@ export class NoWallet extends Component {
}
render() {
const { RootStore: { web3Store: { walletInstalled } }, showModal: showNoWallet } = this.props
const {
RootStore: {
web3Store: { walletInstalled }
},
showModal: showNoWallet
} = this.props
const showModal = showNoWallet && !walletInstalled
if (!showModal || !this.state.showModal) return null
@ -28,10 +33,14 @@ export class NoWallet extends Component {
</div>
<div className="noWallet-alert-container">
<h2 className="noWallet-title">Wallet not found</h2>
<p className="noWallet-description">A wallet is not installed. Before continue, please install one (AlphaWallet, Metamask
or Nifty Wallet) and return to this page to continue using the application.</p>
<p className="noWallet-description">For further information on how to install any of both wallets, please
click the buttons below.</p>
<p className="noWallet-description">
A wallet is not installed. Before continue, please install one (AlphaWallet, Metamask
or Nifty Wallet) and return to this page to continue using the application.
</p>
<p className="noWallet-description">
For further information on how to install any of both wallets, please click the
buttons below.
</p>
<div className="noWallet-buttons">
<a
className="noWallet-metamask"
@ -57,7 +66,9 @@ export class NoWallet extends Component {
>
AlphaWallet
</a>
<button className="noWallet-cancel" onClick={this.handleCancel}>Cancel</button>
<button className="noWallet-cancel" onClick={this.handleCancel}>
Cancel
</button>
</div>
</div>
</div>

@ -1,8 +1,8 @@
import React, { Component } from 'react'
export class PreventExit extends Component {
onUnload = (e) => {
e.returnValue = "Are you sure?"
onUnload = e => {
e.returnValue = 'Are you sure?'
}
componentDidMount() {

@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { Component } from 'react'
export class ProgressRing extends Component {
state = {
@ -9,13 +9,10 @@ export class ProgressRing extends Component {
render() {
const { radius, stroke, progress, confirmationNumber, hideConfirmationNumber } = this.props
const { circumference, normalizedRadius } = this.state
const strokeDashoffset = circumference - progress / 100 * circumference
const strokeDashoffset = circumference - (progress / 100) * circumference
const confirmations = hideConfirmationNumber ? '' : `${confirmationNumber}/8`
return (
<svg
height={radius * 2}
width={radius * 2}
>
<svg height={radius * 2} width={radius * 2}>
<circle
stroke="#7b5ab2"
fill="transparent"
@ -40,6 +37,6 @@ export class ProgressRing extends Component {
{confirmations}
</text>
</svg>
);
)
}
}

@ -1,28 +1,27 @@
import React from 'react';
import { inject, observer } from "mobx-react";
import React from 'react'
import { inject, observer } from 'mobx-react'
import { EventsListHeader } from './index'
import { Event } from './index'
import yn from './utils/yn'
import { Redirect } from 'react-router'
const WAIT_INTERVAL = 700
const ENTER_KEY = 13
const WAIT_INTERVAL = 700;
const ENTER_KEY = 13;
@inject("RootStore")
@inject('RootStore')
@observer
export class RelayEvents extends React.Component {
constructor(props) {
super(props)
this.timer = null;
this.timer = null
this.colors = {
'UserRequestForSignature': 'green',
'RelayedMessage': 'green',
'UserRequestForAffirmation': 'red',
'AffirmationCompleted': 'red',
'SignedForUserRequest': 'purple',
'SignedForAffirmation': 'purple',
'CollectedSignatures': 'blue'
UserRequestForSignature: 'green',
RelayedMessage: 'green',
UserRequestForAffirmation: 'red',
AffirmationCompleted: 'red',
SignedForUserRequest: 'purple',
SignedForAffirmation: 'purple',
CollectedSignatures: 'blue'
}
this.homeValue = '0'
this.foreingValue = '1'
@ -31,10 +30,10 @@ export class RelayEvents extends React.Component {
}
}
onHomeBlockFilter = async (value) => {
onHomeBlockFilter = async value => {
const { alertStore, homeStore, foreignStore } = this.props.RootStore
alertStore.setLoading(true)
if(value.substr(0,2) === "0x"){
if (value.substr(0, 2) === '0x') {
homeStore.setFilter(true)
foreignStore.setFilter(true)
await homeStore.filterByTxHash(value)
@ -53,10 +52,10 @@ export class RelayEvents extends React.Component {
alertStore.setLoading(false)
}
onForeignBlockFilter = async (value) => {
onForeignBlockFilter = async value => {
const { alertStore, homeStore, foreignStore } = this.props.RootStore
alertStore.setLoading(true)
if(value.substr(0,2) === "0x"){
if (value.substr(0, 2) === '0x') {
homeStore.setFilter(true)
foreignStore.setFilter(true)
await foreignStore.filterByTxHash(value)
@ -75,37 +74,42 @@ export class RelayEvents extends React.Component {
alertStore.setLoading(false)
}
handleChangeHome = async (e) => {
const value = e.target.value;
window.clearTimeout(this.timer);
this.timer = setTimeout(() => {this.onHomeBlockFilter(value)}, WAIT_INTERVAL);
handleChangeHome = async e => {
const value = e.target.value
window.clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.onHomeBlockFilter(value)
}, WAIT_INTERVAL)
}
handleChangeForeign = async (e) => {
const value = e.target.value;
window.clearTimeout(this.timer);
this.timer = setTimeout(() => {this.onForeignBlockFilter(value)}, WAIT_INTERVAL);
handleChangeForeign = async e => {
const value = e.target.value
window.clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.onForeignBlockFilter(value)
}, WAIT_INTERVAL)
}
handleKeyDownHome = (e) => {
const value = e.target.value;
window.clearTimeout(this.timer);
handleKeyDownHome = e => {
const value = e.target.value
window.clearTimeout(this.timer)
if (e.keyCode === ENTER_KEY && value) {
this.onHomeBlockFilter(value);
this.onHomeBlockFilter(value)
}
}
handleKeyDownForeign = (e) => {
const value = e.target.value;
window.clearTimeout(this.timer);
handleKeyDownForeign = e => {
const value = e.target.value
window.clearTimeout(this.timer)
if (e.keyCode === ENTER_KEY && value) {
this.onForeignBlockFilter(value);
this.onForeignBlockFilter(value)
}
}
getHomeEvents = (homeStore) => {
return homeStore.events.slice().map(({event, transactionHash, blockNumber, returnValues}) =>
({
getHomeEvents = homeStore => {
return homeStore.events
.slice()
.map(({ event, transactionHash, blockNumber, returnValues }) => ({
color: this.colors[event],
eventName: event,
transactionHash,
@ -115,21 +119,22 @@ export class RelayEvents extends React.Component {
}))
}
getForeignEvents = (foreignStore) => {
return foreignStore.events.slice()
getForeignEvents = foreignStore => {
return foreignStore.events
.slice()
.map(({ event, transactionHash, signedTxHash, blockNumber, returnValues }) => {
return ({
return {
color: this.colors[event],
eventName: event,
transactionHash,
recipient: returnValues.recipient,
value: returnValues.value,
blockNumber
})
}
})
}
onChangeList = (e) => {
onChangeList = e => {
this.setState({ selectedList: e.target.value })
}
@ -138,37 +143,52 @@ export class RelayEvents extends React.Component {
const { selectedList } = this.state
const home = this.getHomeEvents(homeStore, foreignStore)
const foreign = this.getForeignEvents(foreignStore, homeStore)
const { REACT_APP_HOME_WITHOUT_EVENTS: HOME, REACT_APP_FOREIGN_WITHOUT_EVENTS: FOREIGN } = process.env
const withoutEvents = web3Store.metamaskNet.id === web3Store.homeNet.id.toString() ? yn(HOME) : yn(FOREIGN)
const {
REACT_APP_HOME_WITHOUT_EVENTS: HOME,
REACT_APP_FOREIGN_WITHOUT_EVENTS: FOREIGN
} = process.env
const withoutEvents =
web3Store.metamaskNet.id === web3Store.homeNet.id.toString() ? yn(HOME) : yn(FOREIGN)
return withoutEvents ? (<Redirect to="/" />) : (
return withoutEvents ? (
<Redirect to="/" />
) : (
<div className="events-page">
<div className="events-container">
<EventsListHeader
handleChange={selectedList === this.homeValue ? this.handleChangeHome : this.handleChangeForeign}
handleKeyDown={selectedList === this.homeValue ? this.handleKeyDownHome : this.handleKeyDownForeign}
handleChange={
selectedList === this.homeValue ? this.handleChangeHome : this.handleChangeForeign
}
handleKeyDown={
selectedList === this.homeValue ? this.handleKeyDownHome : this.handleKeyDownForeign
}
onChangeList={this.onChangeList}
selected={selectedList}
homeName={homeStore.networkName}
homeValue={this.homeValue}
foreignName={foreignStore.networkName}
foreignValue={this.foreingValue} />
{selectedList === this.homeValue
&& home.map(event =>
foreignValue={this.foreingValue}
/>
{selectedList === this.homeValue &&
home.map(event => (
<Event
txUrl={homeStore.getExplorerTxUrl(event.transactionHash)}
accountUrl={homeStore.getExplorerAddressUrl(event.recipient)}
key={event.transactionHash + event.eventName}
{...event} />)}
{selectedList === this.foreingValue
&& foreign.map(event =>
{...event}
/>
))}
{selectedList === this.foreingValue &&
foreign.map(event => (
<Event
txUrl={foreignStore.getExplorerTxUrl(event.transactionHash)}
accountUrl={foreignStore.getExplorerAddressUrl(event.recipient)}
key={event.transactionHash + event.eventName}
{...event} />)}
{...event}
/>
))}
</div>
</div>
);
)
}
}

@ -1,24 +1,24 @@
import React from "react"
import { IconGithub, IconPOA, IconTelegram, IconTwitter } from "./social-icons"
import React from 'react'
import { IconGithub, IconPOA, IconTelegram, IconTwitter } from './social-icons'
export const SocialIcons = () => {
const socialItems = [
{
icon: <IconPOA />,
link: "https://poa.network",
link: 'https://poa.network'
},
{
icon: <IconTwitter />,
link: "https://twitter.com/poanetwork",
link: 'https://twitter.com/poanetwork'
},
{
icon: <IconTelegram />,
link: "https://t.me/poa_network",
link: 'https://t.me/poa_network'
},
{
icon: <IconGithub />,
link: "https://github.com/poanetwork/token-bridge",
},
link: 'https://github.com/poanetwork/token-bridge'
}
]
return (

@ -4,63 +4,75 @@ import { BRIDGE_MODES } from '../stores/utils/bridgeMode'
import { BridgeStatistics } from './index'
import { Redirect } from 'react-router'
import { TransactionsStatistics } from './TransactionsStatistics'
import { inject, observer } from "mobx-react"
import { FeeStatistics } from "./FeeStatistics"
import { inject, observer } from 'mobx-react'
import { FeeStatistics } from './FeeStatistics'
@inject("RootStore")
@inject('RootStore')
@observer
export class StatisticsPage extends React.Component {
render() {
const { homeStore, foreignStore, bridgeMode, web3Store } = this.props.RootStore
const isNativeToErc = bridgeMode === BRIDGE_MODES.NATIVE_TO_ERC
const leftTitle = isNativeToErc ? 'Deposits' : 'Withdraws'
const rightTitle = isNativeToErc ? 'Withdraws' : 'Deposits'
const { REACT_APP_HOME_WITHOUT_EVENTS: HOME, REACT_APP_FOREIGN_WITHOUT_EVENTS: FOREIGN } = process.env
const withoutEvents = web3Store.metamaskNet.id === web3Store.homeNet.id.toString() ? yn(HOME) : yn(FOREIGN)
const {
REACT_APP_HOME_WITHOUT_EVENTS: HOME,
REACT_APP_FOREIGN_WITHOUT_EVENTS: FOREIGN
} = process.env
const withoutEvents =
web3Store.metamaskNet.id === web3Store.homeNet.id.toString() ? yn(HOME) : yn(FOREIGN)
return withoutEvents ? ( <Redirect to="/" />) : (
return withoutEvents ? (
<Redirect to="/" />
) : (
<div className="statistics-page">
<div className='statistics-left-container' />
<div className='statistics-page-container'>
<div className='statistics-bridge-container'>
<span className='statistics-bridge-title statistics-title'>Bridge Statistics</span>
<div className="statistics-left-container" />
<div className="statistics-page-container">
<div className="statistics-bridge-container">
<span className="statistics-bridge-title statistics-title">Bridge Statistics</span>
<BridgeStatistics
users={homeStore.statistics.finished ? homeStore.statistics.users.size : ''}
totalBridged={homeStore.statistics.finished ? homeStore.statistics.totalBridged.toString() : ''}
totalBridged={
homeStore.statistics.finished ? homeStore.statistics.totalBridged.toString() : ''
}
homeBalance={homeStore.balance}
homeSymbol={homeStore.symbol}
homeNativeSupplyTitle={isNativeToErc}
foreignSymbol={foreignStore.symbol}
foreignSupply={foreignStore.totalSupply} />
foreignSupply={foreignStore.totalSupply}
/>
</div>
{
homeStore.depositFeeCollected.finished
&& homeStore.withdrawFeeCollected.finished
&& (homeStore.depositFeeCollected.shouldDisplay || homeStore.withdrawFeeCollected.shouldDisplay)
&& <FeeStatistics
{homeStore.depositFeeCollected.finished &&
homeStore.withdrawFeeCollected.finished &&
(homeStore.depositFeeCollected.shouldDisplay ||
homeStore.withdrawFeeCollected.shouldDisplay) && (
<FeeStatistics
depositFeeCollected={homeStore.depositFeeCollected}
withdrawFeeCollected={homeStore.withdrawFeeCollected}
/>
}
<div className='statistics-transaction-container'>
<div className='statistics-deposit-container'>
<span className='statistics-deposit-title statistics-title'>Tokens {leftTitle}</span>
)}
<div className="statistics-transaction-container">
<div className="statistics-deposit-container">
<span className="statistics-deposit-title statistics-title">Tokens {leftTitle}</span>
<TransactionsStatistics
txNumber={homeStore.statistics.finished ? homeStore.statistics.deposits : ''}
type={foreignStore.symbol}
value={homeStore.statistics.finished ? homeStore.statistics.depositsValue : ''} />
value={homeStore.statistics.finished ? homeStore.statistics.depositsValue : ''}
/>
</div>
<div className='statistics-withdraw-container'>
<span className='statistics-withdraw-title statistics-title'>Tokens {rightTitle}</span>
<div className="statistics-withdraw-container">
<span className="statistics-withdraw-title statistics-title">
Tokens {rightTitle}
</span>
<TransactionsStatistics
txNumber={homeStore.statistics.finished ? homeStore.statistics.withdraws : ''}
type={foreignStore.symbol}
value={homeStore.statistics.finished ? homeStore.statistics.withdrawsValue : ''} />
value={homeStore.statistics.finished ? homeStore.statistics.withdrawsValue : ''}
/>
</div>
</div>
</div>
<div className='pattern-background'>
<div className="pattern-background">
<div className="pattern-background-image" />
</div>
</div>

@ -2,50 +2,55 @@ import React from 'react'
import yn from './utils/yn'
import { Authority } from './Authority'
import { Configuration } from './Configuration'
import { inject, observer } from "mobx-react"
import { inject, observer } from 'mobx-react'
@inject("RootStore")
@inject('RootStore')
@observer
export class StatusPage extends React.Component {
render() {
const { homeStore, foreignStore, web3Store } = this.props.RootStore
const isHome = web3Store.metamaskNet.id.toString() === web3Store.homeNet.id.toString()
const requiredSignatures = isHome ? homeStore.requiredSignatures : foreignStore.requiredSignatures
const requiredSignatures = isHome
? homeStore.requiredSignatures
: foreignStore.requiredSignatures
const authorities = isHome ? homeStore.validatorsCount : foreignStore.validatorsCount
const symbol = isHome ? homeStore.symbol : foreignStore.symbol
const maxSingleDeposit = isHome ? homeStore.maxPerTx : foreignStore.maxPerTx
const maxTotalBalance = isHome ? homeStore.maxCurrentDeposit : foreignStore.maxCurrentDeposit
const validatorsList = isHome ? homeStore.validators : foreignStore.validators
const { REACT_APP_HOME_WITHOUT_EVENTS: HOME, REACT_APP_FOREIGN_WITHOUT_EVENTS: FOREIGN } = process.env
const withoutEvents = web3Store.metamaskNet.id === web3Store.homeNet.id.toString() ? yn(HOME) : yn(FOREIGN)
const {
REACT_APP_HOME_WITHOUT_EVENTS: HOME,
REACT_APP_FOREIGN_WITHOUT_EVENTS: FOREIGN
} = process.env
const withoutEvents =
web3Store.metamaskNet.id === web3Store.homeNet.id.toString() ? yn(HOME) : yn(FOREIGN)
return (
<div className="status-page">
<div className='status-left-container' />
<div className='status-page-container'>
<div className='status-configuration-container'>
<span className='status-configuration-title status-title'>Configuration</span>
<div className="status-left-container" />
<div className="status-page-container">
<div className="status-configuration-container">
<span className="status-configuration-title status-title">Configuration</span>
<Configuration
requiredSignatures={requiredSignatures}
authorities={authorities}
symbol={symbol}
maxSingleDeposit={maxSingleDeposit}
maxTotalBalance={maxTotalBalance} />
maxTotalBalance={maxTotalBalance}
/>
</div>
{withoutEvents ? null :
<div className='status-authorities-container'>
<span className='status-authorities-title status-title'>Authorities</span>
<div className='status-authorities-data'>
{withoutEvents ? null : (
<div className="status-authorities-container">
<span className="status-authorities-title status-title">Authorities</span>
<div className="status-authorities-data">
{validatorsList.map((validator, i) => (
<Authority key={validator} address={validator} number={(i+1)} logoIndex={(i) % 3} />
<Authority key={validator} address={validator} number={i + 1} logoIndex={i % 3} />
))}
</div>
</div>
}
)}
</div>
<div className='pattern-background'>
<div className="pattern-background">
<div className="pattern-background-image" />
</div>
</div>

@ -1,8 +1,8 @@
import React from 'react';
import swal from 'sweetalert';
import { inject, observer } from "mobx-react";
import React from 'react'
import swal from 'sweetalert'
import { inject, observer } from 'mobx-react'
@inject("RootStore")
@inject('RootStore')
@observer
export class SweetAlert extends React.Component {
componentWillReact() {
@ -25,8 +25,6 @@ export class SweetAlert extends React.Component {
render() {
this.logErrors()
return (
<div style={{display: 'none'}} />
)
return <div style={{ display: 'none' }} />
}
}

@ -4,11 +4,7 @@ import { DataBlock } from './DataBlock'
export const TransactionsStatistics = ({ txNumber, value, type }) => (
<div className="statistics-bridge-data">
<DataBlock
description="Transactions"
value={numeral(txNumber).format('0,0 a')}
type=''
/>
<DataBlock description="Transactions" value={numeral(txNumber).format('0,0 a')} type="" />
<div className="separator" />
<DataBlock
description="Total Value"

@ -15,7 +15,6 @@ export const TransferAlert = ({
fee,
reverse
}) => {
const formattedFromAmount = numeral(fromAmount).format('0,0[.][000000000000000000]', Math.floor)
const formattedToAmount = numeral(toAmount).format('0,0[.][000000000000000000]', Math.floor)
@ -29,9 +28,13 @@ export const TransferAlert = ({
<div className="alert-logo-box">
<div className={reverse ? 'foreign-logo' : 'home-logo'} />
</div>
<div><strong>{formattedFromAmount}</strong> {fromCurrency}</div>
<div>
<strong>{formattedFromAmount}</strong> {fromCurrency}
</div>
<ArrowRight />
<div><strong>{formattedToAmount}</strong> {toCurrency}</div>
<div>
<strong>{formattedToAmount}</strong> {toCurrency}
</div>
<div className="alert-logo-box">
<div className={reverse ? 'home-logo' : 'foreign-logo'} />
</div>
@ -39,11 +42,17 @@ export const TransferAlert = ({
<p className="transfer-description" data-testid="transfer-description">
<strong>{fee && `Fee: ${fee.toString()}%`}</strong>
<br />
Please confirm that you would like to send <strong>{formattedFromAmount}</strong> {fromCurrency} from {from} to receive <strong>{formattedToAmount}</strong> {toCurrency} on {to}.
Please confirm that you would like to send <strong>{formattedFromAmount}</strong>{' '}
{fromCurrency} from {from} to receive <strong>{formattedToAmount}</strong> {toCurrency} on{' '}
{to}.
</p>
<div className="transfer-buttons">
<button className="transfer-confirm" onClick={onConfirmation}>Continue</button>
<button className="transfer-cancel" onClick={onCancel}>Cancel</button>
<button className="transfer-confirm" onClick={onConfirmation}>
Continue
</button>
<button className="transfer-cancel" onClick={onCancel}>
Cancel
</button>
</div>
</div>
</div>

@ -1,29 +1,36 @@
import React from 'react';
import { inject, observer } from "mobx-react";
import React from 'react'
import { inject, observer } from 'mobx-react'
import { WalletIcon } from './menu-icons/WalletIcon'
@inject("RootStore")
@inject('RootStore')
@observer
export class Wallet extends React.Component {
render() {
const { web3Store, homeStore, foreignStore, alertStore } = this.props.RootStore
const isHome = web3Store.metamaskNet.id.toString() === web3Store.homeNet.id.toString()
const address = web3Store.defaultAccount.address
const explorerAddressUrl = isHome ? homeStore.getExplorerAddressUrl(address) : foreignStore.getExplorerAddressUrl(address)
const completed = isHome ? homeStore.getDailyQuotaCompleted() : foreignStore.getDailyQuotaCompleted()
const explorerAddressUrl = isHome
? homeStore.getExplorerAddressUrl(address)
: foreignStore.getExplorerAddressUrl(address)
const completed = isHome
? homeStore.getDailyQuotaCompleted()
: foreignStore.getDailyQuotaCompleted()
const width = `${completed}%`
const wallet = web3Store.defaultAccount.address !== '' && web3Store.defaultAccount.address !== undefined
? (<a
href={explorerAddressUrl}
target="_blank"
className="wallet-text wallet-link">
const wallet =
web3Store.defaultAccount.address !== '' && web3Store.defaultAccount.address !== undefined ? (
<a href={explorerAddressUrl} target="_blank" className="wallet-text wallet-link">
{web3Store.defaultAccount.address.slice(0, 17).concat('...')}
</a>)
: (<span className="wallet-text">Login with <span className="wallet-text-metamask">wallet</span></span>)
</a>
) : (
<span className="wallet-text">
Login with <span className="wallet-text-metamask">wallet</span>
</span>
)
return (
<div className="header-wallet"
<div
className="header-wallet"
onMouseEnter={() => alertStore.setShowDailyQuotaInfo(true)}
onMouseLeave={() => alertStore.setShowDailyQuotaInfo(false)}
>

@ -26,7 +26,8 @@ describe('FeeStatistics', () => {
<FeeStatistics
depositFeeCollected={depositFeeCollected}
withdrawFeeCollected={withdrawFeeCollected}
/>)
/>
)
// Then
const container = queryByTestId('fee-statistics')
@ -63,7 +64,8 @@ describe('FeeStatistics', () => {
<FeeStatistics
depositFeeCollected={depositFeeCollected}
withdrawFeeCollected={withdrawFeeCollected}
/>)
/>
)
// Then
const container = queryByTestId('fee-statistics')
@ -97,7 +99,8 @@ describe('FeeStatistics', () => {
<FeeStatistics
depositFeeCollected={depositFeeCollected}
withdrawFeeCollected={withdrawFeeCollected}
/>)
/>
)
// Then
const container = queryByTestId('fee-statistics')
@ -131,7 +134,8 @@ describe('FeeStatistics', () => {
<FeeStatistics
depositFeeCollected={depositFeeCollected}
withdrawFeeCollected={withdrawFeeCollected}
/>)
/>
)
// Then
const container = queryByTestId('fee-statistics')

@ -6,19 +6,19 @@ import 'jest-dom/extend-expect'
afterEach(cleanup)
const baseData = {
address: "0xCecBE80Ed3548dE11D7d2D922a36576eA40C4c26",
balance: "99.99",
currency: "TEST",
address: '0xCecBE80Ed3548dE11D7d2D922a36576eA40C4c26',
balance: '99.99',
currency: 'TEST',
displayTokenAddress: true,
getExplorerAddressUrl: () => {},
isHome: false,
maxCurrentLimit: "20000",
maxPerTx: "2000",
minPerTx: "0.01",
tokenAddress: "0xb69d9C58C258080eABF499270c778bBDE38dd6Ac",
tokenName: "TEST",
totalSupply: "100",
url: "https://ropsten.infura.io"
maxCurrentLimit: '20000',
maxPerTx: '2000',
minPerTx: '0.01',
tokenAddress: '0xb69d9C58C258080eABF499270c778bBDE38dd6Ac',
tokenName: 'TEST',
totalSupply: '100',
url: 'https://ropsten.infura.io'
}
describe('NetworkDetails', () => {

@ -4,15 +4,28 @@ import numeral from 'numeral'
import { CopyIcon } from '../icons/CopyIcon'
import { CopyToClipboard } from 'react-copy-to-clipboard'
export const Event = ({ color, eventName, transactionHash, recipient, value, blockNumber, txUrl, accountUrl }) => (
export const Event = ({
color,
eventName,
transactionHash,
recipient,
value,
blockNumber,
txUrl,
accountUrl
}) => (
<div>
<div className="event">
<div className="event-tx-container txhash-column">
<span className={`event-name background-${color}`}>{eventName}</span>
<span>
<a href={txUrl} target="_blank" className="event-txhash">{transactionHash.slice(0,18).concat('...')}</a>
<a href={txUrl} target="_blank" className="event-txhash">
{transactionHash.slice(0, 18).concat('...')}
</a>
<CopyToClipboard text={transactionHash}>
<span className="copy-icon copy-icon-right"><CopyIcon /></span>
<span className="copy-icon copy-icon-right">
<CopyIcon />
</span>
</CopyToClipboard>
</span>
</div>
@ -24,9 +37,11 @@ export const Event = ({ color, eventName, transactionHash, recipient, value, blo
{recipient ? <strong className="only-mobile">Value</strong> : ''}
{value ? numeral(fromWei(value)).format('0,0.00', Math.floor) : ''}
</span>
<span className="event-block block-column"><strong className="only-mobile">Block</strong>{blockNumber}</span>
<span className="event-block block-column">
<strong className="only-mobile">Block</strong>
{blockNumber}
</span>
</div>
<div className="event-separator" />
</div>
)

@ -1,13 +1,11 @@
import React from 'react';
import React from 'react'
export const EventHeader = ({ color, eventName, transactionHash, handleClick }) => (
<div className="events-i-header">
<div className="events-i-header-title">
<p className={`label ${color}`}>{eventName}</p>
</div>
<p className="description break-all">
tx: {transactionHash}
</p>
<p className="description break-all">tx: {transactionHash}</p>
<div onClick={handleClick} className="events-i-switcher" />
</div>
)

@ -1,4 +1,4 @@
import React from "react";
import React from 'react'
export const ArrowRight = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10">
@ -7,4 +7,4 @@ export const ArrowRight = () => (
d="M14 5c0 .01-.005.017-.005.027a.956.956 0 0 1-.28.688c-.063.063-.139.099-.213.14l-3.86 3.86a.959.959 0 1 1-1.357-1.357L10.642 6H1a1 1 0 0 1 0-2h9.642L8.285 1.642A.959.959 0 1 1 9.642.285l3.856 3.856c.076.042.153.08.217.144a.956.956 0 0 1 .279.692c0 .009.006.015.006.023z"
/>
</svg>
);
)

@ -1,7 +1,10 @@
import React from "react"
import React from 'react'
export const CopyIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
<path fillRule="evenodd" d="M13 10a1 1 0 0 1-1-1V2H5a1 1 0 0 1 0-2h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm-3-5v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zM8 6H2v6h6V6z"/>
<path
fillRule="evenodd"
d="M13 10a1 1 0 0 1-1-1V2H5a1 1 0 0 1 0-2h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm-3-5v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zM8 6H2v6h6V6z"
/>
</svg>
)

@ -1,7 +1,10 @@
import React from "react"
import React from 'react'
export const InfoIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<path fillRule="evenodd" d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-22C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 16a1 1 0 0 1-1-1v-6a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1zm0-10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
<path
fillRule="evenodd"
d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-22C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 16a1 1 0 0 1-1-1v-6a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1zm0-10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
/>
</svg>
)

@ -1,9 +1,9 @@
export { Header } from './Header';
export { Bridge } from './Bridge';
export { RelayEvents } from './RelayEvents';
export { Footer } from './Footer';
export { SweetAlert } from './SweetAlert';
export { Loading } from './Loading';
export { Header } from './Header'
export { Bridge } from './Bridge'
export { RelayEvents } from './RelayEvents'
export { Footer } from './Footer'
export { SweetAlert } from './SweetAlert'
export { Loading } from './Loading'
export { Fade } from './Fade'
export { BridgeForm } from './BridgeForm'
export { BridgeNetwork } from './BridgeNetwork'

@ -1,4 +1,4 @@
import React from "react"
import React from 'react'
export const EventsIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17">

@ -1,7 +1,10 @@
import React from "react"
import React from 'react'
export const MobileMenuCloseIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
<path fillRule="evenodd" d="M17.691 1.719l-3 3-4.265 4.265.019.02 4.245 4.245 3 3a1.019 1.019 0 1 1-1.441 1.441l-3-3-4.265-4.264L4.72 14.69l-3 3a1.02 1.02 0 0 1-1.442-1.441l3-3 4.265-4.265-.02-.019-4.245-4.246-3-3A1.019 1.019 0 1 1 1.719.278l3 3 4.265 4.265 4.266-4.265 3-3a1.019 1.019 0 1 1 1.441 1.441z"/>
<path
fillRule="evenodd"
d="M17.691 1.719l-3 3-4.265 4.265.019.02 4.245 4.245 3 3a1.019 1.019 0 1 1-1.441 1.441l-3-3-4.265-4.264L4.72 14.69l-3 3a1.02 1.02 0 0 1-1.442-1.441l3-3 4.265-4.265-.02-.019-4.245-4.246-3-3A1.019 1.019 0 1 1 1.719.278l3 3 4.265 4.265 4.266-4.265 3-3a1.019 1.019 0 1 1 1.441 1.441z"
/>
</svg>
)

@ -1,7 +1,10 @@
import React from "react"
import React from 'react'
export const MobileMenuIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14">
<path fillRule="evenodd" d="M17 8H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zM1 12h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/>
<path
fillRule="evenodd"
d="M17 8H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zM1 12h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"
/>
</svg>
)

@ -1,4 +1,4 @@
import React from "react"
import React from 'react'
export const StatisticsIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">

@ -1,4 +1,4 @@
import React from "react"
import React from 'react'
export const StatusIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">

@ -1,7 +1,10 @@
import React from "react"
import React from 'react'
export const WalletIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
<path fillRule="evenodd" d="M17 18H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3h3a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1zM12 2H2v2h10V2zm4 4H2v10h14V6zm-3 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
<path
fillRule="evenodd"
d="M17 18H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3h3a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1zM12 2H2v2h10V2zm4 4H2v10h14V6zm-3 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
/>
</svg>
)

@ -1,5 +1,5 @@
export * from './EventsIcon';
export * from './MobileMenuCloseIcon';
export * from './MobileMenuIcon';
export * from './StatisticsIcon';
export * from './StatusIcon';
export * from './EventsIcon'
export * from './MobileMenuCloseIcon'
export * from './MobileMenuIcon'
export * from './StatisticsIcon'
export * from './StatusIcon'

@ -2,10 +2,7 @@ import React from 'react'
export const IconGithub = () => {
return (
<svg
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
d="M14.928 4.084a8.067 8.067 0 0 0-2.912-2.985A7.673 7.673 0 0 0 8-.001a7.67 7.67 0 0 0-4.016 1.1 8.06 8.06 0 0 0-2.912 2.985C.356 5.34-.001 6.712-.001 8.201c0 1.787.508 3.394 1.526 4.821 1.017 1.428 2.332 2.416 3.943 2.964.188.035.327.01.417-.075a.422.422 0 0 0 .135-.32l-.005-.577c-.003-.363-.005-.68-.005-.95l-.24.042a2.985 2.985 0 0 1-.578.038 4.418 4.418 0 0 1-.724-.075 1.6 1.6 0 0 1-.698-.32 1.359 1.359 0 0 1-.458-.657l-.105-.246a2.64 2.64 0 0 0-.328-.544c-.149-.2-.3-.335-.453-.406l-.073-.053a.78.78 0 0 1-.135-.129.572.572 0 0 1-.094-.15c-.021-.049-.004-.09.052-.122.056-.032.156-.048.302-.048l.209.032c.138.028.31.113.515.256.205.142.374.328.506.555.159.292.352.515.578.668.225.153.453.229.682.229.229 0 .427-.017.594-.053.167-.036.323-.089.469-.16.062-.477.232-.844.51-1.1a6.938 6.938 0 0 1-1.068-.193 4.188 4.188 0 0 1-.979-.416 2.828 2.828 0 0 1-.839-.716c-.222-.284-.404-.658-.547-1.121-.142-.463-.213-.997-.213-1.602 0-.862.274-1.595.823-2.2-.257-.648-.233-1.374.073-2.179.201-.064.5-.016.896.144.396.161.686.298.87.412.184.113.332.21.443.288a7.225 7.225 0 0 1 2-.278c.687 0 1.354.093 2.001.278l.395-.256a5.53 5.53 0 0 1 .959-.47c.368-.142.649-.182.844-.117.312.804.34 1.53.083 2.178.549.605.823 1.338.823 2.2 0 .605-.071 1.141-.213 1.607-.143.467-.327.84-.553 1.122a2.926 2.926 0 0 1-.843.71 4.194 4.194 0 0 1-.98.416c-.316.086-.672.15-1.068.193.362.32.542.826.542 1.516v2.253c0 .129.044.235.13.321.087.085.224.11.412.074 1.611-.548 2.926-1.536 3.943-2.963 1.018-1.427 1.526-3.035 1.526-4.822 0-1.488-.358-2.86-1.073-4.116z"

@ -2,10 +2,7 @@ import React from 'react'
export const IconPOA = () => {
return (
<svg
viewBox="0 0 125 40"
xmlns="http://www.w3.org/2000/svg"
>
<svg viewBox="0 0 125 40" xmlns="http://www.w3.org/2000/svg">
<g fillRule="evenodd">
<path d="M61.4 0C50.482 0 41.6 8.883 41.6 19.8c0 10.918 8.882 19.8 19.8 19.8 10.918 0 19.8-8.882 19.8-19.8C81.2 8.883 72.318 0 61.4 0M21.206 31.718h2.505c8.06 0 14.949-6.26 15.24-14.323C39.254 8.95 32.476 1.98 24.103 1.98H3.127C2.504 1.98 2 2.485 2 3.108v34.044c0 .622.504 1.128 1.127 1.128H18.88c.615 0 1.117-.494 1.127-1.11l.073-4.343a1.127 1.127 0 0 1 1.126-1.109M98.002 1.271l-21.295 34.65c-.388.745.16 1.629 1.014 1.632l17.47.067 25.129-.067c.852-.003 1.401-.887 1.013-1.632l-21.294-34.65c-.425-.815-1.612-.815-2.037 0" />
</g>

@ -2,10 +2,7 @@ import React from 'react'
export const IconTelegram = () => {
return (
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
clipRule="evenodd"
d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"

@ -2,10 +2,7 @@ import React from 'react'
export const IconTwitter = () => {
return (
<svg
viewBox="0 0 16 12"
xmlns="http://www.w3.org/2000/svg"
>
<svg viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.086.222a6.236 6.236 0 0 1-1.955.735A3.089 3.089 0 0 0 10.885 0c-1.7 0-3.077 1.357-3.077 3.03 0 .237.027.469.079.69A8.781 8.781 0 0 1 1.545.554a2.974 2.974 0 0 0-.416 1.523c0 1.052.544 1.979 1.368 2.522a3.117 3.117 0 0 1-1.393-.381v.038c0 1.468 1.061 2.692 2.468 2.972a3.18 3.18 0 0 1-1.39.051 3.074 3.074 0 0 0 2.874 2.105 6.24 6.24 0 0 1-3.822 1.296c-.248 0-.493-.014-.734-.041A8.814 8.814 0 0 0 5.217 12c5.66 0 8.755-4.617 8.755-8.621l-.01-.393A6.153 6.153 0 0 0 15.5 1.42a6.246 6.246 0 0 1-1.767.477A3.048 3.048 0 0 0 15.086.222z"
fillRule="evenodd"

@ -1,4 +1,4 @@
export * from './IconGithub';
export * from './IconPOA';
export * from './IconTelegram';
export * from './IconTwitter';
export * from './IconGithub'
export * from './IconPOA'
export * from './IconTelegram'
export * from './IconTwitter'

@ -4,6 +4,6 @@ export const setItem = (key, data) => {
localStorage.setItem(key, data)
}
export const getItem = (key) => {
export const getItem = key => {
return localStorage.getItem(key)
}

@ -1,15 +1,15 @@
const yn = input => {
input = String(input).trim();
input = String(input).trim()
if (/^(?:y|yes|true|1)$/i.test(input)) {
return true;
return true
}
if (/^(?:n|no|false|0)$/i.test(input)) {
return false;
return false
}
return false;
};
return false
}
export default yn

@ -1,14 +1,15 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
import React from 'react'
import ReactDOM from 'react-dom'
import { App } from './App'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from "mobx-react";
import RootStore from './stores/RootStore';
import { Provider } from 'mobx-react'
import RootStore from './stores/RootStore'
ReactDOM.render((
ReactDOM.render(
<Provider RootStore={RootStore}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
), document.getElementById('root'));
</Provider>,
document.getElementById('root')
)

@ -1,9 +1,9 @@
import { action, observable } from "mobx";
import { action, observable } from 'mobx'
class AlertStore {
@observable alerts = [];
@observable showLoading = false;
@observable loadingStepIndex = -1;
@observable alerts = []
@observable showLoading = false
@observable loadingStepIndex = -1
@observable blockConfirmations = 0
@observable showDailyQuotaInfo = false
homeConnectionErrorSended = false
@ -14,7 +14,7 @@ class AlertStore {
'Waiting for Block Confirmations...',
'Validators Verifying Transaction...',
'Transfer Complete'
];
]
HOME_CONNECTION_ERROR = 'Home Connection Error'
FOREIGN_CONNECTION_ERROR = 'Foreign Connection Error'
HOME_TRANSFER_SUCCESS = 'Home Transfer Success'
@ -22,15 +22,15 @@ class AlertStore {
@action
pushError(message, messageType) {
console.error("Error: ", message)
console.error('Error: ', message)
const shouldPushError = this.checkErrorPush(messageType, messageType)
if (shouldPushError) {
const node = document.createElement("div")
const node = document.createElement('div')
node.innerHTML = message
const error = {
title: "Error",
title: 'Error',
content: node,
icon: "error",
icon: 'error',
messageType
}
this.alerts.push(error)
@ -55,31 +55,30 @@ class AlertStore {
} else {
return true
}
}
@action
pushSuccess(message, messageType) {
const node = document.createElement("div")
const node = document.createElement('div')
node.innerHTML = message
const success = {
title: "Success",
title: 'Success',
content: node,
icon: "success",
icon: 'success',
messageType
}
this.alerts.push(success)
}
remove(value) {
const result = this.alerts.remove(value);
const result = this.alerts.remove(value)
console.log(result, value, this.alerts)
}
@action
setLoading(status) {
this.showLoading = status;
this.loadingStepIndex = 0;
this.showLoading = status
this.loadingStepIndex = 0
this.blockConfirmations = 0
}
@ -90,10 +89,12 @@ class AlertStore {
@action
setLoadingStepIndex(index) {
this.loadingStepIndex = index;
this.loadingStepIndex = index
console.log(this.loadingSteps[index])
if (index === this.loadingSteps.length - 1) {
setTimeout(() => { this.setLoading(false)}, 2000)
setTimeout(() => {
this.setLoading(false)
}, 2000)
}
}
@ -105,7 +106,6 @@ class AlertStore {
setShowDailyQuotaInfo(value) {
this.showDailyQuotaInfo = value
}
}
export default AlertStore;
export default AlertStore

@ -1,5 +1,5 @@
import { action, observable } from 'mobx';
import { abi as ERC677_ABI } from '../contracts/ERC677BridgeToken.json';
import { action, observable } from 'mobx'
import { abi as ERC677_ABI } from '../contracts/ERC677BridgeToken.json'
import { getBlockNumber } from './utils/web3'
import {
getMaxPerTxLimit,
@ -23,53 +23,59 @@ import {
} from './utils/contract'
import { balanceLoaded, removePendingTransaction } from './utils/testUtils'
import sleep from './utils/sleep'
import { getBridgeABIs, getUnit, BRIDGE_MODES, decodeFeeManagerMode, FEE_MANAGER_MODE } from './utils/bridgeMode'
import {
getBridgeABIs,
getUnit,
BRIDGE_MODES,
decodeFeeManagerMode,
FEE_MANAGER_MODE
} from './utils/bridgeMode'
import { abi as BRIDGE_VALIDATORS_ABI } from '../contracts/BridgeValidators'
import ERC20Bytes32Abi from './utils/ERC20Bytes32.abi'
import BN from 'bignumber.js'
import { processLargeArrayAsync } from "./utils/array"
import { fromDecimals } from "./utils/decimals"
import { processLargeArrayAsync } from './utils/array'
import { fromDecimals } from './utils/decimals'
class ForeignStore {
@observable state = null;
@observable loading = true;
@observable events = [];
@observable totalSupply = '';
@observable symbol = 'NOSYM';
@observable tokenName = '';
@observable balance = '';
@observable filter = false;
@observable maxCurrentDeposit = '';
@observable maxPerTx = '';
@observable minPerTx = '';
@observable latestBlockNumber = 0;
@observable state = null
@observable loading = true
@observable events = []
@observable totalSupply = ''
@observable symbol = 'NOSYM'
@observable tokenName = ''
@observable balance = ''
@observable filter = false
@observable maxCurrentDeposit = ''
@observable maxPerTx = ''
@observable minPerTx = ''
@observable latestBlockNumber = 0
@observable validators = []
@observable validatorsCount = 0
@observable foreignBridgeValidators = ''
@observable requiredSignatures = 0
@observable dailyLimit = 0
@observable totalSpentPerDay = 0
@observable tokenAddress = '';
@observable tokenAddress = ''
@observable feeEventsFinished = false
@observable tokenType = ''
feeManager = {
totalFeeDistributedFromSignatures: BN(0),
totalFeeDistributedFromAffirmation: BN(0)
};
}
networkName = process.env.REACT_APP_FOREIGN_NETWORK_NAME || 'Unknown'
filteredBlockNumber = 0;
foreignBridge = {};
filteredBlockNumber = 0
foreignBridge = {}
tokenContract = {}
tokenDecimals = 18;
FOREIGN_BRIDGE_ADDRESS = process.env.REACT_APP_FOREIGN_BRIDGE_ADDRESS;
tokenDecimals = 18
FOREIGN_BRIDGE_ADDRESS = process.env.REACT_APP_FOREIGN_BRIDGE_ADDRESS
explorerTxTemplate = process.env.REACT_APP_FOREIGN_EXPLORER_TX_TEMPLATE || ''
explorerAddressTemplate = process.env.REACT_APP_FOREIGN_EXPLORER_ADDRESS_TEMPLATE || ''
constructor(rootStore) {
this.web3Store = rootStore.web3Store;
this.web3Store = rootStore.web3Store
this.foreignWeb3 = rootStore.web3Store.foreignWeb3
this.alertStore = rootStore.alertStore
this.homeStore = rootStore.homeStore;
this.homeStore = rootStore.homeStore
this.rootStore = rootStore
this.waitingForConfirmation = new Set()
this.setForeign()
@ -81,7 +87,7 @@ class ForeignStore {
return
}
const { FOREIGN_ABI } = getBridgeABIs(this.rootStore.bridgeMode)
this.foreignBridge = new this.foreignWeb3.eth.Contract(FOREIGN_ABI, this.FOREIGN_BRIDGE_ADDRESS);
this.foreignBridge = new this.foreignWeb3.eth.Contract(FOREIGN_ABI, this.FOREIGN_BRIDGE_ADDRESS)
await this.getBlockNumber()
await this.getTokenInfo()
this.getMinPerTxLimit()
@ -130,25 +136,33 @@ class ForeignStore {
@action
async getTokenInfo() {
try {
this.tokenAddress = this.rootStore.bridgeMode === BRIDGE_MODES.ERC_TO_ERC || this.rootStore.bridgeMode === BRIDGE_MODES.ERC_TO_NATIVE
this.tokenAddress =
this.rootStore.bridgeMode === BRIDGE_MODES.ERC_TO_ERC ||
this.rootStore.bridgeMode === BRIDGE_MODES.ERC_TO_NATIVE
? await getErc20TokenAddress(this.foreignBridge)
: await getErc677TokenAddress(this.foreignBridge)
this.tokenContract = new this.foreignWeb3.eth.Contract(ERC677_ABI, this.tokenAddress);
this.tokenContract = new this.foreignWeb3.eth.Contract(ERC677_ABI, this.tokenAddress)
this.tokenType = await getTokenType(this.tokenContract, this.FOREIGN_BRIDGE_ADDRESS)
const alternativeContract = new this.foreignWeb3.eth.Contract(ERC20Bytes32Abi, this.tokenAddress);
const alternativeContract = new this.foreignWeb3.eth.Contract(
ERC20Bytes32Abi,
this.tokenAddress
)
try {
this.symbol = await getSymbol(this.tokenContract)
} catch (e) {
this.symbol = this.foreignWeb3.utils.hexToAscii(await getSymbol(alternativeContract)).replace(/\u0000*$/, '')
this.symbol = this.foreignWeb3.utils
.hexToAscii(await getSymbol(alternativeContract))
.replace(/\u0000*$/, '')
}
try {
this.tokenName = await getName(this.tokenContract)
} catch (e) {
this.tokenName = this.foreignWeb3.utils.hexToAscii(await getName(alternativeContract)).replace(/\u0000*$/, '')
this.tokenName = this.foreignWeb3.utils
.hexToAscii(await getName(alternativeContract))
.replace(/\u0000*$/, '')
}
this.tokenDecimals = await getDecimals(this.tokenContract)
} catch (e) {
console.error(e)
}
@ -175,49 +189,60 @@ class ForeignStore {
this.feeManager.feeManagerMode = decodeFeeManagerMode(feeManagerModeHash)
if (this.feeManager.feeManagerMode === FEE_MANAGER_MODE.ONE_DIRECTION) {
this.feeManager.foreignFee = new BN(0);
this.feeManager.foreignFee = new BN(0)
this.feeManager.homeFee = await getHomeFee(this.foreignBridge)
}
} else {
this.feeManager.feeManagerMode = FEE_MANAGER_MODE.UNDEFINED
this.feeManager.homeFee = new BN(0);
this.feeManager.foreignFee = new BN(0);
this.feeManager.homeFee = new BN(0)
this.feeManager.foreignFee = new BN(0)
}
}
@action
async getEvents(fromBlock, toBlock) {
try {
fromBlock = fromBlock || this.filteredBlockNumber || this.latestBlockNumber - 50
toBlock = toBlock || this.filteredBlockNumber || "latest"
toBlock = toBlock || this.filteredBlockNumber || 'latest'
if (fromBlock < 0) {
fromBlock = 0
}
let foreignEvents = await getPastEvents(this.foreignBridge, fromBlock, toBlock).catch(e => {
console.error('Couldn\'t get events', e)
console.error("Couldn't get events", e)
return []
})
if (!this.filter) {
this.events = foreignEvents;
this.events = foreignEvents
}
if (this.waitingForConfirmation.size) {
const confirmationEvents = foreignEvents.filter((event) => event.event === "RelayedMessage" && this.waitingForConfirmation.has(event.returnValues.transactionHash))
const confirmationEvents = foreignEvents.filter(
event =>
event.event === 'RelayedMessage' &&
this.waitingForConfirmation.has(event.returnValues.transactionHash)
)
confirmationEvents.forEach(async event => {
const TxReceipt = await this.getTxReceipt(event.transactionHash)
if(TxReceipt && TxReceipt.logs && TxReceipt.logs.length > 1 && this.waitingForConfirmation.size) {
if (
TxReceipt &&
TxReceipt.logs &&
TxReceipt.logs.length > 1 &&
this.waitingForConfirmation.size
) {
this.alertStore.setLoadingStepIndex(3)
const urlExplorer = this.getExplorerTxUrl(event.transactionHash)
const unitReceived = getUnit(this.rootStore.bridgeMode).unitForeign
setTimeout(() => {
this.alertStore.pushSuccess(`${unitReceived} received on ${this.networkName} on Tx
this.alertStore.pushSuccess(
`${unitReceived} received on ${this.networkName} on Tx
<a href='${urlExplorer}' target='blank' style="overflow-wrap: break-word;word-wrap: break-word;">
${event.transactionHash}</a>`, this.alertStore.FOREIGN_TRANSFER_SUCCESS)}
, 2000)
${event.transactionHash}</a>`,
this.alertStore.FOREIGN_TRANSFER_SUCCESS
)
}, 2000)
this.waitingForConfirmation.delete(event.returnValues.transactionHash)
}
})
@ -229,8 +254,11 @@ class ForeignStore {
return foreignEvents
} catch (e) {
this.alertStore.pushError(`Cannot establish connection to Foreign Network.\n
Please make sure you have set it up in env variables`, this.alertStore.FOREIGN_CONNECTION_ERROR)
this.alertStore.pushError(
`Cannot establish connection to Foreign Network.\n
Please make sure you have set it up in env variables`,
this.alertStore.FOREIGN_CONNECTION_ERROR
)
}
}
@ -263,8 +291,10 @@ class ForeignStore {
const txReceipt = await this.getTxReceipt(transactionHash)
const from = txReceipt.blockNumber - 20
const to = txReceipt.blockNumber + 20
const events = await this.getEvents(from, to);
this.events = events.filter((event) => event.transactionHash === transactionHash || event.signedTxHash === transactionHash)
const events = await this.getEvents(from, to)
this.events = events.filter(
event => event.transactionHash === transactionHash || event.signedTxHash === transactionHash
)
} catch (e) {
this.events = []
}
@ -276,7 +306,6 @@ class ForeignStore {
this.events = await this.getEvents()
}
@action
setFilter(value) {
this.filter = value
@ -293,7 +322,7 @@ class ForeignStore {
}
getDailyQuotaCompleted() {
return this.dailyLimit ? this.totalSpentPerDay / this.dailyLimit * 100 : 0
return this.dailyLimit ? (this.totalSpentPerDay / this.dailyLimit) * 100 : 0
}
async waitUntilProcessed(txHash) {
@ -320,9 +349,14 @@ class ForeignStore {
async getValidators() {
try {
const foreignValidatorsAddress = await this.foreignBridge.methods.validatorContract().call()
this.foreignBridgeValidators = new this.foreignWeb3.eth.Contract(BRIDGE_VALIDATORS_ABI, foreignValidatorsAddress);
this.foreignBridgeValidators = new this.foreignWeb3.eth.Contract(
BRIDGE_VALIDATORS_ABI,
foreignValidatorsAddress
)
this.requiredSignatures = await this.foreignBridgeValidators.methods.requiredSignatures().call()
this.requiredSignatures = await this.foreignBridgeValidators.methods
.requiredSignatures()
.call()
this.validatorsCount = await this.foreignBridgeValidators.methods.validatorCount().call()
this.validators = await getValidatorList(foreignValidatorsAddress, this.foreignWeb3.eth)
@ -333,13 +367,10 @@ class ForeignStore {
async getFeeEvents() {
try {
const deployedAtBlock = await getDeployedAtBlock(this.foreignBridge);
const deployedAtBlock = await getDeployedAtBlock(this.foreignBridge)
const events = await getPastEvents(this.foreignBridge, deployedAtBlock, 'latest')
processLargeArrayAsync(
events,
this.processEvent,
() => {
processLargeArrayAsync(events, this.processEvent, () => {
this.feeEventsFinished = true
})
} catch (e) {
@ -348,13 +379,17 @@ class ForeignStore {
}
}
processEvent = (event) => {
if (event.event === "FeeDistributedFromSignatures") {
this.feeManager.totalFeeDistributedFromSignatures = this.feeManager.totalFeeDistributedFromSignatures.plus(BN(fromDecimals(event.returnValues.feeAmount, this.tokenDecimals)))
} else if (event.event === "FeeDistributedFromAffirmation") {
this.feeManager.totalFeeDistributedFromAffirmation = this.feeManager.totalFeeDistributedFromAffirmation.plus(BN(fromDecimals(event.returnValues.feeAmount, this.tokenDecimals)))
processEvent = event => {
if (event.event === 'FeeDistributedFromSignatures') {
this.feeManager.totalFeeDistributedFromSignatures = this.feeManager.totalFeeDistributedFromSignatures.plus(
BN(fromDecimals(event.returnValues.feeAmount, this.tokenDecimals))
)
} else if (event.event === 'FeeDistributedFromAffirmation') {
this.feeManager.totalFeeDistributedFromAffirmation = this.feeManager.totalFeeDistributedFromAffirmation.plus(
BN(fromDecimals(event.returnValues.feeAmount, this.tokenDecimals))
)
}
}
}
export default ForeignStore;
export default ForeignStore

@ -1,5 +1,5 @@
import { observable, computed } from "mobx";
import { toHex } from 'web3-utils';
import { observable, computed } from 'mobx'
import { toHex } from 'web3-utils'
import { fetchGasPrice, fetchGasPriceFromOracle } from './utils/gas'
const HOME_GAS_PRICE_FALLBACK = process.env.REACT_APP_HOME_GAS_PRICE_FALLBACK
@ -58,4 +58,4 @@ class GasPriceStore {
}
}
export default GasPriceStore;
export default GasPriceStore

@ -1,4 +1,4 @@
import { action, observable } from 'mobx';
import { action, observable } from 'mobx'
import { abi as BRIDGE_VALIDATORS_ABI } from '../contracts/BridgeValidators.json'
import { abi as ERC677_ABI } from '../contracts/ERC677BridgeToken.json'
import { abi as BLOCK_REWARD_ABI } from '../contracts/IBlockReward'
@ -29,10 +29,16 @@ import {
import { balanceLoaded, removePendingTransaction } from './utils/testUtils'
import sleep from './utils/sleep'
import BN from 'bignumber.js'
import { getBridgeABIs, getUnit, BRIDGE_MODES, decodeFeeManagerMode, FEE_MANAGER_MODE } from './utils/bridgeMode'
import {
getBridgeABIs,
getUnit,
BRIDGE_MODES,
decodeFeeManagerMode,
FEE_MANAGER_MODE
} from './utils/bridgeMode'
import ERC20Bytes32Abi from './utils/ERC20Bytes32.abi'
import { processLargeArrayAsync } from './utils/array'
import { getRewardableData } from "./utils/rewardable"
import { getRewardableData } from './utils/rewardable'
import HomeBridgeV1Abi from './utils/HomeBridgeV1.abi'
async function asyncForEach(array, callback) {
@ -42,24 +48,24 @@ async function asyncForEach(array, callback) {
}
class HomeStore {
@observable state = null;
@observable loading = true;
@observable events = [];
@observable errors = [];
@observable balance = "";
@observable filter = false;
@observable maxCurrentDeposit = "";
@observable maxPerTx = "";
@observable latestBlockNumber = 0;
@observable state = null
@observable loading = true
@observable events = []
@observable errors = []
@observable balance = ''
@observable filter = false
@observable maxCurrentDeposit = ''
@observable maxPerTx = ''
@observable latestBlockNumber = 0
@observable validators = []
@observable validatorsCount = 0
@observable homeBridgeValidators = ''
@observable requiredSignatures = 0
@observable dailyLimit = 0
@observable totalSpentPerDay = 0
@observable tokenAddress = '';
@observable symbol = process.env.REACT_APP_HOME_NATIVE_NAME || 'NONAME';
@observable tokenName = '';
@observable tokenAddress = ''
@observable symbol = process.env.REACT_APP_HOME_NATIVE_NAME || 'NONAME'
@observable tokenName = ''
@observable userBalance = 0
@observable statistics = {
deposits: 0,
@ -85,15 +91,15 @@ class HomeStore {
feeManager = {
totalFeeDistributedFromSignatures: BN(0),
totalFeeDistributedFromAffirmation: BN(0)
};
}
networkName = process.env.REACT_APP_HOME_NETWORK_NAME || 'Unknown'
filteredBlockNumber = 0
homeBridge = {};
HOME_BRIDGE_ADDRESS = process.env.REACT_APP_HOME_BRIDGE_ADDRESS;
homeBridge = {}
HOME_BRIDGE_ADDRESS = process.env.REACT_APP_HOME_BRIDGE_ADDRESS
explorerTxTemplate = process.env.REACT_APP_HOME_EXPLORER_TX_TEMPLATE || ''
explorerAddressTemplate = process.env.REACT_APP_HOME_EXPLORER_ADDRESS_TEMPLATE || ''
tokenContract = {}
tokenDecimals = 18;
tokenDecimals = 18
blockRewardContract = {}
constructor(rootStore) {
@ -111,7 +117,7 @@ class HomeStore {
return
}
const { HOME_ABI } = getBridgeABIs(this.rootStore.bridgeMode)
this.homeBridge = new this.homeWeb3.eth.Contract(HOME_ABI, this.HOME_BRIDGE_ADDRESS);
this.homeBridge = new this.homeWeb3.eth.Contract(HOME_ABI, this.HOME_BRIDGE_ADDRESS)
if (this.rootStore.bridgeMode === BRIDGE_MODES.ERC_TO_ERC) {
await this.getTokenInfo()
} else if (this.rootStore.bridgeMode === BRIDGE_MODES.ERC_TO_NATIVE) {
@ -139,19 +145,23 @@ class HomeStore {
async getTokenInfo() {
try {
this.tokenAddress = await getErc677TokenAddress(this.homeBridge)
this.tokenContract = new this.homeWeb3.eth.Contract(ERC677_ABI, this.tokenAddress);
this.tokenContract = new this.homeWeb3.eth.Contract(ERC677_ABI, this.tokenAddress)
this.symbol = await getSymbol(this.tokenContract)
this.tokenName = await getName(this.tokenContract)
const alternativeContract = new this.homeWeb3.eth.Contract(ERC20Bytes32Abi, this.tokenAddress);
const alternativeContract = new this.homeWeb3.eth.Contract(ERC20Bytes32Abi, this.tokenAddress)
try {
this.symbol = await getSymbol(this.tokenContract)
} catch (e) {
this.symbol = this.homeWeb3.utils.hexToAscii(await getSymbol(alternativeContract)).replace(/\u0000*$/, '')
this.symbol = this.homeWeb3.utils
.hexToAscii(await getSymbol(alternativeContract))
.replace(/\u0000*$/, '')
}
try {
this.tokenName = await getName(this.tokenContract)
} catch (e) {
this.tokenName = this.homeWeb3.utils.hexToAscii(await getName(alternativeContract)).replace(/\u0000*$/, '')
this.tokenName = this.homeWeb3.utils
.hexToAscii(await getName(alternativeContract))
.replace(/\u0000*$/, '')
}
this.tokenDecimals = await getDecimals(this.tokenContract)
} catch (e) {
@ -192,7 +202,10 @@ class HomeStore {
if (this.rootStore.bridgeMode === BRIDGE_MODES.ERC_TO_ERC) {
this.balance = await getTotalSupply(this.tokenContract)
this.web3Store.getWeb3Promise.then(async () => {
this.userBalance = await getBalanceOf(this.tokenContract, this.web3Store.defaultAccount.address)
this.userBalance = await getBalanceOf(
this.tokenContract,
this.web3Store.defaultAccount.address
)
balanceLoaded()
})
} else if (this.rootStore.bridgeMode === BRIDGE_MODES.ERC_TO_NATIVE) {
@ -219,13 +232,13 @@ class HomeStore {
this.feeManager.homeFee = await getHomeFee(this.homeBridge)
this.feeManager.foreignFee = await getForeignFee(this.homeBridge)
} else {
this.feeManager.homeFee = new BN(0);
this.feeManager.homeFee = new BN(0)
this.feeManager.foreignFee = await getForeignFee(this.homeBridge)
}
} else {
this.feeManager.feeManagerMode = FEE_MANAGER_MODE.UNDEFINED
this.feeManager.homeFee = new BN(0);
this.feeManager.foreignFee = new BN(0);
this.feeManager.homeFee = new BN(0)
this.feeManager.foreignFee = new BN(0)
}
}
@ -233,40 +246,47 @@ class HomeStore {
async getEvents(fromBlock, toBlock) {
try {
fromBlock = fromBlock || this.filteredBlockNumber || this.latestBlockNumber - 50
toBlock = toBlock || this.filteredBlockNumber || "latest"
toBlock = toBlock || this.filteredBlockNumber || 'latest'
if (fromBlock < 0) {
fromBlock = 0
}
let events = await getPastEvents(this.homeBridge, fromBlock, toBlock).catch(e => {
console.error('Couldn\'t get events', e)
console.error("Couldn't get events", e)
return []
})
let homeEvents = []
await asyncForEach(events, (async (event) => {
if(event.event === "SignedForUserRequest" || event.event === "CollectedSignatures") {
await asyncForEach(events, async event => {
if (event.event === 'SignedForUserRequest' || event.event === 'CollectedSignatures') {
event.signedTxHash = await this.getSignedTx(event.returnValues.messageHash)
}
homeEvents.push(event)
}))
})
if (!this.filter) {
this.events = homeEvents;
this.events = homeEvents
}
if (this.waitingForConfirmation.size) {
const confirmationEvents = homeEvents.filter((event) => event.event === "AffirmationCompleted" && this.waitingForConfirmation.has(event.returnValues.transactionHash))
const confirmationEvents = homeEvents.filter(
event =>
event.event === 'AffirmationCompleted' &&
this.waitingForConfirmation.has(event.returnValues.transactionHash)
)
confirmationEvents.forEach(event => {
this.alertStore.setLoadingStepIndex(3)
const urlExplorer = this.getExplorerTxUrl(event.transactionHash)
const unitReceived = getUnit(this.rootStore.bridgeMode).unitHome
setTimeout(() => {
this.alertStore.pushSuccess(`${unitReceived} received on ${this.networkName} on Tx
this.alertStore.pushSuccess(
`${unitReceived} received on ${this.networkName} on Tx
<a href='${urlExplorer}' target='blank' style="overflow-wrap: break-word;word-wrap: break-word;">
${event.transactionHash}</a>`, this.alertStore.HOME_TRANSFER_SUCCESS)}
, 2000)
${event.transactionHash}</a>`,
this.alertStore.HOME_TRANSFER_SUCCESS
)
}, 2000)
this.waitingForConfirmation.delete(event.returnValues.transactionHash)
})
@ -277,15 +297,18 @@ class HomeStore {
return homeEvents
} catch (e) {
this.alertStore.pushError(`Cannot establish connection to Home Network.\n
Please make sure you have set it up in env variables`, this.alertStore.HOME_CONNECTION_ERROR)
this.alertStore.pushError(
`Cannot establish connection to Home Network.\n
Please make sure you have set it up in env variables`,
this.alertStore.HOME_CONNECTION_ERROR
)
}
}
async getSignedTx(messageHash) {
try {
const message = await getMessage(this.homeBridge, messageHash)
return "0x" + message.substring(106, 170);
return '0x' + message.substring(106, 170)
} catch (e) {
console.error(e)
}
@ -301,15 +324,21 @@ class HomeStore {
@action
async filterByTxHashInReturnValues(transactionHash) {
const events = await this.getEvents(1,"latest");
this.events = events.filter((event) => event.returnValues.transactionHash === transactionHash)
const events = await this.getEvents(1, 'latest')
this.events = events.filter(event => event.returnValues.transactionHash === transactionHash)
}
@action
async filterByTxHash(transactionHash) {
const events = await this.getEvents(1,"latest");
this.events = events.filter((event) => event.transactionHash === transactionHash)
if(this.events.length > 0 && this.events[0].returnValues && this.events[0].returnValues.transactionHash) {
await this.rootStore.foreignStore.filterByTxHashInReturnValues(this.events[0].returnValues.transactionHash)
const events = await this.getEvents(1, 'latest')
this.events = events.filter(event => event.transactionHash === transactionHash)
if (
this.events.length > 0 &&
this.events[0].returnValues &&
this.events[0].returnValues.transactionHash
) {
await this.rootStore.foreignStore.filterByTxHashInReturnValues(
this.events[0].returnValues.transactionHash
)
}
}
@ -346,7 +375,10 @@ class HomeStore {
async getValidators() {
try {
const homeValidatorsAddress = await this.homeBridge.methods.validatorContract().call()
this.homeBridgeValidators = new this.homeWeb3.eth.Contract(BRIDGE_VALIDATORS_ABI, homeValidatorsAddress);
this.homeBridgeValidators = new this.homeWeb3.eth.Contract(
BRIDGE_VALIDATORS_ABI,
homeValidatorsAddress
)
this.requiredSignatures = await this.homeBridgeValidators.methods.requiredSignatures().call()
this.validatorsCount = await this.homeBridgeValidators.methods.validatorCount().call()
@ -359,17 +391,16 @@ class HomeStore {
async getStatistics() {
try {
const deployedAtBlock = await getDeployedAtBlock(this.homeBridge);
const deployedAtBlock = await getDeployedAtBlock(this.homeBridge)
const { HOME_ABI } = getBridgeABIs(this.rootStore.bridgeMode)
const abi = [...HomeBridgeV1Abi, ...HOME_ABI]
const contract = new this.homeWeb3.eth.Contract(abi, this.HOME_BRIDGE_ADDRESS);
const contract = new this.homeWeb3.eth.Contract(abi, this.HOME_BRIDGE_ADDRESS)
const events = await getPastEvents(contract, deployedAtBlock, 'latest')
processLargeArrayAsync(
events,
this.processEvent,
() => {
processLargeArrayAsync(events, this.processEvent, () => {
this.statistics.finished = true
this.statistics.totalBridged = this.statistics.depositsValue.plus(this.statistics.withdrawsValue)
this.statistics.totalBridged = this.statistics.depositsValue.plus(
this.statistics.withdrawsValue
)
})
} catch (e) {
console.error(e)
@ -377,44 +408,60 @@ class HomeStore {
}
}
processEvent = (event) => {
processEvent = event => {
if (event.returnValues && event.returnValues.recipient) {
this.statistics.users.add(event.returnValues.recipient)
}
if(event.event === "UserRequestForSignature" || event.event === 'Deposit') {
if (event.event === 'UserRequestForSignature' || event.event === 'Deposit') {
this.statistics.deposits++
this.statistics.depositsValue = this.statistics.depositsValue.plus(BN(fromDecimals(event.returnValues.value,this.tokenDecimals)))
} else if (event.event === "AffirmationCompleted" || event.event === 'Withdraw') {
this.statistics.depositsValue = this.statistics.depositsValue.plus(
BN(fromDecimals(event.returnValues.value, this.tokenDecimals))
)
} else if (event.event === 'AffirmationCompleted' || event.event === 'Withdraw') {
this.statistics.withdraws++
this.statistics.withdrawsValue = this.statistics.withdrawsValue.plus(BN(fromDecimals(event.returnValues.value,this.tokenDecimals)))
} else if (event.event === "FeeDistributedFromSignatures") {
this.feeManager.totalFeeDistributedFromSignatures = this.feeManager.totalFeeDistributedFromSignatures.plus(BN(fromDecimals(event.returnValues.feeAmount, this.tokenDecimals)))
} else if (event.event === "FeeDistributedFromAffirmation") {
this.feeManager.totalFeeDistributedFromAffirmation = this.feeManager.totalFeeDistributedFromAffirmation.plus(BN(fromDecimals(event.returnValues.feeAmount, this.tokenDecimals)))
this.statistics.withdrawsValue = this.statistics.withdrawsValue.plus(
BN(fromDecimals(event.returnValues.value, this.tokenDecimals))
)
} else if (event.event === 'FeeDistributedFromSignatures') {
this.feeManager.totalFeeDistributedFromSignatures = this.feeManager.totalFeeDistributedFromSignatures.plus(
BN(fromDecimals(event.returnValues.feeAmount, this.tokenDecimals))
)
} else if (event.event === 'FeeDistributedFromAffirmation') {
this.feeManager.totalFeeDistributedFromAffirmation = this.feeManager.totalFeeDistributedFromAffirmation.plus(
BN(fromDecimals(event.returnValues.feeAmount, this.tokenDecimals))
)
}
}
calculateCollectedFees() {
if (!this.statistics.finished
|| !this.rootStore.foreignStore.feeEventsFinished
|| !this.feeManager.feeManagerMode
|| !this.rootStore.foreignStore.feeManager.feeManagerMode) {
setTimeout(() => { this.calculateCollectedFees() }, 1000)
if (
!this.statistics.finished ||
!this.rootStore.foreignStore.feeEventsFinished ||
!this.feeManager.feeManagerMode ||
!this.rootStore.foreignStore.feeManager.feeManagerMode
) {
setTimeout(() => {
this.calculateCollectedFees()
}, 1000)
return
}
const data = getRewardableData(this.feeManager, this.rootStore.foreignStore.feeManager)
this.depositFeeCollected.type = data.depositSymbol === 'home' ? this.symbol : this.rootStore.foreignStore.symbol
this.withdrawFeeCollected.type = data.withdrawSymbol === 'home' ? this.symbol : this.rootStore.foreignStore.symbol
this.depositFeeCollected.type =
data.depositSymbol === 'home' ? this.symbol : this.rootStore.foreignStore.symbol
this.withdrawFeeCollected.type =
data.withdrawSymbol === 'home' ? this.symbol : this.rootStore.foreignStore.symbol
this.depositFeeCollected.shouldDisplay = data.displayDeposit
this.withdrawFeeCollected.shouldDisplay = data.displayWithdraw
this.depositFeeCollected.value = data.depositSymbol === 'home'
this.depositFeeCollected.value =
data.depositSymbol === 'home'
? this.feeManager.totalFeeDistributedFromSignatures
: this.rootStore.foreignStore.feeManager.totalFeeDistributedFromSignatures
this.withdrawFeeCollected.value = data.withdrawSymbol === 'home'
this.withdrawFeeCollected.value =
data.withdrawSymbol === 'home'
? this.feeManager.totalFeeDistributedFromAffirmation
: this.rootStore.foreignStore.feeManager.totalFeeDistributedFromAffirmation
@ -423,11 +470,13 @@ class HomeStore {
}
getDailyQuotaCompleted() {
return this.dailyLimit ? this.totalSpentPerDay / this.dailyLimit * 100 : 0
return this.dailyLimit ? (this.totalSpentPerDay / this.dailyLimit) * 100 : 0
}
getDisplayedBalance() {
return this.rootStore.bridgeMode === BRIDGE_MODES.ERC_TO_ERC ? this.userBalance : this.web3Store.defaultAccount.homeBalance
return this.rootStore.bridgeMode === BRIDGE_MODES.ERC_TO_ERC
? this.userBalance
: this.web3Store.defaultAccount.homeBalance
}
async getBlockRewardContract() {
@ -452,4 +501,4 @@ class HomeStore {
}
}
export default HomeStore;
export default HomeStore

@ -1,4 +1,4 @@
import { action } from 'mobx';
import { action } from 'mobx'
import Web3Store from './Web3Store'
import HomeStore from './HomeStore'
import ForeignStore from './ForeignStore'
@ -24,11 +24,14 @@ class RootStore {
@action
async setBridgeMode() {
const homeWeb3 = getWeb3Instance(process.env.REACT_APP_HOME_HTTP_PARITY_URL)
const homeBridge = new homeWeb3.eth.Contract(HOME_ERC_ABI, process.env.REACT_APP_HOME_BRIDGE_ADDRESS)
const homeBridge = new homeWeb3.eth.Contract(
HOME_ERC_ABI,
process.env.REACT_APP_HOME_BRIDGE_ADDRESS
)
const bridgeModeHash = await homeBridge.methods.getBridgeMode().call()
this.bridgeMode = decodeBridgeMode(bridgeModeHash)
this.bridgeModeInitialized = true
}
}
export default new RootStore();
export default new RootStore()

@ -1,4 +1,4 @@
import { action, observable } from "mobx";
import { action, observable } from 'mobx'
import { estimateGas } from './utils/web3'
import { addPendingTransaction, removePendingTransaction } from './utils/testUtils'
import { getUnit } from './utils/bridgeMode'
@ -20,13 +20,14 @@ class TxStore {
async doSend({ to, from, value, data, sentValue }) {
return this.web3Store.getWeb3Promise.then(async () => {
if (!this.web3Store.defaultAccount) {
this.alertStore.pushError("Please unlock wallet")
this.alertStore.pushError('Please unlock wallet')
return
}
try {
const gasPrice = this.gasPriceStore.gasPriceInHex
const gas = await estimateGas(this.web3Store.injectedWeb3, to, gasPrice, from, value, data)
return this.web3Store.injectedWeb3.eth.sendTransaction({
return this.web3Store.injectedWeb3.eth
.sendTransaction({
to,
gasPrice,
gas,
@ -34,20 +35,25 @@ class TxStore {
value,
data,
chainId: this.web3Store.metamaskNet.id
}).on('transactionHash', (hash) => {
})
.on('transactionHash', hash => {
console.log('txHash', hash)
this.txsValues[hash] = sentValue
this.alertStore.setLoadingStepIndex(1)
addPendingTransaction()
this.getTxReceipt(hash)
}).on('error', (e) => {
if(!e.message.includes('not mined within 50 blocks') && !e.message.includes('Failed to subscribe to new newBlockHeaders')){
})
.on('error', e => {
if (
!e.message.includes('not mined within 50 blocks') &&
!e.message.includes('Failed to subscribe to new newBlockHeaders')
) {
this.alertStore.setLoading(false)
this.alertStore.pushError('Transaction rejected on wallet');
this.alertStore.pushError('Transaction rejected on wallet')
}
})
} catch (e) {
this.alertStore.pushError(e.message);
this.alertStore.pushError(e.message)
}
})
}
@ -57,16 +63,14 @@ class TxStore {
try {
return this.web3Store.getWeb3Promise.then(async () => {
if (this.web3Store.defaultAccount.address) {
const data = await contract.methods.transferAndCall(
to, value, '0x00'
).encodeABI()
const data = await contract.methods.transferAndCall(to, value, '0x00').encodeABI()
return this.doSend({ to: tokenAddress, from, value: '0x00', data, sentValue: value })
} else {
this.alertStore.pushError('Please unlock wallet');
this.alertStore.pushError('Please unlock wallet')
}
})
} catch (e) {
this.alertStore.pushError(e);
this.alertStore.pushError(e)
}
}
@ -75,21 +79,27 @@ class TxStore {
try {
return this.web3Store.getWeb3Promise.then(async () => {
if (this.web3Store.defaultAccount.address) {
const data = await this.foreignStore.tokenContract.methods.transfer(
to, value
).encodeABI({ from: this.web3Store.defaultAccount.address })
return this.doSend({to: this.foreignStore.tokenAddress, from, value: '0x', data, sentValue: value})
const data = await this.foreignStore.tokenContract.methods
.transfer(to, value)
.encodeABI({ from: this.web3Store.defaultAccount.address })
return this.doSend({
to: this.foreignStore.tokenAddress,
from,
value: '0x',
data,
sentValue: value
})
} else {
this.alertStore.pushError('Please unlock wallet');
this.alertStore.pushError('Please unlock wallet')
}
})
} catch (e) {
this.alertStore.pushError(e);
this.alertStore.pushError(e)
}
}
async getTxReceipt(hash) {
const web3 = this.web3Store.injectedWeb3;
const web3 = this.web3Store.injectedWeb3
web3.eth.getTransaction(hash, (error, res) => {
if (res && res.blockNumber) {
this.getTxStatus(hash)
@ -103,7 +113,7 @@ class TxStore {
}
async getTxStatus(hash) {
const web3 = this.web3Store.injectedWeb3;
const web3 = this.web3Store.injectedWeb3
web3.eth.getTransactionReceipt(hash, (error, res) => {
if (res && res.blockNumber) {
if (this.isStatusSuccess(res)) {
@ -122,8 +132,7 @@ class TxStore {
`${unitReceived} received on ${this.foreignStore.networkName}`,
this.alertStore.FOREIGN_TRANSFER_SUCCESS
)
}
, 2000)
}, 2000)
removePendingTransaction()
})
} else {
@ -135,7 +144,6 @@ class TxStore {
}
this.getTxStatus(hash)
}
} else {
const blockConfirmations = this.foreignStore.latestBlockNumber - res.blockNumber
if (blockConfirmations >= 8) {
@ -151,8 +159,7 @@ class TxStore {
`${unitReceived} received on ${this.homeStore.networkName}`,
this.alertStore.HOME_TRANSFER_SUCCESS
)
}
, 2000)
}, 2000)
removePendingTransaction()
})
} else {
@ -181,7 +188,6 @@ class TxStore {
const eventEmitted = tx.logs && tx.logs.length
return statusSuccess || eventEmitted
}
}
export default TxStore;
export default TxStore

@ -1,48 +1,50 @@
import { action, observable } from "mobx";
import getWeb3, { getBalance, getWeb3Instance, getNetwork } from './utils/web3';
import { action, observable } from 'mobx'
import getWeb3, { getBalance, getWeb3Instance, getNetwork } from './utils/web3'
import { balanceLoaded } from './utils/testUtils'
import { BRIDGE_MODES } from './utils/bridgeMode'
class Web3Store {
@observable injectedWeb3 = {};
@observable defaultAccount = {address: '', homeBalance: ''};
@observable injectedWeb3 = {}
@observable defaultAccount = { address: '', homeBalance: '' }
@observable homeWeb3 = {};
@observable foreignWeb3 = {};
@observable homeWeb3 = {}
@observable foreignWeb3 = {}
@observable loading = true;
@observable errors = [];
@observable loading = true
@observable errors = []
@observable getWeb3Promise = null;
@observable setHomeWeb3Promise = null;
@observable metamaskNotSetted = false;
@observable getWeb3Promise = null
@observable setHomeWeb3Promise = null
@observable metamaskNotSetted = false
@observable homeNet = {id: '', name: ''};
@observable foreignNet = {id: '', name: ''};
@observable metamaskNet = {id: '', name: ''};
@observable homeNet = { id: '', name: '' }
@observable foreignNet = { id: '', name: '' }
@observable metamaskNet = { id: '', name: '' }
@observable walletInstalled = true
HOME_HTTP_PARITY_URL = process.env.REACT_APP_HOME_HTTP_PARITY_URL;
FOREIGN_HTTP_PARITY_URL = process.env.REACT_APP_FOREIGN_HTTP_PARITY_URL;
HOME_HTTP_PARITY_URL = process.env.REACT_APP_HOME_HTTP_PARITY_URL
FOREIGN_HTTP_PARITY_URL = process.env.REACT_APP_FOREIGN_HTTP_PARITY_URL
constructor(rootStore) {
this.alertStore = rootStore.alertStore;
this.alertStore = rootStore.alertStore
this.rootStore = rootStore
this.getWeb3Promise = getWeb3()
this.getWeb3Promise.then((web3Config) => {
this.getWeb3Promise
.then(web3Config => {
this.setWeb3State(web3Config)
this.getBalances(false)
setInterval(() => {
this.getBalances(true)
}, 3000)
}).catch(e => {
})
.catch(e => {
const error = {
rejected: () => this.alertStore.pushError(e.message),
unlock: () => this.alertStore.pushError(e.message),
install: () => this.walletInstalled = false
install: () => (this.walletInstalled = false)
}[e.type]
console.error(e.message, 'web3 not loaded')
@ -57,11 +59,11 @@ class Web3Store {
@action
setWeb3State(web3Config) {
const {web3Instance, defaultAccount, netIdName, netId} = web3Config;
this.metamaskNet = {id: netId, name: netIdName};
this.defaultAccount.address = defaultAccount;
this.injectedWeb3 = web3Instance;
this.loading = false;
const { web3Instance, defaultAccount, netIdName, netId } = web3Config
this.metamaskNet = { id: netId, name: netIdName }
this.defaultAccount.address = defaultAccount
this.injectedWeb3 = web3Instance
this.loading = false
}
@action
@ -97,7 +99,10 @@ class Web3Store {
await this.rootStore.homeStore.getBalance()
this.alertStore.setLoading(false)
}
if (this.rootStore.bridgeModeInitialized && this.rootStore.bridgeMode !== BRIDGE_MODES.ERC_TO_ERC) {
if (
this.rootStore.bridgeModeInitialized &&
this.rootStore.bridgeMode !== BRIDGE_MODES.ERC_TO_ERC
) {
balanceLoaded()
}
} catch (e) {
@ -109,12 +114,21 @@ class Web3Store {
checkMetamaskConfig() {
if (!this.metamaskNotSetted) {
if (this.metamaskNet.name === '' || this.homeNet.name === '' || this.foreignNet.name === '') {
setTimeout(() => {this.checkMetamaskConfig()}, 1000)
setTimeout(() => {
this.checkMetamaskConfig()
}, 1000)
return
}
if(this.metamaskNet.name !== this.homeNet.name && this.metamaskNet.name !== this.foreignNet.name) {
if (
this.metamaskNet.name !== this.homeNet.name &&
this.metamaskNet.name !== this.foreignNet.name
) {
this.metamaskNotSetted = true
this.alertStore.pushError(`You are on an unknown network on your wallet. Please select ${this.homeNet.name} or ${this.foreignNet.name} in order to communicate with the bridge.`)
this.alertStore.pushError(
`You are on an unknown network on your wallet. Please select ${this.homeNet.name} or ${
this.foreignNet.name
} in order to communicate with the bridge.`
)
}
}
}
@ -126,4 +140,4 @@ class Web3Store {
}
}
export default Web3Store;
export default Web3Store

@ -60,9 +60,7 @@ describe('TxStore', function () {
it('should return true if status field not present and logs length > 0', () => {
// Given
const tx = {
logs: [
{}
]
logs: [{}]
}
// When

@ -60,4 +60,3 @@ describe('getTokenType', () => {
expect(type).toEqual(ERC_TYPES.ERC20)
})
})

@ -30,13 +30,13 @@ describe('getFeeToApply', () => {
const homeFeeManager = {
feeManagerMode: FEE_MANAGER_MODE.BOTH_DIRECTIONS,
homeFee: new BN(0.01),
foreignFee: new BN(0.02),
foreignFee: new BN(0.02)
}
const foreignFeeManager = {
feeManagerMode: FEE_MANAGER_MODE.UNDEFINED,
homeFee: new BN(0),
foreignFee: new BN(0),
foreignFee: new BN(0)
}
const homeToForeignDirection = true
@ -53,13 +53,13 @@ describe('getFeeToApply', () => {
const homeFeeManager = {
feeManagerMode: FEE_MANAGER_MODE.BOTH_DIRECTIONS,
homeFee: new BN(0.01),
foreignFee: new BN(0.02),
foreignFee: new BN(0.02)
}
const foreignFeeManager = {
feeManagerMode: FEE_MANAGER_MODE.UNDEFINED,
homeFee: new BN(0),
foreignFee: new BN(0),
foreignFee: new BN(0)
}
const homeToForeignDirection = false
@ -76,13 +76,13 @@ describe('getFeeToApply', () => {
const homeFeeManager = {
feeManagerMode: FEE_MANAGER_MODE.ONE_DIRECTION,
homeFee: new BN(0),
foreignFee: new BN(0.02),
foreignFee: new BN(0.02)
}
const foreignFeeManager = {
feeManagerMode: FEE_MANAGER_MODE.ONE_DIRECTION,
homeFee: new BN(0.01),
foreignFee: new BN(0),
foreignFee: new BN(0)
}
const homeToForeignDirection = true
@ -99,13 +99,13 @@ describe('getFeeToApply', () => {
const homeFeeManager = {
feeManagerMode: FEE_MANAGER_MODE.ONE_DIRECTION,
homeFee: new BN(0),
foreignFee: new BN(0.02),
foreignFee: new BN(0.02)
}
const foreignFeeManager = {
feeManagerMode: FEE_MANAGER_MODE.ONE_DIRECTION,
homeFee: new BN(0.01),
foreignFee: new BN(0),
foreignFee: new BN(0)
}
const homeToForeignDirection = false
@ -122,13 +122,13 @@ describe('getFeeToApply', () => {
const homeFeeManager = {
feeManagerMode: FEE_MANAGER_MODE.UNDEFINED,
homeFee: new BN(0),
foreignFee: new BN(0),
foreignFee: new BN(0)
}
const foreignFeeManager = {
feeManagerMode: FEE_MANAGER_MODE.UNDEFINED,
homeFee: new BN(0),
foreignFee: new BN(0),
foreignFee: new BN(0)
}
const homeToForeignDirection = true
@ -144,13 +144,13 @@ describe('getFeeToApply', () => {
const homeFeeManager = {
feeManagerMode: FEE_MANAGER_MODE.UNDEFINED,
homeFee: new BN(0),
foreignFee: new BN(0),
foreignFee: new BN(0)
}
const foreignFeeManager = {
feeManagerMode: FEE_MANAGER_MODE.UNDEFINED,
homeFee: new BN(0),
foreignFee: new BN(0),
foreignFee: new BN(0)
}
const homeToForeignDirection = false
@ -181,7 +181,6 @@ describe('getRewardableData', () => {
foreignHistoricFee: []
}
// When
const result = getRewardableData(homeFeeManager, foreignFeeManager)
@ -213,7 +212,6 @@ describe('getRewardableData', () => {
foreignHistoricFee: []
}
// When
const result = getRewardableData(homeFeeManager, foreignFeeManager)

@ -5,10 +5,8 @@ describe('parseValidatorEvent', () => {
// Given
const event = {
raw: {
data: "0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225",
topics: [
"0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987"
],
data: '0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225',
topics: ['0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987']
},
returnValues: {}
}
@ -23,11 +21,11 @@ describe('parseValidatorEvent', () => {
// Given
const event = {
raw: {
data: "0x",
data: '0x',
topics: [
"0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987",
"0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225"
],
'0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987',
'0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225'
]
},
returnValues: {}
}
@ -42,11 +40,11 @@ describe('parseValidatorEvent', () => {
// Given
const event = {
raw: {
data: "0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225",
data: '0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225',
topics: [
"0x8064a302796c89446a96d63470b5b036212da26bd2debe5bec73e0170a9a5e83",
"0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225"
],
'0x8064a302796c89446a96d63470b5b036212da26bd2debe5bec73e0170a9a5e83',
'0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225'
]
},
returnValues: {}
}
@ -61,11 +59,11 @@ describe('parseValidatorEvent', () => {
// Given
const event = {
raw: {
data: "0x",
data: '0x',
topics: [
"0xe1434e25d6611e0db941968fdc97811c982ac1602e951637d206f5fdda9dd8f1",
"0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225"
],
'0xe1434e25d6611e0db941968fdc97811c982ac1602e951637d206f5fdda9dd8f1',
'0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225'
]
},
returnValues: {}
}
@ -80,10 +78,8 @@ describe('parseValidatorEvent', () => {
// Given
const event = {
raw: {
data: "0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225",
topics: [
"0xe1434e25d6611e0db941968fdc97811c982ac1602e951637d206f5fdda9dd8f1"
],
data: '0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225',
topics: ['0xe1434e25d6611e0db941968fdc97811c982ac1602e951637d206f5fdda9dd8f1']
},
returnValues: {}
}
@ -99,70 +95,71 @@ describe('processValidatorsEvents', () => {
it('should return validator list from raw events', () => {
// Given
const events = [
{ // Add v1 event
{
// Add v1 event
raw: {
data: "0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225",
topics: [
"0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987"
],
data: '0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225',
topics: ['0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987']
},
returnValues: {}
},
{ // Add v1 event
{
// Add v1 event
raw: {
data: "0x000000000000000000000000Cbd25A2a5708051747a052dBB1b291865Fc0e474",
topics: [
"0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987"
],
data: '0x000000000000000000000000Cbd25A2a5708051747a052dBB1b291865Fc0e474',
topics: ['0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987']
},
returnValues: {}
},
{ // Remove v1 event
{
// Remove v1 event
raw: {
data: "0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225",
topics: [
"0xe1434e25d6611e0db941968fdc97811c982ac1602e951637d206f5fdda9dd8f1"
],
data: '0x000000000000000000000000cfef0c6bb765321529ffe81507f6d099693cd225',
topics: ['0xe1434e25d6611e0db941968fdc97811c982ac1602e951637d206f5fdda9dd8f1']
},
returnValues: {}
},
{ // Add event
{
// Add event
raw: {
data: "0x",
data: '0x',
topics: [
"0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987",
"0x000000000000000000000000FE365A92Bc01425441dE76D8EDA48496B64446FB"
],
'0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987',
'0x000000000000000000000000FE365A92Bc01425441dE76D8EDA48496B64446FB'
]
},
returnValues: {}
},
{ // Add event
{
// Add event
raw: {
data: "0x",
data: '0x',
topics: [
"0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987",
"0x000000000000000000000000Bac68A86Cf596E3b124781E0bdbC47bb458bec62"
],
'0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987',
'0x000000000000000000000000Bac68A86Cf596E3b124781E0bdbC47bb458bec62'
]
},
returnValues: {}
},
{ // Remove event
{
// Remove event
raw: {
data: "0x",
data: '0x',
topics: [
"0xe1434e25d6611e0db941968fdc97811c982ac1602e951637d206f5fdda9dd8f1",
"0x000000000000000000000000FE365A92Bc01425441dE76D8EDA48496B64446FB"
],
'0xe1434e25d6611e0db941968fdc97811c982ac1602e951637d206f5fdda9dd8f1',
'0x000000000000000000000000FE365A92Bc01425441dE76D8EDA48496B64446FB'
]
},
returnValues: {}
},
{ // Add rewardable event
{
// Add rewardable event
raw: {
data: "0x0000000000000000000000000066938BBE9b31D44DFa8e27A1d675A545DF6ed5",
data: '0x0000000000000000000000000066938BBE9b31D44DFa8e27A1d675A545DF6ed5',
topics: [
"0x8064a302796c89446a96d63470b5b036212da26bd2debe5bec73e0170a9a5e83",
"0x000000000000000000000000f4BEF13F9f4f2B203FAF0C3cBbaAbe1afE056955"
],
'0x8064a302796c89446a96d63470b5b036212da26bd2debe5bec73e0170a9a5e83',
'0x000000000000000000000000f4BEF13F9f4f2B203FAF0C3cBbaAbe1afE056955'
]
},
returnValues: {}
}

@ -1,22 +1,22 @@
export const processLargeArrayAsync = (array, fn, endFn, maxTimePerChunk = 16) => {
let index = 0;
let index = 0
const doChunk = () => {
const startTime = now();
while (index < array.length && (now() - startTime) <= maxTimePerChunk) {
fn(array[index]);
++index;
const startTime = now()
while (index < array.length && now() - startTime <= maxTimePerChunk) {
fn(array[index])
++index
}
if (index < array.length) {
setTimeout(doChunk, 0);
setTimeout(doChunk, 0)
} else if (endFn) {
endFn()
}
}
doChunk();
doChunk()
}
function now() {
return new Date().getTime();
return new Date().getTime()
}

@ -22,7 +22,7 @@ export const ERC_TYPES = {
ERC20: 'ERC20'
}
export const getBridgeABIs = (bridgeMode) => {
export const getBridgeABIs = bridgeMode => {
let HOME_ABI = null
let FOREIGN_ABI = null
if (bridgeMode === BRIDGE_MODES.NATIVE_TO_ERC) {
@ -41,7 +41,7 @@ export const getBridgeABIs = (bridgeMode) => {
return { HOME_ABI, FOREIGN_ABI }
}
export const decodeBridgeMode = (bridgeModeHash) => {
export const decodeBridgeMode = bridgeModeHash => {
switch (bridgeModeHash) {
case '0x92a8d7fe':
return BRIDGE_MODES.NATIVE_TO_ERC
@ -54,7 +54,7 @@ export const decodeBridgeMode = (bridgeModeHash) => {
}
}
export const getUnit = (bridgeMode) => {
export const getUnit = bridgeMode => {
let unitHome = null
let unitForeign = null
if (bridgeMode === BRIDGE_MODES.NATIVE_TO_ERC) {
@ -73,7 +73,7 @@ export const getUnit = (bridgeMode) => {
return { unitHome, unitForeign }
}
export const decodeFeeManagerMode = (managerModeHash) => {
export const decodeFeeManagerMode = managerModeHash => {
switch (managerModeHash) {
case '0xf2aed8f7':
return FEE_MANAGER_MODE.ONE_DIRECTION

@ -2,7 +2,7 @@ import BN from 'bignumber.js'
import { fromDecimals } from './decimals'
import { fromWei } from 'web3-utils'
import { abi as rewardableValidatorsAbi } from '../../contracts/RewardableValidators'
import { ERC_TYPES } from "./bridgeMode"
import { ERC_TYPES } from './bridgeMode'
export const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
@ -28,19 +28,20 @@ export const getCurrentLimit = async (contract,decimals) => {
}
}
export const getPastEvents = (contract, fromBlock, toBlock, event = 'allEvents') => contract.getPastEvents(event, { fromBlock, toBlock })
export const getPastEvents = (contract, fromBlock, toBlock, event = 'allEvents') =>
contract.getPastEvents(event, { fromBlock, toBlock })
export const getErc677TokenAddress = (contract) => contract.methods.erc677token().call()
export const getErc677TokenAddress = contract => contract.methods.erc677token().call()
export const getErc20TokenAddress = (contract) => contract.methods.erc20token().call()
export const getErc20TokenAddress = contract => contract.methods.erc20token().call()
export const getSymbol = (contract) => contract.methods.symbol().call()
export const getSymbol = contract => contract.methods.symbol().call()
export const getDecimals= (contract) => contract.methods.decimals().call()
export const getDecimals = contract => contract.methods.decimals().call()
export const getMessage = (contract, messageHash) => contract.methods.message(messageHash).call()
export const getTotalSupply = async (contract) => {
export const getTotalSupply = async contract => {
const totalSupply = await contract.methods.totalSupply().call()
const decimals = await contract.methods.decimals().call()
return fromDecimals(totalSupply, decimals)
@ -52,12 +53,12 @@ export const getBalanceOf = async (contract, address) => {
return fromDecimals(balance, decimals)
}
export const mintedTotally = async (contract) => {
export const mintedTotally = async contract => {
const mintedCoins = await contract.methods.mintedTotally().call()
return new BN(mintedCoins)
}
export const totalBurntCoins = async (contract) => {
export const totalBurntCoins = async contract => {
const burntCoins = await contract.methods.totalBurntCoins().call()
return new BN(burntCoins)
}
@ -72,12 +73,14 @@ export const getValidatorList = async (address, eth) => {
const deployedAtBlock = await getDeployedAtBlock(validatorsContract)
const contract = new eth.Contract([], address)
const validatorsEvents = await contract.getPastEvents('allEvents', { fromBlock: Number(deployedAtBlock) })
const validatorsEvents = await contract.getPastEvents('allEvents', {
fromBlock: Number(deployedAtBlock)
})
return processValidatorsEvents(validatorsEvents)
}
export const validatorList = async (contract) => {
export const validatorList = async contract => {
try {
return await contract.methods.validatorList().call()
} catch (e) {
@ -85,7 +88,7 @@ export const validatorList = async (contract) => {
}
}
export const processValidatorsEvents = (events) => {
export const processValidatorsEvents = events => {
const validatorList = new Set()
events.forEach(event => {
parseValidatorEvent(event)
@ -100,20 +103,24 @@ export const processValidatorsEvents = (events) => {
return Array.from(validatorList)
}
export const parseValidatorEvent = (event) => {
if (event.event === undefined
&& event.raw
&& event.raw.topics
&& (event.raw.topics[0] === '0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987'
|| event.raw.topics[0] === '0x8064a302796c89446a96d63470b5b036212da26bd2debe5bec73e0170a9a5e83')) {
export const parseValidatorEvent = event => {
if (
event.event === undefined &&
event.raw &&
event.raw.topics &&
(event.raw.topics[0] === '0xe366c1c0452ed8eec96861e9e54141ebff23c9ec89fe27b996b45f5ec3884987' ||
event.raw.topics[0] === '0x8064a302796c89446a96d63470b5b036212da26bd2debe5bec73e0170a9a5e83')
) {
const rawAddress = event.raw.topics.length > 1 ? event.raw.topics[1] : event.raw.data
const address = '0x' + rawAddress.slice(26)
event.event = 'ValidatorAdded'
event.returnValues.validator = address
} else if (event.event === undefined
&& event.raw
&& event.raw.topics
&& event.raw.topics[0] === "0xe1434e25d6611e0db941968fdc97811c982ac1602e951637d206f5fdda9dd8f1") {
} else if (
event.event === undefined &&
event.raw &&
event.raw.topics &&
event.raw.topics[0] === '0xe1434e25d6611e0db941968fdc97811c982ac1602e951637d206f5fdda9dd8f1'
) {
const rawAddress = event.raw.data === '0x' ? event.raw.topics[1] : event.raw.data
const address = '0x' + rawAddress.slice(26)
event.event = 'ValidatorRemoved'
@ -121,9 +128,9 @@ export const parseValidatorEvent = (event) => {
}
}
export const getName = (contract) => contract.methods.name().call()
export const getName = contract => contract.methods.name().call()
export const getFeeManager = async (contract) => {
export const getFeeManager = async contract => {
try {
return await contract.methods.feeManagerContract().call()
} catch (e) {
@ -131,19 +138,19 @@ export const getFeeManager = async (contract) => {
}
}
export const getFeeManagerMode = (contract) => contract.methods.getFeeManagerMode().call()
export const getFeeManagerMode = contract => contract.methods.getFeeManagerMode().call()
export const getHomeFee = async (contract) => {
export const getHomeFee = async contract => {
const feeInWei = await contract.methods.getHomeFee().call()
return new BN(fromWei(feeInWei.toString()))
}
export const getForeignFee = async (contract) => {
export const getForeignFee = async contract => {
const feeInWei = await contract.methods.getForeignFee().call()
return new BN(fromWei(feeInWei.toString()))
}
export const getDeployedAtBlock = async (contract) => {
export const getDeployedAtBlock = async contract => {
try {
return await contract.methods.deployedAtBlock().call()
} catch (e) {

@ -1,36 +1,40 @@
import BN from 'bignumber.js'
export const fromDecimals = (number, decimals) => {
if (decimals == null) {
decimals = 18;
decimals = 18
}
const returnValue = toBigNumber(number).dividedBy(Math.pow(10, decimals))
return isBigNumber(number) ? returnValue : returnValue.toString(10)
}
const returnValue = toBigNumber(number).dividedBy(Math.pow(10, decimals));
return isBigNumber(number) ? returnValue : returnValue.toString(10);
};
export const toDecimals = (number, decimals) => {
if (decimals == null) {
decimals = 18;
decimals = 18
}
const returnValue = toBigNumber(number).times(Math.pow(10, decimals))
return isBigNumber(number) ? returnValue : returnValue.toString(10)
}
const returnValue = toBigNumber(number).times(Math.pow(10, decimals));
return isBigNumber(number) ? returnValue : returnValue.toString(10);
};
const isBigNumber = (object) => {
return (object && (object instanceof BN || (object.constructor && object.constructor.name === 'BigNumber')));
};
const isBigNumber = object => {
return (
object &&
(object instanceof BN || (object.constructor && object.constructor.name === 'BigNumber'))
)
}
const toBigNumber = (number) => {
const toBigNumber = number => {
/*jshint maxcomplexity:5 */
number = number || 0;
if (isBigNumber(number))
return number;
number = number || 0
if (isBigNumber(number)) return number
if (isString(number) && (number.indexOf('0x') === 0 || number.indexOf('-0x') === 0)) {
return new BN(number.replace('0x',''), 16);
return new BN(number.replace('0x', ''), 16)
}
return new BN(number.toString(10), 10)
}
return new BN(number.toString(10), 10);
};
const isString = (object) => {
return typeof object === 'string' ||
(object && object.constructor && object.constructor.name === 'String');
};
const isString = object => {
return (
typeof object === 'string' ||
(object && object.constructor && object.constructor.name === 'String')
)
}

@ -1,7 +1,7 @@
import BN from 'bignumber.js';
import BN from 'bignumber.js'
import { FEE_MANAGER_MODE } from './bridgeMode'
export const validFee = (fee) => {
export const validFee = fee => {
const zeroBN = new BN(0)
return !zeroBN.eq(fee)
}
@ -23,8 +23,10 @@ export const getRewardableData = (homeFeeManager, foreignFeeManager) => {
displayDeposit: true,
displayWithdraw: true
}
} else if(homeFeeManager.feeManagerMode === FEE_MANAGER_MODE.ONE_DIRECTION
&& foreignFeeManager.feeManagerMode === FEE_MANAGER_MODE.ONE_DIRECTION) {
} else if (
homeFeeManager.feeManagerMode === FEE_MANAGER_MODE.ONE_DIRECTION &&
foreignFeeManager.feeManagerMode === FEE_MANAGER_MODE.ONE_DIRECTION
) {
return {
homeFee: foreignFeeManager.homeFee,
foreignFee: homeFeeManager.foreignFee,
@ -35,8 +37,10 @@ export const getRewardableData = (homeFeeManager, foreignFeeManager) => {
displayDeposit: true,
displayWithdraw: true
}
} else if(homeFeeManager.feeManagerMode === FEE_MANAGER_MODE.ONE_DIRECTION
&& foreignFeeManager.feeManagerMode === FEE_MANAGER_MODE.UNDEFINED) {
} else if (
homeFeeManager.feeManagerMode === FEE_MANAGER_MODE.ONE_DIRECTION &&
foreignFeeManager.feeManagerMode === FEE_MANAGER_MODE.UNDEFINED
) {
return {
homeFee: new BN(0),
foreignFee: homeFeeManager.foreignFee,
@ -47,8 +51,10 @@ export const getRewardableData = (homeFeeManager, foreignFeeManager) => {
displayDeposit: false,
displayWithdraw: true
}
} else if(homeFeeManager.feeManagerMode === FEE_MANAGER_MODE.UNDEFINED
&& foreignFeeManager.feeManagerMode === FEE_MANAGER_MODE.ONE_DIRECTION) {
} else if (
homeFeeManager.feeManagerMode === FEE_MANAGER_MODE.UNDEFINED &&
foreignFeeManager.feeManagerMode === FEE_MANAGER_MODE.ONE_DIRECTION
) {
return {
homeFee: foreignFeeManager.homeFee,
foreignFee: new BN(0),

@ -5,15 +5,13 @@ const updateTitle = (networkName = 'No chain specified') => {
const defaultTitle = 'TokenBridge UI app'
if (!process.env.REACT_APP_TITLE) {
document.title = defaultTitle
}
else {
} else {
const titleReplaceString = '%c'
let appTitle = process.env.REACT_APP_TITLE || defaultTitle
if (appTitle.indexOf(titleReplaceString) !== -1) {
document.title = appTitle.replace(titleReplaceString, networkName)
}
else {
} else {
document.title = appTitle
}
}
@ -47,8 +45,8 @@ const getWeb3 = () => {
// Fallback to localhost if no web3 injection.
const errorMsg = ''
reject({ type: 'install', message: errorMsg })
console.log('No web3 instance injected, using Local web3.');
console.error('wallet not found');
console.log('No web3 instance injected, using Local web3.')
console.error('wallet not found')
}
})
})
@ -69,19 +67,19 @@ const networks = {
100: 'Dai Chain'
}
export const getNetworkName = (id) => networks[id] || 'Unknown'
export const getNetworkName = id => networks[id] || 'Unknown'
export const getBalance = async (web3, address) => {
const balance = await web3.eth.getBalance(address)
return fromWei(balance)
}
export const getWeb3Instance = (provider) => {
const web3Provider = new Web3.providers.HttpProvider(provider);
return new Web3(web3Provider);
export const getWeb3Instance = provider => {
const web3Provider = new Web3.providers.HttpProvider(provider)
return new Web3(web3Provider)
}
export const getNetwork = async (web3) => {
export const getNetwork = async web3 => {
const id = await web3.eth.getChainId()
const name = getNetworkName(id)
return {
@ -90,7 +88,7 @@ export const getNetwork = async (web3) => {
}
}
export const getBlockNumber = (web3) => web3.eth.getBlockNumber()
export const getBlockNumber = web3 => web3.eth.getBlockNumber()
export const estimateGas = async (web3, to, gasPrice, from, value, data) => {
const gas = await web3.eth.estimateGas({ to, gasPrice, from, value, data })
@ -102,14 +100,18 @@ const processWeb3 = async (web3, resolve, reject) => {
try {
netId = await web3.eth.getChainId()
} catch (error) {
reject({ type: 'unlock', message: 'Wallet does not support getting the Chain ID. Please use another wallet or specify a RPC url of a node that supports eth_chainId call' })
reject({
type: 'unlock',
message:
'Wallet does not support getting the Chain ID. Please use another wallet or specify a RPC url of a node that supports eth_chainId call'
})
}
const netIdName = getNetworkName(netId)
console.log(`This is ${netIdName} network.`, netId)
const accounts = await web3.eth.getAccounts()
const defaultAccount = accounts[0] || null;
const defaultAccount = accounts[0] || null
if (defaultAccount === null) {
reject({ type: 'unlock', message: 'Please unlock your wallet and refresh the page' })