feat(ui): sos main leaderboard + crew modal ui

public/locales/en/sos.json

@@ -13,5 +13,43 @@
       "linkCopied": "Link copied!",
       "growCrew": "grow your crew"
     }
+  },
+  "superCharger": {
+    "title": "Super Charger",
+    "placeholder": "Enter Your Code",
+    "success": "Time bonus added {{time}}.",
+    "error": "Invalid code.",
+    "submit": "Go"
+  },
+  "mainTimer": {
+    "title": "Your Timer",
+    "days": "DAYS",
+    "hours": "HOURS",
+    "minutes": "MINUTES",
+    "seconds": "SECONDS"
+  },
+  "progress": {
+    "message": "You’re <span>{{hours}} hours</span> away from the next rank. Keep mining!"
+  },
+  "leaserboardEntry": {
+    "mining": "Mining now",
+    "idle": "Last mined {{time}} ago"
+  },
+  "leaderboard": {
+    "title": "Leaderboard",
+    "viewFull": "VIEW full LEADERBOARD"
+  },
+  "member": {
+    "new": "New",
+    "nudge": "Nudge",
+    "minHr": "min/hr"
+  },
+  "crewMining": {
+    "title": "Crew mining",
+    "rate": "+{{rate}}min/hr",
+    "mining": "{{current}}/{{total}} Mining"
+  },
+  "crewList": {
+    "placeholder": "Invite your first crew member"
   }
-}
+}

src/components/AdminUI/groups/OtherUIGroup.tsx

@@ -7,8 +7,9 @@ import { useAirdropStore } from '@app/store/useAirdropStore.ts';
 export function OtherUIGroup() {
     const setAdminShow = useUIStore((s) => s.setAdminShow); // prevent messing up the actual setup progress value
     const adminShow = useUIStore((s) => s.adminShow);
-    const { showWidget, setShowWidget } = useShellOfSecretsStore();
+    const { showWidget, setShowWidget, showMainModal, setShowMainModal } = useShellOfSecretsStore();
     const setFlare = useAirdropStore((s) => s.setFlareAnimationType);
+
     return (
         <>
             <CategoryLabel>Other UI</CategoryLabel>
@@ -19,6 +20,9 @@ export function OtherUIGroup() {
                 <Button onClick={() => setShowWidget(!showWidget)} $isActive={showWidget}>
                     SoS Widget
                 </Button>
+                <Button onClick={() => setShowMainModal(!showMainModal)} $isActive={showMainModal}>
+                    SoS Main Modal
+                </Button>
                 <Button
                     onClick={() => setAdminShow(adminShow === 'orphanChainWarning' ? null : 'orphanChainWarning')}
                     $isActive={adminShow === 'orphanChainWarning'}

src/containers/main/ShellOfSecrets/ShellOfSecrets.tsx

@@ -1,13 +1,15 @@
 import SoSWidget from './SoSWidget/SoSWidget';
 import { useShellOfSecretsStore } from '../../../store/useShellOfSecretsStore';
 import { AnimatePresence } from 'framer-motion';
+import SoSMainModal from './SoSMainModal/SoSMainModal';
 
 export default function ShellOfSecrets() {
-    const { showWidget } = useShellOfSecretsStore();
+    const { showWidget, showMainModal } = useShellOfSecretsStore();
 
     return (
         <>
             <AnimatePresence>{showWidget && <SoSWidget />}</AnimatePresence>
+            <AnimatePresence>{showMainModal && <SoSMainModal />}</AnimatePresence>
         </>
     );
 }

src/containers/main/ShellOfSecrets/SoSMainModal/SoSMainModal.tsx

@@ -0,0 +1,35 @@
+import { BoxContent, BoxWrapper, CloseButton, ContentLayer, Cover, Wrapper } from './styles';
+
+import CloseIcon from './icons/CloseIcon';
+import { useShellOfSecretsStore } from '../../../../store/useShellOfSecretsStore';
+import Scanlines from '../components/Scanlines/Scanlines';
+import SoSMainSidebar from './sections/SoSMainSidebar/SoSMainSidebar';
+import SoSMainContent from './sections/SoSMainContent/SoSMainContent';
+
+export default function SoSMainModal() {
+    const { setShowMainModal } = useShellOfSecretsStore();
+
+    const handleClose = () => {
+        setShowMainModal(false);
+    };
+
+    return (
+        <Wrapper>
+            <BoxWrapper initial={{ opacity: 0, y: '100px' }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }}>
+                <CloseButton onClick={handleClose}>
+                    <CloseIcon />
+                </CloseButton>
+
+                <BoxContent>
+                    <ContentLayer>
+                        <SoSMainSidebar />
+                        <SoSMainContent />
+                    </ContentLayer>
+                    <Scanlines scaleToWindow />
+                </BoxContent>
+            </BoxWrapper>
+
+            <Cover onClick={handleClose} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />
+        </Wrapper>
+    );
+}

src/containers/main/ShellOfSecrets/SoSMainModal/icons/CloseIcon.tsx

@@ -0,0 +1,22 @@
+const CloseIcon = () => (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect
+            x="0.939453"
+            y="2.35786"
+            width="2.0077"
+            height="16.4631"
+            transform="rotate(-45 0.939453 2.35786)"
+            fill="currentColor"
+        />
+        <rect
+            x="2.35938"
+            y="13.9982"
+            width="2.0077"
+            height="16.4631"
+            transform="rotate(-135 2.35938 13.9982)"
+            fill="currentColor"
+        />
+    </svg>
+);
+
+export default CloseIcon;

src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/BottomElement/BottomElement.tsx

@@ -0,0 +1,45 @@
+import { Wrapper } from './styles';
+
+export default function BottomElement() {
+    return (
+        <Wrapper>
+            <svg width="128" height="13" viewBox="0 0 128 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M31.8763 0.164062H0.957031V12.25H31.8763V0.164062Z" fill="#E6FF47" />
+                <path d="M127.383 0.164062H34.625V12.25H127.383V0.164062Z" fill="#E6FF47" />
+                <path d="M123.107 2.6875H37.1953V9.52095H123.107V2.6875Z" fill="#84AB58" />
+                <path d="M106.367 2.56055H36.5039V9.74695H106.367V2.56055Z" fill="white" />
+                <path
+                    d="M12.8724 9.6641V3.73222H15.167C15.4559 3.73222 15.7137 3.77754 15.9403 3.86819C16.167 3.95318 16.3568 4.07782 16.5097 4.24212C16.6684 4.40642 16.7873 4.60472 16.8667 4.837C16.946 5.06929 16.9856 5.32991 16.9856 5.61885C16.9856 5.90779 16.946 6.1684 16.8667 6.4007C16.7873 6.633 16.6684 6.8313 16.5097 6.9956C16.3568 7.1599 16.167 7.2874 15.9403 7.378C15.7137 7.463 15.4559 7.5055 15.167 7.5055H14.1557V9.6641H12.8724ZM14.1557 6.4772H14.8441C15.1443 6.4772 15.3511 6.4205 15.4644 6.3072C15.5834 6.1939 15.6429 6.0069 15.6429 5.74633V5.49138C15.6429 5.23076 15.5834 5.0438 15.4644 4.93048C15.3511 4.81717 15.1443 4.76052 14.8441 4.76052H14.1557V6.4772ZM17.7812 9.6641L17.4157 3.73222H18.512L18.682 7.2845L18.733 8.4063H18.8095L19.3194 5.02397H20.4666L20.9765 8.4063H21.053L21.274 3.73222H22.3278L21.9623 9.6641H20.3477L19.9142 6.3922H19.8293L19.3958 9.6641H17.7812ZM24.3216 9.6641H23.0638V3.73222H25.3584C25.6473 3.73222 25.9051 3.77754 26.1317 3.86819C26.3583 3.95318 26.5481 4.07782 26.7011 4.24212C26.8597 4.40642 26.9787 4.60472 27.058 4.837C27.1373 5.06929 27.177 5.32991 27.177 5.61885C27.177 6.0381 27.0864 6.3979 26.9051 6.6981C26.7238 6.9984 26.466 7.1967 26.1317 7.293L27.296 9.6641H25.9023L24.908 7.463H24.3216V9.6641ZM25.0524 6.4772C25.3527 6.4772 25.5595 6.4205 25.6728 6.3072C25.7918 6.1939 25.8513 6.0069 25.8513 5.74633V5.49138C25.8513 5.23076 25.7918 5.0438 25.6728 4.93048C25.5595 4.81717 25.3527 4.76052 25.0524 4.76052H24.3216V6.4772H25.0524Z"
+                    fill="black"
+                />
+                <path
+                    d="M8.22922 6.1585L5.31556 10.4972V7.0262H3.23438L6.56427 2.6875V6.1585H8.22922Z"
+                    fill="#0E140A"
+                />
+            </svg>
+
+            <svg xmlns="http://www.w3.org/2000/svg" width="101" height="16" viewBox="0 0 101 16" fill="none">
+                <rect
+                    x="100.754"
+                    y="4.51953"
+                    width="7.18467"
+                    height="35.1305"
+                    transform="rotate(90 100.754 4.51953)"
+                    fill="#E6FF47"
+                />
+                <rect
+                    x="35.5117"
+                    y="4.51953"
+                    width="7.18467"
+                    height="35.1305"
+                    transform="rotate(90 35.5117 4.51953)"
+                    fill="#E6FF47"
+                />
+                <path
+                    d="M51.6041 14.9908L52.1591 13.6948C52.6916 13.5591 53.1945 13.3581 53.6523 13.1006L55.0032 13.6451C55.161 13.7096 55.3406 13.674 55.461 13.5591L56.3386 12.7215C56.4583 12.6072 56.4964 12.4351 56.4287 12.2846L55.8582 10.9953C56.1287 10.5509 56.3386 10.0717 56.4809 9.57021L57.8388 9.04052C57.9965 8.97599 58.0937 8.83281 58.0937 8.67551L58.0937 7.49378C58.0937 7.32909 57.9888 7.1859 57.8388 7.12877L56.4809 6.59908C56.3386 6.0909 56.128 5.61094 55.8582 5.17402L56.4287 3.88474C56.4964 3.73416 56.459 3.56275 56.3386 3.4478L55.461 2.61023C55.3413 2.49596 55.161 2.45966 55.0032 2.52419L53.6523 3.06868C53.1867 2.81055 52.6846 2.61023 52.1591 2.47446L51.6041 1.17846C51.5365 1.02789 51.3865 0.927734 51.2217 0.927734L49.9835 0.927734C49.8109 0.927734 49.6609 1.02789 49.6011 1.17846L49.0461 2.47446C48.5136 2.61024 48.0107 2.81122 47.5529 3.06868L46.202 2.52419C46.0442 2.45966 45.8646 2.49528 45.7442 2.61023L44.8666 3.4478C44.7469 3.56207 44.7088 3.73416 44.7764 3.88473L45.347 5.17402C45.0765 5.61834 44.8666 6.09763 44.7243 6.59908L43.3664 7.12877C43.2086 7.1933 43.1037 7.33648 43.1037 7.49378L43.1037 8.67551C43.1037 8.8402 43.2087 8.98339 43.3664 9.04052L44.7243 9.57021C44.8666 10.0784 45.0772 10.5583 45.347 10.9953L44.7764 12.2846C44.7088 12.4351 44.7462 12.6065 44.8666 12.7215L45.7442 13.5591C45.8639 13.6733 46.0442 13.7096 46.202 13.6451L47.5529 13.1006C48.0184 13.3587 48.5206 13.5591 49.046 13.6948L49.6011 14.9908C49.6687 15.1414 49.8187 15.2342 49.9835 15.2342L51.2217 15.2342C51.3943 15.2342 51.5443 15.134 51.6041 14.9908ZM47.8374 8.07324C47.8374 6.61927 49.0756 5.43829 50.5982 5.43829C52.1217 5.43829 53.3591 6.62002 53.3591 8.07324C53.3591 9.52721 52.1209 10.7082 50.5982 10.7082C49.0748 10.7082 47.8374 9.52645 47.8374 8.07324Z"
+                    fill="#E6FF47"
+                />
+            </svg>
+        </Wrapper>
+    );
+}

src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/BottomElement/styles.ts

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled('div')`
+    width: 100%;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    border-top: 2px solid #e6ff47;
+
+    padding: 5px 10px 0 8px;
+    margin-top: 4px;
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 2px;
+        height: 12px;
+        background-color: #e6ff47;
+        left: 0;
+        top: -2px;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: 2px;
+        height: 12px;
+        background-color: #e6ff47;
+        right: 0;
+        top: -2px;
+    }
+`;

src/containers/main/ShellOfSecrets/SoSMainModal/sections/SoSMainContent/CrewMining/CrewList/CrewList.tsx

@@ -0,0 +1,92 @@
+import { useTranslation } from 'react-i18next';
+import { AddNewButton, PlaceholderText, ScrollArea, Wrapper } from './styles.ts';
+import { useAnimationFrame } from 'framer-motion';
+import { useState, useRef } from 'react';
+import Member from '../Member/Member';
+import PlusIcon from '../icons/PlusIcon.tsx';
+import { useShellOfSecretsStore } from '@app/store/useShellOfSecretsStore.ts';
+
+interface Member {
+    image: string;
+    isNew: boolean;
+    isOnline: boolean;
+    miningRate: number;
+    id: string;
+    name: string;
+}
+
+export default function CrewList() {
+    const { t } = useTranslation('sos', { useSuspense: false });
+    const crewMembers = useShellOfSecretsStore((state) => state.referrals?.activeReferrals);
+    const scrollAreaRef = useRef<HTMLDivElement>(null);
+    const [scrollDirection, setScrollDirection] = useState<number>(0);
+    const [scrollSpeed, setScrollSpeed] = useState<number>(0);
+
+    const handleMouseMove = (event: React.MouseEvent) => {
+        const { clientX, currentTarget } = event;
+        const { left, right } = currentTarget.getBoundingClientRect();
+        const edgeThreshold = 200;
+        const fastScrollThreshold = 100;
+
+        if (clientX < left + fastScrollThreshold) {
+            setScrollDirection(-1);
+            setScrollSpeed(4);
+        } else if (clientX < left + edgeThreshold) {
+            setScrollDirection(-1);
+            setScrollSpeed(2);
+        } else if (clientX > right - fastScrollThreshold) {
+            setScrollDirection(1);
+            setScrollSpeed(4);
+        } else if (clientX > right - edgeThreshold) {
+            setScrollDirection(1);
+            setScrollSpeed(2);
+        } else {
+            setScrollDirection(0);
+            setScrollSpeed(0);
+        }
+    };
+
+    const handleMouseLeave = () => {
+        setScrollDirection(0);
+        setScrollSpeed(0);
+    };
+
+    useAnimationFrame(() => {
+        const scrollArea = scrollAreaRef.current;
+        if (scrollArea && scrollDirection !== 0) {
+            const maxScrollLeft = scrollArea.scrollWidth - scrollArea.clientWidth;
+            const newScrollLeft = scrollArea.scrollLeft + scrollDirection * scrollSpeed;
+            scrollArea.scrollLeft = Math.max(0, Math.min(newScrollLeft, maxScrollLeft));
+        }
+    });
+
+    return (
+        <Wrapper $noMembers={!crewMembers || crewMembers.length === 0}>
+            {crewMembers && crewMembers.length !== 0 && (
+                <ScrollArea ref={scrollAreaRef} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+                    {crewMembers?.map((member) => (
+                        <Member
+                            key={member.id}
+                            member={{
+                                id: member.id,
+                                name: member.name,
+                                image: member.imageUrl || '',
+                                isOnline: !!member.active,
+                                isNew: false,
+                                miningRate: 0,
+                            }}
+                        />
+                    ))}
+                </ScrollArea>
+            )}
+
+            <AddNewButton $noMembers={!crewMembers || crewMembers.length === 0}>
+                <PlusIcon />
+            </AddNewButton>
+
+            {(!crewMembers || crewMembers.length === 0) && (
+                <PlaceholderText>{t('crewList.placeholder')}</PlaceholderText>
+            )}
+        </Wrapper>
+    );
+}