Skip to content

Commit

Permalink
Add new banner for users on the waitlist (#265)
Browse files Browse the repository at this point in the history
If user has no TAHO then let's display this banner:

![image](https://github.com/tahowallet/tally-extension-token/assets/20949277/aad801ef-c3be-49dd-851f-d1de102c42d4)

## Testing Environment
```
SUPPORT_THE_ISLAND=true
SUPPORT_THE_ISLAND_ON_TENDERLY=true
```

Latest build:
[extension-builds-265](https://github.com/tahowallet/tally-extension-token/suites/17312286568/artifacts/989127738)
(as of Tue, 17 Oct 2023 10:15:45 GMT).
  • Loading branch information
Karolina Kosiorowska authored Oct 17, 2023
2 parents 365cc5a + a434e71 commit 684e8d6
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 5 deletions.
34 changes: 29 additions & 5 deletions ui/components/Wallet/Banner/PortalBanner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
selectShouldShowDismissableItem,
} from "@tallyho/tally-background/redux-slices/ui"
import { selectHasIslandAssets } from "@tallyho/tally-background/redux-slices/claim"
import classNames from "classnames"
import { useBackgroundDispatch, useBackgroundSelector } from "../../../hooks"
import SharedButton from "../../Shared/SharedButton"
import SharedIcon from "../../Shared/SharedIcon"
Expand All @@ -22,7 +23,7 @@ export default function PortalBanner(): ReactElement | null {
dispatch(dismissableItemMarkedAsShown("testnet-portal-is-open-banner"))
}

if (!isBannerVisible || !hasIslandAssets) {
if (!isBannerVisible) {
return null
}

Expand All @@ -46,14 +47,23 @@ export default function PortalBanner(): ReactElement | null {
)
`}
>
<i className="portal_open_image" />
<h2 className="serif_header">The portal is open!</h2>{" "}
<i
className={classNames({
portal_open_image: hasIslandAssets,
portal_open_title_image: !hasIslandAssets,
})}
/>
<h2 className="serif_header">
{hasIslandAssets ? "The portal is open!" : "The Island is live!"}
</h2>
{hasIslandAssets || <p>See if the portal is open for you.</p>}
<SharedButton
type="primary"
size="medium"
onClick={showIslandAndDismissBanner}
style={{ marginTop: "5px" }}
>
Explore The Island{" "}
{hasIslandAssets ? "Explore The Island" : "Check now"}
<SharedIcon
icon="new_tab@2x.png"
width={16}
Expand All @@ -70,11 +80,25 @@ export default function PortalBanner(): ReactElement | null {
background: url("./images/island/portal-image@2x.png");
background-size: cover;
}
.portal_open_title_image {
float: left;
width: 120px;
height: 117px;
background: url("./images/island/portal-image-title@2x.png");
background-size: cover;
margin-right: 10px;
margin-bottom: 12px;
}
h2 {
font-size: 22px;
line-height: 32px;
margin-bottom: 5px;
margin: 0;
}
p {
margin: 0 0 8px;
color: var(--green-40);
}
`}
</style>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 684e8d6

Please sign in to comment.