Adding a keypom trial accounts button on the landing page (#137)

* wip

* added dropId

* added custom VM component for trial acccount generation.

* Added conditional rendering for the trial account generator

* undo Avatar test changes

* cleaned hero a bit

apps/builddao/widget/components/TrialAccountBanner.jsx

@@ -0,0 +1,49 @@
+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 ? (
+        <>
+          <TrialAccountGenerator
+            trigger={({ onClick }) => (
+              <Button 
+              variant="primary"
+              onClick={onClick}>Create Trial Account</Button>
+            )}
+          />
+          <TaglineSmall>Try out the builders gateway with a trial account. <br/>No crypto, no passphrase required.</TaglineSmall>
+        </> 
+        ) : null}
+    </>
+);
+

apps/builddao/widget/home/hero.jsx

@@ -7,6 +7,7 @@ const leftBlur =
 const rightBlur =
   "https://ipfs.near.social/ipfs/bafkreierwhnzytfajagidxim5mzdphu5fopjmlrxehatywzuy6ahr5q7pe";
 
+
 const HeroContainer = styled.div`
   width: 100%;
   position: relative;
@@ -85,6 +86,7 @@ const Tagline = styled.h1`
   }
 `;
 
+
 const Content = styled.div`
   display: flex;
   flex-direction: column;
@@ -95,7 +97,7 @@ const Content = styled.div`
   margin: 0 auto;
 `;
 
-const Hero = () => {
+const Hero = ({...props}) => {
   return (
     <HeroContainer>
       <Content>
@@ -104,6 +106,9 @@ const Hero = () => {
           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}
+        />
       </Content>
       <Grid src={gridLink} />
       <LeftBlur src={leftBlur} />

apps/builddao/widget/page/home.jsx

@@ -26,10 +26,9 @@ const Root = styled.div`
 `;
 
 const sections = ["hero", "goals", "join", "governance", "cta", "footer"];
-
 return (
   <Root>
-    <Hero />
+    <Hero {...props}/>
     <Goals />
     <Join />
     <Governance />

src/App.js

@@ -41,9 +41,11 @@ import Flags from "./pages/Flags";
 import JoinPage from "./pages/JoinPage";
 import Viewer from "./pages/Viewer";
 import { KEYPOM_OPTIONS } from "./utils/keypom-options";
+import { TrialAccountGenerator } from "./components/TrialAccountGenerator";
 
 export const refreshAllowanceObj = {};
 const documentationHref = "https://docs.near.org/bos/overview";
+const currentGateway = "nearbuilders";
 
 function App() {
   const [connected, setConnected] = useState(false);
@@ -114,7 +116,12 @@ function App() {
                   : "about:blank";
             }
             return <Link {...props} />;
-          }
+          },
+          TrialAccountGenerator: (props) => {
+            return (
+              <TrialAccountGenerator {...props}/>
+            );
+            }
         },
         config: {
           defaultFinality: undefined
@@ -190,7 +197,8 @@ function App() {
     logOut,
     requestSignIn,
     widgets: Widgets,
-    documentationHref
+    documentationHref,
+    currentGateway
   };
 
   return (

src/components/TrialAccountGenerator.js

@@ -0,0 +1,38 @@
+export const TrialAccountGenerator = ({ trigger }) => {
+    async function getTrialAccount() {
+      try {
+        const response = await fetch(
+          `https://harmonicdevapim.azure-api.net/bd/KeyPomMain?dropId=1706695349746`,
+          { method: "POST" }
+        );
+        if (!response.ok) {
+          // Handle HTTP errors
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        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];
+
+        //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();
+      } catch (error) {
+        console.error("Failed to get trial account:", error);
+      }
+    }
+
+    // Attach the getTrialAccount function to the onClick event
+    return trigger({ onClick: getTrialAccount });
+  };
+
+
+// Future TO-DO
+//1. Log on-chain errors (500) on the console for better debugging.
+//2. Log 429, too many requests.
+
+