Skip to content

Commit 87fa92b

Browse files
brancoderbrancoder
authored
Merge pull request #170 from iotaledger/feat/tx-payload-inputs-rework
Feat: Transaction payload inputs rework
2 parents a18f96f + 18ab031 commit 87fa92b

File tree

12 files changed

+165
-185
lines changed

12 files changed

+165
-185
lines changed

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

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { Blake2b } from "@iota/crypto.js";
2-
import { BASIC_OUTPUT_TYPE, ALIAS_OUTPUT_TYPE, FOUNDRY_OUTPUT_TYPE, NFT_OUTPUT_TYPE, TREASURY_OUTPUT_TYPE, SIMPLE_TOKEN_SCHEME_TYPE, ALIAS_ADDRESS_TYPE, NFT_ADDRESS_TYPE, IImmutableAliasUnlockCondition, IAliasAddress, TransactionHelper, serializeOutput } from "@iota/iota.js";
3-
import { WriteStream, Converter } from "@iota/util.js";
1+
import { BASIC_OUTPUT_TYPE, ALIAS_OUTPUT_TYPE, FOUNDRY_OUTPUT_TYPE, NFT_OUTPUT_TYPE, TREASURY_OUTPUT_TYPE, SIMPLE_TOKEN_SCHEME_TYPE, ALIAS_ADDRESS_TYPE, NFT_ADDRESS_TYPE, IImmutableAliasUnlockCondition, IAliasAddress, TransactionHelper } from "@iota/iota.js";
42
import classNames from "classnames";
53
import React, { Component, ReactNode } from "react";
64
import { Link } from "react-router-dom";
@@ -58,6 +56,16 @@ class Output extends Component<OutputProps, OutputState> {
5856
</div>
5957
<h3 className="card--content__input--label">
6058
{NameHelper.getOutputTypeName(this.props.output.type)} {this.props.index}
59+
<span className="margin-l-s card--value font-weight-normal">
60+
<Link
61+
to={
62+
`/explorer/block/${this.props.outputId}`
63+
}
64+
className="margin-r-t"
65+
>
66+
{this.props.outputId}
67+
</Link>
68+
</span>
6169
</h3>
6270
</div>
6371
<div className="card--value card--value__mono">
@@ -155,7 +163,7 @@ class Output extends Component<OutputProps, OutputState> {
155163
address={
156164
{
157165
aliasId: FormatHelper
158-
.resolveId(this.props.output.aliasId, this.getOutputId()),
166+
.resolveId(this.props.output.aliasId, this.props.outputId),
159167
type: ALIAS_ADDRESS_TYPE
160168
}
161169
}
@@ -188,7 +196,7 @@ class Output extends Component<OutputProps, OutputState> {
188196
address={
189197
{
190198
nftId: FormatHelper
191-
.resolveId(this.props.output.nftId, this.getOutputId()),
199+
.resolveId(this.props.output.nftId, this.props.outputId),
192200
type: NFT_ADDRESS_TYPE
193201
}
194202
}
@@ -314,23 +322,6 @@ class Output extends Component<OutputProps, OutputState> {
314322
</div>
315323
);
316324
}
317-
318-
/**
319-
* Get output id from output.
320-
* @returns The output id.
321-
*/
322-
private getOutputId(): string {
323-
const writeStream = new WriteStream();
324-
325-
try {
326-
serializeOutput(writeStream, this.props.output);
327-
} catch (error) {
328-
if (error instanceof Error) {
329-
console.log(error.message);
330-
}
331-
}
332-
return Converter.bytesToHex(Blake2b.sum256(writeStream.finalBytes()), true);
333-
}
334325
}
335326

336327
export default Output;

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ export interface OutputProps {
1111
*/
1212
metadata?: IOutputMetadataResponse;
1313

14+
/**
15+
* The output id.
16+
*/
17+
outputId: string;
18+
1419
/**
1520
* The output.
1621
*/

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

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { OutputTypes } from "@iota/iota.js";
22
import React, { Component, ReactNode } from "react";
3-
import { IAssociatedOutput } from "../../../models/tangle/IAssociatedOutputsResponse";
43
import Pagination from "../layout/Pagination";
54
import Spinner from "../layout/Spinner";
65
import Output from "./Output";
@@ -18,27 +17,18 @@ class Outputs extends Component<OutputsProps, OutputsState> {
1817
constructor(props: OutputsProps) {
1918
super(props);
2019

21-
let outputs: OutputTypes[] | IAssociatedOutput[] = [];
22-
23-
if (this.props.outputTypes) {
24-
outputs = this.props.outputTypes;
25-
}
26-
if (this.props.associatedOutputs) {
27-
outputs = this.props.associatedOutputs;
28-
}
2920
this.state = {
30-
currentPage: this.props.currentPage,
31-
outputs
21+
currentPage: this.props.currentPage
3222
};
3323
}
3424

3525
/**
3626
* The outputs on current page.
3727
* @returns The outputs
3828
*/
39-
private get currentPageOutputs() {
40-
if (this.state.outputs.length > 0) {
41-
return this.state.outputs.slice(...this.getPageIndexes());
29+
private get currentPageOutputs() {
30+
if (this.props.outputs.length > 0) {
31+
return this.props.outputs.slice(...this.getPageIndexes());
4232
}
4333
return [];
4434
}
@@ -64,7 +54,7 @@ class Outputs extends Component<OutputsProps, OutputsState> {
6454
<div className="card--header">
6555
<h2 className="card--header__title">{this.props.title}</h2>
6656
<span className="card--header-count">
67-
{this.state.outputs.length}
57+
{this.props.outputs.length}
6858
</span>
6959
</div>
7060
{this.props.statusBusy && (
@@ -77,27 +67,19 @@ class Outputs extends Component<OutputsProps, OutputsState> {
7767
)}
7868
</div>
7969

80-
{this.props.outputTypes && (this.currentPageOutputs as OutputTypes[]).map((output, idx) => (
81-
<Output
82-
key={((this.props.currentPage - 1) * this.props.pageSize) + idx + 1}
83-
index={((this.props.currentPage - 1) * this.props.pageSize) + idx + 1}
84-
output={output}
85-
/>
86-
))}
87-
88-
{this.props.associatedOutputs &&
89-
(this.currentPageOutputs as IAssociatedOutput[]).map((output, idx) => (
70+
{this.currentPageOutputs.map((output, idx) => (
9071
<Output
9172
key={output.outputId}
9273
index={((this.state.currentPage - 1) * this.props.pageSize) + idx + 1}
93-
output={output.outputDetails?.output ?? {} as OutputTypes}
74+
outputId={output.outputId}
75+
output={output.outputType ?? (output.outputDetails?.output ?? {} as OutputTypes)}
9476
metadata={output.outputDetails?.metadata}
9577
/>
9678
))}
9779

9880
<Pagination
9981
currentPage={this.state.currentPage}
100-
totalCount={this.state.outputs.length}
82+
totalCount={this.props.outputs.length}
10183
pageSize={this.props.pageSize}
10284
extraPageRangeLimit={this.props.extraPageRangeLimit}
10385
siblingsCount={this.props.siblingsCount}
@@ -111,10 +93,10 @@ class Outputs extends Component<OutputsProps, OutputsState> {
11193
)}
11294
/>
11395
</div>
114-
{this.state.outputs.length === 0 && (
96+
{this.props.outputs.length === 0 && (
11597
<div className="card margin-t-m padding-l">
11698
<h2 className="margin-b-s">{this.props.title}</h2>
117-
{this.state.outputs && (
99+
{this.props.outputs && (
118100
<div className="card--value">
119101
There are no outputs for this address.
120102
</div>
@@ -132,8 +114,8 @@ class Outputs extends Component<OutputsProps, OutputsState> {
132114
private getPageIndexes() {
133115
const firstPageIndex = (this.state.currentPage - 1) * this.props.pageSize;
134116
const lastPageIndex =
135-
(this.state.currentPage === Math.ceil(this.state.outputs.length / this.props.pageSize))
136-
? this.state.outputs.length
117+
(this.state.currentPage === Math.ceil(this.props.outputs.length / this.props.pageSize))
118+
? this.props.outputs.length
137119
: firstPageIndex + this.props.pageSize;
138120
return [firstPageIndex, lastPageIndex] as const;
139121
}

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
1-
import { OutputTypes } from "@iota/iota.js";
21
import { IAssociatedOutput } from "../../../models/tangle/IAssociatedOutputsResponse";
32

43
export interface OutputsProps {
5-
/**
6-
* The output types to display.
7-
*/
8-
outputTypes?: OutputTypes[];
9-
104
/**
115
* The associated outputs to display.
126
*/
13-
associatedOutputs?: IAssociatedOutput[];
7+
outputs: IAssociatedOutput[];
148

159
/**
1610
* The current page.

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
1-
import { OutputTypes } from "@iota/iota.js";
2-
import { IAssociatedOutput } from "../../../models/tangle/IAssociatedOutputsResponse";
3-
41
export interface OutputsState {
52
/**
63
* The current page.
74
*/
85
currentPage: number;
9-
10-
/**
11-
* The outputs to display.
12-
*/
13-
outputs: OutputTypes[] | IAssociatedOutput[];
146
}

0 commit comments

Comments
 (0)