@compass-labs/widgets 0.1.36 → 0.1.37

package/dist/index.js

@@ -7771,13 +7771,18 @@ function WithdrawModal({ isOpen, onClose, initialToken, allowedTokens }) {
 }
 function getPhase2(step) {
   if (step === "idle" || step === "failed") return 0;
-  if (step === "preparing-permit" || step === "signing-permit") return 1;
+  if (step === "approving" || step === "signing-approval") return 1;
   return 2;
 }
+var EVM_CHAIN_IDS3 = {
+  ethereum: 1,
+  base: 8453,
+  arbitrum: 42161
+};
 function TopUpModal({ isOpen, onClose }) {
   const { address, signTypedData, switchChain, walletChainId } = useEmbeddableWallet();
-  const { chainId, chain } = useChain();
-  const { creditAccountAddress, isDeployed } = useCreditAccount();
+  const { chainId } = useChain();
+  const { isDeployed } = useCreditAccount();
   const queryClient = reactQuery.useQueryClient();
   const prices = useTokenPrices();
   const token = "USDC";
@@ -7795,13 +7800,14 @@ function TopUpModal({ isOpen, onClose }) {
   react.useEffect(() => {
     return () => clearPolling();
   }, [clearPolling]);
+  const CHAIN_ID = chainId;
   const { data: walletBalance } = reactQuery.useQuery({
-    queryKey: ["walletTokenBalance", chainId, address, token],
+    queryKey: ["walletTokenBalance", CHAIN_ID, address, token],
     queryFn: async () => {
       if (!address) return "0";
       try {
         const res = await fetch(
-          `/api/compass/token/balance?address=${address}&chain=${chainId}&token=${token}`
+          `/api/compass/token/balance?address=${address}&chain=${CHAIN_ID}&token=${token}`
         );
         if (!res.ok) return "0";
         const data = await res.json();
@@ -7827,142 +7833,175 @@ function TopUpModal({ isOpen, onClose }) {
     setTxState({ status: "idle" });
   };
   const isValid = Number(amount) > 0 && !!address && isDeployed;
-  const isBusy = step === "preparing-permit" || step === "signing-permit" || step === "preparing-bundle" || step === "signing-bundle" || step === "broadcasting";
+  const isBusy = step === "approving" || step === "signing-approval" || step === "preparing-transfer" || step === "signing-transfer" || step === "executing";
+  const ensureCorrectChain = react.useCallback(async () => {
+    const targetChainId = EVM_CHAIN_IDS3[CHAIN_ID];
+    if (!targetChainId) return;
+    if (walletChainId !== void 0 && walletChainId !== targetChainId) {
+      if (!switchChain) {
+        throw new Error(`Please switch your wallet to ${CHAIN_ID} (chain ${targetChainId})`);
+      }
+      await switchChain(targetChainId);
+    }
+  }, [walletChainId, switchChain, CHAIN_ID]);
   const handleTransfer = async () => {
-    if (!isValid) return;
+    if (!isValid || !signTypedData) return;
+    setTxState({ status: "idle" });
     try {
-      if (switchChain && walletChainId !== chain.viemChain.id) {
-        await switchChain(chain.viemChain.id);
-      }
+      await ensureCorrectChain();
       if (action === "deposit") {
-        setStep("preparing-permit");
+        setStep("approving");
         setTxState({ status: "preparing" });
-        const transferResponse = await fetch("/api/compass/credit/transfer", {
+        const approveResponse = await fetch("/api/compass/transfer/approve", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             owner: address,
-            chain: chainId,
-            token,
-            amount: Number(amount)
+            chain: CHAIN_ID,
+            token
           })
         });
-        if (!transferResponse.ok) {
-          const errorData = await transferResponse.json();
-          throw new Error(errorData.error || "Failed to prepare permit");
+        if (!approveResponse.ok) {
+          const errData = await approveResponse.json();
+          throw new Error(errData.error || "Failed to check approval");
         }
-        const transferData = await transferResponse.json();
-        const permit2Eip712 = transferData.eip712;
-        setStep("signing-permit");
-        setTxState({ status: "signing" });
-        const permit2Signature = await signTypedData({
-          domain: permit2Eip712.domain,
-          types: {
-            PermitTransferFrom: transferData.normalizedTypes.PermitTransferFrom,
-            TokenPermissions: transferData.normalizedTypes.TokenPermissions
-          },
-          primaryType: "PermitTransferFrom",
-          message: permit2Eip712.message
-        });
-        setStep("preparing-bundle");
+        const approvalData = await approveResponse.json();
+        if (!approvalData.approved) {
+          if (approvalData.requiresTransaction && approvalData.transaction) {
+            setTxState({ status: "broadcasting" });
+            const executeApprovalResponse = await fetch("/api/compass/approval/execute", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                owner: address,
+                chain: CHAIN_ID,
+                transaction: approvalData.transaction
+              })
+            });
+            if (!executeApprovalResponse.ok) {
+              const errData = await executeApprovalResponse.json();
+              throw new Error(errData.error || "Approval transaction failed");
+            }
+          } else if (approvalData.eip712) {
+            setStep("signing-approval");
+            setTxState({ status: "signing" });
+            const approvalSignature = await signTypedData({
+              domain: approvalData.domain,
+              types: approvalData.normalizedTypes,
+              primaryType: "Permit",
+              message: approvalData.message
+            });
+            setTxState({ status: "broadcasting" });
+            const executeApprovalResponse = await fetch("/api/compass/transfer/execute", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                owner: address,
+                chain: CHAIN_ID,
+                eip712: approvalData.eip712,
+                signature: approvalSignature
+              })
+            });
+            if (!executeApprovalResponse.ok) {
+              const errData = await executeApprovalResponse.json();
+              throw new Error(errData.error || "Approval failed");
+            }
+          } else {
+            throw new Error("Unable to approve token for transfers");
+          }
+        }
+        setStep("preparing-transfer");
         setTxState({ status: "preparing" });
-        const bundlePrepareResponse = await fetch("/api/compass/credit/bundle/prepare", {
+        const prepareResponse = await fetch("/api/compass/transfer/prepare", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             owner: address,
-            chain: chainId,
-            actions: [
-              {
-                actionType: "V2_TRANSFER_FROM_EOA",
-                token,
-                amount: Number(amount),
-                permit2Signature,
-                permit2Nonce: permit2Eip712.message.nonce,
-                permit2Deadline: permit2Eip712.message.deadline
-              }
-            ]
+            chain: CHAIN_ID,
+            token,
+            amount,
+            action: "DEPOSIT",
+            product: "credit"
           })
         });
-        if (!bundlePrepareResponse.ok) {
-          const errorData = await bundlePrepareResponse.json();
-          throw new Error(errorData.error || "Failed to prepare bundle");
+        if (!prepareResponse.ok) {
+          const errData = await prepareResponse.json();
+          throw new Error(errData.error || "Failed to prepare transfer");
         }
-        const { eip712, normalizedTypes, domain, message } = await bundlePrepareResponse.json();
-        setStep("signing-bundle");
+        const prepareData = await prepareResponse.json();
+        setStep("signing-transfer");
         setTxState({ status: "signing" });
-        const safeTxSignature = await signTypedData({
-          domain,
-          types: normalizedTypes,
-          primaryType: "SafeTx",
-          message
+        await ensureCorrectChain();
+        const signature = await signTypedData({
+          domain: prepareData.domain,
+          types: prepareData.normalizedTypes,
+          primaryType: prepareData.primaryType,
+          message: prepareData.message
         });
-        setStep("broadcasting");
+        setStep("executing");
         setTxState({ status: "broadcasting" });
-        const executeResponse = await fetch("/api/compass/credit/bundle/execute", {
+        const executeResponse = await fetch("/api/compass/transfer/execute", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             owner: address,
-            eip712,
-            signature: safeTxSignature,
-            chain: chainId,
-            creditAccountAddress
+            chain: CHAIN_ID,
+            eip712: prepareData.eip712,
+            signature,
+            product: "credit"
           })
         });
         if (!executeResponse.ok) {
-          const errorData = await executeResponse.json();
-          throw new Error(errorData.error || "Failed to execute");
+          const errData = await executeResponse.json();
+          throw new Error(errData.error || "Transfer failed");
         }
         const { txHash } = await executeResponse.json();
         handleSuccess(txHash);
       } else {
-        setStep("preparing-bundle");
+        setStep("preparing-transfer");
         setTxState({ status: "preparing" });
-        const bundlePrepareResponse = await fetch("/api/compass/credit/bundle/prepare", {
+        const prepareResponse = await fetch("/api/compass/transfer/prepare", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             owner: address,
-            chain: chainId,
-            actions: [
-              {
-                actionType: "V2_TRANSFER_TO_EOA",
-                token,
-                amount: Number(amount)
-              }
-            ]
+            chain: CHAIN_ID,
+            token,
+            amount,
+            action: "WITHDRAW",
+            product: "credit"
           })
         });
-        if (!bundlePrepareResponse.ok) {
-          const errorData = await bundlePrepareResponse.json();
-          throw new Error(errorData.error || "Failed to prepare withdrawal");
+        if (!prepareResponse.ok) {
+          const errData = await prepareResponse.json();
+          throw new Error(errData.error || "Failed to prepare withdrawal");
         }
-        const { eip712, normalizedTypes, domain, message } = await bundlePrepareResponse.json();
-        setStep("signing-bundle");
+        const prepareData = await prepareResponse.json();
+        setStep("signing-transfer");
         setTxState({ status: "signing" });
-        const safeTxSignature = await signTypedData({
-          domain,
-          types: normalizedTypes,
-          primaryType: "SafeTx",
-          message
+        await ensureCorrectChain();
+        const signature = await signTypedData({
+          domain: prepareData.domain,
+          types: prepareData.normalizedTypes,
+          primaryType: prepareData.primaryType,
+          message: prepareData.message
         });
-        setStep("broadcasting");
+        setStep("executing");
         setTxState({ status: "broadcasting" });
-        const executeResponse = await fetch("/api/compass/credit/bundle/execute", {
+        const executeResponse = await fetch("/api/compass/transfer/execute", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             owner: address,
-            eip712,
-            signature: safeTxSignature,
-            chain: chainId,
-            creditAccountAddress
+            chain: CHAIN_ID,
+            eip712: prepareData.eip712,
+            signature,
+            product: "credit"
           })
         });
         if (!executeResponse.ok) {
-          const errorData = await executeResponse.json();
-          throw new Error(errorData.error || "Failed to execute withdrawal");
+          const errData = await executeResponse.json();
+          throw new Error(errData.error || "Withdrawal failed");
         }
         const { txHash } = await executeResponse.json();
         handleSuccess(txHash);
@@ -7985,8 +8024,9 @@ function TopUpModal({ isOpen, onClose }) {
       polls++;
       queryClient.invalidateQueries({ queryKey: ["creditBalances"] });
       queryClient.invalidateQueries({ queryKey: ["creditPositions"] });
+      queryClient.invalidateQueries({ queryKey: ["walletTokenBalance"] });
       try {
-        const res = await fetch(`/api/compass/tx/receipt?hash=${txHash}&chain=${chainId}`);
+        const res = await fetch(`/api/compass/tx/receipt?hash=${txHash}&chain=${CHAIN_ID}`);
         const data = await res.json();
         if (data.status === "success") {
           clearPolling();
@@ -8001,23 +8041,23 @@ function TopUpModal({ isOpen, onClose }) {
       }
       if (polls >= 24) {
         clearPolling();
-        setTxState({ status: "confirmed", txHash });
+        setTxState({ status: "failed", error: "Unable to confirm transaction. Please check your wallet for status." });
       }
     }, 5e3);
   };
   const phase = getPhase2(step);
   const buttonLabel = () => {
     switch (step) {
-      case "preparing-permit":
-        return "Preparing approval...";
-      case "signing-permit":
+      case "approving":
+        return "Checking approval...";
+      case "signing-approval":
         return "Sign Approval (1/2)...";
-      case "preparing-bundle":
+      case "preparing-transfer":
         return action === "deposit" ? "Preparing transfer..." : "Preparing withdrawal...";
-      case "signing-bundle":
+      case "signing-transfer":
         return action === "deposit" ? "Sign Transfer (2/2)..." : "Sign Withdrawal...";
-      case "broadcasting":
-        return "Broadcasting...";
+      case "executing":
+        return "Executing...";
       default:
         return null;
     }
@@ -8100,7 +8140,10 @@ function TopUpModal({ isOpen, onClose }) {
           {
             type: "number",
             value: amount,
-            onChange: (e) => setAmount(e.target.value),
+            onChange: (e) => {
+              setAmount(e.target.value);
+              setTxState({ status: "idle" });
+            },
             disabled: isBusy,
             placeholder: "0.00",
             className: "w-full border px-3 py-2.5 pr-14 text-sm focus:outline-none disabled:opacity-50",
@@ -8142,7 +8185,7 @@ function TopUpModal({ isOpen, onClose }) {
         }
       )
     ] }),
-    !isBusy && step !== "confirmed" && step !== "failed" && /* @__PURE__ */ jsxRuntime.jsx(
+    !isBusy && step !== "confirmed" && step !== "failed" && txState.status === "idle" && /* @__PURE__ */ jsxRuntime.jsx(
       "p",
       {
         className: "text-xs",
@@ -10771,7 +10814,7 @@ function AllocationEditor({
     ) })
   ] });
 }
-var EVM_CHAIN_IDS3 = {
+var EVM_CHAIN_IDS4 = {
   ethereum: 1,
   base: 8453,
   arbitrum: 42161
@@ -10950,7 +10993,7 @@ function RebalancingWidget({
     setTargets((prev) => prev.map((t, i) => i === index ? { ...t, targetPercent: rounded } : t));
   }, []);
   const ensureCorrectChain = react.useCallback(async () => {
-    const targetChainId = EVM_CHAIN_IDS3[CHAIN_ID];
+    const targetChainId = EVM_CHAIN_IDS4[CHAIN_ID];
     if (!targetChainId) return;
     if (walletChainId !== void 0 && walletChainId !== targetChainId) {
       if (!switchChain) {