[OTHERS] Don't put the gateway (https://w3s.link/ipfs/) as part of the logo "url"

[NatoBoram]

What: In https://github.com/revanced/revanced-polling-api/blob/main/app/data/processed.json, assets have an URL property that includes a public IPFS gateway.

      "logo_direct_url": "https://w3s.link/ipfs/bafybeifdlulzs7kwoc2kjzcfkzmijk7xiv6nv4tw5twkzk5e7puk4bnxvm/19.png",
      "optimized_direct_url": "https://bafybeieorn7awg6dpo7r4xafkp72ogcl6xjpxsbn5u4tvpkyhkcf77dhxa.ipfs.w3s.link/19.webp"

Ideally, only the IPFS hash + route should be stored here

      "logo_direct_url": "bafybeifdlulzs7kwoc2kjzcfkzmijk7xiv6nv4tw5twkzk5e7puk4bnxvm/19.png",
      "optimized_direct_url": "bafybeieorn7awg6dpo7r4xafkp72ogcl6xjpxsbn5u4tvpkyhkcf77dhxa/19.webp"

Why:

This form is more canonical; it is used by the IPFS CLI. Example:

ipfs get bafybeifdlulzs7kwoc2kjzcfkzmijk7xiv6nv4tw5twkzk5e7puk4bnxvm/19.png
Saving file(s) to 19.png
 3.32 MiB / 3.32 MiB [==================================================================] 100.00% 0s

This allows the client to use any arbitrary IPFS HTTP gateways, including localhost:8080.

It's important to consider localhost:8080 because this allows IPFS users to help seeding assets as they visit the website that uses them.

For example, one could check if localhost:8080 is able to serve IPFS traffic and decide to use a public or the local gateway:

async function selectIpfsGateway(): Promise<string> {
	const response: { success: boolean } = await fetch(
		'http://localhost:8080/ipfs/QmZnG6Qfx5yySaERWoJoqABct2iY8snN2jQfnceTwmDLUo/success.json',
	)
		.then(r => r.json())
		.catch(() => ({ success: false }))

	return response.success ? 'http://localhost:8080/ipfs/' : 'https://ipfs.io/ipfs/'
}

Note

This does require modifying connect-src to include localhost

When:

Who:

Where:

OBS:

[oSumAtrIX]

This will require the frontends to prefix a gateway, how would you suggest to do that?

[NatoBoram]

Here's some ideas.

The front-end could have a preference for one or many public gateways to use as a fallback in case the local one is unavailable. It could come from an environment variable, from a JSON file, or even from the back-end itself since it could probably host an IPFS node.

Once it's decided, it can be set in a Svelte Store or something and a component should handle receiving and displaying that data. Example:

<script lang="ts">
	import { ipfsGatewayUrl } from '$lib/stores/ipfs_gateway_url.ts'

	export let page: {
		id: string
		logo_direct_url: string
		optimized_direct_url: null | string
	}[]

</script>

<div class="grid grid-cols-2">
	{#each page as asset (asset.id)}
		<img
			src="{$ipfsGatewayUrl}/{asset.optimized_direct_url ?? asset.logo_direct_url}"
			alt={asset.id}
		/>
	{/each}
</div>

In this example, ipfsGatewayUrl doesn't even need to be an IPFS gateway, it could also be a regular assets folder on the website itself.

That said, it seem like using https://w3s.link/ipfs/ as your public gateway is the correct choice since assets are uploaded there, so I'm really wondering why I have empty blocks in the UI. I guess that #2 can help, but also maybe there's some huge assets for some reason and that makes it harder to display them.