when a transaction output has one or more tokens, a list is displayed under the value on ada Ref: EX-1124
address
index
value
tokens {
quantity
assetName
}
},
totalOutput
withdrawals {
outputs: tx.outputs?.filter(isDefined).map((i) => ({
...i,
value: Currency.Util.lovelacesToAda(i.value),
tokens: i.tokens
.filter((i) => i.assetName !== 'ada')
.map((t) => ({
...t,
assetName: t.assetName || '-',
})),
})),
totalOutput: Currency.Util.lovelacesToAda(tx.totalOutput),
withdrawals:
.amount {
display: none;
@media (min-width: $medium-breakpoint) {
color: var(--solid-text-color);
display: block;
}
}
width: 100%;
}
}
.tokenList {
display: none;
@media (min-width: $medium-breakpoint) {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.token {
margin-top: 5px;
}
}
import classnames from 'classnames';
import dayjs from 'dayjs';
import { isEmpty } from 'lodash';
import relativeTime from 'dayjs/plugin/relativeTime';
import utc from 'dayjs/plugin/utc';
import { isNumber } from 'lodash';
ITransactionDetails,
ITransactionInput,
ITransactionOutput,
IToken,
IWithdrawal,
} from '../types';
import styles from './TransactionInfo.module.scss';
</>
);
const TokenList = (props: { tokens: IToken[]; value: string }) => (
<div className={styles.tokenList}>
<div className={styles.amount}>{props.value} ADA</div>
{props.tokens.map((t) => (
<span className={styles.token}>{`${t.quantity} ${t.assetName}`}</span>
))}
</div>
);
type AddressInputOutput = ITransactionInput | IWithdrawal | ITransactionOutput;
interface IAddressesRowProps {
</span>
</LocalizedLink>
)}
<div className={styles.amount}>{io.value} ADA</div>
{isEmpty(io.tokens) ? (
<div className={styles.amount}>{io.value} ADA</div>
) : (
<TokenList tokens={io.tokens!} value={io.value} />
)}
</div>
))}
</>
/>
)}
{!isShowingUnmoderatedData && props.metadata && props.metadata.length > 0 && (
<div className={styles.row}>
<div className={styles.label}>
{translate('transaction.metadata')}
</div>
<div className={styles.value}>
{props.metadata.map((item) => {
return <div>{JSON.stringify(item.value, undefined, 2)}</div>;
})}
{!isShowingUnmoderatedData &&
props.metadata &&
props.metadata.length > 0 && (
<div className={styles.row}>
<div className={styles.label}>
{translate('transaction.metadata')}
</div>
<div className={styles.value}>
{props.metadata.map((item) => {
return <div>{JSON.stringify(item.value, undefined, 2)}</div>;
})}
</div>
</div>
</div>
)}
)}
{/* ===== DOTTED LINE SEPARATOR ===== */}
export interface IToken {
quantity: string;
assetName: string;
}
export interface ICoin {
value: string;
tokens?: IToken[];
}
export interface ITransactionInput extends ICoin {
add triggers
