Merge pull request #70 from PotLock/feat/project-page

Feat: Project Page

.eslintrc.json

@@ -7,12 +7,7 @@
   "env": {
     "node": true
   },
-  "plugins": [
-    "@typescript-eslint",
-    "prettier",
-    "import",
-    "testing-library"
-  ],
+  "plugins": ["@typescript-eslint", "prettier", "import", "testing-library"],
   "extends": [
     "next/core-web-vitals",
     "eslint:recommended",
@@ -25,9 +20,10 @@
   ],
   "rules": {
     "camelcase": [
-      "warn",
+      "off",
       {
-        "properties": "never"
+        "properties": "never",
+        "ignoreDestructuring": true
       }
     ],
     "@typescript-eslint/no-explicit-any": "off",
@@ -44,12 +40,7 @@
         "ignoreCase": false,
         "ignoreDeclarationSort": true, // don"t want to sort import lines, use eslint-plugin-import instead
         "ignoreMemberSort": false,
-        "memberSyntaxSortOrder": [
-          "none",
-          "all",
-          "multiple",
-          "single"
-        ],
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
         "allowSeparatedGroups": true
       }
     ],
@@ -63,10 +54,7 @@
           "builtin", // Built-in imports (come from NodeJS native) go first
           "external", // <- External imports
           "internal", // <- Absolute imports
-          [
-            "sibling",
-            "parent"
-          ], // <- Relative imports, the sibling and parent types they can be mingled together
+          ["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together
           "index", // <- index imports
           "unknown" // <- unknown
         ],
@@ -77,9 +65,7 @@
             "position": "before"
           }
         ],
-        "pathGroupsExcludedImportTypes": [
-          "react"
-        ],
+        "pathGroupsExcludedImportTypes": ["react"],
         "newlines-between": "always",
         "alphabetize": {
           /* sort in ascending order. Options: ["ignore", "asc", "desc"] */
@@ -97,4 +83,4 @@
       }
     ]
   }
-}
+}

package.json

@@ -10,8 +10,9 @@
     "generate:api-pagoda": "orval --config pagoda-eapi.cjs",
     "generate:api-potlock": "orval --config potlock-indexer.cjs",
     "generate:api": "concurrently 'yarn generate:api-potlock' 'yarn generate:api-pagoda'",
-    "dev:test": "yarn && yarn generate:api && vitest watch",
-    "dev": "yarn && yarn generate:api; next dev",
+    "dev:test": "yarn && vitest watch",
+    "dev": "yarn && next dev",
+    "next:dev": "yarn && next dev",
     "build": "next build",
     "start": "next start",
     "test:unit": "vitest run"

src/app/_components/UserDropdown.tsx

@@ -7,7 +7,7 @@ import Link from "next/link";
 import { walletApi } from "@/common/contracts";
 import { NEARSocialUserProfile } from "@/common/contracts/social";
 import { getIsHuman } from "@/common/contracts/sybil.nadabot";
-import { _address } from "@/common/lib";
+import { truncate } from "@/common/lib";
 import {
   Button,
   DropdownMenu,
@@ -125,12 +125,12 @@ const UserDropdown = () => {
             <div className="flex flex-col">
               {profile?.name && (
                 <div className="font-semibold">
-                  {_address(profile?.name, 20)}
+                  {truncate(profile?.name, 20)}
                 </div>
               )}
               <div className="color-[#656565] text-xs">
                 {" "}
-                {_address(accountId, 20)}
+                {truncate(accountId, 20)}
               </div>
             </div>
           </DropdownMenuLabel>

src/app/_layout/RootProvider.tsx

@@ -1,16 +1,22 @@
 "use client";
 
+import { useEffect } from "react";
+
 import { Provider as NiceModalProvider } from "@ebay/nice-modal-react";
 import { Provider as ReduxProvider } from "react-redux";
 
-import { store } from "@/app/_store";
+import { dispatch, store } from "@/app/_store";
 import { AuthProvider } from "@/modules/auth/providers/AuthProvider";
 
 export type RootProviderProps = {
   children: React.ReactNode;
 };
 
 export const RootProvider: React.FC<RootProviderProps> = ({ children }) => {
+  useEffect(() => {
+    dispatch.core.fetchNearToUsd();
+  }, []);
+
   return (
     <ReduxProvider store={store}>
       <NiceModalProvider>

src/app/_layout/globals.css

@@ -129,4 +129,10 @@
   100% {
     transform: rotate(360deg);
   }
+}
+
+.markdown-link {
+  a {
+    color: rgb(123, 123, 123);
+  }
 }

src/app/_store/models.ts

@@ -1,16 +1,19 @@
 import { Models } from "@rematch/core";
 
 import { auth } from "@/modules/auth/state";
+import { core } from "@/modules/core/state";
 import { navModel, profilesModel } from "@/modules/profile/models";
 
 export interface RootModel extends Models<RootModel> {
   auth: typeof auth;
   profiles: typeof profilesModel;
   nav: typeof navModel;
+  core: typeof core;
 }
 
 export const models: RootModel = {
   auth,
   profiles: profilesModel,
   nav: navModel,
+  core,
 };

src/app/user/[userId]/page.tsx

@@ -1,20 +1,33 @@
-// import DonationsInfo from "@/modules/profile/components/DonationsInfo";
+"use client";
+
+import { useState } from "react";
 
 import Info from "@/modules/profile/components/Info";
 import ProfileBanner from "@/modules/profile/components/ProfileBanner";
+import Tabs from "@/modules/profile/components/Tabs";
+import tabRoutes from "@/modules/profile/tabRoutes";
 import ProjectBanner from "@/modules/project/components/ProjectBanner";
 
-export default async function Project({
-  params,
-}: {
-  params: { userId: string; potId?: string };
-}) {
+export default function User({ params }: { params: { userId: string } }) {
+  const [selectedTab, setSelectedTab] = useState(tabRoutes[0]);
+
   return (
     <main className="flex flex-col">
       <ProjectBanner projectId={params.userId} />
       <ProfileBanner isProject={true} accountId={params.userId} />
       <Info accountId={params.userId} />
-      {/* <DonationsInfo accountId={params.userId} potId={params.potId} /> */}
+      <Tabs
+        navOptions={tabRoutes}
+        selectedTab={selectedTab.id}
+        onSelect={(tabId: string) => {
+          setSelectedTab(tabRoutes.find((tabRoute) => tabRoute.id === tabId)!);
+        }}
+      />
+
+      {/* Tab Content */}
+      <div className="flex w-full flex-row flex-wrap gap-2 px-[1rem] md:px-[4.5rem]">
+        <selectedTab.Component />
+      </div>
     </main>
   );
 }

src/common/api/potlock/account.ts

@@ -1,3 +1,4 @@
+import { PotApplication } from "./types";
 import { POTLOCK_API_ENDPOINT } from "../../constants";
 
 type Accounts = {
@@ -15,23 +16,120 @@ type GetAccountsResponse = {
   results: Accounts[];
 };
 
+type NearSocialProfileData = {
+  backgroundImage:
+    | string
+    | {
+        ipfs_cid: string;
+      };
+  description: string;
+  image:
+    | string
+    | {
+        ipfs_cid: string;
+      };
+  linktree: {
+    github: string;
+    telegram: string;
+    twitter: string;
+    website: string;
+  };
+  name: string;
+  plCategories: string;
+  plFundingSources: string;
+  plGithubRepos: string;
+  plPublicGoodReason: string;
+  plSmartContracts: string;
+  plTeam: string;
+};
+
+type User = {
+  donors_count: number;
+  id: string;
+  total_donations_in_usd: number;
+  total_donations_out_usd: number;
+  total_matching_pool_allocations_usd: number;
+  near_social_profile_data: NearSocialProfileData;
+};
+
+type SourceMetadata = {
+  commit_hash: string;
+  link: string;
+  version: string;
+};
+
+type Token = {
+  decimals: number;
+  // "https://nearblocks.io/images/near.svg"
+  icon: string;
+  // near
+  id: string;
+  // "NEAR"
+  name: string;
+  // "NEAR"
+  symbol: string;
+};
+
 export type DonationInfo = {
   chef: any;
   chef_fee: any;
   chef_fee_usd: any;
   donated_at: string;
-  donor: string;
-  ft: string;
+  donor: User;
+  token: Token;
   id: number;
   matching_pool: boolean;
   message: string;
   net_amount: string;
   net_amount_usd: string;
   on_chain_id: number;
-  pot: any;
+  pot?: {
+    admins: User[];
+    all_paid_out: boolean;
+    application_end: string;
+    application_start: string;
+    base_currency: string;
+    chef: User;
+    chef_fee_basis_points: number;
+    cooldown_end: string;
+    cooldown_period_ms: any;
+    custom_min_threshold_score: any;
+    custom_sybil_checks: any;
+    deployed_at: string;
+    deployer: User;
+    description: string;
+    id: string;
+    matching_pool_balance: string;
+    matching_pool_donations_count: number;
+    matching_round_end: string;
+    matching_round_start: string;
+    max_approved_applicants: number;
+    min_matching_pool_donation_amount: string;
+    name: string;
+    owner: User;
+    pot_factory: string;
+    protocol_config_provider: string;
+    public_donations_count: number;
+    referral_fee_matching_pool_basis_points: number;
+    referral_fee_public_round_basis_points: number;
+    registry_provider: string;
+    source_metadata: SourceMetadata;
+    sybil_wrapper_provider: any;
+    total_matching_pool: string;
+    total_matching_pool_usd: string;
+    total_public_donations: string;
+    total_public_donations_usd: string;
+  };
   protocol_fee: string;
   protocol_fee_usd: string;
-  recipient: string;
+  recipient: {
+    donors_count: number;
+    id: string;
+    near_social_profile_data: NearSocialProfileData;
+    total_donations_in_usd: number;
+    total_donations_out_usd: number;
+    total_matching_pool_allocations_usd: number;
+  };
   referrer: any;
   referrer_fee: any;
   referrer_fee_usd: any;
@@ -63,12 +161,26 @@ export const getAccount = async ({ accountId }: { accountId: string }) => {
 
 export const getAccountDonationsReceived = async ({
   accountId,
+  limit,
 }: {
   accountId: string;
+  limit?: number;
 }) => {
   const res = await fetch(
-    `${POTLOCK_API_ENDPOINT}/api/v1/accounts/${accountId}/donations_received`,
+    `${POTLOCK_API_ENDPOINT}/api/v1/accounts/${accountId}/donations_received?limit=${limit || 9999}`,
   );
   const json = await res.json();
   return json as GetAccountDonationsReceivedResponse;
 };
+
+export const getAccountPotApplications = async ({
+  accountId,
+}: {
+  accountId: string;
+}) => {
+  const res = await fetch(
+    `${POTLOCK_API_ENDPOINT}/api/v1/accounts/${accountId}/pot_applications`,
+  );
+  const json = await res.json();
+  return json.results as PotApplication[];
+};

src/common/api/potlock/hooks.ts

@@ -1,7 +1,11 @@
 import { POTLOCK_REQUEST_CONFIG } from "@/common/constants";
 
 import { swrHooks } from "./generated";
-import { ByAccountId, ByPotId } from "./types";
+import {
+  ByAccountId,
+  ByPotId,
+  V1AccountsPotApplicationsRetrieveParams,
+} from "./types";
 
 export const useAccounts = () => {
   const queryResult = swrHooks.useV1AccountsRetrieve(POTLOCK_REQUEST_CONFIG);
@@ -28,6 +32,19 @@ export const useAccountActivePots = ({ accountId }: ByAccountId) => {
   return { ...queryResult, data: queryResult.data?.data };
 };
 
+export const useAccountPotApplications = ({
+  accountId,
+  status,
+}: ByAccountId & V1AccountsPotApplicationsRetrieveParams) => {
+  const queryResult = swrHooks.useV1AccountsPotApplicationsRetrieve(
+    accountId,
+    { status },
+    POTLOCK_REQUEST_CONFIG,
+  );
+
+  return { ...queryResult, data: queryResult.data?.data };
+};
+
 export const usePots = () => {
   const queryResult = swrHooks.useV1PotsRetrieve(POTLOCK_REQUEST_CONFIG);