@depay/widgets 6.28.2 → 6.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/esm/index.bundle.js +45 -34
  2. package/dist/esm/index.js +40 -33
  3. package/dist/umd/index.bundle.js +45 -34
  4. package/dist/umd/index.js +40 -33
  5. package/package.json +2 -2
package/dist/esm/index.bundle.js CHANGED
@@ -49813,7 +49813,7 @@ var ErrorProvider = (function (props) {
49813
49813
  });
49814
49814
 
49815
49815
  var AlertStyle = (function (style) {
49816
- return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 0.4rem;\n font-weight: 500;\n padding: 0.5rem;\n }\n ";
49816
+ return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 7px;\n font-weight: 500;\n padding: 8px;\n }\n ";
49817
49817
  });
49818
49818
 
49819
49819
  var BlockchainLogoStyle = (function (style) {
@@ -49821,23 +49821,23 @@ var BlockchainLogoStyle = (function (style) {
49821
49821
  });
49822
49822
 
49823
49823
  var ButtonCircularStyle = (function () {
49824
- return "\n\n .ButtonCircular {\n border-radius: 99rem;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
49824
+ return "\n\n .ButtonCircular {\n border-radius: 9999px;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
49825
49825
  });
49826
49826
 
49827
49827
  var ButtonPrimaryStyle = (function (style) {
49828
- return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 0.8rem;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 1.3rem;\n font-weight: 400;\n line-height: 2.8rem;\n height: 3.6rem;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 0.4rem 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
49828
+ return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 13px;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 21px;\n font-weight: 400;\n line-height: 45px;\n height: 58px;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 7px 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
49829
49829
  });
49830
49830
 
49831
49831
  var CardStyle = (function (style) {
49832
- return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 0.8rem;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 0.5rem;\n min-height: 4.78rem;\n padding: 1rem 0.6rem;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 4.3rem;\n padding: 0.4rem 1.3rem;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 1.2rem;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 1rem;\n }\n\n .Card.Row .CardImage {\n width: 2.5rem;\n }\n\n .Card.Row .CardImage img {\n height: 1.9rem;\n width: 1.9rem;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 0.5rem 0.5rem;\n margin: 0;\n }\n\n .CardImage.small {\n width: 1.7rem;\n }\n\n .CardImage.small img {\n height: 1.4rem;\n width: 1.4rem;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 0.4rem;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 3.6rem;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 1.4rem;\n padding-left: 0.6rem;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 99rem;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 0.9rem;\n color: rgb(150,150,150);\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 1.3rem;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText small {\n font-size: 1.1rem;\n color: rgb(150,150,150);\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
49832
+ return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 13px;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 8px;\n min-height: 76px;\n padding: 16px 10px;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 69px;\n padding: 7px 21px;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 19px;\n line-height: 40px;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 17px;\n }\n\n .Card.Row .CardImage {\n width: 40px;\n }\n\n .Card.Row .CardImage img {\n height: 30px;\n width: 30px;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 8px 8px;\n margin: 0;\n }\n\n .CardImage.small {\n width: 27px;\n }\n\n .CardImage.small img {\n height: 27px;\n width: 27px;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 7px;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 58px;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 27px;\n padding-left: 10px;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 9999px;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 15px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 21px;\n line-height: 26px;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText.small, .CardText.small small {\n font-size: 18px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
49833
49833
  });
49834
49834
 
49835
49835
  var DialogStyle = (function (style) {
49836
- return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\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 background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\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 min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\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 ";
49836
+ return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\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: 13px;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 13px;\n border-top-radius: 13px;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n border-top-left-radius: 13px;\n border-top-right-radius: 13px;\n min-height: 54px;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 48px;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 48px;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 13px;\n border-bottom-right-radius: 13px;\n line-height: 24px;\n min-height: 32px;\n position: relative;\n text-align: center;\n }\n\n ";
49837
49837
  });
49838
49838
 
49839
49839
  var FontStyle = (function (style) {
49840
- return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 1rem;\n }\n\n .FontSizeM {\n font-size: 1.2rem;\n }\n\n .FontSizeL {\n font-size: 1.4rem;\n }\n\n .FontSizeXL {\n font-size: 2.0rem;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
49840
+ return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 16px;\n }\n\n .FontSizeM {\n font-size: 19px;\n }\n\n .FontSizeL {\n font-size: 23px;\n }\n\n .FontSizeXL {\n font-size: 32px;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
49841
49841
  });
49842
49842
 
49843
49843
  var GraphicStyle = (function () {
@@ -49860,10 +49860,6 @@ var InputStyle = (function (style) {
49860
49860
  return "\n\n .Input {\n background: none;\n border: 1px solid transparent;\n margin: 0;\n outline: none !important;\n padding: 0 0 0 14px;\n width: 100%;\n }\n\n .Input::placeholder {\n color: rgb(210,210,210);\n }\n \n ";
49861
49861
  });
49862
49862
 
49863
- var LabelStyle = (function (style) {
49864
- return "\n\n .Label {\n background: rgb(248,248,248);\n border-radius: 999px;\n color: ".concat(style.colors.primary, ";\n font-size: 0.8rem;\n padding: 0.1rem 0.5rem;\n margin: 0.1rem;\n }\n\n ");
49865
- });
49866
-
49867
49863
  var LinkStyle = (function (style) {
49868
49864
  return "\n\n .Link {\n color: ".concat(style.colors.primary, ";\n cursor: pointer;\n text-decoration: none;\n }\n\n .Link:hover {\n filter: brightness(0.8);\n }\n\n .Link:active {\n filter: brightness(1.0);\n }\n ");
49869
49865
  });
@@ -49877,11 +49873,11 @@ var OpacityStyle = (function (style) {
49877
49873
  });
49878
49874
 
49879
49875
  var PaddingStyle = (function () {
49880
- return "\n\n .PaddingTopXS {\n padding-top: 0.2rem;\n }\n\n .PaddingRightXS {\n padding-right: 0.2rem;\n }\n\n .PaddingBottomXS {\n padding-bottom: 0.2rem;\n }\n\n .PaddingLeftXS {\n padding-left: 0.2rem; \n }\n\n .PaddingTopS {\n padding-top: 0.8rem;\n }\n\n .PaddingRightS {\n padding-right: 0.8rem;\n }\n\n .PaddingBottomS {\n padding-bottom: 0.8rem;\n }\n\n .PaddingLeftS {\n padding-left: 0.8rem; \n }\n\n .PaddingTopM {\n padding-top: 1.2rem;\n }\n\n .PaddingRightM {\n padding-right: 1.2rem;\n }\n\n .PaddingBottomM {\n padding-bottom: 1.2rem;\n }\n\n .PaddingLeftM {\n padding-left: 1.2rem; \n }\n\n .PaddingTopL {\n padding-top: 1.8rem;\n }\n\n .PaddingRightL {\n padding-right: 1.8rem;\n }\n\n .PaddingBottomL {\n padding-bottom: 1.8rem;\n }\n\n .PaddingLeftL {\n padding-left: 1.28em; \n }\n ";
49876
+ return "\n\n .PaddingTopXS {\n padding-top: 3px;\n }\n\n .PaddingRightXS {\n padding-right: 3px;\n }\n\n .PaddingBottomXS {\n padding-bottom: 3px;\n }\n\n .PaddingLeftXS {\n padding-left: 3px; \n }\n\n .PaddingTopS {\n padding-top: 13px;\n }\n\n .PaddingRightS {\n padding-right: 13px;\n }\n\n .PaddingBottomS {\n padding-bottom: 13px;\n }\n\n .PaddingLeftS {\n padding-left: 13px; \n }\n\n .PaddingTopM {\n padding-top: 19px;\n }\n\n .PaddingRightM {\n padding-right: 19px;\n }\n\n .PaddingBottomM {\n padding-bottom: 19px;\n }\n\n .PaddingLeftM {\n padding-left: 19px; \n }\n\n .PaddingTopL {\n padding-top: 29px;\n }\n\n .PaddingRightL {\n padding-right: 29px;\n }\n\n .PaddingBottomL {\n padding-bottom: 29px;\n }\n\n .PaddingLeftL {\n padding-left: 29px; \n }\n ";
49881
49877
  });
49882
49878
 
49883
49879
  var PoweredByStyle = (function (style) {
49884
- return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 0.2rem;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 0.78rem;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 0.5rem;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
49880
+ return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 3px;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .contained .PoweredByWrapper {\n position: absolute;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 14px;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 8px;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
49885
49881
  });
49886
49882
 
49887
49883
  var RangeSliderStyle = (function (style) {
@@ -49893,7 +49889,7 @@ var ResetStyle = (function () {
49893
49889
  });
49894
49890
 
49895
49891
  var SearchStyle = (function (style) {
49896
- return "\n\n .Search {\n border-radius: 0.8rem;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 1.2rem;\n padding: 0.8rem;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
49892
+ return "\n\n .Search {\n border-radius: 13px;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 19px;\n padding: 13px;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
49897
49893
  });
49898
49894
 
49899
49895
  var SkeletonStyle = (function () {
@@ -49901,7 +49897,7 @@ var SkeletonStyle = (function () {
49901
49897
  });
49902
49898
 
49903
49899
  var TableStyle = (function (style) {
49904
- return "\n\n .Table {\n border-collapse: separate;\n border-radius: 0.4rem;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n font-size: 94%;\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 90%;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 0.5rem 0.9rem;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
49900
+ return "\n\n .Table {\n border-collapse: separate;\n border-radius: 7px;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 14px;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 8px 15px;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
49905
49901
  });
49906
49902
 
49907
49903
  var TextButtonStyle = (function (style) {
@@ -49909,7 +49905,7 @@ var TextButtonStyle = (function (style) {
49909
49905
  });
49910
49906
 
49911
49907
  var TextStyle = (function (style) {
49912
- return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 2.0rem;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 1.2rem;\n border: 0.5rem solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 0.9rem;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
49908
+ return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .Text {\n font-size: 16px;\n line-height: 24px\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 32px;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 19px;\n border: 8px solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 15px;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
49913
49909
  });
49914
49910
 
49915
49911
  var TokenAmountStyle = (function () {
@@ -49917,11 +49913,11 @@ var TokenAmountStyle = (function () {
49917
49913
  });
49918
49914
 
49919
49915
  var TokenImageStyle = (function (style) {
49920
- return "\n\n .TokenImage img {\n border-radius: 99rem;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .TokenImage.medium img {\n height: 5.8rem;\n width: 5.8rem;\n }\n ";
49916
+ return "\n\n .TokenImage img {\n border-radius: 9999px;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .TokenImage.medium img {\n height: 93px;\n width: 93px;\n }\n ";
49921
49917
  });
49922
49918
 
49923
49919
  var TooltipStyle = (function (style) {
49924
- return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 0.6rem;\n color: ").concat(style.colors.buttonText, ";\n padding: 0.6rem 0.8rem;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
49920
+ return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 10px;\n color: ").concat(style.colors.buttonText, ";\n padding: 10px 13px;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
49925
49921
  });
49926
49922
 
49927
49923
  var styleRenderer = (function (style) {
@@ -49934,7 +49930,7 @@ var styleRenderer = (function (style) {
49934
49930
  },
49935
49931
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
49936
49932
  }, style);
49937
- return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
49933
+ return [ResetStyle(), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), FontStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
49938
49934
  });
49939
49935
 
49940
49936
  const insideContainerClass = 'ReactShadowDOMInsideContainer';
@@ -68153,7 +68149,7 @@ let subtractFee = ({ amount, paymentRoute, fee })=> {
68153
68149
 
68154
68150
  let transactionFeeAmount = ({ paymentRoute, fee })=> {
68155
68151
  if(typeof fee.amount == 'string' && fee.amount.match('%')) {
68156
- return BigNumber.from(paymentRoute.toAmount).div(100).mul(parseFloat(fee.amount)).toString()
68152
+ return BigNumber.from(paymentRoute.toAmount).div(1000).mul(parseFloat(fee.amount)*10).toString()
68157
68153
  } else if(typeof fee.amount == 'string') {
68158
68154
  return fee.amount
68159
68155
  } else if(typeof fee.amount == 'number') {
@@ -85504,6 +85500,10 @@ function assetsToRoutes({ assets, blacklist, accept, from, event, fee }) {
85504
85500
  }
85505
85501
 
85506
85502
  function route({ accept, from, whitelist, blacklist, event, fee, update }) {
85503
+ if(fee && fee.amount && typeof(fee.amount) == 'string' && fee.amount.match(/\.\d\d+\%/)) {
85504
+ throw('Only up to 1 decimal is supported for fee amounts!')
85505
+ }
85506
+
85507
85507
  return new Promise(async (resolveAll, rejectAll)=>{
85508
85508
 
85509
85509
  let priority = [];
@@ -87951,7 +87951,9 @@ var ChangeAmountDialog = (function (props) {
87951
87951
  style: {
87952
87952
  height: '40px'
87953
87953
  }
87954
- }, /*#__PURE__*/react.createElement("div", null, format(toValidStep(maxAmount)), /*#__PURE__*/react.createElement("button", {
87954
+ }, /*#__PURE__*/react.createElement("div", {
87955
+ className: "FontSizeS"
87956
+ }, format(toValidStep(maxAmount)), /*#__PURE__*/react.createElement("button", {
87955
87957
  className: "TextButton",
87956
87958
  onClick: function onClick() {
87957
87959
  changeAmount(toValidValue(maxAmount));
@@ -88078,7 +88080,7 @@ var ChangePaymentDialog = (function (props) {
88078
88080
  }, payment.symbol), /*#__PURE__*/react.createElement("span", null, "\xA0"), /*#__PURE__*/react.createElement("span", {
88079
88081
  className: "TokenAmountCell"
88080
88082
  }, format(payment.amount)))), /*#__PURE__*/react.createElement("h3", {
88081
- className: "CardText"
88083
+ className: "CardText small"
88082
88084
  }, /*#__PURE__*/react.createElement("small", null, format(round$1(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))));
88083
88085
  }));
88084
88086
  }, [allPaymentRoutesWithData]);
@@ -89354,7 +89356,7 @@ var SignLoginDialog = (function (props) {
89354
89356
  }, "Wallet Login"), /*#__PURE__*/react.createElement("div", {
89355
89357
  className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
89356
89358
  }, /*#__PURE__*/react.createElement("p", {
89357
- className: "FontSizeM PaddingLeftM PaddingRightM"
89359
+ className: "FontSizeM PaddingLeftM PaddingRightM PaddingBottomS"
89358
89360
  }, "Please click \"Log in\" and sign the message with your connected wallet."))),
89359
89361
  footer: /*#__PURE__*/react.createElement("div", {
89360
89362
  className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
@@ -89528,7 +89530,7 @@ var PaymentOverviewSkeleton = (function (props) {
89528
89530
  className: "SkeletonBackground"
89529
89531
  }))), selectedRoute == undefined && slowRouting && /*#__PURE__*/react.createElement("div", {
89530
89532
  className: "TextCenter Opacity05 PaddingTopS"
89531
- }, /*#__PURE__*/react.createElement("strong", null, "Still loading your wallet balances...")))
89533
+ }, /*#__PURE__*/react.createElement("strong", null, "Loading payment routes...")))
89532
89534
  });
89533
89535
  });
89534
89536
 
@@ -89959,13 +89961,22 @@ var SaleOverviewDialog = (function (props) {
89959
89961
  setSalePerTokenValue = _useState2[1];
89960
89962
 
89961
89963
  react.useEffect(function () {
89962
- if (paymentValue && (amountConfiguration == undefined || amountConfiguration.token != true)) {
89963
- setSalePerTokenValue(new Currency({
89964
- amount: (paymentValue.amount / parseFloat(toTokenReadableAmount)).toFixed(2),
89964
+ if (paymentValue && (amountConfiguration == undefined || amountConfiguration.token != true) && toTokenReadableAmount) {
89965
+ var UsdAmountPerToken = paymentValue.amount / parseFloat(toTokenReadableAmount);
89966
+ var readableLocalizedAmountPerToken = new Currency({
89967
+ amount: UsdAmountPerToken,
89968
+ code: paymentValue.code
89969
+ }).toString();
89970
+ var zero = new Currency({
89971
+ amount: 0,
89965
89972
  code: paymentValue.code
89966
- }).toString());
89973
+ }).toString();
89974
+
89975
+ if (readableLocalizedAmountPerToken != zero) {
89976
+ setSalePerTokenValue(readableLocalizedAmountPerToken);
89977
+ }
89967
89978
  }
89968
- }, [paymentValue]);
89979
+ }, [paymentValue, toTokenReadableAmount]);
89969
89980
 
89970
89981
  if (toToken == undefined || toTokenReadableAmount == undefined || payment == undefined || paymentValue == undefined) {
89971
89982
  return /*#__PURE__*/react.createElement(SaleOverviewSkeleton, null);
@@ -90020,7 +90031,7 @@ var SaleOverviewDialog = (function (props) {
90020
90031
  }, toToken.symbol), /*#__PURE__*/react.createElement("span", null, "\xA0"), /*#__PURE__*/react.createElement("span", {
90021
90032
  className: "TokenAmountCell"
90022
90033
  }, format(toTokenReadableAmount)))), salePerTokenValue && /*#__PURE__*/react.createElement("h3", {
90023
- className: "CardText"
90034
+ className: "CardText small"
90024
90035
  }, /*#__PURE__*/react.createElement("small", null, salePerTokenValue, " per token")))), /*#__PURE__*/react.createElement("div", {
90025
90036
  className: "CardAction"
90026
90037
  }, /*#__PURE__*/react.createElement(ChevronRight, null))), /*#__PURE__*/react.createElement("div", {
@@ -90331,11 +90342,11 @@ var ConfirmTokenSelectionDialog = (function (props) {
90331
90342
  })), /*#__PURE__*/react.createElement("div", {
90332
90343
  className: "PaddingTopS TextCenter"
90333
90344
  }, /*#__PURE__*/react.createElement("div", {
90334
- className: "Alert"
90345
+ className: "Alert FontSizeS"
90335
90346
  }, /*#__PURE__*/react.createElement("strong", null, "Please review this information"))), /*#__PURE__*/react.createElement("div", {
90336
90347
  className: "PaddingTopXS"
90337
90348
  }, /*#__PURE__*/react.createElement("table", {
90338
- className: "Table TextLeft"
90349
+ className: "Table TextLeft FontSizeS"
90339
90350
  }, /*#__PURE__*/react.createElement("tbody", null, /*#__PURE__*/react.createElement("tr", {
90340
90351
  className: "small TextCenter"
90341
90352
  }, /*#__PURE__*/react.createElement("td", {
@@ -107841,7 +107852,7 @@ var SelectTokenDialog = (function (props) {
107841
107852
  className: "transparent",
107842
107853
  src: blockchain.logo
107843
107854
  })), /*#__PURE__*/react.createElement("div", {
107844
- className: "CardBody"
107855
+ className: "CardBody FontSizeS"
107845
107856
  }, blockchain.label), /*#__PURE__*/react.createElement("div", {
107846
107857
  className: "CardAction"
107847
107858
  }, /*#__PURE__*/react.createElement(ChevronRight, null)))), /*#__PURE__*/react.createElement("div", {
@@ -107859,7 +107870,7 @@ var SelectTokenDialog = (function (props) {
107859
107870
  className: "Tooltip"
107860
107871
  }, /*#__PURE__*/react.createElement("span", {
107861
107872
  className: "TooltipArrowUp"
107862
- }), "Paste or enter token address here!")))),
107873
+ }), "Enter token address here")))),
107863
107874
  bodyClassName: "ScrollHeight",
107864
107875
  body: /*#__PURE__*/react.createElement("div", {
107865
107876
  className: ""
@@ -107869,7 +107880,7 @@ var SelectTokenDialog = (function (props) {
107869
107880
  }, /*#__PURE__*/react.createElement("div", {
107870
107881
  className: "PaddingTopXS PaddingBottomXS"
107871
107882
  }, /*#__PURE__*/react.createElement("div", {
107872
- className: "Link",
107883
+ className: "Link FontSizeS",
107873
107884
  onClick: onClickAddToken
107874
107885
  }, "Token missing? Add it.")))
107875
107886
  });
package/dist/esm/index.js CHANGED
@@ -1674,7 +1674,7 @@ var ErrorProvider = (function (props) {
1674
1674
  });
1675
1675
 
1676
1676
  var AlertStyle = (function (style) {
1677
- return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 0.4rem;\n font-weight: 500;\n padding: 0.5rem;\n }\n ";
1677
+ return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 7px;\n font-weight: 500;\n padding: 8px;\n }\n ";
1678
1678
  });
1679
1679
 
1680
1680
  var BlockchainLogoStyle = (function (style) {
@@ -1682,23 +1682,23 @@ var BlockchainLogoStyle = (function (style) {
1682
1682
  });
1683
1683
 
1684
1684
  var ButtonCircularStyle = (function () {
1685
- return "\n\n .ButtonCircular {\n border-radius: 99rem;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
1685
+ return "\n\n .ButtonCircular {\n border-radius: 9999px;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
1686
1686
  });
1687
1687
 
1688
1688
  var ButtonPrimaryStyle = (function (style) {
1689
- return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 0.8rem;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 1.3rem;\n font-weight: 400;\n line-height: 2.8rem;\n height: 3.6rem;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 0.4rem 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
1689
+ return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 13px;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 21px;\n font-weight: 400;\n line-height: 45px;\n height: 58px;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 7px 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
1690
1690
  });
1691
1691
 
1692
1692
  var CardStyle = (function (style) {
1693
- return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 0.8rem;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 0.5rem;\n min-height: 4.78rem;\n padding: 1rem 0.6rem;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 4.3rem;\n padding: 0.4rem 1.3rem;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 1.2rem;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 1rem;\n }\n\n .Card.Row .CardImage {\n width: 2.5rem;\n }\n\n .Card.Row .CardImage img {\n height: 1.9rem;\n width: 1.9rem;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 0.5rem 0.5rem;\n margin: 0;\n }\n\n .CardImage.small {\n width: 1.7rem;\n }\n\n .CardImage.small img {\n height: 1.4rem;\n width: 1.4rem;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 0.4rem;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 3.6rem;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 1.4rem;\n padding-left: 0.6rem;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 99rem;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 0.9rem;\n color: rgb(150,150,150);\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 1.3rem;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText small {\n font-size: 1.1rem;\n color: rgb(150,150,150);\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
1693
+ return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 13px;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 8px;\n min-height: 76px;\n padding: 16px 10px;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 69px;\n padding: 7px 21px;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 19px;\n line-height: 40px;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 17px;\n }\n\n .Card.Row .CardImage {\n width: 40px;\n }\n\n .Card.Row .CardImage img {\n height: 30px;\n width: 30px;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 8px 8px;\n margin: 0;\n }\n\n .CardImage.small {\n width: 27px;\n }\n\n .CardImage.small img {\n height: 27px;\n width: 27px;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 7px;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 58px;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 27px;\n padding-left: 10px;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 9999px;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 15px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 21px;\n line-height: 26px;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText.small, .CardText.small small {\n font-size: 18px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
1694
1694
  });
1695
1695
 
1696
1696
  var DialogStyle = (function (style) {
1697
- return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\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 background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\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 min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\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 ";
1697
+ return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\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: 13px;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 13px;\n border-top-radius: 13px;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n border-top-left-radius: 13px;\n border-top-right-radius: 13px;\n min-height: 54px;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 48px;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 48px;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 13px;\n border-bottom-right-radius: 13px;\n line-height: 24px;\n min-height: 32px;\n position: relative;\n text-align: center;\n }\n\n ";
1698
1698
  });
1699
1699
 
1700
1700
  var FontStyle = (function (style) {
1701
- return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 1rem;\n }\n\n .FontSizeM {\n font-size: 1.2rem;\n }\n\n .FontSizeL {\n font-size: 1.4rem;\n }\n\n .FontSizeXL {\n font-size: 2.0rem;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
1701
+ return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 16px;\n }\n\n .FontSizeM {\n font-size: 19px;\n }\n\n .FontSizeL {\n font-size: 23px;\n }\n\n .FontSizeXL {\n font-size: 32px;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
1702
1702
  });
1703
1703
 
1704
1704
  var GraphicStyle = (function () {
@@ -1721,10 +1721,6 @@ var InputStyle = (function (style) {
1721
1721
  return "\n\n .Input {\n background: none;\n border: 1px solid transparent;\n margin: 0;\n outline: none !important;\n padding: 0 0 0 14px;\n width: 100%;\n }\n\n .Input::placeholder {\n color: rgb(210,210,210);\n }\n \n ";
1722
1722
  });
1723
1723
 
1724
- var LabelStyle = (function (style) {
1725
- return "\n\n .Label {\n background: rgb(248,248,248);\n border-radius: 999px;\n color: ".concat(style.colors.primary, ";\n font-size: 0.8rem;\n padding: 0.1rem 0.5rem;\n margin: 0.1rem;\n }\n\n ");
1726
- });
1727
-
1728
1724
  var LinkStyle = (function (style) {
1729
1725
  return "\n\n .Link {\n color: ".concat(style.colors.primary, ";\n cursor: pointer;\n text-decoration: none;\n }\n\n .Link:hover {\n filter: brightness(0.8);\n }\n\n .Link:active {\n filter: brightness(1.0);\n }\n ");
1730
1726
  });
@@ -1738,11 +1734,11 @@ var OpacityStyle = (function (style) {
1738
1734
  });
1739
1735
 
1740
1736
  var PaddingStyle = (function () {
1741
- return "\n\n .PaddingTopXS {\n padding-top: 0.2rem;\n }\n\n .PaddingRightXS {\n padding-right: 0.2rem;\n }\n\n .PaddingBottomXS {\n padding-bottom: 0.2rem;\n }\n\n .PaddingLeftXS {\n padding-left: 0.2rem; \n }\n\n .PaddingTopS {\n padding-top: 0.8rem;\n }\n\n .PaddingRightS {\n padding-right: 0.8rem;\n }\n\n .PaddingBottomS {\n padding-bottom: 0.8rem;\n }\n\n .PaddingLeftS {\n padding-left: 0.8rem; \n }\n\n .PaddingTopM {\n padding-top: 1.2rem;\n }\n\n .PaddingRightM {\n padding-right: 1.2rem;\n }\n\n .PaddingBottomM {\n padding-bottom: 1.2rem;\n }\n\n .PaddingLeftM {\n padding-left: 1.2rem; \n }\n\n .PaddingTopL {\n padding-top: 1.8rem;\n }\n\n .PaddingRightL {\n padding-right: 1.8rem;\n }\n\n .PaddingBottomL {\n padding-bottom: 1.8rem;\n }\n\n .PaddingLeftL {\n padding-left: 1.28em; \n }\n ";
1737
+ return "\n\n .PaddingTopXS {\n padding-top: 3px;\n }\n\n .PaddingRightXS {\n padding-right: 3px;\n }\n\n .PaddingBottomXS {\n padding-bottom: 3px;\n }\n\n .PaddingLeftXS {\n padding-left: 3px; \n }\n\n .PaddingTopS {\n padding-top: 13px;\n }\n\n .PaddingRightS {\n padding-right: 13px;\n }\n\n .PaddingBottomS {\n padding-bottom: 13px;\n }\n\n .PaddingLeftS {\n padding-left: 13px; \n }\n\n .PaddingTopM {\n padding-top: 19px;\n }\n\n .PaddingRightM {\n padding-right: 19px;\n }\n\n .PaddingBottomM {\n padding-bottom: 19px;\n }\n\n .PaddingLeftM {\n padding-left: 19px; \n }\n\n .PaddingTopL {\n padding-top: 29px;\n }\n\n .PaddingRightL {\n padding-right: 29px;\n }\n\n .PaddingBottomL {\n padding-bottom: 29px;\n }\n\n .PaddingLeftL {\n padding-left: 29px; \n }\n ";
1742
1738
  });
1743
1739
 
1744
1740
  var PoweredByStyle = (function (style) {
1745
- return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 0.2rem;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 0.78rem;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 0.5rem;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
1741
+ return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 3px;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .contained .PoweredByWrapper {\n position: absolute;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 14px;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 8px;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
1746
1742
  });
1747
1743
 
1748
1744
  var RangeSliderStyle = (function (style) {
@@ -1754,7 +1750,7 @@ var ResetStyle = (function () {
1754
1750
  });
1755
1751
 
1756
1752
  var SearchStyle = (function (style) {
1757
- return "\n\n .Search {\n border-radius: 0.8rem;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 1.2rem;\n padding: 0.8rem;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
1753
+ return "\n\n .Search {\n border-radius: 13px;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 19px;\n padding: 13px;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
1758
1754
  });
1759
1755
 
1760
1756
  var SkeletonStyle = (function () {
@@ -1762,7 +1758,7 @@ var SkeletonStyle = (function () {
1762
1758
  });
1763
1759
 
1764
1760
  var TableStyle = (function (style) {
1765
- return "\n\n .Table {\n border-collapse: separate;\n border-radius: 0.4rem;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n font-size: 94%;\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 90%;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 0.5rem 0.9rem;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
1761
+ return "\n\n .Table {\n border-collapse: separate;\n border-radius: 7px;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 14px;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 8px 15px;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
1766
1762
  });
1767
1763
 
1768
1764
  var TextButtonStyle = (function (style) {
@@ -1770,7 +1766,7 @@ var TextButtonStyle = (function (style) {
1770
1766
  });
1771
1767
 
1772
1768
  var TextStyle = (function (style) {
1773
- return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 2.0rem;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 1.2rem;\n border: 0.5rem solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 0.9rem;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
1769
+ return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .Text {\n font-size: 16px;\n line-height: 24px\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 32px;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 19px;\n border: 8px solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 15px;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
1774
1770
  });
1775
1771
 
1776
1772
  var TokenAmountStyle = (function () {
@@ -1778,11 +1774,11 @@ var TokenAmountStyle = (function () {
1778
1774
  });
1779
1775
 
1780
1776
  var TokenImageStyle = (function (style) {
1781
- return "\n\n .TokenImage img {\n border-radius: 99rem;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .TokenImage.medium img {\n height: 5.8rem;\n width: 5.8rem;\n }\n ";
1777
+ return "\n\n .TokenImage img {\n border-radius: 9999px;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .TokenImage.medium img {\n height: 93px;\n width: 93px;\n }\n ";
1782
1778
  });
1783
1779
 
1784
1780
  var TooltipStyle = (function (style) {
1785
- return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 0.6rem;\n color: ").concat(style.colors.buttonText, ";\n padding: 0.6rem 0.8rem;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
1781
+ return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 10px;\n color: ").concat(style.colors.buttonText, ";\n padding: 10px 13px;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
1786
1782
  });
1787
1783
 
1788
1784
  var styleRenderer = (function (style) {
@@ -1795,7 +1791,7 @@ var styleRenderer = (function (style) {
1795
1791
  },
1796
1792
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
1797
1793
  }, style);
1798
- return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
1794
+ return [ResetStyle(), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), FontStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
1799
1795
  });
1800
1796
 
1801
1797
  var mount = (function (_ref, content) {
@@ -3100,7 +3096,9 @@ var ChangeAmountDialog = (function (props) {
3100
3096
  style: {
3101
3097
  height: '40px'
3102
3098
  }
3103
- }, /*#__PURE__*/React.createElement("div", null, format(toValidStep(maxAmount)), /*#__PURE__*/React.createElement("button", {
3099
+ }, /*#__PURE__*/React.createElement("div", {
3100
+ className: "FontSizeS"
3101
+ }, format(toValidStep(maxAmount)), /*#__PURE__*/React.createElement("button", {
3104
3102
  className: "TextButton",
3105
3103
  onClick: function onClick() {
3106
3104
  changeAmount(toValidValue(maxAmount));
@@ -3227,7 +3225,7 @@ var ChangePaymentDialog = (function (props) {
3227
3225
  }, payment.symbol), /*#__PURE__*/React.createElement("span", null, "\xA0"), /*#__PURE__*/React.createElement("span", {
3228
3226
  className: "TokenAmountCell"
3229
3227
  }, format(payment.amount)))), /*#__PURE__*/React.createElement("h3", {
3230
- className: "CardText"
3228
+ className: "CardText small"
3231
3229
  }, /*#__PURE__*/React.createElement("small", null, format(round(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))));
3232
3230
  }));
3233
3231
  }, [allPaymentRoutesWithData]);
@@ -4503,7 +4501,7 @@ var SignLoginDialog = (function (props) {
4503
4501
  }, "Wallet Login"), /*#__PURE__*/React.createElement("div", {
4504
4502
  className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
4505
4503
  }, /*#__PURE__*/React.createElement("p", {
4506
- className: "FontSizeM PaddingLeftM PaddingRightM"
4504
+ className: "FontSizeM PaddingLeftM PaddingRightM PaddingBottomS"
4507
4505
  }, "Please click \"Log in\" and sign the message with your connected wallet."))),
4508
4506
  footer: /*#__PURE__*/React.createElement("div", {
4509
4507
  className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
@@ -4677,7 +4675,7 @@ var PaymentOverviewSkeleton = (function (props) {
4677
4675
  className: "SkeletonBackground"
4678
4676
  }))), selectedRoute == undefined && slowRouting && /*#__PURE__*/React.createElement("div", {
4679
4677
  className: "TextCenter Opacity05 PaddingTopS"
4680
- }, /*#__PURE__*/React.createElement("strong", null, "Still loading your wallet balances...")))
4678
+ }, /*#__PURE__*/React.createElement("strong", null, "Loading payment routes...")))
4681
4679
  });
4682
4680
  });
4683
4681
 
@@ -5108,13 +5106,22 @@ var SaleOverviewDialog = (function (props) {
5108
5106
  setSalePerTokenValue = _useState2[1];
5109
5107
 
5110
5108
  useEffect(function () {
5111
- if (paymentValue && (amountConfiguration == undefined || amountConfiguration.token != true)) {
5112
- setSalePerTokenValue(new Currency({
5113
- amount: (paymentValue.amount / parseFloat(toTokenReadableAmount)).toFixed(2),
5109
+ if (paymentValue && (amountConfiguration == undefined || amountConfiguration.token != true) && toTokenReadableAmount) {
5110
+ var UsdAmountPerToken = paymentValue.amount / parseFloat(toTokenReadableAmount);
5111
+ var readableLocalizedAmountPerToken = new Currency({
5112
+ amount: UsdAmountPerToken,
5113
+ code: paymentValue.code
5114
+ }).toString();
5115
+ var zero = new Currency({
5116
+ amount: 0,
5114
5117
  code: paymentValue.code
5115
- }).toString());
5118
+ }).toString();
5119
+
5120
+ if (readableLocalizedAmountPerToken != zero) {
5121
+ setSalePerTokenValue(readableLocalizedAmountPerToken);
5122
+ }
5116
5123
  }
5117
- }, [paymentValue]);
5124
+ }, [paymentValue, toTokenReadableAmount]);
5118
5125
 
5119
5126
  if (toToken == undefined || toTokenReadableAmount == undefined || payment == undefined || paymentValue == undefined) {
5120
5127
  return /*#__PURE__*/React.createElement(SaleOverviewSkeleton, null);
@@ -5169,7 +5176,7 @@ var SaleOverviewDialog = (function (props) {
5169
5176
  }, toToken.symbol), /*#__PURE__*/React.createElement("span", null, "\xA0"), /*#__PURE__*/React.createElement("span", {
5170
5177
  className: "TokenAmountCell"
5171
5178
  }, format(toTokenReadableAmount)))), salePerTokenValue && /*#__PURE__*/React.createElement("h3", {
5172
- className: "CardText"
5179
+ className: "CardText small"
5173
5180
  }, /*#__PURE__*/React.createElement("small", null, salePerTokenValue, " per token")))), /*#__PURE__*/React.createElement("div", {
5174
5181
  className: "CardAction"
5175
5182
  }, /*#__PURE__*/React.createElement(ChevronRight, null))), /*#__PURE__*/React.createElement("div", {
@@ -5480,11 +5487,11 @@ var ConfirmTokenSelectionDialog = (function (props) {
5480
5487
  })), /*#__PURE__*/React.createElement("div", {
5481
5488
  className: "PaddingTopS TextCenter"
5482
5489
  }, /*#__PURE__*/React.createElement("div", {
5483
- className: "Alert"
5490
+ className: "Alert FontSizeS"
5484
5491
  }, /*#__PURE__*/React.createElement("strong", null, "Please review this information"))), /*#__PURE__*/React.createElement("div", {
5485
5492
  className: "PaddingTopXS"
5486
5493
  }, /*#__PURE__*/React.createElement("table", {
5487
- className: "Table TextLeft"
5494
+ className: "Table TextLeft FontSizeS"
5488
5495
  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
5489
5496
  className: "small TextCenter"
5490
5497
  }, /*#__PURE__*/React.createElement("td", {
@@ -22990,7 +22997,7 @@ var SelectTokenDialog = (function (props) {
22990
22997
  className: "transparent",
22991
22998
  src: blockchain.logo
22992
22999
  })), /*#__PURE__*/React.createElement("div", {
22993
- className: "CardBody"
23000
+ className: "CardBody FontSizeS"
22994
23001
  }, blockchain.label), /*#__PURE__*/React.createElement("div", {
22995
23002
  className: "CardAction"
22996
23003
  }, /*#__PURE__*/React.createElement(ChevronRight, null)))), /*#__PURE__*/React.createElement("div", {
@@ -23008,7 +23015,7 @@ var SelectTokenDialog = (function (props) {
23008
23015
  className: "Tooltip"
23009
23016
  }, /*#__PURE__*/React.createElement("span", {
23010
23017
  className: "TooltipArrowUp"
23011
- }), "Paste or enter token address here!")))),
23018
+ }), "Enter token address here")))),
23012
23019
  bodyClassName: "ScrollHeight",
23013
23020
  body: /*#__PURE__*/React.createElement("div", {
23014
23021
  className: ""
@@ -23018,7 +23025,7 @@ var SelectTokenDialog = (function (props) {
23018
23025
  }, /*#__PURE__*/React.createElement("div", {
23019
23026
  className: "PaddingTopXS PaddingBottomXS"
23020
23027
  }, /*#__PURE__*/React.createElement("div", {
23021
- className: "Link",
23028
+ className: "Link FontSizeS",
23022
23029
  onClick: onClickAddToken
23023
23030
  }, "Token missing? Add it.")))
23024
23031
  });
package/dist/umd/index.bundle.js CHANGED
@@ -49819,7 +49819,7 @@
49819
49819
  });
49820
49820
 
49821
49821
  var AlertStyle = (function (style) {
49822
- return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 0.4rem;\n font-weight: 500;\n padding: 0.5rem;\n }\n ";
49822
+ return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 7px;\n font-weight: 500;\n padding: 8px;\n }\n ";
49823
49823
  });
49824
49824
 
49825
49825
  var BlockchainLogoStyle = (function (style) {
@@ -49827,23 +49827,23 @@
49827
49827
  });
49828
49828
 
49829
49829
  var ButtonCircularStyle = (function () {
49830
- return "\n\n .ButtonCircular {\n border-radius: 99rem;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
49830
+ return "\n\n .ButtonCircular {\n border-radius: 9999px;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
49831
49831
  });
49832
49832
 
49833
49833
  var ButtonPrimaryStyle = (function (style) {
49834
- return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 0.8rem;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 1.3rem;\n font-weight: 400;\n line-height: 2.8rem;\n height: 3.6rem;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 0.4rem 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
49834
+ return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 13px;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 21px;\n font-weight: 400;\n line-height: 45px;\n height: 58px;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 7px 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
49835
49835
  });
49836
49836
 
49837
49837
  var CardStyle = (function (style) {
49838
- return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 0.8rem;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 0.5rem;\n min-height: 4.78rem;\n padding: 1rem 0.6rem;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 4.3rem;\n padding: 0.4rem 1.3rem;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 1.2rem;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 1rem;\n }\n\n .Card.Row .CardImage {\n width: 2.5rem;\n }\n\n .Card.Row .CardImage img {\n height: 1.9rem;\n width: 1.9rem;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 0.5rem 0.5rem;\n margin: 0;\n }\n\n .CardImage.small {\n width: 1.7rem;\n }\n\n .CardImage.small img {\n height: 1.4rem;\n width: 1.4rem;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 0.4rem;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 3.6rem;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 1.4rem;\n padding-left: 0.6rem;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 99rem;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 0.9rem;\n color: rgb(150,150,150);\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 1.3rem;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText small {\n font-size: 1.1rem;\n color: rgb(150,150,150);\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
49838
+ return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 13px;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 8px;\n min-height: 76px;\n padding: 16px 10px;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 69px;\n padding: 7px 21px;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 19px;\n line-height: 40px;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 17px;\n }\n\n .Card.Row .CardImage {\n width: 40px;\n }\n\n .Card.Row .CardImage img {\n height: 30px;\n width: 30px;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 8px 8px;\n margin: 0;\n }\n\n .CardImage.small {\n width: 27px;\n }\n\n .CardImage.small img {\n height: 27px;\n width: 27px;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 7px;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 58px;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 27px;\n padding-left: 10px;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 9999px;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 15px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 21px;\n line-height: 26px;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText.small, .CardText.small small {\n font-size: 18px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
49839
49839
  });
49840
49840
 
49841
49841
  var DialogStyle = (function (style) {
49842
- return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\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 background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\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 min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\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 ";
49842
+ return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\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: 13px;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 13px;\n border-top-radius: 13px;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n border-top-left-radius: 13px;\n border-top-right-radius: 13px;\n min-height: 54px;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 48px;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 48px;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 13px;\n border-bottom-right-radius: 13px;\n line-height: 24px;\n min-height: 32px;\n position: relative;\n text-align: center;\n }\n\n ";
49843
49843
  });
49844
49844
 
49845
49845
  var FontStyle = (function (style) {
49846
- return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 1rem;\n }\n\n .FontSizeM {\n font-size: 1.2rem;\n }\n\n .FontSizeL {\n font-size: 1.4rem;\n }\n\n .FontSizeXL {\n font-size: 2.0rem;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
49846
+ return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 16px;\n }\n\n .FontSizeM {\n font-size: 19px;\n }\n\n .FontSizeL {\n font-size: 23px;\n }\n\n .FontSizeXL {\n font-size: 32px;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
49847
49847
  });
49848
49848
 
49849
49849
  var GraphicStyle = (function () {
@@ -49866,10 +49866,6 @@
49866
49866
  return "\n\n .Input {\n background: none;\n border: 1px solid transparent;\n margin: 0;\n outline: none !important;\n padding: 0 0 0 14px;\n width: 100%;\n }\n\n .Input::placeholder {\n color: rgb(210,210,210);\n }\n \n ";
49867
49867
  });
49868
49868
 
49869
- var LabelStyle = (function (style) {
49870
- return "\n\n .Label {\n background: rgb(248,248,248);\n border-radius: 999px;\n color: ".concat(style.colors.primary, ";\n font-size: 0.8rem;\n padding: 0.1rem 0.5rem;\n margin: 0.1rem;\n }\n\n ");
49871
- });
49872
-
49873
49869
  var LinkStyle = (function (style) {
49874
49870
  return "\n\n .Link {\n color: ".concat(style.colors.primary, ";\n cursor: pointer;\n text-decoration: none;\n }\n\n .Link:hover {\n filter: brightness(0.8);\n }\n\n .Link:active {\n filter: brightness(1.0);\n }\n ");
49875
49871
  });
@@ -49883,11 +49879,11 @@
49883
49879
  });
49884
49880
 
49885
49881
  var PaddingStyle = (function () {
49886
- return "\n\n .PaddingTopXS {\n padding-top: 0.2rem;\n }\n\n .PaddingRightXS {\n padding-right: 0.2rem;\n }\n\n .PaddingBottomXS {\n padding-bottom: 0.2rem;\n }\n\n .PaddingLeftXS {\n padding-left: 0.2rem; \n }\n\n .PaddingTopS {\n padding-top: 0.8rem;\n }\n\n .PaddingRightS {\n padding-right: 0.8rem;\n }\n\n .PaddingBottomS {\n padding-bottom: 0.8rem;\n }\n\n .PaddingLeftS {\n padding-left: 0.8rem; \n }\n\n .PaddingTopM {\n padding-top: 1.2rem;\n }\n\n .PaddingRightM {\n padding-right: 1.2rem;\n }\n\n .PaddingBottomM {\n padding-bottom: 1.2rem;\n }\n\n .PaddingLeftM {\n padding-left: 1.2rem; \n }\n\n .PaddingTopL {\n padding-top: 1.8rem;\n }\n\n .PaddingRightL {\n padding-right: 1.8rem;\n }\n\n .PaddingBottomL {\n padding-bottom: 1.8rem;\n }\n\n .PaddingLeftL {\n padding-left: 1.28em; \n }\n ";
49882
+ return "\n\n .PaddingTopXS {\n padding-top: 3px;\n }\n\n .PaddingRightXS {\n padding-right: 3px;\n }\n\n .PaddingBottomXS {\n padding-bottom: 3px;\n }\n\n .PaddingLeftXS {\n padding-left: 3px; \n }\n\n .PaddingTopS {\n padding-top: 13px;\n }\n\n .PaddingRightS {\n padding-right: 13px;\n }\n\n .PaddingBottomS {\n padding-bottom: 13px;\n }\n\n .PaddingLeftS {\n padding-left: 13px; \n }\n\n .PaddingTopM {\n padding-top: 19px;\n }\n\n .PaddingRightM {\n padding-right: 19px;\n }\n\n .PaddingBottomM {\n padding-bottom: 19px;\n }\n\n .PaddingLeftM {\n padding-left: 19px; \n }\n\n .PaddingTopL {\n padding-top: 29px;\n }\n\n .PaddingRightL {\n padding-right: 29px;\n }\n\n .PaddingBottomL {\n padding-bottom: 29px;\n }\n\n .PaddingLeftL {\n padding-left: 29px; \n }\n ";
49887
49883
  });
49888
49884
 
49889
49885
  var PoweredByStyle = (function (style) {
49890
- return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 0.2rem;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 0.78rem;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 0.5rem;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
49886
+ return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 3px;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .contained .PoweredByWrapper {\n position: absolute;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 14px;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 8px;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
49891
49887
  });
49892
49888
 
49893
49889
  var RangeSliderStyle = (function (style) {
@@ -49899,7 +49895,7 @@
49899
49895
  });
49900
49896
 
49901
49897
  var SearchStyle = (function (style) {
49902
- return "\n\n .Search {\n border-radius: 0.8rem;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 1.2rem;\n padding: 0.8rem;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
49898
+ return "\n\n .Search {\n border-radius: 13px;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 19px;\n padding: 13px;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
49903
49899
  });
49904
49900
 
49905
49901
  var SkeletonStyle = (function () {
@@ -49907,7 +49903,7 @@
49907
49903
  });
49908
49904
 
49909
49905
  var TableStyle = (function (style) {
49910
- return "\n\n .Table {\n border-collapse: separate;\n border-radius: 0.4rem;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n font-size: 94%;\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 90%;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 0.5rem 0.9rem;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
49906
+ return "\n\n .Table {\n border-collapse: separate;\n border-radius: 7px;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 14px;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 8px 15px;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
49911
49907
  });
49912
49908
 
49913
49909
  var TextButtonStyle = (function (style) {
@@ -49915,7 +49911,7 @@
49915
49911
  });
49916
49912
 
49917
49913
  var TextStyle = (function (style) {
49918
- return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 2.0rem;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 1.2rem;\n border: 0.5rem solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 0.9rem;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
49914
+ return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .Text {\n font-size: 16px;\n line-height: 24px\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 32px;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 19px;\n border: 8px solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 15px;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
49919
49915
  });
49920
49916
 
49921
49917
  var TokenAmountStyle = (function () {
@@ -49923,11 +49919,11 @@
49923
49919
  });
49924
49920
 
49925
49921
  var TokenImageStyle = (function (style) {
49926
- return "\n\n .TokenImage img {\n border-radius: 99rem;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .TokenImage.medium img {\n height: 5.8rem;\n width: 5.8rem;\n }\n ";
49922
+ return "\n\n .TokenImage img {\n border-radius: 9999px;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .TokenImage.medium img {\n height: 93px;\n width: 93px;\n }\n ";
49927
49923
  });
49928
49924
 
49929
49925
  var TooltipStyle = (function (style) {
49930
- return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 0.6rem;\n color: ").concat(style.colors.buttonText, ";\n padding: 0.6rem 0.8rem;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
49926
+ return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 10px;\n color: ").concat(style.colors.buttonText, ";\n padding: 10px 13px;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
49931
49927
  });
49932
49928
 
49933
49929
  var styleRenderer = (function (style) {
@@ -49940,7 +49936,7 @@
49940
49936
  },
49941
49937
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
49942
49938
  }, style);
49943
- return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
49939
+ return [ResetStyle(), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), FontStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
49944
49940
  });
49945
49941
 
49946
49942
  const insideContainerClass = 'ReactShadowDOMInsideContainer';
@@ -68159,7 +68155,7 @@
68159
68155
 
68160
68156
  let transactionFeeAmount = ({ paymentRoute, fee })=> {
68161
68157
  if(typeof fee.amount == 'string' && fee.amount.match('%')) {
68162
- return BigNumber.from(paymentRoute.toAmount).div(100).mul(parseFloat(fee.amount)).toString()
68158
+ return BigNumber.from(paymentRoute.toAmount).div(1000).mul(parseFloat(fee.amount)*10).toString()
68163
68159
  } else if(typeof fee.amount == 'string') {
68164
68160
  return fee.amount
68165
68161
  } else if(typeof fee.amount == 'number') {
@@ -85510,6 +85506,10 @@
85510
85506
  }
85511
85507
 
85512
85508
  function route({ accept, from, whitelist, blacklist, event, fee, update }) {
85509
+ if(fee && fee.amount && typeof(fee.amount) == 'string' && fee.amount.match(/\.\d\d+\%/)) {
85510
+ throw('Only up to 1 decimal is supported for fee amounts!')
85511
+ }
85512
+
85513
85513
  return new Promise(async (resolveAll, rejectAll)=>{
85514
85514
 
85515
85515
  let priority = [];
@@ -87957,7 +87957,9 @@
87957
87957
  style: {
87958
87958
  height: '40px'
87959
87959
  }
87960
- }, /*#__PURE__*/react.createElement("div", null, format(toValidStep(maxAmount)), /*#__PURE__*/react.createElement("button", {
87960
+ }, /*#__PURE__*/react.createElement("div", {
87961
+ className: "FontSizeS"
87962
+ }, format(toValidStep(maxAmount)), /*#__PURE__*/react.createElement("button", {
87961
87963
  className: "TextButton",
87962
87964
  onClick: function onClick() {
87963
87965
  changeAmount(toValidValue(maxAmount));
@@ -88084,7 +88086,7 @@
88084
88086
  }, payment.symbol), /*#__PURE__*/react.createElement("span", null, "\xA0"), /*#__PURE__*/react.createElement("span", {
88085
88087
  className: "TokenAmountCell"
88086
88088
  }, format(payment.amount)))), /*#__PURE__*/react.createElement("h3", {
88087
- className: "CardText"
88089
+ className: "CardText small"
88088
88090
  }, /*#__PURE__*/react.createElement("small", null, format(round$1(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))));
88089
88091
  }));
88090
88092
  }, [allPaymentRoutesWithData]);
@@ -89360,7 +89362,7 @@
89360
89362
  }, "Wallet Login"), /*#__PURE__*/react.createElement("div", {
89361
89363
  className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
89362
89364
  }, /*#__PURE__*/react.createElement("p", {
89363
- className: "FontSizeM PaddingLeftM PaddingRightM"
89365
+ className: "FontSizeM PaddingLeftM PaddingRightM PaddingBottomS"
89364
89366
  }, "Please click \"Log in\" and sign the message with your connected wallet."))),
89365
89367
  footer: /*#__PURE__*/react.createElement("div", {
89366
89368
  className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
@@ -89534,7 +89536,7 @@
89534
89536
  className: "SkeletonBackground"
89535
89537
  }))), selectedRoute == undefined && slowRouting && /*#__PURE__*/react.createElement("div", {
89536
89538
  className: "TextCenter Opacity05 PaddingTopS"
89537
- }, /*#__PURE__*/react.createElement("strong", null, "Still loading your wallet balances...")))
89539
+ }, /*#__PURE__*/react.createElement("strong", null, "Loading payment routes...")))
89538
89540
  });
89539
89541
  });
89540
89542
 
@@ -89965,13 +89967,22 @@
89965
89967
  setSalePerTokenValue = _useState2[1];
89966
89968
 
89967
89969
  react.useEffect(function () {
89968
- if (paymentValue && (amountConfiguration == undefined || amountConfiguration.token != true)) {
89969
- setSalePerTokenValue(new Currency({
89970
- amount: (paymentValue.amount / parseFloat(toTokenReadableAmount)).toFixed(2),
89970
+ if (paymentValue && (amountConfiguration == undefined || amountConfiguration.token != true) && toTokenReadableAmount) {
89971
+ var UsdAmountPerToken = paymentValue.amount / parseFloat(toTokenReadableAmount);
89972
+ var readableLocalizedAmountPerToken = new Currency({
89973
+ amount: UsdAmountPerToken,
89974
+ code: paymentValue.code
89975
+ }).toString();
89976
+ var zero = new Currency({
89977
+ amount: 0,
89971
89978
  code: paymentValue.code
89972
- }).toString());
89979
+ }).toString();
89980
+
89981
+ if (readableLocalizedAmountPerToken != zero) {
89982
+ setSalePerTokenValue(readableLocalizedAmountPerToken);
89983
+ }
89973
89984
  }
89974
- }, [paymentValue]);
89985
+ }, [paymentValue, toTokenReadableAmount]);
89975
89986
 
89976
89987
  if (toToken == undefined || toTokenReadableAmount == undefined || payment == undefined || paymentValue == undefined) {
89977
89988
  return /*#__PURE__*/react.createElement(SaleOverviewSkeleton, null);
@@ -90026,7 +90037,7 @@
90026
90037
  }, toToken.symbol), /*#__PURE__*/react.createElement("span", null, "\xA0"), /*#__PURE__*/react.createElement("span", {
90027
90038
  className: "TokenAmountCell"
90028
90039
  }, format(toTokenReadableAmount)))), salePerTokenValue && /*#__PURE__*/react.createElement("h3", {
90029
- className: "CardText"
90040
+ className: "CardText small"
90030
90041
  }, /*#__PURE__*/react.createElement("small", null, salePerTokenValue, " per token")))), /*#__PURE__*/react.createElement("div", {
90031
90042
  className: "CardAction"
90032
90043
  }, /*#__PURE__*/react.createElement(ChevronRight, null))), /*#__PURE__*/react.createElement("div", {
@@ -90337,11 +90348,11 @@
90337
90348
  })), /*#__PURE__*/react.createElement("div", {
90338
90349
  className: "PaddingTopS TextCenter"
90339
90350
  }, /*#__PURE__*/react.createElement("div", {
90340
- className: "Alert"
90351
+ className: "Alert FontSizeS"
90341
90352
  }, /*#__PURE__*/react.createElement("strong", null, "Please review this information"))), /*#__PURE__*/react.createElement("div", {
90342
90353
  className: "PaddingTopXS"
90343
90354
  }, /*#__PURE__*/react.createElement("table", {
90344
- className: "Table TextLeft"
90355
+ className: "Table TextLeft FontSizeS"
90345
90356
  }, /*#__PURE__*/react.createElement("tbody", null, /*#__PURE__*/react.createElement("tr", {
90346
90357
  className: "small TextCenter"
90347
90358
  }, /*#__PURE__*/react.createElement("td", {
@@ -107847,7 +107858,7 @@
107847
107858
  className: "transparent",
107848
107859
  src: blockchain.logo
107849
107860
  })), /*#__PURE__*/react.createElement("div", {
107850
- className: "CardBody"
107861
+ className: "CardBody FontSizeS"
107851
107862
  }, blockchain.label), /*#__PURE__*/react.createElement("div", {
107852
107863
  className: "CardAction"
107853
107864
  }, /*#__PURE__*/react.createElement(ChevronRight, null)))), /*#__PURE__*/react.createElement("div", {
@@ -107865,7 +107876,7 @@
107865
107876
  className: "Tooltip"
107866
107877
  }, /*#__PURE__*/react.createElement("span", {
107867
107878
  className: "TooltipArrowUp"
107868
- }), "Paste or enter token address here!")))),
107879
+ }), "Enter token address here")))),
107869
107880
  bodyClassName: "ScrollHeight",
107870
107881
  body: /*#__PURE__*/react.createElement("div", {
107871
107882
  className: ""
@@ -107875,7 +107886,7 @@
107875
107886
  }, /*#__PURE__*/react.createElement("div", {
107876
107887
  className: "PaddingTopXS PaddingBottomXS"
107877
107888
  }, /*#__PURE__*/react.createElement("div", {
107878
- className: "Link",
107889
+ className: "Link FontSizeS",
107879
107890
  onClick: onClickAddToken
107880
107891
  }, "Token missing? Add it.")))
107881
107892
  });
package/dist/umd/index.js CHANGED
@@ -1669,7 +1669,7 @@
1669
1669
  });
1670
1670
 
1671
1671
  var AlertStyle = (function (style) {
1672
- return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 0.4rem;\n font-weight: 500;\n padding: 0.5rem;\n }\n ";
1672
+ return "\n\n .Alert {\n background: rgba(0,0,0,0.08);\n border-radius: 7px;\n font-weight: 500;\n padding: 8px;\n }\n ";
1673
1673
  });
1674
1674
 
1675
1675
  var BlockchainLogoStyle = (function (style) {
@@ -1677,23 +1677,23 @@
1677
1677
  });
1678
1678
 
1679
1679
  var ButtonCircularStyle = (function () {
1680
- return "\n\n .ButtonCircular {\n border-radius: 99rem;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
1680
+ return "\n\n .ButtonCircular {\n border-radius: 9999px;\n cursor: pointer;\n height: 34px;\n opacity: 0.5;\n padding: 5px 4px 4px 4px;\n width: 34px;\n }\n\n .ButtonCircular:hover {\n background: rgba(0,0,0,0.1);\n opacity: 1;\n }\n\n .ButtonCircular:active {\n background: rgba(0,0,0,0.25);\n opacity: 1;\n }\n ";
1681
1681
  });
1682
1682
 
1683
1683
  var ButtonPrimaryStyle = (function (style) {
1684
- return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 0.8rem;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 1.3rem;\n font-weight: 400;\n line-height: 2.8rem;\n height: 3.6rem;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 0.4rem 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
1684
+ return "\n\n .ButtonPrimary {\n align-items: center;\n align-self: center;\n background: ".concat(style.colors.primary, ";\n border-radius: 13px;\n border: 1px solid transparent;\n box-shadow: 0 0 16px rgba(0,0,0,0.1);\n font-size: 21px;\n font-weight: 400;\n line-height: 45px;\n height: 58px;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n padding: 7px 0;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-overflow: ellipsis;\n transition: background 0.1s;\n vertical-align: middle;\n display: inline-block;\n }\n\n .ButtonPrimary, .ButtonPrimary * {\n color: ").concat(style.colors.buttonText, ";\n }\n\n .ButtonPrimary.disabled {\n background: rgb(210,210,210);\n color: rgb(140,140,140);\n }\n\n .ButtonPrimary:not(.disabled){\n cursor: pointer;\n }\n .ButtonPrimary:not(.disabled):hover {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.1);\n }\n .ButtonPrimary:not(.disabled):active {\n box-shadow: inset 0 0 300px rgba(0,0,0,0.2);\n }\n ");
1685
1685
  });
1686
1686
 
1687
1687
  var CardStyle = (function (style) {
1688
- return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 0.8rem;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 0.5rem;\n min-height: 4.78rem;\n padding: 1rem 0.6rem;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 4.3rem;\n padding: 0.4rem 1.3rem;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 1.2rem;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 1rem;\n }\n\n .Card.Row .CardImage {\n width: 2.5rem;\n }\n\n .Card.Row .CardImage img {\n height: 1.9rem;\n width: 1.9rem;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 0.5rem 0.5rem;\n margin: 0;\n }\n\n .CardImage.small {\n width: 1.7rem;\n }\n\n .CardImage.small img {\n height: 1.4rem;\n width: 1.4rem;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 0.4rem;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 3.6rem;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 1.4rem;\n padding-left: 0.6rem;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 99rem;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 0.9rem;\n color: rgb(150,150,150);\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 1.3rem;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText small {\n font-size: 1.1rem;\n color: rgb(150,150,150);\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
1688
+ return "\n\n .Card {\n align-items: center;\n background: rgb(255,255,255);\n border-radius: 13px;\n box-shadow: 0 0 8px rgba(0,0,0,0.03);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n margin-bottom: 8px;\n min-height: 76px;\n padding: 16px 10px;\n width: 100%;\n }\n\n .Card.Row {\n border-radius: 0;\n margin-bottom: 0;\n box-shadow: none;\n min-height: 69px;\n padding: 7px 21px;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n\n .Card.Row .CardText {\n font-size: 19px;\n line-height: 40px;\n }\n\n .CardTokenSymbol {\n width: 40%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .CardTokenName {\n text-align: right;\n opacity: 0.5;\n width: 60%;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .Card.Row .CardTokenName .CardText {\n font-size: 17px;\n }\n\n .Card.Row .CardImage {\n width: 40px;\n }\n\n .Card.Row .CardImage img {\n height: 30px;\n width: 30px;\n }\n\n a.Card, a.Card * {\n color: inherit;\n text-decoration: none;\n }\n\n .Card.transparent {\n background: none;\n box-shadow: none;\n }\n\n .Card.small {\n min-height: auto;\n padding: 8px 8px;\n margin: 0;\n }\n\n .CardImage.small {\n width: 27px;\n }\n\n .CardImage.small img {\n height: 27px;\n width: 27px;\n }\n\n .Card.disabled {\n cursor: default;\n }\n\n .Card:hover:not(.disabled) {\n background: rgb(240,240,240);\n box-shadow: 0 0 0 rgba(0,0,0,0); \n }\n\n .Card:active:not(.disabled) {\n background: rgb(235,235,235);\n box-shadow: inset 0 0 6px rgba(0,0,0,0.02);\n color: inherit;\n }\n\n .Card:hover:not(.disabled) .CardAction {\n opacity: 0.4;\n }\n\n .CardImage, .CardBody, .CardAction, .CardInfo {\n align-items: center;\n display: flex;\n min-width: 0;\n padding: 0 7px;\n }\n\n .CardImage {\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n position: relative;\n width: 58px;\n }\n\n .CardBody {\n flex-basis: auto;\n flex-grow: 1;\n flex-shrink: 1;\n line-height: 27px;\n padding-left: 10px;\n text-align: left;\n }\n\n .CardBodyWrapper {\n min-width: 0;\n }\n\n .CardAction {\n flex-basis: auto;\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 0;\n margin-left: auto;\n }\n\n .Card.disabled .CardAction {\n opacity: 0; \n }\n\n .CardInfo {\n display: flex;\n flex-basis: auto;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 1;\n justify-content: center;\n margin-left: auto; \n padding-right: 0;\n }\n\n .CardImage img {\n background: white;\n border-radius: 9999px;\n border: 1px solid white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .CardImage.square img {\n border-radius: 0;\n }\n\n .CardImage img.transparent {\n border: none;\n background: none;\n box-shadow: none;\n }\n \n .CardImage .BlockchainLogo {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n .CardTitle {\n font-size: 15px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n \n .CardText, a .CardText {\n color: ".concat(style.colors.text, ";\n flex: 1;\n font-size: 21px;\n line-height: 26px;\n }\n\n .CardText strong {\n font-weight: 500;\n }\n\n .CardText.small, .CardText.small small {\n font-size: 18px;\n color: rgb(150,150,150);\n line-height: 20px;\n }\n\n .CardAction {\n opacity: 0.2;\n }\n\n .Card.More {\n display: inline-block;\n text-align: center;\n }\n ");
1689
1689
  });
1690
1690
 
1691
1691
  var DialogStyle = (function (style) {
1692
- return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\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 background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 0.8rem;\n border-top-radius: 0.8rem;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n background: rgb(248,248,248);\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\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 min-height: 3.4rem;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 3rem;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\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 ";
1692
+ return "\n\n .ReactDialogBackground {\n backdrop-filter: blur(5px);\n background: rgba(0,0,0,0.7);\n }\n\n .contained .ReactDialog {\n position: absolute;\n height: 100%;\n min-height: 100%;\n width: 100%;\n min-width: 100%;\n }\n\n .contained .ReactDialogBackground {\n position: absolute;\n }\n\n .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n top: 0;\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: 13px;\n background: rgb(248,248,248);\n }\n\n @media (max-width: 450px) {\n\n .Dialog {\n border-radius: 0;\n width: 100%;\n }\n }\n\n @media (orientation: portrait) and (max-width: 800px) {\n\n .ReactDialogAnimation {\n width: 100%;\n }\n\n .ReactDialog {\n height: 100%;\n min-height: 100%;\n }\n\n .ReactDialogStack {\n align-items: flex-end;\n }\n\n .Dialog {\n align-content: stretch;\n border-radius: 13px;\n border-top-radius: 13px;\n display: flex;\n flex-direction: column;\n }\n\n .DialogBody {\n flex: 1;\n align-items: flex-end;\n }\n\n .DialogFooter {\n padding-bottom: 20px;\n }\n\n .ReactDialogAnimation {\n margin-bottom: -100px !important;\n top: inherit !important;\n position: relative;\n transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n }\n\n .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n margin-bottom: 0px !important;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n }\n\n .ReactShadowDOMInsideContainer > .ReactDialog {\n align-items: flex-end;\n }\n }\n\n .DialogBody {\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .DialogBody.ScrollHeight {\n height: 30vh !important;\n max-height: 30vh !important;\n }\n\n .DialogHeader {\n border-top-left-radius: 13px;\n border-top-right-radius: 13px;\n min-height: 54px;\n position: relative;\n width: 100%;\n }\n\n .DialogHeaderActionRight {\n position: absolute;\n top: 0;\n right: 0;\n height: 48px;\n }\n\n .DialogHeaderActionLeft {\n position: absolute;\n top: 0;\n left: 0;\n height: 48px;\n }\n\n .DialogFooter {\n border-bottom-left-radius: 13px;\n border-bottom-right-radius: 13px;\n line-height: 24px;\n min-height: 32px;\n position: relative;\n text-align: center;\n }\n\n ";
1693
1693
  });
1694
1694
 
1695
1695
  var FontStyle = (function (style) {
1696
- return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 1rem;\n }\n\n .FontSizeM {\n font-size: 1.2rem;\n }\n\n .FontSizeL {\n font-size: 1.4rem;\n }\n\n .FontSizeXL {\n font-size: 2.0rem;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
1696
+ return "\n\n *, div, div * {\n font-family: ".concat(style.fontFamily, ";\n }\n\n .FontSizeS {\n font-size: 16px;\n }\n\n .FontSizeM {\n font-size: 19px;\n }\n\n .FontSizeL {\n font-size: 23px;\n }\n\n .FontSizeXL {\n font-size: 32px;\n }\n\n .FontWeightBold {\n font-weight: bold;\n }\n\n .FontItalic {\n font-style: italic;\n }\n ");
1697
1697
  });
1698
1698
 
1699
1699
  var GraphicStyle = (function () {
@@ -1716,10 +1716,6 @@
1716
1716
  return "\n\n .Input {\n background: none;\n border: 1px solid transparent;\n margin: 0;\n outline: none !important;\n padding: 0 0 0 14px;\n width: 100%;\n }\n\n .Input::placeholder {\n color: rgb(210,210,210);\n }\n \n ";
1717
1717
  });
1718
1718
 
1719
- var LabelStyle = (function (style) {
1720
- return "\n\n .Label {\n background: rgb(248,248,248);\n border-radius: 999px;\n color: ".concat(style.colors.primary, ";\n font-size: 0.8rem;\n padding: 0.1rem 0.5rem;\n margin: 0.1rem;\n }\n\n ");
1721
- });
1722
-
1723
1719
  var LinkStyle = (function (style) {
1724
1720
  return "\n\n .Link {\n color: ".concat(style.colors.primary, ";\n cursor: pointer;\n text-decoration: none;\n }\n\n .Link:hover {\n filter: brightness(0.8);\n }\n\n .Link:active {\n filter: brightness(1.0);\n }\n ");
1725
1721
  });
@@ -1733,11 +1729,11 @@
1733
1729
  });
1734
1730
 
1735
1731
  var PaddingStyle = (function () {
1736
- return "\n\n .PaddingTopXS {\n padding-top: 0.2rem;\n }\n\n .PaddingRightXS {\n padding-right: 0.2rem;\n }\n\n .PaddingBottomXS {\n padding-bottom: 0.2rem;\n }\n\n .PaddingLeftXS {\n padding-left: 0.2rem; \n }\n\n .PaddingTopS {\n padding-top: 0.8rem;\n }\n\n .PaddingRightS {\n padding-right: 0.8rem;\n }\n\n .PaddingBottomS {\n padding-bottom: 0.8rem;\n }\n\n .PaddingLeftS {\n padding-left: 0.8rem; \n }\n\n .PaddingTopM {\n padding-top: 1.2rem;\n }\n\n .PaddingRightM {\n padding-right: 1.2rem;\n }\n\n .PaddingBottomM {\n padding-bottom: 1.2rem;\n }\n\n .PaddingLeftM {\n padding-left: 1.2rem; \n }\n\n .PaddingTopL {\n padding-top: 1.8rem;\n }\n\n .PaddingRightL {\n padding-right: 1.8rem;\n }\n\n .PaddingBottomL {\n padding-bottom: 1.8rem;\n }\n\n .PaddingLeftL {\n padding-left: 1.28em; \n }\n ";
1732
+ return "\n\n .PaddingTopXS {\n padding-top: 3px;\n }\n\n .PaddingRightXS {\n padding-right: 3px;\n }\n\n .PaddingBottomXS {\n padding-bottom: 3px;\n }\n\n .PaddingLeftXS {\n padding-left: 3px; \n }\n\n .PaddingTopS {\n padding-top: 13px;\n }\n\n .PaddingRightS {\n padding-right: 13px;\n }\n\n .PaddingBottomS {\n padding-bottom: 13px;\n }\n\n .PaddingLeftS {\n padding-left: 13px; \n }\n\n .PaddingTopM {\n padding-top: 19px;\n }\n\n .PaddingRightM {\n padding-right: 19px;\n }\n\n .PaddingBottomM {\n padding-bottom: 19px;\n }\n\n .PaddingLeftM {\n padding-left: 19px; \n }\n\n .PaddingTopL {\n padding-top: 29px;\n }\n\n .PaddingRightL {\n padding-right: 29px;\n }\n\n .PaddingBottomL {\n padding-bottom: 29px;\n }\n\n .PaddingLeftL {\n padding-left: 29px; \n }\n ";
1737
1733
  });
1738
1734
 
1739
1735
  var PoweredByStyle = (function (style) {
1740
- return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 0.2rem;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 0.78rem;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 0.5rem;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
1736
+ return "\n\n .PoweredByWrapper {\n display: block;\n left: 0;\n padding-top: 3px;\n position: fixed;\n right: 0;\n text-align: center;\n top: 0;\n }\n\n .contained .PoweredByWrapper {\n position: absolute;\n }\n\n .PoweredByLink {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;\n color: white;\n opacity: 0.4;\n display: inline-block;\n font-size: 14px;\n font-style: italic;\n font-weight: bold;\n letter-spacing: -0.2px;\n margin-left: 8px;\n text-decoration: none;\n }\n\n .PoweredByLink:hover, .PoweredByLink:active {\n opacity: 1.0;\n color: ".concat(style.colors.primary, ";\n }\n ");
1741
1737
  });
1742
1738
 
1743
1739
  var RangeSliderStyle = (function (style) {
@@ -1749,7 +1745,7 @@
1749
1745
  });
1750
1746
 
1751
1747
  var SearchStyle = (function (style) {
1752
- return "\n\n .Search {\n border-radius: 0.8rem;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 1.2rem;\n padding: 0.8rem;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
1748
+ return "\n\n .Search {\n border-radius: 13px;\n border: 1px solid rgba(0,0,0,0.2);\n outline: none !important;\n color: ".concat(style.colors.text, ";\n font-size: 19px;\n padding: 13px;\n width: 100%;\n }\n\n .Search::placeholder {\n color: rgb(180,180,180);\n } \n\n .Search:focus, .Search:focus-visible {\n border: 1px solid ").concat(style.colors.primary, ";\n }\n\n ");
1753
1749
  });
1754
1750
 
1755
1751
  var SkeletonStyle = (function () {
@@ -1757,7 +1753,7 @@
1757
1753
  });
1758
1754
 
1759
1755
  var TableStyle = (function (style) {
1760
- return "\n\n .Table {\n border-collapse: separate;\n border-radius: 0.4rem;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n font-size: 94%;\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 90%;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 0.5rem 0.9rem;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
1756
+ return "\n\n .Table {\n border-collapse: separate;\n border-radius: 7px;\n border-style: hidden;\n border: 1px solid rgba(0,0,0,0.1);\n width: 100%;\n }\n\n .Table tr.small td {\n font-size: 14px;\n }\n\n .Table tr td {\n border-bottom: 1px solid rgba(0,0,0,0.1);\n word-break: break-all;\n }\n \n .Table tr:last-child td {\n border-bottom: none;\n }\n \n .Table tr td {\n padding: 8px 15px;\n text-align: left;\n }\n \n .Table tr td:first-child {\n width: 30%\n }\n\n .Table tr td:last-child {\n width: 70%\n }\n \n .Table .TableSubTitle {\n font-weight: 300;\n opacity: 0.7;\n }\n\n .Table tr td:last-child {\n font-weight: 500;\n }\n ";
1761
1757
  });
1762
1758
 
1763
1759
  var TextButtonStyle = (function (style) {
@@ -1765,7 +1761,7 @@
1765
1761
  });
1766
1762
 
1767
1763
  var TextStyle = (function (style) {
1768
- return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 2.0rem;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 1.2rem;\n border: 0.5rem solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 0.9rem;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
1764
+ return "\n\n * {\n color: ".concat(style.colors.text, ";\n }\n\n h1, h2, h3, h4, h5, h6 {\n display: block;\n }\n\n .Text {\n font-size: 16px;\n line-height: 24px\n }\n\n .TextLeft, .TextLeft * {\n text-align: left;\n }\n\n .TextCenter, .TextCenter * {\n text-align: center;\n }\n\n .LineHeightL {\n line-height: 32px;\n }\n\n .ErrorSnippetText {\n background: rgb(30, 30, 20);\n border-radius: 19px;\n border: 8px solid rgb(30, 30, 20);\n color: #00FF41;\n font-size: 15px;\n font-style: italic;\n max-height: 100px;\n padding: 6px;\n overflow-wrap: break-word;\n overflow-y: auto;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n ");
1769
1765
  });
1770
1766
 
1771
1767
  var TokenAmountStyle = (function () {
@@ -1773,11 +1769,11 @@
1773
1769
  });
1774
1770
 
1775
1771
  var TokenImageStyle = (function (style) {
1776
- return "\n\n .TokenImage img {\n border-radius: 99rem;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 2.8rem;\n position: relative;\n vertical-align: middle;\n width: 2.8rem;\n }\n\n .TokenImage.medium img {\n height: 5.8rem;\n width: 5.8rem;\n }\n ";
1772
+ return "\n\n .TokenImage img {\n border-radius: 9999px;\n border: 1px solid white;\n background: white;\n box-shadow: 0 2px 8px rgb(0 0 0 / 10%);\n height: 45px;\n position: relative;\n vertical-align: middle;\n width: 45px;\n }\n\n .TokenImage.medium img {\n height: 93px;\n width: 93px;\n }\n ";
1777
1773
  });
1778
1774
 
1779
1775
  var TooltipStyle = (function (style) {
1780
- return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 0.6rem;\n color: ").concat(style.colors.buttonText, ";\n padding: 0.6rem 0.8rem;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
1776
+ return "\n\n .Tooltip {\n background: ".concat(style.colors.primary, ";\n border-radius: 10px;\n color: ").concat(style.colors.buttonText, ";\n padding: 10px 13px;\n position: relative;\n box-shadow: 0 0 8px rgba(0,0,0,0.2);\n }\n\n .TooltipArrowUp {\n border-bottom: 10px solid ").concat(style.colors.primary, ";\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n height: 0; \n left: 12px;\n position: absolute;\n top: -8px;\n width: 0; \n }\n ");
1781
1777
  });
1782
1778
 
1783
1779
  var styleRenderer = (function (style) {
@@ -1790,7 +1786,7 @@
1790
1786
  },
1791
1787
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
1792
1788
  }, style);
1793
- return [ResetStyle(), FontStyle(style), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LabelStyle(style), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
1789
+ return [ResetStyle(), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), FontStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
1794
1790
  });
1795
1791
 
1796
1792
  var mount = (function (_ref, content) {
@@ -3095,7 +3091,9 @@
3095
3091
  style: {
3096
3092
  height: '40px'
3097
3093
  }
3098
- }, /*#__PURE__*/React__default["default"].createElement("div", null, format(toValidStep(maxAmount)), /*#__PURE__*/React__default["default"].createElement("button", {
3094
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3095
+ className: "FontSizeS"
3096
+ }, format(toValidStep(maxAmount)), /*#__PURE__*/React__default["default"].createElement("button", {
3099
3097
  className: "TextButton",
3100
3098
  onClick: function onClick() {
3101
3099
  changeAmount(toValidValue(maxAmount));
@@ -3222,7 +3220,7 @@
3222
3220
  }, payment.symbol), /*#__PURE__*/React__default["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement("span", {
3223
3221
  className: "TokenAmountCell"
3224
3222
  }, format(payment.amount)))), /*#__PURE__*/React__default["default"].createElement("h3", {
3225
- className: "CardText"
3223
+ className: "CardText small"
3226
3224
  }, /*#__PURE__*/React__default["default"].createElement("small", null, format(round(parseFloat(payment.route.fromBalance.toString()) / Math.pow(10, payment.decimals), 'down')))))));
3227
3225
  }));
3228
3226
  }, [allPaymentRoutesWithData]);
@@ -4498,7 +4496,7 @@
4498
4496
  }, "Wallet Login"), /*#__PURE__*/React__default["default"].createElement("div", {
4499
4497
  className: "Text PaddingTopS PaddingBottomS PaddingLeftS PaddingRightS"
4500
4498
  }, /*#__PURE__*/React__default["default"].createElement("p", {
4501
- className: "FontSizeM PaddingLeftM PaddingRightM"
4499
+ className: "FontSizeM PaddingLeftM PaddingRightM PaddingBottomS"
4502
4500
  }, "Please click \"Log in\" and sign the message with your connected wallet."))),
4503
4501
  footer: /*#__PURE__*/React__default["default"].createElement("div", {
4504
4502
  className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
@@ -4672,7 +4670,7 @@
4672
4670
  className: "SkeletonBackground"
4673
4671
  }))), selectedRoute == undefined && slowRouting && /*#__PURE__*/React__default["default"].createElement("div", {
4674
4672
  className: "TextCenter Opacity05 PaddingTopS"
4675
- }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Still loading your wallet balances...")))
4673
+ }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Loading payment routes...")))
4676
4674
  });
4677
4675
  });
4678
4676
 
@@ -5103,13 +5101,22 @@
5103
5101
  setSalePerTokenValue = _useState2[1];
5104
5102
 
5105
5103
  React.useEffect(function () {
5106
- if (paymentValue && (amountConfiguration == undefined || amountConfiguration.token != true)) {
5107
- setSalePerTokenValue(new localCurrency.Currency({
5108
- amount: (paymentValue.amount / parseFloat(toTokenReadableAmount)).toFixed(2),
5104
+ if (paymentValue && (amountConfiguration == undefined || amountConfiguration.token != true) && toTokenReadableAmount) {
5105
+ var UsdAmountPerToken = paymentValue.amount / parseFloat(toTokenReadableAmount);
5106
+ var readableLocalizedAmountPerToken = new localCurrency.Currency({
5107
+ amount: UsdAmountPerToken,
5108
+ code: paymentValue.code
5109
+ }).toString();
5110
+ var zero = new localCurrency.Currency({
5111
+ amount: 0,
5109
5112
  code: paymentValue.code
5110
- }).toString());
5113
+ }).toString();
5114
+
5115
+ if (readableLocalizedAmountPerToken != zero) {
5116
+ setSalePerTokenValue(readableLocalizedAmountPerToken);
5117
+ }
5111
5118
  }
5112
- }, [paymentValue]);
5119
+ }, [paymentValue, toTokenReadableAmount]);
5113
5120
 
5114
5121
  if (toToken == undefined || toTokenReadableAmount == undefined || payment == undefined || paymentValue == undefined) {
5115
5122
  return /*#__PURE__*/React__default["default"].createElement(SaleOverviewSkeleton, null);
@@ -5164,7 +5171,7 @@
5164
5171
  }, toToken.symbol), /*#__PURE__*/React__default["default"].createElement("span", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement("span", {
5165
5172
  className: "TokenAmountCell"
5166
5173
  }, format(toTokenReadableAmount)))), salePerTokenValue && /*#__PURE__*/React__default["default"].createElement("h3", {
5167
- className: "CardText"
5174
+ className: "CardText small"
5168
5175
  }, /*#__PURE__*/React__default["default"].createElement("small", null, salePerTokenValue, " per token")))), /*#__PURE__*/React__default["default"].createElement("div", {
5169
5176
  className: "CardAction"
5170
5177
  }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null))), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5475,11 +5482,11 @@
5475
5482
  })), /*#__PURE__*/React__default["default"].createElement("div", {
5476
5483
  className: "PaddingTopS TextCenter"
5477
5484
  }, /*#__PURE__*/React__default["default"].createElement("div", {
5478
- className: "Alert"
5485
+ className: "Alert FontSizeS"
5479
5486
  }, /*#__PURE__*/React__default["default"].createElement("strong", null, "Please review this information"))), /*#__PURE__*/React__default["default"].createElement("div", {
5480
5487
  className: "PaddingTopXS"
5481
5488
  }, /*#__PURE__*/React__default["default"].createElement("table", {
5482
- className: "Table TextLeft"
5489
+ className: "Table TextLeft FontSizeS"
5483
5490
  }, /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", {
5484
5491
  className: "small TextCenter"
5485
5492
  }, /*#__PURE__*/React__default["default"].createElement("td", {
@@ -22985,7 +22992,7 @@
22985
22992
  className: "transparent",
22986
22993
  src: blockchain.logo
22987
22994
  })), /*#__PURE__*/React__default["default"].createElement("div", {
22988
- className: "CardBody"
22995
+ className: "CardBody FontSizeS"
22989
22996
  }, blockchain.label), /*#__PURE__*/React__default["default"].createElement("div", {
22990
22997
  className: "CardAction"
22991
22998
  }, /*#__PURE__*/React__default["default"].createElement(ChevronRight, null)))), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23003,7 +23010,7 @@
23003
23010
  className: "Tooltip"
23004
23011
  }, /*#__PURE__*/React__default["default"].createElement("span", {
23005
23012
  className: "TooltipArrowUp"
23006
- }), "Paste or enter token address here!")))),
23013
+ }), "Enter token address here")))),
23007
23014
  bodyClassName: "ScrollHeight",
23008
23015
  body: /*#__PURE__*/React__default["default"].createElement("div", {
23009
23016
  className: ""
@@ -23013,7 +23020,7 @@
23013
23020
  }, /*#__PURE__*/React__default["default"].createElement("div", {
23014
23021
  className: "PaddingTopXS PaddingBottomXS"
23015
23022
  }, /*#__PURE__*/React__default["default"].createElement("div", {
23016
- className: "Link",
23023
+ className: "Link FontSizeS",
23017
23024
  onClick: onClickAddToken
23018
23025
  }, "Token missing? Add it.")))
23019
23026
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@depay/widgets",
3
3
  "moduleName": "DePayWidgets",
4
- "version": "6.28.2",
4
+ "version": "6.29.0",
5
5
  "description": "Web3 Payments with any token. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion.",
6
6
  "main": "./dist/umd/index.js",
7
7
  "module": "./dist/esm/index.js",
@@ -44,7 +44,7 @@
44
44
  "@depay/web3-client": "^8.0.0",
45
45
  "@depay/web3-constants": "^5.0.0",
46
46
  "@depay/web3-exchanges": "^8.2.1",
47
- "@depay/web3-payments": "^10.1.2",
47
+ "@depay/web3-payments": "^10.1.3",
48
48
  "@depay/web3-tokens": "^8.0.1",
49
49
  "@depay/web3-wallets": "^10.0.3",
50
50
  "decimal.js": "^10.3.1",