@kimafinance/kima-transaction-widget 1.2.35-beta.1 → 1.2.37-beta.1

package/dist/index.js

@@ -1422,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;
 };
@@ -1512,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,
@@ -3249,8 +3255,7 @@ var TxButton = function TxButton(_ref) {
   var txCount = reactRedux.useSelector(selectPendingTxs);
   return React__default.createElement("button", {
     className: "secondary-button tx-button " + theme.colorMode,
-    onClick: handleClick,
-    "data-tooltip-id": 'popup-tooltip'
+    onClick: handleClick
   }, txCount, React__default.createElement(Loading180Ring, {
     height: 16,
     width: 16,
@@ -8041,6 +8046,81 @@ function htlcP2WSHAddress(htlcScript, network) {
   return p2wsh.address;
 }
 
+var PendingTxPopup = function PendingTxPopup(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,
@@ -8112,6 +8192,7 @@ var TransferWidget = function TransferWidget(_ref) {
   var _useIsWalletReady = useIsWalletReady(),
     isReady = _useIsWalletReady.isReady,
     walletAddress = _useIsWalletReady.walletAddress;
+  var pendingTxs = reactRedux.useSelector(selectPendingTxs);
   var _useAllowance = useAllowance({
       setApproving: setApproving
     }),
@@ -8281,6 +8362,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) {
@@ -8607,7 +8701,13 @@ var TransferWidget = function TransferWidget(_ref) {
         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,
@@ -8623,9 +8723,9 @@ var TransferWidget = function TransferWidget(_ref) {
     className: 'title'
   }, 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'
-  }, React__default.createElement(TxButton, {
+  }, pendingTxs > 0 ? React__default.createElement(TxButton, {
     theme: theme
-  }), React__default.createElement(ExternalLink, {
+  }) : null, React__default.createElement(ExternalLink, {
     to: helpURL ? helpURL : 'https://docs.kima.finance/demo'
   }, React__default.createElement("div", {
     className: 'menu-button'
@@ -8709,14 +8809,8 @@ var TransferWidget = function TransferWidget(_ref) {
         background: theme.colorMode === exports.ColorModeOptions.light ? 'white' : (_theme$backgroundColo = theme.backgroundColorDark) != null ? _theme$backgroundColo : '#1b1e25'
       }
     }
-  }), React__default.createElement(reactTooltip.Tooltip, {
-    id: 'popup-tooltip',
-    className: "popup-tooltip " + theme.colorMode,
-    content: 'Click to open popup to see pending transactions',
-    style: {
-      zIndex: 10000
-    },
-    place: 'bottom'
+  }), React__default.createElement(PendingTxPopup, {
+    handleHtlcContinue: handleHtlcContinue
   }));
 };