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/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx

@@ -0,0 +1,69 @@
+import React from "react"
+import { ArrowUpRight } from "#/assets/icons"
+import { Box, Icon } from "@chakra-ui/react"
+import { Variants, motion } from "framer-motion"
+import { chakraUnitToPx } from "#/theme/utils"
+
+const arrowUpVariants: Variants = {
+  initial: {
+    x: 0,
+    y: -5,
+  },
+  animate: (boxSizePx: number) => ({
+    x: [0, boxSizePx],
+    y: [-5, -boxSizePx],
+    transition: {
+      duration: 0.4,
+      ease: "easeInOut",
+    },
+  }),
+}
+
+const arrowBottomVariants: Variants = {
+  initial: (boxSizePx: number) => ({
+    x: -boxSizePx,
+    y: boxSizePx,
+  }),
+  animate: (boxSizePx: number) => ({
+    x: [-boxSizePx, 0],
+    y: [boxSizePx, -5],
+    transition: {
+      duration: 0.4,
+      ease: "easeInOut",
+    },
+  }),
+}
+
+type ArrowUpRightAnimatedIconProps = {
+  boxSize?: number
+  color?: string
+}
+
+export function ArrowUpRightAnimatedIcon({
+  boxSize = 4,
+  color = "brand.400",
+}: ArrowUpRightAnimatedIconProps) {
+  const boxSizePx = chakraUnitToPx(boxSize)
+  return (
+    <Box pos="relative" boxSize={boxSize} overflow="hidden">
+      <Box
+        pos="absolute"
+        as={motion.div}
+        boxSize={boxSize}
+        custom={boxSizePx}
+        variants={arrowUpVariants}
+      >
+        <Icon as={ArrowUpRight} boxSize={boxSize} color={color} />
+      </Box>
+      <Box
+        pos="absolute"
+        as={motion.div}
+        boxSize={boxSize}
+        custom={boxSizePx}
+        variants={arrowBottomVariants}
+      >
+        <Icon as={ArrowUpRight} boxSize={boxSize} color={color} />
+      </Box>
+    </Box>
+  )
+}

dapp/src/assets/icons/animated/index.ts

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

dapp/src/components/GlobalStyles/index.tsx

@@ -41,6 +41,17 @@ 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/ActivityCard.tsx → dapp/src/components/shared/ActivityCard/ActivityCard.tsx

@@ -9,28 +9,36 @@ import {
   Tooltip,
   CloseButton,
 } from "@chakra-ui/react"
-import { useLocation } from "react-router-dom"
-import { ActivityInfo, LocationState } from "#/types"
-import { capitalize } from "#/utils"
+import { useNavigate } from "react-router-dom"
+import { ActivityInfo } from "#/types"
 import { ChevronRightIcon } from "#/assets/icons"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 import StatusInfo from "#/components/shared/StatusInfo"
 import { TextSm } from "#/components/shared/Typography"
-import ActivityCardContainer from "./ActivityCardContainer"
+import { routerPath } from "#/router/path"
+import { ActivityCardWrapper } from "./ActivityCardWrapper"
 
 type ActivityCardType = CardProps & {
   activity: ActivityInfo
   onRemove: (txHash: string) => void
+  isActive?: boolean
 }
 
-function ActivityCard({ activity, onRemove }: ActivityCardType) {
-  const state = useLocation().state as LocationState | null
-  const isActive = state ? activity.txHash === state.activity.txHash : false
+export function ActivityCard({
+  activity,
+  onRemove,
+  isActive,
+}: ActivityCardType) {
+  const navigate = useNavigate()
   const isCompleted = activity.status === "completed"
 
+  const onClick = useCallback(() => {
+    navigate(`${routerPath.activity}/${activity.txHash}`)
+  }, [activity.txHash, navigate])
+
   const onClose = useCallback(
     (event: React.MouseEvent) => {
-      event.preventDefault()
+      event.stopPropagation()
       if (activity.txHash) {
         onRemove(activity.txHash)
       }
@@ -39,7 +47,11 @@ function ActivityCard({ activity, onRemove }: ActivityCardType) {
   )
 
   return (
-    <ActivityCardContainer isCompleted={isCompleted} isActive={isActive}>
+    <ActivityCardWrapper
+      isCompleted={isCompleted}
+      isActive={isActive}
+      onClick={onClick}
+    >
       <CardHeader p={0} w="100%">
         <HStack justifyContent="space-between">
           <CurrencyBalance
@@ -67,9 +79,9 @@ function ActivityCard({ activity, onRemove }: ActivityCardType) {
           )}
         </HStack>
       </CardHeader>
-      <CardBody p={0}>
-        <TextSm fontWeight="semibold" marginBottom={4}>
-          {capitalize(activity.action)}
+      <CardBody p={0} pb={4}>
+        <TextSm fontWeight="semibold" textTransform="capitalize">
+          {activity.action}
         </TextSm>
       </CardBody>
       <CardFooter p={0}>
@@ -80,8 +92,6 @@ function ActivityCard({ activity, onRemove }: ActivityCardType) {
           fontWeight="medium"
         />
       </CardFooter>
-    </ActivityCardContainer>
+    </ActivityCardWrapper>
   )
 }
-
-export default ActivityCard

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

@@ -1,10 +1,10 @@
 import React from "react"
 import { CardProps, Card } from "@chakra-ui/react"
 
-type ActivityCardContainerProps = CardProps & {
+type ActivityCardWrapperProps = CardProps & {
   isCompleted: boolean
-  isActive: boolean
   children: React.ReactNode
+  isActive?: boolean
 }
 
 const completedStyles = {
@@ -34,18 +34,19 @@ const activeStyles = {
   },
 }
 
-function ActivityCardContainer({
+export function ActivityCardWrapper({
   isActive,
   isCompleted,
   children,
   ...props
-}: ActivityCardContainerProps) {
+}: ActivityCardWrapperProps) {
   return (
     <Card
-      {...props}
-      width={64}
-      paddingX={5}
-      padding={3}
+      w={64}
+      mr={3}
+      px={5}
+      p={3}
+      cursor="pointer"
       borderWidth={1}
       borderColor="gold.100"
       _hover={{
@@ -55,10 +56,9 @@ function ActivityCardContainer({
       }}
       {...(isActive && activeStyles)}
       {...(isCompleted && completedStyles)}
+      {...props}
     >
       {children}
     </Card>
   )
 }
-
-export default ActivityCardContainer

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

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

dapp/src/components/shared/Carousel.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from "react"
+import { FlexProps, Flex } from "@chakra-ui/react"
+import Slider, { Settings as SliderProps } from "react-slick"
+
+const carouselSettings: SliderProps = {
+  dots: false,
+  infinite: false,
+  draggable: false,
+  variableWidth: true,
+  speed: 500,
+  slidesToShow: 12,
+  slidesToScroll: 1,
+}
+
+type CarouselProps = FlexProps &
+  SliderProps & {
+    children: React.ReactNode
+  }
+
+export const Carousel = forwardRef<HTMLInputElement, CarouselProps>(
+  (props, ref) => (
+    <Flex
+      as={Slider}
+      ref={ref}
+      overflowX="hidden"
+      {...carouselSettings}
+      {...props}
+    >
+      {props.children}
+    </Flex>
+  ),
+)

dapp/src/hooks/index.ts

@@ -17,3 +17,4 @@ export * from "./useInitApp"
 export * from "./useCurrencyConversion"
 export * from "./useDepositTelemetry"
 export * from "./useFetchBTCPriceUSD"
+export * from "./useActivities"

dapp/src/hooks/useActivities.ts

@@ -0,0 +1,25 @@
+import { useCallback, useState } from "react"
+import { mockedActivities } from "#/mock"
+
+export function useActivities() {
+  // TODO: should be replaced by redux store when subgraphs are implemented
+  const [activities, setActivities] = useState(mockedActivities)
+
+  const getActivity = useCallback(
+    (activityId?: string) =>
+      activities.find((_activity) => _activity.txHash === activityId),
+    [activities],
+  )
+
+  const onRemove = useCallback(
+    (activityHash: string) => {
+      const filteredActivities = activities.filter(
+        (activity) => activity.txHash !== activityHash,
+      )
+      setActivities(filteredActivities)
+    },
+    [activities],
+  )
+
+  return { activities, getActivity, onRemove }
+}

dapp/src/mock/index.ts

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