@kimafinance/kima-transaction-widget 1.3.6 → 1.3.8

package/dist/index.js

@@ -2561,11 +2561,12 @@ function useIsWalletReady() {
     checkChainId();
   }, [externalProvider, sourceChain, switchNetwork, walletChainId, isConnected]);
   useEffect(() => {
-    if (isConnected) {
+    if (isConnected && sourceChain.compatibility === "EVM" /* EVM */) {
       console.debug(
         "useIsWalletReady:EVM: Dispatching source address:",
         walletAddress
       );
+      console.log("dispatching evm address: ", walletAddress);
       dispatch(setSourceAddress(walletAddress ?? ""));
     }
   }, [walletAddress, isConnected, dispatch]);
@@ -2644,6 +2645,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 {
@@ -2798,6 +2805,33 @@ 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 = createWalletClient({
+        account: walletAddress,
+        chain: sourceChain,
+        transport: custom(window.ethereum)
+        // WARNING: NEED TO MAKE SURE THIS USING THE ETHEREUM OBJECT IS STABLE ENOUGH
+      });
+      return await walletClient.signMessage({
+        account: walletAddress,
+        message: `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");
@@ -2863,6 +2897,7 @@ function useEvmAllowance() {
     isApproved: allowanceData?.allowance ? allowanceData.allowance >= allowanceNumber : false,
     approve: approveErc20TokenTransfer,
     isLoading,
+    signMessage,
     refetch
   };
 }
@@ -2956,6 +2991,7 @@ var WalletProvider2 = ({
   return /* @__PURE__ */ React73.createElement(ConnectionProvider, { endpoint }, /* @__PURE__ */ React73.createElement(
     SolanaWalletProvider,
     {
+      autoConnect: false,
       wallets: [
         new PhantomWalletAdapter(),
         new SolflareWalletAdapter(),
@@ -3069,7 +3105,8 @@ function useSolanaAllowance() {
   const { connection: internalConnection } = useConnection2();
   const {
     publicKey: internalPublicKey,
-    signTransaction: internalSignTransaction
+    signTransaction: internalSignTransaction,
+    signMessage: internalSignMessage
   } = useWallet2();
   const selectedCoin = useSelector6(selectSourceCurrency);
   const tokenOptions = useSelector6(selectTokenOptions);
@@ -3078,6 +3115,7 @@ function useSolanaAllowance() {
   const isSolanaProvider = sourceChain.shortName === "SOL" && externalProvider?.type === "solana" && externalProvider.provider && externalProvider.signer instanceof PublicKey5;
   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,
@@ -3106,6 +3144,23 @@ function useSolanaAllowance() {
     staleTime: 1e3 * 60
     // 1 min
   });
+  const signSolanaMessage = async (data) => {
+    if (!signMessage) {
+      console.warn("useSolanaAllowance: Missing Solana provider setup");
+      return;
+    }
+    try {
+      const message = `Target Address: ${data.targetAddress}
+Target Chain: ${data.targetChain}
+Target Symbol: ${data.targetSymbol}`;
+      const encodedMessage = new TextEncoder().encode(message);
+      const signature = await signMessage(encodedMessage);
+      return `0x${Buffer.from(signature).toString("hex")}`;
+    } catch (error2) {
+      console.error("Error signing message:", error2);
+      throw error2;
+    }
+  };
   const approveSPLTokenTransfer = async (isCancel = false) => {
     if (!allowanceAmount) {
       console.warn("useSolanaAllowance: Missing allowance amount");
@@ -3163,7 +3218,8 @@ function useSolanaAllowance() {
   return {
     ...allowanceData,
     isApproved: allowanceData?.allowance ? allowanceData.allowance >= allowanceNumber : false,
-    approve: approveSPLTokenTransfer
+    approve: approveSPLTokenTransfer,
+    signMessage: signSolanaMessage
   };
 }
 
@@ -3293,7 +3349,8 @@ var WalletProvider3 = ({ children, networkOption }) => {
     {
       adapters,
       onError,
-      onChainChanged
+      onChainChanged,
+      autoConnect: false
     },
     children
   );
@@ -3643,7 +3700,8 @@ function useTronAllowance() {
   const { pools } = useGetPools_default(backendUrl, networkOption);
   const {
     address: internalUserAddress,
-    signTransaction: internalSignTronTransaction
+    signTransaction: internalSignTronTransaction,
+    signMessage: internalSignMessage
   } = useWallet5();
   const [approvalsCount, setApprovalsCount] = useState4(0);
   const isTronProvider2 = sourceChain.shortName === "TRX" && externalProvider?.type === "tron" && externalProvider.provider.tronWeb instanceof TronWeb3 && typeof externalProvider.signer === "string";
@@ -3655,6 +3713,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,
@@ -3675,6 +3734,22 @@ function useTronAllowance() {
     staleTime: 1e3 * 60
     // 1 min
   });
+  const signTronMessage = async (data) => {
+    if (!tronWeb) {
+      console.warn("TronWeb not initialized");
+      return;
+    }
+    try {
+      const message = `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");
@@ -3713,7 +3788,8 @@ function useTronAllowance() {
   return {
     ...allowanceData,
     isApproved: allowanceData?.allowance ? allowanceData.allowance >= allowanceNumber : false,
-    approve: approveTrc20TokenTransfer
+    approve: approveTrc20TokenTransfer,
+    signMessage: signTronMessage
   };
 }
 
@@ -3880,10 +3956,10 @@ var KimaProvider = ({
 var KimaProvider_default = KimaProvider;
 
 // src/components/KimaTransactionWidget.tsx
-import React112, { useEffect as useEffect20 } from "react";
+import React113, { useEffect as useEffect20 } from "react";
 
 // src/components/KimaWidgetWrapper.tsx
-import React111, { useEffect as useEffect19 } from "react";
+import React112, { useEffect as useEffect19 } from "react";
 import { useDispatch as useDispatch26, useSelector as useSelector38 } from "react-redux";
 
 // src/components/TransactionWidget.tsx
@@ -4640,12 +4716,13 @@ var AddressInput = ({
   const targetChain = useSelector21(selectTargetChain);
   const { walletAddress: sourceAddress, isReady } = useIsWalletReady4();
   const targetAddress = useSelector21(selectTargetAddress);
-  const isEvm = (chain) => {
-    return chain !== "SOL" && chain !== "TRX" && chain !== "BTC";
+  const isCompatible = (sourceChain2, targetChain2) => {
+    return sourceChain2.compatibility === targetChain2.compatibility;
   };
   useEffect12(() => {
     if (mode === "payment" /* payment */) return;
-    if (isEvm(sourceChain) && isEvm(targetChain)) {
+    if (isCompatible(sourceChain, targetChain)) {
+      if (targetAddress !== "") return;
       dispatch(setTargetAddress(isReady && sourceAddress ? sourceAddress : ""));
       return;
     }
@@ -5198,7 +5275,7 @@ var TransactionWidget = ({ theme }) => {
 };
 
 // src/components/TransferWidget.tsx
-import React110, { useEffect as useEffect18, useState as useState14, useRef as useRef7 } from "react";
+import React111, { useEffect as useEffect18, useState as useState14, useRef as useRef7 } from "react";
 import { useDispatch as useDispatch25, useSelector as useSelector37 } from "react-redux";
 
 // src/components/reusable/SingleForm.tsx
@@ -5369,18 +5446,8 @@ var NetworkSelector_default = React102.memo(NetworkSelector);
 
 // src/components/reusable/SingleForm.tsx
 var SingleForm = ({
-  allowance,
   balance,
-  decimals,
-  formStep,
-  onBack,
-  onCancelApprove,
-  onNext,
-  getButtonLabel,
-  isApproving,
-  isSigning,
-  isSubmitting,
-  isCancellingApprove
+  decimals
 }) => {
   const dispatch = useDispatch17();
   const mode = useSelector30(selectMode);
@@ -5389,7 +5456,6 @@ var SingleForm = ({
   const { totalFeeUsd } = useSelector30(selectServiceFee);
   const compliantOption = useSelector30(selectCompliantOption);
   const targetCompliant = useSelector30(selectTargetCompliant);
-  const transactionOption = useSelector30(selectTransactionOption);
   const sourceNetwork = useSelector30(selectSourceChain);
   const targetNetwork = useSelector30(selectTargetChain);
   const { isReady } = useIsWalletReady4();
@@ -5423,23 +5489,16 @@ var SingleForm = ({
   const maxValue = useMemo15(() => {
     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]);
   useEffect15(() => {
     if (!errorMessage) return;
     toast4.error(errorMessage);
   }, [errorMessage]);
   useEffect15(() => {
-    if (amountValue && amount != "") return;
+    if (amountValue && amount !== "") return;
     setAmountValue(amount);
   }, [amount]);
-  useEffect15(() => {
-    if (!feeDeduct && maxValue < +amountValue) {
-      setAmountValue(maxValue.toString());
-      dispatch(setAmount(maxValue.toString()));
-    }
-  }, [feeDeduct]);
   return /* @__PURE__ */ React103.createElement("div", { className: "single-form" }, /* @__PURE__ */ React103.createElement("div", { className: "form-item" }, /* @__PURE__ */ React103.createElement("span", { className: "label" }, "Source Network:"), /* @__PURE__ */ React103.createElement("div", { className: "items" }, /* @__PURE__ */ React103.createElement(NetworkSelector_default, { type: "source" }), /* @__PURE__ */ React103.createElement(CoinDropdown_default, null))), /* @__PURE__ */ React103.createElement(
     "div",
     {
@@ -5460,27 +5519,21 @@ var SingleForm = ({
       theme: theme.colorMode,
       placeholder: "Target address"
     }
-  )) : null, mode === "bridge" /* bridge */ ? /* @__PURE__ */ React103.createElement("div", { className: `form-item ${theme.colorMode}` }, /* @__PURE__ */ React103.createElement("span", { className: "label" }, "Amount:"), /* @__PURE__ */ React103.createElement("div", { className: `amount-label-container items ${theme.colorMode}` }, /* @__PURE__ */ React103.createElement(
+  )) : null, /* @__PURE__ */ React103.createElement("div", { className: `form-item ${theme.colorMode}` }, /* @__PURE__ */ React103.createElement("span", { className: "label" }, "Amount:"), /* @__PURE__ */ React103.createElement("div", { className: `amount-label-container items ${theme.colorMode}` }, /* @__PURE__ */ React103.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__ */ React103.createElement(
+  ), /* @__PURE__ */ React103.createElement("div", { className: "max-disclaimer" }, /* @__PURE__ */ React103.createElement(
     "span",
     {
       className: "max-button",
@@ -5490,22 +5543,7 @@ var SingleForm = ({
       }
     },
     "Max"
-  ))) : /* @__PURE__ */ React103.createElement("div", { className: `form-item ${theme.colorMode}` }, /* @__PURE__ */ React103.createElement("span", { className: "label" }, "Amount:"), /* @__PURE__ */ React103.createElement("div", { className: `amount-label-container items ${theme.colorMode}` }, /* @__PURE__ */ React103.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__ */ React103.createElement("div", { className: `coin-wrapper ${theme.colorMode}` }, /* @__PURE__ */ React103.createElement("div", { className: "icon-wrapper" }, /* @__PURE__ */ React103.createElement(TargetIcon, null)), targetCurrency))));
+  ), totalFeeUsd !== -1 && /* @__PURE__ */ React103.createElement("p", null, "Est fees: $ ", totalFeeUsd, " USD")))));
 };
 var SingleForm_default = SingleForm;
 
@@ -5564,6 +5602,7 @@ import { useWallet as useWallet7 } from "@solana/wallet-adapter-react";
 import { WalletReadyState } from "@solana/wallet-adapter-base";
 var SolanaWalletSelect = () => {
   const theme = useSelector31(selectTheme);
+  const sourceChain = useSelector31(selectSourceChain);
   const dispatch = useDispatch18();
   const sliderRef = useRef5();
   const { wallet, wallets, select, connect, connected } = useWallet7();
@@ -5607,17 +5646,30 @@ var SolanaWalletSelect = () => {
   }, []);
   const handleWalletClick = useCallback2(
     (walletName) => {
+      console.log(
+        "SolanaWalletSelect: handleWalletClick: walletName: ",
+        walletName
+      );
       select(walletName);
     },
     [select]
   );
   useEffect16(() => {
-    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__ */ React104.createElement("div", { className: `wallet-select` }, /* @__PURE__ */ React104.createElement("div", { className: "slide-area hide-scrollbar", ref: sliderRef }, /* @__PURE__ */ React104.createElement("div", { className: "wallet-container" }, detected.map((wallet2, index) => /* @__PURE__ */ React104.createElement(
     "div",
     {
@@ -5659,7 +5711,7 @@ var AccountDetailsModal = () => {
     solanaWalletDisconnect();
     dispatch(setAccountDetailsModal(false));
   };
-  if (sourceChain !== "SOL") return;
+  if (sourceChain.shortName !== "SOL") return;
   return /* @__PURE__ */ React105.createElement(
     "div",
     {
@@ -5731,7 +5783,7 @@ var AccountDetailsModal2 = () => {
   const { balance: tronBalance } = useGetTrxBalance_default();
   const selectedNetwork = useSelector34(selectSourceChain);
   const networkDetails = useMemo18(
-    () => networkOptions.find(({ id }) => id === selectedNetwork),
+    () => networkOptions.find(({ id }) => id === selectedNetwork.shortName),
     [selectedNetwork]
   );
   const explorerUrl = useMemo18(() => {
@@ -5741,7 +5793,7 @@ var AccountDetailsModal2 = () => {
     tronWalletDisconnect();
     dispatch(setAccountDetailsModal(false));
   };
-  if (sourcheChain !== "TRX") return;
+  if (sourcheChain.shortName !== "TRX") return;
   return /* @__PURE__ */ React107.createElement(
     "div",
     {
@@ -5760,7 +5812,7 @@ var AccountDetailsModal2 = () => {
           fill: theme.colorMode === "light" ? "black" : "white"
         }
       )
-    )))), /* @__PURE__ */ React107.createElement("div", { className: "modal-content" }, /* @__PURE__ */ React107.createElement("div", { className: "summary" }, networkDetails && /* @__PURE__ */ React107.createElement(networkDetails.icon, { width: 60, height: 60 }), /* @__PURE__ */ React107.createElement("div", { className: "address" }, /* @__PURE__ */ React107.createElement("h2", null, getShortenedAddress(walletAddress || "")), /* @__PURE__ */ React107.createElement(CopyButton_default, { text: walletAddress })), /* @__PURE__ */ React107.createElement("h3", null, tronBalance, " ", selectedNetwork)), /* @__PURE__ */ React107.createElement(SecondaryButton_default, { className: "block-explorer" }, /* @__PURE__ */ React107.createElement(ExternalLink_default, { className: "link", to: explorerUrl }, /* @__PURE__ */ React107.createElement(Explorer_default, { fill: "#778DA3" }), /* @__PURE__ */ React107.createElement("p", null, "Block explorer"), /* @__PURE__ */ React107.createElement(ExternalUrl_default, { fill: "#778DA3" }))), /* @__PURE__ */ React107.createElement(PrimaryButton_default, { clickHandler: handleDisconnect }, "Disconnect")))
+    )))), /* @__PURE__ */ React107.createElement("div", { className: "modal-content" }, /* @__PURE__ */ React107.createElement("div", { className: "summary" }, networkDetails && /* @__PURE__ */ React107.createElement(networkDetails.icon, { width: 60, height: 60 }), /* @__PURE__ */ React107.createElement("div", { className: "address" }, /* @__PURE__ */ React107.createElement("h2", null, getShortenedAddress(walletAddress || "")), /* @__PURE__ */ React107.createElement(CopyButton_default, { text: walletAddress })), /* @__PURE__ */ React107.createElement("h3", null, tronBalance, " ", selectedNetwork.shortName)), /* @__PURE__ */ React107.createElement(SecondaryButton_default, { className: "block-explorer" }, /* @__PURE__ */ React107.createElement(ExternalLink_default, { className: "link", to: explorerUrl }, /* @__PURE__ */ React107.createElement(Explorer_default, { fill: "#778DA3" }), /* @__PURE__ */ React107.createElement("p", null, "Block explorer"), /* @__PURE__ */ React107.createElement(ExternalUrl_default, { fill: "#778DA3" }))), /* @__PURE__ */ React107.createElement(PrimaryButton_default, { clickHandler: handleDisconnect }, "Disconnect")))
   );
 };
 var AccountDetailsModal_default2 = AccountDetailsModal2;
@@ -5891,7 +5943,8 @@ var useValidateTransaction = ({
   sourceCompliant,
   targetCompliant,
   mode,
-  pools
+  pools,
+  formStep
 }) => {
   const maxValue = useMemo20(() => {
     if (!balance) return 0;
@@ -5939,24 +5992,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) {
@@ -6001,7 +6052,7 @@ var useSubmitTransaction = ({
 }) => {
   const dispatch = useDispatch24();
   const [isSubmitting, setSubmitting] = useState13(false);
-  const submitTransaction = async () => {
+  const submitTransaction = async (signature) => {
     try {
       setSubmitting(true);
       const params = JSON.stringify({
@@ -6018,7 +6069,8 @@ var useSubmitTransaction = ({
         htlcCreationVout: 0,
         htlcExpirationTimestamp: "0",
         htlcVersion: "",
-        senderPubKey: ""
+        senderPubKey: "",
+        options: signature
       });
       const transactionResult = await fetchWrapper.post(
         `${backendUrl}/submit`,
@@ -6110,6 +6162,31 @@ function useDisconnectWallet4() {
   return mainConnection ? { disconnectWallet: mainConnection.disconnectWallet } : defaultDisconnect;
 }
 
+// src/components/reusable/WarningModal.tsx
+import React110 from "react";
+var WarningModal = ({
+  message,
+  onAcknowledge,
+  onCancel
+}) => {
+  return /* @__PURE__ */ React110.createElement("div", { className: "warning-modal-overlay" }, /* @__PURE__ */ React110.createElement("div", { className: "warning-modal" }, /* @__PURE__ */ React110.createElement("h3", null, "Warning"), /* @__PURE__ */ React110.createElement("p", null, message), /* @__PURE__ */ React110.createElement("div", { className: "warning-modal-buttons" }, /* @__PURE__ */ React110.createElement(
+    SecondaryButton_default,
+    {
+      className: "warning-modal-cancel",
+      clickHandler: onCancel
+    },
+    "Cancel"
+  ), /* @__PURE__ */ React110.createElement(
+    PrimaryButton_default,
+    {
+      className: "warning-modal-acknowledge",
+      clickHandler: onAcknowledge
+    },
+    "Acknowledge"
+  ))));
+};
+var WarningModal_default = WarningModal;
+
 // src/components/TransferWidget.tsx
 var TransferWidget = ({
   theme,
@@ -6120,6 +6197,7 @@ var TransferWidget = ({
   const dispatch = useDispatch25();
   const mainRef = useRef7(null);
   const [formStep, setFormStep] = useState14(0);
+  const [warningModalOpen, setWarningModalOpen] = useState14(null);
   const dAppOption = useSelector37(selectDappOption);
   const mode = useSelector37(selectMode);
   const transactionOption = useSelector37(selectTransactionOption);
@@ -6150,7 +6228,7 @@ var TransferWidget = ({
   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
   });
@@ -6181,7 +6259,8 @@ var TransferWidget = ({
     compliantOption,
     mode,
     pools,
-    feeDeduct
+    feeDeduct,
+    formStep
   });
   const { submitTransaction, isSubmitting } = useSubmitTransaction_default({
     amount: BigInt(submitAmount ?? "0"),
@@ -6198,7 +6277,7 @@ var TransferWidget = ({
   const handleSubmit = async () => {
     const { error, message: validationMessage } = validate(true);
     if (error === "ValidationError" /* Error */) {
-      return toast5.error(validationMessage, { icon: /* @__PURE__ */ React110.createElement(Error_default, null) });
+      return toast5.error(validationMessage, { icon: /* @__PURE__ */ React111.createElement(Error_default, null) });
     }
     if (error === "ApprovalNeeded" /* ApprovalNeeded */) {
       return approve();
@@ -6207,18 +6286,30 @@ var TransferWidget = ({
       keplrHandler && keplrHandler(sourceAddress);
       return;
     }
-    const { success, message: submitMessage } = await submitTransaction();
-    if (!success) return toast5.error(submitMessage, { icon: /* @__PURE__ */ React110.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 toast5.error(submitMessage, { icon: /* @__PURE__ */ React111.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();
     }
-    toast5.error(message, { icon: /* @__PURE__ */ React110.createElement(Error_default, null) });
+    toast5.error(validationMessage, { icon: /* @__PURE__ */ React111.createElement(Error_default, null) });
     mainRef.current?.click();
   };
   const onBack = () => {
@@ -6278,7 +6369,7 @@ var TransferWidget = ({
   useEffect18(() => {
     dispatch(setTheme(theme));
   }, [theme]);
-  return /* @__PURE__ */ React110.createElement(
+  return /* @__PURE__ */ React111.createElement(
     "div",
     {
       className: `kima-card ${theme.colorMode}`,
@@ -6286,14 +6377,28 @@ var TransferWidget = ({
         background: theme.colorMode === "light" /* light */ ? theme.backgroundColorLight : theme.backgroundColorDark
       }
     },
-    mode === "payment" /* payment */ && !transactionOption && /* @__PURE__ */ React110.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__ */ React110.createElement("div", { className: "transfer-card" }, /* @__PURE__ */ React110.createElement("div", { className: "kima-card-header" }, /* @__PURE__ */ React110.createElement("div", { className: "topbar" }, /* @__PURE__ */ React110.createElement("div", { className: "title" }, /* @__PURE__ */ React110.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__ */ React110.createElement("div", { className: "control-buttons" }, pendingTxs > 0 ? /* @__PURE__ */ React110.createElement(TxButton_default, { theme }) : null, /* @__PURE__ */ React110.createElement(
+    warningModalOpen && /* @__PURE__ */ React111.createElement(
+      WarningModal_default,
+      {
+        message: warningModalOpen.message,
+        onAcknowledge: () => {
+          setWarningModalOpen(null);
+          setFormStep(1);
+        },
+        onCancel: () => {
+          setWarningModalOpen(null);
+          setFormStep(0);
+        }
+      }
+    ),
+    mode === "payment" /* payment */ && !transactionOption && /* @__PURE__ */ React111.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__ */ React111.createElement("div", { className: "transfer-card" }, /* @__PURE__ */ React111.createElement("div", { className: "kima-card-header" }, /* @__PURE__ */ React111.createElement("div", { className: "topbar" }, /* @__PURE__ */ React111.createElement("div", { className: "title" }, /* @__PURE__ */ React111.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__ */ React111.createElement("div", { className: "control-buttons" }, pendingTxs > 0 ? /* @__PURE__ */ React111.createElement(TxButton_default, { theme }) : null, /* @__PURE__ */ React111.createElement(
       ExternalLink_default,
       {
         to: helpURL ? helpURL : "https://docs.kima.network/kima-network/try-kima-with-the-demo-app"
       },
-      /* @__PURE__ */ React110.createElement("div", { className: "menu-button" }, "I need help")
-    ), formStep === 0 && mode !== "payment" /* payment */ && /* @__PURE__ */ React110.createElement(
+      /* @__PURE__ */ React111.createElement("div", { className: "menu-button" }, "I need help")
+    ), formStep === 0 && mode !== "payment" /* payment */ && /* @__PURE__ */ React111.createElement(
       "button",
       {
         className: "reset-button",
@@ -6301,7 +6406,7 @@ var TransferWidget = ({
         disabled: isApproving || isSubmitting || isSigning
       },
       "Reset"
-    ))), mode === "payment" /* payment */ && paymentTitleOption?.title && /* @__PURE__ */ React110.createElement("h4", { className: "subtitle" }, paymentTitleOption.title)), /* @__PURE__ */ React110.createElement("div", { className: "kima-card-content", ref: mainRef }, formStep === 0 ? /* @__PURE__ */ React110.createElement(
+    ))), mode === "payment" /* payment */ && paymentTitleOption?.title && /* @__PURE__ */ React111.createElement("h4", { className: "subtitle" }, paymentTitleOption.title)), /* @__PURE__ */ React111.createElement("div", { className: "kima-card-content", ref: mainRef }, formStep === 0 ? /* @__PURE__ */ React111.createElement(
       SingleForm_default,
       {
         ...{
@@ -6319,7 +6424,7 @@ var TransferWidget = ({
           isCancellingApprove
         }
       }
-    ) : /* @__PURE__ */ React110.createElement(
+    ) : /* @__PURE__ */ React111.createElement(
       ConfirmDetails_default,
       {
         ...{
@@ -6338,12 +6443,12 @@ var TransferWidget = ({
           isApproved
         }
       }
-    )), /* @__PURE__ */ React110.createElement(
+    )), /* @__PURE__ */ React111.createElement(
       "div",
       {
         className: `kima-card-footer ${mode === "bridge" /* bridge */ && formStep !== 0 && "confirm"}`
       },
-      /* @__PURE__ */ React110.createElement("div", { className: `button-group` }, formStep !== 0 && /* @__PURE__ */ React110.createElement(
+      /* @__PURE__ */ React111.createElement("div", { className: `button-group` }, formStep !== 0 && /* @__PURE__ */ React111.createElement(
         SecondaryButton_default,
         {
           clickHandler: onBack,
@@ -6351,7 +6456,7 @@ var TransferWidget = ({
           disabled: isApproving || isSubmitting || isSigning
         },
         formStep > 0 ? "Back" : "Cancel"
-      ), allowance > 0 && formStep !== 0 ? /* @__PURE__ */ React110.createElement(
+      ), allowance > 0 && formStep !== 0 ? /* @__PURE__ */ React111.createElement(
         SecondaryButton_default,
         {
           clickHandler: onCancelApprove,
@@ -6360,7 +6465,7 @@ var TransferWidget = ({
           disabled: isCancellingApprove || isApproving || isSubmitting || isSigning
         },
         isCancellingApprove ? "Cancelling Approval" : "Cancel Approve"
-      ) : null, /* @__PURE__ */ React110.createElement(
+      ) : null, /* @__PURE__ */ React111.createElement(
         PrimaryButton_default,
         {
           clickHandler: onNext,
@@ -6369,7 +6474,7 @@ var TransferWidget = ({
         },
         getButtonLabel()
       ))
-    ), /* @__PURE__ */ React110.createElement(SolanaWalletConnectModal_default, null), /* @__PURE__ */ React110.createElement(TronWalletConnectModal_default, null), /* @__PURE__ */ React110.createElement(
+    ), /* @__PURE__ */ React111.createElement(SolanaWalletConnectModal_default, null), /* @__PURE__ */ React111.createElement(TronWalletConnectModal_default, null), /* @__PURE__ */ React111.createElement(
       Toaster2,
       {
         position: "top-right",
@@ -6394,7 +6499,7 @@ var TransferWidget = ({
           }
         }
       }
-    ), /* @__PURE__ */ React110.createElement("div", { className: "floating-footer" }, /* @__PURE__ */ React110.createElement("div", { className: `items ${theme.colorMode}` }, /* @__PURE__ */ React110.createElement("span", null, "Powered by"), /* @__PURE__ */ React110.createElement(FooterLogo_default, { width: 50, fill: "black" }), /* @__PURE__ */ React110.createElement("strong", null, "Network"))))
+    ), /* @__PURE__ */ React111.createElement("div", { className: "floating-footer" }, /* @__PURE__ */ React111.createElement("div", { className: `items ${theme.colorMode}` }, /* @__PURE__ */ React111.createElement("span", null, "Powered by"), /* @__PURE__ */ React111.createElement(FooterLogo_default, { width: 50, fill: "black" }), /* @__PURE__ */ React111.createElement("strong", null, "Network"))))
   );
 };
 
@@ -6468,7 +6573,7 @@ var KimaWidgetWrapper = ({
     if (!chainData?.length) return;
     indexPluginsByChain(chainData);
   }, [chainData]);
-  return submitted ? /* @__PURE__ */ React111.createElement(TransactionWidget, { theme }) : /* @__PURE__ */ React111.createElement(
+  return submitted ? /* @__PURE__ */ React112.createElement(TransactionWidget, { theme }) : /* @__PURE__ */ React112.createElement(
     TransferWidget,
     {
       theme,
@@ -6507,7 +6612,7 @@ var KimaTransactionWidget = ({
       dispatch(setTargetChain(chainData[1]));
     }
   }, [chainData]);
-  return isLoadingEnvs || isLoadingChainData ? /* @__PURE__ */ React112.createElement(ring_default, null) : /* @__PURE__ */ React112.createElement(
+  return isLoadingEnvs || isLoadingChainData ? /* @__PURE__ */ React113.createElement(ring_default, null) : /* @__PURE__ */ React113.createElement(
     KimaWidgetWrapper_default,
     {
       ...{