Skip to content

Commit cb7d393

Browse files
jagodarybackajagodarybacka
authored
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)
2 parents 1d63448 + 6bc7c6c commit cb7d393

File tree

16 files changed

+286
-34
lines changed

16 files changed

+286
-34
lines changed

‎src/shared/components/Interface/Button.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,12 @@ import React, { CSSProperties, ReactNode } from "react"
22
import classnames from "classnames"
33

44
type ButtonProps = {
5-
children: ReactNode
6-
/**
7-
* @default "primary"
8-
*/
5+
children?: ReactNode
96
type?: "primary" | "secondary" | "tertiary" | "twitter" | "reject" | "close"
10-
/**
11-
* @default "medium"
12-
*/
7+
buttonType?: "button" | "submit"
138
size?: "medium" | "large"
149
isDisabled?: boolean
1510
isInactive?: boolean
16-
/**
17-
* @default "right"
18-
*/
1911
iconPosition?: "left" | "right"
2012
iconSize?: "medium" | "large"
2113
iconSrc?: string
@@ -27,6 +19,7 @@ type ButtonProps = {
2719
export default function Button({
2820
children,
2921
type = "primary",
22+
buttonType = "button",
3023
size = "medium",
3124
isDisabled = false,
3225
isInactive = false,
@@ -40,7 +33,8 @@ export default function Button({
4033
return (
4134
<>
4235
<button
43-
type="button"
36+
// eslint-disable-next-line react/button-has-type
37+
type={buttonType}
4438
onClick={onClick}
4539
onMouseDown={onMouseDown}
4640
className={classnames({

‎src/shared/constants/external-links.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@ export default {
99
"https://support.brave.com/hc/en-us/articles/360023646212-How-do-I-configure-global-and-site-specific-Shields-settings-",
1010
FEEDBACK: "https://tahowallet.typeform.com/subscapebeta",
1111
PRIVACY_POLICY: "https://taho.xyz/privacy",
12+
GALXE_NFT: "https://galxe.com/taho",
1213
}

‎src/shared/hooks/wallets.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,13 @@ export function useWalletOnboarding(): {
169169
const { value, updateStorage } =
170170
useLocalStorageChange<string>(LOCAL_STORAGE_WALLET)
171171

172+
// Automatically clear the onboarded wallet if portal is closed
173+
useEffect(() => {
174+
if (value && process.env.IS_PORTAL_CLOSED === "true") {
175+
updateStorage("")
176+
}
177+
}, [value, updateStorage])
178+
172179
return { walletOnboarded: value, updateWalletOnboarding: updateStorage }
173180
}
174181

‎src/ui/DApps/DesktopDApp.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ function DesktopDAppContent() {
3737
return (
3838
<>
3939
{(!walletOnboarded || !isConnected) && <Onboarding />}
40-
{walletOnboarded && isConnected && <IslandView />}
40+
{process.env.IS_PORTAL_CLOSED !== "true" &&
41+
walletOnboarded &&
42+
isConnected && <IslandView />}
4143
<PrivacyPolicy />
4244
</>
4345
)

‎src/ui/DApps/IslandView.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react"
1+
import React, { useState } from "react"
22
import IslandComponent from "ui/Island"
33
import TestingPanel from "testing/components/TestingPanel"
44
import Nav from "ui/Nav"
@@ -17,6 +17,7 @@ import {
1717
import FullPageLoader from "shared/components/Loaders/FullPageLoader"
1818
import { Route, Switch } from "react-router-dom"
1919
import { useDisplayedPopulation } from "shared/hooks"
20+
import BetaEndModal from "ui/Island/Modals/BetaEndModal"
2021

2122
export default function IslandView() {
2223
const islandMode = useDappSelector(selectIslandMode)
@@ -26,11 +27,24 @@ export default function IslandView() {
2627

2728
useDisplayedPopulation()
2829

30+
const [betaEndModalVisible, setBetaEndModalVisible] = useState(
31+
process.env.IS_BETA_CLOSED === "true"
32+
)
33+
2934
return (
3035
<>
3136
<FullPageLoader
3237
loaded={hasLoadedRealmData && hasLoadedSeasonInfo && hasBalances}
3338
/>
39+
{process.env.IS_BETA_CLOSED === "true" && betaEndModalVisible && (
40+
<BetaEndModal
41+
header="Beta has ended"
42+
onClose={() => setBetaEndModalVisible(false)}
43+
>
44+
Thanks for participating in our Beta, we hope you had fun and see you
45+
in Season 1. You can still claim your XP until Dec 21 2023.
46+
</BetaEndModal>
47+
)}
3448
<IslandComponent />
3549
<TestingPanel />
3650
{islandMode === "default" && <Nav />}

‎src/ui/Footer/PopulationCount.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function PopulationCount() {
1010
const population = useDappSelector(selectTotalPopulation)
1111
const transition = useVisibilityTransition(population > 0)
1212

13-
if (!population) return null
13+
if (!population || process.env.IS_PORTAL_CLOSED === "true") return null
1414

1515
return (
1616
<>

‎src/ui/GlobalStyles/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export default function GlobalStyles() {
5252
5353
--green-5: #d6eae9;
5454
--green-40: #588382;
55+
--green-60: #315a5a;
5556
5657
--semantic-success: #20c580;
5758
--semantic-attention: #f2b824;

‎src/ui/Island/Modals/BetaEndModal/BetaEndCloseButton.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react"
2+
import Button from "shared/components/Interface/Button"
3+
import closeIcon from "shared/assets/icons/s/close-black.svg"
4+
5+
export default function BetaEndCloseButton({
6+
onClose,
7+
}: {
8+
onClose: () => void
9+
}) {
10+
return (
11+
<Button
12+
type="close"
13+
iconSrc={closeIcon}
14+
onClick={onClose}
15+
style={{
16+
padding: 12,
17+
position: "absolute",
18+
top: -20,
19+
right: -20,
20+
filter:
21+
"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))",
22+
}}
23+
/>
24+
)
25+
}

‎src/ui/Island/Modals/BetaEndModal/ClaimYourNFT.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from "react"
2+
import Button from "shared/components/Interface/Button"
3+
import { LINKS } from "shared/constants"
4+
5+
export default function ClaimYourNFT() {
6+
return (
7+
<>
8+
<div
9+
className="modal_actions_column column"
10+
style={{ alignItems: "end", textAlign: "right" }}
11+
>
12+
<h2 className="modal_actions_header">Claim your NFT</h2>
13+
<p className="modal_actions_description">
14+
Participated in the beta? See if you are
15+
<br />
16+
eligible to claim the NFT awards.
17+
</p>
18+
<Button
19+
onClick={(e) => {
20+
e.preventDefault()
21+
window.open(LINKS.GALXE_NFT, "_blank")
22+
}}
23+
>
24+
Check eligibility on Galxe
25+
</Button>
26+
</div>
27+
<style jsx>{`
28+
.modal_actions_column {
29+
width: 50%;
30+
padding-inline: 47px;
31+
}
32+
.modal_actions_header {
33+
font-size: 28px;
34+
font-weight: 500;
35+
line-height: 32px;
36+
margin-bottom: 10px;
37+
}
38+
.modal_actions_description {
39+
margin-bottom: 18px;
40+
}
41+
`}</style>
42+
</>
43+
)
44+
}

‎src/ui/Island/Modals/BetaEndModal/GetUpdates.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from "react"
2+
import GetUpdatesForm from "./GetUpdatesForm"
3+
4+
export default function GetUpdates() {
5+
return (
6+
<>
7+
<div className="modal_actions_column">
8+
<h2 className="modal_actions_header">Get Updates</h2>
9+
<p className="modal_actions_description">
10+
Sign up for updates bellow to learn
11+
<br />
12+
when Season 1 is starting
13+
</p>{" "}
14+
<GetUpdatesForm />
15+
</div>
16+
<style jsx>{`
17+
.modal_actions_column {
18+
width: 50%;
19+
padding-inline: 47px;
20+
}
21+
.modal_actions_header {
22+
font-size: 28px;
23+
font-weight: 500;
24+
line-height: 32px;
25+
margin-bottom: 10px;
26+
}
27+
.modal_actions_description {
28+
margin-bottom: 18px;
29+
}
30+
`}</style>
31+
</>
32+
)
33+
}

0 commit comments

Comments
 (0)