diff --git a/frontend/src/components/homePage/events/event.card.tsx b/frontend/src/components/homePage/events/event.card.tsx new file mode 100644 index 0000000..4c09ce4 --- /dev/null +++ b/frontend/src/components/homePage/events/event.card.tsx @@ -0,0 +1,92 @@ +import { AnimatePresence, motion } from "framer-motion"; +import { ReactElement } from "react"; +import { Card } from "react-daisyui"; +import { EventTitle, EventType } from "types/events"; +export const EventCardScaffold = ({ + event, + template, +}: { + event: EventType & { isExpanded: boolean; toggleExpanded: () => void }; + template: ReactElement; +}) => { + return ( + + + +
+ {EventTitle[event.kind]} + + { + event.toggleExpanded(); + }} + > + + +
+ + + {event.isExpanded ? ( + + {template} + + ) : null} + + + + ); +}; + +// const NewDebitNoteEvent = (event: { +// kind: Event.NEW_DEBIT_NOTE; +// payload: Payload[Event.NEW_DEBIT_NOTE]; +// }) => { +// return ( +// <> +// {event.payload.paymentDueDate ? ( +// +// +// New Payable Debit Note +//
+//
ID:
+//
+// +//
+//
+//
+//
Agreement ID:
+//
+// +//
+//
+//
+//
Amount
+//
+// +//
+//
+// +// +// ) : null} +// +// ); +// }; diff --git a/frontend/src/components/homePage/events/event.tsx b/frontend/src/components/homePage/events/event.tsx index a6a5f6c..544b57d 100644 --- a/frontend/src/components/homePage/events/event.tsx +++ b/frontend/src/components/homePage/events/event.tsx @@ -9,6 +9,7 @@ import { formatBalance } from "utils/formatBalance"; import { parseEther } from "viem"; import dayjs from "dayjs"; import { ShortLink } from "components/atoms/shortLink"; +import { EventCardScaffold } from "./event.card"; const variants = { visible: { opacity: 1, transition: { duration: 1 } }, hidden: { opacity: 0, transition: { duration: 1 } }, @@ -19,16 +20,11 @@ const AllocationCreatedEvent = (event: { payload: Payload[Event.ALLOCATION_CREATED]; }) => { return ( - - - Allocation Created -
-
Allocation ID: {event.payload.allocationId}
-
Amount: {event.payload.amount}
-
Recipient: {event.payload.validityTimestamp}
-
- - +
+
Allocation ID: {event.payload.allocationId}
+
Amount: {event.payload.amount}
+
Recipient: {event.payload.validityTimestamp}
+
); }; @@ -37,14 +33,9 @@ const AllocationReleasedEvent = (event: { payload: Payload[Event.ALLOCATION_RELEASED]; }) => { return ( - - - Allocation Released -
-
Allocation ID: {event.payload.allocationId}
-
- - +
+
Allocation ID: {event.payload.allocationId}
+
); }; @@ -53,36 +44,29 @@ const DepositCreatedEvent = (event: { payload: Payload[Event.DEPOSIT_CREATED]; }) => { return ( - - - Deposit Created -
-
-
TX Hash:
+
+
+
TX Hash:
- -
-
-
Amount:
- {" "} -
-
-
Fee:
- {" "} -
-
-
Valid to:
- {dayjs(event.payload.validityTimestamp * 1000).format("YYYY-MM-DD")} -
-
- - + +
+
+
Amount:
+ {" "} +
+
+
Fee:
+ {" "} +
+
+
Valid to:
+ {dayjs(event.payload.validityTimestamp * 1000).format("YYYY-MM-DD")} +
+
); }; @@ -91,25 +75,20 @@ const AgreementCreatedEvent = (event: { payload: Payload[Event.AGREEMENT_SIGNED]; }) => { return ( - - - Agreement Created -
-
-
Agreement Id:
+
+
+
Agreement Id:
- -
-
-
ProviderId :
- -
-
- - + +
+
+
ProviderId :
+ +
+
); }; @@ -118,17 +97,12 @@ const AgreementTerminatedEvent = (event: { payload: Payload[Event.AGREEMENT_TERMINATED]; }) => { return ( - - - Agreement Terminated -
-
-
Agreement ID:
{" "} - -
-
- - +
+
+
Agreement ID:
{" "} + +
+
); }; @@ -137,36 +111,29 @@ const DepositExtendedEvent = (event: { payload: Payload[Event.DEPOSIT_EXTENDED]; }) => { return ( - - - Deposit Extended -
-
-
TX Hash:
+
+
+
TX Hash:
- -
-
-
Extra Amount:
- {" "} -
-
-
Extra Fee:
- {" "} -
-
-
New Valid to:
- {dayjs(event.payload.validityTimestamp * 1000).format("YYYY-MM-DD")} -
-
- - + +
+
+
Extra Amount:
+ {" "} +
+
+
Extra Fee:
+ {" "} +
+
+
New Valid to:
+ {dayjs(event.payload.validityTimestamp * 1000).format("YYYY-MM-DD")} +
+
); }; @@ -175,26 +142,18 @@ const DepositProviderPaymentEvent = (event: { payload: Payload[Event.DEPOSIT_PROVIDER_PAYMENT]; }) => { return ( - - - Provider Payment -
-
-
TX Hash :
- -
-
-
Amount :
- -
-
- - +
+
+
TX Hash :
+ +
+
+
Amount :
+ +
+
); }; @@ -203,25 +162,22 @@ const NewInvoiceEvent = (event: { payload: Payload[Event.NEW_INVOICE]; }) => { return ( - - - New Invoice -
-
Invoice ID
:{" "} - -
-
-
Agreement ID:
:{" "} - -
-
-
Amount
:{" "} - -
- - + <> +
+
Invoice ID
:{" "} + +
+
+
Agreement ID:
:{" "} + +
+
+
Amount
:{" "} + +
+ ); }; @@ -230,23 +186,18 @@ const DepositFeePaymentEvent = (event: { payload: Payload[Event.DEPOSIT_FEE_PAYMENT]; }) => { return ( - - - Deposit Fee Payment -
-
-
Transaction:
- -
-
-
Amount:
- -
-
- - +
+
+
Transaction:
+ +
+
+
Amount:
+ +
+
); }; @@ -255,23 +206,18 @@ const DepositProviderPayment = (event: { payload: Payload[Event.DEPOSIT_PROVIDER_PAYMENT]; }) => { return ( - - - Deposit Provider Payment -
-
- Agreement IsD: -
-
- TX Hash :{" "} - -
-
- - +
+
+ Agreement IsD: +
+
+ TX Hash :{" "} + +
+
); }; @@ -280,25 +226,22 @@ const FileScanError = (event: { payload: Payload[Event.FILE_SCAN_ERROR]; }) => { return ( - - - File Infected -
-
File: {event.payload.id}
+ <> +
+
File: {event.payload.id}
-
-
+
+
-
-
Viruses:
-
- {(event.payload?.data?.Viruses || []).map((virus) => ( -
{virus}
- ))} -
+
+
Viruses:
+
+ {(event.payload?.data?.Viruses || []).map((virus) => ( +
{virus}
+ ))}
- - +
+ ); }; @@ -307,16 +250,11 @@ const FileScanOk = (event: { payload: Payload[Event.FILE_SCAN_OK]; }) => { return ( - - - File Clean -
-
File: {event.payload.id}
+
+
File: {event.payload.id}
-
-
- - +
+
); }; @@ -327,67 +265,127 @@ const NewDebitNoteEvent = (event: { return ( <> {event.payload.paymentDueDate ? ( - - - New Payable Debit Note -
-
ID:
-
- -
+ <> +
+
ID:
+
+
-
-
Agreement ID:
-
- -
+
+
+
Agreement ID:
+
+
-
-
Amount
-
- -
+
+
+
Amount
+
+
- - +
+ ) : null} ); }; -export const EventCard = (event: EventType) => { +export const EventCard = ( + event: EventType & { + isExpanded: boolean; + toggleExpanded: () => void; + } +) => { return ( {(() => { switch (event.kind) { case Event.ALLOCATION_CREATED: - return ; + return ( + } + /> + ); case Event.ALLOCATION_RELEASED: - return ; + return ( + } + /> + ); case Event.DEPOSIT_CREATED: - return ; + return ( + } + /> + ); case Event.DEPOSIT_EXTENDED: - return ; + return ( + } + /> + ); case Event.AGREEMENT_SIGNED: - return ; + return ( + } + /> + ); case Event.AGREEMENT_TERMINATED: - return ; + return ( + } + /> + ); case Event.NEW_INVOICE: - return ; + return ( + } + /> + ); case Event.DEPOSIT_FEE_PAYMENT: - return ; + return ( + } + /> + ); case Event.DEPOSIT_PROVIDER_PAYMENT: - return ; + return ( + } + /> + ); case Event.FILE_SCAN_ERROR: - return ; + return ( + } + /> + ); case Event.FILE_SCAN_OK: - return ; + return ( + } + /> + ); case Event.NEW_DEBIT_NOTE: - return ; + return ( + } + /> + ); } })()} diff --git a/frontend/src/components/homePage/events/events.tsx b/frontend/src/components/homePage/events/events.tsx index 24ee547..f9cb3e0 100644 --- a/frontend/src/components/homePage/events/events.tsx +++ b/frontend/src/components/homePage/events/events.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; import { EventType } from "types/events"; import { useAllocationEvents } from "hooks/events/useAllocationEvents"; import { EventCard } from "./event"; -import { uniqBy, sortBy, prop } from "ramda"; +import { uniqBy, sortBy, reverse, prop } from "ramda"; import { useDepositEvents } from "hooks/events/useDepositEvents"; import { useYagnaEvents } from "hooks/events/useYagnaEvents"; import { finalize, merge } from "rxjs"; @@ -15,6 +15,8 @@ export const Events = () => { (EventType & { id: number; timestamp: number; + isExpanded: boolean; + toggleExpanded: () => void; })[] >([]); @@ -58,14 +60,45 @@ export const Events = () => { } ) => { setEvents((prevEvents) => { - return sortBy(prop("timestamp"))( - uniqBy( - (e) => { - return `${e.kind}-${e.id}`; - }, - [...prevEvents, event] + return reverse( + sortBy(prop("timestamp"))( + uniqBy( + (e) => { + return `${e.kind}-${e.id}`; + }, + [ + ...prevEvents.map((e) => { + return { + ...e, + }; + }), + { + ...event, + isExpanded: true, + }, + ] + ) ) - ); + ).map((e, index) => { + return { + ...e, + isExpanded: index === 0, + + toggleExpanded: () => { + setEvents((prevEvents) => { + return prevEvents.map((prevEvent) => { + return { + ...prevEvent, + isExpanded: + e.id === prevEvent.id + ? !prevEvent.isExpanded + : prevEvent.isExpanded, + }; + }); + }); + }, + }; + }); }); } ); @@ -80,6 +113,7 @@ export const Events = () => { return ( <> {events.map((event, index) => { + console.log(event.isExpanded); return ; })} diff --git a/frontend/src/components/homePage/statusSections/agreement.tsx b/frontend/src/components/homePage/statusSections/agreement.tsx index ed1bd22..acef17e 100644 --- a/frontend/src/components/homePage/statusSections/agreement.tsx +++ b/frontend/src/components/homePage/statusSections/agreement.tsx @@ -20,8 +20,6 @@ export const Agreement = () => { events$ .pipe( filter((event: any) => { - console.log("e,", event); - console.log("t", user.currentAgreement?.id); return event.payload.agreementId === user.currentAgreement?.id; }) ) @@ -29,6 +27,7 @@ export const Agreement = () => { setTotalAmount(event.payload.totalAmountDue); }); }, []); + return (