wip

.eslintrc.json

@@ -56,9 +56,7 @@
         "allowSeparatedGroups": true
       }
     ],
-    // turn on errors for missing imports
     "import/no-unresolved": "error",
-    // "import/no-named-as-default-member": "off",
     "import/order": [
       "error",
       {
@@ -92,6 +90,9 @@
         }
       }
     ],
+    "import/no-default-export": [
+      "warn"
+    ],
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": [
       "warn",
@@ -100,5 +101,23 @@
         "varsIgnorePattern": "^_"
       }
     ]
-  }
+  },
+  "overrides": [
+    {
+      "files": [
+        "src/pages/**/*"
+      ],
+      "rules": {
+        "import/no-default-export": "off"
+      }
+    },
+    {
+      "files": [
+        "src/app/**/{page,layout,not-found}.tsx"
+      ],
+      "rules": {
+        "import/no-default-export": "off"
+      }
+    }
+  ]
 }

src/modules/pot/components/TimeLeft.tsx → src/common/ui/components/_legacy/TimeLeft.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-const TimeLeft = ({ daysLeft }: { daysLeft: number }) => {
+export const TimeLeft = ({ daysLeft }: { daysLeft: number }) => {
   const [timeLeft, setTimeLeft] = useState("-");
 
   function formatTimeLeft(targetTimestamp: number) {
@@ -43,4 +43,3 @@ const TimeLeft = ({ daysLeft }: { daysLeft: number }) => {
   return timeLeft;
 };
 
-export default TimeLeft;

src/modules/pot/components/ActivePots.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import Big from "big.js";
 
@@ -10,7 +10,7 @@ import { POT_SORT_OPTIONS, POT_STATUSES } from "../constants";
 import { useFilteredPots } from "../hooks";
 import { filters } from "../utils/filters";
 
-const ActivePots = () => {
+export const ActivePots = () => {
   const [categoryFilter, setCategoryFilter] = useState<string | null>(null);
 
   // Fetch Pots
@@ -119,4 +119,3 @@ const ActivePots = () => {
   );
 };
 
-export default ActivePots;

src/modules/pot/components/ChallengeModal.tsx

@@ -23,7 +23,7 @@ type Props = {
   previousChallenge?: Challenge;
 };
 
-const ChallengeModal = ({ open, onCloseClick, potDetail, previousChallenge }: Props) => {
+export const ChallengeModal = ({ open, onCloseClick, potDetail, previousChallenge }: Props) => {
   const { actAsDao, accountId } = useTypedSelector((state) => state.nav);
 
   // AccountID (Address)
@@ -79,5 +79,3 @@ const ChallengeModal = ({ open, onCloseClick, potDetail, previousChallenge }: Pr
     </Dialog>
   );
 };
-
-export default ChallengeModal;

src/modules/pot/components/PotCard.tsx

@@ -4,15 +4,15 @@ import { Pot } from "@/common/api/indexer";
 import routesPath from "@/modules/core/routes";
 
 import Indicator from "./Indicator";
-import Tag from "./Tag";
+import { PotTag } from "./PotTag";
 import useNearAndUsdByPot from "../hooks/useNearAndUsdByPot";
 import getPotTags from "../utils/getPotTags";
 
-type Props = {
+export type PotCardProps = {
   pot: Pot;
 };
 
-export const PotCard = ({ pot }: Props) => {
+export const PotCard: React.FC<PotCardProps> = ({ pot }) => {
   const { amountNear, amountUsd } = useNearAndUsdByPot({ pot });
 
   const preLoadingText = `Pot ${pot.account} not found.`;
@@ -60,7 +60,7 @@ export const PotCard = ({ pot }: Props) => {
         {tags.map(
           (tag) =>
             tag.visibility && (
-              <Tag
+              <PotTag
                 backgroundColor={tag.backgroundColor}
                 borderColor={tag.borderColor}
                 textColor={tag.textColor}
@@ -74,5 +74,3 @@ export const PotCard = ({ pot }: Props) => {
     </Link>
   );
 };
-
-export default PotCard;

src/modules/pot/components/PotHero.tsx

@@ -16,11 +16,11 @@ import { DonateToPotProjects } from "@/modules/donation";
 import { TokenTotalValue } from "@/modules/token";
 import { useTypedSelector } from "@/store";
 
-import ChallengeModal from "./ChallengeModal";
+import { ChallengeModal } from "./ChallengeModal";
 import FundMatchingPoolModal from "./FundMatchingPoolModal";
 import NewApplicationModal from "./NewApplicationModal";
-import { PoolAllocationTable } from "./PoolAllocationTable";
 import { PotApplicationRequirements } from "./PotApplicationRequirements";
+import { PotStats } from "./PotStats";
 import { PotTimeline } from "./PotTimeline";
 import { usePotUserPermissions } from "../hooks/permissions";
 import { isPotVotingBased } from "../utils/voting";
@@ -145,7 +145,7 @@ export const PotHero: React.FC<PotHeroProps> = ({ potId }) => {
               {isVotingBasedPot ? (
                 <PotApplicationRequirements {...{ potId }} />
               ) : (
-                pot && <PoolAllocationTable potDetail={pot} />
+                pot && <PotStats potDetail={pot} />
               )}
 
               {isSignedIn && (

src/modules/pot/components/PoolAllocationTable/Table/index.tsx → src/modules/pot/components/PotStats.tsx

@@ -3,14 +3,15 @@ import { useState } from "react";
 import Link from "next/link";
 
 import { coingecko } from "@/common/api/coingecko";
+import { Pot } from "@/common/api/indexer";
 import { Toggle } from "@/common/assets/svgs";
 import { truncate } from "@/common/lib";
 import { AccountProfilePicture } from "@/modules/core";
 import routesPath from "@/modules/core/routes";
-import { JoinDonation } from "@/modules/pot/hooks";
+import { JoinDonation, useOrderedDonations } from "@/modules/pot/hooks";
 import { useProfileData } from "@/modules/profile";
 
-import { Container, Row } from "./styles";
+import { Container, Row } from "./styled";
 
 const Table = ({
   donations,
@@ -101,4 +102,34 @@ const Donation = ({ donorId, nearAmount, index, usdToggle }: DonationProps) => {
   );
 };
 
-export default Table;
+export const PotStats = ({ potDetail }: { potDetail: Pot }) => {
+  const {
+    orderedPayouts,
+    totalAmountNearPayouts,
+    orderedDonations,
+    uniqueDonationDonors,
+    totalAmountNearDonations,
+  } = useOrderedDonations(potDetail.account);
+
+  const { public_donations_count } = potDetail;
+
+  if (public_donations_count > 0 && orderedPayouts.length > 0) {
+    return (
+      <Table
+        title="matching pool allocations"
+        totalAmount={totalAmountNearPayouts.toString()}
+        totalUniqueDonors={uniqueDonationDonors}
+        donations={orderedPayouts.slice(0, 5)}
+      />
+    );
+  } else if (orderedDonations.length > 0) {
+    return (
+      <Table
+        title="sponsors"
+        totalAmount={totalAmountNearDonations.toString()}
+        totalUniqueDonors={uniqueDonationDonors}
+        donations={orderedDonations.slice(0, 5)}
+      />
+    );
+  }
+};

src/modules/pot/components/PotTag.tsx

@@ -0,0 +1,35 @@
+export type PotTagProps = {
+  backgroundColor?: string;
+  borderColor?: string;
+  textColor?: string;
+  text: string;
+  preElements?: React.ReactNode;
+};
+
+export const PotTag: React.FC<PotTagProps> = ({
+  backgroundColor,
+  borderColor,
+  textColor,
+  text,
+  preElements,
+}) => (
+  <div
+    className="flex items-center justify-center rounded-[4px] px-[8px] py-[6px] text-center"
+    style={{
+      backgroundColor: backgroundColor || "#ffffff",
+      border: `1px solid ${borderColor || "#000000"}`,
+      boxShadow: `0px -0.699999988079071px 0px ${borderColor} inset`,
+    }}
+  >
+    {preElements}
+
+    <p
+      className="text-size-sm font-500 ml-2"
+      style={{
+        color: textColor || "#000000",
+      }}
+    >
+      {text}
+    </p>
+  </div>
+);

src/modules/pot/components/PotTimeline.tsx

@@ -6,7 +6,7 @@ import { ByPotId } from "@/common/api/indexer";
 import { cn } from "@/common/ui/utils";
 
 import { PotTimelineFragment } from "./PotTimelineFragment";
-import TimeLeft from "./TimeLeft";
+import { TimeLeft } from "@/common/ui/components/_legacy/TimeLeft";
 import { usePotLifecycle } from "../hooks/lifecycle";
 
 /**

src/modules/pot/components/index.ts

@@ -1,8 +1,4 @@
 export { default as Indicator } from "./Indicator";
-export { default as PotCard } from "./PotCard";
-export * from "./PotLayout";
-export { default as Tag } from "./Tag";
-export { default as TimeLeft } from "./TimeLeft";
 export { default as DonationsTable } from "./DonationsTable";
 export { default as SponsorsBoard } from "./SponsorsBoard/SponsorsBoard";
 export { default as SponsorsTable } from "./SponsorsTable/SponsorsTable";

src/modules/pot/index.ts

@@ -1,4 +1,7 @@
 export * from "./components";
+export * from "./components/ActivePots";
+export * from "./components/PotCard";
+export * from "./components/PotLayout";
 export * from "./constants";
 export * from "./hooks";
 export { type PotInputs, potSchema } from "./models";