Skip to content

Commit

Permalink
feat: more precise state slicing for less rerendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@epiqueras
epiqueras committed Dec 24, 2018
1 parent 6b8e9f5 commit 582a7b6
Show file tree
Hide file tree
Showing 9 changed files with 100 additions and 130 deletions.
6 changes: 3 additions & 3 deletions src/components/cases-list-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,17 @@ const StyledHourglass = styled(Hourglass)`
const CasesListCard = () => {
const { cacheCall, useCacheEvents } = useDrizzle()
const drizzleState = useDrizzleState(drizzleState => ({
accounts: drizzleState.accounts
account: drizzleState.accounts[0]
}))
const draws = useCacheEvents(
'KlerosLiquid',
'Draw',
useMemo(
() => ({
filter: { _address: drizzleState.accounts[0] },
filter: { _address: drizzleState.account },
fromBlock: 0
}),
[drizzleState.accounts[0]]
[drizzleState.account]
)
)
const disputes = draws
Expand Down
9 changes: 2 additions & 7 deletions src/components/court-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const StyledAmountDiv = styled.div`
const CourtCard = ({ ID }) => {
const { cacheCall } = useDrizzle()
const drizzleState = useDrizzleState(drizzleState => ({
accounts: drizzleState.accounts
account: drizzleState.accounts[0]
}))
const load = useDataloader()
let name
Expand All @@ -52,12 +52,7 @@ const CourtCard = ({ ID }) => {
const policyJSON = load(policy.fileURI)
if (policyJSON) name = policyJSON.name
}
const stake = cacheCall(
'KlerosLiquid',
'stakeOf',
drizzleState.accounts[0],
ID
)
const stake = cacheCall('KlerosLiquid', 'stakeOf', drizzleState.account, ID)
const subcourt = cacheCall('KlerosLiquid', 'courts', ID)
return (
<StyledCard
Expand Down
4 changes: 2 additions & 2 deletions src/components/courts-list-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ const StyledListItem = styled(List.Item)`
const CourtsListCard = () => {
const { cacheCall } = useDrizzle()
const drizzleState = useDrizzleState(drizzleState => ({
accounts: drizzleState.accounts
account: drizzleState.accounts[0]
}))
const load = useDataloader()
const subcourtIDs = cacheCall(
'KlerosLiquid',
'getJuror',
drizzleState.accounts[0]
drizzleState.account
)
const names =
subcourtIDs &&
Expand Down
25 changes: 7 additions & 18 deletions src/components/identicon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,18 @@ const StyledReactBlockies = styled(ReactBlockies)`
const Identicon = ({ large, pinakion }) => {
const { cacheCall } = useDrizzle()
const drizzleState = useDrizzleState(drizzleState => ({
accountBalances: drizzleState.accountBalances,
accounts: drizzleState.accounts,
contracts: drizzleState.contracts
account: drizzleState.accounts[0],
balance: drizzleState.accountBalances[drizzleState.accounts[0]]
}))
let PNK
if (pinakion)
PNK = cacheCall('MiniMeTokenERC20', 'balanceOf', drizzleState.accounts[0])
PNK = cacheCall('MiniMeTokenERC20', 'balanceOf', drizzleState.account)
const content = (
<StyledDiv>
<StyledReactBlockies
large={large}
scale={large ? 7 : 4}
seed={drizzleState.accounts[0].toLowerCase()}
seed={drizzleState.account.toLowerCase()}
size={large ? 14 : 8}
/>
</StyledDiv>
Expand All @@ -42,30 +41,20 @@ const Identicon = ({ large, pinakion }) => {
<List>
<List.Item>
<List.Item.Meta
description={<ETHAddress address={drizzleState.accounts[0]} />}
description={<ETHAddress address={drizzleState.account} />}
title="Address"
/>
</List.Item>
<List.Item>
<List.Item.Meta
description={
<ETHAmount
amount={
drizzleState.accountBalances[drizzleState.accounts[0]]
}
decimals={4}
/>
<ETHAmount amount={drizzleState.balance} decimals={4} />
}
title="ETH"
/>
</List.Item>
{pinakion && (
<Spin
spinning={
!drizzleState.contracts.MiniMeTokenERC20.synced ||
PNK === undefined
}
>
<Spin spinning={PNK === undefined}>
<List.Item>
<List.Item.Meta
description={<ETHAmount amount={PNK} />}
Expand Down
8 changes: 4 additions & 4 deletions src/components/notification-settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const NotificationSettingsForm = Form.create()(
styled(({ className, form, settings: { key, ...settings } }) => {
const { drizzle } = useDrizzle()
const drizzleState = useDrizzleState(drizzleState => ({
accounts: drizzleState.accounts
account: drizzleState.accounts[0]
}))
const [status, setStatus] = useState()
return (
Expand Down Expand Up @@ -43,11 +43,11 @@ const NotificationSettingsForm = Form.create()(
{
body: JSON.stringify({
payload: {
address: drizzleState.accounts[0],
address: drizzleState.account,
settings,
signature: await drizzle.web3.eth.personal.sign(
JSON.stringify(settings),
drizzleState.accounts[0]
drizzleState.account
)
}
}),
Expand All @@ -63,7 +63,7 @@ const NotificationSettingsForm = Form.create()(
}
})
},
[form.validateFieldsAndScroll, drizzleState.accounts[0]]
[form.validateFieldsAndScroll, drizzleState.account]
)}
>
<Divider>I wish to be notified when:</Divider>
Expand Down
154 changes: 70 additions & 84 deletions src/components/pnk-balance-card.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Card, Col, Row, Spin } from 'antd'
import { Card, Col, Row } from 'antd'
import { useDrizzle, useDrizzleState } from '../temp/drizzle-react-hooks'
import ETHAddress from './eth-address'
import ETHAmount from './eth-amount'
Expand Down Expand Up @@ -51,97 +51,83 @@ const StyledSectionArrowBackground = styled(SectionArrowBackground)`
const PNKBalanceCard = () => {
const { cacheCall } = useDrizzle()
const drizzleState = useDrizzleState(drizzleState => ({
accountBalances: drizzleState.accountBalances,
accounts: drizzleState.accounts,
contracts: drizzleState.contracts
account: drizzleState.accounts[0],
balance: drizzleState.accountBalances[drizzleState.accounts[0]]
}))
const juror = cacheCall('KlerosLiquid', 'jurors', drizzleState.accounts[0])
const juror = cacheCall('KlerosLiquid', 'jurors', drizzleState.account)
return (
<StyledCard hoverable>
<Spin
spinning={
!drizzleState.contracts.KlerosLiquid.synced ||
!drizzleState.contracts.MiniMeTokenERC20.synced
}
>
<Row>
<Col span={8}>
<Row>
<Col span={10}>
<Identicon large />
</Col>
<Col span={14}>
<StyledDiv>
<ETHAddress address={drizzleState.accounts[0]} />
</StyledDiv>
<StyledDiv>
<Row>
<Col span={8}>
<Row>
<Col span={10}>
<Identicon large />
</Col>
<Col span={14}>
<StyledDiv>
<ETHAddress address={drizzleState.account} />
</StyledDiv>
<StyledDiv>
<ETHAmount
amount={cacheCall(
'MiniMeTokenERC20',
'balanceOf',
drizzleState.account
)}
/>{' '}
PNK
</StyledDiv>
<StyledDiv>
<ETHAmount amount={drizzleState.balance} decimals={4} /> ETH
</StyledDiv>
</Col>
</Row>
<StyledSectionArrow className="ternary-stroke" />
</Col>
<Col className="ternary-color theme-color" span={8}>
<StyledTopDiv>You have</StyledTopDiv>
<StyledCenterDiv>
<ETHAmount amount={juror && juror.stakedTokens} /> PNK
</StyledCenterDiv>
<StyledBottomDiv>
Staked{' '}
<Hint
description="The more you stake, the higher your chances of being drawn as a juror."
title={
<>
<ETHAmount
amount={cacheCall(
'MiniMeTokenERC20',
'balanceOf',
drizzleState.accounts[0]
)}
amount={juror && juror.stakedTokens}
decimals={10}
/>{' '}
PNK
</StyledDiv>
<StyledDiv>
</>
}
/>
</StyledBottomDiv>
</Col>
<StyledCol className="ternary-color theme-color" span={8}>
<StyledTopDiv>You have</StyledTopDiv>
<StyledCenterDiv>
<ETHAmount amount={juror && juror.lockedTokens} /> PNK
</StyledCenterDiv>
<StyledBottomDiv>
Locked{' '}
<Hint
description="This PNK is locked in active disputes for potential redistribution."
title={
<>
<ETHAmount
amount={
drizzleState.accountBalances[drizzleState.accounts[0]]
}
decimals={4}
amount={juror && juror.lockedTokens}
decimals={10}
/>{' '}
ETH
</StyledDiv>
</Col>
</Row>
<StyledSectionArrow className="ternary-stroke" />
</Col>
<Col className="ternary-color theme-color" span={8}>
<StyledTopDiv>You have</StyledTopDiv>
<StyledCenterDiv>
<ETHAmount amount={juror && juror.stakedTokens} /> PNK
</StyledCenterDiv>
<StyledBottomDiv>
Staked{' '}
<Hint
description="The more you stake, the higher your chances of being drawn as a juror."
title={
<>
<ETHAmount
amount={juror && juror.stakedTokens}
decimals={10}
/>{' '}
PNK
</>
}
/>
</StyledBottomDiv>
</Col>
<StyledCol className="ternary-color theme-color" span={8}>
<StyledTopDiv>You have</StyledTopDiv>
<StyledCenterDiv>
<ETHAmount amount={juror && juror.lockedTokens} /> PNK
</StyledCenterDiv>
<StyledBottomDiv>
Locked{' '}
<Hint
description="This PNK is locked in active disputes for potential redistribution."
title={
<>
<ETHAmount
amount={juror && juror.lockedTokens}
decimals={10}
/>{' '}
PNK
</>
}
/>
</StyledBottomDiv>
<StyledSectionArrowBackground />
</StyledCol>
</Row>
</Spin>
PNK
</>
}
/>
</StyledBottomDiv>
<StyledSectionArrowBackground />
</StyledCol>
</Row>
</StyledCard>
)
}
Expand Down
10 changes: 5 additions & 5 deletions src/components/pnk-stats-list-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ const StyledTitleSpan = styled.span`
const PNKStatsListCard = () => {
const { cacheCall, drizzle, useCacheEvents } = useDrizzle()
const drizzleState = useDrizzleState(drizzleState => ({
accounts: drizzleState.accounts
account: drizzleState.accounts[0]
}))
const load = useDataloader()
const subcourtIDs = cacheCall(
'KlerosLiquid',
'getJuror',
drizzleState.accounts[0]
drizzleState.account
)
const subcourts =
subcourtIDs &&
Expand All @@ -35,7 +35,7 @@ const PNKStatsListCard = () => {
subcourt.stake = cacheCall(
'KlerosLiquid',
'stakeOf',
drizzleState.accounts[0],
drizzleState.account,
ID
)
const policy = cacheCall('PolicyRegistry', 'policies', ID)
Expand All @@ -52,10 +52,10 @@ const PNKStatsListCard = () => {
'Draw',
useMemo(
() => ({
filter: { _address: drizzleState.accounts[0] },
filter: { _address: drizzleState.account },
fromBlock: 0
}),
[drizzleState.accounts[0]]
[drizzleState.account]
)
)
const disputes = draws
Expand Down
4 changes: 2 additions & 2 deletions src/containers/courts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ import TopBanner from '../components/top-banner'
export default () => {
const { cacheCall } = useDrizzle()
const drizzleState = useDrizzleState(drizzleState => ({
accounts: drizzleState.accounts
account: drizzleState.accounts[0]
}))
const subcourtIDs = cacheCall(
'KlerosLiquid',
'getJuror',
drizzleState.accounts[0]
drizzleState.account
)
return (
<>
Expand Down
10 changes: 5 additions & 5 deletions src/temp/drizzle-react-hooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,13 +121,13 @@ export const Initializer = ({
loadingWeb3
}) => {
const drizzleState = useDrizzleState(drizzleState => ({
drizzleStatus: drizzleState.drizzleStatus,
web3: drizzleState.web3
drizzleStatusInitialized: drizzleState.drizzleStatus.initialized,
web3Status: drizzleState.web3.status
}))
if (drizzleState.drizzleStatus.initialized) return children
if (drizzleState.web3.status === 'initialized')
if (drizzleState.drizzleStatusInitialized) return children
if (drizzleState.web3Status === 'initialized')
return loadingContractsAndAccounts
if (drizzleState.web3.status === 'failed') return error
if (drizzleState.web3Status === 'failed') return error
return loadingWeb3
}

Expand Down

0 comments on commit 582a7b6

Please sign in to comment.