import { observer } from 'mobx-react-lite';
import QRCode from 'qrcode.react';
+
import { isEmpty } from 'lodash';
import DividerWithTitle from '../../../widgets/divider-with-title/DividerWithTitle';
import { useI18nFeature } from '../../i18n/context';
import styles from './AddressSummary.module.scss';
+
import { IToken } from '../../transactions/types';
export interface IAddressSummaryProps {
export interface IPaymentAddressSummaryProps extends IAddressSummaryProps {
+
tokensBalance: IToken[];
export interface IStakeAddressSummaryProps extends IAddressSummaryProps {
<div className={styles.infoValue}>{props.transactionsCount}</div>
{isPaymentAddress(props) && (
-
<div className={styles.infoRow}>
-
<div className={styles.infoLabel}>
-
{translate('address.summaryBalanceLabel')}
+
<div className={styles.infoRow}>
+
<div className={styles.infoLabel}>
+
{/* TODO: add DE and JA translation*/}
+
{translate('address.adaBalance')}
+
<div className={styles.infoValue}>{props.finalBalance} ADA</div>
-
<div className={styles.infoValue}>{props.finalBalance} ADA</div>
+
{!isEmpty(props.tokensBalance) && (
+
<div className={styles.infoRow}>
+
<div className={styles.infoLabel}>
+
{/* TODO: add DE and JA translation*/}
+
{translate('address.tokensBalance')}
+
<div className={styles.infoValue}>
+
<div className={styles.tokenList}>
+
{props.tokensBalance.map((b) => (
+
className={styles.token}
+
>{`${b.quantity} ${b.assetName}`}</span>
{isStakeAddress(props) && (