fix: set ipfs gateway url based on env var

Author: fforbeck

.env.tpl

@@ -3,6 +3,7 @@ NEXT_PUBLIC_W3UP_SERVICE_URL=https://staging.up.web3.storage
 NEXT_PUBLIC_W3UP_RECEIPTS_URL=https://staging.up.web3.storage/receipt/
 NEXT_PUBLIC_W3UP_SERVICE_DID=did:web:staging.web3.storage
 NEXT_PUBLIC_W3UP_PROVIDER=did:web:staging.web3.storage
+NEXT_PUBLIC_IPFS_GATEWAY_URL=https://%ROOT_CID%.ipfs-staging.w3s.link
 
 # set these to your gateway service URL and DID 
 NEXT_PUBLIC_W3UP_GATEWAY_HOST=https://freeway-staging.dag.haus

.github/workflows/deploy-storacha.yml

@@ -42,6 +42,7 @@ jobs:
           echo "NEXT_PUBLIC_W3UP_PROVIDER=did:web:staging.web3.storage" >> .env
           echo "NEXT_PUBLIC_W3UP_GATEWAY_HOST=https://freeway-staging.dag.haus" >> .env
           echo "NEXT_PUBLIC_W3UP_GATEWAY_ID=did:web:staging.w3s.link" >> .env
+          echo "NEXT_PUBLIC_IPFS_GATEWAY_URL=https://%ROOT_CID%.ipfs-staging.w3s.link" >> .env
           echo "NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=prctbl_1NzhdvF6A5ufQX5vKNZuRhie" >> .env
           echo "NEXT_PUBLIC_STRIPE_TRIAL_PRICING_TABLE_ID=prctbl_1QIDHGF6A5ufQX5vOK9Xl8Up" >> .env
           echo "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51LO87hF6A5ufQX5viNsPTbuErzfavdrEFoBuaJJPfoIhzQXdOUdefwL70YewaXA32ZrSRbK4U4fqebC7SVtyeNcz00qmgNgueC" >> .env
@@ -139,6 +140,7 @@ jobs:
           echo "NEXT_PUBLIC_W3UP_PROVIDER=did:web:web3.storage" >> .env
           echo "NEXT_PUBLIC_W3UP_GATEWAY_HOST=https://w3s.link" >> .env
           echo "NEXT_PUBLIC_W3UP_GATEWAY_ID=did:web:w3s.link" >> .env
+          echo "NEXT_PUBLIC_IPFS_GATEWAY_URL=https://%ROOT_CID%.ipfs.w3s.link" >> .env
           echo "NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=prctbl_1OCJ1qF6A5ufQX5vM5DWg4rA" >> .env
           echo "NEXT_PUBLIC_STRIPE_TRIAL_PRICING_TABLE_ID=prctbl_1QPYsuF6A5ufQX5vdIGAe54g" >> .env
           echo "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_51LO87hF6A5ufQX5vQTO5BHyz8y9ybJp4kg1GsBjYuqwluuwtQTkbeZzkoQweFQDlv7JaGjuIdUWAyuwXp3tmCfsM005lJK9aS8" >> .env

.github/workflows/deploy.yml

@@ -42,6 +42,7 @@ jobs:
           echo "NEXT_PUBLIC_W3UP_PROVIDER=did:web:staging.web3.storage" >> .env
           echo "NEXT_PUBLIC_W3UP_GATEWAY_HOST=https://freeway-staging.dag.haus" >> .env
           echo "NEXT_PUBLIC_W3UP_GATEWAY_ID=did:web:staging.w3s.link" >> .env
+          echo "NEXT_PUBLIC_IPFS_GATEWAY_URL=https://%ROOT_CID%.ipfs-staging.w3s.link" >> .env
           echo "NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=prctbl_1NzhdvF6A5ufQX5vKNZuRhie" >> .env
           echo "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51LO87hF6A5ufQX5viNsPTbuErzfavdrEFoBuaJJPfoIhzQXdOUdefwL70YewaXA32ZrSRbK4U4fqebC7SVtyeNcz00qmgNgueC" >> .env
           echo "NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL_LINK=https://billing.stripe.com/p/login/test_6oE29Gff99KO6mk8ww" >> .env
@@ -132,6 +133,7 @@ jobs:
           echo "NEXT_PUBLIC_W3UP_PROVIDER=did:web:web3.storage" >> .env
           echo "NEXT_PUBLIC_W3UP_GATEWAY_HOST=https://w3s.link" >> .env
           echo "NEXT_PUBLIC_W3UP_GATEWAY_ID=did:web:w3s.link" >> .env
+          echo "NEXT_PUBLIC_IPFS_GATEWAY_URL=https://%ROOT_CID%.ipfs.w3s.link" >> .env
           echo "NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=prctbl_1OCJ1qF6A5ufQX5vM5DWg4rA" >> .env
           echo "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_51LO87hF6A5ufQX5vQTO5BHyz8y9ybJp4kg1GsBjYuqwluuwtQTkbeZzkoQweFQDlv7JaGjuIdUWAyuwXp3tmCfsM005lJK9aS8" >> .env
           echo "NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL_LINK=https://billing.stripe.com/p/login/cN22aA62U6bO1sA9AA" >> .env

src/app/space/[did]/root/[cid]/page.tsx

@@ -13,6 +13,7 @@ import CopyIcon from '@/components/CopyIcon'
 import { Breadcrumbs } from '@/components/Breadcrumbs'
 import { useRouter } from 'next/navigation'
 import { createUploadsListKey } from '@/cache'
+import { ipfsGatewayURL } from '@/components/services'
 
 interface PageProps {
   params: {
@@ -58,7 +59,7 @@ export default function ItemPage ({ params }: PageProps): JSX.Element {
     router.replace(`/space/${spaceDID}`)
   }
 
-  const url = `https://${root}.ipfs.w3s.link`
+  const url = ipfsGatewayURL(root)
   return (
     <div>
       <Breadcrumbs space={space.did()} root={root} />

src/components/SpaceCreator.tsx

@@ -12,6 +12,7 @@ import { H3 } from './Text'
 import * as UcantoClient from '@ucanto/client'
 import { HTTP } from '@ucanto/transport'
 import * as CAR from '@ucanto/transport/car'
+import { gatewayHost } from './services'
 
 export function SpaceCreatorCreating(): JSX.Element {
   return (
@@ -59,15 +60,14 @@ export function SpaceCreatorForm({
     setSubmitted(true)
     try {
 
-      const gatewayId = toWebDID(process.env.NEXT_PUBLIC_W3UP_GATEWAY_ID) || toWebDID('did:web:w3s.link')
-      const gatewayUrl = process.env.NEXT_PUBLIC_W3UP_GATEWAY_HOST || 'https://w3s.link'
+      const gatewayId = toWebDID(process.env.NEXT_PUBLIC_W3UP_GATEWAY_ID) ?? toWebDID('did:web:w3s.link')
 
       const storachaGateway = UcantoClient.connect({
         id: {
           did: () => gatewayId
         },
         codec: CAR.outbound,
-        channel: HTTP.open<ContentServeService>({ url: new URL(gatewayUrl) }),
+        channel: HTTP.open<ContentServeService>({ url: new URL(gatewayHost) }),
       })
 
       const space = await client.createSpace(name, {

src/components/Uploader.tsx

@@ -12,7 +12,7 @@ import {
   WrapInDirectoryCheckbox,
   useUploader
 } from '@w3ui/react'
-import { gatewayHost } from '../components/services'
+import { ipfsGatewayURL } from '../components/services'
 import { useEffect, useState } from 'react'
 import { RadioGroup } from '@headlessui/react'
 import { H2 } from './Text'
@@ -94,7 +94,7 @@ export const Done = ({ dataCID }: DoneProps): JSX.Element => {
       <H2>Uploaded</H2>
       <a
         className='font-mono text-xs max-w-full overflow-hidden no-wrap text-ellipsis'
-        href={`https://${cid}.ipfs.${gatewayHost}/`}
+        href={ipfsGatewayURL(cid)}
       >
         {cid}
       </a>

src/components/services.ts

@@ -1,4 +1,4 @@
-import type { Service } from '@w3ui/react'
+import type { Service, UnknownLink } from '@w3ui/react'
 import { connect } from '@ucanto/client'
 import { CAR, HTTP } from '@ucanto/transport'
 import * as DID from '@ipld/dag-ucan/did'
@@ -19,6 +19,11 @@ export const servicePrincipal = DID.parse(
   process.env.NEXT_PUBLIC_W3UP_SERVICE_DID ?? 'did:web:web3.storage'
 )
 
+export const ipfsGatewayURL = (rootCID: UnknownLink | string) => new URL(
+  // 'https://%ROOT_CID%.ipfs.w3s.link' or 'https://%ROOT_CID%.ipfs-staging.w3s.link'
+  process.env.NEXT_PUBLIC_IPFS_GATEWAY_URL?.replace('%ROOT_CID%', rootCID.toString()) ?? `https://${rootCID}.ipfs.w3s.link`
+).toString()
+
 export const serviceConnection = connect<Service>({
   id: servicePrincipal,
   codec: CAR.outbound,
@@ -28,4 +33,4 @@ export const serviceConnection = connect<Service>({
   }),
 })
 
-export const gatewayHost = process.env.NEXT_PUBLIC_W3UP_GATEWAY_HOST ?? 'w3s.link'
+export const gatewayHost = process.env.NEXT_PUBLIC_W3UP_GATEWAY_HOST ?? 'https://w3s.link'

src/lib/migrations/nft-storage.ts

@@ -101,7 +101,7 @@ class Reader {
             //
             // If so we should be able to get a location claim, and key in the
             // claim should be the CAR CID.
-            const claims = await Claims.read(root)
+            const claims = await Claims.read(root.multihash)
             const locationClaims = []
             for (const c of claims) {
               if (c.type === 'assert/location') {

src/lib/migrations/web3-storage.ts

@@ -50,7 +50,6 @@ class Reader {
       }
 
       const root = Link.parse(raw.cid)
-      // @ts-expect-error not in client types
       const parts: string[] = raw.parts
 
       const shards: Shard[] = []