fix: allow preview vercel base url in ipfs (#4333)

fix: allow preview vercel base url in ipfs

[PREVIEW]

src/components/ProjectSafeDashboard/ProjectSafeDashboard.tsx

@@ -2,6 +2,7 @@ import { t, Trans } from '@lingui/macro'
 import ExternalLink from 'components/ExternalLink'
 import Loading from 'components/Loading'
 import { Tab } from 'components/Tab'
+import { SiteBaseUrl } from 'constants/url'
 import { useGnosisSafe } from 'hooks/safe/useGnosisSafe'
 import { useQueuedSafeTransactions } from 'hooks/safe/useQueuedSafeTransactions'
 import { generateSafeUrl } from 'lib/safe'
@@ -52,7 +53,7 @@ export function ProjectSafeDashboard({
     )
   }
 
-  const url = new URL(router.asPath, process.env.NEXT_PUBLIC_BASE_URL)
+  const url = new URL(router.asPath, SiteBaseUrl)
   const preSelectedTx = url.hash.slice(1) as string
   if (preSelectedTx) {
     document

src/components/common/SEO/SEO.tsx

@@ -1,4 +1,5 @@
 import config from 'config/seo_meta.json'
+import { SiteBaseUrl } from 'constants/url'
 import Head from 'next/head'
 import { FC, ReactNode } from 'react'
 import { ipfsUriToGatewayUrl } from 'utils/ipfs'
@@ -69,15 +70,13 @@ export const SEO: FC<React.PropsWithChildren<SEOProps>> = ({
       />
       <OpenGraphMetaTags
         type="website"
-        url={url ?? process.env.NEXT_PUBLIC_BASE_URL} // default to base url
+        url={url ?? SiteBaseUrl} // default to base url
         title={formattedTitle}
         description={description ?? config.description}
         siteName={config.title}
         image={{
           src:
-            (process.env.NEXT_PUBLIC_BASE_URL
-              ? process.env.NEXT_PUBLIC_BASE_URL
-              : '/') + 'assets/JBM-Unfurl-banner.png',
+            (SiteBaseUrl ? SiteBaseUrl : '/') + 'assets/JBM-Unfurl-banner.png',
           type: 'image/png',
           width: '1136',
           height: '497',

src/constants/url.ts

@@ -0,0 +1,7 @@
+export const SiteBaseUrl =
+  process.env.NEXT_PUBLIC_BASE_URL ?? process.env.NEXT_PUBLIC_VERCEL_URL
+    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/`
+    : undefined
+
+// Fixes File '/Users/wraeth/projects/juice-interface/src/constants/url.ts' is not a module.
+export {}

src/lib/api/ens.ts

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { readNetwork } from 'constants/networks'
+import { SiteBaseUrl } from 'constants/url'
 import { resolveAddressEnsIdeas } from 'lib/ensIdeas'
 import { NetworkName } from 'models/networkName'
 
@@ -20,7 +21,7 @@ export function resolveAddress(addressOrEnsName: string) {
   } catch (e) {
     return axios
       .get<{ name: string; address: string }>(
-        `${process.env.NEXT_PUBLIC_BASE_URL}api/ens/resolve/${addressOrEnsName}`,
+        `${SiteBaseUrl}api/ens/resolve/${addressOrEnsName}`,
       )
       .then(data => data.data)
   }

src/lib/api/ipfs.ts

@@ -3,6 +3,7 @@ import { InfuraPinResponse } from 'lib/infura/ipfs'
 import { consolidateMetadata, ProjectMetadata } from 'models/projectMetadata'
 import { ipfsGatewayUrl } from 'utils/ipfs'
 
+import { SiteBaseUrl } from 'constants/url'
 import { UploadProgressEvent } from 'rc-upload/lib/interface'
 
 // Workaround function for a bug in pinata where the data is sometimes returned in bytes
@@ -24,9 +25,8 @@ const extractJsonFromBase64Data = (base64: string) => {
  * Fetch an IPFS hash from our proxy.
  */
 export const ipfsFetch = async <T>(hash: string) => {
-  const response = await axios.get<T>(
-    `${process.env.NEXT_PUBLIC_BASE_URL}api/ipfs/${hash}`,
-  )
+  if (!SiteBaseUrl) throw new Error('ipfs fetch failed: Undefined base url')
+  const response = await axios.get<T>(`${SiteBaseUrl}api/ipfs/${hash}`)
 
   return response
 }

src/pages/about/index.tsx

@@ -1,6 +1,7 @@
 import { AboutDashboard } from 'components/AboutDashboard/AboutDashboard'
 import { AppWrapper } from 'components/common/CoreAppWrapper/CoreAppWrapper'
 import { Head } from 'components/common/Head/Head'
+import { SiteBaseUrl } from 'constants/url'
 import globalGetServerSideProps from 'utils/next-server/globalGetServerSideProps'
 
 export default function AboutPage() {
@@ -9,7 +10,7 @@ export default function AboutPage() {
       <Head
         title="About Juicebox | Crypto Fundraising & DAO Management"
         overrideFormattedTitle
-        url={process.env.NEXT_PUBLIC_BASE_URL + '/about'}
+        url={SiteBaseUrl + '/about'}
         description="Juicebox is the programmable funding platform for crypto and web3. Fund, operate, and scale your project transparently. Community DAO owned, on Ethereum."
       />
 

src/pages/api/nextjs/revalidate-project.ts

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { PV_V1, PV_V2 } from 'constants/pv'
+import { SiteBaseUrl } from 'constants/url'
 import { PV } from 'models/pv'
 import { NextApiRequest, NextApiResponse } from 'next'
 
@@ -43,7 +44,7 @@ export default async function handler(
 
   // Update database projects whenever a project needs revalidating. However, database will only get updated if the new project data is already available in the subgraph, which can sometimes take a couple minutes
   await axios
-    .get(`${process.env.NEXT_PUBLIC_BASE_URL}api/projects/update`)
+    .get(`${SiteBaseUrl}api/projects/update`)
     // can throw error when env isnt set correctly
     .catch(err => console.error('Database projects update failed', err))
 

src/pages/contact/index.tsx

@@ -2,14 +2,15 @@ import { Contact } from 'components/Contact/Contact'
 import { Footer } from 'components/Footer/Footer'
 import { AppWrapper } from 'components/common/CoreAppWrapper/CoreAppWrapper'
 import { Head } from 'components/common/Head/Head'
+import { SiteBaseUrl } from 'constants/url'
 import globalGetServerSideProps from 'utils/next-server/globalGetServerSideProps'
 
 export default function ContactPage() {
   return (
     <>
       <Head
         title="Contact"
-        url={process.env.NEXT_PUBLIC_BASE_URL + '/contact'}
+        url={SiteBaseUrl + '/contact'}
         description="Contact JuiceboxDAO for feature requests, support, or project advice."
       />
 

src/pages/create/index.tsx

@@ -2,6 +2,7 @@ import { AppWrapper } from 'components/common/CoreAppWrapper/CoreAppWrapper'
 import { Head } from 'components/common/Head/Head'
 import { Create } from 'components/Create/Create'
 import { CV_V3 } from 'constants/cv'
+import { SiteBaseUrl } from 'constants/url'
 import { TransactionProvider } from 'contexts/Transaction/TransactionProvider'
 import { V2V3ContractsProvider } from 'contexts/v2v3/Contracts/V2V3ContractsProvider'
 import { V2V3CurrencyProvider } from 'contexts/v2v3/V2V3CurrencyProvider'
@@ -14,7 +15,7 @@ export default function V2CreatePage() {
     <>
       <Head
         title="Create your project"
-        url={process.env.NEXT_PUBLIC_BASE_URL + '/create'}
+        url={SiteBaseUrl + '/create'}
         description="Launch a project on Juicebox"
       />
 

src/pages/legal/index.tsx

@@ -2,14 +2,15 @@ import { Footer } from 'components/Footer/Footer'
 import { Legal } from 'components/Legal/Legal'
 import { AppWrapper } from 'components/common/CoreAppWrapper/CoreAppWrapper'
 import { Head } from 'components/common/Head/Head'
+import { SiteBaseUrl } from 'constants/url'
 import globalGetServerSideProps from 'utils/next-server/globalGetServerSideProps'
 
 export default function LegalPage() {
   return (
     <>
       <Head
         title="Legal Resources"
-        url={process.env.NEXT_PUBLIC_BASE_URL + '/legal'}
+        url={SiteBaseUrl + '/legal'}
         description="Legal resources for project creators and communities."
       />
       <AppWrapper>

src/pages/p/[handle]/index.tsx

@@ -3,6 +3,7 @@ import Project404 from 'components/Project404'
 import { AppWrapper } from 'components/common/CoreAppWrapper/CoreAppWrapper'
 import { SEO } from 'components/common/SEO/SEO'
 import { V1Project } from 'components/v1/V1Project/V1Project'
+import { SiteBaseUrl } from 'constants/url'
 import { AnnouncementLauncher } from 'contexts/Announcements/AnnouncementLauncher'
 import { ProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import { V1ProjectProvider } from 'contexts/v1/Project/V1ProjectProvider'
@@ -53,7 +54,7 @@ export default function V1HandlePage({
       <SEO
         // Set known values, leave others undefined to be overridden
         title={metadata?.name}
-        url={`${process.env.NEXT_PUBLIC_BASE_URL}p/${handle}`}
+        url={`${SiteBaseUrl}p/${handle}`}
         description={metadata?.description ? metadata.description : undefined}
         twitter={{
           card: 'summary',

src/pages/v2/p/[projectId]/index.tsx

@@ -2,6 +2,7 @@ import { AppWrapper } from 'components/common/CoreAppWrapper/CoreAppWrapper'
 import { SEO } from 'components/common/SEO/SEO'
 import { ProjectDashboard } from 'components/v2v3/V2V3Project/ProjectDashboard/ProjectDashboard'
 import { PV_V2 } from 'constants/pv'
+import { SiteBaseUrl } from 'constants/url'
 import { AnnouncementsProvider } from 'contexts/Announcements/AnnouncementsProvider'
 import { V2V3ProjectPageProvider } from 'contexts/v2v3/V2V3ProjectPageProvider'
 import { paginateDepleteProjectsQueryCall } from 'lib/apollo/paginateDepleteProjectsQuery'
@@ -66,7 +67,7 @@ const ProjectPageSEO = ({
   <SEO
     // Set known values, leave others undefined to be overridden
     title={metadata?.name}
-    url={`${process.env.NEXT_PUBLIC_BASE_URL}v2/p/${projectId}`}
+    url={`${SiteBaseUrl}v2/p/${projectId}`}
     description={
       metadata?.projectTagline ? metadata.projectTagline : metadata?.description
     }