@ludo.ninja/components 2.4.9 → 2.4.11

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/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 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 ConfettiIcon_1 = __importDefault(require("./icons/ConfettiIcon"));
+const ArrowIcon_1 = __importDefault(require("./icons/ArrowIcon"));
+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)(ConfettiIcon_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)(ArrowIcon_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/icons/ArrowIcon.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type Props = {
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const ArrowIcon: React.FC<Props>;
+export default ArrowIcon;

package/build/components/ludoEducatorModal/icons/ArrowIcon.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ArrowIcon = ({ style, className }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, style: style, xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M8.33301 6.66671L11.6663 10L8.33301 13.3334", stroke: "#CFD5EA", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+exports.default = ArrowIcon;

package/build/components/ludoEducatorModal/icons/ConfettiIcon.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type Props = {
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const ConfettiIcon: React.FC<Props>;
+export default ConfettiIcon;

package/build/components/ludoEducatorModal/icons/ConfettiIcon.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ConfettiIcon = ({ style, className }) => {
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: className, style: style, width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2.5332 17.1192L4.12262 18.7086C4.23152 18.8177 4.37712 18.8823 4.53104 18.8898C4.68497 18.8973 4.83618 18.8473 4.9552 18.7494C6.6611 17.3391 8.04472 17.0983 10.4521 17.0456L8.7697 15.3632C8.50184 15.0952 8.14328 14.9374 7.76476 14.9208C6.17273 14.8529 3.95861 16.037 2.5332 17.1192Z", fill: "#F21666" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.06194 22.6485L7.06065 21.6477C6.9396 21.5263 6.86864 21.3639 6.86186 21.1926C6.85509 21.0213 6.913 20.8537 7.02409 20.7232C8.81303 18.6146 10.0457 16.6402 8.68454 15.2791L10.6824 17.2769C11.7631 18.3576 10.2949 20.9332 9.093 22.5712C9.03503 22.6506 8.9605 22.7165 8.87458 22.7642C8.78865 22.812 8.69337 22.8406 8.59532 22.8479C8.49727 22.8553 8.3988 22.8413 8.30671 22.8068C8.21461 22.7724 8.1311 22.7183 8.06194 22.6485Z", fill: "#FF78A0" }), (0, jsx_runtime_1.jsx)("path", { d: "M4.12154 18.7074L2.12367 16.7106C0.836149 15.4231 2.43706 12.8021 3.69846 11.3307C3.75945 11.2592 3.83463 11.2011 3.91922 11.1601C4.00382 11.1192 4.096 11.0962 4.18992 11.0928C4.28384 11.0893 4.37747 11.1053 4.46487 11.1399C4.55227 11.1745 4.63154 11.2268 4.69766 11.2936L5.75379 12.3476C5.87286 12.467 5.94355 12.6262 5.95223 12.7946C5.96091 12.963 5.90697 13.1286 5.8008 13.2596C4.15602 15.3003 2.98027 17.5656 4.12154 18.7074Z", fill: "#FF78A0" }), (0, jsx_runtime_1.jsx)("path", { d: "M11.7695 8.21411V10.4601C11.769 10.6143 11.826 10.7631 11.9294 10.8776C12.0327 10.992 12.175 11.0638 12.3284 11.079C14.5316 11.288 15.6807 12.096 17.42 13.7611V11.383C17.42 11.0042 17.2779 10.6391 17.022 10.3598C15.9455 9.1851 13.5428 8.45803 11.7695 8.21411Z", fill: "#81349A" }), (0, jsx_runtime_1.jsx)("path", { d: "M11.7695 16.0315V14.6161C11.7699 14.4449 11.8345 14.2801 11.9506 14.1544C12.0667 14.0286 12.2257 13.9511 12.3963 13.937C15.1521 13.7109 17.42 13.187 17.42 11.2617V14.0875C17.42 15.6153 14.5598 16.3987 12.552 16.7069C12.4549 16.7214 12.3559 16.7148 12.2616 16.6875C12.1673 16.6602 12.0801 16.6129 12.0058 16.5488C11.9315 16.4846 11.8719 16.4052 11.8311 16.316C11.7904 16.2267 11.7694 16.1297 11.7695 16.0315Z", fill: "#BF45E5" }), (0, jsx_runtime_1.jsx)("path", { d: "M11.7695 10.4607V7.63493C11.7695 5.81413 14.7551 5.09228 16.6887 4.94342C16.7822 4.93621 16.8761 4.94843 16.9647 4.97931C17.0532 5.01019 17.1343 5.05906 17.203 5.12284C17.2717 5.18663 17.3264 5.26395 17.3638 5.34993C17.4011 5.43591 17.4203 5.52869 17.42 5.62243V7.11627C17.4199 7.285 17.3573 7.44773 17.2444 7.5731C17.1315 7.69847 16.9762 7.77761 16.8084 7.79529C14.2015 8.07734 11.7695 8.84567 11.7695 10.4607Z", fill: "#BF45E5" }), (0, jsx_runtime_1.jsx)("path", { d: "M20.3257 14.939L18.7363 16.5284C18.6273 16.6373 18.5628 16.7828 18.5554 16.9366C18.548 17.0905 18.5981 17.2416 18.696 17.3604C20.1063 19.0663 20.3471 20.45 20.3993 22.8573L22.0817 21.1749C22.3498 20.9074 22.5077 20.5489 22.5241 20.1705C22.592 18.5785 21.4079 16.3644 20.3257 14.939Z", fill: "#FF8506" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.7951 20.4682L15.7959 19.4674C15.9173 19.3464 16.0799 19.2754 16.2513 19.2686C16.4226 19.2618 16.5903 19.3198 16.7209 19.4309C18.829 21.2193 20.8034 22.4525 22.1645 21.0913L20.1667 23.0892C19.086 24.1694 16.5104 22.7016 14.8724 21.4993C14.793 21.4413 14.7271 21.3668 14.6793 21.2808C14.6316 21.1949 14.603 21.0996 14.5957 21.0016C14.5883 20.9035 14.6023 20.8051 14.6368 20.713C14.6712 20.6209 14.7252 20.5374 14.7951 20.4682Z", fill: "#FFB62E" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.7363 16.5273L20.7347 14.5294C22.0222 13.2419 24.6432 14.8428 26.1146 16.1042C26.1861 16.1652 26.2442 16.2404 26.2852 16.325C26.3261 16.4096 26.3491 16.5018 26.3526 16.5957C26.356 16.6896 26.34 16.7832 26.3054 16.8706C26.2708 16.958 26.2185 17.0373 26.1517 17.1034L25.0956 18.1596C24.9761 18.2787 24.8168 18.3494 24.6483 18.358C24.4799 18.3667 24.3141 18.3128 24.1831 18.2066C22.1413 16.5618 19.8781 15.3855 18.7363 16.5273Z", fill: "#FFB62E" }), (0, jsx_runtime_1.jsx)("path", { d: "M21.4626 9.72198C20.7894 9.90218 20.4943 10.1973 20.3135 10.8711C20.3014 10.9177 20.2741 10.959 20.2359 10.9885C20.1978 11.0179 20.151 11.0339 20.1028 11.0339C20.0546 11.0339 20.0077 11.0179 19.9696 10.9885C19.9315 10.959 19.9042 10.9177 19.892 10.8711C19.7118 10.1983 19.4167 9.90322 18.7429 9.72198C18.6963 9.70981 18.655 9.68252 18.6255 9.64439C18.5961 9.60625 18.5801 9.55941 18.5801 9.51122C18.5801 9.46303 18.5961 9.41619 18.6255 9.37805C18.655 9.33992 18.6963 9.31263 18.7429 9.30046C19.4157 9.12026 19.7108 8.82515 19.892 8.15136C19.9042 8.10473 19.9315 8.06344 19.9696 8.03398C20.0077 8.00451 20.0546 7.98853 20.1028 7.98853C20.151 7.98853 20.1978 8.00451 20.2359 8.03398C20.2741 8.06344 20.3014 8.10473 20.3135 8.15136C20.4937 8.82463 20.7888 9.11974 21.4626 9.30046C21.5093 9.31263 21.5505 9.33992 21.58 9.37805C21.6095 9.41619 21.6255 9.46303 21.6255 9.51122C21.6255 9.55941 21.6095 9.60625 21.58 9.64439C21.5505 9.68252 21.5093 9.70981 21.4626 9.72198Z", fill: "#3CE594" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.12668 10.0061C8.45341 10.1858 8.1583 10.4809 7.97758 11.1552C7.96522 11.2018 7.93783 11.2429 7.89967 11.2723C7.8615 11.3016 7.81471 11.3175 7.76656 11.3175C7.71841 11.3175 7.67162 11.3016 7.63345 11.2723C7.59529 11.2429 7.5679 11.2018 7.55554 11.1552C7.37586 10.482 7.08075 10.1869 6.40644 10.0061C6.3599 9.99378 6.31876 9.96639 6.28941 9.92823C6.26006 9.89007 6.24414 9.84327 6.24414 9.79512C6.24414 9.74698 6.26006 9.70018 6.28941 9.66202C6.31876 9.62385 6.3599 9.59646 6.40644 9.58411C7.07971 9.40443 7.37482 9.10932 7.55554 8.435C7.5679 8.38847 7.59529 8.34732 7.63345 8.31797C7.67162 8.28862 7.71841 8.27271 7.76656 8.27271C7.81471 8.27271 7.8615 8.28862 7.89967 8.31797C7.93783 8.34732 7.96522 8.38847 7.97758 8.435C8.15726 9.10827 8.45237 9.40338 9.12668 9.58411C9.17321 9.59646 9.21436 9.62385 9.24371 9.66202C9.27306 9.70018 9.28898 9.74698 9.28898 9.79512C9.28898 9.84327 9.27306 9.89007 9.24371 9.92823C9.21436 9.96639 9.17321 9.99378 9.12668 10.0061Z", fill: "#FF8506" }), (0, jsx_runtime_1.jsx)("path", { d: "M12.9683 20.4286C13.5398 20.4286 14.003 19.9653 14.003 19.3938C14.003 18.8224 13.5398 18.3591 12.9683 18.3591C12.3969 18.3591 11.9336 18.8224 11.9336 19.3938C11.9336 19.9653 12.3969 20.4286 12.9683 20.4286Z", fill: "#F21666" })] }));
+};
+exports.default = ConfettiIcon;

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 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"));
+const ArrowIcon_1 = __importDefault(require("./icons/ArrowIcon"));
+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)(ArrowIcon_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)(ArrowIcon_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)(ArrowIcon_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)(ArrowIcon_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)(ArrowIcon_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)(ArrowIcon_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/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.9",
+  "version": "2.4.11",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -27,6 +27,7 @@
     "@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",