m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 12:29:06 +01:00
Code

Connected status indicator (#8270)

Browse Source 
Co-authored-by: Whymarrh Whitby <whymarrh.whitby@gmail.com>
This commit is contained in:
Dan J Miller 2020-04-01 16:14:59 -02:30 committed by GitHub
parent 9901a39961
commit 3f38451f3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 145 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/_locales/en/messages.json
View File

@ -1324,6 +1324,12 @@
"stateLogError": {
"message": "Error in retrieving state logs."
},
"statusConnected": {
"message": "Connected"
},
"statusNotConnected": {
"message": "Not connected"
},
"step1HardwareWallet": {
"message": "1. Connect Hardware Wallet"
},

62
ui/app/components/app/connected-status-indicator/connected-status-indicator.component.js Normal file
View File

@ -0,0 +1,62 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
import {
STATUS_CONNECTED,
STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
STATUS_NOT_CONNECTED,
} from '../../../helpers/constants/connected-sites'
export default class ConnectedStatusIndicator extends Component {
static contextTypes = {
t: PropTypes.func,
}
static propTypes = {
status: PropTypes.oneOf([ STATUS_CONNECTED, STATUS_CONNECTED_TO_ANOTHER_ACCOUNT, STATUS_NOT_CONNECTED ]),
}
static defaultProps = {
status: STATUS_NOT_CONNECTED,
}
renderStatusCircle = () => {
const { status } = this.props
return (
<div className={classnames({
'connected-status-indicator__green-circle': status === STATUS_CONNECTED,
'connected-status-indicator__yellow-circle': status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
'connected-status-indicator__grey-circle': status === STATUS_NOT_CONNECTED,
})}
/>
)
}
renderStatusText = () => {
const { t } = this.context
const { status } = this.props
const text = status === STATUS_CONNECTED
? t('statusConnected')
: t('statusNotConnected')
return (
<div className="connected-status-indicator__text">{ text }</div>
)
}
render () {
return (
<div className={classnames('connected-status-indicator', {
invisible: getEnvironmentType() !== ENVIRONMENT_TYPE_POPUP,
})}
>
{ this.renderStatusCircle() }
{ this.renderStatusText() }
</div>
)
}
}

38
ui/app/components/app/connected-status-indicator/connected-status-indicator.container.js Normal file
View File

@ -0,0 +1,38 @@
import { findKey } from 'lodash'
import { connect } from 'react-redux'
import ConnectedStatusIndicator from './connected-status-indicator.component'
import {
STATUS_CONNECTED,
STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
STATUS_NOT_CONNECTED,
} from '../../../helpers/constants/connected-sites'
import {
getAddressConnectedDomainMap,
getOriginOfCurrentTab,
getSelectedAddress,
} from '../../../selectors/selectors'
const mapStateToProps = (state) => {
const selectedAddress = getSelectedAddress(state)
const addressConnectedDomainMap = getAddressConnectedDomainMap(state)
const originOfCurrentTab = getOriginOfCurrentTab(state)
const selectedAddressDomainMap = addressConnectedDomainMap[selectedAddress]
const currentTabIsConnectedToSelectedAddress = Boolean(selectedAddressDomainMap && selectedAddressDomainMap[originOfCurrentTab])
let status
if (currentTabIsConnectedToSelectedAddress) {
status = STATUS_CONNECTED
} else if (findKey(addressConnectedDomainMap, originOfCurrentTab)) {
status = STATUS_CONNECTED_TO_ANOTHER_ACCOUNT
} else {
status = STATUS_NOT_CONNECTED
}
return {
status,
}
}
export default connect(mapStateToProps)(ConnectedStatusIndicator)

1
ui/app/components/app/connected-status-indicator/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './connected-status-indicator.container'

30
ui/app/components/app/connected-status-indicator/index.scss Normal file
View File

@ -0,0 +1,30 @@
.connected-status-indicator {
display:flex;
align-items: center;
position: absolute;
left: 22px;
&__green-circle, &__yellow-circle, &__grey-circle {
border-radius: 4px;
height: 8px;
width: 8px;
}
&__green-circle {
background: #4CD964;
}
&__yellow-circle {
background: #FFD33D;
}
&__grey-circle {
background: $Grey-100;
}
&__text {
font-size: 10px;
color: $Grey-500;
margin-left: 8px;
}
}

2
ui/app/components/app/index.scss
View File

@ -91,3 +91,5 @@
@import '../ui/circle-icon/index';
@import '../ui/alert-circle-icon/index';
@import './connected-status-indicator/index'

3
ui/app/components/app/menu-bar/menu-bar.component.js
View File

@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Tooltip from '../../ui/tooltip'
import SelectedAccount from '../selected-account'
import ConnectedStatusIndicator from '../connected-status-indicator'
import AccountDetailsDropdown from '../dropdowns/account-details-dropdown.js'
export default class MenuBar extends PureComponent {
@ -18,6 +19,8 @@ export default class MenuBar extends PureComponent {
return (
<div className="menu-bar">
<ConnectedStatusIndicator />
<SelectedAccount />
<Tooltip

3
ui/app/helpers/constants/connected-sites.js Normal file
View File

@ -0,0 +1,3 @@
export const STATUS_CONNECTED = 'STATUS_CONNECTED'
export const STATUS_CONNECTED_TO_ANOTHER_ACCOUNT = 'STATUS_CONNECTED_TO_ANOTHER_ACCOUNT'
export const STATUS_NOT_CONNECTED = 'STATUS_NOT_CONNECTED'