@stokr/components-library 2.3.65-beta.1 → 2.3.65-beta.11

package/dist/static/images/document-icon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.08578 1.58578C1.5 2.17157 1.5 3.11438 1.5 5V7C1.5 8.8856 1.5 9.82845 2.08578 10.4142C2.67157 11 3.61438 11 5.5 11H6.5C8.3856 11 9.32845 11 9.9142 10.4142C10.5 9.82845 10.5 8.8856 10.5 7V5C10.5 3.11438 10.5 2.17157 9.9142 1.58578C9.32845 1 8.3856 1 6.5 1H5.5C3.61438 1 2.67157 1 2.08578 1.58578ZM4 4.625C3.7929 4.625 3.625 4.79289 3.625 5C3.625 5.2071 3.7929 5.375 4 5.375H8C8.2071 5.375 8.375 5.2071 8.375 5C8.375 4.79289 8.2071 4.625 8 4.625H4ZM4 6.625C3.7929 6.625 3.625 6.7929 3.625 7C3.625 7.2071 3.7929 7.375 4 7.375H6.5C6.7071 7.375 6.875 7.2071 6.875 7C6.875 6.7929 6.7071 6.625 6.5 6.625H4Z" fill="#0050CA"/>
+</svg>

package/dist/static/images/plus-icon.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 11.0827V2.91602" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.91797 7H11.0846" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/static/images/search-icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.33333 4C9.17427 4 10.6667 5.49239 10.6667 7.33333M11.1059 11.1033L14 14M12.6667 7.33333C12.6667 10.2789 10.2789 12.6667 7.33333 12.6667C4.38781 12.6667 2 10.2789 2 7.33333C2 4.38781 4.38781 2 7.33333 2C10.2789 2 12.6667 4.38781 12.6667 7.33333Z" stroke="#9B9B9B" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/static/images/sent-icon.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4481_24713)">
+<path d="M11.9389 0.491782C11.8855 0.44493 11.8095 0.43406 11.7451 0.463943L0.103795 5.8728C0.0411228 5.90193 0.000764077 5.96446 1.07135e-05 6.03356C-0.00074265 6.10265 0.0382887 6.16604 0.100352 6.1965L3.39481 7.81329C3.45522 7.84296 3.52726 7.83625 3.58121 7.79593L6.78433 5.40188L4.26975 7.98843C4.23388 8.02534 4.21558 8.07589 4.21953 8.12719L4.46989 11.3878C4.47545 11.46 4.52389 11.5218 4.59273 11.5444C4.61113 11.5505 4.63004 11.5534 4.64873 11.5534C4.69999 11.5534 4.74986 11.5314 4.78455 11.4912L6.53314 9.46498L8.69475 10.4978C8.74168 10.5202 8.79599 10.5212 8.84367 10.5004C8.89135 10.4797 8.92765 10.4393 8.94322 10.3897L11.9918 0.680374C12.0131 0.612571 11.9923 0.538634 11.9389 0.491782Z" fill="#0050CA"/>
+</g>
+<defs>
+<clipPath id="clip0_4481_24713">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/static/images/transfer-icon.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5576_18558)">
+<path d="M4.10179 5.87885C4.29705 6.07415 4.29705 6.3907 4.10179 6.586L3.18757 7.5002H7.99822C8.27437 7.5002 8.49822 7.72404 8.49822 8.00019C8.49822 8.27634 8.27437 8.5002 7.99822 8.5002H3.18757L4.10179 9.41439C4.29705 9.60964 4.29705 9.92625 4.10179 10.1215C3.90653 10.3168 3.58994 10.3168 3.39468 10.1215L1.62691 8.35374C1.43165 8.15849 1.43165 7.84189 1.62691 7.64665L3.39468 5.87885C3.58994 5.6836 3.90653 5.6836 4.10179 5.87885ZM7.89462 1.87887C8.0749 1.69863 8.35849 1.68476 8.55462 1.83728L8.60172 1.87887L10.3695 3.64664C10.5498 3.82688 10.5636 4.11049 10.4111 4.30664L10.3695 4.35375L8.60172 6.1215C8.40647 6.3168 8.08992 6.3168 7.89462 6.1215C7.71439 5.94126 7.70052 5.65763 7.85303 5.4615L7.89462 5.4144L8.80887 4.50019H3.99817C3.72203 4.50019 3.49817 4.27633 3.49817 4.00019C3.49817 3.74377 3.69119 3.53244 3.93986 3.50355L3.99817 3.50019H8.80887L7.89462 2.58598C7.69937 2.39072 7.69937 2.07413 7.89462 1.87887Z" fill="#3D9626"/>
+</g>
+<defs>
+<clipPath id="clip0_5576_18558">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/utils/formatCurrencyValue.js

@@ -3,9 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getProjectCurrencySign = exports.getCurrencySymbol = exports.formatCurrencyValue = void 0;
+exports.getProjectCurrencySign = exports.getLiquidAssetIcon = exports.getCurrencySymbol = exports.getCurrencyIcon = exports.formatCurrencyValue = void 0;
+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 _bmn2Logo = _interopRequireDefault(require("../static/images/bmn2-logo.svg"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const formatCurrencyValue = function (currency, value) {
   let tokenDecimals = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  const {
+    valueFirst = false
+  } = options;
   const [symbol, decimals] = {
     tether: ['USDT', 2],
     gemini: ['GUSD', 2],
@@ -27,7 +36,8 @@ const formatCurrencyValue = function (currency, value) {
     'usdc-fb': ['USDC', 2],
     'usdq-fb': ['USDQ', 2]
   }[currency] || [currency, tokenDecimals];
-  return "".concat(symbol, " ").concat(parseFloat(Math.abs(value)).toFixed(decimals));
+  const formattedValue = parseFloat(Math.abs(value)).toFixed(decimals);
+  return valueFirst ? "".concat(formattedValue, " ").concat(symbol) : "".concat(symbol, " ").concat(formattedValue);
 };
 exports.formatCurrencyValue = formatCurrencyValue;
 const getCurrencySymbol = currencySelected => ({
@@ -51,4 +61,34 @@ exports.getCurrencySymbol = getCurrencySymbol;
 const getProjectCurrencySign = tokenCurrency => {
   return tokenCurrency === 'EUR' ? '€' : tokenCurrency === 'USD' ? '$' : tokenCurrency === 'BTC' ? '₿' : '';
 };
-exports.getProjectCurrencySign = getProjectCurrencySign;
+exports.getProjectCurrencySign = getProjectCurrencySign;
+const getCurrencyIcon = (currency, customIcon) => {
+  if (customIcon) return customIcon;
+  if (!currency) return null;
+  switch (currency.toLowerCase()) {
+    case 'btc':
+    case 'bitcoin':
+      return _bitcoinLogo.default;
+    case 'usdc':
+      return _usdcLogo.default;
+    case 'usdq':
+      return _usdqLogo.default;
+    case 'bmn2':
+      return _bmn2Logo.default;
+    default:
+      return null;
+  }
+};
+
+//uses secondary asset id to get liquid icon
+exports.getCurrencyIcon = getCurrencyIcon;
+const getLiquidAssetIcon = async assetId => {
+  const url = "https://liquid.network/api/v1/asset/".concat(assetId, "/icon");
+  return new Promise(resolve => {
+    const img = new Image();
+    img.onload = () => resolve(url);
+    img.onerror = () => resolve(null);
+    img.src = url;
+  });
+};
+exports.getLiquidAssetIcon = getLiquidAssetIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.65-beta.1",
+  "version": "2.3.65-beta.11",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -18,7 +18,8 @@
     "build": "react-scripts build",
     "build-storybook": "storybook build",
     "build-storybook-docs": "storybook build -s public --docs",
-    "build:dist": "cross-env BABEL_ENV=production babel src -d dist",
+    "copy:static": "node -e \"require('fs').cpSync('src/static', 'dist/static', {recursive: true})\"",
+    "build:dist": "cross-env BABEL_ENV=production babel src -d dist && npm run copy:static",
     "test": "react-scripts test",
     "prepare": "npm run build",
     "storybook": "storybook dev -p 6006",

package/dist/components/2FA/EnterCode.stories.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.EnterCodeSimple = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _EnterCode = require("./EnterCode");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/2FA',
-  component: _EnterCode.EnterCode,
-  argTypes: {
-    isModal: {
-      type: 'boolean',
-      defaultValue: true
-    }
-    // inputType: { type: 'string' },
-    // placeholder: { type: 'string', defaultValue: '' },
-    // value: { type: 'string', defaultValue: '' },
-    // numInputs: { type: 'number', defaultValue: 4 },
-    // shouldAutoFocus: { type: 'boolean', defaultValue: false },
-    // onChange: { action: 'change', type: 'function' },
-    // onPaste: { type: 'function' },
-    // renderSeparator: { type: 'component' },
-  }
-};
-const Template = args => /*#__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(_EnterCode.EnterCode, args)));
-const EnterCodeSimple = exports.EnterCodeSimple = Template.bind({});
-EnterCodeSimple.args = {
-  isModalOpen: true,
-  popupError: {}
-};

package/dist/components/2FA/disable-2fa-flow.stories.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Disable2FA = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactRouterDom = require("react-router-dom");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _disable2faFlow = _interopRequireDefault(require("./disable-2fa-flow"));
-var _AuthContext = require("../../context/AuthContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/2FA',
-  component: _disable2faFlow.default,
-  argTypes: {
-    showFlow: {
-      type: 'boolean',
-      defaultValue: true
-    },
-    setShowFlow: {},
-    setShowPending: {},
-    withSuccessPage: {
-      type: 'boolean',
-      defaultValue: false
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_disable2faFlow.default, args))));
-const Disable2FA = exports.Disable2FA = Template.bind({});
-Disable2FA.args = {};

package/dist/components/2FA/enable-2fa-flow.stories.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Enable2FA = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactRouterDom = require("react-router-dom");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _enable2faFlow = _interopRequireDefault(require("./enable-2fa-flow"));
-var _AuthContext = require("../../context/AuthContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/2FA',
-  component: _enable2faFlow.default,
-  argTypes: {
-    showFlow: {
-      type: 'boolean',
-      defaultValue: true
-    },
-    setShowFlow: {},
-    setShowPending: {},
-    withSuccessPage: {
-      type: 'boolean',
-      defaultValue: false
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_enable2faFlow.default, args))));
-const Enable2FA = exports.Enable2FA = Template.bind({});
-Enable2FA.args = {};

package/dist/components/2FA/login-with-otp-flow.stories.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.LoginWithOTPFlow = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactRouterDom = require("react-router-dom");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _loginWithOtpFlow = _interopRequireDefault(require("./login-with-otp-flow"));
-var _AuthContext = require("../../context/AuthContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/2FA',
-  component: _loginWithOtpFlow.default,
-  argTypes: {
-    showFlow: {
-      type: 'boolean',
-      defaultValue: true
-    },
-    setShowFlow: {},
-    setShowPending: {},
-    withSuccessPage: {
-      type: 'boolean',
-      defaultValue: false
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_loginWithOtpFlow.default, args))));
-const LoginWithOTPFlow = exports.LoginWithOTPFlow = Template.bind({});
-LoginWithOTPFlow.args = {};

package/dist/components/2FA/main-flow.stories.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.MainFlow = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactRouterDom = require("react-router-dom");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _mainFlow = _interopRequireDefault(require("./main-flow"));
-var _AuthContext = require("../../context/AuthContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/2FA',
-  component: _mainFlow.default,
-  argTypes: {
-    showFlow: {
-      type: 'boolean',
-      defaultValue: true
-    },
-    setShowFlow: {},
-    setShowPending: {},
-    withSuccessPage: {
-      type: 'boolean',
-      defaultValue: false
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_mainFlow.default, args), /*#__PURE__*/_react.default.createElement("p", null, "some text"))));
-const MainFlow = exports.MainFlow = Template.bind({});
-MainFlow.args = {
-  //open2faflow: true,
-};

package/dist/components/AccountBalance/AccountBalance.stories.js

@@ -1,83 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.AccountBalanceRight = exports.AccountBalanceOverview = exports.AccountBalanceExample = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _AccountBalance = _interopRequireDefault(require("./AccountBalance"));
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Account Balance',
-  component: _AccountBalance.default,
-  argTypes: {
-    title: {
-      type: 'string',
-      defaultValue: '',
-      required: true
-    },
-    value: {
-      type: 'string',
-      defaultValue: '',
-      required: true
-    },
-    unit: {
-      type: 'string',
-      defaultValue: '',
-      required: true
-    },
-    eqValue: {
-      type: 'string'
-    },
-    eqUnit: {
-      type: 'string'
-    },
-    info: {
-      type: 'string',
-      defaultValue: ''
-    },
-    half: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    right: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    border: {
-      type: 'boolean',
-      defaultValue: false
-    }
-  }
-};
-const Template = args => /*#__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(_AccountBalance.default, args)));
-const AccountBalanceOverview = exports.AccountBalanceOverview = Template.bind({});
-AccountBalanceOverview.args = {
-  title: 'Account Balance Title',
-  value: ' some Value ',
-  unit: ' A Unit ',
-  info: 'Info Tooltip',
-  eqValue: ' eqValue ',
-  eqUnit: ' eqUnit '
-};
-const AccountBalanceExample = exports.AccountBalanceExample = Template.bind({});
-AccountBalanceExample.args = {
-  title: 'Account Balance Title',
-  value: '42',
-  unit: '€',
-  info: 'Information',
-  eqValue: '47,34',
-  eqUnit: '$'
-};
-const AccountBalanceRight = exports.AccountBalanceRight = Template.bind({});
-AccountBalanceRight.args = {
-  title: 'Account Balance Title',
-  value: '42',
-  unit: '€',
-  info: 'Information',
-  eqValue: '47,34',
-  eqUnit: '$',
-  right: true
-};