From 974c2a06e60a7c6aac825c3f0b7c2d54c6f506be Mon Sep 17 00:00:00 2001
From: "Carina.Akaia.io" <cvo.akaia@gmail.com>
Date: Mon, 24 Jun 2024 21:04:53 +0400
Subject: [PATCH] wip

---
 src/app/_components/Hero.tsx                  | 28 ++++++--
 src/common/api/potlock/hooks.ts               | 12 +++-
 .../potlock/interfaces/donate.interfaces.ts   |  3 +-
 src/common/types.ts                           |  4 ++
 .../core/components/TotalTokenValue.tsx       | 64 +++++++++++++++++++
 src/modules/core/index.ts                     |  1 +
 .../components/DonationConfirmation.tsx       | 42 ++++--------
 .../donation/components/DonationSuccess.tsx   | 40 +++++++-----
 8 files changed, 135 insertions(+), 59 deletions(-)
 create mode 100644 src/modules/core/components/TotalTokenValue.tsx

diff --git a/src/app/_components/Hero.tsx b/src/app/_components/Hero.tsx
index 6bbe97e5..ee392e2d 100644
--- a/src/app/_components/Hero.tsx
+++ b/src/app/_components/Hero.tsx
@@ -1,17 +1,27 @@
 import Link from "next/link";
 
+import { potlock } from "@/common/api/potlock";
 import { Button } from "@/common/ui/components";
 import useWallet from "@/modules/auth/hooks/useWallet";
 import useRegistration from "@/modules/core/hooks/useRegistration";
+import { useDonation } from "@/modules/donation";
 
 const Hero = () => {
   const wallet = useWallet();
   const accountId = wallet?.wallet?.accountId || "";
 
   const { registration, loading } = useRegistration(accountId);
-
   const isRegisteredProject = !!registration.id;
 
+  const { isLoading: isAccountListLoading, data: accountList } =
+    potlock.useAccounts();
+
+  const randomProjectAccountId = "unknown";
+
+  const { openDonationModal: openRandomDonationModal } = useDonation({
+    accountId: randomProjectAccountId ?? "unknown",
+  });
+
   return (
     <div className="relative flex w-full flex-col justify-center overflow-hidden rounded-xl border border-solid border-[#f8d3b0] bg-hero bg-cover bg-no-repeat">
       <div className="relative z-[1] flex flex-col justify-center px-5  py-12 md:px-10 md:py-16">
@@ -23,12 +33,16 @@ const Hero = () => {
           <br className="hidden md:block" /> participate in funding rounds.
         </h1>
         <div className="mt-6 flex items-center gap-4 text-sm max-md:flex-col md:mt-10 md:gap-8">
-          <Button
-            className="w-full md:w-[180px]"
-            //   onClick={openDonateRandomlyModal}
-          >
-            Donate Randomly
-          </Button>
+          {isAccountListLoading
+            ? null
+            : randomProjectAccountId && (
+                <Button
+                  className="w-full md:w-[180px]"
+                  onClick={openRandomDonationModal}
+                >
+                  Donate Randomly
+                </Button>
+              )}
 
           {!loading && (
             <Button
diff --git a/src/common/api/potlock/hooks.ts b/src/common/api/potlock/hooks.ts
index c955c9e8..3d5af7ca 100644
--- a/src/common/api/potlock/hooks.ts
+++ b/src/common/api/potlock/hooks.ts
@@ -1,5 +1,5 @@
 import { POTLOCK_REQUEST_CONFIG } from "@/common/constants";
-import { ByAccountId } from "@/common/types";
+import { ByAccountId, ConditionalExecution } from "@/common/types";
 
 import { swrHooks } from "./generated";
 import { ByPotId } from "./types";
@@ -12,8 +12,14 @@ export const useDonationConfig = () => {
   return { ...queryResult, data: queryResult.data?.data };
 };
 
-export const useAccounts = () => {
-  const queryResult = swrHooks.useV1AccountsRetrieve(POTLOCK_REQUEST_CONFIG);
+/**
+ * https://dev.potlock.io/api/schema/swagger-ui/#/v1/v1_accounts_retrieve
+ */
+export const useAccounts = (params?: ConditionalExecution) => {
+  const queryResult = swrHooks.useV1AccountsRetrieve({
+    ...POTLOCK_REQUEST_CONFIG,
+    swr: { enabled: params?.enabled ?? true },
+  });
 
   return { ...queryResult, data: queryResult.data?.data };
 };
diff --git a/src/common/contracts/potlock/interfaces/donate.interfaces.ts b/src/common/contracts/potlock/interfaces/donate.interfaces.ts
index a9279bd1..d5d10c41 100644
--- a/src/common/contracts/potlock/interfaces/donate.interfaces.ts
+++ b/src/common/contracts/potlock/interfaces/donate.interfaces.ts
@@ -13,7 +13,7 @@ export interface Config {
 export interface DirectDonation {
   id: string;
   donor_id: string;
-  total_amount: string;
+  total_amount: number;
   ft_id: string;
   message: string;
   donated_at_ms: number;
@@ -22,7 +22,6 @@ export interface DirectDonation {
   referrer_id?: null | string;
   referrer_fee?: null | number;
   base_currency: string;
-  amount?: string;
 }
 
 export type DirectDonationArgs = {
diff --git a/src/common/types.ts b/src/common/types.ts
index ebda8bfe..b3956ceb 100644
--- a/src/common/types.ts
+++ b/src/common/types.ts
@@ -1,5 +1,9 @@
 import { Account } from "near-api-js";
 
+export interface ConditionalExecution {
+  enabled: boolean;
+}
+
 export type AccountId = Account["accountId"];
 
 export interface ByAccountId {
diff --git a/src/modules/core/components/TotalTokenValue.tsx b/src/modules/core/components/TotalTokenValue.tsx
new file mode 100644
index 00000000..4d6e2c09
--- /dev/null
+++ b/src/modules/core/components/TotalTokenValue.tsx
@@ -0,0 +1,64 @@
+import { pagoda } from "@/common/api/pagoda";
+import {
+  NEAR_DEFAULT_TOKEN_DECIMALS,
+  NEAR_TOKEN_DENOM,
+} from "@/common/constants";
+import { bigNumToFloat } from "@/common/lib";
+import { ByTokenId } from "@/common/types";
+import { Skeleton } from "@/common/ui/components";
+
+import { TokenIcon } from "./TokenIcon";
+import { useNearUsdDisplayValue } from "../hooks/price";
+
+export type TotalTokenValueProps = ByTokenId &
+  ({ amountFloat: number } | { amountBig: number });
+
+export const TotalTokenValue = ({
+  tokenId,
+  ...props
+}: TotalTokenValueProps) => {
+  const { isLoading: isTokenMetadataLoading, data: tokenMetadata } =
+    pagoda.useTokenMetadata({
+      tokenId,
+    });
+
+  const amount =
+    "amountFloat" in props
+      ? props.amountFloat
+      : bigNumToFloat(
+          props.amountBig.toString(),
+          tokenMetadata?.decimals ?? NEAR_DEFAULT_TOKEN_DECIMALS,
+        );
+
+  const totalNearAmountUsdDisplayValue = useNearUsdDisplayValue(amount);
+
+  const totalAmountUsdDisplayValue =
+    tokenId === NEAR_TOKEN_DENOM ? totalNearAmountUsdDisplayValue : null;
+
+  return (
+    <div un-flex="~" un-items="center" un-gap="2">
+      <TokenIcon {...{ tokenId }} />
+
+      {isTokenMetadataLoading ? (
+        <Skeleton className="" />
+      ) : (
+        <span
+          className="prose line-height-none"
+          un-mt="0.7"
+          un-text="xl"
+          un-font="600"
+        >{`${amount} ${tokenMetadata?.symbol ?? "⋯"}`}</span>
+      )}
+
+      {totalAmountUsdDisplayValue && (
+        <span
+          className="prose line-height-none"
+          un-mt="0.7"
+          un-text="gray-500 xl"
+        >
+          {totalAmountUsdDisplayValue}
+        </span>
+      )}
+    </div>
+  );
+};
diff --git a/src/modules/core/index.ts b/src/modules/core/index.ts
index 46985c8f..ee27bb8d 100644
--- a/src/modules/core/index.ts
+++ b/src/modules/core/index.ts
@@ -5,3 +5,4 @@ export * from "./components/AvailableTokenBalance";
 export * from "./components/ModalErrorBody";
 export * from "./components/RuntimeErrorAlert";
 export * from "./components/TokenIcon";
+export * from "./components/TotalTokenValue";
diff --git a/src/modules/donation/components/DonationConfirmation.tsx b/src/modules/donation/components/DonationConfirmation.tsx
index ae41917a..592e9504 100644
--- a/src/modules/donation/components/DonationConfirmation.tsx
+++ b/src/modules/donation/components/DonationConfirmation.tsx
@@ -18,7 +18,11 @@ import {
 } from "@/common/ui/components";
 import { CheckboxField } from "@/common/ui/form-fields";
 import { cn } from "@/common/ui/utils";
-import { TokenIcon, useNearUsdDisplayValue } from "@/modules/core";
+import {
+  TokenIcon,
+  TotalTokenValue,
+  useNearUsdDisplayValue,
+} from "@/modules/core";
 import { ProfileLink } from "@/modules/profile";
 
 import { DonationBreakdown } from "./DonationBreakdown";
@@ -52,15 +56,6 @@ export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
       0.0,
     ) ?? values.amount;
 
-  const { data: selectedTokenMetadata } = pagoda.useTokenMetadata({
-    tokenId: values.tokenId,
-  });
-
-  const totalNearAmountUsdDisplayValue = useNearUsdDisplayValue(totalAmount);
-
-  const totalAmountUsdDisplayValue =
-    values.tokenId === NEAR_TOKEN_DENOM ? totalNearAmountUsdDisplayValue : null;
-
   const { protocolFeeRecipientAccountId, protocolFeePercent, chefFeePercent } =
     fees;
 
@@ -78,26 +73,7 @@ export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
             Total amount
           </span>
 
-          <div un-flex="~" un-items="center" un-gap="2">
-            <TokenIcon tokenId={values.tokenId} />
-
-            <span
-              className="prose line-height-none"
-              un-mt="0.7"
-              un-text="xl"
-              un-font="600"
-            >{`${totalAmount} ${selectedTokenMetadata?.symbol ?? "⋯"}`}</span>
-
-            {totalAmountUsdDisplayValue && (
-              <span
-                className="prose line-height-none"
-                un-mt="0.7"
-                un-text="gray-500 xl"
-              >
-                {totalAmountUsdDisplayValue}
-              </span>
-            )}
-          </div>
+          <TotalTokenValue tokenId={values.tokenId} amountFloat={totalAmount} />
         </div>
 
         <DonationBreakdown tokenId={values.tokenId} {...{ fees }} />
@@ -153,7 +129,11 @@ export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
               const isSpecified = typeof field.value === "string";
 
               return (
-                <FormItem className="flex w-full flex-col items-start gap-3 border-t border-t-neutral-200 pt-5">
+                <FormItem
+                  className={
+                    "flex w-full flex-col items-start gap-3 border-t border-t-neutral-200 pt-5"
+                  }
+                >
                   <Button
                     onClick={isSpecified ? onDeleteNoteClick : onAddNoteClick}
                     variant="brand-plain"
diff --git a/src/modules/donation/components/DonationSuccess.tsx b/src/modules/donation/components/DonationSuccess.tsx
index 8ca5e992..a6e2c373 100644
--- a/src/modules/donation/components/DonationSuccess.tsx
+++ b/src/modules/donation/components/DonationSuccess.tsx
@@ -5,7 +5,7 @@ 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 { ModalErrorBody, TotalTokenValue } from "@/modules/core";
 
 import { DonationBreakdown } from "./DonationBreakdown";
 import { useDonationFees } from "../hooks/fees";
@@ -27,7 +27,7 @@ export const DonationSuccess = ({ result, form }: DonationSuccessProps) => {
 
   // !TODO: override with values from result
   const fees = useDonationFees({
-    amount: parseFloat(result?.amount ?? "0"),
+    amount: result?.total_amount ?? 0,
     referrerAccountId: result?.referrer_id ?? undefined,
     potAccountId,
     bypassProtocolFee: result?.protocol_fee === 0,
@@ -81,21 +81,29 @@ export const DonationSuccess = ({ result, form }: DonationSuccessProps) => {
       </div>
 
       <div un-flex="~ col" un-gap="2" un-items="center">
-        <div className="flex items-center justify-center gap-2">
-          <span className="text-2xl font-bold">50 NEAR</span>
-          <span className="text-gray-500">~$350</span>
-        </div>
+        {isLoading ? (
+          <Skeleton className="h-7 w-44" />
+        ) : (
+          <TotalTokenValue
+            tokenId={result.ft_id}
+            amountBig={result.total_amount}
+          />
+        )}
 
-        <p
-          className="prose"
-          un-flex="~"
-          un-gap="1"
-          un-m="0"
-          un-text="neutral-950"
-        >
-          <span>has been donated to</span>
-          <span un-font="600">{result?.recipient_id}</span>
-        </p>
+        {isLoading ? (
+          <Skeleton className="w-49 h-5" />
+        ) : (
+          <p
+            className="prose"
+            un-flex="~"
+            un-gap="1"
+            un-m="0"
+            un-text="neutral-950"
+          >
+            <span>has been donated to</span>
+            <span un-font="600">{result?.recipient_id}</span>
+          </p>
+        )}
 
         <Link href="#" className="text-red-600">
           View donation