@kimafinance/kima-transaction-widget 1.2.34-beta.1 → 1.2.36-beta.1

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

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

package/dist/index.js

@@ -1173,6 +1173,7 @@ var _optionSlice$actions = optionSlice.actions,
   setTronConnectModal = _optionSlice$actions.setTronConnectModal,
   setHelpPopup = _optionSlice$actions.setHelpPopup,
   setHashPopup = _optionSlice$actions.setHashPopup,
+  setPendingTxPopup = _optionSlice$actions.setPendingTxPopup,
   setBankPopup = _optionSlice$actions.setBankPopup,
   setSolanaProvider = _optionSlice$actions.setSolanaProvider,
   setProvider = _optionSlice$actions.setProvider,
@@ -1508,6 +1509,9 @@ var selectKycStatus = function selectKycStatus(state) {
 var selectExpireTime = function selectExpireTime(state) {
   return state.option.expireTime;
 };
+var selectPendingTxs = function selectPendingTxs(state) {
+  return state.option.pendingTxs;
+};
 
 var Loading180Ring = function Loading180Ring(_ref) {
   var _ref$width = _ref.width,
@@ -3236,6 +3240,23 @@ var BankInput = function BankInput() {
   })));
 };
 
+var TxButton = function TxButton(_ref) {
+  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
+  }, 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);
@@ -8090,6 +8111,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
     }),
@@ -8601,7 +8623,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(ExternalLink, {
+  }, pendingTxs > 0 ? React__default.createElement(TxButton, {
+    theme: theme
+  }) : null, React__default.createElement(ExternalLink, {
     to: helpURL ? helpURL : 'https://docs.kima.finance/demo'
   }, React__default.createElement("div", {
     className: 'menu-button'
@@ -8685,14 +8709,6 @@ 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'
   }));
 };