Skip to content

Commit 689ddd0

Browse files
brancoderbrancoder
authored
Merge pull request #72 from iotaledger/feat/outputs-ui
Feat: Input/Output and Milestone design changes
2 parents a7f26fd + 19bf576 commit 689ddd0

33 files changed

+1077
-18456
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 17821 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.6",
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/Address.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ALIAS_ADDRESS_TYPE, ED25519_ADDRESS_TYPE, NFT_ADDRESS_TYPE } from "@iota/iota.js";
22
import React, { Component, ReactNode } from "react";
3+
import { NameHelper } from "../../../utils/nameHelper";
34
import { AddressProps } from "./AddressProps";
45

56
/**
@@ -13,6 +14,12 @@ class Address extends Component<AddressProps> {
1314
public render(): ReactNode {
1415
return (
1516
<div className="address-type">
17+
<div className="card--label">
18+
Name:
19+
</div>
20+
<div className="card--value row">
21+
{NameHelper.getAddressTypeName(this.props.address.type)}
22+
</div>
1623
{this.props.address.type === ED25519_ADDRESS_TYPE && (
1724
<React.Fragment>
1825
<div className="card--label">

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

Lines changed: 63 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,84 @@
11
import { ISSUER_FEATURE_BLOCK_TYPE, METADATA_FEATURE_BLOCK_TYPE, SENDER_FEATURE_BLOCK_TYPE, TAG_FEATURE_BLOCK_TYPE } from "@iota/iota.js";
2+
import classNames from "classnames";
23
import React, { Component, ReactNode } from "react";
34
import { NameHelper } from "../../../utils/nameHelper";
5+
import { ReactComponent as DropdownIcon } from "./../../../assets/dropdown-arrow.svg";
46
import Address from "./Address";
57
import { FeatureBlockProps } from "./FeatureBlockProps";
8+
import { FeatureBlockState } from "./FeatureBlockState";
69

710
/**
811
* Component which will display an Feature Block.
912
*/
10-
class FeatureBlock extends Component<FeatureBlockProps> {
13+
class FeatureBlock extends Component<FeatureBlockProps, FeatureBlockState> {
14+
/**
15+
* Create a new instance of Feature Block.
16+
* @param props The props.
17+
*/
18+
constructor(props: FeatureBlockProps) {
19+
super(props);
20+
21+
this.state = {
22+
showDetails: false
23+
};
24+
}
25+
1126
/**
1227
* Render the component.
1328
* @returns The node to render.
1429
*/
1530
public render(): ReactNode {
1631
return (
1732
<div className="feature-block padding-t-s">
18-
<h3>{NameHelper.getFeatureBlockTypeName(this.props.featureBlock.type)}</h3>
33+
<div
34+
className="card--content__input"
35+
onClick={() => this.setState({ showDetails: !this.state.showDetails })}
36+
>
1937

20-
{this.props.featureBlock.type === SENDER_FEATURE_BLOCK_TYPE && (
21-
<React.Fragment>
22-
<div className="card--label">
23-
Address
24-
</div>
25-
<Address
26-
address={this.props.featureBlock.address}
27-
/>
28-
</React.Fragment>
29-
)}
30-
{this.props.featureBlock.type === ISSUER_FEATURE_BLOCK_TYPE && (
31-
<React.Fragment>
32-
<div className="card--label">
33-
Address
34-
</div>
35-
<Address
36-
address={this.props.featureBlock.address}
37-
/>
38-
</React.Fragment>
39-
)}
40-
{this.props.featureBlock.type === METADATA_FEATURE_BLOCK_TYPE && (
41-
<React.Fragment>
42-
<div className="card--label">
43-
Data:
44-
</div>
45-
<div className="card--value row">
46-
{this.props.featureBlock.data}
47-
</div>
48-
</React.Fragment>
49-
)}
50-
{this.props.featureBlock.type === TAG_FEATURE_BLOCK_TYPE && (
51-
<React.Fragment>
52-
<div className="card--label">
53-
Tag:
54-
</div>
55-
<div className="card--value row">
56-
{this.props.featureBlock.tag}
57-
</div>
58-
</React.Fragment>
38+
<div className={classNames(
39+
"margin-r-t",
40+
"card--content__input--dropdown",
41+
{ "opened": this.state.showDetails }
42+
)}
43+
>
44+
<DropdownIcon />
45+
</div>
46+
<h3 className="card--content__input--label">
47+
{NameHelper.getFeatureBlockTypeName(this.props.featureBlock.type)}
48+
</h3>
49+
</div>
50+
51+
{this.state.showDetails && (
52+
<div className="card--content--border-l">
53+
{(this.props.featureBlock.type === SENDER_FEATURE_BLOCK_TYPE ||
54+
this.props.featureBlock.type === ISSUER_FEATURE_BLOCK_TYPE) && (
55+
<Address
56+
address={this.props.featureBlock.address}
57+
/>
58+
)}
59+
{this.props.featureBlock.type === METADATA_FEATURE_BLOCK_TYPE && (
60+
<React.Fragment>
61+
<div className="card--label">
62+
Data:
63+
</div>
64+
<div className="card--value row">
65+
{this.props.featureBlock.data}
66+
</div>
67+
</React.Fragment>
68+
)}
69+
{this.props.featureBlock.type === TAG_FEATURE_BLOCK_TYPE && (
70+
<React.Fragment>
71+
<div className="card--label">
72+
Tag:
73+
</div>
74+
<div className="card--value row">
75+
{this.props.featureBlock.tag}
76+
</div>
77+
</React.Fragment>
78+
)}
79+
</div>
5980
)}
81+
6082
</div>
6183
);
6284
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export interface FeatureBlockState {
2+
3+
/**
4+
* Shows details of the feature condition
5+
*/
6+
showDetails: boolean;
7+
}

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

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
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 className="card--content__input--label">
58+
Migrated Fund {this.props.index}
59+
</h3>
60+
</div>
61+
{this.state.showDetails && (
62+
<div className="card--content--border-l">
63+
<div className="card--label">
64+
Tail Transaction Hash
65+
</div>
66+
<div className="card--value card--value__mono">
67+
{this.props.fund.tailTransactionHash}
68+
</div>
69+
<div className="card--value card--value__mono">
70+
{this.props.fund.address.type === ED25519_ADDRESS_TYPE && (
71+
<Bech32Address
72+
activeLinks={true}
73+
addressDetails={Bech32AddressHelper.buildAddress(
74+
this.props.fund.address.pubKeyHash,
75+
this._bech32Hrp
76+
)}
77+
/>
78+
)}
79+
</div>
80+
<div className="card--label">
81+
Deposit
82+
</div>
83+
<div className="card--value card--value__mono">
84+
<button
85+
className="card--value--button"
86+
type="button"
87+
onClick={() => this.setState(
88+
{
89+
formatFull: !this.state.formatFull
90+
}
91+
)}
92+
>
93+
{this.state.formatFull
94+
? `${this.props.fund.deposit} i`
95+
: UnitsHelper.formatBest(Number(this.props.fund.deposit))}
96+
</button>
97+
</div>
98+
</div>
99+
)}
100+
</div>
101+
);
102+
}
103+
}
104+
105+
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+
}

0 commit comments

Comments
 (0)