mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
balance display tweaks
This commit is contained in:
parent
662b608148
commit
a6c2431cb1
17
src/App.tsx
17
src/App.tsx
|
@ -32,8 +32,10 @@ interface AppState {
|
||||||
isLoading: boolean
|
isLoading: boolean
|
||||||
isWeb3: boolean
|
isWeb3: boolean
|
||||||
account: string
|
account: string
|
||||||
balanceEth: number
|
balance: {
|
||||||
balanceOcn: number
|
eth: number
|
||||||
|
ocn: number
|
||||||
|
}
|
||||||
network: string
|
network: string
|
||||||
web3: Web3
|
web3: Web3
|
||||||
ocean: {}
|
ocean: {}
|
||||||
|
@ -77,8 +79,10 @@ class App extends Component<{}, AppState> {
|
||||||
isLogged: false,
|
isLogged: false,
|
||||||
isLoading: true,
|
isLoading: true,
|
||||||
isWeb3: false,
|
isWeb3: false,
|
||||||
balanceEth: 0,
|
balance: {
|
||||||
balanceOcn: 0,
|
eth: 0,
|
||||||
|
ocn: 0
|
||||||
|
},
|
||||||
network: '',
|
network: '',
|
||||||
web3: new Web3(
|
web3: new Web3(
|
||||||
new Web3.providers.HttpProvider(
|
new Web3.providers.HttpProvider(
|
||||||
|
@ -159,10 +163,7 @@ class App extends Component<{}, AppState> {
|
||||||
// TODO: squid-js balance retrieval fix
|
// TODO: squid-js balance retrieval fix
|
||||||
const accounts = await ocean.getAccounts()
|
const accounts = await ocean.getAccounts()
|
||||||
const balance = await accounts[0].getBalance()
|
const balance = await accounts[0].getBalance()
|
||||||
this.setState({
|
this.setState({ balance })
|
||||||
balanceEth: balance.eth,
|
|
||||||
balanceOcn: balance.ocn
|
|
||||||
})
|
|
||||||
// TODO: squid-js expose keeper for getNetworkName
|
// TODO: squid-js expose keeper for getNetworkName
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
Logger.log('ocean/balance error', e)
|
Logger.log('ocean/balance error', e)
|
||||||
|
|
|
@ -10,43 +10,29 @@ const Popover = ({
|
||||||
style: React.CSSProperties
|
style: React.CSSProperties
|
||||||
}) => (
|
}) => (
|
||||||
<div className={styles.popover} ref={forwardedRef} style={style}>
|
<div className={styles.popover} ref={forwardedRef} style={style}>
|
||||||
{/*
|
|
||||||
TODO: uncomment to show real balances,
|
|
||||||
and remove next infoline block with fake data
|
|
||||||
*/}
|
|
||||||
{/*
|
|
||||||
<User.Consumer>
|
<User.Consumer>
|
||||||
{states =>
|
{states =>
|
||||||
(states.balanceEth || states.balanceOcn) && (
|
states.account &&
|
||||||
|
states.balance && (
|
||||||
<div className={styles.popoverInfoline}>
|
<div className={styles.popoverInfoline}>
|
||||||
<span
|
<span
|
||||||
className={styles.balance}
|
className={styles.balance}
|
||||||
title={(states.balanceEth / 1e18).toFixed(10)}
|
title={(states.balance.eth / 1e18).toFixed(10)}
|
||||||
>
|
>
|
||||||
<strong>
|
<strong>
|
||||||
{(states.balanceEth / 1e18)
|
{(states.balance.eth / 1e18)
|
||||||
.toFixed(3)
|
.toFixed(3)
|
||||||
.slice(0, -1)}
|
.slice(0, -1)}
|
||||||
</strong>{' '}
|
</strong>{' '}
|
||||||
ETH
|
ETH
|
||||||
</span>
|
</span>
|
||||||
<span className={styles.balance}>
|
<span className={styles.balance}>
|
||||||
<strong>{states.balanceOcn}</strong> OCEAN
|
<strong>{states.balance.ocn}</strong> OCEAN
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</User.Consumer>
|
</User.Consumer>
|
||||||
*/}
|
|
||||||
|
|
||||||
<div className={styles.popoverInfoline}>
|
|
||||||
<span className={styles.balance} title="Fake data">
|
|
||||||
<strong>30</strong> ETH
|
|
||||||
</span>
|
|
||||||
<span className={styles.balance}>
|
|
||||||
<strong>2474290</strong> OCEAN
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.popoverInfoline}>
|
<div className={styles.popoverInfoline}>
|
||||||
<User.Consumer>
|
<User.Consumer>
|
||||||
|
@ -63,15 +49,9 @@ const Popover = ({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.popoverInfoline}>
|
<div className={styles.popoverInfoline}>
|
||||||
Fake Network Name
|
|
||||||
{/*
|
|
||||||
TODO: uncomment to show real network name
|
|
||||||
*/}
|
|
||||||
{/*
|
|
||||||
<User.Consumer>
|
<User.Consumer>
|
||||||
{states => states.network && states.network}
|
{states => states.network && states.network}
|
||||||
</User.Consumer>
|
</User.Consumer>
|
||||||
*/}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
@ -7,8 +7,10 @@ export const User = React.createContext({
|
||||||
account: '',
|
account: '',
|
||||||
web3: {},
|
web3: {},
|
||||||
ocean: {},
|
ocean: {},
|
||||||
balanceEth: 0,
|
balance: {
|
||||||
balanceOcn: 0,
|
eth: 0,
|
||||||
|
ocn: 0
|
||||||
|
},
|
||||||
network: '',
|
network: '',
|
||||||
startLogin: () => {
|
startLogin: () => {
|
||||||
/* empty */
|
/* empty */
|
||||||
|
|
Loading…
Reference in New Issue
Block a user