Skip to content

Commit a7f711c

Browse files
brancoderbrancoder
committed
Fix: Add design changes for milestone payload
1 parent 9770f05 commit a7f711c

18 files changed

+360
-18170
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 18011 deletions
This file was deleted.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
},
1010
"license": "MIT",
1111
"dependencies": {
12-
"@iota/iota.js": "^1.9.0-stardust.7",
12+
"@iota/iota.js": "^1.9.0-stardust.9",
1313
"classnames": "^2.3.1",
1414
"humanize-duration": "^3.25.2",
1515
"moment": "^2.29.1",

‎src/app/components/tangle/FeatureBlock.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { FeatureBlockState } from "./FeatureBlockState";
1212
*/
1313
class FeatureBlock extends Component<FeatureBlockProps, FeatureBlockState> {
1414
/**
15-
* Create a new instance of Output.
15+
* Create a new instance of Feature Block.
1616
* @param props The props.
1717
*/
1818
constructor(props: FeatureBlockProps) {

‎src/app/components/tangle/MigratedFund.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { ED25519_ADDRESS_TYPE, UnitsHelper } from "@iota/iota.js";
2+
import classNames from "classnames";
3+
import React, { Component, ReactNode } from "react";
4+
import { ServiceFactory } from "../../../factories/serviceFactory";
5+
import { NodeConfigService } from "../../../services/nodeConfigService";
6+
import { Bech32AddressHelper } from "../../../utils/bech32AddressHelper";
7+
import { ReactComponent as DropdownIcon } from "./../../../assets/dropdown-arrow.svg";
8+
import Bech32Address from "./Bech32Address";
9+
import { MigratedFundProps } from "./MigratedFundProps";
10+
import { MigratedFundState } from "./MigratedFundState";
11+
12+
/**
13+
* Component which will display a Migrated fund.
14+
*/
15+
class MigratedFund extends Component<MigratedFundProps, MigratedFundState> {
16+
/**
17+
* The bech32 hrp from the node.
18+
*/
19+
private readonly _bech32Hrp: string;
20+
21+
/**
22+
* Create a new instance of Migrated fund.
23+
* @param props The props.
24+
*/
25+
constructor(props: MigratedFundProps) {
26+
super(props);
27+
28+
const nodeConfigService = ServiceFactory.get<NodeConfigService>("node-config");
29+
this._bech32Hrp = nodeConfigService.getBech32Hrp();
30+
31+
this.state = {
32+
formatFull: false,
33+
showDetails: false
34+
};
35+
}
36+
37+
/**
38+
* Render the component.
39+
* @returns The node to render.
40+
*/
41+
public render(): ReactNode {
42+
return (
43+
<div className="milestone-payload_receipt padding-t-s">
44+
<div
45+
className="card--content__input"
46+
onClick={() => this.setState({ showDetails: !this.state.showDetails })}
47+
>
48+
49+
<div className={classNames(
50+
"margin-r-t",
51+
"card--content__input--dropdown",
52+
{ "opened": this.state.showDetails }
53+
)}
54+
>
55+
<DropdownIcon />
56+
</div>
57+
<h3>Migrated Fund {this.props.index}</h3>
58+
</div>
59+
{this.state.showDetails && (
60+
<div className="card--content--border-l">
61+
<div className="card--label">
62+
Tail Transaction Hash
63+
</div>
64+
<div className="card--value card--value__mono">
65+
{this.props.fund.tailTransactionHash}
66+
</div>
67+
<div className="card--value card--value__mono">
68+
{this.props.fund.address.type === ED25519_ADDRESS_TYPE && (
69+
<Bech32Address
70+
activeLinks={true}
71+
addressDetails={Bech32AddressHelper.buildAddress(
72+
this.props.fund.address.pubKeyHash,
73+
this._bech32Hrp
74+
)}
75+
/>
76+
)}
77+
</div>
78+
<div className="card--label">
79+
Deposit
80+
</div>
81+
<div className="card--value card--value__mono">
82+
<button
83+
className="card--value--button"
84+
type="button"
85+
onClick={() => this.setState(
86+
{
87+
formatFull: !this.state.formatFull
88+
}
89+
)}
90+
>
91+
{this.state.formatFull
92+
? `${this.props.fund.deposit} i`
93+
: UnitsHelper.formatBest(Number(this.props.fund.deposit))}
94+
</button>
95+
</div>
96+
</div>
97+
)}
98+
</div>
99+
);
100+
}
101+
}
102+
103+
export default MigratedFund;

‎src/app/components/tangle/MigratedFundProps.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { IMigratedFunds } from "@iota/iota.js";
2+
3+
export interface MigratedFundProps {
4+
/**
5+
* The index within the parent.
6+
*/
7+
index: number;
8+
9+
/**
10+
* The migrated fund.
11+
*/
12+
fund: IMigratedFunds;
13+
}

‎src/app/components/tangle/MigratedFundState.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export interface MigratedFundState {
2+
/**
3+
* Format the amount in full.
4+
*/
5+
formatFull: boolean;
6+
7+
/**
8+
* Shows migrated fund details
9+
*/
10+
showDetails: boolean;
11+
}

‎src/app/components/tangle/MilestonePayload.tsx‎

Lines changed: 83 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,41 @@
11
/* eslint-disable max-len */
22
import { RECEIPT_MILESTONE_OPTION_TYPE, POW_MILESTONE_OPTION_TYPE } from "@iota/iota.js";
3+
import classNames from "classnames";
34
import React, { Component, ReactNode } from "react";
45
import { Link } from "react-router-dom";
56
import { ClipboardHelper } from "../../../utils/clipboardHelper";
67
import { FormatHelper } from "../../../utils/formatHelper";
78
import MessageButton from "../layout/MessageButton";
9+
import { ReactComponent as DropdownIcon } from "./../../../assets/dropdown-arrow.svg";
810
import { MilestonePayloadProps } from "./MilestonePayloadProps";
9-
import ReceiptPayload from "./ReceiptMilestoneOption";
11+
import { MilestonePayloadState } from "./MilestonePayloadState";
12+
import PoWMilestoneOption from "./PoWMilestoneOption";
13+
import ReceiptMilestoneOption from "./ReceiptMilestoneOption";
1014

1115
/**
1216
* Component which will display a milestone payload.
1317
*/
14-
class MilestonePayload extends Component<MilestonePayloadProps> {
18+
class MilestonePayload extends Component<MilestonePayloadProps, MilestonePayloadState> {
19+
/**
20+
* Create a new instance of Milestone payload.
21+
* @param props The props.
22+
*/
23+
constructor(props: MilestonePayloadProps) {
24+
super(props);
25+
26+
this.state = {
27+
showSignatures: false,
28+
showOptions: false
29+
};
30+
}
31+
1532
/**
1633
* Render the component.
1734
* @returns The node to render.
1835
*/
1936
public render(): ReactNode {
2037
return (
21-
<div className="milestone-payload">
38+
<div className="milestone-payload card--content padding-0">
2239
<h2>Milestone Payload</h2>
2340
<div className="card--label">
2441
Index
@@ -93,72 +110,77 @@ class MilestonePayload extends Component<MilestonePayloadProps> {
93110
</div>
94111
</React.Fragment>
95112
)}
113+
96114
{this.props.payload.options && (
97-
<React.Fragment>
98-
{this.props.payload.options.map((option, i) => (
99-
<React.Fragment>
115+
<React.Fragment>
116+
<div className="milestone-payloads__options padding-t-s">
117+
<div
118+
className="card--content__input"
119+
onClick={() => this.setState({ showOptions: !this.state.showOptions })}
120+
>
121+
<div className={classNames(
122+
"margin-r-t",
123+
"card--content__input--dropdown",
124+
{ "opened": this.state.showOptions }
125+
)}
126+
>
127+
<DropdownIcon />
128+
</div>
129+
<h3>Options</h3>
130+
</div>
131+
</div>
132+
{this.state.showOptions && (
133+
<div className="card--content--border-l">
134+
{this.props.payload.options.map((option, idx) => (
135+
<React.Fragment key={idx}>
100136
{ option.type === RECEIPT_MILESTONE_OPTION_TYPE && (
101-
<div className="card margin-t-m padding-l">
102-
<ReceiptPayload option={option} />
103-
</div>
104-
)}
137+
<ReceiptMilestoneOption option={option} />
138+
)}
105139
{ option.type === POW_MILESTONE_OPTION_TYPE && (
106-
<div className="card margin-t-m padding-l">
107-
<div className="card--label">
108-
Next PoW Score
109-
</div>
110-
<div className="card--value">
111-
{option.nextPoWScore}
112-
</div>
113-
<div className="card--label">
114-
Next PoW Score Milestone Index
115-
</div>
116-
<div className="card--value">
117-
{option.nextPoWScoreMilestoneIndex}
118-
</div>
119-
</div>
120-
)}
140+
<PoWMilestoneOption option={option} />
141+
)}
121142
</React.Fragment>
122-
))}
123-
</React.Fragment>
143+
))}
144+
</div>
145+
)}
146+
</React.Fragment>
124147
)}
125-
{/* {this.props.payload.nextPoWScore !== 0 && this.props.payload.nextPoWScoreMilestoneIndex !== 0 && (
126-
<React.Fragment>
127-
<div className="card--label">
128-
Next PoW Score
129-
</div>
130-
<div className="card--value">
131-
{this.props.payload.nextPoWScore}
132-
</div>
133-
<div className="card--label">
134-
Next PoW Score Milestone Index
135-
</div>
136-
<div className="card--value">
137-
{this.props.payload.nextPoWScoreMilestoneIndex}
148+
<div className="milestone-payloads__signatures padding-t-s">
149+
<div
150+
className="card--content__input"
151+
onClick={() => this.setState({ showSignatures: !this.state.showSignatures })}
152+
>
153+
<div className={classNames(
154+
"margin-r-t",
155+
"card--content__input--dropdown",
156+
{ "opened": this.state.showSignatures }
157+
)}
158+
>
159+
<DropdownIcon />
138160
</div>
139-
</React.Fragment>
140-
)} */}
141-
<div className="card--label">
142-
Signatures
161+
<h3>Signatures</h3>
162+
</div>
143163
</div>
144-
<div className="card--value card--value__mono">
145-
{this.props.payload.signatures.map((sig, i) => (
146-
<div key={i} className="margin-b-s">
147-
<div className="card--label">
148-
Public Key
164+
{this.state.showSignatures && (
165+
<div className="card--content--border-l">
166+
{this.props.payload.signatures.map((sig, i) => (
167+
<div key={i} className="margin-b-s">
168+
<div className="card--label">
169+
Public Key
170+
</div>
171+
<div className="card--value card--value__mono">
172+
{sig.publicKey}
173+
</div>
174+
<div className="card--label">
175+
Signature
176+
</div>
177+
<div className="card--value card--value__mono">
178+
{sig.signature}
179+
</div>
149180
</div>
150-
<div className="card--value card--value__mono">
151-
{sig.publicKey}
152-
</div>
153-
<div className="card--label">
154-
Signature
155-
</div>
156-
<div className="card--value card--value__mono">
157-
{sig.signature}
158-
</div>
159-
</div>
160-
))}
161-
</div>
181+
))}
182+
</div>
183+
)}
162184
</div>
163185
);
164186
}

‎src/app/components/tangle/MilestonePayloadState.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export interface MilestonePayloadState {
2+
3+
/**
4+
* Shows signature details of the milestone payload
5+
*/
6+
showSignatures: boolean;
7+
8+
/**
9+
* Shows options details of the milestone payload
10+
*/
11+
showOptions: boolean;
12+
}

‎src/app/components/tangle/OutputProps.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import { IOutputResponse, OutputTypes } from "@iota/iota.js";
22

33
export interface OutputProps {
4-
/**
5-
* The output id.
6-
*/
7-
id?: string;
8-
94
/**
105
* The index within the parent.
116
*/

0 commit comments

Comments
 (0)