From 963c28c8e01a573191c4561fc7d63eafa20caa96 Mon Sep 17 00:00:00 2001 From: Jaswinder Date: Fri, 23 Feb 2024 23:15:55 +0530 Subject: [PATCH] Unified Login flow for simple login and trial logins (#183) * unified regular login and trial accounts login flow * handling for loading and error cases * updated drop id and trial url * fixed trial url * update state * fmt * cleanup --------- Co-authored-by: Megha-Dev-19 Co-authored-by: Elliot Braem <16282460+elliotBraem@users.noreply.github.com> --- apps/builddao/widget/TrialAccountBanner.jsx | 157 ++++++++++++++++++ apps/builddao/widget/components/Button.jsx | 15 +- .../widget/components/TrialAccountBanner.jsx | 50 ------ apps/builddao/widget/home/footer.jsx | 2 +- apps/builddao/widget/home/hero.jsx | 42 ++++- apps/builddao/widget/login.jsx | 5 +- src/App.js | 2 +- src/components/TrialAccountGenerator.js | 16 +- src/pages/JoinPage.js | 13 +- 9 files changed, 229 insertions(+), 73 deletions(-) create mode 100644 apps/builddao/widget/TrialAccountBanner.jsx delete mode 100644 apps/builddao/widget/components/TrialAccountBanner.jsx diff --git a/apps/builddao/widget/TrialAccountBanner.jsx b/apps/builddao/widget/TrialAccountBanner.jsx new file mode 100644 index 00000000..cb0c7627 --- /dev/null +++ b/apps/builddao/widget/TrialAccountBanner.jsx @@ -0,0 +1,157 @@ +const { Button, Avatar } = VM.require("buildhub.near/widget/components") || { + Button: () => <>, + Avatar: () => <>, +}; +const [loading, setLoading] = useState(false); +const [btnText, setBtnText] = useState("Create Trial Account"); + +// const TaglineSmall = styled.h2` +// max-width: 700px; + +// text-align: center; +// font-size: 1.1rem; +// font-style: normal; +// font-weight: 400; +// line-height: 130%; /* 57.6px */ +// margin: 0; + +// text-wrap: balance; + +// span.muted { +// color: rgba(255, 255, 255, 0.7); +// } + +// @media screen and (max-width: 768px) { +// font-size: 1rem; +// } +// `; + +const Container = styled.div` + background-color: #0b0c14; + color: #fff; + height: 100%; + + position: relative; + + display: flex; + align-items: center; + justify-content: center; + + img { + width: 100%; + max-height: 100vh; + object-fit: cover; + object-position: center top; + position: absolute; + top: 0%; + left: 50%; + transform: translateX(-50%); + } + + .card { + z-index: 5; + background: transparent; + display: flex; + max-width: 500px; + width: 100%; + max-height: 550px; + padding: 80px 24px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 40px; + + img { + width: auto; + height: 54px; + object-fit: cover; + } + + h1 { + color: var(--white-100, #fff); + text-align: center; + + /* H1/small */ + font-size: 2rem; + font-style: normal; + font-weight: 500; + line-height: 100%; /* 32px */ + } + + button { + all: unset; + cursor: pointer; + display: flex; + padding: 16px 20px; + justify-content: center; + align-items: center; + gap: 4px; + align-self: stretch; + + border-radius: 8px; + background: #ffaf51; + + &:hover:not(:disabled) { + background: #e49b48; + text-decoration: none; + } + + color: var(--black-100, #000); + + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: normal; + } + } +`; + +const { networkId, accountId } = context; +// Check if the network is testnet +const isTestnet = networkId === "testnet"; + +const { currentGateway } = props; +return ( + + <> + {currentGateway && !isTestnet && accountId === null ? ( + <> +
+ +

+ Try out the builders gateway with a trial account.
+ No crypto, no passphrase required. +

+ ( + + )} + /> +
+ + + ) : null} + + +); diff --git a/apps/builddao/widget/components/Button.jsx b/apps/builddao/widget/components/Button.jsx index 64022fe0..1718b7dd 100644 --- a/apps/builddao/widget/components/Button.jsx +++ b/apps/builddao/widget/components/Button.jsx @@ -57,7 +57,7 @@ const StyledButton = styled.button` : ""}; /* Hover states */ - &:hover { + &:hover:not(:disabled) { background: ${(props) => { switch (props.variant) { case "primary": @@ -72,13 +72,14 @@ const StyledButton = styled.button` &:disabled { opacity: 0.5; - cursor: not-allowed; + cursor: not-allowed !important; } `; function Button({ id, disabled, + loading, children, variant, type, @@ -90,6 +91,7 @@ function Button({ noLink, style, }) { + className = className + (disabled ? " disabled" : ""); if (href && noLink) { return ( {children} + {loading ? ( + + ) : null} ); } diff --git a/apps/builddao/widget/components/TrialAccountBanner.jsx b/apps/builddao/widget/components/TrialAccountBanner.jsx deleted file mode 100644 index c7bff3a3..00000000 --- a/apps/builddao/widget/components/TrialAccountBanner.jsx +++ /dev/null @@ -1,50 +0,0 @@ -const { Button, Avatar } = VM.require("buildhub.near/widget/components") || { - Button: () => <>, - Avatar: () => <>, -}; - -const TaglineSmall = styled.h2` - max-width: 700px; - - text-align: center; - font-size: 1.1rem; - font-style: normal; - font-weight: 400; - line-height: 130%; /* 57.6px */ - margin: 0; - - text-wrap: balance; - - span.muted { - color: rgba(255, 255, 255, 0.7); - } - - @media screen and (max-width: 768px) { - font-size: 1rem; - } -`; - -const { networkId, accountId } = context; -// Check if the network is testnet -const isTestnet = networkId === "testnet"; - -const { currentGateway } = props; -return ( - <> - {currentGateway && !isTestnet && accountId === null ? ( - <> - ( - - )} - /> - - Try out the builders gateway with a trial account.
- No crypto, no passphrase required. - - - ) : null} - -); diff --git a/apps/builddao/widget/home/footer.jsx b/apps/builddao/widget/home/footer.jsx index d5237146..eb33ac1d 100644 --- a/apps/builddao/widget/home/footer.jsx +++ b/apps/builddao/widget/home/footer.jsx @@ -65,7 +65,7 @@ const TelegramIcon = ( fontWeight="none" fontSize="none" textAnchor="none" - style={{ "mix-blend-mode": "normal" }} + style={{ "mixBlendMode": "normal" }} > diff --git a/apps/builddao/widget/home/hero.jsx b/apps/builddao/widget/home/hero.jsx index 6e681ec4..6068096e 100644 --- a/apps/builddao/widget/home/hero.jsx +++ b/apps/builddao/widget/home/hero.jsx @@ -7,6 +7,32 @@ const leftBlur = const rightBlur = "https://ipfs.near.social/ipfs/bafkreierwhnzytfajagidxim5mzdphu5fopjmlrxehatywzuy6ahr5q7pe"; +const { Button, Avatar } = VM.require("buildhub.near/widget/components") || { + Button: () => <>, + Avatar: () => <>, +}; + +const TaglineSmall = styled.h2` + max-width: 700px; + + text-align: center; + font-size: 1.1rem; + font-style: normal; + font-weight: 400; + line-height: 130%; /* 57.6px */ + margin: 0; + + text-wrap: balance; + + span.muted { + color: rgba(255, 255, 255, 0.7); + } + + @media screen and (max-width: 768px) { + font-size: 1rem; + } +`; + const HeroContainer = styled.div` width: 100%; position: relative; @@ -95,7 +121,7 @@ const Content = styled.div` margin: 0 auto; `; -const Hero = ({ ...props }) => { +const Hero = () => { return ( @@ -104,10 +130,16 @@ const Hero = ({ ...props }) => { Designed to connect and empower builders in a{" "} multi-chain ecosystem - + + + + + Try out the builders gateway with a trial account.
+ No crypto, no passphrase required. + diff --git a/apps/builddao/widget/login.jsx b/apps/builddao/widget/login.jsx index abb039d6..0730c024 100644 --- a/apps/builddao/widget/login.jsx +++ b/apps/builddao/widget/login.jsx @@ -61,11 +61,10 @@ const LoginContainer = styled.div` align-self: stretch; border-radius: 8px; - border: 1px solid var(--white-100, #fff); - background: #fff; + background: #ffaf51; &:hover { - text-decoration: none; + background: #e49b48; } color: var(--black-100, #000); diff --git a/src/App.js b/src/App.js index 563ef3de..ab987f5b 100644 --- a/src/App.js +++ b/src/App.js @@ -90,7 +90,7 @@ function App() { url: NetworkId == "testnet" ? "https://test.nearbuilders.org/#trial-url/ACCOUNT_ID/SECRET_KEY" - : "https://www.nearbuilders.org/#trial-url/ACCOUNT_ID/SECRET_KEY", + : "https://www.nearbuilders.org/join?from=trial/#trial-url/ACCOUNT_ID/SECRET_KEY", modalOptions: KEYPOM_OPTIONS(NetworkId), }, instantSignInSpecs: { diff --git a/src/components/TrialAccountGenerator.js b/src/components/TrialAccountGenerator.js index 906ed174..0c60e5dc 100644 --- a/src/components/TrialAccountGenerator.js +++ b/src/components/TrialAccountGenerator.js @@ -2,7 +2,7 @@ export const TrialAccountGenerator = ({ trigger }) => { async function getTrialAccount() { try { const response = await fetch( - `https://harmonicdevapim.azure-api.net/bd/KeyPomMain?dropId=1706695349746`, + `https://harmonicdevapim.azure-api.net/bd/KeyPomMain?dropId=1708596356159`, { method: "POST" }, ); if (!response.ok) { @@ -11,23 +11,25 @@ export const TrialAccountGenerator = ({ trigger }) => { } const body = await response.json(); // Correctly parse the JSON response body - //To-do - // Do I really need to get the trial account path like this? - // It does help me make localhost work for local testing. Need to change to trial URL in app.js to make it work though. - const path = body.url.split("https://www.nearbuilders.org")[1]; + // //To-do + // // Do I really need to get the trial account path like this? + // // It does help me make localhost work for local testing. Need to change to trial URL in app.js to make it work though. + const path = + "/join?from=trial" + body.url.split("https://www.nearbuilders.org")[1]; //This does not work right now because of keypom selector is implemented. //window.location.href = `${window.location.origin}${path}`; window.open(`${window.location.origin}${path}`, "_self"); - window.location.reload(); + //window.location.reload(); } catch (error) { console.error("Failed to get trial account:", error); + throw new Error(error); } } // Attach the getTrialAccount function to the onClick event - return trigger({ onClick: getTrialAccount }); + return trigger({ getTrialAccount: getTrialAccount }); }; // Future TO-DO diff --git a/src/pages/JoinPage.js b/src/pages/JoinPage.js index 16951845..59313aac 100644 --- a/src/pages/JoinPage.js +++ b/src/pages/JoinPage.js @@ -1,15 +1,20 @@ -import React from "react"; -import { UserDropdown } from "../components/navigation/UserDropdown"; import { Widget } from "near-social-vm"; -import { useBosLoaderStore } from "../stores/bos-loader"; +import React from "react"; +import { useLocation } from "react-router-dom"; import OnboardingFlow from "../components/OnboardingFlow"; +import { useBosLoaderStore } from "../stores/bos-loader"; export default function JoinPage(props) { const redirectMapStore = useBosLoaderStore(); + const location = useLocation(); + const searchParams = new URLSearchParams(location.search); + const from = searchParams.get("from"); const CurrentView = props.signedIn ? "buildhub.near/widget/app" - : "buildhub.near/widget/login"; + : from === "trial" + ? "buildhub.near/widget/TrialAccountBanner" + : "buildhub.near/widget/login"; return ( <>