Skip to content
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

Jump to bottom

Show Create Claimable Balance operation CB ID #1128

Merged
merged 5 commits into from
Nov 13, 2024
Merged

Show Create Claimable Balance operation CB ID #1128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e1b9272
Create claimable balance op: generate claimable balance ID + fix bug
quietbits Oct 30, 2024
e13b73d
Merge branch 'master' of https://github.com/stellar/laboratory into s…
quietbits Nov 1, 2024
e60fe89
View XDR: show Create Claimable Balance op IDs if available
quietbits Nov 1, 2024
6df9431
Resolve conflicts
quietbits Nov 7, 2024
981225a
Resolved merge conflicts
quietbits Nov 12, 2024
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
63 changes: 48 additions & 15 deletions src/app/(sidebar)/transaction/build/components/Operations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
"use client";

import { ChangeEvent, useEffect, useState } from "react";
import { ChangeEvent, Fragment, useEffect, useState } from "react";
import {
Badge,
Button,
Card,
Icon,
Select,
Notification,
Input,
} from "@stellar/design-system";

import { formComponentTemplateTxnOps } from "@/components/formComponentTemplateTxnOps";
Expand All @@ -21,6 +22,7 @@ import { arrayItem } from "@/helpers/arrayItem";
import { isEmptyObject } from "@/helpers/isEmptyObject";
import { sanitizeObject } from "@/helpers/sanitizeObject";
import { shareableUrl } from "@/helpers/shareableUrl";
import { getClaimableBalanceIdFromXdr } from "@/helpers/getClaimableBalanceIdFromXdr";

import { OP_SET_TRUST_LINE_FLAGS } from "@/constants/settings";
import { TRANSACTION_OPERATIONS } from "@/constants/transactionOperations";
Expand All @@ -38,7 +40,7 @@ import {
} from "@/types/types";

export const Operations = () => {
const { transaction } = useStore();
const { transaction, network } = useStore();
const { operations: txnOperations, xdr: txnXdr } = transaction.build;
const {
updateBuildOperations,
Expand Down Expand Up @@ -900,6 +902,31 @@ export const Operations = () => {
);
};

const renderClaimableBalanceId = (opIndex: number) => {
const balanceId = getClaimableBalanceIdFromXdr({
xdr: txnXdr,
networkPassphrase: network.passphrase,
opIndex,
});

if (!balanceId) {
return null;
}

return (
<Input
id={`${opIndex}-create_claimable_balance`}
label="Claimable Balance ID"
labelSuffix="generated"
fieldSize="md"
value={balanceId}
disabled
copyButton={{ position: "right" }}
infoLink="https://developers.stellar.org/docs/learn/glossary#claimablebalanceid"
/>
);
};

return (
<Box gap="md">
<Card>
Expand Down Expand Up @@ -986,19 +1013,25 @@ export const Operations = () => {
},
});
case "claimants":
return component.render({
...baseProps,
onChange: (
claimants: AnyObject[] | undefined,
) => {
handleOperationParamChange({
opIndex: idx,
opParam: input,
opValue: claimants,
opType: op.operation_type,
});
},
});
return (
<Fragment key={`op-${idx}-claimants-wrapper`}>
{component.render({
...baseProps,
onChange: (
claimants: AnyObject[] | undefined,
) => {
handleOperationParamChange({
opIndex: idx,
opParam: input,
opValue: claimants,
opType: op.operation_type,
});
},
})}

{renderClaimableBalanceId(idx)}
</Fragment>
);
case "line":
return component.render({
...baseProps,
Expand Down
68 changes: 65 additions & 3 deletions src/app/(sidebar)/xdr/view/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@ import {
Loader,
Button,
Icon,
Input,
} from "@stellar/design-system";
import { TransactionBuilder } from "@stellar/stellar-sdk";
import { useQueryClient } from "@tanstack/react-query";
import { stringify } from "lossless-json";

import { useLatestTxn } from "@/query/useLatestTxn";
import * as StellarXdr from "@/helpers/StellarXdr";
import { XDR_TYPE_TRANSACTION_ENVELOPE } from "@/constants/settings";

import { Box } from "@/components/layout/Box";
Expand All @@ -23,13 +24,15 @@ import { XdrPicker } from "@/components/FormElements/XdrPicker";
import { XdrTypeSelect } from "@/components/XdrTypeSelect";
import { PrettyJsonTransaction } from "@/components/PrettyJsonTransaction";
import { TransactionHashReadOnlyField } from "@/components/TransactionHashReadOnlyField";
import { LabelHeading } from "@/components/LabelHeading";
import { CopyJsonPayloadButton } from "@/components/CopyJsonPayloadButton";

import * as StellarXdr from "@/helpers/StellarXdr";
import { parseToLosslessJson } from "@/helpers/parseToLosslessJson";
import { useIsXdrInit } from "@/hooks/useIsXdrInit";
import { useStore } from "@/store/useStore";
import { delayedAction } from "@/helpers/delayedAction";
import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
import { useIsXdrInit } from "@/hooks/useIsXdrInit";
import { useStore } from "@/store/useStore";

export default function ViewXdr() {
const { xdr, network } = useStore();
Expand Down Expand Up @@ -78,6 +81,9 @@ export default function ViewXdr() {
};

const xdrJsonDecoded = xdrDecodeJson();
const txn = xdrJsonDecoded?.jsonString
? TransactionBuilder.fromXDR(xdr.blob, network.passphrase)
: null;

const prettifyJsonString = (jsonString: string): string => {
try {
Expand All @@ -88,6 +94,60 @@ export default function ViewXdr() {
}
};

const renderClaimableBalanceIds = () => {
if (!txn) {
return null;
}

const createClaimableBalanceIds = txn.operations.reduce(
(res, curOp, curIdx) => {
if (curOp.type === "createClaimableBalance") {
return [
...res,
{ opIdx: curIdx, cbId: (txn as any).getClaimableBalanceId(curIdx) },
];
}

return res;
},
[] as { opIdx: number; cbId: string }[],
);

if (createClaimableBalanceIds.length > 0) {
const labelText =
createClaimableBalanceIds.length === 1
? "a Create Claimable Balance operation"
: "Create Claimable Balance operations";

const idText = createClaimableBalanceIds.length === 1 ? "ID" : "IDs";

return (
<Box gap="sm">
<LabelHeading size="md">{`This transaction contains ${labelText} with the following ${idText}`}</LabelHeading>
<>
{createClaimableBalanceIds.map((op) => {
const id = `view-xdr-ccb-op-${op.cbId}`;

return (
<Input
key={id}
id={id}
fieldSize="md"
value={op.cbId}
disabled
copyButton={{ position: "right" }}
leftElement={`Operation ${op.opIdx}`}
/>
);
})}
</>
</Box>
);
}

return null;
};

return (
<Box gap="md">
<div className="PageHeader">
Expand Down Expand Up @@ -172,6 +232,8 @@ export default function ViewXdr() {
<>
{xdrJsonDecoded?.jsonString ? (
<Box gap="lg">
<>{renderClaimableBalanceIds()}</>

<div className="PageBody__content PageBody__scrollable">
<PrettyJsonTransaction
json={parseToLosslessJson(xdrJsonDecoded.jsonString)}
Expand Down
41 changes: 34 additions & 7 deletions src/components/FormElements/ClaimantsPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ const ClaimantPredicatePicker = ({
{isEmpty(predicateValue) ? (
<Predicate
index={index}
parentId={id}
key={`${id}-${index}`}
parentPath=""
onUpdate={(val: AnyObject | undefined) => {
Expand All @@ -171,6 +172,7 @@ const ClaimantPredicatePicker = ({
/>
) : (
renderComponent({
parentId: id,
index,
nodes: transformPredicateDataForRender(predicateValue),
onUpdate: handleUpdate,
Expand All @@ -183,11 +185,13 @@ const ClaimantPredicatePicker = ({
};

const renderComponent = ({
parentId,
index,
nodes,
onUpdate,
error,
}: {
parentId: string;
index: number;
nodes: AnyObject[];
onUpdate: (val: AnyObject | undefined) => void;
Expand All @@ -203,6 +207,7 @@ const renderComponent = ({

return (
<Component
parentId={parentId}
key={`${index}${parentPath}`}
index={index}
parentPath={parentPath}
Expand All @@ -217,13 +222,15 @@ const renderComponent = ({

const Predicate = ({
index,
parentId,
parentPath,
type,
nodeValue,
onUpdate,
error,
}: {
index: number;
parentId: string;
parentPath: string;
type?: string;
nodeValue?: AnyObject[] | undefined;
Expand Down Expand Up @@ -253,7 +260,7 @@ const Predicate = ({
</LabelHeading>

<RadioPicker
id={`${index}-${parentPath}-predicate`}
id={`${parentId}-${index}-${parentPath}-predicate`}
selectedOption={type}
onChange={(val) => {
onUpdate({
Expand All @@ -273,21 +280,29 @@ const Predicate = ({

<>
{isConditional &&
renderComponent({ nodes: nodeValue || [], onUpdate, error, index })}
renderComponent({
nodes: nodeValue || [],
onUpdate,
error,
index,
parentId,
})}
</>
</Box>
);
};

const PredicateType = ({
index,
parentId,
parentPath,
type,
nodeValue,
onUpdate,
error,
}: {
index: number;
parentId: string;
parentPath: string;
type: string;
nodeValue: AnyObject[];
Expand All @@ -299,7 +314,7 @@ const PredicateType = ({
return (
<Box gap="sm" addlClassName="PredicateTypeWrapper">
<RadioPicker
id={`${index}-${parentPath}-predicate-type`}
id={`${parentId}-${index}-${parentPath}-predicate-type`}
selectedOption={type}
label="Predicate Type"
onChange={(val) => {
Expand Down Expand Up @@ -332,7 +347,15 @@ const PredicateType = ({
["and", "or"].includes(type) ? "PredicateWrapper__split" : ""
}
>
<>{renderComponent({ nodes: nodeValue, onUpdate, error, index })}</>
<>
{renderComponent({
nodes: nodeValue,
onUpdate,
error,
index,
parentId,
})}
</>
</Box>
)}
</>
Expand All @@ -342,13 +365,15 @@ const PredicateType = ({

const PredicateTimeType = ({
index,
parentId,
parentPath,
type,
nodeValue,
onUpdate,
error,
}: {
index: number;
parentId: string;
parentPath: string;
type: string;
nodeValue: AnyObject[];
Expand All @@ -358,7 +383,7 @@ const PredicateTimeType = ({
return (
<>
<RadioPicker
id={`${index}-${parentPath}-time-type`}
id={`${parentId}-${index}-${parentPath}-time-type`}
selectedOption={type}
label="Time Type"
onChange={(val) => {
Expand All @@ -376,19 +401,21 @@ const PredicateTimeType = ({

{nodeValue &&
nodeValue.length > 0 &&
renderComponent({ nodes: nodeValue, onUpdate, error, index })}
renderComponent({ nodes: nodeValue, onUpdate, error, index, parentId })}
</>
);
};

const PredicateTimeValue = ({
index,
parentId,
parentPath,
nodeValue,
onUpdate,
error,
}: {
index: number;
parentId: string;
parentPath: string;
nodeValue: string;
onUpdate: (val: {
Expand All @@ -412,7 +439,7 @@ const PredicateTimeValue = ({
{inputType === "absolute" && (
<>
<TextPicker
id={`${index}-${parentPath}-time-value-abs`}
id={`${parentId}-${index}-${parentPath}-time-value-abs`}
placeholder="Ex: 1603303504"
value={nodeValue}
label="Time Value"
Expand Down
Loading