[Build Transaction] Create Claimable Balance operation

src/app/(sidebar)/transaction/build/components/Operations.tsx

@@ -23,6 +23,7 @@ import { sanitizeObject } from "@/helpers/sanitizeObject";
 import { TRANSACTION_OPERATIONS } from "@/constants/transactionOperations";
 import { useStore } from "@/store/useStore";
 import {
+  AnyObject,
   AssetObject,
   AssetObjectValue,
   AssetPoolShareObjectValue,
@@ -337,6 +338,72 @@ export const Operations = () => {
     return false;
   };
 
+  const isMissingClaimantFields = (
+    param: string,
+    value: AnyObject[] | undefined,
+  ) => {
+    if (param === "claimants") {
+      if (!value || value.length === 0) {
+        return false;
+      }
+
+      let missing = false;
+
+      (value || []).forEach((val) => {
+        if (
+          !val.destination ||
+          !val.predicate ||
+          isEmptyObject(val.predicate)
+        ) {
+          missing = true;
+        }
+
+        // Check only if nothing is missing yet
+        if (!missing) {
+          const missingPredicate = loopPredicate(val.predicate, []);
+
+          missing = Boolean(missingPredicate && missingPredicate?.length > 0);
+        }
+      });
+
+      return missing;
+    }
+
+    return false;
+  };
+
+  const loopPredicate = (
+    predicate: AnyObject = {},
+    missingArray: boolean[],
+  ) => {
+    if (isEmptyObject(predicate)) {
+      missingArray.push(true);
+    }
+
+    Object.entries(predicate).forEach(([key, val]) => {
+      if (["relative", "absolute"].includes(key) && typeof val === "string") {
+        if (!val) {
+          missingArray.push(true);
+        }
+      }
+
+      if (Array.isArray(val)) {
+        val.forEach((v) => loopPredicate(v, missingArray));
+      } else if (typeof val === "object") {
+        if (isEmptyObject(val)) {
+          if (key !== "unconditional") {
+            missingArray.push(true);
+          }
+        } else {
+          loopPredicate(val, missingArray);
+        }
+      }
+      // }
+    });
+
+    return missingArray;
+  };
+
   const validateOperationParam = ({
     opIndex,
     opParam,
@@ -436,6 +503,13 @@ export const Operations = () => {
       opParamMissingFields = [...opParamMissingFields, opParam];
     }
 
+    //==== Handle claimable balance claimants
+    const missingClaimantFields = isMissingClaimantFields(opParam, opValue);
+
+    if (missingClaimantFields && !opParamMissingFields.includes(opParam)) {
+      opParamMissingFields = [...opParamMissingFields, opParam];
+    }
+
     return {
       operationType: opType,
       error: opParamErrorFields,
@@ -699,7 +773,6 @@ export const Operations = () => {
             ) : null
           }
         >
-          {/* TODO: remove disabled attribute when operation is implemented */}
           <option value="">Select operation type</option>
           <option value="create_account">Create Account</option>
           <option value="payment">Payment</option>
@@ -720,7 +793,7 @@ export const Operations = () => {
           <option value="account_merge">Account Merge</option>
           <option value="manage_data">Manage Data</option>
           <option value="bump_sequence">Bump Sequence</option>
-          <option value="create_claimable_balance" disabled>
+          <option value="create_claimable_balance">
             Create Claimable Balance
           </option>
           <option value="claim_claimable_balance">
@@ -834,6 +907,20 @@ export const Operations = () => {
                                 });
                               },
                             });
+                          case "claimants":
+                            return component.render({
+                              ...baseProps,
+                              onChange: (
+                                claimants: AnyObject[] | undefined,
+                              ) => {
+                                handleOperationParamChange({
+                                  opIndex: idx,
+                                  opParam: input,
+                                  opValue: claimants,
+                                  opType: op.operation_type,
+                                });
+                              },
+                            });
                           case "line":
                             return component.render({
                               ...baseProps,

src/app/(sidebar)/transaction/build/components/TransactionXdr.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { Button } from "@stellar/design-system";
 import { stringify } from "lossless-json";
 import { StrKey, TransactionBuilder } from "@stellar/stellar-sdk";
+import { set } from "lodash";
 import * as StellarXdr from "@/helpers/StellarXdr";
 
 import { SdsLink } from "@/components/SdsLink";
@@ -171,6 +172,62 @@ export const TransactionXdr = () => {
         }, [] as any[]);
       };
 
+      const formatPredicate = (predicate: AnyObject) => {
+        const loop = (
+          item: AnyObject,
+          result: AnyObject,
+          parent: string | undefined,
+        ): AnyObject => {
+          const params = Object.entries(item);
+
+          const key = params[0][0];
+          const val = params[0][1];
+
+          const getPath = (parent: string | undefined) =>
+            `${parent ? `${parent}.` : ""}`;
+
+          switch (key) {
+            case "unconditional":
+              result[`${parent || ""}`] = "unconditional";
+              break;
+            case "conditional":
+              loop(val, result, parent);
+              break;
+            case "and":
+            case "or":
+              val.forEach((v: any, idx: number) =>
+                loop(v, result, `${getPath(parent)}${key}[${idx}]`),
+              );
+              break;
+            case "not":
+              loop(val, result, `${getPath(parent)}${key}`);
+              break;
+            case "time":
+              loop(val, result, parent);
+              break;
+            case "relative":
+              result[`${getPath(parent)}before_relative_time`] = BigInt(val);
+              break;
+            case "absolute":
+              result[`${getPath(parent)}before_absolute_time`] = BigInt(val);
+              break;
+            default:
+            // Do nothing
+          }
+
+          return result;
+        };
+
+        const formattedPredicate = loop(predicate, {}, undefined);
+
+        return Object.entries(formattedPredicate).reduce((res, entry) => {
+          const [path, value] = entry;
+          res = path ? set(res, path, value) : value;
+
+          return res;
+        }, {} as AnyObject);
+      };
+
       const flagTotal = (
         val: string[],
         operations: OptionFlag[],
@@ -345,6 +402,21 @@ export const TransactionXdr = () => {
           };
         }
 
+        if (opType === "create_claimable_balance") {
+          return {
+            asset: formatAssetValue(params.asset),
+            amount: xdrUtils.toAmount(params.amount),
+            claimants: params.claimants.map((cl: AnyObject) => {
+              return {
+                claimant_type_v0: {
+                  destination: cl.destination,
+                  predicate: formatPredicate(cl.predicate),
+                },
+              };
+            }),
+          };
+        }
+
         return Object.entries(params).reduce((res, [key, val]) => {
           res[key] = getXdrVal(key, val, opType);