Donation UI: Direct NEAR donation (#64)

src/app/_components/Hero.tsx

@@ -3,13 +3,13 @@ import Link from "next/link";
 import { Button } from "@/common/ui/components";
 import useWallet from "@/modules/auth/hooks/useWallet";
 import useRegistration from "@/modules/core/hooks/useRegistration";
+import { DonationRandomButton } from "@/modules/donation";
 
 const Hero = () => {
   const wallet = useWallet();
   const accountId = wallet?.wallet?.accountId || "";
 
   const { registration, loading } = useRegistration(accountId);
-
   const isRegisteredProject = !!registration.id;
 
   return (
@@ -23,12 +23,7 @@ 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>
+          <DonationRandomButton />
 
           {!loading && (
             <Button

src/app/_layout/Nav.tsx

@@ -1,14 +1,13 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useState } from "react";
 
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
-import { walletApi } from "@/common/contracts";
 import useIsClient from "@/common/lib/useIsClient";
-import { Button } from "@/common/ui/components";
+import { SignInButton } from "@/modules/auth";
 import { useAuth } from "@/modules/auth/hooks/useAuth";
 import routesPath from "@/modules/core/routes";
 
@@ -37,26 +36,9 @@ const AuthButton = () => {
   const { isAuthenticated } = useAuth();
   const isClient = useIsClient();
 
-  const loginHandler = useCallback(() => {
-    walletApi.signInModal();
-  }, []);
-
   if (!isClient) return;
 
-  if (isAuthenticated) {
-    return <UserDropdown />;
-  }
-
-  return (
-    <Button
-      font="semibold"
-      variant="standard-filled"
-      onClick={loginHandler}
-      className="border-none bg-[#342823] shadow-none"
-    >
-      Sign In
-    </Button>
-  );
+  return isAuthenticated ? <UserDropdown /> : <SignInButton />;
 };
 
 const MobileMenuButton = ({ onClick }: { onClick: () => void }) => {

src/app/_store/models.ts

@@ -2,17 +2,20 @@ import { Models } from "@rematch/core";
 
 import { auth } from "@/modules/auth/state";
 import { core } from "@/modules/core/state";
+import { donationModel } from "@/modules/donation";
 import { navModel, profilesModel } from "@/modules/profile/models";
 
 export interface RootModel extends Models<RootModel> {
   auth: typeof auth;
+  donation: typeof donationModel;
   profiles: typeof profilesModel;
   nav: typeof navModel;
   core: typeof core;
 }
 
 export const models: RootModel = {
   auth,
+  donation: donationModel,
   profiles: profilesModel,
   nav: navModel,
   core,

src/app/tests.tsx

@@ -1,4 +1,4 @@
-import { screen } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 import { expect, test } from "vitest";
 
 import { renderWithStore } from "./_store/testEnv";
@@ -7,10 +7,15 @@ import Homepage from "./page";
 renderWithStore(<Homepage />);
 
 test("Homepage", async () => {
-  expect(
-    screen.getByText("Donate Randomly"),
-    "random donation button",
-  ).toBeDefined();
+  await waitFor(
+    () =>
+      expect(
+        screen.getByText("Donate Randomly"),
+        "random donation button",
+      ).toBeDefined(),
+
+    { timeout: 5000 },
+  );
 
   // await waitFor(
   //   () =>

src/common/api/pagoda/hooks.ts

@@ -1,7 +1,8 @@
-import { PAGODA_REQUEST_CONFIG } from "@/common/constants";
+import { NEAR_TOKEN_DENOM, PAGODA_REQUEST_CONFIG } from "@/common/constants";
+import { walletApi } from "@/common/contracts";
+import { ByAccountId, ByTokenId } from "@/common/types";
 
 import { swrHooks } from "./generated";
-import { ByAccountId } from "../potlock";
 
 export const useNearAccountBalance = ({ accountId }: ByAccountId) => {
   const queryResult = swrHooks.useGetAccountsAccountIdBalancesNEAR(
@@ -10,7 +11,7 @@ export const useNearAccountBalance = ({ accountId }: ByAccountId) => {
     PAGODA_REQUEST_CONFIG,
   );
 
-  return { ...queryResult, data: queryResult.data?.data };
+  return { ...queryResult, data: queryResult.data?.data.balance };
 };
 
 export const useFtAccountBalances = ({ accountId }: ByAccountId) => {
@@ -20,5 +21,43 @@ export const useFtAccountBalances = ({ accountId }: ByAccountId) => {
     PAGODA_REQUEST_CONFIG,
   );
 
-  return { ...queryResult, data: queryResult.data?.data };
+  return { ...queryResult, data: queryResult.data?.data.balances };
+};
+
+export type TokenMetadataInputs = ByTokenId & {
+  disabled?: boolean;
+};
+
+export const useTokenMetadata = ({
+  tokenId,
+  disabled = false,
+}: TokenMetadataInputs) => {
+  const nearQueryResult = swrHooks.useGetAccountsAccountIdBalancesNEAR(
+    walletApi.accountId ?? "unknown",
+    undefined,
+
+    {
+      ...PAGODA_REQUEST_CONFIG,
+      swr: { enabled: !disabled && tokenId === NEAR_TOKEN_DENOM },
+    },
+  );
+
+  const ftQueryResult = swrHooks.useGetNep141MetadataContractAccountId(
+    tokenId,
+    undefined,
+
+    {
+      ...PAGODA_REQUEST_CONFIG,
+      swr: { enabled: !disabled && tokenId !== NEAR_TOKEN_DENOM },
+    },
+  );
+
+  return {
+    ...(tokenId === NEAR_TOKEN_DENOM ? nearQueryResult : ftQueryResult),
+
+    data:
+      tokenId === NEAR_TOKEN_DENOM
+        ? nearQueryResult.data?.data.balance.metadata
+        : ftQueryResult.data?.data.metadata,
+  };
 };

src/common/api/potlock/hooks.ts

@@ -1,27 +1,51 @@
 import { POTLOCK_REQUEST_CONFIG } from "@/common/constants";
+import { ByAccountId, ByListId, ConditionalExecution } from "@/common/types";
 
 import { swrHooks } from "./generated";
 import {
-  ByAccountId,
   ByPotId,
   V1AccountsPotApplicationsRetrieveParams,
+  V1ListsRandomRegistrationRetrieveParams,
 } from "./types";
 
-export const useAccounts = () => {
-  const queryResult = swrHooks.useV1AccountsRetrieve(POTLOCK_REQUEST_CONFIG);
+/**
+ * https://dev.potlock.io/api/schema/swagger-ui/#/v1/v1_donate_contract_config_retrieve
+ */
+export const useDonationConfig = () => {
+  const queryResult = swrHooks.useV1DonateContractConfigRetrieve(
+    POTLOCK_REQUEST_CONFIG,
+  );
 
   return { ...queryResult, data: queryResult.data?.data };
 };
 
-export const useAccount = ({ accountId }: ByAccountId) => {
-  const queryResult = swrHooks.useV1AccountsRetrieve2(
-    accountId,
-    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 };
+};
+
+/**
+ * https://dev.potlock.io/api/schema/swagger-ui/#/v1/v1_accounts_retrieve_2
+ */
+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 };
 };
 
+/**
+ * https://dev.potlock.io/api/schema/swagger-ui/#/v1/v1_accounts_active_pots_retrieve
+ */
 export const useAccountActivePots = ({ accountId }: ByAccountId) => {
   const queryResult = swrHooks.useV1AccountsActivePotsRetrieve(
     accountId,
@@ -32,6 +56,9 @@ export const useAccountActivePots = ({ accountId }: ByAccountId) => {
   return { ...queryResult, data: queryResult.data?.data };
 };
 
+/**
+ * https://dev.potlock.io/api/schema/swagger-ui/#/v1/v1_accounts_pot_applications_retrieve
+ */
 export const useAccountPotApplications = ({
   accountId,
   status,
@@ -45,12 +72,18 @@ export const useAccountPotApplications = ({
   return { ...queryResult, data: queryResult.data?.data };
 };
 
+/**
+ * https://dev.potlock.io/api/schema/swagger-ui/#/v1/v1_pots_retrieve
+ */
 export const usePots = () => {
   const queryResult = swrHooks.useV1PotsRetrieve(POTLOCK_REQUEST_CONFIG);
 
   return { ...queryResult, data: queryResult.data?.data };
 };
 
+/**
+ * https://dev.potlock.io/api/schema/swagger-ui/#/v1/v1_accounts_donations_received_retrieve
+ */
 export const useAccountDonationsReceived = ({ accountId }: ByAccountId) => {
   const queryResult = swrHooks.useV1AccountsDonationsReceivedRetrieve(
     accountId,
@@ -60,10 +93,36 @@ export const useAccountDonationsReceived = ({ accountId }: ByAccountId) => {
   return { ...queryResult, data: queryResult.data?.data };
 };
 
-export const usePot = ({ potId }: ByPotId) => {
-  const queryResult = swrHooks.useV1PotsRetrieve2(
-    potId,
-    POTLOCK_REQUEST_CONFIG,
+/**
+ * https://dev.potlock.io/api/schema/swagger-ui/#/v1/v1_pots_retrieve_2
+ */
+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 };
+};
+
+/**
+ * https://dev.potlock.io/api/schema/swagger-ui/#/v1/v1_lists_random_registration_retrieve
+ *
+ * Note: automatic refresh is disabled for optimization.
+ *  Call `mutate()` for manual refresh.
+ */
+export const useRandomListRegistration = ({
+  listId,
+  status,
+}: ByListId & V1ListsRandomRegistrationRetrieveParams) => {
+  const queryResult = swrHooks.useV1ListsRandomRegistrationRetrieve(
+    listId,
+    { status },
+
+    {
+      ...POTLOCK_REQUEST_CONFIG,
+      swr: { revalidateIfStale: false, revalidateOnFocus: false },
+    },
   );
 
   return { ...queryResult, data: queryResult.data?.data };

src/common/api/potlock/types.ts

@@ -1,13 +1,7 @@
-import { Account, Pot } from "./generated/client";
+import { Pot } from "./generated/client";
 
 export * from "./generated/client";
 
-export type AccountId = Account["id"];
-
-export interface ByAccountId {
-  accountId: AccountId;
-}
-
 export type PotId = Pot["id"];
 
 export interface ByPotId {

src/common/assets/svgs/near-icon.tsx

@@ -1,7 +1,7 @@
-const NearIcon = (props: any) => (
+const NearIcon = ({ width = 16, height = 16, ...props }: any) => (
   <svg
     {...props}
-    style={{ width: 16 }}
+    style={{ width, height }}
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

src/common/assets/svgs/twitter.tsx

@@ -1,10 +1,19 @@
 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"
+    width="19"
+    height="18"
+    viewBox="0 0 19 18"
+    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"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.25 15.4041L10.9706 7.70919L10.9797 7.7164L15.7398 2.20117H14.1491L10.2713 6.69017L7.19196 2.20117H3.02012L7.9489 9.38538L7.94831 9.38477L2.75 15.4041H4.34071L8.65183 10.4098L12.0782 15.4041H16.25ZM6.56169 3.40143L13.969 14.2038H12.7084L5.29515 3.40143H6.56169Z"
+      fill="#DBDBDB"
     />
   </Icon>
 );

src/common/contracts/potlock/donate.ts

@@ -1,4 +1,4 @@
-import { MemoryCache } from "@wpdas/naxios";
+import { ChangeMethodArgs, MemoryCache } from "@wpdas/naxios";
 
 import { POTLOCK_DONATE_CONTRACT_ID } from "@/common/constants";
 
@@ -53,9 +53,11 @@ export const getDonationsForDonor = (args: { donor_id: string }) =>
 
 export const donateNearDirectly = (
   args: DirectDonationArgs,
-  depositAmountFloat: number,
+  depositAmountYocto: string,
+  callbackUrl?: ChangeMethodArgs<DirectDonation>["callbackUrl"],
 ) =>
   contractApi.call<typeof args, DirectDonation>("donate", {
     args,
-    deposit: depositAmountFloat.toString(),
+    deposit: depositAmountYocto,
+    callbackUrl,
   });