Add ability to pass custom ipfs gateway to rmrk config provider

.changeset/mean-timers-end.md

@@ -0,0 +1,6 @@
+---
+'@rmrk-team/nft-renderer': patch
+'@rmrk-team/ipfs-utils': patch
+---
+
+Add ability to pass ipfsGateway to rmrk config provider to be used in ipfs fetching hooks

apps/composable-nft-renderer-app/components/app/providers.tsx

@@ -27,7 +27,7 @@ const customUtilityContracts = {
 } satisfies RMRKUtilityContracts;
 
 const rmrkConfig = {
-  utilityContracts: customUtilityContracts,
+  utilityContracts: customUtilityContracts
 };
 
 export const Providers = ({ children }: { children: React.ReactNode }) => {

packages/ipfs-utils/src/lib/ipfs.ts

@@ -84,16 +84,28 @@ export const convertToDesiredGateway = (
 
 export const sanitizeIpfsUrl = (
   ipfsUrl?: string | null,
-  gatewayUrl = DEFAULT_IPFS_GATEWAY_URLS[DEFAULT_IPFS_GATEWAY_KEYS.pinata],
+  gatewayUrl?: string,
 ) => {
   if (!ipfsUrl || typeof ipfsUrl !== 'string') return '';
 
   if (ipfsUrl.startsWith('http') && !containsCID(ipfsUrl).containsCid) {
     return ipfsUrl.replace('http://', 'https://');
   }
 
+  // If no gateway url is passed, and url contains cid, and url already starts with http, just return it as is
+  if (
+    ipfsUrl.startsWith('http') &&
+    containsCID(ipfsUrl).containsCid &&
+    !gatewayUrl
+  ) {
+    return ipfsUrl.replace('http://', 'https://');
+  }
+
   if (containsCID(ipfsUrl).containsCid) {
-    return convertToDesiredGateway(ipfsUrl, gatewayUrl);
+    return convertToDesiredGateway(
+      ipfsUrl,
+      gatewayUrl || DEFAULT_IPFS_GATEWAY_URLS[DEFAULT_IPFS_GATEWAY_KEYS.pinata],
+    );
   }
 
   return '';

packages/nft-renderer/package.json

@@ -51,7 +51,8 @@
     "@rainbow-me/rainbowkit": "^2.0.0-beta.0",
     "@rmrk-team/rmrk-2d-renderer": "workspace:*",
     "@rmrk-team/rmrk-evm-utils": "workspace:*",
-    "@rmrk-team/rmrk-hooks": "workspace:*"
+    "@rmrk-team/rmrk-hooks": "workspace:*",
+    "@rmrk-team/ipfs-utils": "workspace:*"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",

packages/nft-renderer/src/components/nft-renderer.tsx

@@ -1,10 +1,12 @@
+import { sanitizeIpfsUrl } from '@rmrk-team/ipfs-utils';
 import { MultiLayer2DRenderer } from '@rmrk-team/rmrk-2d-renderer';
 import { RMRKCatalogImpl, RMRKEquippableImpl } from '@rmrk-team/rmrk-evm-utils';
 import {
   useFetchIpfsMetadata,
   useGetAssetData,
   useGetComposedState,
   useGetInterfaceSupport,
+  useRMRKConfig,
 } from '@rmrk-team/rmrk-hooks';
 import React, { useEffect, useRef, useState } from 'react';
 import { css } from 'styled-system/css';
@@ -98,6 +100,8 @@ export function NFTRenderer({
   const rendererContainerRef = useRef<null | HTMLDivElement>(null);
   const tokenIdBigint = BigInt(tokenId);
 
+  const rmrkConfig = useRMRKConfig();
+
   const {
     isContract,
     isLoading: isLoadingIsContract,
@@ -187,11 +191,17 @@ export function NFTRenderer({
       ? [
           ...fixedPartsWithMetadatas.map((p) => ({
             z: p.z,
-            src: p.metadata?.mediaUri || '',
+            src: sanitizeIpfsUrl(
+              p.metadata?.mediaUri || '',
+              rmrkConfig.ipfsGateway,
+            ),
           })),
           ...slotPartsWithMetadatas.map((p) => ({
             z: p.z,
-            src: p.metadata?.mediaUri || '',
+            src: sanitizeIpfsUrl(
+              p.metadata?.mediaUri || '',
+              rmrkConfig.ipfsGateway,
+            ),
           })),
         ]
       : undefined;
@@ -200,16 +210,26 @@ export function NFTRenderer({
     ? [
         {
           z: 1,
-          src:
+          src: sanitizeIpfsUrl(
             primaryAsset?.metadata?.mediaUri ||
-            primaryAsset?.metadata?.image ||
-            '',
+              primaryAsset?.metadata?.image ||
+              '',
+            rmrkConfig.ipfsGateway,
+          ),
         },
       ]
     : undefined;
 
   const tokenRenderPart: RenderPart[] | undefined = primaryAsset
-    ? [{ z: 1, src: tokenMetadata?.mediaUri || tokenMetadata?.image || '' }]
+    ? [
+        {
+          z: 1,
+          src: sanitizeIpfsUrl(
+            tokenMetadata?.mediaUri || tokenMetadata?.image || '',
+            rmrkConfig.ipfsGateway,
+          ),
+        },
+      ]
     : undefined;
 
   const renderParts = catalogRenderParts || assetRenderPart || tokenRenderPart;