@kimafinance/kima-transaction-widget 1.2.28-beta.1 → 1.2.30-beta.1

package/dist/components/modals/PendingTxPopup.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-import { PendingTxData } from '../../utils/constants';
-declare const PendingTxPopup: ({ txData, handleHtlcContinue }: {
-    txData: Array<PendingTxData>;
+declare const PendingTxPopup: ({ handleHtlcContinue }: {
     handleHtlcContinue: (expireTime: any, hash: any, amount: any) => {};
 }) => React.JSX.Element;
 export default PendingTxPopup;

package/dist/components/reusable/TxButton.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ThemeOptions } from '../../interface';
-declare const TxButton: ({ theme, txCount }: {
+declare const TxButton: ({ theme }: {
     theme: ThemeOptions;
-    txCount: number;
 }) => React.JSX.Element;
 export default TxButton;

package/dist/index.js

@@ -1204,7 +1204,9 @@ var _optionSlice$actions = optionSlice.actions,
   setSignature = _optionSlice$actions.setSignature,
   setUuid = _optionSlice$actions.setUuid,
   setKYCStatus = _optionSlice$actions.setKYCStatus,
-  setExpireTime = _optionSlice$actions.setExpireTime;
+  setExpireTime = _optionSlice$actions.setExpireTime,
+  setPendingTxData = _optionSlice$actions.setPendingTxData,
+  setPendingTxs = _optionSlice$actions.setPendingTxs;
 var optionReducer = optionSlice.reducer;
 
 var configureStore = toolkitRaw.configureStore;
@@ -1292,93 +1294,6 @@ const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.it
 
 const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
 
-// Asynchronously implement a generic for loop
-function _for(test, update, body) {
-	var stage;
-	for (;;) {
-		var shouldContinue = test();
-		if (_isSettledPact(shouldContinue)) {
-			shouldContinue = shouldContinue.v;
-		}
-		if (!shouldContinue) {
-			return result;
-		}
-		if (shouldContinue.then) {
-			stage = 0;
-			break;
-		}
-		var result = body();
-		if (result && result.then) {
-			if (_isSettledPact(result)) {
-				result = result.s;
-			} else {
-				stage = 1;
-				break;
-			}
-		}
-		if (update) {
-			var updateValue = update();
-			if (updateValue && updateValue.then && !_isSettledPact(updateValue)) {
-				stage = 2;
-				break;
-			}
-		}
-	}
-	var pact = new _Pact();
-	var reject = _settle.bind(null, pact, 2);
-	(stage === 0 ? shouldContinue.then(_resumeAfterTest) : stage === 1 ? result.then(_resumeAfterBody) : updateValue.then(_resumeAfterUpdate)).then(void 0, reject);
-	return pact;
-	function _resumeAfterBody(value) {
-		result = value;
-		do {
-			if (update) {
-				updateValue = update();
-				if (updateValue && updateValue.then && !_isSettledPact(updateValue)) {
-					updateValue.then(_resumeAfterUpdate).then(void 0, reject);
-					return;
-				}
-			}
-			shouldContinue = test();
-			if (!shouldContinue || (_isSettledPact(shouldContinue) && !shouldContinue.v)) {
-				_settle(pact, 1, result);
-				return;
-			}
-			if (shouldContinue.then) {
-				shouldContinue.then(_resumeAfterTest).then(void 0, reject);
-				return;
-			}
-			result = body();
-			if (_isSettledPact(result)) {
-				result = result.v;
-			}
-		} while (!result || !result.then);
-		result.then(_resumeAfterBody).then(void 0, reject);
-	}
-	function _resumeAfterTest(shouldContinue) {
-		if (shouldContinue) {
-			result = body();
-			if (result && result.then) {
-				result.then(_resumeAfterBody).then(void 0, reject);
-			} else {
-				_resumeAfterBody(result);
-			}
-		} else {
-			_settle(pact, 1, result);
-		}
-	}
-	function _resumeAfterUpdate() {
-		if (shouldContinue = test()) {
-			if (shouldContinue.then) {
-				shouldContinue.then(_resumeAfterTest).then(void 0, reject);
-			} else {
-				_resumeAfterTest(shouldContinue);
-			}
-		} else {
-			_settle(pact, 1, result);
-		}
-	}
-}
-
 // Asynchronously implement a do ... while loop
 function _do(body, test) {
 	var awaitBody;
@@ -1507,6 +1422,9 @@ var selectHelpPopup = function selectHelpPopup(state) {
 var selectHashPopup = function selectHashPopup(state) {
   return state.option.hashPopup;
 };
+var selectPendingTxPopup = function selectPendingTxPopup(state) {
+  return state.option.pendingTxPopup;
+};
 var selectBankPopup = function selectBankPopup(state) {
   return state.option.bankPopup;
 };
@@ -1597,6 +1515,9 @@ var selectExpireTime = function selectExpireTime(state) {
 var selectPendingTxs = function selectPendingTxs(state) {
   return state.option.pendingTxs;
 };
+var selectPendingTxData = function selectPendingTxData(state) {
+  return state.option.pendingTxData;
+};
 
 var Loading180Ring = function Loading180Ring(_ref) {
   var _ref$width = _ref.width,
@@ -2214,13 +2135,6 @@ function useIsWalletReady() {
   var correctEvmNetwork = CHAIN_NAMES_TO_IDS[correctChain];
   var hasCorrectEvmNetwork = evmChainId === correctEvmNetwork;
   var events = react.useWeb3ModalEvents();
-  var _useState = React.useState('loading'),
-    capabilityState = _useState[0],
-    setCapabilityState = _useState[1];
-  var _useState2 = React.useState(),
-    capabilities = _useState2[0],
-    setCapabilities = _useState2[1];
-  var capabilityMessage = capabilityState === 'loading' ? 'Checking capabilities...' : capabilityState === 'cancelled' ? 'Capability check cancelled by wallet. Please refresh the page and try again.' : capabilityState === 'missing' ? 'Could not find an installed Sats Connect capable wallet. Please install a wallet and try again.' : !capabilities ? 'Something went wrong with getting capabilities' : undefined;
   React.useEffect(function () {
     var _events$data, _events$data2;
     if (((_events$data = events.data) === null || _events$data === void 0 ? void 0 : _events$data.event) === 'SELECT_WALLET' || ((_events$data2 = events.data) === null || _events$data2 === void 0 ? void 0 : _events$data2.event) === 'CONNECT_SUCCESS') {
@@ -2228,50 +2142,6 @@ function useIsWalletReady() {
       localStorage.setItem('wallet', (_events$data3 = events.data) === null || _events$data3 === void 0 ? void 0 : (_events$data3$propert = _events$data3.properties) === null || _events$data3$propert === void 0 ? void 0 : _events$data3$propert.name);
     }
   }, [events]);
-  React.useEffect(function () {
-    var runCapabilityCheck = function runCapabilityCheck() {
-      try {
-        var runs = 0;
-        var MAX_RUNS = 20;
-        setCapabilityState('loading');
-        var _temp3 = _for(function () {
-          return runs < MAX_RUNS;
-        }, void 0, function () {
-          function _temp2() {
-            return Promise.resolve(new Promise(function (resolve) {
-              return setTimeout(resolve, 100);
-            })).then(function () {});
-          }
-          var _temp = _catch(function () {
-            return Promise.resolve(satsConnect.getCapabilities({
-              onFinish: function onFinish(response) {
-                setCapabilities(new Set(response));
-                setCapabilityState('loaded');
-              },
-              onCancel: function onCancel() {
-                setCapabilityState('cancelled');
-              },
-              payload: {
-                network: {
-                  type: satsConnect.BitcoinNetworkType.Testnet
-                }
-              }
-            })).then(function () {});
-          }, function () {
-            runs++;
-            if (runs === MAX_RUNS) {
-              setCapabilityState('missing');
-            }
-          });
-          return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
-        });
-        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    };
-    runCapabilityCheck();
-  }, []);
   var connectBitcoinWallet = React.useCallback(function () {
     try {
       return Promise.resolve(satsConnect.getAddress({
@@ -2332,7 +2202,7 @@ function useIsWalletReady() {
       if (bitcoinAddress) {
         return createWalletStatus(true, undefined, connectBitcoinWallet, bitcoinAddress);
       }
-      return createWalletStatus(false, capabilityMessage, connectBitcoinWallet, '');
+      return createWalletStatus(false, 'Xverse wallet not connected', connectBitcoinWallet, '');
     } else if (isEVMChain(correctChain) && hasEthInfo && evmAddress) {
       if (hasCorrectEvmNetwork) {
         return createWalletStatus(true, undefined, connectBitcoinWallet, evmAddress);
@@ -3377,12 +3247,12 @@ var BankInput = function BankInput() {
 };
 
 var TxButton = function TxButton(_ref) {
-  var theme = _ref.theme,
-    txCount = _ref.txCount;
+  var theme = _ref.theme;
   var dispatch = reactRedux.useDispatch();
   var handleClick = function handleClick() {
     dispatch(setPendingTxPopup(true));
   };
+  var txCount = reactRedux.useSelector(selectPendingTxs);
   return React__default.createElement("button", {
     className: "secondary-button tx-button " + theme.colorMode,
     onClick: handleClick,
@@ -8177,6 +8047,82 @@ function htlcP2WSHAddress(htlcScript, network) {
   return p2wsh.address;
 }
 
+var PendingTxPopup = function PendingTxPopup(_ref) {
+  var handleHtlcContinue = _ref.handleHtlcContinue;
+  var dispatch = reactRedux.useDispatch();
+  var theme = reactRedux.useSelector(selectTheme);
+  var pendingTxPopup = reactRedux.useSelector(selectPendingTxPopup);
+  var txData = reactRedux.useSelector(selectPendingTxData);
+  return React__default.createElement("div", {
+    className: "kima-modal pending-tx-popup " + theme.colorMode + " " + (pendingTxPopup ? 'open' : '')
+  }, React__default.createElement("div", {
+    className: 'modal-overlay',
+    onClick: function onClick() {
+      dispatch(setPendingTxPopup(false));
+    }
+  }), React__default.createElement("div", {
+    className: 'modal-content-container'
+  }, React__default.createElement("div", {
+    className: 'kima-card-header'
+  }, React__default.createElement("div", {
+    className: 'topbar'
+  }, React__default.createElement("div", {
+    className: 'title'
+  }, React__default.createElement("h3", null, "Bitcoin Transaction List")), React__default.createElement("div", {
+    className: 'control-buttons'
+  }, React__default.createElement("button", {
+    className: 'icon-button',
+    onClick: function onClick() {
+      return dispatch(setPendingTxPopup(false));
+    }
+  }, React__default.createElement(Cross, {
+    fill: theme.colorMode === 'light' ? 'black' : 'white'
+  }))))), React__default.createElement("div", {
+    className: 'modal-content'
+  }, React__default.createElement("div", {
+    className: 'scroll-area custom-scrollbar'
+  }, React__default.createElement("div", {
+    className: 'header-container'
+  }, React__default.createElement("span", null, "Amount"), React__default.createElement("span", null, "Expire Time"), React__default.createElement("span", null, "Status"), React__default.createElement("span", null, "Hash"), React__default.createElement("span", null, "Action")), React__default.createElement("div", {
+    className: 'tx-container'
+  }, txData.map(function (tx, index) {
+    var date = new Date(+tx.expireTime * 1000);
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var day = date.getDate();
+    var hours = date.getHours();
+    var minutes = date.getMinutes();
+    var seconds = date.getSeconds();
+    var formattedDate = year + "-" + month.toString().padStart(2, '0') + "-" + day.toString().padStart(2, '0') + " " + hours.toString().padStart(2, '0') + ":" + minutes.toString().padStart(2, '0') + ":" + seconds.toString().padStart(2, '0');
+    return React__default.createElement("div", {
+      className: 'tx-item',
+      key: index
+    }, React__default.createElement("div", {
+      className: 'label'
+    }, React__default.createElement("div", {
+      className: 'icon-wrapper'
+    }, (+tx.amount).toFixed(8), React__default.createElement(BTC, null))), React__default.createElement("span", {
+      className: 'label'
+    }, "" + formattedDate), React__default.createElement("span", {
+      className: 'label'
+    }, tx.status), React__default.createElement("div", {
+      className: 'label'
+    }, React__default.createElement(ExternalLink, {
+      to: "https://" + CHAIN_NAMES_TO_EXPLORER[exports.SupportNetworks.BTC] + "/tx/" + tx.hash
+    }, getShortenedAddress(tx.hash))), React__default.createElement("div", {
+      className: "action-button-container " + (tx.status === 'Pending' || tx.status === 'Failed' ? '' : 'disabled')
+    }, React__default.createElement("div", {
+      className: 'action-button'
+    }, "Reclaim"), React__default.createElement("div", {
+      className: 'action-button',
+      onClick: function onClick() {
+        handleHtlcContinue(tx.expireTime, tx.hash, tx.amount);
+        dispatch(setPendingTxPopup(false));
+      }
+    }, "Continue")));
+  }))))));
+};
+
 var TransferWidget = function TransferWidget(_ref) {
   var _theme$backgroundColo;
   var theme = _ref.theme,
@@ -8418,6 +8364,19 @@ var TransferWidget = function TransferWidget(_ref) {
       return Promise.reject(e);
     }
   };
+  var handleHtlcContinue = function handleHtlcContinue(expireTime, hash, amount) {
+    try {
+      setBTCTimestamp(expireTime);
+      setBTCSigning(false);
+      setBTCSigned(true);
+      setBTCHash(hash);
+      dispatch(setFeeDeduct(true));
+      dispatch(setAmount(amount));
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   var handleSubmit = function handleSubmit() {
     try {
       var _temp8 = function _temp8(_result) {
@@ -8705,6 +8664,53 @@ var TransferWidget = function TransferWidget(_ref) {
   React.useEffect(function () {
     dispatch(setTheme(theme));
   }, [theme]);
+  React.useEffect(function () {
+    if (!nodeProviderQuery || sourceChain !== exports.SupportNetworks.BTC || !walletAddress) return;
+    var updatePendingTxs = function updatePendingTxs() {
+      try {
+        return Promise.resolve(fetchWrapper.get(nodeProviderQuery + "/kima-finance/kima-blockchain/transaction/get_htlc_transaction/" + walletAddress)).then(function (result) {
+          var data = result === null || result === void 0 ? void 0 : result.htlcLockingTransaction;
+          var txData = [];
+          if (data.length > 0) {
+            for (var _iterator5 = _createForOfIteratorHelperLoose(data), _step5; !(_step5 = _iterator5()).done;) {
+              var tx = _step5.value;
+              var status = '';
+              if (tx.status !== 'Completed') {
+                status = 'Confirming';
+              } else if (tx.pull_status === 'htlc_pull_available') {
+                status = 'Pending';
+              } else if (tx.pull_status === 'htlc_pull_in_progress') {
+                status = 'In Progress';
+              } else if (tx.pull_status === 'htlc_pull_succeed') {
+                status = 'Completed';
+              } else if (tx.pull_status === 'htlc_pull_failed') {
+                status = 'Failed';
+              }
+              txData.push({
+                hash: tx.txHash,
+                amount: tx.amount,
+                expireTime: tx.htlcTimestamp,
+                status: status
+              });
+            }
+            dispatch(setPendingTxData([].concat(txData)));
+            dispatch(setPendingTxs(txData.filter(function (tx) {
+              return tx.status === 'Pending' || tx.status === 'Confirming';
+            }).length));
+          }
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+    var timerId = setInterval(function () {
+      updatePendingTxs();
+    }, 10000);
+    updatePendingTxs();
+    return function () {
+      clearInterval(timerId);
+    };
+  }, [sourceChain, nodeProviderQuery, walletAddress]);
   return React__default.createElement("div", {
     className: "kima-card " + theme.colorMode + " font-" + theme.fontSize,
     style: {
@@ -8720,8 +8726,7 @@ var TransferWidget = function TransferWidget(_ref) {
   }, React__default.createElement("h3", null, isWizard && wizardStep === 3 || !isWizard && formStep > 0 ? titleOption !== null && titleOption !== void 0 && titleOption.confirmTitle ? titleOption === null || titleOption === void 0 ? void 0 : titleOption.confirmTitle : 'Transfer Details' : titleOption !== null && titleOption !== void 0 && titleOption.initialTitle ? titleOption === null || titleOption === void 0 ? void 0 : titleOption.initialTitle : 'New Transfer')), React__default.createElement("div", {
     className: 'control-buttons'
   }, pendingTxs > 0 ? React__default.createElement(TxButton, {
-    theme: theme,
-    txCount: pendingTxs
+    theme: theme
   }) : null, React__default.createElement(ExternalLink, {
     to: helpURL ? helpURL : 'https://docs.kima.finance/demo'
   }, React__default.createElement("div", {
@@ -8806,6 +8811,8 @@ var TransferWidget = function TransferWidget(_ref) {
         background: theme.colorMode === exports.ColorModeOptions.light ? 'white' : (_theme$backgroundColo = theme.backgroundColorDark) != null ? _theme$backgroundColo : '#1b1e25'
       }
     }
+  }), React__default.createElement(PendingTxPopup, {
+    handleHtlcContinue: handleHtlcContinue
   }), React__default.createElement(reactTooltip.Tooltip, {
     id: 'popup-tooltip',
     className: "popup-tooltip " + theme.colorMode,