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

Scan: Implemented the txIndexPage's mobile layout #2310

Merged
merged 5 commits into from
Jul 25, 2020
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
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
2 changes: 1 addition & 1 deletion CHANGELOG_UNRELEASED.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
- (bugs) [\#2295](https://github.com/bandprotocol/bandchain/pull/2295) Truncate `accumulated_commission` precision.

### Scan

- (impv) [\#2310](https://github.com/bandprotocol/bandchain/pull/2310) Implemented the TxIndexpage layout for mobile view
- (impv) [\#2305](https://github.com/bandprotocol/bandchain/pull/2305) Implement the TxHomepage layout for mobile view and adjusted the pagination on mobile view.
- (feat) [\#2294](https://github.com/bandprotocol/bandchain/pull/2294) Implemented top part of `ValidatorIndexPage` for mobile
- (impv) [\#2299](https://github.com/bandprotocol/bandchain/pull/2299) Update the latest transactions table for mobile version.
Expand Down
4 changes: 3 additions & 1 deletion scan/src/components/AmountRender.re
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
type pos =
| Msg
| TxIndex;
| TxIndex
| Fee;

module Styles = {
open Css;
Expand All @@ -22,6 +23,7 @@ let make = (~coins, ~pos=Msg) => {
{switch (pos) {
| Msg => <Text value="BAND" weight=Text.Regular code=true nowrap=true block=true />
| TxIndex => <Text value="BAND" weight=Text.Thin code=true nowrap=true block=true />
| Fee => React.null
}}
</div>;
};
4 changes: 2 additions & 2 deletions scan/src/components/TxIndexPageTable.re
Original file line number Diff line number Diff line change
Expand Up @@ -953,7 +953,7 @@ let renderUnknownMessage = () => {
</Col>;
};

let renderBody = (msg: TxSub.Msg.t) => {
let renderBody = (msg: TxSub.Msg.t) =>
switch (msg) {
| SendMsg(send) => renderSend(send)
| CreateDataSourceMsg(dataSource) => renderCreateDataSource(dataSource)
Expand Down Expand Up @@ -997,7 +997,6 @@ let renderBody = (msg: TxSub.Msg.t) => {
| FailMsg(_) => renderFailMessage()
| UnknownMsg => renderUnknownMessage()
};
};

module THead = {
[@react.component]
Expand Down Expand Up @@ -1052,6 +1051,7 @@ let make = (~messages: list(TxSub.Msg.t)) => {
{messages
->Belt.List.mapWithIndex((index, msg) => {
let theme = msg |> TxSub.Msg.getBadgeTheme;
//TODO: Change index to be uniqe something
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: typo

<TBody key={index |> string_of_int}>
<Row>
<Col> <HSpacing size=Spacing.md /> </Col>
Expand Down
160 changes: 160 additions & 0 deletions scan/src/components/TxMobileIndexPageTable.re
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
let addressWidth = 160;
let renderMuitisendList = (tx: TxSub.Msg.MultiSend.t) =>
InfoMobileCard.[("INPUTS", Nothing)]
->Belt.List.concat(
{
let%IterList {address, coins} = tx.inputs;
[
("FROM", InfoMobileCard.Address(address, addressWidth, false)),
("AMOUNT", Coin({value: coins, hasDenom: false})),
];
},
)
->Belt.List.concat([("OUTPUT", Nothing)])
->Belt.List.concat(
{
let%IterList {address, coins} = tx.outputs;
[
("TO", InfoMobileCard.Address(address, addressWidth, false)),
("AMOUNT", Coin({value: coins, hasDenom: false})),
];
},
);

let renderDetailMobile =
//TODO: implement Guan Yu's message later
fun
| TxSub.Msg.SendMsg({fromAddress, toAddress, amount}) =>
InfoMobileCard.[
("FROM", Address(fromAddress, addressWidth, false)),
("TO", Address(toAddress, addressWidth, false)),
("AMOUNT", Coin({value: amount, hasDenom: true})),
]
| DelegateMsg({validatorAddress, delegatorAddress, amount}) => [
("DELEGATOR ADDRESS", Address(delegatorAddress, addressWidth, false)),
("VALIDATOR ADDRESS", Address(validatorAddress, addressWidth, true)),
("AMOUNT", Coin({value: [amount], hasDenom: true})),
]
| UndelegateMsg({validatorAddress, delegatorAddress, amount}) => [
("DELEGATOR ADDRESS", Address(delegatorAddress, addressWidth, false)),
("VALIDATOR ADDRESS", Address(validatorAddress, addressWidth, true)),
("AMOUNT", Coin({value: [amount], hasDenom: true})),
]
| MultiSendMsg(tx) => renderMuitisendList(tx)
| WithdrawRewardMsg({validatorAddress, delegatorAddress, amount}) => [
("DELEGATOR ADDRESS", Address(delegatorAddress, addressWidth, false)),
("VALIDATOR ADDRESS", Address(validatorAddress, addressWidth, true)),
("AMOUNT", Coin({value: amount, hasDenom: true})),
]
| RedelegateMsg({validatorSourceAddress, validatorDestinationAddress, delegatorAddress, amount}) => [
("DELEGATOR ADDRESS", Address(delegatorAddress, addressWidth, false)),
("SOURCE ADDRESS", Address(validatorSourceAddress, addressWidth, true)),
("DESTINATION ADDRESS", Address(validatorDestinationAddress, addressWidth, true)),
("AMOUNT", Coin({value: [amount], hasDenom: true})),
]
| SetWithdrawAddressMsg({delegatorAddress, withdrawAddress}) => [
("DELEGATOR ADDRESS", Address(delegatorAddress, addressWidth, false)),
("WITHDRAW ADDRESS", Address(withdrawAddress, addressWidth, false)),
]
| CreateValidatorMsg({
moniker,
identity,
website,
details,
commissionRate,
commissionMaxRate,
commissionMaxChange,
delegatorAddress,
validatorAddress,
publicKey,
minSelfDelegation,
selfDelegation,
}) => [
("MONIKER", Text(moniker)),
("IDENTITY", Text(identity)),
("WEBSITE", Text(website)),
("DETAIL", Text(details)),
("COMMISSION RATE", Percentage(commissionRate, Some(4))),
("COMMISSION MAX RATE", Percentage(commissionMaxRate, Some(4))),
("COMMISSION MAX CHANGE", Percentage(commissionMaxChange, Some(4))),
("DELEGATOR ADDRESS", Address(delegatorAddress, addressWidth, false)),
("VALIDATOR ADDRESS", Address(validatorAddress, addressWidth, true)),
("PUBLIC KEY", PubKey(publicKey)),
("MIN SELF DELEGATION", Coin({value: [minSelfDelegation], hasDenom: true})),
("SELF DELEGATION", Coin({value: [selfDelegation], hasDenom: true})),
]
| EditValidatorMsg({
moniker,
identity,
website,
details,
commissionRate,
sender,
minSelfDelegation,
}) => [
("MONIKER", moniker == Config.doNotModify ? Text("Unchanged") : Text(moniker)),
("IDENTITY", identity == Config.doNotModify ? Text("Unchanged") : Text(identity)),
("WEBSITE", website == Config.doNotModify ? Text("Unchanged") : Text(website)),
("DETAIL", details == Config.doNotModify ? Text("Unchanged") : Text(details)),
(
"COMMISSION RATE",
switch (commissionRate) {
| Some(rate) => Percentage(rate, Some(4))
| None => Text("Unchanged")
},
),
("VALIDATOR ADDRESS", Address(sender, addressWidth, true)),
(
"MIN SELF DELEGATION",
switch (minSelfDelegation) {
| Some(amount) => Coin({value: [amount], hasDenom: true})
| None => Text("Unchanged")
},
),
]
| WithdrawCommissionMsg({validatorAddress, amount}) => [
("VALIDATOR ADDRESS", Address(validatorAddress, addressWidth, true)),
("AMOUNT", Coin({value: amount, hasDenom: true})),
]
| UnjailMsg({address}) => [("VALIDATOR ADDRESS", Address(address, addressWidth, true))]
| _ => [];
pzshine marked this conversation as resolved.
Show resolved Hide resolved

[@react.component]
let make = (~messages: list(TxSub.Msg.t)) => {
<>
//TODO: Change index to be uniqe something
{messages
->Belt.List.mapWithIndex((index, msg) => {
let renderList = msg |> renderDetailMobile;
let theme = msg |> TxSub.Msg.getBadgeTheme;
let creator = msg |> TxSub.Msg.getCreator;
<MobileCard
values={
InfoMobileCard.[
("MESSAGE\nTYPE", Badge(theme)),
("CREATOR", Address(creator, addressWidth, false)),
]
->Belt.List.concat(renderList)
}
key={index |> string_of_int}
idx={index |> string_of_int}
/>;
})
->Array.of_list
->React.array}
</>;
};

module Loading = {
[@react.component]
let make = () => {
<MobileCard
values=InfoMobileCard.[
("MESSAGE\nTYPE", Loading(80)),
("CREATOR", Loading(80)),
("Detail", Loading(80)),
]
idx="1"
/>;
};
};
2 changes: 1 addition & 1 deletion scan/src/components/TxsTable.re
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ let renderBodyMobile = (reserveIndex, txSub: ApolloHooks.Subscription.variant(Tx
values=InfoMobileCard.[
("TX HASH", TxHash(txHash, 200)),
("BLOCK", Height(blockHeight)),
("GAS FEE\n(BAND)", Coin(gasFee)),
("GAS FEE\n(BAND)", Coin({value: gasFee, hasDenom: false})),
("ACTIONS", Messages(txHash, messages, success, errMsg)),
]
key={blockHeight |> ID.Block.toString}
Expand Down
6 changes: 3 additions & 3 deletions scan/src/components/validator/DelegatorsTable.re
Original file line number Diff line number Diff line change
Expand Up @@ -109,9 +109,9 @@ let renderBodyMobile =
| Data({amount, sharePercentage, delegatorAddress}) =>
<MobileCard
values=InfoMobileCard.[
("DELEGATOR", Address(delegatorAddress, 149)),
("SHARES (%)", Float(sharePercentage)),
("AMOUNT\n(BAND)", Float(amount |> Coin.getBandAmountFromCoin)),
("DELEGATOR", Address(delegatorAddress, 149, false)),
("SHARES (%)", Float(sharePercentage, Some(4))),
("AMOUNT\n(BAND)", Coin({value: [amount], hasDenom: false})),
]
key={delegatorAddress |> Address.toBech32}
idx={delegatorAddress |> Address.toBech32}
Expand Down
74 changes: 58 additions & 16 deletions scan/src/pages/TxIndexPage.re
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ module Styles = {
alignItems(`center),
marginTop(`px(25)),
marginBottom(`px(44)),
Media.mobile([marginBottom(`px(25))]),
]);

let correctLogo = style([width(`px(20)), marginLeft(`px(10))]);
Expand All @@ -43,6 +44,25 @@ module Styles = {
boxShadow(Shadow.box(~x=`zero, ~y=`px(2), ~blur=`px(4), rgba(0, 0, 0, 0.1))),
]);
let notfoundLogo = style([width(`px(180)), marginRight(`px(10))]);
let infoContainerFullwidth =
style([
Media.mobile([
selector("> div", [flexBasis(`percent(100.))]),
selector("> div + div", [marginTop(`px(15))]),
selector("> div > div > div", [display(`block)]),
]),
]);
let infoContainerHalfwidth =
style([
Media.mobile([
selector(
"> div",
[flexGrow(0.), flexShrink(0.), flexBasis(`calc((`sub, `percent(50.), `px(20))))],
),
selector("> div + div + div", [marginTop(`px(15))]),
selector("> div *", [alignItems(`flexStart)]),
]),
]);
};

module TxNotFound = {
Expand Down Expand Up @@ -71,8 +91,8 @@ module TxNotFound = {

[@react.component]
let make = (~txHash) => {
let isMobile = Media.isMobile();
let txSub = TxSub.get(txHash);

switch (txSub) {
| Loading
| Data(_) =>
Expand Down Expand Up @@ -115,21 +135,33 @@ let make = (~txHash) => {
{switch (txSub) {
| Data(_) =>
<>
<Text
value={txHash |> Hash.toHex(~upper=true)}
size=Text.Xxl
weight=Text.Bold
nowrap=true
code=true
color=Colors.gray7
/>
<HSpacing size=Spacing.sm />
<CopyRender width=15 message={txHash |> Hash.toHex(~upper=true)} />
{isMobile
? <Text
value={txHash |> Hash.toHex(~upper=true)}
size=Text.Lg
weight=Text.Bold
nowrap=false
breakAll=true
code=true
color=Colors.gray7
/>
: <>
<Text
value={txHash |> Hash.toHex(~upper=true)}
size=Text.Xxl
weight=Text.Bold
nowrap=true
code=true
color=Colors.gray7
/>
<HSpacing size=Spacing.sm />
<CopyRender width=15 message={txHash |> Hash.toHex(~upper=true)} />
</>}
</>
| _ => <LoadingCensorBar width=700 height=20 />
}}
</div>
<Row>
<Row wrap=true style=Styles.infoContainerFullwidth>
<Col size=0.9>
{switch (txSub) {
| Data({blockHeight}) => <InfoHL info={InfoHL.Height(blockHeight)} header="BLOCK" />
Expand All @@ -140,7 +172,17 @@ let make = (~txHash) => {
{switch (txSub) {
| Data({timestamp}) =>
<InfoHL info={InfoHL.Timestamp(timestamp)} header="TIMESTAMP" />
| _ => <InfoHL info={InfoHL.Loading(400)} header="TIMESTAMP" />
| _ =>
<InfoHL
info={
InfoHL.Loading(
{
isMobile ? 240 : 400;
},
)
}
header="TIMESTAMP"
/>
}}
</Col>
<Col size=1.4>
Expand All @@ -151,7 +193,7 @@ let make = (~txHash) => {
</Col>
</Row>
<VSpacing size=Spacing.xl />
<Row>
<Row wrap=true style=Styles.infoContainerHalfwidth>
<Col size=1.35>
{switch (txSub) {
| Data({gasUsed}) => <InfoHL info={InfoHL.Count(gasUsed)} header="GAS USED" />
Expand Down Expand Up @@ -207,7 +249,7 @@ let make = (~txHash) => {
<Text value="Messages" size=Text.Lg spacing={Text.Em(0.06)} />
</div>
<VSpacing size=Spacing.md />
<TxIndexPageTable messages />
{isMobile ? <TxMobileIndexPageTable messages /> : <TxIndexPageTable messages />}
</>
| _ =>
<>
Expand All @@ -217,7 +259,7 @@ let make = (~txHash) => {
<LoadingCensorBar width=100 height=20 />
</div>
<VSpacing size=Spacing.md />
<TxIndexPageTable.Loading />
{isMobile ? <TxMobileIndexPageTable.Loading /> : <TxIndexPageTable.Loading />}
</>
}}
</>
Expand Down
Loading