diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx deleted file mode 100644 index aae2c762b..000000000 --- a/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from "react" -import { List, ListItem, ListProps } from "@chakra-ui/react" -import { AnimatePresence, Variants, motion } from "framer-motion" -import { - useAppDispatch, - useLatestCompletedActivities, - useIsFetchedWalletData, -} from "#/hooks" -import { deleteLatestActivity } from "#/store/wallet" -import ActivitiesListItem from "./ActivitiesListItem" - -const MotionList = motion(List) -const MotionListItem = motion(ListItem) - -const listItemVariants: Variants = { - mounted: { opacity: 1, x: 0 }, - dismissed: { opacity: 0, x: -48 }, -} - -function ActivitiesList(props: ListProps) { - const dispatch = useAppDispatch() - const activities = useLatestCompletedActivities() - const isFetchedWalletData = useIsFetchedWalletData() - - const handleItemDismiss = (activityId: string) => { - dispatch(deleteLatestActivity(activityId)) - } - - if (!isFetchedWalletData || activities.length === 0) return null - - return ( - - - {activities.map(({ id, amount, status, type, txHash }) => ( - - handleItemDismiss(id)} - /> - - ))} - - - ) -} - -export default ActivitiesList diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx deleted file mode 100644 index 84e498e5a..000000000 --- a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from "react" -import { ArrowUpRight, LoadingSpinnerSuccessIcon } from "#/assets/icons" -import { Activity as ActivityType } from "#/types" -import { convertActivityTypeToLabel } from "#/utils" -import { Button, HStack, VStack, VisuallyHidden } from "@chakra-ui/react" -import { CurrencyBalance } from "../CurrencyBalance" -import BlockExplorerLink from "../BlockExplorerLink" -import { - Alert, - AlertDescription, - AlertIcon, - AlertProps, - AlertTitle, -} from "../Alert" -import { TextMd } from "../Typography" - -type ActivitiesListItemProps = Omit & - Omit & { - handleDismiss?: () => void - } - -function ActivitiesListItem(props: ActivitiesListItemProps) { - const { amount, status, txHash, type, handleDismiss, ...restProps } = props - - const isCompleted = status === "completed" - - return ( - - {isCompleted ? ( - - ) : ( - - )} - - - - - {isCompleted - ? `${convertActivityTypeToLabel(type)} completed` - : `${convertActivityTypeToLabel(type)}...`} - - - - - - - {isCompleted ? ( - - ) : ( - // TODO: To implement. Estimated activity time is not in scope of MVP. - // eslint-disable-next-line react/jsx-no-useless-fragment - <> - {/* Est. time remaining - - {new Date(estimatedTime).getHours()}h - */} - - )} - - {txHash && status === "pending" && ( - - - View transaction details - - )} - - - - ) -} - -export default ActivitiesListItem diff --git a/dapp/src/components/shared/ActivitiesList/index.ts b/dapp/src/components/shared/ActivitiesList/index.ts deleted file mode 100644 index 30619d084..000000000 --- a/dapp/src/components/shared/ActivitiesList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ActivitiesList } from "./ActivitiesList" diff --git a/dapp/src/hooks/store/index.ts b/dapp/src/hooks/store/index.ts index aafdf9918..07b9a19c0 100644 --- a/dapp/src/hooks/store/index.ts +++ b/dapp/src/hooks/store/index.ts @@ -11,4 +11,3 @@ export * from "./useActionFlowPause" export * from "./useIsSignedMessage" export { default as useHasFetchedActivities } from "./useHasFetchedActivities" export { default as useActivities } from "./useActivities" -export { default as useLatestCompletedActivities } from "./useLatestCompletedActivities" diff --git a/dapp/src/hooks/store/useLatestCompletedActivities.ts b/dapp/src/hooks/store/useLatestCompletedActivities.ts deleted file mode 100644 index 1fc1178f8..000000000 --- a/dapp/src/hooks/store/useLatestCompletedActivities.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { selectLatestCompletedActivities } from "#/store/wallet" -import { useAppSelector } from "./useAppSelector" - -export default function useLatestCompletedActivities() { - return useAppSelector(selectLatestCompletedActivities) -} diff --git a/dapp/src/pages/DashboardPage/DashboardCard.tsx b/dapp/src/pages/DashboardPage/DashboardCard.tsx index ef1055de9..bdfbb90da 100644 --- a/dapp/src/pages/DashboardPage/DashboardCard.tsx +++ b/dapp/src/pages/DashboardPage/DashboardCard.tsx @@ -1,6 +1,5 @@ import React from "react" import { Card, CardBody, CardProps, VStack } from "@chakra-ui/react" -import { ActivitiesList } from "#/components/shared/ActivitiesList" import TransactionHistory from "./TransactionHistory" import PositionDetails from "./PositionDetails" @@ -8,7 +7,6 @@ export default function DashboardCard(props: CardProps) { return ( - diff --git a/dapp/src/store/tests/walletSlice.test.ts b/dapp/src/store/tests/walletSlice.test.ts index efbafdbef..b29009f60 100644 --- a/dapp/src/store/tests/walletSlice.test.ts +++ b/dapp/src/store/tests/walletSlice.test.ts @@ -2,11 +2,7 @@ import { beforeEach, describe, expect, it } from "vitest" import { createActivity } from "#/tests/factories" import { Activity } from "#/types" import { WalletState } from "../wallet" -import reducer, { - deleteLatestActivity, - initialState, - setActivities, -} from "../wallet/walletSlice" +import reducer, { initialState, setActivities } from "../wallet/walletSlice" const isSignedMessage = false const hasFetchedActivities = true @@ -16,10 +12,6 @@ const pendingActivity = createActivity({ status: "pending", }) -const latestActivities = { - [pendingActivityId]: pendingActivity, -} - const activities = [ pendingActivity, createActivity({ id: "1" }), @@ -34,22 +26,11 @@ describe("Wallet redux slice", () => { state = { ...initialState, activities, - latestActivities, isSignedMessage, hasFetchedActivities, } }) - it("should delete latest activity", () => { - expect(reducer(state, deleteLatestActivity(pendingActivityId))).toEqual({ - ...initialState, - activities, - latestActivities: {}, - isSignedMessage, - hasFetchedActivities, - }) - }) - it("should update activities when the status of item changes", () => { const newActivities = [...activities] const completedActivity: Activity = { @@ -60,14 +41,10 @@ describe("Wallet redux slice", () => { ({ id }) => id === pendingActivityId, ) newActivities[foundIndex] = completedActivity - const newLatestActivities = { - [pendingActivityId]: completedActivity, - } expect(reducer(state, setActivities(newActivities))).toEqual({ ...initialState, activities: newActivities, - latestActivities: newLatestActivities, isSignedMessage, hasFetchedActivities, }) @@ -102,12 +79,6 @@ describe("Wallet redux slice", () => { }), ] - // A user made a new withdrawal and the dapp saved the pending activity in - // the store. - const currentLatestActivities = { - [pendingWithdrawRedemptionKey]: pendingWithdrawActivity, - } - describe("when withdrawal is still pending", () => { // This is our pending withdrawal but with the full id with the `-` // suffix returned by backend. @@ -122,19 +93,10 @@ describe("Wallet redux slice", () => { pendingWithdrawActivityWithFullId, ] - // We should replace the pending activity with the activity from the - // backend that contains the full id (`-`) and still - // keep it in the `latestActivities` map. - const expectedLatestActivities = { - [pendingWithdrawActivityWithFullId.id]: - pendingWithdrawActivityWithFullId, - } - beforeEach(() => { state = { ...initialState, activities: currentActivities, - latestActivities: currentLatestActivities, isSignedMessage, hasFetchedActivities, } @@ -144,7 +106,6 @@ describe("Wallet redux slice", () => { expect(reducer(state, setActivities(newActivities))).toEqual({ ...initialState, activities: newActivities, - latestActivities: expectedLatestActivities, isSignedMessage, hasFetchedActivities, }) @@ -164,26 +125,18 @@ describe("Wallet redux slice", () => { // redemption key). const newActivities = [...currentActivities, withdrawActivityCompleted] - // The dapp should update the state to `completed` and save this activity - // in the latest activity map. - const expectedLatestActivities = { - [withdrawActivityCompleted.id]: withdrawActivityCompleted, - } - beforeEach(() => { state = { ...initialState, activities: currentActivities, - latestActivities: currentLatestActivities, isSignedMessage, } }) - it("should mark the latest pending withdraw activity as completed and save as latest activity", () => { + it("should mark the latest pending withdraw activity as completed", () => { expect(reducer(state, setActivities(newActivities))).toEqual({ ...initialState, activities: newActivities, - latestActivities: expectedLatestActivities, isSignedMessage, hasFetchedActivities, }) diff --git a/dapp/src/store/wallet/walletSelector.ts b/dapp/src/store/wallet/walletSelector.ts index e97ac2001..db8194cd6 100644 --- a/dapp/src/store/wallet/walletSelector.ts +++ b/dapp/src/store/wallet/walletSelector.ts @@ -1,5 +1,5 @@ import { createSelector } from "@reduxjs/toolkit" -import { filterCompletedActivities, sortActivitiesByTimestamp } from "#/utils" +import { sortActivitiesByTimestamp } from "#/utils" import { RootState } from ".." export const selectEstimatedBtcBalance = (state: RootState): bigint => @@ -18,17 +18,6 @@ export const selectAllActivitiesCount = createSelector( (activities) => activities.length, ) -export const selectLatestActivities = createSelector( - (state: RootState) => state.wallet.latestActivities, - (latestActivities) => - sortActivitiesByTimestamp(Object.values(latestActivities)), -) - -export const selectLatestCompletedActivities = createSelector( - selectLatestActivities, - (latestActivities) => filterCompletedActivities(latestActivities), -) - export const selectIsSignedMessage = (state: RootState): boolean => state.wallet.isSignedMessage diff --git a/dapp/src/store/wallet/walletSlice.ts b/dapp/src/store/wallet/walletSlice.ts index fc8dc986d..fb0296445 100644 --- a/dapp/src/store/wallet/walletSlice.ts +++ b/dapp/src/store/wallet/walletSlice.ts @@ -1,12 +1,10 @@ -import { ActivitiesByIds, Activity } from "#/types" -import { isActivityCompleted } from "#/utils" +import { Activity } from "#/types" import { PayloadAction, createSlice } from "@reduxjs/toolkit" export type WalletState = { estimatedBtcBalance: bigint sharesBalance: bigint isSignedMessage: boolean - latestActivities: ActivitiesByIds activities: Activity[] hasFetchedActivities: boolean address: string | undefined @@ -16,7 +14,6 @@ export const initialState: WalletState = { estimatedBtcBalance: 0n, sharesBalance: 0n, isSignedMessage: false, - latestActivities: {}, activities: [], hasFetchedActivities: false, address: undefined, @@ -36,80 +33,12 @@ export const walletSlice = createSlice({ state.isSignedMessage = action.payload }, setActivities(state, action: PayloadAction) { - const allActivities = action.payload - - const pendingActivities = allActivities.reduce<[string, Activity][]>( - (acc, activity) => { - if (!isActivityCompleted(activity)) acc.push([activity.id, activity]) - - return acc - }, - [], - ) - const pendingActivitiesByIds = Object.fromEntries(pendingActivities) - const pendingActivitiesIds = Object.keys(pendingActivities) - - const { latestActivities } = state - - const completedActivitiesByIds = Object.values( - latestActivities, - ).reduce((acc, latestActivity) => { - if ( - latestActivity.type === "deposit" && - !pendingActivitiesIds.includes(latestActivity.id) - ) { - acc[latestActivity.id] = { ...latestActivity, status: "completed" } - return acc - } - - const pendingActivityIdWithSameRedemptionKey = - pendingActivitiesIds.find((id) => latestActivity.id.includes(id)) - - const completedWithdrawalsWithSameRedemptionKey = allActivities - .filter( - (activity) => - activity.id.includes(latestActivity.id) && - isActivityCompleted(activity), - ) - .sort((first, second) => { - // The withdraw id is: `-` - const [, firstCount] = first.id.split("-") - const [, secondCount] = second.id.split("-") - - return Number(secondCount) - Number(firstCount) - }) - - const latestCompletedWithdraw = - completedWithdrawalsWithSameRedemptionKey[0] - - if ( - !pendingActivityIdWithSameRedemptionKey && - latestCompletedWithdraw - ) { - acc[latestCompletedWithdraw.id] = latestCompletedWithdraw - } - - return acc - }, {}) - - state.activities = allActivities - state.latestActivities = Object.assign( - completedActivitiesByIds, - pendingActivitiesByIds, - ) + state.activities = action.payload state.hasFetchedActivities = true }, - deleteLatestActivity(state, action: PayloadAction) { - const activityId = action.payload - delete state.latestActivities[activityId] - }, resetState: (state) => ({ ...initialState, address: state.address }), activityInitialized(state, action: PayloadAction) { const activity = action.payload - state.latestActivities = { - ...state.latestActivities, - [activity.id]: activity, - } state.activities = [...state.activities, activity] }, setAddress(state, action: PayloadAction) { @@ -123,7 +52,6 @@ export const { setEstimatedBtcBalance, setIsSignedMessage, setActivities, - deleteLatestActivity, resetState, activityInitialized, setAddress, diff --git a/dapp/src/theme/Alert.ts b/dapp/src/theme/Alert.ts index 67c5d8a87..8b4aa91f9 100644 --- a/dapp/src/theme/Alert.ts +++ b/dapp/src/theme/Alert.ts @@ -54,31 +54,8 @@ const variantElevated = multiStyleConfig.definePartsStyle(({ colorScheme }) => { } }) -const variantProcess = multiStyleConfig.definePartsStyle({ - container: { - px: 6, - py: 4, - bg: "gold.300", - borderWidth: 1, - borderColor: "gold.100", - alignItems: "flex-start", - [$foregroundColor.variable]: "colors.brand.400", - }, - icon: { - mr: 4, - boxSize: 12, - }, - title: { - color: "grey.700", - fontWeight: "bold", - m: 0, - }, - description: { color: "grey.500", fontWeight: "medium" }, -}) - const variants = { subtle: variantSubtle, - process: variantProcess, elevated: variantElevated, } diff --git a/dapp/src/types/activity.ts b/dapp/src/types/activity.ts index 7d92168f1..27efaecda 100644 --- a/dapp/src/types/activity.ts +++ b/dapp/src/types/activity.ts @@ -19,7 +19,3 @@ type ConditionalActivityData = export type ActivityType = ConditionalActivityData["type"] export type Activity = CommonActivityData & ConditionalActivityData - -export type ActivitiesByIds = { - [id: string]: Activity -} diff --git a/dapp/src/utils/activities.ts b/dapp/src/utils/activities.ts index 44812948e..9197ff98e 100644 --- a/dapp/src/utils/activities.ts +++ b/dapp/src/utils/activities.ts @@ -15,9 +15,6 @@ export const sortActivitiesByTimestamp = (activities: Activity[]): Activity[] => getActivityTimestamp(activity2) - getActivityTimestamp(activity1), ) -export const filterCompletedActivities = (activities: Activity[]): Activity[] => - activities.filter((activity) => isActivityCompleted(activity)) - export const isWithdrawType = (type: ActivityType) => type === "withdraw" export function getEstimatedDuration(