throttle ui

DePayFi · Jul 1, 2024 · a8e4cfb · a8e4cfb
1 parent 88cef99
commit a8e4cfb
Show file tree

Hide file tree

Showing 16 changed files with 126 additions and 104 deletions.
diff --git a/dist/esm/index.bundle.js b/dist/esm/index.bundle.js
diff --git a/dist/esm/index.evm.js b/dist/esm/index.evm.js
@@ -26728,40 +26728,40 @@ var PaymentProvider = (function (props) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              _context2.next = 2;
+              setPaymentState('paying');
+              setUpdatable(false);
+              _context2.next = 4;
               return wallet.account();
 
-            case 2:
+            case 4:
               account = _context2.sent;
-              _context2.next = 5;
+              _context2.next = 7;
               return payment.route.getTransaction({
                 from: account
               });
 
-            case 5:
+            case 7:
               transaction = _context2.sent;
 
               if (!before) {
-                _context2.next = 12;
+                _context2.next = 14;
                 break;
               }
 
-              _context2.next = 9;
+              _context2.next = 11;
               return before(transaction, account);
 
-            case 9:
+            case 11:
               stop = _context2.sent;
 
               if (!(stop === false)) {
-                _context2.next = 12;
+                _context2.next = 14;
                 break;
               }
 
               return _context2.abrupt("return");
 
-            case 12:
-              setPaymentState('paying');
-              setUpdatable(false);
+            case 14:
               _context2.next = 16;
               return request({
                 blockchain: transaction.blockchain,
@@ -26835,9 +26835,9 @@ var PaymentProvider = (function (props) {
   }();
 
   var approve = function approve() {
+    setPaymentState('approving');
     setClosable(false);
     setUpdatable(false);
-    setPaymentState('approving');
     wallet.sendTransaction(Object.assign({}, payment.route.approvalTransaction, {
       succeeded: function succeeded() {
         setUpdatable(true);
@@ -27645,6 +27645,9 @@ var Footer = (function () {
       secondsLeftCountdown = _useState4[0],
       setSecondsLeftCountdown = _useState4[1];
 
+  var throttledUpdateRouteWithNewPrice = lodash.throttle(updateRouteWithNewPrice, 2000);
+  var throttledPay = lodash.throttle(pay, 2000);
+  var throttledApprove = lodash.throttle(approve, 2000);
   useEffect(function () {
     if (confirmationsRequired) {
       var interval = setInterval(function () {
@@ -27801,7 +27804,7 @@ var Footer = (function () {
       }, /*#__PURE__*/React.createElement("button", {
         type: "button",
         className: "ButtonPrimary",
-        onClick: approve,
+        onClick: throttledApprove,
         title: "Allow ".concat(payment.symbol, " to be used as payment")
       }, "Approve use of ", payment.symbol));
     } else if (paymentState == 'approving') {
@@ -27827,7 +27830,7 @@ var Footer = (function () {
         type: "button",
         className: "ButtonPrimary",
         onClick: function onClick() {
-          updateRouteWithNewPrice();
+          throttledUpdateRouteWithNewPrice();
         }
       }, "Reload"));
     } else if (paymentValueLoss) {
@@ -27846,7 +27849,7 @@ var Footer = (function () {
             return;
           }
 
-          pay();
+          throttledPay();
         }
       }, "Pay");
     } else if (paymentState == 'paying') {

diff --git a/dist/esm/index.evm.js.map b/dist/esm/index.evm.js.map
diff --git a/dist/esm/index.js b/dist/esm/index.js
@@ -26691,40 +26691,40 @@ var PaymentProvider = (function (props) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              _context2.next = 2;
+              setPaymentState('paying');
+              setUpdatable(false);
+              _context2.next = 4;
               return wallet.account();
 
-            case 2:
+            case 4:
               account = _context2.sent;
-              _context2.next = 5;
+              _context2.next = 7;
               return payment.route.getTransaction({
                 from: account
               });
 
-            case 5:
+            case 7:
               transaction = _context2.sent;
 
               if (!before) {
-                _context2.next = 12;
+                _context2.next = 14;
                 break;
               }
 
-              _context2.next = 9;
+              _context2.next = 11;
               return before(transaction, account);
 
-            case 9:
+            case 11:
               stop = _context2.sent;
 
               if (!(stop === false)) {
-                _context2.next = 12;
+                _context2.next = 14;
                 break;
               }
 
               return _context2.abrupt("return");
 
-            case 12:
-              setPaymentState('paying');
-              setUpdatable(false);
+            case 14:
               _context2.next = 16;
               return request({
                 blockchain: transaction.blockchain,
@@ -26798,9 +26798,9 @@ var PaymentProvider = (function (props) {
   }();
 
   var approve = function approve() {
+    setPaymentState('approving');
     setClosable(false);
     setUpdatable(false);
-    setPaymentState('approving');
     wallet.sendTransaction(Object.assign({}, payment.route.approvalTransaction, {
       succeeded: function succeeded() {
         setUpdatable(true);
@@ -27608,6 +27608,9 @@ var Footer = (function () {
       secondsLeftCountdown = _useState4[0],
       setSecondsLeftCountdown = _useState4[1];
 
+  var throttledUpdateRouteWithNewPrice = lodash.throttle(updateRouteWithNewPrice, 2000);
+  var throttledPay = lodash.throttle(pay, 2000);
+  var throttledApprove = lodash.throttle(approve, 2000);
   useEffect(function () {
     if (confirmationsRequired) {
       var interval = setInterval(function () {
@@ -27764,7 +27767,7 @@ var Footer = (function () {
       }, /*#__PURE__*/React.createElement("button", {
         type: "button",
         className: "ButtonPrimary",
-        onClick: approve,
+        onClick: throttledApprove,
         title: "Allow ".concat(payment.symbol, " to be used as payment")
       }, "Approve use of ", payment.symbol));
     } else if (paymentState == 'approving') {
@@ -27790,7 +27793,7 @@ var Footer = (function () {
         type: "button",
         className: "ButtonPrimary",
         onClick: function onClick() {
-          updateRouteWithNewPrice();
+          throttledUpdateRouteWithNewPrice();
         }
       }, "Reload"));
     } else if (paymentValueLoss) {
@@ -27809,7 +27812,7 @@ var Footer = (function () {
             return;
           }
 
-          pay();
+          throttledPay();
         }
       }, "Pay");
     } else if (paymentState == 'paying') {

diff --git a/dist/esm/index.js.map b/dist/esm/index.js.map
diff --git a/dist/esm/index.solana.js b/dist/esm/index.solana.js
@@ -26729,40 +26729,40 @@ var PaymentProvider = (function (props) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              _context2.next = 2;
+              setPaymentState('paying');
+              setUpdatable(false);
+              _context2.next = 4;
               return wallet.account();
 
-            case 2:
+            case 4:
               account = _context2.sent;
-              _context2.next = 5;
+              _context2.next = 7;
               return payment.route.getTransaction({
                 from: account
               });
 
-            case 5:
+            case 7:
               transaction = _context2.sent;
 
               if (!before) {
-                _context2.next = 12;
+                _context2.next = 14;
                 break;
               }
 
-              _context2.next = 9;
+              _context2.next = 11;
               return before(transaction, account);
 
-            case 9:
+            case 11:
               stop = _context2.sent;
 
               if (!(stop === false)) {
-                _context2.next = 12;
+                _context2.next = 14;
                 break;
               }
 
               return _context2.abrupt("return");
 
-            case 12:
-              setPaymentState('paying');
-              setUpdatable(false);
+            case 14:
               _context2.next = 16;
               return request$1({
                 blockchain: transaction.blockchain,
@@ -26836,9 +26836,9 @@ var PaymentProvider = (function (props) {
   }();
 
   var approve = function approve() {
+    setPaymentState('approving');
     setClosable(false);
     setUpdatable(false);
-    setPaymentState('approving');
     wallet.sendTransaction(Object.assign({}, payment.route.approvalTransaction, {
       succeeded: function succeeded() {
         setUpdatable(true);
@@ -27646,6 +27646,9 @@ var Footer = (function () {
       secondsLeftCountdown = _useState4[0],
       setSecondsLeftCountdown = _useState4[1];
 
+  var throttledUpdateRouteWithNewPrice = lodash.throttle(updateRouteWithNewPrice, 2000);
+  var throttledPay = lodash.throttle(pay, 2000);
+  var throttledApprove = lodash.throttle(approve, 2000);
   useEffect(function () {
     if (confirmationsRequired) {
       var interval = setInterval(function () {
@@ -27802,7 +27805,7 @@ var Footer = (function () {
       }, /*#__PURE__*/React.createElement("button", {
         type: "button",
         className: "ButtonPrimary",
-        onClick: approve,
+        onClick: throttledApprove,
         title: "Allow ".concat(payment.symbol, " to be used as payment")
       }, "Approve use of ", payment.symbol));
     } else if (paymentState == 'approving') {
@@ -27828,7 +27831,7 @@ var Footer = (function () {
         type: "button",
         className: "ButtonPrimary",
         onClick: function onClick() {
-          updateRouteWithNewPrice();
+          throttledUpdateRouteWithNewPrice();
         }
       }, "Reload"));
     } else if (paymentValueLoss) {
@@ -27847,7 +27850,7 @@ var Footer = (function () {
             return;
           }
 
-          pay();
+          throttledPay();
         }
       }, "Pay");
     } else if (paymentState == 'paying') {

diff --git a/dist/esm/index.solana.js.map b/dist/esm/index.solana.js.map
diff --git a/dist/umd/index.bundle.js b/dist/umd/index.bundle.js
diff --git a/dist/umd/index.evm.js b/dist/umd/index.evm.js
@@ -26726,40 +26726,40 @@
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                _context2.next = 2;
+                setPaymentState('paying');
+                setUpdatable(false);
+                _context2.next = 4;
                 return wallet.account();
 
-              case 2:
+              case 4:
                 account = _context2.sent;
-                _context2.next = 5;
+                _context2.next = 7;
                 return payment.route.getTransaction({
                   from: account
                 });
 
-              case 5:
+              case 7:
                 transaction = _context2.sent;
 
                 if (!before) {
-                  _context2.next = 12;
+                  _context2.next = 14;
                   break;
                 }
 
-                _context2.next = 9;
+                _context2.next = 11;
                 return before(transaction, account);
 
-              case 9:
+              case 11:
                 stop = _context2.sent;
 
                 if (!(stop === false)) {
-                  _context2.next = 12;
+                  _context2.next = 14;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 12:
-                setPaymentState('paying');
-                setUpdatable(false);
+              case 14:
                 _context2.next = 16;
                 return web3ClientEvm.request({
                   blockchain: transaction.blockchain,
@@ -26833,9 +26833,9 @@
     }();
 
     var approve = function approve() {
+      setPaymentState('approving');
       setClosable(false);
       setUpdatable(false);
-      setPaymentState('approving');
       wallet.sendTransaction(Object.assign({}, payment.route.approvalTransaction, {
         succeeded: function succeeded() {
           setUpdatable(true);
@@ -27643,6 +27643,9 @@
         secondsLeftCountdown = _useState4[0],
         setSecondsLeftCountdown = _useState4[1];
 
+    var throttledUpdateRouteWithNewPrice = lodash.throttle(updateRouteWithNewPrice, 2000);
+    var throttledPay = lodash.throttle(pay, 2000);
+    var throttledApprove = lodash.throttle(approve, 2000);
     React.useEffect(function () {
       if (confirmationsRequired) {
         var interval = setInterval(function () {
@@ -27799,7 +27802,7 @@
         }, /*#__PURE__*/React__default['default'].createElement("button", {
           type: "button",
           className: "ButtonPrimary",
-          onClick: approve,
+          onClick: throttledApprove,
           title: "Allow ".concat(payment.symbol, " to be used as payment")
         }, "Approve use of ", payment.symbol));
       } else if (paymentState == 'approving') {
@@ -27825,7 +27828,7 @@
           type: "button",
           className: "ButtonPrimary",
           onClick: function onClick() {
-            updateRouteWithNewPrice();
+            throttledUpdateRouteWithNewPrice();
           }
         }, "Reload"));
       } else if (paymentValueLoss) {
@@ -27844,7 +27847,7 @@
               return;
             }
 
-            pay();
+            throttledPay();
           }
         }, "Pay");
       } else if (paymentState == 'paying') {