Merge pull request #117 from rairprotocol/116-revert-main-merge

Revert "Merge branch 'main' into dev"

.env.sample

@@ -42,7 +42,7 @@ base_mainnet_rpc=https://base-mainnet.g.alchemy.com/v2/LPVexfumI81FHrSqJyhwpZ9yb
 #default image for NFTs that have no metadata
 default_product_cover=https://rair.myfilebase.com/ipfs/QmcV94NurwfWVGpXTST1we8uDbYiVQamKe87WEHK6DRzqa
 #ipfs configuration - pinata or ipfs
-ipfs_service=pinata
+ipfs_service=filebase
 ipfs_gateway=http://rairipfs:8080/ipfs
 ipfs_api=http://rairipfs:5001
 #gcp storage configuration

README.md

@@ -8,7 +8,9 @@
 # Getting Started
 _Building RAIR is a snap! Follow these simple steps and you'll be up and running in no time._
 
-![click walkthrough no narration](https://github.com/rairprotocol/RAIRsite/blob/main/src/assets/images/rair-install.webm)
+<iframe width="560" height="315" src="https://www.youtube.com/embed/MmH-JmWkhQo?si=YLSNcz7WxQjBlwRO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+![download video from git](https://github.com/rairprotocol/RAIRsite/blob/main/src/assets/images/rair-install.webm)
 
 ## Clone the RAIR repository
 

rair-front/Dockerfile.prod

@@ -1,6 +1,6 @@
 # build environment
 
-FROM node:21.2.0 as build
+FROM node:22.4.0 as build
 
 WORKDIR /usr/src/minting
 
@@ -22,4 +22,4 @@ COPY --from=build /usr/src/minting/nginx/nginx.conf /etc/nginx/conf.d/default.co
 EXPOSE 80
 
 # The default parameters to ENTRYPOINT (unless overruled on the command line)
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

rair-front/nginx/nginx.conf.ssl

@@ -58,7 +58,7 @@ server {
     }
 
     location /socket.io {
-      proxy_pass http://rair-stream:5002;
+      proxy_pass http://rair-node:5000;
       client_max_body_size 200000M;
     }
 }

rair-front/src/App.tsx

@@ -97,6 +97,7 @@ import ErrorFallback from './views/ErrorFallback/ErrorFallback';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './App.css';
+import { rFetch } from './utils/rFetch';
 /* Track a page view */
 // const analytics = getInformationGoogleAnalytics();
 // analytics.page();
@@ -133,6 +134,7 @@ function App() {
   const [tabIndexItems, setTabIndexItems] = useState(0);
   const [tokenNumber, setTokenNumber] = useState<number | undefined>(undefined);
   const navigate = useNavigate();
+  const [notificationCount, setNotificationCount] = useState<number>(0);
 
   // Redux
   const { primaryColor, textColor, backgroundImage, backgroundImageEffect } =
@@ -194,6 +196,19 @@ function App() {
     }
   }, [dispatch, logoutUser]);
 
+  const getNotificationsCount = useCallback( async () => {
+    if (currentUserAddress) {
+      const result = await rFetch(`/api/notifications?onlyUnread=true`);
+      if (result.success && result.totalCount > 0) {
+        setNotificationCount(result.totalCount);
+      }
+    }
+  }, [currentUserAddress]);
+
+  useEffect(() => {
+    getNotificationsCount();
+  }, [getNotificationsCount])
+
   // gtag
 
   useEffect(() => {
@@ -367,6 +382,8 @@ function App() {
                 selectedChain={correctBlockchain(realChain)}
                 setTabIndexItems={setTabIndexItems}
                 isAboutPage={isAboutPage}
+                notificationCount={notificationCount}
+                getNotificationsCount={getNotificationsCount}
               />
             )
           )}

rair-front/src/components/Header/MainHeader.tsx

@@ -37,6 +37,7 @@ import TalkSalesComponent from './HeaderItems/TalkToSalesComponent/TalkSalesComp
 
 //styles
 import './Header.css';
+import { rFetch } from '../../utils/rFetch';
 
 const MainHeader: React.FC<IMainHeader> = ({
   goHome,
@@ -70,6 +71,8 @@ const MainHeader: React.FC<IMainHeader> = ({
   );
 
   const hotdropsVar = import.meta.env.VITE_TESTNET;
+  const [realDataNotification, setRealDataNotification] = useState([]);
+  const [notificationCount, setNotificationCount] = useState<number>(0);
 
   const [textSearch, setTextSearch] = useState<string>('');
   const [adminPanel, setAdminPanel] = useState<boolean>(false);
@@ -122,6 +125,35 @@ const MainHeader: React.FC<IMainHeader> = ({
     setTextSearch('');
   };
 
+  const getNotifications = useCallback(async (pageNum?: number) => {
+    if(currentUserAddress) {
+      // const result = await rFetch(`/api/notifications${itemsPerPage && pageNum ? `?itemsPerPage=${itemsPerPage}&pageNum=${pageNum}` : ''}`);
+      const result = await rFetch(`/api/notifications${`?pageNum=${Number(pageNum)}`}`);
+
+      if (result.success) {
+        setRealDataNotification(result.notifications);
+      }
+    }
+  }, [currentUserAddress]);
+
+  const getNotificationsCount = useCallback( async () => {
+    if(currentUserAddress) {
+      const result = await rFetch(`/api/notifications?onlyUnread=true`);
+      if (result.success && result.totalCount > 0) {
+        setNotificationCount(result.totalCount);
+      }
+    }
+  }, [currentUserAddress])
+
+  useEffect(() => {
+    getNotificationsCount();
+  }, [getNotificationsCount])
+
+
+  useEffect(() => {
+    getNotifications(0);
+  }, [currentUserAddress])
+
   const Highlight = (props) => {
     const { filter, str } = props;
     if (!filter) return str;
@@ -206,7 +238,7 @@ const MainHeader: React.FC<IMainHeader> = ({
               backgroundColor: primaryColor
             }}
             type="text"
-            placeholder="Search the rairverse..."
+            placeholder="Search..."
             onChange={handleChangeText}
             value={textSearch}
             onClick={() => setIsComponentVisible(true)}
@@ -414,7 +446,7 @@ const MainHeader: React.FC<IMainHeader> = ({
             isSplashPage={isSplashPage}
           />
           <div className="social-media">
-            {currentUserAddress && <PopUpNotification />}
+            {currentUserAddress && <PopUpNotification setRealDataNotification={setRealDataNotification} notificationCount={notificationCount} getNotificationsCount={getNotificationsCount} getNotifications={getNotifications} realDataNotification={realDataNotification} />}
 
             <AdminPanel
               creatorViewsDisabled={creatorViewsDisabled}

rair-front/src/components/MockUpPage/FilteringBlock/modal/index.tsx

@@ -55,7 +55,9 @@ const Content = styled.div`
   min-width: 50px;
   max-height: 80%;
   max-width: 80%;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  box-shadow:
+    0 3px 6px rgba(0, 0, 0, 0.16),
+    0 3px 6px rgba(0, 0, 0, 0.23);
   background-color: white;
   border-radius: 2px;
 `;

rair-front/src/components/MockUpPage/NftList/LikeButton/favoritesReducer/actions/actionFavorites.ts

@@ -5,33 +5,33 @@ import * as types from './../actionTypes/types';
 const addItemFavoriteStart = () =>
   ({
     type: types.ADD_ITEM_FAVORITES_START
-  } as const);
+  }) as const;
 
 const addItemFavoriteEnd = () =>
   ({
     type: types.ADD_ITEM_FAVORITES_END
-  } as const);
+  }) as const;
 
 const removeItemFavoriteEnd = () =>
   ({
     type: types.REMOVE_ITEM_FAVORITES_END
-  } as const);
+  }) as const;
 
 const getCurrentItemSuccess = (item: TTokenData | null) =>
   ({
     type: types.GET_CURRENT_ITEM_SUCCESS,
     item
-  } as const);
+  }) as const;
 
 const getCurrentItemFalse = () =>
   ({
     type: types.GET_CURRENT_ITEM_FALSE
-  } as const);
+  }) as const;
 
 const errorFavorites = () =>
   ({
     type: types.ERROR_FAVORITES
-  } as const);
+  }) as const;
 
 export {
   addItemFavoriteEnd,

rair-front/src/components/MockUpPage/PaginationBox/PaginationBox.tsx

@@ -11,12 +11,16 @@ const PaginationBox: React.FC<IPaginationBox> = ({
   changePage,
   currentPage,
   totalPageForPagination,
-  whatPage
+  whatPage,
+  itemsPerPageNotifications
 }) => {
   const itemsPerPage = useSelector<RootState, number>(
     (store) => store.nftDataStore.itemsPerPage
   );
 
+  console.info(totalPageForPagination, 'totalPageForPagination');
+  console.info(itemsPerPageNotifications, 'itemsPerPageNotifications')
+
   const { primaryColor, primaryButtonColor } = useSelector<
     RootState,
     ColorStoreType
@@ -26,6 +30,8 @@ const PaginationBox: React.FC<IPaginationBox> = ({
   const [totalPage, setTotalPages] = useState<number>();
   const [totalPageVideo, setTotalPagesVideo] = useState<number>();
 
+  console.info(totalPage, 'totalPage')
+
   // const hotdropsVar = import.meta.env.VITE_TESTNET;
 
   const pagesArray: number[] = [];
@@ -37,6 +43,10 @@ const PaginationBox: React.FC<IPaginationBox> = ({
     for (let i = 0; i < totalPageVideo; i++) {
       pagesArray.push(i + 1);
     }
+  } else if(whatPage && whatPage === 'notifications' && totalPage) {
+    for (let i = 0; i < totalPage; i++) {
+      pagesArray.push(i + 1);
+    }
   }
 
   const getPagesCount = (totalCount: number, itemsPerPage: number) => {
@@ -56,7 +66,10 @@ const PaginationBox: React.FC<IPaginationBox> = ({
     } else if (totalPageForPagination && whatPage === 'video') {
       setTotalPagesVideo(getPagesCount(totalPageForPagination, itemsPerPage));
     }
-  }, [setTotalPages, totalPageForPagination, itemsPerPage, whatPage]);
+    else if(totalPageForPagination && whatPage === 'notifications' && itemsPerPageNotifications){
+        setTotalPages(getPagesCount(totalPageForPagination, itemsPerPageNotifications));
+    }
+  }, [setTotalPages, totalPageForPagination, itemsPerPage, whatPage, itemsPerPageNotifications]);
 
   if (totalPageForPagination === 0) {
     return null;

rair-front/src/components/MockUpPage/SearchPanel.tsx

@@ -226,7 +226,7 @@ const SearchPanel: React.FC<ISearchPanel> = ({ tabIndex, setTabIndex }) => {
               primaryColor === '#dedede' ? 'default' : 'dark'
             }`}
             className="category-button-nft category-button">
-            {hotdropsVar === 'true' ? 'Collectible' : 'NFT'}
+              MARKET
           </Tab>
           <Tab
             onClick={() => {

rair-front/src/components/MockUpPage/mockupPage.types.ts

@@ -60,13 +60,14 @@ export interface ISvgLock {
   color: string;
 }
 
-export type TWhatPage = 'nft' | 'video';
+export type TWhatPage = 'nft' | 'video' | 'notifications';
 
 export interface IPaginationBox {
   changePage: (currentPage: number) => void;
   currentPage: number;
   totalPageForPagination: number | undefined;
   whatPage: TWhatPage;
+  itemsPerPageNotifications?: number;
 }
 
 export interface ILikeButton {