@depay/widgets 4.2.1 → 4.4.1

package/dist/es/index.js

@@ -1,19 +1,19 @@
 import React, { useState, useContext, useEffect } from 'react';
-import { NavigateStackContext, ReactDialogStack } from 'depay-react-dialog-stack';
-import { getWallet, wallets } from 'depay-web3-wallets';
+import { NavigateStackContext, ReactDialogStack } from '@depay/react-dialog-stack';
+import { getWallet, wallets } from '@depay/web3-wallets';
 import ReactDOM from 'react-dom';
-import { ReactShadowDOM } from 'depay-react-shadow-dom';
+import { ReactShadowDOM } from '@depay/react-shadow-dom';
 import { ethers } from 'ethers';
-import { CONSTANTS } from 'depay-web3-constants';
+import { CONSTANTS } from '@depay/web3-constants';
 import { Decimal } from 'decimal.js';
-import { route } from 'depay-web3-exchanges';
-import { Token } from 'depay-web3-tokens';
-import { Currency } from 'depay-local-currency';
-import { setProvider, provider } from 'depay-web3-client';
-import { route as route$1 } from 'depay-web3-payments';
+import { route } from '@depay/web3-exchanges';
+import { Token } from '@depay/web3-tokens';
+import { Currency } from '@depay/local-currency';
+import { setProviderEndpoints, provider } from '@depay/web3-client';
+import { route as route$1 } from '@depay/web3-payments';
 import Slider from 'react-rangeslider';
-import { TokenImage } from 'depay-react-token-image';
-import { Blockchain } from 'depay-web3-blockchains';
+import { TokenImage } from '@depay/react-token-image';
+import { Blockchain } from '@depay/web3-blockchains';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -1377,8 +1377,7 @@ function ReactDialogStyle (styles) {
   let background =
     typeof styles === 'object' && styles.background ? styles.background : 'rgba(0,0,0,0.4)';
 
-  return (
-    `
+  return `
     .ReactDialog {
       bottom: 0;
       display: table;
@@ -1437,12 +1436,9 @@ function ReactDialogStyle (styles) {
       top: -5vh;
     }
   `
-  )
 }
 
-const _jsxFileName = "/Users/sebastian/Work/DePay/depay-react-dialog/src/components/Dialog.jsx";
-
-
+const _jsxFileName = "/home/runner/work/react-dialog/react-dialog/src/components/Dialog.jsx";
 class Dialog extends React__default['default'].Component {
   constructor(props) {
     super(props);
@@ -1504,7 +1500,7 @@ class Dialog extends React__default['default'].Component {
   }
 }
 
-const _jsxFileName$1 = "/Users/sebastian/Work/DePay/depay-react-dialog/src/index.jsx";
+const _jsxFileName$1 = "/home/runner/work/react-dialog/react-dialog/src/index.jsx";
 class ReactDialog extends React__default['default'].Component {
   constructor(props) {
     super(props);
@@ -1668,7 +1664,7 @@ var CardStyle = (function (style) {
 });
 
 var DialogStyle = (function (style) {
-  return "\n\n    .ReactDialogBackground {\n      background: rgba(0,0,0,0.7);\n    }\n\n    .Dialog {\n      margin: 0 auto;\n      position: relative;\n      width: 420px;\n      box-shadow: 0 0 20px rgba(0,0,0,0.1);\n      border-radius: 0.8rem;\n    }\n\n    @media screen and (max-width: 450px) {\n      \n      .Dialog, .ReactDialogAnimation {\n        width: 100%;\n      }\n\n    }\n\n    @media (orientation: portrait) and (max-width: 900px) {\n\n      .Dialog {\n        align-content: stretch;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n        max-height: 40vh !important;\n      }\n\n      .FooterLink {\n        bottom: 0;\n        left: 0;\n        position: absolute;\n        padding-bottom: 1rem;\n        right: 0;\n        width: 100%;\n      }\n\n      .DialogFooter {\n        padding-bottom: 50px;\n      }\n\n      .ReactDialogStackCell {\n        vertical-align: bottom;\n      }\n\n      .ReactDialogAnimation {\n        bottom: -100px !important;\n        max-height: 66vh !important;\n        top: inherit !important;\n        transition: opacity 0.4s ease, bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n    }\n\n    .DialogBody {\n      background: rgb(248,248,248);\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n\n    .DialogBody.HeightAuto {\n      height: auto;\n    }\n\n    .DialogHeader {\n      background: rgb(248,248,248);\n      border-top-left-radius: 0.8rem;\n      border-top-right-radius: 0.8rem;\n      display: flex;\n      flex-direction: row;\n      position: relative;\n    }\n\n    .DialogHeaderTitle {\n      flex-basis: auto;\n      flex-grow: 1;\n    }\n    \n    .DialogHeaderAction {\n      height: 3rem;\n    }\n\n    .DialogFooter {\n      background: rgb(248,248,248);\n      border-bottom-left-radius: 0.8rem;\n      border-bottom-right-radius: 0.8rem;\n      line-height: 1.5rem;\n      min-height: 2rem;\n      position: relative;\n      text-align: center;\n    }\n\n    .ReactShadowDOMInsideContainer > .ReactDialog {\n      display: table;\n    }\n\n  ";
+  return "\n\n    .ReactDialogBackground {\n      backdrop-filter: blur(5px);\n      background: rgba(0,0,0,0.7);\n    }\n\n    .Dialog {\n      margin: 0 auto;\n      position: relative;\n      width: 420px;\n      box-shadow: 0 0 20px rgba(0,0,0,0.1);\n      border-radius: 0.8rem;\n    }\n\n    @media screen and (max-width: 450px) {\n      \n      .Dialog, .ReactDialogAnimation {\n        width: 100%;\n      }\n\n    }\n\n    @media (orientation: portrait) and (max-width: 900px) {\n\n      .Dialog {\n        align-content: stretch;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n        max-height: 40vh !important;\n      }\n\n      .FooterLink {\n        bottom: 0;\n        left: 0;\n        position: absolute;\n        padding-bottom: 1rem;\n        right: 0;\n        width: 100%;\n      }\n\n      .DialogFooter {\n        padding-bottom: 50px;\n      }\n\n      .ReactDialogStackCell {\n        vertical-align: bottom;\n      }\n\n      .ReactDialogAnimation {\n        bottom: -100px !important;\n        max-height: 66vh !important;\n        top: inherit !important;\n        transition: opacity 0.4s ease, bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n    }\n\n    .DialogBody {\n      background: rgb(248,248,248);\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n\n    .DialogBody.HeightAuto {\n      height: auto;\n    }\n\n    .DialogHeader {\n      background: rgb(248,248,248);\n      border-top-left-radius: 0.8rem;\n      border-top-right-radius: 0.8rem;\n      display: flex;\n      flex-direction: row;\n      position: relative;\n    }\n\n    .DialogHeaderTitle {\n      flex-basis: auto;\n      flex-grow: 1;\n    }\n    \n    .DialogHeaderAction {\n      height: 3rem;\n    }\n\n    .DialogFooter {\n      background: rgb(248,248,248);\n      border-bottom-left-radius: 0.8rem;\n      border-bottom-right-radius: 0.8rem;\n      line-height: 1.5rem;\n      min-height: 2rem;\n      position: relative;\n      text-align: center;\n    }\n\n    .ReactShadowDOMInsideContainer > .ReactDialog {\n      display: table;\n    }\n\n  ";
 });
 
 var FontStyle = (function (style) {
@@ -2024,12 +2020,18 @@ var ChangableAmountProvider = (function (props) {
           });
         })).then(function (amounts) {
           setAcceptWithAmount(props.accept.map(function (configuration, index) {
+            if (amounts[index] == undefined) {
+              return;
+            }
+
             return {
               blockchain: configuration.blockchain,
-              amount: round(amounts[index]) || 1,
+              amount: round(amounts[index]),
               token: configuration.token,
               receiver: configuration.receiver || account
             };
+          }).filter(function (configuration) {
+            return !!configuration;
           }));
         })["catch"](setError);
       })["catch"](setError);
@@ -2086,7 +2088,7 @@ var ConfigurationProvider = (function (props) {
   useEffect(function () {
     if (props.configuration.providers != undefined) {
       Object.entries(props.configuration.providers).forEach(function (entry) {
-        setProvider(entry[0], entry[1]);
+        setProviderEndpoints(entry[0], entry[1]);
       });
     }
   }, [props.configuration]);
@@ -2878,11 +2880,7 @@ var ChangePaymentDialog = (function (props) {
         className: "TokenAmountCell"
       }, format(payment.amount)))), /*#__PURE__*/React.createElement("h3", {
         className: "CardText"
-      }, /*#__PURE__*/React.createElement("small", null, format(round(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))), /*#__PURE__*/React.createElement("div", {
-        className: "CardInfo"
-      }, payment.route.approvalRequired && /*#__PURE__*/React.createElement("span", {
-        className: "Label"
-      }, "Requires Approval")));
+      }, /*#__PURE__*/React.createElement("small", null, format(round(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))));
     }));
   }, [allPaymentRoutesWithData]);
 
@@ -3908,7 +3906,8 @@ var SaleOverviewDialog = (function (props) {
       amount = _useContext.amount;
 
   var _useContext2 = useContext(ConfigurationContext),
-      currencyCode = _useContext2.currencyCode;
+      currencyCode = _useContext2.currencyCode,
+      tokenImage = _useContext2.tokenImage;
 
   var _useContext3 = useContext(PaymentValueContext),
       paymentValue = _useContext3.paymentValue;
@@ -4009,6 +4008,19 @@ var SaleOverviewDialog = (function (props) {
     return /*#__PURE__*/React.createElement(SaleOverviewSkeleton, null);
   }
 
+  var tokenImageElement;
+
+  if (tokenImage) {
+    tokenImageElement = /*#__PURE__*/React.createElement("img", {
+      src: tokenImage
+    });
+  } else {
+    tokenImageElement = /*#__PURE__*/React.createElement(TokenImage, {
+      blockchain: payment.route.blockchain,
+      address: toToken.address
+    });
+  }
+
   return /*#__PURE__*/React.createElement(Dialog$1, {
     header: /*#__PURE__*/React.createElement("div", {
       className: "PaddingTopS PaddingLeftM PaddingRightM"
@@ -4030,10 +4042,7 @@ var SaleOverviewDialog = (function (props) {
     }, /*#__PURE__*/React.createElement("div", {
       className: "CardImage",
       title: payment.name
-    }, /*#__PURE__*/React.createElement(TokenImage, {
-      blockchain: payment.route.blockchain,
-      address: toToken.address
-    })), /*#__PURE__*/React.createElement("div", {
+    }, tokenImageElement), /*#__PURE__*/React.createElement("div", {
       className: "CardBody"
     }, /*#__PURE__*/React.createElement("div", {
       className: "CardBodyWrapper"
@@ -4159,12 +4168,12 @@ var preflight = /*#__PURE__*/function () {
 
 var Sale = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(_ref3) {
-    var amount, sell, sent, confirmed, ensured, failed, error, critical, style, blacklist, providers, currency, connected, closed, document, accept, unmount;
+    var amount, sell, sent, confirmed, ensured, failed, error, critical, style, blacklist, providers, currency, connected, closed, tokenImage, document, accept, unmount;
     return regenerator.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            amount = _ref3.amount, sell = _ref3.sell, sent = _ref3.sent, confirmed = _ref3.confirmed, ensured = _ref3.ensured, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, document = _ref3.document;
+            amount = _ref3.amount, sell = _ref3.sell, sent = _ref3.sent, confirmed = _ref3.confirmed, ensured = _ref3.ensured, failed = _ref3.failed, error = _ref3.error, critical = _ref3.critical, style = _ref3.style, blacklist = _ref3.blacklist, providers = _ref3.providers, currency = _ref3.currency, connected = _ref3.connected, closed = _ref3.closed, tokenImage = _ref3.tokenImage, document = _ref3.document;
             _context2.prev = 1;
             _context2.next = 4;
             return preflight({
@@ -4190,6 +4199,7 @@ var Sale = /*#__PURE__*/function () {
                   unmount: unmount
                 }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
                   configuration: {
+                    tokenImage: tokenImage,
                     amount: amount,
                     sell: sell,
                     currency: currency,