Structure update, moved mocked activities to standalone hooks, minor …

…improvements

dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { ArrowUpRight } from "#/assets/icons"
-import { Box, Flex, Icon } from "@chakra-ui/react"
+import { Box, Icon } from "@chakra-ui/react"
 import { Variants, motion } from "framer-motion"
 import { chakraUnitToPx } from "#/theme/utils"
 
@@ -46,24 +46,24 @@ export function ArrowUpRightAnimatedIcon({
   const boxSizePx = chakraUnitToPx(boxSize)
   return (
     <Box pos="relative" boxSize={boxSize} overflow="hidden">
-      <Flex
+      <Box
         pos="absolute"
         as={motion.div}
         boxSize={boxSize}
         custom={boxSizePx}
         variants={arrowUpVariants}
       >
         <Icon as={ArrowUpRight} boxSize={boxSize} color={color} />
-      </Flex>
-      <Flex
+      </Box>
+      <Box
         pos="absolute"
         as={motion.div}
         boxSize={boxSize}
         custom={boxSizePx}
         variants={arrowBottomVariants}
       >
         <Icon as={ArrowUpRight} boxSize={boxSize} color={color} />
-      </Flex>
+      </Box>
     </Box>
   )
 }

dapp/src/components/shared/Carousel/Carousel.tsx → dapp/src/components/shared/Carousel.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react"
-import { BoxProps, Flex } from "@chakra-ui/react"
-import Slider from "react-slick"
+import { FlexProps, Flex } from "@chakra-ui/react"
+import Slider, { Settings as SliderProps } from "react-slick"
 
-const carouselSettings = {
+const carouselSettings: SliderProps = {
   dots: false,
   infinite: false,
   draggable: false,
@@ -12,9 +12,10 @@ const carouselSettings = {
   slidesToScroll: 1,
 }
 
-type CarouselProps = BoxProps & {
-  children: React.ReactNode
-}
+type CarouselProps = FlexProps &
+  SliderProps & {
+    children: React.ReactNode
+  }
 
 export const Carousel = forwardRef<HTMLInputElement, CarouselProps>(
   (props, ref) => (

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/pages/ActivityPage/index.tsx

@@ -2,19 +2,16 @@ import React, { useEffect } from "react"
 import { Flex, Link as ChakraLink, Icon } from "@chakra-ui/react"
 
 import { Link as ReactRouterLink, useParams } from "react-router-dom"
-import { useSidebar } from "#/hooks"
+import { useActivities, useSidebar } from "#/hooks"
 import { ArrowLeft } from "#/assets/icons"
-import { mockedActivities } from "#/mock/mock-activities"
 import ActivityDetails from "./ActivityDetails"
 import { ActivityBar } from "./ActivityBar"
 
 export default function ActivityPage() {
   const { onOpen: openSideBar, onClose: closeSidebar } = useSidebar()
+  const { getActivity } = useActivities()
   const params = useParams()
-
-  const selectedActivity = mockedActivities.find(
-    (_activity) => _activity.txHash === params.activityId,
-  )
+  const activity = getActivity(params.activityId)
 
   useEffect(() => {
     openSideBar()
@@ -34,11 +31,10 @@ export default function ActivityPage() {
           _hover={{ color: "white", bg: "brand.400" }}
         />
       </ChakraLink>
-      {selectedActivity && (
+      {activity && (
         <Flex gap={10}>
-          {}
-          <ActivityBar activity={selectedActivity} />
-          <ActivityDetails activity={selectedActivity} />
+          <ActivityBar activity={activity} />
+          <ActivityDetails activity={activity} />
         </Flex>
       )}
     </Flex>

dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx

@@ -1,34 +1,20 @@
-import React, { useCallback, useRef, useState } from "react"
+import React, { useRef } from "react"
 import Slider from "react-slick"
 import { Box, BoxProps } from "@chakra-ui/react"
-import { Carousel } from "#/components/shared/Carousel/Carousel"
-import { mockedActivities } from "#/mock"
+import { Carousel } from "#/components/shared/Carousel"
 import { ActivityCard } from "#/components/shared/ActivityCard"
-import { activityCarouselSettings } from "./utils"
+import { useActivities } from "#/hooks"
+import { activityCarouselSettings } from "./ActivityCarouselSettings"
 
 export function ActivityCarousel({ ...props }: BoxProps) {
   const carouselRef = useRef<HTMLInputElement & Slider>(null)
+  const { activities, onRemove } = useActivities()
 
-  // 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) {
-        carouselRef.current?.slickPrev()
-      }
-      carouselRef.current?.forceUpdate()
-      setActivities(filteredActivities)
-    },
-    [activities],
-  )
+  const handleRemove = (txHash: string) => {
+    carouselRef.current?.slickPrev()
+    carouselRef.current?.forceUpdate()
+    onRemove(txHash)
+  }
 
   return (
     <Box pos="relative" {...props}>
@@ -53,7 +39,7 @@ export function ActivityCarousel({ ...props }: BoxProps) {
           <ActivityCard
             key={activity.txHash}
             activity={activity}
-            onRemove={onRemove}
+            onRemove={handleRemove}
             mr={3}
           />
         ))}

dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselSettings.tsx → dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarouselSettings.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { NextArrowCarousel, PrevArrowCarousel } from "./carouselArrows"
+import { NextArrowCarousel, PrevArrowCarousel } from "./ActivityCarouselArrows"
 
 /* *
  * Settings for react-slick carousel.

dapp/src/pages/OverviewPage/index.tsx

@@ -18,11 +18,11 @@ export default function OverviewPage() {
       </HStack>
 
       <Grid
-        templateAreas={'"activity-carousel activity-carousel button-docs"'}
+        templateAreas={'"activity-carousel activity-carousel docs-card"'}
         gridTemplateColumns="1fr 1fr auto"
       >
         <ActivityCarousel gridArea="activity-carousel" />
-        <DocsCard gridArea="button-docs" />
+        <DocsCard gridArea="docs-card" />
       </Grid>
       <Grid
         templateAreas={`"position-details statistics"