@stokr/components-library 2.3.63-beta.2 → 2.3.65-beta.1

package/dist/components/InfoIcon/InfoIcon.js

@@ -4,20 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.InfoIcon = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactTooltip = require("react-tooltip");
-var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _reactTippy = require("react-tippy");
 var _InfoIcon = require("./InfoIcon.styles");
-const _excluded = ["title", "html", "position", "noMargin", "noMarginLeft", "noMarginRight", "noIcon", "disabled", "fullWidth", "containerStyle", "customStyles", "arrowColor"];
+const _excluded = ["title", "html", "position", "noMargin", "noMarginLeft", "noMarginRight", "noIcon", "disabled", "fullWidth", "outline", "containerStyle"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 const InfoIcon = _ref => {
@@ -31,50 +24,29 @@ const InfoIcon = _ref => {
       noIcon,
       disabled,
       fullWidth,
-      containerStyle,
-      customStyles,
-      arrowColor
+      outline,
+      containerStyle
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  // Generate stable ID for tooltip (once per component instance)
-  const tooltipIdRef = (0, _react.useRef)("info-icon-".concat(Math.random().toString(36).substr(2, 9)));
-  const tooltipId = tooltipIdRef.current;
-  const content = html || title;
-  const styles = _objectSpread({
-    borderRadius: '10px',
-    fontSize: '13px',
-    lineHeight: '20px',
-    letterSpacing: '0.4px',
-    padding: '20px',
-    wordBreak: 'break-word',
-    boxShadow: ['0 0 12px 8px rgba(0, 0, 0, 0.03)', '0 0 6px 3px rgba(0, 0, 0, 0.02)'],
-    fontWeight: 'normal',
-    width: 'auto'
-  }, customStyles);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.Container, {
+  return /*#__PURE__*/_react.default.createElement(_InfoIcon.Container, {
     noMargin: noMargin,
     noMarginLeft: noMarginLeft,
     noMarginRight: noMarginRight,
     fullWidth: fullWidth,
     style: containerStyle
-  }, /*#__PURE__*/_react.default.createElement("span", _extends({
-    "data-tooltip-id": tooltipId
-  }, html ? {
-    'data-tooltip-html': html
-  } : {
-    'data-tooltip-content': title
-  }), noIcon ? props.children : /*#__PURE__*/_react.default.createElement(_InfoIcon.Icon, null))), !disabled && content && /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, _extends({
-    id: tooltipId,
-    place: position,
-    variant: "light",
-    arrowColor: arrowColor || _colors.default.blue,
-    delayShow: 100,
-    delayHide: 100,
-    offset: 15,
-    opacity: 1,
-    arrowSize: 10,
-    style: styles
-  }, props)));
+  }, /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, _extends({}, props, {
+    position: position,
+    title: title,
+    html: html,
+    theme: "light",
+    arrow: true,
+    duration: 200
+    //  onRequestClose={() => console.log('request to close tooltip')}
+    ,
+    disabled: disabled
+  }), noIcon ? props.children : /*#__PURE__*/_react.default.createElement(_InfoIcon.Icon, {
+    outline: outline
+  })));
 };
 exports.InfoIcon = InfoIcon;
 InfoIcon.propTypes = {
@@ -84,7 +56,7 @@ InfoIcon.propTypes = {
   noMargin: _propTypes.default.bool,
   noMarginLeft: _propTypes.default.bool,
   noMarginRight: _propTypes.default.bool,
-  arrowColor: _propTypes.default.string
+  outline: _propTypes.default.bool
 };
 InfoIcon.defaultProps = {
   title: null,
@@ -92,6 +64,7 @@ InfoIcon.defaultProps = {
   position: 'bottom',
   noMargin: false,
   noMarginLeft: false,
-  noMarginRight: false
+  noMarginRight: false,
+  outline: false
 };
 var _default = exports.default = InfoIcon;

package/dist/components/InfoIcon/InfoIcon.styles.js

@@ -11,9 +11,9 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "InfoIconstyles__Container",
   componentId: "sc-d3sdn3-0"
 })(["display:inline-block;vertical-align:middle;margin:0 12px;font-size:0;line-height:0;", " ", " ", " ", " & > div{position:relative;display:inline-block !important;", "}"], props => props.noMargin && "\n    margin: 0;\n  ", props => props.noMarginLeft && "\n    margin-left: 0;\n  ", props => props.noMarginRight && "\n    margin-right: 0;\n  ", props => props.fullWidth && "\n    width: 100%;\n    height: 100%;\n  ", props => props.fullWidth && "\n      width: 100%;\n      height: 100%;\n      display: flex !important;\n      align-content: center;\n      flex-wrap: wrap;\n      justify-content: center;\n  ");
-const Icon = exports.Icon = _styledComponents.default.i.attrs({
-  className: 'ion ion-md-information-circle'
-}).withConfig({
+const Icon = exports.Icon = _styledComponents.default.i.attrs(props => ({
+  className: props.outline ? 'ion ion-md-information-circle-outline' : 'ion ion-md-information-circle'
+})).withConfig({
   displayName: "InfoIconstyles__Icon",
   componentId: "sc-d3sdn3-1"
 })(["position:relative;left:-0.4px;display:inline-block;vertical-align:middle;font-size:16px;line-height:16px;vertical-align:middle;color:", ";transition:color 0.2s;&:hover{color:", ";}"], props => _theme.default.cGrey2, props => _theme.default.cPrimary);

package/dist/components/LearnMorePage/LearnMoreExampleObject.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.LearnMoreExampleObject = void 0;
-var _whales = _interopRequireDefault(require("../../static/images/whales.png"));
+var _avatarPlaceholder = _interopRequireDefault(require("../../static/images/avatar-placeholder.png"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const LearnMoreExampleObject = exports.LearnMoreExampleObject = {
   categories: [{
@@ -57,7 +57,7 @@ const LearnMoreExampleObject = exports.LearnMoreExampleObject = {
     content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',
     postType: 'video',
     videoSrc: '',
-    cover: _whales.default
+    cover: _avatarPlaceholder.default
   }, {
     id: 'category21',
     title: 'Get a 21 tast of token investing',
@@ -65,21 +65,21 @@ const LearnMoreExampleObject = exports.LearnMoreExampleObject = {
     content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><h4>Lorem ipsum dolor</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',
     postType: 'video',
     videoSrc: '',
-    cover: _whales.default
+    cover: _avatarPlaceholder.default
   }, {
     id: 'category22',
     title: 'Get a 22 tast of token investing',
     excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    content: "\n          <h5>Our vision</h5>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <h5>Our vision list</h5>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <ul>\n            <li>List item 1</li>\n            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</li>\n          </ul>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <img src=\"".concat(_whales.default, "\" alt=\"\" />\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n        "),
+    content: "\n          <h5>Our vision</h5>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <h5>Our vision list</h5>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <ul>\n            <li>List item 1</li>\n            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</li>\n          </ul>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <img src=\"".concat(_avatarPlaceholder.default, "\" alt=\"\" />\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n        "),
     postType: 'text',
-    cover: _whales.default
+    cover: _avatarPlaceholder.default
   }, {
     id: 'category31',
     title: 'Get a 3 tast of token investing',
     excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    content: "\n          <h5>Our vision</h5>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <h5>Our vision list</h5>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <ul>\n            <li>List item 1</li>\n            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</li>\n          </ul>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <img src=\"".concat(_whales.default, "\" alt=\"\" />\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n        "),
+    content: "\n          <h5>Our vision</h5>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <h5>Our vision list</h5>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <ul>\n            <li>List item 1</li>\n            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</li>\n          </ul>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <img src=\"".concat(_avatarPlaceholder.default, "\" alt=\"\" />\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n        "),
     postType: 'text',
-    cover: _whales.default
+    cover: _avatarPlaceholder.default
   }]
 };
 var _default = exports.default = LearnMoreExampleObject;

package/dist/components/Payment/PaymentDisplay.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PaymentDisplay = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _Text = require("../Text/Text.styles");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _copyToClipboard = require("../../utils/copyToClipboard");
+var _CryptoAddress = require("../CryptoAddress/CryptoAddress.styles");
+var _QRCode = _interopRequireDefault(require("../QRCode/QRCode"));
+var _SectionTitle = require("../SectionTitle/SectionTitle.styles");
+var _reactTippy = require("react-tippy");
+var _Grid = require("../Grid/Grid.styles");
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _usdcLogo = _interopRequireDefault(require("../../static/images/usdc-logo.svg"));
+var _usdqLogo = _interopRequireDefault(require("../../static/images/usdq-logo.png"));
+var _bitcoinLogo = _interopRequireDefault(require("../../static/images/bitcoin-logo.svg"));
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const CodeWrapper = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDisplay__CodeWrapper",
+  componentId: "sc-bsemn3-0"
+})(["background:", ";border:1px solid ", ";box-shadow:2px 4px 14px 0px rgb(196,196,196,0.25);border-radius:5px;padding:32px 64px;display:flex;flex-direction:column;align-items:center;gap:32px;margin:auto;max-width:", ";"], _colors.default.grey3, _colors.default.grey3, props => props.maxWidth || '550px');
+const AmountSection = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDisplay__AmountSection",
+  componentId: "sc-bsemn3-1"
+})(["display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin:14px 0 8px 0;> :nth-child(3){margin-left:-8px;}span{font-weight:400;text-transform:uppercase;line-height:28px;font-size:18px;letter-spacing:0.8px;", "}"], _rwd.default.XLarge(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 22px;\n  "]))));
+const AmountText = (0, _styledComponents.default)(_Text.Text).withConfig({
+  displayName: "PaymentDisplay__AmountText",
+  componentId: "sc-bsemn3-2"
+})(["font-size:24px;font-weight:800;text-transform:uppercase;line-height:40px;letter-spacing:1.5px;word-wrap:break-word;", ""], _rwd.default.XLarge(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-size: 34px;\n  "]))));
+const AmountIcon = _styledComponents.default.img.withConfig({
+  displayName: "PaymentDisplay__AmountIcon",
+  componentId: "sc-bsemn3-3"
+})(["width:24px;height:24px;", ""], _rwd.default.XLarge(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width:32px;\n    height:32px;\n  "]))));
+const AddressText = _styledComponents.default.p.withConfig({
+  displayName: "PaymentDisplay__AddressText",
+  componentId: "sc-bsemn3-4"
+})(["letter-spacing:0.6%;word-break:break-all;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0.1;margin:0;margin-top:14px;"]);
+const AddressDescription = _styledComponents.default.p.withConfig({
+  displayName: "PaymentDisplay__AddressDescription",
+  componentId: "sc-bsemn3-5"
+})(["font-size:14px;font-weight:300;line-height:20px;letter-spacing:0.5px;margin:0;"]);
+const CopyToClipBoardTooltip = _ref => {
+  let {
+    value,
+    buttonStyle,
+    onCopy
+  } = _ref;
+  const [copied, setCopied] = (0, _react.useState)(false);
+  const handleCopy = () => {
+    setCopied(true);
+    if (onCopy) onCopy(value);
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
+    position: "top",
+    title: copied ? 'Copied to clipboard!' : 'Click to copy to clipboard',
+    theme: "light",
+    arrow: true,
+    hideOnClick: false,
+    onHidden: () => setCopied(false),
+    duration: 200
+  }, /*#__PURE__*/_react.default.createElement(_copyToClipboard.CopyToClipboard, {
+    text: value,
+    onCopy: handleCopy
+  }, /*#__PURE__*/_react.default.createElement(_CryptoAddress.CopyToClipboardButton, {
+    style: buttonStyle
+  })));
+};
+const PaymentDisplay = _ref2 => {
+  let {
+    amount,
+    currency = 'BTC',
+    address,
+    showQRCode = true,
+    showCopyIcons = true,
+    showAddress = true,
+    qrCodeValue,
+    amountTitle = 'Transfer amount',
+    addressTitle = 'address',
+    addressDescription = '',
+    qrCodeSize = 200,
+    qrCodeStyle,
+    // Style props
+    containerStyle,
+    codeWrapperStyle,
+    amountSectionStyle,
+    amountTextStyle,
+    amountIconStyle,
+    addressTextStyle,
+    addressDescriptionStyle,
+    addressSectionStyle,
+    // Other customization props
+    maxWidth,
+    className,
+    codeWrapperClassName,
+    customCurrencyIcon,
+    onAmountCopy,
+    onAddressCopy,
+    copyButtonStyle
+  } = _ref2;
+  const getCurrencyIcon = currency => {
+    if (customCurrencyIcon) return customCurrencyIcon;
+    if (!currency) return null;
+    if (currency.toLowerCase().includes('btc')) return _bitcoinLogo.default;
+    if (currency.toLowerCase().includes('usdc')) return _usdcLogo.default;
+    if (currency.toLowerCase().includes('usdq')) return _usdqLogo.default;
+    return null;
+  };
+  const defaultQRCodeStyle = {
+    backgroundColor: '#000000',
+    padding: 18,
+    borderRadius: 8,
+    margin: '16px 0'
+  };
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, {
+    noPadding: true,
+    center: true,
+    style: containerStyle,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(CodeWrapper, {
+    style: codeWrapperStyle,
+    maxWidth: maxWidth,
+    className: codeWrapperClassName
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_SectionTitle.SectionTitle, null, amountTitle), /*#__PURE__*/_react.default.createElement(AmountSection, {
+    style: amountSectionStyle
+  }, /*#__PURE__*/_react.default.createElement(AmountIcon, {
+    src: getCurrencyIcon(currency),
+    style: amountIconStyle,
+    alt: currency
+  }), /*#__PURE__*/_react.default.createElement(AmountText, {
+    style: amountTextStyle
+  }, amount), /*#__PURE__*/_react.default.createElement(AmountText, {
+    style: amountTextStyle
+  }, " ", currency), showCopyIcons && /*#__PURE__*/_react.default.createElement(CopyToClipBoardTooltip, {
+    value: amount.toString(),
+    buttonStyle: copyButtonStyle || {
+      height: 18,
+      width: 18
+    },
+    onCopy: onAmountCopy
+  }))), showQRCode && qrCodeValue && /*#__PURE__*/_react.default.createElement(_QRCode.default, {
+    size: qrCodeSize,
+    bgColor: "#000000",
+    fgColor: "#ffffff",
+    style: qrCodeStyle || defaultQRCodeStyle,
+    value: qrCodeValue
+  }), showAddress && address && /*#__PURE__*/_react.default.createElement("div", {
+    style: addressSectionStyle
+  }, /*#__PURE__*/_react.default.createElement(_SectionTitle.SectionTitle, null, addressTitle), /*#__PURE__*/_react.default.createElement(_Grid.FlexContainer, {
+    style: {
+      gap: 16,
+      margin: '12px 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement(AddressText, {
+    style: addressTextStyle
+  }, address), showCopyIcons && /*#__PURE__*/_react.default.createElement(CopyToClipBoardTooltip, {
+    value: address,
+    buttonStyle: copyButtonStyle || {
+      height: 16,
+      width: 16,
+      marginTop: 4
+    },
+    onCopy: onAddressCopy
+  })), addressDescription && /*#__PURE__*/_react.default.createElement(AddressDescription, {
+    style: addressDescriptionStyle
+  }, addressDescription))));
+};
+exports.PaymentDisplay = PaymentDisplay;
+var _default = exports.default = PaymentDisplay;

package/dist/components/Payment/PaymentDisplay.stories.js

@@ -0,0 +1,302 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutQRCode = exports.WithoutCopyIcons = exports.WithCallbacks = exports.USDQPayment = exports.USDCPayment = exports.SmallQRCode = exports.Minimal = exports.LongAddress = exports.LargeQRCode = exports.LargeAmount = exports.CustomWidth = exports.CustomTitles = exports.CustomStyling = exports.CompleteExample = exports.BitcoinPayment = exports.AmountOnly = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PaymentDisplay = _interopRequireDefault(require("./PaymentDisplay"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Components Library/Payment/PaymentDisplay',
+  component: _PaymentDisplay.default,
+  argTypes: {
+    amount: {
+      control: 'text',
+      description: 'The payment amount to display'
+    },
+    currency: {
+      control: 'text',
+      description: 'Currency code (BTC, USDC, USDQ, etc.)'
+    },
+    address: {
+      control: 'text',
+      description: 'Cryptocurrency address to display'
+    },
+    showQRCode: {
+      control: 'boolean',
+      description: 'Show QR code section',
+      defaultValue: true
+    },
+    showCopyIcons: {
+      control: 'boolean',
+      description: 'Show copy to clipboard icons',
+      defaultValue: true
+    },
+    showAddress: {
+      control: 'boolean',
+      description: 'Show address section',
+      defaultValue: true
+    },
+    qrCodeValue: {
+      control: 'text',
+      description: 'Value to encode in QR code'
+    },
+    amountTitle: {
+      control: 'text',
+      description: 'Title for the amount section'
+    },
+    addressTitle: {
+      control: 'text',
+      description: 'Title for the address section'
+    },
+    addressDescription: {
+      control: 'text',
+      description: 'Description text below the address'
+    },
+    qrCodeSize: {
+      control: 'number',
+      description: 'Size of the QR code in pixels'
+    },
+    maxWidth: {
+      control: 'text',
+      description: 'Maximum width of the code wrapper'
+    },
+    containerStyle: {
+      control: 'object',
+      description: 'Style object for the container'
+    },
+    codeWrapperStyle: {
+      control: 'object',
+      description: 'Style object for the code wrapper'
+    },
+    qrCodeStyle: {
+      control: 'object',
+      description: 'Style object for the QR code'
+    },
+    customCurrencyIcon: {
+      control: false,
+      description: 'Custom currency icon (image source)'
+    },
+    onAmountCopy: {
+      action: 'amountCopied',
+      description: 'Callback when amount is copied'
+    },
+    onAddressCopy: {
+      action: 'addressCopied',
+      description: 'Callback when address is copied'
+    }
+  },
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(Story, null)))]
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_PaymentDisplay.default, args));
+
+// Basic BTC payment
+const BitcoinPayment = exports.BitcoinPayment = Template.bind({});
+BitcoinPayment.args = {
+  amount: '0.5',
+  currency: 'BTC',
+  address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  qrCodeValue: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  amountTitle: 'Transfer amount',
+  addressTitle: 'Bitcoin address',
+  addressDescription: 'Send exactly this amount to the address above.'
+};
+
+// USDC payment
+const USDCPayment = exports.USDCPayment = Template.bind({});
+USDCPayment.args = {
+  amount: '1,000.00',
+  currency: 'USDC',
+  address: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
+  qrCodeValue: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
+  amountTitle: 'Transfer amount',
+  addressTitle: 'USDC address',
+  addressDescription: 'Send USDC to this Ethereum address.'
+};
+
+// USDQ payment
+const USDQPayment = exports.USDQPayment = Template.bind({});
+USDQPayment.args = {
+  amount: '500.00',
+  currency: 'USDQ',
+  address: '0x8ba1f109551bD432803012645Hac136c22C1779',
+  qrCodeValue: '0x8ba1f109551bD432803012645Hac136c22C1779',
+  amountTitle: 'Transfer amount',
+  addressTitle: 'USDQ address',
+  addressDescription: 'Send USDQ to this address.'
+};
+
+// Without QR code
+const WithoutQRCode = exports.WithoutQRCode = Template.bind({});
+WithoutQRCode.args = {
+  amount: '0.5',
+  currency: 'BTC',
+  address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  showQRCode: false,
+  amountTitle: 'Transfer amount',
+  addressTitle: 'Bitcoin address'
+};
+
+// Without copy icons
+const WithoutCopyIcons = exports.WithoutCopyIcons = Template.bind({});
+WithoutCopyIcons.args = {
+  amount: '0.5',
+  currency: 'BTC',
+  address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  qrCodeValue: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  showCopyIcons: false,
+  amountTitle: 'Transfer amount',
+  addressTitle: 'Bitcoin address'
+};
+
+// Without address section
+const AmountOnly = exports.AmountOnly = Template.bind({});
+AmountOnly.args = {
+  amount: '0.5',
+  currency: 'BTC',
+  showAddress: false,
+  qrCodeValue: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  amountTitle: 'Transfer amount'
+};
+
+// Long address
+const LongAddress = exports.LongAddress = Template.bind({});
+LongAddress.args = {
+  amount: '1,000.00',
+  currency: 'USDC',
+  address: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
+  qrCodeValue: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
+  amountTitle: 'Transfer amount',
+  addressTitle: 'Ethereum address',
+  addressDescription: 'This is a very long address that should wrap properly. Make sure to send the exact amount.'
+};
+
+// Large amount
+const LargeAmount = exports.LargeAmount = Template.bind({});
+LargeAmount.args = {
+  amount: '1,000,000.00',
+  currency: 'USDC',
+  address: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
+  qrCodeValue: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
+  amountTitle: 'Transfer amount',
+  addressTitle: 'USDC address'
+};
+
+// Custom width
+const CustomWidth = exports.CustomWidth = Template.bind({});
+CustomWidth.args = {
+  amount: '0.5',
+  currency: 'BTC',
+  address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  qrCodeValue: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  maxWidth: '800px',
+  amountTitle: 'Transfer amount',
+  addressTitle: 'Bitcoin address'
+};
+
+// Custom styling
+const CustomStyling = exports.CustomStyling = Template.bind({});
+CustomStyling.args = {
+  amount: '0.5',
+  currency: 'BTC',
+  address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  qrCodeValue: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  amountTitle: 'Transfer amount',
+  addressTitle: 'Bitcoin address',
+  addressDescription: 'Send exactly this amount to the address above.',
+  codeWrapperStyle: {
+    backgroundColor: _colors.default.veryLightGreen,
+    borderColor: _colors.default.freshGreen
+  },
+  qrCodeStyle: {
+    backgroundColor: '#ffffff',
+    padding: 20,
+    borderRadius: 12
+  }
+};
+
+// Small QR code
+const SmallQRCode = exports.SmallQRCode = Template.bind({});
+SmallQRCode.args = {
+  amount: '0.5',
+  currency: 'BTC',
+  address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  qrCodeValue: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  qrCodeSize: 150,
+  amountTitle: 'Transfer amount',
+  addressTitle: 'Bitcoin address'
+};
+
+// Large QR code
+const LargeQRCode = exports.LargeQRCode = Template.bind({});
+LargeQRCode.args = {
+  amount: '0.5',
+  currency: 'BTC',
+  address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  qrCodeValue: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  qrCodeSize: 300,
+  amountTitle: 'Transfer amount',
+  addressTitle: 'Bitcoin address'
+};
+
+// Custom titles
+const CustomTitles = exports.CustomTitles = Template.bind({});
+CustomTitles.args = {
+  amount: '0.5',
+  currency: 'BTC',
+  address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  qrCodeValue: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  amountTitle: 'Payment Amount',
+  addressTitle: 'Recipient Address',
+  addressDescription: 'Please send the exact amount shown above to this address.'
+};
+
+// Minimal (no description, no QR)
+const Minimal = exports.Minimal = Template.bind({});
+Minimal.args = {
+  amount: '0.5',
+  currency: 'BTC',
+  address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  showQRCode: false,
+  addressDescription: '',
+  amountTitle: 'Amount',
+  addressTitle: 'Address'
+};
+
+// Complete example with all features
+const CompleteExample = exports.CompleteExample = Template.bind({});
+CompleteExample.args = {
+  amount: '1,500.00',
+  currency: 'USDC',
+  address: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
+  qrCodeValue: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
+  amountTitle: 'Transfer Amount',
+  addressTitle: 'USDC Address',
+  addressDescription: 'Send exactly 1,500.00 USDC to the address above. The transaction will be processed automatically once confirmed on the blockchain.',
+  qrCodeSize: 250,
+  maxWidth: '600px',
+  showQRCode: true,
+  showCopyIcons: true,
+  showAddress: true
+};
+
+// With callbacks
+const WithCallbacks = exports.WithCallbacks = Template.bind({});
+WithCallbacks.args = {
+  amount: '0.5',
+  currency: 'BTC',
+  address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  qrCodeValue: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
+  amountTitle: 'Transfer amount',
+  addressTitle: 'Bitcoin address',
+  onAmountCopy: value => {
+    console.log('Amount copied:', value);
+  },
+  onAddressCopy: value => {
+    console.log('Address copied:', value);
+  }
+};