oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

refactor popover

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-04-05 15:39:32 +02:00
parent 25f8c80370
commit 1e1dac4f8f
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 30 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
client/src/components/molecules/AccountStatus/Popover.tsx
View File

@ -1,59 +1,52 @@
import React from 'react' import React, { PureComponent } from 'react'
import { User } from '../../../context/User' import { User } from '../../../context/User'
import styles from './Popover.module.scss' import styles from './Popover.module.scss'
const Popover = ({ export default class Popover extends PureComponent<{
forwardedRef,
style
}: {
forwardedRef: (ref: HTMLElement | null) => void forwardedRef: (ref: HTMLElement | null) => void
style: React.CSSProperties style: React.CSSProperties
}) => ( }> {
<div className={styles.popover} ref={forwardedRef} style={style}> public render() {
<User.Consumer> const { account, balance, network } = this.context
{states => return (
states.account && <div
states.balance && ( className={styles.popover}
ref={this.props.forwardedRef}
style={this.props.style}
>
{account && balance && (
<div className={styles.popoverInfoline}> <div className={styles.popoverInfoline}>
<span <span
className={styles.balance} className={styles.balance}
title={(states.balance.eth / 1e18).toFixed(10)} title={(balance.eth / 1e18).toFixed(10)}
> >
<strong> <strong>
{(states.balance.eth / 1e18) {(balance.eth / 1e18).toFixed(3).slice(0, -1)}
.toFixed(3)
.slice(0, -1)}
</strong>{' '} </strong>{' '}
ETH ETH
</span> </span>
<span className={styles.balance}> <span className={styles.balance}>
<strong>{states.balance.ocn}</strong> OCEAN <strong>{balance.ocn}</strong> OCEAN
</span> </span>
</div> </div>
) )}
}
</User.Consumer>
<div className={styles.popoverInfoline}> <div className={styles.popoverInfoline}>
<User.Consumer> {account ? (
{states => <span className={styles.address} title={account}>
states.account ? ( {account}
<span className={styles.address} title={states.account}>
{states.account}
</span> </span>
) : ( ) : (
<em>No account selected</em> <em>No account selected</em>
) )}
} </div>
</User.Consumer>
</div>
<div className={styles.popoverInfoline}> <div className={styles.popoverInfoline}>
<User.Consumer> {network && network}
{states => states.network && states.network} </div>
</User.Consumer> </div>
</div> )
</div> }
) }
export default Popover Popover.contextType = User