:wq

:wq
Merge branch 'main' of https://github.com/NEARBuilders/gateway into develop

apps/builddao/widget/Notification/Item/Left.jsx

@@ -0,0 +1,9 @@
+const { href } = VM.require("buildhub.near/widget/lib.url") || {
+  href: () => {}
+};
+
+if (!props.type) {
+  return "Loading ...";
+}
+
+return <>{props.message}</>;

apps/builddao/widget/Notification/Item/Right.jsx

@@ -0,0 +1,24 @@
+const { href } = VM.require("buildhub.near/widget/lib.url") || {
+  href: () => {}
+};
+
+if (!props.type) {
+  return "Loading ...";
+}
+
+return (
+  <a
+    className="fw-bold text-muted"
+    href={href({
+      widgetSrc: props.widget,
+      params: {
+        page: props.page,
+        proposalId: props.params.proposalId,
+        tab: props.params.tab,
+        daoId: props.params.daoId
+      }
+    })}
+  >
+    View
+  </a>
+);

apps/builddao/widget/Notification/Item/buildhub.jsx

@@ -0,0 +1,22 @@
+const { value } = props;
+
+return (
+  <Widget
+    src="mob.near/widget/Notification.Item.LR"
+    props={{
+      L: (
+        <Widget
+          src="buildhub.near/widget/notification.Item.Left"
+          props={{ ...value }}
+        />
+      ),
+      R: (
+        <Widget
+          src="buildhub.near/widget/notification.Item.Right"
+          props={{ ...value }}
+        />
+      ),
+      ...props
+    }}
+  />
+);

apps/builddao/widget/Notification/NotificationRolesSelector.jsx

@@ -0,0 +1,173 @@
+const DaoSDK = VM.require("sdks.near/widget/SDKs.Sputnik.DaoSDK");
+const { InputField } = VM.require("buildhub.near/widget/components") || {
+  InputField: <></>
+};
+
+if (!DaoSDK) {
+  return <></>;
+}
+const [groupsAndMembers, setGroupsAndMembers] = useState([]);
+const [selectedRoles, setSelectedRoles] = useState({}); // { role:boolean }
+const daoId = props.daoId || "build.sputnik-dao.near";
+const accountId = props.accountId ?? context.accountId;
+const onUpdate = props.onUpdate ?? (() => {});
+const proposalType = props.proposalType;
+const [message, setMessage] = useState(
+  `${accountId} created ${proposalType} proposal for ${daoId}`
+);
+const bootstrapTheme = props.bootstrapTheme || "dark";
+
+const sdk = DaoSDK(daoId);
+
+const group = sdk.getGroupsAndMembers();
+if (group === null || !group.length) {
+  return;
+}
+setGroupsAndMembers(group);
+
+const handleCheckboxChange = (role) => {
+  setSelectedRoles((prevRoles) => {
+    if (prevRoles.hasOwnProperty(role)) {
+      return {
+        ...prevRoles,
+        [role]: !prevRoles[role]
+      };
+    } else {
+      return {
+        ...prevRoles,
+        [role]: true
+      };
+    }
+  });
+};
+
+const ThemeContainer =
+  props.ThemeContainer ||
+  styled.div`
+    --primary-color: rgb(255, 175, 81);
+  `;
+
+const Wrapper = styled.div`
+  .checked > span:first-child {
+    background: var(--primary-color) !important;
+    border-color: var(--primary-color) !important;
+  }
+
+  .cbx:hover span:first-child {
+    border-color: var(--primary-color) !important;
+  }
+
+  button[type="checkbox"]:hover {
+    background: none !important;
+  }
+
+  label {
+    font-size: 13px;
+  }
+`;
+
+const createNotificationsData = () => {
+  const someRoleSelected = Object.values(selectedRoles).some(
+    (value) => value === true
+  );
+  if (!someRoleSelected) {
+    return null;
+  }
+  const membersToNotify = [];
+  Object.keys(selectedRoles).map((item) => {
+    if (selectedRoles[item] === true) {
+      membersToNotify = membersToNotify.concat(
+        groupsAndMembers.find((group) => group.name === item).members
+      );
+    }
+  });
+  const uniqueMembersArray = [...new Set(membersToNotify)];
+  const notification = {
+    [accountId]: {
+      index: {
+        notify: JSON.stringify(
+          uniqueMembersArray.map((account) => {
+            return {
+              key: account,
+              value: {
+                message: message,
+                params: {
+                  daoId: daoId,
+                  tab: "proposals",
+                  page: "proposal"
+                },
+                type: "buildhub/custom",
+                widget: "buildhub.near/widget/home"
+              }
+            };
+          })
+        )
+      }
+    }
+  };
+  const call = [
+    {
+      contractName: "social.near",
+      methodName: "set",
+      args: { data: notification, options: { refund_unused_deposit: true } },
+      deposit: 200000000000000000000000
+    }
+  ];
+  return call;
+};
+
+useEffect(() => {
+  onUpdate(createNotificationsData());
+}, [selectedRoles]);
+
+const capitalizeFirstLetter = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
+
+const groupList = useMemo(() => {
+  return (
+    Array.isArray(groupsAndMembers) &&
+    groupsAndMembers.map((group) => {
+      const membersLength = group?.members.length;
+      if (!membersLength) {
+        return null;
+      }
+      return (
+        <div key={group}>
+          <Widget
+            src="nearui.near/widget/Input.Checkbox"
+            props={{
+              label: (
+                <div>
+                  {capitalizeFirstLetter(group.name)} ({membersLength} members)
+                </div>
+              ),
+              onChange: (checked) => handleCheckboxChange(group.name),
+              checked: selectedRoles[group.name] ?? false
+            }}
+          />
+        </div>
+      );
+    })
+  );
+}, [groupsAndMembers, selectedRoles]);
+
+return (
+  <ThemeContainer>
+    <Wrapper className="d-flex flex-column gap-2">
+      <div>Send notification to following roles: (Optional)</div>
+      <div>
+        <label htmlFor={"notifications-label" + daoId}>Custom Message</label>
+        <input
+          name={"notifications-label" + daoId}
+          id={"notifications-label" + daoId}
+          className="form-control"
+          data-bs-theme={bootstrapTheme}
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+        />
+      </div>
+      <div>{groupList}</div>
+    </Wrapper>
+  </ThemeContainer>
+);

apps/builddao/widget/Proposals.jsx

@@ -178,7 +178,9 @@ const handleVote = ({ action, proposalId, proposer, showNotification }) => {
               data: notification,
               options: { refund_unused_deposit: true },
             },
-            deposit: 100000000000000000000000,
+            deposit: Big(JSON.stringify(notification).length * 16)
+              .mul(Big(10).pow(20))
+              .toString(),
           },
         ]
       : null,
@@ -339,9 +341,9 @@ return (
         }}
       />
       <Header asChild>
-        <div className="d-flex align-items-center w-100 justify-content-between">
-          <h3 className="text-white m-0">Proposals</h3>
-          <div className="d-flex align-items-center gap-3">
+        <div className="d-flex justify-content-between">
+          <h3 className="text-white">Proposals</h3>
+          <div className="d-flex gap-3">
             <Button variant="outline" onClick={() => setFiltersModal(true)}>
               Filters
             </Button>

apps/builddao/widget/components/modals/propose/AddMember.jsx

@@ -29,6 +29,7 @@ useEffect(() => {
 }, [props.item]);
 const memoizedKey = useMemo((editorKey) => editorKey, [editorKey]);
 const [validatedAddresss, setValidatedAddresss] = useState(true);
+const [notificationsData, setNotificationData] = useState(null);
 
 const regex = /.{1}\.near$/;
 useEffect(() => {
@@ -221,12 +222,21 @@ return (
             embedCss: props.customCSS || MarkdownEditor,
             onChange: (v) => {
               setText(v);
-            },
+            }
           }}
         />
       </TextareaWrapper>
     </div>
-
+    <Widget
+      src="buildhub.near/widget/notification.NotificationRolesSelector"
+      props={{
+        daoId: selectedDAO,
+        onUpdate: (v) => {
+          setNotificationData(v);
+        },
+        proposalType: "Add Member"
+      }}
+    />
     <div className="w-100 d-flex">
       <Button
         className="ms-auto"
@@ -239,10 +249,11 @@ return (
             roleId: role,
             gas: 180000000000000,
             deposit: 200000000000000,
+            additionalCalls: notificationsData
           });
         }}
       >
-        Next
+        Create
       </Button>
     </div>
   </div>

apps/builddao/widget/components/modals/propose/FunctionCall.jsx

@@ -14,6 +14,7 @@ const [deposit, setDeposit] = useState(0);
 const [validatedAddresss, setValidatedAddress] = useState(true);
 const [text, setText] = useState("");
 const [editorKey, setEditorKey] = useState(0);
+const [notificationsData, setNotificationData] = useState(null);
 
 const bootstrapTheme = props.bootstrapTheme;
 
@@ -249,11 +250,21 @@ return (
             embedCss: props.customCSS || MarkdownEditor,
             onChange: (v) => {
               setText(v);
-            },
+            }
           }}
         />
       </TextareaWrapper>
     </div>
+    <Widget
+      src="buildhub.near/widget/notification.NotificationRolesSelector"
+      props={{
+        daoId: selectedDAO,
+        onUpdate: (v) => {
+          setNotificationData(v);
+        },
+        proposalType: "Function Call"
+      }}
+    />
     <div className="w-100 d-flex">
       <Button
         disabled={!contract || !method || !validatedAddresss}
@@ -269,10 +280,11 @@ return (
             proposalGas: gas,
             gas: 180000000000000,
             deposit: 200000000000000,
+            additionalCalls: notificationsData
           });
         }}
       >
-        Next
+        Create
       </Button>
     </div>
   </div>

apps/builddao/widget/components/modals/propose/RemoveMember.jsx

@@ -15,6 +15,7 @@ const sdk = DaoSDK(selectedDAO);
 
 const [text, setText] = useState("");
 const [editorKey, setEditorKey] = useState(0);
+const [notificationsData, setNotificationData] = useState(null);
 
 const bootstrapTheme = props.bootstrapTheme;
 useEffect(() => {
@@ -223,12 +224,21 @@ return (
             embedCss: props.customCSS || MarkdownEditor,
             onChange: (v) => {
               setText(v);
-            },
+            }
           }}
         />
       </TextareaWrapper>
     </div>
-
+    <Widget
+      src="buildhub.near/widget/notification.NotificationRolesSelector"
+      props={{
+        daoId: selectedDAO,
+        onUpdate: (v) => {
+          setNotificationData(v);
+        },
+        proposalType: "Remove Member"
+      }}
+    />
     <div className="d-flex w-100">
       <Button
         className="ms-auto"
@@ -241,10 +251,11 @@ return (
             roleId: role,
             gas: 180000000000000,
             deposit: 200000000000000,
+            additionalCalls: notificationsData
           });
         }}
       >
-        Next
+        Create
       </Button>
     </div>
   </div>