Merge pull request #106 from PotLock/staging

Staging => main

package.json

@@ -14,7 +14,7 @@
     "test": "npx playwright test"
   },
   "dependencies": {
-    "alem": "1.1.2"
+    "alem": "1.1.3"
   },
   "devDependencies": {
     "@playwright/test": "^1.38.1",

src/assets/svgs/SuccessfulIcon.tsx

@@ -0,0 +1,9 @@
+const SuccessfulIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M9 1.5C4.86 1.5 1.5 4.86 1.5 9C1.5 13.14 4.86 16.5 9 16.5C13.14 16.5 16.5 13.14 16.5 9C16.5 4.86 13.14 1.5 9 1.5ZM9 15C5.6925 15 3 12.3075 3 9C3 5.6925 5.6925 3 9 3C12.3075 3 15 5.6925 15 9C15 12.3075 12.3075 15 9 15ZM12.4425 5.685L7.5 10.6275L5.5575 8.6925L4.5 9.75L7.5 12.75L13.5 6.75L12.4425 5.685Z"
+      fill="#079A90"
+    />
+  </svg>
+);
+export default SuccessfulIcon;

src/components/Cart/BreakdownSummary/BreakdownSummary.tsx

@@ -1,7 +1,6 @@
 import { State, props, state } from "alem";
 import DonateSDK from "@app/SDK/donate";
 import NearIcon from "@app/assets/svgs/near-icon";
-import constants from "@app/constants";
 import basisPointsToPercent from "@app/utils/basisPointsToPercent";
 import {
   BreakdownAmount,
@@ -18,11 +17,10 @@ const BreakdownSummary = ({
   referrerId,
   totalAmount,
   bypassProtocolFee,
-  recipientId,
   potRferralFeeBasisPoints,
   ftIcon,
   bypassChefFee,
-  chef,
+  label,
   chefFeeBasisPoints,
 }: any) => {
   const donationContractConfig = DonateSDK.getConfig();
@@ -36,6 +34,7 @@ const BreakdownSummary = ({
   const { protocol_fee_basis_points } = donationContractConfig;
 
   const protocolFeeBasisPoints = props.protocolFeeBasisPoints ?? protocol_fee_basis_points;
+
   const referralFeeBasisPoints = potRferralFeeBasisPoints || props.referralFeeBasisPoints;
 
   const TOTAL_BASIS_POINTS = 10_000;
@@ -81,7 +80,7 @@ const BreakdownSummary = ({
       show: true,
     },
     {
-      label: "Project allocation",
+      label: `${label ?? "Project"} allocation`,
       percentage: projectAllocationPercent,
       amount: projectAllocationAmount,
       show: true,

src/components/ToastNotification/getToastContainer.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "alem";
+import SuccessfulIcon from "@app/assets/svgs/SuccessfulIcon";
+import ToastProvider, { ToastProps } from "@app/contexts/ToastProvider";
+import { useToastNotification } from "@app/hooks/useToast";
+import { Container, Description, Header } from "./styles";
+
+const ToastContainer = ({ toastContent }: { toastContent: ToastProps }) => {
+  // ToastProvider();
+
+  // const { toastContent } = useToastNotification();
+
+  return (
+    <Container className={toastContent.title ? "active" : ""}>
+      <Header>
+        <SuccessfulIcon />
+        {toastContent.title}
+      </Header>
+      <Description>{toastContent.description}</Description>
+    </Container>
+  );
+};
+
+export default ToastContainer;

src/components/ToastNotification/styles.ts

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  position: fixed;
+  right: -310px;
+  top: 10%;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  max-width: 300px;
+  padding: 1rem;
+  background: #fff;
+  box-shadow: 0px 0px 0px 1px rgba(5, 5, 5, 0.08), 0px 8px 8px -4px rgba(15, 15, 15, 0.15),
+    0px 4px 15px -2px rgba(5, 5, 5, 0.08);
+  border-radius: 6px;
+  gap: 6px;
+  font-size: 14px;
+  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
+  &.active {
+    right: 10px;
+    opacity: 1;
+  }
+`;
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  div {
+    line-height: 142%;
+    font-weight: 600;
+  }
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+
+export const Description = styled.div`
+  padding-left: 1.5rem;
+  color: #656565;
+`;

src/components/mob.near/ProfileImage.tsx

@@ -60,8 +60,8 @@ const ProfileImage = (profileImgProps: Props) => {
       accountId,
     });
   }
-  const fallbackUrl = props.fallbackUrl;
-
+  const fallbackUrl =
+    props.fallbackUrl ?? "https://ipfs.near.social/ipfs/bafkreiccpup6f2kihv7bhlkfi4omttbjpawnsns667gti7jbhqvdnj4vsm";
   const imageProps = {
     image,
     alt: title,

src/contexts/ToastProvider.ts

@@ -0,0 +1,41 @@
+import { createContext } from "alem";
+
+export interface ToastProps {
+  title: string;
+  description: string;
+  type?: "success" | "error" | "warning";
+}
+
+export interface ToastContextProps {
+  toast: (newValue: ToastProps) => void;
+  toastContent: ToastProps;
+}
+
+const ToastProvider = () => {
+  // Create a provider using a reference key
+  const { setDefaultData, updateData, getSelf } = createContext<ToastContextProps>("toast-notification");
+
+  const EMPTY_TOAST = {
+    title: "",
+    description: "",
+  };
+
+  setDefaultData({
+    toastContent: EMPTY_TOAST,
+    toast: (toastContent: ToastProps) => {
+      updateData({
+        toastContent,
+      });
+      setTimeout(() => {
+        updateData({
+          toastContent: EMPTY_TOAST,
+        });
+        // Wait 7sec before clearing the notification
+      }, 7000);
+    },
+  });
+
+  return getSelf();
+};
+
+export default ToastProvider;

src/hooks/useToast.ts

@@ -0,0 +1,4 @@
+import { useContext } from "alem";
+import { ToastContextProps } from "@app/contexts/ToastProvider";
+
+export const useToastNotification = () => useContext<ToastContextProps>("toast-notification");

src/modals/ModalOverlay.tsx

@@ -3,8 +3,8 @@ import styled from "styled-components";
 type Props = {
   children: JSX.Element | JSX.Element[];
   onOverlayClick?: (event: any) => void;
-  contentStyle?: any;
-  overlayStyle?: any;
+  contentStyle?: React.CSSProperties;
+  overlayStyle?: React.CSSProperties;
 };
 
 const ModalOverlay = ({ children, onOverlayClick, contentStyle }: Props) => {

src/modals/ModalSuccess/ModalSuccess.tsx

@@ -163,17 +163,20 @@ const ModalSuccess = () => {
                     },
                   }));
                 })
-                .catch((err) => console.log(err));
+                .catch((err) => {
+                  console.log(err);
+                  return "";
+                });
             } else {
-              onClose();
+              return "";
             }
           } else {
-            onClose();
+            return "";
           }
         })
         .catch((err) => {
           console.log(err);
-          onClose();
+          return "";
         });
     }
   }
@@ -219,7 +222,7 @@ const ModalSuccess = () => {
 
   const needsToVerify = isUserHumanVerified === false;
 
-  return (
+  return successfulDonation || successfulApplication ? (
     <ModalOverlay onOverlayClick={onClose} contentStyle={{ padding: "0px" }}>
       <>
         {successfulApplication ? (
@@ -322,9 +325,13 @@ const ModalSuccess = () => {
             />
             {needsToVerify && !successfulDonationVals[0]?.recipient_id && <VerifyInfo />}
           </ModalMain>
-        ) : null}
+        ) : (
+          ""
+        )}
       </>
     </ModalOverlay>
+  ) : (
+    ""
   );
 };
 

src/pages/CreateProject/utils/helpers.ts

@@ -65,7 +65,7 @@ export const projectDisabled = () =>
 export function extractRepoPath(url: string) {
   if (url) {
     // Define a regular expression pattern to match GitHub repository URLs
-    const pattern = /^(?:https?:\/\/)?(?:www\.)?github\.com\/([^\/]+\/[^\/]+(?:\/.*)?)\/?$/;
+    const pattern = /^(?:https?:\/\/)?(?:www\.)?github\.com\/([^\/]+(?:\/[^\/]+)?)\/?$/;
     // Execute the regular expression on the URL
     const match = url.match(pattern);
     // If a match is found, return the extracted repository path; otherwise, return null

src/pages/Pot/NavPages/Applications/Applications.tsx

@@ -1,11 +1,13 @@
-import { Social, State, context, state, useParams, Tooltip, OverlayTrigger } from "alem";
+import { Social, State, context, state, useParams, Tooltip, OverlayTrigger, useEffect } from "alem";
 import PotSDK from "@app/SDK/pot";
 import Button from "@app/components/Button";
 import Dropdown from "@app/components/Inputs/Dropdown/Dropdown";
+import ToastContainer from "@app/components/ToastNotification/getToastContainer";
 import ProfileImage from "@app/components/mob.near/ProfileImage";
 import { PotDetail } from "@app/types";
 import _address from "@app/utils/_address";
 import daysAgo from "@app/utils/daysAgo";
+import getTransactionsFromHashes from "@app/utils/getTransactionsFromHashes";
 import hrefWithParams from "@app/utils/hrefWithParams";
 import ApplicationReviewModal from "../../components/ApplicationReviewModal/ApplicationReviewModal";
 import APPLICATIONS_FILTERS_TAGS from "./APPLICATIONS_FILTERS_TAGS";
@@ -21,7 +23,8 @@ import {
 } from "./styles";
 
 const Applications = ({ potDetail }: { potDetail: PotDetail }) => {
-  const { potId } = useParams();
+  const accountId = context.accountId;
+  const { potId, transactionHashes } = useParams();
 
   State.init({
     newStatus: "",
@@ -30,9 +33,13 @@ const Applications = ({ potDetail }: { potDetail: PotDetail }) => {
     allApplications: null,
     filteredApplications: [],
     filterVal: "ALL",
+    toastContent: {
+      title: "",
+      description: "",
+    },
   });
 
-  const { newStatus, projectId, searchTerm, allApplications, filteredApplications, filterVal } = state;
+  const { newStatus, projectId, searchTerm, allApplications, filteredApplications, filterVal, toastContent } = state;
 
   const applications = PotSDK.getApplications(potId);
 
@@ -56,8 +63,41 @@ const Applications = ({ potDetail }: { potDetail: PotDetail }) => {
 
   const { owner, admins, chef } = potDetail;
 
-  const isChefOrGreater =
-    context.accountId === chef || admins.includes(context.accountId || "") || context.accountId === owner;
+  const toast = (newStatus: string) => {
+    State.update({
+      toastContent: {
+        title: "Updated Successfully!",
+        description: `Application status has been successfully updated to ${newStatus}.`,
+      },
+    });
+    setTimeout(() => {
+      State.update({
+        toastContent: {
+          title: "",
+          description: "",
+        },
+      });
+    }, 7000);
+  };
+
+  // Handle update application status for web wallet
+  useEffect(() => {
+    if (accountId && transactionHashes) {
+      getTransactionsFromHashes(transactionHashes, accountId).then((trxs) => {
+        const transaction = trxs[0].body.result.transaction;
+
+        const methodName = transaction.actions[0].FunctionCall.method_name;
+        const successVal = trxs[0].body.result.status?.SuccessValue;
+        const result = JSON.parse(Buffer.from(successVal, "base64").toString("utf-8"));
+
+        if (methodName === "chef_set_application_status" && result) {
+          toast(result.status);
+        }
+      });
+    }
+  }, []);
+
+  const isChefOrGreater = accountId === chef || admins.includes(accountId || "") || accountId === owner;
 
   const handleApproveApplication = (projectId: string) => {
     State.update({ newStatus: "Approved", projectId });
@@ -197,7 +237,7 @@ const Applications = ({ potDetail }: { potDetail: PotDetail }) => {
                 <input type="checkbox" className="toggle-check" />
                 <div className="header">
                   <div className="header-info">
-                    <ProfileImage profile={profile} style={{}} className="profile-image" />
+                    <ProfileImage profile={profile} accountId={project_id} style={{}} className="profile-image" />
                     {profile?.name && <div className="name">{_address(profile?.name, 10)}</div>}
 
                     <OverlayTrigger placement="top" overlay={<Tooltip>{project_id}</Tooltip>}>
@@ -270,7 +310,10 @@ const Applications = ({ potDetail }: { potDetail: PotDetail }) => {
           <div style={{ padding: "1rem" }}>No applications to display</div>
         )}
       </ApplicationsWrapper>
-      {projectId && <ApplicationReviewModal projectId={projectId} newStatus={newStatus} onClose={handleCloseModal} />}
+      {projectId && (
+        <ApplicationReviewModal toast={toast} projectId={projectId} newStatus={newStatus} onClose={handleCloseModal} />
+      )}
+      <ToastContainer toastContent={toastContent} />
     </Container>
   );
 };