Skip to content

New Transaction Flow #1936

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
jeesunikim wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

New Transaction Flow #1936

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
40dcee1
Add a new build folder, <TransactionFlowFooter/>, <TransactionStepper…
jeesunikim Mar 6, 2026
23175ae
add createTransactionFlowStore (#1937)
jeesunikim Mar 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions docs/new-transaction-flow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ const useTransactionFlowStore = create<TransactionFlowState>()(
simulationResultJson: "",
authEntriesXdr: [],
signedAuthEntriesXdr: [],
assembledXdr: "",
assembledXdr: "", // output of assembleTransaction(); passed to Sign step
signedXdr: "",
validateResultJson: "",
// actions...
Expand Down Expand Up @@ -838,7 +838,10 @@ After simulation succeeds and auth entries are detected:

- Add `authEntries: xdr.SorobanAuthorizationEntry[]` to simulate state
- Add `signedAuthEntries: xdr.SorobanAuthorizationEntry[]` to simulate state
- Add `assembledXdr: string` for rebuilt transaction XDR with signed auth
- Add `assembledXdr: string` — output of `assembleTransaction(tx, simResult)`
with signed auth entries and resource data attached; this is what the Sign
step consumes (`signedAuthEntries` stay in local component state and are not
persisted)

### Step 7: Create `ValidateStepContent` component

Expand Down
221 changes: 109 additions & 112 deletions src/app/(sidebar)/transaction/build/components/Params.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
MemoPickerValue,
} from "@/components/FormElements/MemoPicker";
import { TimeBoundsPicker } from "@/components/FormElements/TimeBoundsPicker";
import { PageCard } from "@/components/layout/PageCard";
import { SourceAccountPicker } from "@/components/SourceAccountPicker";

import { sanitizeObject } from "@/helpers/sanitizeObject";
Expand Down Expand Up @@ -268,120 +267,118 @@ export const Params = () => {
};

return (
<PageCard heading="Build transaction">
<Box gap="lg">
<SourceAccountPicker
value={txnParams.source_account}
error={paramsError.source_account}
onChange={handleSourceAccountChange}
/>

<PositiveIntPicker
id="seq_num"
label="Transaction sequence number"
placeholder="Ex: 559234806710273"
value={txnParams.seq_num}
error={paramsError.seq_num}
onChange={(e) => {
const id = "seq_num";
handleParamChange(id, e.target.value);
handleParamsError(id, validateParam(id, e.target.value));
}}
note="The transaction sequence number is usually one higher than current account sequence number."
rightElement={
<InputSideElement
variant="button"
onClick={() => {
handleParamChange("seq_num", "");
fetchSequenceNumber();
}}
placement="right"
disabled={!txnParams.source_account || paramsError.source_account}
isLoading={isFetchingSequenceNumber || isLoadingSequenceNumber}
>
Fetch next sequence
</InputSideElement>
}
infoLink="https://developers.stellar.org/docs/glossary#sequence-number"
/>

<PositiveIntPicker
id="fee"
label="Base fee"
value={removeLeadingZeroes(txnParams.fee)}
error={paramsError.fee}
onChange={(e) => {
const id = "fee";
handleParamChange(id, e.target.value);
handleParamsError(id, validateParam(id, e.target.value));
}}
note={
<>
The base inclusion fee is currently set to 100 stroops (0.00001
lumens). For more real time inclusion fee, please see{" "}
<SdsLink href="https://developers.stellar.org/docs/data/apis/rpc/api-reference/methods/getFeeStats">
getFeeStats
</SdsLink>{" "}
from the RPC. To learn more about fees, please see{" "}
<SdsLink href="https://developers.stellar.org/docs/learn/fundamentals/fees-resource-limits-metering">
Fees & Metering
</SdsLink>
.
</>
}
infoLink="https://developers.stellar.org/docs/learn/glossary#base-fee"
/>

<MemoPicker
id="memo"
value={getMemoPickerValue()}
labelSuffix="optional"
error={paramsError.memo}
onChange={(_, memo) => {
const id = "memo";
handleParamChange(id, getMemoValue(memo));
handleParamsError(id, validateParam(id, memo));
}}
infoLink="https://developers.stellar.org/docs/encyclopedia/memos"
/>

<TimeBoundsPicker
id="time"
value={{
min_time: txnParams.cond?.time?.min_time,
max_time: txnParams.cond?.time?.max_time,
}}
labelSuffix="optional"
error={paramsError.cond?.time}
onChange={(timeBounds) => {
const id = "cond.time";
handleParamChange(id, timeBounds);
handleParamsError(id, validateParam("cond", timeBounds));
}}
infoLink="https://developers.stellar.org/docs/learn/glossary#time-bounds"
/>

<Box
gap="md"
direction="row"
align="center"
justify="end"
addlClassName="Params__buttons"
>
<Button
size="md"
variant="error"
<Box gap="lg">
<SourceAccountPicker
value={txnParams.source_account}
error={paramsError.source_account}
onChange={handleSourceAccountChange}
/>

<PositiveIntPicker
id="seq_num"
label="Transaction sequence number"
placeholder="Ex: 559234806710273"
value={txnParams.seq_num}
error={paramsError.seq_num}
onChange={(e) => {
const id = "seq_num";
handleParamChange(id, e.target.value);
handleParamsError(id, validateParam(id, e.target.value));
}}
note="The transaction sequence number is usually one higher than current account sequence number."
rightElement={
<InputSideElement
variant="button"
onClick={() => {
resetBuildParams();
setParamsError({});
trackEvent(TrackingEvent.TRANSACTION_BUILD_CLEAR_PARAMS);
handleParamChange("seq_num", "");
fetchSequenceNumber();
}}
icon={<Icon.RefreshCw01 />}
placement="right"
disabled={!txnParams.source_account || paramsError.source_account}
isLoading={isFetchingSequenceNumber || isLoadingSequenceNumber}
>
Clear params
</Button>
</Box>
Fetch next sequence
</InputSideElement>
}
infoLink="https://developers.stellar.org/docs/glossary#sequence-number"
/>

<PositiveIntPicker
id="fee"
label="Base fee"
value={removeLeadingZeroes(txnParams.fee)}
error={paramsError.fee}
onChange={(e) => {
const id = "fee";
handleParamChange(id, e.target.value);
handleParamsError(id, validateParam(id, e.target.value));
}}
note={
<>
The base inclusion fee is currently set to 100 stroops (0.00001
lumens). For more real time inclusion fee, please see{" "}
<SdsLink href="https://developers.stellar.org/docs/data/apis/rpc/api-reference/methods/getFeeStats">
getFeeStats
</SdsLink>{" "}
from the RPC. To learn more about fees, please see{" "}
<SdsLink href="https://developers.stellar.org/docs/learn/fundamentals/fees-resource-limits-metering">
Fees & Metering
</SdsLink>
.
</>
}
infoLink="https://developers.stellar.org/docs/learn/glossary#base-fee"
/>

<MemoPicker
id="memo"
value={getMemoPickerValue()}
labelSuffix="optional"
error={paramsError.memo}
onChange={(_, memo) => {
const id = "memo";
handleParamChange(id, getMemoValue(memo));
handleParamsError(id, validateParam(id, memo));
}}
infoLink="https://developers.stellar.org/docs/encyclopedia/memos"
/>

<TimeBoundsPicker
id="time"
value={{
min_time: txnParams.cond?.time?.min_time,
max_time: txnParams.cond?.time?.max_time,
}}
labelSuffix="optional"
error={paramsError.cond?.time}
onChange={(timeBounds) => {
const id = "cond.time";
handleParamChange(id, timeBounds);
handleParamsError(id, validateParam("cond", timeBounds));
}}
infoLink="https://developers.stellar.org/docs/learn/glossary#time-bounds"
/>

<Box
gap="md"
direction="row"
align="center"
justify="end"
addlClassName="Params__buttons"
>
<Button
size="md"
variant="error"
onClick={() => {
resetBuildParams();
setParamsError({});
trackEvent(TrackingEvent.TRANSACTION_BUILD_CLEAR_PARAMS);
}}
icon={<Icon.RefreshCw01 />}
>
Clear params
</Button>
</Box>
</PageCard>
</Box>
);
};
Loading
Loading