diff --git a/package.json b/package.json index ba36d79fd..8eab69454 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,6 @@ "autolinker": "^2.2.1", "axios": "^0.18.0", "base64url": "^3.0.1", - "bootstrap": "^4.1.3", "cors": "^2.8.4", "crypto": "^1.0.1", "dapparatus": "^1.0.72", diff --git a/src/components/Admin.js b/src/components/Admin.js index 10fa9ad3a..db0a79371 100644 --- a/src/components/Admin.js +++ b/src/components/Admin.js @@ -1,240 +1,199 @@ import React from 'react'; import { Scaler } from "dapparatus"; import Blockies from 'react-blockies'; -import Ruler from "./Ruler"; -import {CopyToClipboard} from "react-copy-to-clipboard"; import i18next from 'i18next'; -const QRCode = require('qrcode.react'); - -export default class Advanced extends React.Component { - +import { + Box, + Button, + Card, + Field, + Flex, + Input +} from 'rimble-ui'; + +export default class Admin extends React.Component { constructor(props) { super(props); this.state = { changingAllowed: {}, - } + }; } - render(){ - let {buttonStyle,contracts,tx,web3,vendors} = this.props - let vendorBlockie = "" - if(this.state.newVendor){ - vendorBlockie = ( - - ) - } + render() { + let { buttonStyle, contracts, tx, web3, vendors } = this.props; - let adminBlockie = "" - if(this.state.newAdmin){ - adminBlockie = ( - - ) + let vendorBlockie = ""; + if (this.state.newVendor) { + vendorBlockie = ; } - let vendorDisplay = [] - for(let v in vendors){ + let vendorDisplay = []; + for (let v in vendors) { let vendorButton = ( - - ) - - - let vendorAllowedDisplay = "" - if(this.state.changingAllowed[v]){ - vendorAllowedDisplay = ( - - ) - }else if(vendors[v].isAllowed){ - vendorAllowedDisplay = ( - - ) - }else{ - vendorAllowedDisplay = ( - - ) + + ); + + let vendorAllowedDisplay; + if (this.state.changingAllowed[v]) { + vendorAllowedDisplay = ; + } else if (vendors[v].isAllowed) { + vendorAllowedDisplay = ; + } else { + vendorAllowedDisplay = ; } let vendorIsAllowed = ( - - ) - - - let vendorActiveDisplay = "" - if(this.state.changingAllowed[v]){ - vendorActiveDisplay = ( - - ) - }else if(vendors[v].isActive){ - vendorActiveDisplay = ( - - ) - }else{ - vendorActiveDisplay = ( - - ) + + ); + + let vendorActiveDisplay; + if (this.state.changingAllowed[v]) { + vendorActiveDisplay = ; + } else if (vendors[v].isActive) { + vendorActiveDisplay = ; + } else { + vendorActiveDisplay = ; } let vendorIsActive = ( - - ) - - + + ); vendorDisplay.push( -
-
- -
-
+ + + + + {vendorButton} -
-
+ + {vendorIsActive} -
-
+ + {vendorIsAllowed} -
-
- ) - } - - /* - let addAdminText = ( - - {i18next.t('admin.add_admin')} - - ) - if(this.state.addingAdmin){ - addAdminText = ( - - {i18next.t('admin.adding')} - - ) - }*/ - - let addVendorText = ( - - {i18next.t('admin.add_vendor')} - - ) - if(this.state.addingVendor){ - addVendorText = ( - - {i18next.t('admin.adding')} - - ) + + + ); } + let addVendorText = this.state.addingVendor + ? <> {i18next.t('admin.adding')} + : <> {i18next.t('admin.add_vendor')}; return ( -
- + {vendorDisplay} -
-
+ + {vendorBlockie} -
-
- this.setState({newVendor:event.target.value})} /> -
-
- this.setState({newVendorName:event.target.value})} /> -
-
- -
-
- -
- ) + + + + this.setState({ newVendor: event.target.value })} + /> + + + + + this.setState({ newVendorName: event.target.value })} + /> + + + + + + + + ); } } -/* -
-
- {adminBlockie} -
-
- this.setState({newAdmin:event.target.value})} /> -
-
- -
-
- */ diff --git a/src/components/Advanced.js b/src/components/Advanced.js index 74b54ad16..ac3d22491 100644 --- a/src/components/Advanced.js +++ b/src/components/Advanced.js @@ -7,6 +7,10 @@ import { Button, OutlineButton, Input, + Flex, + Box, + Text, + Card, QR as QRCode } from 'rimble-ui' @@ -30,58 +34,56 @@ export default class Advanced extends React.Component { let qrSize = Math.min(document.documentElement.clientWidth,512)-90 let qrValue = url+"/#"+privateKey let privateKeyQrDisplay = "" - if(this.state.privateKeyQr){ + if (this.state.privateKeyQr) { privateKeyQrDisplay = ( -
-
- -
-
- ) + + + + + + ); } - let showingQr = "" - if(this.state.showingQr){ + let showingQr = ""; + if (this.state.showingQr) { showingQr = ( -
-
- -
-
- ) + + + + + + ); } + let inputPrivateEyeButton = null; + let inputPrivateWidth = 4 / 12; - let inputPrivateEyeButton = "" - let inputPrivateSize = "col-4 p-1" - - if(this.state.newPrivateKey){ + if (this.state.newPrivateKey) { inputPrivateEyeButton = ( -
- -
- ) - }else{ - inputPrivateSize = "col-6 p-1" + + ); + } else { + inputPrivateWidth = 6 / 12; } let inputPrivateKeyRow = ( -
-
+ + this.setState({newPrivateKey:event.target.value})} + value={this.state.newPrivateKey || ''} + onChange={event => this.setState({ newPrivateKey: event.target.value })} /> -
+ {inputPrivateEyeButton} -
+ -
-
- ) - + + + ); - let inputSeedEyeButton = "" - let inputSeedSize = "col-4 p-1" + let inputSeedEyeButton = null; + let inputSeedWidth = 4 / 12; - if(this.state.newSeedPhrase){ + if (this.state.newSeedPhrase) { inputSeedEyeButton = ( -
- -
- ) - }else{ - inputSeedSize = "col-6 p-1" + + ); + } else { + inputSeedWidth = 6 / 12; } let inputSeedRow = ( -
-
+ + this.setState({newSeedPhrase:event.target.value})} + value={this.state.newSeedPhrase || ''} + onChange={event => this.setState({ newSeedPhrase: event.target.value })} /> -
+ {inputSeedEyeButton} -
+ -
-
- ) + + + ); return ( -
- - - -
- + + + Learn More + + + + + + {i18n.t('code')} + + + + + + + + + {i18n.t('about')} + + + + + + +
{privateKey && !isVendor && -
-
Private Key
-
- -
- -
- - -
changeAlert({type: 'success', message: 'Private Key copied to clipboard'})}> - -
- - -
-
+ + + changeAlert({ type: 'success', message: 'Private Key copied to clipboard' })}> + + + + {privateKeyQrDisplay} -
- -
+ } {privateKey && -
-
-
- -
-
-
-
} - - -
Create Account
+ +
+ + } + Create Account {inputPrivateKeyRow} - {inputSeedRow} -
-
Extra Tools
+
+ Extra Tools -
-
+ + this.setState({newQr:event.target.value})} + value={this.state.newQr || ''} + onChange={event => this.setState({ newQr: event.target.value })} /> -
-
- -
-
+ + {showingQr} {isVendor && -
-
-
- -
-
-
+ + + } - -
- ) + + ); } } diff --git a/src/components/BottomLinks.js b/src/components/BottomLinks.js index 1d28d4763..085878302 100644 --- a/src/components/BottomLinks.js +++ b/src/components/BottomLinks.js @@ -1,16 +1,20 @@ import React from 'react'; import { Scaler } from "dapparatus"; +import { Box, OutlineButton } from 'rimble-ui'; import i18n from '../i18n'; -export default ({changeView}) => { + +export default ({ changeView }) => { return ( -
- - + + + { changeView('advanced'); }} + > + {i18n.t('advance')} + -
- ) + + ); }; diff --git a/src/components/BurnWallet.js b/src/components/BurnWallet.js index 8c1950f0b..e90a42e83 100644 --- a/src/components/BurnWallet.js +++ b/src/components/BurnWallet.js @@ -1,39 +1,44 @@ import React from 'react'; import Ruler from "./Ruler"; -import Balance from "./Balance"; import i18n from '../i18n'; - - - -export default ({mainStyle, address, balance, burnWallet, goBack, dollarDisplay}) => { - +import { + Box, + Button, + Flex, + Text +} from 'rimble-ui'; + +export default ({ mainStyle, goBack, burnWallet }) => { return ( - -
-
+ + {i18n.t('burn_wallet.burn_private_key_question')} -
-
+ + {i18n.t('burn_wallet.disclaimer')} -
-
- -
- -
- -
- -
- -
-
-
- -
- ) -} + + + + + + + + + + + + ); +}; diff --git a/src/components/CashOut.js b/src/components/CashOut.js index 525f59569..0c9c08e58 100644 --- a/src/components/CashOut.js +++ b/src/components/CashOut.js @@ -1,10 +1,14 @@ -import React, { Component } from 'react'; -import { Scaler } from "dapparatus"; -let interval +import React, { Component } from 'react'; +import { + Box, + Button, + Field, + Input +} from 'rimble-ui'; -const OFFRAMPACCOUNT = "0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF" +const OFFRAMPACCOUNT = "0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF"; -class App extends Component { +class CashOut extends Component { constructor(props) { super(props); this.state = {}; @@ -16,40 +20,33 @@ class App extends Component { render() { return ( -
-
- -
-
- - - -
-
-
$
-
- + + + { this.amountInput = input; }} - onChange={event => this.updateState('amount', event.target.value)} /> -
-
-
- - -
-
- ) + onChange={event => this.updateState('amount', event.target.value)} + /> + + + + + ); } } -export default App; + +export default CashOut; diff --git a/src/components/Exchange.js b/src/components/Exchange.js index 82d66b031..d2f950bfa 100644 --- a/src/components/Exchange.js +++ b/src/components/Exchange.js @@ -18,7 +18,8 @@ import { OutlineButton, Icon, Input, - Field + Field, + Card } from 'rimble-ui' import Wyre from '../services/wyre'; @@ -180,8 +181,7 @@ export default class Exchange extends React.Component { let extraGasUpDisplay = (
You have DAI but no ETH for gas:
- +
) @@ -827,15 +827,12 @@ export default class Exchange extends React.Component { if(this.props.ERC20TOKEN){ if(xdaiToDendaiMode=="sending" || xdaiToDendaiMode=="withdrawing" || xdaiToDendaiMode=="depositing"){ xdaiToDendaiDisplay = ( -
- -
+ + + {this.state.loaderBarStatusText} -
-
+ + ) }else if(xdaiToDendaiMode=="deposit"){ @@ -843,40 +840,35 @@ export default class Exchange extends React.Component { //console.log("CHECKING META ACCOUNT ",this.state.xdaiMetaAccount,this.props.network) if(!this.state.xdaiMetaAccount && (this.props.network!="xDai"&&this.props.network!="Unknown")){ xdaiToDendaiDisplay = ( - + + ) }else{ xdaiToDendaiDisplay = ( -
+ -
+ -
-
+ + -
-
-
$
-
- this.updateState('amount', event.target.value)} /> -
+ this.updateState('amount', event.target.value)} /> -
-
+ + {xdaiCancelButton} -
-
- + -
-
+ + ) } }else if(xdaiToDendaiMode=="withdraw"){ console.log("CHECKING META ACCOUNT ",this.state.xdaiMetaAccount,this.props.network) if(!this.state.xdaiMetaAccount && (this.props.network!="xDai"&&this.props.network!="Unknown")){ xdaiToDendaiDisplay = ( - + + ) }else{ @@ -967,43 +959,38 @@ export default class Exchange extends React.Component { if(!this.props.isAdmin && (!this.props.isVendor || !this.props.isVendor.isAllowed)){ extraWithdrawInfo = ( -
-
+ + Maximum withdrawal amount: {this.props.dollarDisplay(this.state.maxWithdrawlAmount)} -
-
+ + ({this.state.withdrawalExplanation}) -
-
+ + ) } xdaiToDendaiDisplay = ( -
-
+ + -
+ -
-
+ + -
-
-
$
-
- this.updateState('amount', event.target.value)} /> -
+ this.updateState('amount', event.target.value)} /> -
-
+ + {xdaiCancelButton} -
-
- + -
-
+ + {extraWithdrawInfo} -
+ ) } }else{ @@ -1083,28 +1070,28 @@ export default class Exchange extends React.Component { xdaiToDendaiDisplay = ( -
+ -
- -
+ + -
- -
-
+ + + ) } @@ -1115,33 +1102,33 @@ export default class Exchange extends React.Component { tokenDisplay = (
-
-
+ + -
-
+ + {this.props.ERC20NAME} -
-
+ + {this.props.dollarDisplay(this.state.denDaiBalance)} -
-
- -
+ + -
+ -
+ {xdaiToDendaiDisplay} -
+
) } @@ -1150,65 +1137,60 @@ export default class Exchange extends React.Component { //console.log("daiToXdaiMode",daiToXdaiMode) if(daiToXdaiMode=="sending" || daiToXdaiMode=="withdrawing" || daiToXdaiMode=="depositing"){ daiToXdaiDisplay = ( -
- -
+ + + {this.state.loaderBarStatusText} -
-
+ + ) }else if(daiToXdaiMode=="deposit"){ if(!this.state.mainnetMetaAccount && this.props.network!="Mainnet"){ daiToXdaiDisplay = ( - + + ) }else if(this.props.ethBalance<=0){ daiToXdaiDisplay = ( - + + ) }else{ daiToXdaiDisplay = ( -
-
+ + -
-
+ + -
- this.updateState('amount', event.target.value)} /> -
-
-
+ + {daiCancelButton} -
-
+ + -
-
+ + ) } } else if(daiToXdaiMode=="withdraw"){ console.log("CHECKING META ACCOUNT ",this.state.xdaiMetaAccount,this.props.network) if(!this.state.xdaiMetaAccount && this.props.network!="xDai"){ daiToXdaiDisplay = ( -
- -
+ + ) }else{ daiToXdaiDisplay = ( -
+ -
+ -
-
+ + -
- this.updateState('amount', event.target.value)} /> -
-
-
+ + {daiCancelButton} -
-
+ + -
-
+ + ) } } else { @@ -1414,55 +1394,50 @@ export default class Exchange extends React.Component { if(ethToDaiMode=="sending" || ethToDaiMode=="depositing" || ethToDaiMode=="withdrawing"){ ethToDaiDisplay = ( -
- -
+ + + {this.state.loaderBarStatusText} -
-
+ + ) }else if(ethToDaiMode=="deposit"){ if(!this.state.mainnetMetaAccount && this.props.network!="Mainnet"){ ethToDaiDisplay = ( - + + ) }else{ ethToDaiDisplay = ( -
+ -
+ -
-
+ + -
- this.updateState('amount', event.target.value)} /> -
-
-
+ + {ethCancelButton} -
-
+ + -
-
+ + ) } }else if(ethToDaiMode=="withdraw"){ if(!this.state.mainnetMetaAccount && this.props.network!="Mainnet"){ ethToDaiDisplay = ( - + + ) }else if(this.props.ethBalance<=0){ ethToDaiDisplay = ( - + + ) }else{ ethToDaiDisplay = ( -
+ -
+ -
-
+ + -
- this.updateState('amount', event.target.value)} /> -
-
-
+ + {ethCancelButton} -
-
+ + -
-
+ + ) } @@ -1936,7 +1909,7 @@ export default class Exchange extends React.Component {
{ this.state.daiSendToAddress && this.state.daiSendToAddress.length==42 && } -
+ ) sendDaiButton = ( - + ) } @@ -1997,8 +1970,9 @@ export default class Exchange extends React.Component { ) let fundByWyreButton = ( - + ) @@ -2054,7 +2035,7 @@ export default class Exchange extends React.Component {
{ this.state.ethSendToAddress && this.state.ethSendToAddress.length==42 && } -
+ ) sendEthButton = ( - + ) } @@ -2155,7 +2136,7 @@ export default class Exchange extends React.Component { this.updateState('xdaiSendToAddress', event.target.value)} @@ -2163,13 +2144,13 @@ export default class Exchange extends React.Component {
{ this.state.xdaiSendToAddress && this.state.xdaiSendToAddress.length==42 && } -
+ this.updateState('xdaiSendAmount', event.target.value)} @@ -2193,13 +2174,13 @@ export default class Exchange extends React.Component { ) sendXdaiButton = ( - + ) } @@ -2210,99 +2191,84 @@ export default class Exchange extends React.Component { {tokenDisplay} -
-
+ + -
-
+ + xDai -
-
+ + {this.props.dollarDisplay(this.props.xdaiBalance)} -
-
+ + {sendXdaiButton} -
+ -
+ {sendXdaiRow} -
+ {daiToXdaiDisplay} -
+ -
-
+ + -
-
+ + DAI -
-
+ + {this.props.dollarDisplay(this.props.daiBalance)} -
-
+ + {sendDaiButton} -
-
+ + {sendDaiRow} -
+ {ethToDaiDisplay} -
+ -
-
+ + -
-
+ + ETH -
-
+ + {this.props.dollarDisplay(this.props.ethBalance*this.props.ethprice)} -
-
+ + {sendEthButton} -
-
+ + { (window.location.hostname.indexOf("localhost") >= 0 || window.location.hostname.indexOf("wyre.xdai.io") >= 0 || window.location.hostname.indexOf("s.xdai.io") >= 0) && ( -
-
-
+ + + -
-
+ + Wyre -
-
- {/*
-
-
$
-
- - this.updateState('wyreFundAmount', event.target.value) - } - /> -
*/} -
+ + +
-
-
+ + {fundByWyreButton} -
-
-
+ + + )} diff --git a/src/components/Footer.js b/src/components/Footer.js index 78160e6e2..f2c7489a7 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -1,11 +1,34 @@ import React from 'react'; +import { Box, Text } from 'rimble-ui'; + +const alertColors = { + success: { bg: '#e6f7ee', color: '#1a7f4b' }, + warning: { bg: '#fff8e6', color: '#9a6b00' }, + danger: { bg: '#fdecea', color: '#b42318' }, + info: { bg: '#eef4ff', color: '#175cd3' }, +}; + +export default ({ alert, changeAlert }) => { + const palette = alertColors[alert.type] || alertColors.info; -export default ({alert, changeAlert}) => { return ( -
changeAlert(null)}> -
- {alert.message} -
-
- ) + changeAlert(null)} + textAlign="center" + p={3} + > + + {alert.message} + + + ); }; diff --git a/src/components/History.js b/src/components/History.js index fe9c1bd57..7d03154f9 100644 --- a/src/components/History.js +++ b/src/components/History.js @@ -8,6 +8,12 @@ import {toArray} from 'react-emoji-render'; import Ruler from "./Ruler"; import {CopyToClipboard} from "react-copy-to-clipboard"; import i18next from 'i18next'; +import { + Box, + Button, + Flex, + Input +} from 'rimble-ui'; const QRCode = require('qrcode.react'); const Transaction = require("ethereumjs-tx") const EthUtil = require('ethereumjs-util') @@ -196,7 +202,7 @@ export default class History extends React.Component { txns.push(
-
+
{isEncrypted} {cleanTime((block-theseTransactionsByAddress[r].blockNumber)*5)} ago
@@ -211,14 +217,14 @@ export default class History extends React.Component {
{messageValue} -
+
) }else{ txns.push(
-
+
{cleanTime((block-theseTransactionsByAddress[r].blockNumber)*5)} ago
@@ -228,7 +234,7 @@ export default class History extends React.Component {
-
+
) } @@ -245,7 +251,7 @@ export default class History extends React.Component { txns.push(
-
+
{isEncrypted} {cleanTime((block-theseTransactionsByAddress[r].blockNumber)*5)} ago
@@ -260,14 +266,14 @@ export default class History extends React.Component {
{messageValue} -
+ ) }else{ txns.push(
-
+
{cleanTime((block-theseTransactionsByAddress[r].blockNumber)*5)} ago
@@ -277,203 +283,161 @@ export default class History extends React.Component {
-
+
) } } } - let sendChatButton = "" - let sendFundsButton = "" - if(this.state.sendingChat){ + let sendChatButton; + if (this.state.sendingChat) { sendChatButton = ( - - ) - sendFundsButton = ( - - ) - }else{ + + ); + } else { sendChatButton = ( - - ) - sendFundsButton = ( - - ) + - ) - }else if(this.props.metaAccount){ + + ); + } else if (this.props.metaAccount) { waveButton = ( - - ) - }else{ + + ); + } else { waveButton = ( - - ) + + ); } - /* -
- -
- */ - let sendForm - - let placeholder="unencrypted public chat..." - if(this.state["publicKey_"+target]){ - placeholder = "encrypted chat..." + let sendForm; + let placeholder = "unencrypted public chat..."; + if (this.state["publicKey_" + target]) { + placeholder = "encrypted chat..."; } let chatInput = ( - { this.nameInput = input; }} onKeyDown={this.onKeyDown} - onChange={event => this.setState({newChat:event.target.value})} + onChange={event => this.setState({ newChat: event.target.value })} /> - ) + ); - if(this.state.sendingFunds){ + if (this.state.sendingFunds) { sendForm = ( -
-
-
-
{ - this.setState({sendingFunds:false},()=>{ - setTimeout(()=>{ - this.nameInput.focus(); - },250) - }) - }}> -
$
-
- { this.amountInput = input; }} - onChange={event => this.setState({newChatAmount:event.target.value})} - /> -
-
-
- {chatInput} -
-
- {sendChatButton} -
-
- ) - }else{ + + + { this.amountInput = input; }} + onChange={event => this.setState({ newChatAmount: event.target.value })} + onClick={() => { + this.setState({ sendingFunds: false }, () => { + setTimeout(() => { this.nameInput.focus(); }, 250); + }); + }} + /> + + {chatInput} + {sendChatButton} + + ); + } else { sendForm = ( -
-
- -
-
- {chatInput} -
-
- {sendChatButton} -
-
- ) + + +