@kimafinance/kima-transaction-widget 1.2.23-beta.1 → 1.2.24-beta.1

package/dist/index.js

@@ -936,6 +936,8 @@ var createSlice = toolkitRaw.createSlice;
 var initialState = {
   theme: {},
   tokenOptions: {},
+  pendingTxs: 0,
+  pendingTxData: [],
   kimaExplorerUrl: 'explorer.kima.finance',
   mode: exports.ModeOptions.bridge,
   sourceChain: '',
@@ -1014,6 +1016,12 @@ var optionSlice = createSlice({
       state.targetNetworkFetching = false;
       state.signature = '';
     },
+    setPendingTxs: function setPendingTxs(state, action) {
+      state.pendingTxs = action.payload;
+    },
+    setPendingTxData: function setPendingTxData(state, action) {
+      state.pendingTxData = action.payload;
+    },
     setTokenOptions: function setTokenOptions(state, action) {
       state.tokenOptions = action.payload;
     },
@@ -1196,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;
@@ -1589,6 +1599,12 @@ var selectKycStatus = function selectKycStatus(state) {
 var selectExpireTime = function selectExpireTime(state) {
   return state.option.expireTime;
 };
+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,
@@ -3368,6 +3384,24 @@ var BankInput = function BankInput() {
   })));
 };
 
+var TxButton = function TxButton(_ref) {
+  var theme = _ref.theme,
+    txCount = _ref.txCount;
+  var dispatch = reactRedux.useDispatch();
+  var handleClick = function handleClick() {
+    dispatch(setPendingTxPopup(true));
+  };
+  return React__default.createElement("button", {
+    className: "secondary-button tx-button " + theme.colorMode,
+    onClick: handleClick,
+    "data-tooltip-id": 'popup-tooltip'
+  }, txCount, React__default.createElement(Loading180Ring, {
+    height: 16,
+    width: 16,
+    fill: theme.colorMode === 'light' ? 'black' : 'white'
+  }));
+};
+
 var HelpPopup = function HelpPopup() {
   var dispatch = reactRedux.useDispatch();
   var theme = reactRedux.useSelector(selectTheme);
@@ -8298,7 +8332,8 @@ var TransferWidget = function TransferWidget(_ref) {
   var _useIsWalletReady = useIsWalletReady(),
     isReady = _useIsWalletReady.isReady,
     walletAddress = _useIsWalletReady.walletAddress;
-  var pendingTxData = [];
+  var pendingTxData = reactRedux.useSelector(selectPendingTxData);
+  var pendingTxs = reactRedux.useSelector(selectPendingTxs);
   var _useAllowance = useAllowance({
       setApproving: setApproving
     }),
@@ -8768,6 +8803,58 @@ var TransferWidget = function TransferWidget(_ref) {
   React.useEffect(function () {
     dispatch(setTheme(theme));
   }, [theme]);
+  var updatePendingTxs = function updatePendingTxs() {
+    try {
+      var _temp9 = _catch(function () {
+        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));
+          }
+        });
+      }, function (e) {
+        console.log(e);
+      });
+      return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  React.useEffect(function () {
+    if (!nodeProviderQuery || sourceChain !== exports.SupportNetworks.BTC || !walletAddress) return;
+    updatePendingTxs();
+    var timerId = setInterval(function () {
+      updatePendingTxs();
+    }, 10000);
+    return function () {
+      clearInterval(timerId);
+    };
+  }, [sourceChain, nodeProviderQuery, walletAddress]);
   return React__default.createElement("div", {
     className: "kima-card " + theme.colorMode + " font-" + theme.fontSize,
     style: {
@@ -8782,7 +8869,10 @@ 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'
-  },  null, React__default.createElement(ExternalLink, {
+  }, pendingTxs > 0 ? React__default.createElement(TxButton, {
+    theme: theme,
+    txCount: pendingTxs
+  }) : null, React__default.createElement(ExternalLink, {
     to: helpURL ? helpURL : 'https://docs.kima.finance/demo'
   }, React__default.createElement("div", {
     className: 'menu-button'