fix(website): ipfs loader url

packages/website/package.json

@@ -26,8 +26,8 @@
     "@types/node": "20.3.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "@usecannon/builder": "^2.9.7",
-    "@usecannon/cli": "^2.9.8",
+    "@usecannon/builder": "^2.9.9",
+    "@usecannon/cli": "^2.9.9",
     "@vercel/analytics": "^1.1.1",
     "axios": "^1.4.0",
     "chakra-react-select": "^4.7.0",

packages/website/src/features/Deploy/PublishUtility.tsx

@@ -48,6 +48,12 @@ export default function PublishUtility(props: {
 
   const publishMutation = useMutation({
     mutationFn: async () => {
+      if (settings.isIpfsGateway) {
+        throw new Error(
+          'You cannot publish on an IPFS gateway, only read operations can be done'
+        );
+      }
+
       console.log(
         'publish triggered',
         wc,
@@ -122,8 +128,18 @@ export default function PublishUtility(props: {
             matching name and version.
           </Text>
         )}
+        {settings.isIpfsGateway && (
+          <Text mb={3}>
+            You cannot publish on an IPFS gateway, only read operations can be
+            done.
+          </Text>
+        )}
         <Button
-          isDisabled={wc.data?.chain?.id !== 1 || publishMutation.isLoading}
+          isDisabled={
+            settings.isIpfsGateway ||
+            wc.data?.chain?.id !== 1 ||
+            publishMutation.isLoading
+          }
           onClick={() => publishMutation.mutate()}
         >
           {publishMutation.isLoading

packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx

@@ -406,20 +406,29 @@ function QueueFromGitOps() {
           </FormHelperText>
         </FormControl>
         {buildInfo.buildStatus == '' && (
-          <Button
-            width="100%"
-            colorScheme="teal"
-            mb={6}
-            isDisabled={
-              cannonPkgVersionInfo.ipfsQuery.isFetching ||
-              cannonPkgLatestInfo.ipfsQuery.isFetching ||
-              cannonPkgVersionInfo.registryQuery.isFetching ||
-              cannonPkgLatestInfo.registryQuery.isFetching
-            }
-            onClick={() => buildTransactions()}
-          >
-            Preview Transactions to Queue
-          </Button>
+          <>
+            {settings.isIpfsGateway && (
+              <Text mb={3}>
+                You cannot build transactions on an IPFS gateway, only read
+                operations can be done.
+              </Text>
+            )}
+            <Button
+              width="100%"
+              colorScheme="teal"
+              mb={6}
+              isDisabled={
+                settings.isIpfsGateway ||
+                cannonPkgVersionInfo.ipfsQuery.isFetching ||
+                cannonPkgLatestInfo.ipfsQuery.isFetching ||
+                cannonPkgVersionInfo.registryQuery.isFetching ||
+                cannonPkgLatestInfo.registryQuery.isFetching
+              }
+              onClick={() => buildTransactions()}
+            >
+              Preview Transactions to Queue
+            </Button>
+          </>
         )}
         {buildInfo.buildStatus && (
           <Alert mb="6" status="info">

packages/website/src/features/Settings/SettingsPage.tsx

@@ -29,7 +29,25 @@ import { CloseIcon } from '@chakra-ui/icons';
 import entries from 'just-entries';
 import { Store, initialState, useStore } from '@/helpers/store';
 import { validatePreset } from '@/helpers/cannon';
-//import { isIpfsUploadEndpoint } from '@/helpers/ipfs';
+import axios, { AxiosError } from 'axios';
+
+export async function isIpfsGateway(ipfsUrl: string) {
+  let isGateway = true;
+  try {
+    ipfsUrl = ipfsUrl.endsWith('/') ? ipfsUrl : ipfsUrl + '/';
+    await axios.post(ipfsUrl + 'api/v0/cat', null, { timeout: 15 * 1000 });
+  } catch (err: unknown) {
+    if (
+      err instanceof AxiosError &&
+      err.response?.status === 400 &&
+      err.response?.data.includes('argument "ipfs-path" is required')
+    ) {
+      isGateway = false;
+    }
+  }
+
+  return isGateway;
+}
 
 type Setting = {
   title: string;
@@ -44,7 +62,7 @@ type Setting = {
 const SETTINGS: Record<
   Exclude<
     keyof Store['settings'],
-    'ipfsApiUrl' | 'customProviders' | 'pythUrl'
+    'ipfsApiUrl' | 'isIpfsGateway' | 'customProviders' | 'pythUrl'
   >,
   Setting
 > = {
@@ -297,7 +315,12 @@ export default function SettingsPage() {
               value={settings.ipfsApiUrl}
               type={'text'}
               name={'ipfsApiUrl'}
-              onChange={(evt) => setSettings({ ipfsApiUrl: evt.target.value })}
+              onChange={async (evt) => {
+                setSettings({ ipfsApiUrl: evt.target.value });
+                setSettings({
+                  isIpfsGateway: await isIpfsGateway(evt.target.value),
+                });
+              }}
             />
             <FormHelperText color="gray.300">
               This is an{' '}

packages/website/src/helpers/ipfs.ts

@@ -9,32 +9,21 @@ export function parseIpfsHash(url: string) {
   return url.trim().match(FILE_URL_REGEX)?.groups?.cid || '';
 }
 
-export function isIpfsUploadEndpoint(ipfsUrl: string) {
-  try {
-    const url = new URL(ipfsUrl);
-    return url.port === '5001' || url.protocol === 'http+ipfs:' || url.protocol === 'https+ipfs:';
-  } catch (_) {
-    return false;
-  }
-}
-
 export class IPFSBrowserLoader extends IPFSLoader {
   constructor(ipfsUrl: string) {
     const { url, headers } = createIpfsUrl(ipfsUrl);
     super(url.replace(/\/$/, ''), headers);
   }
 }
 
-// Create an ipfs url with compatibility for custom auth and https+ipfs:// protocol
+// Create an ipfs url with compatibility for custom auth
 export function createIpfsUrl(base: string, pathname = '') {
   const parsedUrl = parseUrl(base);
   const headers: { [k: string]: string } = {};
 
-  const customProtocol = parsedUrl.protocol.endsWith('+ipfs');
-
   const uri = {
-    protocol: customProtocol ? parsedUrl.protocol.split('+')[0] : parsedUrl.protocol,
-    host: customProtocol && !parsedUrl.host.includes(':') ? `${parsedUrl.host}:5001` : parsedUrl.host,
+    protocol: parsedUrl.protocol,
+    host: parsedUrl.host,
     pathname,
     query: parsedUrl.query,
     hash: parsedUrl.hash,

packages/website/src/helpers/store.ts

@@ -24,6 +24,7 @@ export interface State {
   };
   settings: {
     ipfsApiUrl: string;
+    isIpfsGateway: boolean;
     stagingUrl: string;
     publishTags: string;
     preset: string;
@@ -57,6 +58,7 @@ export const initialState = {
   },
   settings: {
     ipfsApiUrl: 'https://repo.usecannon.com/',
+    isIpfsGateway: false,
     stagingUrl: 'https://cannon-safe-app.external.dbeal.dev',
     publishTags: 'latest',
     preset: 'main',

packages/website/src/hooks/cannon.ts

@@ -79,6 +79,10 @@ export function useCannonBuild(safe: SafeDefinition, def: ChainDefinition, prevD
   const [buildError, setBuildError] = useState<string | null>(null);
 
   const buildFn = async () => {
+    if (settings.isIpfsGateway) {
+      throw new Error('You cannot build on an IPFS gateway, only read operations can be done');
+    }
+
     setBuildStatus('Creating fork...');
     const fork = await createFork({
       url: settings.forkProviderUrl,
@@ -94,7 +98,7 @@ export function useCannonBuild(safe: SafeDefinition, def: ChainDefinition, prevD
       address: settings.registryAddress,
     });
 
-    const ipfsLoader = new IPFSBrowserLoader(settings.ipfsApiUrl);
+    const ipfsLoader = new IPFSBrowserLoader(settings.ipfsApiUrl || 'https://repo.usecannon.com/');
 
     setBuildStatus('Loading deployment data...');
 
@@ -240,6 +244,10 @@ export function useCannonWriteDeployToIpfs(
   const writeToIpfsMutation = useMutation<IPFSPackageWriteResult>({
     ...mutationOptions,
     mutationFn: async () => {
+      if (settings.isIpfsGateway) {
+        throw new Error('You cannot write on an IPFS gateway, only read operations can be done');
+      }
+
       const def = new ChainDefinition(deployInfo.def);
       const ctx = await createInitialContext(def, deployInfo.meta, runtime.chainId, deployInfo.options);
 
@@ -252,7 +260,11 @@ export function useCannonWriteDeployToIpfs(
 
       const publishTxns = await publishPackage({
         fromStorage: runtime,
-        toStorage: new CannonStorage(memoryRegistry, { ipfs: new IPFSBrowserLoader(settings.ipfsApiUrl) }, 'ipfs'),
+        toStorage: new CannonStorage(
+          memoryRegistry,
+          { ipfs: new IPFSBrowserLoader(settings.ipfsApiUrl || 'https://repo.usecannon.com/') },
+          'ipfs'
+        ),
         packageRef,
         variant,
         tags: ['latest'],