= ({ timeRemaining, isExpired }) => {
+ const { t } = useTranslation();
+
+ if (isExpired) {
+ return (
+
+ {t("families.canton.pendingTransactions.expired")}
+
+ );
+ }
+
+ return (
+
+ {timeRemaining || "-"}
+
+ );
+};
+
+export function View({
+ proposal,
+ unit,
+ timeRemaining,
+ addressToShow,
+ amountValue,
+ handleAcceptClick,
+ handleRejectClick,
+ handleWithdrawClick,
+ handleRowClick,
+}: ProposalRowViewModel) {
+ const { t } = useTranslation();
+ const { isIncoming, isExpired, expiresAt } = proposal;
+
+ return (
+
+
+
+
+ {isExpired ? (
+
+
+
+
+
+ ) : isIncoming ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isIncoming ? (
+ <>
+ {!isExpired && (
+
+ )}
+
+
+ ) : (
+
+ )}
+
+
+
+ );
+}
+
+function ProposalRow({ proposal, unit, onRowClick, onOpenModal }: ProposalRowProps) {
+ return ;
+}
+
+export default memo(ProposalRow);
diff --git a/apps/ledger-live-desktop/src/renderer/families/canton/PendingTransferProposals/components/ProposalsTable.tsx b/apps/ledger-live-desktop/src/renderer/families/canton/PendingTransferProposals/components/ProposalsTable.tsx
new file mode 100644
index 000000000000..ee7f4fc76ece
--- /dev/null
+++ b/apps/ledger-live-desktop/src/renderer/families/canton/PendingTransferProposals/components/ProposalsTable.tsx
@@ -0,0 +1,127 @@
+import { Unit } from "@ledgerhq/types-cryptoassets";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Box from "~/renderer/components/Box";
+import SectionTitle from "~/renderer/components/OperationsList/SectionTitle";
+import TableContainer, { TableHeader } from "~/renderer/components/TableContainer";
+import Text from "~/renderer/components/Text";
+import type { GroupedProposals, TransferProposalAction } from "../types";
+import ProposalRow from "./ProposalRow";
+
+const TableHeaderRow = styled(Box)`
+ border-bottom: 1px solid ${p => p.theme.colors.neutral.c40};
+ background-color: ${p => p.theme.colors.background.main};
+ padding: 12px 0;
+`;
+
+type ProposalsTableProps = {
+ proposals: GroupedProposals;
+ count: number;
+ titleKey: string;
+ isIncomingTable: boolean;
+ unit: Unit;
+ onRowClick: (contractId: string) => void;
+ onOpenModal: (contractId: string, action: TransferProposalAction) => void;
+};
+
+function ProposalsTable({
+ proposals,
+ count,
+ titleKey,
+ isIncomingTable,
+ unit,
+ onRowClick,
+ onOpenModal,
+}: ProposalsTableProps) {
+ const { t } = useTranslation();
+
+ if (count === 0) return null;
+
+ return (
+
+
+
+
+
+
+
+ {t("families.canton.pendingTransactions.date")}
+
+
+
+
+
+ {isIncomingTable
+ ? t("families.canton.pendingTransactions.from")
+ : t("families.canton.pendingTransactions.to")}
+
+
+
+
+ {t("families.canton.pendingTransactions.expiresIn")}
+
+
+
+
+ {t("families.canton.pendingTransactions.amount")}
+
+
+
+
+ {t("families.canton.pendingTransactions.action")}
+
+
+
+
+ {proposals.map(group => (
+
+
+
+ {group.proposals.map(proposal => (
+
+ ))}
+
+
+ ))}
+
+ );
+}
+
+export default ProposalsTable;
diff --git a/apps/ledger-live-desktop/src/renderer/families/canton/PendingTransferProposals/components/useProposalRowViewModel.ts b/apps/ledger-live-desktop/src/renderer/families/canton/PendingTransferProposals/components/useProposalRowViewModel.ts
new file mode 100644
index 000000000000..bd0bfcaf327c
--- /dev/null
+++ b/apps/ledger-live-desktop/src/renderer/families/canton/PendingTransferProposals/components/useProposalRowViewModel.ts
@@ -0,0 +1,80 @@
+import type { Unit } from "@ledgerhq/types-cryptoassets";
+import { useTimeRemaining } from "@ledgerhq/live-common/families/canton/react";
+import { BigNumber } from "bignumber.js";
+import { useCallback } from "react";
+import type { ProcessedProposal, TransferProposalAction } from "../types";
+
+export type ProposalRowProps = {
+ proposal: ProcessedProposal;
+ unit: Unit;
+ onRowClick: (contractId: string) => void;
+ onOpenModal: (contractId: string, action: TransferProposalAction) => void;
+};
+
+export type ProposalRowViewModel = {
+ proposal: ProcessedProposal;
+ unit: Unit;
+ timeRemaining: string;
+ addressToShow: string;
+ amountValue: BigNumber;
+ handleAcceptClick: (e: React.MouseEvent) => void;
+ handleRejectClick: (e: React.MouseEvent) => void;
+ handleWithdrawClick: (e: React.MouseEvent) => void;
+ handleRowClick: () => void;
+};
+
+export function useProposalRowViewModel({
+ proposal,
+ unit,
+ onRowClick,
+ onOpenModal,
+}: ProposalRowProps): ProposalRowViewModel {
+ const { isIncoming, isExpired, contractId, sender, receiver, amount } = proposal;
+
+ const timeRemaining = useTimeRemaining(proposal.expiresAtMicros, isExpired);
+
+ const addressToShow = isIncoming ? sender : receiver;
+ const amountValue = isIncoming ? amount : amount.negated();
+
+ const handleRowClick = useCallback(() => {
+ onRowClick(contractId);
+ }, [onRowClick, contractId]);
+
+ const handleAcceptClick = useCallback(
+ (e: React.MouseEvent) => {
+ e.stopPropagation();
+ if (!isExpired) {
+ onOpenModal(contractId, "accept");
+ }
+ },
+ [contractId, isExpired, onOpenModal],
+ );
+
+ const handleRejectClick = useCallback(
+ (e: React.MouseEvent) => {
+ e.stopPropagation();
+ onOpenModal(contractId, "reject");
+ },
+ [contractId, onOpenModal],
+ );
+
+ const handleWithdrawClick = useCallback(
+ (e: React.MouseEvent) => {
+ e.stopPropagation();
+ onOpenModal(contractId, "withdraw");
+ },
+ [contractId, onOpenModal],
+ );
+
+ return {
+ proposal,
+ unit,
+ timeRemaining,
+ addressToShow,
+ amountValue,
+ handleAcceptClick,
+ handleRejectClick,
+ handleWithdrawClick,
+ handleRowClick,
+ };
+}
diff --git a/apps/ledger-live-desktop/src/renderer/families/canton/PendingTransferProposals/index.test.tsx b/apps/ledger-live-desktop/src/renderer/families/canton/PendingTransferProposals/index.test.tsx
deleted file mode 100644
index 60dd2fcb0038..000000000000
--- a/apps/ledger-live-desktop/src/renderer/families/canton/PendingTransferProposals/index.test.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions */
-import { TopologyChangeError } from "@ledgerhq/coin-canton";
-import { useBridgeSync } from "@ledgerhq/live-common/bridge/react/index";
-import { useCantonAcceptOrRejectOffer } from "@ledgerhq/live-common/families/canton/react";
-import { CantonAccount } from "@ledgerhq/live-common/families/canton/types";
-import React from "react";
-import { fireEvent, render, screen, waitFor } from "tests/testSetup";
-import { State } from "~/renderer/reducers";
-import { getCurrentDevice } from "~/renderer/reducers/devices";
-import { INITIAL_STATE as SETTINGS_INITIAL_STATE } from "~/renderer/reducers/settings";
-import { createMockAccount } from "../__tests__/testUtils";
-import { handleTopologyChangeError } from "../hooks/topologyChangeError";
-import { createMockDevice } from "../OnboardModal/__tests__/testUtils";
-import PendingTransferProposals from "./index";
-
-const mockDispatch = jest.fn();
-jest.mock("LLD/hooks/redux", () => {
- const actual = jest.requireActual("LLD/hooks/redux");
- return {
- ...actual,
- useDispatch: () => mockDispatch,
- };
-});
-jest.mock("react-i18next", () => ({
- ...jest.requireActual("react-i18next"),
- useTranslation: () => ({
- t: (key: string) => key,
- }),
- Trans: ({ i18nKey }: any) => {i18nKey},
-}));
-jest.mock("@ledgerhq/live-common/families/canton/react");
-jest.mock("@ledgerhq/live-common/bridge/react/index");
-jest.mock("~/renderer/reducers/devices", () => {
- const actual = jest.requireActual("~/renderer/reducers/devices");
- return {
- __esModule: true,
- ...actual,
- getCurrentDevice: jest.fn(),
- };
-});
-jest.mock("../hooks/topologyChangeError", () => ({
- __esModule: true,
- handleTopologyChangeError: jest.fn(),
- TopologyChangeError: jest.requireActual("@ledgerhq/coin-canton").TopologyChangeError,
-}));
-jest.mock("./DeviceAppModal", () => ({
- __esModule: true,
- default: ({ isOpen, onConfirm, onClose }: any) =>
- isOpen ? (
-
-
-
-
- ) : null,
-}));
-
-jest.mock("~/renderer/hooks/useAccountUnit", () => ({
- useAccountUnit: jest.fn(() => ({ code: "AMU", magnitude: 18, name: "Amulet" })),
-}));
-jest.mock("~/renderer/components/OperationsList/AddressCell", () => ({
- __esModule: true,
- default: () => ,
- splitAddress: (value: string) => ({ left: value.slice(0, 5), right: value.slice(5) }),
- SplitAddress: ({ value }: { value: string }) => (
- {value}
- ),
- Address: ({ value }: { value: string }) => {value},
- Cell: ({ children }: { children: React.ReactNode }) => {children}
,
-}));
-jest.mock("./PendingTransferProposalsDetails", () => ({
- __esModule: true,
- default: ({ account, contractId, onOpenModal }: any) => (
-
-
Account: {account.id}
-
Contract: {contractId}
-
-
-
-