feat: About Us

packages/frontend/src/api/store/migrations.ts

@@ -11,6 +11,7 @@ import {
 } from "../types";
 import { Logger } from "../utils/logging";
 import { RootState } from "./reducer";
+import { IUIState } from "./slices/ui";
 import { IViewsState } from "./slices/views";
 
 type PersistedRootState = (PersistedState & RootState) | undefined;
@@ -37,7 +38,14 @@ type PersistedRootState = (PersistedState & RootState) | undefined;
  *   102: (s: RootStateV101) => PersistedRootState
  */
 
-type RootStateV105 = PersistedRootState;
+type RootStateV106 = PersistedRootState;
+
+type RootStateV105 =
+    | (PersistedState &
+          Omit<RootState, "ui"> & {
+              ui: Omit<IUIState, "showAboutModal">;
+          })
+    | undefined;
 
 type RootStateV104 =
     | (PersistedState & Omit<RootState, "userFilters">)
@@ -102,6 +110,7 @@ type TMigrations = MigrationManifest & {
     103: (s: RootStateV102) => RootStateV103;
     104: (s: RootStateV103) => RootStateV104;
     105: (s: RootStateV104) => RootStateV105;
+    106: (s: RootStateV105) => RootStateV106;
 };
 
 /**
@@ -261,6 +270,16 @@ const migrations: TMigrations = {
             },
         };
     },
+    106: (s: RootStateV105): RootStateV106 => {
+        if (!s) return undefined;
+        return {
+            ...s,
+            ui: {
+                ...s.ui,
+                showAboutModal: false,
+            },
+        };
+    },
 };
 
 export default migrations;

packages/frontend/src/api/store/slices/ui.ts

@@ -10,6 +10,7 @@ export interface IUIState {
     theme: TTheme;
     showWidgetLib: boolean;
     showBalance: boolean;
+    showAboutModal: boolean;
     tutorial: ITutorialState;
     cookieChoice: ECookieChoice | undefined;
     mobile: {
@@ -24,6 +25,7 @@ export interface IUIState {
 const initialState: IUIState = {
     theme: "dark",
     showWidgetLib: false,
+    showAboutModal: false,
     showBalance: true,
     tutorial: { showTutorial: undefined, currentTutorialTip: undefined },
     cookieChoice: undefined,
@@ -53,6 +55,9 @@ const uiSlice = createSlice({
         toggleShowBalance(draft) {
             draft.showBalance = !draft.showBalance;
         },
+        toggleAboutModal(draft) {
+            draft.showAboutModal = !draft.showAboutModal;
+        },
         toggleWidgetsNavOpen(draft) {
             draft.mobile.widgetsNavOpen = !draft.mobile.widgetsNavOpen;
         },
@@ -99,6 +104,7 @@ export const {
     toggleTheme,
     toggleShowWidgetLib,
     toggleShowBalance,
+    toggleAboutModal,
     toggleWidgetsNavOpen,
     setStoreShowTutorial,
     setCurrentTutorialTip,

packages/frontend/src/components/AboutUsModal.tsx

@@ -0,0 +1,102 @@
+import {
+    Button,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalHeader,
+    ModalTitle,
+} from "@alphaday/ui-kit";
+
+interface IProps {
+    showModal: boolean;
+    onClose?: () => void;
+}
+export const AboutUsModal: React.FC<IProps> = ({ showModal, onClose }) => {
+    return (
+        <Modal showModal={showModal} onClose={onClose} size="md">
+            <ModalHeader>
+                <ModalTitle>About Us</ModalTitle>
+            </ModalHeader>
+
+            <ModalBody className="[&_a]:text-secondaryOrange [&_a]:focus:outline-none">
+                <h6>Company Overview:</h6>
+                <p>
+                    Registered Name: Alphabox Solutions Pte. Ltd.
+                    <br />
+                    Registration Number: <code>202136261C</code>
+                    <br />
+                    Registered Office: 45 North Canal Road #01-01 Lew Building
+                    Singapore
+                </p>
+
+                <h6>Contact Information:</h6>
+                <p>
+                    Email Address:{" "}
+                    <a href="mailto:hello@alphaday.com">hello@alphaday.com</a>
+                    <br />
+                    X.com:{" "}
+                    <a
+                        href="https://x.com/AlphadayHQ"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        https://x.com/AlphadayHQ
+                    </a>
+                </p>
+
+                <h6>Legal Information:</h6>
+                <p>
+                    Terms & Conditions:{" "}
+                    <a
+                        href="https://alphaday.com/terms"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        https://alphaday.com/terms
+                    </a>
+                    <br />
+                    Privacy Policy:{" "}
+                    <a
+                        href="https://alphaday.com/privacy"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        https://alphaday.com/privacy
+                    </a>
+                </p>
+
+                <h6>Additional Resources:</h6>
+                <p>
+                    FAQs:{" "}
+                    <a
+                        href="https://alphaday.com/"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        alphaday.com
+                    </a>
+                    <br />
+                    Feedback:{" "}
+                    <a
+                        href="https://forms.gle/RbrrLGdFPAeuNJhk9"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        https://forms.gle/RbrrLGdFPAeuNJhk9
+                    </a>
+                </p>
+                <p>
+                    Alphaday&apos;s mission is to bring you all the tools needed
+                    to follow your favorite projects, stay up-to-date with the
+                    latest narratives, and use your favorite dapps, all from the
+                    comfort of one easy-to-use customizable dashboard.
+                </p>
+            </ModalBody>
+            <ModalFooter>
+                <Button className="pt-1.5" onClick={onClose}>
+                    Close
+                </Button>
+            </ModalFooter>
+        </Modal>
+    );
+};

packages/frontend/src/config/config.ts

@@ -104,7 +104,7 @@ const CONFIG = {
     APP: {
         VERSION: import.meta.env.VITE_VERSION || "",
         STORAGE_KEY: "alphaday",
-        STORAGE_VERSION: 105,
+        STORAGE_VERSION: 106,
         COMMIT: import.meta.env.VITE_COMMIT,
         COMMIT_TIMESTAMP: import.meta.env.VITE_COMMIT_TS || "",
         X_APP_ID: import.meta.env.VITE_X_APP_ID || "",

packages/frontend/src/containers/AboutUsModalContainer.tsx

@@ -0,0 +1,17 @@
+import { toggleAboutModal } from "src/api/store";
+import { useAppDispatch, useAppSelector } from "src/api/store/hooks";
+import { AboutUsModal } from "src/components/AboutUsModal";
+
+export const AboutUsModalContainer = () => {
+    const dispatch = useAppDispatch();
+    const showModal = useAppSelector((state) => state.ui.showAboutModal);
+    const toggleModal = () => dispatch(toggleAboutModal());
+
+    const onClose = () => {
+        if (showModal) {
+            toggleModal();
+        }
+    };
+
+    return <AboutUsModal showModal={showModal} onClose={onClose} />;
+};

packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownContainer.tsx

@@ -2,10 +2,13 @@ import { FC } from "react";
 import { useAccount } from "src/api/hooks";
 import { useAuth } from "src/api/hooks/useAuth";
 import { useTutorial } from "src/api/hooks/useTutorial";
+import { toggleAboutModal } from "src/api/store";
+import { useAppDispatch } from "src/api/store/hooks";
 import { ETutorialTipId } from "src/api/types";
 import ProfileDropdownWrapper from "./ProfileDropdownWrapper";
 
 const ProfileDropdownContainer: FC = () => {
+    const dispatch = useAppDispatch();
     const { openAuthModal, isAuthenticated, logout } = useAuth();
     const { userProfile } = useAccount();
     const {
@@ -15,12 +18,15 @@ const ProfileDropdownContainer: FC = () => {
         setTutFocusElemRef,
     } = useTutorial();
 
+    const toggleAboutUsModal = () => dispatch(toggleAboutModal());
+
     return (
         <ProfileDropdownWrapper
             onSignOut={logout}
             onSignUpSignIn={openAuthModal}
             isAuthenticated={isAuthenticated}
             onShowTutorial={toggleShowTutorial}
+            onShowAboutUsModal={toggleAboutUsModal}
             showTutorial={showTutorial}
             setTutFocusElemRef={
                 currentTutorial.tip?.id === ETutorialTipId.ComeBack

packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownWrapper.tsx

@@ -21,6 +21,7 @@ interface IProps {
     isAuthenticated: boolean;
     onShowTutorial: (s: boolean) => void;
     showTutorial: boolean | undefined;
+    onShowAboutUsModal: () => void;
     setTutFocusElemRef?:
         | React.Dispatch<React.SetStateAction<HTMLElement | null>>
         | undefined;
@@ -36,14 +37,15 @@ const ProfileDropdownWrapper: React.FC<IProps> = ({
     onSignUpSignIn,
     onShowTutorial,
     showTutorial,
+    onShowAboutUsModal,
     isAuthenticated,
     setTutFocusElemRef,
     profile,
 }) => {
-    const [toggleState, setToggleState] = useState(false);
+    const [toggleTutorialState, setToggleTutorialState] = useState(false);
 
     const handleToggle = () => {
-        setToggleState((prev) => !prev);
+        setToggleTutorialState((prev) => !prev);
         setTimeout(() => {
             onShowTutorial(true);
         }, 500);
@@ -64,7 +66,7 @@ const ProfileDropdownWrapper: React.FC<IProps> = ({
           };
 
     useEffect(() => {
-        if (!showTutorial) setToggleState(false);
+        if (!showTutorial) setToggleTutorialState(false);
     }, [showTutorial]);
 
     return (
@@ -123,10 +125,16 @@ const ProfileDropdownWrapper: React.FC<IProps> = ({
                                 type="checkbox"
                                 className={styles.toggle}
                                 onChange={handleToggle}
-                                checked={toggleState}
+                                checked={toggleTutorialState}
                             />
                         </DropdownItem>
                         <Divider />
+                        <DropdownItem onClick={onShowAboutUsModal}>
+                            <span title="Lear more about Alphaday">
+                                About Us
+                            </span>
+                        </DropdownItem>
+                        <Divider />
                         {CONFIG.APP.VERSION && CONFIG.APP.COMMIT && (
                             <DropdownItem className="hover:bg-background pb-0 pt-5">
                                 <div className="fontGroup-mini w-full">

packages/frontend/src/mobile-components/profile/UserSettings.tsx

@@ -9,6 +9,7 @@ import { Logger } from "src/api/utils/logging";
 import { ReactComponent as ChevronSVG } from "src/assets/icons/chevron-down2.svg";
 import { ReactComponent as DocSVG } from "src/assets/icons/doc.svg";
 import { ReactComponent as GreenCheckSVG } from "src/assets/icons/green-check.svg";
+import { ReactComponent as InfoSVG } from "src/assets/icons/info2.svg";
 import { ReactComponent as LogoutSVG } from "src/assets/icons/logout.svg";
 import { ReactComponent as StarSVG } from "src/assets/icons/star.svg";
 import { ReactComponent as UserSVG } from "src/assets/icons/user.svg";
@@ -97,13 +98,15 @@ interface IUserSettings {
     onSaveProfile: (req: { handle: string }) => void;
     isSavingProfile: boolean;
     onLogout: () => Promise<void>;
+    onShowAboutUsModal: () => void;
 }
 const UserSettings: FC<IUserSettings> = ({
     profile,
     isAuthenticated,
     onSaveProfile,
     isSavingProfile,
     onLogout,
+    onShowAboutUsModal,
 }) => {
     const [showProfileEditModal, setShowProfileEditModal] =
         useState<boolean>(false);
@@ -154,6 +157,13 @@ const UserSettings: FC<IUserSettings> = ({
                     "https://app.termly.io/document/terms-of-use-for-website/0f183823-fe52-47af-87d2-d1058b844918"
                 ),
         },
+        {
+            id: "about",
+            icon: InfoSVG,
+            title: "About Us",
+            subtext: "Learn more about Alphaday",
+            onClick: onShowAboutUsModal,
+        },
         {
             id: "rate",
             icon: StarSVG,

packages/frontend/src/mobile-containers/UserSettingsContainer.tsx

@@ -1,19 +1,25 @@
 import { FC } from "react";
 import { useAccount, useAuth } from "src/api/hooks";
+import { toggleAboutModal } from "src/api/store";
+import { useAppDispatch } from "src/api/store/hooks";
 import { debounce } from "src/api/utils/helpers";
 import UserSettings from "src/mobile-components/profile/UserSettings";
 
 const UserSettingsContainer: FC = () => {
+    const dispatch = useAppDispatch();
     const { isAuthenticated, logout } = useAuth();
     const { userProfile, saveProfile, isSavingProfile } = useAccount();
 
+    const toggleAboutUsModal = () => dispatch(toggleAboutModal());
+
     return (
         <UserSettings
             profile={userProfile}
             isAuthenticated={isAuthenticated}
             onSaveProfile={debounce(saveProfile, 1000)}
             isSavingProfile={isSavingProfile}
             onLogout={logout}
+            onShowAboutUsModal={toggleAboutUsModal}
         />
     );
 };

packages/frontend/src/mobile-pages/user-settings.tsx

@@ -1,10 +1,12 @@
+import { AboutUsModalContainer } from "src/containers/AboutUsModalContainer";
 import PagedMobileLayout from "src/layout/PagedMobileLayout";
 import UserSettingsContainer from "src/mobile-containers/UserSettingsContainer";
 
 const UserSettings: React.FC = () => {
     return (
         <PagedMobileLayout title="">
             <UserSettingsContainer />
+            <AboutUsModalContainer />
         </PagedMobileLayout>
     );
 };

packages/frontend/src/pages/index.tsx

@@ -26,6 +26,7 @@ import {
 import { Logger } from "src/api/utils/logging";
 import { EToastRole, toast } from "src/api/utils/toastUtils";
 import CONFIG from "src/config/config";
+import { AboutUsModalContainer } from "src/containers/AboutUsModalContainer";
 import ModuleWrapper from "src/containers/base/ModuleWrapper";
 import CookieDisclaimerContainer from "src/containers/cookie-disclaimer/CookieDisclaimerContainer";
 import AuthContainer from "src/containers/dialogs/AuthContainer";
@@ -357,6 +358,7 @@ function BasePage({ isFullsize }: { isFullsize: boolean | undefined }) {
             <AuthContainer />
             <TutorialContainer />
             <WalletConnectionDialogContainer />
+            <AboutUsModalContainer />
         </MainLayout>
     );
 }