Merge pull request #190 from PotLock/fix/pot-donate

add Verify To Donate button
PotLock · Feb 9, 2024 · 2d0b1f1 · 2d0b1f1
2 parents df5fa98 + c3dd823
commit 2d0b1f1
Show file tree

Hide file tree

Showing 8 changed files with 201 additions and 23 deletions.
diff --git a/apps/potlock/widget/Components/Indicator.jsx b/apps/potlock/widget/Components/Indicator.jsx
@@ -2,8 +2,8 @@ const Outer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   border-radius: 50%;
   background-color: ${props.colorOuter};
 
@@ -17,12 +17,15 @@ const Outer = styled.div`
     }
   }
 
+  ${props.animate &&
+  `
   animation: beacon 1.5s infinite;
+  `}
 `;
 
 const Inner = styled.div`
-  width: 9px;
-  height: 9px;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
   background-color: ${props.colorInner};
 `;

diff --git a/apps/potlock/widget/Index.jsx b/apps/potlock/widget/Index.jsx
@@ -70,6 +70,7 @@ State.init({
   note: null,
   referrerId: null,
   currency: null,
+  // isSybilModalOpen: false,
 });
 
 if (!state.nearToUsd) {
@@ -434,6 +435,10 @@ const props = {
 
     return `${differenceInDays} ${differenceInDays === 1 ? "day" : "days"}${suffix || ""}`;
   },
+  NADA_BOT_URL: "https://app.nada.bot",
+  // openSybilModal: () => {
+  //   State.update({ isSybilModalOpen: true });
+  // },
 };
 
 if (props.transactionHashes && props.tab === CART_TAB) {
@@ -523,5 +528,13 @@ return (
   <Theme>
     <Widget src={`${ownerId}/widget/Components.Nav`} props={props} />
     <Content className={isForm ? "form" : ""}>{tabContent}</Content>
+    {/* <Widget
+      src={`${ownerId}/widget/Pots.ModalSybil`}
+      props={{
+        ...props,
+        isModalOpen: state.isSybilModalOpen,
+        onClose: () => State.update({ isSybilModalOpen: false }),
+      }}
+    /> */}
   </Theme>
 );
diff --git a/apps/potlock/widget/Pots/ButtonVerifyToDonate.jsx b/apps/potlock/widget/Pots/ButtonVerifyToDonate.jsx
@@ -0,0 +1,15 @@
+const { ownerId } = props;
+
+return (
+  <Widget
+    src={`${ownerId}/widget/Components.Button`}
+    props={{
+      ...props,
+      type: "primary",
+      text: "Verify to Donate",
+      style: props.style || {},
+      href: props.href,
+      target: "_blank",
+    }}
+  />
+);
diff --git a/apps/potlock/widget/Pots/Detail.jsx b/apps/potlock/widget/Pots/Detail.jsx
@@ -80,7 +80,7 @@ State.init({
   applicationMessage: "",
   applicationMessageError: "",
   applicationSuccess: false,
-  sybilWrapperProviderResult: null,
+  sybilRequirementMet: null,
 });
 
 if (state.potDetail === null) {
@@ -109,8 +109,10 @@ if (state.potDetail === null) {
         const [contractId, methodName] = potDetail.sybil_wrapper_provider.split(":");
         Near.asyncView(contractId, methodName, { account_id: context.accountId }).then((result) => {
           console.log("sybil result: ", result);
-          State.update({ sybilWrapperProviderResult: result });
+          State.update({ sybilRequirementMet: result });
         });
+      } else {
+        State.update({ sybilRequirementMet: true });
       }
     })
     .catch((e) => {
@@ -224,6 +226,7 @@ return (
           ...props,
           setApplicationModalOpen: (isOpen) => State.update({ isApplicationModalOpen: isOpen }),
           handleApplyToPot,
+          sybilRequirementMet: state.sybilRequirementMet,
         }}
       />
       <Container>
@@ -247,6 +250,7 @@ return (
               props={{
                 ...props,
                 potDetail: state.potDetail,
+                sybilRequirementMet: state.sybilRequirementMet,
               }}
             />
           </BodyContainer>

diff --git a/apps/potlock/widget/Pots/Header.jsx b/apps/potlock/widget/Pots/Header.jsx
@@ -1,4 +1,12 @@
-const { ownerId, potId, MAX_DONATION_MESSAGE_LENGTH, formatDate, referrerId } = props;
+const {
+  ownerId,
+  potId,
+  MAX_DONATION_MESSAGE_LENGTH,
+  formatDate,
+  referrerId,
+  sybilRequirementMet,
+  NADA_BOT_URL,
+} = props;
 
 const loraCss = fetch("https://fonts.googleapis.com/css2?family=Lora&display=swap").body;
 
@@ -313,6 +321,7 @@ return (
                   props={{
                     colorOuter: "#D7F5A1",
                     colorInner: "#9ADD33",
+                    animate: true,
                   }}
                 />
                 <StatusText style={{ color: "#4A7714" }}>Matching round live</StatusText>
@@ -355,8 +364,11 @@ return (
             src={`${ownerId}/widget/Components.Button`}
             props={{
               type: "primary",
-              text: "Donate to projects",
-              href: props.hrefWithEnv(`?tab=pot&potId=${potId}&nav=projects`),
+              text: sybilRequirementMet ? "Donate to projects" : "Verify to Donate",
+              href: sybilRequirementMet
+                ? props.hrefWithEnv(`?tab=pot&potId=${potId}&nav=projects`)
+                : NADA_BOT_URL,
+              target: sybilRequirementMet ? "_self" : "_blank",
             }}
           />
         )}

diff --git a/apps/potlock/widget/Pots/Projects.jsx b/apps/potlock/widget/Pots/Projects.jsx
@@ -1,5 +1,5 @@
 // get projects
-const { ownerId, potId, potDetail } = props;
+const { ownerId, potId, potDetail, sybilRequirementMet } = props;
 const projects = Near.view(potId, "get_approved_applications", {});
 
 if (!projects) return "Loading...";
@@ -35,18 +35,9 @@ return (
               ...props,
               potId,
               projectId: project.project_id,
-              allowDonate: publicRoundOpen && project.project_id !== context.accountId,
-              // button: (
-              //   <Widget
-              //     src={`${ownerId}/widget/Components.Button`}
-              //     props={{
-              //       type: "primary",
-              //       text: "Donate",
-              //       onClick: handleDonate,
-              //     }}
-              //   />
-              // ),
-              // TODO: add prop indicating that button should read "Donate" and providing onClick method
+              allowDonate:
+                sybilRequirementMet && publicRoundOpen && project.project_id !== context.accountId,
+              requireVerification: !sybilRequirementMet,
             }}
           />
         );

diff --git a/apps/potlock/widget/Pots/UNUSED/ModalSybil.jsx b/apps/potlock/widget/Pots/UNUSED/ModalSybil.jsx
@@ -0,0 +1,126 @@
+const { ownerId, isModalOpen, onClose, NADA_BOT_URL } = props;
+
+const IPFS_BASE_URL = "https://nftstorage.link/ipfs/";
+const CLOSE_ICON_URL =
+  IPFS_BASE_URL + "bafkreifyg2vvmdjpbhkylnhye5es3vgpsivhigkjvtv2o4pzsae2z4vi5i";
+const ERROR_ICON_URL =
+  IPFS_BASE_URL + "bafkreicqarojxk6jhdtsk2scfsmnigqpxjfgar6om4wlhn5xmqbbu74u5i";
+const IMAGE_URL = IPFS_BASE_URL + "bafkreidwashbfmlr7qo2yoqcfdsqi4ouisgt6h6jwxymz53v2f7hhoy75a";
+
+const loraCss = fetch("https://fonts.googleapis.com/css2?family=Lora&display=swap").body;
+
+const ModalHeader = styled.div`
+  width: 100%;
+  padding: 10px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f6f5f3;
+`;
+
+const ModalHeaderText = styled.div`
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 24px;
+  color: #292929;
+`;
+
+const Icon = styled.img`
+  width: 24px;
+  height: 24px;
+`;
+
+const ModalContent = styled.div`
+  padding: 16px 20px 32px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ContentHeaderText = styled.div`
+  margin-left: 24px;
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 40px;
+  color: #525252;
+  font-family: "Lora";
+  ${loraCss}
+`;
+
+const ContentDescriptionText = styled.div`
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 28px;
+`;
+
+const ErrorSpan = styled.span`
+  color: #dd3345;
+`;
+
+const BoldSpan = styled.span`
+  font-weight: 600;
+`;
+
+const Image = styled.img`
+  width: 100px;
+  max-height: 245px;
+  margin: 0px 32px;
+`;
+
+return (
+  <Widget
+    src={`${ownerId}/widget/Components.Modal`}
+    props={{
+      ...props,
+      isModalOpen,
+      onClose,
+      children: (
+        <>
+          <ModalHeader>
+            <div></div>
+            <ModalHeaderText>Verify Via Nada.bot</ModalHeaderText>
+            <Icon cursor={"pointer"} src={CLOSE_ICON_URL} onClick={onClose} />
+          </ModalHeader>
+          <ModalContent>
+            <Row>
+              <Icon style={{ width: "35px", height: "35px" }} src={ERROR_ICON_URL} />
+              <ContentHeaderText>
+                You Are <ErrorSpan>Not verified</ErrorSpan>
+              </ContentHeaderText>
+            </Row>
+            <Row>
+              <ContentDescriptionText>
+                To donate to a project via this pot, you need to get verified from{" "}
+                <BoldSpan>Nada.bot</BoldSpan>
+              </ContentDescriptionText>
+            </Row>
+            <Image src={IMAGE_URL} />
+            <Row style={{ alignItems: "flex-end" }}>
+              <Widget
+                src={`${ownerId}/widget/Components.Button`}
+                props={{
+                  href: NADA_BOT_URL,
+                  target: "_blank",
+                  type: "primary",
+                  text: "Get Verified Now",
+                  //   style: {
+                  //     width: "300px",
+                  //   },
+                }}
+              />
+            </Row>
+          </ModalContent>
+        </>
+      ),
+    }}
+  />
+);
diff --git a/apps/potlock/widget/Project/Card.jsx b/apps/potlock/widget/Project/Card.jsx
@@ -1,4 +1,4 @@
-const { ownerId, potDetail } = props;
+const { ownerId, potDetail, NADA_BOT_URL } = props;
 const donationContractId = "donate.potlock.near";
 // console.log("props in Card: ", props);
 
@@ -190,5 +190,19 @@ return (
         }}
       />
     )}
+    {props.requireVerification && (
+      <Widget
+        src={`${ownerId}/widget/Pots.ButtonVerifyToDonate`}
+        props={{
+          ...props,
+          style: {
+            borderRadius: "0px 0px 6px 6px",
+            boxShadow: "0px",
+            border: "0px",
+          },
+          href: NADA_BOT_URL,
+        }}
+      />
+    )}
   </Card>
 );