fix: Argument Type Conversion

Author: slycompiler

packages/frontend/src/actions/index.ts

@@ -2,7 +2,15 @@
 
 import { invokeContract } from "@/lib/invoke-contract";
 
-export async function callContract({ contractId, method, args }: { method: string; contractId: string; args: any[] }) {
+export async function callContract({
+  contractId,
+  method,
+  args,
+}: {
+  method: string;
+  contractId: string;
+  args: { type: string; value: string }[];
+}) {
   const result = await invokeContract({ contractId, method, args });
   return result;
 }

packages/frontend/src/components/InvokeFunction.tsx

@@ -11,7 +11,6 @@ import { toast } from "sonner";
 import { FunctionSpec } from "@/types/idl";
 import { DialogTrigger } from "@radix-ui/react-dialog";
 import { ChevronsLeftRightEllipsis } from "lucide-react";
-import { invokeContract } from "@/lib/invoke-contract";
 import { logger } from "@/state/utils";
 import { callContract } from "@/actions";
 import { networkRpc } from "@/lib/web3";
@@ -20,13 +19,16 @@ import { Networks } from "@stellar/stellar-sdk";
 
 function InvokeFunction({ method }: { method: FunctionSpec }) {
   const [isOpen, setIsOpen] = useState(false);
-  const [args, setArgs] = useState<Record<string, string>>({});
+  const [args, setArgs] = useState<Record<string, { type: string; value: string }>>({});
   const contractAddress = useSelector(store, (state) => state.context.contract?.address);
 
-  const handleInputChange = (name: string, value: string) => {
+  const handleInputChange = (name: string, value: string, type: string) => {
     setArgs((prev) => ({
       ...prev,
-      [name]: value,
+      [name]: {
+        type,
+        value,
+      },
     }));
   };
 
@@ -95,8 +97,8 @@ function InvokeFunction({ method }: { method: FunctionSpec }) {
               </Label>
               <Input
                 id={arg.name}
-                value={args[arg.name] || ""}
-                onChange={(e) => handleInputChange(arg.name, e.target.value)}
+                value={args[arg.name]?.value || ""}
+                onChange={(e) => handleInputChange(arg.name, e.target.value, arg.value.type)}
                 className="col-span-3"
                 placeholder={`Enter '${arg.name}' value`}
               />

packages/frontend/src/lib/invoke-contract.ts

@@ -1,18 +1,19 @@
-import { Address, BASE_FEE, Contract, Keypair, Networks, TransactionBuilder, xdr } from "@stellar/stellar-sdk";
-import { assembleTransaction, Server } from "@stellar/stellar-sdk/rpc";
+import { BASE_FEE, Contract, Keypair, nativeToScVal, Networks, TransactionBuilder } from "@stellar/stellar-sdk";
 import { networkRpc } from "./web3";
-import { buildAndSendTransaction } from "./deploy-steller";
+import { Server } from "@stellar/stellar-sdk/rpc";
 
-function buildOperation({ contractId, method, args }: { method: string; contractId: string; args: any[] }) {
+function buildOperation({
+  contractId,
+  method,
+  args,
+}: {
+  method: string;
+  contractId: string;
+  args: { type: string; value: string }[];
+}) {
   const contract = new Contract(contractId);
-  const scArgs = args.map((arg) => {
-    if (typeof arg === "string" && arg.startsWith("G")) {
-      return Address.fromString(arg).toScVal(); // Address
-    } else if (typeof arg === "number") {
-      return xdr.ScVal.scvI32(arg); // Integer
-    } else {
-      return xdr.ScVal.scvString(arg); // String (adjust as needed)
-    }
+  const scArgs = args.map(({ type, value }) => {
+    return nativeToScVal(value, { type });
   });
   const operation = contract.call(method, ...scArgs);
   return operation;
@@ -25,7 +26,7 @@ export async function invokeContract({
 }: {
   method: string;
   contractId: string;
-  args: any[];
+  args: { type: string; value: string }[];
 }) {
   const sourceKeypair = Keypair.random();
   const rpcUrl = networkRpc[Networks.TESTNET];