feat: replace Infura IPFS credentials with a Pinata JWT and gateway token

.env.example

@@ -6,11 +6,12 @@ REACT_APP_WIDGETS_URL=https://boson-widgets-testing.pages.dev
 # PRODUCTION
 # REACT_APP_WIDGETS_URL=https://widgets.bosonprotocol.io
 
-# Infura IPFS project ID, used for auth header
-REACT_APP_INFURA_IPFS_PROJECT_ID=
+# Pinata JWT, used for the auth header when uploading to IPFS
+REACT_APP_IPFS_JWT=
 
-# Infura IPFS project secret, used for auth header
-REACT_APP_INFURA_IPFS_PROJECT_SECRET=
+# Optional. Access token for a dedicated Pinata gateway (*.mypinata.cloud) that
+# restricts reads. Leave unset when the gateway serves reads publicly.
+# REACT_APP_IPFS_GATEWAY_TOKEN=
 
 # A Biconomy API key can be set here, to allow meta transactions in the widgets
 REACT_APP_META_TX_API_KEY_MAP={"testing-80002-0":"xxxxxx", "testing-5-0":"xxxxxx"}
@@ -36,8 +37,8 @@ REACT_APP_DEFAULT_RESOLUTION_PERIOD_DAYS=15
 
 REACT_APP_GOOGLE_TAG_ID="GTM-ID"
 
-REACT_APP_IPFS_GATEWAY=https://bosonprotocol.infura-ipfs.io/ipfs
-REACT_APP_IPFS_IMAGE_GATEWAY=https://bosonprotocol.infura-ipfs.io/ipfs
+REACT_APP_IPFS_GATEWAY=https://<your-gateway>.mypinata.cloud/ipfs
+REACT_APP_IPFS_IMAGE_GATEWAY=https://<your-gateway>.mypinata.cloud/ipfs
 
 # Values will be added in CI
 REACT_APP_RELEASE_TAG=

.github/workflows/deploy_reusable.yaml

@@ -100,8 +100,10 @@ jobs:
       REACT_APP_MOONPAY_API_KEY: ${{ secrets.REACT_APP_MOONPAY_API_KEY }}
       REACT_APP_GOOGLE_TAG_ID: ${{ secrets.REACT_APP_GOOGLE_TAG_ID }}
       REACT_APP_META_TX_API_KEY_MAP: ${{ secrets.REACT_APP_META_TX_API_KEY_MAP }}
-      REACT_APP_INFURA_IPFS_PROJECT_ID: ${{ secrets.REACT_APP_INFURA_IPFS_PROJECT_ID }}
-      REACT_APP_INFURA_IPFS_PROJECT_SECRET: ${{ secrets.REACT_APP_INFURA_IPFS_PROJECT_SECRET }}
+      REACT_APP_IPFS_JWT: ${{ secrets.REACT_APP_IPFS_JWT }}
+      # Optional, unlike the JWT above: only an environment whose REACT_APP_IPFS_GATEWAY
+      # restricts reads needs one, so it is absent from the required-value check below.
+      REACT_APP_IPFS_GATEWAY_TOKEN: ${{ secrets.REACT_APP_IPFS_GATEWAY_TOKEN }}
 
     steps:
       - uses: actions/checkout@v4
@@ -226,6 +228,7 @@ jobs:
             REACT_APP_MOONPAY_LINK \
             REACT_APP_MOONPAY_EXTERNAL_LINK \
             REACT_APP_IPFS_GATEWAY \
+            REACT_APP_IPFS_JWT \
             REACT_APP_RNFT_LICENSE_TEMPLATE \
             REACT_APP_BUYER_SELLER_AGREEMENT_TEMPLATE \
             REACT_APP_FAIR_EXCHANGE_POLICY_RULES \

package.json

@@ -50,8 +50,8 @@
   "dependencies": {
     "@apollo/client": "^3.8.1",
     "@bosonprotocol/chat-sdk": "^1.4.5",
-    "@bosonprotocol/common": "1.32.2",
-    "@bosonprotocol/react-kit": "0.42.1",
+    "@bosonprotocol/common": "1.35.0-alpha.0",
+    "@bosonprotocol/react-kit": "0.43.0-alpha.0",
     "@davatar/react": "^1.10.4",
     "@ethersproject/abi": "5.7.0",
     "@ethersproject/abstract-provider": "5.8.0",

src/components/core-sdk/CoreSDKContext.tsx

@@ -14,6 +14,8 @@ export function useProviderCoreSDK() {
 
   return hooks.useCoreSdk({
     ipfsMetadataStorageHeaders: CONFIG.ipfsMetadataStorageHeaders,
+    ipfsGateway: CONFIG.ipfsGateway,
+    ipfsGatewayToken: CONFIG.ipfsGatewayToken,
     configId: config.envConfig.configId,
     envName: config.envName,
     ipfsMetadataStorageUrl: config.ipfsMetadataStorageUrl,

src/lib/config.ts

@@ -2,6 +2,7 @@ import {
   EnvironmentType,
   getEnvConfigs,
   getRpcUrls,
+  hooks,
   ProtocolConfig
 } from "@bosonprotocol/react-kit";
 import * as Sentry from "@sentry/browser";
@@ -38,8 +39,11 @@ if (!widgetsUrl) {
   throw new Error("REACT_APP_WIDGETS_URL is not defined");
 }
 
-const infuraProjectSecret = process.env.REACT_APP_INFURA_IPFS_PROJECT_SECRET;
-const infuraProjectId = process.env.REACT_APP_INFURA_IPFS_PROJECT_ID;
+// Pinata JWT, authenticating uploads to the IPFS metadata storage.
+const ipfsJwt = process.env.REACT_APP_IPFS_JWT;
+// Optional: only a gateway that restricts reads needs one. Ignored by the SDK
+// for any host that is not a dedicated Pinata gateway.
+const ipfsGatewayToken = process.env.REACT_APP_IPFS_GATEWAY_TOKEN;
 
 function getMetaTxApiIds(envConfig: ProtocolConfig) {
   const protocolAddress: string = envConfig.contracts.protocolDiamond;
@@ -193,12 +197,9 @@ export const CONFIG = {
   awsApiEndpoint: process.env.REACT_APP_AWS_API_ENDPOINT as string,
   uniswapApiUrl: process.env.REACT_APP_UNISWAP_API_URL as string,
   infuraKey,
-  infuraProjectId,
-  infuraProjectSecret,
-  ipfsMetadataStorageHeaders: getIpfsMetadataStorageHeaders(
-    infuraProjectId,
-    infuraProjectSecret
-  ),
+  ipfsJwt,
+  ipfsGatewayToken,
+  ipfsMetadataStorageHeaders: hooks.getIpfsHeaders({ ipfsJwt }),
   magicLinkKey: process.env.REACT_APP_MAGIC_API_KEY as string,
   rpcUrls: getRpcUrls(infuraKey),
   widgetsUrl,
@@ -267,18 +268,3 @@ function stringToBoolean(value: unknown | undefined, defaultValue: boolean) {
 
   return Boolean(value);
 }
-
-function getIpfsMetadataStorageHeaders(
-  infuraProjectId?: string,
-  infuraProjectSecret?: string
-) {
-  if (!infuraProjectId && !infuraProjectSecret) {
-    return undefined;
-  }
-
-  return {
-    authorization: `Basic ${Buffer.from(
-      infuraProjectId + ":" + infuraProjectSecret
-    ).toString("base64")}`
-  };
-}

src/lib/utils/hooks/useIpfsStorage.ts

@@ -9,7 +9,9 @@ export function useIpfsStorage() {
     config.envConfig.configId,
     validateMetadata,
     config.ipfsMetadataStorageUrl,
-    CONFIG.ipfsMetadataStorageHeaders
+    CONFIG.ipfsMetadataStorageHeaders,
+    CONFIG.ipfsGateway,
+    CONFIG.ipfsGatewayToken
   );
   return storage;
 }

src/pages/common/OfferFullDescription.tsx

@@ -82,8 +82,6 @@ export const OfferFullDescription: React.FC<OfferFullDescriptionProps> = (
         defaultCurrencyTicker: CONFIG.defaultCurrency.ticker,
         licenseTemplate: CONFIG.rNFTLicenseTemplate,
         minimumDisputeResolutionPeriodDays: CONFIG.minimumDisputePeriodInDays,
-        ipfsProjectId: CONFIG.infuraProjectId,
-        ipfsProjectSecret: CONFIG.infuraProjectSecret,
         contactSellerForExchangeUrl: "",
         sellerCurationListBetweenCommas:
           curationLists?.sellerCurationList?.join(",") || "",