BEPRO 2.29

assets/icons/bell-icon.tsx

@@ -2,18 +2,8 @@ import { SVGProps } from "react";
 
 export default function BellIcon(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M13.8625 10.9963C13.5156 10.3988 13 8.70813 13 6.5C13 5.17392 12.4732 3.90215 11.5355 2.96447C10.5979 2.02678 9.32608 1.5 8 1.5C6.67392 1.5 5.40215 2.02678 4.46447 2.96447C3.52678 3.90215 3 5.17392 3 6.5C3 8.70875 2.48375 10.3988 2.13688 10.9963C2.04829 11.1482 2.00133 11.3207 2.00073 11.4966C2.00013 11.6724 2.0459 11.8453 2.13344 11.9978C2.22097 12.1503 2.34718 12.277 2.49932 12.3652C2.65146 12.4534 2.82416 12.4999 3 12.5H5.55063C5.66598 13.0645 5.97277 13.5718 6.41908 13.9361C6.8654 14.3004 7.42386 14.4994 8 14.4994C8.57614 14.4994 9.1346 14.3004 9.58092 13.9361C10.0272 13.5718 10.334 13.0645 10.4494 12.5H13C13.1758 12.4998 13.3484 12.4532 13.5005 12.365C13.6525 12.2768 13.7786 12.15 13.8661 11.9975C13.9536 11.845 13.9993 11.6722 13.9986 11.4964C13.998 11.3206 13.9511 11.1481 13.8625 10.9963ZM8 13.5C7.68989 13.4999 7.38743 13.4037 7.13425 13.2246C6.88107 13.0455 6.68962 12.7924 6.58625 12.5H9.41375C9.31038 12.7924 9.11893 13.0455 8.86575 13.2246C8.61257 13.4037 8.31011 13.4999 8 13.5ZM3 11.5C3.48125 10.6725 4 8.755 4 6.5C4 5.43913 4.42143 4.42172 5.17157 3.67157C5.92172 2.92143 6.93913 2.5 8 2.5C9.06087 2.5 10.0783 2.92143 10.8284 3.67157C11.5786 4.42172 12 5.43913 12 6.5C12 8.75313 12.5175 10.6706 13 11.5H3Z"
-        fill="#F1F1F4"
-      />
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M21.0002 28C21.0002 28.2652 20.8949 28.5196 20.7073 28.7071C20.5198 28.8946 20.2654 29 20.0002 29H12.0002C11.735 29 11.4807 28.8946 11.2931 28.7071C11.1056 28.5196 11.0002 28.2652 11.0002 28C11.0002 27.7348 11.1056 27.4804 11.2931 27.2929C11.4807 27.1054 11.735 27 12.0002 27H20.0002C20.2654 27 20.5198 27.1054 20.7073 27.2929C20.8949 27.4804 21.0002 27.7348 21.0002 28ZM27.7315 24C27.558 24.3056 27.3061 24.5595 27.0017 24.7353C26.6974 24.911 26.3517 25.0024 26.0002 25H6.00023C5.64865 24.9995 5.30341 24.9064 4.9993 24.73C4.69519 24.5535 4.44297 24.3 4.26804 23.9951C4.09312 23.6901 4.00168 23.3444 4.00294 22.9928C4.0042 22.6412 4.09812 22.2962 4.27523 21.9925C4.96898 20.7975 6.00023 17.4175 6.00023 13C6.00023 10.3478 7.0538 7.8043 8.92916 5.92893C10.8045 4.05357 13.3481 3 16.0002 3C18.6524 3 21.1959 4.05357 23.0713 5.92893C24.9467 7.8043 26.0002 10.3478 26.0002 13C26.0002 17.4163 27.0327 20.7975 27.7265 21.9925C27.9054 22.2966 28 22.6429 28.0006 22.9957C28.0013 23.3486 27.908 23.6952 27.7302 24H27.7315ZM26.0002 23C25.034 21.3412 24.0002 17.5063 24.0002 13C24.0002 10.8783 23.1574 8.84344 21.6571 7.34315C20.1568 5.84285 18.122 5 16.0002 5C13.8785 5 11.8437 5.84285 10.3434 7.34315C8.84309 8.84344 8.00023 10.8783 8.00023 13C8.00023 17.5075 6.96523 21.3425 6.00023 23H26.0002Z" fill="white" />
     </svg>
   );
 }

assets/icons/bell-slash-icon.tsx

@@ -0,0 +1,9 @@
+import { SVGProps } from "react";
+
+export default function BellSlashIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M6.74002 4.32933C6.6522 4.23034 6.54561 4.14976 6.42642 4.09227C6.30723 4.03478 6.17781 4.00151 6.04567 3.9944C5.91353 3.9873 5.7813 4.00648 5.65663 4.05086C5.53196 4.09523 5.41734 4.16391 5.3194 4.25291C5.22147 4.34191 5.14218 4.44946 5.08612 4.56933C5.03006 4.6892 4.99835 4.819 4.99282 4.95122C4.9873 5.08343 5.00807 5.21543 5.05394 5.33956C5.0998 5.46369 5.16985 5.57748 5.26002 5.67433L7.35252 7.97683C6.46384 9.50217 5.99704 11.2365 6.00002 13.0018C6.00002 17.4193 4.96752 20.7993 4.27377 21.9943C4.0966 22.2981 4.00268 22.6433 4.00148 22.995C4.00027 23.3467 4.09182 23.6924 4.26689 23.9974C4.44196 24.3025 4.69437 24.5559 4.99865 24.7323C5.30293 24.9086 5.64833 25.0016 6.00002 25.0018H22.83L25.26 27.6743C25.3478 27.7733 25.4544 27.8539 25.5736 27.9114C25.6928 27.9689 25.8222 28.0022 25.9544 28.0093C26.0865 28.0164 26.2187 27.9972 26.3434 27.9528C26.4681 27.9084 26.5827 27.8398 26.6806 27.7508C26.7786 27.6618 26.8579 27.5542 26.9139 27.4343C26.97 27.3145 27.0017 27.1847 27.0072 27.0525C27.0127 26.9202 26.992 26.7882 26.9461 26.6641C26.9002 26.54 26.8302 26.4262 26.74 26.3293L6.74002 4.32933ZM6.00002 23.0018C6.96252 21.3468 8.00002 17.5118 8.00002 13.0018C7.99826 11.8068 8.26572 10.6268 8.78252 9.54933L21.0113 23.0018H6.00002ZM21 28.0018C21 28.267 20.8947 28.5214 20.7071 28.7089C20.5196 28.8965 20.2652 29.0018 20 29.0018H12C11.7348 29.0018 11.4804 28.8965 11.2929 28.7089C11.1054 28.5214 11 28.267 11 28.0018C11 27.7366 11.1054 27.4823 11.2929 27.2947C11.4804 27.1072 11.7348 27.0018 12 27.0018H20C20.2652 27.0018 20.5196 27.1072 20.7071 27.2947C20.8947 27.4823 21 27.7366 21 28.0018ZM26.75 22.4081C26.6332 22.4534 26.509 22.4767 26.3838 22.4768C26.1829 22.4766 25.9868 22.4159 25.8209 22.3027C25.655 22.1894 25.5271 22.0288 25.4538 21.8418C24.5438 19.5256 24 16.2206 24 13.0018C24.0004 11.6026 23.6338 10.2277 22.9368 9.01445C22.2398 7.80117 21.2367 6.79193 20.0278 6.08745C18.8188 5.38297 17.4462 5.0079 16.047 4.99968C14.6478 4.99146 13.2709 5.35037 12.0538 6.04058C11.8236 6.16529 11.5537 6.19478 11.3021 6.12272C11.0505 6.05067 10.8371 5.88282 10.7078 5.6552C10.5785 5.42759 10.5437 5.15836 10.6107 4.90533C10.6777 4.65229 10.8413 4.43562 11.0663 4.30183C12.5876 3.4389 14.3087 2.99007 16.0577 3.00017C17.8067 3.01026 19.5225 3.47891 21.0338 4.35935C22.5451 5.23979 23.7991 6.50122 24.6705 8.01773C25.5419 9.53424 26.0003 11.2528 26 13.0018C26 17.4206 27.0063 20.3256 27.315 21.1118C27.412 21.3587 27.4069 21.6339 27.3009 21.877C27.195 22.12 26.9968 22.3111 26.75 22.4081Z" fill="white" />
+    </svg>
+  );
+}

assets/icons/reply-icon.tsx

@@ -0,0 +1,12 @@
+import { SVGProps } from "react";
+
+export default function ReplyIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path 
+        d="M8.37488 2.75021V9.50021C8.37488 9.59966 8.33537 9.69505 8.26505 9.76537C8.19472 9.8357 8.09934 9.87521 7.99988 9.87521C7.90043 9.87521 7.80504 9.8357 7.73472 9.76537C7.66439 9.69505 7.62488 9.59966 7.62488 9.50021V3.12521H2.15504L3.7652 4.7349C3.83556 4.80526 3.87509 4.9007 3.87509 5.00021C3.87509 5.09972 3.83556 5.19516 3.7652 5.26552C3.69483 5.33589 3.59939 5.37542 3.49988 5.37542C3.40037 5.37542 3.30494 5.33589 3.23457 5.26552L0.98457 3.01552L0.981758 3.01224C0.974258 3.00474 0.966758 2.9963 0.959727 2.98786L0.948945 2.97333C0.945088 2.96853 0.941489 2.96352 0.938164 2.95833L0.927383 2.94099C0.924451 2.93646 0.92179 2.93177 0.919414 2.92693C0.916133 2.9213 0.91332 2.91521 0.910508 2.90911C0.907695 2.90302 0.90582 2.89927 0.903477 2.89365C0.901133 2.88802 0.899258 2.88193 0.896914 2.8763L0.89082 2.85943L0.886602 2.84115C0.886602 2.83505 0.88332 2.82943 0.881914 2.8238C0.880508 2.81818 0.881914 2.80927 0.879102 2.80224C0.876289 2.79521 0.879102 2.7924 0.876758 2.78724C0.874414 2.76261 0.874414 2.73781 0.876758 2.71318C0.876758 2.70802 0.876758 2.70333 0.879102 2.69818C0.881445 2.69302 0.879102 2.68365 0.881914 2.67661C0.884727 2.66958 0.884727 2.66536 0.886602 2.65927L0.89082 2.64099L0.896914 2.62411C0.899258 2.61849 0.901133 2.6124 0.903477 2.60677C0.90582 2.60115 0.908164 2.59646 0.910508 2.5913C0.912851 2.58615 0.916133 2.57911 0.919414 2.57349C0.92179 2.56865 0.924451 2.56395 0.927383 2.55943L0.938164 2.54208C0.941489 2.5369 0.945088 2.53189 0.948945 2.52708L0.959727 2.51255C0.966758 2.50411 0.974258 2.49568 0.981758 2.48818L0.98457 2.4849L3.23457 0.234896C3.30494 0.164531 3.40037 0.125 3.49988 0.125C3.59939 0.125 3.69483 0.164531 3.7652 0.234896C3.83556 0.305261 3.87509 0.400697 3.87509 0.500208C3.87509 0.59972 3.83556 0.695156 3.7652 0.765521L2.15504 2.37521H7.99988C8.09934 2.37521 8.19472 2.41472 8.26505 2.48504C8.33537 2.55537 8.37488 2.65075 8.37488 2.75021Z" 
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

assets/icons/send-icon.tsx

@@ -0,0 +1,12 @@
+import { SVGProps } from "react";
+
+export default function SendIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path 
+        d="M7.64052 4.51512C7.60569 4.54999 7.56433 4.57764 7.51881 4.59652C7.47329 4.61539 7.42449 4.6251 7.37521 4.6251C7.32593 4.6251 7.27713 4.61539 7.23161 4.59652C7.18608 4.57764 7.14472 4.54999 7.1099 4.51512L4.37521 1.77996V9.12481C4.37521 9.22426 4.3357 9.31965 4.26537 9.38997C4.19505 9.4603 4.09966 9.49981 4.00021 9.49981C3.90075 9.49981 3.80537 9.4603 3.73504 9.38997C3.66472 9.31965 3.62521 9.22426 3.62521 9.12481V1.77996L0.890521 4.51512C0.820156 4.58548 0.72472 4.62502 0.625208 4.62502C0.525697 4.62502 0.430261 4.58548 0.359896 4.51512C0.289531 4.44475 0.25 4.34932 0.25 4.24981C0.25 4.1503 0.289531 4.05486 0.359896 3.98449L3.7349 0.609494C3.76972 0.574628 3.81108 0.546968 3.85661 0.528097C3.90213 0.509225 3.95093 0.499512 4.00021 0.499512C4.04949 0.499512 4.09829 0.509225 4.14381 0.528097C4.18934 0.546968 4.23069 0.574628 4.26552 0.609494L7.64052 3.98449C7.67539 4.01932 7.70305 4.06068 7.72192 4.1062C7.74079 4.15173 7.7505 4.20053 7.7505 4.24981C7.7505 4.29909 7.74079 4.34789 7.72192 4.39341C7.70305 4.43893 7.67539 4.48029 7.64052 4.51512Z" 
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

components/administration/networks-dropdown.tsx

@@ -25,7 +25,11 @@ export default function NetworksDropDown({
     setOptions(networks.map(network => ({
       value: network.networkAddress,
       label: network.name,
-      preIcon: <img src={`${baseApiImgUrl}/${settings?.urls?.ipfs}/${network.logoIcon}?width=30&height=30`} width={30} height={30} />,
+      preIcon: <img 
+                  src={`${baseApiImgUrl}/${settings?.urls?.ipfs}/${network.logoIcon}?width=30&height=30`} 
+                  width={30} 
+                  height={30}
+              />,
       isSelected: selected === network.name
     })));
   }, [networks]);

components/bounty/amount-info/view.tsx

@@ -18,7 +18,6 @@ interface BountyAmountViewProps {
 export default function BountyAmountView({
   bountyAmount,
   symbol,
-  isActive,
   size = "lg",
 }: BountyAmountViewProps) {
   const { t } = useTranslation(["bounty", "common"]);

components/bounty/bounty-hero/bounty-settings/view.tsx

@@ -137,16 +137,16 @@ export default function BountySettingsView({
   useEffect(loadOutsideClick, [show]);
 
   return (
-      <>
+      <div className="col-auto">
         <div className="position-relative d-flex justify-content-end" ref={node}>
           <div
-            className={`cursor-pointer hover-white border ${
-              (show && "border-primary") || "border-gray-850"
-            } border-radius-8 d-flex`}
+            className={`cursor-pointer hover-white px-2 border align-items-center ${
+              (show && "border-primary") || "border-gray-800"
+            } border-radius-4 d-flex`}
             onClick={() => setShow(!show)}
             data-testid="task-options"
           >
-            <span className="mx-2 my-1">{t("common:misc.options")}</span>
+            <span className="text-gray-400 mb-2">. . .</span>
           </div>
 
           <div
@@ -174,7 +174,7 @@ export default function BountySettingsView({
             <Translation ns="common" label="modals.hard-cancel.content" />
           </h5>
         </Modal>
-      </>
+      </div>
   );
 }
 

components/bounty/bounty-hero/view.tsx

@@ -13,6 +13,8 @@ import { UserProfileLink } from "components/common/user-profile-link/user-profil
 import CustomContainer from "components/custom-container";
 import If from "components/If";
 import OriginLinkWarningModal from "components/modals/origin-link-warning/view";
+import { SubscriptionTaskButton } 
+  from "components/notifications/subscription-task-button/subscription-task-button.controller";
 import TaskStatusInfo from "components/task-status-info";
 
 import { IssueBigNumberData, IssueState } from "interfaces/issue-data";
@@ -52,7 +54,7 @@ export default function BountyHeroView({
   }
 
   return (
-    <div className="mt-2 border-bottom border-gray-850 pb">
+    <div className="mt-3 border-bottom border-gray-850 pb">
       <CustomContainer>
         <div className="row d-flex flex-row justify-content-center">
           <div className="col-12 min-w-bounty-hero justify-content-center">
@@ -66,14 +68,18 @@ export default function BountyHeroView({
                 </span>
               </div>
 
-              <div className="col-auto">
-                <BountySettings
-                  currentBounty={bounty}
-                  updateBountyData={updateBountyData}
-                  isEditIssue={isEditIssue}
-                  onEditIssue={handleEditIssue}
+              <div className="col-auto px-0 px-md-1">
+                <SubscriptionTaskButton
+                  taskId={+bounty?.id}
                 />
               </div>
+
+              <BountySettings
+                currentBounty={bounty}
+                updateBountyData={updateBountyData}
+                isEditIssue={isEditIssue}
+                onEditIssue={handleEditIssue}
+              />
             </div>
 
             <div 

components/bounty/comments/comment/comment-body/comment-body.view.tsx

@@ -0,0 +1,87 @@
+import { useTranslation } from "next-i18next";
+
+import ReplyIcon from "assets/icons/reply-icon";
+
+import AvatarOrIdenticon from "components/avatar-or-identicon";
+import CommentSettings from "components/bounty/comments/comment/settings/controller";
+import Button from "components/button";
+import { FlexColumn } from "components/common/flex-box/view";
+import { UserProfileLink } from "components/common/user-profile-link/user-profile-link.view";
+import If from "components/If";
+import MarkedRender from "components/MarkedRender";
+
+import { getTimeDifferenceInWords } from "helpers/formatDate";
+
+import { IssueDataComment } from "interfaces/issue-data";
+
+interface CommentBodyProps extends IssueDataComment {
+  variant?: "comment" | "reply";
+  isReplyButtonDisabled?: boolean;
+  onReplyButtonClick?: () => void;
+}
+
+export function CommentBody({
+  variant = "comment",
+  user,
+  userAddress,
+  createdAt,
+  comment,
+  isReplyButtonDisabled,
+  onReplyButtonClick,
+}: CommentBodyProps) {
+  const { t } = useTranslation("bounty");
+
+  return(
+    <div className={variant === "reply" ? "border-top border-gray-700" : ""}>
+      <div className="d-flex align-items-baseline justify-content-between mb-2 flex-wrap-reverse pt-3 px-3">
+        <div className="d-flex align-items-center flex-wrap w-100">
+          <FlexColumn className="justify-content-center">
+            <AvatarOrIdenticon
+              user={user}
+              size="sm"
+            />
+          </FlexColumn>
+
+          <FlexColumn className="justify-content-center">
+            <UserProfileLink
+              className="xs-medium ms-2"
+              address={userAddress}
+              handle={user?.handle}
+            />
+          </FlexColumn>
+
+          <FlexColumn className="align-items-baseline flex-grow-1">
+            <span className="p-small text-gray-500 ms-2">
+              {createdAt && getTimeDifferenceInWords(new Date(createdAt), new Date(), true) }
+            </span>
+          </FlexColumn>
+
+          <If condition={variant === "comment"}>
+            <FlexColumn className="align-items-baseline">
+              <Button
+                transparent
+                onClick={onReplyButtonClick}
+                disabled={isReplyButtonDisabled}
+                className="p-2 border border-gray-700 border-radius-8 text-gray-300 text-white-hover"
+              >
+                <ReplyIcon />
+              </Button>
+            </FlexColumn>
+          </If>
+        </div>
+
+        <CommentSettings
+          isGovernor={false}
+          hidden={false}
+        />
+      </div>
+
+      <div className={`pb-3 px-3 ${variant === "reply" ? "ml-3" : ""}`}>
+        <MarkedRender
+          className="p-small mb-0 comment"
+          source={comment || t("no-comments-available")}
+        />
+      </div>
+    </div>
+  );
+}

components/bounty/comments/comment/comment.controller.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+
+import { CommentView } from "components/bounty/comments/comment/comment.view";
+
+import { TypeComment } from "interfaces/comments";
+import { IssueDataComment } from "interfaces/issue-data";
+
+interface CommentProps extends IssueDataComment {
+  type: TypeComment;
+}
+
+export function Comment(comment: CommentProps) {
+  const [isReplying, setIsReplying] = useState(false);
+
+  const onReplyButtonClick = () => setIsReplying(true);
+
+  function hideReplyForm() {
+    setIsReplying(false);
+  }
+
+  return(
+    <CommentView
+      comment={comment}
+      type={comment?.type}
+      isReplying={isReplying}
+      onReplyButtonClick={onReplyButtonClick}
+      hideReplyForm={hideReplyForm}
+    />
+  );
+}

components/bounty/comments/comment/comment.view.tsx

@@ -0,0 +1,58 @@
+import { Collapse } from "react-bootstrap";
+
+import { CommentBody } from "components/bounty/comments/comment/comment-body/comment-body.view";
+import { ReplyCommentForm } from "components/bounty/comments/comment/reply-comment-form/reply-comment-form.controller";
+
+import { TypeComment } from "interfaces/comments";
+import { IssueDataComment } from "interfaces/issue-data";
+
+interface CommentViewProps {
+  comment: IssueDataComment;
+  type: TypeComment;
+  isReplying: boolean;
+  onReplyButtonClick: () => void;
+  hideReplyForm: () => void;
+}
+
+export function CommentView({
+  comment,
+  type,
+  isReplying,
+  onReplyButtonClick,
+  hideReplyForm,
+}: CommentViewProps) {
+  if (comment?.hidden) 
+    return <></>;
+
+  return (
+    <div className="border-radius-8 bg-gray-800 mb-3">
+      <CommentBody
+        {...comment}
+        isReplyButtonDisabled={isReplying}
+        onReplyButtonClick={onReplyButtonClick}
+      />
+
+      {comment?.replies?.map(reply => (
+        <CommentBody
+          {...reply}
+          key={reply?.id}
+          variant="reply"
+        />
+      ))}
+
+      <Collapse in={isReplying}>
+        <div>
+          <ReplyCommentForm
+            commentId={comment?.id}
+            taskId={comment?.issueId}
+            deliverableId={comment?.deliverableId}
+            proposalId={comment?.proposalId}
+            type={type}
+            onCancelClick={hideReplyForm}
+            onSubmittedCallback={hideReplyForm}
+          />
+        </div>
+      </Collapse>
+    </div>
+  );
+}