@ludo.ninja/components 2.4.8 → 2.4.10

package/build/api/discord/useCheckDiscordFollow.d.ts

@@ -0,0 +1,8 @@
+export type FollowStatus = {
+    following: boolean;
+};
+export declare function useCheckDiscordFollow(discordUserId: string | undefined | null, guildId?: string): {
+    followDiscordStatus: FollowStatus | null;
+    followDiscordStatusLoading: boolean;
+    followDiscordStatusError: string | null;
+};

package/build/api/discord/useCheckDiscordFollow.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCheckDiscordFollow = useCheckDiscordFollow;
+const react_1 = require("react");
+const PUBLIC_BOT_TOKEN = 'MTQyNTUxNzk0NzkyNDkwNTk5Ng.Gw3gFJ.RqMrnFGVC3yuyB13oCh2m0GDUYpeSRzfMnEXfc';
+function useCheckDiscordFollow(discordUserId, guildId = '854266585862504459') {
+    const [status, setStatus] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!discordUserId)
+            return;
+        async function checkFollow() {
+            setLoading(true);
+            setError(null);
+            try {
+                const urlGetUserDiscordId = `https://discord.com/api/guilds/${guildId}/members/${discordUserId}`;
+                const followRes = await fetch(urlGetUserDiscordId, {
+                    headers: {
+                        Authorization: `Bot ${PUBLIC_BOT_TOKEN}`,
+                    },
+                });
+                const followData = await followRes.json();
+                setStatus({
+                    following: followData?.user?.id || false,
+                });
+            }
+            catch (err) {
+                setError(err.message || 'Error discord check follow');
+                setStatus({ following: false });
+            }
+            finally {
+                setLoading(false);
+            }
+        }
+        // checkFollow();
+    }, [discordUserId, guildId]);
+    return {
+        followDiscordStatus: status,
+        followDiscordStatusLoading: loading,
+        followDiscordStatusError: error,
+    };
+}

package/build/api/server-identities/mutations/useRefCodeMutation/index.d.ts

@@ -0,0 +1,7 @@
+import { identitySchema as schema } from '@ludo.ninja/api';
+declare const useRefCodeMutation: () => {
+    activateRefCode: ({ refcode, }: schema.IUseRefcodeMutationVariables) => Promise<import("@apollo/client").FetchResult<schema.IUseRefcodeMutation>>;
+    error: import("@apollo/client").ApolloError | undefined;
+    loading: boolean;
+};
+export default useRefCodeMutation;

package/build/api/server-identities/mutations/useRefCodeMutation/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const api_1 = require("@ludo.ninja/api");
+const data_1 = require("@ludo.ninja/ui/build/system/Alert/data");
+const ui_1 = require("../../../../store/ui");
+const getErrorAlertProps_1 = require("../../../../utils/getErrorAlertProps");
+const useRefCodeMutation = () => {
+    const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
+    const [mutate, { error, loading }] = api_1.identitySchema.useUseRefcodeMutation({
+        context: {
+            uri: api_1.hosts.identityHost,
+        },
+        onCompleted: () => {
+            openAlert({
+                ...data_1.alertSuccess,
+                caption: 'Success!',
+                text: 'Referral code applied',
+            });
+        },
+        onError: (err) => {
+            openAlert((0, getErrorAlertProps_1.getErrorAlertProps)(err));
+        },
+    });
+    return { activateRefCode, error, loading };
+    async function activateRefCode({ refcode, }) {
+        return mutate({
+            variables: { refcode },
+        });
+    }
+};
+exports.default = useRefCodeMutation;

package/build/api/server-identities/mutations/useSetEducatorBoost/index.d.ts

@@ -0,0 +1,7 @@
+declare const useSetEducatorBoost: () => {
+    isSetEducatorBoost: boolean;
+    errorSetEducatorBoost: import("@apollo/client").ApolloError | undefined;
+    loadingSetEducatorBoost: boolean;
+    setEducatorBoost: () => Promise<void>;
+};
+export default useSetEducatorBoost;

package/build/api/server-identities/mutations/useSetEducatorBoost/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ui_1 = require("../../../../store/ui");
+const getErrorAlertProps_1 = require("../../../../utils/getErrorAlertProps");
+const api_1 = require("@ludo.ninja/api");
+const react_1 = require("react");
+const useSetEducatorBoost = () => {
+    const [isSetEducatorBoost, setSetEducatorBoost] = (0, react_1.useState)(false);
+    const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
+    const [mutate, { error, loading }] = api_1.identitySchema.useSetEducatorBoostMutation({
+        context: {
+            uri: api_1.hosts.identityHost,
+        },
+        fetchPolicy: "no-cache",
+        refetchQueries: [api_1.identitySchema.FetchProfileDocument],
+        onCompleted: (data) => {
+            setSetEducatorBoost(data.setEducatorBoost);
+        },
+        onError: (err) => {
+            setSetEducatorBoost(false);
+            openAlert((0, getErrorAlertProps_1.getErrorAlertProps)(err));
+        },
+    });
+    return {
+        isSetEducatorBoost,
+        errorSetEducatorBoost: error,
+        loadingSetEducatorBoost: loading,
+        setEducatorBoost,
+    };
+    async function setEducatorBoost() {
+        try {
+            await mutate();
+        }
+        catch (err) {
+            throw new Error(err);
+        }
+    }
+};
+exports.default = useSetEducatorBoost;

package/build/api/server-identities/mutations/useSetShootingStarBoost/index.d.ts

@@ -0,0 +1,7 @@
+declare const useSetShootingStarBoost: () => {
+    isSetShootingStarBoost: boolean;
+    errorSetShootingStarBoost: import("@apollo/client").ApolloError | undefined;
+    loadingSetShootingStarBoost: boolean;
+    setShootingStarBoost: () => Promise<void>;
+};
+export default useSetShootingStarBoost;

package/build/api/server-identities/mutations/useSetShootingStarBoost/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ui_1 = require("../../../../store/ui");
+const getErrorAlertProps_1 = require("../../../../utils/getErrorAlertProps");
+const api_1 = require("@ludo.ninja/api");
+const react_1 = require("react");
+const useSetShootingStarBoost = () => {
+    const [isSetShootingStarBoost, setSetShootingStarBoost] = (0, react_1.useState)(false);
+    const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
+    const [mutate, { error, loading }] = api_1.identitySchema.useSetEducatorBoostMutation({
+        context: {
+            uri: api_1.hosts.identityHost,
+        },
+        fetchPolicy: "no-cache",
+        refetchQueries: [api_1.identitySchema.FetchProfileDocument],
+        onCompleted: (data) => {
+            setSetShootingStarBoost(data.setEducatorBoost);
+        },
+        onError: (err) => {
+            setSetShootingStarBoost(false);
+            openAlert((0, getErrorAlertProps_1.getErrorAlertProps)(err));
+        },
+    });
+    return {
+        isSetShootingStarBoost,
+        errorSetShootingStarBoost: error,
+        loadingSetShootingStarBoost: loading,
+        setShootingStarBoost,
+    };
+    async function setShootingStarBoost() {
+        try {
+            await mutate();
+        }
+        catch (err) {
+            throw new Error(err);
+        }
+    }
+};
+exports.default = useSetShootingStarBoost;

package/build/api/twitter/useCheckFollow.d.ts

@@ -0,0 +1,8 @@
+export type FollowStatus = {
+    following: boolean;
+};
+export declare function useCheckFollow(twitterUserName: string, targetId?: string): {
+    followStatus: FollowStatus | null;
+    followStatusLoading: boolean;
+    followStatusError: string | null;
+};

package/build/api/twitter/useCheckFollow.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCheckFollow = useCheckFollow;
+const react_1 = require("react");
+const PUBLIC_RAPIDAPI_KEY = '008878bf3fmsh433e12023d252b1p1a9c62jsn174299b26b6a';
+function useCheckFollow(twitterUserName, targetId = '1566713352138760197') {
+    const [status, setStatus] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!twitterUserName)
+            return;
+        async function checkFollow() {
+            setLoading(true);
+            setError(null);
+            try {
+                const urlGetUserTwitterId = `https://twitter-api47.p.rapidapi.com/v2/user/by-username?username=${twitterUserName}`;
+                const userRes = await fetch(urlGetUserTwitterId, {
+                    headers: {
+                        'x-rapidapi-host': 'twitter-api47.p.rapidapi.com',
+                        'x-rapidapi-key': PUBLIC_RAPIDAPI_KEY,
+                    },
+                });
+                const userData = await userRes.json();
+                const twitterUserId = userData?.rest_id;
+                if (!twitterUserId) {
+                    throw new Error('Error loading twitter user ID');
+                }
+                const urlCheckFollow = `https://twitter-api47.p.rapidapi.com/v2/user/friendship?subjectId=${twitterUserId}&targetId=${targetId}`;
+                const followRes = await fetch(urlCheckFollow, {
+                    headers: {
+                        'x-rapidapi-host': 'twitter-api47.p.rapidapi.com',
+                        'x-rapidapi-key': PUBLIC_RAPIDAPI_KEY
+                    },
+                });
+                const followData = await followRes.json();
+                setStatus({
+                    following: followData?.relationship?.source?.following || false,
+                });
+            }
+            catch (err) {
+                setError(err.message || 'Error twitter check follow');
+                setStatus(null);
+            }
+            finally {
+                setLoading(false);
+            }
+        }
+        checkFollow();
+    }, [twitterUserName, targetId]);
+    return {
+        followStatus: status,
+        followStatusLoading: loading,
+        followStatusError: error,
+    };
+}

package/build/components/ludoEducatorModal/CheckListItem.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+type Props = {
+    title: string | React.ReactNode;
+    isDone: boolean;
+    withoutIcon?: boolean;
+};
+declare const CheckListItem: FC<Props>;
+export default CheckListItem;

package/build/components/ludoEducatorModal/CheckListItem.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const index_1 = require("../../system/index");
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+const CheckListItem = ({ title, isDone, withoutIcon }) => {
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [!withoutIcon &&
+                (isDone ? ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "10", cy: "10", r: "8", fill: "#6048FF" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.7906 7.2286C14.0698 7.53339 14.0698 8.02757 13.7906 8.33236L9.72351 12.7714C9.44426 13.0762 8.99149 13.0762 8.71224 12.7714L6.20944 10.0397C5.93019 9.73489 5.93019 9.24072 6.20944 8.93592C6.4887 8.63112 6.94146 8.63112 7.22071 8.93592L9.21788 11.1158L12.7793 7.2286C13.0585 6.9238 13.5113 6.9238 13.7906 7.2286Z", fill: "white" })] })) : ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "10", cy: "10", r: "8", fill: "#F94C66" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.92584 6.92063C7.23688 6.58312 7.75169 6.57217 8.0757 6.89617L10.0035 8.82388L11.9314 6.896C12.2555 6.572 12.7703 6.58296 13.0813 6.92047C13.3923 7.25798 13.3818 7.79424 13.0578 8.11824L11.1778 9.99818L13.0578 11.8783C13.3818 12.2023 13.3923 12.7386 13.0813 13.0761C12.7702 13.4136 12.2554 13.4245 11.9314 13.1005L10.0035 11.1725L8.07574 13.1005C7.75176 13.4245 7.23695 13.4136 6.92589 13.0761C6.61483 12.7386 6.6253 12.2024 6.94928 11.8783L8.82919 9.9982L6.94933 8.11839C6.62532 7.7944 6.6148 7.25814 6.92584 6.92063Z", fill: "white" })] }))), (0, jsx_runtime_1.jsx)(index_1.H6, { children: title })] }));
+};
+exports.default = CheckListItem;

package/build/components/ludoEducatorModal/Congratulations.d.ts

@@ -0,0 +1,4 @@
+declare const Congratulations: ({ message, }: {
+    message?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Congratulations;

package/build/components/ludoEducatorModal/Congratulations.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const confetti_1 = __importDefault(require("./confetti"));
+const arrow_svg_1 = __importDefault(require("./icons/arrow.svg"));
+const confetti_svg_1 = __importDefault(require("./icons/confetti.svg"));
+const index_1 = require("./index");
+const store_1 = require("../../modules/user/store");
+const env_1 = require("../../store/env");
+const ScreenWidth_1 = require("../../styles/ScreenWidth");
+const colors_1 = require("../../styles/colors");
+const MainButton_1 = __importDefault(require("../../system/Buttons/MainButton"));
+const index_2 = require("../../system/index");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const router_1 = require("next/router");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Title = styled_components_1.default.div `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+  }
+`;
+const Description = (0, styled_components_1.default)(index_2.H6) `
+  padding: 17px 0 36px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(17)} 0 ${(0, _4k_1.adaptiveValueCalc)(36)};
+  }
+`;
+const StyledButton = (0, styled_components_1.default)(MainButton_1.default) `
+  width: 100%;
+  background: rgba(234, 237, 252, 0.5);
+  border: 1px solid #eaedfc;
+
+  > div {
+    justify-content: center;
+  }
+
+  &:hover {
+    background: rgba(234, 237, 252, 0.5);
+    border: 1px solid #eaedfc;
+  }
+`;
+const ButtonText = styled_components_1.default.div `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: ${colors_1.AccentColor};
+
+  svg {
+    path {
+      stroke: ${colors_1.AccentColor};
+    }
+  }
+`;
+const ModalBackground = styled_components_1.default.div `
+  position: absolute;
+  inset: 0;
+  border-radius: 8px;
+  background: linear-gradient(128deg, #86f48f 10.96%, #84c1f3 89.56%);
+  z-index: -1;
+`;
+const Congratulations = ({ message = "You are now a Ludo Educator! Check how you can take advantage of it and start earning with our platform.", }) => {
+    (0, react_1.useEffect)(() => {
+        (0, confetti_1.default)();
+    }, []);
+    const router = (0, router_1.useRouter)();
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
+    const { user } = (0, store_1.useUserStore)((state) => ({
+        user: state.user,
+    }));
+    const userId = user?.userId || "";
+    const handleRedirectToRewards = () => {
+        router.push(`${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/rewards/${userId}`);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(index_1.Wrapper, { children: [(0, jsx_runtime_1.jsxs)(Title, { children: [(0, jsx_runtime_1.jsx)(confetti_svg_1.default, {}), (0, jsx_runtime_1.jsx)(index_2.H3, { children: "Congratulations!" })] }), (0, jsx_runtime_1.jsx)(Description, { children: message }), (0, jsx_runtime_1.jsx)(StyledButton, { variant: "outline", onClick: handleRedirectToRewards, text: (0, jsx_runtime_1.jsxs)(ButtonText, { children: [(0, jsx_runtime_1.jsx)(index_2.H5, { children: "Explore Benefits" }), (0, jsx_runtime_1.jsx)(arrow_svg_1.default, {})] }) })] }), (0, jsx_runtime_1.jsx)(ModalBackground, {})] }));
+};
+exports.default = Congratulations;

package/build/components/ludoEducatorModal/confetti/index.d.ts

@@ -0,0 +1,2 @@
+declare const claimConfetti: () => void;
+export default claimConfetti;

package/build/components/ludoEducatorModal/confetti/index.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const canvas_confetti_1 = __importDefault(require("canvas-confetti"));
+const count = 400;
+const defaults = {
+    origin: { y: 0.5 },
+};
+function fire(particleRatio, opts) {
+    (0, canvas_confetti_1.default)({
+        ...defaults,
+        ...opts,
+        zIndex: 9999,
+        particleCount: Math.floor(count * particleRatio),
+    });
+}
+const claimConfetti = () => {
+    fire(0.25, {
+        spread: 26,
+        startVelocity: 75,
+    });
+    fire(0.2, {
+        spread: 60,
+    });
+    fire(0.35, {
+        spread: 100,
+        decay: 0.91,
+        scalar: 0.8,
+    });
+    fire(0.1, {
+        spread: 120,
+        startVelocity: 45,
+        decay: 0.92,
+        scalar: 1.2,
+    });
+    fire(0.1, {
+        spread: 120,
+        startVelocity: 65,
+    });
+};
+exports.default = claimConfetti;

package/build/components/ludoEducatorModal/index.d.ts

@@ -0,0 +1,13 @@
+import { ApolloQueryResult, OperationVariables } from "@apollo/client";
+import { identitySchema as schema } from "@ludo.ninja/api";
+import { IBoostType } from "@ludo.ninja/api/build/graphql_tools/__generated__/identityHost/schema";
+import React, { FC } from "react";
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+type Props = Pick<schema.IProfile, "social"> & {
+    refetchProfile: (variables?: Partial<OperationVariables> | undefined) => Promise<ApolloQueryResult<any>>;
+    boostType: IBoostType;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const LudoEducatorModal: FC<Props>;
+export default LudoEducatorModal;

package/build/components/ludoEducatorModal/index.js

@@ -0,0 +1,175 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CheckListItem_1 = __importDefault(require("./CheckListItem"));
+const Congratulations_1 = __importDefault(require("./Congratulations"));
+const arrow_svg_1 = __importDefault(require("./icons/arrow.svg"));
+const useCheckDiscordFollow_1 = require("../../api/discord/useCheckDiscordFollow");
+const useSetEducatorBoost_1 = __importDefault(require("../../api/server-identities/mutations/useSetEducatorBoost"));
+const useSetShootingStarBoost_1 = __importDefault(require("../../api/server-identities/mutations/useSetShootingStarBoost"));
+const useCheckFollow_1 = require("../../api/twitter/useCheckFollow");
+const env_1 = require("../../store/env");
+const ui_1 = require("../../store/ui");
+const ScreenWidth_1 = require("../../styles/ScreenWidth");
+const colors_1 = require("../../styles/colors");
+const MainButton_1 = __importDefault(require("../../system/Buttons/MainButton"));
+const index_1 = require("../../system/index");
+const schema_1 = require("@ludo.ninja/api/build/graphql_tools/__generated__/identityHost/schema");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const ui_2 = require("@ludo.ninja/ui");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const utils_1 = require("@ludo.ninja/utils");
+const link_1 = __importDefault(require("next/link"));
+const rc_tooltip_1 = __importDefault(require("rc-tooltip"));
+const react_1 = require("react");
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Wrapper = styled_components_1.default.div `
+  width: 272px;
+  margin-top: -18px;
+  text-align: center;
+
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    margin: 0 auto;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(272)};
+    margin-top: ${(0, _4k_1.adaptiveValueCalc)(-18)};
+  }
+`;
+const CheckList = styled_components_1.default.div `
+  display: inline-flex;
+  align-items: start;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px 0 10px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    gap: ${(0, _4k_1.adaptiveValueCalc)(12)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(24)} 0 ${(0, _4k_1.adaptiveValueCalc)(10)};
+  }
+`;
+const StyledLink = (0, styled_components_1.default)(link_1.default) `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: ${colors_1.BlackColor};
+  cursor: pointer;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+  }
+
+  svg {
+    path {
+      stroke: #6048ff;
+    }
+  }
+`;
+const FollowLink = styled_components_1.default.a `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: ${colors_1.BlackColor};
+  cursor: pointer;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+  }
+
+  svg {
+    path {
+      stroke: #6048ff;
+    }
+  }
+`;
+const StyledSkeleton = (0, styled_components_1.default)(react_loading_skeleton_1.default) `
+  height: 20px;
+  width: 154px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+    width: ${(0, _4k_1.adaptiveValueCalc)(154)};
+  }
+`;
+const ActionButton = (0, styled_components_1.default)(MainButton_1.default) `
+  margin-top: 26px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    margin-top: ${(0, _4k_1.adaptiveValueCalc)(26)};
+  }
+`;
+const LudoEducatorModal = ({ social, refetchProfile, boostType, className, style }) => {
+    const twitterUserName = social?.twitter?.split("https://x.com/")?.[1] || "";
+    const { followStatus, followStatusLoading } = (0, useCheckFollow_1.useCheckFollow)(twitterUserName);
+    const { followDiscordStatus, followDiscordStatusLoading } = (0, useCheckDiscordFollow_1.useCheckDiscordFollow)(social?.discordId);
+    const { setEducatorBoost, loadingSetEducatorBoost } = (0, useSetEducatorBoost_1.default)();
+    const { setShootingStarBoost, loadingSetShootingStarBoost } = (0, useSetShootingStarBoost_1.default)();
+    const isSocialsConnected = social?.twitter && social?.telegramLink;
+    const isCheckListDone = followStatus?.following && isSocialsConnected && social?.telegramId;
+    const isShootingStarCheckListDone = isCheckListDone && followDiscordStatus?.following && social?.discordId;
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
+    const openModalSidebarPortal = (0, ui_1.useUiStore)((state) => state.openModalSidebarPortal);
+    const closeModalSidebarPortal = (0, ui_1.useUiStore)((state) => state.closeModalSidebarPortal);
+    const handleBecomeLudoEducator = () => {
+        setEducatorBoost().then(() => {
+            refetchProfile && refetchProfile();
+            closeModalSidebarPortal();
+            openModalSidebarPortal((0, jsx_runtime_1.jsx)(Congratulations_1.default, {}));
+        });
+    };
+    const handleBecomeLudoShootingStar = () => {
+        setShootingStarBoost().then(() => {
+            refetchProfile && refetchProfile();
+            closeModalSidebarPortal();
+            openModalSidebarPortal((0, jsx_runtime_1.jsx)(Congratulations_1.default, { message: "You are now a Ludo Shooting Star! Check how you can take advantage of it." }));
+        });
+    };
+    const handleSubmit = () => {
+        switch (boostType) {
+            case schema_1.IBoostType.Educator:
+                handleBecomeLudoEducator();
+                return;
+            case schema_1.IBoostType.Ambassador:
+                handleBecomeLudoShootingStar();
+                return;
+        }
+    };
+    const getSubmitButtonLabel = () => {
+        switch (boostType) {
+            case schema_1.IBoostType.Educator:
+                return "Become Ludo Educator";
+            case schema_1.IBoostType.Ambassador:
+                return "Become Shooting Star";
+        }
+    };
+    const getSubmitButtonDisabled = () => {
+        switch (boostType) {
+            case schema_1.IBoostType.Educator:
+                return !isCheckListDone || loadingSetEducatorBoost;
+            case schema_1.IBoostType.Ambassador:
+                return !isShootingStarCheckListDone || loadingSetShootingStarBoost;
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        refetchProfile && refetchProfile();
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(exports.Wrapper, { className: className, style: style, children: [(0, jsx_runtime_1.jsx)(ui_2.H3, { children: "Join Ludo Educators" }), (0, jsx_runtime_1.jsxs)(CheckList, { children: [(0, jsx_runtime_1.jsx)(CheckListItem_1.default, { isDone: !!social?.twitter, title: social?.twitter ? ("Connect Twitter") : ((0, jsx_runtime_1.jsxs)(StyledLink, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["account"]}/settings`, children: [(0, jsx_runtime_1.jsx)(index_1.H6, { children: "Connect Twitter" }), (0, jsx_runtime_1.jsx)(arrow_svg_1.default, {})] })) }), (0, jsx_runtime_1.jsx)(CheckListItem_1.default, { isDone: !!social?.telegramLink, title: social?.telegramLink ? ("Connect Telegram") : ((0, jsx_runtime_1.jsxs)(StyledLink, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["account"]}/settings`, children: [(0, jsx_runtime_1.jsx)(index_1.H6, { children: "Connect Telegram" }), (0, jsx_runtime_1.jsx)(arrow_svg_1.default, {})] })) }), followStatusLoading ? ((0, jsx_runtime_1.jsx)(StyledSkeleton, {})) : ((0, jsx_runtime_1.jsx)(CheckListItem_1.default, { isDone: Boolean(followStatus?.following), title: (0, jsx_runtime_1.jsx)(rc_tooltip_1.default, { placement: "top", trigger: ["hover", "click", "focus"], showArrow: false, styles: {
+                                root: {
+                                    backgroundColor: "#ffffff",
+                                    opacity: 1,
+                                    boxShadow: " 0px 4px 16px -2px rgba(0, 0, 0, 0.14)",
+                                    borderRadius: "12px",
+                                },
+                                body: {
+                                    borderRadius: "12px",
+                                    border: "none",
+                                },
+                            }, overlay: (0, jsx_runtime_1.jsx)(index_1.H6, { style: { fontWeight: 500 }, children: "You have to connect the same X account to proceed" }), children: (0, jsx_runtime_1.jsxs)(FollowLink, { onClick: () => closeModalSidebarPortal(), target: "_blank", href: (0, utils_1.appendUtmParam)("https://x.com/LudoHQ"), children: [(0, jsx_runtime_1.jsx)(index_1.H6, { children: "Follow @LudoHQ" }), (0, jsx_runtime_1.jsx)(arrow_svg_1.default, {})] }) }) })), (0, jsx_runtime_1.jsx)(CheckListItem_1.default, { isDone: Boolean(social?.telegramId), title: (0, jsx_runtime_1.jsxs)(FollowLink, { onClick: () => closeModalSidebarPortal(), target: "_blank", href: (0, utils_1.appendUtmParam)("https://t.me/LudoAppBot"), children: [(0, jsx_runtime_1.jsx)(index_1.H6, { children: "Subscribe to @LudoAppBot" }), (0, jsx_runtime_1.jsx)(arrow_svg_1.default, {})] }) }), boostType === schema_1.IBoostType.Ambassador && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CheckListItem_1.default, { isDone: !!social?.discordId, title: social?.discordId ? ("Connect Discord") : ((0, jsx_runtime_1.jsxs)(StyledLink, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["account"]}/settings`, children: [(0, jsx_runtime_1.jsx)(index_1.H6, { children: "Connect Discord" }), (0, jsx_runtime_1.jsx)(arrow_svg_1.default, {})] })) }), followDiscordStatusLoading ? ((0, jsx_runtime_1.jsx)(StyledSkeleton, {})) : ((0, jsx_runtime_1.jsx)(CheckListItem_1.default, { isDone: Boolean(followDiscordStatus?.following), title: (0, jsx_runtime_1.jsxs)(FollowLink, { onClick: () => closeModalSidebarPortal(), target: "_blank", href: (0, utils_1.appendUtmParam)("https://discord.gg/m2bjPqGbyj"), children: [(0, jsx_runtime_1.jsx)(index_1.H6, { children: "Join Ludo server" }), (0, jsx_runtime_1.jsx)(arrow_svg_1.default, {})] }) }))] }))] }), isSocialsConnected && ((0, jsx_runtime_1.jsx)(ActionButton, { className: "modal-action-btn", variant: "primaryM", text: getSubmitButtonLabel(), disabled: getSubmitButtonDisabled(), onClick: handleSubmit }))] }));
+};
+exports.default = LudoEducatorModal;

package/build/hooks/refCode/useRefCode/index.js

@@ -8,12 +8,12 @@ const react_1 = require("react");
 const router_1 = require("next/router");
 const nookies_1 = require("nookies");
 const store_1 = require("../../../modules/user/store");
-const useInviteCode_1 = __importDefault(require("../../../api/server-identities/mutations/useInviteCode"));
 const env_1 = require("../../../store/env");
+const useRefCodeMutation_1 = __importDefault(require("../../../api/server-identities/mutations/useRefCodeMutation"));
 const useRefCode = () => {
     const newUser = (0, store_1.useUserStore)((state) => state.user?.newUser);
     const router = (0, router_1.useRouter)();
-    const { activateInviteCode } = (0, useInviteCode_1.default)();
+    const { activateRefCode } = (0, useRefCodeMutation_1.default)();
     const isSignedIn = (0, store_1.useUserStore)((state) => state.isSignedIn);
     const NEXT_PUBLIC_ENV_DOMAIN = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_DOMAIN);
     (0, react_1.useEffect)(() => {
@@ -21,7 +21,7 @@ const useRefCode = () => {
             if (isSignedIn && newUser) {
                 const { refcode } = (0, nookies_1.parseCookies)();
                 if (refcode) {
-                    await activateInviteCode({ inviteCode: refcode });
+                    await activateRefCode({ refcode });
                     (0, nookies_1.destroyCookie)(null, 'refcode', {
                         path: '/',
                     });

package/build/system/Modals/ModalSidebar/CreatorModalSidebarPortal.js

@@ -34,15 +34,16 @@ const ui_1 = require("../../../store/ui");
 const ModalSidebarPortal = (0, dynamic_1.default)(() => Promise.resolve().then(() => __importStar(require('./ModalSidebarPortal'))).then((_) => _.ModalSidebarPortal));
 // minimize dom tree for optimize virtualization
 const CreatorModalSidebarPortal = () => {
-    const { isOpenModalSidebarPortal, closeModalSidebarPortal, contentModals, withoutCloseIcon } = (0, ui_1.useUiStore)((state) => ({
+    const { isOpenModalSidebarPortal, closeModalSidebarPortal, contentModals, withoutCloseIcon, stylesModals } = (0, ui_1.useUiStore)((state) => ({
         isOpenModalSidebarPortal: state.isOpenModalSidebarPortal,
         closeModalSidebarPortal: state.closeModalSidebarPortal,
         contentModals: state.contentModals,
         withoutCloseIcon: state.modalWithoutCloseIcon,
+        stylesModals: state.stylesModals,
     }));
     if (!isOpenModalSidebarPortal) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ModalSidebarPortal, { closeModal: closeModalSidebarPortal, component: contentModals, withoutCloseIcon: withoutCloseIcon }));
+    return ((0, jsx_runtime_1.jsx)(ModalSidebarPortal, { closeModal: closeModalSidebarPortal, component: contentModals, withoutCloseIcon: withoutCloseIcon, style: stylesModals ?? undefined }));
 };
 exports.CreatorModalSidebarPortal = CreatorModalSidebarPortal;

package/build/system/Modals/ModalSidebar/ModalSidebarPortal.d.ts

@@ -1,6 +1,7 @@
-import { ReactNode } from "react";
-export declare const ModalSidebarPortal: ({ component, closeModal, withoutCloseIcon, }: {
+import { CSSProperties, ReactNode } from "react";
+export declare const ModalSidebarPortal: ({ component, closeModal, withoutCloseIcon, style }: {
     component: ReactNode;
     closeModal: () => void;
     withoutCloseIcon?: boolean;
+    style?: CSSProperties;
 }) => import("react/jsx-runtime").JSX.Element;

package/build/system/Modals/ModalSidebar/ModalSidebarPortal.js

@@ -6,5 +6,5 @@ const index_1 = require("./index");
 const constants_1 = require("@ludo.ninja/core/build/constants");
 const utils_1 = require("@ludo.ninja/utils");
 // minimize dom tree for optimize virtualization
-const ModalSidebarPortal = ({ component, closeModal, withoutCloseIcon, }) => ((0, jsx_runtime_1.jsx)(utils_1.PortalCreator, { children: (0, jsx_runtime_1.jsxs)(index_1.StyledModalSidebar, { withoutCloseIcon: withoutCloseIcon, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/modal/close.svg`, alt: "close", width: 24, height: 24, className: "modalCloseIcon", onClick: closeModal }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: component })] }) }));
+const ModalSidebarPortal = ({ component, closeModal, withoutCloseIcon, style }) => ((0, jsx_runtime_1.jsx)(utils_1.PortalCreator, { children: (0, jsx_runtime_1.jsxs)(index_1.StyledModalSidebar, { withoutCloseIcon: withoutCloseIcon, style: style, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/modal/close.svg`, alt: "close", width: 24, height: 24, className: "modalCloseIcon", onClick: closeModal }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: component })] }) }));
 exports.ModalSidebarPortal = ModalSidebarPortal;

package/build/system/Modals/ModalSidebar/index.js

@@ -70,14 +70,16 @@ exports.StyledModalSidebar = styled_components_1.default.div `
   }
 `;
 const ModalSidebar = () => {
-    const { contentModals, isModalSidebarOpen, closeModalSidebar, withoutCloseIcon } = (0, ui_1.useUiStore)((state) => ({
+    const { contentModals, isModalSidebarOpen, closeModalSidebar, withoutCloseIcon, stylesModals } = (0, ui_1.useUiStore)((state) => ({
         contentModals: state.contentModals,
         isModalSidebarOpen: state.isModalSidebarOpen,
         closeModalSidebar: state.closeModalSidebar,
         withoutCloseIcon: state.modalWithoutCloseIcon,
+        stylesModals: state.stylesModals,
     }));
     if (!isModalSidebarOpen)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(exports.StyledModalSidebar, { withoutCloseIcon: withoutCloseIcon, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/modal/close.svg`, alt: "close", width: 24, height: 24, className: "modalCloseIcon", onClick: closeModalSidebar }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: contentModals })] }));
+    console.log({ stylesModals });
+    return ((0, jsx_runtime_1.jsxs)(exports.StyledModalSidebar, { withoutCloseIcon: withoutCloseIcon, style: stylesModals ? stylesModals : undefined, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/modal/close.svg`, alt: "close", width: 24, height: 24, className: "modalCloseIcon", onClick: closeModalSidebar }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: contentModals })] }));
 };
 exports.default = ModalSidebar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.4.8",
+  "version": "2.4.10",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -23,10 +23,11 @@
     "publish": "npm publish --access public -workspace @ludo.ninja/components"
   },
   "dependencies": {
-    "@ludo.ninja/api": "^3.2.47",
+    "@ludo.ninja/api": "^3.2.48",
     "@next/third-parties": "^15.3.4",
     "@react-three/drei": "^9.68.3",
     "@react-three/fiber": "^8.13.0",
+    "canvas-confetti": "^1.9.3",
     "chart.js": "^4.4.3",
     "framer-motion": "^10.16.16",
     "glob": "^11.0.0",
@@ -76,6 +77,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^15.0.6",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/canvas-confetti": "^1.6.4",
     "@types/chrome": "^0.0.260",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.remove": "^4.7.7",