Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Token manager - loading state (with real states) #868

Merged
merged 17 commits into from May 29, 2019
Merged

Token manager - loading state (with real states) #868

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
568883c
Add syncing states (faked for now)
bpierre May 18, 2019
5cebb55
Reduce sync status in background script
2color May 24, 2019
35a2c25
Hoist common dependencies (#863)
sohkai May 27, 2019
7bfbb52
Update Travis CI badge (#866)
May 27, 2019
268a4f3
Travis: optimizations and refactor to use build stages (#865)
sohkai May 28, 2019
ef0d86e
Update apps/token-manager/app/src/script.js
2color May 28, 2019
62fc9c0
Remove unneeded import
2color May 28, 2019
3cc3e45
Handle custom events before contract events
2color May 28, 2019
b1e62d6
Upgrade aragon ui
2color May 28, 2019
732578a
Token Manager: fix loading indicator not being shown when syncing
sohkai May 28, 2019
292969a
Token Manager: only use the SyncIndicator for the loading states (#873)
bpierre May 29, 2019
65b8683
Token Manager: fix lint
sohkai May 29, 2019
8a5fc6d
Token Manager: update @aragon/api dependencies
sohkai May 29, 2019
4fb2db1
Use a boolean for loading indicator
2color May 29, 2019
9c2a422
Apps: update for @aragon/rpc-messenger's new deferred behaviour (#871)
sohkai May 29, 2019
7d8e789
Upgrade @aragon/ui to 0.40.1
bpierre May 29, 2019
cc2aa66
Merge remote-tracking branch 'origin/master' into token-manager-loadi…
2color May 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 22 additions & 2 deletions apps/token-manager/app/src/App.js
View file
Open in desktop
@@ -1,8 +1,13 @@
import React from 'react'
import React, { useState } from 'react'
2color marked this conversation as resolved.
Show resolved Hide resolved
import PropTypes from 'prop-types'
import BN from 'bn.js'
import { Badge, Main, SidePanel } from '@aragon/ui'
import { Badge, Main, SidePanel, SyncIndicator } from '@aragon/ui'
import { useAragonApi } from '@aragon/api-react'
import {
SYNC_STATUS_INITIALIZING,
SYNC_STATUS_SYNCING,
SYNC_STATUS_SYNCED,
} from '@aragon/api'
import EmptyState from './screens/EmptyState'
import Holders from './screens/Holders'
import AssignVotePanelContent from './components/Panels/AssignVotePanelContent'
Expand All @@ -16,12 +21,24 @@ const initialAssignTokensConfig = {
holderAddress: '',
}

const syncLabel = status => {
if (status === SYNC_STATUS_INITIALIZING) return 'Initializing…'
if (status === SYNC_STATUS_SYNCING) return 'Syncing data…'
if (status === SYNC_STATUS_SYNCED) return 'Ready.'
}

class App extends React.PureComponent {
static propTypes = {
api: PropTypes.object,
syncStatus: PropTypes.oneOf([
SYNC_STATUS_INITIALIZING,
SYNC_STATUS_SYNCING,
SYNC_STATUS_SYNCED,
]),
}
static defaultProps = {
appStateReady: false,
syncStatus: SYNC_STATUS_INITIALIZING,
holders: [],
connectedAccount: '',
groupMode: false,
Expand Down Expand Up @@ -95,6 +112,7 @@ class App extends React.PureComponent {
tokenTransfersEnabled,
connectedAccount,
requestMenu,
syncStatus,
} = this.props
const { assignTokensConfig, sidepanelOpened } = this.state
return (
Expand All @@ -104,6 +122,7 @@ class App extends React.PureComponent {
onResolve={this.handleResolveLocalIdentity}
onShowLocalIdentityModal={this.handleShowLocalIdentityModal}
>
<SyncIndicator visible={syncStatus === SYNC_STATUS_SYNCING} />
<AppLayout
title="Token Manager"
afterTitle={tokenSymbol && <Badge.App>{tokenSymbol}</Badge.App>}
Expand All @@ -117,6 +136,7 @@ class App extends React.PureComponent {
>
{appStateReady && holders.length > 0 ? (
<Holders
isLoading={syncStatus === SYNC_STATUS_INITIALIZING}
holders={holders}
groupMode={groupMode}
maxAccountTokens={maxAccountTokens}
Expand Down
23 changes: 23 additions & 0 deletions apps/token-manager/app/src/components/LoadingRow.js
View file
Open in desktop
@@ -0,0 +1,23 @@
import React from 'react'
import { TableCell, TableRow, LoadingRing } from '@aragon/ui'

const LoadingRow = React.memo(({ groupMode }) => (
<TableRow>
<TableCell colSpan={groupMode ? 2 : 3}>
<div
css={`
width: 100%;
height: 130px;
display: flex;
justify-content: center;
align-items: center;
`}
>
<LoadingRing animated />
<span css="margin-left: 5px">Loading data…</span>
</div>
</TableCell>
</TableRow>
))

export default LoadingRow
132 changes: 69 additions & 63 deletions apps/token-manager/app/src/components/SideBar.js
View file
Open in desktop
Expand Up @@ -28,7 +28,7 @@ const displayedStakes = (accounts, total) => {
}))
}

class SideBar extends React.Component {
class SideBar extends React.PureComponent {
static defaultProps = {
holders: [],
}
Expand All @@ -41,6 +41,7 @@ class SideBar extends React.Component {
}
render() {
const {
blankMode,
holders,
network,
tokenAddress,
Expand All @@ -60,68 +61,72 @@ class SideBar extends React.Component {
Token Info
</Text>
</h1>
<ul>
<InfoRow>
<span>Total Supply</span>
<span>:</span>
<strong>{formatBalance(tokenSupply, tokenDecimalsBase)}</strong>
</InfoRow>
<InfoRow>
<span>Transferable</span>
<span>:</span>
<strong>{this.transferableLabel()}</strong>
</InfoRow>
<InfoRow>
<span>Token</span>
<span>:</span>
<TokenBadge
address={tokenAddress}
name={tokenName}
symbol={tokenSymbol}
networkType={network.type}
/>
</InfoRow>
</ul>
{!blankMode && (
<ul>
<InfoRow>
<span>Total Supply</span>
<span>:</span>
<strong>{formatBalance(tokenSupply, tokenDecimalsBase)}</strong>
</InfoRow>
<InfoRow>
<span>Transferable</span>
<span>:</span>
<strong>{this.transferableLabel()}</strong>
</InfoRow>
<InfoRow>
<span>Token</span>
<span>:</span>
<TokenBadge
address={tokenAddress}
name={tokenName}
symbol={tokenSymbol}
networkType={network.type}
/>
</InfoRow>
</ul>
)}
</Part>
<Part>
<h1>
<Text color={theme.textSecondary} smallcaps>
Ownership Distribution
{!blankMode && (
<Part>
<h1>
<Text color={theme.textSecondary} smallcaps>
Ownership Distribution
</Text>
</h1>
<Text size="large" weight="bold">
Token Holder Stakes
</Text>
</h1>
<Text size="large" weight="bold">
Token Holder Stakes
</Text>
<StakesBar>
{stakes.map(({ name, stake, color }) => (
<div
key={name}
title={`${name}: ${stake}%`}
style={{
width: `${stake}%`,
height: '10px',
background: color,
}}
/>
))}
</StakesBar>
<ul>
{stakes.map(({ name, stake, color }) => (
<StakesListItem key={name}>
<span>
<StakesListBullet style={{ background: color }} />
<LocalIdentityBadge
entity={name}
networkType={network.type}
connectedAccount={name === userAccount}
/>
{name === userAccount && <You />}
</span>
<strong>{stake}%</strong>
</StakesListItem>
))}
</ul>
</Part>
<StakesBar>
{stakes.map(({ name, stake, color }) => (
<div
key={name}
title={`${name}: ${stake}%`}
style={{
width: `${stake}%`,
height: '10px',
background: color,
}}
/>
))}
</StakesBar>
<ul>
{stakes.map(({ name, stake, color }) => (
<StakesListItem key={name}>
<span>
<StakesListBullet style={{ background: color }} />
<LocalIdentityBadge
entity={name}
networkType={network.type}
connectedAccount={name === userAccount}
/>
{name === userAccount && <You />}
</span>
<strong>{stake}%</strong>
</StakesListItem>
))}
</ul>
</Part>
)}
</Main>
)
}
Expand All @@ -131,16 +136,17 @@ const Main = styled.aside`
flex-shrink: 0;
flex-grow: 0;
min-height: 100%;
margin-top: 55px;
margin-top: 16px;
padding: 0 20px;

${breakpoint(
'medium',
`
width: 260px;
margin-left: 30px;
margin-top: unset;
margin-top: 0;
padding: 0;
opacity: 1;
`
)};
`
Expand Down