feat: add tip date filter to top donors

apps/main-landing/src/app/creators/donate/content.tsx

@@ -41,8 +41,6 @@ import { useSender } from './hooks';
 
 const SEARCH_PARAMETER = {
   CREATOR_NAME: 'creatorName',
-  ADDRESS: 'address',
-  LEGACY_ADDRESS: 'streamerAddress',
   NETWORK: 'network',
   TOKEN: 'token',
 };

apps/main-landing/src/app/creators/donate/page.tsx

@@ -23,6 +23,12 @@ import { ZapperNode } from './types';
 
 const SOCKET_URL = 'https://core-production-a116.up.railway.app';
 
+const SEARCH_PARAMETER = {
+  ADDRESS: 'address',
+  DATE_RANGE: 'dateRange',
+  LEGACY_ADDRESS: 'streamerAddress',
+};
+
 // ts-unused-exports:disable-next-line
 export default function Donors() {
   return (
@@ -45,7 +51,43 @@ function DonorsContent() {
 
   const searchParameters = useSearchParams();
   const addressFromParameters =
-    searchParameters.get('address') ?? searchParameters.get('streamerAddress');
+    searchParameters.get(SEARCH_PARAMETER.ADDRESS) ??
+    searchParameters.get(SEARCH_PARAMETER.LEGACY_ADDRESS);
+  const dateRangeFromParameters = searchParameters.get(
+    SEARCH_PARAMETER.DATE_RANGE,
+  );
+
+  const dateRange = useMemo(() => {
+    const currentTimestamp = Date.now();
+
+    const timestampInPast = (days: number) => {
+      return currentTimestamp - days * 1440 * 60_000;
+    };
+
+    switch (dateRangeFromParameters) {
+      case '24h': {
+        return {
+          description: '24h',
+          timestamp: timestampInPast(1),
+        };
+      }
+      case '7d': {
+        return {
+          description: '7d',
+          timestamp: timestampInPast(7),
+        };
+      }
+      case '31d': {
+        return {
+          description: '31d',
+          timestamp: timestampInPast(31),
+        };
+      }
+      default: {
+        return;
+      }
+    }
+  }, [dateRangeFromParameters]);
 
   useEffect(() => {
     const validateAddress = async () => {
@@ -72,9 +114,17 @@ function DonorsContent() {
 
   useEffect(() => {
     if (tips.data) {
-      setTipEdges(tips.data.data);
+      setTipEdges(
+        tips.data.data.filter((tip) => {
+          if (dateRange) {
+            return tip.node.timestamp >= dateRange.timestamp;
+          }
+
+          return true;
+        }),
+      );
     }
-  }, [tips.data]);
+  }, [dateRange, tips.data]);
 
   const updateCurrentContent = (content: 'tip' | 'history') => {
     setCurrentContent(content);
@@ -91,6 +141,7 @@ function DonorsContent() {
             />
             <TopDonors
               tipEdges={tipEdges}
+              dateRange={dateRange}
               tipsLoading={tips.isLoading}
               validatedAddress={validatedAddress}
               updateCurrentContent={updateCurrentContent}
@@ -113,6 +164,7 @@ function DonorsContent() {
     }
   }, [
     currentContent,
+    dateRange,
     isInvalidAddress,
     tipEdges,
     tips.isLoading,
@@ -134,6 +186,10 @@ function DonorsContent() {
         });
 
         socket.on('newDonation', (node: ZapperNode) => {
+          if (dateRange && node.timestamp < dateRange.timestamp) {
+            return;
+          }
+
           setTipEdges((previousState) => {
             return _.uniqBy([{ node }, ...previousState], (item) => {
               return _.get(item, 'node.transaction.hash');
@@ -151,7 +207,7 @@ function DonorsContent() {
     }
 
     return;
-  }, [socketConnected, socketInitialized, validatedAddress]);
+  }, [dateRange, socketConnected, socketInitialized, validatedAddress]);
 
   return (
     <>

apps/main-landing/src/app/creators/donate/top-donors.tsx

@@ -14,6 +14,10 @@ import { FromUser, ZapperNode } from '@/app/creators/donate/types';
 
 type Properties = {
   className?: string;
+  dateRange?: {
+    description: string;
+    timestamp: number;
+  };
   tipsLoading: boolean;
   validatedAddress?: string | null;
   tipEdges: { node: ZapperNode }[];
@@ -26,6 +30,7 @@ const baseClassName =
 export const TopDonors = ({
   tipEdges,
   className,
+  dateRange,
   tipsLoading,
   validatedAddress,
   updateCurrentContent,
@@ -101,7 +106,7 @@ export const TopDonors = ({
         />
         <span className="absolute left-0 top-0 size-full bg-black/20" />
         <h1 className="relative z-1 mx-12 my-6 text-center text-heading4 uppercase text-white">
-          Top donors
+          {dateRange ? `Top donors (${dateRange.description})` : 'Top donors'}
         </h1>
       </div>
       <div className="flex w-full flex-col">