feat: added achievements section

package.json

@@ -2,7 +2,7 @@
   "name": "watchit",
   "author": "Watchit",
   "type": "module",
-  "version": "2.3.0-beta.2",
+  "version": "2.4.0-beta.1",
   "description": "Open videos everywhere",
   "email": "[email protected]",
   "private": true,
@@ -99,6 +99,7 @@
     "nprogress": "^0.2.0",
     "numeral": "^2.0.6",
     "pbkdf2": "^3.1.2",
+    "permissionless": "^0.2.47",
     "react": "^18.2.0",
     "react-apexcharts": "^1.7.0",
     "react-dom": "^18.2.0",
@@ -124,7 +125,7 @@
     "stylis-plugin-rtl": "^2.0.2",
     "swr": "^2.2.0",
     "uuid": "^10.0.0",
-    "viem": "^2.21.53",
+    "viem": "^2.31.4",
     "worker-loader": "^3.0.8",
     "yet-another-react-lightbox": "^3.11.4",
     "yup": "^1.4.0"

src/clients/viem/publicClient.ts

@@ -1,5 +1,6 @@
 import { createPublicClient, http, webSocket } from 'viem';
 import { polygonAmoy } from 'viem/chains';
+import { GLOBAL_CONSTANTS } from '@src/config-global.ts';
 
 const WS_URL = 'wss://polygon-amoy-bor-rpc.publicnode.com';
 
@@ -8,6 +9,11 @@ export const publicClient = createPublicClient({
   transport: http(polygonAmoy.rpcUrls.default.http[0]),
 });
 
+export const alchemyClient = createPublicClient({
+  chain: polygonAmoy,
+  transport: http(GLOBAL_CONSTANTS.RPC_URL),
+});
+
 export const publicClientWebSocket = createPublicClient({
   chain: polygonAmoy,
   transport: webSocket(WS_URL),

src/components/carousel/variants/carousel-top-titles.tsx

@@ -45,7 +45,7 @@ export default function CarouselTopTitles({ posts, category }: Readonly<Carousel
       >
         <Carousel ref={carousel.carouselRef} {...carousel.carouselSettings}>
           {posts.map((post: Post) => (
-            <Box key={`${category}-${post.id}`} sx={{ px: 0.75, height: '100%' }}>
+            <Box key={`${category}-${post.id}`} sx={{ height: '100%' }}>
               <PosterTopTitles post={post} />
             </Box>
           ))}

src/components/follow-unfollow-button.tsx

@@ -53,14 +53,14 @@ const FollowUnfollowButton = ({
   const { sendNotification } = useNotifications();
   const { generatePayload } = useNotificationPayload(session);
   const profile: User | null = profileData?.getUser;
-  const isLoading = isProcessing || profileLoading || profileFollowLoading || isFollowingLoading;
+  const isLoading = isProcessing || profileLoading || profileFollowLoading || isFollowingLoading || !profile;
   const RainbowEffect = isLoading ? NeonPaper : Box;
 
   useEffect(() => {
-    if (profileId && profileId !== session?.address) loadProfile({variables: { input: { address: profileId } }});
-
+    if (!profileId) return;
+    loadProfile({variables: { input: { address: profileId } }});
     getIsFollowing({variables: { targetAddress: profileId }});
-  }, []);
+  }, [profileId]);
 
   useEffect(() => {
     setIsProcessing(false);

src/components/publication-detail-main/index.tsx

@@ -51,8 +51,8 @@ import { useAuth } from '@src/hooks/use-auth.ts';
 import { useToggleBookmark } from '@src/hooks/use-toggle-bookmark';
 import {
   useHidePostMutation,
-  useGetIsPostLikedLazyQuery,
-  useTogglePostLikeMutation,
+  useGetIsLikedLazyQuery,
+  useToggleLikeMutation,
 } from '@src/graphql/generated/hooks.tsx';
 import { resolveSrc } from '@src/utils/image.ts';
 import { useBookmarks } from '@src/hooks/use-bookmark.ts';
@@ -81,8 +81,8 @@ export default function PublicationDetailMain({
   const [ hidePost ] = useHidePostMutation();
   const { sendNotification } = useNotifications();
   const { generatePayload } = useNotificationPayload(sessionData);
-  const [getIsPostLiked, { loading: postLikedLoading }] = useGetIsPostLikedLazyQuery()
-  const [ togglePostLike, { loading: togglePostLikeLoading }  ] = useTogglePostLikeMutation()
+  const [getIsLiked, { loading: postLikedLoading }] = useGetIsLikedLazyQuery()
+  const [ toggleLike, { loading: togglePostLikeLoading }  ] = useToggleLikeMutation()
   const { has, loading: loadingList } = useBookmarks();
   const { toggle, loading: loadingToggle } = useToggleBookmark();
 
@@ -95,8 +95,18 @@ export default function PublicationDetailMain({
     if (!sessionData?.authenticated) return dispatch(openLoginModal());
 
     try {
-      const res = await togglePostLike({ variables: { input: { postId: post.id } } });
-      const isNowLiked = res.data?.togglePostLike ?? false;
+      const res = await toggleLike({
+        variables: {
+          input: {
+            targetId: post.id,
+            targetType: 'POST'
+          }
+        }
+      });
+      const isNowLiked = res.data?.toggleLike ?? false;
+
+      console.log('hello test', res.data?.toggleLike)
+      console.log(isNowLiked)
 
       setHasLiked(isNowLiked);
       setLikesCount((prev) => prev + (isNowLiked ? 1 : -1));
@@ -132,9 +142,10 @@ export default function PublicationDetailMain({
   };
 
   useEffect(() => {
-    getIsPostLiked({ variables: { postId: post.id } }).then((res) =>
-      setHasLiked(res.data?.getIsPostLiked ?? false),
-    );
+    getIsLiked({ variables: { targetId: post.id } }).then((res) => {
+      console.log('hello test 2', res.data?.getIsLiked)
+      setHasLiked(res.data?.getIsLiked ?? false)
+    });
   }, [post.id]);
 
   const handleHide = async () => {

src/components/sponsored-access-button/sponsored-access-button.tsx

@@ -98,7 +98,7 @@ export const SponsoredAccessTrialButton: FC<ExtendedSponsoredAccessProps> = (pro
             display: { xs: size === 'sm' ? 'none' : 'flex', md: 'flex' }
           }}
         >
-          Free trial
+          Free
         </Typography>
       </StyledBoxGradient>
     </RainbowEffect>

src/components/video-player/video-player.tsx

@@ -80,8 +80,8 @@ export const VideoPlayer: FC<VideoPlayerProps> = ({ src, cid, titleMovie, onBack
         // allows faster adaptation but increases the chance of playback interruptions.
         // Finding the right balance ensures smooth playback without unnecessary network congestion.
         // (hls_time = 6 + maxBufferLength = 30) = 5 fragments in buffer
-        // "maxBufferLength": 60, // Max video buffer length in seconds
-        // "maxMaxBufferLength": 600, // Absolute max buffer length
+        "maxBufferLength": 60, // Max video buffer length in seconds
+        "maxMaxBufferLength": 600, // Absolute max buffer length
         // maxStarvationDelay defines the maximum acceptable time (in seconds) a fragment can take to download
         // while playback is already in progress.
         // - If a fragment is estimated to take longer than this value and the buffer is running low,
@@ -109,19 +109,21 @@ export const VideoPlayer: FC<VideoPlayerProps> = ({ src, cid, titleMovie, onBack
         // abrBandWidthFactor: Determines how conservatively HLS estimates available bandwidth.
         // A value < 1.0 ensures HLS.js does not use the full estimated bandwidth, preventing aggressive quality changes.
         // Recommended range: 0.7 - 0.9 (Lower = More cautious, fewer quality switches)
-        // "abrBandWidthFactor": 0.9,
+        // "abrBandWidthFactor": 0.7,
         // abrBandWidthUpFactor: Controls how aggressively the player upgrades to a higher bitrate.
         // A lower value prevents HLS.js from switching to a higher quality too quickly, reducing unnecessary upscaling.
         // Recommended range: 0.5 - 0.8 (Lower = More stable, avoids excessive upscaling)
-        // "abrBandWidthUpFactor": 0.7,
+        // "abrBandWidthUpFactor": 0.6,
         "enableSoftwareAES": false, // Disable software AES decryption
         "enableID3MetadataCues": false, // Disable ID3 metadata cues
         "enableWebVTT": true, // Enable WebVTT subtitles
         "enableIMSC1": false, // Disable IMSC1 subtitles
         "enableCEA708Captions": false, // Disable CEA-708 captions,
+        // "abrMaxWithRealBitrate": true,
         "enableWorker": true,
         "backBufferLength": 90,
-        "lowLatencyMode": false, // Not needed in VOD
+        // "progressive": true,
+        // "lowLatencyMode": false, // Not needed in VOD
         // "startFragPrefetch": true,
         "fLoader": FetchLoader,
         "pLoader": XhrLoader

src/config-global.ts

@@ -23,6 +23,7 @@ export interface GlobalConstants {
   PINATA_SECRET_API_KEY: string;
   WEB3_CLIENT_ID: string;
   PIMLICO: string;
+  RPC_URL: string;
   NEXT_PUBLIC_SUPABASE_URL: string;
   NEXT_PUBLIC_SUPABASE_ANON_KEY: string;
   ENVIRONMENT: string;
@@ -105,6 +106,7 @@ export const GLOBAL_CONSTANTS: GlobalConstants = {
   GQL_ENDPOINT: process.env.VITE_GQL_ENDPOINT || import.meta.env.VITE_GQL_ENDPOINT || 'http://localhost:4000/graphql',
   OPEN_COLLECTIVE: process.env.VITE_URL_OPEN_COLLECTIVE || import.meta.env.VITE_URL_OPEN_COLLECTIVE || '',
   TERMS_AND_CONDITIONS: process.env.VITE_URL_TERMS_AND_CONDITIONS || import.meta.env.VITE_URL_TERMS_AND_CONDITIONS || '',
+  RPC_URL: process.env.VITE_POLYGON_AMOY_RPC || import.meta.env.VITE_POLYGON_AMOY_RPC || 'https://polygon-amoy-bor-rpc.publicnode.com',
 };
 
 export const PATH_AFTER_LOGIN = paths.dashboard.root;