wip

PotLock · Jun 24, 2024 · 6e0876c · 6e0876c
1 parent 33ffd76
commit 6e0876c
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 39 deletions.
diff --git a/src/common/api/potlock/hooks.ts b/src/common/api/potlock/hooks.ts
@@ -18,11 +18,11 @@ export const useAccounts = () => {
   return { ...queryResult, data: queryResult.data?.data };
 };
 
-export const useAccount = ({ accountId }: ByAccountId) => {
-  const queryResult = swrHooks.useV1AccountsRetrieve2(
-    accountId,
-    POTLOCK_REQUEST_CONFIG,
-  );
+export const useAccount = ({ accountId }: Partial<ByAccountId>) => {
+  const queryResult = swrHooks.useV1AccountsRetrieve2(accountId ?? "unknown", {
+    ...POTLOCK_REQUEST_CONFIG,
+    swr: { enabled: Boolean(accountId) },
+  });
 
   return { ...queryResult, data: queryResult.data?.data };
 };
@@ -52,11 +52,11 @@ export const useAccountDonationsReceived = ({ accountId }: ByAccountId) => {
   return { ...queryResult, data: queryResult.data?.data };
 };
 
-export const usePot = ({ potId }: ByPotId) => {
-  const queryResult = swrHooks.useV1PotsRetrieve2(
-    potId,
-    POTLOCK_REQUEST_CONFIG,
-  );
+export const usePot = ({ potId }: Partial<ByPotId>) => {
+  const queryResult = swrHooks.useV1PotsRetrieve2(potId ?? "unknown", {
+    ...POTLOCK_REQUEST_CONFIG,
+    swr: { enabled: Boolean(potId) },
+  });
 
   return { ...queryResult, data: queryResult.data?.data };
 };
diff --git a/src/common/assets/svgs/twitter.tsx b/src/common/assets/svgs/twitter.tsx
@@ -1,7 +1,12 @@
 import { Icon } from "./styles";
 
-const TwitterSvg = () => (
-  <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 17" fill="none">
+const TwitterSvg = (props: any) => (
+  <Icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 21 17"
+    fill="none"
+    {...props}
+  >
     <path
       d="M20.92 2C20.15 2.35 19.32 2.58 18.46 2.69C19.34 2.16 20.02 1.32 20.34 0.31C19.51 0.81 18.59 1.16 17.62 1.36C16.83 0.5 15.72 0 14.46 0C12.11 0 10.19 1.92 10.19 4.29C10.19 4.63 10.23 4.96 10.3 5.27C6.74 5.09 3.57 3.38 1.46 0.79C1.09 1.42 0.88 2.16 0.88 2.94C0.88 4.43 1.63 5.75 2.79 6.5C2.08 6.5 1.42 6.3 0.84 6V6.03C0.84 8.11 2.32 9.85 4.28 10.24C3.65073 10.4122 2.9901 10.4362 2.35 10.31C2.62161 11.1625 3.15354 11.9084 3.87102 12.4429C4.5885 12.9775 5.45545 13.2737 6.35 13.29C4.83363 14.4904 2.954 15.1393 1.02 15.13C0.68 15.13 0.34 15.11 0 15.07C1.9 16.29 4.16 17 6.58 17C14.46 17 18.79 10.46 18.79 4.79C18.79 4.6 18.79 4.42 18.78 4.23C19.62 3.63 20.34 2.87 20.92 2Z"
       fill="#7B7B7B"

diff --git a/src/common/contracts/potlock/interfaces/donate.interfaces.ts b/src/common/contracts/potlock/interfaces/donate.interfaces.ts
@@ -18,9 +18,9 @@ export interface DirectDonation {
   message: string;
   donated_at_ms: number;
   recipient_id: string;
-  protocol_fee: string;
-  referrer_id: null | string;
-  referrer_fee: null | string;
+  protocol_fee: number;
+  referrer_id?: null | string;
+  referrer_fee?: null | number;
   base_currency: string;
   amount?: string;
 }
@@ -29,5 +29,5 @@ export type DirectDonationArgs = {
   recipient_id: string;
   message?: string | null;
   referrer_id?: string | null;
-  bypass_protocol_fee?: boolean | null;
+  bypass_protocol_fee?: boolean;
 };
diff --git a/src/modules/donation/components/DonationFlow.tsx b/src/modules/donation/components/DonationFlow.tsx
@@ -54,7 +54,7 @@ export const DonationFlow: React.FC<DonationFlowProps> = ({
         return h(DonationConfirmation, { form });
 
       case "success":
-        return h(DonationSuccess, { result });
+        return h(DonationSuccess, { result, form });
 
       default:
         return (

diff --git a/src/modules/donation/components/DonationSuccess.tsx b/src/modules/donation/components/DonationSuccess.tsx
@@ -1,17 +1,46 @@
-import { Check, Copy, XIcon } from "lucide-react";
+import { Check, Copy } from "lucide-react";
 import Link from "next/link";
+import { UseFormReturn } from "react-hook-form";
 
+import { potlock } from "@/common/api/potlock";
+import TwitterSvg from "@/common/assets/svgs/twitter";
 import { Button, DialogDescription, Skeleton } from "@/common/ui/components";
+import { ModalErrorBody } from "@/modules/core";
 
 import { DonationBreakdown } from "./DonationBreakdown";
-import { DonationState } from "../models";
+import { useDonationFees } from "../hooks/fees";
+import { DonationInputs, DonationState } from "../models";
 
 export type DonationSuccessProps = {
   result?: DonationState["successResult"];
+  form: UseFormReturn<DonationInputs>;
 };
 
-export const DonationSuccess = ({ result }: DonationSuccessProps) => {
-  return (
+export const DonationSuccess = ({ result, form }: DonationSuccessProps) => {
+  const [potAccountId] = form.watch(["potAccountId"]);
+
+  const { data: account, error: accountError } = potlock.useAccount({
+    accountId: result?.recipient_id,
+  });
+
+  const isLoading = result === undefined || account === undefined;
+
+  // !TODO: override with values from result
+  const fees = useDonationFees({
+    amount: parseFloat(result?.amount ?? "0"),
+    referrerAccountId: result?.referrer_id ?? undefined,
+    potAccountId,
+    bypassProtocolFee: result?.protocol_fee === 0,
+    bypassChefFee: potAccountId !== undefined,
+  });
+
+  return accountError !== undefined ? (
+    <ModalErrorBody
+      heading="Donation"
+      title="Unable to load recipient data!"
+      message={accountError?.message}
+    />
+  ) : (
     <DialogDescription className="items-center gap-8 p-10">
       <div un-flex="~ col" un-gap="4" un-items="center">
         <div
@@ -28,17 +57,27 @@ export const DonationSuccess = ({ result }: DonationSuccessProps) => {
           <Check className="h-6 w-6 text-red-500" />
         </div>
 
-        <h2 className="prose" un-text="xl" un-font="600">
-          Donation Successful
-        </h2>
+        {isLoading ? (
+          <Skeleton className="w-46 h-7" />
+        ) : (
+          <h2 className="prose" un-text="xl" un-font="600">
+            Donation Successful
+          </h2>
+        )}
 
-        <Button variant="brand-filled" color="primary">
-          <span className="prose" un-font="500">
-            Share to
-          </span>
+        {isLoading ? (
+          <Skeleton className="w-41 h-4.5" />
+        ) : (
+          <Button asChild variant="brand-filled" color="primary" disabled>
+            <Link href="#">
+              <span className="prose" un-font="500">
+                Share to
+              </span>
 
-          <XIcon className="h-4.5 w-4.5" />
-        </Button>
+              <TwitterSvg className="h-4.5 w-4.5" />
+            </Link>
+          </Button>
+        )}
       </div>
 
       <div un-flex="~ col" un-gap="2" un-items="center">
@@ -63,16 +102,20 @@ export const DonationSuccess = ({ result }: DonationSuccessProps) => {
         </Link>
       </div>
 
-      {result ? (
-        <DonationBreakdown tokenId={result.ft_id} />
-      ) : (
+      {isLoading ? (
         <Skeleton className="h-28" />
+      ) : (
+        <DonationBreakdown tokenId={result.ft_id} {...{ fees }} />
       )}
 
-      <div un-flex="~" un-items="center" un-gap="2">
-        <span>{`Txn Hash : ${result?.id}`}</span>
-        <Copy className="h-4 w-4" />
-      </div>
+      {isLoading ? (
+        <Skeleton className="w-41 h-4.5" />
+      ) : (
+        <div un-flex="~" un-items="center" un-gap="2">
+          <span>{`Txn Hash : ${result.id}`}</span>
+          <Copy className="h-4 w-4" />
+        </div>
+      )}
     </DialogDescription>
   );
 };
diff --git a/src/modules/donation/hooks/fees.ts b/src/modules/donation/hooks/fees.ts
@@ -3,7 +3,14 @@ import { TOTAL_FEE_BASIS_POINTS } from "@/modules/core/constants";
 
 import { DonationInputs } from "../models";
 
-export type DonationFeeInputs = DonationInputs & {};
+export type DonationFeeInputs = Pick<
+  DonationInputs,
+  | "amount"
+  | "referrerAccountId"
+  | "potAccountId"
+  | "bypassProtocolFee"
+  | "bypassChefFee"
+> & {};
 
 export type DonationFees = {
   projectAllocationAmount: number;

diff --git a/src/modules/donation/models.ts b/src/modules/donation/models.ts
@@ -193,13 +193,22 @@ export const donationModel = createModel<RootModel>()({
       amount,
       allocationStrategy,
       potDistributionStrategy,
+      referrerAccountId,
+      bypassProtocolFee,
+      message,
       ...props
     }: DonationSubmissionInputs & DonationInputs): Promise<void> {
       if ("accountId" in props) {
         switch (allocationStrategy) {
           case DonationAllocationStrategyEnum.direct:
             return void donateNearDirectly(
-              { recipient_id: props.accountId },
+              {
+                recipient_id: props.accountId,
+                message,
+                referrer_id: referrerAccountId,
+                bypass_protocol_fee: bypassProtocolFee,
+              },
+
               amount,
             )
               .then((result) => {