From 10430e41ebc3eeb382dca72d87434aa371d99551 Mon Sep 17 00:00:00 2001 From: M-RB3 <rabea9220@gmail.com> Date: Fri, 24 May 2024 01:45:46 +0400 Subject: [PATCH] make card stateless --- src/components/Card/ButtonDonation.tsx | 36 +++++++++++++++++ src/components/Card/Card.tsx | 40 +++++-------------- src/components/Card/styles.ts | 26 +----------- .../ModalDonation/AmountInput/AmountInput.tsx | 2 +- .../ConfirmDirect/ConfirmDirect.tsx | 2 +- .../ModalDonation/ConfirmPot/ConfirmPot.tsx | 2 +- src/modals/ModalDonation/FormPot/FormPot.tsx | 2 +- src/{utils => modules}/nearToUsd.ts | 0 .../SuccessfullRegister.tsx | 2 +- .../Donor/NavPages/Donations/Donations.tsx | 2 +- .../DonorsLeaderboard/DonorsLeaderboard.tsx | 2 +- src/pages/Pot/NavPages/Projects/Projects.tsx | 2 +- src/pages/Pot/components/Header/Header.tsx | 2 +- .../PoolAllocationTable.tsx | 2 +- .../PoolAllocationTable/Table/Table.tsx | 2 +- .../SponsorsTable/SponsorsTable.tsx | 2 +- .../PotlockFunding/PotlockFunding.tsx | 2 +- src/utils/nearToUsdWithFallback.ts | 2 +- src/utils/yoctosToUsd.ts | 4 +- src/utils/yoctosToUsdWithFallback.ts | 2 +- 20 files changed, 65 insertions(+), 71 deletions(-) create mode 100644 src/components/Card/ButtonDonation.tsx rename src/{utils => modules}/nearToUsd.ts (100%) diff --git a/src/components/Card/ButtonDonation.tsx b/src/components/Card/ButtonDonation.tsx new file mode 100644 index 00000000..aae5ab5d --- /dev/null +++ b/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; diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index a853df4a..99d990a0 100644 --- a/src/components/Card/Card.tsx +++ b/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> diff --git a/src/components/Card/styles.ts b/src/components/Card/styles.ts index 3cd0fb1c..3d90e69a 100644 --- a/src/components/Card/styles.ts +++ b/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; diff --git a/src/modals/ModalDonation/AmountInput/AmountInput.tsx b/src/modals/ModalDonation/AmountInput/AmountInput.tsx index a49add35..2f966e6a 100644 --- a/src/modals/ModalDonation/AmountInput/AmountInput.tsx +++ b/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) => { diff --git a/src/modals/ModalDonation/ConfirmDirect/ConfirmDirect.tsx b/src/modals/ModalDonation/ConfirmDirect/ConfirmDirect.tsx index af4227eb..13ce6fdc 100644 --- a/src/modals/ModalDonation/ConfirmDirect/ConfirmDirect.tsx +++ b/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 = ({ diff --git a/src/modals/ModalDonation/ConfirmPot/ConfirmPot.tsx b/src/modals/ModalDonation/ConfirmPot/ConfirmPot.tsx index b666aac5..71db8b52 100644 --- a/src/modals/ModalDonation/ConfirmPot/ConfirmPot.tsx +++ b/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, diff --git a/src/modals/ModalDonation/FormPot/FormPot.tsx b/src/modals/ModalDonation/FormPot/FormPot.tsx index 8efeafdd..b418c4d5 100644 --- a/src/modals/ModalDonation/FormPot/FormPot.tsx +++ b/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"; diff --git a/src/utils/nearToUsd.ts b/src/modules/nearToUsd.ts similarity index 100% rename from src/utils/nearToUsd.ts rename to src/modules/nearToUsd.ts diff --git a/src/pages/CreateProject/components/SuccessfullRegister/SuccessfullRegister.tsx b/src/pages/CreateProject/components/SuccessfullRegister/SuccessfullRegister.tsx index ac521447..fad04a89 100644 --- a/src/pages/CreateProject/components/SuccessfullRegister/SuccessfullRegister.tsx +++ b/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 diff --git a/src/pages/Donor/NavPages/Donations/Donations.tsx b/src/pages/Donor/NavPages/Donations/Donations.tsx index de244dcf..cd853dca 100644 --- a/src/pages/Donor/NavPages/Donations/Donations.tsx +++ b/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"; diff --git a/src/pages/Leaderboard/components/DonorsLeaderboard/DonorsLeaderboard.tsx b/src/pages/Leaderboard/components/DonorsLeaderboard/DonorsLeaderboard.tsx index 1c39511b..b37d83c9 100644 --- a/src/pages/Leaderboard/components/DonorsLeaderboard/DonorsLeaderboard.tsx +++ b/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 }; diff --git a/src/pages/Pot/NavPages/Projects/Projects.tsx b/src/pages/Pot/NavPages/Projects/Projects.tsx index e6e40a84..29b482bc 100644 --- a/src/pages/Pot/NavPages/Projects/Projects.tsx +++ b/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; diff --git a/src/pages/Pot/components/Header/Header.tsx b/src/pages/Pot/components/Header/Header.tsx index 4d689d9c..8a026c94 100644 --- a/src/pages/Pot/components/Header/Header.tsx +++ b/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"; diff --git a/src/pages/Pot/components/PoolAllocationTable/PoolAllocationTable.tsx b/src/pages/Pot/components/PoolAllocationTable/PoolAllocationTable.tsx index 5571cb08..de24d123 100644 --- a/src/pages/Pot/components/PoolAllocationTable/PoolAllocationTable.tsx +++ b/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"; diff --git a/src/pages/Pot/components/PoolAllocationTable/Table/Table.tsx b/src/pages/Pot/components/PoolAllocationTable/Table/Table.tsx index 8b7688e0..baa78cb6 100644 --- a/src/pages/Pot/components/PoolAllocationTable/Table/Table.tsx +++ b/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"; diff --git a/src/pages/Pot/components/SponsorsTable/SponsorsTable.tsx b/src/pages/Pot/components/SponsorsTable/SponsorsTable.tsx index 84701ecb..02d4ca6e 100644 --- a/src/pages/Pot/components/SponsorsTable/SponsorsTable.tsx +++ b/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 }) => { diff --git a/src/pages/Project/components/PotlockFunding/PotlockFunding.tsx b/src/pages/Project/components/PotlockFunding/PotlockFunding.tsx index cdc54d85..4d0d10b7 100644 --- a/src/pages/Project/components/PotlockFunding/PotlockFunding.tsx +++ b/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, diff --git a/src/utils/nearToUsdWithFallback.ts b/src/utils/nearToUsdWithFallback.ts index 2cc3d59c..507f560a 100644 --- a/src/utils/nearToUsdWithFallback.ts +++ b/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 diff --git a/src/utils/yoctosToUsd.ts b/src/utils/yoctosToUsd.ts index ddc2b687..8ccf447d 100644 --- a/src/utils/yoctosToUsd.ts +++ b/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; diff --git a/src/utils/yoctosToUsdWithFallback.ts b/src/utils/yoctosToUsdWithFallback.ts index 0987883b..2ee39adc 100644 --- a/src/utils/yoctosToUsdWithFallback.ts +++ b/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