diff --git a/packages/features/src/send/index.stories.tsx b/packages/features/src/send/index.stories.tsx index ebc33dba..494ba1a9 100644 --- a/packages/features/src/send/index.stories.tsx +++ b/packages/features/src/send/index.stories.tsx @@ -41,6 +41,8 @@ export const Summary = () => { total: 25.1, }} confirmationForm={confirmationForm} + onClose={action("On Close")} + onGoBack={action("Go Back")} submitTransaction={(data: any) => console.log(data)} /> ) diff --git a/packages/features/src/send/routes/transaction-summary.tsx b/packages/features/src/send/routes/transaction-summary.tsx index 6be7e0b5..71db398e 100644 --- a/packages/features/src/send/routes/transaction-summary.tsx +++ b/packages/features/src/send/routes/transaction-summary.tsx @@ -5,6 +5,7 @@ import { useTransactionStore } from "@/common/store/transaction" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" +import { useNavigate } from "react-router-dom" import type { z } from "zod" import { ConfirmTransactionSchema } from "../components/confirm-transaction-form.schema" import { useTransactionConfirmation } from "../hooks/use-transaction-confirmation" @@ -13,6 +14,7 @@ import { TransactionSummaryView } from "../views/transaction-summary" type ConfirmTransactionData = z.infer export const TransactionSummaryRoute = () => { + const navigate = useNavigate() const { publicKey } = useAccount() const outgoingTransaction = useTransactionStore( (state) => state.outgoingTransaction, @@ -44,6 +46,8 @@ export const TransactionSummaryRoute = () => { total: total ?? 0, }} submitTransaction={submitTransaction} + onGoBack={() => navigate(-1)} + onClose={() => navigate("/dashboard")} /> ) } diff --git a/packages/features/src/send/views/transaction-summary.tsx b/packages/features/src/send/views/transaction-summary.tsx index 991d734e..c9ed6941 100644 --- a/packages/features/src/send/views/transaction-summary.tsx +++ b/packages/features/src/send/views/transaction-summary.tsx @@ -18,40 +18,58 @@ type TransactionSummaryViewProps = { } confirmationForm: UseFormReturn<{ spendingPassword: string }> submitTransaction: SubmitHandler + onGoBack: () => void + onClose: () => void } export const TransactionSummaryView = ({ transaction, confirmationForm, submitTransaction, + onGoBack, + onClose, }: TransactionSummaryViewProps) => { return ( - +

Summary

From
-
- {truncateString({ - value: transaction.from, - endCharCount: 3, - firstCharCount: 5, - })} +
+
+ {truncateString({ + value: transaction.from, + endCharCount: 3, + firstCharCount: 5, + })} +
-
From
-
- {truncateString({ - value: transaction.to, - endCharCount: 3, - firstCharCount: 5, - })} +
To
+
+
+ {truncateString({ + value: transaction.to, + endCharCount: 3, + firstCharCount: 5, + })} +