Transaction flow by jbrauck-unchained · Pull Request #394 · caravan-bitcoin/caravan

jbrauck-unchained · 2025-10-08T03:17:12Z

What kind of change does this PR introduce?

This introduces a new tranasction flow diagram feature

Issue Number:

Fixes #393 #393

Snapshots/Videos:

If relevant, did you update the documentation?

Summary

I like what sparrow does to try and give a user a sense of understanding their own transaction. I think this is a small lift to gain feature parity in a place that makes caravan more educational.

Does this PR introduce a breaking change?

Checklist

I have tested my changes thoroughly.
I have added or updated tests to cover my changes (if applicable).
I have verified that test coverage meets or exceeds 95% (if applicable).
I have run the test suite locally, and all tests pass.
I have written tests for all new changes/features
I have followed the project's coding style and conventions.
I have created a changeset to document my changes (npm run changeset)

Other information

Have you read the contributing guide?

For information on creating and using changesets, please refer to our documentation on changesets.

changeset-bot · 2025-10-08T03:17:15Z

⚠️ No Changeset found

Latest commit: 1f76f55

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2025-10-08T03:17:17Z

@jbrauck-unchained is attempting to deploy a commit to the Unchained Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2025-10-08T13:27:13Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
caravan-coordinator	Ready	Preview, Comment	Jan 22, 2026 2:33am

getting on main

…ed/caravan into transaction-flow trying to fix this

Legend101Zz · 2025-10-23T14:18:24Z

@jbrauck-unchained maybe you'll have do the formatting ( run the linter ) and get the unsed imports out for the ci to pass :)

Legend101Zz · 2025-10-23T14:19:25Z

One small nit: maybe we can add ~ 0.00% total so we can tell the user we are rounding up here and they don't think of this as a bug

Legend101Zz · 2025-10-23T14:20:54Z

maybe we can remove one of the Edit Transaction Button

github-actions · 2025-12-17T03:08:26Z

This pull request has been inactive for 30 days and has been marked as stale. It will be closed in 7 days if no further activity occurs. To keep this PR open, add the "long-lived" label or comment on it.

Legend101Zz

@jbrauck-unchained thanks for the awesome work , I tested it and it looks super good to me , now I guess we can move towards the code changes , the main concern I have is over modularity and an IIFE used in rendering of the flow status

apps/coordinator/src/clients/txHistory.ts

apps/coordinator/src/components/Wallet/TransactionPreview.jsx

apps/coordinator/src/components/Wallet/TransactionFlowDiagram.tsx

Legend101Zz · 2026-01-06T02:13:02Z

apps/coordinator/src/components/Wallet/TransactionFlowDiagram.tsx

+    return `${address.slice(0, 10)}...${address.slice(-8)}`;
+  };
+
+  const getStatusDisplay = () => {


this can go in the utils file then

Legend101Zz · 2026-01-06T02:15:02Z

apps/coordinator/src/components/Wallet/TransactionFlowDiagram.tsx

+  };
+
+  // Format script type for display
+  const formatScriptType = (scriptType?: string) => {


can you add this and formatAddress in the general utils file as they can be used by other components too :)

Is there a different general utils file you are talking about? For now I added to the TransactionFlowUtils.ts file

that works perfectly for me :)

…alculation

- Create TransactionFlowDiagram directory structure with separate files: - index.tsx: Main component file (cleaner, more focused) - hooks.ts: Custom useFlowPaths hook for SVG path calculations - utils.ts: Utility functions (buildCurvePath, formatAddress, formatScriptType, getScriptTypeColor, getStatusDisplay) - FlowDrawers.tsx: Input and output drawer components - FlowSummary.tsx: Summary section with legend and transaction totals - Move formatSats and formatAddress to transactionFlowUtils.ts for reuse - Remove old 1704-line monolithic TransactionFlowDiagram.tsx file This addresses code review feedback to improve maintainability and readability.

- Remove unused variables in TransactionPreview.jsx render method - Fix prettier formatting in TransactionsTable.tsx - Fix prettier formatting in useTransactionDetails.ts - Remove unused blockHeight variable in transactionFlowUtils.ts

Legend101Zz

Thanks alot for the changes , it's looking really good now , nothing from my end now :)

@bucko13 can you please review it when you get the chance ...

bucko13

I don't love all of the inline stylings that we have throughout this. it will make the aesthetics come out inconsistent with the rest of the app and also harder to maintain. we should be able to use existing theming or components and/or update to the theme.

few other opportunities for code consolidation/cleanup. Also would like to add type safety where possible.

bucko13 · 2026-03-03T22:26:28Z

apps/coordinator/src/components/Wallet/TransactionFlowDiagram/FlowDrawers.tsx

+          }}
+        >
+          {inputs.map((input, idx) => {
+            const inputAmount = BigNumber(


We should pull this out to be its own component and then just pass in the props.

bucko13 · 2026-03-03T22:29:26Z

apps/coordinator/src/components/Wallet/TransactionFlowDiagram/FlowSummary.tsx

+              label="Economical"
+              color="success"
+              size="small"
+              sx={{ height: 20, fontSize: "0.7rem" }}


seems like there's some room for code consolidation here. this styling is repeated on every box as far as I can tell and it should be generalized. If we change the look somehow you'll have to change every single line. do we want this to be a specialized kind of component?

bucko13 · 2026-03-03T22:45:48Z

apps/coordinator/src/components/Wallet/TransactionFlowDiagram/index.tsx

+            }}
+          >
+            {inputs.slice(0, 4).map((input, idx) => {
+              const inputAmount = BigNumber(


another one that should be its own component to simplify this file a bit. and what can we do to clean up the inline styles?

bucko13 · 2026-03-03T22:46:28Z

apps/coordinator/src/components/Wallet/TransactionFlowDiagram/index.tsx

+
+          {/* Change Outputs */}
+          {flowData.changeOutputs.map((output, idx) => {
+            const amount = BigNumber(output.amount);


modular component opportunity here.

bucko13 · 2026-03-03T22:48:53Z

apps/coordinator/src/components/Wallet/TransactionFlowDiagram/index.tsx

lots of simplification we can get here.

bucko13 · 2026-03-03T23:03:34Z

apps/coordinator/src/hooks/useTransactionDetails.ts

+  const blockchainClient = useGetClient();
+
+  return useQuery(
+    [TRANSACTION_DETAILS_KEY, txid],


see some of the other hooks for how we setup the query cache keys.

bucko13 · 2026-03-03T23:04:36Z

apps/coordinator/src/reducers/transactionReducer.js

      return updateState(state);
    case SET_TXID:
      return updateState(state, { txid: action.value });
+    case SET_BROADCASTING:


now i'm curious what this is actually indicating. also wonder if there's a way we can avoid adding to the redux store. It's hard in caravan since we have a lot of tightly coupled legacy code, but if we can avoid adding to the redux store that would definitely be the preference.

bucko13 · 2026-03-03T23:05:03Z

apps/coordinator/src/utils/transactionFlowUtils.ts

+  changeAddress?: string;
+  inputsTotalSats: BigNumber;
+  status:
+    | "draft"


see we're using these values in other places. what if we made this a shareable type and then could make all uses of it type safe.

bucko13 · 2026-03-03T23:05:23Z

apps/coordinator/src/utils/transactionFlowUtils.ts

+/**
+ * Detect script type from address prefix (heuristic)
+ */
+const detectScriptTypeFromAddress = (address?: string): string | undefined => {


we have address type detection tools in caravan-bitcoin

bucko13 · 2026-03-03T23:05:50Z

apps/coordinator/src/utils/transactionFlowUtils.ts

+ * @returns FlowDiagramProps ready for the component
+ */
+export const transformTransactionToFlowDiagram = (
+  tx: any,


I think we have some types for this don't we @Legend101Zz ?

jevidon · 2026-03-06T16:09:33Z

Overall really solid. Just a couple nits I noticed, but not blocking.

jbrauck-unchained added 4 commits October 5, 2025 20:44

i like it so far

95b035c

I like this so far

9aaffb6

stopping point before clean up

fe95c91

deleted the markdown slop

833bffb

Merge branch 'main' into transaction-flow

fac3a55

vercel bot deployed to Preview October 8, 2025 13:31 View deployment

jbrauck-unchained added 4 commits October 17, 2025 17:08

keeps transaction preview persistent

b76f135

added high i/o handling with drawer

38f2dbc

Merge remote-tracking branch 'origin/main' into transaction-flow

84ec0b5

getting on main

Merge branch 'transaction-flow' of https://github.com/jbrauck-unchain…

4893193

…ed/caravan into transaction-flow trying to fix this

vercel bot deployed to Preview October 17, 2025 21:45 View deployment

lint and prettier fixes

ba88901

vercel bot deployed to Preview October 24, 2025 00:54 View deployment

jbrauck-unchained and others added 2 commits October 23, 2025 21:00

remove comment

5072664

Merge branch 'main' into transaction-flow

67d14e8

vercel bot deployed to Preview October 24, 2025 01:05 View deployment

added ~ for close to 0% of transaction fees

e3caf91

vercel bot deployed to Preview October 24, 2025 01:08 View deployment

Merge branch 'main' into transaction-flow

f7fb50d

vercel bot deployed to Preview October 30, 2025 13:31 View deployment

Merge branch 'main' into transaction-flow

213b5a9

vercel bot deployed to Preview November 17, 2025 01:48 View deployment

github-actions bot added the stale label Dec 17, 2025

bucko13 added the long-lived label Dec 18, 2025

merge in main

accada8

vercel bot deployed to Preview December 23, 2025 20:50 View deployment

jbrauck-unchained mentioned this pull request Dec 24, 2025

Fix transaction history when using public node clients #426

Merged

7 tasks

feat: add flow diagram support on txhistory

7f0d7fa

vercel bot deployed to Preview December 24, 2025 19:46 View deployment

Legend101Zz suggested changes Jan 6, 2026

View reviewed changes

fix: resolve merge conflict comment and refactor transaction status c…

6e26e0e

…alculation

vercel bot deployed to Preview January 22, 2026 02:13 View deployment

vercel bot deployed to Preview January 22, 2026 02:20 View deployment

fix: resolve linting errors from refactoring

6c4935a

- Remove unused variables in TransactionPreview.jsx render method - Fix prettier formatting in TransactionsTable.tsx - Fix prettier formatting in useTransactionDetails.ts - Remove unused blockHeight variable in transactionFlowUtils.ts

vercel bot deployed to Preview January 22, 2026 02:25 View deployment

Merge branch 'main' into transaction-flow

1f76f55

vercel bot deployed to Preview January 22, 2026 02:33 View deployment

Legend101Zz approved these changes Jan 27, 2026

View reviewed changes

Legend101Zz added the final review label Jan 27, 2026

Legend101Zz requested a review from bucko13 January 27, 2026 13:08

bucko13 reviewed Mar 3, 2026

View reviewed changes

Conversation

jbrauck-unchained commented Oct 8, 2025

Checklist

Uh oh!

changeset-bot bot commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Oct 8, 2025

Uh oh!

vercel bot commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Legend101Zz commented Oct 23, 2025

Uh oh!

Legend101Zz commented Oct 23, 2025

Uh oh!

Legend101Zz commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 17, 2025

Uh oh!

Legend101Zz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Legend101Zz left a comment

Choose a reason for hiding this comment

Uh oh!

bucko13 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jevidon commented Mar 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot bot commented Oct 8, 2025 •

edited

Loading

vercel bot commented Oct 8, 2025 •

edited

Loading

Legend101Zz commented Oct 23, 2025 •

edited

Loading