Display chef on pot settings preview & Fix fee normalization

src/common/contracts/potlock/interfaces/pot-factory.interfaces.ts

@@ -21,7 +21,7 @@ export type CustomSybilCheck = {
   weight: SybilProviderWeight;
 };
 
-export interface Config {
+export interface PotFactoryConfig {
   owner: string;
   admins: string[];
   protocol_fee_basis_points: number;

src/common/contracts/potlock/pot-factory.ts

@@ -8,26 +8,18 @@ import { ByAccountId } from "@/common/types";
 import {
   PotArgs,
   PotDeploymentResult,
+  PotFactoryConfig,
 } from "./interfaces/pot-factory.interfaces";
 
 export type { PotDeploymentResult };
 
-/**
- * Contract API
- */
 export const contractApi = naxiosInstance.contractApi({
   contractId: POT_FACTORY_CONTRACT_ID,
   cache: new MemoryCache({ expirationTime: 5 }), // 10 seg
 });
 
-// READ METHODS
-
-type Config = {
-  require_whitelist: boolean;
-  whitelisted_deployers: string[];
-};
-
-export const get_config = () => contractApi.view<{}, Config>("get_config");
+export const get_config = () =>
+  contractApi.view<{}, PotFactoryConfig>("get_config");
 
 export const calculate_min_deployment_deposit = (args: {
   args: PotArgs;
@@ -36,7 +28,11 @@ export const calculate_min_deployment_deposit = (args: {
     .view<typeof args, string>("calculate_min_deployment_deposit", { args })
     .then((amount) =>
       Big(amount).plus(Big("20000000000000000000000")).toFixed(),
-    );
+    )
+    .catch((error) => {
+      console.error(error);
+      return undefined;
+    });
 
 export const deploy_pot = async (args: {
   pot_args: PotArgs;

src/common/lib/index.ts

@@ -1,4 +1,4 @@
-export { default as truncate } from "./truncate";
+export * from "./string";
 export { default as formatWithCommas } from "./formatWithCommas";
 export * from "./converters";
 export * from "./navigation";

src/common/lib/string.ts

@@ -0,0 +1,13 @@
+import { NETWORK } from "../constants";
+
+export const truncate = (input: string, maxLength: number) => {
+  if (!input) return "";
+
+  if (input.length <= maxLength) {
+    return input;
+  }
+  return input.substring(0, maxLength - 3) + "...";
+};
+
+export const isAccountId = (input: string): boolean =>
+  input.endsWith(`.${NETWORK}`);

src/modules/access-control/components/AccessControlList.tsx

@@ -54,7 +54,7 @@ export const AccessControlList: React.FC<AccessControlListProps> = ({
     <>
       {isEditingEnabled && <AccessControlListModal id={modalId} {...props} />}
 
-      <div un-flex="~" un-justify="between" un-items="center">
+      <div className="flex items-center justify-between">
         {accountList}
 
         {isEditingEnabled && (

src/modules/access-control/components/AccessControlListModal.tsx

@@ -110,12 +110,7 @@ export const AccessControlListModal = create(
 
           <DialogDescription>
             <Form {...form}>
-              <form
-                onSubmit={onAccountSubmit}
-                un-flex="~"
-                un-gap="3"
-                un-items="start"
-              >
+              <form className="flex items-start gap-3">
                 <FormField
                   name="accountId"
                   control={form.control}
@@ -130,27 +125,21 @@ export const AccessControlListModal = create(
                 />
 
                 <Button
-                  type="submit"
+                  onClick={onAccountSubmit}
                   variant="standard-filled"
                   disabled={isAccountFormDisabled}
                 >
-                  Add
+                  {"Add"}
                 </Button>
               </form>
             </Form>
           </DialogDescription>
 
           <div
-            un-flex="~ col"
+            className="flex flex-col"
             style={{ display: accountIds.length > 0 ? undefined : "none" }}
           >
-            <div
-              un-flex="~"
-              un-justify="between"
-              un-gap="4"
-              un-p="x-5 y-2"
-              un-bg="neutral-50"
-            >
+            <div className="p-x-5 p-y-2 flex justify-between gap-4 bg-neutral-50">
               <div className="flex items-center gap-4">
                 <Checkbox
                   checked={selectedAccounts.length === accountIds.length}
@@ -159,7 +148,7 @@ export const AccessControlListModal = create(
                 />
 
                 <span className="prose font-500 text-neutral-600">
-                  {`${accountIds.length} Admins` +
+                  {`${accountIds.length} Account(s)` +
                     (selectedAccounts.length > 0
                       ? `, ${selectedAccounts.length} selected`
                       : "")}
@@ -176,7 +165,7 @@ export const AccessControlListModal = create(
                 <MdDeleteOutline width={18} height={18} />
 
                 <span className="prose line-height-none">
-                  Remove all selected
+                  {"Remove all selected"}
                 </span>
               </Button>
             </div>
@@ -202,7 +191,7 @@ export const AccessControlListModal = create(
                         <MdDeleteOutline width={18} height={18} />
 
                         <span className="prose font-500 line-height-none">
-                          Remove
+                          {"Remove"}
                         </span>
                       </Button>
                     }

src/modules/profile/components/ProfileLink.tsx → src/modules/account/components/AccountProfileLink.tsx

@@ -6,11 +6,13 @@ import { cn } from "@/common/ui/utils";
 import { AccountAvatar } from "@/modules/core";
 import routesPath from "@/modules/core/routes";
 
-export type ProfileLinkProps = ByAccountId & { className?: string };
+export type AccountProfileLinkProps = ByAccountId & {
+  classNames?: { root?: string; avatar?: string; name?: string };
+};
 
-export const ProfileLink: React.FC<ProfileLinkProps> = ({
+export const AccountProfileLink: React.FC<AccountProfileLinkProps> = ({
   accountId,
-  className,
+  classNames,
 }) => {
   const { data: account } = potlock.useAccount({ accountId });
   const { name } = account?.near_social_profile_data ?? {};
@@ -19,11 +21,17 @@ export const ProfileLink: React.FC<ProfileLinkProps> = ({
     <Link
       href={`${routesPath.PROFILE}/${accountId}`}
       target="_blank"
-      className={cn("decoration-none flex items-center gap-1", className)}
+      className={cn(
+        "decoration-none flex items-center gap-1",
+        classNames?.root,
+      )}
     >
-      <AccountAvatar {...{ accountId }} className="h-5 w-5" />
+      <AccountAvatar
+        {...{ accountId }}
+        className={cn("h-5 w-5", classNames?.avatar)}
+      />
 
-      <span className="prose font-500" un-decoration="hover:underline">
+      <span className={cn("prose font-500 hover:underline", classNames?.name)}>
         {name ?? accountId}
       </span>
     </Link>

src/modules/account/index.ts

@@ -0,0 +1 @@
+export * from "./components/AccountProfileLink";

src/modules/donation/components/DonationConfirmation.tsx

@@ -18,7 +18,7 @@ import {
 } from "@/common/ui/components";
 import { CheckboxField } from "@/common/ui/form-fields";
 import { cn } from "@/common/ui/utils";
-import { ProfileLink } from "@/modules/profile";
+import { AccountProfileLink } from "@/modules/account";
 import { TokenTotalValue } from "@/modules/token";
 
 import { DonationSummaryBreakdown } from "./breakdowns";
@@ -96,7 +96,7 @@ export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
                       <span>{`Remove ${protocolFeePercent}% Protocol Fees`}</span>
 
                       {protocolFeeRecipientAccountId && (
-                        <ProfileLink
+                        <AccountProfileLink
                           accountId={protocolFeeRecipientAccountId}
                         />
                       )}
@@ -120,7 +120,7 @@ export const DonationConfirmation: React.FC<DonationConfirmationProps> = ({
                       <span>{`Remove ${chefFeePercent}% Chef Fees`}</span>
 
                       {pot?.chef?.id && (
-                        <ProfileLink accountId={pot?.chef?.id} />
+                        <AccountProfileLink accountId={pot?.chef?.id} />
                       )}
                     </>
                   }

src/modules/donation/models/schemas.ts

@@ -12,7 +12,6 @@ import {
 
 import { NEAR_TOKEN_DENOM } from "@/common/constants";
 import { safePositiveNumber } from "@/common/lib";
-import { TOTAL_FEE_BASIS_POINTS } from "@/modules/core/constants";
 import { TokenAvailableBalance } from "@/modules/token";
 
 import {
@@ -23,10 +22,6 @@ import {
   DonationAllocationStrategyEnum,
   DonationGroupAllocationStrategyEnum,
 } from "../types";
-import {
-  donationFeeBasisPointsToPercents,
-  donationFeePercentsToBasisPoints,
-} from "../utils/converters";
 import {
   isDonationAmountSufficient,
   isDonationMatchingPotSelected,
@@ -39,15 +34,21 @@ export const donationTokenSchema = literal(NEAR_TOKEN_DENOM)
 
 export const donationAmount = safePositiveNumber;
 
-export const donationFeeBasisPoints = preprocess(
+/**
+ * # Heads up!
+ *
+ * The donation fee is stored in basis points, but the schema expects it to be a percentage.
+ *
+ * Thus make sure to convert it to percents before passing to the form
+ *  and convert it back to basis points before passing to the contract.
+ */
+export const donationFee = preprocess(
   (value) =>
-    typeof value === "string"
-      ? donationFeePercentsToBasisPoints(safePositiveNumber.parse(value))
-      : value,
+    typeof value === "string" ? safePositiveNumber.parse(value) : value,
 
   safePositiveNumber,
-).refine((basisPoints) => basisPoints <= TOTAL_FEE_BASIS_POINTS, {
-  message: `Fee cannot exceed ${donationFeeBasisPointsToPercents(TOTAL_FEE_BASIS_POINTS)}%.`,
+).refine((percents) => percents < 100, {
+  message: `Fee must be less than 100%.`,
 });
 
 export const donationSchema = object({

src/modules/pot-editor/components/PotEditorPreview.tsx

@@ -1,17 +1,19 @@
 import { useMemo } from "react";
 
 import { Pencil } from "lucide-react";
-import { entries, isStrictEqual, omit, pick, piped, prop } from "remeda";
+import { entries, isStrictEqual, omit, piped, prop } from "remeda";
 
 import { walletApi } from "@/common/api/near";
 import { ByPotId, potlock } from "@/common/api/potlock";
+import { isAccountId } from "@/common/lib";
 import {
   Button,
   DataLoadingPlaceholder,
   Skeleton,
 } from "@/common/ui/components";
 import { cn } from "@/common/ui/utils";
 import { AccessControlList } from "@/modules/access-control";
+import { AccountProfileLink } from "@/modules/account";
 import { AccountOption } from "@/modules/core";
 
 import { POT_EDITOR_FIELDS } from "../constants";
@@ -40,7 +42,14 @@ const PotEditorPreviewSection: React.FC<PotEditorPreviewSectionProps> = ({
             {subheading ? `${heading} (${subheading})` : heading}
           </span>
 
-          {<span className="prose md:w-102 w-full text-sm">{children}</span>}
+          {typeof children === "string" && isAccountId(children) ? (
+            <AccountProfileLink
+              accountId={children}
+              classNames={{ root: "mr-a", name: "text-sm" }}
+            />
+          ) : (
+            <span className="prose md:w-102 w-full text-sm">{children}</span>
+          )}
         </div>
       ) : null}
     </>
@@ -89,7 +98,7 @@ export const PotEditorPreview: React.FC<PotEditorPreviewProps> = ({
   );
 
   return (
-    <div className="max-w-183 flex w-full flex-col gap-8">
+    <div className="max-w-195 flex w-full flex-col gap-8">
       <div className="flex flex-wrap gap-8">
         <div un-pr="4" un-flex="~ col" un-gap="2">
           <span className="prose font-500 text-sm text-neutral-500">

src/modules/pot-editor/utils/normalization.ts

@@ -8,7 +8,7 @@ import {
   prop,
 } from "remeda";
 
-import { Pot } from "@/common/api/potlock";
+import { Account, Pot } from "@/common/api/potlock";
 import {
   LISTS_CONTRACT_ID,
   NEAR_TOKEN_DENOM,
@@ -31,6 +31,7 @@ import {
 import {
   donationAmount,
   donationFeeBasisPointsToPercents,
+  donationFeePercentsToBasisPoints,
 } from "@/modules/donation";
 import { PotInputs } from "@/modules/pot";
 
@@ -133,6 +134,9 @@ export const potInputsToPotArgs = ({
     },
 
     {
+      referral_fee_matching_pool_basis_points: donationFeePercentsToBasisPoints,
+      referral_fee_public_round_basis_points: donationFeePercentsToBasisPoints,
+      chef_fee_basis_points: donationFeePercentsToBasisPoints,
       application_start_ms: timestamp.parse,
       application_end_ms: timestamp.parse,
       public_round_start_ms: timestamp.parse,
@@ -186,7 +190,15 @@ export const potIndexedFieldToString = (
         return value;
       } else if (Array.isArray(value)) {
         return value.filter(isNonNullish).join(", ");
-      } else return null;
+      } else {
+        switch (key) {
+          case "chef":
+            return (value as Account).id;
+
+          default:
+            return value.toString();
+        }
+      }
     }
 
     default: