From 389b9e2f56cbeca07177508d9f7aa201cdf53518 Mon Sep 17 00:00:00 2001 From: ioay Date: Sun, 3 Mar 2024 18:33:12 +0100 Subject: [PATCH 01/15] Activities bar - added carousel --- dapp/package.json | 3 +- dapp/src/components/GlobalStyles/index.tsx | 9 ++ .../index.tsx => Activities/ActivityBar.tsx} | 24 ++--- .../Activities/ActivityCard/ActivityCard.tsx | 92 ++++++++++++++++ .../ActivityCard/ActivityCardLinkWrapper.tsx | 28 +++++ .../ActivityCard/ActivityCardWrapper.tsx} | 8 +- .../shared/Activities/ActivityCard/index.tsx | 1 + .../ActivityCarousel/ActivityCarousel.tsx | 63 +++++++++++ .../Activities/ActivityCarousel/index.tsx | 1 + .../ActivityCarousel/utils/carouselArrows.tsx | 48 +++++++++ .../utils/carouselSettings.tsx | 88 +++++++++++++++ .../ActivityCarousel/utils/index.ts | 2 + .../components/shared/Activities/index.tsx | 2 + .../shared/Activities/mock-activities.ts | 67 ++++++++++++ .../shared/ActivityBar/ActivityCard.tsx | 87 --------------- .../shared/ActivityBar/mock-activities.ts | 25 ----- dapp/src/pages/ActivityPage/index.tsx | 4 +- dapp/src/pages/OverviewPage/DocsCard.tsx | 33 ++++++ dapp/src/pages/OverviewPage/index.tsx | 29 +++-- pnpm-lock.yaml | 102 ++++++++++++++++-- 20 files changed, 557 insertions(+), 159 deletions(-) rename dapp/src/components/shared/{ActivityBar/index.tsx => Activities/ActivityBar.tsx} (52%) create mode 100644 dapp/src/components/shared/Activities/ActivityCard/ActivityCard.tsx create mode 100644 dapp/src/components/shared/Activities/ActivityCard/ActivityCardLinkWrapper.tsx rename dapp/src/components/shared/{ActivityBar/ActivityCardContainer.tsx => Activities/ActivityCard/ActivityCardWrapper.tsx} (86%) create mode 100644 dapp/src/components/shared/Activities/ActivityCard/index.tsx create mode 100644 dapp/src/components/shared/Activities/ActivityCarousel/ActivityCarousel.tsx create mode 100644 dapp/src/components/shared/Activities/ActivityCarousel/index.tsx create mode 100644 dapp/src/components/shared/Activities/ActivityCarousel/utils/carouselArrows.tsx create mode 100644 dapp/src/components/shared/Activities/ActivityCarousel/utils/carouselSettings.tsx create mode 100644 dapp/src/components/shared/Activities/ActivityCarousel/utils/index.ts create mode 100644 dapp/src/components/shared/Activities/index.tsx create mode 100644 dapp/src/components/shared/Activities/mock-activities.ts delete mode 100644 dapp/src/components/shared/ActivityBar/ActivityCard.tsx delete mode 100644 dapp/src/components/shared/ActivityBar/mock-activities.ts create mode 100644 dapp/src/pages/OverviewPage/DocsCard.tsx diff --git a/dapp/package.json b/dapp/package.json index e23e66b5f..429603c06 100644 --- a/dapp/package.json +++ b/dapp/package.json @@ -24,15 +24,16 @@ "@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", - "axios": "^1.6.7", "formik": "^2.4.5", "framer-motion": "^10.16.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-number-format": "^5.3.1", "react-router-dom": "^6.22.0", + "react-slick": "^0.30.2", "recharts": "^2.12.0" }, "devDependencies": { diff --git a/dapp/src/components/GlobalStyles/index.tsx b/dapp/src/components/GlobalStyles/index.tsx index e8b11945a..920139ca2 100644 --- a/dapp/src/components/GlobalStyles/index.tsx +++ b/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; + } `} /> ) diff --git a/dapp/src/components/shared/ActivityBar/index.tsx b/dapp/src/components/shared/Activities/ActivityBar.tsx similarity index 52% rename from dapp/src/components/shared/ActivityBar/index.tsx rename to dapp/src/components/shared/Activities/ActivityBar.tsx index 4eb65f505..e3b35fcc8 100644 --- a/dapp/src/components/shared/ActivityBar/index.tsx +++ b/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 ( - + {activities.map((activity) => ( - - - + activity={activity} + onRemove={onRemove} + /> ))} ) } - -export default ActivityBar diff --git a/dapp/src/components/shared/Activities/ActivityCard/ActivityCard.tsx b/dapp/src/components/shared/Activities/ActivityCard/ActivityCard.tsx new file mode 100644 index 000000000..f7c2fcb1a --- /dev/null +++ b/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 ( + + + + + + {isCompleted ? ( + + + + ) : ( + + )} + + + + + {capitalize(activity.action)} + + + + + + + + ) +} diff --git a/dapp/src/components/shared/Activities/ActivityCard/ActivityCardLinkWrapper.tsx b/dapp/src/components/shared/Activities/ActivityCard/ActivityCardLinkWrapper.tsx new file mode 100644 index 000000000..9453c0b36 --- /dev/null +++ b/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 ( + + {children} + + ) +} diff --git a/dapp/src/components/shared/ActivityBar/ActivityCardContainer.tsx b/dapp/src/components/shared/Activities/ActivityCard/ActivityCardWrapper.tsx similarity index 86% rename from dapp/src/components/shared/ActivityBar/ActivityCardContainer.tsx rename to dapp/src/components/shared/Activities/ActivityCard/ActivityCardWrapper.tsx index 2c6256e38..2a85c122d 100644 --- a/dapp/src/components/shared/ActivityBar/ActivityCardContainer.tsx +++ b/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 ( ) } - -export default ActivityCardContainer diff --git a/dapp/src/components/shared/Activities/ActivityCard/index.tsx b/dapp/src/components/shared/Activities/ActivityCard/index.tsx new file mode 100644 index 000000000..30379b1d9 --- /dev/null +++ b/dapp/src/components/shared/Activities/ActivityCard/index.tsx @@ -0,0 +1 @@ +export * from "./ActivityCard" diff --git a/dapp/src/components/shared/Activities/ActivityCarousel/ActivityCarousel.tsx b/dapp/src/components/shared/Activities/ActivityCarousel/ActivityCarousel.tsx new file mode 100644 index 000000000..edbf6ff82 --- /dev/null +++ b/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(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 ( + + + {activities.map((activity) => ( + + ))} + + + ) +} diff --git a/dapp/src/components/shared/Activities/ActivityCarousel/index.tsx b/dapp/src/components/shared/Activities/ActivityCarousel/index.tsx new file mode 100644 index 000000000..47ef26c1e --- /dev/null +++ b/dapp/src/components/shared/Activities/ActivityCarousel/index.tsx @@ -0,0 +1 @@ +export * from "./ActivityCarousel" diff --git a/dapp/src/components/shared/Activities/ActivityCarousel/utils/carouselArrows.tsx b/dapp/src/components/shared/Activities/ActivityCarousel/utils/carouselArrows.tsx new file mode 100644 index 000000000..29a5cb8c6 --- /dev/null +++ b/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 ( + + ) +} + +export function PrevArrowCarousel({ onClick }: CustomArrowProps) { + return ( + } + aria-label="prev" + data-id="slick-arrow-prev" + /> + ) +} +export function NextArrowCarousel({ onClick }: CustomArrowProps) { + return ( + } + aria-label="next" + data-id="slick-arrow-next" + /> + ) +} diff --git a/dapp/src/components/shared/Activities/ActivityCarousel/utils/carouselSettings.tsx b/dapp/src/components/shared/Activities/ActivityCarousel/utils/carouselSettings.tsx new file mode 100644 index 000000000..701330e08 --- /dev/null +++ b/dapp/src/components/shared/Activities/ActivityCarousel/utils/carouselSettings.tsx @@ -0,0 +1,88 @@ +import React from "react" +import { NextArrowCarousel, PrevArrowCarousel } from "./carouselArrows" + +/* * + * Settings for react-slick carousel. + * Breakpoints are calculated based on with & visibility of activity card. + * slidesToShow attr is needed to correctly display the number of cards in the carousel + * and it depends on the width of the viewport. + * */ +export const activityCarouselSettings = { + dots: false, + infinite: false, + draggable: false, + variableWidth: true, + speed: 500, + slidesToShow: 12, + slidesToScroll: 1, + nextArrow: , + prevArrow: , + responsive: [ + { + breakpoint: 820, + settings: { + slidesToShow: 1, + }, + }, + { + breakpoint: 1080, + settings: { + slidesToShow: 2, + }, + }, + { + breakpoint: 1360, + settings: { + slidesToShow: 3, + }, + }, + { + breakpoint: 1620, + settings: { + slidesToShow: 4, + }, + }, + { + breakpoint: 1900, + settings: { + slidesToShow: 5, + }, + }, + { + breakpoint: 2160, + settings: { + slidesToShow: 6, + }, + }, + { + breakpoint: 2440, + settings: { + slidesToShow: 7, + }, + }, + { + breakpoint: 2700, + settings: { + slidesToShow: 8, + }, + }, + { + breakpoint: 2980, + settings: { + slidesToShow: 9, + }, + }, + { + breakpoint: 3240, + settings: { + slidesToShow: 10, + }, + }, + { + breakpoint: 3520, + settings: { + slidesToShow: 11, + }, + }, + ], +} diff --git a/dapp/src/components/shared/Activities/ActivityCarousel/utils/index.ts b/dapp/src/components/shared/Activities/ActivityCarousel/utils/index.ts new file mode 100644 index 000000000..15749ecf0 --- /dev/null +++ b/dapp/src/components/shared/Activities/ActivityCarousel/utils/index.ts @@ -0,0 +1,2 @@ +export * from "./carouselArrows" +export * from "./carouselSettings" diff --git a/dapp/src/components/shared/Activities/index.tsx b/dapp/src/components/shared/Activities/index.tsx new file mode 100644 index 000000000..f1f7edeea --- /dev/null +++ b/dapp/src/components/shared/Activities/index.tsx @@ -0,0 +1,2 @@ +export * from "./ActivityBar" +export * from "./ActivityCarousel" diff --git a/dapp/src/components/shared/Activities/mock-activities.ts b/dapp/src/components/shared/Activities/mock-activities.ts new file mode 100644 index 000000000..a6efd2a2a --- /dev/null +++ b/dapp/src/components/shared/Activities/mock-activities.ts @@ -0,0 +1,67 @@ +import { ActivityInfo } from "#/types" + +export const mockedActivities: ActivityInfo[] = [ + { + amount: 324000000, + action: "stake", + currency: "bitcoin", + txHash: "2dc2341e6c8463b8731eeb356e52acb7", + status: "syncing", + }, + { + amount: 524000000, + action: "unstake", + currency: "bitcoin", + txHash: "92eb5ffee6ae2fec3ad71c777531578f", + status: "pending", + }, + { + amount: 224000000, + action: "receive", + currency: "bitcoin", + txHash: "0cc175b9c0f1b6a831c399e269772661", + status: "completed", + }, + { + amount: 324000000, + action: "stake", + currency: "bitcoin", + txHash: "2dc2341e6c8463b8731eeb356e52aca1", + status: "syncing", + }, + { + amount: 524000000, + action: "unstake", + currency: "bitcoin", + txHash: "92eb5ffee6ae2fec3ad71c77753157a2", + status: "pending", + }, + { + amount: 224000000, + action: "receive", + currency: "bitcoin", + txHash: "0cc175b9c0f1b6a831c399e2697726a3", + status: "completed", + }, + { + amount: 324000000, + action: "stake", + currency: "bitcoin", + txHash: "2dc2341e6c8463b8731eeb356e52aca4", + status: "syncing", + }, + { + amount: 524000000, + action: "unstake", + currency: "bitcoin", + txHash: "92eb5ffee6ae2fec3ad71c77753157a5", + status: "pending", + }, + { + amount: 224000000, + action: "receive", + currency: "bitcoin", + txHash: "0cc175b9c0f1b6a831c399e2697726a6", + status: "completed", + }, +] diff --git a/dapp/src/components/shared/ActivityBar/ActivityCard.tsx b/dapp/src/components/shared/ActivityBar/ActivityCard.tsx deleted file mode 100644 index 96e8cc8ba..000000000 --- a/dapp/src/components/shared/ActivityBar/ActivityCard.tsx +++ /dev/null @@ -1,87 +0,0 @@ -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 ActivityCardContainer from "./ActivityCardContainer" - -type ActivityCardType = CardProps & { - activity: ActivityInfo - onRemove: (txHash: string) => void -} - -function ActivityCard({ activity, onRemove }: 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 ( - - - - - {isCompleted ? ( - - - - ) : ( - - )} - - - - - {capitalize(activity.action)} - - - - - - - ) -} - -export default ActivityCard diff --git a/dapp/src/components/shared/ActivityBar/mock-activities.ts b/dapp/src/components/shared/ActivityBar/mock-activities.ts deleted file mode 100644 index 022f925fd..000000000 --- a/dapp/src/components/shared/ActivityBar/mock-activities.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ActivityInfo } from "#/types" - -export const mockedActivities: ActivityInfo[] = [ - { - amount: 324000000, - action: "stake", - currency: "bitcoin", - txHash: "2dc2341e6c8463b8731eeb356e52acb7", - status: "syncing", - }, - { - amount: 524000000, - action: "unstake", - currency: "bitcoin", - txHash: "92eb5ffee6ae2fec3ad71c777531578f", - status: "pending", - }, - { - amount: 224000000, - action: "receive", - currency: "bitcoin", - txHash: "0cc175b9c0f1b6a831c399e269772661", - status: "completed", - }, -] diff --git a/dapp/src/pages/ActivityPage/index.tsx b/dapp/src/pages/ActivityPage/index.tsx index 8295d008f..77afcc62a 100644 --- a/dapp/src/pages/ActivityPage/index.tsx +++ b/dapp/src/pages/ActivityPage/index.tsx @@ -4,7 +4,7 @@ import { Flex, Link as ChakraLink, Icon } from "@chakra-ui/react" import { Link as ReactRouterLink } from "react-router-dom" import { useSidebar } from "#/hooks" import { ArrowLeft } from "#/assets/icons" -import ActivityBar from "#/components/shared/ActivityBar" +import { ActivityBar } from "#/components/shared/Activities" import ActivityDetails from "./ActivityDetails" export default function ActivityPage() { @@ -29,7 +29,7 @@ export default function ActivityPage() { /> - + diff --git a/dapp/src/pages/OverviewPage/DocsCard.tsx b/dapp/src/pages/OverviewPage/DocsCard.tsx new file mode 100644 index 000000000..2844e6a75 --- /dev/null +++ b/dapp/src/pages/OverviewPage/DocsCard.tsx @@ -0,0 +1,33 @@ +import React from "react" +import { Card } from "@chakra-ui/react" +import { useDocsDrawer } from "#/hooks" +import { TextSm } from "#/components/shared/Typography" +import ButtonLink from "#/components/shared/ButtonLink" + +export function DocsCard() { + const { onOpen } = useDocsDrawer() + + return ( + + + Documentation + + + Everything you need to know about our contracts. + + ) +} diff --git a/dapp/src/pages/OverviewPage/index.tsx b/dapp/src/pages/OverviewPage/index.tsx index 54bb52d8b..3ebbf743d 100644 --- a/dapp/src/pages/OverviewPage/index.tsx +++ b/dapp/src/pages/OverviewPage/index.tsx @@ -1,37 +1,36 @@ import React from "react" -import { Flex, Grid, HStack, Switch } from "@chakra-ui/react" -import { useDocsDrawer } from "#/hooks" +import { Flex, Grid, HStack, SimpleGrid, Switch } from "@chakra-ui/react" import { TextSm } from "#/components/shared/Typography" import { USD } from "#/constants" -import ButtonLink from "#/components/shared/ButtonLink" +import { ActivityCarousel } from "#/components/shared/Activities/" import PositionDetails from "./PositionDetails" import Statistics from "./Statistics" import TransactionHistory from "./TransactionHistory" -import ActivityBar from "../../components/shared/ActivityBar" +import { DocsCard } from "./DocsCard" export default function OverviewPage() { - const { onOpen } = useDocsDrawer() - return ( - - + + {/* TODO: Handle click actions */} Show values in {USD.symbol} - - - - Docs - - + + + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bbc589b20..df065c1f5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -150,9 +150,12 @@ importers: '@tanstack/react-table': specifier: ^8.11.3 version: 8.11.7(react-dom@18.2.0)(react@18.2.0) + '@types/react-slick': + specifier: ^0.23.13 + version: 0.23.13 axios: specifier: ^1.6.7 - version: 1.6.7(debug@4.3.4) + version: 1.6.7 ethers: specifier: ^6.10.0 version: 6.10.0 @@ -174,6 +177,9 @@ importers: react-router-dom: specifier: ^6.22.0 version: 6.22.0(react-dom@18.2.0)(react@18.2.0) + react-slick: + specifier: ^0.30.2 + version: 0.30.2(react-dom@18.2.0)(react@18.2.0) recharts: specifier: ^2.12.0 version: 2.12.0(react-dom@18.2.0)(react@18.2.0) @@ -425,7 +431,7 @@ packages: '@babel/traverse': 7.23.4 '@babel/types': 7.23.4 convert-source-map: 2.0.0 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 gensync: 1.0.0-beta.2 json5: 2.2.3 semver: 6.3.1 @@ -1724,7 +1730,7 @@ packages: '@babel/helper-split-export-declaration': 7.22.6 '@babel/parser': 7.23.4 '@babel/types': 7.23.4 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -3449,7 +3455,7 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: ajv: 6.12.6 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 espree: 9.6.1 globals: 13.23.0 ignore: 5.3.0 @@ -4038,7 +4044,7 @@ packages: engines: {node: '>=10.10.0'} dependencies: '@humanwhocodes/object-schema': 2.0.1 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -6837,6 +6843,12 @@ packages: '@types/react': 18.2.38 dev: true + /@types/react-slick@0.23.13: + resolution: {integrity: sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==} + dependencies: + '@types/react': 18.2.38 + dev: false + /@types/react@18.2.38: resolution: {integrity: sha512-cBBXHzuPtQK6wNthuVMV6IjHAFkdl/FOPFIlkd81/Cd1+IqkHu/A+w4g43kaQQoYHik/ruaQBDL72HyCy1vuMw==} dependencies: @@ -6941,7 +6953,7 @@ packages: '@typescript-eslint/type-utils': 6.12.0(eslint@8.54.0)(typescript@5.3.2) '@typescript-eslint/utils': 6.12.0(eslint@8.54.0)(typescript@5.3.2) '@typescript-eslint/visitor-keys': 6.12.0 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.54.0 graphemer: 1.4.0 ignore: 5.3.0 @@ -6986,7 +6998,7 @@ packages: '@typescript-eslint/types': 6.12.0 '@typescript-eslint/typescript-estree': 6.12.0(typescript@5.3.2) '@typescript-eslint/visitor-keys': 6.12.0 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.54.0 typescript: 5.3.2 transitivePeerDependencies: @@ -7037,7 +7049,7 @@ packages: dependencies: '@typescript-eslint/typescript-estree': 6.12.0(typescript@5.3.2) '@typescript-eslint/utils': 6.12.0(eslint@8.54.0)(typescript@5.3.2) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.54.0 ts-api-utils: 1.0.3(typescript@5.3.2) typescript: 5.3.2 @@ -7084,7 +7096,7 @@ packages: dependencies: '@typescript-eslint/types': 6.12.0 '@typescript-eslint/visitor-keys': 6.12.0 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 semver: 7.5.4 @@ -7804,6 +7816,16 @@ packages: transitivePeerDependencies: - debug + /axios@1.6.7: + resolution: {integrity: sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==} + dependencies: + follow-redirects: 1.15.5 + form-data: 4.0.0 + proxy-from-env: 1.1.0 + transitivePeerDependencies: + - debug + dev: false + /axios@1.6.7(debug@4.3.4): resolution: {integrity: sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==} dependencies: @@ -7812,6 +7834,7 @@ packages: proxy-from-env: 1.1.0 transitivePeerDependencies: - debug + dev: true /axobject-query@3.2.1: resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==} @@ -8832,6 +8855,10 @@ packages: node-gyp-build: 4.7.0 dev: true + /classnames@2.5.1: + resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==} + dev: false + /clean-stack@2.2.0: resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==} engines: {node: '>=6'} @@ -9662,6 +9689,17 @@ packages: dependencies: ms: 2.1.3 + /debug@4.3.4: + resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + dependencies: + ms: 2.1.2 + /debug@4.3.4(supports-color@8.1.1): resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} engines: {node: '>=6.0'} @@ -10187,6 +10225,10 @@ packages: graceful-fs: 4.2.11 tapable: 2.2.1 + /enquire.js@2.1.6: + resolution: {integrity: sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==} + dev: false + /enquirer@2.4.1: resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==} engines: {node: '>=8.6'} @@ -10819,7 +10861,7 @@ packages: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.2 @@ -11592,6 +11634,16 @@ packages: dependencies: debug: 4.3.4(supports-color@8.1.1) + /follow-redirects@1.15.5: + resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==} + engines: {node: '>=4.0'} + peerDependencies: + debug: '*' + peerDependenciesMeta: + debug: + optional: true + dev: false + /follow-redirects@1.15.5(debug@4.3.4): resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==} engines: {node: '>=4.0'} @@ -11602,6 +11654,7 @@ packages: optional: true dependencies: debug: 4.3.4(supports-color@8.1.1) + dev: true /follow-redirects@1.5.10: resolution: {integrity: sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==} @@ -14238,6 +14291,12 @@ packages: delimit-stream: 0.1.0 dev: false + /json2mq@0.2.0: + resolution: {integrity: sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==} + dependencies: + string-convert: 0.2.1 + dev: false + /json5@1.0.2: resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==} hasBin: true @@ -16739,6 +16798,21 @@ packages: react: 18.2.0 dev: false + /react-slick@0.30.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==} + peerDependencies: + react: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 + dependencies: + classnames: 2.5.1 + enquire.js: 2.1.6 + json2mq: 0.2.0 + lodash.debounce: 4.0.8 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + resize-observer-polyfill: 1.5.1 + dev: false + /react-smooth@4.0.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-2NMXOBY1uVUQx1jBeENGA497HK20y6CPGYL1ZnJLeoQ8rrc3UfmOM82sRxtzpcoCkUMy4CS0RGylfuVhuFjBgg==} peerDependencies: @@ -17037,6 +17111,10 @@ packages: /require-package-name@2.0.1: resolution: {integrity: sha512-uuoJ1hU/k6M0779t3VMVIYpb2VMJk05cehCaABFhXaibcbvfgR8wKiozLjVFSzJPmQMRqIcO0HMyTFqfV09V6Q==} + /resize-observer-polyfill@1.5.1: + resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} + dev: false + /resolve-alpn@1.2.1: resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==} @@ -17843,6 +17921,10 @@ packages: resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==} engines: {node: '>=4'} + /string-convert@0.2.1: + resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==} + dev: false + /string-format@2.0.0: resolution: {integrity: sha512-bbEs3scLeYNXLecRRuk6uJxdXUSj6le/8rNPHChIJTn2V79aXVTR1EH2OH5zLKKoz0V02fOUKZZcw01pLUShZA==} dev: true From 401f25345dfe89193b28e1a6c828dfc78ed6712f Mon Sep 17 00:00:00 2001 From: ioay Date: Wed, 13 Mar 2024 12:55:02 +0100 Subject: [PATCH 02/15] Added ArrowUpRightAnimatedIcon component --- .../animated/ArrowUpRightAnimatedIcon.tsx | 69 +++++++++++++++++++ dapp/src/assets/icons/animated/index.ts | 1 + dapp/src/pages/OverviewPage/DocsCard.tsx | 29 ++++---- dapp/src/theme/utils/index.ts | 1 + dapp/src/theme/utils/units.ts | 2 + 5 files changed, 87 insertions(+), 15 deletions(-) create mode 100644 dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx create mode 100644 dapp/src/assets/icons/animated/index.ts create mode 100644 dapp/src/theme/utils/units.ts diff --git a/dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx b/dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx new file mode 100644 index 000000000..fad0bcd91 --- /dev/null +++ b/dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx @@ -0,0 +1,69 @@ +import React from "react" +import { ArrowUpRight } from "#/assets/icons" +import { Box, Flex, Icon } from "@chakra-ui/react" +import { Variants, motion } from "framer-motion" +import { chakraUnitToPx } from "#/theme/utils" + +const arrowUpVariants: Variants = { + initial: { + x: 0, + y: 0, + }, + animate: (boxSizePx: number) => ({ + x: [0, boxSizePx], + y: [0, -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, 0], + 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 ( + + + + + + + + + ) +} diff --git a/dapp/src/assets/icons/animated/index.ts b/dapp/src/assets/icons/animated/index.ts new file mode 100644 index 000000000..1a4701531 --- /dev/null +++ b/dapp/src/assets/icons/animated/index.ts @@ -0,0 +1 @@ +export * from "./ArrowUpRightAnimatedIcon" diff --git a/dapp/src/pages/OverviewPage/DocsCard.tsx b/dapp/src/pages/OverviewPage/DocsCard.tsx index 2844e6a75..0d7a5bcbe 100644 --- a/dapp/src/pages/OverviewPage/DocsCard.tsx +++ b/dapp/src/pages/OverviewPage/DocsCard.tsx @@ -1,8 +1,9 @@ import React from "react" -import { Card } from "@chakra-ui/react" +import { Card, HStack } from "@chakra-ui/react" import { useDocsDrawer } from "#/hooks" import { TextSm } from "#/components/shared/Typography" -import ButtonLink from "#/components/shared/ButtonLink" +import { ArrowUpRightAnimatedIcon } from "#/assets/icons/animated" +import { motion } from "framer-motion" export function DocsCard() { const { onOpen } = useDocsDrawer() @@ -11,22 +12,20 @@ export function DocsCard() { - - Documentation - - + + + Documentation + Everything you need to know about our contracts. ) diff --git a/dapp/src/theme/utils/index.ts b/dapp/src/theme/utils/index.ts index d2fad7e05..c7cef473b 100644 --- a/dapp/src/theme/utils/index.ts +++ b/dapp/src/theme/utils/index.ts @@ -2,3 +2,4 @@ export * from "./colors" export * from "./fonts" export * from "./zIndices" export * from "./semanticTokens" +export * from "./units" diff --git a/dapp/src/theme/utils/units.ts b/dapp/src/theme/utils/units.ts new file mode 100644 index 000000000..d4dc9b844 --- /dev/null +++ b/dapp/src/theme/utils/units.ts @@ -0,0 +1,2 @@ +// The values are proportional, so 1 spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers. +export const chakraUnitToPx = (chakraUnit: number): number => chakraUnit * 4 From f1218a705aa0364c753f29d726d22233fe6e4bd1 Mon Sep 17 00:00:00 2001 From: ioay Date: Wed, 13 Mar 2024 13:23:10 +0100 Subject: [PATCH 03/15] Added chakraSpacingUnit --- dapp/src/theme/utils/units.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/dapp/src/theme/utils/units.ts b/dapp/src/theme/utils/units.ts index d4dc9b844..c6c7df1b8 100644 --- a/dapp/src/theme/utils/units.ts +++ b/dapp/src/theme/utils/units.ts @@ -1,2 +1,7 @@ // The values are proportional, so 1 spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers. -export const chakraUnitToPx = (chakraUnit: number): number => chakraUnit * 4 +const chakraSpacingUnit = { + px: 4, + rem: 0.25, +} +export const chakraUnitToPx = (chakraUnit: number): number => + chakraUnit * chakraSpacingUnit.px From 7344c8b508446e571cbd2a7716e281637d59c3c0 Mon Sep 17 00:00:00 2001 From: ioay Date: Wed, 13 Mar 2024 17:12:50 +0100 Subject: [PATCH 04/15] Styles improvements --- dapp/src/components/GlobalStyles/index.tsx | 6 ++++-- dapp/src/components/shared/Activities/ActivityBar.tsx | 6 +++--- .../shared/Activities/ActivityCard/ActivityCard.tsx | 7 +++---- dapp/src/pages/ActivityPage/ActivityDetails.tsx | 9 ++++++--- 4 files changed, 16 insertions(+), 12 deletions(-) diff --git a/dapp/src/components/GlobalStyles/index.tsx b/dapp/src/components/GlobalStyles/index.tsx index 920139ca2..5fd79a4e5 100644 --- a/dapp/src/components/GlobalStyles/index.tsx +++ b/dapp/src/components/GlobalStyles/index.tsx @@ -41,11 +41,13 @@ 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. + // 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. + // 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; diff --git a/dapp/src/components/shared/Activities/ActivityBar.tsx b/dapp/src/components/shared/Activities/ActivityBar.tsx index e3b35fcc8..4868b2244 100644 --- a/dapp/src/components/shared/Activities/ActivityBar.tsx +++ b/dapp/src/components/shared/Activities/ActivityBar.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useState } from "react" -import { Flex } from "@chakra-ui/react" +import { VStack } from "@chakra-ui/react" import { ActivityCard } from "./ActivityCard" import { mockedActivities } from "./mock-activities" @@ -18,7 +18,7 @@ export function ActivityBar() { ) return ( - + {activities.map((activity) => ( ))} - + ) } diff --git a/dapp/src/components/shared/Activities/ActivityCard/ActivityCard.tsx b/dapp/src/components/shared/Activities/ActivityCard/ActivityCard.tsx index f7c2fcb1a..16f5524a0 100644 --- a/dapp/src/components/shared/Activities/ActivityCard/ActivityCard.tsx +++ b/dapp/src/components/shared/Activities/ActivityCard/ActivityCard.tsx @@ -11,7 +11,6 @@ import { } 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" @@ -73,9 +72,9 @@ export function ActivityCard({ )} - - - {capitalize(activity.action)} + + + {activity.action} diff --git a/dapp/src/pages/ActivityPage/ActivityDetails.tsx b/dapp/src/pages/ActivityPage/ActivityDetails.tsx index 05f82fd82..53d56b9c0 100644 --- a/dapp/src/pages/ActivityPage/ActivityDetails.tsx +++ b/dapp/src/pages/ActivityPage/ActivityDetails.tsx @@ -10,7 +10,6 @@ import { Flex, Text, } from "@chakra-ui/react" -import { capitalize } from "#/utils" import ActivityProgress from "#/assets/images/activity-progress.png" import { LocationState } from "#/types" import StatusInfo from "#/components/shared/StatusInfo" @@ -46,8 +45,12 @@ function ActivityDetails() { - - {capitalize(activity.action)} + + {activity.action} Date: Thu, 14 Mar 2024 00:32:28 +0100 Subject: [PATCH 05/15] Activities carousel structure refactoring --- dapp/src/components/shared/Activities/index.tsx | 2 -- .../shared/{Activities => }/ActivityCard/ActivityCard.tsx | 0 .../ActivityCard/ActivityCardLinkWrapper.tsx | 0 .../{Activities => }/ActivityCard/ActivityCardWrapper.tsx | 0 .../shared/{Activities => }/ActivityCard/index.tsx | 0 .../shared/{Activities => ActivityCard}/mock-activities.ts | 0 .../Activities => pages/ActivityPage}/ActivityBar.tsx | 4 ++-- dapp/src/pages/ActivityPage/index.tsx | 2 +- .../OverviewPage}/ActivityCarousel/ActivityCarousel.tsx | 4 ++-- .../OverviewPage}/ActivityCarousel/index.tsx | 0 .../OverviewPage}/ActivityCarousel/utils/carouselArrows.tsx | 0 .../ActivityCarousel/utils/carouselSettings.tsx | 0 .../OverviewPage}/ActivityCarousel/utils/index.ts | 0 dapp/src/pages/OverviewPage/DocsCard.tsx | 5 +++-- dapp/src/pages/OverviewPage/index.tsx | 6 +++--- 15 files changed, 11 insertions(+), 12 deletions(-) delete mode 100644 dapp/src/components/shared/Activities/index.tsx rename dapp/src/components/shared/{Activities => }/ActivityCard/ActivityCard.tsx (100%) rename dapp/src/components/shared/{Activities => }/ActivityCard/ActivityCardLinkWrapper.tsx (100%) rename dapp/src/components/shared/{Activities => }/ActivityCard/ActivityCardWrapper.tsx (100%) rename dapp/src/components/shared/{Activities => }/ActivityCard/index.tsx (100%) rename dapp/src/components/shared/{Activities => ActivityCard}/mock-activities.ts (100%) rename dapp/src/{components/shared/Activities => pages/ActivityPage}/ActivityBar.tsx (82%) rename dapp/src/{components/shared/Activities => pages/OverviewPage}/ActivityCarousel/ActivityCarousel.tsx (91%) rename dapp/src/{components/shared/Activities => pages/OverviewPage}/ActivityCarousel/index.tsx (100%) rename dapp/src/{components/shared/Activities => pages/OverviewPage}/ActivityCarousel/utils/carouselArrows.tsx (100%) rename dapp/src/{components/shared/Activities => pages/OverviewPage}/ActivityCarousel/utils/carouselSettings.tsx (100%) rename dapp/src/{components/shared/Activities => pages/OverviewPage}/ActivityCarousel/utils/index.ts (100%) diff --git a/dapp/src/components/shared/Activities/index.tsx b/dapp/src/components/shared/Activities/index.tsx deleted file mode 100644 index f1f7edeea..000000000 --- a/dapp/src/components/shared/Activities/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./ActivityBar" -export * from "./ActivityCarousel" diff --git a/dapp/src/components/shared/Activities/ActivityCard/ActivityCard.tsx b/dapp/src/components/shared/ActivityCard/ActivityCard.tsx similarity index 100% rename from dapp/src/components/shared/Activities/ActivityCard/ActivityCard.tsx rename to dapp/src/components/shared/ActivityCard/ActivityCard.tsx diff --git a/dapp/src/components/shared/Activities/ActivityCard/ActivityCardLinkWrapper.tsx b/dapp/src/components/shared/ActivityCard/ActivityCardLinkWrapper.tsx similarity index 100% rename from dapp/src/components/shared/Activities/ActivityCard/ActivityCardLinkWrapper.tsx rename to dapp/src/components/shared/ActivityCard/ActivityCardLinkWrapper.tsx diff --git a/dapp/src/components/shared/Activities/ActivityCard/ActivityCardWrapper.tsx b/dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx similarity index 100% rename from dapp/src/components/shared/Activities/ActivityCard/ActivityCardWrapper.tsx rename to dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx diff --git a/dapp/src/components/shared/Activities/ActivityCard/index.tsx b/dapp/src/components/shared/ActivityCard/index.tsx similarity index 100% rename from dapp/src/components/shared/Activities/ActivityCard/index.tsx rename to dapp/src/components/shared/ActivityCard/index.tsx diff --git a/dapp/src/components/shared/Activities/mock-activities.ts b/dapp/src/components/shared/ActivityCard/mock-activities.ts similarity index 100% rename from dapp/src/components/shared/Activities/mock-activities.ts rename to dapp/src/components/shared/ActivityCard/mock-activities.ts diff --git a/dapp/src/components/shared/Activities/ActivityBar.tsx b/dapp/src/pages/ActivityPage/ActivityBar.tsx similarity index 82% rename from dapp/src/components/shared/Activities/ActivityBar.tsx rename to dapp/src/pages/ActivityPage/ActivityBar.tsx index 4868b2244..f837eb0e4 100644 --- a/dapp/src/components/shared/Activities/ActivityBar.tsx +++ b/dapp/src/pages/ActivityPage/ActivityBar.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useState } from "react" import { VStack } from "@chakra-ui/react" -import { ActivityCard } from "./ActivityCard" -import { mockedActivities } from "./mock-activities" +import { ActivityCard } from "../../components/shared/ActivityCard" +import { mockedActivities } from "../../components/shared/ActivityCard/mock-activities" export function ActivityBar() { // TODO: Lines 8-18 should be replaced by redux store when subgraphs are implemented diff --git a/dapp/src/pages/ActivityPage/index.tsx b/dapp/src/pages/ActivityPage/index.tsx index 77afcc62a..8d61143c2 100644 --- a/dapp/src/pages/ActivityPage/index.tsx +++ b/dapp/src/pages/ActivityPage/index.tsx @@ -4,8 +4,8 @@ import { Flex, Link as ChakraLink, Icon } from "@chakra-ui/react" import { Link as ReactRouterLink } from "react-router-dom" import { useSidebar } from "#/hooks" import { ArrowLeft } from "#/assets/icons" -import { ActivityBar } from "#/components/shared/Activities" import ActivityDetails from "./ActivityDetails" +import { ActivityBar } from "./ActivityBar" export default function ActivityPage() { const { onOpen: openSideBar, onClose: closeSidebar } = useSidebar() diff --git a/dapp/src/components/shared/Activities/ActivityCarousel/ActivityCarousel.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx similarity index 91% rename from dapp/src/components/shared/Activities/ActivityCarousel/ActivityCarousel.tsx rename to dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx index edbf6ff82..8b136d0f5 100644 --- a/dapp/src/components/shared/Activities/ActivityCarousel/ActivityCarousel.tsx +++ b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx @@ -1,9 +1,9 @@ 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 { ActivityCard } from "../../../components/shared/ActivityCard" import { activityCarouselSettings } from "./utils" -import { mockedActivities } from "../mock-activities" +import { mockedActivities } from "../../../components/shared/ActivityCard/mock-activities" export function ActivityCarousel({ ...props }: BoxProps) { const sliderRef = useRef(null) diff --git a/dapp/src/components/shared/Activities/ActivityCarousel/index.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/index.tsx similarity index 100% rename from dapp/src/components/shared/Activities/ActivityCarousel/index.tsx rename to dapp/src/pages/OverviewPage/ActivityCarousel/index.tsx diff --git a/dapp/src/components/shared/Activities/ActivityCarousel/utils/carouselArrows.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselArrows.tsx similarity index 100% rename from dapp/src/components/shared/Activities/ActivityCarousel/utils/carouselArrows.tsx rename to dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselArrows.tsx diff --git a/dapp/src/components/shared/Activities/ActivityCarousel/utils/carouselSettings.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselSettings.tsx similarity index 100% rename from dapp/src/components/shared/Activities/ActivityCarousel/utils/carouselSettings.tsx rename to dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselSettings.tsx diff --git a/dapp/src/components/shared/Activities/ActivityCarousel/utils/index.ts b/dapp/src/pages/OverviewPage/ActivityCarousel/utils/index.ts similarity index 100% rename from dapp/src/components/shared/Activities/ActivityCarousel/utils/index.ts rename to dapp/src/pages/OverviewPage/ActivityCarousel/utils/index.ts diff --git a/dapp/src/pages/OverviewPage/DocsCard.tsx b/dapp/src/pages/OverviewPage/DocsCard.tsx index 0d7a5bcbe..0c124ffff 100644 --- a/dapp/src/pages/OverviewPage/DocsCard.tsx +++ b/dapp/src/pages/OverviewPage/DocsCard.tsx @@ -1,11 +1,11 @@ import React from "react" -import { Card, HStack } from "@chakra-ui/react" +import { Card, CardProps, HStack } from "@chakra-ui/react" import { useDocsDrawer } from "#/hooks" import { TextSm } from "#/components/shared/Typography" import { ArrowUpRightAnimatedIcon } from "#/assets/icons/animated" import { motion } from "framer-motion" -export function DocsCard() { +export function DocsCard({ ...props }: CardProps) { const { onOpen } = useDocsDrawer() return ( @@ -21,6 +21,7 @@ export function DocsCard() { initial="initial" whileHover="animate" cursor="pointer" + {...props} > diff --git a/dapp/src/pages/OverviewPage/index.tsx b/dapp/src/pages/OverviewPage/index.tsx index 3ebbf743d..b3eb4ca82 100644 --- a/dapp/src/pages/OverviewPage/index.tsx +++ b/dapp/src/pages/OverviewPage/index.tsx @@ -2,11 +2,11 @@ import React from "react" import { Flex, Grid, HStack, SimpleGrid, Switch } from "@chakra-ui/react" import { TextSm } from "#/components/shared/Typography" import { USD } from "#/constants" -import { ActivityCarousel } from "#/components/shared/Activities/" import PositionDetails from "./PositionDetails" import Statistics from "./Statistics" import TransactionHistory from "./TransactionHistory" import { DocsCard } from "./DocsCard" +import { ActivityCarousel } from "./ActivityCarousel" export default function OverviewPage() { return ( @@ -19,10 +19,10 @@ export default function OverviewPage() { - + Date: Thu, 14 Mar 2024 11:11:12 +0100 Subject: [PATCH 06/15] Update react-router: based on id params instead of passing state --- .../shared/ActivityCard/ActivityCard.tsx | 9 ++++----- .../ActivityCard/ActivityCardLinkWrapper.tsx | 11 ++++------- .../ActivityCard/ActivityCardWrapper.tsx | 2 +- dapp/src/pages/ActivityPage/ActivityBar.tsx | 16 +++++++++------- .../pages/ActivityPage/ActivityDetails.tsx | 9 ++------- dapp/src/pages/ActivityPage/index.tsx | 19 ++++++++++++++----- dapp/src/router/index.tsx | 2 +- 7 files changed, 35 insertions(+), 33 deletions(-) diff --git a/dapp/src/components/shared/ActivityCard/ActivityCard.tsx b/dapp/src/components/shared/ActivityCard/ActivityCard.tsx index 16f5524a0..264974f6f 100644 --- a/dapp/src/components/shared/ActivityCard/ActivityCard.tsx +++ b/dapp/src/components/shared/ActivityCard/ActivityCard.tsx @@ -9,8 +9,7 @@ import { Tooltip, CloseButton, } from "@chakra-ui/react" -import { useLocation } from "react-router-dom" -import { ActivityInfo, LocationState } from "#/types" +import { ActivityInfo } from "#/types" import { ChevronRightIcon } from "#/assets/icons" import { CurrencyBalance } from "#/components/shared/CurrencyBalance" import StatusInfo from "#/components/shared/StatusInfo" @@ -21,15 +20,15 @@ import { ActivityCardLinkWrapper } from "./ActivityCardLinkWrapper" type ActivityCardType = CardProps & { activity: ActivityInfo onRemove: (txHash: string) => void + isActive?: boolean } export function ActivityCard({ activity, onRemove, + isActive, ...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( @@ -43,7 +42,7 @@ export function ActivityCard({ ) return ( - + diff --git a/dapp/src/components/shared/ActivityCard/ActivityCardLinkWrapper.tsx b/dapp/src/components/shared/ActivityCard/ActivityCardLinkWrapper.tsx index 9453c0b36..527412023 100644 --- a/dapp/src/components/shared/ActivityCard/ActivityCardLinkWrapper.tsx +++ b/dapp/src/components/shared/ActivityCard/ActivityCardLinkWrapper.tsx @@ -1,25 +1,22 @@ 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 + activityId: string children: React.ReactNode } export function ActivityCardLinkWrapper({ - activity, + activityId, children, ...props }: ActivityCardLinkWrapperProps) { return ( {children} diff --git a/dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx b/dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx index 2a85c122d..816761c55 100644 --- a/dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx +++ b/dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx @@ -3,8 +3,8 @@ import { CardProps, Card } from "@chakra-ui/react" type ActivityCardWrapperProps = CardProps & { isCompleted: boolean - isActive: boolean children: React.ReactNode + isActive?: boolean } const completedStyles = { diff --git a/dapp/src/pages/ActivityPage/ActivityBar.tsx b/dapp/src/pages/ActivityPage/ActivityBar.tsx index f837eb0e4..64cb4d90d 100644 --- a/dapp/src/pages/ActivityPage/ActivityBar.tsx +++ b/dapp/src/pages/ActivityPage/ActivityBar.tsx @@ -1,16 +1,17 @@ import React, { useCallback, useState } from "react" import { VStack } from "@chakra-ui/react" -import { ActivityCard } from "../../components/shared/ActivityCard" -import { mockedActivities } from "../../components/shared/ActivityCard/mock-activities" +import { mockedActivities } from "#/components/shared/ActivityCard/mock-activities" +import { ActivityCard } from "#/components/shared/ActivityCard" +import { ActivityInfo } from "#/types" -export function ActivityBar() { +export function ActivityBar({ activity }: { activity: ActivityInfo }) { // TODO: Lines 8-18 should be replaced by redux store when subgraphs are implemented const [activities, setActivities] = useState(mockedActivities) const onRemove = useCallback( (activityHash: string) => { const filteredActivities = activities.filter( - (activity) => activity.txHash !== activityHash, + (_activity) => _activity.txHash !== activityHash, ) setActivities(filteredActivities) }, @@ -19,11 +20,12 @@ export function ActivityBar() { return ( - {activities.map((activity) => ( + {activities.map((_activity) => ( ))} diff --git a/dapp/src/pages/ActivityPage/ActivityDetails.tsx b/dapp/src/pages/ActivityPage/ActivityDetails.tsx index 53d56b9c0..2aa4ad2d3 100644 --- a/dapp/src/pages/ActivityPage/ActivityDetails.tsx +++ b/dapp/src/pages/ActivityPage/ActivityDetails.tsx @@ -1,5 +1,4 @@ import React from "react" -import { useLocation } from "react-router-dom" import { Card, CardBody, @@ -11,17 +10,13 @@ import { Text, } from "@chakra-ui/react" import ActivityProgress from "#/assets/images/activity-progress.png" -import { LocationState } from "#/types" import StatusInfo from "#/components/shared/StatusInfo" import { TextMd, TextSm } from "#/components/shared/Typography" import Spinner from "#/components/shared/Spinner" import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion" +import { ActivityInfo } from "#/types" -function ActivityDetails() { - const location = useLocation() - - const { activity } = location.state as LocationState - +function ActivityDetails({ activity }: { activity: ActivityInfo }) { return ( {activity.status === "pending" && ( diff --git a/dapp/src/pages/ActivityPage/index.tsx b/dapp/src/pages/ActivityPage/index.tsx index 8d61143c2..6cb80f425 100644 --- a/dapp/src/pages/ActivityPage/index.tsx +++ b/dapp/src/pages/ActivityPage/index.tsx @@ -1,14 +1,20 @@ import React, { useEffect } from "react" import { Flex, Link as ChakraLink, Icon } from "@chakra-ui/react" -import { Link as ReactRouterLink } from "react-router-dom" +import { Link as ReactRouterLink, useParams } from "react-router-dom" import { useSidebar } from "#/hooks" import { ArrowLeft } from "#/assets/icons" +import { mockedActivities } from "#/components/shared/ActivityCard/mock-activities" import ActivityDetails from "./ActivityDetails" import { ActivityBar } from "./ActivityBar" export default function ActivityPage() { const { onOpen: openSideBar, onClose: closeSidebar } = useSidebar() + const params = useParams() + + const selectedActivity = mockedActivities.find( + (_activity) => _activity.txHash === params.activityId, + ) useEffect(() => { openSideBar() @@ -28,10 +34,13 @@ export default function ActivityPage() { _hover={{ color: "white", bg: "brand.400" }} /> - - - - + {selectedActivity && ( + + {} + + + + )} ) } diff --git a/dapp/src/router/index.tsx b/dapp/src/router/index.tsx index 357a14aad..4b1a73388 100644 --- a/dapp/src/router/index.tsx +++ b/dapp/src/router/index.tsx @@ -9,7 +9,7 @@ export const router = createBrowserRouter([ element: , }, { - path: "activity-details", + path: "activity-details/:activityId", element: , }, ]) From ba6d8ee4ec1b0e3754f4015a1f4660e87423f922 Mon Sep 17 00:00:00 2001 From: ioay Date: Thu, 14 Mar 2024 15:36:38 +0100 Subject: [PATCH 07/15] ActivityCard linking, overviewPage improvements --- .../shared/ActivityCard/ActivityCard.tsx | 97 ++++++++++--------- .../ActivityCard/ActivityCardLinkWrapper.tsx | 25 ----- .../ActivityCard/ActivityCardWrapper.tsx | 10 +- dapp/src/pages/OverviewPage/index.tsx | 8 +- dapp/src/router/index.tsx | 5 +- dapp/src/router/path.ts | 4 + 6 files changed, 69 insertions(+), 80 deletions(-) delete mode 100644 dapp/src/components/shared/ActivityCard/ActivityCardLinkWrapper.tsx create mode 100644 dapp/src/router/path.ts diff --git a/dapp/src/components/shared/ActivityCard/ActivityCard.tsx b/dapp/src/components/shared/ActivityCard/ActivityCard.tsx index 264974f6f..6cfe75833 100644 --- a/dapp/src/components/shared/ActivityCard/ActivityCard.tsx +++ b/dapp/src/components/shared/ActivityCard/ActivityCard.tsx @@ -9,13 +9,14 @@ import { Tooltip, CloseButton, } from "@chakra-ui/react" +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 { routerPath } from "#/router/path" import { ActivityCardWrapper } from "./ActivityCardWrapper" -import { ActivityCardLinkWrapper } from "./ActivityCardLinkWrapper" type ActivityCardType = CardProps & { activity: ActivityInfo @@ -27,10 +28,14 @@ export function ActivityCard({ activity, onRemove, isActive, - ...props }: ActivityCardType) { + const navigate = useNavigate() const isCompleted = activity.status === "completed" + const onClick = () => { + navigate(`${routerPath.activity}/${activity.txHash}`) + } + const onClose = useCallback( (event: React.MouseEvent) => { event.preventDefault() @@ -42,49 +47,51 @@ export function ActivityCard({ ) return ( - - - - - - {isCompleted ? ( - - - - ) : ( - - )} - - - - - {activity.action} - - - - + + + - - - + {isCompleted ? ( + + + + ) : ( + + )} + + + + + {activity.action} + + + + + + ) } diff --git a/dapp/src/components/shared/ActivityCard/ActivityCardLinkWrapper.tsx b/dapp/src/components/shared/ActivityCard/ActivityCardLinkWrapper.tsx deleted file mode 100644 index 527412023..000000000 --- a/dapp/src/components/shared/ActivityCard/ActivityCardLinkWrapper.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react" -import { Link as ReactRouterLink } from "react-router-dom" -import { Link as ChakraLink } from "@chakra-ui/react" - -type ActivityCardLinkWrapperProps = { - activityId: string - children: React.ReactNode -} - -export function ActivityCardLinkWrapper({ - activityId, - children, - ...props -}: ActivityCardLinkWrapperProps) { - return ( - - {children} - - ) -} diff --git a/dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx b/dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx index 816761c55..7ec00cbb3 100644 --- a/dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx +++ b/dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx @@ -42,10 +42,11 @@ export function ActivityCardWrapper({ }: ActivityCardWrapperProps) { return ( {children} diff --git a/dapp/src/pages/OverviewPage/index.tsx b/dapp/src/pages/OverviewPage/index.tsx index b3eb4ca82..4504b8108 100644 --- a/dapp/src/pages/OverviewPage/index.tsx +++ b/dapp/src/pages/OverviewPage/index.tsx @@ -1,5 +1,5 @@ import React from "react" -import { Flex, Grid, HStack, SimpleGrid, Switch } from "@chakra-ui/react" +import { Flex, Grid, HStack, Switch } from "@chakra-ui/react" import { TextSm } from "#/components/shared/Typography" import { USD } from "#/constants" import PositionDetails from "./PositionDetails" @@ -17,13 +17,13 @@ export default function OverviewPage() { Show values in {USD.symbol} - - + , }, { - path: "activity-details/:activityId", + path: `${routerPath.activity}/:activityId`, element: , }, ]) diff --git a/dapp/src/router/path.ts b/dapp/src/router/path.ts new file mode 100644 index 000000000..be0fbef7c --- /dev/null +++ b/dapp/src/router/path.ts @@ -0,0 +1,4 @@ +export const routerPath = { + home: "/", + activity: "/activity-details", +} From c78989f4f1428a676ac89766a0922f563993a5fe Mon Sep 17 00:00:00 2001 From: ioay Date: Thu, 14 Mar 2024 17:46:03 +0100 Subject: [PATCH 08/15] Moved carousel to shared components --- .../shared/ActivityCard/ActivityCard.tsx | 6 ++-- .../components/shared/Carousel/Carousel.tsx | 31 +++++++++++++++++++ dapp/src/mock/index.ts | 1 + .../ActivityCard => mock}/mock-activities.ts | 0 dapp/src/pages/ActivityPage/ActivityBar.tsx | 2 +- dapp/src/pages/ActivityPage/index.tsx | 2 +- .../ActivityCarousel/ActivityCarousel.tsx | 20 ++++++------ .../utils/carouselSettings.tsx | 7 ----- 8 files changed, 47 insertions(+), 22 deletions(-) create mode 100644 dapp/src/components/shared/Carousel/Carousel.tsx create mode 100644 dapp/src/mock/index.ts rename dapp/src/{components/shared/ActivityCard => mock}/mock-activities.ts (100%) diff --git a/dapp/src/components/shared/ActivityCard/ActivityCard.tsx b/dapp/src/components/shared/ActivityCard/ActivityCard.tsx index 6cfe75833..118eb2a8f 100644 --- a/dapp/src/components/shared/ActivityCard/ActivityCard.tsx +++ b/dapp/src/components/shared/ActivityCard/ActivityCard.tsx @@ -32,13 +32,13 @@ export function ActivityCard({ const navigate = useNavigate() const isCompleted = activity.status === "completed" - const onClick = () => { + 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) } diff --git a/dapp/src/components/shared/Carousel/Carousel.tsx b/dapp/src/components/shared/Carousel/Carousel.tsx new file mode 100644 index 000000000..dfa20252a --- /dev/null +++ b/dapp/src/components/shared/Carousel/Carousel.tsx @@ -0,0 +1,31 @@ +import React, { forwardRef } from "react" +import { BoxProps, Flex } from "@chakra-ui/react" +import Slider from "react-slick" + +const carouselSettings = { + dots: false, + infinite: false, + draggable: false, + variableWidth: true, + speed: 500, + slidesToShow: 12, + slidesToScroll: 1, +} + +type CarouselProps = BoxProps & { + children: React.ReactNode +} + +export const Carousel = forwardRef( + (props, ref) => ( + + {props.children} + + ), +) diff --git a/dapp/src/mock/index.ts b/dapp/src/mock/index.ts new file mode 100644 index 000000000..38a72fdb4 --- /dev/null +++ b/dapp/src/mock/index.ts @@ -0,0 +1 @@ +export * from "./mock-activities" diff --git a/dapp/src/components/shared/ActivityCard/mock-activities.ts b/dapp/src/mock/mock-activities.ts similarity index 100% rename from dapp/src/components/shared/ActivityCard/mock-activities.ts rename to dapp/src/mock/mock-activities.ts diff --git a/dapp/src/pages/ActivityPage/ActivityBar.tsx b/dapp/src/pages/ActivityPage/ActivityBar.tsx index 64cb4d90d..8fe91bbd8 100644 --- a/dapp/src/pages/ActivityPage/ActivityBar.tsx +++ b/dapp/src/pages/ActivityPage/ActivityBar.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useState } from "react" import { VStack } from "@chakra-ui/react" -import { mockedActivities } from "#/components/shared/ActivityCard/mock-activities" +import { mockedActivities } from "#/mock/mock-activities" import { ActivityCard } from "#/components/shared/ActivityCard" import { ActivityInfo } from "#/types" diff --git a/dapp/src/pages/ActivityPage/index.tsx b/dapp/src/pages/ActivityPage/index.tsx index 6cb80f425..4f445213d 100644 --- a/dapp/src/pages/ActivityPage/index.tsx +++ b/dapp/src/pages/ActivityPage/index.tsx @@ -4,7 +4,7 @@ import { Flex, Link as ChakraLink, Icon } from "@chakra-ui/react" import { Link as ReactRouterLink, useParams } from "react-router-dom" import { useSidebar } from "#/hooks" import { ArrowLeft } from "#/assets/icons" -import { mockedActivities } from "#/components/shared/ActivityCard/mock-activities" +import { mockedActivities } from "#/mock/mock-activities" import ActivityDetails from "./ActivityDetails" import { ActivityBar } from "./ActivityBar" diff --git a/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx index 8b136d0f5..2f6824a8f 100644 --- a/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx +++ b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx @@ -1,12 +1,13 @@ import React, { useCallback, useRef, useState } from "react" import Slider from "react-slick" -import { Box, HStack, BoxProps } from "@chakra-ui/react" -import { ActivityCard } from "../../../components/shared/ActivityCard" +import { Box, BoxProps } from "@chakra-ui/react" +import { Carousel } from "#/components/shared/Carousel/Carousel" +import { mockedActivities } from "#/mock" +import { ActivityCard } from "#/components/shared/ActivityCard" import { activityCarouselSettings } from "./utils" -import { mockedActivities } from "../../../components/shared/ActivityCard/mock-activities" export function ActivityCarousel({ ...props }: BoxProps) { - const sliderRef = useRef(null) + const carouselRef = useRef(null) // TODO: Lines 12-30 should be replaced by redux store when subgraphs are implemented const [activities, setActivities] = useState(mockedActivities) @@ -21,9 +22,9 @@ export function ActivityCarousel({ ...props }: BoxProps) { ) const isLastCard = removedIndex === activities.length - 1 if (isLastCard) { - sliderRef.current?.slickPrev() + carouselRef.current?.slickPrev() } - sliderRef.current?.forceUpdate() + carouselRef.current?.forceUpdate() setActivities(filteredActivities) }, [activities], @@ -31,10 +32,9 @@ export function ActivityCarousel({ ...props }: BoxProps) { return ( - ))} - + ) } diff --git a/dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselSettings.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselSettings.tsx index 701330e08..8ff29435f 100644 --- a/dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselSettings.tsx +++ b/dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselSettings.tsx @@ -8,13 +8,6 @@ import { NextArrowCarousel, PrevArrowCarousel } from "./carouselArrows" * and it depends on the width of the viewport. * */ export const activityCarouselSettings = { - dots: false, - infinite: false, - draggable: false, - variableWidth: true, - speed: 500, - slidesToShow: 12, - slidesToScroll: 1, nextArrow: , prevArrow: , responsive: [ From 1c5585af57a5909212958cb831119c18fc91064d Mon Sep 17 00:00:00 2001 From: ioay Date: Tue, 19 Mar 2024 17:11:39 +0100 Subject: [PATCH 09/15] Structure update, moved mocked activities to standalone hooks, minor improvements --- .../animated/ArrowUpRightAnimatedIcon.tsx | 16 ++++----- .../shared/{Carousel => }/Carousel.tsx | 13 +++---- dapp/src/hooks/index.ts | 1 + dapp/src/hooks/useActivities.ts | 25 +++++++++++++ dapp/src/pages/ActivityPage/index.tsx | 16 ++++----- .../ActivityCarousel/ActivityCarousel.tsx | 36 ++++++------------- ...lArrows.tsx => ActivityCarouselArrows.tsx} | 0 ...tings.tsx => ActivityCarouselSettings.tsx} | 2 +- .../ActivityCarousel/utils/index.ts | 2 -- dapp/src/pages/OverviewPage/DocsCard.tsx | 2 +- dapp/src/pages/OverviewPage/index.tsx | 4 +-- 11 files changed, 62 insertions(+), 55 deletions(-) rename dapp/src/components/shared/{Carousel => }/Carousel.tsx (64%) create mode 100644 dapp/src/hooks/useActivities.ts rename dapp/src/pages/OverviewPage/ActivityCarousel/{utils/carouselArrows.tsx => ActivityCarouselArrows.tsx} (100%) rename dapp/src/pages/OverviewPage/ActivityCarousel/{utils/carouselSettings.tsx => ActivityCarouselSettings.tsx} (94%) delete mode 100644 dapp/src/pages/OverviewPage/ActivityCarousel/utils/index.ts diff --git a/dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx b/dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx index fad0bcd91..49a8309ca 100644 --- a/dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx +++ b/dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx @@ -1,17 +1,17 @@ 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" const arrowUpVariants: Variants = { initial: { x: 0, - y: 0, + y: -5, }, animate: (boxSizePx: number) => ({ x: [0, boxSizePx], - y: [0, -boxSizePx], + y: [-5, -boxSizePx], transition: { duration: 0.4, ease: "easeInOut", @@ -26,7 +26,7 @@ const arrowBottomVariants: Variants = { }), animate: (boxSizePx: number) => ({ x: [-boxSizePx, 0], - y: [boxSizePx, 0], + y: [boxSizePx, -5], transition: { duration: 0.4, ease: "easeInOut", @@ -46,7 +46,7 @@ export function ArrowUpRightAnimatedIcon({ const boxSizePx = chakraUnitToPx(boxSize) return ( - - - + - + ) } diff --git a/dapp/src/components/shared/Carousel/Carousel.tsx b/dapp/src/components/shared/Carousel.tsx similarity index 64% rename from dapp/src/components/shared/Carousel/Carousel.tsx rename to dapp/src/components/shared/Carousel.tsx index dfa20252a..524a7aa2c 100644 --- a/dapp/src/components/shared/Carousel/Carousel.tsx +++ b/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( (props, ref) => ( diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts index 292568f86..4a5e2a88f 100644 --- a/dapp/src/hooks/index.ts +++ b/dapp/src/hooks/index.ts @@ -17,3 +17,4 @@ export * from "./useInitApp" export * from "./useCurrencyConversion" export * from "./useDepositTelemetry" export * from "./useFetchBTCPriceUSD" +export * from "./useActivities" diff --git a/dapp/src/hooks/useActivities.ts b/dapp/src/hooks/useActivities.ts new file mode 100644 index 000000000..07c8656d3 --- /dev/null +++ b/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 } +} diff --git a/dapp/src/pages/ActivityPage/index.tsx b/dapp/src/pages/ActivityPage/index.tsx index 4f445213d..6f1f450f4 100644 --- a/dapp/src/pages/ActivityPage/index.tsx +++ b/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" }} /> - {selectedActivity && ( + {activity && ( - {} - - + + )} diff --git a/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx index 2f6824a8f..0ca460043 100644 --- a/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx +++ b/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(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 ( @@ -53,7 +39,7 @@ export function ActivityCarousel({ ...props }: BoxProps) { ))} diff --git a/dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselArrows.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarouselArrows.tsx similarity index 100% rename from dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselArrows.tsx rename to dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarouselArrows.tsx diff --git a/dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselSettings.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarouselSettings.tsx similarity index 94% rename from dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselSettings.tsx rename to dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarouselSettings.tsx index 8ff29435f..ec0989a56 100644 --- a/dapp/src/pages/OverviewPage/ActivityCarousel/utils/carouselSettings.tsx +++ b/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. diff --git a/dapp/src/pages/OverviewPage/ActivityCarousel/utils/index.ts b/dapp/src/pages/OverviewPage/ActivityCarousel/utils/index.ts deleted file mode 100644 index 15749ecf0..000000000 --- a/dapp/src/pages/OverviewPage/ActivityCarousel/utils/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./carouselArrows" -export * from "./carouselSettings" diff --git a/dapp/src/pages/OverviewPage/DocsCard.tsx b/dapp/src/pages/OverviewPage/DocsCard.tsx index 0c124ffff..84aeab7ec 100644 --- a/dapp/src/pages/OverviewPage/DocsCard.tsx +++ b/dapp/src/pages/OverviewPage/DocsCard.tsx @@ -24,7 +24,7 @@ export function DocsCard({ ...props }: CardProps) { {...props} > - + Documentation Everything you need to know about our contracts. diff --git a/dapp/src/pages/OverviewPage/index.tsx b/dapp/src/pages/OverviewPage/index.tsx index 4504b8108..bf36ca424 100644 --- a/dapp/src/pages/OverviewPage/index.tsx +++ b/dapp/src/pages/OverviewPage/index.tsx @@ -18,11 +18,11 @@ export default function OverviewPage() { - + Date: Fri, 22 Mar 2024 20:25:49 +0100 Subject: [PATCH 10/15] Moving logic related to activities to useActivities hook --- .../shared/ActivityCard/ActivityCard.tsx | 31 +++++++++---------- .../ActivityCard/ActivityCardWrapper.tsx | 2 +- dapp/src/hooks/useActivities.ts | 31 ++++++++++++++++--- dapp/src/pages/ActivityPage/ActivityBar.tsx | 29 +++++------------ .../pages/ActivityPage/ActivityDetails.tsx | 18 ++++++----- dapp/src/pages/ActivityPage/index.tsx | 17 ++++------ .../ActivityCarousel/ActivityCarousel.tsx | 18 ++++++----- 7 files changed, 78 insertions(+), 68 deletions(-) diff --git a/dapp/src/components/shared/ActivityCard/ActivityCard.tsx b/dapp/src/components/shared/ActivityCard/ActivityCard.tsx index b54ce0e83..72d814f44 100644 --- a/dapp/src/components/shared/ActivityCard/ActivityCard.tsx +++ b/dapp/src/components/shared/ActivityCard/ActivityCard.tsx @@ -16,21 +16,20 @@ import { CurrencyBalance } from "#/components/shared/CurrencyBalance" import StatusInfo from "#/components/shared/StatusInfo" import { TextSm } from "#/components/shared/Typography" import { routerPath } from "#/router/path" +import { useActivities } from "#/hooks" import { ActivityCardWrapper } from "./ActivityCardWrapper" type ActivityCardType = CardProps & { activity: ActivityInfo - onRemove: (txHash: string) => void - isActive?: boolean + onRemove: (activity: ActivityInfo) => void } -export function ActivityCard({ - activity, - onRemove, - isActive, -}: ActivityCardType) { +export function ActivityCard({ activity, onRemove }: ActivityCardType) { const navigate = useNavigate() - const isCompleted = activity.status === "completed" + const { isCompleted, isSelected } = useActivities() + + const isActivitySelected = isSelected(activity) + const isActivityCompleted = isCompleted(activity) const onClick = useCallback(() => { navigate(`${routerPath.activity}/${activity.txHash}`) @@ -39,17 +38,17 @@ export function ActivityCard({ const onClose = useCallback( (event: React.MouseEvent) => { event.stopPropagation() - if (activity.txHash) { - onRemove(activity.txHash) + if (activity) { + onRemove(activity) } }, - [onRemove, activity.txHash], + [activity, onRemove], ) return ( @@ -61,7 +60,7 @@ export function ActivityCard({ balanceFontWeight="black" symbolFontWeight="medium" /> - {isCompleted ? ( + {isActivityCompleted ? ( )} diff --git a/dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx b/dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx index 7ec00cbb3..4ac9c0691 100644 --- a/dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx +++ b/dapp/src/components/shared/ActivityCard/ActivityCardWrapper.tsx @@ -2,8 +2,8 @@ import React from "react" import { CardProps, Card } from "@chakra-ui/react" type ActivityCardWrapperProps = CardProps & { - isCompleted: boolean children: React.ReactNode + isCompleted: boolean isActive?: boolean } diff --git a/dapp/src/hooks/useActivities.ts b/dapp/src/hooks/useActivities.ts index 07c8656d3..d6764549b 100644 --- a/dapp/src/hooks/useActivities.ts +++ b/dapp/src/hooks/useActivities.ts @@ -1,9 +1,12 @@ import { useCallback, useState } from "react" import { mockedActivities } from "#/mock" +import { useParams } from "react-router-dom" +import { ActivityInfo } from "#/types" export function useActivities() { // TODO: should be replaced by redux store when subgraphs are implemented - const [activities, setActivities] = useState(mockedActivities) + const [activities, setActivities] = useState(mockedActivities) + const params = useParams() const getActivity = useCallback( (activityId?: string) => @@ -11,15 +14,33 @@ export function useActivities() { [activities], ) - const onRemove = useCallback( - (activityHash: string) => { + const removeActivity = useCallback( + (activity: ActivityInfo) => { const filteredActivities = activities.filter( - (activity) => activity.txHash !== activityHash, + (_activity) => _activity.txHash !== activity.txHash, ) setActivities(filteredActivities) }, [activities], ) - return { activities, getActivity, onRemove } + const selectedActivity = getActivity(params.activityId) + + const isSelected = useCallback( + (activity: ActivityInfo): boolean => + activity.txHash === getActivity(params.activityId)?.txHash, + [getActivity, params.activityId], + ) + + const isCompleted = (activity: ActivityInfo): boolean => + activity.status === "completed" + + return { + activities, + getActivity, + removeActivity, + selectedActivity, + isCompleted, + isSelected, + } } diff --git a/dapp/src/pages/ActivityPage/ActivityBar.tsx b/dapp/src/pages/ActivityPage/ActivityBar.tsx index 8fe91bbd8..c7d2ec48d 100644 --- a/dapp/src/pages/ActivityPage/ActivityBar.tsx +++ b/dapp/src/pages/ActivityPage/ActivityBar.tsx @@ -1,31 +1,18 @@ -import React, { useCallback, useState } from "react" +import React from "react" import { VStack } from "@chakra-ui/react" -import { mockedActivities } from "#/mock/mock-activities" import { ActivityCard } from "#/components/shared/ActivityCard" -import { ActivityInfo } from "#/types" +import { useActivities } from "#/hooks" -export function ActivityBar({ activity }: { activity: ActivityInfo }) { - // TODO: Lines 8-18 should be replaced by redux store when subgraphs are implemented - const [activities, setActivities] = useState(mockedActivities) - - const onRemove = useCallback( - (activityHash: string) => { - const filteredActivities = activities.filter( - (_activity) => _activity.txHash !== activityHash, - ) - setActivities(filteredActivities) - }, - [activities], - ) +export function ActivityBar() { + const { activities, removeActivity } = useActivities() return ( - {activities.map((_activity) => ( + {activities.map((activity) => ( ))} diff --git a/dapp/src/pages/ActivityPage/ActivityDetails.tsx b/dapp/src/pages/ActivityPage/ActivityDetails.tsx index 2aa4ad2d3..dc45dd7a1 100644 --- a/dapp/src/pages/ActivityPage/ActivityDetails.tsx +++ b/dapp/src/pages/ActivityPage/ActivityDetails.tsx @@ -14,12 +14,16 @@ import StatusInfo from "#/components/shared/StatusInfo" import { TextMd, TextSm } from "#/components/shared/Typography" import Spinner from "#/components/shared/Spinner" import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion" -import { ActivityInfo } from "#/types" +import { useActivities } from "#/hooks" + +function ActivityDetails() { + const { selectedActivity } = useActivities() + + if (!selectedActivity) return null -function ActivityDetails({ activity }: { activity: ActivityInfo }) { return ( - {activity.status === "pending" && ( + {selectedActivity.status === "pending" && ( @@ -45,12 +49,12 @@ function ActivityDetails({ activity }: { activity: ActivityInfo }) { fontWeight="semibold" textTransform="capitalize" > - {activity.action} + {selectedActivity.action} { openSideBar() @@ -31,12 +28,10 @@ export default function ActivityPage() { _hover={{ color: "white", bg: "brand.400" }} /> - {activity && ( - - - - - )} + + + + ) } diff --git a/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx index 0ca460043..8987e812a 100644 --- a/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx +++ b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx @@ -1,20 +1,24 @@ -import React, { useRef } from "react" +import React, { useRef, useCallback } from "react" import Slider from "react-slick" import { Box, BoxProps } from "@chakra-ui/react" import { Carousel } from "#/components/shared/Carousel" import { ActivityCard } from "#/components/shared/ActivityCard" import { useActivities } from "#/hooks" +import { ActivityInfo } from "#/types" import { activityCarouselSettings } from "./ActivityCarouselSettings" export function ActivityCarousel({ ...props }: BoxProps) { const carouselRef = useRef(null) - const { activities, onRemove } = useActivities() + const { activities, removeActivity } = useActivities() - const handleRemove = (txHash: string) => { - carouselRef.current?.slickPrev() - carouselRef.current?.forceUpdate() - onRemove(txHash) - } + const handleRemove = useCallback( + (activity: ActivityInfo) => { + carouselRef.current?.slickPrev() + carouselRef.current?.forceUpdate() + removeActivity(activity) + }, + [removeActivity], + ) return ( From ae675fda04dad72496d9570bc44f8b27322e5d0f Mon Sep 17 00:00:00 2001 From: ioay Date: Fri, 22 Mar 2024 20:31:00 +0100 Subject: [PATCH 11/15] Carousel arrow rendering (mapping) --- .../animated/ArrowUpRightAnimatedIcon.tsx | 33 +++++++++---------- 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx b/dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx index 49a8309ca..ea95c22b7 100644 --- a/dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx +++ b/dapp/src/assets/icons/animated/ArrowUpRightAnimatedIcon.tsx @@ -46,24 +46,21 @@ export function ArrowUpRightAnimatedIcon({ const boxSizePx = chakraUnitToPx(boxSize) return ( - - - - - - + {[ + { id: "arrow-up", variants: arrowUpVariants }, + { id: "arrow-bottom", variants: arrowBottomVariants }, + ].map(({ id, variants }) => ( + + + + ))} ) } From ebb5f11b2101a575cd50d12ce6817171f3507e77 Mon Sep 17 00:00:00 2001 From: ioay Date: Fri, 22 Mar 2024 20:34:39 +0100 Subject: [PATCH 12/15] Reduce width of gradient under Documentation Card --- .../pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx index 8987e812a..c11ac88ea 100644 --- a/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx +++ b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx @@ -33,7 +33,7 @@ export function ActivityCarousel({ ...props }: BoxProps) { content: '""', pos: "absolute", right: 0, - w: 20, + w: 8, height: 40, bgGradient: "linear(to-r, transparent, gold.300)", }} From 40e709a1a6d137a1fa79fc9f5459e7306e1a0f9e Mon Sep 17 00:00:00 2001 From: ioay Date: Wed, 3 Apr 2024 18:40:15 +0200 Subject: [PATCH 13/15] Docs card minor change, rename settings file --- .../pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx | 2 +- .../{ActivityCarouselSettings.tsx => settings.tsx} | 0 dapp/src/pages/OverviewPage/DocsCard.tsx | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename dapp/src/pages/OverviewPage/ActivityCarousel/{ActivityCarouselSettings.tsx => settings.tsx} (100%) diff --git a/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx index c11ac88ea..e0c63c936 100644 --- a/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx +++ b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx @@ -5,7 +5,7 @@ import { Carousel } from "#/components/shared/Carousel" import { ActivityCard } from "#/components/shared/ActivityCard" import { useActivities } from "#/hooks" import { ActivityInfo } from "#/types" -import { activityCarouselSettings } from "./ActivityCarouselSettings" +import { activityCarouselSettings } from "./settings" export function ActivityCarousel({ ...props }: BoxProps) { const carouselRef = useRef(null) diff --git a/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarouselSettings.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/settings.tsx similarity index 100% rename from dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarouselSettings.tsx rename to dapp/src/pages/OverviewPage/ActivityCarousel/settings.tsx diff --git a/dapp/src/pages/OverviewPage/DocsCard.tsx b/dapp/src/pages/OverviewPage/DocsCard.tsx index 84aeab7ec..42db18181 100644 --- a/dapp/src/pages/OverviewPage/DocsCard.tsx +++ b/dapp/src/pages/OverviewPage/DocsCard.tsx @@ -5,7 +5,7 @@ import { TextSm } from "#/components/shared/Typography" import { ArrowUpRightAnimatedIcon } from "#/assets/icons/animated" import { motion } from "framer-motion" -export function DocsCard({ ...props }: CardProps) { +export function DocsCard(props: CardProps) { const { onOpen } = useDocsDrawer() return ( From eae07205a735b1cc60abb3f4eac3a37eba51dcc1 Mon Sep 17 00:00:00 2001 From: ioay Date: Mon, 8 Apr 2024 09:29:07 +0200 Subject: [PATCH 14/15] Styles update & added useCallback to useActivity hook --- dapp/src/components/GlobalStyles/index.tsx | 2 ++ dapp/src/components/shared/Carousel.tsx | 3 ++- dapp/src/hooks/useActivities.ts | 11 ++++++++--- dapp/src/pages/ActivityPage/ActivityDetails.tsx | 14 ++++++++------ .../ActivityCarousel/ActivityCarousel.tsx | 6 +++--- dapp/src/pages/OverviewPage/DocsCard.tsx | 1 - dapp/src/pages/OverviewPage/index.tsx | 5 +++-- 7 files changed, 26 insertions(+), 16 deletions(-) diff --git a/dapp/src/components/GlobalStyles/index.tsx b/dapp/src/components/GlobalStyles/index.tsx index 5fd79a4e5..5c93f8dc2 100644 --- a/dapp/src/components/GlobalStyles/index.tsx +++ b/dapp/src/components/GlobalStyles/index.tsx @@ -43,6 +43,8 @@ export default function GlobalStyles() { } // React-slick package: Chakra-ui with react-slick package doesn't // generate flex style for auto-generated slick-track wrapper. + // Instead of importing default styles for react-slick carousel + // we only add what we need - flex for the .slick-track. .slick-track { display: flex; } diff --git a/dapp/src/components/shared/Carousel.tsx b/dapp/src/components/shared/Carousel.tsx index 524a7aa2c..3ca5e2b2a 100644 --- a/dapp/src/components/shared/Carousel.tsx +++ b/dapp/src/components/shared/Carousel.tsx @@ -22,7 +22,8 @@ export const Carousel = forwardRef( diff --git a/dapp/src/hooks/useActivities.ts b/dapp/src/hooks/useActivities.ts index d6764549b..bf7a80a98 100644 --- a/dapp/src/hooks/useActivities.ts +++ b/dapp/src/hooks/useActivities.ts @@ -24,7 +24,10 @@ export function useActivities() { [activities], ) - const selectedActivity = getActivity(params.activityId) + const selectedActivity = useCallback( + () => getActivity(params.activityId), + [getActivity, params.activityId], + ) const isSelected = useCallback( (activity: ActivityInfo): boolean => @@ -32,8 +35,10 @@ export function useActivities() { [getActivity, params.activityId], ) - const isCompleted = (activity: ActivityInfo): boolean => - activity.status === "completed" + const isCompleted = useCallback( + (activity: ActivityInfo): boolean => activity.status === "completed", + [], + ) return { activities, diff --git a/dapp/src/pages/ActivityPage/ActivityDetails.tsx b/dapp/src/pages/ActivityPage/ActivityDetails.tsx index dc45dd7a1..44fd84b21 100644 --- a/dapp/src/pages/ActivityPage/ActivityDetails.tsx +++ b/dapp/src/pages/ActivityPage/ActivityDetails.tsx @@ -19,11 +19,13 @@ import { useActivities } from "#/hooks" function ActivityDetails() { const { selectedActivity } = useActivities() - if (!selectedActivity) return null + const currentActivity = selectedActivity() + + if (!currentActivity) return null return ( - {selectedActivity.status === "pending" && ( + {currentActivity.status === "pending" && ( @@ -49,12 +51,12 @@ function ActivityDetails() { fontWeight="semibold" textTransform="capitalize" > - {selectedActivity.action} + {currentActivity.action} ))} diff --git a/dapp/src/pages/OverviewPage/DocsCard.tsx b/dapp/src/pages/OverviewPage/DocsCard.tsx index 42db18181..dafe74c04 100644 --- a/dapp/src/pages/OverviewPage/DocsCard.tsx +++ b/dapp/src/pages/OverviewPage/DocsCard.tsx @@ -10,7 +10,6 @@ export function DocsCard(props: CardProps) { return ( From 3b5aea00c193b2b07e5ff9ce03c79dc12f471372 Mon Sep 17 00:00:00 2001 From: ioay Date: Mon, 8 Apr 2024 09:43:38 +0200 Subject: [PATCH 15/15] Moved carosuel settings directly to carousel component --- .../ActivityCarousel/ActivityCarousel.tsx | 81 ++++++++++++++++++- .../ActivityCarousel/settings.tsx | 81 ------------------- 2 files changed, 80 insertions(+), 82 deletions(-) delete mode 100644 dapp/src/pages/OverviewPage/ActivityCarousel/settings.tsx diff --git a/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx index bcd8130eb..3a35b9a9e 100644 --- a/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx +++ b/dapp/src/pages/OverviewPage/ActivityCarousel/ActivityCarousel.tsx @@ -5,7 +5,86 @@ import { Carousel } from "#/components/shared/Carousel" import { ActivityCard } from "#/components/shared/ActivityCard" import { useActivities } from "#/hooks" import { ActivityInfo } from "#/types" -import { activityCarouselSettings } from "./settings" +import { NextArrowCarousel, PrevArrowCarousel } from "./ActivityCarouselArrows" + +/* * + * Settings for react-slick carousel. + * Breakpoints are calculated based on with & visibility of activity card. + * slidesToShow attr is needed to correctly display the number of cards in the carousel + * and it depends on the width of the viewport. + * */ +export const activityCarouselSettings = { + nextArrow: , + prevArrow: , + responsive: [ + { + breakpoint: 820, + settings: { + slidesToShow: 1, + }, + }, + { + breakpoint: 1080, + settings: { + slidesToShow: 2, + }, + }, + { + breakpoint: 1360, + settings: { + slidesToShow: 3, + }, + }, + { + breakpoint: 1620, + settings: { + slidesToShow: 4, + }, + }, + { + breakpoint: 1900, + settings: { + slidesToShow: 5, + }, + }, + { + breakpoint: 2160, + settings: { + slidesToShow: 6, + }, + }, + { + breakpoint: 2440, + settings: { + slidesToShow: 7, + }, + }, + { + breakpoint: 2700, + settings: { + slidesToShow: 8, + }, + }, + { + breakpoint: 2980, + settings: { + slidesToShow: 9, + }, + }, + { + breakpoint: 3240, + settings: { + slidesToShow: 10, + }, + }, + { + breakpoint: 3520, + settings: { + slidesToShow: 11, + }, + }, + ], +} export function ActivityCarousel({ ...props }: BoxProps) { const carouselRef = useRef(null) diff --git a/dapp/src/pages/OverviewPage/ActivityCarousel/settings.tsx b/dapp/src/pages/OverviewPage/ActivityCarousel/settings.tsx deleted file mode 100644 index ec0989a56..000000000 --- a/dapp/src/pages/OverviewPage/ActivityCarousel/settings.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from "react" -import { NextArrowCarousel, PrevArrowCarousel } from "./ActivityCarouselArrows" - -/* * - * Settings for react-slick carousel. - * Breakpoints are calculated based on with & visibility of activity card. - * slidesToShow attr is needed to correctly display the number of cards in the carousel - * and it depends on the width of the viewport. - * */ -export const activityCarouselSettings = { - nextArrow: , - prevArrow: , - responsive: [ - { - breakpoint: 820, - settings: { - slidesToShow: 1, - }, - }, - { - breakpoint: 1080, - settings: { - slidesToShow: 2, - }, - }, - { - breakpoint: 1360, - settings: { - slidesToShow: 3, - }, - }, - { - breakpoint: 1620, - settings: { - slidesToShow: 4, - }, - }, - { - breakpoint: 1900, - settings: { - slidesToShow: 5, - }, - }, - { - breakpoint: 2160, - settings: { - slidesToShow: 6, - }, - }, - { - breakpoint: 2440, - settings: { - slidesToShow: 7, - }, - }, - { - breakpoint: 2700, - settings: { - slidesToShow: 8, - }, - }, - { - breakpoint: 2980, - settings: { - slidesToShow: 9, - }, - }, - { - breakpoint: 3240, - settings: { - slidesToShow: 10, - }, - }, - { - breakpoint: 3520, - settings: { - slidesToShow: 11, - }, - }, - ], -}