- {Boolean(canManage && resellPriceInStars) && (
+ {Boolean(canManage && resellPrice) && (
- {formatStarsAsIcon(lang, resellPriceInStars!, {
- asFont: true,
- className: styles.giftResalePriceStar,
- })}
+ {resellPrice!.currency === TON_CURRENCY_CODE
+ ? formatTonAsIcon(lang, resellPrice!.amount, {
+ className: styles.giftResalePriceStar,
+ shouldConvertFromNanos: true,
+ })
+ : formatStarsAsIcon(lang, resellPrice!.amount, {
+ asFont: true,
+ className: styles.giftResalePriceStar,
+ })}
@@ -727,7 +753,7 @@ const GiftInfoModal = ({
gift, giftAttributes, renderFooterButton, isTargetChat,
SettingsMenuButton, isGiftUnique, renderingModal,
collectibleEmojiStatuses, currentUserEmojiStatus, saleDateInfo,
- canBuyGift, giftOwnerTitle, isOpen, resellPriceInStars, giftSubtitle,
+ canBuyGift, giftOwnerTitle, isOpen, resellPrice, giftSubtitle,
releasedByPeer,
]);
@@ -743,15 +769,18 @@ const GiftInfoModal = ({
className={styles.modal}
onClose={handleClose}
withBalanceBar={Boolean(canBuyGift)}
+ currencyInBalanceBar={confirmPrice?.currency}
isLowStackPriority
/>
- {uniqueGift && currentUser && Boolean(resellPriceInStars) && (
+ {uniqueGift && currentUser && Boolean(confirmPrice) && (
@@ -765,7 +794,9 @@ const GiftInfoModal = ({
{lang('GiftBuyConfirmDescription', {
gift: lang('GiftUnique', { title: uniqueGift.title, number: uniqueGift.number }),
- stars: formatStarsAsText(lang, resellPriceInStars),
+ stars: confirmPrice?.currency === TON_CURRENCY_CODE
+ ? formatTonAsText(lang, confirmPrice.amount, true)
+ : formatStarsAsText(lang, confirmPrice.amount),
}, {
withNodes: true,
withMarkdown: true,
@@ -777,7 +808,9 @@ const GiftInfoModal = ({
{lang('GiftBuyForPeerConfirmDescription', {
gift: lang('GiftUnique', { title: uniqueGift.title, number: uniqueGift.number }),
- stars: formatStarsAsText(lang, resellPriceInStars),
+ stars: confirmPrice?.currency === TON_CURRENCY_CODE
+ ? formatTonAsText(lang, confirmPrice.amount, true)
+ : formatStarsAsText(lang, confirmPrice.amount),
peer: getPeerTitle(lang, recipientPeer),
}, {
withNodes: true,
@@ -785,6 +818,20 @@ const GiftInfoModal = ({
})}
)}
+ {!uniqueGift.resaleTonOnly && (
+ <>
+
+
+
+ {lang('DescriptionPayInTON')}
+
+
+ )}
)}
{savedGift && (
diff --git a/src/components/modals/gift/resale/GiftResalePriceComposerModal.module.scss b/src/components/modals/gift/resale/GiftResalePriceComposerModal.module.scss
index e697847d7..c1150d18f 100644
--- a/src/components/modals/gift/resale/GiftResalePriceComposerModal.module.scss
+++ b/src/components/modals/gift/resale/GiftResalePriceComposerModal.module.scss
@@ -1,4 +1,5 @@
-.descriptionContainer {
+.checkBoxDescription,
+.inputPriceDescription {
display: flex;
margin-bottom: 2rem;
@@ -8,6 +9,15 @@
color: var(--color-text-secondary);
}
+.checkBox {
+ margin-inline: -1rem;
+}
+
+.inputPriceDescription {
+ margin-top: 0.875rem;
+ margin-bottom: 1rem;
+}
+
.descriptionPrice {
margin-left: auto;
}
diff --git a/src/components/modals/gift/resale/GiftResalePriceComposerModal.tsx b/src/components/modals/gift/resale/GiftResalePriceComposerModal.tsx
index 3a47b6ecc..cc08d8de7 100644
--- a/src/components/modals/gift/resale/GiftResalePriceComposerModal.tsx
+++ b/src/components/modals/gift/resale/GiftResalePriceComposerModal.tsx
@@ -5,14 +5,17 @@ import { getActions, withGlobal } from '../../../../global';
import type { TabState } from '../../../../global/types';
-import { formatCurrencyAsString } from '../../../../util/formatCurrency';
-import { formatStarsAsIcon, formatStarsAsText } from '../../../../util/localization/format';
+import { convertTonFromNanos, convertTonToNanos } from '../../../../util/formatCurrency';
+import { convertTonToUsd, formatCurrencyAsString } from '../../../../util/formatCurrency';
+import { formatStarsAsIcon, formatStarsAsText, formatTonAsIcon,
+ formatTonAsText } from '../../../../util/localization/format';
import useCurrentOrPrev from '../../../../hooks/useCurrentOrPrev';
import useLang from '../../../../hooks/useLang';
import useLastCallback from '../../../../hooks/useLastCallback';
import Button from '../../../ui/Button';
+import Checkbox from '../../../ui/Checkbox';
import InputText from '../../../ui/InputText';
import Modal from '../../../ui/Modal';
@@ -27,11 +30,16 @@ export type StateProps = {
starsStargiftResaleAmountMin: number;
starsStargiftResaleAmountMax?: number;
starsUsdWithdrawRate?: number;
+ tonStargiftResaleCommissionPermille?: number;
+ tonStargiftResaleAmountMin: number;
+ tonStargiftResaleAmountMax?: number;
+ tonUsdRate?: number;
};
const GiftResalePriceComposerModal = ({
modal, starsStargiftResaleCommissionPermille,
starsStargiftResaleAmountMin, starsStargiftResaleAmountMax, starsUsdWithdrawRate,
+ tonStargiftResaleCommissionPermille, tonStargiftResaleAmountMin, tonStargiftResaleAmountMax, tonUsdRate,
}: OwnProps & StateProps) => {
const {
closeGiftResalePriceComposerModal,
@@ -41,6 +49,7 @@ const GiftResalePriceComposerModal = ({
} = getActions();
const isOpen = Boolean(modal);
const [price, setPrice] = useState
(undefined);
+ const [isPriceInTon, setIsPriceInTon] = useState(false);
const renderingModal = useCurrentOrPrev(modal);
const { gift: typeGift } = renderingModal || {};
@@ -53,8 +62,9 @@ const GiftResalePriceComposerModal = ({
const handleChangePrice = useLastCallback((e) => {
const value = e.target.value;
const number = parseFloat(value);
+ const maxAmount = isPriceInTon ? tonStargiftResaleAmountMax : starsStargiftResaleAmountMax;
const result = value === '' || Number.isNaN(number) ? undefined
- : starsStargiftResaleAmountMax ? Math.min(number, starsStargiftResaleAmountMax) : number;
+ : maxAmount ? Math.min(number, maxAmount) : number;
setPrice(result);
});
@@ -66,7 +76,15 @@ const GiftResalePriceComposerModal = ({
if (!savedGift || savedGift.gift.type !== 'starGiftUnique' || !savedGift.inputGift || !price) return;
closeGiftResalePriceComposerModal();
closeGiftInfoModal();
- updateStarGiftPrice({ gift: savedGift.inputGift, price });
+ updateStarGiftPrice(
+ {
+ gift: savedGift.inputGift,
+ price: {
+ currency: isPriceInTon ? 'TON' : 'XTR',
+ amount: isPriceInTon ? convertTonToNanos(price) : price,
+ nanos: 0,
+ },
+ });
showNotification({
icon: 'sell-outline',
message: {
@@ -77,50 +95,56 @@ const GiftResalePriceComposerModal = ({
},
});
});
- const commission = starsStargiftResaleCommissionPermille;
- const isPriceCorrect = hasPrice && price > starsStargiftResaleAmountMin;
+ const commission = isPriceInTon ? tonStargiftResaleCommissionPermille : starsStargiftResaleCommissionPermille;
+ const minAmount = isPriceInTon ? tonStargiftResaleAmountMin : starsStargiftResaleAmountMin;
+ const isPriceCorrect = hasPrice && price >= minAmount;
return (
-
+
{!isPriceCorrect && Boolean(commission) && lang('DescriptionComposerGiftMinimumPrice', {
- stars: formatStarsAsText(lang, starsStargiftResaleAmountMin),
+ stars: isPriceInTon ? formatTonAsText(lang, minAmount) : formatStarsAsText(lang, minAmount),
}, {
withMarkdown: true,
withNodes: true,
})}
- {isPriceCorrect && lang('DescriptionComposerGiftResalePrice',
- {
- stars: formatStarsAsText(lang, commission ? Number((price * (commission)).toFixed()) : price),
- },
- {
- withMarkdown: true,
- withNodes: true,
- })}
+ {isPriceCorrect && (() => {
+ const priceWithCommission = commission ? Number((price * commission).toFixed()) : price;
+ return lang('DescriptionComposerGiftResalePrice',
+ {
+ stars: isPriceInTon
+ ? formatTonAsText(lang, priceWithCommission)
+ : formatStarsAsText(lang, priceWithCommission),
+ },
+ {
+ withMarkdown: true,
+ withNodes: true,
+ });
+ })()}
- {isPriceCorrect && Boolean(starsUsdWithdrawRate) && (
+ {isPriceCorrect && Boolean(isPriceInTon ? tonUsdRate : starsUsdWithdrawRate) && (
{`≈ ${formatCurrencyAsString(
- price * starsUsdWithdrawRate,
+ isPriceInTon ? convertTonToUsd(price, tonUsdRate!) : price * starsUsdWithdrawRate!,
'USD',
lang.code,
)}`}
@@ -128,9 +152,21 @@ const GiftResalePriceComposerModal = ({
)}
+
+
+
+ {lang('OnlyAcceptTONDescription')}
+
+
@@ -148,11 +184,23 @@ export default memo(withGlobal
(
const starsUsdWithdrawRateX1000 = global.appConfig?.starsUsdWithdrawRateX1000;
const starsUsdWithdrawRate = starsUsdWithdrawRateX1000 ? starsUsdWithdrawRateX1000 / 1000 : 1;
+ const tonConfigPermille = global.appConfig?.tonStargiftResaleCommissionPermille;
+ const tonStargiftResaleCommissionPermille = tonConfigPermille ? (tonConfigPermille / 1000) : 0;
+ const tonStargiftResaleAmountMin = convertTonFromNanos(global.appConfig?.tonStargiftResaleAmountMin || 0);
+ const maxTonFromConfig = global.appConfig?.tonStargiftResaleAmountMax;
+ const tonStargiftResaleAmountMax = maxTonFromConfig && convertTonFromNanos(maxTonFromConfig);
+
+ const tonUsdRate = global.appConfig?.tonUsdRate;
+
return {
starsStargiftResaleCommissionPermille,
starsStargiftResaleAmountMin,
starsStargiftResaleAmountMax,
starsUsdWithdrawRate,
+ tonStargiftResaleCommissionPermille,
+ tonStargiftResaleAmountMin,
+ tonStargiftResaleAmountMax,
+ tonUsdRate,
};
},
)(GiftResalePriceComposerModal));
diff --git a/src/components/modals/priceConfirm/PriceConfirmModal.async.tsx b/src/components/modals/priceConfirm/PriceConfirmModal.async.tsx
new file mode 100644
index 000000000..6b7c37538
--- /dev/null
+++ b/src/components/modals/priceConfirm/PriceConfirmModal.async.tsx
@@ -0,0 +1,19 @@
+import type { FC } from '../../../lib/teact/teact';
+
+import type { TabState } from '../../../global/types';
+
+import { Bundles } from '../../../util/moduleLoader';
+
+import useModuleLoader from '../../../hooks/useModuleLoader';
+
+export type OwnProps = {
+ modal: TabState['priceConfirmModal'];
+};
+
+const PriceConfirmModalAsync: FC = ({ modal }) => {
+ const PriceConfirmModal = useModuleLoader(Bundles.Stars, 'PriceConfirmModal', !modal);
+
+ return PriceConfirmModal ? : undefined;
+};
+
+export default PriceConfirmModalAsync;
diff --git a/src/components/modals/priceConfirm/PriceConfirmModal.tsx b/src/components/modals/priceConfirm/PriceConfirmModal.tsx
new file mode 100644
index 000000000..e6703ed86
--- /dev/null
+++ b/src/components/modals/priceConfirm/PriceConfirmModal.tsx
@@ -0,0 +1,122 @@
+import type { FC } from '../../../lib/teact/teact';
+import { memo, useCallback } from '../../../lib/teact/teact';
+import { getActions, withGlobal } from '../../../global';
+
+import type { ApiStarsAmount } from '../../../api/types';
+import type { TabState } from '../../../global/types';
+
+import { getCurrentTabId } from '../../../util/establishMultitabRole';
+import { convertTonFromNanos } from '../../../util/formatCurrency';
+import { formatStarsAsText, formatTonAsText } from '../../../util/localization/format';
+
+import useLang from '../../../hooks/useLang';
+
+import ConfirmDialog from '../../ui/ConfirmDialog';
+
+export type OwnProps = {
+ modal: TabState['priceConfirmModal'];
+};
+
+type StateProps = {
+ starBalance?: ApiStarsAmount;
+ tonBalance?: number;
+};
+
+const PriceConfirmModal: FC = ({
+ modal,
+ starBalance,
+ tonBalance,
+}) => {
+ const actions = getActions();
+
+ const lang = useLang();
+
+ const handleConfirm = useCallback(() => {
+ if (!modal?.directInfo) {
+ actions.closePriceConfirmModal();
+ return;
+ }
+
+ const { currency, newAmount } = modal;
+ const isTon = currency === 'TON';
+ const currentBalance = isTon ? tonBalance : starBalance?.amount;
+
+ if (currentBalance === undefined) {
+ actions.closePriceConfirmModal();
+ return;
+ }
+
+ if (currentBalance < newAmount!) {
+ actions.openStarsBalanceModal({
+ currency: isTon ? 'TON' : 'XTR',
+ tabId: getCurrentTabId(),
+ });
+ actions.closePriceConfirmModal();
+ return;
+ }
+
+ actions.sendStarPaymentForm({
+ directInfo: modal.directInfo,
+ tabId: getCurrentTabId(),
+ });
+ actions.closePriceConfirmModal();
+ }, [modal, starBalance, tonBalance, actions]);
+
+ const handleClose = useCallback(() => {
+ actions.closePriceConfirmModal();
+ }, [actions]);
+
+ if (!modal) {
+ return undefined;
+ }
+
+ const {
+ originalAmount,
+ newAmount,
+ currency,
+ } = modal;
+
+ const isTon = currency === 'TON';
+
+ let originalAmountText: string;
+ let newAmountText: string;
+
+ if (isTon) {
+ originalAmountText = formatTonAsText(lang, convertTonFromNanos(originalAmount!));
+ newAmountText = formatTonAsText(lang, convertTonFromNanos(newAmount!));
+ } else {
+ originalAmountText = formatStarsAsText(lang, originalAmount!);
+ newAmountText = formatStarsAsText(lang, newAmount!);
+ }
+
+ return (
+
+
+ {lang('PriceChangedText', {
+ originalAmount: originalAmountText,
+ newAmount: newAmountText,
+ }, {
+ withMarkdown: true,
+ withNodes: true,
+ })}
+
+
+ );
+};
+
+export default memo(withGlobal((global): StateProps => {
+ const starBalance = global.stars?.balance;
+ const tonBalance = global.ton?.balance?.amount;
+
+ return {
+ starBalance,
+ tonBalance,
+ };
+},
+)(PriceConfirmModal));
diff --git a/src/components/modals/stars/StarsBalanceModal.module.scss b/src/components/modals/stars/StarsBalanceModal.module.scss
index c88670610..e89770cc7 100644
--- a/src/components/modals/stars/StarsBalanceModal.module.scss
+++ b/src/components/modals/stars/StarsBalanceModal.module.scss
@@ -76,6 +76,12 @@
margin-bottom: 0.5rem;
}
+.tonBalanceContainer {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
.tonBalance {
unicode-bidi: plaintext;
display: flex;
@@ -87,12 +93,14 @@
}
.tonIconBalance {
+ margin-right: 0.25rem;
color: var(--color-primary);
}
.tonInUsd {
font-size: 1rem;
color: var(--color-text-secondary);
+ text-align: center;
}
.tonIconLogo {
diff --git a/src/components/modals/stars/StarsBalanceModal.tsx b/src/components/modals/stars/StarsBalanceModal.tsx
index 9ba7a31b1..aba533bc9 100644
--- a/src/components/modals/stars/StarsBalanceModal.tsx
+++ b/src/components/modals/stars/StarsBalanceModal.tsx
@@ -243,7 +243,7 @@ const StarsBalanceModal = ({
{Boolean(tonUsdRate) && (
{`≈ ${formatCurrencyAsString(
- convertTonToUsd(balance?.amount || 0, tonUsdRate),
+ convertTonToUsd(balance?.amount || 0, tonUsdRate, true),
'USD',
lang.code,
)}`}
diff --git a/src/components/modals/stars/transaction/StarsTransactionItem.tsx b/src/components/modals/stars/transaction/StarsTransactionItem.tsx
index e031c7300..6b00d4177 100644
--- a/src/components/modals/stars/transaction/StarsTransactionItem.tsx
+++ b/src/components/modals/stars/transaction/StarsTransactionItem.tsx
@@ -26,6 +26,7 @@ import useOldLang from '../../../../hooks/useOldLang';
import AnimatedIconFromSticker from '../../../common/AnimatedIconFromSticker';
import Avatar from '../../../common/Avatar';
+import Icon from '../../../common/icons/Icon';
import StarIcon from '../../../common/icons/StarIcon';
import RadialPatternBackground from '../../../common/profile/RadialPatternBackground';
import PaidMediaThumb from './PaidMediaThumb';
@@ -165,6 +166,8 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => {
openStarsTransactionModal({ transaction });
});
+ const amountColorClass = isNegativeAmount(amount) ? styles.negative : styles.positive;
+
return (
@@ -182,11 +185,12 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => {
{formatStarsTransactionAmount(lang, amount)}
{amount.currency === STARS_CURRENCY_CODE && }
+ {amount.currency === TON_CURRENCY_CODE && }
);
diff --git a/src/components/modals/stars/transaction/StarsTransactionModal.module.scss b/src/components/modals/stars/transaction/StarsTransactionModal.module.scss
index 50152fe7e..fb31737ae 100644
--- a/src/components/modals/stars/transaction/StarsTransactionModal.module.scss
+++ b/src/components/modals/stars/transaction/StarsTransactionModal.module.scss
@@ -32,6 +32,7 @@
.amount {
display: flex;
gap: 0.25rem;
+ align-items: center;
font-size: 1rem;
font-weight: var(--font-weight-medium);
diff --git a/src/components/modals/stars/transaction/StarsTransactionModal.tsx b/src/components/modals/stars/transaction/StarsTransactionModal.tsx
index 4b4bc623c..62fe4cbc3 100644
--- a/src/components/modals/stars/transaction/StarsTransactionModal.tsx
+++ b/src/components/modals/stars/transaction/StarsTransactionModal.tsx
@@ -139,6 +139,8 @@ const StarsTransactionModal: FC = ({
{media && (
@@ -171,11 +173,12 @@ const StarsTransactionModal: FC
= ({
{description}
{formatStarsTransactionAmount(lang, amount)}
{amount.currency === STARS_CURRENCY_CODE && }
+ {amount.currency === 'TON' && }
{transaction.isRefund && (
{lang('Refunded')}
)}
diff --git a/src/components/modals/suggestMessage/SuggestMessageModal.tsx b/src/components/modals/suggestMessage/SuggestMessageModal.tsx
index 1f3ca2664..0e8f7e21f 100644
--- a/src/components/modals/suggestMessage/SuggestMessageModal.tsx
+++ b/src/components/modals/suggestMessage/SuggestMessageModal.tsx
@@ -290,7 +290,7 @@ const SuggestMessageModal = ({
: currencyAmount ? lang('ButtonOfferAmount', {
amount: isCurrencyStars
? formatStarsAsIcon(lang, currencyAmount, { asFont: true })
- : formatTonAsIcon(lang, currencyAmount, { asFont: true }),
+ : formatTonAsIcon(lang, currencyAmount),
}, {
withNodes: true,
withMarkdown: true,
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index e5a58732d..5664651fc 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -49,6 +49,7 @@ export type OwnProps = {
onCloseAnimationEnd?: () => void;
onEnter?: () => void;
withBalanceBar?: boolean;
+ currencyInBalanceBar?: 'TON' | 'XTR';
isCondensedHeader?: boolean;
};
@@ -76,6 +77,7 @@ const Modal: FC = ({
onEnter,
withBalanceBar,
isCondensedHeader,
+ currencyInBalanceBar = 'XTR',
}) => {
const {
ref: modalRef,
@@ -187,6 +189,7 @@ const Modal: FC = ({
{withBalanceBar && (
)}
diff --git a/src/components/ui/ModalStarBalanceBar.module.scss b/src/components/ui/ModalStarBalanceBar.module.scss
index 3ef402267..d6753510a 100644
--- a/src/components/ui/ModalStarBalanceBar.module.scss
+++ b/src/components/ui/ModalStarBalanceBar.module.scss
@@ -43,5 +43,11 @@
}
.starIcon {
+ height: 1rem !important;
margin-inline-start: 0.125rem !important;
+ line-height: 1rem !important;
+}
+
+.tonInUsdDescription {
+ color: var(--color-text-secondary);
}
diff --git a/src/components/ui/ModalStarBalanceBar.tsx b/src/components/ui/ModalStarBalanceBar.tsx
index d56c6f839..6bc5e4a4d 100644
--- a/src/components/ui/ModalStarBalanceBar.tsx
+++ b/src/components/ui/ModalStarBalanceBar.tsx
@@ -3,11 +3,15 @@ import {
} from '../../lib/teact/teact';
import { getActions, withGlobal } from '../../global';
-import type { ApiStarsAmount } from '../../api/types';
+import type { ApiStarsAmount, ApiTonAmount } from '../../api/types';
+import {
+ TON_USD_RATE_DEFAULT,
+} from '../../config';
import { formatStarsAmount } from '../../global/helpers/payments';
import buildClassName from '../../util/buildClassName';
-import { formatStarsAsIcon } from '../../util/localization/format';
+import { convertTonFromNanos, convertTonToUsd, formatCurrencyAsString } from '../../util/formatCurrency';
+import { formatStarsAsIcon, formatTonAsIcon } from '../../util/localization/format';
import useLang from '../../hooks/useLang';
import useLastCallback from '../../hooks/useLastCallback';
@@ -20,23 +24,31 @@ import styles from './ModalStarBalanceBar.module.scss';
export type OwnProps = {
onCloseAnimationEnd?: () => void;
isModalOpen?: true;
+ currency?: 'TON' | 'XTR';
};
export type StateProps = {
starBalance?: ApiStarsAmount;
+ tonBalance?: ApiTonAmount;
+ tonUsdRate: number;
};
function ModalStarBalanceBar({
starBalance,
+ tonBalance,
+ tonUsdRate,
isModalOpen,
onCloseAnimationEnd,
+ currency,
}: StateProps & OwnProps) {
const {
openStarsBalanceModal,
} = getActions();
const lang = useLang();
- const isOpen = isModalOpen ? Boolean(starBalance) : false;
+ const isTonMode = currency === 'TON';
+ const currentBalance = isTonMode ? tonBalance : starBalance;
+ const isOpen = isModalOpen ? Boolean(currentBalance) : false;
const {
ref,
@@ -48,10 +60,10 @@ function ModalStarBalanceBar({
});
const handleGetMoreStars = useLastCallback(() => {
- openStarsBalanceModal({});
+ openStarsBalanceModal(isTonMode ? { currency: 'TON' } : {});
});
- if (!shouldRender || !starBalance) {
+ if (!shouldRender || !currentBalance) {
return undefined;
}
@@ -61,15 +73,41 @@ function ModalStarBalanceBar({
ref={ref}
>
- {lang('ModalStarsBalanceBarDescription', {
- stars: formatStarsAsIcon(lang, formatStarsAmount(lang, starBalance), { className: styles.starIcon }),
- }, {
- withNodes: true,
- withMarkdown: true,
- })}
+ {isTonMode ? (
+ lang('ModalStarsBalanceBarDescription', {
+ stars: formatTonAsIcon(lang, convertTonFromNanos(currentBalance.amount), {
+ className: styles.starIcon,
+ }),
+ }, {
+ withNodes: true,
+ withMarkdown: true,
+ })
+ ) : (
+ lang('ModalStarsBalanceBarDescription', {
+ stars: formatStarsAsIcon(lang, formatStarsAmount(lang, currentBalance as ApiStarsAmount), {
+ className: styles.starIcon,
+ }),
+ }, {
+ withNodes: true,
+ withMarkdown: true,
+ })
+ )}
-
{lang('GetMoreStarsLinkText')}
+ {isTonMode && (
+
+ {`≈ ${formatCurrencyAsString(
+ convertTonToUsd((currentBalance as ApiTonAmount).amount, tonUsdRate, true),
+ 'USD',
+ lang.code,
+ )}`}
+
+ )}
+ {!isTonMode && (
+
+ {lang('GetMoreStarsLinkText')}
+
+ )}