@depay/widgets 12.0.2 → 12.0.3

package/dist/esm/index.js

@@ -21969,7 +21969,28 @@ var ConnectWalletDialog = (function (props) {
       className: "Alert"
     }, /*#__PURE__*/React.createElement("span", {
       className: "FontWeightBold PaddingBottomXS"
-    }, "You wallet extension window is already asking to connect. It might be hidden."))), /*#__PURE__*/React.createElement("button", {
+    }, "You wallet extension window is already asking to connect. It might be hidden."))), props.connectingExtension && /*#__PURE__*/React.createElement("div", {
+      className: "Card disabled small PaddingTopS PaddingRightXS PaddingBottomS PaddingLeftXS",
+      style: {
+        height: '50px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopXS PaddingRightXS PaddingLeftS TextCenter",
+      style: {
+        width: "50px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "Loading Icon medium",
+      style: {
+        position: 'relative',
+        top: '4px',
+        left: '1px'
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "PaddingLeftS LineHeightXS"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "CardText FontWeightMedium"
+    }, "Connecting extension"))), !props.connectingExtension && /*#__PURE__*/React.createElement("button", {
       onClick: function onClick() {
         return props.connectExtension(props.wallet);
       },
@@ -21995,7 +22016,28 @@ var ConnectWalletDialog = (function (props) {
       className: "CardText FontWeightMedium"
     }, "Connect extension")))), connectAppIsAvailable && /*#__PURE__*/React.createElement("div", {
       className: "PaddingBottomXS"
-    }, /*#__PURE__*/React.createElement("button", {
+    }, props.connectingApp && /*#__PURE__*/React.createElement("div", {
+      className: "Card disabled small PaddingTopS PaddingRightXS PaddingBottomS PaddingLeftXS",
+      style: {
+        height: '50px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopXS PaddingRightXS PaddingLeftS TextCenter",
+      style: {
+        width: "50px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "Loading Icon medium",
+      style: {
+        position: 'relative',
+        top: '4px',
+        left: '1px'
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "PaddingLeftS LineHeightXS"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "CardText FontWeightMedium"
+    }, "Connecting app"))), !props.connectingApp && /*#__PURE__*/React.createElement("button", {
       onClick: function onClick() {
         return props.connectViaRedirect(props.wallet);
       },
@@ -22588,20 +22630,28 @@ var ConnectStack = (function (props) {
     _useState4 = _slicedToArray(_useState3, 2),
     platform = _useState4[0],
     setPlatform = _useState4[1];
-  var _useState5 = useState(),
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    redirectUri = _useState6[0],
-    setRedirectUri = _useState6[1];
-  var _useState7 = useState({
+    connectingExtension = _useState6[0],
+    setConnectingExtension = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2);
+    _useState8[0];
+    var setConnectingApp = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    redirectUri = _useState10[0],
+    setRedirectUri = _useState10[1];
+  var _useState11 = useState({
       blockchain: undefined
     }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    selection = _useState8[0];
-    _useState8[1];
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    showConnectExtensionWarning = _useState10[0],
-    setShowConnectExtensionWarning = _useState10[1];
+    _useState12 = _slicedToArray(_useState11, 2),
+    selection = _useState12[0];
+    _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    showConnectExtensionWarning = _useState14[0],
+    setShowConnectExtensionWarning = _useState14[1];
   var resolve = function resolve(account, wallet) {
     if (account && wallet) {
       var walletMeta = allWallets.find(function (walletMeta) {
@@ -22619,10 +22669,18 @@ var ConnectStack = (function (props) {
   };
   var connectExtension = function connectExtension(wallet) {
     setShowConnectExtensionWarning(false);
+    setConnectingExtension(true);
     wallet = new wallets[wallet.extension]();
+    var resetConnectingTimeout = setTimeout(function () {
+      setConnectingExtension(false);
+    }, 5000);
     wallet.connect().then(function (account) {
       resolve(account, wallet);
+      setConnectingExtension(false);
+      clearTimeout(resetConnectingTimeout);
     })["catch"](function (error) {
+      setConnectingExtension(false);
+      clearTimeout(resetConnectingTimeout);
       if ((error === null || error === void 0 ? void 0 : error.code) == -32002) {
         // Request of type 'wallet_requestPermissions' already pending...
         setShowConnectExtensionWarning(true);
@@ -22699,6 +22757,10 @@ var ConnectStack = (function (props) {
     if (!platform) {
       return;
     }
+    setConnectingApp(true);
+    setTimeout(function () {
+      setConnectingApp(false);
+    }, 5000);
     if (['WalletConnectV1', 'WalletConnectV2'].includes(platform.connect)) {
       localStorage[atob('ZGVwYXk6d2FsbGV0czp3YzI6cHJvamVjdElk')] = atob('YjFmYzJmMDZlYTIxMDdmY2Q5OWM2OGY0MTI3MTQxYWI=');
       var _wallet = new wallets[platform.connect]();
@@ -22723,7 +22785,10 @@ var ConnectStack = (function (props) {
           });
         }
       }).then(function (account) {
+        setConnectingApp(false);
         resolve(account, _wallet);
+      })["catch"](function () {
+        setConnectingApp(false);
       });
     } else if (platform.connect === 'SolanaMobileWalletAdapter') {
       var _wallet2 = new wallets[platform.connect]();
@@ -22731,7 +22796,10 @@ var ConnectStack = (function (props) {
         name: walletMetaData.name,
         logo: walletMetaData.logo
       }).then(function (account) {
+        setConnectingApp(false);
         resolve(account, _wallet2);
+      })["catch"](function () {
+        setConnectingApp(false);
       });
     }
   };
@@ -22774,6 +22842,7 @@ var ConnectStack = (function (props) {
         openInApp: openInApp,
         connectViaRedirect: connectViaRedirect,
         connectExtension: connectExtension,
+        connectingExtension: connectingExtension,
         showConnectExtensionWarning: showConnectExtensionWarning,
         continueWithSolanaPay: props.continueWithSolanaPay
       })
@@ -23174,7 +23243,7 @@ var HeightStyle = (function () {
 });
 
 var IconStyle = (function (style) {
-  return "\n\n    .Icon {\n      fill: ".concat(style.colors.icons, ";\n      stroke: ").concat(style.colors.icons, ";\n    }\n\n    .QuestionMarkIcon {\n      fill: transparent;\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .ChevronLeft.small, .ChevronRight.small {\n      height: 12px;\n      width: 12px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .AlertIcon {\n      height: 20px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 20px;\n      fill: #e42626;\n      stroke: transparent;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      border-radius: 100%;\n      position: relative;\n      left: -1px;\n      width: 18px;\n      height: 18px;\n      animation: spin 1.5s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
+  return "\n\n    .Icon {\n      fill: ".concat(style.colors.icons, ";\n      stroke: ").concat(style.colors.icons, ";\n    }\n\n    .QuestionMarkIcon {\n      fill: transparent;\n    }\n\n    .ChevronLeft, .ChevronRight {\n      position: relative;\n      top: 1px;\n    }\n\n    .ChevronLeft.small, .ChevronRight.small {\n      height: 12px;\n      width: 12px;\n    }\n\n    .Checkmark {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .AlertIcon {\n      height: 20px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 20px;\n      fill: #e42626;\n      stroke: transparent;\n    }\n\n    .CheckMark.small {\n      height: 16px;\n      width: 16px;\n    }\n\n    .DigitalWalletIcon {\n      height: 24px;\n      position: relative;\n      top: -1px;\n      vertical-align: middle;\n      width: 24px;\n    }\n\n    .ButtonPrimary .Icon {\n      fill : ").concat(style.colors.buttonText, ";\n      stroke : ").concat(style.colors.buttonText, ";\n    }\n\n    .Loading {\n      animation: spin 1.5s linear infinite;\n      border-radius: 100%;\n      border: 3px solid ").concat(style.colors.primary, ";\n      border-top: 3px solid rgba(0,0,0,0.1);\n      display: inline-block;\n      height: 18px;\n      left: -1px;\n      position: relative;\n      width: 18px;\n    }\n\n    .Loading.medium {\n      border: 4px solid ").concat(style.colors.primary, ";\n      border-top: 4px solid rgba(0,0,0,0.1);\n      display: inline-block;\n      height: 22px;\n      position: relative;\n      width: 22px; \n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n  ");
 });
 
 var ImageStyle = (function (style) {
@@ -24161,22 +24230,26 @@ var ChangableAmountProvider = (function (props) {
     });
   };
   var _useContext = useContext(ConfigurationContext),
-    accept = _useContext.accept,
     configuredAmount = _useContext.amount;
     _useContext.toAmount;
     var recover = _useContext.recover;
+  var _useContext2 = useContext(ConfigurationContext),
+    accept = _useContext2.accept;
+  if (!accept) {
+    accept = props.accept;
+  }
   useContext(ConfigurationContext);
   var _useState = useState(recover == undefined ? configurationsMissAmounts(accept) : false),
     _useState2 = _slicedToArray(_useState, 2),
     amountsMissing = _useState2[0],
     setAmountsMissing = _useState2[1];
-  var _useContext2 = useContext(WalletContext),
-    account = _useContext2.account;
-  var _useContext3 = useContext(ConversionRateContext),
-    conversionRate = _useContext3.conversionRate,
-    fixedCurrencyConversionRate = _useContext3.fixedCurrencyConversionRate;
-  var _useContext4 = useContext(ErrorContext),
-    setError = _useContext4.setError;
+  var _useContext3 = useContext(WalletContext),
+    account = _useContext3.account;
+  var _useContext4 = useContext(ConversionRateContext),
+    conversionRate = _useContext4.conversionRate,
+    fixedCurrencyConversionRate = _useContext4.fixedCurrencyConversionRate;
+  var _useContext5 = useContext(ErrorContext),
+    setError = _useContext5.setError;
   var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
     acceptWithAmount = _useState4[0],