U3 dev

apps/u3/package.json

@@ -72,11 +72,10 @@
     "swiper": "^8.2.4",
     "three": "^0.147.0",
     "tslib": "^2.3.0",
+    "typescript": "^4.9.5",
     "viem": "^0.3.37",
     "wagmi": "^1.0.7",
     "web-vitals": "^2.1.4",
-    "yup": "^0.32.11",
-    "typescript": "^4.9.5",
     "workbox-background-sync": "^6.6.0",
     "workbox-broadcast-update": "^6.6.0",
     "workbox-cacheable-response": "^6.6.0",
@@ -88,7 +87,8 @@
     "workbox-range-requests": "^6.6.0",
     "workbox-routing": "^6.6.0",
     "workbox-strategies": "^6.6.0",
-    "workbox-streams": "^6.6.0"
+    "workbox-streams": "^6.6.0",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "craco start",
@@ -109,15 +109,15 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/hammerjs": "^2.0.41",
-    "@types/mockjs": "^1.0.6",
-    "@types/react-is": "17.0.3",
-    "@types/react-lottie": "^1.2.6",
-    "@types/lodash": "^4.14.191",
-    "@types/pubsub-js": "^1.8.3",
     "@types/jest": "^27.5.2",
+    "@types/lodash": "^4.14.191",
+    "@types/mockjs": "^1.0.6",
     "@types/node": "^17.0.45",
+    "@types/pubsub-js": "^1.8.3",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
+    "@types/react-is": "17.0.3",
+    "@types/react-lottie": "^1.2.6",
     "@types/react-modal": "^3.13.1",
     "@types/react-router-dom": "5.3.3",
     "@types/react-slick": "^0.23.10",
@@ -158,5 +158,8 @@
     "url": "^0.11.0",
     "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.6.0"
+  },
+  "resolutions": {
+    "did-session": "2.0.1"
   }
 }

apps/u3/src/App.tsx

@@ -31,6 +31,7 @@ import U3LoginProvider from './contexts/U3LoginContext';
 import { XmtpClientProvider } from './contexts/xmtp/XmtpClientCtx';
 import { XmtpStoreProvider } from './contexts/xmtp/XmtpStoreCtx';
 import { AppLensProvider } from './contexts/AppLensCtx';
+import { NavProvider } from './contexts/NavCtx';
 import FarcasterProvider from './contexts/FarcasterCtx';
 
 init(AIRSTACK_API_KEY);
@@ -60,7 +61,9 @@ function App() {
                       <GlobalStyle />
                       <BrowserRouter>
                         <AliveScope>
-                          <Layout />
+                          <NavProvider>
+                            <Layout />
+                          </NavProvider>
                         </AliveScope>
                       </BrowserRouter>
                     </ReduxProvider>

apps/u3/src/api/farcaster.ts

@@ -4,6 +4,29 @@ import { REACT_APP_API_SOCIAL_URL } from '../constants';
 
 // console.log({ REACT_APP_API_SOCIAL_URL });
 
+export type FarcasterNotification = {
+  message_fid: number;
+  message_type: number;
+  message_timestamp: string;
+  message_hash: Buffer;
+  reaction_type?: number;
+  id?: string;
+  hash?: Buffer;
+  text?: string;
+  userData: unknown;
+};
+
+export type FarcasterPageInfo = {
+  endFarcasterCursor: string;
+  hasNextPage: boolean;
+};
+
+export type FarcasterUserData = {
+  fid: string;
+  type: number;
+  value: string;
+};
+
 export function getFarcasterFeeds({
   endFarcasterCursor,
   pageSize,
@@ -13,11 +36,8 @@ export function getFarcasterFeeds({
 }): AxiosPromise<
   ApiResp<{
     data: { data: FarCast; platform: 'farcaster' }[];
-    farcasterUserData: { fid: string; type: number; value: string }[];
-    pageInfo: {
-      endFarcasterCursor: string;
-      hasNextPage: boolean;
-    };
+    farcasterUserData: FarcasterUserData[];
+    pageInfo: FarcasterPageInfo;
   }>
 > {
   return axios({
@@ -32,7 +52,7 @@ export function getFarcasterFeeds({
 
 export function getFarcasterUserInfo(
   fids: number[]
-): AxiosPromise<ApiResp<{ type: number; value: string }[]>> {
+): AxiosPromise<ApiResp<FarcasterUserData[]>> {
   return axios({
     url: `${REACT_APP_API_SOCIAL_URL}/3r/farcaster/userinfo`,
     method: 'get',
@@ -55,11 +75,8 @@ export function getFarcasterCastInfo(
   ApiResp<{
     cast: FarCast;
     comments: { data: FarCast; platform: 'farcaster' }[];
-    farcasterUserData: { fid: string; type: number; value: string }[];
-    pageInfo: {
-      endFarcasterCursor: string;
-      hasNextPage: boolean;
-    };
+    farcasterUserData: FarcasterUserData[];
+    pageInfo: FarcasterPageInfo;
   }>
 > {
   return axios({
@@ -98,3 +115,104 @@ export function getFarcasterEmbedMetadata(urls: string[]): AxiosPromise<
     },
   });
 }
+
+export function getFarcasterNotifications({
+  fid,
+  endFarcasterCursor,
+  pageSize,
+}: {
+  fid: number;
+  endFarcasterCursor?: string;
+  pageSize?: number;
+}): AxiosPromise<
+  ApiResp<{
+    notifications: FarcasterNotification[];
+    farcasterUserData: FarcasterUserData[];
+    pageInfo: FarcasterPageInfo;
+  }>
+> {
+  return axios({
+    url: `${REACT_APP_API_SOCIAL_URL}/3r/farcaster/notifications`,
+    method: 'get',
+    params: {
+      fid,
+      pageSize,
+      next: endFarcasterCursor,
+      withInfo: true,
+    },
+  });
+}
+
+export function getFarcasterUnreadNotificationCount({
+  fid,
+}: {
+  fid: number;
+}): AxiosPromise<
+  ApiResp<{
+    count: number;
+    lastTime: string | null;
+  }>
+> {
+  return axios({
+    url: `${REACT_APP_API_SOCIAL_URL}/3r/farcaster/notifications/unreadCount`,
+    method: 'get',
+    params: {
+      fid,
+    },
+  });
+}
+
+export function clearFarcasterUnreadNotification({
+  fid,
+}: {
+  fid: number;
+}): AxiosPromise<
+  ApiResp<{
+    lastTime: string;
+  }>
+> {
+  return axios({
+    url: `${REACT_APP_API_SOCIAL_URL}/3r/farcaster/notifications/clearUnread`,
+    method: 'post',
+    data: {
+      fid,
+    },
+  });
+}
+
+export function getFarcasterFollow(fid: string | number): AxiosPromise<
+  ApiResp<{
+    followers: number;
+    following: number;
+  }>
+> {
+  return axios({
+    url: `${REACT_APP_API_SOCIAL_URL}/3r/farcaster/follow`,
+    method: 'get',
+    params: {
+      fid,
+    },
+  });
+}
+
+export function getFarcasterLinks(
+  fid: string | number,
+  withInfo = false
+): AxiosPromise<
+  ApiResp<{
+    followerCount: number;
+    followingCount: number;
+    followerData: string[];
+    followingData: string[];
+    farcasterUserData: { fid: string; type: number; value: string }[];
+  }>
+> {
+  return axios({
+    url: `${REACT_APP_API_SOCIAL_URL}/3r/farcaster/links`,
+    method: 'get',
+    params: {
+      fid,
+      withInfo,
+    },
+  });
+}

apps/u3/src/api/feeds.ts

@@ -45,6 +45,8 @@ export enum ProfileFeedsGroups {
   REPLIES = 'replies',
 }
 
+export const FEEDS_PAGE_SIZE = 30;
+
 export function getFeeds({
   pageSize,
   keyword,
@@ -70,7 +72,7 @@ export function getFeeds({
     url: `${REACT_APP_API_SOCIAL_URL}/3r/feeds`,
     method: 'get',
     params: {
-      pageSize,
+      pageSize: pageSize || FEEDS_PAGE_SIZE,
       keyword,
       endFarcasterCursor,
       endLensCursor,
@@ -109,7 +111,7 @@ export function getFollowingFeeds({
     url: `${REACT_APP_API_SOCIAL_URL}/3r/followingFeeds`,
     method: 'get',
     params: {
-      pageSize,
+      pageSize: pageSize || FEEDS_PAGE_SIZE,
       keyword,
       endFarcasterCursor,
       endLensCursor,
@@ -146,7 +148,7 @@ export function getTrendingFeeds({
     url: `${REACT_APP_API_SOCIAL_URL}/3r/trendingFeeds`,
     method: 'get',
     params: {
-      pageSize,
+      pageSize: pageSize || FEEDS_PAGE_SIZE,
       keyword,
       endFarcasterCursor,
       endLensCursor,
@@ -187,7 +189,7 @@ export function getProfileFeeds({
     url: `${REACT_APP_API_SOCIAL_URL}/3r/profileFeeds`,
     method: 'get',
     params: {
-      pageSize,
+      pageSize: pageSize || FEEDS_PAGE_SIZE,
       keyword,
       group,
       endFarcasterCursor,

apps/u3/src/components/common/mobile/MobilePageHeader.tsx

@@ -5,29 +5,43 @@
  * @LastEditTime: 2023-03-02 09:39:48
  * @Description: file description
  */
-import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 export default function MobilePageHeader({
   tabs,
   curTab,
   setTab,
+  options,
 }: {
-  tabs: string[];
+  tabs?: string[];
   curTab: string;
   setTab: React.Dispatch<React.SetStateAction<string>>;
+  options?: Array<{ value: any; label: string }>;
 }) {
   return (
     <PageHeader tab={curTab}>
-      {tabs?.map((key) => (
-        <div
-          key={key}
-          className={curTab === key ? 'tab active' : 'tab'}
-          onClick={() => setTab(key)}
-        >
-          {key}
-        </div>
-      ))}
+      {(() => {
+        if (options) {
+          return options?.map((option) => (
+            <div
+              key={option.value}
+              className={curTab === option.value ? 'tab active' : 'tab'}
+              onClick={() => setTab(option.value)}
+            >
+              {option.label}
+            </div>
+          ));
+        }
+        return tabs?.map((key) => (
+          <div
+            key={key}
+            className={curTab === key ? 'tab active' : 'tab'}
+            onClick={() => setTab(key)}
+          >
+            {key}
+          </div>
+        ));
+      })()}
     </PageHeader>
   );
 }