+
;
+}
+
+const initialData = profile.description;
+const [content, setContent] = useState(null);
+const [showCommentToast, setCommentToast] = useState(false);
+const [handler, setHandler] = useState(null);
+const [isTxnCreated, setTxnCreated] = useState(false);
+
+const Container = styled.div`
+ width: 100%;
+ margin: 0 auto;
+ padding: 20px;
+ text-align: left;
+`;
+
+const hasDataChanged = () => {
+ return content !== initialData;
+};
+
+const handlePublish = () => {
+ setTxnCreated(true);
+ Near.call([
+ {
+ contractName: "${REPL_TREASURY_TEMPLAR_CONTRACT}",
+ methodName: "set_social_db_profile_description",
+ args: { description: content },
+ gas: 270000000000000,
+ },
+ ]);
+};
+
+useEffect(() => {
+ if (isTxnCreated) {
+ const checkForAboutInSocialDB = () => {
+ Near.asyncView(REPL_SOCIAL_CONTRACT, "get", {
+ keys: [item.path],
+ }).then((result) => {
+ try {
+ const submittedAboutText = content;
+ const lastAboutTextFromSocialDB =
+ result["${REPL_TREASURY_TEMPLAR_CONTRACT}"].profile.description;
+ if (submittedAboutText === lastAboutTextFromSocialDB) {
+ setTxnCreated(false);
+ setCommentToast(true);
+ return;
+ }
+ } catch (e) {}
+ setTimeout(() => checkForAboutInSocialDB(), 2000);
+ });
+ };
+ checkForAboutInSocialDB();
+ }
+}, [isTxnCreated]);
+
+useEffect(() => {
+ if (!content && initialData) {
+ setContent(initialData);
+ setHandler("update");
+ }
+}, [initialData]);
+
+function Preview() {
+ return (
+ -
+
- + + +
- + + +
+
+
+ {
+ setContent(v);
+ },
+ showAutoComplete: true,
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ setNewItem(value),
+ value: newItem,
+ placeholder: data.placeholder,
+ }}
+ />
+
+
+ Moderators
+
+ setEditModerators(!editModerators),
+ testId: "edit-members",
+ }}
+ />
+
+ + The moderator group has permissions to create and edit RFPs, edit and + manage proposals, and manage admins. +
+
+
+
+ ) : (
+ <>
+ Members
+ {moderators && (
+
+ {moderators.length ? (
+ moderators.map((child) => (
+
+
+ ))
+ ) : (
+
+ )}
+
+ )}
+ No moderators
+ )}
+
+ {
+ setAccount(e.target.value);
+ },
+ skipPaddingGap: true,
+ placeholder: placeholder,
+ inputProps: {
+ max: 64,
+ prefix: "@",
+ },
+ }}
+ />
+ {account && !isValidAccount && (
+
+ {
+ setAccount(id);
+ setAutoComplete(false);
+ },
+ onClose: () => setAutoComplete(false),
+ }}
+ />
+
+ )}
+
+);
diff --git a/instances/treasury-templar.near/widget/components/molecule/Compose.jsx b/instances/treasury-templar.near/widget/components/molecule/Compose.jsx
new file mode 100644
index 000000000..048858a92
--- /dev/null
+++ b/instances/treasury-templar.near/widget/components/molecule/Compose.jsx
@@ -0,0 +1,120 @@
+const EmbeddCSS = `
+ .CodeMirror {
+ margin-inline:10px;
+ border-radius:5px;
+ }
+
+ .editor-toolbar {
+ border: none !important;
+ }
+`;
+
+const Wrapper = styled.div`
+ .nav-link {
+ color: inherit !important;
+ }
+
+ .card-header {
+ padding-bottom: 0px !important;
+ }
+`;
+
+const Compose = ({
+ data,
+ onChange,
+ autocompleteEnabled,
+ placeholder,
+ height,
+ embeddCSS,
+ showProposalIdAutoComplete,
+ onChangeKeyup,
+ handler,
+ sortedRelevantUsers,
+}) => {
+ State.init({
+ data: data,
+ selectedTab: "editor",
+ autoFocus: false,
+ });
+
+ useEffect(() => {
+ if (typeof onChange === "function") {
+ onChange(state.data);
+ }
+ }, [state.data]);
+
+ useEffect(() => {
+ // for clearing editor after txn approval/ showing draft state
+ if (data !== state.data || handler !== state.handler) {
+ State.update({ data: data, handler: handler });
+ }
+ }, [data, handler]);
+
+ return (
+
+ Please enter valid account ID
+
+ )}
+ {showAccountAutocomplete && (
+
+ {
+ State.update({ data: content, handler: "update" });
+ },
+ placeholder: placeholder,
+ height,
+ embeddCSS: embeddCSS || EmbeddCSS,
+ showAutoComplete: autocompleteEnabled,
+ showProposalIdAutoComplete: showProposalIdAutoComplete,
+ autoFocus: state.autoFocus,
+ onChangeKeyup: onChangeKeyup,
+ sortedRelevantUsers,
+ }}
+ />
+
+ ) : (
+
+
+
+
+ {state.selectedTab === "editor" ? (
+ <>
+
+
+
+
+
+ )}
+
+ setCommentToast(v),
+ trigger: <>,
+ providerProps: { duration: 3000 },
+ }}
+ />
+
+);
diff --git a/instances/treasury-templar.near/widget/components/molecule/DropDown.jsx b/instances/treasury-templar.near/widget/components/molecule/DropDown.jsx
new file mode 100644
index 000000000..23a1bb819
--- /dev/null
+++ b/instances/treasury-templar.near/widget/components/molecule/DropDown.jsx
@@ -0,0 +1,66 @@
+const options = props.options; // [{label:"",value:""}]
+const label = props.label;
+const onUpdate = props.onUpdate ?? (() => {});
+const selectedValue = props.selectedValue;
+const [selected, setSelected] = useState(selectedValue);
+
+useEffect(() => {
+ if (JSON.stringify(selectedValue) !== JSON.stringify(selected)) {
+ setSelected(selectedValue);
+ }
+}, [selectedValue]);
+
+const StyledDropdown = styled.div`
+ .drop-btn {
+ width: 100%;
+ max-width: 200px;
+ text-align: left;
+ padding-inline: 10px;
+ }
+
+ .dropdown-item.active,
+ .dropdown-item:active {
+ background-color: #f0f0f0 !important;
+ color: black;
+ }
+
+ .cursor-pointer {
+ cursor: pointer;
+ }
+`;
+
+useEffect(() => {
+ onUpdate(selected);
+}, [selected]);
+
+return (
+
+ Add a comment
+ {Compose}
+
+
+ {
+ composeData();
+ },
+ }}
+ />
+
+
+
+);
diff --git a/instances/treasury-templar.near/widget/components/molecule/FilterByLabel.jsx b/instances/treasury-templar.near/widget/components/molecule/FilterByLabel.jsx
new file mode 100644
index 000000000..35eb464b6
--- /dev/null
+++ b/instances/treasury-templar.near/widget/components/molecule/FilterByLabel.jsx
@@ -0,0 +1,22 @@
+const availableOptions = props.availableOptions;
+const options =
+ (availableOptions ?? []).map((i) => {
+ return { label: i.title, value: i.value };
+ }) ?? [];
+options.unshift({ label: "All", value: null });
+const setSelected = props.onStateChange ?? (() => {});
+
+return (
+
+
+
+
+
+ -
+ {options.map((item) => (
+
- { + if (selected.label !== item.label) { + setSelected(item); + } + }} + > + {item.label} + + ))} +
+ {
+ setSelected(v);
+ },
+ }}
+ />
+
+);
diff --git a/instances/treasury-templar.near/widget/components/molecule/LikeButton.jsx b/instances/treasury-templar.near/widget/components/molecule/LikeButton.jsx
new file mode 100644
index 000000000..d23b9009b
--- /dev/null
+++ b/instances/treasury-templar.near/widget/components/molecule/LikeButton.jsx
@@ -0,0 +1,148 @@
+const item = props.item;
+const proposalId = props.proposalId;
+const rfpId = props.rfpId;
+const notifyAccountIds = props.notifyAccountIds ?? [];
+if (!item) {
+ return "";
+}
+
+const likes = Social.index("like", item);
+
+const dataLoading = likes === null;
+
+const likesByUsers = {};
+
+(likes || []).forEach((like) => {
+ if (like.value.type === "like") {
+ likesByUsers[like.accountId] = like;
+ } else if (like.value.type === "unlike") {
+ delete likesByUsers[like.accountId];
+ }
+});
+if (state.hasLike === true) {
+ likesByUsers[context.accountId] = {
+ accountId: context.accountId,
+ };
+} else if (state.hasLike === false) {
+ delete likesByUsers[context.accountId];
+}
+
+const accountsWithLikes = Object.keys(likesByUsers);
+const hasLike = context.accountId && !!likesByUsers[context.accountId];
+const hasLikeOptimistic =
+ state.hasLikeOptimistic === undefined ? hasLike : state.hasLikeOptimistic;
+const totalLikes =
+ accountsWithLikes.length +
+ (hasLike === false && state.hasLikeOptimistic === true ? 1 : 0) -
+ (hasLike === true && state.hasLikeOptimistic === false ? 1 : 0);
+
+const LikeButton = styled.button`
+ border: 0;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ color: #687076;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 17px;
+ cursor: pointer;
+ background: none;
+ padding: 6px;
+ transition: color 200ms;
+
+ i {
+ font-size: 16px;
+ transition: color 200ms;
+
+ &.bi-heart-fill {
+ color: #e5484d !important;
+ }
+ }
+
+ &:hover,
+ &:focus {
+ outline: none;
+ color: #11181c;
+ }
+`;
+
+const likeClick = (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ if (state.loading) {
+ return;
+ }
+
+ State.update({
+ loading: true,
+ hasLikeOptimistic: !hasLike,
+ });
+
+ const data = {
+ index: {
+ like: JSON.stringify({
+ key: item,
+ value: {
+ type: hasLike ? "unlike" : "like",
+ },
+ }),
+ },
+ };
+
+ if (!hasLike && notifyAccountIds.length > 0) {
+ const notifyData = notifyAccountIds.map((account) => {
+ if (account !== context.accountId) {
+ return {
+ key: account,
+ value: proposalId
+ ? {
+ type: "proposal/like",
+ item,
+ proposal: proposalId,
+ widgetAccountId: "${REPL_TREASURY_TEMPLAR}",
+ }
+ : {
+ type: "rfp/like",
+ item,
+ rfp: rfpId,
+ widgetAccountId: "${REPL_TREASURY_TEMPLAR}",
+ },
+ };
+ }
+ });
+ if (notifyData.length > 0) {
+ data.index.notify = notifyData;
+ }
+ }
+ Social.set(data, {
+ onCommit: () => State.update({ loading: false, hasLike: !hasLike }),
+ onCancel: () =>
+ State.update({
+ loading: false,
+ hasLikeOptimistic: !state.hasLikeOptimistic,
+ }),
+ });
+};
+
+const title = hasLike ? "Unlike" : "Like";
+
+return (
+
+
+
+ );
+ })}
+
+ {item.snapshot.name}
+
+
+ created on {readableDate(item.snapshot.timestamp / 1000000)}
+
+ {showStatus && (
+
+
+ )}
+
+
+ {proposal.label}
+
+
+ );
+ })}
+
+ {
+ const updatedLinkedProposals = selectedProposals.filter(
+ (item) => item.value !== proposal.value
+ );
+ setSelectedProposals(updatedLinkedProposals);
+ }}
+ >
+
+
+
+
+ {selectedRFP.label}
+
+ {!disabled && (
+
+ )}
+ {
+ onDeleteRfp();
+ setSelectedRFP(null);
+ }}
+ >
+
+
+ )}
+
+ ![]({"${REPL_RFP_IMAGE}"})
+
+
+ );
+ })}
+
+ {item.snapshot.name}
+
+
+ created on {readableDate(item.snapshot.timestamp / 1000000)}
+
+ {option.title}
;
+};
+
+return (
+ <>
+
+ {(selectedOptions ?? []).map((option) => {
+ return (
+
+ {!hideDropdown && (
+
+ {option.title}
+ {!disabled && (
+
+ );
+ })}
+ {
+ const updatedOptions = selectedOptions.filter(
+ (item) => item.value !== option.value
+ );
+ setSelectedOptions(updatedOptions);
+ }}
+ >
+
+
+ )}
+ setIsOpen(false)}
+ >
+
+
+
+
+ {isOpen && (
+
+ {linkedRfp ? (
+
+
+ These categories match the chosen RFP and cannot be changed.
+ To use different categories, unlink the RFP.
+
+ ) : (
+ Select Category
+ )}
+
+
+
+ )}
+
+ {(availableOptions ?? []).map((option) => (
+
+ item.value === option.value
+ )
+ ? "selected"
+ : ""
+ }`}
+ onClick={() => handleOptionClick(option)}
+ >
+
+ ))}
+ + {title} ↓ +
+ )} + {showMenu && links.length !== 0 && ( +
+ {links.map((link) => (
+ // Check if the link is external
+
+ {link.href.startsWith("http://") ||
+ link.href.startsWith("https://") ? (
+ // External link: Render an tag
+
+ {link.title}
+
+ ) : (
+ // Internal link: Render the component
+
+ {link.title}
+
+ )}
+
+ ))}
+
+
+ setChecked(e.target.checked)}
+ />
+
+
+ );
+};
+
+return RadioButton(props);
diff --git a/instances/treasury-templar.near/widget/components/molecule/SimpleMDE.jsx b/instances/treasury-templar.near/widget/components/molecule/SimpleMDE.jsx
new file mode 100644
index 000000000..ee922e873
--- /dev/null
+++ b/instances/treasury-templar.near/widget/components/molecule/SimpleMDE.jsx
@@ -0,0 +1,589 @@
+/**
+ * iframe embedding a SimpleMDE component
+ * https://github.com/sparksuite/simplemde-markdown-editor
+ */
+const { getLinkUsingCurrentGateway } = VM.require(
+ `${REPL_TREASURY_TEMPLAR}/widget/core.common`
+) || { getLinkUsingCurrentGateway: () => {} };
+
+const data = props.data;
+const onChange = props.onChange ?? (() => {});
+const onChangeKeyup = props.onChangeKeyup ?? (() => {}); // in case where we want immediate action
+const height = props.height ?? "390";
+const className = props.className ?? "w-100";
+const embeddCSS = props.embeddCSS;
+const sortedRelevantUsers = props.sortedRelevantUsers || [];
+const cacheUrl = "${REPL_CACHE_URL}";
+State.init({
+ iframeHeight: height,
+ message: props.data,
+});
+
+const profilesData = Social.get("*/profile/name", "final") ?? {};
+const followingData =
+ Social.get(`${context.accountId}/graph/follow/**`, "final") ?? {};
+
+// SIMPLEMDE CONFIG //
+const fontFamily = props.fontFamily ?? "sans-serif";
+const alignToolItems = props.alignToolItems ?? "right";
+const placeholder = props.placeholder ?? "";
+const showAccountAutoComplete = props.showAutoComplete ?? false;
+const showProposalIdAutoComplete = props.showProposalIdAutoComplete ?? false;
+const showRfpIdAutoComplete = false;
+const autoFocus = props.autoFocus ?? false;
+
+const proposalLink = getLinkUsingCurrentGateway(
+ `${REPL_TREASURY_TEMPLAR}/widget/app?page=proposal&id=`
+);
+
+const code = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+return (
+