@trustless-work/blocks 0.0.1

package/templates/tanstak/useEscrowsMutations.ts

@@ -0,0 +1,411 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  EscrowType,
+  FundEscrowPayload,
+  InitializeMultiReleaseEscrowPayload,
+  InitializeSingleReleaseEscrowPayload,
+  UpdateMultiReleaseEscrowPayload,
+  UpdateSingleReleaseEscrowPayload,
+  useFundEscrow,
+  useInitializeEscrow,
+  useUpdateEscrow,
+  ChangeMilestoneStatusPayload,
+  useChangeMilestoneStatus,
+  ApproveMilestonePayload,
+  useApproveMilestone,
+  useSendTransaction,
+  useStartDispute,
+  useReleaseFunds,
+  useResolveDispute,
+  MultiReleaseStartDisputePayload,
+  SingleReleaseStartDisputePayload,
+  MultiReleaseReleaseFundsPayload,
+  SingleReleaseReleaseFundsPayload,
+  MultiReleaseResolveDisputePayload,
+  SingleReleaseResolveDisputePayload,
+} from "@trustless-work/escrow";
+import { signTransaction } from "../wallet-kit/wallet-kit";
+
+export const useEscrowsMutations = () => {
+  const queryClient = useQueryClient();
+  const { deployEscrow } = useInitializeEscrow();
+  const { updateEscrow } = useUpdateEscrow();
+  const { fundEscrow } = useFundEscrow();
+  const { changeMilestoneStatus } = useChangeMilestoneStatus();
+  const { approveMilestone } = useApproveMilestone();
+  const { sendTransaction } = useSendTransaction();
+  const { startDispute } = useStartDispute();
+  const { releaseFunds } = useReleaseFunds();
+  const { resolveDispute } = useResolveDispute();
+
+  const deployEscrowMutation = useMutation({
+    mutationFn: async ({
+      payload,
+      type,
+      address,
+    }: {
+      payload:
+        | InitializeSingleReleaseEscrowPayload
+        | InitializeMultiReleaseEscrowPayload;
+      type: EscrowType;
+      address: string;
+    }) => {
+      const { unsignedTransaction } = await deployEscrow(payload, type);
+
+      if (!unsignedTransaction) {
+        throw new Error(
+          "Unsigned transaction is missing from deployEscrow response."
+        );
+      }
+
+      const signedTxXdr = await signTransaction({
+        unsignedTransaction,
+        address,
+      });
+
+      if (!signedTxXdr) {
+        throw new Error("Signed transaction is missing.");
+      }
+
+      const response = await sendTransaction(signedTxXdr);
+
+      if (response.status !== "SUCCESS") {
+        throw new Error("Transaction failed to send");
+      }
+
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["escrows"] });
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  const updateEscrowMutation = useMutation({
+    mutationFn: async ({
+      payload,
+      type,
+      address,
+    }: {
+      payload:
+        | UpdateSingleReleaseEscrowPayload
+        | UpdateMultiReleaseEscrowPayload;
+      type: EscrowType;
+      address: string;
+    }) => {
+      const { unsignedTransaction } = await updateEscrow(payload, type);
+
+      if (!unsignedTransaction) {
+        throw new Error(
+          "Unsigned transaction is missing from updateEscrow response."
+        );
+      }
+
+      const signedTxXdr = await signTransaction({
+        unsignedTransaction,
+        address,
+      });
+
+      if (!signedTxXdr) {
+        throw new Error("Signed transaction is missing.");
+      }
+
+      const response = await sendTransaction(signedTxXdr);
+
+      if (response.status !== "SUCCESS") {
+        throw new Error("Transaction failed to send");
+      }
+
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["escrows"] });
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  const fundEscrowMutation = useMutation({
+    mutationFn: async ({
+      payload,
+      type,
+      address,
+    }: {
+      payload: FundEscrowPayload;
+      type: EscrowType;
+      address: string;
+    }) => {
+      // Step 1: Get unsigned transaction
+      const { unsignedTransaction } = await fundEscrow(payload, type);
+
+      if (!unsignedTransaction) {
+        throw new Error(
+          "Unsigned transaction is missing from fundEscrow response."
+        );
+      }
+
+      // Step 2: Sign transaction
+      const signedTxXdr = await signTransaction({
+        unsignedTransaction,
+        address,
+      });
+
+      if (!signedTxXdr) {
+        throw new Error("Signed transaction is missing.");
+      }
+
+      // Step 3: Send transaction
+      const response = await sendTransaction(signedTxXdr);
+
+      if (response.status !== "SUCCESS") {
+        throw new Error("Transaction failed to send");
+      }
+
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["escrows"] });
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  const approveMilestoneMutation = useMutation({
+    mutationFn: async ({
+      payload,
+      type,
+      address,
+    }: {
+      payload: ApproveMilestonePayload;
+      type: EscrowType;
+      address: string;
+    }) => {
+      const { unsignedTransaction } = await approveMilestone(payload, type);
+
+      if (!unsignedTransaction) {
+        throw new Error(
+          "Unsigned transaction is missing from approveMilestone response."
+        );
+      }
+
+      const signedTxXdr = await signTransaction({
+        unsignedTransaction,
+        address,
+      });
+
+      if (!signedTxXdr) {
+        throw new Error("Signed transaction is missing.");
+      }
+
+      const response = await sendTransaction(signedTxXdr);
+
+      if (response.status !== "SUCCESS") {
+        throw new Error("Transaction failed to send");
+      }
+
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["escrows"] });
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  const changeMilestoneStatusMutation = useMutation({
+    mutationFn: async ({
+      payload,
+      type,
+      address,
+    }: {
+      payload: ChangeMilestoneStatusPayload;
+      type: EscrowType;
+      address: string;
+    }) => {
+      const { unsignedTransaction } = await changeMilestoneStatus(
+        payload,
+        type
+      );
+
+      if (!unsignedTransaction) {
+        throw new Error(
+          "Unsigned transaction is missing from changeMilestoneStatus response."
+        );
+      }
+
+      const signedTxXdr = await signTransaction({
+        unsignedTransaction,
+        address,
+      });
+
+      if (!signedTxXdr) {
+        throw new Error("Signed transaction is missing.");
+      }
+
+      const response = await sendTransaction(signedTxXdr);
+
+      if (response.status !== "SUCCESS") {
+        throw new Error("Transaction failed to send");
+      }
+
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["escrows"] });
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  const startDisputeMutation = useMutation({
+    mutationFn: async ({
+      payload,
+      type,
+      address,
+    }: {
+      payload:
+        | MultiReleaseStartDisputePayload
+        | SingleReleaseStartDisputePayload;
+      type: EscrowType;
+      address: string;
+    }) => {
+      const { unsignedTransaction } = await startDispute(payload, type);
+
+      if (!unsignedTransaction) {
+        throw new Error(
+          "Unsigned transaction is missing from startDispute response."
+        );
+      }
+
+      const signedTxXdr = await signTransaction({
+        unsignedTransaction,
+        address,
+      });
+
+      if (!signedTxXdr) {
+        throw new Error("Signed transaction is missing.");
+      }
+
+      const response = await sendTransaction(signedTxXdr);
+
+      if (response.status !== "SUCCESS") {
+        throw new Error("Transaction failed to send");
+      }
+
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["escrows"] });
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  const releaseFundsMutation = useMutation({
+    mutationFn: async ({
+      payload,
+      type,
+      address,
+    }: {
+      payload:
+        | MultiReleaseReleaseFundsPayload
+        | SingleReleaseReleaseFundsPayload;
+      type: EscrowType;
+      address: string;
+    }) => {
+      const { unsignedTransaction } = await releaseFunds(payload, type);
+
+      if (!unsignedTransaction) {
+        throw new Error(
+          "Unsigned transaction is missing from releaseFunds response."
+        );
+      }
+
+      const signedTxXdr = await signTransaction({
+        unsignedTransaction,
+        address,
+      });
+
+      if (!signedTxXdr) {
+        throw new Error("Signed transaction is missing.");
+      }
+
+      const response = await sendTransaction(signedTxXdr);
+
+      if (response.status !== "SUCCESS") {
+        throw new Error("Transaction failed to send");
+      }
+
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["escrows"] });
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  const resolveDisputeMutation = useMutation({
+    mutationFn: async ({
+      payload,
+      type,
+      address,
+    }: {
+      payload:
+        | MultiReleaseResolveDisputePayload
+        | SingleReleaseResolveDisputePayload;
+      type: EscrowType;
+      address: string;
+    }) => {
+      const { unsignedTransaction } = await resolveDispute(payload, type);
+
+      if (!unsignedTransaction) {
+        throw new Error(
+          "Unsigned transaction is missing from resolveDispute response."
+        );
+      }
+
+      const signedTxXdr = await signTransaction({
+        unsignedTransaction,
+        address,
+      });
+
+      if (!signedTxXdr) {
+        throw new Error("Signed transaction is missing.");
+      }
+
+      const response = await sendTransaction(signedTxXdr);
+
+      if (response.status !== "SUCCESS") {
+        throw new Error("Transaction failed to send");
+      }
+
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["escrows"] });
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  return {
+    deployEscrow: deployEscrowMutation,
+    updateEscrow: updateEscrowMutation,
+    fundEscrow: fundEscrowMutation,
+    changeMilestoneStatus: changeMilestoneStatusMutation,
+    approveMilestone: approveMilestoneMutation,
+    startDispute: startDisputeMutation,
+    releaseFunds: releaseFundsMutation,
+    resolveDispute: resolveDisputeMutation,
+  };
+};

package/templates/wallet-kit/WalletButtons.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+import { useWallet } from "./useWallet";
+import { useWalletContext } from "./WalletProvider";
+import { Button } from "__UI_BASE__/button";
+import { Popover, PopoverContent, PopoverTrigger } from "__UI_BASE__/popover";
+import { Check, Copy, LogOut, ChevronDown, Wallet } from "lucide-react";
+
+/**
+ * Wallet connection/disconnection button component
+ * Shows different states based on wallet connection status
+ */
+export const WalletButton = () => {
+  const { handleConnect, handleDisconnect } = useWallet();
+  const { walletAddress, walletName } = useWalletContext();
+  const [copied, setCopied] = React.useState(false);
+
+  const shortAddress = React.useMemo(() => {
+    if (!walletAddress) return "";
+    if (walletAddress.length <= 10) return walletAddress;
+    return `${walletAddress.slice(0, 6)}…${walletAddress.slice(-4)}`;
+  }, [walletAddress]);
+
+  const copyAddress = async () => {
+    if (!walletAddress) return;
+    try {
+      await navigator.clipboard.writeText(walletAddress);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch (_) {
+      // noop
+    }
+  };
+
+  if (walletAddress) {
+    return (
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className="h-10 px-4 gap-2 font-medium bg-transparent"
+          >
+            <Wallet className="h-4 w-4" />
+            <span className="hidden sm:inline">{walletName}</span>
+            <span className="font-mono text-sm text-muted-foreground">
+              {shortAddress}
+            </span>
+            <ChevronDown className="h-4 w-4 ml-1" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80 p-0" align="end">
+          <div className="p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Wallet className="h-4 w-4 text-muted-foreground" />
+                <span className="font-medium">{walletName}</span>
+              </div>
+              <span className="text-xs px-2 py-1 rounded-md bg-muted text-muted-foreground">
+                Testnet
+              </span>
+            </div>
+
+            <div className="p-3 rounded-lg bg-muted/50 border">
+              <p className="text-xs text-muted-foreground mb-1">Address</p>
+              <p className="font-mono text-sm break-all">{walletAddress}</p>
+            </div>
+          </div>
+
+          <div className="border-t p-4">
+            <div className="flex gap-2">
+              <Button
+                onClick={copyAddress}
+                variant="ghost"
+                size="sm"
+                className="flex-1 cursor-pointer"
+                disabled={copied}
+              >
+                {copied ? (
+                  <>
+                    <Check className="h-4 w-4 mr-2" />
+                    Copied
+                  </>
+                ) : (
+                  <>
+                    <Copy className="h-4 w-4 mr-2" />
+                    Copy
+                  </>
+                )}
+              </Button>
+              <Button
+                onClick={handleDisconnect}
+                variant="outline"
+                size="sm"
+                className="flex-1 text-destructive hover:text-destructive bg-transparent cursor-pointer"
+              >
+                <LogOut className="h-4 w-4 mr-2" />
+                Disconnect
+              </Button>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  return (
+    <Button
+      className="h-10 px-6 gap-2 font-medium cursor-pointer"
+      onClick={handleConnect}
+    >
+      <Wallet className="h-4 w-4" />
+      Connect Wallet
+    </Button>
+  );
+};

package/templates/wallet-kit/WalletProvider.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import * as React from "react";
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+} from "react";
+
+/**
+ * Type definition for the wallet context
+ * Contains wallet address, name, and functions to manage wallet state
+ */
+type WalletContextType = {
+  walletAddress: string | null;
+  walletName: string | null;
+  setWalletInfo: (address: string, name: string) => void;
+  clearWalletInfo: () => void;
+};
+
+/**
+ * Create the React context for wallet state management
+ */
+const WalletContext = createContext<WalletContextType | undefined>(undefined);
+
+/**
+ * Wallet Provider component that wraps the application
+ * Manages wallet state and provides wallet information to child components
+ * Automatically loads saved wallet information from localStorage on initialization
+ */
+export const WalletProvider = ({ children }: { children: ReactNode }) => {
+  const [walletAddress, setWalletAddress] = useState<string | null>(null);
+  const [walletName, setWalletName] = useState<string | null>(null);
+
+  /**
+   * Load saved wallet information from localStorage when the component mounts
+   * This ensures the wallet state persists across browser sessions
+   */
+  useEffect(() => {
+    const storedAddress = localStorage.getItem("walletAddress");
+    const storedName = localStorage.getItem("walletName");
+
+    if (storedAddress) setWalletAddress(storedAddress);
+    if (storedName) setWalletName(storedName);
+  }, []);
+
+  /**
+   * Set wallet information and save it to localStorage
+   * This function is called when a wallet is successfully connected
+   *
+   * @param address - The wallet's public address
+   * @param name - The name/identifier of the wallet (e.g., "Freighter", "Albedo")
+   */
+  const setWalletInfo = (address: string, name: string) => {
+    setWalletAddress(address);
+    setWalletName(name);
+    localStorage.setItem("walletAddress", address);
+    localStorage.setItem("walletName", name);
+  };
+
+  /**
+   * Clear wallet information and remove it from localStorage
+   * This function is called when disconnecting a wallet
+   */
+  const clearWalletInfo = () => {
+    setWalletAddress(null);
+    setWalletName(null);
+    localStorage.removeItem("walletAddress");
+    localStorage.removeItem("walletName");
+  };
+
+  return (
+    <WalletContext.Provider
+      value={{ walletAddress, walletName, setWalletInfo, clearWalletInfo }}
+    >
+      {children}
+    </WalletContext.Provider>
+  );
+};
+
+/**
+ * Custom hook to access the wallet context
+ * Provides wallet state and functions to components
+ * Throws an error if used outside of WalletProvider
+ */
+export const useWalletContext = () => {
+  const context = useContext(WalletContext);
+  if (!context) {
+    throw new Error("useWalletContext must be used within WalletProvider");
+  }
+  return context;
+};

package/templates/wallet-kit/trustlines.ts

@@ -0,0 +1,40 @@
+export const trustlines = [
+  // TESTNET
+  {
+    name: "USDC",
+    address: "CBIELTK6YBZJU5UP2WWQEUCYKLPU6AUNZ2BQ4WWFEIE3USCIHMXQDAMA",
+    decimals: 10000000,
+    network: "testnet",
+  },
+  {
+    name: "EURC",
+    address: "GB3Q6QDZYTHWT7E5PVS3W7FUT5GVAFC5KSZFFLPU25GO7VTC3NM2ZTVO",
+    decimals: 10000000,
+    network: "testnet",
+  },
+  // MAINNET
+  {
+    name: "USDC",
+    address: "CCW67TSZV3SSS2HXMBQ5JFGCKJNXKZM7UQUWUZPUTHXSTZLEO7SJMI75",
+    decimals: 10000000,
+    network: "mainnet",
+  },
+  {
+    name: "EURC",
+    address: "GB3Q6QDZYTHWT7E5PVS3W7FUT5GVAFC5KSZFFLPU25GO7VTC3NM2ZTVO",
+    decimals: 10000000,
+    network: "mainnet",
+  },
+];
+
+// TODO: add network dynamic filter
+export const trustlineOptions = Array.from(
+  new Map(
+    trustlines
+      .filter((trustline) => trustline.network === "testnet")
+      .map((trustline) => [
+        trustline.address,
+        { value: trustline.address, label: trustline.name },
+      ])
+  ).values()
+);