@depay/widgets 4.2.0 → 4.4.0

package/dist/es/index.js

@@ -1,18 +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 { 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 { 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 { 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 {
@@ -1376,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;
@@ -1436,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);
@@ -1503,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);
@@ -2038,7 +2035,9 @@ var ChangableAmountProvider = (function (props) {
     if (amountsMissing && maxRoute) {
       maxRoute.fromToken.readable(maxRoute.fromBalance).then(function (readableMaxAmount) {
         if (maxRoute.fromToken.address == CONSTANTS[maxRoute.blockchain].USD) {
-          setMaxAmount(parseInt((parseFloat(readableMaxAmount) * conversionRate).toFixed(0), 10));
+          var _maxAmount = parseFloat(new Decimal(readableMaxAmount).mul(conversionRate).toString());
+
+          setMaxAmount(_maxAmount > 10 ? Math.round(_maxAmount) : _maxAmount);
         } else {
           route({
             blockchain: maxRoute.blockchain,
@@ -2054,7 +2053,8 @@ var ChangableAmountProvider = (function (props) {
               address: CONSTANTS[maxRoute.blockchain].USD
             }).then(function (readableMaxAmount) {
               var slippage = 1.01;
-              setMaxAmount(parseInt((parseFloat(readableMaxAmount) / slippage * conversionRate).toFixed(0), 10));
+              var maxAmount = parseFloat(new Decimal(readableMaxAmount).div(slippage).mul(conversionRate).toString());
+              setMaxAmount(maxAmount > 10 ? Math.round(maxAmount) : round(maxAmount));
             })["catch"](setError);
           })["catch"](setError);
         }
@@ -2082,7 +2082,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]);
@@ -2689,16 +2689,22 @@ var ChangeAmountDialog = (function (props) {
     setInputAmount(value);
   };
 
-  var toValidValue = function toValidValue(value) {
+  var toValidStep = function toValidStep(value) {
     if (step) {
-      value = Math.round(value / step) * step;
+      value = parseFloat(new Decimal(Math.floor(new Decimal(value).div(step))).mul(step).toString());
     }
 
+    return value;
+  };
+
+  var toValidValue = function toValidValue(value) {
+    value = toValidStep(value);
     value = Math.max(min, Math.min(value, maxAmount));
+    value = toValidStep(value);
     return value;
   };
 
-  var ensureValidity = function ensureValidity(value) {
+  var setValidValue = function setValidValue(value) {
     setInputAmount(toValidValue(value));
   };
 
@@ -2731,7 +2737,7 @@ var ChangeAmountDialog = (function (props) {
         changeAmount(event.target.value);
       },
       onBlur: function onBlur(event) {
-        ensureValidity(event.target.value);
+        setValidValue(event.target.value);
       }
     })), /*#__PURE__*/React.createElement(Slider, {
       max: parseFloat(maxAmount),
@@ -2739,19 +2745,19 @@ var ChangeAmountDialog = (function (props) {
       step: step,
       value: parseFloat(inputAmount),
       onChange: function onChange(value) {
-        changeAmount(value);
+        changeAmount(toValidStep(value));
       },
       onChangeComplete: function onChangeComplete() {
-        ensureValidity(inputAmount);
+        setValidValue(inputAmount);
       }
     }), /*#__PURE__*/React.createElement("div", {
       style: {
         height: '40px'
       }
-    }, /*#__PURE__*/React.createElement("div", null, format(maxAmount), /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React.createElement("div", null, format(toValidStep(maxAmount)), /*#__PURE__*/React.createElement("button", {
       className: "TextButton",
       onClick: function onClick() {
-        changeAmount(maxAmount);
+        changeAmount(toValidValue(maxAmount));
       }
     }, "(Max)")))))),
     footer: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
@@ -3898,7 +3904,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;
@@ -3999,6 +4006,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"
@@ -4020,10 +4040,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"
@@ -4149,12 +4166,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({
@@ -4180,6 +4197,7 @@ var Sale = /*#__PURE__*/function () {
                   unmount: unmount
                 }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
                   configuration: {
+                    tokenImage: tokenImage,
                     amount: amount,
                     sell: sell,
                     currency: currency,