@depay/widgets 12.0.2 → 12.0.4

package/dist/umd/index.evm.js

@@ -21965,7 +21965,28 @@
         className: "Alert"
       }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: "FontWeightBold PaddingBottomXS"
-      }, "You wallet extension window is already asking to connect. It might be hidden."))), /*#__PURE__*/React__default["default"].createElement("button", {
+      }, "You wallet extension window is already asking to connect. It might be hidden."))), props.connectingExtension && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Card disabled small PaddingTopS PaddingRightXS PaddingBottomS PaddingLeftXS",
+        style: {
+          height: '50px'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingRightXS PaddingLeftS TextCenter",
+        style: {
+          width: "50px"
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Loading Icon medium",
+        style: {
+          position: 'relative',
+          top: '4px',
+          left: '1px'
+        }
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingLeftS LineHeightXS"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardText FontWeightMedium"
+      }, "Connecting extension"))), !props.connectingExtension && /*#__PURE__*/React__default["default"].createElement("button", {
         onClick: function onClick() {
           return props.connectExtension(props.wallet);
         },
@@ -21991,7 +22012,28 @@
         className: "CardText FontWeightMedium"
       }, "Connect extension")))), connectAppIsAvailable && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingBottomXS"
-      }, /*#__PURE__*/React__default["default"].createElement("button", {
+      }, props.connectingApp && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Card disabled small PaddingTopS PaddingRightXS PaddingBottomS PaddingLeftXS",
+        style: {
+          height: '50px'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingTopXS PaddingRightXS PaddingLeftS TextCenter",
+        style: {
+          width: "50px"
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "Loading Icon medium",
+        style: {
+          position: 'relative',
+          top: '4px',
+          left: '1px'
+        }
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "PaddingLeftS LineHeightXS"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "CardText FontWeightMedium"
+      }, "Connecting app"))), !props.connectingApp && /*#__PURE__*/React__default["default"].createElement("button", {
         onClick: function onClick() {
           return props.connectViaRedirect(props.wallet);
         },
@@ -22584,20 +22626,28 @@
       _useState4 = _slicedToArray(_useState3, 2),
       platform = _useState4[0],
       setPlatform = _useState4[1];
-    var _useState5 = React.useState(),
+    var _useState5 = React.useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      redirectUri = _useState6[0],
-      setRedirectUri = _useState6[1];
-    var _useState7 = React.useState({
-        blockchain: undefined
-      }),
+      connectingExtension = _useState6[0],
+      setConnectingExtension = _useState6[1];
+    var _useState7 = React.useState(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      selection = _useState8[0];
-      _useState8[1];
-    var _useState9 = React.useState(false),
+      connectingApp = _useState8[0],
+      setConnectingApp = _useState8[1];
+    var _useState9 = React.useState(),
       _useState10 = _slicedToArray(_useState9, 2),
-      showConnectExtensionWarning = _useState10[0],
-      setShowConnectExtensionWarning = _useState10[1];
+      redirectUri = _useState10[0],
+      setRedirectUri = _useState10[1];
+    var _useState11 = React.useState({
+        blockchain: undefined
+      }),
+      _useState12 = _slicedToArray(_useState11, 2),
+      selection = _useState12[0];
+      _useState12[1];
+    var _useState13 = React.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) {
@@ -22615,10 +22665,18 @@
     };
     var connectExtension = function connectExtension(wallet) {
       setShowConnectExtensionWarning(false);
+      setConnectingExtension(true);
       wallet = new web3WalletsEvm.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);
@@ -22695,6 +22753,10 @@
       if (!platform) {
         return;
       }
+      setConnectingApp(true);
+      setTimeout(function () {
+        setConnectingApp(false);
+      }, 5000);
       if (['WalletConnectV1', 'WalletConnectV2'].includes(platform.connect)) {
         localStorage[atob('ZGVwYXk6d2FsbGV0czp3YzI6cHJvamVjdElk')] = atob('YjFmYzJmMDZlYTIxMDdmY2Q5OWM2OGY0MTI3MTQxYWI=');
         var _wallet = new web3WalletsEvm.wallets[platform.connect]();
@@ -22719,7 +22781,10 @@
             });
           }
         }).then(function (account) {
+          setConnectingApp(false);
           resolve(account, _wallet);
+        })["catch"](function () {
+          setConnectingApp(false);
         });
       } else if (platform.connect === 'SolanaMobileWalletAdapter') {
         var _wallet2 = new web3WalletsEvm.wallets[platform.connect]();
@@ -22727,7 +22792,10 @@
           name: walletMetaData.name,
           logo: walletMetaData.logo
         }).then(function (account) {
+          setConnectingApp(false);
           resolve(account, _wallet2);
+        })["catch"](function () {
+          setConnectingApp(false);
         });
       }
     };
@@ -22770,6 +22838,8 @@
           openInApp: openInApp,
           connectViaRedirect: connectViaRedirect,
           connectExtension: connectExtension,
+          connectingExtension: connectingExtension,
+          connectingApp: connectingApp,
           showConnectExtensionWarning: showConnectExtensionWarning,
           continueWithSolanaPay: props.continueWithSolanaPay
         })
@@ -23170,7 +23240,7 @@
   });
 
   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) {
@@ -23510,8 +23580,10 @@
   var PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtqsu0wy94cpz90W4pGsJ\nSf0bfvmsq3su+R1J4AoAYz0XoAu2MXJZM8vrQvG3op7OgB3zze8pj4joaoPU2piT\ndH7kcF4Mde6QG4qKEL3VE+J8CL3qK2dUY0Umu20x/O9O792tlv8+Q/qAVv8yPfdM\nn5Je9Wc7VI5XeIBKP2AzsCkrXuzQlR48Ac5LpViNSSLu0mz5NTBoHkW2sz1sNWc6\nUpYISJkiKTvYc8Bo4p5xD6+ZmlL4hj1Ad/+26SjYcisX2Ut4QD7YKRBP2SbItVkI\nqp9mp6c6MCKNmEUkosxAr0KVfOcrk6/fcc4tI8g+KYZ32G11Ri8Xo4fgHH06DLYP\n3QIDAQAB\n-----END PUBLIC KEY-----\n";
   var ConfigurationProvider = (function (props) {
     var _props$configuration, _props$configuration5;
-    var currencyCode = new localCurrency.Currency({
+    var currencyCode = typeof props.configuration.currency === 'string' ? new localCurrency.Currency({
       code: props.configuration.currency
+    }).code : new localCurrency.Currency({
+      amount: 0
     }).code;
     var _useState = React.useState(!((_props$configuration = props.configuration) !== null && _props$configuration !== void 0 && _props$configuration.integration) ? _objectSpread$5(_objectSpread$5({}, props.configuration), {}, {
         currencyCode: currencyCode
@@ -24196,10 +24268,10 @@
       });
     };
     var _useContext = React.useContext(ConfigurationContext),
-      accept = _useContext.accept,
       configuredAmount = _useContext.amount;
       _useContext.toAmount;
-      var recover = _useContext.recover;
+      var recover = _useContext.recover,
+      accept = _useContext.accept;
     React.useContext(ConfigurationContext);
     var _useState = React.useState(recover == undefined ? configurationsMissAmounts(accept) : false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24817,9 +24889,12 @@
       _useContext.navigate;
       var set = _useContext.set;
     var _useContext2 = React.useContext(ConfigurationContext),
-      accept = _useContext2.accept;
-    var _useContext3 = React.useContext(ClosableContext),
-      close = _useContext3.close;
+      accept = _useContext2.accept,
+      sell = _useContext2.sell;
+    var _useContext3 = React.useContext(ChangableAmountContext),
+      acceptWithAmount = _useContext3.acceptWithAmount;
+    var _useContext4 = React.useContext(ClosableContext),
+      close = _useContext4.close;
     var setRecommendation = function setRecommendation(_x) {
       return (_ref2 = _ref2 || _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee3(_ref) {
         var route, accept, nativeAvailableAsset, token, asset, _ref3, _ref4;
@@ -25030,7 +25105,7 @@
           return regenerator.wrap(function _callee6$(_context6) {
             while (1) switch (_context6.prev = _context6.next) {
               case 0:
-                directTransfer = accept.find(function (accept) {
+                directTransfer = !sell && (acceptWithAmount || accept).find(function (accept) {
                   return props.assets.find(function (asset) {
                     return accept.blockchain === asset.blockchain && accept.token.toLowerCase() === asset.address.toLowerCase();
                   });
@@ -25082,7 +25157,7 @@
                     })) {
                       return;
                     } // consdier only major tokens for this
-                    return accept.map(function (_x4) {
+                    return (acceptWithAmount || accept).map(function (_x4) {
                       return (_ref6 = _ref6 || _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee4(accept) {
                         return regenerator.wrap(function _callee4$(_context4) {
                           while (1) switch (_context4.prev = _context4.next) {
@@ -25127,15 +25202,15 @@
                       return regenerator.wrap(function _callee5$(_context5) {
                         while (1) switch (_context5.prev = _context5.next) {
                           case 0:
-                            route = (routes || []).flat().find(function (route) {
-                              return accept.find(function (accept) {
+                            route = (routes.filter(Boolean) || []).flat().find(function (route) {
+                              return (acceptWithAmount || accept).find(function (accept) {
                                 return accept.blockchain === route.blockchain && accept.token.toLowerCase() === route.tokenOut.toLowerCase();
                               });
                             }) || routes.flat()[0];
                             if (!route) {
                               set(['NoPaymentOptionFound']);
                             } else {
-                              recommendedAccept = accept.find(function (accept) {
+                              recommendedAccept = (acceptWithAmount || accept).find(function (accept) {
                                 return accept.blockchain === route.blockchain && accept.token.toLowerCase() === route.tokenOut.toLowerCase();
                               }) || accept.find(function (accept) {
                                 return accept.blockchain === route.blockchain;
@@ -28422,6 +28497,7 @@
                 }, /*#__PURE__*/React__default["default"].createElement(ConfigurationProvider, {
                   configuration: {
                     type: 'sale',
+                    accept: accept,
                     tokenImage: tokenImage,
                     amount: amount,
                     sell: sell,
@@ -28441,9 +28517,7 @@
                   container: container,
                   connected: connected,
                   unmount: unmount
-                }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, {
-                  accept: accept
-                }, /*#__PURE__*/React__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
+                }, /*#__PURE__*/React__default["default"].createElement(NavigateProvider, null, /*#__PURE__*/React__default["default"].createElement(ConversionRateProvider, null, /*#__PURE__*/React__default["default"].createElement(ChangableAmountProvider, null, /*#__PURE__*/React__default["default"].createElement(TransactionTrackingProvider, null, /*#__PURE__*/React__default["default"].createElement(PaymentTrackingProvider, {
                   document: ensureDocument(document)
                 }, /*#__PURE__*/React__default["default"].createElement(SaleRoutingProvider, {
                   container: container,