@depay/widgets 12.0.2 → 12.0.4

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({
-      blockchain: undefined
-    }),
+    connectingExtension = _useState6[0],
+    setConnectingExtension = _useState6[1];
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    selection = _useState8[0];
-    _useState8[1];
-  var _useState9 = useState(false),
+    connectingApp = _useState8[0],
+    setConnectingApp = _useState8[1];
+  var _useState9 = useState(),
     _useState10 = _slicedToArray(_useState9, 2),
-    showConnectExtensionWarning = _useState10[0],
-    setShowConnectExtensionWarning = _useState10[1];
+    redirectUri = _useState10[0],
+    setRedirectUri = _useState10[1];
+  var _useState11 = useState({
+      blockchain: undefined
+    }),
+    _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,8 @@ var ConnectStack = (function (props) {
         openInApp: openInApp,
         connectViaRedirect: connectViaRedirect,
         connectExtension: connectExtension,
+        connectingExtension: connectingExtension,
+        connectingApp: connectingApp,
         showConnectExtensionWarning: showConnectExtensionWarning,
         continueWithSolanaPay: props.continueWithSolanaPay
       })
@@ -23174,7 +23244,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) {
@@ -23475,8 +23545,10 @@ function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t
 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 Currency({
+  var currencyCode = typeof props.configuration.currency === 'string' ? new Currency({
     code: props.configuration.currency
+  }).code : new Currency({
+    amount: 0
   }).code;
   var _useState = useState(!((_props$configuration = props.configuration) !== null && _props$configuration !== void 0 && _props$configuration.integration) ? _objectSpread$6(_objectSpread$6({}, props.configuration), {}, {
       currencyCode: currencyCode
@@ -24161,10 +24233,10 @@ var ChangableAmountProvider = (function (props) {
     });
   };
   var _useContext = useContext(ConfigurationContext),
-    accept = _useContext.accept,
     configuredAmount = _useContext.amount;
     _useContext.toAmount;
-    var recover = _useContext.recover;
+    var recover = _useContext.recover,
+    accept = _useContext.accept;
   useContext(ConfigurationContext);
   var _useState = useState(recover == undefined ? configurationsMissAmounts(accept) : false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -24782,9 +24854,12 @@ var InsufficientAmountOfTokensDialog = (function (props) {
     _useContext.navigate;
     var set = _useContext.set;
   var _useContext2 = useContext(ConfigurationContext),
-    accept = _useContext2.accept;
-  var _useContext3 = useContext(ClosableContext),
-    close = _useContext3.close;
+    accept = _useContext2.accept,
+    sell = _useContext2.sell;
+  var _useContext3 = useContext(ChangableAmountContext),
+    acceptWithAmount = _useContext3.acceptWithAmount;
+  var _useContext4 = 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;
@@ -24995,7 +25070,7 @@ var InsufficientAmountOfTokensDialog = (function (props) {
         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();
                 });
@@ -25047,7 +25122,7 @@ var InsufficientAmountOfTokensDialog = (function (props) {
                   })) {
                     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) {
@@ -25092,15 +25167,15 @@ var InsufficientAmountOfTokensDialog = (function (props) {
                     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;
@@ -29637,6 +29712,7 @@ var Sale = function Sale(_x2) {
               }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
                 configuration: {
                   type: 'sale',
+                  accept: accept,
                   tokenImage: tokenImage,
                   amount: amount,
                   sell: sell,
@@ -29656,9 +29732,7 @@ var Sale = function Sale(_x2) {
                 container: container,
                 connected: connected,
                 unmount: unmount
-              }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, {
-                accept: accept
-              }, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
+              }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(ConversionRateProvider, null, /*#__PURE__*/React.createElement(ChangableAmountProvider, null, /*#__PURE__*/React.createElement(TransactionTrackingProvider, null, /*#__PURE__*/React.createElement(PaymentTrackingProvider, {
                 document: ensureDocument(document)
               }, /*#__PURE__*/React.createElement(SaleRoutingProvider, {
                 container: container,