Skip to content
This repository has been archived by the owner on Nov 16, 2022. It is now read-only.

Account Index Page (Mobile) #2317

Merged
merged 4 commits into from
Jul 30, 2020
Merged

Account Index Page (Mobile) #2317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6cfc46e
add mobile for tabs in account index page
prin-r Jul 27, 2020
444b7c1
add changelog
prin-r Jul 27, 2020
d345f7c
refactor code, update schema for redelegate
evilpeach Jul 29, 2020
769fd5b
Merge branch 'master' into account-index-mobile
Jul 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG_UNRELEASED.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
### Scan

- (impv) [\#2330](https://github.com/bandprotocol/bandchain/pull/2330) Fixed share_percentage decoder in DelegationSub
- (impv) [\#2317](https://github.com/bandprotocol/bandchain/pull/2317) Implemented account Index Page (Mobile)
- (impv) [\#2315](https://github.com/bandprotocol/bandchain/pull/2315) Improved how to pass account type on the AddressRender component
- (impv) [\#2312](https://github.com/bandprotocol/bandchain/pull/2312) Implemented the BlockIndexPage layout for mobile view
- (impv) [\#2316](https://github.com/bandprotocol/bandchain/pull/2316) Implemented the ValidatorHomePage layout for mobile view
Expand Down
8 changes: 4 additions & 4 deletions scan/graphql_schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34220,7 +34220,7 @@
"args": [],
"isDeprecated": false,
"deprecationReason": null,
"name": "validator",
"name": "validatorByValidatorDstId",
"type": {
"kind": "NON_NULL",
"name": null,
Expand Down Expand Up @@ -34846,7 +34846,7 @@
"description": null
},
{
"name": "validator",
"name": "validatorByValidatorDstId",
"defaultValue": null,
"type": {
"kind": "INPUT_OBJECT",
Expand Down Expand Up @@ -34978,7 +34978,7 @@
"description": null
},
{
"name": "validator",
"name": "validatorByValidatorDstId",
"defaultValue": null,
"type": {
"kind": "INPUT_OBJECT",
Expand Down Expand Up @@ -35365,7 +35365,7 @@
"description": null
},
{
"name": "validator",
"name": "validatorByValidatorDstId",
"defaultValue": null,
"type": {
"kind": "INPUT_OBJECT",
Expand Down
132 changes: 76 additions & 56 deletions scan/src/components/account/AccountIndexDelegations.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,58 @@ module Styles = {
let alignRight = style([display(`flex), justifyContent(`flexEnd)]);
};

let renderBody = (delegation: DelegationSub.stake_t) => {
<TBody key={delegation.operatorAddress |> Address.toBech32} minHeight=50>
<Row>
<Col> <HSpacing size=Spacing.lg /> </Col>
<Col size=0.9>
<div className=Styles.hFlex>
<ValidatorMonikerLink
validatorAddress={delegation.operatorAddress}
moniker={delegation.moniker}
identity={delegation.identity}
width={`px(300)}
/>
</div>
</Col>
<Col size=0.6>
<div className=Styles.alignRight>
<Text
value={delegation.amount |> Coin.getBandAmountFromCoin |> Format.fPretty}
code=true
/>
</div>
</Col>
<Col size=0.6>
<div className=Styles.alignRight>
<Text
value={delegation.reward |> Coin.getBandAmountFromCoin |> Format.fPretty}
code=true
/>
</div>
</Col>
<Col> <HSpacing size=Spacing.lg /> </Col>
</Row>
</TBody>;
};

let renderBodyMobile =
({operatorAddress, moniker, identity, amount, reward}: DelegationSub.stake_t) => {
<MobileCard
values=InfoMobileCard.[
("VALIDATOR", Validator(operatorAddress, moniker, identity)),
("AMOUNT\n(BAND)", Coin({value: [amount], hasDenom: false})),
("REWARD\n(BAND)", Coin({value: [reward], hasDenom: false})),
]
key={operatorAddress |> Address.toHex}
idx={operatorAddress |> Address.toHex}
/>;
};

[@react.component]
let make = (~address) =>
{
let isMobile = Media.isMobile();
let (page, setPage) = React.useState(_ => 1);
let pageSize = 10;
let delegationsCountSub = DelegationSub.getStakeCountByDelegator(address);
Expand All @@ -31,80 +80,51 @@ let make = (~address) =>
</div>
<VSpacing size=Spacing.lg />
<>
<THead>
<Row>
<Col> <HSpacing size=Spacing.lg /> </Col>
<Col size=0.9>
<Text
block=true
value="VALIDATOR"
size=Text.Sm
weight=Text.Bold
spacing={Text.Em(0.05)}
color=Colors.gray6
/>
</Col>
<Col size=0.6>
<div className=Styles.alignRight>
<Text
block=true
value="AMOUNT (BAND)"
size=Text.Sm
weight=Text.Bold
spacing={Text.Em(0.05)}
color=Colors.gray6
/>
</div>
</Col>
<Col size=0.6>
<div className=Styles.alignRight>
<Text
block=true
value="REWARD (BAND)"
size=Text.Sm
spacing={Text.Em(0.05)}
weight=Text.Bold
color=Colors.gray6
/>
</div>
</Col>
<Col> <HSpacing size=Spacing.lg /> </Col>
</Row>
</THead>
{delegations
->Belt.Array.map(delegation => {
<TBody key={delegation.operatorAddress |> Address.toBech32} minHeight=50>
{isMobile
? React.null
: <THead>
<Row>
<Col> <HSpacing size=Spacing.lg /> </Col>
<Col size=0.9>
<div className=Styles.hFlex>
<ValidatorMonikerLink
validatorAddress={delegation.operatorAddress}
moniker={delegation.moniker}
identity={delegation.identity}
width={`px(300)}
/>
</div>
<Text
block=true
value="VALIDATOR"
size=Text.Sm
weight=Text.Bold
spacing={Text.Em(0.05)}
color=Colors.gray6
/>
</Col>
<Col size=0.6>
<div className=Styles.alignRight>
<Text
value={delegation.amount |> Coin.getBandAmountFromCoin |> Format.fPretty}
code=true
block=true
value="AMOUNT (BAND)"
size=Text.Sm
weight=Text.Bold
spacing={Text.Em(0.05)}
color=Colors.gray6
/>
</div>
</Col>
<Col size=0.6>
<div className=Styles.alignRight>
<Text
value={delegation.reward |> Coin.getBandAmountFromCoin |> Format.fPretty}
code=true
block=true
value="REWARD (BAND)"
size=Text.Sm
spacing={Text.Em(0.05)}
weight=Text.Bold
color=Colors.gray6
/>
</div>
</Col>
<Col> <HSpacing size=Spacing.lg /> </Col>
</Row>
</TBody>
</THead>}
{delegations
->Belt.Array.map(delegation => {
isMobile ? renderBodyMobile(delegation) : renderBody(delegation)
})
->React.array}
<VSpacing size=Spacing.lg />
Expand Down
Loading