@ludo.ninja/components 1.7.5 → 1.7.6

package/dist/components/inviteCodesForms/styles/index.js

@@ -1,12 +1,18 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from 'styled-components';
-import { AccentColor, BlackColor, GrayBackgroundColor, } from '@ludo.ninja/ui/build/styles/colors';
-export var FormHeader = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: center;\n  user-select: none;\n\n  .caption {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    font-size: 20px;\n    line-height: 28px;\n    color: ", ";\n    text-decoration: none;\n\n    img {\n      margin-top: 8px;\n    }\n  }\n  &--text {\n    color: ", ";\n    margin-top: 16px;\n    text-align: left;\n    font-size: 13px;\n    line-height: 18px;\n  }\n"], ["\n  text-align: center;\n  user-select: none;\n\n  .caption {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    font-size: 20px;\n    line-height: 28px;\n    color: ", ";\n    text-decoration: none;\n\n    img {\n      margin-top: 8px;\n    }\n  }\n  &--text {\n    color: ", ";\n    margin-top: 16px;\n    text-align: left;\n    font-size: 13px;\n    line-height: 18px;\n  }\n"])), BlackColor, GrayBackgroundColor);
-export var FormContent = styled.form(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 24px;\n"], ["\n  margin-top: 24px;\n"])));
-export var FormSubmitBtn = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 24px;\n\n  button {\n    width: 100%;\n  }\n"], ["\n  margin-top: 24px;\n\n  button {\n    width: 100%;\n  }\n"])));
-export var FormLogOutBtn = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: 17px;\n"], ["\n  margin-top: 17px;\n"])));
-export var FormFooter = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: 24px;\n  text-align: center;\n\n  a,\n  strong {\n    color: ", ";\n    cursor: pointer;\n    font-weight: 400;\n  }\n"], ["\n  margin-top: 24px;\n  text-align: center;\n\n  a,\n  strong {\n    color: ", ";\n    cursor: pointer;\n    font-weight: 400;\n  }\n"])), AccentColor);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFooter = exports.FormLogOutBtn = exports.FormSubmitBtn = exports.FormContent = exports.FormHeader = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@ludo.ninja/ui/build/styles/colors");
+exports.FormHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: center;\n  user-select: none;\n\n  .caption {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    font-size: 20px;\n    line-height: 28px;\n    color: ", ";\n    text-decoration: none;\n\n    img {\n      margin-top: 8px;\n    }\n  }\n  &--text {\n    color: ", ";\n    margin-top: 16px;\n    text-align: left;\n    font-size: 13px;\n    line-height: 18px;\n  }\n"], ["\n  text-align: center;\n  user-select: none;\n\n  .caption {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    font-size: 20px;\n    line-height: 28px;\n    color: ", ";\n    text-decoration: none;\n\n    img {\n      margin-top: 8px;\n    }\n  }\n  &--text {\n    color: ", ";\n    margin-top: 16px;\n    text-align: left;\n    font-size: 13px;\n    line-height: 18px;\n  }\n"])), colors_1.BlackColor, colors_1.GrayBackgroundColor);
+exports.FormContent = styled_components_1.default.form(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 24px;\n"], ["\n  margin-top: 24px;\n"])));
+exports.FormSubmitBtn = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 24px;\n\n  button {\n    width: 100%;\n  }\n"], ["\n  margin-top: 24px;\n\n  button {\n    width: 100%;\n  }\n"])));
+exports.FormLogOutBtn = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: 17px;\n"], ["\n  margin-top: 17px;\n"])));
+exports.FormFooter = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: 24px;\n  text-align: center;\n\n  a,\n  strong {\n    color: ", ";\n    cursor: pointer;\n    font-weight: 400;\n  }\n"], ["\n  margin-top: 24px;\n  text-align: center;\n\n  a,\n  strong {\n    color: ", ";\n    cursor: pointer;\n    font-weight: 400;\n  }\n"])), colors_1.AccentColor);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/inviteCodesPage/components/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InviteCodeDate = exports.InviteCodeCopy = exports.InviteCodeCaption = exports.InviteCodes = void 0;
+var inviteCodes_1 = __importDefault(require("@/components/inviteCodesPage/components/inviteCodes"));
+exports.InviteCodes = inviteCodes_1.default;
+var inviteCodeCaption_1 = __importDefault(require("@/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption"));
+exports.InviteCodeCaption = inviteCodeCaption_1.default;
+var inviteCodeCopy_1 = __importDefault(require("@/components/inviteCodesPage/components/inviteCodes/inviteCodeCopy"));
+exports.InviteCodeCopy = inviteCodeCopy_1.default;
+var inviteCodeDate_1 = __importDefault(require("@/components/inviteCodesPage/components/inviteCodes/inviteCodeDate"));
+exports.InviteCodeDate = inviteCodeDate_1.default;

package/dist/components/inviteCodesPage/components/inviteCodes/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var loader_1 = __importDefault(require("@/components/inviteCodesPage/components/inviteCodes/inviteCode/loader"));
+// Styles
+var StyledInviteCodes = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow-x: auto;\n  padding: 5px 10px 0 0;\n"], ["\n  overflow-x: auto;\n  padding: 5px 10px 0 0;\n"])));
+// Component
+var InviteCodes = function (_a) {
+    var isLoading = _a.isLoading, children = _a.children;
+    if (isLoading)
+        return react_1.default.createElement(loader_1.default, null);
+    return react_1.default.createElement(StyledInviteCodes, null, children);
+};
+// Export
+exports.default = InviteCodes;
+var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCode/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@/styles/colors");
+var boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
+var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
+var _system_1 = require("@system");
+var vars_1 = require("@/fonts/vars");
+// Styles
+var StyledInviteCode = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ", ";\n  border-radius: 22px;\n  padding: 12px 18px;\n  min-height: 22px;\n  margin-bottom: 8px;\n\n  .code {\n    color: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ", ";\n  border-radius: 22px;\n  padding: 12px 18px;\n  min-height: 22px;\n  margin-bottom: 8px;\n\n  .code {\n    color: ", ";\n  }\n"])), vars_1.dmsansFontVarCss.css, function (props) { return (props.isCodeDisabled ? null : [boxShadow_1.default, boxTransform_1.default]); }, colors_1.WhiteColor, function (props) {
+    return props.isCodeDisabled ? colors_1.TextDarkGrayColor : colors_1.BlackColor;
+});
+// Component
+var InviteCode = function (_a) {
+    var inviteCode = _a.inviteCode, children = _a.children;
+    return (react_1.default.createElement(StyledInviteCode, { isCodeDisabled: inviteCode.isUsed },
+        react_1.default.createElement(_system_1.H5, { className: 'code' }, inviteCode.inviteCode),
+        children));
+};
+// Export
+exports.default = InviteCode;
+var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCode/loader/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+var styled_components_1 = __importDefault(require("styled-components"));
+//Styles
+var StyledSkeleton = (0, styled_components_1.default)(react_loading_skeleton_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 22px;\n  height: 44px;\n"], ["\n  border-radius: 22px;\n  height: 44px;\n"])));
+// Component
+var InviteCodeLoader = function () {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StyledSkeleton, null),
+        react_1.default.createElement(StyledSkeleton, { style: { marginTop: '8px' } }),
+        react_1.default.createElement(StyledSkeleton, { style: { marginTop: '8px' } }),
+        react_1.default.createElement(StyledSkeleton, { style: { marginTop: '8px' } }),
+        react_1.default.createElement(StyledSkeleton, { style: { marginTop: '8px' } })));
+};
+// Export
+exports.default = InviteCodeLoader;
+var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@/styles/colors");
+var loader_1 = __importDefault(require("@/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/loader"));
+var _system_1 = require("@system");
+// Styles
+var StyledIInviteCodeCaption = (0, styled_components_1.default)(_system_1.H3)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  user-select: none;\n"], ["\n  color: ", ";\n  user-select: none;\n"])), colors_1.BlackColor);
+// Component
+var InviteCodeCaption = function (_a) {
+    var isLoading = _a.isLoading, text = _a.text, isNeedRender = _a.isNeedRender;
+    if (!isNeedRender)
+        return null;
+    if (isLoading)
+        return react_1.default.createElement(loader_1.default, null);
+    return react_1.default.createElement(StyledIInviteCodeCaption, null, text);
+};
+// Export
+exports.default = InviteCodeCaption;
+var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/loader/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+var styled_components_1 = __importDefault(require("styled-components"));
+//Styles
+var StyledSkeleton = (0, styled_components_1.default)(react_loading_skeleton_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 22px;\n"], ["\n  height: 22px;\n"])));
+// Component
+var InviteCodeCaptionLoader = function () {
+    return react_1.default.createElement(StyledSkeleton, { style: { marginBottom: '16px' } });
+};
+// Export
+exports.default = InviteCodeCaptionLoader;
+var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCopy/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@/styles/colors");
+var _system_1 = require("@system");
+var copyBtn_1 = require("@/utils/copyBtn");
+// Styles
+var StyledInviteCodeCopy = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .copyBtn {\n    display: flex;\n    user-select: none;\n  }\n"], ["\n  .copyBtn {\n    display: flex;\n    user-select: none;\n  }\n"])));
+// Component
+var InviteCodeCopy = function (_a) {
+    var inviteCode = _a.inviteCode;
+    return (react_1.default.createElement(StyledInviteCodeCopy, null,
+        react_1.default.createElement("div", { className: 'copyBtn' },
+            react_1.default.createElement(copyBtn_1.CopyButton, { value: inviteCode.inviteCode },
+                react_1.default.createElement(_system_1.H5, { style: { marginLeft: '4px', cursor: 'pointer' }, color: colors_1.AccentColor }, "Copy")))));
+};
+// Export
+exports.default = InviteCodeCopy;
+var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeDate/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@/styles/colors");
+var _system_1 = require("@system");
+// Styles
+var StyledInviteCodeActivatedDate = (0, styled_components_1.default)(_system_1.H5)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 15px;\n  font-weight: 400;\n"], ["\n  color: ", ";\n  font-size: 15px;\n  font-weight: 400;\n"])), colors_1.ProgressColor);
+// Component
+var InviteCodeActivatedDate = function (_a) {
+    var value = _a.value;
+    return (react_1.default.createElement(StyledInviteCodeActivatedDate, null, "Activated on ".concat(value.toLocaleDateString('en-GB'))));
+};
+// Export
+exports.default = InviteCodeActivatedDate;
+var templateObject_1;

package/dist/components/inviteCodesPage/wrappers/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UsedCodes = exports.UnusedCodes = exports.ResumeCodes = void 0;
+var resumeCodes_1 = __importDefault(require("@/components/inviteCodesPage/wrappers/resumeCodes"));
+exports.ResumeCodes = resumeCodes_1.default;
+var unusedCodes_1 = __importDefault(require("@/components/inviteCodesPage/wrappers/unusedCodes"));
+exports.UnusedCodes = unusedCodes_1.default;
+var usedCodes_1 = __importDefault(require("@/components/inviteCodesPage/wrappers/usedCodes"));
+exports.UsedCodes = usedCodes_1.default;

package/dist/components/inviteCodesPage/wrappers/resumeCodes/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@ludo.ninja/ui/build/styles/colors");
+var utils_1 = require("@ludo.ninja/utils");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_2 = require("@/styles/colors");
+var boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
+var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
+var typography_1 = require("@/styles/typography");
+var loader_1 = __importDefault(require("@/components/inviteCodesPage/wrappers/resumeCodes/loader"));
+var MainButton_1 = __importDefault(require("@/system/Buttons/MainButton"));
+var _system_1 = require("@system");
+var vars_1 = require("@/fonts/vars");
+// Styles
+var StyledResumeCodes = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  background-color: ", ";\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ", " {\n    padding: 20px;\n  }\n"], ["\n  ", ";\n  ", ";\n  background-color: ", ";\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ", " {\n    padding: 20px;\n  }\n"])), boxShadow_1.default, boxTransform_1.default, colors_2.WhiteColor, ScreenWidth_1.mediaQuery.mobile);
+var StyledResumeCodesCaption = (0, styled_components_1.default)(_system_1.H1)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"])), colors_2.BlackColor, colors_2.AccentColor);
+var StyledResumeCodesSubCaption = (0, styled_components_1.default)(_system_1.H3)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 12px;\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"], ["\n  margin-top: 12px;\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"])), colors_2.TextGrayColor, colors_2.BlackColor);
+var StyledResumeCodesText = (0, styled_components_1.default)(_system_1.MainText)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  margin-top: 24px;\n  color: ", ";\n"], ["\n  font-family: ", ";\n  margin-top: 24px;\n  color: ", ";\n"])), vars_1.dmsansFontVarCss.css, colors_2.TextGrayColor);
+var StyledAddCodesText = (0, styled_components_1.default)(_system_1.MainText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  font-family: ", ";\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ", ";\n"], ["\n  ", ";\n  font-family: ", ";\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ", ";\n"])), typography_1.FH5, vars_1.dmsansFontVarCss.css, colors_1.TextGray2Color);
+// Component
+var ResumeCodes = function (_a) {
+    var invites = _a.invites, activeInvites = _a.activeInvites, isLoading = _a.isLoading, userId = _a.userId;
+    if (isLoading)
+        return react_1.default.createElement(loader_1.default, null);
+    var isPlural = function (nmb) { return (nmb <= 1 ? 'invite' : 'invites'); };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(StyledResumeCodes, null,
+            react_1.default.createElement(StyledResumeCodesCaption, null,
+                "You have ",
+                react_1.default.createElement("strong", null, "".concat(invites, " active ").concat(isPlural(invites)))),
+            react_1.default.createElement(StyledResumeCodesSubCaption, null,
+                "Your friends activated",
+                ' ',
+                react_1.default.createElement("strong", null, "".concat(activeInvites, " ").concat(isPlural(activeInvites))),
+                ' ',
+                "already")),
+        react_1.default.createElement(StyledResumeCodesText, null, "Invite your friends to be among the first who will collect Ludo XP, which is the key to unlock a variety of benefits. From benefiting from selected partner projects, such as airdrops or whitelisting spots, to increased XP for your engagement and activities, such as referrals, to an increased Ludo Rank. The more Ludo XP you gather, the richer your experience."),
+        react_1.default.createElement(StyledAddCodesText, null, "Do you have more friends to invite?"),
+        react_1.default.createElement(MainButton_1.default, { onClick: function () {
+                return window.open("".concat(utils_1.ASK_MORE_INVITES_GOOGLE_FORM).concat(userId), '_blank');
+            }, variant: "primaryM", text: 'Ask for more invites' })));
+};
+// Export
+exports.default = ResumeCodes;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/inviteCodesPage/wrappers/resumeCodes/loader/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+// Component
+var ResumeCodesLoader = function () {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_loading_skeleton_1.default, { style: { borderRadius: '8px', padding: '24px 32px' }, height: "100px" }),
+        react_1.default.createElement(react_loading_skeleton_1.default, { style: { borderRadius: '8px', marginTop: '24px' }, height: "30px" }),
+        react_1.default.createElement(react_loading_skeleton_1.default, { style: { borderRadius: '8px', marginTop: '12px' }, height: "20px" }),
+        react_1.default.createElement(react_loading_skeleton_1.default, { style: { borderRadius: '8px', marginTop: '12px' }, height: "20px" })));
+};
+// Export
+exports.default = ResumeCodesLoader;

package/dist/components/inviteCodesPage/wrappers/unusedCodes/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("@/components/inviteCodesPage/components");
+var inviteCodes_1 = __importDefault(require("@/components/inviteCodesPage/components/inviteCodes"));
+var inviteCode_1 = __importDefault(require("@/components/inviteCodesPage/components/inviteCodes/inviteCode"));
+var StyledUnusedCodes = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 40px;\n"], ["\n  margin-bottom: 40px;\n"])));
+// Component
+var UnusedCodes = function (_a) {
+    var unusedInvites = _a.unusedInvites, isLoading = _a.isLoading;
+    var renderUnusedInviteCodes = unusedInvites === null || unusedInvites === void 0 ? void 0 : unusedInvites.map(function (inviteCode) {
+        return (react_1.default.createElement(inviteCode_1.default, { key: inviteCode.inviteCode, inviteCode: inviteCode },
+            react_1.default.createElement(components_1.InviteCodeCopy, { inviteCode: inviteCode })));
+    });
+    if (!isLoading && (!unusedInvites || !unusedInvites.length)) {
+        return null;
+    }
+    return (react_1.default.createElement(StyledUnusedCodes, null,
+        react_1.default.createElement(inviteCodes_1.default, { isLoading: isLoading }, renderUnusedInviteCodes)));
+};
+// Export
+exports.default = UnusedCodes;
+var templateObject_1;

package/dist/components/inviteCodesPage/wrappers/usedCodes/index.js

@@ -0,0 +1,37 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("@/components/inviteCodesPage/components");
+var inviteCode_1 = __importDefault(require("@/components/inviteCodesPage/components/inviteCodes/inviteCode"));
+var inviteCodeDate_1 = __importDefault(require("@/components/inviteCodesPage/components/inviteCodes/inviteCodeDate"));
+// Styles
+var StyledUsedCodesCaption = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 16px;\n"], ["\n  margin-bottom: 16px;\n"])));
+// Component
+var UsedCodes = function (_a) {
+    var usedInvites = _a.usedInvites, isLoading = _a.isLoading;
+    var sortedInvitesOnDate = usedInvites
+        .sort(function (value, nextValue) { return value.usedAt - nextValue.usedAt; })
+        .reverse();
+    if (!isLoading && (!sortedInvitesOnDate || !sortedInvitesOnDate.length)) {
+        return null;
+    }
+    var renderUsedInviteCodes = sortedInvitesOnDate.map(function (inviteCode) {
+        return (react_1.default.createElement(inviteCode_1.default, { key: inviteCode.inviteCode, inviteCode: inviteCode },
+            react_1.default.createElement(inviteCodeDate_1.default, { value: new Date(inviteCode.usedAt) })));
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StyledUsedCodesCaption, null,
+            react_1.default.createElement(components_1.InviteCodeCaption, { isNeedRender: sortedInvitesOnDate.length, text: 'Activated invites', isLoading: isLoading })),
+        react_1.default.createElement(components_1.InviteCodes, { isLoading: isLoading }, renderUsedInviteCodes)));
+};
+// Export
+exports.default = UsedCodes;
+var templateObject_1;

package/dist/components/linkTabs/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+// Styles
+var StyledLinkTabs = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  position: relative;\n\n  &::after {\n    display: ", ";\n    position: absolute;\n    content: '';\n    border-bottom: 1px solid ", ";\n    width: 100%;\n    bottom: -4px;\n    left: 0;\n    right: 0;\n  }\n\n  a {\n    margin-left: 32px;\n\n    :first-child {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-bottom: ", ";\n\n    &::after {\n      bottom: ", ";\n      border-bottom-width: ", ";\n    }\n    a {\n      margin-left: ", ";\n    }\n  }\n"], ["\n  margin-bottom: 24px;\n  position: relative;\n\n  &::after {\n    display: ", ";\n    position: absolute;\n    content: '';\n    border-bottom: 1px solid ", ";\n    width: 100%;\n    bottom: -4px;\n    left: 0;\n    right: 0;\n  }\n\n  a {\n    margin-left: 32px;\n\n    :first-child {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-bottom: ", ";\n\n    &::after {\n      bottom: ", ";\n      border-bottom-width: ", ";\n    }\n    a {\n      margin-left: ", ";\n    }\n  }\n"])), function (props) { return (props.isUnderlined ? 'block' : 'none'); }, colors_1.BorderColorLight, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(-4), (0, _4k_1.adaptiveValueCalc)(1), (0, _4k_1.adaptiveValueCalc)(32));
+// Component
+var LinkTabs = function (_a) {
+    var isUnderlined = _a.isUnderlined, children = _a.children, style = _a.style;
+    return (react_1.default.createElement(StyledLinkTabs, { isUnderlined: isUnderlined, style: style }, children));
+};
+// Export
+exports.default = LinkTabs;
+var templateObject_1;

package/dist/components/linkTabs/linkTab/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var link_1 = __importDefault(require("next/link"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+var screen_1 = require("@/utils/screen");
+// Styles
+var StyledLinkTab = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  color: ", ";\n  cursor: pointer;\n  ", ";\n  user-select: none;\n  line-height: 1.4em;\n  text-decoration: none;\n\n  .count {\n    margin-right: 8px;\n    font-weight: 600;\n    color: ", ";\n  }\n\n  :before {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 100%;\n    height: 3px;\n    bottom: -4px;\n    left: 0;\n    background-color: #000;\n    transform: ", ";\n    transition: all 0.2s ease;\n  }\n\n  :hover {\n    color: ", ";\n\n    .count {\n      color: ", ";\n    }\n  }\n\n  :hover::before {\n    transform: scaleX(1);\n    transition: transform 0.2s ease-in-out;\n  }\n\n  ", " {\n    line-height: ", ";\n\n    .count {\n      margin-right: ", ";\n    }\n\n    :before {\n      height: ", ";\n      bottom: ", ";\n    }\n  }\n"], ["\n  position: relative;\n  color: ", ";\n  cursor: pointer;\n  ", ";\n  user-select: none;\n  line-height: 1.4em;\n  text-decoration: none;\n\n  .count {\n    margin-right: 8px;\n    font-weight: 600;\n    color: ", ";\n  }\n\n  :before {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 100%;\n    height: 3px;\n    bottom: -4px;\n    left: 0;\n    background-color: #000;\n    transform: ", ";\n    transition: all 0.2s ease;\n  }\n\n  :hover {\n    color: ", ";\n\n    .count {\n      color: ", ";\n    }\n  }\n\n  :hover::before {\n    transform: scaleX(1);\n    transition: transform 0.2s ease-in-out;\n  }\n\n  ", " {\n    line-height: ", ";\n\n    .count {\n      margin-right: ", ";\n    }\n\n    :before {\n      height: ", ";\n      bottom: ", ";\n    }\n  }\n"])), function (props) { return (props.isActive ? colors_1.BlackColor : colors_1.TextGrayColor); }, function (props) { return (props.isMobile ? typography_1.FH3 : typography_1.FH2); }, function (props) { return (props.isActive ? colors_1.AccentColor : colors_1.TextGrayColor); }, function (props) { return (props.isActive ? 'scaleX(1)' : 'scaleX(0)'); }, colors_1.BlackColor, function (props) { return (props.isActive ? colors_1.AccentColor : colors_1.BlackColor); }, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(22), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(3), (0, _4k_1.adaptiveValueCalc)(-4));
+var LinkTabs = function (_a) {
+    var link = _a.link, isActive = _a.isActive, countItems = _a.countItems, text = _a.text;
+    var deviceType = (0, screen_1.useWindowDimensions)().deviceType;
+    return (react_1.default.createElement(link_1.default, { href: link },
+        react_1.default.createElement(StyledLinkTab, { isActive: isActive, isMobile: deviceType === 'isMobile' },
+            countItems !== null && (react_1.default.createElement("strong", { className: 'count' }, countItems)),
+            text)));
+};
+// Export
+exports.default = LinkTabs;
+var templateObject_1;

package/dist/components/myWallets/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var core_1 = require("@ludo.ninja/core");
+var store_1 = require("@/modules/user/store");
+var useFetchUserWallets_1 = __importDefault(require("@/api/server-identities/queries/useFetchUserWallets"));
+var myWalletItem_1 = __importDefault(require("@/components/myWallets/myWalletItem"));
+var _system_1 = require("@system");
+var StyledMyWallets = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 20px auto 0 auto;\n  width: 300px;\n  height: 348px;\n  overflow-x: scroll;\n"], ["\n  margin: 20px auto 0 auto;\n  width: 300px;\n  height: 348px;\n  overflow-x: scroll;\n"])));
+var MyWallets = function () {
+    var getUser = (0, store_1.useUserStore)(function (state) { return state.user; });
+    var userWallets = (0, useFetchUserWallets_1.default)({
+        userId: getUser === null || getUser === void 0 ? void 0 : getUser.userId,
+    }).userWallets;
+    var renderWallets = function () {
+        return userWallets === null || userWallets === void 0 ? void 0 : userWallets.map(function (userWallet, iter) {
+            return (react_1.default.createElement(myWalletItem_1.default, { key: iter, userId: getUser === null || getUser === void 0 ? void 0 : getUser.userId, blockchain: new core_1.BlockChainEntity(userWallet.blockchain || ''), address: userWallet.address || null, chainId: userWallet.chainId || '', isMainWallet: userWallet.mainWallet }));
+        });
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_system_1.H2, null, 'My Wallets'),
+        react_1.default.createElement(StyledMyWallets, null, renderWallets())));
+};
+exports.default = MyWallets;
+var templateObject_1;