wip: Implement fee calculation

PotLock · Jun 20, 2024 · b9d6fde · b9d6fde
1 parent ff7de53
commit b9d6fde
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 75 deletions.
diff --git a/src/modules/donation/components/DonationBreakdown.tsx b/src/modules/donation/components/DonationBreakdown.tsx
@@ -13,8 +13,57 @@ export const DonationBreakdown: React.FC<DonationBreakdownProps> = ({
   form,
 }) => {
   const values = form.watch();
-
-  const fees = useDonationFees(values);
+  // !TODO: determine the source
+  const referrerId = undefined;
+
+  const {
+    projectAllocationAmount,
+    projectAllocationPercent,
+    protocolFeeAmount,
+    protocolFeePercent,
+    protocolFeeRecipientAccountId,
+    referrerFeeAmount,
+    referrerFeePercent,
+    chefFeeAmount,
+    chefFeePercent,
+  } = useDonationFees(values);
+
+  const totalFees = [
+    {
+      label: "Project allocation",
+      amount: projectAllocationAmount,
+      percentage: projectAllocationPercent,
+      show: true,
+    },
+
+    {
+      label: "Protocol fees",
+      amount: protocolFeeAmount,
+      percentage: protocolFeePercent,
+      show: !values.bypassProtocolFee,
+    },
+
+    {
+      label: "Chef fees",
+      amount: chefFeeAmount,
+      percentage: chefFeePercent,
+      show: !values.bypassChefFee && chefFeeAmount > 0,
+    },
+
+    {
+      label: "Referral fees",
+      amount: referrerFeeAmount,
+      percentage: referrerFeePercent,
+      show: referrerId,
+    },
+
+    {
+      label: "On-chain Storage fee",
+      amount: "<0.01",
+      percentage: "",
+      show: true,
+    },
+  ];
 
   return (
     <>
@@ -29,41 +78,16 @@ export const DonationBreakdown: React.FC<DonationBreakdownProps> = ({
           un-p="4"
           un-border="~ neutral-300 rounded-lg"
         >
-          <div className="flex justify-between gap-4">
-            <span>Project allocation (92.5%)</span>
-
-            <span className="flex items-center gap-1">
-              <span>46.25</span>
-              <span>N</span>
-            </span>
-          </div>
-
-          <div className="flex justify-between gap-4">
-            <span>Protocol fees (5%)</span>
-
-            <span className="flex items-center gap-1">
-              <span>2.5</span>
-              <span>N</span>
-            </span>
-          </div>
+          {totalFees.map(({ label, amount, percentage }) => (
+            <div un-flex="~" un-justify="between" un-gap="4" key={label}>
+              <span className="prose">{`${label} (${percentage}%)`}</span>
 
-          <div className="flex justify-between gap-4">
-            <span>Chef fees (5%)</span>
-
-            <span className="flex items-center gap-1">
-              <span>2.5</span>
-              <span>N</span>
-            </span>
-          </div>
-
-          <div className="flex justify-between gap-4">
-            <span>Referral fees (2.5%)</span>
-
-            <span className="flex items-center gap-1">
-              <span>1.25</span>
-              <span>N</span>
-            </span>
-          </div>
+              <span className="flex items-center gap-1">
+                <span className="prose">{amount}</span>
+                <span>{values.token}</span>
+              </span>
+            </div>
+          ))}
         </div>
       </div>
 
@@ -79,7 +103,7 @@ export const DonationBreakdown: React.FC<DonationBreakdownProps> = ({
                 🌐
               </span>
 
-              <span>impact.sputnik.dao.near</span>
+              <span>{protocolFeeRecipientAccountId}</span>
             </span>
           </label>
         </div>

diff --git a/src/modules/donation/components/DonationPotAllocation.tsx b/src/modules/donation/components/DonationPotAllocation.tsx
@@ -125,18 +125,11 @@ export const DonationPotAllocation: React.FC<DonationPotAllocationProps> = ({
                 </div>
               }
               fieldExtension={
-                <Select defaultValue={token}>
-                  <SelectTrigger className="h-full w-min rounded-r-none shadow-none">
-                    <SelectValue />
-                  </SelectTrigger>
-
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectLabel>Available tokens</SelectLabel>
-                      <SelectItem value="near">NEAR</SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
+                <div un-flex="~" un-items="center" un-justify="center">
+                  <span className="prose" un-text="lg" un-font="600">
+                    NEAR
+                  </span>
+                </div>
               }
               type="number"
               placeholder="0.00"

diff --git a/src/modules/donation/components/DonationProjectAllocation.tsx b/src/modules/donation/components/DonationProjectAllocation.tsx
@@ -46,7 +46,12 @@ export type DonationProjectAllocationProps = ByAccountId & {
 export const DonationProjectAllocation: React.FC<
   DonationProjectAllocationProps
 > = ({ accountId, form }) => {
-  const [amount, token] = form.watch(["amount", "token"]);
+  const [amount, token, allocationStrategy] = form.watch([
+    "amount",
+    "token",
+    "allocationStrategy",
+  ]);
+
   const { data: activePots } = potlock.useAccountActivePots({ accountId });
   const hasMatchingPots = (activePots?.length ?? 0) > 0;
   const isFtDonation = token !== NEAR_TOKEN_DENOM;
@@ -214,19 +219,20 @@ export const DonationProjectAllocation: React.FC<
                                 {NEAR_TOKEN_DENOM.toUpperCase()}
                               </SelectItem>
 
-                              {availableFtBalances?.map(
-                                ({
-                                  contract_account_id: contractId,
-                                  metadata: { symbol },
-                                }) => (
-                                  <SelectItem
-                                    key={contractId}
-                                    value={contractId}
-                                  >
-                                    {symbol}
-                                  </SelectItem>
-                                ),
-                              )}
+                              {allocationStrategy === "direct" &&
+                                availableFtBalances?.map(
+                                  ({
+                                    contract_account_id: contractId,
+                                    metadata: { symbol },
+                                  }) => (
+                                    <SelectItem
+                                      key={contractId}
+                                      value={contractId}
+                                    >
+                                      {symbol}
+                                    </SelectItem>
+                                  ),
+                                )}
                             </SelectGroup>
                           </SelectContent>
                         </Select>

diff --git a/src/modules/donation/hooks/fees.ts b/src/modules/donation/hooks/fees.ts
@@ -7,15 +7,15 @@ import { DonationInputs } from "../models";
 export type DonationFeeInputs = DonationInputs & {};
 
 export type DonationFees = {
-  projectAllocationPercent: number;
   projectAllocationAmount: number;
-  protocolFeePercent: number;
+  projectAllocationPercent: number;
   protocolFeeAmount: number;
+  protocolFeePercent: number;
   protocolFeeRecipientAccountId?: string;
-  referrerFeePercent: number;
   referrerFeeAmount: number;
-  chefFeePercent: number;
+  referrerFeePercent: number;
   chefFeeAmount: number;
+  chefFeePercent: number;
 };
 
 export const basisPointsToPercent = (basisPoints: number) => basisPoints / 100;
@@ -28,6 +28,9 @@ export const useDonationFees = ({
 }: DonationFeeInputs): DonationFees => {
   const { data: potlockDonationConfig }: { data?: Config } = {};
 
+  // !TODO: determine the source
+  const referrerId = undefined;
+
   const protocolFeeBasisPoints =
     potlockDonationConfig?.protocol_fee_basis_points ?? 0;
 
@@ -49,28 +52,28 @@ export const useDonationFees = ({
     (referrerId ? 0 : referralFeeBasisPoints);
 
   return {
-    projectAllocationPercent: basisPointsToPercent(
-      projectAllocationBasisPoints,
-    ),
-
     projectAllocationAmount:
       (amount * projectAllocationBasisPoints) / TOTAL_FEE_BASIS_POINTS,
 
-    protocolFeePercent: basisPointsToPercent(protocolFeeBasisPoints),
+    projectAllocationPercent: basisPointsToPercent(
+      projectAllocationBasisPoints,
+    ),
 
     protocolFeeAmount:
       (amount * protocolFeeBasisPoints) / TOTAL_FEE_BASIS_POINTS,
 
+    protocolFeePercent: basisPointsToPercent(protocolFeeBasisPoints),
+
     protocolFeeRecipientAccountId:
       potlockDonationConfig?.protocol_fee_recipient_account,
 
-    referrerFeePercent: basisPointsToPercent(referralFeeBasisPoints),
-
     referrerFeeAmount:
       (amount * referralFeeBasisPoints) / TOTAL_FEE_BASIS_POINTS,
 
-    chefFeePercent: basisPointsToPercent(chefFeeBasisPoints),
+    referrerFeePercent: basisPointsToPercent(referralFeeBasisPoints),
 
     chefFeeAmount: (amount * chefFeeBasisPoints) / TOTAL_FEE_BASIS_POINTS,
+
+    chefFeePercent: basisPointsToPercent(chefFeeBasisPoints),
   };
 };