Refactor useScreenshot to use ipns instead of siteUrl

Author: vderunov

src/ProjectItem.js

@@ -3,7 +3,7 @@ import { makeSearch } from './useRoutes';
 import { useScreenshot } from './useScreenshot';
 
 export function ProjectItem({ name, ipfs, ipns, setParams, published }) {
-  const screenshot = useScreenshot({ siteUrl: `http://127.0.0.1:8080/ipns/${ipns}/`, published });
+  const screenshot = useScreenshot({ ipns, published });
 
   return (
     <section className="hero">
@@ -12,7 +12,9 @@ export function ProjectItem({ name, ipfs, ipns, setParams, published }) {
           <figure className="image is-16by9">
             <img
               src={
-                screenshot.data?.image || 'https://bulma.io/assets/images/placeholders/1280x960.png'
+                screenshot.data?.screenshotBase64
+                  ? `data:image/png;base64,${screenshot.data?.screenshotBase64}`
+                  : 'https://bulma.io/assets/images/placeholders/1280x960.png'
               }
               alt={name || 'Project screenshot'}
             />

src/useScreenshot.js

@@ -2,21 +2,18 @@ import { useQuery } from '@tanstack/react-query';
 import { useSynthetix } from './useSynthetix';
 import { getApiUrl } from './utils';
 
-export function useScreenshot({ siteUrl, published }) {
+export function useScreenshot({ ipns, published }) {
   const [synthetix] = useSynthetix();
   const { chainId, token } = synthetix;
 
   return useQuery({
-    enabled: Boolean(chainId && siteUrl && published),
-    queryKey: [chainId, 'useScreenshot', siteUrl, { published }],
+    enabled: Boolean(chainId && ipns && published),
+    queryKey: [chainId, 'useScreenshot', ipns, { published }],
     queryFn: async () => {
-      const response = await fetch(
-        `${getApiUrl()}/api/screenshot?url=${encodeURIComponent(siteUrl)}`,
-        {
-          method: 'GET',
-          headers: { Authorization: `Bearer ${token}` },
-        }
-      );
+      const response = await fetch(`${getApiUrl()}/api/screenshot?ipns=${ipns}`, {
+        method: 'GET',
+        headers: { Authorization: `Bearer ${token}` },
+      });
 
       if (!response.ok) {
         throw new Error('Network response was not ok');