@kimafinance/kima-transaction-widget 1.3.4 → 1.3.6

package/dist/index.d.cts

@@ -148,7 +148,7 @@ interface KimaProviderProps {
     keplrHandler?: (e: any) => void;
     switchChainHandler?: (e: any) => void;
 }
-declare const KimaProvider: ({ walletConnectProjectId, children, externalProvider, kimaBackendUrl }: KimaProviderProps) => react.JSX.Element;
+declare const KimaProvider: ({ walletConnectProjectId, children, externalProvider, kimaBackendUrl, keplrHandler, successHandler, closeHandler, errorHandler, switchChainHandler }: KimaProviderProps) => react.JSX.Element;
 
 interface Props {
     theme: ThemeOptions;

package/dist/index.d.ts

@@ -148,7 +148,7 @@ interface KimaProviderProps {
     keplrHandler?: (e: any) => void;
     switchChainHandler?: (e: any) => void;
 }
-declare const KimaProvider: ({ walletConnectProjectId, children, externalProvider, kimaBackendUrl }: KimaProviderProps) => react.JSX.Element;
+declare const KimaProvider: ({ walletConnectProjectId, children, externalProvider, kimaBackendUrl, keplrHandler, successHandler, closeHandler, errorHandler, switchChainHandler }: KimaProviderProps) => react.JSX.Element;
 
 interface Props {
     theme: ThemeOptions;

package/dist/index.js

@@ -1027,7 +1027,7 @@ var USD = ({ width = 24, height = 24, ...rest }) => {
       /* @__PURE__ */ React34.createElement("g", null, /* @__PURE__ */ React34.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"
         }
       ))
     )
@@ -1462,7 +1462,7 @@ var initialState = {
   tokenOptions: {},
   pendingTxs: 0,
   pendingTxData: [],
-  kimaExplorerUrl: "https://explorer.kima.network",
+  kimaExplorerUrl: "https://explorer.sardis.kima.network",
   mode: "bridge" /* bridge */,
   sourceChain: {
     ...arbitrumSepolia2,
@@ -3075,10 +3075,10 @@ function useSolanaAllowance() {
   const tokenOptions = useSelector6(selectTokenOptions);
   const { pools } = useGetPools_default(backendUrl, networkOption);
   const [approvalsCount, setApprovalsCount] = useState3(0);
-  const isSolanaProvider = sourceChain === "SOL" && externalProvider?.type === "solana" && externalProvider.provider && externalProvider.signer instanceof PublicKey5;
-  const userPublicKey = isSolanaProvider ? externalProvider.signer : sourceChain === "SOL" ? internalPublicKey : void 0;
-  const signTransaction = isSolanaProvider && externalProvider.provider.signTransaction ? externalProvider.provider.signTransaction : sourceChain === "SOL" ? internalSignTransaction : void 0;
-  const connection = isSolanaProvider && externalProvider.provider.connection ? externalProvider.provider.connection : sourceChain === "SOL" ? internalConnection : void 0;
+  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 connection = isSolanaProvider && externalProvider.provider.connection ? externalProvider.provider.connection : sourceChain.shortName === "SOL" ? internalConnection : void 0;
   const {
     data: allowanceData,
     isLoading,
@@ -3100,7 +3100,7 @@ function useSolanaAllowance() {
       connection,
       pools
     }),
-    enabled: !!userPublicKey && !!selectedCoin && !!tokenOptions && pools.length > 0 && sourceChain === "SOL",
+    enabled: !!userPublicKey && !!selectedCoin && !!tokenOptions && pools.length > 0 && sourceChain.shortName === "SOL",
     refetchInterval: 1e3 * 60,
     // 1 min
     staleTime: 1e3 * 60
@@ -3646,7 +3646,7 @@ function useTronAllowance() {
     signTransaction: internalSignTronTransaction
   } = useWallet5();
   const [approvalsCount, setApprovalsCount] = useState4(0);
-  const isTronProvider2 = sourceChain === "TRX" && externalProvider?.type === "tron" && externalProvider.provider.tronWeb instanceof TronWeb3 && typeof externalProvider.signer === "string";
+  const isTronProvider2 = sourceChain.shortName === "TRX" && externalProvider?.type === "tron" && externalProvider.provider.tronWeb instanceof TronWeb3 && typeof externalProvider.signer === "string";
   const tronWeb = useMemo6(() => {
     if (isTronProvider2)
       return externalProvider.provider.tronWeb;
@@ -3671,7 +3671,7 @@ function useTronAllowance() {
     }),
     refetchInterval: 1e3 * 60,
     // 1 min
-    enabled: !!tokenOptions && !!selectedCoin && !!userAddress && !!tronWeb && pools.length > 0 && sourceChain === "TRX",
+    enabled: !!tokenOptions && !!selectedCoin && !!userAddress && !!tronWeb && pools.length > 0 && sourceChain.shortName === "TRX",
     staleTime: 1e3 * 60
     // 1 min
   });
@@ -3840,7 +3840,12 @@ var KimaProvider = ({
   walletConnectProjectId,
   children = /* @__PURE__ */ React77.createElement(React77.Fragment, null),
   externalProvider,
-  kimaBackendUrl = "http://localhost:3001"
+  kimaBackendUrl = "http://localhost:3001",
+  keplrHandler,
+  successHandler,
+  closeHandler,
+  errorHandler,
+  switchChainHandler
 }) => {
   let validExternalProvider;
   let sourceAddress;
@@ -3856,7 +3861,12 @@ var KimaProvider = ({
   const kimaContext = {
     externalProvider: validExternalProvider,
     sourceAddress,
-    kimaBackendUrl
+    kimaBackendUrl,
+    keplrHandler,
+    successHandler,
+    closeHandler,
+    errorHandler,
+    switchChainHandler
   };
   return /* @__PURE__ */ React77.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React77.createElement(Provider, { store }, /* @__PURE__ */ React77.createElement(KimaContext.Provider, { value: kimaContext }, /* @__PURE__ */ React77.createElement(
     InternalKimaProvider,
@@ -4609,7 +4619,7 @@ var ConfirmDetails = ({ isApproved }) => {
     }
     return formatterFloat2.format(feeDeduct ? +amount : +amount + totalFeeUsd);
   }, [amount, totalFeeUsd, originNetwork, targetNetwork, feeDeduct]);
-  return /* @__PURE__ */ React93.createElement("div", { className: `confirm-details ${theme.colorMode}` }, /* @__PURE__ */ React93.createElement("p", null, "Step ", isApproved ? "2" : "1", "\xA0of 2\xA0\xA0\xA0", isApproved ? "Submit transaction" : originNetwork.shortName === "FIAT" /* FIAT */ ? "Bank Details" : "Approval"), originNetwork.shortName === "FIAT" /* FIAT */ ? /* @__PURE__ */ React93.createElement("div", null, /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "IBAN:"), /* @__PURE__ */ React93.createElement("span", { className: `kima-card-network-label ${theme.colorMode}` }, /* @__PURE__ */ React93.createElement(ChainIcon, { symbol: originNetworkOption?.shortName }), "FIAT"), /* @__PURE__ */ React93.createElement("p", null, "ES6621000418401234567891")), /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "Recipient:"), /* @__PURE__ */ React93.createElement("p", null, "Kima Sandbox")), /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "BIC:"), /* @__PURE__ */ React93.createElement("p", null, "CAIXESBBXXX")), /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "Description:"), /* @__PURE__ */ React93.createElement("p", { className: "signature" }, signature))) : /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "Source wallet:"), /* @__PURE__ */ React93.createElement("div", { className: "network-details" }, /* @__PURE__ */ React93.createElement("div", { className: "kima-card-network-container" }, /* @__PURE__ */ React93.createElement("span", { className: `kima-card-network-label ${theme.colorMode}` }, /* @__PURE__ */ React93.createElement(ChainIcon, { symbol: originNetworkOption?.shortName }), originNetworkOption.name)), /* @__PURE__ */ React93.createElement("p", { className: theme.colorMode }, width >= 916 ? dAppOption === "LPDrain" /* LPDrain */ ? targetAddress : walletAddress : dAppOption === "LPDrain" /* LPDrain */ ? targetWalletAddress : sourceWalletAddress))), /* @__PURE__ */ React93.createElement("div", { className: "detail-item amount" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "Transaction", width > 500 && /* @__PURE__ */ React93.createElement("br", null), "Details:"), /* @__PURE__ */ React93.createElement("span", { className: "amount-container" }, /* @__PURE__ */ React93.createElement("div", { className: "amount-details" }, /* @__PURE__ */ React93.createElement("span", null, "Source Transfer amount"), /* @__PURE__ */ React93.createElement("div", { className: "coin-details" }, /* @__PURE__ */ React93.createElement("p", null, feeDeduct ? formatterFloat2.format(Number(amount)) : formatterFloat2.format(Number(amount) + totalFeeUsd), " ", sourceCurrency)), sourceCurrency !== targetCurrency && /* @__PURE__ */ React93.createElement("div", { className: "coin-details" }, "\u2192 ", targetCurrency)), /* @__PURE__ */ React93.createElement("div", { className: "amount-details" }, /* @__PURE__ */ React93.createElement("span", null, "Source Network Fee (", originNetwork.shortName, ")"), /* @__PURE__ */ React93.createElement("span", { className: "service-fee" }, formatterFloat2.format(sourceNetworkFee?.amount || 0), " ", sourceCurrency)), /* @__PURE__ */ React93.createElement("div", { className: "amount-details" }, /* @__PURE__ */ React93.createElement("span", null, "Target Network Fee (", targetNetwork.shortName, ")"), /* @__PURE__ */ React93.createElement("span", { className: "service-fee" }, formatterFloat2.format(targetNetworkFee?.amount || 0), " ", sourceCurrency)), /* @__PURE__ */ React93.createElement("div", { className: "amount-details" }, /* @__PURE__ */ React93.createElement("span", null, "Target Transfer Amount"), /* @__PURE__ */ React93.createElement("span", { className: "service-fee" }, !feeDeduct ? formatterFloat2.format(Number(amount)) : formatterFloat2.format(Number(amount) - totalFeeUsd), " ", targetCurrency)))), targetNetwork.shortName === "FIAT" /* FIAT */ ? /* @__PURE__ */ React93.createElement("div", null, /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "IBAN:"), /* @__PURE__ */ React93.createElement("p", null, bankDetails.iban), /* @__PURE__ */ React93.createElement("span", { className: `kima-card-network-label ${theme.colorMode}` }, /* @__PURE__ */ React93.createElement(ChainIcon, { symbol: targetNetworkOption?.shortName }), "FIAT")), /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "Recipient:"), /* @__PURE__ */ React93.createElement("p", null, bankDetails.recipient))) : /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "Target wallet:"), /* @__PURE__ */ React93.createElement("div", { className: "network-details" }, /* @__PURE__ */ React93.createElement("div", { className: "kima-card-network-container" }, /* @__PURE__ */ React93.createElement("span", { className: `kima-card-network-label ${theme.colorMode}` }, /* @__PURE__ */ React93.createElement(ChainIcon, { symbol: targetNetworkOption?.shortName }), targetNetworkOption?.name)), /* @__PURE__ */ React93.createElement("p", { className: theme.colorMode }, width >= 916 ? dAppOption === "LPDrain" /* LPDrain */ ? walletAddress : targetAddress : dAppOption === "LPDrain" /* LPDrain */ ? sourceWalletAddress : targetWalletAddress))), mode === "bridge" /* bridge */ && totalFeeUsd > 0 ? (
+  return /* @__PURE__ */ React93.createElement("div", { className: `confirm-details ${theme.colorMode}` }, /* @__PURE__ */ React93.createElement("p", null, "Step ", isApproved ? "2" : "1", "\xA0of 2\xA0\xA0\xA0", isApproved ? "Submit transaction" : originNetwork.shortName === "FIAT" /* FIAT */ ? "Bank Details" : "Approval"), originNetwork.shortName === "FIAT" /* FIAT */ ? /* @__PURE__ */ React93.createElement("div", null, /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "IBAN:"), /* @__PURE__ */ React93.createElement("span", { className: `kima-card-network-label ${theme.colorMode}` }, /* @__PURE__ */ React93.createElement(ChainIcon, { symbol: originNetworkOption?.shortName }), "FIAT"), /* @__PURE__ */ React93.createElement("p", null, "ES6621000418401234567891")), /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "Recipient:"), /* @__PURE__ */ React93.createElement("p", null, "Kima Sandbox")), /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "BIC:"), /* @__PURE__ */ React93.createElement("p", null, "CAIXESBBXXX")), /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "Description:"), /* @__PURE__ */ React93.createElement("p", { className: "signature" }, signature))) : /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "Source wallet:"), /* @__PURE__ */ React93.createElement("div", { className: "network-details" }, /* @__PURE__ */ React93.createElement("div", { className: "kima-card-network-container" }, /* @__PURE__ */ React93.createElement("span", { className: `kima-card-network-label ${theme.colorMode}` }, /* @__PURE__ */ React93.createElement(ChainIcon, { symbol: originNetworkOption?.shortName }), originNetworkOption.name)), /* @__PURE__ */ React93.createElement("p", { className: theme.colorMode }, width >= 916 ? dAppOption === "LPDrain" /* LPDrain */ ? targetAddress : walletAddress : dAppOption === "LPDrain" /* LPDrain */ ? targetWalletAddress : sourceWalletAddress))), /* @__PURE__ */ React93.createElement("div", { className: "detail-item amount" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "Transaction", width > 500 && /* @__PURE__ */ React93.createElement("br", null), "Details:"), /* @__PURE__ */ React93.createElement("span", { className: "amount-container" }, /* @__PURE__ */ React93.createElement("div", { className: "amount-details" }, /* @__PURE__ */ React93.createElement("span", null, "Source Transfer amount"), /* @__PURE__ */ React93.createElement("div", { className: "coin-details" }, /* @__PURE__ */ React93.createElement("p", null, feeDeduct ? formatterFloat2.format(Number(amount)) : formatterFloat2.format(Number(amount) + totalFeeUsd), " ", sourceCurrency))), /* @__PURE__ */ React93.createElement("div", { className: "amount-details" }, /* @__PURE__ */ React93.createElement("span", null, "Source Network Fee (", originNetwork.shortName, ")"), /* @__PURE__ */ React93.createElement("span", { className: "service-fee" }, formatterFloat2.format(sourceNetworkFee?.amount || 0), " ", sourceCurrency)), /* @__PURE__ */ React93.createElement("div", { className: "amount-details" }, /* @__PURE__ */ React93.createElement("span", null, "Target Network Fee (", targetNetwork.shortName, ")"), /* @__PURE__ */ React93.createElement("span", { className: "service-fee" }, formatterFloat2.format(targetNetworkFee?.amount || 0), " ", sourceCurrency)), /* @__PURE__ */ React93.createElement("div", { className: "amount-details" }, /* @__PURE__ */ React93.createElement("span", null, "Target Transfer Amount"), /* @__PURE__ */ React93.createElement("span", { className: "service-fee" }, !feeDeduct ? formatterFloat2.format(Number(amount)) : formatterFloat2.format(Number(amount) - totalFeeUsd), " ", targetCurrency)))), targetNetwork.shortName === "FIAT" /* FIAT */ ? /* @__PURE__ */ React93.createElement("div", null, /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "IBAN:"), /* @__PURE__ */ React93.createElement("p", null, bankDetails.iban), /* @__PURE__ */ React93.createElement("span", { className: `kima-card-network-label ${theme.colorMode}` }, /* @__PURE__ */ React93.createElement(ChainIcon, { symbol: targetNetworkOption?.shortName }), "FIAT")), /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "Recipient:"), /* @__PURE__ */ React93.createElement("p", null, bankDetails.recipient))) : /* @__PURE__ */ React93.createElement("div", { className: "detail-item" }, /* @__PURE__ */ React93.createElement("span", { className: "label" }, "Target wallet:"), /* @__PURE__ */ React93.createElement("div", { className: "network-details" }, /* @__PURE__ */ React93.createElement("div", { className: "kima-card-network-container" }, /* @__PURE__ */ React93.createElement("span", { className: `kima-card-network-label ${theme.colorMode}` }, /* @__PURE__ */ React93.createElement(ChainIcon, { symbol: targetNetworkOption?.shortName }), targetNetworkOption?.name)), /* @__PURE__ */ React93.createElement("p", { className: theme.colorMode }, width >= 916 ? dAppOption === "LPDrain" /* LPDrain */ ? walletAddress : targetAddress : dAppOption === "LPDrain" /* LPDrain */ ? sourceWalletAddress : targetWalletAddress))), mode === "bridge" /* bridge */ && totalFeeUsd > 0 ? (
     // <FeeDeductionSlider />
     /* @__PURE__ */ React93.createElement(FeeDeductionRadioButtons_default, null)
   ) : null);
@@ -4996,13 +5006,6 @@ var TransactionWidget = ({ theme }) => {
     ),
     [data, mode, targetChain]
   );
-  console.log(
-    "tx details: ",
-    networks,
-    transactionSourceChain,
-    transactionTargetChain,
-    data
-  );
   const isValidTxId = useMemo13(() => {
     return !(!txId || typeof txId === "string" && txId.length === 0 || typeof txId === "number" && txId < 0);
   }, [txId]);
@@ -5076,6 +5079,7 @@ var TransactionWidget = ({ theme }) => {
     }
   }, [data?.status]);
   const resetForm = () => {
+    closeHandler && closeHandler();
     if (mode !== "payment" /* payment */) {
       if (transactionOption?.sourceChain) {
         const sourceChain2 = chainData?.find(
@@ -5094,14 +5098,17 @@ var TransactionWidget = ({ theme }) => {
         dispatch(setTargetChain(networks[0]));
       }
       dispatch(setTargetAddress(transactionOption?.targetAddress || ""));
-      dispatch(setTargetCurrency(transactionOption?.currency || ""));
+      dispatch(
+        setTargetCurrency(
+          transactionOption?.currency || networks[1].supportedTokens[0].symbol
+        )
+      );
       dispatch(setAmount(transactionOption?.amount.toString() || ""));
     }
-    dispatch(setSubmitted(false));
     dispatch(
       setMode(transactionOption ? "payment" /* payment */ : "bridge" /* bridge */)
     );
-    closeHandler && closeHandler(0);
+    dispatch(setSubmitted(false));
   };
   return /* @__PURE__ */ React101.createElement(Provider2, { store }, /* @__PURE__ */ React101.createElement(
     "div",
@@ -6239,6 +6246,7 @@ var TransferWidget = ({
   };
   const resetForm = async () => {
     if (isApproving || isSubmitting || isSigning) return;
+    closeHandler && closeHandler(0);
     setFormStep(0);
     if (mode !== "payment" /* payment */) {
       if (transactionOption?.sourceChain) {
@@ -6258,11 +6266,14 @@ var TransferWidget = ({
         dispatch(setTargetChain(networks[1]));
       }
       dispatch(setTargetAddress(transactionOption?.targetAddress || ""));
-      dispatch(setTargetCurrency(transactionOption?.currency || ""));
+      dispatch(
+        setTargetCurrency(
+          transactionOption?.currency || networks[1].supportedTokens[0].symbol
+        )
+      );
       dispatch(setAmount(transactionOption?.amount.toString() || ""));
     }
     await disconnectWallet();
-    closeHandler && closeHandler(0);
   };
   useEffect18(() => {
     dispatch(setTheme(theme));
@@ -6448,6 +6459,9 @@ var KimaWidgetWrapper = ({
     } else if (mode === "status" /* status */) {
       dispatch(setTxId(txId || -1));
       dispatch(setSubmitted(true));
+    } else if (mode === "bridge" /* bridge */) {
+      dispatch(setTxId(-1));
+      dispatch(setSubmitted(false));
     }
   }, [theme, transactionOption, mode, networkOption, chainData]);
   useEffect19(() => {