chore(tx summary): improve ux

palladians · May 15, 2024 · c1fdf8d · c1fdf8d
1 parent 970e077
commit c1fdf8d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 14 deletions.
diff --git 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
@@ -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<typeof ConfirmTransactionSchema>
 
 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
@@ -18,40 +18,58 @@ type TransactionSummaryViewProps = {
   }
   confirmationForm: UseFormReturn<{ spendingPassword: string }>
   submitTransaction: SubmitHandler<any>
+  onGoBack: () => void
+  onClose: () => void
 }
 
 export const TransactionSummaryView = ({
   transaction,
   confirmationForm,
   submitTransaction,
+  onGoBack,
+  onClose,
 }: TransactionSummaryViewProps) => {
   return (
     <AppLayout>
-      <MenuBar variant="back-stop" />
+      <MenuBar
+        variant="back-stop"
+        onBackClicked={onGoBack}
+        onCloseClicked={onClose}
+      />
       <div className="flex flex-1 flex-col px-8 pb-8 gap-2">
         <h1 className="text-3xl">Summary</h1>
         <div className="card bg-secondary py-3 px-4 flex flex-row justify-between mt-1">
           <div className="flex flex-col">
             <div className="text-[#7D7A9C]">From</div>
-            <div>
-              {truncateString({
-                value: transaction.from,
-                endCharCount: 3,
-                firstCharCount: 5,
-              })}
+            <div
+              className="tooltip before:max-w-screen before:break-all before:ml-16"
+              data-tip={transaction.from}
+            >
+              <div>
+                {truncateString({
+                  value: transaction.from,
+                  endCharCount: 3,
+                  firstCharCount: 5,
+                })}
+              </div>
             </div>
           </div>
           <div className="btn btn-circle btn-neutral text-mint">
             <ArrowRightIcon size={24} />
           </div>
           <div className="flex flex-col">
-            <div className="text-[#7D7A9C]">From</div>
-            <div>
-              {truncateString({
-                value: transaction.to,
-                endCharCount: 3,
-                firstCharCount: 5,
-              })}
+            <div className="text-[#7D7A9C]">To</div>
+            <div
+              className="tooltip before:max-w-screen before:break-all before:-ml-16"
+              data-tip={transaction.to}
+            >
+              <div>
+                {truncateString({
+                  value: transaction.to,
+                  endCharCount: 3,
+                  firstCharCount: 5,
+                })}
+              </div>
             </div>
           </div>
         </div>