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.

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

Finance, Tokens, Voting: update badges #971

Merged
merged 4 commits into from Sep 4, 2019
Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { useNetwork } from '@aragon/api-react'
import { IdentityBadge, Tag, GU } from '@aragon/ui'
import { IconLabel, IdentityBadge, Tag, GU } from '@aragon/ui'
import { useIdentity } from '../IdentityManager/IdentityManager'

const LocalIdentityBadge = ({ entity, ...props }) => {
@@ -11,18 +11,33 @@ const LocalIdentityBadge = ({ entity, ...props }) => {
const handleClick = () => showLocalIdentityModal(entity)
return (
<IdentityBadge
customLabel={label || ''}
label={label || ''}
entity={entity}
networkType={network && network.type}
popoverAction={{
label: `${label ? 'Edit' : 'Add'} custom label`,
label: (
<div
css={`
display: flex;
align-content: center;
`}
>
<IconLabel
css={`
margin-right: ${1 * GU}px;
`}
/>
{label ? 'Edit' : 'Add'} custom label
</div>
),
onClick: handleClick,
}}
popoverTitle={
label ? (
<Wrap>
<Label>{label}</Label>
<Tag
mode="identifier"
css={`
margin-left: ${2 * GU}px;
`}
@@ -47,7 +62,6 @@ const Wrap = styled.div`
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
padding-right: ${3 * GU}px;
`

const Label = styled.span`
@@ -346,7 +346,9 @@ class Deposit extends React.Component {
<VSpace size={1} />
<IdentityBadge
entity={proxyAddress}
fontSize="small"
labelStyle={`
${textStyle('body3')}
`}
networkType={network.type}
shorten={false}
/>
@@ -21,7 +21,7 @@ import {
useLayout,
useTheme,
} from '@aragon/ui'
import { useNetwork } from '@aragon/api-react'
import { useConnectedAccount, useNetwork } from '@aragon/api-react'
import { saveAs } from 'file-saver'
import * as TransferTypes from '../transfer-types'
import { addressesEqual, toChecksumAddress } from '../lib/web3-utils'
@@ -115,6 +115,7 @@ const getDownloadFilename = (proxyAddress, { start, end }) => {
}

const Transfers = React.memo(({ proxyAddress, tokens, transactions }) => {
const connectedAccount = useConnectedAccount()
const network = useNetwork()
const theme = useTheme()
const { layoutName } = useLayout()
@@ -284,7 +285,10 @@ const Transfers = React.memo(({ proxyAddress, tokens, transactions }) => {
: ''}
`}
>
<LocalIdentityBadge entity={entity} address={entity} />
<LocalIdentityBadge
connectedAccount={addressesEqual(entity, connectedAccount)}
entity={entity}
/>
</div>,
<div
css={`
@@ -1,6 +1,6 @@
import { toChecksumAddress } from 'web3-utils'

// Check address equality without checksums
// Check address equality with checksums
export function addressesEqual(first, second) {
first = first && toChecksumAddress(first)
second = second && toChecksumAddress(second)
@@ -34,7 +34,6 @@ class App extends React.PureComponent {
appStateReady: false,
isSyncing: true,
holders: [],
connectedAccount: '',
groupMode: false,
}
state = {
@@ -95,7 +94,6 @@ class App extends React.PureComponent {
render() {
const {
appStateReady,
connectedAccount,
groupMode,
holders,
isSyncing,
@@ -167,7 +165,6 @@ class App extends React.PureComponent {
tokenSupply={tokenSupply}
tokenSymbol={tokenSymbol}
tokenTransfersEnabled={tokenTransfersEnabled}
userAccount={connectedAccount}
onAssignTokens={this.handleLaunchAssignTokens}
onRemoveTokens={this.handleLaunchRemoveTokens}
/>
@@ -202,17 +199,9 @@ class App extends React.PureComponent {
}

export default () => {
const { api, appState, connectedAccount } = useAragonApi()
const { api, appState } = useAragonApi()
const theme = useTheme()
const { layoutName } = useLayout()

return (
<App
api={api}
connectedAccount={connectedAccount}
layoutName={layoutName}
theme={theme}
{...appState}
/>
)
return <App api={api} layoutName={layoutName} theme={theme} {...appState} />
}
@@ -1,7 +1,8 @@
import React, { useMemo } from 'react'
import { useNetwork } from '@aragon/api-react'
import { useConnectedAccount, useNetwork } from '@aragon/api-react'
import { Box, Distribution, GU, TokenBadge, useTheme } from '@aragon/ui'
import { formatBalance, stakesPercentages } from '../utils'
import { addressesEqual } from '../web3-utils'
import LocalIdentityBadge from './LocalIdentityBadge/LocalIdentityBadge'
import You from './You'

@@ -31,11 +32,11 @@ function InfoBoxes({
tokenName,
tokenSupply,
tokenSymbol,
userAccount,
tokenTransfersEnabled,
}) {
const network = useNetwork()
const theme = useTheme()
const connectedAccount = useConnectedAccount()
const network = useNetwork()

const stakes = useMemo(() => displayedStakes(holders, tokenSupply), [
holders,
@@ -104,15 +105,18 @@ function InfoBoxes({
<Distribution
heading="Token holder stakes"
items={stakes}
renderLegendItem={({ item: account }) => (
<div>
<LocalIdentityBadge
entity={account}
connectedAccount={account === userAccount}
/>
{account === userAccount && <You />}
</div>
)}
renderLegendItem={({ item: account }) => {
const isCurrentUser = addressesEqual(account, connectedAccount)
return (
<div>
<LocalIdentityBadge
entity={account}
connectedAccount={isCurrentUser}
/>
{isCurrentUser && <You />}
</div>
)
}}
/>
</Box>
</React.Fragment>
@@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { useNetwork } from '@aragon/api-react'
import { IdentityBadge, Tag, GU } from '@aragon/ui'
import { IconLabel, IdentityBadge, Tag, GU } from '@aragon/ui'
import { useIdentity } from '../IdentityManager/IdentityManager'

const LocalIdentityBadge = ({ entity, ...props }) => {
@@ -11,18 +11,33 @@ const LocalIdentityBadge = ({ entity, ...props }) => {
const handleClick = () => showLocalIdentityModal(entity)
return (
<IdentityBadge
customLabel={label || ''}
label={label || ''}
entity={entity}
networkType={network && network.type}
popoverAction={{
label: `${label ? 'Edit' : 'Add'} custom label`,
label: (
<div
css={`
display: flex;
align-content: center;
`}
>
<IconLabel
css={`
margin-right: ${1 * GU}px;
`}
/>
{label ? 'Edit' : 'Add'} custom label
</div>
),
onClick: handleClick,
}}
popoverTitle={
label ? (
<Wrap>
<Label>{label}</Label>
<Tag
mode="identifier"
css={`
margin-left: ${2 * GU}px;
`}
@@ -47,7 +62,6 @@ const Wrap = styled.div`
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
padding-right: ${3 * GU}px;
`

const Label = styled.span`
@@ -1,6 +1,7 @@
import React, { useCallback } from 'react'
import PropTypes from 'prop-types'
import BN from 'bn.js'
import { useConnectedAccount } from '@aragon/api-react'
import {
ContextMenu,
ContextMenuItem,
@@ -13,6 +14,7 @@ import {
useTheme,
} from '@aragon/ui'
import { formatBalance } from '../utils'
import { addressesEqual } from '../web3-utils'
import InfoBoxes from '../components/InfoBoxes'
import LocalIdentityBadge from '../components/LocalIdentityBadge/LocalIdentityBadge'
import { useIdentity } from '../components/IdentityManager/IdentityManager'
@@ -30,8 +32,8 @@ function Holders({
tokenSupply,
tokenSymbol,
tokenTransfersEnabled,
userAccount,
}) {
const connectedAccount = useConnectedAccount()
return (
<Split
primary={
@@ -40,9 +42,7 @@ function Holders({
fields={groupMode ? ['Owner'] : ['Holder', 'Balance']}
entries={holders.map(({ address, balance }) => [address, balance])}
renderEntry={([address, balance]) => {
const isCurrentUser = Boolean(
userAccount && userAccount === address
)
const isCurrentUser = addressesEqual(address, connectedAccount)

const values = [
<div
@@ -85,7 +85,6 @@ function Holders({
tokenSupply={tokenSupply}
tokenSymbol={tokenSymbol}
tokenTransfersEnabled={tokenTransfersEnabled}
userAccount={userAccount}
/>
}
/>
@@ -104,7 +103,6 @@ Holders.propTypes = {
tokenSupply: PropTypes.instanceOf(BN),
tokenSymbol: PropTypes.string,
tokenTransfersEnabled: PropTypes.bool,
userAccount: PropTypes.string,
}

Holders.defaultProps = {
@@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { useNetwork } from '@aragon/api-react'
import { IdentityBadge, Tag, GU } from '@aragon/ui'
import { IconLabel, IdentityBadge, Tag, GU } from '@aragon/ui'
import { useIdentity } from '../../identity-manager'

const LocalIdentityBadge = ({ entity, ...props }) => {
@@ -11,18 +11,33 @@ const LocalIdentityBadge = ({ entity, ...props }) => {
const handleClick = () => showLocalIdentityModal(entity)
return (
<IdentityBadge
customLabel={label || ''}
label={label || ''}
entity={entity}
networkType={network && network.type}
popoverAction={{
label: `${label ? 'Edit' : 'Add'} custom label`,
label: (
<div
css={`
display: flex;
align-content: center;
`}
>
<IconLabel
css={`
margin-right: ${1 * GU}px;
`}
/>
{label ? 'Edit' : 'Add'} custom label
</div>
),
onClick: handleClick,
}}
popoverTitle={
label ? (
<Wrap>
<Label>{label}</Label>
<Tag
mode="identifier"
css={`
margin-left: ${2 * GU}px;
`}
@@ -47,7 +62,6 @@ const Wrap = styled.div`
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
padding-right: ${3 * GU}px;
`

const Label = styled.span`
@@ -14,7 +14,7 @@ import {
useLayout,
useTheme,
} from '@aragon/ui'
import { useAppState, useNetwork } from '@aragon/api-react'
import { useAppState, useConnectedAccount, useNetwork } from '@aragon/api-react'
import { format } from 'date-fns'
import AppBadge from '../components/AppBadge'
import LocalIdentityBadge from '../components/LocalIdentityBadge/LocalIdentityBadge'
@@ -27,6 +27,7 @@ import VoteCasted from '../components/VoteCasted'
import { percentageList, round, safeDiv } from '../math-utils'
import { getQuorumProgress } from '../vote-utils'
import { VOTE_NAY, VOTE_YEA } from '../vote-types'
import { addressesEqual } from '../web3-utils'

const formatDate = date => `${format(date, 'do MMM yy, HH:mm')} UTC`

@@ -37,6 +38,7 @@ function VoteDetail({ vote, onBack, onVote, onExecute }) {
const theme = useTheme()
const { layoutName } = useLayout()
const { tokenSymbol } = useAppState()
const connectedAccount = useConnectedAccount()

const { data, numData, voteId, connectedAccountVote } = vote
const { minAcceptQuorum, supportRequired, yea, nay } = numData
@@ -143,7 +145,13 @@ function VoteDetail({ vote, onBack, onVote, onExecute }) {
align-items: flex-start;
`}
>
<LocalIdentityBadge entity={creator} />
<LocalIdentityBadge
connectedAccount={addressesEqual(
creator,
connectedAccount
)}
entity={creator}
/>
</div>
</div>
</div>
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.