Skip to content

Commit

Permalink
Merge branch 'tmp/alias-balance' into feat/issues-910-incorrect-balan…
Browse files Browse the repository at this point in the history 
…ce-alias
  • Loading branch information
@begonaalvarezd
begonaalvarezd committed Jan 31, 2024
2 parents 0836b10 + 59fd086 commit 14eef60
Show file tree
Hide file tree
Showing 15 changed files with 355 additions and 183 deletions.
2 changes: 1 addition & 1 deletion client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,6 @@
],
"lint-staged": {
"src/**/*.{ts,js,tsx,jsx}": "eslint --cache --fix",
"src/**/*.{ts,js,scss,css}": "prettier --ignore-path=.prettierignore --write"
"src/**/*.{ts,js,tsx,jsx,scss,css}": "prettier --ignore-path=.prettierignore --write"
}
}
22 changes: 16 additions & 6 deletions client/src/app/components/stardust/Input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@
/* eslint-disable jsdoc/require-returns */
import { Utils } from "@iota/sdk-wasm/web";
import classNames from "classnames";
import React, { useContext, useState } from "react";
import { useHistory, Link } from "react-router-dom";
import Bech32Address from "./address/Bech32Address";
import Output from "./Output";
import React, { useContext, useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
import DropdownIcon from "~assets/dropdown-arrow.svg?react";
import { formatAmount } from "~helpers/stardust/valueFormatHelper";
import { IInput } from "~models/api/stardust/IInput";
import { IPreExpandedConfig } from "~models/components";
import NetworkContext from "../../context/NetworkContext";
import Output from "./Output";
import Bech32Address from "./address/Bech32Address";

interface InputProps {
/**
Expand All @@ -20,17 +21,25 @@ interface InputProps {
* The network in context.
*/
readonly network: string;
/**
* Should the input be pre-expanded.
*/
readonly preExpandedConfig?: IPreExpandedConfig;
}

/**
* Component which will display an Input on stardust.
*/
const Input: React.FC<InputProps> = ({ input, network }) => {
const Input: React.FC<InputProps> = ({ input, network, preExpandedConfig }) => {
const history = useHistory();
const { tokenInfo } = useContext(NetworkContext);
const [isExpanded, setIsExpanded] = useState(false);
const [isExpanded, setIsExpanded] = useState(preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.isPreExpanded ?? false);
const [isFormattedBalance, setIsFormattedBalance] = useState(true);

useEffect(() => {
setIsExpanded(preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.isPreExpanded ?? isExpanded ?? false);
}, [preExpandedConfig]);

const fallbackInputView = (
<React.Fragment>
<div className="card--content__input" onClick={() => setIsExpanded(!isExpanded)}>
Expand Down Expand Up @@ -89,6 +98,7 @@ const Input: React.FC<InputProps> = ({ input, network }) => {
amount={Number(input.output.output.amount)}
network={network}
showCopyAmount={true}
preExpandedConfig={preExpandedConfig}
/>
) : (
fallbackInputView
Expand Down
102 changes: 76 additions & 26 deletions client/src/app/components/stardust/Output.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,17 +61,25 @@ class Output extends Component<OutputProps, OutputState> {
super(props);

this.state = {
isExpanded: this.props.isPreExpanded ?? false,
isExpanded: this.props.preExpandedConfig?.isAllPreExpanded ?? this.props.preExpandedConfig?.isPreExpanded ?? false,
isFormattedBalance: true,
};
}

componentDidUpdate(prevProps: Readonly<OutputProps>): void {
if (prevProps.preExpandedConfig !== this.props.preExpandedConfig) {
this.setState({
isExpanded: this.props.preExpandedConfig?.isAllPreExpanded ?? this.props.preExpandedConfig?.isPreExpanded ?? false,
});
}
}

/**
* Render the component.
* @returns The node to render.
*/
public render(): ReactNode {
const { outputId, output, amount, showCopyAmount, network, isPreExpanded, displayFullOutputId, isLinksDisabled } = this.props;
const { outputId, output, amount, showCopyAmount, network, preExpandedConfig, displayFullOutputId, isLinksDisabled } = this.props;
const { isExpanded, isFormattedBalance } = this.state;
const tokenInfo: INodeInfoBaseToken = this.context.tokenInfo;

Expand Down Expand Up @@ -223,33 +231,75 @@ class Output extends Component<OutputProps, OutputState> {
{/* all output types except Treasury have common output conditions */}
{output.type !== OutputType.Treasury && (
<React.Fragment>
{(output as CommonOutput).unlockConditions.map((unlockCondition, idx) => (
<UnlockCondition key={idx} unlockCondition={unlockCondition} isPreExpanded={isPreExpanded} />
))}
{(output as CommonOutput).features?.map((feature, idx) => (
<Feature
key={idx}
feature={feature}
isPreExpanded={isPreExpanded}
isImmutable={false}
isParticipationEventMetadata={isParticipationOutput}
/>
))}
{(output as CommonOutput).unlockConditions.map((unlockCondition, idx) => {
const isPreExpanded =
preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.unlockConditions?.[idx] ?? false;
return <UnlockCondition key={idx} unlockCondition={unlockCondition} isPreExpanded={isPreExpanded} />;
})}
{(output as CommonOutput).features?.map((feature, idx) => {
const isPreExpanded =
preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.features?.[idx] ?? false;
return (
<Feature
key={idx}
feature={feature}
isImmutable={false}
isParticipationEventMetadata={isParticipationOutput}
isPreExpanded={isPreExpanded}
/>
);
})}
{output.type === OutputType.Alias &&
(output as AliasOutput).immutableFeatures?.map((immutableFeature, idx) => (
<Feature key={idx} feature={immutableFeature} isPreExpanded={isPreExpanded} isImmutable={true} />
))}
(output as AliasOutput).immutableFeatures?.map((immutableFeature, idx) => {
const isPreExpanded =
preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.immutableFeatures?.[idx] ?? false;
return (
<Feature
key={idx}
feature={immutableFeature}
isImmutable={true}
isPreExpanded={isPreExpanded}
/>
);
})}
{output.type === OutputType.Nft &&
(output as NftOutput).immutableFeatures?.map((immutableFeature, idx) => (
<Feature key={idx} feature={immutableFeature} isPreExpanded={isPreExpanded} isImmutable={true} />
))}
(output as NftOutput).immutableFeatures?.map((immutableFeature, idx) => {
const isPreExpanded =
preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.immutableFeatures?.[idx] ?? false;
return (
<Feature
key={idx}
feature={immutableFeature}
isImmutable={true}
isPreExpanded={isPreExpanded}
/>
);
})}
{output.type === OutputType.Foundry &&
(output as FoundryOutput).immutableFeatures?.map((immutableFeature, idx) => (
<Feature key={idx} feature={immutableFeature} isPreExpanded={isPreExpanded} isImmutable={true} />
))}
{(output as CommonOutput).nativeTokens?.map((token, idx) => (
<NativeToken key={idx} tokenId={token.id} amount={Number(token.amount)} isPreExpanded={isPreExpanded} />
))}
(output as FoundryOutput).immutableFeatures?.map((immutableFeature, idx) => {
const isPreExpanded =
preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.immutableFeatures?.[idx] ?? false;
return (
<Feature
key={idx}
feature={immutableFeature}
isImmutable={true}
isPreExpanded={isPreExpanded}
/>
);
})}
{(output as CommonOutput).nativeTokens?.map((token, idx) => {
const isPreExpanded =
preExpandedConfig?.isAllPreExpanded ?? preExpandedConfig?.nativeTokens?.[idx] ?? false;
return (
<NativeToken
key={idx}
tokenId={token.id}
amount={Number(token.amount)}
isPreExpanded={isPreExpanded}
/>
);
})}
</React.Fragment>
)}
</div>
Expand Down
11 changes: 6 additions & 5 deletions client/src/app/components/stardust/OutputProps.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Output } from "@iota/sdk-wasm/web";
import { IPreExpandedConfig } from "~models/components";

export interface OutputProps {
/**
Expand All @@ -21,11 +22,6 @@ export interface OutputProps {
*/
showCopyAmount: boolean;

/**
* Should the output be pre-expanded.
*/
isPreExpanded?: boolean;

/**
* Should the outputId be displayed in full (default truncated).
*/
Expand All @@ -40,4 +36,9 @@ export interface OutputProps {
* Disable links if block is conflicting.
*/
isLinksDisabled?: boolean;

/**
* Should the output and its fields be pre-expanded.
*/
preExpandedConfig?: IPreExpandedConfig;
}
13 changes: 3 additions & 10 deletions client/src/app/components/stardust/address/AddressBalance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ interface AddressBalanceProps {
/**
* The storage rent balance.
*/
readonly storageRentBalance: number | null;
readonly storageDeposit: number | null;
}

const CONDITIONAL_BALANCE_INFO =
"These funds reside within outputs with additional unlock conditions which might be potentially un-lockable";

const AddressBalance: React.FC<AddressBalanceProps> = ({ balance, spendableBalance, storageRentBalance }) => {
const AddressBalance: React.FC<AddressBalanceProps> = ({ balance, spendableBalance, storageDeposit }) => {
const { name: network, tokenInfo } = useContext(NetworkContext);
const [formatBalanceFull, setFormatBalanceFull] = useState(false);
const [formatConditionalBalanceFull, setFormatConditionalBalanceFull] = useState(false);
Expand Down Expand Up @@ -101,14 +101,7 @@ const AddressBalance: React.FC<AddressBalanceProps> = ({ balance, spendableBalan
false,
conditionalBalance,
)}
{buildBalanceView(
"Storage Deposit",
formatStorageBalanceFull,
setFormatStorageBalanceFull,
false,
false,
storageRentBalance,
)}
{buildBalanceView("Storage Deposit", formatStorageBalanceFull, setFormatStorageBalanceFull, false, false, storageDeposit)}
</div>
</div>
);
Expand Down
Loading

0 comments on commit 14eef60

Please sign in to comment.