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