@trustless-work/blocks 1.0.8 → 1.1.0

package/bin/index.js

@@ -167,6 +167,7 @@ function installDeps({ dependencies = {}, devDependencies = {} }) {
     "postcss",
     "autoprefixer",
     "postcss-import",
+    "@creit-tech/stellar-wallets-kit",
   ]);
   const depList = Object.entries(dependencies)
     .filter(([k]) => !BLOCKED.has(k))
@@ -421,6 +422,10 @@ function copyTemplate(name, { uiBase, shouldInstall = false } = {}) {
         if (shouldInstall && fs.existsSync(GLOBAL_DEPS_FILE)) {
           const meta = JSON.parse(fs.readFileSync(GLOBAL_DEPS_FILE, "utf8"));
           installDeps(meta);
+          // Install @creit-tech/stellar-wallets-kit using jsr after all other deps are installed
+          if (meta.dependencies && meta.dependencies["@creit-tech/stellar-wallets-kit"]) {
+            run("npx", ["jsr", "add", "@creit-tech/stellar-wallets-kit"]);
+          }
         }
         currentEscrowType = null;
         return;
@@ -1302,6 +1307,10 @@ function copyTemplate(name, { uiBase, shouldInstall = false } = {}) {
   if (shouldInstall && fs.existsSync(GLOBAL_DEPS_FILE)) {
     const meta = JSON.parse(fs.readFileSync(GLOBAL_DEPS_FILE, "utf8"));
     installDeps(meta);
+    // Install @creit-tech/stellar-wallets-kit using jsr after all other deps are installed
+    if (meta.dependencies && meta.dependencies["@creit-tech/stellar-wallets-kit"]) {
+      run("npx", ["jsr", "add", "@creit-tech/stellar-wallets-kit"]);
+    }
   }
 }
 
@@ -1579,7 +1588,29 @@ function injectProvidersIntoLayout(
   }
 }
 
+function cleanJsrDeps() {
+  const pkgPath = path.join(PROJECT_ROOT, "package.json");
+  if (!fs.existsSync(pkgPath)) return;
+  try {
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+    let modified = false;
+    const target = "@creit-tech/stellar-wallets-kit";
+    if (pkg.dependencies && pkg.dependencies[target]) {
+      delete pkg.dependencies[target];
+      modified = true;
+    }
+    if (pkg.devDependencies && pkg.devDependencies[target]) {
+      delete pkg.devDependencies[target];
+      modified = true;
+    }
+    if (modified) {
+      fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2), "utf8");
+    }
+  } catch (e) {}
+}
+
 if (args[0] === "init") {
+  cleanJsrDeps();
   console.log("\n▶ Setting up shadcn/ui components...");
   const doInit = await promptYesNo("Run shadcn init now?", true);
   if (doInit) {
@@ -1632,13 +1663,19 @@ if (args[0] === "init") {
   }
   const meta = JSON.parse(fs.readFileSync(GLOBAL_DEPS_FILE, "utf8"));
   const installLibs = await promptYesNo(
-    "Install (react-hook-form, @tanstack/react-query, @tanstack/react-query-devtools, @trustless-work/escrow, @hookform/resolvers, axios, @creit.tech/stellar-wallets-kit, react-day-picker, recharts & zod) dependencies now?",
+    "Install (react-hook-form, @tanstack/react-query, @tanstack/react-query-devtools, @trustless-work/escrow, @hookform/resolvers, axios, @creit-tech/stellar-wallets-kit, react-day-picker, recharts & zod) dependencies now?",
     true
   );
   if (installLibs) {
     await withSpinner("Installing required dependencies", async () => {
       installDeps(meta);
     });
+    // Install @creit-tech/stellar-wallets-kit using jsr after all other deps are installed
+    if (meta.dependencies && meta.dependencies["@creit-tech/stellar-wallets-kit"]) {
+      await withSpinner("Installing @creit-tech/stellar-wallets-kit from JSR", async () => {
+        run("npx", ["jsr", "add", "@creit-tech/stellar-wallets-kit"]);
+      });
+    }
   } else {
     console.log("\x1b[90m– Skipped installing required dependencies\x1b[0m");
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustless-work/blocks",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "author": "Trustless Work",
   "keywords": [
     "react",

package/templates/deps.json

@@ -11,7 +11,7 @@
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
     "@hookform/resolvers": "^3.10.0",
-    "@creit.tech/stellar-wallets-kit": "^1.8.0",
+    "@creit-tech/stellar-wallets-kit": "^1.8.0",
     "axios": "^1.7.9",
     "@tanstack/react-table": "^8.21.3",
     "react-day-picker": "^9.5.0",

package/templates/escrows/details/EscrowDetailDialog.tsx

@@ -55,7 +55,7 @@ export const EscrowDetailDialog = ({
     selectedEscrow,
   });
 
-  const stellarExplorerUrl = `https://stellar.expert/explorer/testnet/contract/${selectedEscrow?.contractId}`;
+  const viewerUrl = `https://viewer.trustlesswork.com/${selectedEscrow?.contractId}`;
 
   if (!isDialogOpen || !selectedEscrow) return null;
   return (
@@ -65,17 +65,15 @@ export const EscrowDetailDialog = ({
           <DialogHeader className="flex-shrink-0">
             <div className="w-full">
               <div className="flex flex-col gap-2">
-                <div className="w-full">
-                  <Link
-                    href={stellarExplorerUrl}
-                    target="_blank"
-                    className="hover:underline"
-                  >
-                    <DialogTitle className="text-xl">
-                      {selectedEscrow.title}
-                    </DialogTitle>
-                  </Link>
-                </div>
+                <Link
+                  href={viewerUrl}
+                  target="_blank"
+                  className="hover:underline w-fit"
+                >
+                  <DialogTitle className="text-xl">
+                    {selectedEscrow.title}
+                  </DialogTitle>
+                </Link>
 
                 <DialogDescription>
                   {selectedEscrow.description}

package/templates/escrows/escrows-by-role/cards/EscrowsCards.tsx

@@ -351,7 +351,9 @@ export const EscrowsByRoleCards = () => {
                                     key={`milestone-${milestone.description}-${milestone.status}-${index}`}
                                     className="text-xs flex justify-between"
                                   >
-                                    {milestone.description}
+                                    <p className="truncate mr-4">
+                                      {milestone.description}
+                                    </p>
 
                                     {escrow.type === "multi-release" &&
                                       "amount" in milestone && (

package/templates/escrows/escrows-by-signer/cards/EscrowsCards.tsx

@@ -339,7 +339,9 @@ export const EscrowsBySignerCards = () => {
                                     key={`milestone-${milestone.description}-${milestone.status}-${index}`}
                                     className="text-xs flex justify-between"
                                   >
-                                    {milestone.description}
+                                    <p className="truncate mr-4">
+                                      {milestone.description}
+                                    </p>
 
                                     {escrow.type === "multi-release" &&
                                       "amount" in milestone && (

package/templates/escrows/multi-release/initialize-escrow/dialog/InitializeEscrow.tsx

@@ -32,6 +32,7 @@ import {
 import { Separator } from "__UI_BASE__/separator";
 
 export const InitializeEscrowDialog = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
   const {
     form,
     isSubmitting,
@@ -41,7 +42,7 @@ export const InitializeEscrowDialog = () => {
     handleAddMilestone,
     handleRemoveMilestone,
     fillTemplateForm,
-  } = useInitializeEscrow();
+  } = useInitializeEscrow({ onSuccess: () => setIsOpen(false) });
 
   const handleMilestoneAmountChange = (
     index: number,
@@ -92,7 +93,7 @@ export const InitializeEscrowDialog = () => {
   };
 
   return (
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button type="button" className="cursor-pointer w-full">
           Initialize
@@ -402,19 +403,36 @@ export const InitializeEscrowDialog = () => {
             />
 
             <div className="space-y-4">
-              <FormLabel className="flex items-center">
-                Milestones<span className="text-destructive ml-1">*</span>
-              </FormLabel>
+              <FormLabel className="flex items-center">Milestones</FormLabel>
+
+              <div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
+                <div className="md:col-span-4">
+                  <FormLabel className="flex items-center">
+                    Description<span className="text-destructive ml-1">*</span>
+                  </FormLabel>
+                </div>
+                <div className="md:col-span-4">
+                  <FormLabel className="flex items-center">
+                    Receiver<span className="text-destructive ml-1">*</span>
+                  </FormLabel>
+                </div>
+                <div className="md:col-span-3">
+                  <FormLabel className="flex items-center">
+                    Amount<span className="text-destructive ml-1">*</span>
+                  </FormLabel>
+                </div>
+              </div>
+
               {milestones.map((milestone, index) => (
                 <div key={index} className="space-y-4">
                   <div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
                     <div className="md:col-span-4">
                       <Input
-                        placeholder="Enter receiver address"
-                        value={milestone.receiver}
+                        placeholder="Milestone description"
+                        value={milestone.description}
                         onChange={(e) => {
                           const updatedMilestones = [...milestones];
-                          updatedMilestones[index].receiver = e.target.value;
+                          updatedMilestones[index].description = e.target.value;
                           form.setValue("milestones", updatedMilestones);
                         }}
                       />
@@ -422,11 +440,11 @@ export const InitializeEscrowDialog = () => {
 
                     <div className="md:col-span-4">
                       <Input
-                        placeholder="Milestone description"
-                        value={milestone.description}
+                        placeholder="Enter receiver address"
+                        value={milestone.receiver}
                         onChange={(e) => {
                           const updatedMilestones = [...milestones];
-                          updatedMilestones[index].description = e.target.value;
+                          updatedMilestones[index].receiver = e.target.value;
                           form.setValue("milestones", updatedMilestones);
                         }}
                       />

package/templates/escrows/multi-release/initialize-escrow/form/InitializeEscrow.tsx

@@ -383,19 +383,36 @@ export const InitializeEscrowForm = () => {
         />
 
         <div className="space-y-4">
-          <FormLabel className="flex items-center">
-            Milestones<span className="text-destructive ml-1">*</span>
-          </FormLabel>
+          <FormLabel className="flex items-center">Milestones</FormLabel>
+
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
+            <div className="md:col-span-4">
+              <FormLabel className="flex items-center">
+                Description<span className="text-destructive ml-1">*</span>
+              </FormLabel>
+            </div>
+            <div className="md:col-span-4">
+              <FormLabel className="flex items-center">
+                Receiver<span className="text-destructive ml-1">*</span>
+              </FormLabel>
+            </div>
+            <div className="md:col-span-3">
+              <FormLabel className="flex items-center">
+                Amount<span className="text-destructive ml-1">*</span>
+              </FormLabel>
+            </div>
+          </div>
+
           {milestones.map((milestone, index) => (
             <div key={index} className="space-y-4 max-w-3xl">
               <div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
                 <div className="md:col-span-4">
                   <Input
-                    placeholder="Enter receiver address"
-                    value={milestone.receiver}
+                    placeholder="Milestone description"
+                    value={milestone.description}
                     onChange={(e) => {
                       const updatedMilestones = [...milestones];
-                      updatedMilestones[index].receiver = e.target.value;
+                      updatedMilestones[index].description = e.target.value;
                       form.setValue("milestones", updatedMilestones);
                     }}
                   />
@@ -403,11 +420,11 @@ export const InitializeEscrowForm = () => {
 
                 <div className="md:col-span-4">
                   <Input
-                    placeholder="Milestone description"
-                    value={milestone.description}
+                    placeholder="Enter receiver address"
+                    value={milestone.receiver}
                     onChange={(e) => {
                       const updatedMilestones = [...milestones];
-                      updatedMilestones[index].description = e.target.value;
+                      updatedMilestones[index].receiver = e.target.value;
                       form.setValue("milestones", updatedMilestones);
                     }}
                   />

package/templates/escrows/multi-release/initialize-escrow/shared/useInitializeEscrow.ts

@@ -17,7 +17,7 @@ import {
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { trustlineOptions } from "@/components/tw-blocks/wallet-kit/trustlines";
 
-export function useInitializeEscrow() {
+export function useInitializeEscrow({ onSuccess }: { onSuccess?: () => void } = {}) {
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
   const { getMultiReleaseFormSchema } = useInitializeEscrowSchema();
@@ -161,6 +161,8 @@ export function useInitializeEscrow() {
       toast.success("Escrow initialized successfully");
 
       setSelectedEscrow({ ...finalPayload, contractId: response.contractId });
+
+      onSuccess?.();
     } catch (error) {
       toast.error(handleError(error as ErrorResponse).message);
     } finally {

package/templates/escrows/multi-release/resolve-dispute/dialog/ResolveDispute.tsx

@@ -35,6 +35,7 @@ export const ResolveDisputeDialog = ({
   showSelectMilestone?: boolean;
   milestoneIndex?: number | string;
 }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
   const {
     form,
     handleSubmit,
@@ -50,7 +51,7 @@ export const ResolveDisputeDialog = ({
     distributedSum,
     isExactMatch,
     difference,
-  } = useResolveDispute();
+  } = useResolveDispute({ onSuccess: () => setIsOpen(false) });
   const { selectedEscrow } = useEscrowContext();
 
   React.useEffect(() => {
@@ -64,7 +65,7 @@ export const ResolveDisputeDialog = ({
   }, [showSelectMilestone, milestoneIndex, form]);
 
   return (
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button type="button" className="cursor-pointer w-full">
           Resolve Dispute

package/templates/escrows/multi-release/resolve-dispute/shared/useResolveDispute.ts

@@ -17,7 +17,7 @@ import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvid
 
 type DistributionInput = { address: string; amount: string | number };
 
-export function useResolveDispute() {
+export function useResolveDispute({ onSuccess }: { onSuccess?: () => void } = {}) {
   const { resolveDispute } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
@@ -142,6 +142,8 @@ export function useResolveDispute() {
 
       toast.success("Dispute resolved successfully");
 
+      onSuccess?.();
+
       const sumDistributed = payload.distributions.reduce((acc, d) => {
         const n = Number(d.amount || 0);
         return acc + (isNaN(n) ? 0 : n);

package/templates/escrows/multi-release/update-escrow/dialog/UpdateEscrow.tsx

@@ -31,6 +31,7 @@ import {
 } from "__UI_BASE__/dialog";
 
 export const UpdateEscrowDialog = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
   const {
     form,
     isSubmitting,
@@ -43,10 +44,10 @@ export const UpdateEscrowDialog = () => {
     handleMilestoneAmountChange,
     isEscrowLocked,
     initialMilestonesCount,
-  } = useUpdateEscrow();
+  } = useUpdateEscrow({ onSuccess: () => setIsOpen(false) });
 
   return (
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button type="button" className="cursor-pointer w-full">
           Update

package/templates/escrows/multi-release/update-escrow/shared/useUpdateEscrow.ts

@@ -18,7 +18,7 @@ import {
 } from "@/components/tw-blocks/handle-errors/handle";
 import { GetEscrowsFromIndexerResponse } from "@trustless-work/escrow/types";
 
-export function useUpdateEscrow() {
+export function useUpdateEscrow({ onSuccess }: { onSuccess?: () => void } = {}) {
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
   const { getMultiReleaseFormSchema } = useUpdateEscrowSchema();
@@ -246,6 +246,7 @@ export function useUpdateEscrow() {
 
       setSelectedEscrow(nextSelectedEscrow);
       toast.success("Escrow updated successfully");
+      onSuccess?.();
     } catch (error) {
       toast.error(handleError(error as ErrorResponse).message);
     } finally {

package/templates/escrows/multi-release/withdraw-remaining-funds/dialog/WithdrawRemainingFunds.tsx

@@ -22,6 +22,7 @@ import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvide
 import { formatCurrency } from "../../../../helpers/format.helper";
 
 export const WithdrawRemainingFundsDialog = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
   const {
     form,
     handleSubmit,
@@ -36,11 +37,11 @@ export const WithdrawRemainingFundsDialog = () => {
     distributedSum,
     isExactMatch,
     difference,
-  } = useWithdrawRemainingFunds();
+  } = useWithdrawRemainingFunds({ onSuccess: () => setIsOpen(false) });
   const { selectedEscrow } = useEscrowContext();
 
   return (
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button type="button" className="cursor-pointer w-full">
           Withdraw Remaining

package/templates/escrows/multi-release/withdraw-remaining-funds/shared/useWithdrawRemainingFunds.ts

@@ -17,7 +17,9 @@ import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvid
 
 type DistributionInput = { address: string; amount: string | number };
 
-export function useWithdrawRemainingFunds() {
+export function useWithdrawRemainingFunds({
+  onSuccess,
+}: { onSuccess?: () => void } = {}) {
   const { withdrawRemainingFunds } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
@@ -124,6 +126,8 @@ export function useWithdrawRemainingFunds() {
 
       toast.success("Withdraw successful");
 
+      onSuccess?.();
+
       const sumDistributed = payload.distributions.reduce((acc, d) => {
         const n = Number(d.amount || 0);
         return acc + (isNaN(n) ? 0 : n);

package/templates/escrows/single-multi-release/approve-milestone/dialog/ApproveMilestone.tsx

@@ -27,11 +27,14 @@ import {
 } from "__UI_BASE__/select";
 
 export const ApproveMilestoneDialog = () => {
-  const { form, handleSubmit, isSubmitting } = useApproveMilestone();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { form, handleSubmit, isSubmitting } = useApproveMilestone({
+    onSuccess: () => setIsOpen(false),
+  });
   const { selectedEscrow } = useEscrowContext();
 
   return (
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button type="button" className="cursor-pointer w-full">
           Approve Milestone

package/templates/escrows/single-multi-release/approve-milestone/shared/useApproveMilestone.ts

@@ -15,7 +15,9 @@ import {
 } from "@/components/tw-blocks/handle-errors/handle";
 import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
 
-export function useApproveMilestone() {
+export function useApproveMilestone({
+  onSuccess,
+}: { onSuccess?: () => void } = {}) {
   const { approveMilestone } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
@@ -48,6 +50,8 @@ export function useApproveMilestone() {
 
       toast.success("Milestone approved flag updated successfully");
 
+      onSuccess?.();
+
       updateEscrow({
         ...selectedEscrow,
         milestones: selectedEscrow?.milestones.map((milestone, index) => {

package/templates/escrows/single-multi-release/change-milestone-status/dialog/ChangeMilestoneStatus.tsx

@@ -35,7 +35,10 @@ export const ChangeMilestoneStatusDialog = ({
   showSelectMilestone?: boolean;
   milestoneIndex?: number | string;
 }) => {
-  const { form, handleSubmit, isSubmitting } = useChangeMilestoneStatus();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { form, handleSubmit, isSubmitting } = useChangeMilestoneStatus({
+    onSuccess: () => setIsOpen(false),
+  });
   const { selectedEscrow } = useEscrowContext();
 
   React.useEffect(() => {
@@ -49,7 +52,7 @@ export const ChangeMilestoneStatusDialog = ({
   }, [showSelectMilestone, milestoneIndex, form]);
 
   return (
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button type="button" className="cursor-pointer w-full">
           Update Status

package/templates/escrows/single-multi-release/change-milestone-status/shared/useChangeMilestoneStatus.ts

@@ -15,7 +15,9 @@ import {
 } from "@/components/tw-blocks/handle-errors/handle";
 import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
 
-export function useChangeMilestoneStatus() {
+export function useChangeMilestoneStatus({
+  onSuccess,
+}: { onSuccess?: () => void } = {}) {
   const { changeMilestoneStatus } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
@@ -65,6 +67,8 @@ export function useChangeMilestoneStatus() {
 
       toast.success("Milestone status updated successfully");
 
+      onSuccess?.();
+
       updateEscrow({
         ...selectedEscrow,
         milestones: selectedEscrow?.milestones.map((milestone, index) => {

package/templates/escrows/single-multi-release/fund-escrow/dialog/FundEscrow.tsx

@@ -20,10 +20,13 @@ import { Loader2 } from "lucide-react";
 import { useFundEscrow } from "./useFundEscrow";
 
 export const FundEscrowDialog = () => {
-  const { form, handleSubmit, isSubmitting } = useFundEscrow();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { form, handleSubmit, isSubmitting } = useFundEscrow({
+    onSuccess: () => setIsOpen(false),
+  });
 
   return (
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button type="button" className="cursor-pointer w-full">
           Fund

package/templates/escrows/single-multi-release/fund-escrow/shared/useFundEscrow.ts

@@ -12,7 +12,7 @@ import {
 } from "@/components/tw-blocks/handle-errors/handle";
 import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
 
-export function useFundEscrow() {
+export function useFundEscrow({ onSuccess }: { onSuccess?: () => void } = {}) {
   const { fundEscrow } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
@@ -66,6 +66,8 @@ export function useFundEscrow() {
 
       toast.success("Escrow funded successfully");
 
+      onSuccess?.();
+
       // do something with the response ...
     } catch (error) {
       toast.error(handleError(error as ErrorResponse).message);

package/templates/escrows/single-release/initialize-escrow/dialog/InitializeEscrow.tsx

@@ -31,6 +31,7 @@ import {
 } from "__UI_BASE__/dialog";
 
 export const InitializeEscrowDialog = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
   const {
     form,
     isSubmitting,
@@ -40,7 +41,7 @@ export const InitializeEscrowDialog = () => {
     handleAddMilestone,
     handleRemoveMilestone,
     fillTemplateForm,
-  } = useInitializeEscrow();
+  } = useInitializeEscrow({ onSuccess: () => setIsOpen(false) });
 
   const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let rawValue = e.target.value;
@@ -83,7 +84,7 @@ export const InitializeEscrowDialog = () => {
   };
 
   return (
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button type="button" className="cursor-pointer w-full">
           Initialize

package/templates/escrows/single-release/initialize-escrow/shared/useInitializeEscrow.ts

@@ -17,7 +17,7 @@ import {
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { trustlineOptions } from "@/components/tw-blocks/wallet-kit/trustlines";
 
-export function useInitializeEscrow() {
+export function useInitializeEscrow({ onSuccess }: { onSuccess?: () => void } = {}) {
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
   const { getSingleReleaseFormSchema } = useInitializeEscrowSchema();
@@ -145,6 +145,8 @@ export function useInitializeEscrow() {
       toast.success("Escrow initialized successfully");
 
       setSelectedEscrow({ ...finalPayload, contractId: response.contractId });
+
+      onSuccess?.();
     } catch (error) {
       toast.error(handleError(error as ErrorResponse).message);
     } finally {

package/templates/escrows/single-release/resolve-dispute/dialog/ResolveDispute.tsx

@@ -22,6 +22,7 @@ import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvide
 import { formatCurrency } from "../../../../helpers/format.helper";
 
 export const ResolveDisputeDialog = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
   const {
     form,
     handleSubmit,
@@ -36,11 +37,11 @@ export const ResolveDisputeDialog = () => {
     distributedSum,
     isExactMatch,
     difference,
-  } = useResolveDispute();
+  } = useResolveDispute({ onSuccess: () => setIsOpen(false) });
   const { selectedEscrow } = useEscrowContext();
 
   return (
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button type="button" className="cursor-pointer w-full">
           Resolve Dispute

package/templates/escrows/single-release/resolve-dispute/shared/useResolveDispute.ts

@@ -14,7 +14,7 @@ import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvid
 
 type DistributionInput = { address: string; amount: string | number };
 
-export function useResolveDispute() {
+export function useResolveDispute({ onSuccess }: { onSuccess?: () => void } = {}) {
   const { resolveDispute } = useEscrowsMutations();
   const { selectedEscrow, updateEscrow } = useEscrowContext();
   const { walletAddress } = useWalletContext();
@@ -122,6 +122,8 @@ export function useResolveDispute() {
 
       toast.success("Dispute resolved successfully");
 
+      onSuccess?.();
+
       const sumDistributed = payload.distributions.reduce((acc, d) => {
         const n = Number(d.amount || 0);
         return acc + (isNaN(n) ? 0 : n);

package/templates/escrows/single-release/update-escrow/dialog/UpdateEscrow.tsx

@@ -31,6 +31,7 @@ import {
 } from "__UI_BASE__/dialog";
 
 export const UpdateEscrowDialog = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
   const {
     form,
     isSubmitting,
@@ -43,10 +44,10 @@ export const UpdateEscrowDialog = () => {
     handlePlatformFeeChange,
     isEscrowLocked,
     initialMilestonesCount,
-  } = useUpdateEscrow();
+  } = useUpdateEscrow({ onSuccess: () => setIsOpen(false) });
 
   return (
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button type="button" className="cursor-pointer w-full">
           Update

package/templates/escrows/single-release/update-escrow/shared/useUpdateEscrow.ts

@@ -20,7 +20,7 @@ import {
   handleError,
 } from "@/components/tw-blocks/handle-errors/handle";
 
-export function useUpdateEscrow() {
+export function useUpdateEscrow({ onSuccess }: { onSuccess?: () => void } = {}) {
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
   const { getSingleReleaseFormSchema } = useUpdateEscrowSchema();
@@ -216,6 +216,7 @@ export function useUpdateEscrow() {
 
       setSelectedEscrow(nextSelectedEscrow);
       toast.success("Escrow updated successfully");
+      onSuccess?.();
     } catch (error) {
       toast.error(handleError(error as ErrorResponse).message);
     } finally {

package/templates/wallet-kit/useWallet.ts

@@ -1,6 +1,9 @@
-import { kit } from "./wallet-kit";
+import {
+  openAuthModal,
+  disconnectWalletKit,
+  getSelectedWallet,
+} from "./wallet-kit";
 import { useWalletContext } from "./WalletProvider";
-import { ISupportedWallet } from "@creit.tech/stellar-wallets-kit";
 
 /**
  * Custom hook that provides wallet connection and disconnection functionality
@@ -16,20 +19,14 @@ export const useWallet = () => {
    * Automatically sets wallet information in the context upon successful connection
    */
   const connectWallet = async () => {
-    await kit.openModal({
-      modalTitle: "Connect to your favorite wallet",
-      onWalletSelected: async (option: ISupportedWallet) => {
-        // Set the selected wallet as the active wallet
-        kit.setWallet(option.id);
+    // Open the auth modal and wait for the user to connect
+    const { address } = await openAuthModal();
 
-        // Get the wallet address and name
-        const { address } = await kit.getAddress();
-        const { name } = option;
+    // Get the selected wallet details (name)
+    const { productName } = await getSelectedWallet();
 
-        // Store wallet information in the context and localStorage
-        setWalletInfo(address, name);
-      },
-    });
+    // Store wallet information in the context and localStorage
+    setWalletInfo(address, productName);
   };
 
   /**
@@ -38,7 +35,7 @@ export const useWallet = () => {
    * Disconnects the wallet from the Stellar Wallet Kit
    */
   const disconnectWallet = async () => {
-    await kit.disconnect();
+    await disconnectWalletKit();
     clearWalletInfo();
   };
 
@@ -49,7 +46,17 @@ export const useWallet = () => {
   const handleConnect = async () => {
     try {
       await connectWallet();
-    } catch (error) {
+    } catch (error: unknown) {
+      // Skip error if the user closes the modal
+      if (
+        typeof error === "object" &&
+        error !== null &&
+        "code" in error &&
+        (error as { code: number }).code === -1
+      ) {
+        return;
+      }
+
       console.error("Error connecting wallet:", error);
       // You can add additional error handling here, such as showing user notifications
     }

package/templates/wallet-kit/wallet-kit.ts

@@ -1,23 +1,52 @@
-import {
-  StellarWalletsKit,
-  WalletNetwork,
-  FREIGHTER_ID,
-  AlbedoModule,
-  FreighterModule,
-} from "@creit.tech/stellar-wallets-kit";
+import type { ModuleInterface } from "@creit-tech/stellar-wallets-kit/types";
+type SdkModule = typeof import("@creit-tech/stellar-wallets-kit/sdk");
+type TypesModule = typeof import("@creit-tech/stellar-wallets-kit/types");
+type ModulesUtilsModule =
+  typeof import("@creit-tech/stellar-wallets-kit/modules/utils");
+type StellarWalletsKitStatic = SdkModule["StellarWalletsKit"];
+type NetworksEnum = TypesModule["Networks"];
 
 /**
- * Stellar Wallet Kit
+ * Stellar Wallet Kit helpers
  *
- * @description The Stellar Wallet Kit is used to connect to the wallet
- * @description The Stellar Wallet Kit is used to sign transactions
- * @description The Stellar Wallet Kit is used to get the wallet address
+ * We only load and initialize the kit
+ * on the client, and only in response to effects or user actions.
  */
-export const kit: StellarWalletsKit = new StellarWalletsKit({
-  network: WalletNetwork.TESTNET,
-  selectedWalletId: FREIGHTER_ID,
-  modules: [new FreighterModule(), new AlbedoModule()],
-});
+let walletKitPromise: Promise<{
+  StellarWalletsKit: StellarWalletsKitStatic;
+  Networks: NetworksEnum;
+}> | null = null;
+
+const loadWalletKit = async () => {
+  if (typeof window === "undefined") {
+    throw new Error("StellarWalletsKit is only available in the browser");
+  }
+
+  if (!walletKitPromise) {
+    walletKitPromise = (async () => {
+      const [sdk, types, modules] = await Promise.all([
+        import("@creit-tech/stellar-wallets-kit/sdk") as Promise<SdkModule>,
+        import("@creit-tech/stellar-wallets-kit/types") as Promise<TypesModule>,
+        import(
+          "@creit-tech/stellar-wallets-kit/modules/utils"
+        ) as Promise<ModulesUtilsModule>,
+      ]);
+
+      const { StellarWalletsKit } = sdk;
+      const { Networks } = types;
+      const { defaultModules } = modules;
+
+      StellarWalletsKit.init({
+        network: Networks.TESTNET, // Adjust this to the network you are using
+        modules: defaultModules(),
+      });
+
+      return { StellarWalletsKit, Networks };
+    })();
+  }
+
+  return walletKitPromise;
+};
 
 interface SignTransactionParams {
   unsignedTransaction: string;
@@ -25,19 +54,45 @@ interface SignTransactionParams {
 }
 
 /**
- * Sign Transaction Params
- *
- * @param unsignedTransaction - The unsigned transaction
- * @param address - The address of the wallet
+ * Open the authentication modal and request the user's address.
+ */
+export const openAuthModal = async (): Promise<{ address: string }> => {
+  const { StellarWalletsKit } = await loadWalletKit();
+  return StellarWalletsKit.authModal();
+};
+
+/**
+ * Get the currently selected wallet module.
+ */
+export const getSelectedWallet = async (): Promise<ModuleInterface> => {
+  const { StellarWalletsKit } = await loadWalletKit();
+  return StellarWalletsKit.selectedModule;
+};
+
+/**
+ * Disconnect the current wallet.
+ */
+export const disconnectWalletKit = async (): Promise<void> => {
+  const { StellarWalletsKit } = await loadWalletKit();
+  return StellarWalletsKit.disconnect();
+};
+
+/**
+ * Helper to sign a transaction XDR with the active wallet.
  */
 export const signTransaction = async ({
   unsignedTransaction,
   address,
 }: SignTransactionParams): Promise<string> => {
-  const { signedTxXdr } = await kit.signTransaction(unsignedTransaction, {
-    address,
-    networkPassphrase: WalletNetwork.TESTNET,
-  });
+  const { StellarWalletsKit, Networks } = await loadWalletKit();
+
+  const { signedTxXdr } = await StellarWalletsKit.signTransaction(
+    unsignedTransaction,
+    {
+      address,
+      networkPassphrase: Networks.TESTNET, // Adjust this to the network you are using
+    }
+  );
 
   return signedTxXdr;
 };