Cart module scaffold & Minor fixes and refactoring (#138)

src/common/api/potlock/hooks.ts

@@ -160,7 +160,7 @@ export const useAccountDonationsSent = ({
 export const usePot = ({ potId }: Partial<ByPotId>) => {
   const queryResult = swrHooks.useV1PotsRetrieve2(potId ?? "unknown", {
     ...POTLOCK_REQUEST_CONFIG,
-    swr: { enabled: Boolean(potId) },
+    swr: { enabled: Boolean(potId), refreshInterval: 3000 },
   });
 
   return { ...queryResult, data: queryResult.data?.data };

src/common/assets/svgs/index.ts

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

src/common/contracts/potlock/donate.ts

@@ -4,9 +4,9 @@ import { naxiosInstance } from "@/common/api/near";
 import { DONATION_CONTRACT_ID } from "@/common/constants";
 
 import {
-  Config,
   DirectDonation,
   DirectDonationArgs,
+  DirectDonationConfig,
 } from "./interfaces/donate.interfaces";
 
 /**
@@ -22,7 +22,8 @@ export const contractApi = naxiosInstance.contractApi({
 /**
  * Get donate contract config
  */
-export const getConfig = () => contractApi.view<{}, Config>("get_config");
+export const getConfig = () =>
+  contractApi.view<{}, DirectDonationConfig>("get_config");
 
 /**
  * Get direct donations

src/common/contracts/potlock/index.ts

@@ -2,6 +2,7 @@ import * as donate from "./donate";
 import * as pot from "./pot";
 import * as potFactory from "./pot-factory";
 
+export * from "./interfaces/donate.interfaces";
 export * from "./interfaces/pot.interfaces";
 export * from "./interfaces/pot-factory.interfaces";
 

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

@@ -1,4 +1,4 @@
-export interface Config {
+export interface DirectDonationConfig {
   owner: string;
   protocol_fee_basis_points: number;
   referral_fee_basis_points: number;

src/common/ui/components/accordion.tsx → src/common/ui/components/atoms/accordion.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 // import { ChevronDown } from "lucide-react";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 const Accordion = AccordionPrimitive.Root;
 

src/common/ui/components/alert.tsx → src/common/ui/components/atoms/alert.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from "react";
 
 import { type VariantProps, cva } from "class-variance-authority";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 const alertVariants = cva(
   cn(

src/common/ui/components/avatar.tsx → src/common/ui/components/atoms/avatar.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,

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

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 // TODO: add correct hover effects
 const buttonVariants = cva(

src/common/ui/components/calendar.tsx → src/common/ui/components/atoms/calendar.tsx

@@ -2,7 +2,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { DayPicker } from "react-day-picker";
 
 import { buttonVariants } from "./button";
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 

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

@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "../../utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

src/common/ui/components/checkbox.tsx → src/common/ui/components/atoms/checkbox.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 export const Checkbox = forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

src/common/ui/components/select.tsx → src/common/ui/components/atoms/select.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 const Select = SelectPrimitive.Root;
 

src/common/ui/components/switch.tsx → src/common/ui/components/atoms/switch.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,

src/common/ui/components/index.ts

@@ -1,13 +1,9 @@
-export * from "./accordion";
-export * from "./alert";
-export * from "./avatar";
-export * from "./button";
-export * from "./calendar";
-export * from "./checkbox";
-export * from "./clipboard-copy-button";
-export * from "./dialog";
+/**
+ * Yet to be sorted in accordance to the Atomic Design principles
+ *
+ * See https://atomicdesign.bradfrost.com/chapter-2/
+ */
 export * from "./dropdown-menu";
-export * from "./Filter";
 export * from "./form";
 export * from "./InfiniteScroll";
 export * from "./input";
@@ -16,23 +12,39 @@ export * from "./popover";
 export * from "./radio-group";
 export * from "./scroll-area";
 export * from "./SearchBar";
-export * from "./select";
 export * from "./skeleton";
-export * from "./SortSelect";
 export * from "./Spinner";
-export * from "./switch";
 export * from "./textarea";
 export * from "./toggle";
 export * from "./toggle-group";
 export * from "./typography";
-export * from "./custom-avatar";
+
+/**
+ * Atoms
+ *
+ * See https://atomicdesign.bradfrost.com/chapter-2/#atoms
+ */
+export * from "./atoms/accordion";
+export * from "./atoms/alert";
+export * from "./atoms/avatar";
+export * from "./atoms/badge";
+export * from "./atoms/button";
+export * from "./atoms/calendar";
+export * from "./atoms/card";
+export * from "./atoms/checkbox";
+export * from "./atoms/select";
+export * from "./atoms/switch";
 
 /**
  * Molecules
  *
  * See https://atomicdesign.bradfrost.com/chapter-2/#molecules
  */
+export * from "./molecules/clipboard-copy-button";
 export * from "./molecules/data-loading-placeholder";
+export * from "./molecules/dialog";
+export * from "./molecules/filter";
+export * from "./molecules/sort-select";
 
 /**
  * Organisms

src/common/ui/components/command.tsx → src/common/ui/components/molecules/command.tsx

@@ -4,9 +4,8 @@ import { type DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 
-import { cn } from "@/common/ui/utils";
-
 import { Dialog, DialogContent } from "./dialog";
+import { cn } from "../../utils";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,