make card stateless

src/components/Card/ButtonDonation.tsx

@@ -0,0 +1,36 @@
+import { context, useEffect } from "alem";
+import { useDonationModal } from "@app/hooks/useDonationModal";
+import useModals from "@app/hooks/useModals";
+import Button from "../Button";
+
+const ButtonDonation = ({ allowDonate, projectId }: { allowDonate: boolean; projectId: string }) => {
+  const Modals = useModals();
+  const { setDonationModalProps } = useDonationModal();
+  useEffect(() => {}, []); // make the component statefull so it does not break
+  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,8 +1,6 @@
-import { Big, RouteLink, Social, context, useMemo, useParams } from "alem";
+import { Big, RouteLink, Social, useEffect } 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";
@@ -12,6 +10,7 @@ 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 +31,10 @@ import {
 } from "./styles";
 
 const Card = (props: any) => {
-  const { potId } = useParams();
-
-  const { payoutDetails, allowDonate: _allowDonate } = props;
-
-  // Start Modals provider
-  const Modals = useModals();
-  const { setDonationModalProps } = useDonationModal();
+  const { payoutDetails, allowDonate: _allowDonate, potId } = props;
 
   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 +60,12 @@ const Card = (props: any) => {
     return totalDonationAmountNear.toString();
   };
 
-  const totalAmountNear = useMemo(getTotalAmountNear, [donationsForProject, payoutDetails]);
+  const totalAmountNear = getTotalAmountNear();
+  // useMemo(getTotalAmountNear, [donationsForProject, payoutDetails]);
+  // console.log("totalAmountNear", totalAmountNear);
+  // console.log("profile", profile);
+
+  if (profile === null || totalAmountNear === null) return <CardSkeleton />;
 
   const getImageSrc = (image: any) => {
     const defaultImageUrl = "https://ipfs.near.social/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci";
@@ -102,11 +99,9 @@ const Card = (props: any) => {
 
   const tags = getTagsFromSocialProfileData(profile);
 
-  if (profile === null && totalAmountNear === null) return <CardSkeleton />;
-
   return (
     <>
-      <Modals />
+      {/* <Modals /> */}
       <RouteLink to={routesPath.PROJECT_DETAIL_TAB} params={{ projectId, ...(potId ? { potId } : {}) }}>
         <CardContainer>
           <HeaderContainer className="pt-0 position-relative">
@@ -181,20 +176,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/NavPages/Projects/Projects.tsx

@@ -72,7 +72,7 @@ const Projects = () => {
     }
   }, [potDetail, flaggedAddresses, donations]);
 
-  if (projects === null || potDetail === null) return <Loading />;
+  if (projects === null || potDetail === null || projects === null) return <Loading />;
 
   const { public_round_start_ms, public_round_end_ms } = potDetail;
 

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/utils/nearToUsdWithFallback.ts

@@ -1,5 +1,5 @@
+import nearToUsd from "../modules/nearToUsd";
 import formatWithCommas from "./formatWithCommas";
-import nearToUsd from "./nearToUsd";
 
 const nearToUsdWithFallback = (amountNear: number, abbreviate?: boolean) => {
   return nearToUsd

src/utils/yoctosToUsd.ts

@@ -1,7 +1,7 @@
 import { Big, asyncFetch, useCache } from "alem";
 import formatWithCommas from "./formatWithCommas";
 
-const nearToUsd = useCache(
+const nearUsd = useCache(
   () =>
     asyncFetch("https://api.coingecko.com/api/v3/simple/price?ids=near&vs_currencies=usd").then((res) => {
       if (res.ok) {
@@ -12,7 +12,7 @@ const nearToUsd = useCache(
 );
 
 const yoctosToUsd = (amount: number | string) => {
-  return nearToUsd ? "~$" + formatWithCommas(new Big(amount).mul(nearToUsd).div(1e24).toFixed(2)) : "0";
+  return nearUsd ? "~$" + formatWithCommas(new Big(amount).mul(nearUsd).div(1e24).toFixed(2)) : "0";
 };
 
 export default yoctosToUsd;

src/utils/yoctosToUsdWithFallback.ts

@@ -1,6 +1,6 @@
 import { Big } from "alem";
+import nearToUsd from "../modules/nearToUsd";
 import formatWithCommas from "./formatWithCommas";
-import nearToUsd from "./nearToUsd";
 
 const yoctosToUsdWithFallback = (amountYoctos: string, abbreviate?: boolean) => {
   return nearToUsd