Passed down details into project, using temporal sdk for reusable fuc…

…tions

apps/builddao/widget/components/project/Card.jsx

@@ -21,6 +21,7 @@ const Card = styled.div`
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
+  justify-content: space-between;
 
   color: var(--text-color, #fff);
 
@@ -48,40 +49,49 @@ const Card = styled.div`
       width: 90%;
     }
   }
+  .card-top {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+  }
 `;
 
-const ProjectCard = ({ title, tags, people, accountId }) => {
+const ProjectCard = ({ title, tags, people, accountId, type, app }) => {
   return (
     <Card>
-      <Avatar accountId={accountId} />
-      <div className="info">
-        <h4>{title.length > 30 ? `${title.slice(0, 25)}...` : title}</h4>
-        <span>{`@${
-          accountId.length > 30
-            ? `${accountId.slice(0, 20)}...${accountId.slice(
-                accountId.length - 4
-              )}`
-            : accountId
-        }`}</span>
-      </div>
-      <div className="d-flex align-items-center flex-wrap gap-2">
-        {tags.map((tag) => (
-          <Hashtag>
-            <span className="fw-bold">{tag}</span>
-          </Hashtag>
-        ))}
+      <div className="card-top">
+        <Avatar accountId={accountId} />
+        <div className="info">
+          <h4>{title.length > 30 ? `${title.slice(0, 25)}...` : title}</h4>
+          <span>{`@${
+            accountId.length > 30
+              ? `${accountId.slice(0, 20)}...${accountId.slice(
+                  accountId.length - 4
+                )}`
+              : accountId
+          }`}</span>
+        </div>
+        <div className="d-flex align-items-center flex-wrap gap-2">
+          {tags.map((tag) => (
+            <Hashtag>
+              <span className="fw-bold">{tag}</span>
+            </Hashtag>
+          ))}
+        </div>
+        <div>
+          <ProfileImages accountIds={people} />
+        </div>
       </div>
-      <div>
-        <ProfileImages accountIds={people} />
+      <div className="card-bottom w-100">
+        <Button
+          href={`/buildhub.near/widget/app?page=project&id=${accountId}/${app}/${type}/${title}`}
+          linkClassName="align-self-stretch bt-w"
+          variant="outline"
+        >
+          Open
+        </Button>
       </div>
-      <Button
-        href={`/buildhub.near/widget/app?page=project&accountId=${accountId}`}
-        // className="align-self-stretch"
-        linkClassName="align-self-stretch bt-w"
-        variant="outline"
-      >
-        Open
-      </Button>
     </Card>
   );
 };

apps/builddao/widget/components/project/Tabs.jsx

@@ -2,7 +2,35 @@ const { Post } = VM.require("buildhub.near/widget/components") || {
   Post: () => <></>,
 };
 
-const accountId = props.accountId ?? context.accountId;
+const { validNearAddresses } = VM.require(
+  "buildhub.near/widget/lib.extract-near-addresses"
+) || {
+  validNearAddresses: () => {},
+};
+
+const {
+  title,
+  description,
+  tags,
+  collaborators,
+  projectLink,
+  demoLink,
+  contactInfo,
+  referrer,
+  learning,
+} = props.project;
+
+const accountId = props.accountId;
+
+const valid = validNearAddresses(collaborators);
+
+valid.unshift(accountId);
+
+// making sure the array is unique
+const unique = [...new Set(valid)];
+// }
+const team = unique || [];
+
 if (!accountId) {
   return "No account ID";
 }
@@ -13,7 +41,7 @@ if (profile === null) {
   return "Loading";
 }
 
-const description = profile.description;
+// const description = profile.description;
 
 const pills = [
   { id: "overview", title: "Overview" },
@@ -82,6 +110,9 @@ return (
           loading=""
           props={{
             accountId,
+            description,
+            tags,
+            collaborators: team,
             profile,
           }}
         />

apps/builddao/widget/components/project/page/Overview.jsx

@@ -1,10 +1,13 @@
-const { Hashtag } = VM.require("buildhub.near/widget/components") || {
+const { Hashtag, User } = VM.require("buildhub.near/widget/components") || {
   Hashtag: () => <></>,
+  User: () => <></>,
 };
 
 const accountId = props.accountId;
 const profile = props.profile;
 
+const { description, tags, collaborators } = props;
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -51,15 +54,13 @@ const MapIcon = () => (
   </svg>
 );
 
-const tags = Object.keys(profile.tags ?? []);
-
 return (
   <Container>
     <div className="section">
       <p className="heading">About</p>
       <p className="description">
-        {profile.description ? (
-          <Markdown text={profile.description} />
+        {description ? (
+          <Markdown text={description} />
         ) : (
           "No information available"
         )}
@@ -76,17 +77,26 @@ return (
         <p className="heading">Team Size</p>
         <p className="description d-flex align-items-center gap-2">
           <i className="bi bi-person"></i>
-          {!profile.members && "0"}
-          {profile.members.length <= 10 && "1-10"}
-          {profile.members.length <= 50 && "10-50"}
-          {profile.members.length <= 100 && "50-100"}
-          {profile.members.length > 100 && "100+"}
+          {!collaborators || !collaborators.length
+            ? "0"
+            : collaborators.length <= 10
+            ? "1-10"
+            : collaborators.length <= 50
+            ? "10-50"
+            : collaborators.length <= 100
+            ? "50-100"
+            : "100+"}
         </p>
       </div>
     </div>
     <div className="section">
       <p className="heading">Contributors</p>
-      {!profile.contributors && <p className="description">No Contributors</p>}
+      {!collaborators && <p className="description">No Contributors</p>}
+      <div className="d-flex gap-4">
+        {collaborators.map((teammate) => (
+          <User accountId={teammate} variant={"mobile"} />
+        ))}
+      </div>
     </div>
     <div className="section">
       <p className="heading">Project Tags</p>

apps/builddao/widget/lib/extract-near-addresses.jsx

@@ -0,0 +1,46 @@
+/* HELPER FUNCTION */
+function isNearAddress(address) {
+  if (typeof address !== "string") {
+    return false;
+  }
+
+  // Allow both ".near" and ".testnet" endings
+  if (!address.endsWith(".near") && !address.endsWith(".testnet")) {
+    return false;
+  }
+
+  const parts = address.split(".");
+  if (parts.length !== 2) {
+    return false;
+  }
+
+  if (parts[0].length < 2 || parts[0].length > 32) {
+    return false;
+  }
+
+  if (!/^[a-z0-9_-]+$/i.test(parts[0])) {
+    return false;
+  }
+
+  return true;
+}
+
+const validNearAddresses = (string) => {
+  // removing extra characters and splitting the string into an array
+  const arr = string.replace(/[\[\]\(\)@]/g, "").split(/[\s,]+/);
+
+  // filtering out teammates that are not near addresses
+  const hexRegex = /^[0-9A-F\-_]+$/i;
+  const valid = arr.filter((teammate) => {
+    if (hexRegex.test(teammate)) {
+      return teammate;
+    }
+    return isNearAddress(teammate);
+  });
+
+  console.log("valid from validNearAddresses", valid);
+
+  return valid;
+};
+
+return { validNearAddresses };

apps/builddao/widget/page/project-feed.jsx

@@ -4,6 +4,12 @@ const { fetchProjects } = VM.require(
   fetchProjects: () => {},
 };
 
+const { validNearAddresses } = VM.require(
+  "buildhub.near/widget/lib.extract-near-addresses"
+) || {
+  validNearAddresses: () => {},
+};
+
 const { Button } = VM.require("buildhub.near/widget/components") || {
   Button: () => <></>,
 };
@@ -23,33 +29,6 @@ if (!data) {
   return "Loading...";
 }
 
-/* HELPER FUNCTION */
-function isNearAddress(address) {
-  if (typeof address !== "string") {
-    return false;
-  }
-
-  // Allow both ".near" and ".testnet" endings
-  if (!address.endsWith(".near") && !address.endsWith(".testnet")) {
-    return false;
-  }
-
-  const parts = address.split(".");
-  if (parts.length !== 2) {
-    return false;
-  }
-
-  if (parts[0].length < 2 || parts[0].length > 32) {
-    return false;
-  }
-
-  if (!/^[a-z0-9_-]+$/i.test(parts[0])) {
-    return false;
-  }
-
-  return true;
-}
-
 const processData = useCallback(
   (data) => {
     const accounts = Object.entries(data);
@@ -62,18 +41,7 @@ const processData = useCallback(
           const metadata = JSON.parse(kv[1]);
           const members = metadata.teammates;
 
-          // if (members) {
-          // removing extra characters and splitting the string into an array
-          const arr = members.replace(/[\[\]\(\)@]/g, "").split(/[\s,]+/);
-
-          // filtering out teammates that are not near addresses
-          const hexRegex = /^[0-9A-F\-_]+$/i;
-          const valid = arr.filter((teammate) => {
-            if (hexRegex.test(teammate)) {
-              return teammate;
-            }
-            return isNearAddress(teammate);
-          });
+          const valid = validNearAddresses(members);
 
           valid.unshift(accountId);
 
@@ -82,7 +50,6 @@ const processData = useCallback(
           // }
           const collaborators = unique || [];
 
-          // console.log("metadata: ", metadata);
           return {
             accountId,
             type: type,
@@ -251,6 +218,8 @@ return (
           accountId={project.accountId}
           tags={project.tags}
           people={project.collaborators}
+          type={project.type}
+          app={app}
         />
       ))}
     </Container>