fix: Display chef on pot settings preview

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/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/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,
@@ -186,7 +186,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:

src/modules/profile/components/FeedCard.tsx

@@ -7,7 +7,7 @@ import { useRouter } from "next/navigation";
 import ReactMarkdown from "react-markdown";
 
 import { fetchTimeByBlockHeight } from "@/common/api/near-social";
-import truncate from "@/common/lib/truncate";
+import { truncate } from "@/common/lib";
 import { fetchSocialImages } from "@/common/services/near-socialdb";
 
 import FeedCardOptionsSelect from "./FeedCardOptionsSelect";

src/modules/profile/components/Info.tsx

@@ -6,17 +6,17 @@ import { CopyToClipboard } from "react-copy-to-clipboard";
 import CheckIcon from "@/common/assets/svgs/CheckIcon";
 import ReferrerIcon from "@/common/assets/svgs/ReferrerIcon";
 import { DEFAULT_URL } from "@/common/constants";
-import truncate from "@/common/lib/truncate";
+import { truncate } from "@/common/lib";
 import { Button, ClipboardCopyButton } from "@/common/ui/components";
-import { useAuth } from "@/modules/auth/hooks/useAuth";
+import { useAuth } from "@/modules/auth";
 import useWallet from "@/modules/auth/hooks/useWallet";
 import routesPath from "@/modules/core/routes";
 
 import DonationsInfo from "./DonationsInfo";
 import FollowButton from "./FollowButton";
 import Linktree from "./Linktree";
 import ProfileTags from "./ProfileTags";
-import useProfileData from "../hooks/data";
+import { useProfileData } from "../hooks/data";
 
 type Props = {
   accountId: string;

src/modules/profile/index.ts

@@ -1,5 +1,4 @@
 export * from "./components/FeedCard";
-export * from "./components/ProfileLink";
 export * from "./components/ProfileLayout";
 export { profilesModel, navModel } from "./models";
 export { default as useProfileData } from "./hooks/data";