Merge branch 'dev' into ALPHA-4462

.github/workflows/deploy-prod.yml

@@ -71,8 +71,8 @@ jobs:
                   VITE_FIRE_MESSAGE_SENDER_ID: ${{ secrets.PROD__REACT_APP_FIRE_MESSAGE_SENDER_ID }}
                   VITE_FIRE_APP_ID: ${{ secrets.PROD__REACT_APP_FIRE_APP_ID }}
                   VITE_SENTRY_DSN: ${{ secrets.PROD__VITE_SENTRY_DSN }}
-                  VITE_CLARITY_PROJECT_ID: ${{ secrets.PROD__VITE_CLARITY_PROJECT_ID }}
                   VITE_OAUTH_ID_GOOGLE: ${{ secrets.PROD__REACT_APP_OAUTH_ID_GOOGLE }}
+                  VITE_CLARITY_PROJECT_ID: ${{ secrets.PROD__REACT_APP_CLARITY_PROJECT_ID }}
 
                   NODE_OPTIONS: "--max_old_space_size=4096"
 

.github/workflows/deploy-staging.yml

@@ -79,8 +79,8 @@ jobs:
                   VITE_FIRE_MESSAGE_SENDER_ID: ${{ secrets.STAGING__REACT_APP_FIRE_MESSAGE_SENDER_ID }}
                   VITE_FIRE_APP_ID: ${{ secrets.STAGING__REACT_APP_FIRE_APP_ID }}
                   VITE_SENTRY_DSN: ${{ secrets.PROD__VITE_SENTRY_DSN }}
-                  VITE_CLARITY_PROJECT_ID: ${{ secrets.STAGING__VITE_CLARITY_PROJECT_ID }}
                   VITE_OAUTH_ID_GOOGLE: ${{ secrets.STAGING__REACT_APP_OAUTH_ID_GOOGLE }}
+                  VITE_CLARITY_PROJECT_ID: ${{ secrets.STAGING__REACT_APP_CLARITY_PROJECT_ID }}
 
                   NODE_OPTIONS: "--max_old_space_size=4096"
 

package.json

@@ -38,7 +38,7 @@
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-cypress": "2.13.3",
     "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",

packages/frontend/package.json

@@ -23,7 +23,7 @@
     "@capacitor/app": "5.0.6",
     "@capacitor/core": "5.4.1",
     "@capacitor/haptics": "5.0.6",
-    "@capacitor/keyboard": "5.0.6",
+    "@capacitor/keyboard": "5.0.7",
     "@capacitor/status-bar": "5.0.6",
     "@ionic/react": "7.6.1",
     "@ionic/react-router": "7.1.2",

packages/frontend/src/MobileApp.tsx

@@ -7,6 +7,7 @@ import "@alphaday/ui-kit/global.scss";
 
 const SuperfeedPage = lazyRetry(() => import("./mobile-pages/superfeed"));
 const AuthPage = lazyRetry(() => import("./mobile-pages/auth"));
+const FiltersPage = lazyRetry(() => import("./mobile-pages/filters"));
 
 const App: React.FC = () => {
     useAppInit();
@@ -18,6 +19,7 @@ const App: React.FC = () => {
                 <Suspense fallback={<PreloaderPage />}>
                     <Route path="/" exact component={SuperfeedPage} />
                     <Route path="/auth*" exact component={AuthPage} />
+                    <Route path="/filters" exact component={FiltersPage} />
                     {/* Add more routes as needed */}
                 </Suspense>
             </Switch>

packages/frontend/src/api/hooks/index.ts

@@ -24,3 +24,4 @@ export * from "./useFeatureFlags";
 export * from "./useWalletViewStateUpdater";
 export * from "./useWidgetHeight";
 export * from "./useAuth";
+export * from "./useOnScreen";

packages/frontend/src/api/hooks/useOnScreen.ts

@@ -0,0 +1,20 @@
+import { RefObject, useEffect, useMemo, useState } from "react";
+
+export function useOnScreen(ref: RefObject<HTMLElement>) {
+    const [isIntersecting, setIntersecting] = useState(false);
+
+    const observer = useMemo(
+        () =>
+            new IntersectionObserver(([entry]) =>
+                setIntersecting(entry.isIntersecting)
+            ),
+        []
+    );
+
+    useEffect(() => {
+        if (ref.current) observer.observe(ref.current);
+        return () => observer.disconnect();
+    }, [observer, ref]);
+
+    return isIntersecting;
+}

packages/frontend/src/mobile-pages/filters.tsx

@@ -0,0 +1,11 @@
+import MobileLayout from "src/layout/MobileLayout";
+
+const FiltersPage = () => {
+    return (
+        <MobileLayout>
+            <h1 className="mx-6 my-10 fontGroup-major">Filters Page</h1>
+        </MobileLayout>
+    );
+};
+
+export default FiltersPage;

packages/frontend/src/mobile-pages/superfeed.tsx

@@ -1,3 +1,9 @@
+import { useRef } from "react";
+import { twMerge } from "@alphaday/ui-kit";
+import { Link } from "react-router-dom";
+import { useOnScreen } from "src/api/hooks";
+import { ReactComponent as SettingsSVG } from "src/assets/icons/settings.svg";
+import { ReactComponent as Settings2SVG } from "src/assets/icons/settings3.svg";
 import MobileLayout from "src/layout/MobileLayout";
 import { FeedCard } from "src/mobile-components/superfeed/FeedCard";
 import {
@@ -362,9 +368,41 @@ const feedItems: IFeedItem[] = [
     },
 ];
 
+const FiltersButton = () => {
+    const element1: React.Ref<HTMLAnchorElement> = useRef(null);
+    const element2: React.Ref<HTMLAnchorElement> = useRef(null);
+    const element1Visible = useOnScreen(element1);
+
+    return (
+        <>
+            <Link
+                ref={element1}
+                className="flex justify-between mt-2 mb-3 mx-5 px-4 py-2 border border-accentVariant100 rounded-lg"
+                to="/filters"
+            >
+                <p className="m-0 pr-2 fontGroup-highlight self-center">
+                    Craft your superfeed with personalized filters
+                </p>
+                <SettingsSVG className="w-6 text-accentVariant100 mt-[3px]" />
+            </Link>
+            <Link
+                ref={element2}
+                to="/filters"
+                className={twMerge(
+                    "absolute bg-accentVariant100 rounded-lg p-4 bottom-24 right-5 z-10 delay-300",
+                    element1Visible && "hidden delay-0"
+                )}
+            >
+                <Settings2SVG className="w-6 text-primary" />
+            </Link>
+        </>
+    );
+};
+
 const SuperfeedPage = () => {
     return (
         <MobileLayout>
+            <FiltersButton />
             <div className="w-full px-5 pt-4">
                 {feedItems.map((item) => (
                     <FeedCard key={item.id} item={item} />

packages/ui-kit/src/mobile-components/superfeed/FeedCard.tsx

@@ -9,6 +9,8 @@ import { SocialCard } from "./SocialCard";
 import { EFeedItemType, IFeedItem } from "./types";
 import { VideoCard } from "./VideoCard";
 
+// TODO move to frontend package
+
 export const FeedCard: FC<{ item: IFeedItem }> = ({ item }) => {
     switch (item.type) {
         case EFeedItemType.NEWS: