From 645c26d0e81937f11674ad3c7d30f98da0fc0ba1 Mon Sep 17 00:00:00 2001 From: "Carina.Akaia.io" Date: Wed, 19 Jun 2024 09:54:23 +0400 Subject: [PATCH] wip --- src/modules/core/hooks/price.ts | 14 +- src/modules/core/index.ts | 1 + .../components/DonationConfirmation.tsx | 2 +- .../components/DonationProjectAllocation.tsx | 156 +++++++++--------- src/modules/donation/hooks/forms.ts | 3 +- .../profile/components/DonationsInfo.tsx | 11 +- 6 files changed, 91 insertions(+), 96 deletions(-) diff --git a/src/modules/core/hooks/price.ts b/src/modules/core/hooks/price.ts index f344d76c..6eff014f 100644 --- a/src/modules/core/hooks/price.ts +++ b/src/modules/core/hooks/price.ts @@ -1,25 +1,17 @@ import { useMemo } from "react"; import { coingecko } from "@/common/api/coingecko"; -import { NEAR_DEFAULT_TOKEN_DECIMALS } from "@/common/constants"; -import { bigNumToFloat } from "@/common/lib"; import formatWithCommas from "@/common/lib/formatWithCommas"; -export const useYoctoNearUsdDisplayValue = ( - amountYoctoNear: string, -): string => { +export const useNearUsdDisplayValue = (amountNearFloat: number): string => { const { data: oneNearUsdPrice } = coingecko.useOneNearUsdPrice(); return useMemo( () => `~$ ${formatWithCommas( - (oneNearUsdPrice - ? bigNumToFloat(amountYoctoNear, NEAR_DEFAULT_TOKEN_DECIMALS) * - oneNearUsdPrice - : 0.0 - ).toString(), + (oneNearUsdPrice ? amountNearFloat * oneNearUsdPrice : 0.0).toString(), )}`, - [amountYoctoNear, oneNearUsdPrice], + [amountNearFloat, oneNearUsdPrice], ); }; diff --git a/src/modules/core/index.ts b/src/modules/core/index.ts index ef542ee8..c7877d09 100644 --- a/src/modules/core/index.ts +++ b/src/modules/core/index.ts @@ -1,2 +1,3 @@ export * from "./utils"; +export * from "./hooks/price"; export * from "./components/RuntimeErrorAlert"; diff --git a/src/modules/donation/components/DonationConfirmation.tsx b/src/modules/donation/components/DonationConfirmation.tsx index 552f865b..399658d5 100644 --- a/src/modules/donation/components/DonationConfirmation.tsx +++ b/src/modules/donation/components/DonationConfirmation.tsx @@ -11,7 +11,7 @@ export type DonationConfirmationProps = { export const DonationConfirmation = ({ form }: DonationConfirmationProps) => { const values = form.watch(); - console.log(values); + console.table(values); return ( <> diff --git a/src/modules/donation/components/DonationProjectAllocation.tsx b/src/modules/donation/components/DonationProjectAllocation.tsx index 40039540..87c7f511 100644 --- a/src/modules/donation/components/DonationProjectAllocation.tsx +++ b/src/modules/donation/components/DonationProjectAllocation.tsx @@ -6,7 +6,6 @@ import { pagoda } from "@/common/api/pagoda"; import { ByAccountId, potlock } from "@/common/api/potlock"; import { NEAR_TOKEN_DENOM } from "@/common/constants"; import { walletApi } from "@/common/contracts"; -import { bigNumToFloat } from "@/common/lib"; import { DialogDescription, DialogHeader, @@ -30,15 +29,14 @@ import { RuntimeErrorAlert, balanceToFloat, balanceToString, + useNearUsdDisplayValue, } from "@/modules/core"; -import { useYoctoNearUsdDisplayValue } from "@/modules/core/hooks/price"; import { DONATION_MIN_NEAR_AMOUNT } from "../constants"; import { DonationAllocationStrategyEnum, DonationInputs, donationAllocationStrategies, - tokenIdSchema, } from "../models"; export type DonationProjectAllocationProps = ByAccountId & { @@ -48,7 +46,7 @@ export type DonationProjectAllocationProps = ByAccountId & { export const DonationProjectAllocation: React.FC< DonationProjectAllocationProps > = ({ accountId, form }) => { - const tokenId = form.watch("tokenId"); + const [amount, tokenId] = form.watch(["amount", "tokenId"]); const { data: activePots } = potlock.useAccountActivePots({ accountId }); const hasMatchingPots = (activePots?.length ?? 0) > 0; const isFtDonation = tokenId !== NEAR_TOKEN_DENOM; @@ -100,9 +98,7 @@ export const DonationProjectAllocation: React.FC< [availableBalance], ); - const availableNearBalanceUsdDisplayValue = useYoctoNearUsdDisplayValue( - availableNearBalance?.amount ?? "0", - ); + const nearAmountUsdDisplayValue = useNearUsdDisplayValue(amount ?? "0"); return isAccountLoading || isNearBalanceLoading || isFtBalanceLoading ? ( - - Unable to load available balance! - - ) : ( -
- - {balanceToString(availableBalance)} - - - - available - -
- ) - } - fieldExtension={ - ( - + + + + + + + Available tokens + + + {NEAR_TOKEN_DENOM.toUpperCase()} - ), - )} - - - - )} + + {availableFtBalances?.map( + ({ + contract_account_id: contractId, + metadata: { symbol }, + }) => ( + + {symbol} + + ), + )} + + + + )} + /> + } + type="number" + placeholder="0.00" + min={ + tokenId === NEAR_TOKEN_DENOM + ? DONATION_MIN_NEAR_AMOUNT + : 0.0 + } + max={availableBalanceFloat ?? undefined} + step={0.01} + appendix={isFtDonation ? null : nearAmountUsdDisplayValue} /> - } - type="number" - placeholder="0.00" - min={ - tokenId === NEAR_TOKEN_DENOM ? DONATION_MIN_NEAR_AMOUNT : 0.0 - } - max={availableBalanceFloat ?? undefined} - step={0.01} - appendix={ - isFtDonation ? null : availableNearBalanceUsdDisplayValue - } + )} /> diff --git a/src/modules/donation/hooks/forms.ts b/src/modules/donation/hooks/forms.ts index 91f54cc8..38e4aa88 100644 --- a/src/modules/donation/hooks/forms.ts +++ b/src/modules/donation/hooks/forms.ts @@ -20,6 +20,7 @@ export const useDonationForm = (params: DonationSubmissionInputs) => { resolver: zodResolver(donationSchema), defaultValues: { + amount: 0.1, tokenId: tokenIdSchema.parse(undefined), allocationStrategy: DonationAllocationStrategyEnum.direct, }, @@ -32,8 +33,6 @@ export const useDonationForm = (params: DonationSubmissionInputs) => { [params], ); - console.table(form.getValues()); - return { isSenderHumanVerified, form, diff --git a/src/modules/profile/components/DonationsInfo.tsx b/src/modules/profile/components/DonationsInfo.tsx index 6a1cd6bb..b078f9aa 100644 --- a/src/modules/profile/components/DonationsInfo.tsx +++ b/src/modules/profile/components/DonationsInfo.tsx @@ -4,6 +4,7 @@ import { styled } from "styled-components"; import { Button } from "@/common/ui/components/button"; import useDonationsForProject from "@/modules/core/hooks/useDonationsForProject"; +import { useDonation } from "@/modules/donation"; import FollowButton from "./FollowButton"; @@ -64,6 +65,7 @@ export const Container = styled.div` const DonationsInfo = ({ accountId }: { accountId: string }) => { const donationsInfo = useDonationsForProject(accountId); + const { openDonationModal } = useDonation({ accountId }); return ( @@ -74,14 +76,9 @@ const DonationsInfo = ({ accountId }: { accountId: string }) => { {donationsInfo.uniqueDonors === 1 ? "donor" : "donors"} +
- +