Merge remote-tracking branch 'upstream/main' into ux-test1

Merge my branch with remote tracking

i

alem.config.json

@@ -31,6 +31,7 @@
     }
   },
   "options": {
+    "ejectStatefulComponents": false,
     "keepRoute": false,
     "createLoaderWidget": true,
     "loadingComponentFile": "src/components/SuspenseLoading.tsx",

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",

playwright-tests/tests/pot.spec.js

@@ -8,7 +8,7 @@ test.beforeEach(async ({ page }) => {
   await page.goto(`${ROOT_SRC}?tab=pot&potId=${DEFAULT_POT_ID}&nav=projects`);
 });
 
-test("clicking project card should go to project page", async ({ page }) => {
+test.skip("clicking project card should go to project page", async ({ page }) => {
   test.setTimeout(120000); // 1 minute... we want to improve performance
 
   const projectSearchBar = await page.getByPlaceholder("Search projects");

src/Main.tsx

@@ -1,9 +1,12 @@
-import { ModulesProvider } from "alem";
+import { ModulesProvider, useParams } from "alem";
 import Banner from "./components/Banner/Banner";
 import Nav from "./components/Nav/Nav";
+import ModalSuccess from "./modals/ModalSuccess/ModalSuccess";
 import Routes from "./routes/Routes";
 
 const Main = () => {
+  const { transactionHashes } = useParams();
+
   return (
     <>
       <ModulesProvider />
@@ -12,6 +15,7 @@ const Main = () => {
         <Routes />
       </div>
       <Banner />
+      {transactionHashes && <ModalSuccess />}
     </>
   );
 };

src/SDK/lists.js

@@ -34,9 +34,7 @@ const ListsSDK = {
       const registration = registrations.find(
         (registration) => registration.list_id === (listId || potlockRegistryListId),
       );
-      return Near.view(_listContractId, "get_registration", {
-        registration_id: registration.id,
-      });
+      return registration;
     }
   },
   asyncGetRegistration: (listId, registrantId) => {

src/SDK/pot.js

@@ -29,8 +29,8 @@ const PotSDK = {
     // TODO: paginate
     return Near.view(potId, "get_matching_pool_donations", {});
   },
-  asyncGetMatchingPoolDonations: (potId) => {
-    return Near.asyncView(potId, "get_matching_pool_donations", {});
+  asyncGetMatchingPoolDonations: (potId, args) => {
+    return Near.asyncView(potId, "get_matching_pool_donations", args || {});
   },
   getPublicRoundDonations: (potId, args) => {
     return Near.view(potId, "get_public_round_donations", {

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/Card/ButtonDonation.tsx

@@ -0,0 +1,34 @@
+import { context } from "alem";
+import { useDonationModal } from "@app/hooks/useDonationModal";
+import Button from "../Button";
+
+const ButtonDonation = ({ allowDonate, projectId }: { allowDonate: boolean; projectId: string }) => {
+  const { setDonationModalProps } = useDonationModal();
+
+  return (
+    <div
+      onClick={(e) => e.preventDefault()}
+      style={{
+        cursor: "default",
+        color: "#292929",
+      }}
+    >
+      {/* <Modals /> */}
+      {allowDonate && context.accountId && (
+        <Button
+          varient="tonal"
+          onClick={(e) => {
+            e.preventDefault();
+            setDonationModalProps({
+              projectId,
+            });
+          }}
+        >
+          Donate
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default ButtonDonation;

src/components/Card/Card.tsx

@@ -1,17 +1,15 @@
-import { Big, RouteLink, Social, context, useEffect, useMemo, useParams, useState } from "alem";
+import { Big, RouteLink, Social } from "alem";
 import DonateSDK from "@app/SDK/donate";
 import PotSDK from "@app/SDK/pot";
-import { useDonationModal } from "@app/hooks/useDonationModal";
-import useModals from "@app/hooks/useModals";
 import routesPath from "@app/routes/routesPath";
 import _address from "@app/utils/_address";
 import getTagsFromSocialProfileData from "@app/utils/getTagsFromSocialProfileData";
 import ipfsUrlFromCid from "@app/utils/ipfsUrlFromCid";
 import yoctosToNear from "@app/utils/yoctosToNear";
 import yoctosToUsdWithFallback from "@app/utils/yoctosToUsdWithFallback";
 import CardSkeleton from "../../pages/Projects/components/CardSkeleton";
-import Button from "../Button";
 import Image from "../mob.near/Image";
+import ButtonDonation from "./ButtonDonation";
 import {
   Amount,
   AmountDescriptor,
@@ -32,19 +30,16 @@ import {
 } from "./styles";
 
 const Card = (props: any) => {
-  const [ready, isReady] = useState(false);
-  const { payoutDetails, allowDonate: _allowDonate } = props;
-  const { potId } = useParams();
+  const { payoutDetails, allowDonate: _allowDonate, potId } = props;
 
-  // Start Modals provider
-  const Modals = useModals();
-  const { setDonationModalProps } = useDonationModal();
+  // const Modals = useModals();
 
   const projectId = props.project.registrant_id || props.projectId;
   const profile = Social.getr(`${projectId}/profile`) as any;
-
   const allowDonate = _allowDonate ?? true;
 
+  if (profile === null) return <CardSkeleton />;
+
   const MAX_DESCRIPTION_LENGTH = 80;
 
   const { name, description } = profile;
@@ -56,7 +51,7 @@ const Card = (props: any) => {
       ? DonateSDK.getDonationsForRecipient(projectId)
       : [];
 
-  const totalAmountNear = useMemo(() => {
+  const getTotalAmountNear = () => {
     if (payoutDetails) return payoutDetails.totalAmount;
     if (!donationsForProject) return "0";
     let totalDonationAmountNear = new Big(0);
@@ -66,7 +61,10 @@ const Card = (props: any) => {
       }
     }
     return totalDonationAmountNear.toString();
-  }, [donationsForProject, payoutDetails]);
+  };
+
+  const totalAmountNear = getTotalAmountNear();
+  // useMemo(getTotalAmountNear, [donationsForProject, payoutDetails]);
 
   const getImageSrc = (image: any) => {
     const defaultImageUrl = "https://ipfs.near.social/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci";
@@ -100,17 +98,9 @@ const Card = (props: any) => {
 
   const tags = getTagsFromSocialProfileData(profile);
 
-  useEffect(() => {
-    if (profile !== null && !ready) {
-      isReady(true);
-    }
-  }, [profile, donationsForProject, tags]);
-
-  if (!ready) return <CardSkeleton />;
-
   return (
     <>
-      <Modals />
+      {/* <Modals /> */}
       <RouteLink to={routesPath.PROJECT_DETAIL_TAB} params={{ projectId, ...(potId ? { potId } : {}) }}>
         <CardContainer>
           <HeaderContainer className="pt-0 position-relative">
@@ -185,25 +175,12 @@ const Card = (props: any) => {
                 <AmountDescriptor>{payoutDetails.donorCount === 1 ? "Donor" : "Donors"}</AmountDescriptor>
               </DonationsInfoItem>
             )}
-            {allowDonate && context.accountId && (
-              <Button
-                varient="tonal"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setDonationModalProps({
-                    projectId,
-                  });
-                }}
-                isDisabled={!context.accountId}
-              >
-                Donate
-              </Button>
-            )}
+            <ButtonDonation allowDonate={allowDonate} projectId={projectId} />
           </DonationsInfoContainer>
           {payoutDetails && (
             <MatchingSection>
               <MatchingTitle>Estimated matched amount</MatchingTitle>
-              <MatchingAmount>{yoctosToNear(payoutDetails.matchingAmount) || "- N"}</MatchingAmount>
+              <MatchingAmount>{yoctosToNear(payoutDetails.amount) || "- N"}</MatchingAmount>
             </MatchingSection>
           )}
         </CardContainer>

src/components/Card/styles.ts

@@ -111,30 +111,6 @@ export const DonationsInfoItem = styled.div`
   align-items: center;
 `;
 
-export const DonationButton = styled.button`
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 16px 24px;
-  background: #fef6ee;
-  overflow: hidden;
-  box-shadow: 0px -2.700000047683716px 0px #4a4a4a inset;
-  border-radius: 6px;
-  border: 1px solid #4a4a4a;
-  gap: 8px;
-  display: inline-flex;
-  text-align: center;
-  color: #2e2e2e;
-  font-size: 14px;
-  line-height: 16px;
-  font-weight: 600;
-
-  &:hover {
-    text-decoration: none;
-    cursor: pointer;
-  }
-`;
-
 export const Amount = styled.div`
   font-size: 17px;
   font-weight: 600;

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/PotCard/PotCard.tsx

@@ -18,11 +18,10 @@ type Props = {
 
 const PotCard = ({ potId }: Props) => {
   const potConfig: PotDetail = PotSDK.getConfig(potId);
-
   if (!potConfig)
     return (
       <Card style={{ justifyContent: "center", alignItems: "center" }}>
-        {potConfig == null ? (
+        {potConfig === null ? (
           <div className="spinner-border text-secondary" role="status" />
         ) : (
           <div>Pot {potId} not found.</div>
@@ -55,6 +54,7 @@ const PotCard = ({ potId }: Props) => {
 
   return (
     <Card
+      key={potId}
       href={hrefWithParams(`?tab=pot&potId=${potId}`)}
       data-testid={applicationOpen ? "active-pot" : "inactive-pot"}
     >

src/components/PotCard/styles.ts

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const Card = styled.a`
+export const Card = styled("Link")`
   display: flex;
   flex-direction: column;
   min-width: 320px;

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;
+`;