From c55ed072b84778729691c2a036ed2b5e823abb93 Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Mon, 23 Dec 2024 15:07:37 +0300
Subject: [PATCH 01/17] removing mp4 in upload format

---
 packages/frontend/components/UploadForm/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend/components/UploadForm/index.tsx b/packages/frontend/components/UploadForm/index.tsx
index da59339..4e71a57 100644
--- a/packages/frontend/components/UploadForm/index.tsx
+++ b/packages/frontend/components/UploadForm/index.tsx
@@ -261,7 +261,6 @@ const UploadForm = () => {
                     MIME_TYPES.webp,
                     MIME_TYPES.svg,
                     MIME_TYPES.gif,
-                    MIME_TYPES.mp4,
                   ]}
                 >
                   {() => dropzoneChildren(image)}

From 1540e920c6c4542b1b3fd9cc1114a9e78c2dd7c5 Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Thu, 2 Jan 2025 16:12:36 +0700
Subject: [PATCH 02/17] improving upload page, static page for posts and index

---
 .../frontend/components/Post/DisplayMedia.tsx |   1 +
 .../frontend/components/Posts/PostCard.tsx    |   8 +-
 .../frontend/components/UploadForm/index.tsx  | 124 ++++++++++--------
 packages/frontend/hooks/api/posts/index.ts    |   5 +-
 packages/frontend/package.json                |   1 -
 .../pages/api/metis/pages/[number].tsx        |   6 +-
 packages/frontend/pages/index.tsx             |  93 ++++++-------
 packages/frontend/pages/post/[id].tsx         |  86 ++++++++++--
 packages/frontend/yarn.lock                   |  25 +---
 9 files changed, 206 insertions(+), 143 deletions(-)

diff --git a/packages/frontend/components/Post/DisplayMedia.tsx b/packages/frontend/components/Post/DisplayMedia.tsx
index ec025c7..07f4b36 100644
--- a/packages/frontend/components/Post/DisplayMedia.tsx
+++ b/packages/frontend/components/Post/DisplayMedia.tsx
@@ -47,6 +47,7 @@ const DisplayMedia: React.FC<IMyProps> = ({ post }) => {
         width={width}
         src={post.image}
         alt={post.name}
+        loading="lazy"
         style={{
           height: "95%",
           borderRadius: "10px",
diff --git a/packages/frontend/components/Posts/PostCard.tsx b/packages/frontend/components/Posts/PostCard.tsx
index 88edb38..6fff322 100644
--- a/packages/frontend/components/Posts/PostCard.tsx
+++ b/packages/frontend/components/Posts/PostCard.tsx
@@ -4,8 +4,14 @@ import Link from "next/link";
 
 import type { Post } from "@/services/upload";
 
+type PostReduced = {
+  image: string;
+  name: string;
+  tokenId: number;
+};
+
 interface IMyProps {
-  post: Post;
+  post: PostReduced;
 }
 
 const PostCard: React.FC<IMyProps> = ({ post }) => {
diff --git a/packages/frontend/components/UploadForm/index.tsx b/packages/frontend/components/UploadForm/index.tsx
index 4e71a57..8045eae 100644
--- a/packages/frontend/components/UploadForm/index.tsx
+++ b/packages/frontend/components/UploadForm/index.tsx
@@ -3,7 +3,6 @@ import {
   Paper,
   Title,
   TextInput,
-  Textarea,
   Group,
   Button,
   Image,
@@ -13,7 +12,6 @@ import {
 } from "@mantine/core";
 import { Dropzone, MIME_TYPES } from "@mantine/dropzone";
 import { useState, useEffect } from "react";
-import ReactPlayer from "react-player";
 import { Upload, Replace } from "tabler-icons-react";
 import {
   useAccount,
@@ -29,24 +27,21 @@ import { getContractInfo } from "@/utils/contracts";
 
 export const dropzoneChildren = (image: File | undefined) => {
   if (image) {
-    let link = URL.createObjectURL(image);
+    let link: string = URL.createObjectURL(image);
     return (
       <Group
         position="center"
         spacing="xl"
         style={{ minHeight: 220, pointerEvents: "none" }}
       >
-        {image.type[0] === "i" ? (
-          <Image
-            src={link}
-            alt="uploaded image"
-            my="md"
-            radius="lg"
-            sx={{ maxWidth: "240px" }}
-          />
-        ) : (
-          <ReactPlayer url={link} />
-        )}
+        <Image
+          src={link}
+          alt="uploaded image"
+          my="md"
+          radius="lg"
+          sx={{ maxWidth: "240px" }}
+        />
+
         <Group sx={{ color: "#3a3a3a79" }}>
           <MediaQuery
             query="(max-width:500px)"
@@ -90,7 +85,11 @@ const UploadForm = () => {
   const { address: senderAddress } = useAccount();
 
   const { address: contractAddress, abi } = getContractInfo();
-  const { data: hash, writeContract: writeMintPost } = useWriteContract();
+  const {
+    data: hash,
+    writeContract: writeMintPost,
+    status,
+  } = useWriteContract();
 
   const [name, setName] = useState<string>("");
   const [description, setDescription] = useState<string>("");
@@ -98,17 +97,14 @@ const UploadForm = () => {
   const [postReceiver, setPostReceiver] = useState<`0x${string}` | undefined>(
     senderAddress
   );
-
-  const [isPostUpdated, setIsPostUpdated] = useState<boolean>(false);
-  const [isPostLoading, setIsPostLoading] = useState<boolean>(false);
-
-  const [cid, setCid] = useState<string>("");
-
+  const [ensName, setEnsName] = useState<string>("");
   const [provider, setProvider] = useState<"Pinata">("Pinata");
 
-  const [lastHash, setLastHash] = useState<string>("");
+  const [isPostReady, setIsPostReady] = useState<boolean>(false);
+  const [isPostLoading, setIsPostLoading] = useState<boolean>(false);
 
-  const [ensName, setEnsName] = useState<string>("");
+  const [cid, setCID] = useState<string>("");
+  const [lastHash, setLastHash] = useState<string | undefined>();
 
   const config = createConfig({
     chains: [mainnet],
@@ -129,6 +125,7 @@ const UploadForm = () => {
     image?: File
   ) {
     if (description !== "" && name !== "" && image && postReceiver) {
+      setIsPostLoading(true);
       const cid: string | undefined = await UploadData({
         data: { name: name, description: description, image: image },
         provider: provider,
@@ -138,13 +135,12 @@ const UploadForm = () => {
         throw new Error("no cid");
       }
 
-      setCid(cid);
+      setCID(cid);
+      setIsPostReady(true);
 
       setImage(undefined);
       setName("");
       setDescription("");
-
-      setIsPostLoading(true);
     }
   }
 
@@ -160,14 +156,9 @@ const UploadForm = () => {
       setPostReceiver(receiverAddress);
     }
 
-    if (isPostLoading) {
-      setIsPostUpdated(true);
-      console.log("Updated response:" + cid);
-    }
-
-    if (hash && hash !== lastHash && isPostUpdated) {
+    if (hash && hash !== lastHash && isPostReady) {
       setLastHash(hash);
-      setIsPostUpdated(false);
+      setIsPostReady(false);
       setIsPostLoading(false);
     }
   }, [
@@ -176,10 +167,11 @@ const UploadForm = () => {
     receiverAddress,
     lastHash,
     cid,
-    isPostUpdated,
+    isPostReady,
     senderAddress,
     ensName,
     hash,
+    fetchedAccount,
   ]);
 
   return (
@@ -214,7 +206,7 @@ const UploadForm = () => {
               </Title>
             )}
 
-            {!isPostUpdated ? (
+            {!isPostLoading ? (
               <div>
                 <TextInput
                   required
@@ -223,7 +215,7 @@ const UploadForm = () => {
                   value={name}
                   onChange={(e) => setName(e.target.value)}
                 />
-                <Textarea
+                <TextInput
                   my="md"
                   required
                   onChange={(e) => setDescription(e.target.value)}
@@ -266,7 +258,7 @@ const UploadForm = () => {
                   {() => dropzoneChildren(image)}
                 </Dropzone>
                 <Group position="center" sx={{ padding: 10 }}>
-                  {senderAddress && (
+                  {senderAddress && !isPostLoading && (
                     <Button
                       component="a"
                       radius="lg"
@@ -279,6 +271,17 @@ const UploadForm = () => {
                     </Button>
                   )}
                 </Group>
+                {lastHash && (
+                  <>
+                    <Center>
+                      <Text>{status}</Text>
+                    </Center>
+                    <Center>
+                      <Text>{lastHash}</Text>
+                    </Center>
+                  </>
+                )}
+
                 <Center>
                   <NativeSelect
                     placeholder="Pick IPFS Provider"
@@ -292,23 +295,36 @@ const UploadForm = () => {
                 </Center>
               </div>
             ) : (
-              <Center>
-                <Button
-                  component="a"
-                  radius="lg"
-                  mt="md"
-                  onClick={() => {
-                    writeMintPost({
-                      address: contractAddress,
-                      abi: abi,
-                      functionName: "createPost",
-                      args: [postReceiver, cid],
-                    });
-                  }}
-                >
-                  Upload Post
-                </Button>
-              </Center>
+              <>
+                {isPostReady ? (
+                  <>
+                    <Center>
+                      <Button
+                        component="a"
+                        radius="lg"
+                        mt="md"
+                        onClick={() => {
+                          writeMintPost({
+                            address: contractAddress,
+                            abi: abi,
+                            functionName: "createPost",
+                            args: [postReceiver, cid],
+                          });
+                        }}
+                      >
+                        Upload Post
+                      </Button>
+                    </Center>
+                    <Center mt="md">
+                      <Text>CID: {cid}</Text>
+                    </Center>
+                  </>
+                ) : (
+                  <Center>
+                    <Text>Uploading to IPFS</Text>
+                  </Center>
+                )}
+              </>
             )}
           </Paper>
         </div>
diff --git a/packages/frontend/hooks/api/posts/index.ts b/packages/frontend/hooks/api/posts/index.ts
index fb99cae..87c26a2 100644
--- a/packages/frontend/hooks/api/posts/index.ts
+++ b/packages/frontend/hooks/api/posts/index.ts
@@ -11,16 +11,17 @@ export const usePosts = () => {
     },
     initialPageParam: undefined,
     getNextPageParam: (lastPage: any, pages: any) => {
-      if (lastPage.items[5]?.token_id < lastPage.totalSupply) {
+      if (lastPage.items[5]?.tokenId < lastPage.totalSupply) {
         return pages.length + 1;
       }
     },
   });
 };
 
-export const usePost = (id: string) => {
+export const usePost = (id: string, enabled: boolean) => {
   return useQuery({
     queryKey: [id],
     queryFn: () => fetchPost(id),
+    enabled: enabled,
   });
 };
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index b79a18b..757f846 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -30,7 +30,6 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-icons": "^5.3.0",
-    "react-player": "^2.11.2",
     "react-query": "^3.39.3",
     "sharp": "^0.33.0",
     "tabler-icons-react": "^1.56.0",
diff --git a/packages/frontend/pages/api/metis/pages/[number].tsx b/packages/frontend/pages/api/metis/pages/[number].tsx
index 5b6a488..80b7c18 100644
--- a/packages/frontend/pages/api/metis/pages/[number].tsx
+++ b/packages/frontend/pages/api/metis/pages/[number].tsx
@@ -1,9 +1,9 @@
-import { fetchDecodedPost } from "@/services/fetchCid";
-import { getContractInfo } from "@/utils/contracts";
-
 import type { NextApiRequest, NextApiResponse } from "next";
 import { Contract, JsonRpcProvider } from "ethers";
 
+import { fetchDecodedPost } from "@/services/fetchCid";
+import { getContractInfo } from "@/utils/contracts";
+
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
diff --git a/packages/frontend/pages/index.tsx b/packages/frontend/pages/index.tsx
index d1b94df..bcace8a 100644
--- a/packages/frontend/pages/index.tsx
+++ b/packages/frontend/pages/index.tsx
@@ -1,46 +1,23 @@
 import type { NextPage } from "next";
-import { useRef, useCallback, useMemo } from "react";
-import { Box, Center, Title, Loader } from "@mantine/core";
+import { Contract, JsonRpcProvider } from "ethers";
+import { Box, Center, Title } from "@mantine/core";
 
-import type { Post } from "@/services/upload";
 import PostCard from "@/components/Posts/PostCard";
 import { PageSEO } from "@/components/SEO";
-import { usePosts } from "@/hooks/api";
+import { fetchDecodedPost } from "@/services/fetchCid";
+import { getContractInfo } from "@/utils/contracts";
 
-const Home: NextPage = () => {
-  const {
-    data: posts,
-    isFetching,
-    isLoading,
-    fetchNextPage,
-    hasNextPage,
-  } = usePosts();
+interface Props {
+  posts: PostReduced[];
+}
 
-  const observer = useRef<IntersectionObserver | null>(null);
-
-  const lastElement = useCallback(
-    (node: HTMLDivElement) => {
-      if (isLoading) return;
-
-      if (observer.current) observer.current.disconnect();
-
-      observer.current = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting && hasNextPage && !isFetching) {
-          fetchNextPage();
-        }
-      });
-
-      if (node) observer.current.observe(node);
-    },
-    [fetchNextPage, hasNextPage, isFetching, isLoading]
-  );
-
-  const fetchedPosts = useMemo(() => {
-    return posts?.pages.reduce((acc, page) => {
-      return [...acc, ...page.items];
-    }, []);
-  }, [posts]);
+type PostReduced = {
+  image: string;
+  name: string;
+  tokenId: number;
+};
 
+const Home: NextPage<Props> = ({ posts }) => {
   return (
     <div>
       <PageSEO />
@@ -60,23 +37,39 @@ const Home: NextPage = () => {
           gridTemplateRows: "masonry",
         }}
       >
-        {fetchedPosts &&
-          fetchedPosts?.map((post: Post) => {
-            return (
-              <Center ref={lastElement} key={post.tokenId}>
-                <PostCard post={post} />
-              </Center>
-            );
-          })}
+        {posts.map((post: PostReduced) => {
+          return (
+            <Center key={post.tokenId}>
+              <PostCard post={post} />
+            </Center>
+          );
+        })}
       </Box>
-
-      {isFetching && (
-        <Center mt={24}>
-          <Loader color="blue" />
-        </Center>
-      )}
     </div>
   );
 };
 
 export default Home;
+
+export const getStaticProps = async () => {
+  const { address, abi } = getContractInfo();
+  const provider = new JsonRpcProvider(
+    "https://metis-mainnet.public.blastapi.io"
+  );
+  const contract: Contract = new Contract(address, abi, provider);
+
+  const totalSupply: number = Number(await contract.totalSupply());
+  const posts: PostReduced[] = [];
+
+  for (let i = 1; i <= totalSupply; i++) {
+    const result = await contract.getPostCid(i);
+    const post = await fetchDecodedPost(result);
+    posts.push({ image: post.image, name: post.name, tokenId: i });
+  }
+  return {
+    props: {
+      posts,
+    },
+    revalidate: 10,
+  };
+};
diff --git a/packages/frontend/pages/post/[id].tsx b/packages/frontend/pages/post/[id].tsx
index dcd1fbc..e85fe95 100644
--- a/packages/frontend/pages/post/[id].tsx
+++ b/packages/frontend/pages/post/[id].tsx
@@ -1,25 +1,32 @@
-import { ActionIcon, SimpleGrid, LoadingOverlay } from "@mantine/core";
+import type { GetStaticPaths, NextPage } from "next";
+import { Contract, JsonRpcProvider } from "ethers";
+import { ActionIcon, SimpleGrid } from "@mantine/core";
 import { NextRouter, useRouter } from "next/router";
 import { ArrowLeft } from "tabler-icons-react";
 
 import MediaDetails from "@/components/Post/MediaDetails";
 import DisplayMedia from "@/components/Post/DisplayMedia";
 import { PageSEO } from "@/components/SEO";
-import { usePost } from "@/hooks/api";
+import { fetchDecodedPost } from "@/services/fetchCid";
+import { getContractInfo } from "@/utils/contracts";
 
-const PostPage = () => {
+interface Props {
+  post: Post;
+}
+
+const PostPage: NextPage<Props> = ({ post }) => {
   const router: NextRouter = useRouter();
-  const postId: string = String(router.query.id);
+  const postId: string = String(post.tokenId);
+
   const tag: string = `metis: ${postId}`;
-  const { data: postQueried, isLoading } = usePost(postId);
+
   return (
     <div>
       <PageSEO
         title={`Pin Save Post ${tag}`}
         description={`Pin Save Post ${tag}`}
       />
-      <LoadingOverlay visible={isLoading} />
-      {postQueried && (
+      {post && (
         <div>
           <ActionIcon
             onClick={() => router.back()}
@@ -37,8 +44,8 @@ const PostPage = () => {
               { maxWidth: "md", cols: 1, spacing: "md" },
             ]}
           >
-            <DisplayMedia post={postQueried} />
-            <MediaDetails post={postQueried} />
+            <DisplayMedia post={post} />
+            <MediaDetails post={post} />
           </SimpleGrid>
         </div>
       )}
@@ -47,3 +54,64 @@ const PostPage = () => {
 };
 
 export default PostPage;
+
+export const getStaticPaths = (async () => {
+  const { address, abi } = getContractInfo();
+  const provider = new JsonRpcProvider(
+    "https://andromeda.metis.io/?owner=1088"
+  );
+  const contract: Contract = new Contract(address, abi, provider);
+  const totalSupply: number = Number(await contract.totalSupply());
+
+  const paths = Array.from({ length: totalSupply }, (_, i) => ({
+    params: { id: String(totalSupply - i) },
+  }));
+
+  return {
+    paths: paths,
+    fallback: "blocking",
+  };
+}) satisfies GetStaticPaths;
+
+type Post = {
+  image: string;
+  name: string;
+  description: string;
+  tokenId: number;
+  owner: string;
+  author: string;
+  totalSupply: number;
+};
+
+export const getStaticProps = async (context: { params: { id: string } }) => {
+  if (context) {
+    const tokenId: number = Number(context.params.id);
+
+    const { address, abi } = getContractInfo();
+    const provider = new JsonRpcProvider(
+      "https://metis-mainnet.public.blastapi.io"
+    );
+    const contract: Contract = new Contract(address, abi, provider);
+
+    const totalSupply: number = Number(await contract.totalSupply());
+
+    const result = await contract.getPostCid(tokenId);
+    const item = await fetchDecodedPost(result);
+    const owner: string = await contract.getPostOwner(tokenId);
+    const postAuthor: string = await contract.getPostAuthor(tokenId);
+    const post: Post = {
+      totalSupply: totalSupply,
+      tokenId: tokenId,
+      owner: owner,
+      author: postAuthor,
+      ...item,
+    };
+
+    return {
+      props: {
+        post,
+      },
+      revalidate: 10,
+    };
+  }
+};
diff --git a/packages/frontend/yarn.lock b/packages/frontend/yarn.lock
index a61af58..019f231 100644
--- a/packages/frontend/yarn.lock
+++ b/packages/frontend/yarn.lock
@@ -3412,7 +3412,7 @@ deep-object-diff@^1.1.9:
   resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.9.tgz#6df7ef035ad6a0caa44479c536ed7b02570f4595"
   integrity sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==
 
-deepmerge@^4.0.0, deepmerge@^4.2.2:
+deepmerge@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -5331,11 +5331,6 @@ lit@2.8.0:
     lit-element "^3.3.0"
     lit-html "^2.8.0"
 
-load-script@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
-  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
-
 load-tsconfig@^0.2.3:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/load-tsconfig/-/load-tsconfig-0.2.5.tgz#453b8cd8961bfb912dea77eb6c168fe8cca3d3a1"
@@ -5402,11 +5397,6 @@ media-query-parser@^2.0.2:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-memoize-one@^5.1.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
-  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
-
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -6074,7 +6064,7 @@ progress@2.0.3:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -6182,17 +6172,6 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-player@^2.11.2:
-  version "2.16.0"
-  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.16.0.tgz#89070700b03f5a5ded9f0b3165d4717390796481"
-  integrity sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==
-  dependencies:
-    deepmerge "^4.0.0"
-    load-script "^1.0.0"
-    memoize-one "^5.1.1"
-    prop-types "^15.7.2"
-    react-fast-compare "^3.0.1"
-
 react-popper@^2.2.5:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"

From 86e7efa50b843008baffcfc7153b48afa034ed55 Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Thu, 2 Jan 2025 19:41:41 +0700
Subject: [PATCH 03/17] fixing metadata

---
 packages/frontend/components/SEO/index.tsx       | 1 +
 packages/frontend/components/SEO/siteMetadata.ts | 6 +++---
 packages/frontend/pages/index.tsx                | 2 +-
 packages/frontend/pages/post/[id].tsx            | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/components/SEO/index.tsx b/packages/frontend/components/SEO/index.tsx
index bec93c3..2edf54c 100644
--- a/packages/frontend/components/SEO/index.tsx
+++ b/packages/frontend/components/SEO/index.tsx
@@ -23,6 +23,7 @@ const CommonSEO = ({
         content={`${siteMetadata.siteUrl}${router.asPath}`}
       />
       <meta property="description" content={description} />
+      <link rel="canonical" href={`${siteMetadata.siteUrl}${router.asPath}`} />
       <meta property="og:description" content={description} />
       <meta property="og:type" content={siteMetadata.ogType} />
       <meta property="og:image" content={ogImage} />
diff --git a/packages/frontend/components/SEO/siteMetadata.ts b/packages/frontend/components/SEO/siteMetadata.ts
index b1d0765..acb0e15 100644
--- a/packages/frontend/components/SEO/siteMetadata.ts
+++ b/packages/frontend/components/SEO/siteMetadata.ts
@@ -1,9 +1,9 @@
 export const siteMetadata = {
-  title: "Pin Save - decentralized Pinterest",
+  title: "PinSave - Decentralized Image Sharing & Content Aggregation Platform",
   author: "Pavel Fedotov",
-  headerTitle: "Pin Save - decentralized Pinterest",
+  headerTitle: "PinSave - Decentralized Image Sharing",
   description:
-    "Pin Save is a platform for decentralized content aggregation and image sharing where users have content ownership.",
+    "PinSave is a platform for decentralized content aggregation and image sharing where users have content ownership.",
   ogType: "website",
   ogImageUrl: "https://metis.pinsave.app/TwitterIconWords.png",
   siteUrl: "https://metis.pinsave.app",
diff --git a/packages/frontend/pages/index.tsx b/packages/frontend/pages/index.tsx
index bcace8a..828656f 100644
--- a/packages/frontend/pages/index.tsx
+++ b/packages/frontend/pages/index.tsx
@@ -70,6 +70,6 @@ export const getStaticProps = async () => {
     props: {
       posts,
     },
-    revalidate: 10,
+    revalidate: 20,
   };
 };
diff --git a/packages/frontend/pages/post/[id].tsx b/packages/frontend/pages/post/[id].tsx
index e85fe95..030ffd2 100644
--- a/packages/frontend/pages/post/[id].tsx
+++ b/packages/frontend/pages/post/[id].tsx
@@ -111,7 +111,7 @@ export const getStaticProps = async (context: { params: { id: string } }) => {
       props: {
         post,
       },
-      revalidate: 10,
+      revalidate: 20,
     };
   }
 };

From 587d465eb97e578a6c4ba28a07a4236f47fcf45e Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Fri, 10 Jan 2025 20:56:06 +0700
Subject: [PATCH 04/17] added image optimization and increased revalidation on
 index to minute

---
 packages/frontend/pages/index.tsx      |  2 +-
 packages/frontend/pages/post/[id].tsx  |  2 +-
 packages/frontend/services/fetchCid.ts | 15 +++++++++++----
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/pages/index.tsx b/packages/frontend/pages/index.tsx
index 828656f..4bbc219 100644
--- a/packages/frontend/pages/index.tsx
+++ b/packages/frontend/pages/index.tsx
@@ -70,6 +70,6 @@ export const getStaticProps = async () => {
     props: {
       posts,
     },
-    revalidate: 20,
+    revalidate: 60,
   };
 };
diff --git a/packages/frontend/pages/post/[id].tsx b/packages/frontend/pages/post/[id].tsx
index 030ffd2..e15e328 100644
--- a/packages/frontend/pages/post/[id].tsx
+++ b/packages/frontend/pages/post/[id].tsx
@@ -18,7 +18,7 @@ const PostPage: NextPage<Props> = ({ post }) => {
   const router: NextRouter = useRouter();
   const postId: string = String(post.tokenId);
 
-  const tag: string = `metis: ${postId}`;
+  const tag: string = `Metis: ${postId}`;
 
   return (
     <div>
diff --git a/packages/frontend/services/fetchCid.ts b/packages/frontend/services/fetchCid.ts
index 60e7cd7..1b35ea2 100644
--- a/packages/frontend/services/fetchCid.ts
+++ b/packages/frontend/services/fetchCid.ts
@@ -36,10 +36,17 @@ export async function fetchImagePinata(cidImage: string) {
     pinataGateway: process.env.NEXT_PUBLIC_GATEWAY_URL,
   });
 
-  const url = await pinata.gateways.createSignedURL({
-    cid: cid,
-    expires: 1800,
-  });
+  const url = await pinata.gateways
+    .createSignedURL({
+      cid: cid,
+      expires: 3600,
+    })
+    .optimizeImage({
+      width: 500,
+      height: 500,
+      format: "webp",
+    });
+
   return url;
 }
 

From 82364b53eca5839e251d6540404d42178105c3c8 Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Fri, 10 Jan 2025 23:23:47 +0700
Subject: [PATCH 05/17] unoptimized images, added vercel.json

---
 packages/frontend/next.config.js |  1 +
 packages/frontend/vercel.json    | 10 ++++++++++
 2 files changed, 11 insertions(+)
 create mode 100644 packages/frontend/vercel.json

diff --git a/packages/frontend/next.config.js b/packages/frontend/next.config.js
index 6ba241d..8f25421 100644
--- a/packages/frontend/next.config.js
+++ b/packages/frontend/next.config.js
@@ -23,6 +23,7 @@ const nextConfig = {
       },
     ],
     minimumCacheTTL: 31536000,
+    unoptimized: true,
   },
 };
 
diff --git a/packages/frontend/vercel.json b/packages/frontend/vercel.json
new file mode 100644
index 0000000..23ad23f
--- /dev/null
+++ b/packages/frontend/vercel.json
@@ -0,0 +1,10 @@
+{
+  "functions": {
+    "pages/api/metis/**/*": {
+      "maxDuration": 60
+    },
+    "pages/**/*": {
+      "maxDuration": 60
+    }
+  }
+}

From c885b02459ee32754cb654b4fc6c1e1884626f35 Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Fri, 10 Jan 2025 23:45:04 +0700
Subject: [PATCH 06/17] optimizing image sizes fetching from pinata

---
 .../frontend/pages/api/metis/pages/[number].tsx |  2 +-
 .../frontend/pages/api/metis/posts/[id].tsx     |  6 ++++--
 packages/frontend/pages/index.tsx               |  2 +-
 packages/frontend/pages/post/[id].tsx           |  2 +-
 packages/frontend/services/fetchCid.ts          | 17 ++++++++++++-----
 5 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/pages/api/metis/pages/[number].tsx b/packages/frontend/pages/api/metis/pages/[number].tsx
index 80b7c18..eb2b4b9 100644
--- a/packages/frontend/pages/api/metis/pages/[number].tsx
+++ b/packages/frontend/pages/api/metis/pages/[number].tsx
@@ -36,7 +36,7 @@ export default async function handler(
     try {
       for (let i = lowerLimit; upperLimit >= i; i++) {
         result = await contract.getPostCid(i);
-        const item = await fetchDecodedPost(result);
+        const item = await fetchDecodedPost(result, 150);
         items.push({ tokenId: i, ...item });
       }
     } catch {
diff --git a/packages/frontend/pages/api/metis/posts/[id].tsx b/packages/frontend/pages/api/metis/posts/[id].tsx
index 5b47a4f..482eae7 100644
--- a/packages/frontend/pages/api/metis/posts/[id].tsx
+++ b/packages/frontend/pages/api/metis/posts/[id].tsx
@@ -19,8 +19,10 @@ export default async function handler(
     const contract: Contract = new Contract(address, abi, provider);
     const postCid: string = await contract.getPostCid(id);
 
-    const objectJsonMetadata: ObjectJsonMetadata =
-      await fetchDecodedPost(postCid);
+    const objectJsonMetadata: ObjectJsonMetadata = await fetchDecodedPost(
+      postCid,
+      500
+    );
 
     const owner: string = await contract.getPostOwner(id);
     const postAuthor: string = await contract.getPostAuthor(id);
diff --git a/packages/frontend/pages/index.tsx b/packages/frontend/pages/index.tsx
index 4bbc219..d43a00d 100644
--- a/packages/frontend/pages/index.tsx
+++ b/packages/frontend/pages/index.tsx
@@ -63,7 +63,7 @@ export const getStaticProps = async () => {
 
   for (let i = 1; i <= totalSupply; i++) {
     const result = await contract.getPostCid(i);
-    const post = await fetchDecodedPost(result);
+    const post = await fetchDecodedPost(result, 150);
     posts.push({ image: post.image, name: post.name, tokenId: i });
   }
   return {
diff --git a/packages/frontend/pages/post/[id].tsx b/packages/frontend/pages/post/[id].tsx
index e15e328..0bef801 100644
--- a/packages/frontend/pages/post/[id].tsx
+++ b/packages/frontend/pages/post/[id].tsx
@@ -96,7 +96,7 @@ export const getStaticProps = async (context: { params: { id: string } }) => {
     const totalSupply: number = Number(await contract.totalSupply());
 
     const result = await contract.getPostCid(tokenId);
-    const item = await fetchDecodedPost(result);
+    const item = await fetchDecodedPost(result, 500);
     const owner: string = await contract.getPostOwner(tokenId);
     const postAuthor: string = await contract.getPostAuthor(tokenId);
     const post: Post = {
diff --git a/packages/frontend/services/fetchCid.ts b/packages/frontend/services/fetchCid.ts
index 1b35ea2..18fb34c 100644
--- a/packages/frontend/services/fetchCid.ts
+++ b/packages/frontend/services/fetchCid.ts
@@ -29,7 +29,10 @@ export async function fetchMetadataPinata(cidMetadata: string) {
   return pinataObject.data as ObjectJsonMetadata;
 }
 
-export async function fetchImagePinata(cidImage: string) {
+export async function fetchImagePinata(
+  cidImage: string,
+  imageResolution: number
+) {
   const cid = parseCid(cidImage);
   const pinata = new PinataSDK({
     pinataJwt: process.env.NEXT_PUBLIC_PINATA_JWT,
@@ -42,21 +45,25 @@ export async function fetchImagePinata(cidImage: string) {
       expires: 3600,
     })
     .optimizeImage({
-      width: 500,
-      height: 500,
+      width: imageResolution,
+      height: imageResolution,
       format: "webp",
     });
 
   return url;
 }
 
-export async function fetchDecodedPost(cidMetadata: string) {
+export async function fetchDecodedPost(
+  cidMetadata: string,
+  imageResolution: number
+) {
   try {
     const objectJsonMetadata: ObjectJsonMetadata =
       await fetchMetadataPinata(cidMetadata);
     try {
       const decodedImage: string = await fetchImagePinata(
-        objectJsonMetadata.image
+        objectJsonMetadata.image,
+        imageResolution
       );
       const output = {
         ...objectJsonMetadata,

From fb444540b390a929bee784c94967d42fd125a206 Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Sat, 11 Jan 2025 12:58:53 +0700
Subject: [PATCH 07/17] pinata link to expire in 10 days

---
 packages/frontend/services/fetchCid.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/services/fetchCid.ts b/packages/frontend/services/fetchCid.ts
index 18fb34c..2941540 100644
--- a/packages/frontend/services/fetchCid.ts
+++ b/packages/frontend/services/fetchCid.ts
@@ -42,7 +42,7 @@ export async function fetchImagePinata(
   const url = await pinata.gateways
     .createSignedURL({
       cid: cid,
-      expires: 3600,
+      expires: 864000,
     })
     .optimizeImage({
       width: imageResolution,

From 5401d17f843b6cc1f197eabdac220bfa7147ee68 Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Thu, 16 Jan 2025 18:07:18 +0700
Subject: [PATCH 08/17] updated readme

---
 README.md | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 922f5c4..c068ea8 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Pin Save - decentralized Pinterest
+# PinSave - decentralized decentalized image sharing platform
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/Pfed-prog/Dspyt-NFTs-EVM/master/packages/frontend/public/PinSaveL.png" alt="Size Limit CLI" width="738" >
@@ -18,7 +18,7 @@
 
 </div>
 
-Pin Save is a decentralized image, video sharing and content aggregation platform where community controls the platform.
+PinSave is a decentralized image and content aggregation platform where community controls the platform.
 
 1. The decentralized feed reinforces the discovery of content and feedback.
 2. Upgradeable, resilient decentralized storage.
@@ -32,15 +32,15 @@ Pin Save is a decentralized image, video sharing and content aggregation platfor
 
 - Image posting:
 
-![Pin Save Upload](https://raw.githubusercontent.com/PinSaveDAO/PinSave-Metis/refs/heads/main/assets/upload.png)
+![PinSave Upload](https://raw.githubusercontent.com/PinSaveDAO/PinSave-Metis/refs/heads/main/assets/upload.png)
 
 - Profile Page with ENS:
 
-![Pin Save Upload](https://raw.githubusercontent.com/PinSaveDAO/PinSave-Metis/refs/heads/main/assets/profile.png)
+![PinSave Upload](https://raw.githubusercontent.com/PinSaveDAO/PinSave-Metis/refs/heads/main/assets/profile.png)
 
-### Optimism Smart contracts
+### Metis PinSave Smart contracts
 
-[Metis Smart contract Etherscan](https://explorer.metis.io/token/0x6F67850013b5775E36E35071a5CdD16ea43e1061)
+[Metis PinSave Smart contract Etherscan](https://explorer.metis.io/token/0x6F67850013b5775E36E35071a5CdD16ea43e1061)
 
 ## Setup
 
@@ -54,9 +54,8 @@ yarn dev
 ## Further Resources
 
 - [PinSave Figma Resources](https://www.figma.com/community/file/1102944149244783025)
-- [Zk Ok Pin Save](https://zkok.io/mina/pin-save/)
-- [EthBucharest 2024: Zero Knowledge proofs on Mina, zkPassport and SoulBound NFTs](https://docs.google.com/presentation/d/1OmJJgzk4iFbKexqBw87oU7oh4H9lXlFFh3eas0EF9y8/edit?usp=sharing)
+- [EthBucharest 2024 PinSave: Zero Knowledge proofs on Mina, zkPassport and SoulBound NFTs](https://docs.google.com/presentation/d/1OmJJgzk4iFbKexqBw87oU7oh4H9lXlFFh3eas0EF9y8/edit?usp=sharing)
 - [PinSave.app DR](https://ahrefs.com/website-authority-checker/?input=pinsave.app)
-- [Npm Pin Save mina package](https://www.npmjs.com/package/pin-mina)
-- [Pin Save on Dspyt](https://dspyt.com/PinSave)
-- [Pin Save retroPGF3](https://round3.optimism.io/projects/0xc613e2a991ce0dbcf8fae1d6128e67543da9710e14831112fba654cc8fe8c389)
+- [Npm PinSave mina package](https://www.npmjs.com/package/pin-mina)
+- [PinSave on Dspyt](https://dspyt.com/PinSave)
+- [PinSave retroPGF3](https://round3.optimism.io/projects/0xc613e2a991ce0dbcf8fae1d6128e67543da9710e14831112fba654cc8fe8c389)

From e941e2d5e09cc8c9c54b1397deff85aa7ca75b86 Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Wed, 5 Feb 2025 16:07:35 +0300
Subject: [PATCH 09/17] improving homepage with pagination

---
 packages/frontend/pages/index.tsx       |  13 ++-
 packages/frontend/pages/page/[page].tsx | 121 ++++++++++++++++++++++++
 2 files changed, 129 insertions(+), 5 deletions(-)
 create mode 100644 packages/frontend/pages/page/[page].tsx

diff --git a/packages/frontend/pages/index.tsx b/packages/frontend/pages/index.tsx
index d43a00d..eb1bb92 100644
--- a/packages/frontend/pages/index.tsx
+++ b/packages/frontend/pages/index.tsx
@@ -1,6 +1,7 @@
 import type { NextPage } from "next";
+import Link from "next/link";
 import { Contract, JsonRpcProvider } from "ethers";
-import { Box, Center, Title } from "@mantine/core";
+import { Box, Button, Center, Title } from "@mantine/core";
 
 import PostCard from "@/components/Posts/PostCard";
 import { PageSEO } from "@/components/SEO";
@@ -21,11 +22,9 @@ const Home: NextPage<Props> = ({ posts }) => {
   return (
     <div>
       <PageSEO />
-
       <Title order={1} className="fade-in-text">
         PinSave Home Page
       </Title>
-
       <Box
         mx="auto"
         mt={20}
@@ -45,6 +44,11 @@ const Home: NextPage<Props> = ({ posts }) => {
           );
         })}
       </Box>
+      <Center mt={20}>
+        <Button>
+          <Link href={"/page/1"}>Next Page</Link>
+        </Button>
+      </Center>
     </div>
   );
 };
@@ -58,10 +62,9 @@ export const getStaticProps = async () => {
   );
   const contract: Contract = new Contract(address, abi, provider);
 
-  const totalSupply: number = Number(await contract.totalSupply());
   const posts: PostReduced[] = [];
 
-  for (let i = 1; i <= totalSupply; i++) {
+  for (let i = 1; i <= 24; i++) {
     const result = await contract.getPostCid(i);
     const post = await fetchDecodedPost(result, 150);
     posts.push({ image: post.image, name: post.name, tokenId: i });
diff --git a/packages/frontend/pages/page/[page].tsx b/packages/frontend/pages/page/[page].tsx
new file mode 100644
index 0000000..b3a8753
--- /dev/null
+++ b/packages/frontend/pages/page/[page].tsx
@@ -0,0 +1,121 @@
+import type { GetStaticPaths, NextPage } from "next";
+import Link from "next/link";
+import { Contract, JsonRpcProvider } from "ethers";
+import { Box, Button, Center, Title } from "@mantine/core";
+
+import PostCard from "@/components/Posts/PostCard";
+import { PageSEO } from "@/components/SEO";
+import { fetchDecodedPost } from "@/services/fetchCid";
+import { getContractInfo } from "@/utils/contracts";
+
+interface Props {
+  posts: PostReduced[];
+  hasNextPage: boolean;
+  page: number;
+}
+
+type PostReduced = {
+  image: string;
+  name: string;
+  tokenId: number;
+};
+
+const Home: NextPage<Props> = ({ posts, hasNextPage, page }) => {
+  return (
+    <div>
+      <PageSEO />
+
+      <Title order={1} className="fade-in-text">
+        PinSave Home Page
+      </Title>
+
+      <Box
+        mx="auto"
+        mt={20}
+        sx={{
+          maxWidth: 1500,
+          gap: 20,
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(220px, 5fr))",
+          gridTemplateRows: "masonry",
+        }}
+      >
+        {posts.map((post: PostReduced) => {
+          return (
+            <Center key={post.tokenId}>
+              <PostCard post={post} />
+            </Center>
+          );
+        })}
+      </Box>
+      <div>
+        {hasNextPage ? (
+          <Center mt={20}>
+            <Button>
+              <Link href={`/page/${page + 1}`}>Next Page</Link>
+            </Button>
+          </Center>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default Home;
+
+export const getStaticPaths = (async () => {
+  const { address, abi } = getContractInfo();
+  const provider = new JsonRpcProvider(
+    "https://andromeda.metis.io/?owner=1088"
+  );
+  const contract: Contract = new Contract(address, abi, provider);
+  const totalSupply: number = Number(await contract.totalSupply());
+
+  const pages: number = Math.floor(totalSupply / 24);
+
+  const paths = Array.from({ length: pages }, (_, i) => ({
+    params: { page: String(pages - i) },
+  }));
+
+  return {
+    paths: paths,
+    fallback: "blocking",
+  };
+}) satisfies GetStaticPaths;
+
+export const getStaticProps = async (context: { params: { page: string } }) => {
+  const page: number = Number(context.params.page);
+  const { address, abi } = getContractInfo();
+  const provider = new JsonRpcProvider(
+    "https://metis-mainnet.public.blastapi.io"
+  );
+  const contract: Contract = new Contract(address, abi, provider);
+
+  const totalSupply: number = Number(await contract.totalSupply());
+  const posts: PostReduced[] = [];
+
+  const indexStart = page * 24 + 1;
+  const indexEndNominal = indexStart + 23;
+
+  let hasNextPage = true;
+
+  let indexEnd = indexEndNominal;
+  if (indexEndNominal >= totalSupply) {
+    indexEnd = totalSupply;
+    hasNextPage = false;
+  }
+
+  for (let i = indexStart; i <= indexEnd; i++) {
+    const result = await contract.getPostCid(i);
+    const post = await fetchDecodedPost(result, 150);
+    posts.push({ image: post.image, name: post.name, tokenId: i });
+  }
+  return {
+    props: {
+      posts,
+      hasNextPage,
+      page,
+    },
+    revalidate: 60,
+  };
+};

From b718eb6f978d04a22ecd96914e323f0584651114 Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Wed, 5 Feb 2025 21:07:11 +0300
Subject: [PATCH 10/17] improving pagination

---
 packages/frontend/pages/page/[page].tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/pages/page/[page].tsx b/packages/frontend/pages/page/[page].tsx
index b3a8753..c6600a8 100644
--- a/packages/frontend/pages/page/[page].tsx
+++ b/packages/frontend/pages/page/[page].tsx
@@ -26,7 +26,7 @@ const Home: NextPage<Props> = ({ posts, hasNextPage, page }) => {
       <PageSEO />
 
       <Title order={1} className="fade-in-text">
-        PinSave Home Page
+        PinSave Page {page}
       </Title>
 
       <Box
@@ -51,11 +51,24 @@ const Home: NextPage<Props> = ({ posts, hasNextPage, page }) => {
       <div>
         {hasNextPage ? (
           <Center mt={20}>
+            <Button mr={10}>
+              <Link href={page === 1 ? "/" : `/page/${page - 1}`}>
+                Previous Page
+              </Link>
+            </Button>
             <Button>
               <Link href={`/page/${page + 1}`}>Next Page</Link>
             </Button>
           </Center>
-        ) : null}
+        ) : (
+          <Center mt={20}>
+            <Button>
+              <Link href={page === 1 ? "/" : `/page/${page - 1}`}>
+                Previous Page
+              </Link>
+            </Button>
+          </Center>
+        )}
       </div>
     </div>
   );

From 1c3a783ca805b1193539eef4ef0f7bd0635e2a3b Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Fri, 7 Feb 2025 22:01:45 +0300
Subject: [PATCH 11/17] fixing pagination

---
 packages/frontend/pages/index.tsx       |  6 +++---
 packages/frontend/pages/page/[page].tsx | 22 +++++++++-------------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/pages/index.tsx b/packages/frontend/pages/index.tsx
index eb1bb92..1117742 100644
--- a/packages/frontend/pages/index.tsx
+++ b/packages/frontend/pages/index.tsx
@@ -45,9 +45,9 @@ const Home: NextPage<Props> = ({ posts }) => {
         })}
       </Box>
       <Center mt={20}>
-        <Button>
-          <Link href={"/page/1"}>Next Page</Link>
-        </Button>
+        <Link href={"/page/1"}>
+          <Button>Next Page</Button>
+        </Link>
       </Center>
     </div>
   );
diff --git a/packages/frontend/pages/page/[page].tsx b/packages/frontend/pages/page/[page].tsx
index c6600a8..35c496b 100644
--- a/packages/frontend/pages/page/[page].tsx
+++ b/packages/frontend/pages/page/[page].tsx
@@ -51,22 +51,18 @@ const Home: NextPage<Props> = ({ posts, hasNextPage, page }) => {
       <div>
         {hasNextPage ? (
           <Center mt={20}>
-            <Button mr={10}>
-              <Link href={page === 1 ? "/" : `/page/${page - 1}`}>
-                Previous Page
-              </Link>
-            </Button>
-            <Button>
-              <Link href={`/page/${page + 1}`}>Next Page</Link>
-            </Button>
+            <Link href={page === 1 ? "/" : `/page/${page - 1}`}>
+              <Button mr={10}>Previous Page</Button>
+            </Link>
+            <Link href={`/page/${page + 1}`}>
+              <Button>Next Page</Button>
+            </Link>
           </Center>
         ) : (
           <Center mt={20}>
-            <Button>
-              <Link href={page === 1 ? "/" : `/page/${page - 1}`}>
-                Previous Page
-              </Link>
-            </Button>
+            <Link href={page === 1 ? "/" : `/page/${page - 1}`}>
+              <Button>Previous Page</Button>
+            </Link>
           </Center>
         )}
       </div>

From 850cdb82d1ca7d6c2861f47ae45da1f3d78fc056 Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Sun, 16 Feb 2025 07:41:35 +0300
Subject: [PATCH 12/17] optimizing data

---
 packages/frontend/LICENSE                     |  2 +-
 .../frontend/components/UploadForm/index.tsx  |  2 +-
 packages/frontend/context/index.tsx           | 33 ++++++++
 packages/frontend/environment.d.ts            |  4 +-
 packages/frontend/next.config.js              |  3 +-
 packages/frontend/pages/_app.tsx              |  5 +-
 packages/frontend/pages/page/[page].tsx       | 18 ++++-
 packages/frontend/pages/post/[id].tsx         | 76 ++++++++++++++-----
 packages/frontend/pages/profile/[address].tsx |  6 +-
 packages/frontend/services/fetchCid.ts        | 19 +++--
 packages/frontend/tsconfig.json               |  1 +
 11 files changed, 129 insertions(+), 40 deletions(-)
 create mode 100644 packages/frontend/context/index.tsx

diff --git a/packages/frontend/LICENSE b/packages/frontend/LICENSE
index 8b4dfcb..5824134 100644
--- a/packages/frontend/LICENSE
+++ b/packages/frontend/LICENSE
@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright (c) Pavel Fedotov 2024
+Copyright (c) Pavel Fedotov 2025
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/packages/frontend/components/UploadForm/index.tsx b/packages/frontend/components/UploadForm/index.tsx
index 8045eae..77a1e09 100644
--- a/packages/frontend/components/UploadForm/index.tsx
+++ b/packages/frontend/components/UploadForm/index.tsx
@@ -109,7 +109,7 @@ const UploadForm = () => {
   const config = createConfig({
     chains: [mainnet],
     transports: {
-      [mainnet.id]: http(process.env.NEXT_PUBLIC_ALCHEMY),
+      [mainnet.id]: http(process.env.NEXT_PUBLIC_ALCHEMY_MAINNET),
     },
   });
 
diff --git a/packages/frontend/context/index.tsx b/packages/frontend/context/index.tsx
new file mode 100644
index 0000000..aa1792a
--- /dev/null
+++ b/packages/frontend/context/index.tsx
@@ -0,0 +1,33 @@
+import { createContext, useContext, PropsWithChildren, useMemo } from "react";
+
+import { PinataSDK } from "pinata";
+
+type pinataContextType = {
+  pinata: PinataSDK;
+};
+
+export const PinataContext = createContext<pinataContextType | undefined>(
+  undefined
+);
+
+export const PinataProvider = ({ children }: PropsWithChildren<{}>) => {
+  const pinata = new PinataSDK({
+    pinataJwt: process.env.NEXT_PUBLIC_PINATA_JWT,
+    pinataGateway: process.env.NEXT_PUBLIC_GATEWAY_URL,
+  });
+
+  const pinataProviderValue = useMemo(() => ({ pinata }), [pinata]);
+  return (
+    <PinataContext.Provider value={pinataProviderValue}>
+      {children}
+    </PinataContext.Provider>
+ );
+};
+
+export const usePinatasContext = () => {
+  const context = useContext(PinataContext);
+  if (!context) {
+    throw new Error("PinataContext must be used inside the PinataProvider");
+  }
+  return context;
+};
diff --git a/packages/frontend/environment.d.ts b/packages/frontend/environment.d.ts
index 696894f..3b42694 100644
--- a/packages/frontend/environment.d.ts
+++ b/packages/frontend/environment.d.ts
@@ -6,7 +6,9 @@ declare global {
       NEXT_PUBLIC_PINATA_JWT: string;
       NEXT_PUBLIC_GATEWAY_URL: string;
       NEXT_PUBLIC_WALLETCONNECT_ID: string;
-      NEXT_PUBLIC_ALCHEMY: string;
+      NEXT_PUBLIC_ALCHEMY_MAINNET: string;
+      NEXT_PUBLIC_ALCHEMY_METIS_FIRST: string;
+      NEXT_PUBLIC_ALCHEMY_METIS_SECOND: string;
       ENV: "test" | "dev" | "prod";
     }
   }
diff --git a/packages/frontend/next.config.js b/packages/frontend/next.config.js
index 8f25421..7b4b84e 100644
--- a/packages/frontend/next.config.js
+++ b/packages/frontend/next.config.js
@@ -18,8 +18,7 @@ const nextConfig = {
       },
       {
         protocol: "https",
-        hostname: "ipfs.io",
-        pathname: "/ipfs/**",
+        hostname: "**.mypinata.cloud/**",
       },
     ],
     minimumCacheTTL: 31536000,
diff --git a/packages/frontend/pages/_app.tsx b/packages/frontend/pages/_app.tsx
index 225d07d..fe4f7aa 100644
--- a/packages/frontend/pages/_app.tsx
+++ b/packages/frontend/pages/_app.tsx
@@ -11,6 +11,7 @@ import { useMemo } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
 import { Chain, metis } from "wagmi/chains";
+// import { PinataProvider } from "context";
 
 import LayoutApp from "@/components/Layout";
 
@@ -26,7 +27,7 @@ export interface MyWalletOptions {
 }
 
 const config = getDefaultConfig({
-  appName: "Pin Save",
+  appName: "PinSave",
   projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_ID,
   chains: [metis],
   ssr: true,
@@ -56,9 +57,11 @@ function MyApp({ Component, pageProps }: NextAppProps) {
         <WagmiProvider config={config}>
           <NotificationsProvider>
             <RainbowKitProvider>
+              {/* <PinataProvider> */}
               <LayoutApp>
                 <Component {...pageProps} />
               </LayoutApp>
+              {/* </PinataProvider> */}
             </RainbowKitProvider>
           </NotificationsProvider>
         </WagmiProvider>
diff --git a/packages/frontend/pages/page/[page].tsx b/packages/frontend/pages/page/[page].tsx
index 35c496b..10575a1 100644
--- a/packages/frontend/pages/page/[page].tsx
+++ b/packages/frontend/pages/page/[page].tsx
@@ -94,10 +94,19 @@ export const getStaticPaths = (async () => {
 
 export const getStaticProps = async (context: { params: { page: string } }) => {
   const page: number = Number(context.params.page);
+
+  await new Promise((resolve) => setTimeout(resolve, 1000 * page));
+
   const { address, abi } = getContractInfo();
-  const provider = new JsonRpcProvider(
-    "https://metis-mainnet.public.blastapi.io"
-  );
+
+  let providerString;
+  if (page % 2 === 0) {
+    providerString = "https://metis-mainnet.public.blastapi.io";
+  } else {
+    providerString = process.env.NEXT_PUBLIC_ALCHEMY_METIS_SECOND;
+  }
+  const provider = new JsonRpcProvider(providerString);
+
   const contract: Contract = new Contract(address, abi, provider);
 
   const totalSupply: number = Number(await contract.totalSupply());
@@ -115,8 +124,9 @@ export const getStaticProps = async (context: { params: { page: string } }) => {
   }
 
   for (let i = indexStart; i <= indexEnd; i++) {
-    const result = await contract.getPostCid(i);
+    const result: string = await contract.getPostCid(i);
     const post = await fetchDecodedPost(result, 150);
+    await new Promise((resolve) => setTimeout(resolve, 100));
     posts.push({ image: post.image, name: post.name, tokenId: i });
   }
   return {
diff --git a/packages/frontend/pages/post/[id].tsx b/packages/frontend/pages/post/[id].tsx
index 0bef801..2825d03 100644
--- a/packages/frontend/pages/post/[id].tsx
+++ b/packages/frontend/pages/post/[id].tsx
@@ -1,4 +1,4 @@
-import type { GetStaticPaths, NextPage } from "next";
+import type { NextPage } from "next";
 import { Contract, JsonRpcProvider } from "ethers";
 import { ActionIcon, SimpleGrid } from "@mantine/core";
 import { NextRouter, useRouter } from "next/router";
@@ -9,24 +9,53 @@ import DisplayMedia from "@/components/Post/DisplayMedia";
 import { PageSEO } from "@/components/SEO";
 import { fetchDecodedPost } from "@/services/fetchCid";
 import { getContractInfo } from "@/utils/contracts";
+//import { usePinatasContext } from "@/context/index";
+import { useEffect, useState } from "react";
 
 interface Props {
   post: Post;
 }
 
+type FullPost = {
+  image: string;
+  name: string;
+  description: string;
+  tokenId: number;
+  owner: string;
+  author: string;
+};
+
 const PostPage: NextPage<Props> = ({ post }) => {
   const router: NextRouter = useRouter();
   const postId: string = String(post.tokenId);
 
   const tag: string = `Metis: ${postId}`;
 
+  const [postFull, setPost] = useState<FullPost>();
+
+  useEffect(() => {
+    async function fetchData() {
+      const item = await fetchDecodedPost(post.cid, 500);
+      console.log(item);
+      setPost({
+        image: item.image,
+        name: item.name,
+        description: item.description,
+        owner: post.owner,
+        author: post.author,
+        tokenId: post.tokenId,
+      });
+    }
+    fetchData();
+  }, [post]);
+
   return (
     <div>
       <PageSEO
-        title={`Pin Save Post ${tag}`}
-        description={`Pin Save Post ${tag}`}
+        title={`PinSave Post ${tag}`}
+        description={`PinSave Post ${tag}`}
       />
-      {post && (
+      {postFull && (
         <div>
           <ActionIcon
             onClick={() => router.back()}
@@ -44,8 +73,8 @@ const PostPage: NextPage<Props> = ({ post }) => {
               { maxWidth: "md", cols: 1, spacing: "md" },
             ]}
           >
-            <DisplayMedia post={post} />
-            <MediaDetails post={post} />
+            <DisplayMedia post={postFull} />
+            <MediaDetails post={postFull} />
           </SimpleGrid>
         </div>
       )}
@@ -55,8 +84,9 @@ const PostPage: NextPage<Props> = ({ post }) => {
 
 export default PostPage;
 
-export const getStaticPaths = (async () => {
+export const getStaticPaths = async () => {
   const { address, abi } = getContractInfo();
+
   const provider = new JsonRpcProvider(
     "https://andromeda.metis.io/?owner=1088"
   );
@@ -71,16 +101,16 @@ export const getStaticPaths = (async () => {
     paths: paths,
     fallback: "blocking",
   };
-}) satisfies GetStaticPaths;
+};
 
 type Post = {
-  image: string;
-  name: string;
-  description: string;
   tokenId: number;
   owner: string;
   author: string;
-  totalSupply: number;
+  cid: string;
+  /*   name: string;
+  description: string;
+  image: string; */
 };
 
 export const getStaticProps = async (context: { params: { id: string } }) => {
@@ -88,23 +118,27 @@ export const getStaticProps = async (context: { params: { id: string } }) => {
     const tokenId: number = Number(context.params.id);
 
     const { address, abi } = getContractInfo();
-    const provider = new JsonRpcProvider(
-      "https://metis-mainnet.public.blastapi.io"
-    );
-    const contract: Contract = new Contract(address, abi, provider);
 
-    const totalSupply: number = Number(await contract.totalSupply());
+    let providerString;
+
+    if (tokenId % 2 === 0) {
+      providerString = process.env.NEXT_PUBLIC_ALCHEMY_METIS_FIRST;
+    } else {
+      providerString = process.env.NEXT_PUBLIC_ALCHEMY_METIS_SECOND;
+    }
+
+    const provider: JsonRpcProvider = new JsonRpcProvider(providerString);
+    const contract: Contract = new Contract(address, abi, provider);
 
-    const result = await contract.getPostCid(tokenId);
-    const item = await fetchDecodedPost(result, 500);
+    const cid: string = await contract.getPostCid(tokenId);
+    //const item = await fetchDecodedPost(cid, 500);
     const owner: string = await contract.getPostOwner(tokenId);
     const postAuthor: string = await contract.getPostAuthor(tokenId);
     const post: Post = {
-      totalSupply: totalSupply,
       tokenId: tokenId,
       owner: owner,
       author: postAuthor,
-      ...item,
+      cid: cid,
     };
 
     return {
diff --git a/packages/frontend/pages/profile/[address].tsx b/packages/frontend/pages/profile/[address].tsx
index 1831323..3b1776b 100644
--- a/packages/frontend/pages/profile/[address].tsx
+++ b/packages/frontend/pages/profile/[address].tsx
@@ -24,7 +24,7 @@ function Post() {
   const config = createConfig({
     chains: [mainnet],
     transports: {
-      [mainnet.id]: http(process.env.NEXT_PUBLIC_ALCHEMY),
+      [mainnet.id]: http(process.env.NEXT_PUBLIC_ALCHEMY_MAINNET),
     },
   });
 
@@ -43,8 +43,8 @@ function Post() {
   return (
     <div>
       <PageSEO
-        title={`Pin Save Profile Page ${address}`}
-        description={`Pin Save decentralized Profile Page ${address}`}
+        title={`PinSave Profile Page ${address}`}
+        description={`PinSave decentralized Profile Page ${address}`}
       />
 
       <Box sx={{ maxWidth: 1200, textAlign: "center" }} mx="auto">
diff --git a/packages/frontend/services/fetchCid.ts b/packages/frontend/services/fetchCid.ts
index 2941540..e8aa3d2 100644
--- a/packages/frontend/services/fetchCid.ts
+++ b/packages/frontend/services/fetchCid.ts
@@ -1,7 +1,7 @@
-import { parseCid } from "@/services/parseCid";
-
 import { PinataSDK } from "pinata";
 
+import { parseCid } from "@/services/parseCid";
+
 export type ObjectJsonMetadata = {
   name: string;
   description: string;
@@ -31,12 +31,15 @@ export async function fetchMetadataPinata(cidMetadata: string) {
 
 export async function fetchImagePinata(
   cidImage: string,
-  imageResolution: number
+  imageResolution: number,
+  gateway?: string,
+  gatewayKey?: string
 ) {
   const cid = parseCid(cidImage);
   const pinata = new PinataSDK({
     pinataJwt: process.env.NEXT_PUBLIC_PINATA_JWT,
-    pinataGateway: process.env.NEXT_PUBLIC_GATEWAY_URL,
+    pinataGateway: gateway ?? process.env.NEXT_PUBLIC_GATEWAY_URL,
+    pinataGatewayKey: gatewayKey ?? "",
   });
 
   const url = await pinata.gateways
@@ -55,7 +58,9 @@ export async function fetchImagePinata(
 
 export async function fetchDecodedPost(
   cidMetadata: string,
-  imageResolution: number
+  imageResolution: number,
+  gateway?: string,
+  gatewayKey?: string
 ) {
   try {
     const objectJsonMetadata: ObjectJsonMetadata =
@@ -63,7 +68,9 @@ export async function fetchDecodedPost(
     try {
       const decodedImage: string = await fetchImagePinata(
         objectJsonMetadata.image,
-        imageResolution
+        imageResolution,
+        gateway,
+        gatewayKey
       );
       const output = {
         ...objectJsonMetadata,
diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json
index fc0347b..2e5544d 100644
--- a/packages/frontend/tsconfig.json
+++ b/packages/frontend/tsconfig.json
@@ -17,6 +17,7 @@
     "baseUrl": ".",
     "paths": {
       "@/components/*": ["components/*"],
+      "@/context/*": ["context/*"],
       "@/contracts/*": ["contracts/*"],
       "@/utils/*": ["utils/*"],
       "@/services/*": ["services/*"],

From 89403f28639a47796b3ac2731f28179d3918b6a5 Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Sun, 16 Feb 2025 07:53:11 +0300
Subject: [PATCH 13/17] fixing build

---
 packages/frontend/pages/post/[id].tsx | 98 ++++++++-------------------
 1 file changed, 29 insertions(+), 69 deletions(-)

diff --git a/packages/frontend/pages/post/[id].tsx b/packages/frontend/pages/post/[id].tsx
index 2825d03..317f219 100644
--- a/packages/frontend/pages/post/[id].tsx
+++ b/packages/frontend/pages/post/[id].tsx
@@ -12,6 +12,13 @@ import { getContractInfo } from "@/utils/contracts";
 //import { usePinatasContext } from "@/context/index";
 import { useEffect, useState } from "react";
 
+type Post = {
+  tokenId: number;
+  owner: string;
+  author: string;
+  cid: string;
+};
+
 interface Props {
   post: Post;
 }
@@ -25,9 +32,9 @@ type FullPost = {
   author: string;
 };
 
-const PostPage: NextPage<Props> = ({ post }) => {
+const PostPage: NextPage<Props> = () => {
   const router: NextRouter = useRouter();
-  const postId: string = String(post.tokenId);
+  const postId: string = String(router.query.id);
 
   const tag: string = `Metis: ${postId}`;
 
@@ -35,6 +42,25 @@ const PostPage: NextPage<Props> = ({ post }) => {
 
   useEffect(() => {
     async function fetchData() {
+      const { address, abi } = getContractInfo();
+
+      let providerString;
+
+      providerString = process.env.NEXT_PUBLIC_ALCHEMY_METIS_FIRST;
+
+      const provider: JsonRpcProvider = new JsonRpcProvider(providerString);
+      const contract: Contract = new Contract(address, abi, provider);
+
+      const cid: string = await contract.getPostCid(postId);
+      const owner: string = await contract.getPostOwner(postId);
+      const postAuthor: string = await contract.getPostAuthor(postId);
+      const post: Post = {
+        tokenId: Number(postId),
+        owner: owner,
+        author: postAuthor,
+        cid: cid,
+      };
+
       const item = await fetchDecodedPost(post.cid, 500);
       console.log(item);
       setPost({
@@ -47,7 +73,7 @@ const PostPage: NextPage<Props> = ({ post }) => {
       });
     }
     fetchData();
-  }, [post]);
+  }, []);
 
   return (
     <div>
@@ -83,69 +109,3 @@ const PostPage: NextPage<Props> = ({ post }) => {
 };
 
 export default PostPage;
-
-export const getStaticPaths = async () => {
-  const { address, abi } = getContractInfo();
-
-  const provider = new JsonRpcProvider(
-    "https://andromeda.metis.io/?owner=1088"
-  );
-  const contract: Contract = new Contract(address, abi, provider);
-  const totalSupply: number = Number(await contract.totalSupply());
-
-  const paths = Array.from({ length: totalSupply }, (_, i) => ({
-    params: { id: String(totalSupply - i) },
-  }));
-
-  return {
-    paths: paths,
-    fallback: "blocking",
-  };
-};
-
-type Post = {
-  tokenId: number;
-  owner: string;
-  author: string;
-  cid: string;
-  /*   name: string;
-  description: string;
-  image: string; */
-};
-
-export const getStaticProps = async (context: { params: { id: string } }) => {
-  if (context) {
-    const tokenId: number = Number(context.params.id);
-
-    const { address, abi } = getContractInfo();
-
-    let providerString;
-
-    if (tokenId % 2 === 0) {
-      providerString = process.env.NEXT_PUBLIC_ALCHEMY_METIS_FIRST;
-    } else {
-      providerString = process.env.NEXT_PUBLIC_ALCHEMY_METIS_SECOND;
-    }
-
-    const provider: JsonRpcProvider = new JsonRpcProvider(providerString);
-    const contract: Contract = new Contract(address, abi, provider);
-
-    const cid: string = await contract.getPostCid(tokenId);
-    //const item = await fetchDecodedPost(cid, 500);
-    const owner: string = await contract.getPostOwner(tokenId);
-    const postAuthor: string = await contract.getPostAuthor(tokenId);
-    const post: Post = {
-      tokenId: tokenId,
-      owner: owner,
-      author: postAuthor,
-      cid: cid,
-    };
-
-    return {
-      props: {
-        post,
-      },
-      revalidate: 20,
-    };
-  }
-};

From 240a7dbe93b3f3eadd4995e6d4af0aa142b67654 Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Sun, 16 Feb 2025 08:11:37 +0300
Subject: [PATCH 14/17] fixing build

---
 packages/frontend/pages/page/[page].tsx | 4 ++--
 packages/frontend/pages/post/[id].tsx   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/pages/page/[page].tsx b/packages/frontend/pages/page/[page].tsx
index 10575a1..edfb3bf 100644
--- a/packages/frontend/pages/page/[page].tsx
+++ b/packages/frontend/pages/page/[page].tsx
@@ -95,13 +95,13 @@ export const getStaticPaths = (async () => {
 export const getStaticProps = async (context: { params: { page: string } }) => {
   const page: number = Number(context.params.page);
 
-  await new Promise((resolve) => setTimeout(resolve, 1000 * page));
+  await new Promise((resolve) => setTimeout(resolve, 100 * page));
 
   const { address, abi } = getContractInfo();
 
   let providerString;
   if (page % 2 === 0) {
-    providerString = "https://metis-mainnet.public.blastapi.io";
+    providerString = process.env.NEXT_PUBLIC_ALCHEMY_METIS_FIRST;
   } else {
     providerString = process.env.NEXT_PUBLIC_ALCHEMY_METIS_SECOND;
   }
diff --git a/packages/frontend/pages/post/[id].tsx b/packages/frontend/pages/post/[id].tsx
index 317f219..a168416 100644
--- a/packages/frontend/pages/post/[id].tsx
+++ b/packages/frontend/pages/post/[id].tsx
@@ -73,7 +73,7 @@ const PostPage: NextPage<Props> = () => {
       });
     }
     fetchData();
-  }, []);
+  }, [postId]);
 
   return (
     <div>

From 87d40aee766b148c3b77d7d4833570232816285e Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Sun, 16 Feb 2025 20:22:56 +0300
Subject: [PATCH 15/17] fixing build with tanstack hooks

---
 packages/frontend/context/index.tsx           | 33 ----------
 packages/frontend/hooks/api/posts/index.ts    |  2 +-
 packages/frontend/hooks/api/posts/queries.ts  |  2 +-
 packages/frontend/pages/_app.tsx              |  4 --
 .../frontend/pages/api/metis/posts/[id].tsx   |  1 +
 packages/frontend/pages/post/[id].tsx         | 60 ++-----------------
 packages/frontend/services/fetchCid.ts        | 15 ++---
 7 files changed, 13 insertions(+), 104 deletions(-)
 delete mode 100644 packages/frontend/context/index.tsx

diff --git a/packages/frontend/context/index.tsx b/packages/frontend/context/index.tsx
deleted file mode 100644
index aa1792a..0000000
--- a/packages/frontend/context/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { createContext, useContext, PropsWithChildren, useMemo } from "react";
-
-import { PinataSDK } from "pinata";
-
-type pinataContextType = {
-  pinata: PinataSDK;
-};
-
-export const PinataContext = createContext<pinataContextType | undefined>(
-  undefined
-);
-
-export const PinataProvider = ({ children }: PropsWithChildren<{}>) => {
-  const pinata = new PinataSDK({
-    pinataJwt: process.env.NEXT_PUBLIC_PINATA_JWT,
-    pinataGateway: process.env.NEXT_PUBLIC_GATEWAY_URL,
-  });
-
-  const pinataProviderValue = useMemo(() => ({ pinata }), [pinata]);
-  return (
-    <PinataContext.Provider value={pinataProviderValue}>
-      {children}
-    </PinataContext.Provider>
- );
-};
-
-export const usePinatasContext = () => {
-  const context = useContext(PinataContext);
-  if (!context) {
-    throw new Error("PinataContext must be used inside the PinataProvider");
-  }
-  return context;
-};
diff --git a/packages/frontend/hooks/api/posts/index.ts b/packages/frontend/hooks/api/posts/index.ts
index 87c26a2..6f84e88 100644
--- a/packages/frontend/hooks/api/posts/index.ts
+++ b/packages/frontend/hooks/api/posts/index.ts
@@ -18,7 +18,7 @@ export const usePosts = () => {
   });
 };
 
-export const usePost = (id: string, enabled: boolean) => {
+export const usePost = (id: number, enabled: boolean) => {
   return useQuery({
     queryKey: [id],
     queryFn: () => fetchPost(id),
diff --git a/packages/frontend/hooks/api/posts/queries.ts b/packages/frontend/hooks/api/posts/queries.ts
index 4e01968..bbd19ba 100644
--- a/packages/frontend/hooks/api/posts/queries.ts
+++ b/packages/frontend/hooks/api/posts/queries.ts
@@ -12,7 +12,7 @@ export const fetchPosts = async ({
   }
 };
 
-export const fetchPost = async (id: string) => {
+export const fetchPost = async (id: number) => {
   try {
     return await fetcher(`/api/metis/posts/${id}`);
   } catch (error) {
diff --git a/packages/frontend/pages/_app.tsx b/packages/frontend/pages/_app.tsx
index fe4f7aa..a224ac6 100644
--- a/packages/frontend/pages/_app.tsx
+++ b/packages/frontend/pages/_app.tsx
@@ -3,7 +3,6 @@ import "@rainbow-me/rainbowkit/styles.css";
 
 import type { NextComponentType } from "next";
 import type AppProps from "next/app";
-
 import { MantineProvider } from "@mantine/core";
 import { NotificationsProvider } from "@mantine/notifications";
 import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
@@ -11,7 +10,6 @@ import { useMemo } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
 import { Chain, metis } from "wagmi/chains";
-// import { PinataProvider } from "context";
 
 import LayoutApp from "@/components/Layout";
 
@@ -57,11 +55,9 @@ function MyApp({ Component, pageProps }: NextAppProps) {
         <WagmiProvider config={config}>
           <NotificationsProvider>
             <RainbowKitProvider>
-              {/* <PinataProvider> */}
               <LayoutApp>
                 <Component {...pageProps} />
               </LayoutApp>
-              {/* </PinataProvider> */}
             </RainbowKitProvider>
           </NotificationsProvider>
         </WagmiProvider>
diff --git a/packages/frontend/pages/api/metis/posts/[id].tsx b/packages/frontend/pages/api/metis/posts/[id].tsx
index 482eae7..01b94e6 100644
--- a/packages/frontend/pages/api/metis/posts/[id].tsx
+++ b/packages/frontend/pages/api/metis/posts/[id].tsx
@@ -2,6 +2,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { Contract, JsonRpcProvider } from "ethers";
 
 import { ObjectJsonMetadata, fetchDecodedPost } from "@/services/fetchCid";
+
 import { getContractInfo } from "@/utils/contracts";
 
 export default async function handler(
diff --git a/packages/frontend/pages/post/[id].tsx b/packages/frontend/pages/post/[id].tsx
index a168416..74989a9 100644
--- a/packages/frontend/pages/post/[id].tsx
+++ b/packages/frontend/pages/post/[id].tsx
@@ -1,5 +1,4 @@
 import type { NextPage } from "next";
-import { Contract, JsonRpcProvider } from "ethers";
 import { ActionIcon, SimpleGrid } from "@mantine/core";
 import { NextRouter, useRouter } from "next/router";
 import { ArrowLeft } from "tabler-icons-react";
@@ -7,10 +6,7 @@ import { ArrowLeft } from "tabler-icons-react";
 import MediaDetails from "@/components/Post/MediaDetails";
 import DisplayMedia from "@/components/Post/DisplayMedia";
 import { PageSEO } from "@/components/SEO";
-import { fetchDecodedPost } from "@/services/fetchCid";
-import { getContractInfo } from "@/utils/contracts";
-//import { usePinatasContext } from "@/context/index";
-import { useEffect, useState } from "react";
+import { usePost } from "@/hooks/api";
 
 type Post = {
   tokenId: number;
@@ -23,57 +19,13 @@ interface Props {
   post: Post;
 }
 
-type FullPost = {
-  image: string;
-  name: string;
-  description: string;
-  tokenId: number;
-  owner: string;
-  author: string;
-};
-
 const PostPage: NextPage<Props> = () => {
   const router: NextRouter = useRouter();
-  const postId: string = String(router.query.id);
+  const postId: number = Number(router.query.id);
 
   const tag: string = `Metis: ${postId}`;
 
-  const [postFull, setPost] = useState<FullPost>();
-
-  useEffect(() => {
-    async function fetchData() {
-      const { address, abi } = getContractInfo();
-
-      let providerString;
-
-      providerString = process.env.NEXT_PUBLIC_ALCHEMY_METIS_FIRST;
-
-      const provider: JsonRpcProvider = new JsonRpcProvider(providerString);
-      const contract: Contract = new Contract(address, abi, provider);
-
-      const cid: string = await contract.getPostCid(postId);
-      const owner: string = await contract.getPostOwner(postId);
-      const postAuthor: string = await contract.getPostAuthor(postId);
-      const post: Post = {
-        tokenId: Number(postId),
-        owner: owner,
-        author: postAuthor,
-        cid: cid,
-      };
-
-      const item = await fetchDecodedPost(post.cid, 500);
-      console.log(item);
-      setPost({
-        image: item.image,
-        name: item.name,
-        description: item.description,
-        owner: post.owner,
-        author: post.author,
-        tokenId: post.tokenId,
-      });
-    }
-    fetchData();
-  }, [postId]);
+  const { data, isFetched } = usePost(postId, !!postId);
 
   return (
     <div>
@@ -81,7 +33,7 @@ const PostPage: NextPage<Props> = () => {
         title={`PinSave Post ${tag}`}
         description={`PinSave Post ${tag}`}
       />
-      {postFull && (
+      {isFetched && (
         <div>
           <ActionIcon
             onClick={() => router.back()}
@@ -99,8 +51,8 @@ const PostPage: NextPage<Props> = () => {
               { maxWidth: "md", cols: 1, spacing: "md" },
             ]}
           >
-            <DisplayMedia post={postFull} />
-            <MediaDetails post={postFull} />
+            <DisplayMedia post={data} />
+            <MediaDetails post={data} />
           </SimpleGrid>
         </div>
       )}
diff --git a/packages/frontend/services/fetchCid.ts b/packages/frontend/services/fetchCid.ts
index e8aa3d2..c8288d6 100644
--- a/packages/frontend/services/fetchCid.ts
+++ b/packages/frontend/services/fetchCid.ts
@@ -31,15 +31,12 @@ export async function fetchMetadataPinata(cidMetadata: string) {
 
 export async function fetchImagePinata(
   cidImage: string,
-  imageResolution: number,
-  gateway?: string,
-  gatewayKey?: string
+  imageResolution: number
 ) {
   const cid = parseCid(cidImage);
   const pinata = new PinataSDK({
     pinataJwt: process.env.NEXT_PUBLIC_PINATA_JWT,
-    pinataGateway: gateway ?? process.env.NEXT_PUBLIC_GATEWAY_URL,
-    pinataGatewayKey: gatewayKey ?? "",
+    pinataGateway: process.env.NEXT_PUBLIC_GATEWAY_URL,
   });
 
   const url = await pinata.gateways
@@ -58,9 +55,7 @@ export async function fetchImagePinata(
 
 export async function fetchDecodedPost(
   cidMetadata: string,
-  imageResolution: number,
-  gateway?: string,
-  gatewayKey?: string
+  imageResolution: number
 ) {
   try {
     const objectJsonMetadata: ObjectJsonMetadata =
@@ -68,9 +63,7 @@ export async function fetchDecodedPost(
     try {
       const decodedImage: string = await fetchImagePinata(
         objectJsonMetadata.image,
-        imageResolution,
-        gateway,
-        gatewayKey
+        imageResolution
       );
       const output = {
         ...objectJsonMetadata,

From ab5149a445da6657f0baff1745d27352b15ccfbf Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Sat, 22 Feb 2025 05:18:11 +0300
Subject: [PATCH 16/17] fixing seo

---
 packages/frontend/pages/upload.tsx |  4 ++--
 packages/hardhat/hardhat.config.js | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/pages/upload.tsx b/packages/frontend/pages/upload.tsx
index b67c6f8..d88e356 100644
--- a/packages/frontend/pages/upload.tsx
+++ b/packages/frontend/pages/upload.tsx
@@ -7,8 +7,8 @@ const Upload: NextPage = () => {
   return (
     <div>
       <PageSEO
-        title={`Pin Save Upload Post Page`}
-        description={`Pin Save upload your decentralized Post Page`}
+        title={`PinSave Upload Post Page`}
+        description={`PinSave upload your decentralized Post Page`}
       />
       <UploadForm />
     </div>
diff --git a/packages/hardhat/hardhat.config.js b/packages/hardhat/hardhat.config.js
index 8cd36e2..eb06c86 100644
--- a/packages/hardhat/hardhat.config.js
+++ b/packages/hardhat/hardhat.config.js
@@ -29,53 +29,53 @@ module.exports = {
   networks: {
     mumbai: {
       url: `https://polygon-mumbai.g.alchemy.com/v2/${process.env.ALCHEMY_API_KEY}`,
-      accounts: [process.env.PRIVATE_KEY, process.env.PRIVATE_KEY_2],
+      accounts: [process.env.PRIVATE_KEY],
       chainId: 80001,
       gas: 8000000,
       gasPrice: 1000000000,
     },
     l16: {
       url: "https://rpc.l16.lukso.network",
-      accounts: [process.env.PRIVATE_KEY, process.env.PRIVATE_KEY_2],
+      accounts: [process.env.PRIVATE_KEY],
       chainId: 2828,
       gas: 500000000000000,
       gasPrice: 300000000000,
     },
     l14: {
       url: "https://rpc.l14.lukso.network",
-      accounts: [process.env.PRIVATE_KEY, process.env.PRIVATE_KEY_2],
+      accounts: [process.env.PRIVATE_KEY],
       chainId: 22,
       gas: 50000000,
       gasPrice: 1000000000000,
     },
     evmos: {
       url: "https://eth.bd.evmos.dev:8545",
-      accounts: [process.env.PRIVATE_KEY, process.env.PRIVATE_KEY_2],
+      accounts: [process.env.PRIVATE_KEY],
       chainId: 9000,
     },
     fantom: {
       url: "https://rpc.ankr.com/fantom/",
-      accounts: [process.env.PRIVATE_KEY, process.env.PRIVATE_KEY_2],
+      accounts: [process.env.PRIVATE_KEY],
       chainId: 250,
     },
     bsc: {
       url: "https://bscrpc.com",
-      accounts: [process.env.PRIVATE_KEY, process.env.PRIVATE_KEY_2],
+      accounts: [process.env.PRIVATE_KEY],
       chainId: 56,
     },
     metis: {
       url: "https://andromeda.metis.io",
-      accounts: [process.env.PRIVATE_KEY, process.env.PRIVATE_KEY_2],
+      accounts: [process.env.PRIVATE_KEY],
       chainId: 1088,
     },
     mantle: {
       url: "https://rpc.testnet.mantle.xyz/",
-      accounts: [process.env.PRIVATE_KEY, process.env.PRIVATE_KEY_2],
+      accounts: [process.env.PRIVATE_KEY],
       chainId: 5001,
     },
     filecoin: {
       url: "https://rpc.ankr.com/filecoin",
-      accounts: [process.env.PRIVATE_KEY, process.env.PRIVATE_KEY_2],
+      accounts: [process.env.PRIVATE_KEY],
       chainId: 314,
     },
     optimism: {

From 261a23564e7060cc5fe5147b4f8fc1ca2b98a5d5 Mon Sep 17 00:00:00 2001
From: name <fedorovn19@gmail.com>
Date: Tue, 25 Feb 2025 13:56:39 +0300
Subject: [PATCH 17/17] removed unused code

---
 packages/frontend/components/Posts/PostCard.tsx | 2 --
 packages/hardhat/package.json                   | 1 +
 packages/hardhat/yarn.lock                      | 5 +++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/components/Posts/PostCard.tsx b/packages/frontend/components/Posts/PostCard.tsx
index 6fff322..59a47b5 100644
--- a/packages/frontend/components/Posts/PostCard.tsx
+++ b/packages/frontend/components/Posts/PostCard.tsx
@@ -2,8 +2,6 @@ import { Paper, Text } from "@mantine/core";
 import Image from "next/image";
 import Link from "next/link";
 
-import type { Post } from "@/services/upload";
-
 type PostReduced = {
   image: string;
   name: string;
diff --git a/packages/hardhat/package.json b/packages/hardhat/package.json
index e0476d9..235818b 100644
--- a/packages/hardhat/package.json
+++ b/packages/hardhat/package.json
@@ -30,6 +30,7 @@
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-prettier": "^5.0.0",
     "hardhat-gas-reporter": "^2.2.2",
+    "hardhat-verify": "^1.0.0",
     "solidity-coverage": "^0.8.14",
     "ts-node": "^10.9.1",
     "typechain": "^8.1.1"
diff --git a/packages/hardhat/yarn.lock b/packages/hardhat/yarn.lock
index fdf7001..97bd01d 100644
--- a/packages/hardhat/yarn.lock
+++ b/packages/hardhat/yarn.lock
@@ -3574,6 +3574,11 @@ hardhat-gas-reporter@^2.2.2:
     sha1 "^1.1.1"
     viem "2.7.14"
 
+hardhat-verify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hardhat-verify/-/hardhat-verify-1.0.0.tgz#13c8e4e015cfb64a2637a7de5c9fa108023b3e2b"
+  integrity sha512-mLCAVyXTz3M9mDDv8qDNsEQfiopURX/eAwpS6jXyqeCUUtgr1eeYfrzigeT/Hut6RO8d1CmUuW9BHvG8cEL1fg==
+
 hardhat@2.22.17:
   version "2.22.17"
   resolved "https://registry.yarnpkg.com/hardhat/-/hardhat-2.22.17.tgz#96036bbe6bad8eb6a6b65c54dc5fbc1324541612"