Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@carina-akaia
carina-akaia committed Jun 19, 2024
1 parent 3a97423 commit 645c26d
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 96 deletions.
14 changes: 3 additions & 11 deletions src/modules/core/hooks/price.ts
View file
Original file line number Diff line number Diff line change
@@ -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],
);
};
1 change: 1 addition & 0 deletions src/modules/core/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export * from "./utils";
export * from "./hooks/price";
export * from "./components/RuntimeErrorAlert";
2 changes: 1 addition & 1 deletion src/modules/donation/components/DonationConfirmation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export type DonationConfirmationProps = {
export const DonationConfirmation = ({ form }: DonationConfirmationProps) => {
const values = form.watch();

console.log(values);
console.table(values);

return (
<>
Expand Down
156 changes: 81 additions & 75 deletions src/modules/donation/components/DonationProjectAllocation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 & {
Expand All @@ -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;
Expand Down Expand Up @@ -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 ? (
<span
Expand Down Expand Up @@ -169,76 +165,86 @@ export const DonationProjectAllocation: React.FC<
)}
/>

<TextField
label="Amount"
labelExtension={
availableBalance === null ? (
<span className="prose" un-text="sm destructive">
Unable to load available balance!
</span>
) : (
<div un-flex="~" un-gap="1">
<span
className="prose"
un-text="sm neutral-950"
un-font="600"
>
{balanceToString(availableBalance)}
</span>

<span className="prose" un-text="sm neutral-600">
available
</span>
</div>
)
}
fieldExtension={
<FormField
control={form.control}
name="tokenId"
render={({ field: fieldExtension }) => (
<Select
defaultValue={fieldExtension.value}
onValueChange={fieldExtension.onChange}
>
<SelectTrigger className="h-full w-min rounded-r-none shadow-none">
<SelectValue />
</SelectTrigger>

<SelectContent>
<SelectGroup>
<SelectLabel>Available tokens</SelectLabel>

<SelectItem value={NEAR_TOKEN_DENOM}>
{NEAR_TOKEN_DENOM.toUpperCase()}
</SelectItem>

{availableFtBalances?.map(
({
contract_account_id: contractId,
metadata: { symbol },
}) => (
<SelectItem key={contractId} value={contractId}>
{symbol}
<FormField
control={form.control}
name="amount"
render={({ field }) => (
<TextField
label="Amount"
{...field}
labelExtension={
availableBalance === null ? (
<span className="prose" un-text="sm destructive">
Unable to load available balance!
</span>
) : (
<div un-flex="~" un-gap="1">
<span
className="prose"
un-text="sm neutral-950"
un-font="600"
>
{balanceToString(availableBalance)}
</span>

<span className="prose" un-text="sm neutral-600">
available
</span>
</div>
)
}
fieldExtension={
<FormField
control={form.control}
name="tokenId"
render={({ field: fieldExtension }) => (
<Select
defaultValue={fieldExtension.value}
onValueChange={fieldExtension.onChange}
>
<SelectTrigger className="h-full w-min rounded-r-none shadow-none">
<SelectValue />
</SelectTrigger>

<SelectContent>
<SelectGroup>
<SelectLabel>Available tokens</SelectLabel>

<SelectItem value={NEAR_TOKEN_DENOM}>
{NEAR_TOKEN_DENOM.toUpperCase()}
</SelectItem>
),
)}
</SelectGroup>
</SelectContent>
</Select>
)}

{availableFtBalances?.map(
({
contract_account_id: contractId,
metadata: { symbol },
}) => (
<SelectItem
key={contractId}
value={contractId}
>
{symbol}
</SelectItem>
),
)}
</SelectGroup>
</SelectContent>
</Select>
)}
/>
}
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
}
)}
/>
</DialogDescription>
</>
Expand Down
3 changes: 1 addition & 2 deletions src/modules/donation/hooks/forms.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export const useDonationForm = (params: DonationSubmissionInputs) => {
resolver: zodResolver(donationSchema),

defaultValues: {
amount: 0.1,
tokenId: tokenIdSchema.parse(undefined),
allocationStrategy: DonationAllocationStrategyEnum.direct,
},
Expand All @@ -32,8 +33,6 @@ export const useDonationForm = (params: DonationSubmissionInputs) => {
[params],
);

console.table(form.getValues());

return {
isSenderHumanVerified,
form,
Expand Down
11 changes: 4 additions & 7 deletions src/modules/profile/components/DonationsInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -64,6 +65,7 @@ export const Container = styled.div`

const DonationsInfo = ({ accountId }: { accountId: string }) => {
const donationsInfo = useDonationsForProject(accountId);
const { openDonationModal } = useDonation({ accountId });

return (
<Container>
Expand All @@ -74,14 +76,9 @@ const DonationsInfo = ({ accountId }: { accountId: string }) => {
{donationsInfo.uniqueDonors === 1 ? "donor" : "donors"}
</div>
</div>

<div className="btn-wrapper">
<Button
onClick={() => {
console.log("TODO: Donate");
}}
>
Donate
</Button>
<Button onClick={openDonationModal}>Donate</Button>
<FollowButton accountId={accountId} />
</div>
</Container>
Expand Down

0 comments on commit 645c26d

Please sign in to comment.