Merge pull request #131 from PotLock/feat/update-card

Feat/update card

alem.config.json

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

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, useMemo, useParams } 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,17 +30,12 @@ import {
 } from "./styles";
 
 const Card = (props: any) => {
-  const { potId } = useParams();
+  const { payoutDetails, allowDonate: _allowDonate, potId } = props;
 
-  const { payoutDetails, allowDonate: _allowDonate } = 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;
 
   const MAX_DESCRIPTION_LENGTH = 80;
@@ -68,7 +61,8 @@ const Card = (props: any) => {
     return totalDonationAmountNear.toString();
   };
 
-  const totalAmountNear = useMemo(getTotalAmountNear, [donationsForProject, payoutDetails]);
+  const totalAmountNear = getTotalAmountNear();
+  // useMemo(getTotalAmountNear, [donationsForProject, payoutDetails]);
 
   const getImageSrc = (image: any) => {
     const defaultImageUrl = "https://ipfs.near.social/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci";
@@ -106,7 +100,7 @@ const Card = (props: any) => {
 
   return (
     <>
-      <Modals />
+      {/* <Modals /> */}
       <RouteLink to={routesPath.PROJECT_DETAIL_TAB} params={{ projectId, ...(potId ? { potId } : {}) }}>
         <CardContainer>
           <HeaderContainer className="pt-0 position-relative">
@@ -181,20 +175,7 @@ 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>

src/components/Card/styles.ts

@@ -16,7 +16,7 @@ export const CardContainer = styled.div`
   margin-right: auto;
   transition: all 300ms;
   &:hover {
-    transform: translateY(-1rem);
+    /* transform: translateY(-1rem); */
   }
 `;
 
@@ -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/modals/ModalDonation/AmountInput/AmountInput.tsx

@@ -1,6 +1,6 @@
 import NearIcon from "@app/assets/svgs/near-icon";
 import Select from "@app/components/Inputs/Select/Select";
-import nearToUsd from "@app/utils/nearToUsd";
+import nearToUsd from "@app/modules/nearToUsd";
 import { Container, DropdownWrapper, PotDenomination } from "./styles";
 
 const AmountInput = (props: any) => {

src/modals/ModalDonation/ConfirmDirect/ConfirmDirect.tsx

@@ -8,8 +8,8 @@ import CheckBox from "@app/components/Inputs/Checkbox/Checkbox";
 import TextArea from "@app/components/Inputs/TextArea/TextArea";
 import ProfileImage from "@app/components/mob.near/ProfileImage";
 import constants from "@app/constants";
+import nearToUsd from "@app/modules/nearToUsd";
 import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
 import { Amout, ButtonWrapper, Container, FeesRemoval, Label, NoteWrapper } from "./styles";
 
 const ConfirmDirect = ({

src/modals/ModalDonation/ConfirmPot/ConfirmPot.tsx

@@ -5,9 +5,9 @@ import Button from "@app/components/Button";
 import BreakdownSummary from "@app/components/Cart/BreakdownSummary/BreakdownSummary";
 import CheckBox from "@app/components/Inputs/Checkbox/Checkbox";
 import ProfileImage from "@app/components/mob.near/ProfileImage";
+import nearToUsd from "@app/modules/nearToUsd";
 import _address from "@app/utils/_address";
 import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
 import {
   Amout,
   ButtonWrapper,

src/modals/ModalDonation/FormPot/FormPot.tsx

@@ -2,9 +2,9 @@ import { Near, Social, context } from "alem";
 import Button from "@app/components/Button";
 import ProfileImage from "@app/components/mob.near/ProfileImage";
 import constants from "@app/constants";
+import nearToUsd from "@app/modules/nearToUsd";
 import _address from "@app/utils/_address";
 import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
 import AmountInput from "../AmountInput/AmountInput";
 import Alert from "../Banners/Alert";
 import VerifyInfo from "../Banners/VerifyInfo";

src/pages/CreateProject/components/SuccessfullRegister/SuccessfullRegister.tsx

@@ -11,7 +11,7 @@ const SuccessfullRegister = ({ registeredProject }: { registeredProject: any })
         <Button
           {...{
             isDisabled: false,
-            href: hrefWithParams(`?tab=project&projectId=${registeredProject?.id || context.accountId}`),
+            href: hrefWithParams(`?tab=project&projectId=${registeredProject?.registrant_id || context.accountId}`),
           }}
         >
           View your project

src/pages/Donor/NavPages/Donations/Donations.tsx

@@ -9,11 +9,11 @@ import Dropdown from "@app/components/Inputs/Dropdown/Dropdown";
 import Pagination from "@app/components/Pagination/Pagination";
 import ProfileImage from "@app/components/mob.near/ProfileImage";
 import constants from "@app/constants";
+import nearToUsd from "@app/modules/nearToUsd";
 import { PotDetail, Pot } from "@app/types";
 import _address from "@app/utils/_address";
 import getTimePassed from "@app/utils/getTimePassed";
 import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
 import { Container, DropdownLabelWrapper, FundingSrc, ImgIcon, Funding, SearchBar, Sort, Stats } from "./styles";
 import { getPotDonations, filterDonations, searchDonations, getName, addTrailingZeros } from "./utils";
 

src/pages/Leaderboard/components/DonorsLeaderboard/DonorsLeaderboard.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useParams, useState } from "alem";
 import Pagination from "@app/components/Pagination/Pagination";
 import ProfileImage from "@app/components/mob.near/ProfileImage";
+import nearToUsd from "@app/modules/nearToUsd";
 import _address from "@app/utils/_address";
 import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
 import { Container, NoResult, TrRow } from "./styles";
 
 type Props = { sponsors: any; sortedDonations: any; filter: string; currentTab: string };

src/pages/Pot/Pot.tsx

@@ -1,5 +1,6 @@
 import { Big, useParams, useCache, useMemo } from "alem";
 import PotSDK from "@app/SDK/pot";
+import useModals from "@app/hooks/useModals";
 import { PotDetail } from "@app/types";
 import Tabs from "../Profile/components/Tabs";
 import Header from "./components/Header/Header";
@@ -50,8 +51,11 @@ const Pot = () => {
     return options.find((option: any) => option.id === nav).source;
   }, []);
 
+  const Modals = useModals();
+
   return (
     <Wrapper>
+      <Modals />
       <HeaderStatus />
       <Header />
 

src/pages/Pot/components/Header/Header.tsx

@@ -4,12 +4,12 @@ import Button from "@app/components/Button";
 import constants from "@app/constants";
 import { useDonationModal } from "@app/hooks/useDonationModal";
 import useModals from "@app/hooks/useModals";
+import nearToUsd from "@app/modules/nearToUsd";
 import CopyIcon from "@app/pages/Project/components/CopyIcon";
 import { getConfig, getDonations, getFlaggedAccounts, getPotProjects } from "@app/services/getPotData";
 import { PotDetail, PotDonation } from "@app/types";
 import calculatePayouts from "@app/utils/calculatePayouts";
 import getTransactionsFromHashes from "@app/utils/getTransactionsFromHashes";
-import nearToUsd from "@app/utils/nearToUsd";
 import yoctosToNear from "@app/utils/yoctosToNear";
 import yoctosToUsdWithFallback from "@app/utils/yoctosToUsdWithFallback";
 import ChallengeModal from "../ChallengeModal/ChallengeModal";

src/pages/Pot/components/PoolAllocationTable/PoolAllocationTable.tsx

@@ -1,12 +1,12 @@
 import { useState, useParams, Big, Social, useEffect, useMemo } from "alem";
 import Image from "@app/components/mob.near/Image";
 import constants from "@app/constants";
+import nearToUsd from "@app/modules/nearToUsd";
 import { getConfig, getDonations, getFlaggedAccounts, getPayout, getSponsorships } from "@app/services/getPotData";
 import { FlaggedAddress, Payout, PotDetail, PotDonation } from "@app/types";
 import _address from "@app/utils/_address";
 import formatWithCommas from "@app/utils/formatWithCommas";
 import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
 import nearToUsdWithFallback from "@app/utils/nearToUsdWithFallback";
 import yoctosToUsdWithFallback from "@app/utils/yoctosToUsdWithFallback";
 import TableSkeleton from "./Table/TableSkeleton";

src/pages/Pot/components/PoolAllocationTable/Table/Table.tsx

@@ -1,10 +1,10 @@
 import { Social, useState } from "alem";
 import Image from "@app/components/mob.near/Image";
 import constants from "@app/constants";
+import nearToUsd from "@app/modules/nearToUsd";
 import _address from "@app/utils/_address";
 import formatWithCommas from "@app/utils/formatWithCommas";
 import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
 import yoctosToUsdWithFallback from "@app/utils/yoctosToUsdWithFallback";
 import { Container, Row } from "./styles";
 

src/pages/Pot/components/SponsorsTable/SponsorsTable.tsx

@@ -2,9 +2,9 @@ import { OverlayTrigger, useEffect, useState, Tooltip, useParams } from "alem";
 import Pagination from "@app/components/Pagination/Pagination";
 import ProfileImage from "@app/components/mob.near/ProfileImage";
 import constants from "@app/constants";
+import nearToUsd from "@app/modules/nearToUsd";
 import _address from "@app/utils/_address";
 import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
 import { Container, NoResult, Percentage, TrRow } from "./styles";
 
 const SponsorsTable = ({ sponsors }: { sponsors: any }) => {

src/pages/Project/components/PotlockFunding/PotlockFunding.tsx

@@ -2,10 +2,10 @@ import { Big, Near, useEffect, useState } from "alem";
 import Dropdown from "@app/components/Inputs/Dropdown/Dropdown";
 import Pagination from "@app/components/Pagination/Pagination";
 import ProfileImage from "@app/components/mob.near/ProfileImage";
+import nearToUsd from "@app/modules/nearToUsd";
 import _address from "@app/utils/_address";
 import getTimePassed from "@app/utils/getTimePassed";
 import hrefWithParams from "@app/utils/hrefWithParams";
-import nearToUsd from "@app/utils/nearToUsd";
 import {
   Container,
   DropdownLabel,

src/pages/Projects/components/AllProjects/AllProjects.tsx

@@ -2,6 +2,7 @@ import { Social, createDebounce, useEffect, useState } from "alem";
 import DonateSDK from "@app/SDK/donate";
 import Card from "@app/components/Card/Card";
 import FilterDropdown from "@app/components/Inputs/FilterDropdown/FilterDropdown";
+import useModals from "@app/hooks/useModals";
 import getProjects from "@app/services/getProjects";
 import { Project } from "@app/types";
 import getTagsFromSocialProfileData from "@app/utils/getTagsFromSocialProfileData";
@@ -14,6 +15,7 @@ import tagsList from "./tagsList";
 
 const AllProjects = () => {
   const projectsData = getProjects();
+  const Modals = useModals();
 
   const [totalDonation, setTotalDonation] = useState(0);
   const [totalDonated, setTotalDonated] = useState("0");
@@ -121,6 +123,7 @@ const AllProjects = () => {
 
   return (
     <Container>
+      <Modals />
       <Header>
         <Title>
           All projects