+ { statusToTextHash[statusKey] === 'pending' ?
: null }
(
export default class Identicon extends PureComponent {
static propTypes = {
+ addBorder: PropTypes.bool,
address: PropTypes.string,
className: PropTypes.string,
diameter: PropTypes.number,
@@ -70,7 +71,7 @@ export default class Identicon extends PureComponent {
}
render () {
- const { className, address, image, diameter, useBlockie } = this.props
+ const { className, address, image, diameter, useBlockie, addBorder } = this.props
if (image) {
return this.renderImage()
@@ -83,9 +84,11 @@ export default class Identicon extends PureComponent {
return this.renderJazzicon()
}
- return useBlockie
- ? this.renderBlockie()
- : this.renderJazzicon()
+ return (
+
+ { useBlockie ? this.renderBlockie() : this.renderJazzicon() }
+
+ )
}
return (
diff --git a/ui/app/components/ui/identicon/index.scss b/ui/app/components/ui/identicon/index.scss
index 657afc48f..4c8213f01 100644
--- a/ui/app/components/ui/identicon/index.scss
+++ b/ui/app/components/ui/identicon/index.scss
@@ -4,4 +4,17 @@
align-items: center;
justify-content: center;
overflow: hidden;
+
+ &__address-wrapper {
+ height: 40px;
+ width: 40px;
+ border-radius: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-style: solid;
+ border-radius: 50%;
+ border-width: 2px;
+ border-color: $curious-blue;
+ }
}
diff --git a/ui/app/components/ui/toggle-button/index.js b/ui/app/components/ui/toggle-button/index.js
new file mode 100644
index 000000000..7948d3ca1
--- /dev/null
+++ b/ui/app/components/ui/toggle-button/index.js
@@ -0,0 +1,2 @@
+import ToggleButton from './toggle-button.component'
+module.exports = ToggleButton
diff --git a/ui/app/components/ui/toggle-button/index.scss b/ui/app/components/ui/toggle-button/index.scss
new file mode 100644
index 000000000..868d416c8
--- /dev/null
+++ b/ui/app/components/ui/toggle-button/index.scss
@@ -0,0 +1,14 @@
+.toggle-button {
+ display: flex;
+
+ &__status-label {
+ font-family: Roboto;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 16px;
+ line-height: 23px;
+ display: flex;
+ align-items: center;
+ text-transform: uppercase;
+ }
+}
\ No newline at end of file
diff --git a/ui/app/components/ui/toggle-button/toggle-button.component.js b/ui/app/components/ui/toggle-button/toggle-button.component.js
new file mode 100644
index 000000000..3f13203a5
--- /dev/null
+++ b/ui/app/components/ui/toggle-button/toggle-button.component.js
@@ -0,0 +1,75 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ReactToggleButton from 'react-toggle-button'
+
+const trackStyle = {
+ width: '40px',
+ height: '24px',
+ padding: '0px',
+ borderRadius: '26px',
+ border: '2px solid rgb(3, 125, 214)',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+}
+
+const offTrackStyle = {
+ ...trackStyle,
+ border: '2px solid #8E8E8E',
+}
+
+const thumbStyle = {
+ width: '18px',
+ height: '18px',
+ display: 'flex',
+ boxShadow: 'none',
+ alignSelf: 'center',
+ borderRadius: '50%',
+ position: 'relative',
+}
+
+const colors = {
+ activeThumb: {
+ base: '#037DD6',
+ },
+ inactiveThumb: {
+ base: '#037DD6',
+ },
+ active: {
+ base: '#ffffff',
+ hover: '#ffffff',
+ },
+ inactive: {
+ base: '#DADADA',
+ hover: '#DADADA',
+ },
+}
+
+const ToggleButton = props => {
+ const { value, onToggle, offLabel, onLabel } = props
+
+ return (
+
+
+
{ value ? onLabel : offLabel }
+
-
- { t('newNetwork') }
-
-
-
-
this.setState({ newRpc: e.target.value })}
- onKeyPress={e => {
- if (e.key === 'Enter') {
- this.validateRpc(newRpc, chainId, ticker, nickname)
- }
- }}
- fullWidth
- margin="dense"
- />
- this.setState({ chainId: e.target.value })}
- onKeyPress={e => {
- if (e.key === 'Enter') {
- this.validateRpc(newRpc, chainId, ticker, nickname)
- }
- }}
- style={{
- display: this.state.showOptions ? null : 'none',
- }}
- fullWidth
- margin="dense"
- />
- this.setState({ ticker: e.target.value })}
- onKeyPress={e => {
- if (e.key === 'Enter') {
- this.validateRpc(newRpc, chainId, ticker, nickname)
- }
- }}
- style={{
- display: this.state.showOptions ? null : 'none',
- }}
- fullWidth
- margin="dense"
- />
- this.setState({ nickname: e.target.value })}
- onKeyPress={e => {
- if (e.key === 'Enter') {
- this.validateRpc(newRpc, chainId, ticker, nickname)
- }
- }}
- style={{
- display: this.state.showOptions ? null : 'none',
- }}
- fullWidth
- margin="dense"
- />
-
- {
- e.preventDefault()
- this.setState({ showOptions: !this.state.showOptions })
- }}
- >
- { t(this.state.showOptions ? 'hideAdvancedOptions' : 'showAdvancedOptions') }
-
-
-
-
-
-