47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
import React, { PureComponent } from 'react'
|
|
import { Link } from '@reach/router'
|
|
import { AppContext } from '../store/createContext'
|
|
import Welcome from '../components/Welcome'
|
|
import Total from '../components/Total'
|
|
import Account from '../components/Account'
|
|
import Ticker from '../components/Ticker'
|
|
import Spinner from '../components/Spinner'
|
|
import IconCog from '../images/cog.svg'
|
|
import './Home.css'
|
|
|
|
export default class Home extends PureComponent {
|
|
static contextType = AppContext
|
|
|
|
render() {
|
|
const { isLoading, accounts, needsConfig } = this.context
|
|
|
|
return (
|
|
<>
|
|
<main className="main box">
|
|
<Link className="preferences-link" to="/preferences">
|
|
<IconCog />
|
|
</Link>
|
|
|
|
{needsConfig ? (
|
|
<Welcome />
|
|
) : isLoading ? (
|
|
<Spinner />
|
|
) : (
|
|
<>
|
|
<Total />
|
|
|
|
<div className="number-unit-wrap number-unit-wrap--accounts">
|
|
{accounts.map((account, i) => (
|
|
<Account key={i} account={account} />
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</main>
|
|
|
|
<Ticker style={isLoading ? { opacity: 0 } : null} />
|
|
</>
|
|
)
|
|
}
|
|
}
|