feat: add an ipfs gateway selector to the settings

.env

@@ -1,27 +1,18 @@
-# prod
-# VITE_TEIA_REPORT='https://raw.githubusercontent.com/teia-community/teia-report/main'
 VITE_TEIA_REPORT='https://lists.teia.art'
-
-
 VITE_LOGOS='https://lists.teia.art/teia-logos/dist'
-
-VITE_TEIA_GRAPHQL_API='https://teztok.teia.rocks/v1/graphql'
-# VITE_TEIA_GRAPHQL_API='https://teia-api.teztok.com/v1/graphql'
+VITE_TEIA_GRAPHQL_API='https://teztok.teia.art/v1/graphql'
 VITE_TEZOSDOMAINS_GRAPHQL_API='https://api.tezos.domains/graphql'
 VITE_TZKT_API='https://api.tzkt.io'
-
 VITE_TZPROFILES_GRAPHQL_API='https://indexer.tzprofiles.com/v1/graphql'
-
-VITE_IMGPROXY='https://imgproxy.teia.rocks'
-
-VITE_IPFS_UPLOAD_PROXY='https://ipfsproxy.teia.rocks'
+VITE_IMGPROXY='https://imgproxy.teia.art'
+VITE_IPFS_UPLOAD_PROXY='https://ipfsproxy.teia.art'
 VITE_IPFS_DEFAULT_GATEWAY='CDN'
 
-VITE_TEZOS_RPC='https://mainnet.teia.rocks'
+VITE_TEZOS_RPC='https://mainnet.teia.art'
 
 # optional, for use with your own imgproxy instance
 # see https://docs.imgproxy.net/usage/signing_url
 IMGPROXY_SALT=''
 IMGPROXY_KEY=''
 # optional, for use in twitter/farcaster cards, empty = https://nftstorage.link/ipfs/
-IPFS_GATEWAY='https://cache.teia.rocks/ipfs/'
+IPFS_GATEWAY='https://cache.teia.art/ipfs/'

docker/nginx.conf

@@ -89,11 +89,7 @@ http {
         add_header Pragma "public";
         add_header Cache-Control "public";
         charset utf-8;
-
-        location = /favicon.ico {
-            root /usr/local/openresty/nginx/html/icons;
-        }
-
+
         location = /index.html {
             include /header.conf;
             add_header Cache-Control no-store always;

index.html

@@ -29,8 +29,8 @@
       color="#5bbad5"
     />
     <link rel="shortcut icon" href="/icons/favicon.ico?v=1" />
-    <link rel="preconnect" href="https://cache.teia.rocks" />
-    <link rel="preconnect" href="https://imgproxy.teia.rocks" />
+    <link rel="preconnect" href="https://cache.teia.art" />
+    <link rel="preconnect" href="https://imgproxy.teia.art" />
     <link rel="preconnect" href="https://lists.teia.art" />
     <meta name="build-commit" content="<%=BUILD_COMMIT%>" />
     <meta name="msapplication-TileColor" content="#ffc40d" />

src/components/media-types/index.tsx

@@ -14,6 +14,9 @@ import { MD } from './md'
 import { useMemo } from 'react'
 import { NFT } from '@types'
 
+import { useLocalSettings } from '@context/localSettingsStore'
+import { shallow } from 'zustand/shallow'
+
 interface RenderMediaTypeProps {
   /**The nft with the core fragments*/
   nft: NFT
@@ -37,12 +40,10 @@ export const RenderMediaType = ({
   displayView,
   details,
 }: RenderMediaTypeProps) => {
+  const [ipfsGateway] = useLocalSettings((s) => [s.getIpfsGateway()], shallow)
   const parsedArtifactUri = useMemo(
-    () =>
-      nft.artifact_uri
-        ? HashToURL(nft.artifact_uri, 'CDN', { size: 'raw' })
-        : '',
-    [nft]
+    () => (nft.artifact_uri ? HashToURL(nft.artifact_uri, ipfsGateway) : ''),
+    [nft, ipfsGateway]
   )
   if (!nft) {
     throw Error(`No OBJKT to render`)
@@ -64,13 +65,12 @@ export const RenderMediaType = ({
     if (previewDisplayUri) {
       return previewDisplayUri
     }
-    if (nft.display_uri)
-      return HashToURL(nft.display_uri, 'CDN', { size: 'raw' })
+    if (nft.display_uri) return HashToURL(nft.display_uri, ipfsGateway)
 
     if (nft.mime_type?.startsWith('video')) {
-      return HashToURL(nft.artifact_uri, 'CDN', { size: 'raw' })
+      return HashToURL(nft.artifact_uri, ipfsGateway)
     }
-  }, [nft, previewDisplayUri])
+  }, [nft, previewDisplayUri, ipfsGateway])
 
   const Media = useMemo(() => {
     switch (nft.mime_type) {

src/context/localSettingsStore.ts

@@ -17,30 +17,48 @@ export const rpc_nodes = [
   'https://rpc.tzbeta.net',
   'https://mainnet.tezos.marigold.dev',
   'https://rpc.tzkt.io/mainnet',
-  'https://mainnet.teia.rocks',
+  'https://mainnet.teia.art',
   'https://teia.art/rpc',
   'custom',
 ] as const
 
+export const ipfs_gateways = [
+  'CDN',
+  'CLOUDFLARE',
+  'PINATA',
+  'IPFS',
+  'DWEB',
+  'NFTSTORAGE',
+  'NATIVE',
+  'custom',
+] as const
+
 type FeedType = (typeof FEED_LIST)[number]
 
 export type RPC_NODES = (typeof rpc_nodes)[number]
 
+export type IPFS_GATEWAYS = (typeof ipfs_gateways)[number]
+
 interface LocalSettingsState {
   applyTheme: (theme: Theme) => void
   has_seen_banner: boolean
   nsfwFriendly: boolean
   photosensitiveFriendly: boolean
   startFeed: FeedType
   rpcNode: RPC_NODES
+  ipfsGateway: IPFS_GATEWAYS
   /** Use this to query the current rpc url since it will also resolve the custom one.*/
   getRpcNode: () => RPC_NODES | string
+  getIpfsGateway: (this: LocalSettingsState) => IPFS_GATEWAYS | string
   customRpcNode: string
+  customIpfsGateway: string
   setCustomRpcNode: (v: string) => void
+  setCustomIpfsGateway: (v: string) => void
   setNsfwFriendly: (v: boolean) => void
   setPhotosensitiveFriendly: (v: boolean) => void
   setStartFeed: (v: FeedType | undefined) => void
   setRpcNode: (rpcNode?: RPC_NODES) => Promise<void>
+  setIpfsGateway: (ipfsGateway?: IPFS_GATEWAYS) => Promise<void>
   setTheme: (theme: Theme, apply?: boolean) => void
   setTilted: (tilted: boolean) => void
   setImgproxy: (imgproxy: boolean) => void
@@ -68,8 +86,10 @@ const defaultValues = {
   theme: 'dark' as Theme,
   themeDark: 'dark' as Theme,
   themeLight: 'light' as Theme,
-  rpcNode: rpc_nodes[5],
+  rpcNode: rpc_nodes[5], // https://mainnet.teia.art
+  ipfsGateway: ipfs_gateways[0], // CDN
   customRpcNode: '',
+  customIpfsGateway: '',
   tilted: false,
   imgproxy: true,
   has_seen_banner: false,
@@ -133,6 +153,32 @@ export const useLocalSettings = create<LocalSettingsState>()(
           // )
           // await useUserStore.getState().sync({ rpcNode })
         },
+        getIpfsGateway: () => {
+          const ipfsGateway = get().ipfsGateway
+          if (ipfsGateway === 'custom') {
+            const custom = get().customIpfsGateway
+            return custom || ipfsGateway
+          }
+          return ipfsGateway
+        },
+        setCustomIpfsGateway: (customIpfsGateway: string) => {
+          if (!customIpfsGateway) {
+            return
+          }
+          if (!customIpfsGateway.startsWith('http')) {
+            customIpfsGateway = `https://${customIpfsGateway}`
+          }
+          set({ customIpfsGateway })
+        },
+        setIpfsGateway: async (ipfsGateway) => {
+          // const show = useModalStore.getState().show
+          set({ ipfsGateway })
+          // show(
+          //   'RPC Node Changed',
+          //   'Please reload the page for it to take effect.'
+          // )
+          // await useUserStore.getState().sync({ rpcNode })
+        },
         setNsfwFriendly: (nsfwFriendly) => set({ nsfwFriendly }),
         setPhotosensitiveFriendly: (photosensitiveFriendly) =>
           set({ photosensitiveFriendly }),

src/env.d.ts

@@ -12,14 +12,6 @@ interface ImportMetaEnv {
   readonly VITE_TZPROFILES_GRAPHQL_API: string
   readonly VITE_IMGPROXY: string
   readonly VITE_IPFS_UPLOAD_PROXY: string
-  readonly VITE_IPFS_DEFAULT_GATEWAY:
-    | 'CDN'
-    | 'CLOUDFLARE'
-    | 'PINATA'
-    | 'IPFS'
-    | 'DWEB'
-    | 'NFTSTORAGE'
-  readonly VITE_TEZOS_RPC: string
 }
 
 interface ImportMeta {

src/pages/config/Settings.jsx

@@ -3,7 +3,11 @@
 import { Page } from '@atoms/layout'
 import { Checkbox, Input } from '@atoms/input'
 import styles from '@style'
-import { rpc_nodes, useLocalSettings } from '@context/localSettingsStore'
+import {
+  rpc_nodes,
+  ipfs_gateways,
+  useLocalSettings,
+} from '@context/localSettingsStore'
 import { FEED_LIST } from '@constants'
 import { Select, ThemeSelection } from '@atoms/select'
 import { Line } from '@atoms/line'
@@ -38,6 +42,10 @@ export const Settings = () => {
     setRpcNode,
     customRpcNode,
     setCustomRpcNode,
+    ipfsGateway,
+    setIpfsGateway,
+    customIpfsGateway,
+    setCustomIpfsGateway,
     tilted,
     setTilted,
     imgproxy,
@@ -55,6 +63,10 @@ export const Settings = () => {
     st.setRpcNode,
     st.customRpcNode,
     st.setCustomRpcNode,
+    st.ipfsGateway,
+    st.setIpfsGateway,
+    st.customIpfsGateway,
+    st.setCustomIpfsGateway,
     st.tilted,
     st.setTilted,
     st.imgproxy,
@@ -132,6 +144,26 @@ export const Settings = () => {
             />
           )}
           <Line />
+          <Select
+            label={'IFPS Gateway'}
+            value={{ label: ipfsGateway, value: ipfsGateway }}
+            options={ipfs_gateways.map((e) => ({ label: e, value: e }))}
+            onChange={(e) => {
+              setIpfsGateway(e.value)
+            }}
+          />
+          {ipfsGateway === 'custom' && (
+            <Input
+              name="custom-ipfs"
+              value={customIpfsGateway}
+              onChange={setCustomIpfsGateway}
+              placeholder="url to an IPFS gateway"
+              label="Custom IPFS gateway"
+              // pattern={'^(?:https?|http):\\/\\/[^\\s\\/$.?#].[^\\s]*$'}
+            />
+          )}
+          <Line />
+
           <Checkbox
             alt={`click to ${
               tilted ? 'disable' : 'enable'

src/pages/objkt-display/tabs/Info.jsx

@@ -7,6 +7,8 @@ import { HEN_CONTRACT_FA2, LANGUAGES, LICENSE_TYPES } from '@constants'
 import { getWordDate } from '@utils/time'
 import { Line } from '@atoms/line'
 import { useObjktDisplayContext } from '..'
+import { useLocalSettings } from '@context/localSettingsStore'
+import { shallow } from 'zustand/shallow'
 
 const Attribute = ({ label, value }) => {
   return (
@@ -21,15 +23,22 @@ const Attribute = ({ label, value }) => {
  */
 export const Info = () => {
   const { nft, viewer_address } = useObjktDisplayContext()
+  const [ipfsGateway] = useLocalSettings(
+    (state) => [state.getIpfsGateway()],
+    shallow
+  )
+
   const artifact_ipfs_url =
-    HashToURL(nft.artifact_uri) +
+    HashToURL(nft.artifact_uri, ipfsGateway) +
     `/?creator=${nft.artist_address}&viewer=${viewer_address || ''}&objkt=${
       nft.token_id
     }`
+
+  const metadata_ipfs_url = HashToURL(nft.metadata_uri, ipfsGateway)
   const artifact_anaverse_url = viewer_address
     ? `https://anaver.se/?gallery=1&loadsingle=1&singlecontract=${HEN_CONTRACT_FA2}&singletokenid=${nft.token_id}&wallet=${viewer_address}&partnerPlatform=teia.art`
     : `https://anaver.se/?gallery=1&loadsingle=1&singlecontract=${HEN_CONTRACT_FA2}&singletokenid=${nft.token_id}&partnerPlatform=teia.art`
-  const metadata_ipfs_url = HashToURL(nft.metadata_uri)
+
   return (
     <>
       <Container>