upgrade to v2, remove v1 gql services

uplink-client/next.config.js

@@ -9,11 +9,6 @@ const nextConfig = {
     contentDispositionType: 'attachment',
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
     remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'res.cloudinary.com',
-        port: '',
-      },
       {
         protocol: 'https',
         hostname: 'calabara.mypinata.cloud',

uplink-client/package.json

@@ -62,6 +62,7 @@
     "next-mdx-remote": "^5.0.0",
     "node-gyp": "^10.0.1",
     "popmotion": "^11.0.5",
+    "probe-image-size": "^7.2.3",
     "react": "^18",
     "react-day-picker": "^8.9.1",
     "react-dom": "^18",
@@ -103,6 +104,7 @@
     "@storybook/testing-library": "^0.2.1",
     "@tailwindcss/typography": "^0.5.14",
     "@types/node": "^20",
+    "@types/probe-image-size": "^7",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/react-lazyload": "^3",

uplink-client/src/app/(home)/page.tsx

@@ -13,7 +13,7 @@ import { ChainLabel } from "@/ui/ChainLabel/ChainLabel";
 import { RenderMintMedia } from "@/ui/Token/MintUtils";
 import { ImageWrapper } from "@/app/(legacy)/contest/components/MediaWrapper";
 import { MdAccessibility, MdDashboardCustomize, MdGroups } from "react-icons/md";
-import OptimizedImage from "@/lib/OptmizedImage";
+import OptimizedImage from "@/lib/OptimizedImage";
 
 export const dynamic = 'force-static';
 export const runtime = 'nodejs';

uplink-client/src/app/(legacy)/contest/[id]/page.tsx

@@ -4,7 +4,7 @@ import {
 import { Suspense } from "react";
 import fetchLegacyContest from "@/lib/fetch/fetchLegacyContest";
 import Link from "next/link";
-import OptimizedImage from "@/lib/OptmizedImage";
+import OptimizedImage from "@/lib/OptimizedImage";
 import { ChannelStateLabel } from "@/ui/ChannelSidebar/SidebarUtils";
 import ExpandableTextSection from "@/ui/ExpandableTextSection/ExpandableTextSection";
 import ParseBlocks from "@/lib/blockParser";

uplink-client/src/app/(legacy)/contest/components/CardSubmission.tsx

@@ -12,7 +12,7 @@ import { ParseThread } from "@/lib/threadParser";
 import { RenderInteractiveVideoWithLoader } from "@/ui/VideoPlayer";
 import { Decimal } from "decimal.js";
 import formatDecimal from "@/lib/formatDecimal";
-import OptimizedImage from "@/lib/OptmizedImage"
+import OptimizedImage from "@/lib/OptimizedImage"
 
 const ParseBlocks = dynamic(() => import("@/lib/blockParser"), {
   ssr: false,

uplink-client/src/app/(legacy)/contest/components/ExpandedSubmission.tsx

@@ -1,6 +1,6 @@
 // Render the submission in a large format. This is used for modals and the submission page.
 import type { Submission } from "@/types/submission";
-import OptimizedImage from "@/lib/OptmizedImage"
+import OptimizedImage from "@/lib/OptimizedImage"
 const ParseBlocks = dynamic(() => import("@/lib/blockParser"), {
   ssr: false,
   loading: () => (

uplink-client/src/app/(space)/[name]/contest/[contractId]/@sidebar/(enabled)/layout.tsx

@@ -15,7 +15,7 @@ const VoteCart = dynamic(
     }
 )
 
-const StateSpecificSidebar = async ({ contractId }: { contractId: ContractID }) => {
+const StateSpecificSidebar = async ({ spaceName, contractId }: { spaceName: string, contractId: ContractID }) => {
 
     const channel = await fetchChannel(contractId)
 
@@ -29,6 +29,7 @@ const StateSpecificSidebar = async ({ contractId }: { contractId: ContractID })
                 contractId={contractId}
                 detailsChild={
                     <ContestDetailsV2
+                        spaceName={spaceName}
                         contractId={contractId}
                         transportConfig={channel.transportLayer.transportConfig as IFiniteTransportConfig}
                         creatorLogic={channel.creatorLogic}
@@ -42,14 +43,14 @@ const StateSpecificSidebar = async ({ contractId }: { contractId: ContractID })
 }
 
 
-export default function Layout({ params, children }: { params: { contractId: ContractID }, children: React.ReactNode }) {
+export default function Layout({ params, children }: { params: { name: string, contractId: ContractID }, children: React.ReactNode }) {
 
     return (
         <div className="hidden lg:block sticky top-3 right-0 w-full max-w-[450px] flex-grow h-full">
             <div className="flex flex-col gap-2">
                 {children}
                 <Suspense fallback={<div className="flex flex-col gap-2 rounded-lg w-full"><DetailsSkeleton /></div>}>
-                    <StateSpecificSidebar contractId={params.contractId} />
+                    <StateSpecificSidebar spaceName={params.name} contractId={params.contractId} />
                 </Suspense>
             </div>
         </div>

uplink-client/src/app/(space)/[name]/contest/[contractId]/post/[postId]/page.tsx

@@ -1,9 +1,8 @@
-import { calculateImageAspectRatio } from "@/lib/farcaster/utils";
 import fetchChannel from "@/lib/fetch/fetchChannel";
 import fetchSingleSpace from "@/lib/fetch/fetchSingleSpace";
 import { fetchSingleTokenIntent, fetchSingleTokenV2 } from "@/lib/fetch/fetchTokensV2";
 import { parseIpfsUrl } from "@/lib/ipfs";
-import OptimizedImage from "@/lib/OptmizedImage";
+import OptimizedImage from "@/lib/OptimizedImage";
 import { ContractID } from "@/types/channel";
 import { Button } from "@/ui/DesignKit/Button";
 import { MintTokenSwitch } from "@/ui/Token/MintToken";
@@ -23,15 +22,10 @@ export async function generateMetadata({
     const { name: spaceName, contractId, postId } = params
 
     const isIntent = searchParams?.intent ? true : false
-    const referral = searchParams?.referrer ?? ""
-
-    const channel = await fetchChannel(contractId);
     const token = isIntent ? await fetchSingleTokenIntent(contractId, postId) : await fetchSingleTokenV2(contractId, postId)
 
     const author = token.author
 
-    const aspect = await calculateImageAspectRatio(parseIpfsUrl(token.metadata.image).gateway)
-
     // const fcMetadata: Record<string, string> = {
     //     "fc:frame": "vNext",
     //     "fc:frame:image": parseIpfsUrl(token.metadata.image).gateway,
@@ -168,7 +162,6 @@ export default function Page({ params, searchParams }: { params: { name: string,
 
     return (
         <div className="flex flex-row w-10/12 m-auto mt-4 lg:w-5/12 lg:m-0 lg:ml-auto lg:mt-0">
-            {/* <ExpandedPostSkeleton /> */}
             <Suspense fallback={<ExpandedPostSkeleton />}>
                 <Post spaceName={params.name} contractId={params.contractId} postId={params.postId} searchParams={searchParams} />
             </Suspense>

uplink-client/src/app/(space)/[name]/mintboard/(redirect)/page.tsx

@@ -11,9 +11,8 @@ import { TbLoader2 } from "react-icons/tb";
 // redirect legacy mintboards to v2 mintboards
 
 const Redirect = async ({ spaceName }: { spaceName: string }) => {
-    const channels = await fetchSpaceChannels(spaceName);
-    const mintboards = channels.filter(channel => isInfiniteChannel(channel));
-    const mintboard = mintboards[0];
+    const channels = await fetchSpaceChannels(spaceName, 8453);
+    const mintboard = channels.infiniteChannels[0];
 
     if (!mintboard) notFound();
 

uplink-client/src/app/(space)/[name]/mintboard/(redirect)/post/[postId]/page.tsx

@@ -8,9 +8,8 @@ import { TbLoader2 } from "react-icons/tb";
 // redirect legacy mintboard posts to v2 mintboard posts
 
 const Redirect = async ({ spaceName, postId }: { spaceName: string, postId: string }) => {
-    const channels = await fetchSpaceChannels(spaceName);
-    const mintboards = channels.filter(channel => isInfiniteChannel(channel));
-    const mintboard = mintboards[0];
+    const channels = await fetchSpaceChannels(spaceName, 8453);
+    const mintboard = channels.infiniteChannels[0];
 
     if (!mintboard) notFound();
 

uplink-client/src/app/(space)/[name]/mintboard/[contractId]/page.tsx

@@ -2,7 +2,7 @@ import fetchChannel from '@/lib/fetch/fetchChannel';
 import fetchSingleSpace from '@/lib/fetch/fetchSingleSpace';
 import { fetchPopularTokens, fetchTokenIntents, fetchTokensV1, fetchTokensV2 } from '@/lib/fetch/fetchTokensV2';
 import { parseIpfsUrl } from '@/lib/ipfs';
-import OptimizedImage from '@/lib/OptmizedImage';
+import OptimizedImage from '@/lib/OptimizedImage';
 import SwrProvider from '@/providers/SwrProvider';
 import { Boundary } from '@/ui/Boundary/Boundary';
 import Link from 'next/link';

uplink-client/src/app/(space)/[name]/mintboard/[contractId]/post/[postId]/v2/page.tsx

@@ -107,7 +107,6 @@ const PageContent = async ({ spaceName, contractId, postId, searchParams }: { sp
         isIntent ? fetchSingleTokenIntent(contractId, postId) : fetchSingleTokenV2(contractId, postId)
     ])
 
-
     return (
         <div className="flex flex-col gap-6">
             <Breadcrumb>

uplink-client/src/app/(space)/[name]/page.tsx

@@ -4,7 +4,7 @@ import { FaTwitter } from "react-icons/fa";
 import fetchSingleSpace from "@/lib/fetch/fetchSingleSpace";
 import { Suspense } from "react";
 import { HiSparkles } from "react-icons/hi2";
-import OptimizedImage from "@/lib/OptmizedImage"
+import OptimizedImage from "@/lib/OptimizedImage"
 import { Boundary } from "@/ui/Boundary/Boundary";
 import { AdminWrapper } from "@/lib/AdminWrapper";
 import { parseIpfsUrl } from "@/lib/ipfs";

uplink-client/src/app/explore/client.tsx

@@ -1,7 +1,7 @@
 "use client";;
 import { Space } from "@/types/space";
 import { useEffect, useRef, useState } from "react";
-import OptimizedImage from "@/lib/OptmizedImage";
+import OptimizedImage from "@/lib/OptimizedImage";
 import Link from "next/link";
 import { Input } from "@/ui/DesignKit/Input";
 

uplink-client/src/app/explore/page.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { Metadata } from "next";
 import fetchSpaces from "@/lib/fetch/fetchSpaces";
 import { Suspense } from "react";
-import OptimizedImage from "@/lib/OptmizedImage"
+import OptimizedImage from "@/lib/OptimizedImage"
 import { SearchSpaces } from "./client";
 import { ColorCards } from "@/ui/DesignKit/ColorCards";
 import { Card, CardContent, CardFooter } from "@/ui/DesignKit/Card";

uplink-client/src/lib/blockParser.tsx

@@ -3,7 +3,7 @@ import { ImageWrapper } from "@/app/(legacy)/contest/components/MediaWrapper";
 import type { OutputData } from "@editorjs/editorjs";
 import React, { useEffect } from "react";
 import Output, { LinkToolOutput, ListOutput, ParagraphOutput } from 'editorjs-react-renderer';
-import OptimizedImage from "@/lib/OptmizedImage"
+import OptimizedImage from "@/lib/OptimizedImage"
 
 const createLinks = (text: string): string => {
   const urlRegex = /(https?:\/\/[^\s]+)/g;

uplink-client/src/lib/farcaster/utils.ts

@@ -1,16 +1,24 @@
 import { FrameRequest, MockFrameRequest, FrameValidationResponse, FrameMetadataHtmlResponse } from "./types";
 import { neynarFrameValidation } from "./neynar";
+import probe from "probe-image-size";
 
-export const calculateImageAspectRatio = async (url: string) => {
+export const calculateImageAspectRatio = async (url: string): Promise<string> => {
     try {
-        const fileInfo = await fetch(`https://res.cloudinary.com/drrkx8iye/image/fetch/fl_getinfo/${url}`).then(res => res.json())
-        const { output } = fileInfo;
-        if (output.width / output.height > 1.45) return "1.91:1";
-        return "1:1"
+        const fileInfo = await probe(url);
+        const ratio = fileInfo.width / fileInfo.height;
+
+        if (ratio > 1.45) {
+            // Landscape: Width is greater than height
+            return "1.91:1";
+        }
+        // Square or portrait: Height is equal to or greater than width
+        return "1:1";
     } catch (e) {
-        return "1:1"
+        console.error("Error calculating aspect ratio:", e);
+        return "1:1";
     }
-}
+};
+
 
 type FrameMessageOptions =
     | {

uplink-client/src/lib/threadParser.tsx

@@ -3,7 +3,7 @@ import { ImageWrapper } from "@/app/(legacy)/contest/components/MediaWrapper";
 import { RenderStandardVideoWithLoader } from "@/ui/VideoPlayer";
 import Image from "next/image";
 import sanitizeHtml from "sanitize-html";
-import OptimizedImage from "@/lib/OptmizedImage"
+import OptimizedImage from "@/lib/OptimizedImage"
 const createLinks = (text: string): string => {
   const urlRegex = /(https?:\/\/[^\s]+)/g;
   const twitterRegex = /([^\S]|^)@(\w+)/gi;