Import project from potlock

apps/builddao/widget/components/Modal.jsx

@@ -16,7 +16,7 @@ const Overlay = styled.div`
   z-index: 1000;
   width: 100vw;
   height: 100vh;
-  background: var(--modal-overlay-color, rgba(11, 12, 20, 0.5));
+  background: var(--modal-overlay-color, rgba(35, 36, 43, 0.7));
 `;
 
 const Content = styled.div`

apps/builddao/widget/components/modals/CreateProject.jsx → apps/builddao/widget/components/modals/projects/Create.jsx

@@ -41,6 +41,7 @@ const isNearAddress = (address) => {
 
 const showModal = props.showModal;
 const toggleModal = props.toggleModal;
+const togglePotlockImportModal = props.togglePotlockImportModal ?? (() => {});
 const toggle = props.toggle;
 
 const tabs = [
@@ -55,6 +56,14 @@ const tabs = [
 
 const app = props.app ?? "${config_account}";
 
+const poltlockProjectId = props.poltlockProjectId;
+const potlockProjectProfile = null;
+const potlockProjectTags = null;
+
+if (poltlockProjectId) {
+  potlockProjectProfile = Social.getr(`${poltlockProjectId}/profile`);
+}
+
 const [tags, setTags] = useState(props.filters.tags ?? []);
 const [projectAccount, setProjectAccount] = useState(accountId);
 const [title, setTitle] = useState("");
@@ -74,6 +83,48 @@ const [teamSize, setTeamSize] = useState(teamSize ?? "");
 const [invalidContributorFound, setInvalidContributorFound] = useState(false);
 const [invalidProjectAccount, setInvalidProjectAccount] = useState(false);
 
+function removeWhiteSpace(str) {
+  return str.replace(/\s/g, "");
+}
+
+useEffect(() => {
+  if (potlockProjectProfile && !title) {
+    const {
+      name,
+      description,
+      image,
+      backgroundImage,
+      linktree,
+      plTeam,
+      plCategories,
+      tags,
+    } = potlockProjectProfile;
+    const { twitter, github, telegram, website } = linktree;
+    setTitle(name);
+    setDescription(description);
+    setContributors(JSON.parse(plTeam ?? "[]"));
+    setTwitter(linktree.twitter ? `https://twitter.com/${twitter}` : null);
+    setGitHub(linktree.github ? `https://github.com/${github}` : null);
+    setTelegram(linktree.telegram ? `https://t.me/${telegram}` : null);
+    setWebsite(
+      website
+        ? website.includes("https://")
+          ? website
+          : `https://${website}`
+        : null,
+    );
+    setAvatar(image);
+    setCoverImage(backgroundImage);
+    setProjectAccount(poltlockProjectId);
+    setTags(
+      (plCategories
+        ? JSON.parse(plCategories ?? "[]")
+        : Object.keys(tags ?? {})
+      ).map((i) => removeWhiteSpace(i)),
+    );
+  }
+}, [potlockProjectProfile]);
+
 const handleCheckboxChange = (event) => {
   const { id } = event.target;
   const newSelectedTabs = new Set(selectedTabs); // Create a copy to avoid mutation
@@ -89,7 +140,9 @@ const following = Social.get(`${context.accountId}/graph/follow/*`);
 const followingAccountSuggestion = following && Object.keys(following);
 
 const handleTags = (tags) => {
-  let filtered = tags.map((tag) => (tag.customOption ? tag.label : tag));
+  let filtered = tags.map((tag) =>
+    removeWhiteSpace(tag.customOption ? tag.label : tag),
+  );
   setTags(filtered);
 };
 
@@ -306,7 +359,10 @@ function onCreateProject() {
     });
   } else {
     Social.set(data, {
-      onCommit: () => toggleModal(),
+      onCommit: () => {
+        toggleModal();
+        togglePotlockImportModal();
+      },
     });
   }
 }
@@ -458,7 +514,16 @@ return (
           <Typeahead
             multiple
             options={
-              props.tagFilters ?? ["Community", "Open Source", "Weekly", "DAO"]
+              props.tagFilters ?? [
+                "Community",
+                "Open Source",
+                "Social Impact",
+                "DAO",
+                "Climate",
+                "Public Good",
+                "Education",
+                "Community",
+              ]
             }
             allowNew
             placeholder="Start Typing"

apps/builddao/widget/components/modals/projects/Filters.jsx

@@ -1,7 +1,16 @@
-const { Button } = VM.require("${config_account}/widget/components") || {
+const { Modal, Button } = VM.require("${config_account}/widget/components") || {
+  Modal: () => <></>,
   Button: () => <></>,
 };
 
+const showModal = props.showModal;
+const toggleModal = props.toggleModal;
+const toggle = props.toggle;
+const bootstrapTheme = props.bootstrapTheme || "dark";
+const filters = props.filters;
+const setFilters = props.setFilters;
+const tagFilters = props.tagFilters;
+
 const [teamSize, setTeamSize] = useState(props.filters.teamSize ?? "");
 const [tags, setTags] = useState(props.filters.tags ?? []);
 
@@ -11,61 +20,68 @@ const handleTags = (tags) => {
 };
 
 return (
-  <div className="d-flex flex-column gap-3">
-    <div className="d-flex flex-column gap-3" key={"team-sizes"}>
-      <label>Team Size</label>
-      <div className="d-flex align-items-center gap-2 flex-wrap">
-        <select
-          value={teamSize}
-          onChange={(e) => setTeamSize(e.target.value)}
-          className="form-select"
+  <Modal
+    open={showModal}
+    title={"Project Filters"}
+    onOpenChange={toggleModal}
+    toggle={toggle}
+  >
+    <div className="d-flex flex-column gap-3">
+      <div className="d-flex flex-column gap-3" key={"team-sizes"}>
+        <label>Team Size</label>
+        <div className="d-flex align-items-center gap-2 flex-wrap">
+          <select
+            value={teamSize}
+            onChange={(e) => setTeamSize(e.target.value)}
+            className="form-select"
+          >
+            <option selected disabled value="">
+              Select Team Size
+            </option>
+            <option value="1-10">1-10</option>
+            <option value="10-50">10-50</option>
+            <option value="50-100">50-100</option>
+            <option value="100+">100+</option>
+          </select>
+        </div>
+      </div>
+      <div className="form-group">
+        <label className="mb-3">Tags</label>
+        <Typeahead
+          multiple
+          options={
+            props.tagFilters ?? ["Community", "Open Source", "Weekly", "DAO"]
+          }
+          allowNew
+          placeholder="Start Typing"
+          selected={tags}
+          onChange={(e) => handleTags(e)}
+        />
+      </div>
+      <div className="d-flex align-items-center justify-content-end gap-2">
+        <Button
+          variant="outline"
+          onClick={() => {
+            setTeamSize("");
+            setTags([]);
+          }}
         >
-          <option selected disabled value="">
-            Select Team Size
-          </option>
-          <option value="1-10">1-10</option>
-          <option value="10-50">10-50</option>
-          <option value="50-100">50-100</option>
-          <option value="100+">100+</option>
-        </select>
+          Clear Filters
+        </Button>
+        <Button
+          variant="primary"
+          onClick={() => {
+            props.setFilters({
+              ...filters,
+              tags: tags,
+              teamSize: teamSize,
+            });
+            props.toggleModal();
+          }}
+        >
+          Filter
+        </Button>
       </div>
     </div>
-    <div className="form-group">
-      <label className="mb-3">Tags</label>
-      <Typeahead
-        multiple
-        options={
-          props.tagFilters ?? ["Community", "Open Source", "Weekly", "DAO"]
-        }
-        allowNew
-        placeholder="Start Typing"
-        selected={tags}
-        onChange={(e) => handleTags(e)}
-      />
-    </div>
-    <div className="d-flex align-items-center justify-content-end gap-2">
-      <Button
-        variant="outline"
-        onClick={() => {
-          setTeamSize("");
-          setTags([]);
-        }}
-      >
-        Clear Filters
-      </Button>
-      <Button
-        variant="primary"
-        onClick={() => {
-          props.setFilters({
-            ...filters,
-            tags: tags,
-            teamSize: teamSize,
-          });
-          props.toggleModal();
-        }}
-      >
-        Filter
-      </Button>
-    </div>
-  </div>
+  </Modal>
 );

apps/builddao/widget/components/modals/projects/ImportAndCreate.jsx

@@ -0,0 +1,60 @@
+const { Modal, Button } = VM.require("${config_account}/widget/components") || {
+  Modal: () => <></>,
+  Button: () => <></>,
+};
+
+const showModal = props.showModal;
+const toggleModal = props.toggleModal;
+const toggle = props.toggle;
+const bootstrapTheme = props.bootstrapTheme || "dark";
+const onClickCreate = props.onClickCreate || (() => {});
+const onClickImport = props.onClickImport || (() => {});
+
+const Item = ({ title, description, src, onClick }) => {
+  return (
+    <div className="d-flex gap-2 pointer-cursor" onClick={onClick}>
+      <img src={src} height={40} width={40} />
+      <div className="d-flex flex-column">
+        <h6>{title}</h6>
+        <div className="text-sm">{description}</div>
+      </div>
+    </div>
+  );
+};
+
+const Container = styled.div`
+  .pointer-cursor {
+    cursor: pointer;
+  }
+  .text-sm {
+    font-size: 13px;
+  }
+`;
+return (
+  <Modal
+    open={showModal}
+    title={"Create Project"}
+    onOpenChange={toggleModal}
+    toggle={toggle}
+  >
+    <Container className="d-flex flex-column gap-4 my-2">
+      <Item
+        title="Create my own project"
+        description="Create your own completely new project, customize it your way!"
+        src="https://ipfs.near.social/ipfs/bafkreidbfu7uxtr4is7wxileg3mrbajve6cgkfmrqemc6pxsr6nnczz7ly"
+        onClick={onClickCreate}
+      />
+      <Item
+        title="Import from Potlock"
+        description="Import your projects from the Potlock platform."
+        src="https://ipfs.near.social/ipfs/bafkreifk42ibqsg5sfky5tlhkfty6rkup5leqite5koenhesnuwq55kufi"
+        onClick={onClickImport}
+      />
+      <div className="my-1 d-flex justify-content-center">
+        <Button variant="primary" onClick={toggleModal}>
+          Cancel
+        </Button>
+      </div>
+    </Container>
+  </Modal>
+);