From b2a2c9784a33394dffbcd32bbd28b2c612a4e603 Mon Sep 17 00:00:00 2001 From: jnsdls Date: Sat, 14 Sep 2024 19:52:26 +0000 Subject: [PATCH] [Update] Refactor setOverrides() call and IPFS URL resolution (#4587) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## PR-Codex overview The focus of this PR is to refactor the codebase to run `setOverrides()` function on app load efficiently. ### Detailed summary - Moved `setOverrides()` function calls to run on app load in various files - Added `useEffect` hooks to ensure `setOverrides()` runs once on app load - Updated `replaceIpfsUrl` function to use `resolveScheme` with `thirdwebClient` - Imported `setOverrides` function in multiple files for app initialization > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- apps/dashboard/src/app/layout.tsx | 4 + apps/dashboard/src/app/providers.tsx | 7 ++ .../explore/contract-card/index.tsx | 11 ++- apps/dashboard/src/lib/sdk.ts | 77 +++---------------- apps/dashboard/src/lib/vercel-utils.ts | 2 - apps/dashboard/src/pages/_app.tsx | 9 +++ 6 files changed, 38 insertions(+), 72 deletions(-) diff --git a/apps/dashboard/src/app/layout.tsx b/apps/dashboard/src/app/layout.tsx index 46fdb609a53..9f591b6abda 100644 --- a/apps/dashboard/src/app/layout.tsx +++ b/apps/dashboard/src/app/layout.tsx @@ -7,9 +7,13 @@ import PlausibleProvider from "next-plausible"; import dynamic from "next/dynamic"; import { Inter } from "next/font/google"; import NextTopLoader from "nextjs-toploader"; +import { setOverrides } from "../lib/vercel-utils"; import { PostHogProvider } from "./components/root-providers"; import { AppRouterProviders } from "./providers"; +// run this on app load +setOverrides(); + const fontSans = Inter({ subsets: ["latin"], variable: "--font-sans", diff --git a/apps/dashboard/src/app/providers.tsx b/apps/dashboard/src/app/providers.tsx index f7d9ad24166..a7f3a611e04 100644 --- a/apps/dashboard/src/app/providers.tsx +++ b/apps/dashboard/src/app/providers.tsx @@ -5,11 +5,18 @@ import { DashboardThirdwebProviderSetup } from "components/app-layouts/provider- import { AllChainsProvider } from "contexts/all-chains"; import { ChainsProvider } from "contexts/configured-chains"; import { ThemeProvider } from "next-themes"; +import { useEffect } from "react"; import { ThirdwebProvider } from "thirdweb/react"; +import { setOverrides } from "../lib/vercel-utils"; const queryClient = new QueryClient(); export function AppRouterProviders(props: { children: React.ReactNode }) { + // run this ONCE on app load + // eslint-disable-next-line no-restricted-syntax + useEffect(() => { + setOverrides(); + }, []); return ( diff --git a/apps/dashboard/src/components/explore/contract-card/index.tsx b/apps/dashboard/src/components/explore/contract-card/index.tsx index ff9be218bc4..8a5add45ed3 100644 --- a/apps/dashboard/src/components/explore/contract-card/index.tsx +++ b/apps/dashboard/src/components/explore/contract-card/index.tsx @@ -2,20 +2,22 @@ import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Skeleton, SkeletonContainer } from "@/components/ui/skeleton"; import { TrackedLinkTW } from "@/components/ui/tracked-link"; +import { thirdwebClient } from "@/constants/client"; import { cn } from "@/lib/utils"; import { type QueryClient, useQuery, useQueryClient, } from "@tanstack/react-query"; +import { moduleToBase64 } from "app/(dashboard)/published-contract/utils/module-base-64"; import { ensQuery } from "components/contract-components/hooks"; import { getDashboardChainRpc } from "lib/rpc"; -import { getThirdwebSDK, replaceIpfsUrl } from "lib/sdk"; +import { getThirdwebSDK } from "lib/sdk"; import { RocketIcon, ShieldCheckIcon } from "lucide-react"; import Link from "next/link"; import { polygon } from "thirdweb/chains"; +import { resolveScheme } from "thirdweb/storage"; import invariant from "tiny-invariant"; -import { moduleToBase64 } from "../../../app/(dashboard)/published-contract/utils/module-base-64"; import { ContractPublisher, replaceDeployerAddress } from "../publisher"; interface ContractCardProps { @@ -134,7 +136,10 @@ export const ContractCard: React.FC = ({ Audited diff --git a/apps/dashboard/src/lib/sdk.ts b/apps/dashboard/src/lib/sdk.ts index 767d7c48a08..aa1c0305ab9 100644 --- a/apps/dashboard/src/lib/sdk.ts +++ b/apps/dashboard/src/lib/sdk.ts @@ -5,77 +5,21 @@ import { isProd, } from "@/constants/env"; import { ThirdwebSDK } from "@thirdweb-dev/sdk"; -import { - // type GatewayUrls, - type IStorageDownloader, - type SingleDownloadOptions, - StorageDownloader, - ThirdwebStorage, -} from "@thirdweb-dev/storage"; +import { ThirdwebStorage } from "@thirdweb-dev/storage"; import type { Signer } from "ethers"; import { polygon } from "thirdweb/chains"; -import { getAbsoluteUrl } from "./vercel-utils"; +import { resolveScheme } from "thirdweb/storage"; +import { thirdwebClient } from "../@/constants/client"; -export function replaceIpfsUrl(url: string) { +export function replaceIpfsUrl(uri: string) { try { - return StorageSingleton.resolveScheme(url); + return resolveScheme({ + uri, + client: thirdwebClient, + }); } catch (err) { - console.error("error resolving ipfs url", url, err); - return url; - } -} - -const ProxyHostNames = new Set(); - -const defaultDownloader = new StorageDownloader({ - clientId: DASHBOARD_THIRDWEB_CLIENT_ID, - secretKey: DASHBOARD_THIRDWEB_SECRET_KEY, -}); - -class SpecialDownloader implements IStorageDownloader { - async download( - url: string, - // gatewayUrls?: GatewayUrls, - options?: SingleDownloadOptions, - ): Promise { - if (url.startsWith("ipfs://")) { - return defaultDownloader.download( - url, - { "ipfs://": [IPFS_GATEWAY_URL] }, - options, - ); - } - - // data urls we always want to just fetch directly - if (url.startsWith("data")) { - return fetch(url); - } - - if (url.startsWith("http")) { - const u = new URL(url); - - // if we already know the hostname is bad, don't even try - if (ProxyHostNames.has(u.hostname)) { - return fetch(`${getAbsoluteUrl()}/api/proxy?url=${u.toString()}`); - } - - try { - // try to just fetch it directly - const res = await fetch(u); - if (await res.clone().json()) { - return res; - } - // if we hit this we know something failed and we'll try to proxy it - ProxyHostNames.add(u.hostname); - - throw new Error("not ok"); - } catch { - // this is a bit scary but hey, it works - return fetch(`${getAbsoluteUrl()}/api/proxy?url=${u.toString()}`); - } - } - - throw new Error("not a valid url"); + console.error("error resolving ipfs url", uri, err); + return uri; } } @@ -88,7 +32,6 @@ export const StorageSingleton = new ThirdwebStorage({ clientId: DASHBOARD_THIRDWEB_CLIENT_ID, secretKey: DASHBOARD_THIRDWEB_SECRET_KEY, uploadServerUrl: DASHBOARD_STORAGE_URL, - downloader: new SpecialDownloader(), }) as ThirdwebStorage; // EVM SDK diff --git a/apps/dashboard/src/lib/vercel-utils.ts b/apps/dashboard/src/lib/vercel-utils.ts index b49635939cc..604422323a2 100644 --- a/apps/dashboard/src/lib/vercel-utils.ts +++ b/apps/dashboard/src/lib/vercel-utils.ts @@ -67,5 +67,3 @@ export function setOverrides() { social: THIRDWEB_SOCIAL_API_DOMAIN, }); } - -setOverrides(); diff --git a/apps/dashboard/src/pages/_app.tsx b/apps/dashboard/src/pages/_app.tsx index a16a2bbb1d4..5b8e8325277 100644 --- a/apps/dashboard/src/pages/_app.tsx +++ b/apps/dashboard/src/pages/_app.tsx @@ -24,6 +24,7 @@ import chakraTheme from "../theme"; import "@/styles/globals.css"; import { DashboardRouterTopProgressBar } from "@/lib/DashboardRouter"; import { AnnouncementBanner } from "../components/notices/AnnouncementBanner"; +import { setOverrides } from "../lib/vercel-utils"; const inter = interConstructor({ subsets: ["latin"], @@ -51,6 +52,9 @@ const chakraThemeWithFonts = { const fontSizeCssVars = generateBreakpointTypographyCssVars(); +// run this on app load +setOverrides(); + type AppPropsWithLayout = AppProps<{ dehydratedState?: DehydratedState }> & { Component: ThirdwebNextPage; }; @@ -59,6 +63,11 @@ const ConsoleAppWrapper: React.FC = ({ Component, pageProps, }) => { + // run this ONCE on app load + // eslint-disable-next-line no-restricted-syntax + useEffect(() => { + setOverrides(); + }, []); const router = useRouter(); const { shouldReload } = useBuildId();