From 2aef02046104e606668ba7ee790e56bcdbfb4537 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 30 Apr 2024 15:14:11 +0200 Subject: [PATCH 01/11] Implement base structure for `StakingActivitiesList` --- .../shared/CurrencyBalance/index.tsx | 4 +- .../StakingActivitiesList.tsx | 21 ++++++ .../StakingActivitiesListItem.tsx | 65 +++++++++++++++++++ .../shared/StakingActivitiesList/index.ts | 2 + dapp/src/pages/OverviewPage/index.tsx | 20 ++++++ dapp/src/theme/Alert.ts | 3 + dapp/src/theme/Button.ts | 6 ++ dapp/src/types/currency.ts | 2 + 8 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx create mode 100644 dapp/src/components/shared/StakingActivitiesList/StakingActivitiesListItem.tsx create mode 100644 dapp/src/components/shared/StakingActivitiesList/index.ts diff --git a/dapp/src/components/shared/CurrencyBalance/index.tsx b/dapp/src/components/shared/CurrencyBalance/index.tsx index 7302a7d40..e14fcc0d6 100644 --- a/dapp/src/components/shared/CurrencyBalance/index.tsx +++ b/dapp/src/components/shared/CurrencyBalance/index.tsx @@ -5,11 +5,11 @@ import { getCurrencyByType, numberToLocaleString, } from "#/utils" -import { CurrencyType } from "#/types" +import { CurrencyType, AmountType } from "#/types" export type CurrencyBalanceProps = { currency: CurrencyType - amount?: string | number | bigint + amount?: AmountType shouldBeFormatted?: boolean desiredDecimals?: number size?: string diff --git a/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx b/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx new file mode 100644 index 000000000..0c7dbdb4b --- /dev/null +++ b/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx @@ -0,0 +1,21 @@ +import React from "react" +import { List, ListItem, ListProps } from "@chakra-ui/react" +import ActivitiesListItem, { + StakingActivitiesListItemType, +} from "./StakingActivitiesListItem" + +type StakingActivitiesListProps = ListProps & { + items: StakingActivitiesListItemType[] +} +function StakingActivitiesList(props: StakingActivitiesListProps) { + const { items, ...restProps } = props + return ( + + {items.map((item) => ( + + ))} + + ) +} + +export default StakingActivitiesList diff --git a/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesListItem.tsx b/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesListItem.tsx new file mode 100644 index 000000000..a1d5ee675 --- /dev/null +++ b/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesListItem.tsx @@ -0,0 +1,65 @@ +import React from "react" +import { AmountType } from "#/types" +import { + Alert, + AlertDescription, + AlertIcon, + AlertProps, + AlertTitle, + Button, + HStack, + Text, + VStack, + VisuallyHidden, +} from "@chakra-ui/react" +import ButtonLink from "../ButtonLink" +import { CurrencyBalance } from "../CurrencyBalance" + +export type StakingActivitiesListItemType = { + amount: AmountType + status: "pending" | "success" + transactionUrl?: string + estimatedTime?: number +} + +type StakingActivitiesListItemProps = Omit & + StakingActivitiesListItemType + +function StakingActivitiesListItem(props: StakingActivitiesListItemProps) { + const { amount, estimatedTime, status, transactionUrl, ...restProps } = props + + return ( + + + + + + + {status === "success" ? "Staking completed" : "Staking..."} + + + + + + + {status === "pending" && estimatedTime ? ( + <> + Est. time remaining: + {new Date(estimatedTime).getHours()}h + + ) : ( + + )} + + + + {transactionUrl && ( + + View transaction details + + )} + + ) +} + +export default StakingActivitiesListItem diff --git a/dapp/src/components/shared/StakingActivitiesList/index.ts b/dapp/src/components/shared/StakingActivitiesList/index.ts new file mode 100644 index 000000000..22b9fd69d --- /dev/null +++ b/dapp/src/components/shared/StakingActivitiesList/index.ts @@ -0,0 +1,2 @@ +export { default as StakingActivitiesList } from "./StakingActivitiesList" +export type { StakingActivitiesListItemType } from "./StakingActivitiesListItem" diff --git a/dapp/src/pages/OverviewPage/index.tsx b/dapp/src/pages/OverviewPage/index.tsx index 2a7433b92..da7993897 100644 --- a/dapp/src/pages/OverviewPage/index.tsx +++ b/dapp/src/pages/OverviewPage/index.tsx @@ -3,6 +3,7 @@ import { Flex, Grid, HStack, Switch } from "@chakra-ui/react" import { TextSm } from "#/components/shared/Typography" import { USD } from "#/constants" import { chakraUnitToPx } from "#/theme/utils" +import { StakingActivitiesList } from "#/components/shared/StakingActivitiesList" import PositionDetails from "./PositionDetails" import Statistics from "./Statistics" import TransactionHistory from "./TransactionHistory" @@ -10,6 +11,25 @@ import { DocsCard } from "./DocsCard" import { ActivityCarousel } from "./ActivityCarousel" export default function OverviewPage() { + return ( + + + + ) + return ( diff --git a/dapp/src/theme/Alert.ts b/dapp/src/theme/Alert.ts index cb002ea56..10abeaa72 100644 --- a/dapp/src/theme/Alert.ts +++ b/dapp/src/theme/Alert.ts @@ -61,8 +61,11 @@ const variantSubtle = multiStyleConfig.definePartsStyle((props) => statusStyles(props), ) +const processVariant = multiStyleConfig.definePartsStyle(() => ({})) + const variants = { subtle: variantSubtle, + process: processVariant, } export const alertTheme = multiStyleConfig.defineMultiStyleConfig({ diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts index ccb108bd7..dedc4b3bd 100644 --- a/dapp/src/theme/Button.ts +++ b/dapp/src/theme/Button.ts @@ -133,5 +133,11 @@ export const buttonTheme: ComponentSingleStyleConfig = { pointerEvents: "none", }, }, + link: { + bg: "initial", + color: "initial", + p: 0, + textDecoration: "underline", + }, }, } diff --git a/dapp/src/types/currency.ts b/dapp/src/types/currency.ts index e717cdc76..2285a901d 100644 --- a/dapp/src/types/currency.ts +++ b/dapp/src/types/currency.ts @@ -6,3 +6,5 @@ export type Currency = { } export type CurrencyType = "bitcoin" | "ethereum" | "usd" | "stbtc" + +export type AmountType = string | number | bigint From ba947f1e0ec4c1672ef3a0c6839919bf815f40db Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 7 May 2024 15:18:24 +0200 Subject: [PATCH 02/11] Add styles of `StakingActivitiesList` component Added dismiss animation, updated `LoadingSpinnerSuccessIcon` component --- .../icons/LoadingSpinnerSuccessIcon.tsx | 10 +-- .../StakingActivitiesList.tsx | 54 ++++++++++++++-- .../StakingActivitiesListItem.tsx | 63 ++++++++++++++++--- dapp/src/pages/OverviewPage/index.tsx | 10 ++- dapp/src/theme/Alert.ts | 25 +++++++- dapp/src/theme/Button.ts | 3 +- 6 files changed, 141 insertions(+), 24 deletions(-) diff --git a/dapp/src/assets/icons/LoadingSpinnerSuccessIcon.tsx b/dapp/src/assets/icons/LoadingSpinnerSuccessIcon.tsx index 78abf496b..a4501cb14 100644 --- a/dapp/src/assets/icons/LoadingSpinnerSuccessIcon.tsx +++ b/dapp/src/assets/icons/LoadingSpinnerSuccessIcon.tsx @@ -3,22 +3,22 @@ import { createIcon } from "@chakra-ui/react" export const LoadingSpinnerSuccessIcon = createIcon({ displayName: "LoadingSpinnerSuccessIcon", - viewBox: "0 0 72 73", + viewBox: "0 0 48 48", defaultProps: { fill: "none", }, path: [ , , diff --git a/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx b/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx index 0c7dbdb4b..5f70b8f01 100644 --- a/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx +++ b/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx @@ -1,20 +1,62 @@ import React from "react" import { List, ListItem, ListProps } from "@chakra-ui/react" -import ActivitiesListItem, { +import { AnimatePresence, motion, Variants } from "framer-motion" +import StakingActivitiesListItem, { StakingActivitiesListItemType, } from "./StakingActivitiesListItem" +const MotionList = motion(List) +const MotionListItem = motion(ListItem) + +const listItemVariants: Variants = { + mounted: { opacity: 1, x: 0 }, + dismissed: { opacity: 0, x: -48 }, +} + type StakingActivitiesListProps = ListProps & { items: StakingActivitiesListItemType[] } function StakingActivitiesList(props: StakingActivitiesListProps) { const { items, ...restProps } = props + + const areItemsIdsUnique = + new Set(items.map((item) => item.id)).size === items.length + + if (!areItemsIdsUnique) { + throw new Error("Items identifiers must be unique") + } + + const [dismissedItemIds, setDismissedItemIds] = React.useState([]) + + const handleItemDismiss = (id: string) => { + setDismissedItemIds((prev) => [...prev, id]) + } + + const visibleItems = React.useMemo( + () => items.filter((item) => !dismissedItemIds.includes(item.id)), + [dismissedItemIds, items], + ) + return ( - - {items.map((item) => ( - - ))} - + + + {visibleItems.map((item) => ( + + handleItemDismiss(item.id)} + /> + + ))} + + ) } diff --git a/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesListItem.tsx b/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesListItem.tsx index a1d5ee675..c6297c432 100644 --- a/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesListItem.tsx +++ b/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesListItem.tsx @@ -12,49 +12,92 @@ import { VStack, VisuallyHidden, } from "@chakra-ui/react" +import { LoadingSpinnerSuccessIcon } from "#/assets/icons" import ButtonLink from "../ButtonLink" import { CurrencyBalance } from "../CurrencyBalance" +import Spinner from "../Spinner" export type StakingActivitiesListItemType = { + id: string amount: AmountType status: "pending" | "success" transactionUrl?: string estimatedTime?: number + isUnstaking?: boolean } type StakingActivitiesListItemProps = Omit & - StakingActivitiesListItemType + StakingActivitiesListItemType & { + handleDismiss?: () => void + } function StakingActivitiesListItem(props: StakingActivitiesListItemProps) { - const { amount, estimatedTime, status, transactionUrl, ...restProps } = props + const { + amount, + estimatedTime, + status, + transactionUrl, + isUnstaking = false, + handleDismiss, + ...restProps + } = props return ( - + - + - {status === "success" ? "Staking completed" : "Staking..."} + {status === "success" + ? `${isUnstaking ? "Unstaking" : "Staking"} completed` + : `${isUnstaking ? "Unstaking" : "Staking"}...`} - {status === "pending" && estimatedTime ? ( <> - Est. time remaining: - {new Date(estimatedTime).getHours()}h + Est. time remaining + + {new Date(estimatedTime).getHours()}h + ) : ( - + )} {transactionUrl && ( - + View transaction details )} diff --git a/dapp/src/pages/OverviewPage/index.tsx b/dapp/src/pages/OverviewPage/index.tsx index da7993897..4d02b7a47 100644 --- a/dapp/src/pages/OverviewPage/index.tsx +++ b/dapp/src/pages/OverviewPage/index.tsx @@ -16,14 +16,22 @@ export default function OverviewPage() { diff --git a/dapp/src/theme/Alert.ts b/dapp/src/theme/Alert.ts index 10abeaa72..f850bc14f 100644 --- a/dapp/src/theme/Alert.ts +++ b/dapp/src/theme/Alert.ts @@ -61,7 +61,30 @@ const variantSubtle = multiStyleConfig.definePartsStyle((props) => statusStyles(props), ) -const processVariant = multiStyleConfig.definePartsStyle(() => ({})) +const processVariant = multiStyleConfig.definePartsStyle(() => ({ + container: { + px: 6, + py: 4, + bg: "gold.300", + borderWidth: 1, + borderColor: "gold.100", + shadow: "none", + }, + icon: { + mr: 4, + w: 12, + h: 12, + }, + title: { + color: "grey.700", + fontWeight: "bold", + m: 0, + }, + description: { + color: "grey.500", + fontWeight: "medium", + }, +})) const variants = { subtle: variantSubtle, diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts index dedc4b3bd..30daf777f 100644 --- a/dapp/src/theme/Button.ts +++ b/dapp/src/theme/Button.ts @@ -135,9 +135,10 @@ export const buttonTheme: ComponentSingleStyleConfig = { }, link: { bg: "initial", - color: "initial", + color: "inherit", p: 0, textDecoration: "underline", + fontWeight: "medium", }, }, } From 9a728748a24dbdf1b3c1852e961d580f047df3bc Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 7 May 2024 15:25:48 +0200 Subject: [PATCH 03/11] Improve dismiss animation --- .../StakingActivitiesList.tsx | 45 +++++++++---------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx b/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx index 5f70b8f01..3df094ef8 100644 --- a/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx +++ b/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx @@ -32,30 +32,29 @@ function StakingActivitiesList(props: StakingActivitiesListProps) { setDismissedItemIds((prev) => [...prev, id]) } - const visibleItems = React.useMemo( - () => items.filter((item) => !dismissedItemIds.includes(item.id)), - [dismissedItemIds, items], - ) - return ( - - - {visibleItems.map((item) => ( - - handleItemDismiss(item.id)} - /> - - ))} - + + {items.map((item) => ( + + {!dismissedItemIds.includes(item.id) && ( + + handleItemDismiss(item.id)} + /> + + )} + + ))} ) } From debce25b26dcd4e639ef43e6719c52276d0fcc93 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 7 May 2024 15:27:30 +0200 Subject: [PATCH 04/11] Revert page changes --- dapp/src/pages/OverviewPage/index.tsx | 28 --------------------------- 1 file changed, 28 deletions(-) diff --git a/dapp/src/pages/OverviewPage/index.tsx b/dapp/src/pages/OverviewPage/index.tsx index 4d02b7a47..2a7433b92 100644 --- a/dapp/src/pages/OverviewPage/index.tsx +++ b/dapp/src/pages/OverviewPage/index.tsx @@ -3,7 +3,6 @@ import { Flex, Grid, HStack, Switch } from "@chakra-ui/react" import { TextSm } from "#/components/shared/Typography" import { USD } from "#/constants" import { chakraUnitToPx } from "#/theme/utils" -import { StakingActivitiesList } from "#/components/shared/StakingActivitiesList" import PositionDetails from "./PositionDetails" import Statistics from "./Statistics" import TransactionHistory from "./TransactionHistory" @@ -11,33 +10,6 @@ import { DocsCard } from "./DocsCard" import { ActivityCarousel } from "./ActivityCarousel" export default function OverviewPage() { - return ( - - - - ) - return ( From a0001dec49b4531d4aeeddd044a582cbb4a9ff69 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Mon, 13 May 2024 19:28:48 +0200 Subject: [PATCH 05/11] Refactor `Alert` theme definition --- dapp/src/theme/Alert.ts | 78 +++++++++++++++++++++++++---------------- 1 file changed, 48 insertions(+), 30 deletions(-) diff --git a/dapp/src/theme/Alert.ts b/dapp/src/theme/Alert.ts index f850bc14f..88d0c399d 100644 --- a/dapp/src/theme/Alert.ts +++ b/dapp/src/theme/Alert.ts @@ -6,7 +6,11 @@ import { defineStyle, } from "@chakra-ui/react" -const baseStyleDialog = defineStyle({ +const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys) + +// Base styles + +const baseContainerStyles = defineStyle({ px: 5, borderRadius: "xl", textAlign: "left", @@ -15,17 +19,17 @@ const baseStyleDialog = defineStyle({ boxShadow: "0px 8px 12px 0px var(--chakra-colors-opacity-black-15)", }) -const baseStyleIcon = defineStyle({ +const baseIconStyles = defineStyle({ mr: 2, }) -const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys) - const baseStyle = multiStyleConfig.definePartsStyle({ - container: baseStyleDialog, - icon: baseStyleIcon, + container: baseContainerStyles, + icon: baseIconStyles, }) +// Status styles + const statusInfo = multiStyleConfig.definePartsStyle({ container: { bg: "blue.500", @@ -57,34 +61,48 @@ const statusStyles = (props: StyleFunctionProps) => { return styleMap[status as string] || {} } +// Subtle variant styles + const variantSubtle = multiStyleConfig.definePartsStyle((props) => statusStyles(props), ) -const processVariant = multiStyleConfig.definePartsStyle(() => ({ - container: { - px: 6, - py: 4, - bg: "gold.300", - borderWidth: 1, - borderColor: "gold.100", - shadow: "none", - }, - icon: { - mr: 4, - w: 12, - h: 12, - }, - title: { - color: "grey.700", - fontWeight: "bold", - m: 0, - }, - description: { - color: "grey.500", - fontWeight: "medium", - }, -})) +// Process variant styles + +const processContainerStyles = defineStyle({ + px: 6, + py: 4, + bg: "gold.300", + borderWidth: 1, + borderColor: "gold.100", + shadow: "none", +}) + +const processIconStyles = defineStyle({ + mr: 4, + w: 12, + h: 12, +}) + +const processTitleStyles = defineStyle({ + color: "grey.700", + fontWeight: "bold", + m: 0, +}) + +const processDescriptionStyles = defineStyle({ + color: "grey.500", + fontWeight: "medium", +}) + +const processVariant = multiStyleConfig.definePartsStyle({ + container: processContainerStyles, + icon: processIconStyles, + title: processTitleStyles, + description: processDescriptionStyles, +}) + +// Theme definition const variants = { subtle: variantSubtle, From 208c8bbcb6561542ad2538cbb34e413759e626e7 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Mon, 13 May 2024 19:32:42 +0200 Subject: [PATCH 06/11] Rename component `StakingActivitiesList` to `ActivitiesList` --- .../ActivitiesList.tsx} | 20 +++++++++---------- .../ActivitiesListItem.tsx} | 12 +++++------ .../components/shared/ActivitiesList/index.ts | 2 ++ .../shared/StakingActivitiesList/index.ts | 2 -- 4 files changed, 18 insertions(+), 18 deletions(-) rename dapp/src/components/shared/{StakingActivitiesList/StakingActivitiesList.tsx => ActivitiesList/ActivitiesList.tsx} (77%) rename dapp/src/components/shared/{StakingActivitiesList/StakingActivitiesListItem.tsx => ActivitiesList/ActivitiesListItem.tsx} (90%) create mode 100644 dapp/src/components/shared/ActivitiesList/index.ts delete mode 100644 dapp/src/components/shared/StakingActivitiesList/index.ts diff --git a/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx similarity index 77% rename from dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx rename to dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx index 3df094ef8..5c3138833 100644 --- a/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesList.tsx +++ b/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx @@ -1,9 +1,9 @@ -import React from "react" import { List, ListItem, ListProps } from "@chakra-ui/react" -import { AnimatePresence, motion, Variants } from "framer-motion" -import StakingActivitiesListItem, { - StakingActivitiesListItemType, -} from "./StakingActivitiesListItem" +import { AnimatePresence, Variants, motion } from "framer-motion" +import React from "react" +import ActivitiesListItem, { + ActivitiesListItemType, +} from "./ActivitiesListItem" const MotionList = motion(List) const MotionListItem = motion(ListItem) @@ -13,10 +13,10 @@ const listItemVariants: Variants = { dismissed: { opacity: 0, x: -48 }, } -type StakingActivitiesListProps = ListProps & { - items: StakingActivitiesListItemType[] +type ActivitiesListProps = ListProps & { + items: ActivitiesListItemType[] } -function StakingActivitiesList(props: StakingActivitiesListProps) { +function ActivitiesList(props: ActivitiesListProps) { const { items, ...restProps } = props const areItemsIdsUnique = @@ -47,7 +47,7 @@ function StakingActivitiesList(props: StakingActivitiesListProps) { pb={2} _last={{ pb: 0 }} > - handleItemDismiss(item.id)} /> @@ -59,4 +59,4 @@ function StakingActivitiesList(props: StakingActivitiesListProps) { ) } -export default StakingActivitiesList +export default ActivitiesList diff --git a/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesListItem.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx similarity index 90% rename from dapp/src/components/shared/StakingActivitiesList/StakingActivitiesListItem.tsx rename to dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx index c6297c432..0b867514b 100644 --- a/dapp/src/components/shared/StakingActivitiesList/StakingActivitiesListItem.tsx +++ b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx @@ -1,4 +1,5 @@ import React from "react" +import { LoadingSpinnerSuccessIcon } from "#/assets/icons" import { AmountType } from "#/types" import { Alert, @@ -12,12 +13,11 @@ import { VStack, VisuallyHidden, } from "@chakra-ui/react" -import { LoadingSpinnerSuccessIcon } from "#/assets/icons" import ButtonLink from "../ButtonLink" import { CurrencyBalance } from "../CurrencyBalance" import Spinner from "../Spinner" -export type StakingActivitiesListItemType = { +export type ActivitiesListItemType = { id: string amount: AmountType status: "pending" | "success" @@ -26,12 +26,12 @@ export type StakingActivitiesListItemType = { isUnstaking?: boolean } -type StakingActivitiesListItemProps = Omit & - StakingActivitiesListItemType & { +type ActivitiesListItemProps = Omit & + ActivitiesListItemType & { handleDismiss?: () => void } -function StakingActivitiesListItem(props: StakingActivitiesListItemProps) { +function ActivitiesListItem(props: ActivitiesListItemProps) { const { amount, estimatedTime, @@ -105,4 +105,4 @@ function StakingActivitiesListItem(props: StakingActivitiesListItemProps) { ) } -export default StakingActivitiesListItem +export default ActivitiesListItem diff --git a/dapp/src/components/shared/ActivitiesList/index.ts b/dapp/src/components/shared/ActivitiesList/index.ts new file mode 100644 index 000000000..33f50339f --- /dev/null +++ b/dapp/src/components/shared/ActivitiesList/index.ts @@ -0,0 +1,2 @@ +export { default as ActivitiesList } from "./ActivitiesList" +export type { ActivitiesListItemType } from "./ActivitiesListItem" diff --git a/dapp/src/components/shared/StakingActivitiesList/index.ts b/dapp/src/components/shared/StakingActivitiesList/index.ts deleted file mode 100644 index 22b9fd69d..000000000 --- a/dapp/src/components/shared/StakingActivitiesList/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as StakingActivitiesList } from "./StakingActivitiesList" -export type { StakingActivitiesListItemType } from "./StakingActivitiesListItem" From beae4958d7febee4194af5be548df539ec7b89f9 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Mon, 13 May 2024 19:37:17 +0200 Subject: [PATCH 07/11] Remove id check --- .../components/shared/ActivitiesList/ActivitiesList.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx index 5c3138833..a1eff2bfd 100644 --- a/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx +++ b/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx @@ -19,13 +19,6 @@ type ActivitiesListProps = ListProps & { function ActivitiesList(props: ActivitiesListProps) { const { items, ...restProps } = props - const areItemsIdsUnique = - new Set(items.map((item) => item.id)).size === items.length - - if (!areItemsIdsUnique) { - throw new Error("Items identifiers must be unique") - } - const [dismissedItemIds, setDismissedItemIds] = React.useState([]) const handleItemDismiss = (id: string) => { From 1d1a5df4e3eec5ade10432f7f8f2c31a0b705ff3 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Mon, 13 May 2024 19:49:10 +0200 Subject: [PATCH 08/11] Disable estimated time Adjusted container items alignment --- .../ActivitiesList/ActivitiesListItem.tsx | 21 ++++++++++--------- dapp/src/theme/Alert.ts | 1 + 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx index 0b867514b..facc95a5e 100644 --- a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx +++ b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx @@ -22,7 +22,7 @@ export type ActivitiesListItemType = { amount: AmountType status: "pending" | "success" transactionUrl?: string - estimatedTime?: number + // estimatedTime?: number // TODO: To implement. Estimated activity time is not in scope of MVP. isUnstaking?: boolean } @@ -34,7 +34,7 @@ type ActivitiesListItemProps = Omit & function ActivitiesListItem(props: ActivitiesListItemProps) { const { amount, - estimatedTime, + // estimatedTime, status, transactionUrl, isUnstaking = false, @@ -60,14 +60,7 @@ function ActivitiesListItem(props: ActivitiesListItemProps) { - {status === "pending" && estimatedTime ? ( - <> - Est. time remaining - - {new Date(estimatedTime).getHours()}h - - - ) : ( + {status === "success" ? ( + ) : ( + // eslint-disable-next-line react/jsx-no-useless-fragment + <> + {/* Est. time remaining + + {new Date(estimatedTime).getHours()}h + */} + )} diff --git a/dapp/src/theme/Alert.ts b/dapp/src/theme/Alert.ts index 88d0c399d..f5dd4b392 100644 --- a/dapp/src/theme/Alert.ts +++ b/dapp/src/theme/Alert.ts @@ -76,6 +76,7 @@ const processContainerStyles = defineStyle({ borderWidth: 1, borderColor: "gold.100", shadow: "none", + alignItems: "flex-start", }) const processIconStyles = defineStyle({ From 4032bac4c3124c4b9a921e4cf3ccd81aec394459 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Mon, 13 May 2024 20:25:42 +0200 Subject: [PATCH 09/11] Read activities from Redux store Rendered `ActivitiesList` in `DashboardCard`. Refactored `BlockExplorerLink` to make it compatible with `as` prop --- .../shared/ActivitiesList/ActivitiesList.tsx | 32 +++++++-------- .../ActivitiesList/ActivitiesListItem.tsx | 40 ++++++------------- .../shared/BlockExplorerLink/index.tsx | 9 ++--- .../src/pages/DashboardPage/DashboardCard.tsx | 3 ++ 4 files changed, 35 insertions(+), 49 deletions(-) diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx index a1eff2bfd..d4df818ed 100644 --- a/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx +++ b/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx @@ -1,9 +1,8 @@ +import React from "react" import { List, ListItem, ListProps } from "@chakra-ui/react" import { AnimatePresence, Variants, motion } from "framer-motion" -import React from "react" -import ActivitiesListItem, { - ActivitiesListItemType, -} from "./ActivitiesListItem" +import { useActivitiesNEW as useActivities } from "#/hooks" +import ActivitiesListItem from "./ActivitiesListItem" const MotionList = motion(List) const MotionListItem = motion(ListItem) @@ -13,26 +12,25 @@ const listItemVariants: Variants = { dismissed: { opacity: 0, x: -48 }, } -type ActivitiesListProps = ListProps & { - items: ActivitiesListItemType[] -} -function ActivitiesList(props: ActivitiesListProps) { - const { items, ...restProps } = props +function ActivitiesList(props: ListProps) { + const activities = useActivities() - const [dismissedItemIds, setDismissedItemIds] = React.useState([]) + const [dismissedActivities, setDismissedActivities] = React.useState< + string[] + >([]) - const handleItemDismiss = (id: string) => { - setDismissedItemIds((prev) => [...prev, id]) + const handleItemDismiss = (txHash: string) => { + setDismissedActivities((prev) => [...prev, txHash]) } return ( - - {items.map((item) => ( + + {activities.map((item) => ( - {!dismissedItemIds.includes(item.id) && ( + {!dismissedActivities.includes(item.txHash) && ( handleItemDismiss(item.id)} + handleDismiss={() => handleItemDismiss(item.txHash)} /> )} diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx index facc95a5e..66151d929 100644 --- a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx +++ b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx @@ -1,6 +1,6 @@ import React from "react" import { LoadingSpinnerSuccessIcon } from "#/assets/icons" -import { AmountType } from "#/types" +import { Activity as ActivityType } from "#/types" import { Alert, AlertDescription, @@ -16,51 +16,35 @@ import { import ButtonLink from "../ButtonLink" import { CurrencyBalance } from "../CurrencyBalance" import Spinner from "../Spinner" - -export type ActivitiesListItemType = { - id: string - amount: AmountType - status: "pending" | "success" - transactionUrl?: string - // estimatedTime?: number // TODO: To implement. Estimated activity time is not in scope of MVP. - isUnstaking?: boolean -} +import BlockExplorerLink from "../BlockExplorerLink" type ActivitiesListItemProps = Omit & - ActivitiesListItemType & { + ActivityType & { handleDismiss?: () => void } function ActivitiesListItem(props: ActivitiesListItemProps) { - const { - amount, - // estimatedTime, - status, - transactionUrl, - isUnstaking = false, - handleDismiss, - ...restProps - } = props + const { amount, status, txHash, type, handleDismiss, ...restProps } = props return ( - {status === "success" - ? `${isUnstaking ? "Unstaking" : "Staking"} completed` - : `${isUnstaking ? "Unstaking" : "Staking"}...`} + {status === "completed" + ? `${type === "withdraw" ? "Unstaking" : "Staking"} completed` + : `${type === "withdraw" ? "Unstaking" : "Staking"}...`} - {status === "success" ? ( + {status === "completed" ? ( + + ) From ac0d6ec5d5e5524b059d024d7d1aba9a704c7e93 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Mon, 13 May 2024 20:57:21 +0200 Subject: [PATCH 10/11] Remove type export --- dapp/src/components/shared/ActivitiesList/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/dapp/src/components/shared/ActivitiesList/index.ts b/dapp/src/components/shared/ActivitiesList/index.ts index 33f50339f..30619d084 100644 --- a/dapp/src/components/shared/ActivitiesList/index.ts +++ b/dapp/src/components/shared/ActivitiesList/index.ts @@ -1,2 +1 @@ export { default as ActivitiesList } from "./ActivitiesList" -export type { ActivitiesListItemType } from "./ActivitiesListItem" From a6bf6c75c496fd0011c83272da3850aa51f3f55c Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 14 May 2024 12:03:03 +0200 Subject: [PATCH 11/11] Replace chain type for `BlockExplorerLink` --- .../shared/ActivitiesList/ActivitiesListItem.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx index 66151d929..73403a4ed 100644 --- a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx +++ b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx @@ -1,5 +1,5 @@ import React from "react" -import { LoadingSpinnerSuccessIcon } from "#/assets/icons" +import { ArrowUpRight, LoadingSpinnerSuccessIcon } from "#/assets/icons" import { Activity as ActivityType } from "#/types" import { Alert, @@ -13,7 +13,6 @@ import { VStack, VisuallyHidden, } from "@chakra-ui/react" -import ButtonLink from "../ButtonLink" import { CurrencyBalance } from "../CurrencyBalance" import Spinner from "../Spinner" import BlockExplorerLink from "../BlockExplorerLink" @@ -67,26 +66,25 @@ function ActivitiesListItem(props: ActivitiesListItemProps) { {txHash && ( - + View transaction details - + )} )