Stars: Show Stars item on the left sidebar (#5553)

src/components/left/settings/SettingsMain.tsx

@@ -35,7 +35,6 @@ type StateProps = {
   canBuyPremium?: boolean;
   isGiveawayAvailable?: boolean;
   starsBalance?: ApiStarsAmount;
-  shouldDisplayStars?: boolean;
 };
 
 const SettingsMain: FC<OwnProps & StateProps> = ({
@@ -45,7 +44,6 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
   canBuyPremium,
   isGiveawayAvailable,
   starsBalance,
-  shouldDisplayStars,
   onScreenSelect,
   onReset,
 }) => {
@@ -182,21 +180,19 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
             {lang('TelegramPremium')}
           </ListItem>
         )}
-        {shouldDisplayStars && (
-          <ListItem
-            leftElement={<StarIcon className="icon ListItem-main-icon" type="gold" size="big" />}
-            narrow
-            // eslint-disable-next-line react/jsx-no-bind
-            onClick={() => openStarsBalanceModal({})}
-          >
-            {lang('MenuStars')}
-            {Boolean(starsBalance) && (
-              <span className="settings-item__current-value">
-                {formatStarsAmount(lang, starsBalance)}
-              </span>
-            )}
-          </ListItem>
-        )}
+        <ListItem
+          leftElement={<StarIcon className="icon ListItem-main-icon" type="gold" size="big" />}
+          narrow
+          // eslint-disable-next-line react/jsx-no-bind
+          onClick={() => openStarsBalanceModal({})}
+        >
+          {lang('MenuStars')}
+          {Boolean(starsBalance) && (
+            <span className="settings-item__current-value">
+              {formatStarsAmount(lang, starsBalance)}
+            </span>
+          )}
+        </ListItem>
         {isGiveawayAvailable && (
           <ListItem
             icon="gift"
@@ -250,7 +246,6 @@ export default memo(withGlobal<OwnProps>(
     const { currentUserId } = global;
     const isGiveawayAvailable = selectIsGiveawayGiftsPurchaseAvailable(global);
     const starsBalance = global.stars?.balance;
-    const shouldDisplayStars = Boolean(global.stars?.history?.all?.transactions.length);
 
     return {
       sessionCount: global.activeSessions.orderedHashes.length,
@@ -258,7 +253,6 @@ export default memo(withGlobal<OwnProps>(
       canBuyPremium: !selectIsPremiumPurchaseBlocked(global),
       isGiveawayAvailable,
       starsBalance,
-      shouldDisplayStars,
     };
   },
 )(SettingsMain));

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

@@ -13,6 +13,10 @@
   max-width: 26.25rem;
 }
 
+.minimal :global(.modal-dialog) {
+  height: auto;
+}
+
 .root :global(.modal-dialog),
 .root :global(.modal-content),
 .transition {

src/components/modals/stars/StarsBalanceModal.tsx

@@ -51,10 +51,11 @@ export type OwnProps = {
 type StateProps = {
   starsBalanceState?: GlobalState['stars'];
   canBuyPremium?: boolean;
+  shouldForceHeight?: boolean;
 };
 
 const StarsBalanceModal = ({
-  modal, starsBalanceState, canBuyPremium,
+  modal, starsBalanceState, canBuyPremium, shouldForceHeight,
 }: OwnProps & StateProps) => {
   const {
     closeStarsBalanceModal, loadStarsTransactions, loadStarsSubscriptions, openStarsGiftingPickerModal, openInvoice,
@@ -179,7 +180,11 @@ const StarsBalanceModal = ({
   });
 
   return (
-    <Modal className={styles.root} isOpen={isOpen} onClose={closeStarsBalanceModal}>
+    <Modal
+      className={buildClassName(styles.root, !shouldForceHeight && styles.minimal)}
+      isOpen={isOpen}
+      onClose={closeStarsBalanceModal}
+    >
       <div className={buildClassName(styles.main, 'custom-scroll')} onScroll={handleScroll}>
         <Button
           round
@@ -311,7 +316,10 @@ const StarsBalanceModal = ({
 
 export default memo(withGlobal<OwnProps>(
   (global): StateProps => {
+    const shouldForceHeight = Boolean(global.stars?.history?.all?.transactions.length);
+
     return {
+      shouldForceHeight,
       starsBalanceState: global.stars,
       canBuyPremium: !selectIsPremiumPurchaseBlocked(global),
     };