@kimafinance/kima-transaction-widget 1.3.5 → 1.3.7

package/dist/index.cjs

@@ -1071,7 +1071,7 @@ var USD = ({ width = 24, height = 24, ...rest }) => {
       /* @__PURE__ */ import_react34.default.createElement("g", null, /* @__PURE__ */ import_react34.default.createElement(
         "path",
         {
-          d: "M24.26,20.34c0,3.42-2.423,6.342-6.845,7.111v3.92h-3.768v-3.648c-2.578-0.117-5.076-0.811-6.537-1.654l1.154-4.5\r\n		c1.615,0.886,3.883,1.693,6.383,1.693c2.191,0,3.691-0.848,3.691-2.385c0-1.461-1.23-2.389-4.077-3.348\r\n		c-4.112-1.385-6.921-3.306-6.921-7.033c0-3.386,2.385-6.035,6.499-6.845V0h3.767v3.383c2.576,0.115,4.309,0.652,5.576,1.268\r\n		l-1.115,4.348C21.07,8.575,19.3,7.688,16.531,7.688c-2.5,0-3.307,1.076-3.307,2.154c0,1.268,1.346,2.074,4.613,3.307\r\n		C22.416,14.762,24.26,16.877,24.26,20.34z"
+          d: "M24.26,20.34c0,3.42-2.423,6.342-6.845,7.111v3.92h-3.768v-3.648c-2.578-0.117-5.076-0.811-6.537-1.654l1.154-4.5\n		c1.615,0.886,3.883,1.693,6.383,1.693c2.191,0,3.691-0.848,3.691-2.385c0-1.461-1.23-2.389-4.077-3.348\n		c-4.112-1.385-6.921-3.306-6.921-7.033c0-3.386,2.385-6.035,6.499-6.845V0h3.767v3.383c2.576,0.115,4.309,0.652,5.576,1.268\n		l-1.115,4.348C21.07,8.575,19.3,7.688,16.531,7.688c-2.5,0-3.307,1.076-3.307,2.154c0,1.268,1.346,2.074,4.613,3.307\n		C22.416,14.762,24.26,16.877,24.26,20.34z"
         }
       ))
     )
@@ -2627,6 +2627,12 @@ var checkPoolBalance = ({
   const targetToken = poolTokens.find(
     (token) => token.tokenSymbol === finalTargetCurrency
   );
+  if (!targetToken) {
+    return {
+      isPoolAvailable: false,
+      error: `${CHAIN_NAMES_TO_STRING[targetChain]} has no ${targetCurrency} pool!`
+    };
+  }
   const { amount: targetTokenBalance } = targetToken;
   if (parseFloat(amount) > parseFloat(targetTokenBalance))
     return {
@@ -2774,6 +2780,34 @@ function useEvmAllowance() {
     refetchInterval: 60 * 1e3,
     enabled
   });
+  const signMessage = async (data) => {
+    if (!walletProvider) {
+      console.error("No available provider");
+      return;
+    }
+    if (!allowanceData?.decimals) {
+      console.warn("useEvmAllowance: Missing required data");
+      return;
+    }
+    try {
+      const walletClient = (0, import_viem5.createWalletClient)({
+        account: walletAddress,
+        chain: sourceChain,
+        transport: (0, import_viem5.custom)(window.ethereum)
+        // WARNING: NEED TO MAKE SURE THIS USING THE ETHEREUM OBJECT IS STABLE ENOUGH
+      });
+      return await walletClient.signMessage({
+        account: walletAddress,
+        message: `Amount: ${allowanceNumber}
+Target Address: ${data.targetAddress}
+Target Chain: ${data.targetChain}
+Target Symbol: ${data.targetSymbol}`
+      });
+    } catch (error) {
+      console.error("useEvmAllowance: Error on signing message:", error);
+      throw new Error("Error on signing message");
+    }
+  };
   const approveErc20TokenTransfer = async (isCancel = false) => {
     if (!walletProvider) {
       console.error("No available provider");
@@ -2839,6 +2873,7 @@ function useEvmAllowance() {
     isApproved: allowanceData?.allowance ? allowanceData.allowance >= allowanceNumber : false,
     approve: approveErc20TokenTransfer,
     isLoading,
+    signMessage,
     refetch
   };
 }
@@ -2922,6 +2957,7 @@ var WalletProvider2 = ({
   return /* @__PURE__ */ import_react82.default.createElement(import_wallet_adapter_react.ConnectionProvider, { endpoint }, /* @__PURE__ */ import_react82.default.createElement(
     import_wallet_adapter_react.WalletProvider,
     {
+      autoConnect: false,
       wallets: [
         new import_wallet_adapter_wallets.PhantomWalletAdapter(),
         new import_wallet_adapter_wallets.SolflareWalletAdapter(),
@@ -3031,7 +3067,8 @@ function useSolanaAllowance() {
   const { connection: internalConnection } = (0, import_wallet_adapter_react3.useConnection)();
   const {
     publicKey: internalPublicKey,
-    signTransaction: internalSignTransaction
+    signTransaction: internalSignTransaction,
+    signMessage: internalSignMessage
   } = (0, import_wallet_adapter_react3.useWallet)();
   const selectedCoin = (0, import_react_redux7.useSelector)(selectSourceCurrency);
   const tokenOptions = (0, import_react_redux7.useSelector)(selectTokenOptions);
@@ -3040,6 +3077,7 @@ function useSolanaAllowance() {
   const isSolanaProvider = sourceChain.shortName === "SOL" && externalProvider?.type === "solana" && externalProvider.provider && externalProvider.signer instanceof import_web38.PublicKey;
   const userPublicKey = isSolanaProvider ? externalProvider.signer : sourceChain.shortName === "SOL" ? internalPublicKey : void 0;
   const signTransaction = isSolanaProvider && externalProvider.provider.signTransaction ? externalProvider.provider.signTransaction : sourceChain.shortName === "SOL" ? internalSignTransaction : void 0;
+  const signMessage = isSolanaProvider && externalProvider.provider.signMessage ? externalProvider.provider.signMessage : sourceChain.shortName === "SOL" ? internalSignMessage : void 0;
   const connection = isSolanaProvider && externalProvider.provider.connection ? externalProvider.provider.connection : sourceChain.shortName === "SOL" ? internalConnection : void 0;
   const {
     data: allowanceData,
@@ -3068,6 +3106,24 @@ function useSolanaAllowance() {
     staleTime: 1e3 * 60
     // 1 min
   });
+  const signSolanaMessage = async (data) => {
+    if (!signMessage) {
+      console.warn("useSolanaAllowance: Missing Solana provider setup");
+      return;
+    }
+    try {
+      const message = `Amount: ${allowanceNumber}
+Target Address: ${data.targetAddress}
+Target Chain: ${data.targetChain}
+Target Symbol: ${data.targetSymbol}`;
+      const encodedMessage = new TextEncoder().encode(message);
+      const signature = await signMessage(encodedMessage);
+      return signature;
+    } catch (error2) {
+      console.error("Error signing message:", error2);
+      throw error2;
+    }
+  };
   const approveSPLTokenTransfer = async (isCancel = false) => {
     if (!allowanceAmount) {
       console.warn("useSolanaAllowance: Missing allowance amount");
@@ -3125,7 +3181,8 @@ function useSolanaAllowance() {
   return {
     ...allowanceData,
     isApproved: allowanceData?.allowance ? allowanceData.allowance >= allowanceNumber : false,
-    approve: approveSPLTokenTransfer
+    approve: approveSPLTokenTransfer,
+    signMessage: signSolanaMessage
   };
 }
 
@@ -3252,7 +3309,8 @@ var WalletProvider3 = ({ children, networkOption }) => {
     {
       adapters,
       onError,
-      onChainChanged
+      onChainChanged,
+      autoConnect: false
     },
     children
   );
@@ -3599,7 +3657,8 @@ function useTronAllowance() {
   const { pools } = useGetPools_default(backendUrl, networkOption);
   const {
     address: internalUserAddress,
-    signTransaction: internalSignTronTransaction
+    signTransaction: internalSignTronTransaction,
+    signMessage: internalSignMessage
   } = (0, import_tronwallet_adapter_react_hooks3.useWallet)();
   const [approvalsCount, setApprovalsCount] = (0, import_react88.useState)(0);
   const isTronProvider2 = sourceChain.shortName === "TRX" && externalProvider?.type === "tron" && externalProvider.provider.tronWeb instanceof import_tronweb5.TronWeb && typeof externalProvider.signer === "string";
@@ -3611,6 +3670,7 @@ function useTronAllowance() {
   isTronProvider2 && tronWeb.setAddress(TRON_USDK_OWNER_ADDRESS);
   const userAddress = isTronProvider2 ? externalProvider.signer : internalUserAddress;
   const signTronTransaction = isTronProvider2 ? externalProvider.provider.signTransaction : internalSignTronTransaction;
+  const signMessage = isTronProvider2 ? externalProvider.provider.signMessage : internalSignMessage;
   const {
     data: allowanceData,
     isLoading,
@@ -3631,6 +3691,23 @@ function useTronAllowance() {
     staleTime: 1e3 * 60
     // 1 min
   });
+  const signTronMessage = async (data) => {
+    if (!tronWeb) {
+      console.warn("TronWeb not initialized");
+      return;
+    }
+    try {
+      const message = `Amount: ${allowanceNumber}
+Target Address: ${data.targetAddress}
+Target Chain: ${data.targetChain}
+Target Symbol: ${data.targetSymbol}`;
+      const signedMessage = await signMessage(message);
+      return signedMessage;
+    } catch (error2) {
+      console.error("Error signing message:", error2);
+      throw error2;
+    }
+  };
   const approveTrc20TokenTransfer = async (isCancel = false) => {
     if (!userAddress || !pools || !tronWeb || !tokenOptions || !selectedCoin || !allowanceAmount) {
       console.warn("Missing required data for approveTrc20TokenTransfer");
@@ -3669,7 +3746,8 @@ function useTronAllowance() {
   return {
     ...allowanceData,
     isApproved: allowanceData?.allowance ? allowanceData.allowance >= allowanceNumber : false,
-    approve: approveTrc20TokenTransfer
+    approve: approveTrc20TokenTransfer,
+    signMessage: signTronMessage
   };
 }
 
@@ -3836,10 +3914,10 @@ var KimaProvider = ({
 var KimaProvider_default = KimaProvider;
 
 // src/components/KimaTransactionWidget.tsx
-var import_react135 = __toESM(require("react"), 1);
+var import_react136 = __toESM(require("react"), 1);
 
 // src/components/KimaWidgetWrapper.tsx
-var import_react133 = __toESM(require("react"), 1);
+var import_react134 = __toESM(require("react"), 1);
 var import_react_redux52 = require("react-redux");
 
 // src/components/TransactionWidget.tsx
@@ -4596,12 +4674,13 @@ var AddressInput = ({
   const targetChain = (0, import_react_redux29.useSelector)(selectTargetChain);
   const { walletAddress: sourceAddress, isReady } = useIsWalletReady4();
   const targetAddress = (0, import_react_redux29.useSelector)(selectTargetAddress);
-  const isEvm = (chain) => {
-    return chain !== "SOL" && chain !== "TRX" && chain !== "BTC";
+  const isCompatible = (sourceChain2, targetChain2) => {
+    return sourceChain2.compatibility === targetChain2.compatibility;
   };
   (0, import_react113.useEffect)(() => {
     if (mode === "payment" /* payment */) return;
-    if (isEvm(sourceChain) && isEvm(targetChain)) {
+    if (isCompatible(sourceChain, targetChain)) {
+      if (targetAddress !== "") return;
       dispatch(setTargetAddress(isReady && sourceAddress ? sourceAddress : ""));
       return;
     }
@@ -5154,7 +5233,7 @@ var TransactionWidget = ({ theme }) => {
 };
 
 // src/components/TransferWidget.tsx
-var import_react132 = __toESM(require("react"), 1);
+var import_react133 = __toESM(require("react"), 1);
 var import_react_redux51 = require("react-redux");
 
 // src/components/reusable/SingleForm.tsx
@@ -5325,18 +5404,8 @@ var NetworkSelector_default = import_react122.default.memo(NetworkSelector);
 
 // src/components/reusable/SingleForm.tsx
 var SingleForm = ({
-  allowance,
   balance,
-  decimals,
-  formStep,
-  onBack,
-  onCancelApprove,
-  onNext,
-  getButtonLabel,
-  isApproving,
-  isSigning,
-  isSubmitting,
-  isCancellingApprove
+  decimals
 }) => {
   const dispatch = (0, import_react_redux43.useDispatch)();
   const mode = (0, import_react_redux43.useSelector)(selectMode);
@@ -5345,7 +5414,6 @@ var SingleForm = ({
   const { totalFeeUsd } = (0, import_react_redux43.useSelector)(selectServiceFee);
   const compliantOption = (0, import_react_redux43.useSelector)(selectCompliantOption);
   const targetCompliant = (0, import_react_redux43.useSelector)(selectTargetCompliant);
-  const transactionOption = (0, import_react_redux43.useSelector)(selectTransactionOption);
   const sourceNetwork = (0, import_react_redux43.useSelector)(selectSourceChain);
   const targetNetwork = (0, import_react_redux43.useSelector)(selectTargetChain);
   const { isReady } = useIsWalletReady4();
@@ -5379,23 +5447,16 @@ var SingleForm = ({
   const maxValue = (0, import_react123.useMemo)(() => {
     if (!balance) return 0;
     if (totalFeeUsd < 0) return balance;
-    const amountMinusFees = preciseSubtraction(balance, totalFeeUsd);
-    return amountMinusFees > 0 ? amountMinusFees : 0;
+    return preciseSubtraction(balance, totalFeeUsd);
   }, [balance, totalFeeUsd, feeDeduct]);
   (0, import_react123.useEffect)(() => {
     if (!errorMessage) return;
     import_react_hot_toast4.toast.error(errorMessage);
   }, [errorMessage]);
   (0, import_react123.useEffect)(() => {
-    if (amountValue && amount != "") return;
+    if (amountValue && amount !== "") return;
     setAmountValue(amount);
   }, [amount]);
-  (0, import_react123.useEffect)(() => {
-    if (!feeDeduct && maxValue < +amountValue) {
-      setAmountValue(maxValue.toString());
-      dispatch(setAmount(maxValue.toString()));
-    }
-  }, [feeDeduct]);
   return /* @__PURE__ */ import_react123.default.createElement("div", { className: "single-form" }, /* @__PURE__ */ import_react123.default.createElement("div", { className: "form-item" }, /* @__PURE__ */ import_react123.default.createElement("span", { className: "label" }, "Source Network:"), /* @__PURE__ */ import_react123.default.createElement("div", { className: "items" }, /* @__PURE__ */ import_react123.default.createElement(NetworkSelector_default, { type: "source" }), /* @__PURE__ */ import_react123.default.createElement(CoinDropdown_default, null))), /* @__PURE__ */ import_react123.default.createElement(
     "div",
     {
@@ -5416,27 +5477,21 @@ var SingleForm = ({
       theme: theme.colorMode,
       placeholder: "Target address"
     }
-  )) : null, mode === "bridge" /* bridge */ ? /* @__PURE__ */ import_react123.default.createElement("div", { className: `form-item ${theme.colorMode}` }, /* @__PURE__ */ import_react123.default.createElement("span", { className: "label" }, "Amount:"), /* @__PURE__ */ import_react123.default.createElement("div", { className: `amount-label-container items ${theme.colorMode}` }, /* @__PURE__ */ import_react123.default.createElement(
+  )) : null, /* @__PURE__ */ import_react123.default.createElement("div", { className: `form-item ${theme.colorMode}` }, /* @__PURE__ */ import_react123.default.createElement("span", { className: "label" }, "Amount:"), /* @__PURE__ */ import_react123.default.createElement("div", { className: `amount-label-container items ${theme.colorMode}` }, /* @__PURE__ */ import_react123.default.createElement(
     "input",
     {
       className: `${theme.colorMode}`,
       type: "text",
-      placeholder: "Amount",
+      placeholder: "Enter amount",
       value: amountValue || "",
       onChange: (e) => {
         const value = e.target.value;
         const maskedValue = value.replace(/[^0-9.]/g, "").replace(/(\..*?)\..*/g, "$1").replace(new RegExp(`(\\.\\d{${decimals}})\\d+`), "$1");
-        const numericValue = parseFloat(maskedValue);
-        if (!isNaN(numericValue) && numericValue > maxValue) {
-          setAmountValue(maxValue.toString());
-          dispatch(setAmount(maxValue.toString()));
-        } else {
-          setAmountValue(maskedValue);
-          dispatch(setAmount(maskedValue));
-        }
+        setAmountValue(maskedValue);
+        dispatch(setAmount(maskedValue));
       }
     }
-  ), /* @__PURE__ */ import_react123.default.createElement(
+  ), /* @__PURE__ */ import_react123.default.createElement("div", { className: "max-disclaimer" }, /* @__PURE__ */ import_react123.default.createElement(
     "span",
     {
       className: "max-button",
@@ -5446,22 +5501,7 @@ var SingleForm = ({
       }
     },
     "Max"
-  ))) : /* @__PURE__ */ import_react123.default.createElement("div", { className: `form-item ${theme.colorMode}` }, /* @__PURE__ */ import_react123.default.createElement("span", { className: "label" }, "Amount:"), /* @__PURE__ */ import_react123.default.createElement("div", { className: `amount-label-container items ${theme.colorMode}` }, /* @__PURE__ */ import_react123.default.createElement(
-    "input",
-    {
-      className: `${theme.colorMode}`,
-      type: "number",
-      placeholder: "Amount",
-      value: transactionOption?.amount || amountValue || "",
-      onChange: (e) => {
-        let _amount = +e.target.value;
-        const decimal = sourceNetwork.shortName === "BTC" /* BTC */ || targetNetwork.shortName === "BTC" /* BTC */ ? 8 : 2;
-        setAmountValue(e.target.value);
-        dispatch(setAmount(_amount.toFixed(decimal)));
-      },
-      disabled: transactionOption?.amount !== void 0
-    }
-  ), /* @__PURE__ */ import_react123.default.createElement("div", { className: `coin-wrapper ${theme.colorMode}` }, /* @__PURE__ */ import_react123.default.createElement("div", { className: "icon-wrapper" }, /* @__PURE__ */ import_react123.default.createElement(TargetIcon, null)), targetCurrency))));
+  ), totalFeeUsd !== -1 && /* @__PURE__ */ import_react123.default.createElement("p", null, "Est fees: $ ", totalFeeUsd, " USD")))));
 };
 var SingleForm_default = SingleForm;
 
@@ -5520,6 +5560,7 @@ var import_wallet_adapter_react7 = require("@solana/wallet-adapter-react");
 var import_wallet_adapter_base = require("@solana/wallet-adapter-base");
 var SolanaWalletSelect = () => {
   const theme = (0, import_react_redux44.useSelector)(selectTheme);
+  const sourceChain = (0, import_react_redux44.useSelector)(selectSourceChain);
   const dispatch = (0, import_react_redux44.useDispatch)();
   const sliderRef = (0, import_react124.useRef)();
   const { wallet, wallets, select, connect, connected } = (0, import_wallet_adapter_react7.useWallet)();
@@ -5563,17 +5604,30 @@ var SolanaWalletSelect = () => {
   }, []);
   const handleWalletClick = (0, import_react124.useCallback)(
     (walletName) => {
+      console.log(
+        "SolanaWalletSelect: handleWalletClick: walletName: ",
+        walletName
+      );
       select(walletName);
     },
     [select]
   );
   (0, import_react124.useEffect)(() => {
-    if (connected) return;
-    if (wallet) {
-      connect();
-      dispatch(setSolanaConnectModal(false));
+    console.log("SolanaWalletSelect: useEffect: wallet: ", wallet);
+    if (!wallet) return;
+    if (sourceChain.shortName !== "SOL") {
+      console.log("SolanaWalletSelect: source chain is not sol...");
+      return;
+    }
+    if (!connected) {
+      console.log(
+        "SolanaWalletSelect: Wallet exists but not connected, connecting wallet:",
+        wallet
+      );
+      connect().catch((err) => console.error("Solana connect error:", err));
     }
-  }, [wallet]);
+    dispatch(setSolanaConnectModal(false));
+  }, [wallet, sourceChain]);
   return /* @__PURE__ */ import_react124.default.createElement("div", { className: `wallet-select` }, /* @__PURE__ */ import_react124.default.createElement("div", { className: "slide-area hide-scrollbar", ref: sliderRef }, /* @__PURE__ */ import_react124.default.createElement("div", { className: "wallet-container" }, detected.map((wallet2, index) => /* @__PURE__ */ import_react124.default.createElement(
     "div",
     {
@@ -5615,7 +5669,7 @@ var AccountDetailsModal = () => {
     solanaWalletDisconnect();
     dispatch(setAccountDetailsModal(false));
   };
-  if (sourceChain !== "SOL") return;
+  if (sourceChain.shortName !== "SOL") return;
   return /* @__PURE__ */ import_react125.default.createElement(
     "div",
     {
@@ -5687,7 +5741,7 @@ var AccountDetailsModal2 = () => {
   const { balance: tronBalance } = useGetTrxBalance_default();
   const selectedNetwork = (0, import_react_redux47.useSelector)(selectSourceChain);
   const networkDetails = (0, import_react127.useMemo)(
-    () => networkOptions.find(({ id }) => id === selectedNetwork),
+    () => networkOptions.find(({ id }) => id === selectedNetwork.shortName),
     [selectedNetwork]
   );
   const explorerUrl = (0, import_react127.useMemo)(() => {
@@ -5697,7 +5751,7 @@ var AccountDetailsModal2 = () => {
     tronWalletDisconnect();
     dispatch(setAccountDetailsModal(false));
   };
-  if (sourcheChain !== "TRX") return;
+  if (sourcheChain.shortName !== "TRX") return;
   return /* @__PURE__ */ import_react127.default.createElement(
     "div",
     {
@@ -5716,7 +5770,7 @@ var AccountDetailsModal2 = () => {
           fill: theme.colorMode === "light" ? "black" : "white"
         }
       )
-    )))), /* @__PURE__ */ import_react127.default.createElement("div", { className: "modal-content" }, /* @__PURE__ */ import_react127.default.createElement("div", { className: "summary" }, networkDetails && /* @__PURE__ */ import_react127.default.createElement(networkDetails.icon, { width: 60, height: 60 }), /* @__PURE__ */ import_react127.default.createElement("div", { className: "address" }, /* @__PURE__ */ import_react127.default.createElement("h2", null, getShortenedAddress(walletAddress || "")), /* @__PURE__ */ import_react127.default.createElement(CopyButton_default, { text: walletAddress })), /* @__PURE__ */ import_react127.default.createElement("h3", null, tronBalance, " ", selectedNetwork)), /* @__PURE__ */ import_react127.default.createElement(SecondaryButton_default, { className: "block-explorer" }, /* @__PURE__ */ import_react127.default.createElement(ExternalLink_default, { className: "link", to: explorerUrl }, /* @__PURE__ */ import_react127.default.createElement(Explorer_default, { fill: "#778DA3" }), /* @__PURE__ */ import_react127.default.createElement("p", null, "Block explorer"), /* @__PURE__ */ import_react127.default.createElement(ExternalUrl_default, { fill: "#778DA3" }))), /* @__PURE__ */ import_react127.default.createElement(PrimaryButton_default, { clickHandler: handleDisconnect }, "Disconnect")))
+    )))), /* @__PURE__ */ import_react127.default.createElement("div", { className: "modal-content" }, /* @__PURE__ */ import_react127.default.createElement("div", { className: "summary" }, networkDetails && /* @__PURE__ */ import_react127.default.createElement(networkDetails.icon, { width: 60, height: 60 }), /* @__PURE__ */ import_react127.default.createElement("div", { className: "address" }, /* @__PURE__ */ import_react127.default.createElement("h2", null, getShortenedAddress(walletAddress || "")), /* @__PURE__ */ import_react127.default.createElement(CopyButton_default, { text: walletAddress })), /* @__PURE__ */ import_react127.default.createElement("h3", null, tronBalance, " ", selectedNetwork.shortName)), /* @__PURE__ */ import_react127.default.createElement(SecondaryButton_default, { className: "block-explorer" }, /* @__PURE__ */ import_react127.default.createElement(ExternalLink_default, { className: "link", to: explorerUrl }, /* @__PURE__ */ import_react127.default.createElement(Explorer_default, { fill: "#778DA3" }), /* @__PURE__ */ import_react127.default.createElement("p", null, "Block explorer"), /* @__PURE__ */ import_react127.default.createElement(ExternalUrl_default, { fill: "#778DA3" }))), /* @__PURE__ */ import_react127.default.createElement(PrimaryButton_default, { clickHandler: handleDisconnect }, "Disconnect")))
   );
 };
 var AccountDetailsModal_default2 = AccountDetailsModal2;
@@ -5847,7 +5901,8 @@ var useValidateTransaction = ({
   sourceCompliant,
   targetCompliant,
   mode,
-  pools
+  pools,
+  formStep
 }) => {
   const maxValue = (0, import_react130.useMemo)(() => {
     if (!balance) return 0;
@@ -5895,24 +5950,22 @@ var useValidateTransaction = ({
         };
       }
     }
-    console.log("useValidate:amount: ", amount);
-    console.log("useValidate:maxValue ", maxValue);
-    if (+amount < totalFeeUsd) {
+    if (+amount > balance && formStep === 0) {
       return {
-        error: "ValidationError" /* Error */,
-        message: "Fees are greater than the amount to transfer"
+        error: "Warning" /* Warning */,
+        message: "The entered amount exceeds your available balance. This transaction is likely to fail. Proceed with caution."
       };
     }
-    if (+amount > maxValue) {
+    if (+amount > maxValue && formStep === 0) {
       return {
-        error: "ValidationError" /* Error */,
-        message: `Amount exceeds the maximum allowed value [$${maxValue}]`
+        error: "Warning" /* Warning */,
+        message: "The entered amount exceeds the maximum transferable amount (available balance minus transaction fees). Reduce the amount or allow fees to be deducted from the transferred amount. Otherwise, your transaction may fail. Proceed with caution."
       };
     }
-    if (balance < +amount) {
+    if (+amount < totalFeeUsd && formStep === 0) {
       return {
-        error: "ValidationError" /* Error */,
-        message: "Insufficient balance for the transaction"
+        error: "Warning" /* Warning */,
+        message: "Transaction fees exceed the transfer amount. This may result in an ineffective transaction. Proceed with caution."
       };
     }
     if (!isApproved && isSubmitting) {
@@ -5957,7 +6010,7 @@ var useSubmitTransaction = ({
 }) => {
   const dispatch = (0, import_react_redux50.useDispatch)();
   const [isSubmitting, setSubmitting] = (0, import_react131.useState)(false);
-  const submitTransaction = async () => {
+  const submitTransaction = async (signature) => {
     try {
       setSubmitting(true);
       const params = JSON.stringify({
@@ -5974,7 +6027,8 @@ var useSubmitTransaction = ({
         htlcCreationVout: 0,
         htlcExpirationTimestamp: "0",
         htlcVersion: "",
-        senderPubKey: ""
+        senderPubKey: "",
+        options: signature
       });
       const transactionResult = await fetchWrapper.post(
         `${backendUrl}/submit`,
@@ -6066,6 +6120,31 @@ function useDisconnectWallet4() {
   return mainConnection ? { disconnectWallet: mainConnection.disconnectWallet } : defaultDisconnect;
 }
 
+// src/components/reusable/WarningModal.tsx
+var import_react132 = __toESM(require("react"), 1);
+var WarningModal = ({
+  message,
+  onAcknowledge,
+  onCancel
+}) => {
+  return /* @__PURE__ */ import_react132.default.createElement("div", { className: "warning-modal-overlay" }, /* @__PURE__ */ import_react132.default.createElement("div", { className: "warning-modal" }, /* @__PURE__ */ import_react132.default.createElement("h3", null, "Warning"), /* @__PURE__ */ import_react132.default.createElement("p", null, message), /* @__PURE__ */ import_react132.default.createElement("div", { className: "warning-modal-buttons" }, /* @__PURE__ */ import_react132.default.createElement(
+    SecondaryButton_default,
+    {
+      className: "warning-modal-cancel",
+      clickHandler: onCancel
+    },
+    "Cancel"
+  ), /* @__PURE__ */ import_react132.default.createElement(
+    PrimaryButton_default,
+    {
+      className: "warning-modal-acknowledge",
+      clickHandler: onAcknowledge
+    },
+    "Acknowledge"
+  ))));
+};
+var WarningModal_default = WarningModal;
+
 // src/components/TransferWidget.tsx
 var TransferWidget = ({
   theme,
@@ -6074,8 +6153,9 @@ var TransferWidget = ({
   paymentTitleOption
 }) => {
   const dispatch = (0, import_react_redux51.useDispatch)();
-  const mainRef = (0, import_react132.useRef)(null);
-  const [formStep, setFormStep] = (0, import_react132.useState)(0);
+  const mainRef = (0, import_react133.useRef)(null);
+  const [formStep, setFormStep] = (0, import_react133.useState)(0);
+  const [warningModalOpen, setWarningModalOpen] = (0, import_react133.useState)(null);
   const dAppOption = (0, import_react_redux51.useSelector)(selectDappOption);
   const mode = (0, import_react_redux51.useSelector)(selectMode);
   const transactionOption = (0, import_react_redux51.useSelector)(selectTransactionOption);
@@ -6098,15 +6178,15 @@ var TransferWidget = ({
   const networkOptions3 = (0, import_react_redux51.useSelector)(selectNetworkOption);
   const feeDeduct = (0, import_react_redux51.useSelector)(selectFeeDeduct);
   const { keplrHandler, closeHandler } = useKimaContext();
-  const [isCancellingApprove, setCancellingApprove] = (0, import_react132.useState)(false);
-  const [isApproving, setApproving] = (0, import_react132.useState)(false);
-  const [isSigning, setSigning] = (0, import_react132.useState)(false);
+  const [isCancellingApprove, setCancellingApprove] = (0, import_react133.useState)(false);
+  const [isApproving, setApproving] = (0, import_react133.useState)(false);
+  const [isSigning, setSigning] = (0, import_react133.useState)(false);
   const pendingTxs = (0, import_react_redux51.useSelector)(selectPendingTxs);
   const networks = (0, import_react_redux51.useSelector)(selectNetworks);
   const { width: windowWidth } = useWidth_default();
   const { disconnectWallet } = useDisconnectWallet4();
   const { balance } = useBalance2();
-  const { allowance, isApproved, approve, decimals } = useAllowance({
+  const { allowance, isApproved, approve, decimals, signMessage } = useAllowance({
     setApproving,
     setCancellingApprove
   });
@@ -6137,7 +6217,8 @@ var TransferWidget = ({
     compliantOption,
     mode,
     pools,
-    feeDeduct
+    feeDeduct,
+    formStep
   });
   const { submitTransaction, isSubmitting } = useSubmitTransaction_default({
     amount: BigInt(submitAmount ?? "0"),
@@ -6154,7 +6235,7 @@ var TransferWidget = ({
   const handleSubmit = async () => {
     const { error, message: validationMessage } = validate(true);
     if (error === "ValidationError" /* Error */) {
-      return import_react_hot_toast5.toast.error(validationMessage, { icon: /* @__PURE__ */ import_react132.default.createElement(Error_default, null) });
+      return import_react_hot_toast5.toast.error(validationMessage, { icon: /* @__PURE__ */ import_react133.default.createElement(Error_default, null) });
     }
     if (error === "ApprovalNeeded" /* ApprovalNeeded */) {
       return approve();
@@ -6163,18 +6244,30 @@ var TransferWidget = ({
       keplrHandler && keplrHandler(sourceAddress);
       return;
     }
-    const { success, message: submitMessage } = await submitTransaction();
-    if (!success) return import_react_hot_toast5.toast.error(submitMessage, { icon: /* @__PURE__ */ import_react132.default.createElement(Error_default, null) });
+    const signature = await signMessage?.({
+      targetAddress,
+      targetChain: targetChain.shortName,
+      targetSymbol: targetCurrency
+    });
+    const { success, message: submitMessage } = await submitTransaction(
+      JSON.stringify({ signature })
+    );
+    if (!success) return import_react_hot_toast5.toast.error(submitMessage, { icon: /* @__PURE__ */ import_react133.default.createElement(Error_default, null) });
   };
   const onNext = () => {
-    const { error, message } = validate();
+    const { error, message: validationMessage } = validate();
+    if (error === "Warning" /* Warning */ && formStep === 0) {
+      console.log("validationError: Warning: ", validationMessage);
+      setWarningModalOpen({ message: validationMessage });
+      return;
+    }
     if (error !== "ValidationError" /* Error */ && !formStep) {
       return setFormStep(1);
     }
     if (error !== "ValidationError" /* Error */ && formStep > 0) {
       return handleSubmit();
     }
-    import_react_hot_toast5.toast.error(message, { icon: /* @__PURE__ */ import_react132.default.createElement(Error_default, null) });
+    import_react_hot_toast5.toast.error(validationMessage, { icon: /* @__PURE__ */ import_react133.default.createElement(Error_default, null) });
     mainRef.current?.click();
   };
   const onBack = () => {
@@ -6231,10 +6324,10 @@ var TransferWidget = ({
     }
     await disconnectWallet();
   };
-  (0, import_react132.useEffect)(() => {
+  (0, import_react133.useEffect)(() => {
     dispatch(setTheme(theme));
   }, [theme]);
-  return /* @__PURE__ */ import_react132.default.createElement(
+  return /* @__PURE__ */ import_react133.default.createElement(
     "div",
     {
       className: `kima-card ${theme.colorMode}`,
@@ -6242,14 +6335,28 @@ var TransferWidget = ({
         background: theme.colorMode === "light" /* light */ ? theme.backgroundColorLight : theme.backgroundColorDark
       }
     },
-    mode === "payment" /* payment */ && !transactionOption && /* @__PURE__ */ import_react132.default.createElement("h2", { className: "invalid-option-banner" }, "We're unable to process your payment. Please ensure the necessary transaction details are provided. Contact support if the issue persists."),
-    /* @__PURE__ */ import_react132.default.createElement("div", { className: "transfer-card" }, /* @__PURE__ */ import_react132.default.createElement("div", { className: "kima-card-header" }, /* @__PURE__ */ import_react132.default.createElement("div", { className: "topbar" }, /* @__PURE__ */ import_react132.default.createElement("div", { className: "title" }, /* @__PURE__ */ import_react132.default.createElement("h3", null, formStep === 0 ? titleOption?.initialTitle ? titleOption.initialTitle : mode === "payment" /* payment */ ? "New Purchase" : "New Transfer" : titleOption?.confirmTitle ? titleOption.confirmTitle : mode === "payment" /* payment */ ? "Confirm Purchase" : "Transfer Details")), /* @__PURE__ */ import_react132.default.createElement("div", { className: "control-buttons" }, pendingTxs > 0 ? /* @__PURE__ */ import_react132.default.createElement(TxButton_default, { theme }) : null, /* @__PURE__ */ import_react132.default.createElement(
+    warningModalOpen && /* @__PURE__ */ import_react133.default.createElement(
+      WarningModal_default,
+      {
+        message: warningModalOpen.message,
+        onAcknowledge: () => {
+          setWarningModalOpen(null);
+          setFormStep(1);
+        },
+        onCancel: () => {
+          setWarningModalOpen(null);
+          setFormStep(0);
+        }
+      }
+    ),
+    mode === "payment" /* payment */ && !transactionOption && /* @__PURE__ */ import_react133.default.createElement("h2", { className: "invalid-option-banner" }, "We're unable to process your payment. Please ensure the necessary transaction details are provided. Contact support if the issue persists."),
+    /* @__PURE__ */ import_react133.default.createElement("div", { className: "transfer-card" }, /* @__PURE__ */ import_react133.default.createElement("div", { className: "kima-card-header" }, /* @__PURE__ */ import_react133.default.createElement("div", { className: "topbar" }, /* @__PURE__ */ import_react133.default.createElement("div", { className: "title" }, /* @__PURE__ */ import_react133.default.createElement("h3", null, formStep === 0 ? titleOption?.initialTitle ? titleOption.initialTitle : mode === "payment" /* payment */ ? "New Purchase" : "New Transfer" : titleOption?.confirmTitle ? titleOption.confirmTitle : mode === "payment" /* payment */ ? "Confirm Purchase" : "Transfer Details")), /* @__PURE__ */ import_react133.default.createElement("div", { className: "control-buttons" }, pendingTxs > 0 ? /* @__PURE__ */ import_react133.default.createElement(TxButton_default, { theme }) : null, /* @__PURE__ */ import_react133.default.createElement(
       ExternalLink_default,
       {
         to: helpURL ? helpURL : "https://docs.kima.network/kima-network/try-kima-with-the-demo-app"
       },
-      /* @__PURE__ */ import_react132.default.createElement("div", { className: "menu-button" }, "I need help")
-    ), formStep === 0 && mode !== "payment" /* payment */ && /* @__PURE__ */ import_react132.default.createElement(
+      /* @__PURE__ */ import_react133.default.createElement("div", { className: "menu-button" }, "I need help")
+    ), formStep === 0 && mode !== "payment" /* payment */ && /* @__PURE__ */ import_react133.default.createElement(
       "button",
       {
         className: "reset-button",
@@ -6257,7 +6364,7 @@ var TransferWidget = ({
         disabled: isApproving || isSubmitting || isSigning
       },
       "Reset"
-    ))), mode === "payment" /* payment */ && paymentTitleOption?.title && /* @__PURE__ */ import_react132.default.createElement("h4", { className: "subtitle" }, paymentTitleOption.title)), /* @__PURE__ */ import_react132.default.createElement("div", { className: "kima-card-content", ref: mainRef }, formStep === 0 ? /* @__PURE__ */ import_react132.default.createElement(
+    ))), mode === "payment" /* payment */ && paymentTitleOption?.title && /* @__PURE__ */ import_react133.default.createElement("h4", { className: "subtitle" }, paymentTitleOption.title)), /* @__PURE__ */ import_react133.default.createElement("div", { className: "kima-card-content", ref: mainRef }, formStep === 0 ? /* @__PURE__ */ import_react133.default.createElement(
       SingleForm_default,
       {
         ...{
@@ -6275,7 +6382,7 @@ var TransferWidget = ({
           isCancellingApprove
         }
       }
-    ) : /* @__PURE__ */ import_react132.default.createElement(
+    ) : /* @__PURE__ */ import_react133.default.createElement(
       ConfirmDetails_default,
       {
         ...{
@@ -6294,12 +6401,12 @@ var TransferWidget = ({
           isApproved
         }
       }
-    )), /* @__PURE__ */ import_react132.default.createElement(
+    )), /* @__PURE__ */ import_react133.default.createElement(
       "div",
       {
         className: `kima-card-footer ${mode === "bridge" /* bridge */ && formStep !== 0 && "confirm"}`
       },
-      /* @__PURE__ */ import_react132.default.createElement("div", { className: `button-group` }, formStep !== 0 && /* @__PURE__ */ import_react132.default.createElement(
+      /* @__PURE__ */ import_react133.default.createElement("div", { className: `button-group` }, formStep !== 0 && /* @__PURE__ */ import_react133.default.createElement(
         SecondaryButton_default,
         {
           clickHandler: onBack,
@@ -6307,7 +6414,7 @@ var TransferWidget = ({
           disabled: isApproving || isSubmitting || isSigning
         },
         formStep > 0 ? "Back" : "Cancel"
-      ), allowance > 0 && formStep !== 0 ? /* @__PURE__ */ import_react132.default.createElement(
+      ), allowance > 0 && formStep !== 0 ? /* @__PURE__ */ import_react133.default.createElement(
         SecondaryButton_default,
         {
           clickHandler: onCancelApprove,
@@ -6316,7 +6423,7 @@ var TransferWidget = ({
           disabled: isCancellingApprove || isApproving || isSubmitting || isSigning
         },
         isCancellingApprove ? "Cancelling Approval" : "Cancel Approve"
-      ) : null, /* @__PURE__ */ import_react132.default.createElement(
+      ) : null, /* @__PURE__ */ import_react133.default.createElement(
         PrimaryButton_default,
         {
           clickHandler: onNext,
@@ -6325,7 +6432,7 @@ var TransferWidget = ({
         },
         getButtonLabel()
       ))
-    ), /* @__PURE__ */ import_react132.default.createElement(SolanaWalletConnectModal_default, null), /* @__PURE__ */ import_react132.default.createElement(TronWalletConnectModal_default, null), /* @__PURE__ */ import_react132.default.createElement(
+    ), /* @__PURE__ */ import_react133.default.createElement(SolanaWalletConnectModal_default, null), /* @__PURE__ */ import_react133.default.createElement(TronWalletConnectModal_default, null), /* @__PURE__ */ import_react133.default.createElement(
       import_react_hot_toast5.Toaster,
       {
         position: "top-right",
@@ -6350,12 +6457,12 @@ var TransferWidget = ({
           }
         }
       }
-    ), /* @__PURE__ */ import_react132.default.createElement("div", { className: "floating-footer" }, /* @__PURE__ */ import_react132.default.createElement("div", { className: `items ${theme.colorMode}` }, /* @__PURE__ */ import_react132.default.createElement("span", null, "Powered by"), /* @__PURE__ */ import_react132.default.createElement(FooterLogo_default, { width: 50, fill: "black" }), /* @__PURE__ */ import_react132.default.createElement("strong", null, "Network"))))
+    ), /* @__PURE__ */ import_react133.default.createElement("div", { className: "floating-footer" }, /* @__PURE__ */ import_react133.default.createElement("div", { className: `items ${theme.colorMode}` }, /* @__PURE__ */ import_react133.default.createElement("span", null, "Powered by"), /* @__PURE__ */ import_react133.default.createElement(FooterLogo_default, { width: 50, fill: "black" }), /* @__PURE__ */ import_react133.default.createElement("strong", null, "Network"))))
   );
 };
 
 // src/components/KimaWidgetWrapper.tsx
-var import_react134 = require("@reown/appkit/react");
+var import_react135 = require("@reown/appkit/react");
 var KimaWidgetWrapper = ({
   mode,
   txId,
@@ -6372,12 +6479,12 @@ var KimaWidgetWrapper = ({
   const { kimaBackendUrl } = useKimaContext();
   const submitted = (0, import_react_redux52.useSelector)(selectSubmitted);
   const dispatch = (0, import_react_redux52.useDispatch)();
-  const { setThemeMode, setThemeVariables } = (0, import_react134.useAppKitTheme)();
+  const { setThemeMode, setThemeVariables } = (0, import_react135.useAppKitTheme)();
   const { data: chainData } = useChainData(kimaBackendUrl);
   const { data: envOptions } = useGetEnvOptions({ kimaBackendUrl });
   const networkOption = envOptions?.env;
   const kimaExplorer = envOptions?.kimaExplorer || "https://explorer.sardis.kima.network";
-  (0, import_react133.useEffect)(() => {
+  (0, import_react134.useEffect)(() => {
     dispatch(setTheme(theme));
     setThemeMode(theme.colorMode === "light" /* light */ ? "light" : "dark");
     setThemeVariables({
@@ -6420,11 +6527,11 @@ var KimaWidgetWrapper = ({
       dispatch(setSubmitted(false));
     }
   }, [theme, transactionOption, mode, networkOption, chainData]);
-  (0, import_react133.useEffect)(() => {
+  (0, import_react134.useEffect)(() => {
     if (!chainData?.length) return;
     indexPluginsByChain(chainData);
   }, [chainData]);
-  return submitted ? /* @__PURE__ */ import_react133.default.createElement(TransactionWidget, { theme }) : /* @__PURE__ */ import_react133.default.createElement(
+  return submitted ? /* @__PURE__ */ import_react134.default.createElement(TransactionWidget, { theme }) : /* @__PURE__ */ import_react134.default.createElement(
     TransferWidget,
     {
       theme,
@@ -6457,13 +6564,13 @@ var KimaTransactionWidget = ({
     kimaBackendUrl
   });
   const { data: chainData, isLoading: isLoadingChainData } = useChainData(kimaBackendUrl);
-  (0, import_react135.useEffect)(() => {
+  (0, import_react136.useEffect)(() => {
     if (!isLoadingChainData && chainData) {
       dispatch(setSourceChain(chainData[0]));
       dispatch(setTargetChain(chainData[1]));
     }
   }, [chainData]);
-  return isLoadingEnvs || isLoadingChainData ? /* @__PURE__ */ import_react135.default.createElement(ring_default, null) : /* @__PURE__ */ import_react135.default.createElement(
+  return isLoadingEnvs || isLoadingChainData ? /* @__PURE__ */ import_react136.default.createElement(ring_default, null) : /* @__PURE__ */ import_react136.default.createElement(
     KimaWidgetWrapper_default,
     {
       ...{