Merge pull request #266 from gnosis/issue-#260

Chore: Infura Environment Variables Naming Update

.github/workflows/dev-cd.yaml

@@ -6,7 +6,9 @@ on:
 
 env:
   REACT_APP_POSTER_CONTRACT: ${{ secrets.REACT_APP_POSTER_CONTRACT }}
-  REACT_APP_INFURA_KEY: ${{ secrets.REACT_APP_INFURA_KEY }}
+  REACT_APP_INFURA_NETWORK_ACCESS_KEY: ${{ secrets.REACT_APP_INFURA_NETWORK_ACCESS_KEY }}
+  REACT_APP_INFURA_IPFS_API_KEY: ${{ secrets.REACT_APP_INFURA_IPFS_API_KEY }}
+  REACT_APP_INFURA_IPFS_API_SECRET: ${{ secrets.REACT_APP_INFURA_IPFS_API_SECRET }}
   REACT_APP_SUBGRAPH_BASE_URL: https://api.thegraph.com/subgraphs/name/
   REACT_APP_SUBGRAPH_GNOSIS_CHAIN: auryn-macmillan/tabula-gnosis-chain
   REACT_APP_SUBGRAPH_MAINNET: auryn-macmillan/tabula-mainnet

.github/workflows/prod-release-deploy.yaml

@@ -6,7 +6,9 @@ on:
 
 env:
   REACT_APP_POSTER_CONTRACT: ${{ secrets.REACT_APP_POSTER_CONTRACT }}
-  REACT_APP_INFURA_KEY: ${{ secrets.REACT_APP_INFURA_KEY }}
+  REACT_APP_INFURA_NETWORK_ACCESS_KEY: ${{ secrets.REACT_APP_INFURA_NETWORK_ACCESS_KEY }}
+  REACT_APP_INFURA_IPFS_API_KEY: ${{ secrets.REACT_APP_INFURA_IPFS_API_KEY }}
+  REACT_APP_INFURA_IPFS_API_SECRET: ${{ secrets.REACT_APP_INFURA_IPFS_API_SECRET }}
   REACT_APP_SUBGRAPH_BASE_URL: https://api.thegraph.com/subgraphs/name/
   REACT_APP_SUBGRAPH_GNOSIS_CHAIN: auryn-macmillan/tabula-gnosis-chain
   REACT_APP_SUBGRAPH_MAINNET: auryn-macmillan/tabula-mainnet

packages/app/.env.example

@@ -1,4 +1,4 @@
-REACT_APP_INFURA_KEY=
+REACT_APP_INFURA_NETWORK_ACCESS_KEY=
 REACT_APP_POSTER_CONTRACT=0x000000000000cd17345801aa8147b8D3950260FF
 REACT_APP_SUBGRAPH_BASE_URL=https://api.thegraph.com/subgraphs/name/
 REACT_APP_SUBGRAPH_GNOSIS_CHAIN=auryn-macmillan/tabula-gnosis-chain
@@ -12,5 +12,6 @@ REACT_APP_ENS_SUBGRAPH_MAINNET=ensdomains/ens
 REACT_APP_ENS_SUBGRAPH_GOERLI=ensdomains/ensgoerli
 REACT_APP_IPFS_GATEWAY=https://ipfs.io/ipfs
 REACT_APP_SUBGRAPH_OPTIMISM_ON_GNOSIS_CHAIN=auryn-macmillan/tabula-optimism-on-gnosis-chain
-REACT_APP_INFURA_API_KEY=
-REACT_APP_INFURA_API_KEY_SECRET=
+REACT_APP_INFURA_IPFS_API_KEY=
+REACT_APP_INFURA_IPFS_API_SECRET=
+

packages/app/src/components/layout/ArticleHeader.tsx

@@ -13,12 +13,13 @@ import Avatar from "../commons/Avatar"
 // import { useOnClickOutside } from "../../hooks/useOnClickOutside"
 import { useIpfs } from "../../hooks/useIpfs"
 import useLocalStorage from "../../hooks/useLocalStorage"
-import { Pinning, PinningService } from "../../models/pinning"
+import { Pinning } from "../../models/pinning"
 import useArticles from "../../services/publications/hooks/useArticles"
 import usePoster from "../../services/poster/hooks/usePoster"
 import useArticle from "../../services/publications/hooks/useArticle"
 import { removeHashPrefixFromImages } from "../../utils/modifyHTML"
 import PinningConfigurationModal, { PinningConfigurationOption } from "../commons/PinningConfigurationModal"
+import { checkPinningRequirements } from "../../utils/pinning"
 
 type Props = {
   publication?: Publication
@@ -180,10 +181,6 @@ const ArticleHeader: React.FC<Props> = ({ publication, type }) => {
     setLoading(false)
   }
 
-  const checkPinningRequirements = (): boolean => {
-    return pinning && pinning.service === PinningService.NONE ? false : true
-  }
-
   //V2
   const prepareTransaction = async () => {
     let initialError = false
@@ -203,7 +200,7 @@ const ArticleHeader: React.FC<Props> = ({ publication, type }) => {
     setArticleContentError(false)
     setLoading(true)
     let articleContent = ""
-    if (contentImageFiles && checkPinningRequirements()) {
+    if (contentImageFiles && checkPinningRequirements(pinning)) {
       const articleWithHash = removeHashPrefixFromImages(articleEditorState as string)
       const parser = new DOMParser()
       let doc = parser.parseFromString(articleWithHash as string, "text/html")
@@ -244,7 +241,7 @@ const ArticleHeader: React.FC<Props> = ({ publication, type }) => {
     let articleThumbnail = ""
     let hashArticle
     const { title, article: draftArticleText, description, tags } = article
-    if (draftArticleThumbnail && checkPinningRequirements()) {
+    if (draftArticleThumbnail && checkPinningRequirements(pinning)) {
       await ipfs.uploadContent(draftArticleThumbnail).then(async (img) => {
         articleThumbnail = img.path
       })
@@ -258,7 +255,7 @@ const ArticleHeader: React.FC<Props> = ({ publication, type }) => {
         clearTransactionStates()
         throw new Error("Publication id is null")
       }
-      if (draftArticleText && checkPinningRequirements()) {
+      if (draftArticleText && checkPinningRequirements(pinning)) {
         hashArticle = await ipfs.uploadContent(draftArticleText)
       }
       if (title) {

packages/app/src/components/views/publication/PublicationsView.tsx

@@ -21,7 +21,8 @@ import { usePosterContext } from "../../../services/poster/context"
 import { useDynamicFavIcon } from "../../../hooks/useDynamicFavIco"
 import { usePublicationContext } from "../../../services/publications/contexts"
 import useLocalStorage from "../../../hooks/useLocalStorage"
-import { Pinning, PinningService } from "../../../models/pinning"
+import { Pinning } from "../../../models/pinning"
+import { checkPinningRequirements } from "../../../utils/pinning"
 
 const PublicationsAvatarContainer = styled(Grid)(({ theme }) => ({
   display: "flex",
@@ -150,7 +151,7 @@ export const PublicationsView: React.FC<PublicationsViewProps> = ({ updateChainI
     setLoading(true)
     const { title, description } = data
     let image
-    if (publicationImg && pinning && pinning.service !== PinningService.NONE) {
+    if (publicationImg && checkPinningRequirements(pinning)) {
       image = await ipfs.uploadContent(publicationImg)
     }
     if (title) {

packages/app/src/components/views/publication/components/ArticleContentSection.tsx

@@ -1,7 +1,6 @@
 import { Box } from "@mui/material"
 import React from "react"
 import { palette } from "../../../../theme"
-// import { EditableBlock } from "../../../commons/EditableBlock"
 import Editor from "../../../commons/Editor/Editor"
 
 export const ArticleContentSection: React.FC = React.memo(() => {
@@ -18,7 +17,6 @@ export const ArticleContentSection: React.FC = React.memo(() => {
       }}
     >
       <Box className="editor">
-        {/* <EditableBlock /> */}
         <Editor />
       </Box>
     </Box>

packages/app/src/connectors/index.ts

@@ -4,17 +4,17 @@ import { WalletConnectConnector } from "@web3-react/walletconnect-connector"
 import { WalletLinkConnector } from "@web3-react/walletlink-connector"
 import TABULA_LOGO_URL from "../assets/images/tabula-logo-wordmark.svg"
 
-export const INFURA_KEY = process.env.REACT_APP_INFURA_KEY
+export const INFURA_NETWORK_ACCESS_KEY = process.env.REACT_APP_INFURA_NETWORK_ACCESS_KEY
 
-if (typeof INFURA_KEY === "undefined") {
-  throw new Error(`REACT_APP_INFURA_KEY must be a defined environment variable`)
+if (typeof INFURA_NETWORK_ACCESS_KEY === "undefined") {
+  throw new Error(`REACT_APP_INFURA_NETWORK_ACCESS_KEY must be a defined environment variable`)
 }
 
 // not used when a wallet is injected (then the wallet's rpc is used)
 const NETWORK_URLS: { [key in SupportedChainId]: string } = {
-  [SupportedChainId.MAINNET]: `https://mainnet.infura.io/v3/${INFURA_KEY}`,
-  [SupportedChainId.GOERLI]: `https://goerli.infura.io/v3/${INFURA_KEY}`,
-  [SupportedChainId.SEPOLIA]: `https://sepolia.infura.io/v3/${INFURA_KEY}`,
+  [SupportedChainId.MAINNET]: `https://mainnet.infura.io/v3/${INFURA_NETWORK_ACCESS_KEY}`,
+  [SupportedChainId.GOERLI]: `https://goerli.infura.io/v3/${INFURA_NETWORK_ACCESS_KEY}`,
+  [SupportedChainId.SEPOLIA]: `https://sepolia.infura.io/v3/${INFURA_NETWORK_ACCESS_KEY}`,
   [SupportedChainId.GNOSIS_CHAIN]: `https://rpc.gnosischain.com/`,
   [SupportedChainId.POLYGON]: `https://polygon-rpc.com/`,
   [SupportedChainId.ARBITRUM]: `https://arb1.arbitrum.io/rpc/`,

packages/app/src/hooks/useIpfs.ts

@@ -5,12 +5,18 @@ import { useNotification } from "./useNotification"
 import { getClient } from "../services/ipfs"
 
 const IPFS_GATEWAY = process.env.REACT_APP_IPFS_GATEWAY
-const INFURA_API_KEY = process.env.REACT_APP_INFURA_API_KEY
-const INFURA_API_KEY_SECRET = process.env.REACT_APP_INFURA_API_KEY_SECRET
+const INFURA_IPFS_API_KEY = process.env.REACT_APP_INFURA_IPFS_API_KEY
+const INFURA_IPFS_API_KEY_SECRET = process.env.REACT_APP_INFURA_IPFS_API_SECRET
 
 if (IPFS_GATEWAY == null) {
   throw new Error("REACT_APP_IPFS_GATEWAY is not set")
 }
+if (INFURA_IPFS_API_KEY == null) {
+  throw new Error("REACT_APP_INFURA_IPFS_API_KEY is not set")
+}
+if (INFURA_IPFS_API_KEY_SECRET == null) {
+  throw new Error("REACT_APP_INFURA_IPFS_API_SECRET is not set")
+}
 
 export interface IpfsFunctions {
   uploadContent: (file: File | string) => Promise<{ cid?: any; path: string }>
@@ -63,7 +69,8 @@ export const useIpfs = (): IpfsFunctions => {
     const response = await axios.post(`https://ipfs.infura.io:5001/api/v0/add?pin=${pin}`, formData, {
       headers: {
         "Content-Type": "multipart/form-data",
-        Authorization: "Basic " + Buffer.from(`${INFURA_API_KEY}:${INFURA_API_KEY_SECRET}`).toString("base64"),
+        Authorization:
+          "Basic " + Buffer.from(`${INFURA_IPFS_API_KEY}:${INFURA_IPFS_API_KEY_SECRET}`).toString("base64"),
       },
     })
     // The returned data contains the CID of the file in IPFS, which is extracted and returned along with the path
@@ -83,7 +90,7 @@ export const useIpfs = (): IpfsFunctions => {
     console.log("uploading content")
     let result
 
-    if (pinning && pinning?.service === PinningService.PUBLIC) {
+    if (!pinning || (pinning && pinning?.service === PinningService.PUBLIC)) {
       try {
         result = await uploadToInfura(file, true)
       } catch (infuraError) {

packages/app/src/services/ens/hooks/useENS.ts

@@ -1,7 +1,7 @@
 import { useState, useCallback } from "react"
 import { ethers } from "ethers"
 import { SupportedChainId, chainParameters } from "../../../constants/chain"
-import { INFURA_KEY } from "../../../connectors"
+import { INFURA_NETWORK_ACCESS_KEY } from "../../../connectors"
 import { abiImplementation, abiPublicResolver, abiRegistry } from "../contracts/abi"
 import { useNotification } from "../../../hooks/useNotification"
 import { TransactionReceipt } from "@ethersproject/providers"
@@ -51,7 +51,7 @@ export const useENS = () => {
   }, [])
 
   const getTextRecordContentInfura = useCallback(async (ensName: string, textRecordKey: string) => {
-    const provider = new ethers.providers.InfuraProvider("mainnet", INFURA_KEY)
+    const provider = new ethers.providers.InfuraProvider("mainnet", INFURA_NETWORK_ACCESS_KEY)
     const resolver = await provider.getResolver(ensName)
     return resolver?.getText(textRecordKey)
   }, [])

packages/app/src/utils/modifyHTML.ts

@@ -16,7 +16,6 @@ export function removeHashPrefixFromImages(articleHTML: string): string {
   let modifiedHTMLString = Array.from(doc.body.childNodes)
     .map((node) => new XMLSerializer().serializeToString(node))
     .join("")
-
   return modifiedHTMLString
 }
 

packages/app/src/utils/pinning.ts

@@ -0,0 +1,5 @@
+import { Pinning, PinningService } from "../models/pinning"
+
+export const checkPinningRequirements = (pinning: Pinning | undefined): boolean => {
+  return pinning && pinning.service === PinningService.NONE ? false : true
+}