Pot Page: Settings tab (#123)

.vscode/settings.json

@@ -10,6 +10,7 @@
   "cSpell.words": [
     "Attributify",
     "bitget",
+    "builddao",
     "camelcase",
     "cmdk",
     "colocation",
@@ -35,6 +36,7 @@
     "sessionid",
     "shadcn",
     "socialdb",
+    "svgr",
     "typecheck",
     "unocss",
     "welldone",

next.config.js

@@ -9,6 +9,35 @@ const nextConfig = {
       },
     ],
   },
+
+  webpack(config) {
+    // Grab the existing rule that handles SVG imports
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.(".svg"),
+    );
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: ["@svgr/webpack"],
+      },
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
 };
 
 export default nextConfig;

package.json

@@ -1,6 +1,7 @@
 {
   "name": "nextjs-app",
   "version": "0.1.0",
+  "packageManager": "yarn@1.22.22",
   "private": true,
   "type": "module",
   "scripts": {
@@ -99,6 +100,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@testing-library/react": "^15.0.7",
     "@types/big.js": "^6.2.2",
     "@types/node": "^20",
@@ -134,4 +136,4 @@
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0"
   }
-}
+}

src/common/api/near.ts

@@ -21,7 +21,7 @@ import naxios from "@wpdas/naxios";
 
 import { FULL_TGAS, NETWORK, SOCIAL_DB_CONTRACT_ID } from "@/common/constants";
 
-export const RPC_NODE_URL = `https://${NETWORK === "mainnet" ? "free.rpc.fastnear.com" : "rpc.testnet.near.org"}`;
+export const RPC_NODE_URL = `https://${NETWORK === "mainnet" ? "free.rpc.fastnear.com" : "test.rpc.fastnear.com"}`;
 
 // Naxios (Contract/Wallet) Instance
 export const naxiosInstance = new naxios({

src/common/assets/svgs/index.ts

@@ -1,3 +1,4 @@
+export { default as ChefHat } from "./chef-hat.svg";
 export { WarningIcon } from "./warning";
 export { GroupIcon } from "./group";
 export { CopyPasteIcon } from "./CopyPasteIcon";

src/common/constants.ts

@@ -1,5 +1,4 @@
 import { Network } from "@wpdas/naxios";
-import { AxiosRequestConfig } from "axios";
 import Big from "big.js";
 import { utils } from "near-api-js";
 import { Metadata } from "next";

src/common/contracts/potlock/donate.ts

@@ -28,19 +28,15 @@ export const getConfig = () => contractApi.view<{}, Config>("get_config");
  * Get direct donations
  */
 export const getDonations = (args: { fromIndex?: number; limit?: number }) =>
-  contractApi.view<typeof args, DirectDonation[]>("get_donations", {
-    args,
-  });
+  contractApi.view<typeof args, DirectDonation[]>("get_donations", { args });
 
 /**
  * Get donations for a recipient id
  */
 export const getDonationsForRecipient = (args: { recipient_id: string }) =>
   contractApi.view<typeof args, DirectDonation[]>(
     "get_donations_for_recipient",
-    {
-      args,
-    },
+    { args },
   );
 
 /**
@@ -51,10 +47,7 @@ export const getDonationsForDonor = (args: { donor_id: string }) =>
     args,
   });
 
-export const donateNearDirectly = (
-  args: DirectDonationArgs,
-  depositAmountYocto: string,
-) =>
+export const donate = (args: DirectDonationArgs, depositAmountYocto: string) =>
   contractApi.call<typeof args, DirectDonation>("donate", {
     args,
     deposit: depositAmountYocto,

src/common/contracts/potlock/index.ts

@@ -1,3 +1,8 @@
+import * as donate from "./donate";
+import * as pot from "./pot";
 import * as potFactory from "./pot-factory";
 
-export { potFactory };
+export * from "./interfaces/pot.interfaces";
+export * from "./interfaces/pot-factory.interfaces";
+
+export { donate, pot, potFactory };

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

@@ -1,7 +1,8 @@
+import { PotId } from "@/common/api/potlock";
 import { AccountId, ProviderId } from "@/common/types";
 
-export type Pot = {
-  id: string;
+export type PotDeploymentResult = {
+  id: PotId;
   deployed_by: string;
   deployed_at_ms: number;
 };
@@ -63,8 +64,3 @@ export type PotArgs = {
   protocol_config_provider?: null | ProviderId;
   source_metadata: ContractSourceMetadata;
 };
-
-export type PotDeploymentArgs = {
-  pot_args: PotArgs;
-  pot_handle?: null | string;
-};

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

@@ -1,3 +1,5 @@
+import { AccountId, ProviderId, TokenId } from "@/common/types";
+
 export enum ApplicationStatus {
   Pending = "Pending",
   Approved = "Approved",
@@ -37,33 +39,56 @@ export interface PayoutDetailed extends Payout {
 export interface PotConfig {
   owner: string;
   admins: string[];
-  chef: string;
+  chef?: null | string;
   pot_name: string;
   pot_description: string;
   max_projects: number;
-  base_currency: "near";
+  base_currency: TokenId; // Only supports NEAR at the moment
   application_start_ms: number;
   application_end_ms: number;
   public_round_start_ms: number;
   public_round_end_ms: number;
-  deployed_by: string;
-  registry_provider: string;
+  deployed_by: AccountId;
+  registry_provider?: null | ProviderId;
   min_matching_pool_donation_amount: string;
-  sybil_wrapper_provider: string;
-  custom_sybil_checks: null | string;
-  custom_min_threshold_score: null | string;
+  sybil_wrapper_provider?: null | ProviderId;
+  /** JSON string */
+  custom_sybil_checks?: null | string;
+  custom_min_threshold_score?: null | string;
   referral_fee_matching_pool_basis_points: number;
   referral_fee_public_round_basis_points: number;
   chef_fee_basis_points: number;
   matching_pool_balance: string;
   total_public_donations: string;
   public_donations_count: number;
   payouts: Payout[];
-  cooldown_end_ms: number | null;
+  cooldown_end_ms?: null | number;
   all_paid_out: boolean;
-  protocol_config_provider: string;
+  protocol_config_provider?: null | ProviderId;
 }
 
+export type UpdatePotArgs = {
+  owner?: null | AccountId;
+  admins?: null | AccountId[];
+  chef?: null | AccountId;
+  pot_name?: null | string;
+  pot_description?: null | string;
+  max_projects?: null | number;
+  application_start_ms?: null | number;
+  application_end_ms?: null | number;
+  public_round_start_ms?: null | number;
+  public_round_end_ms?: null | number;
+  registry_provider?: null | ProviderId;
+  min_matching_pool_donation_amount?: null | string;
+  sybil_wrapper_provider?: null | ProviderId;
+  /** JSON string */
+  custom_sybil_checks?: null | string;
+  custom_min_threshold_score?: null | number;
+  referral_fee_matching_pool_basis_points?: null | number;
+  referral_fee_public_round_basis_points?: null | number;
+  chef_fee_basis_points?: null | number;
+};
+
 export interface Challenge {
   challenger_id: string;
   created_at: number;

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

@@ -5,7 +5,12 @@ import { naxiosInstance } from "@/common/api/near";
 import { FULL_TGAS, POT_FACTORY_CONTRACT_ID } from "@/common/constants";
 import { ByAccountId } from "@/common/types";
 
-import { Pot, PotDeploymentArgs } from "./interfaces/pot-factory.interfaces";
+import {
+  PotArgs,
+  PotDeploymentResult,
+} from "./interfaces/pot-factory.interfaces";
+
+export type { PotDeploymentResult };
 
 /**
  * Contract API
@@ -24,22 +29,22 @@ type Config = {
 
 export const get_config = () => contractApi.view<{}, Config>("get_config");
 
-export const calculate_min_deployment_deposit = ({
-  pot_args,
-}: PotDeploymentArgs): Promise<undefined | string> =>
+export const calculate_min_deployment_deposit = (args: {
+  args: PotArgs;
+}): Promise<undefined | string> =>
   contractApi
-    .view<
-      { args: typeof pot_args },
-      string
-    >("calculate_min_deployment_deposit", { args: { args: pot_args } })
+    .view<typeof args, string>("calculate_min_deployment_deposit", { args })
     .then((amount) =>
       Big(amount).plus(Big("20000000000000000000000")).toFixed(),
     );
 
-export const deploy_pot = async (args: PotDeploymentArgs): Promise<Pot> =>
-  contractApi.call<typeof args, Pot>("deploy_pot", {
+export const deploy_pot = async (args: {
+  pot_args: PotArgs;
+  pot_handle?: null | string;
+}): Promise<PotDeploymentResult> =>
+  contractApi.call<typeof args, PotDeploymentResult>("deploy_pot", {
     args,
-    deposit: await calculate_min_deployment_deposit(args),
+    deposit: await calculate_min_deployment_deposit({ args: args.pot_args }),
     gas: FULL_TGAS,
     callbackUrl: window.location.href,
   });

src/common/contracts/potlock/pot.ts

@@ -1,3 +1,4 @@
+import { ONE_YOCTO } from "@builddao/near-social-js";
 import { MemoryCache, calculateDepositByDataSize } from "@wpdas/naxios";
 import { parseNearAmount } from "near-api-js/lib/utils/format";
 
@@ -13,6 +14,7 @@ import {
   PotConfig,
   PotDonation,
   PotDonationArgs,
+  UpdatePotArgs,
 } from "./interfaces/pot.interfaces";
 
 /**
@@ -196,7 +198,7 @@ export const adminProcessPayouts = (args: { potId: string }) =>
     gas: FULL_TGAS,
   });
 
-export const donateNearViaPot = (
+export const donate = (
   potAccountId: PotId,
   args: PotDonationArgs,
   depositAmountYocto: string,
@@ -206,3 +208,17 @@ export const donateNearViaPot = (
     deposit: depositAmountYocto,
     callbackUrl: window.location.href,
   });
+
+export const admin_dangerously_set_pot_config = (
+  potAccountId: PotId,
+  args: { update_args: UpdatePotArgs },
+) =>
+  contractApi(potAccountId).call<typeof args, PotConfig>(
+    "admin_dangerously_set_pot_config",
+
+    {
+      args,
+      deposit: ONE_YOCTO,
+      callbackUrl: window.location.href,
+    },
+  );

src/common/lib/datetime.ts

@@ -14,6 +14,31 @@ export const localeStringToTimestampMs = (value: string): number => {
   }
 };
 
+export const formatDatetimeLocal = (value: string): string =>
+  value.slice(0, 16);
+
+export const millisecondsToDatetimeLocal = (value: number): string => {
+  try {
+    return formatDatetimeLocal(new Date(value).toISOString());
+  } catch {
+    const error = new TypeError(`Unable to parse \`${value}\``);
+
+    console.error(error);
+    throw error;
+  }
+};
+
+export const millisecondsToLocaleString = (value: number): string => {
+  try {
+    return Temporal.Instant.fromEpochMilliseconds(value).toLocaleString();
+  } catch {
+    const error = new TypeError(`Unable to parse \`${value}\``);
+
+    console.error(error);
+    throw error;
+  }
+};
+
 /**
  * Converts a value in milliseconds to the equivalent number of days.
  *

src/common/ui/components/Spinner.tsx

@@ -3,7 +3,7 @@ type Props = {
   height?: number;
 };
 
-const Spinner = ({ width = 18, height = 18 }: Props) => {
+export const Spinner = ({ width = 18, height = 18 }: Props) => {
   return (
     <span
       className={`loader h-[${height}px] w-[${width}px] border-[2px]`}

src/common/ui/components/alert.tsx

@@ -58,7 +58,7 @@ const AlertTitle = forwardRef<
   <h5
     ref={ref}
     className={cn(
-      "prose font-500 important:pl-8 leading-5 tracking-normal text-neutral-950",
+      "prose font-500 important:pl-8 leading-5 tracking-normal",
       className,
     )}
     {...props}