wip

src/modules/donation/components/DonationBreakdown.tsx

@@ -1,6 +1,8 @@
 import { UseFormReturn } from "react-hook-form";
 
+import { potlock } from "@/common/api/potlock";
 import { Checkbox } from "@/common/ui/components";
+import { ProfileLink } from "@/modules/profile";
 
 import { useDonationFees } from "../hooks/fees";
 import { DonationInputs } from "../models";
@@ -13,8 +15,6 @@ export const DonationBreakdown: React.FC<DonationBreakdownProps> = ({
   form,
 }) => {
   const values = form.watch();
-  // !TODO: determine the source
-  const referrerId: undefined = undefined;
 
   const {
     projectAllocationAmount,
@@ -54,7 +54,7 @@ export const DonationBreakdown: React.FC<DonationBreakdownProps> = ({
       label: "Referral fees",
       amount: referrerFeeAmount,
       percentage: referrerFeePercent,
-      show: referrerId && referrerFeeAmount > 0,
+      show: values.referrerAccountId && referrerFeeAmount > 0,
     },
   ];
 
@@ -94,36 +94,33 @@ export const DonationBreakdown: React.FC<DonationBreakdownProps> = ({
       </div>
 
       <div className="flex flex-col gap-2">
-        <div className="flex items-center gap-2">
-          <Checkbox id="protocol-fees" />
-
-          <label htmlFor="protocol-fees" className="flex items-center gap-2">
-            <span>Remove 5% Protocol Fees</span>
-
-            <span className="flex items-center gap-1">
-              <span role="img" aria-label="icon">
-                🌐
-              </span>
-
-              <span>{protocolFeeRecipientAccountId}</span>
-            </span>
-          </label>
-        </div>
+        {protocolFeeRecipientAccountId && (
+          <div className="flex items-center gap-2">
+            <Checkbox id="protocol-fees" />
+
+            <label htmlFor="protocol-fees" className="flex items-center gap-2">
+              <span className="prose">{`Remove ${protocolFeePercent}% Protocol Fees`}</span>
+              <ProfileLink accountId={protocolFeeRecipientAccountId} />
+            </label>
+          </div>
+        )}
 
-        <div className="flex items-center gap-2">
-          <Checkbox id="chef-fees" />
+        {values.allocationStrategy === "pot" && (
+          <div className="flex items-center gap-2">
+            <Checkbox id="chef-fees" />
 
-          <label htmlFor="chef-fees" className="flex items-center gap-2">
-            <span>Remove 5% Chef Fees</span>
+            <label htmlFor="chef-fees" className="flex items-center gap-2">
+              <span>Remove 5% Chef Fees</span>
 
-            <span className="flex items-center gap-1">
-              <span role="img" aria-label="icon">
-                🌐
+              <span className="flex items-center gap-1">
+                <span role="img" aria-label="icon">
+                  🌐
+                </span>
+                <span>#build</span>
               </span>
-              <span>#build</span>
-            </span>
-          </label>
-        </div>
+            </label>
+          </div>
+        )}
       </div>
     </>
   );

src/modules/donation/components/DonationConfirmation.tsx

@@ -52,7 +52,7 @@ export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
   const totalAmountUsdDisplayValue =
     values.token === NEAR_TOKEN_DENOM ? totalNearAmountUsdDisplayValue : null;
 
-  console.table(values.token);
+  console.table(values);
 
   return (
     <>

src/modules/donation/components/DonationFlow.tsx

@@ -1,5 +1,7 @@
 import { createElement as h, useMemo } from "react";
 
+import { useSearchParams } from "next/navigation";
+
 import { dispatch } from "@/app/_store";
 import {
   Button,
@@ -27,7 +29,12 @@ export const DonationFlow: React.FC<DonationFlowProps> = ({
   currentStep,
   ...props
 }) => {
-  const { form, onSubmit } = useDonationForm(props);
+  const searchParams = useSearchParams();
+
+  const { form, onSubmit } = useDonationForm({
+    ...props,
+    referrerAccountId: searchParams.get("referrerId") ?? undefined,
+  });
 
   const content = useMemo(() => {
     switch (currentStep) {

src/modules/donation/hooks/fees.ts

@@ -1,6 +1,4 @@
-import { useRouter } from "next/router";
-
-import { Pot, potlock } from "@/common/api/potlock";
+import { potlock } from "@/common/api/potlock";
 import { TOTAL_FEE_BASIS_POINTS } from "@/modules/core/constants";
 
 import { DonationInputs } from "../models";
@@ -23,18 +21,13 @@ export const basisPointsToPercent = (basisPoints: number) => basisPoints / 100;
 
 export const useDonationFees = ({
   amount,
+  referrerAccountId,
   potAccountId,
   bypassProtocolFee,
   bypassChefFee,
 }: DonationFeeInputs): DonationFees => {
   const { data: potlockDonationConfig } = potlock.useDonationConfig();
 
-  const { query: routeQuery } = useRouter();
-
-  const referrerId = Array.isArray(routeQuery.referrerId)
-    ? routeQuery.referrerId.at(0)
-    : routeQuery.referrerId;
-
   const protocolFeeBasisPoints =
     potlockDonationConfig?.protocol_fee_basis_points ?? 0;
 
@@ -53,7 +46,7 @@ export const useDonationFees = ({
     TOTAL_FEE_BASIS_POINTS -
     (bypassProtocolFee ? 0 : protocolFeeBasisPoints) -
     (bypassChefFee ? 0 : chefFeeBasisPoints) -
-    (referrerId ? referralFeeBasisPoints : 0);
+    (referrerAccountId ? referralFeeBasisPoints : 0);
 
   return {
     projectAllocationAmount:

src/modules/donation/hooks/forms.ts

@@ -16,7 +16,14 @@ import {
   donationTokenSchema,
 } from "../models";
 
-export const useDonationForm = (params: DonationSubmissionInputs) => {
+export type DonationFormParams = DonationSubmissionInputs & {
+  referrerAccountId?: string;
+};
+
+export const useDonationForm = ({
+  referrerAccountId,
+  ...params
+}: DonationFormParams) => {
   const form = useForm<DonationInputs>({
     resolver: zodResolver(donationSchema),
 
@@ -29,6 +36,7 @@ export const useDonationForm = (params: DonationSubmissionInputs) => {
       token: donationTokenSchema.parse(undefined),
       amount: 0.1,
       recipientAccountId: "accountId" in params ? params.accountId : undefined,
+      referrerAccountId,
       potAccountId: "potId" in params ? params.potId : undefined,
 
       potDistributionStrategy:

src/modules/donation/index.ts

@@ -14,6 +14,7 @@ export const useDonation = (props: DonationParameters) => {
     openDonationModal: useCallback(
       (event: React.MouseEvent) => {
         event.preventDefault();
+        event.stopPropagation();
         modal.show(props);
       },
 

src/modules/donation/models.ts

@@ -87,6 +87,7 @@ export const donationSchema = object({
   ),
 
   recipientAccountId: string().optional().describe("Recipient account id."),
+  referrerAccountId: string().optional().describe("Referrer account id."),
   potAccountId: string().optional().describe("Pot account id."),
 
   potDonationDistribution: array(

src/modules/profile/components/ProfileLink.tsx

@@ -0,0 +1,37 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import { ByAccountId, potlock } from "@/common/api/potlock";
+import { cn } from "@/common/ui/utils";
+
+export type ProfileLinkProps = ByAccountId & { className?: string };
+
+export const ProfileLink: React.FC<ProfileLinkProps> = ({
+  accountId,
+  className,
+}) => {
+  const { data: accountData } = potlock.useAccount({ accountId });
+
+  const accountSocialData = accountData?.near_social_profile_data;
+
+  return (
+    <Link
+      href={`/user/${accountId}`}
+      target="_blank"
+      className={cn("flex items-center gap-1", className)}
+    >
+      {accountSocialData?.image?.url ? (
+        <Image
+          alt={`${accountSocialData.name}'s profile picture`}
+          src={accountSocialData.image?.url}
+          width={20}
+          height={20}
+        />
+      ) : (
+        <span className="prose text-5">🌐</span>
+      )}
+
+      <span className="prose">{accountSocialData?.name ?? accountId}</span>
+    </Link>
+  );
+};

src/modules/profile/index.ts

@@ -0,0 +1 @@
+export { ProfileLink } from "./components/ProfileLink";