Beta end modal (#874)

Ref #875 Ref #876 ## What has been done - Added "Beta has ended" modal on top of the map - Added "Portal is closed" modal on the onboarding page - Set flags to prevent users from entering the map, when portal is closed - Automatically clear onboarded wallet when portal is closed ## What is missing - Link to claim Galxe NFT - Endpoint for "Sign up" form ## Testing - [x] Set `IS_BETA_CLOSED` flag to `true` - [x] "Beta has ended" modal is on top of the map - [x] Modal can be closed - [x] Set `IS_PORTAL_CLOSED` flag to `true` - [x] Onboarded wallet is cleared from `localStorage` - [x] "Portal is closed" modal is on the onboarding page - [x] Population count is not visible - [x] Is it not possible to connect the wallet ![Zrzut ekranu 2023-12-12 o 09 35 26](https://github.com/tahowallet/dapp/assets/73061939/0b01bcb6-4aad-4ee7-9e6a-274cfdc0027b) ![Zrzut ekranu 2023-12-12 o 09 34 53](https://github.com/tahowallet/dapp/assets/73061939/5d1f8ca7-80ba-4b14-9957-4a3e739b4bd5)
tahowallet · Dec 12, 2023 · cb7d393 · cb7d393
2 parents 1d63448 + 6bc7c6c
commit cb7d393
Show file tree

Hide file tree

Showing 16 changed files with 286 additions and 34 deletions.
diff --git a/src/shared/components/Interface/Button.tsx b/src/shared/components/Interface/Button.tsx
@@ -2,20 +2,12 @@ import React, { CSSProperties, ReactNode } from "react"
 import classnames from "classnames"
 
 type ButtonProps = {
-  children: ReactNode
-  /**
-   * @default "primary"
-   */
+  children?: ReactNode
   type?: "primary" | "secondary" | "tertiary" | "twitter" | "reject" | "close"
-  /**
-   * @default "medium"
-   */
+  buttonType?: "button" | "submit"
   size?: "medium" | "large"
   isDisabled?: boolean
   isInactive?: boolean
-  /**
-   * @default "right"
-   */
   iconPosition?: "left" | "right"
   iconSize?: "medium" | "large"
   iconSrc?: string
@@ -27,6 +19,7 @@ type ButtonProps = {
 export default function Button({
   children,
   type = "primary",
+  buttonType = "button",
   size = "medium",
   isDisabled = false,
   isInactive = false,
@@ -40,7 +33,8 @@ export default function Button({
   return (
     <>
       <button
-        type="button"
+        // eslint-disable-next-line react/button-has-type
+        type={buttonType}
         onClick={onClick}
         onMouseDown={onMouseDown}
         className={classnames({

diff --git a/src/shared/constants/external-links.ts b/src/shared/constants/external-links.ts
@@ -9,4 +9,5 @@ export default {
     "https://support.brave.com/hc/en-us/articles/360023646212-How-do-I-configure-global-and-site-specific-Shields-settings-",
   FEEDBACK: "https://tahowallet.typeform.com/subscapebeta",
   PRIVACY_POLICY: "https://taho.xyz/privacy",
+  GALXE_NFT: "https://galxe.com/taho",
 }
diff --git a/src/shared/hooks/wallets.ts b/src/shared/hooks/wallets.ts
@@ -169,6 +169,13 @@ export function useWalletOnboarding(): {
   const { value, updateStorage } =
     useLocalStorageChange<string>(LOCAL_STORAGE_WALLET)
 
+  // Automatically clear the onboarded wallet if portal is closed
+  useEffect(() => {
+    if (value && process.env.IS_PORTAL_CLOSED === "true") {
+      updateStorage("")
+    }
+  }, [value, updateStorage])
+
   return { walletOnboarded: value, updateWalletOnboarding: updateStorage }
 }
 

diff --git a/src/ui/DApps/DesktopDApp.tsx b/src/ui/DApps/DesktopDApp.tsx
@@ -37,7 +37,9 @@ function DesktopDAppContent() {
   return (
     <>
       {(!walletOnboarded || !isConnected) && <Onboarding />}
-      {walletOnboarded && isConnected && <IslandView />}
+      {process.env.IS_PORTAL_CLOSED !== "true" &&
+        walletOnboarded &&
+        isConnected && <IslandView />}
       <PrivacyPolicy />
     </>
   )

diff --git a/src/ui/DApps/IslandView.tsx b/src/ui/DApps/IslandView.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import IslandComponent from "ui/Island"
 import TestingPanel from "testing/components/TestingPanel"
 import Nav from "ui/Nav"
@@ -17,6 +17,7 @@ import {
 import FullPageLoader from "shared/components/Loaders/FullPageLoader"
 import { Route, Switch } from "react-router-dom"
 import { useDisplayedPopulation } from "shared/hooks"
+import BetaEndModal from "ui/Island/Modals/BetaEndModal"
 
 export default function IslandView() {
   const islandMode = useDappSelector(selectIslandMode)
@@ -26,11 +27,24 @@ export default function IslandView() {
 
   useDisplayedPopulation()
 
+  const [betaEndModalVisible, setBetaEndModalVisible] = useState(
+    process.env.IS_BETA_CLOSED === "true"
+  )
+
   return (
     <>
       <FullPageLoader
         loaded={hasLoadedRealmData && hasLoadedSeasonInfo && hasBalances}
       />
+      {process.env.IS_BETA_CLOSED === "true" && betaEndModalVisible && (
+        <BetaEndModal
+          header="Beta has ended"
+          onClose={() => setBetaEndModalVisible(false)}
+        >
+          Thanks for participating in our Beta, we hope you had fun and see you
+          in Season 1. You can still claim your XP until Dec 21 2023.
+        </BetaEndModal>
+      )}
       <IslandComponent />
       <TestingPanel />
       {islandMode === "default" && <Nav />}

diff --git a/src/ui/Footer/PopulationCount.tsx b/src/ui/Footer/PopulationCount.tsx
@@ -10,7 +10,7 @@ export default function PopulationCount() {
   const population = useDappSelector(selectTotalPopulation)
   const transition = useVisibilityTransition(population > 0)
 
-  if (!population) return null
+  if (!population || process.env.IS_PORTAL_CLOSED === "true") return null
 
   return (
     <>

diff --git a/src/ui/GlobalStyles/index.tsx b/src/ui/GlobalStyles/index.tsx
@@ -52,6 +52,7 @@ export default function GlobalStyles() {
 
           --green-5: #d6eae9;
           --green-40: #588382;
+          --green-60: #315a5a;
 
           --semantic-success: #20c580;
           --semantic-attention: #f2b824;

diff --git a/src/ui/Island/Modals/BetaEndModal/BetaEndCloseButton.tsx b/src/ui/Island/Modals/BetaEndModal/BetaEndCloseButton.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+import Button from "shared/components/Interface/Button"
+import closeIcon from "shared/assets/icons/s/close-black.svg"
+
+export default function BetaEndCloseButton({
+  onClose,
+}: {
+  onClose: () => void
+}) {
+  return (
+    <Button
+      type="close"
+      iconSrc={closeIcon}
+      onClick={onClose}
+      style={{
+        padding: 12,
+        position: "absolute",
+        top: -20,
+        right: -20,
+        filter:
+          "drop-shadow(0px 2px 4px rgba(7, 17, 17, 0.34)) drop-shadow(0px 6px 8px rgba(7, 17, 17, 0.24)) drop-shadow(0px 16px 16px rgba(7, 17, 17, 0.30))",
+      }}
+    />
+  )
+}
diff --git a/src/ui/Island/Modals/BetaEndModal/ClaimYourNFT.tsx b/src/ui/Island/Modals/BetaEndModal/ClaimYourNFT.tsx
@@ -0,0 +1,44 @@
+import React from "react"
+import Button from "shared/components/Interface/Button"
+import { LINKS } from "shared/constants"
+
+export default function ClaimYourNFT() {
+  return (
+    <>
+      <div
+        className="modal_actions_column column"
+        style={{ alignItems: "end", textAlign: "right" }}
+      >
+        <h2 className="modal_actions_header">Claim your NFT</h2>
+        <p className="modal_actions_description">
+          Participated in the beta? See if you are
+          <br />
+          eligible to claim the NFT awards.
+        </p>
+        <Button
+          onClick={(e) => {
+            e.preventDefault()
+            window.open(LINKS.GALXE_NFT, "_blank")
+          }}
+        >
+          Check eligibility on Galxe
+        </Button>
+      </div>
+      <style jsx>{`
+        .modal_actions_column {
+          width: 50%;
+          padding-inline: 47px;
+        }
+        .modal_actions_header {
+          font-size: 28px;
+          font-weight: 500;
+          line-height: 32px;
+          margin-bottom: 10px;
+        }
+        .modal_actions_description {
+          margin-bottom: 18px;
+        }
+      `}</style>
+    </>
+  )
+}
diff --git a/src/ui/Island/Modals/BetaEndModal/GetUpdates.tsx b/src/ui/Island/Modals/BetaEndModal/GetUpdates.tsx
@@ -0,0 +1,33 @@
+import React from "react"
+import GetUpdatesForm from "./GetUpdatesForm"
+
+export default function GetUpdates() {
+  return (
+    <>
+      <div className="modal_actions_column">
+        <h2 className="modal_actions_header">Get Updates</h2>
+        <p className="modal_actions_description">
+          Sign up for updates bellow to learn
+          <br />
+          when Season 1 is starting
+        </p>{" "}
+        <GetUpdatesForm />
+      </div>
+      <style jsx>{`
+        .modal_actions_column {
+          width: 50%;
+          padding-inline: 47px;
+        }
+        .modal_actions_header {
+          font-size: 28px;
+          font-weight: 500;
+          line-height: 32px;
+          margin-bottom: 10px;
+        }
+        .modal_actions_description {
+          margin-bottom: 18px;
+        }
+      `}</style>
+    </>
+  )
+}
diff --git a/src/ui/Island/Modals/BetaEndModal/GetUpdatesForm.tsx b/src/ui/Island/Modals/BetaEndModal/GetUpdatesForm.tsx
@@ -0,0 +1,46 @@
+import React, { FormEvent, useState } from "react"
+import Button from "shared/components/Interface/Button"
+
+export default function GetUpdatesForm() {
+  const [emailAddress, setEmailAddress] = useState("")
+
+  const formSubmitHandler = (e: FormEvent) => {
+    e.preventDefault()
+
+    // TODO: logic for sending form
+  }
+
+  return (
+    <>
+      <form className="row_center" onSubmit={formSubmitHandler}>
+        <input
+          tabIndex={0}
+          placeholder="Email address"
+          value={emailAddress}
+          onChange={(e) => setEmailAddress(e.target.value)}
+          className="modal_actions_input"
+        />
+        <Button buttonType="submit" style={{ transform: "translateX(-20px)" }}>
+          Sign up
+        </Button>
+      </form>
+      <style jsx>{`
+        .modal_actions_input {
+          font-size: 16px;
+          line-height: 24px;
+          background: var(--primary-p1-100);
+          padding: 12px 16px;
+          outline: none;
+          border-radius: 4px;
+          border: 1.5px solid var(--green-60);
+          font-family: var(--sans);
+          color: var(--secondary-s1-100);
+        }
+        modal_actions_input:focus,
+        modal_actions_input:active {
+          border-color: var(--secondary-s1-100);
+        }
+      `}</style>
+    </>
+  )
+}
diff --git a/src/ui/Island/Modals/BetaEndModal/index.tsx b/src/ui/Island/Modals/BetaEndModal/index.tsx
@@ -0,0 +1,75 @@
+import React, { ReactNode } from "react"
+import Modal from "shared/components/Dialogs/Modal"
+import GetUpdates from "./GetUpdates"
+import ClaimYourNFT from "./ClaimYourNFT"
+import BetaEndCloseButton from "./BetaEndCloseButton"
+
+type BetaEndModalProps = {
+  header: ReactNode
+  children: ReactNode
+  onClose?: () => void
+}
+
+export default function BetaEndModal({
+  header,
+  children,
+  onClose,
+}: BetaEndModalProps) {
+  return (
+    <>
+      <Modal.ScrollableContainer
+        type="island-without-overlay"
+        topSpacing="150px"
+      >
+        <Modal.Content style={{ display: "flex", justifyContent: "center" }}>
+          <div style={{ width: 860, position: "relative" }}>
+            <div className="modal_header_container">
+              <h1 className="modal_header">{header}</h1>
+              <div style={{ paddingInline: 20 }}>{children}</div>
+            </div>
+            <div className="modal_actions row">
+              <ClaimYourNFT />
+              <GetUpdates />
+            </div>
+            {onClose && <BetaEndCloseButton onClose={onClose} />}
+          </div>
+        </Modal.Content>
+      </Modal.ScrollableContainer>
+      <style jsx>{`
+        .modal_header_container {
+          background: var(--background-gradient);
+          backdrop-filter: blur(26px);
+          text-align: center;
+          padding: 49px 63px 40px;
+          border-radius: 16px 16px 0 0;
+        }
+        .modal_header {
+          font-family: var(--serif);
+          font-size: 52px;
+          font-weight: 500;
+          line-height: 42px;
+          letter-spacing: 1.04px;
+          margin-bottom: 32px;
+        }
+        .modal_actions {
+          background: var(--primary-p1-100);
+          padding: 36px 0 40px;
+          width: 100%;
+          border-radius: 0 0 16px 16px;
+          position: relative;
+        }
+        .modal_actions::after {
+          content: "";
+          opacity: 0.4;
+          background: #557473;
+          width: 1px;
+          height: 152px;
+          position: absolute;
+          left: 50%;
+          top: 45px;
+          transform: translateX(-50%);
+        }
+      `}</style>
+    </>
+  )
+}
diff --git a/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsRewards.tsx b/src/ui/Island/RealmPanel/RealmDetailsPanel/RealmDetailsRewards.tsx
@@ -101,7 +101,7 @@ function RealmDetailsRewards({
         {process.env.IS_BETA_CLOSED === "true" && (
           <div style={{ marginTop: "10px" }}>
             <RealmDetailsChallengeInfo>
-              Claiming will be live till Dec 18 2023
+              Claiming will be live till Dec 21 2023
             </RealmDetailsChallengeInfo>
           </div>
         )}

diff --git a/src/ui/Island/RealmPanel/RealmPanelCountdown.tsx b/src/ui/Island/RealmPanel/RealmPanelCountdown.tsx
@@ -5,9 +5,9 @@ import {
   selectWeekEndDate,
   useDappSelector,
 } from "redux-state"
+import Icon from "shared/components/Media/Icon"
 import { getNextSelectedWeekDay, getTimeRemaining } from "shared/utils"
 import xpBoostIcon from "shared/assets/icons/xp-boost.svg"
-import Icon from "shared/components/Media/Icon"
 
 export default function RealmPanelCountdown() {
   const seasonWeek = useDappSelector(selectSeasonWeek)
@@ -42,7 +42,7 @@ export default function RealmPanelCountdown() {
 
           <div className="time_remaining">
             {process.env.IS_BETA_CLOSED === "true"
-              ? "Beta is over, claim xp till Dec 18 2023"
+              ? "Beta is over, claim XP till Dec 21 2023"
               : timeRemaining}
           </div>
         </div>