updated: activities orderby timestamp desc, show first 20 activites f…

…or each stream

client/app/page.js

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, act } from "react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useAddress } from "@thirdweb-dev/react";
@@ -85,6 +85,10 @@ export default function Home() {
         first: 100,
         orderBy: "createdAt",
         orderDirection: "desc",
+        activites_skip: 0,
+        activites_first: 20,
+        activities_orderBy: "timestamp",
+        activities_orderDirection: "desc",
         where: {
           and: filters
         }

client/app/utils/index.js

@@ -56,7 +56,8 @@ export const supportedTokens = [
   }
 ];
 
-export const ellipsisAddress = (address) => address.slice(0, 4) + "..." + address.slice(-2);
+export const ellipsisAddress = (address) =>
+  address.slice(0, 4) + "..." + address.slice(-2);
 
 export const calculateFlowRateInTokenPerMonth = (amount) => {
   if (isNaN(amount)) return 0;
@@ -74,6 +75,11 @@ export const STREAMS_QUERY = gql`
     $orderBy: Stream_orderBy
     $orderDirection: OrderDirection
     $where: Stream_filter
+    $activities_skip: Int
+    $activities_first: Int
+    $activities_orderBy: StreamActivity_orderBy
+    $activities_orderDirection: OrderDirection
+    $activities_where: StreamActivity_filter
   ) {
     streams(
       skip: $skip
@@ -86,7 +92,13 @@ export const STREAMS_QUERY = gql`
       sender
       receiver
       token
-      activities {
+      activities(
+        skip: $activities_skip
+        first: $activities_first
+        orderBy: $activities_orderBy
+        orderDirection: $activities_orderDirection
+        where: $activities_where
+      ) {
         id
         type
         flowRate