Refactor registration / profile update flows

.vscode/settings.json

@@ -45,6 +45,7 @@
   "errorLens.warningGutterIconColor": "#ff942f",
   "cSpell.words": [
     "amichaeltest",
+    "Aptos",
     "Attributify",
     "bitget",
     "builddao",
@@ -58,14 +59,17 @@
     "datetime",
     "defi",
     "dontcare",
+    "Elrond",
     "fastnear",
     "foodbank",
     "formkit",
     "graylisted",
     "hookform",
+    "Injective",
     "intear",
     "Jikugodwill",
     "kubb",
+    "Linea",
     "linktree",
     "METAPOOL",
     "mpdao",
@@ -78,6 +82,7 @@
     "openapi",
     "overscan",
     "partialize",
+    "Polkadot",
     "potfactory",
     "POTLOCK",
     "precommit",
@@ -89,6 +94,7 @@
     "sessionid",
     "shadcn",
     "socialdb",
+    "Solana",
     "SOURCECODE",
     "stnear",
     "svgr",

src/common/api/indexer/hooks.ts

@@ -70,14 +70,16 @@ export const useAccountActivePots = ({
  * https://test-dev.potlock.io/api/schema/swagger-ui/#/v1/v1_accounts_list_registrations_retrieve
  */
 export const useAccountListRegistrations = ({
+  enabled = true,
   accountId,
   ...params
-}: Partial<ByAccountId> & generatedClient.V1AccountsListRegistrationsRetrieveParams) => {
-  const queryResult = generatedClient.useV1AccountsListRegistrationsRetrieve(
-    accountId ?? "noop",
-    params,
-    { ...INDEXER_CLIENT_CONFIG, swr: { enabled: Boolean(accountId) } },
-  );
+}: ByAccountId &
+  generatedClient.V1AccountsListRegistrationsRetrieveParams &
+  ConditionalActivation) => {
+  const queryResult = generatedClient.useV1AccountsListRegistrationsRetrieve(accountId, params, {
+    ...INDEXER_CLIENT_CONFIG,
+    swr: { enabled },
+  });
 
   return { ...queryResult, data: queryResult.data?.data };
 };

src/common/api/indexer/internal/client.generated.ts

@@ -1128,6 +1128,8 @@ export interface ListRegistration {
   admin_notes?: string | null;
   /** Registration id. */
   readonly id: number;
+  /** List registered. */
+  readonly list_id: number;
   registered_by: Account;
   registrant: Account;
   /**

src/common/constants.ts

@@ -61,6 +61,48 @@ export const APP_METADATA: Metadata & {
   },
 };
 
+export const CHAIN_OPTIONS: Record<string, { isEVM: boolean }> = {
+  NEAR: { isEVM: false },
+  Solana: { isEVM: false },
+  Ethereum: { isEVM: true },
+  Polygon: { isEVM: true },
+  Avalanche: { isEVM: true },
+  Optimism: { isEVM: true },
+  Arbitrum: { isEVM: true },
+  BNB: { isEVM: true },
+  Sui: { isEVM: false },
+  Aptos: { isEVM: false },
+  Polkadot: { isEVM: false },
+  Stellar: { isEVM: false },
+
+  // Note: ZkSync aims for EVM compatibility but might not fully be considered as traditional EVM
+  // at the time of writing.
+  ZkSync: { isEVM: false },
+
+  Celo: { isEVM: true },
+  Aurora: { isEVM: true },
+  Injective: { isEVM: true },
+  Base: { isEVM: false },
+
+  // Listed twice in the original list; included once here.
+  Manta: { isEVM: false },
+
+  Fantom: { isEVM: true },
+  ZkEVM: { isEVM: true },
+  Flow: { isEVM: false },
+  Tron: { isEVM: true },
+
+  // Formerly known as Elrond, not traditionally EVM but has some level of compatibility.
+  MultiverseX: { isEVM: false },
+
+  // Assuming EVM compatibility based on the context of ZkEVM.
+  Scroll: { isEVM: true },
+
+  // Assuming non-EVM due to lack of information.
+  Linea: { isEVM: true },
+  Metis: { isEVM: true },
+};
+
 export const TOTAL_FEE_BASIS_POINTS = 10_000;
 export const TOP_LEVEL_ROOT_ACCOUNT_ID = NETWORK === "mainnet" ? "near" : "testnet";
 export const NATIVE_TOKEN_ID = "near";

src/common/contracts/social/client.ts

@@ -1,4 +1,4 @@
-import { StorageCache, buildTransaction } from "@wpdas/naxios";
+import { buildTransaction } from "@wpdas/naxios";
 
 import { SOCIAL_DB_CONTRACT_ACCOUNT_ID } from "@/common/_config";
 import { naxiosInstance } from "@/common/api/near/client";
@@ -9,7 +9,6 @@ import { AccountId } from "@/common/types";
  */
 const nearSocialDbContractApi = naxiosInstance.contractApi({
   contractId: SOCIAL_DB_CONTRACT_ACCOUNT_ID,
-  cache: new StorageCache({ expirationTime: 5 * 60 }), // 5 minutes
 });
 
 interface NEARSocialUserProfileInput {
@@ -99,7 +98,7 @@ export interface RegistrationSocialProfile {
 }
 
 type NEARSocialGetResponse = {
-  [key: string]: {
+  [key: AccountId]: {
     profile?: NEARSocialUserProfile;
   };
 };

src/common/contracts/social/hooks.ts

@@ -9,10 +9,5 @@ export const useSocialProfile = ({
   accountId,
 }: ByAccountId & ConditionalActivation) =>
   useSWR(["useSocialProfile", accountId], ([_queryKey, account_id]) =>
-    !enabled
-      ? undefined
-      : contractClient
-          .getSocialProfile({ accountId: account_id })
-          //? Handling `null` response
-          .then((response) => response ?? undefined),
+    !enabled ? undefined : contractClient.getSocialProfile({ accountId: account_id }),
   );

src/common/lib/index.ts

@@ -1,9 +1,10 @@
 export * from "./string";
-export { formatWithCommas } from "./formatWithCommas";
+export * from "./formatWithCommas";
 export * from "./format";
 export * from "./id";
 export * from "./navigation";
 export * from "./daysAgo";
+export * from "./object";
 export * from "./numeric";
 export * from "./datetime";
 export * from "./protocol-config";

src/common/lib/object.ts

@@ -0,0 +1,46 @@
+type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+    }
+  : T;
+
+// TODO: Find a way to resolve `any` without sacrificing type safety
+export const deepObjectDiff = <T extends Record<string, any>>(
+  objOriginal: T,
+  objUpdated: T,
+): DeepPartial<T> => {
+  if (!objUpdated) objUpdated = {} as T;
+  const diff = {} as DeepPartial<T>;
+
+  function findDiff<U extends Record<string, any>>(
+    original: U | undefined,
+    updated: U,
+    diffObj: DeepPartial<U>,
+  ): DeepPartial<U> {
+    Object.keys(updated).forEach((key: string) => {
+      const updatedValue = updated[key];
+      const originalValue = original ? original[key] : undefined;
+
+      // If both values are objects, recurse.
+      if (
+        typeof updatedValue === "object" &&
+        updatedValue !== null &&
+        (originalValue === undefined ||
+          (typeof originalValue === "object" && originalValue !== null))
+      ) {
+        const nestedDiff = originalValue ? findDiff(originalValue, updatedValue, {}) : updatedValue;
+
+        if (Object.keys(nestedDiff).length > 0) {
+          (diffObj as Record<string, unknown>)[key] = nestedDiff;
+        }
+      } else if (updatedValue !== originalValue) {
+        // Direct comparison for string values.
+        (diffObj as Record<string, unknown>)[key] = updatedValue;
+      }
+    });
+
+    return diffObj;
+  }
+
+  return findDiff(objOriginal, objUpdated, diff);
+};

src/common/services/ipfs.ts

@@ -1,8 +1,19 @@
-const uploadFileToIPFS = async (body: BodyInit) =>
+import { IPFS_NEAR_SOCIAL_URL } from "../constants";
+
+export const nearSocialIpfsUpload = async (body: BodyInit) =>
   fetch("https://ipfs.near.social/add", {
     method: "POST",
     headers: { Accept: "application/json" },
     body,
   });
 
-export default uploadFileToIPFS;
+export const nearSocialIpfsImageUpload = async (files: File[]) =>
+  nearSocialIpfsUpload(files[0]).then((response) => {
+    console.log(response);
+
+    if (response.ok) {
+      return response
+        .json()
+        .then((data) => ("cid" in data ? `${IPFS_NEAR_SOCIAL_URL}${data.cid}` : undefined));
+    }
+  });

src/common/ui/components/atoms/button.tsx

@@ -93,12 +93,13 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, font, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, font, size, asChild = false, type = "button", ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, font, className }))}
         ref={ref}
+        type={type}
         {...props}
       />
     );

src/entities/_shared/account/components/AccountGroup.tsx

@@ -35,7 +35,6 @@ export const AccountGroup: React.FC<AccountGroupProps> = ({
   const { value: accountIds } = props;
   const isEditingEnabled = isEditable && "title" in props;
   const modalId = useId();
-
   const openAccountsModal = useCallback(() => show(modalId), [modalId]);
 
   const accountList = useMemo(
@@ -50,24 +49,36 @@ export const AccountGroup: React.FC<AccountGroupProps> = ({
               {...{ accountId: account.accountId }}
             />
           ))}
+
           {accountIds.length > 4 && (
             <div
               style={{
                 boxShadow: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px",
               }}
               className={cn(
-                "z-999 group relative flex items-center justify-center rounded-full border-2 border-white bg-red-500 px-3 py-3 text-sm font-semibold text-white transition-all duration-500 ease-in-out",
+                "z-999 group relative flex items-center justify-center",
+                "rounded-full border-2 border-white bg-red-500 px-3 py-3",
+                "text-sm font-semibold text-white transition-all duration-500 ease-in-out",
                 classNames?.avatar,
               )}
             >
               <span className="text-[11px] font-bold">{accountIds.length - 4}+</span>
-              <div className="z-9999 bg-background absolute top-4 mt-2 hidden max-h-80 w-48 w-max overflow-y-auto rounded-md py-4 shadow-lg transition-all duration-500 ease-in-out group-hover:block">
+
+              <div
+                className={cn(
+                  "z-9999 bg-background absolute top-4 mt-2 hidden",
+                  "max-h-80 w-48 w-max overflow-y-auto rounded-md py-4",
+                  "shadow-lg transition-all duration-500 ease-in-out group-hover:block",
+                )}
+              >
                 {accountIds.slice(4).map((account) => (
                   <Link
                     href={`/profile/${account.accountId}`}
                     target="_blank"
                     key={account.accountId}
-                    className="mb-2 flex cursor-pointer items-center gap-2 p-2 text-[#292929] hover:bg-gray-100"
+                    className={
+                      "mb-2 flex cursor-pointer items-center gap-2 p-2 text-[#292929] hover:bg-gray-100"
+                    }
                   >
                     <AccountProfilePicture accountId={account.accountId} className="h-5 w-5" />
                     {account.accountId}

src/entities/_shared/account/components/AccountGroupEditModal.tsx

@@ -23,13 +23,13 @@ import {
 } from "@/common/ui/components";
 import { TextField } from "@/common/ui/form-fields";
 import { cn } from "@/common/ui/utils";
-import { AccountKey, AccountListItem, validAccountId } from "@/entities/_shared/account";
+import { AccountGroupItem, AccountListItem, validAccountId } from "@/entities/_shared/account";
 
 export type AccountGroupEditModalProps = {
   title: string;
-  value: AccountKey[];
+  value: AccountGroupItem[];
   onSubmit: (accountIds: AccountId[]) => void;
-  handleRemoveAccounts?: (accounts: AccountKey[]) => void;
+  handleRemoveAccounts?: (accounts: AccountGroupItem[]) => void;
   footer?: React.ReactNode;
   maxAccounts?: number;
 };

src/entities/_shared/account/constants.ts

@@ -1,11 +1,20 @@
 import { IMAGES_ASSET_ENDPOINT_URL } from "@/common/constants";
 import { RegistrationStatus } from "@/common/contracts/core";
 
+import type { AccountProfileLinktreeKey } from "./types";
+
 export const ACCOUNT_PROFILE_IMAGE_PLACEHOLDER_SRC = `${IMAGES_ASSET_ENDPOINT_URL}/profile-image.png`;
 
 export const ACCOUNT_PROFILE_COVER_IMAGE_PLACEHOLDER_SRC = `${IMAGES_ASSET_ENDPOINT_URL}/profile-banner.png`;
 
-export const ACCOUNT_PROFILE_URL_PATTERNS = {
+export const ACCOUNT_PROFILE_LINKTREE_KEYS: AccountProfileLinktreeKey[] = [
+  "github",
+  "telegram",
+  "twitter",
+  "website",
+];
+
+export const ACCOUNT_PROFILE_URL_PATTERNS: Record<AccountProfileLinktreeKey, RegExp> = {
   github: /^(?:https?:\/\/)?(?:www\.)?github\.com\/([^/]+(?:\/[^/]+)?)\/?$/,
   twitter: /^(?:https?:\/\/)?(?:www\.)?x\.com\/([^/]+(?:\/[^/]+)?)\/?$/,
   telegram: /^(?:https?:\/\/)?(?:www\.)?t\.com\/([^/]+(?:\/[^/]+)?)\/?$/,