Stars Transaction Modal: Support transaction refund badge (#5870)

src/assets/localization/fallback.strings

@@ -1867,6 +1867,7 @@
 "ActionMigratedFrom" = "Migrated from {chat}";
 "ActionMigratedTo" = "Migrated to {chat}";
 "ActionHistoryCleared" = "History was cleared";
+"Refunded" = "Refund";
 "UniqueStatusWearTitle" = "Wear {gift}";
 "UniqueStatusBenefitsDescription" = "and get these benefits:";
 "UniqueStatusBadgeBenefitTitle" = "Radiant Badge";

src/components/modals/stars/transaction/StarsTransactionModal.module.scss

@@ -64,6 +64,15 @@
   text-align: center;
 }
 
+.refunded {
+  font-size: 0.8125rem;
+  line-height: 1;
+  border-radius: var(--border-radius-messages-small);
+  padding: 0.25em 0.5em;
+  background-color: rgba(var(--color-text-green-rgb), 0.2);
+  color: var(--color-success);
+}
+
 .totalStars {
   display: inline-flex;
   align-items: center;

src/components/modals/stars/transaction/StarsTransactionModal.tsx

@@ -57,7 +57,11 @@ type StateProps = {
 };
 
 const StarsTransactionModal: FC<OwnProps & StateProps> = ({
-  modal, peer, canPlayAnimatedEmojis, topSticker, paidMessageCommission,
+  modal,
+  peer,
+  canPlayAnimatedEmojis,
+  topSticker,
+  paidMessageCommission,
 }) => {
   const { showNotification, openMediaViewer, closeStarsTransactionModal } = getActions();
 
@@ -168,6 +172,9 @@ const StarsTransactionModal: FC<OwnProps & StateProps> = ({
             {formatStarsTransactionAmount(lang, stars)}
           </span>
           <StarIcon type="gold" size="middle" />
+          {transaction.isRefund && (
+            <p className={styles.refunded}>{lang('Refunded')}</p>
+          )}
         </p>
         {transaction.paidMessages && transaction.starRefCommision && paidMessageCommission
         && (

src/types/language.d.ts

@@ -1434,6 +1434,7 @@ export interface LangPair {
   'ActionGiftPremiumText': undefined;
   'ActionGiftStarsText': undefined;
   'ActionHistoryCleared': undefined;
+  'Refunded': undefined;
   'UniqueStatusBenefitsDescription': undefined;
   'UniqueStatusBadgeBenefitTitle': undefined;
   'UniqueStatusBadgeDescription': undefined;