+
+
+ {networkName}
+
Network
{url}
@@ -49,29 +53,38 @@ export const NetworkDetails = ({
{networkTitle} Address
-
+
{address.slice(0, 27).concat('...')}
-
-
-
-
-
+ {displayCopyIcon && (
+
+
+
+
+
+ )}
{displayBridgeLimits && (
Remaining Daily {currency} Quota
-
- {numeral(maxCurrentLimit).format('0,0.0', Math.floor)} {currency}
-
+
+ {numeral(maxCurrentLimit).format('0,0.0', Math.floor)}
+ {' ' + currency}
+
)}
{displayBridgeLimits && (
Maximum Amount Per Transaction
- {numeral(maxPerTx).format('0,0.0', Math.floor)} {currency}
+ {numeral(maxPerTx).format('0,0.0', Math.floor)}
+ {' ' + currency}
)}
@@ -79,7 +92,8 @@ export const NetworkDetails = ({
Minimum Amount Per Transaction
- {numeral(minPerTx).format('0,0.000', Math.floor)} {currency}
+ {numeral(minPerTx).format('0,0.000', Math.floor)}
+ {' ' + currency}
)}
@@ -87,33 +101,44 @@ export const NetworkDetails = ({
Token Address
-
+
{tokenAddress.slice(0, 27).concat('...')}
-
-
-
-
-
+ {displayCopyIcon && (
+
+
+
+
+
+ )}
)}
{displayTokenAddress && (
Token Name
- {tokenName || 'No token name'}
+
+ {tokenName || 'No token name'}
+
)}
{totalTitle}
- {numeral(totalAmount).format('0,0.000', Math.floor)} {currency}
+ {numeral(totalAmount).format('0,0.000', Math.floor)}
+ {' ' + currency}
Your {currency} Balance
- {formattedBalance} {currency}
+ {formattedBalance}
+ {' ' + currency}
diff --git a/ui/src/components/ProgressRing.js b/ui/src/components/ProgressRing.js
index 2fc82580..cdd2b96b 100644
--- a/ui/src/components/ProgressRing.js
+++ b/ui/src/components/ProgressRing.js
@@ -8,13 +8,22 @@ export class ProgressRing extends Component {
render() {
const { radius, stroke, progress, confirmationNumber, hideConfirmationNumber } = this.props
+ const { REACT_APP_UI_STYLES } = process.env
const { circumference, normalizedRadius } = this.state
const strokeDashoffset = circumference - (progress / 100) * circumference
const confirmations = hideConfirmationNumber ? '' : `${confirmationNumber}/8`
+ const strokeColor = REACT_APP_UI_STYLES === 'stake' ? '#E6ECF1' : '#7b5ab2'
+ const strokeProgressColor = REACT_APP_UI_STYLES === 'stake' ? '#4DA9A6' : '#60dc97'
+ const textParams =
+ REACT_APP_UI_STYLES === 'stake'
+ ? { x: '22', y: '38', font: 'Roboto', fontSize: '14', fill: '#242A31' }
+ : { x: '28', y: '47', font: 'Nunito', fontSize: '18', fill: 'white' }
+ const progressTransform = REACT_APP_UI_STYLES === 'stake' ? 'rotate(-90 33 33)' : ''
+
return (
diff --git a/ui/src/components/SocialIcons.js b/ui/src/components/SocialIcons.js
index c9c12225..83df892d 100644
--- a/ui/src/components/SocialIcons.js
+++ b/ui/src/components/SocialIcons.js
@@ -1,23 +1,36 @@
import React from 'react'
-import { IconGithub, IconPOA, IconTelegram, IconTwitter } from './social-icons'
+import {
+ AlternativeIconGithub,
+ AlternativeIconTelegram,
+ AlternativeIconTwitter,
+ IconGithub,
+ IconPOA,
+ IconTelegram,
+ IconTwitter,
+ IconXDai
+} from './social-icons'
export const SocialIcons = () => {
+ const { REACT_APP_UI_STYLES } = process.env
+ const useAlternativeIcons = REACT_APP_UI_STYLES === 'stake'
+ const iconClass = useAlternativeIcons ? 'social-alternative-icons-item' : 'social-icons-item'
+
const socialItems = [
{
- icon:
,
- link: 'https://poa.network'
+ icon: useAlternativeIcons ?
:
,
+ link: useAlternativeIcons ? 'https://xdaichain.com/' : 'https://poa.network'
},
{
- icon:
,
- link: 'https://twitter.com/poanetwork'
+ icon: useAlternativeIcons ?
:
,
+ link: useAlternativeIcons ? 'https://twitter.com/xdaichain' : 'https://twitter.com/poanetwork'
},
{
- icon:
,
- link: 'https://t.me/poa_network'
+ icon: useAlternativeIcons ?
:
,
+ link: useAlternativeIcons ? 'https://t.me/xdaistable' : 'https://t.me/poa_network'
},
{
- icon:
,
- link: 'https://github.com/poanetwork/tokenbridge'
+ icon: useAlternativeIcons ?
:
,
+ link: useAlternativeIcons ? 'https://github.com/xdaichain' : 'https://github.com/poanetwork/tokenbridge'
}
]
@@ -25,7 +38,7 @@ export const SocialIcons = () => {
{socialItems.map((item, index) => {
return (
-
+
{item.icon}
)
diff --git a/ui/src/components/StatusPage.js b/ui/src/components/StatusPage.js
index ab742e2c..621e526c 100644
--- a/ui/src/components/StatusPage.js
+++ b/ui/src/components/StatusPage.js
@@ -6,6 +6,7 @@ import { inject, observer } from 'mobx-react'
import { isMediatorMode } from 'commons'
import { formatDistanceStrict } from 'date-fns'
import { DataBlock } from './DataBlock'
+import { getDateColor } from './utils/date'
@inject('RootStore')
@observer
@@ -28,6 +29,8 @@ export class StatusPage extends React.Component {
let fromForeignToHomeText
let lastEventOnHome
let lastEventOnForeign
+ let lastEventOnHomeColor
+ let lastEventOnForeignColor
if (displayLatestOperations) {
fromHomeToForeignText = `From ${homeStore.networkName} To ${foreignStore.networkName}`
fromForeignToHomeText = `From ${foreignStore.networkName} To ${homeStore.networkName}`
@@ -36,11 +39,13 @@ export class StatusPage extends React.Component {
lastEventOnHome = formatDistanceStrict(lastDateOnHome, new Date(), {
addSuffix: true
})
+ lastEventOnHomeColor = getDateColor(lastDateOnHome)
const lastDateOnForeign = new Date(0).setUTCSeconds(foreignStore.lastEventRelayedOnForeign)
lastEventOnForeign = formatDistanceStrict(lastDateOnForeign, new Date(), {
addSuffix: true
})
+ lastEventOnForeignColor = getDateColor(lastDateOnForeign)
}
return (
@@ -70,8 +75,18 @@ export class StatusPage extends React.Component {
Latest Operations
-
-
+
+
)}
diff --git a/ui/src/components/TransferAlert.js b/ui/src/components/TransferAlert.js
index 6a10b59a..97dc9f5e 100644
--- a/ui/src/components/TransferAlert.js
+++ b/ui/src/components/TransferAlert.js
@@ -15,16 +15,17 @@ export const TransferAlert = ({
fee,
reverse
}) => {
+ const { REACT_APP_UI_STYLES } = process.env
const formattedFromAmount = numeral(fromAmount).format('0,0[.][000000000000000000]', Math.floor)
const formattedToAmount = numeral(toAmount).format('0,0[.][000000000000000000]', Math.floor)
return (
-
+
-
+
@@ -39,11 +40,35 @@ export const TransferAlert = ({
+
+ Confirm Transfer
+
+
+
+
+
+ {formattedFromAmount} {fromCurrency}
+
+
{from}
+
+
+
+
+ {formattedToAmount} {toCurrency}
+
+
{to}
+
+
+
{fee && `Fee: ${fee.toString()}%`}
- Please confirm that you would like to send {formattedFromAmount} {fromCurrency} from {from}{' '}
- to receive {formattedToAmount} {toCurrency} on {to}.
+ Please confirm that you would like to send {formattedFromAmount} {fromCurrency} from {from} to receive{' '}
+ {formattedToAmount} {toCurrency} on {to}.