End of beta - UI changes (#873)

### What Prepare app for the end of beta season, changes when `IS_BETA_CLOSED = true` are: - countdown shows time left to claim XP ![image](https://github.com/tahowallet/dapp/assets/20949277/2c8051f0-e72f-420d-afe0-9e08de77a6e2) - there are no challanges visible ![image](https://github.com/tahowallet/dapp/assets/20949277/ad05c822-0cd1-4aac-89a8-61b67c825f64) - staking is impossible ![image](https://github.com/tahowallet/dapp/assets/20949277/0e1cae78-19bd-4fa7-a754-365161cb63d1) - There is a hint below the claimable XP ![image](https://github.com/tahowallet/dapp/assets/20949277/f7adfd92-1b95-4c1a-9b4a-3a31f914df6a) - there are no "stake to join realm" or "you are already staked in another realm" banners visible (as it is no longer possible to stake) ### Testing - [x] with `IS_BETA_CLOSED = true` test changes listed above - [x] with `IS_BETA_CLOSED = false` - there should be no changes compared to prod env
tahowallet · Dec 11, 2023 · d96ff90 · d96ff90
2 parents 83c41bf + 968355f
commit d96ff90
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 20 deletions.
diff --git a/.env.defaults b/.env.defaults
@@ -21,11 +21,14 @@ ALLOW_TENDERLY_RESET="false"
 # Analytics
 ANALYTICS_ENV=DEV
 POSTHOG_API_KEY=
+# Lifecycle
+IS_COMING_SOON="true"
+IS_BETA_CLOSED="false"
+IS_PORTAL_CLOSED="false"
 # Misc
 XP_HOSTING_BASE_URL="" # TBD
 SEASON_LENGTH_IN_WEEKS=8
 CONTRACT_DEPLOYMENT_BLOCK_NUMBER=553443
 SEASON_START_DATE="2023-10-26"
 SKIP_REACT_STRICT_MODE="false"
-IS_COMING_SOON="true"
-SHOW_WAITLIST="true"
+SHOW_WAITLIST="true"
diff --git a/src/shared/constants/game.ts b/src/shared/constants/game.ts
@@ -1,4 +1,5 @@
-export const WEEKLY_XP_ALLOCATION = 1_000_000
+export const WEEKLY_XP_ALLOCATION =
+  process.env.IS_BETA_CLOSED === "true" ? 0 : 1_000_000
 export const WEEKLY_XP_BOOST = 1.2
 export const MOBILE_BREAKPOINT = 854
 export const TABLET_BREAKPOINT = 1152

diff --git a/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsContent.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsContent.tsx
@@ -31,13 +31,22 @@ export default function RealmDetailsContent({
   return (
     <Panel.Section>
       <RealmDetailsHeader realmId={realmId} realm={realm} />
-      <RealmDetailsChallenges challenges={realm?.challenges} />
+      {process.env.IS_BETA_CLOSED === "true" || (
+        <RealmDetailsChallenges challenges={realm?.challenges} />
+      )}
       <RealmDetailsRewards realmId={realmId} />
-      <RealmDetailsJoin
-        stakingRealmId={stakingRealmId}
-        triggerStakeSectionOpen={triggerStakeSectionOpen}
-      />
-      <RealmDetailsStaked stakingRealmId={stakingRealmId} realmId={realmId} />
+      {process.env.IS_BETA_CLOSED === "true" || (
+        <>
+          <RealmDetailsJoin
+            stakingRealmId={stakingRealmId}
+            triggerStakeSectionOpen={triggerStakeSectionOpen}
+          />
+          <RealmDetailsStaked
+            stakingRealmId={stakingRealmId}
+            realmId={realmId}
+          />
+        </>
+      )}
     </Panel.Section>
   )
 }
diff --git a/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsHeader.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsHeader.tsx
@@ -31,7 +31,9 @@ export default function RealmDetailsHeader({
         <h1 className="realm_header" style={{ color }}>
           {realm?.name} Realm
         </h1>
-        <RealmDetailsSection alwaysHasBorder>
+        <RealmDetailsSection
+          alwaysHasBorder={process.env.IS_BETA_CLOSED !== "true"}
+        >
           <div className="labels row">
             <div className="column">
               <span className="label row_center">
@@ -49,7 +51,10 @@ export default function RealmDetailsHeader({
             </div>
             <div className="column">
               <span className="label">This weeks reward pool</span>
-              <div className="row_center" style={{ gap: 10 }}>
+              <div
+                className="row_center"
+                style={{ gap: 10, justifyContent: "end" }}
+              >
                 <RealmIcon
                   type="circle"
                   realmId={realmId}

diff --git a/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsRewards.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsRewards.tsx
@@ -14,6 +14,7 @@ import { LINKS } from "shared/constants"
 import { bigIntToDisplayUserAmount } from "shared/utils"
 import ClaimCongratulations from "ui/Claim/modals/ClaimCongratulations"
 import XpClaimModal from "ui/Island/Modals/XpClaimModal"
+import RealmDetailsChallengeInfo from "./RealmDetailsChallengeInfo"
 
 function RealmDetailsRewards({
   amount,
@@ -97,6 +98,13 @@ function RealmDetailsRewards({
         >
           Claim XP
         </Button>
+        {process.env.IS_BETA_CLOSED === "true" && (
+          <div style={{ marginTop: "10px" }}>
+            <RealmDetailsChallengeInfo>
+              Claiming will be live till Dec 18 2023
+            </RealmDetailsChallengeInfo>
+          </div>
+        )}
       </div>
       <XpClaimModal
         isOpen={isClaimTransactionModalOpen}
@@ -122,7 +130,7 @@ function RealmDetailsRewards({
             background-color: var(--primary-p1-40);
             justify-content: space-between;
             align-items: center;
-            gap: 24px;
+            flex-wrap: wrap;
           }
           .xp_banner {
             gap: 8px;

diff --git a/src/ui/Island/RealmPanel/RealmPanelCountdown.tsx b/src/ui/Island/RealmPanel/RealmPanelCountdown.tsx
@@ -23,21 +23,28 @@ export default function RealmPanelCountdown() {
   return (
     <>
       <div className="countdown row">
-        <Icon
-          type="image"
-          src={xpBoostIcon}
-          width="125px"
-          height="64px"
-          style={{ marginTop: "10px" }}
-        />
+        {process.env.IS_BETA_CLOSED === "true" || (
+          <Icon
+            type="image"
+            src={xpBoostIcon}
+            width="125px"
+            height="64px"
+            style={{ marginTop: "10px" }}
+          />
+        )}
         <div className="column">
           <div className="week">
             Week {seasonWeek}{" "}
             <span style={{ fontSize: 16, color: "var(--secondary-s1-50)" }}>
               / {seasonDuration}
             </span>
           </div>
-          <div className="time_remaining">{timeRemaining}</div>
+
+          <div className="time_remaining">
+            {process.env.IS_BETA_CLOSED === "true"
+              ? "Beta is over, claim xp till Dec 18 2023"
+              : timeRemaining}
+          </div>
         </div>
       </div>
       <style jsx>{`

diff --git a/src/ui/Island/Staking/StakeForm.tsx b/src/ui/Island/Staking/StakeForm.tsx
@@ -133,6 +133,7 @@ export default function StakeForm({ isDisabled }: { isDisabled: boolean }) {
           buttonSize="medium"
           status={stakeTransactionStatus}
           disabled={
+            process.env.IS_BETA_CLOSED === "true" ||
             isDisabled ||
             !isStakeAmountValid ||
             !isValidInputAmount(stakeAmount)