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 <meghadev1901@gmail.com> Co-authored-by: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
NEARBuilders · Feb 23, 2024 · 963c28c · 963c28c
1 parent 0ceee2e
commit 963c28c
Show file tree

Hide file tree

Showing 9 changed files with 229 additions and 73 deletions.
diff --git a/apps/builddao/widget/TrialAccountBanner.jsx 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 (
+  <Container>
+    <>
+      {currentGateway && !isTestnet && accountId === null ? (
+        <>
+          <div className="card">
+            <img src="https://ipfs.near.social/ipfs/bafkreihbwho3qfvnu4yss3eh5jrx6uxhrlzdgtdjyzyjrpa6odro6wdxya" />
+            <h1>
+              Try out the builders gateway with a trial account. <br />
+              No crypto, no passphrase required.
+            </h1>
+            <TrialAccountGenerator
+              trigger={({ getTrialAccount }) => (
+                <Button
+                  variant="primary"
+                  disabled={loading}
+                  loading={loading}
+                  onClick={() => {
+                    setLoading(true);
+                    setBtnText("Creating your account...");
+                    getTrialAccount()
+                      .then((res) => {
+                        console.log(res);
+                        setLoading(false);
+                      })
+                      .catch((error) => {
+                        setLoading(false);
+                        setBtnText(
+                          "Trial account claim empty now. They will be available again soon. Please try later...",
+                        );
+                      });
+                  }}
+                >
+                  {btnText}
+                </Button>
+              )}
+            />
+          </div>
+          <img src="https://ipfs.near.social/ipfs/bafybeibqnkvafyflci4iap73prugmjw4wlwmrazbiudvnsyr34yzmk75i4" />
+        </>
+      ) : null}
+    </>
+  </Container>
+);
diff --git 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 (
       <a
@@ -103,6 +105,7 @@ function Button({
           key={`ButtonLink-${type ?? "Normal"}-${variant ?? "Default"}-${id}`}
           className={className}
           variant={variant}
+          disabled={disabled}
           type={type}
           style={style}
           href={href}
@@ -125,6 +128,7 @@ function Button({
           id={id}
           key={`ButtonLink-${type ?? "Normal"}-${variant ?? "Default"}-${id}`}
           className={className}
+          disabled={disabled}
           variant={variant}
           type={type}
           style={style}
@@ -148,6 +152,13 @@ function Button({
       onClick={onClick}
     >
       {children}
+      {loading ? (
+        <span
+          className="spinner-border spinner-border-sm mr-2"
+          role="status"
+          aria-hidden="true"
+        ></span>
+      ) : null}
     </StyledButton>
   );
 }

diff --git a/apps/builddao/widget/components/TrialAccountBanner.jsx b/apps/builddao/widget/components/TrialAccountBanner.jsx
diff --git 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" }}
     >
       <g transform="scale(5.12,5.12)">
         <path d="M46.137,6.552c-0.75,-0.636 -1.928,-0.727 -3.146,-0.238h-0.002c-1.281,0.514 -36.261,15.518 -37.685,16.131c-0.259,0.09 -2.521,0.934 -2.288,2.814c0.208,1.695 2.026,2.397 2.248,2.478l8.893,3.045c0.59,1.964 2.765,9.21 3.246,10.758c0.3,0.965 0.789,2.233 1.646,2.494c0.752,0.29 1.5,0.025 1.984,-0.355l5.437,-5.043l8.777,6.845l0.209,0.125c0.596,0.264 1.167,0.396 1.712,0.396c0.421,0 0.825,-0.079 1.211,-0.237c1.315,-0.54 1.841,-1.793 1.896,-1.935l6.556,-34.077c0.4,-1.82 -0.156,-2.746 -0.694,-3.201zM22,32l-3,8l-3,-10l23,-17z"></path>

diff --git 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 (
     <HeroContainer>
       <Content>
@@ -104,10 +130,16 @@ const Hero = ({ ...props }) => {
           Designed to connect and empower builders in a{" "}
           <span className="muted">multi-chain ecosystem</span>
         </Tagline>
-        <Widget
-          src="buildhub.near/widget/components.TrialAccountBanner"
-          props={props}
-        />
+        <a
+          href={"https://nearbuilders.org/join?from=trial"}
+          style={{ textDecoration: "none" }}
+        >
+          <Button variant="primary">Create Trial Account</Button>
+        </a>
+        <TaglineSmall>
+          Try out the builders gateway with a trial account. <br />
+          No crypto, no passphrase required.
+        </TaglineSmall>
       </Content>
       <Grid src={gridLink} />
       <LeftBlur src={leftBlur} />

diff --git 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
@@ -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: {