From 712c391ac7318f4596bc81bd8f7c78825361036b Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Wed, 4 Oct 2023 19:40:05 +0200
Subject: [PATCH] feat: add clear all activities

---
 .../components/ActivityPopover.tsx            | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/libs/oeth/shared/src/components/ActivityProvider/components/ActivityPopover.tsx b/libs/oeth/shared/src/components/ActivityProvider/components/ActivityPopover.tsx
index 1f1a1e684..0439f62c8 100644
--- a/libs/oeth/shared/src/components/ActivityProvider/components/ActivityPopover.tsx
+++ b/libs/oeth/shared/src/components/ActivityProvider/components/ActivityPopover.tsx
@@ -1,5 +1,13 @@
-import { Divider, Popover, Stack, Typography, useTheme } from '@mui/material';
+import {
+  Button,
+  Divider,
+  Popover,
+  Stack,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import { isNilOrEmpty } from '@origin/shared/utils';
+import { produce } from 'immer';
 import { descend, pipe, prop, sort, take } from 'ramda';
 import { useIntl } from 'react-intl';
 
@@ -23,12 +31,20 @@ export const ActivityPopover = ({
 }: AcitivityPopoverProps) => {
   const intl = useIntl();
   const theme = useTheme();
-  const [{ activities, maxVisible }] = useActivityState();
+  const [{ activities, maxVisible }, setActivityState] = useActivityState();
 
   const handleClose = () => {
     setAnchor(null);
   };
 
+  const handleClearAll = () => {
+    setActivityState(
+      produce((state) => {
+        state.activities = [];
+      }),
+    );
+  };
+
   const sortedActivities = pipe(
     sort(descend(prop('createdOn'))),
     take(maxVisible),
@@ -63,9 +79,19 @@ export const ActivityPopover = ({
       }}
     >
       <Stack>
-        <Typography sx={{ px: 3, py: 2 }}>
-          {intl.formatMessage({ defaultMessage: 'Recent activity' })}
-        </Typography>
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Typography sx={{ px: 3, py: 2 }}>
+            {intl.formatMessage({ defaultMessage: 'Recent activity' })}
+          </Typography>
+          <Button variant="text" onClick={handleClearAll}>
+            {intl.formatMessage({ defaultMessage: 'Clear All' })}
+          </Button>
+        </Stack>
+
         <Divider />
         <Stack divider={<Divider />}>
           {isNilOrEmpty(sortedActivities) ? (