Modal Stars Balance Block: Support add stars button (#5624)

src/components/modals/gift/GiftModal.tsx

@@ -285,6 +285,7 @@ const PremiumGiftModal: FC<OwnProps & StateProps> = ({
       isSlim
       contentClassName={styles.content}
       className={buildClassName(styles.modalDialog, styles.root)}
+      isLowStackPriority
     >
       <Button
         className={styles.closeButton}
@@ -296,7 +297,7 @@ const PremiumGiftModal: FC<OwnProps & StateProps> = ({
       >
         <div className={buttonClassName} />
       </Button>
-      <BalanceBlock className={styles.balance} balance={starBalance} />
+      <BalanceBlock className={styles.balance} balance={starBalance} withAddButton />
       <div className={buildClassName(styles.header, isHeaderHidden && styles.hiddenHeader)}>
         <Transition
           name="slideVerticalFade"

src/components/modals/paidReaction/PaidReactionModal.module.scss

@@ -76,6 +76,14 @@
   margin-right: 0.25rem;
 }
 
+.sendAsPeersMenuContainer {
+  z-index: 3;
+  display: flex;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 .headerControlPanel {
   display: flex;
   align-items: center;

src/components/modals/paidReaction/PaidReactionModal.tsx

@@ -298,11 +298,15 @@ const PaidReactionModal = ({
       isSlim
       hasAbsoluteCloseButton
       contentClassName={styles.content}
+      isLowStackPriority
     >
-      <div className={styles.headerControlPanel}>
+      <div className={styles.sendAsPeersMenuContainer}>
         {sendAsPeersMenu}
-        <BalanceBlock balance={starBalance} className={styles.modalBalance} />
       </div>
+      <div className={styles.headerControlPanel}>
+        <BalanceBlock balance={starBalance} className={styles.modalBalance} withAddButton />
+      </div>
+
       <StarSlider
         className={styles.slider}
         defaultValue={DEFAULT_STARS_AMOUNT}

src/components/modals/stars/BalanceBlock.tsx

@@ -1,4 +1,5 @@
 import React, { memo } from '../../../lib/teact/teact';
+import { getActions } from '../../../global';
 
 import type { ApiStarsAmount } from '../../../api/types';
 
@@ -7,24 +8,45 @@ import buildClassName from '../../../util/buildClassName';
 
 import useLang from '../../../hooks/useLang';
 
+import BadgeButton from '../../common/BadgeButton';
+import Icon from '../../common/icons/Icon';
 import StarIcon from '../../common/icons/StarIcon';
 
 import styles from './StarsBalanceModal.module.scss';
 
 type OwnProps = {
   balance?: ApiStarsAmount;
+  withAddButton?: boolean;
   className?: string;
 };
 
-const BalanceBlock = ({ balance, className }: OwnProps) => {
+const BalanceBlock = ({ balance, className, withAddButton }: OwnProps) => {
   const lang = useLang();
 
+  const {
+    openStarsBalanceModal,
+  } = getActions();
+
   return (
-    <div className={buildClassName(styles.balance, className)}>
-      <span className={styles.smallerText}>{lang('StarsBalance')}</span>
-      <div className={styles.balanceBottom}>
-        <StarIcon type="gold" size="middle" />
-        {balance !== undefined ? formatStarsAmount(lang, balance) : '…'}
+    <div className={buildClassName(styles.balanceBlock, className)}>
+      <div className={styles.balanceInfo}>
+        <span className={styles.smallerText}>{lang('StarsBalance')}</span>
+        <div className={styles.balanceBottom}>
+          <StarIcon type="gold" size="middle" />
+          {balance !== undefined ? formatStarsAmount(lang, balance) : '…'}
+          {withAddButton && (
+            <BadgeButton
+              className={styles.addStarsButton}
+              // eslint-disable-next-line react/jsx-no-bind
+              onClick={() => openStarsBalanceModal({})}
+            >
+              <Icon
+                className={styles.addStarsIcon}
+                name="add"
+              />
+            </BadgeButton>
+          )}
+        </div>
       </div>
     </div>
   );

src/components/modals/stars/StarsBalanceModal.module.scss

@@ -128,7 +128,34 @@
   z-index: 3;
 }
 
-.balance {
+.addStarsButton {
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+
+  transition: opacity 0.15s;
+  opacity: 1;
+
+  &:hover,
+  &:active {
+    opacity: 0.75;
+  }
+}
+
+.addStarsIcon {
+  font-size: 0.75rem !important;
+}
+
+.balanceBlock {
+  display: flex;
+  align-items: center;
+}
+
+.balanceInfo {
   display: flex;
   flex-direction: column;
   align-items: flex-end;