Activities bar - added carousel

dapp/package.json

@@ -25,6 +25,7 @@
     "@sentry/react": "^7.98.0",
     "@sentry/types": "^7.102.0",
     "@tanstack/react-table": "^8.11.3",
+    "@types/react-slick": "^0.23.13",
     "axios": "^1.6.7",
     "ethers": "^6.10.0",
     "formik": "^2.4.5",
@@ -34,6 +35,7 @@
     "react-number-format": "^5.3.1",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.0",
+    "react-slick": "^0.30.2",
     "recharts": "^2.12.0"
   },
   "devDependencies": {

dapp/src/components/GlobalStyles/index.tsx

@@ -41,6 +41,15 @@ export default function GlobalStyles() {
           font-weight: 900;
           font-style: normal;
         }
+        // React-slick package: Chakra-ui with react-slick package doesn't generate flex style for auto-generated slick-track wrapper.
+        .slick-track {
+          display: flex;
+        }
+        // React-slick package: Hiding arrows instead of disabling them in case when carousel is not fully completed by slides.
+        [data-id="slick-arrow-prev"]:disabled:has(~ [data-id="slick-arrow-next"]:disabled),
+        [data-id="slick-arrow-prev"]:disabled ~ [data-id="slick-arrow-next"]:disabled{
+          display: none;
+        }
       `}
     />
   )

dapp/src/components/shared/ActivityBar/index.tsx → dapp/src/components/shared/Activities/ActivityBar.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useState } from "react"
-import { Link as ReactRouterLink } from "react-router-dom"
-import { Flex, Link as ChakraLink, FlexboxProps } from "@chakra-ui/react"
-import ActivityCard from "./ActivityCard"
+import { Flex } from "@chakra-ui/react"
+import { ActivityCard } from "./ActivityCard"
 import { mockedActivities } from "./mock-activities"
 
-function ActivityBar(props: FlexboxProps) {
+export function ActivityBar() {
+  // TODO: Lines 8-18 should be replaced by redux store when subgraphs are implemented
   const [activities, setActivities] = useState(mockedActivities)
 
   const onRemove = useCallback(
@@ -16,20 +16,16 @@ function ActivityBar(props: FlexboxProps) {
     },
     [activities],
   )
+
   return (
-    <Flex gap={3} {...props}>
+    <Flex gap={3} flexDirection="column">
       {activities.map((activity) => (
-        <ChakraLink
-          as={ReactRouterLink}
-          to="/activity-details"
-          state={{ activity }}
+        <ActivityCard
           key={activity.txHash}
-        >
-          <ActivityCard activity={activity} onRemove={onRemove} />
-        </ChakraLink>
+          activity={activity}
+          onRemove={onRemove}
+        />
       ))}
     </Flex>
   )
 }
-
-export default ActivityBar

dapp/src/components/shared/Activities/ActivityCard/ActivityCard.tsx

@@ -0,0 +1,92 @@
+import React, { useCallback } from "react"
+import {
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardProps,
+  HStack,
+  Icon,
+  Tooltip,
+  CloseButton,
+} from "@chakra-ui/react"
+import { useLocation } from "react-router-dom"
+import { ActivityInfo, LocationState } from "#/types"
+import { capitalize } from "#/utils"
+import { ChevronRightIcon } from "#/assets/icons"
+import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
+import StatusInfo from "#/components/shared/StatusInfo"
+import { TextSm } from "#/components/shared/Typography"
+import { ActivityCardWrapper } from "./ActivityCardWrapper"
+import { ActivityCardLinkWrapper } from "./ActivityCardLinkWrapper"
+
+type ActivityCardType = CardProps & {
+  activity: ActivityInfo
+  onRemove: (txHash: string) => void
+}
+
+export function ActivityCard({
+  activity,
+  onRemove,
+  ...props
+}: ActivityCardType) {
+  const state = useLocation().state as LocationState | null
+  const isActive = state ? activity.txHash === state.activity.txHash : false
+  const isCompleted = activity.status === "completed"
+
+  const onClose = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault()
+      if (activity.txHash) {
+        onRemove(activity.txHash)
+      }
+    },
+    [onRemove, activity.txHash],
+  )
+
+  return (
+    <ActivityCardLinkWrapper activity={activity} {...props}>
+      <ActivityCardWrapper isCompleted={isCompleted} isActive={isActive}>
+        <CardHeader p={0} w="100%">
+          <HStack justifyContent="space-between">
+            <CurrencyBalance
+              currency={activity.currency}
+              amount={activity.amount}
+              size="xl"
+              balanceFontWeight="black"
+              symbolFontWeight="medium"
+            />
+            {isCompleted ? (
+              <Tooltip label="Remove" placement="top" paddingX={3} paddingY={2}>
+                <CloseButton
+                  size="sm"
+                  onClick={onClose}
+                  _hover={{ backgroundColor: undefined }}
+                />
+              </Tooltip>
+            ) : (
+              <Icon
+                as={ChevronRightIcon}
+                boxSize={5}
+                color={isActive ? "gold.700" : "grey.400"}
+                _hover={isActive ? { color: "gold.700" } : undefined}
+              />
+            )}
+          </HStack>
+        </CardHeader>
+        <CardBody p={0}>
+          <TextSm fontWeight="semibold" marginBottom={4}>
+            {capitalize(activity.action)}
+          </TextSm>
+        </CardBody>
+        <CardFooter p={0}>
+          <StatusInfo
+            status={activity.status}
+            withIcon
+            withDefaultColor
+            fontWeight="medium"
+          />
+        </CardFooter>
+      </ActivityCardWrapper>
+    </ActivityCardLinkWrapper>
+  )
+}

dapp/src/components/shared/Activities/ActivityCard/ActivityCardLinkWrapper.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+
+import { Link as ReactRouterLink } from "react-router-dom"
+import { Link as ChakraLink } from "@chakra-ui/react"
+import { ActivityInfo } from "#/types"
+
+type ActivityCardLinkWrapperProps = {
+  activity: ActivityInfo
+  children: React.ReactNode
+}
+
+export function ActivityCardLinkWrapper({
+  activity,
+  children,
+  ...props
+}: ActivityCardLinkWrapperProps) {
+  return (
+    <ChakraLink
+      as={ReactRouterLink}
+      to="/activity-details"
+      state={{ activity }}
+      key={activity.txHash}
+      {...props}
+    >
+      {children}
+    </ChakraLink>
+  )
+}

dapp/src/components/shared/ActivityBar/ActivityCardContainer.tsx → dapp/src/components/shared/Activities/ActivityCard/ActivityCardWrapper.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { CardProps, Card } from "@chakra-ui/react"
 
-type ActivityCardContainerProps = CardProps & {
+type ActivityCardWrapperProps = CardProps & {
   isCompleted: boolean
   isActive: boolean
   children: React.ReactNode
@@ -34,12 +34,12 @@ const activeStyles = {
   },
 }
 
-function ActivityCardContainer({
+export function ActivityCardWrapper({
   isActive,
   isCompleted,
   children,
   ...props
-}: ActivityCardContainerProps) {
+}: ActivityCardWrapperProps) {
   return (
     <Card
       {...props}
@@ -60,5 +60,3 @@ function ActivityCardContainer({
     </Card>
   )
 }
-
-export default ActivityCardContainer

dapp/src/components/shared/Activities/ActivityCard/index.tsx

@@ -0,0 +1 @@
+export * from "./ActivityCard"

dapp/src/components/shared/Activities/ActivityCarousel/ActivityCarousel.tsx

@@ -0,0 +1,63 @@
+import React, { useCallback, useRef, useState } from "react"
+import Slider from "react-slick"
+import { Box, HStack, BoxProps } from "@chakra-ui/react"
+import { ActivityCard } from "../ActivityCard"
+import { activityCarouselSettings } from "./utils"
+import { mockedActivities } from "../mock-activities"
+
+export function ActivityCarousel({ ...props }: BoxProps) {
+  const sliderRef = useRef<HTMLDivElement & Slider>(null)
+
+  // TODO: Lines 12-30 should be replaced by redux store when subgraphs are implemented
+  const [activities, setActivities] = useState(mockedActivities)
+
+  const onRemove = useCallback(
+    (activityHash: string) => {
+      const removedIndex = activities.findIndex(
+        (activity) => activity.txHash === activityHash,
+      )
+      const filteredActivities = activities.filter(
+        (activity) => activity.txHash !== activityHash,
+      )
+      const isLastCard = removedIndex === activities.length - 1
+      if (isLastCard) {
+        sliderRef.current?.slickPrev()
+      }
+      sliderRef.current?.forceUpdate()
+      setActivities(filteredActivities)
+    },
+    [activities],
+  )
+
+  return (
+    <Box pos="relative" {...props}>
+      <HStack
+        as={Slider}
+        overflow="hidden"
+        ref={sliderRef}
+        pl={2}
+        ml={-2}
+        overflowX="hidden"
+        pb={6}
+        _after={{
+          content: '""',
+          pos: "absolute",
+          right: 0,
+          w: 20,
+          height: 40,
+          bgGradient: "linear(to-r, transparent, gold.300)",
+        }}
+        {...activityCarouselSettings}
+      >
+        {activities.map((activity) => (
+          <ActivityCard
+            key={activity.txHash}
+            activity={activity}
+            onRemove={onRemove}
+            mr={3}
+          />
+        ))}
+      </HStack>
+    </Box>
+  )
+}

dapp/src/components/shared/Activities/ActivityCarousel/index.tsx

@@ -0,0 +1 @@
+export * from "./ActivityCarousel"

dapp/src/components/shared/Activities/ActivityCarousel/utils/carouselArrows.tsx

@@ -0,0 +1,48 @@
+import React from "react"
+import { CustomArrowProps } from "react-slick"
+import { IconButton, IconButtonProps } from "@chakra-ui/react"
+import { ArrowLeft, ArrowRight } from "#/assets/icons"
+
+type PaginationArrowType = CustomArrowProps & IconButtonProps
+
+function PaginationArrow({ icon, onClick, ...props }: PaginationArrowType) {
+  return (
+    <IconButton
+      icon={icon}
+      variant="pagination"
+      size="sm"
+      borderRadius={32}
+      onClick={onClick}
+      isDisabled={onClick === null}
+      {...props}
+    />
+  )
+}
+
+export function PrevArrowCarousel({ onClick }: CustomArrowProps) {
+  return (
+    <PaginationArrow
+      position="absolute"
+      mr={2}
+      right={-56}
+      top={-10}
+      onClick={onClick}
+      icon={<ArrowLeft />}
+      aria-label="prev"
+      data-id="slick-arrow-prev"
+    />
+  )
+}
+export function NextArrowCarousel({ onClick }: CustomArrowProps) {
+  return (
+    <PaginationArrow
+      position="absolute"
+      right={-64}
+      top={-10}
+      onClick={onClick}
+      icon={<ArrowRight />}
+      aria-label="next"
+      data-id="slick-arrow-next"
+    />
+  )
+}