Merge pull request #443 from AlphadayHQ/dev

v3.1.7 — License + About Us section

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ALPHABOX SOLUTIONS PTE. LTD.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alphaday/frontend",
   "private": true,
-  "version": "3.1.6",
+  "version": "3.1.7",
   "type": "module",
   "scripts": {
     "prepare": "export VITE_COMMIT=$(git rev-parse --short HEAD)",

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:[email protected]">[email protected]</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,