move IPFS config for client & server

.travis.yml

@@ -26,6 +26,12 @@ env:
     - REACT_APP_SECRET_STORE_URI="http://localhost:12001"
     - REACT_APP_FAUCET_URI="http://localhost:3001"
     - REACT_APP_BRIZO_ADDRESS="0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0"
+
+    # IPFS client & server config
+    - REACT_APP_IPFS_GATEWAY_URI="https://ipfs.dev-ocean.com"
+    # - REACT_APP_IPFS_NODE_URI="https://ipfs.dev-ocean.com:5050"
+    - IPFS_GATEWAY_URI="https://ipfs.dev-ocean.com"
+
     # start Barge with these versions
     - BRIZO_VERSION=v0.4.4
     - AQUARIUS_VERSION=v0.3.8

client/.env.local.example

@@ -59,4 +59,5 @@ REACT_APP_REPORT_EMAIL="test@example.com"
 # REACT_APP_SHOW_CHANNELS=true
 # REACT_APP_ALLOW_PRICING=true
 # REACT_APP_SHOW_REQUEST_TOKENS_BUTTON=true
-# REACT_APP_IPFS_GATEWAY_URI="https://gateway.ipfs.io"
+# REACT_APP_IPFS_GATEWAY_URI="https://ipfs.oceanprotocol.com"
+# REACT_APP_IPFS_NODE_URI="https://ipfs.oceanprotocol.com:5050"

client/src/config.ts

@@ -38,3 +38,6 @@ export const showRequestTokens =
 // https://ipfs.github.io/public-gateway-checker/
 export const ipfsGatewayUri =
     process.env.REACT_APP_IPFS_GATEWAY_URI || 'https://gateway.ipfs.io'
+
+export const ipfsNodeUri =
+    process.env.REACT_APP_IPFS_NODE_URI || 'https://ipfs.infura.io:5001'

client/src/routes/Publish/Files/Ipfs/Form.tsx

@@ -7,11 +7,13 @@ export default function Form({
     children,
     ipfsMessage,
     ipfsError,
+    isIpfsReady,
     error
 }: {
     children: any
     ipfsMessage: string
     ipfsError?: string
+    isIpfsReady: boolean
     error?: string
 }) {
     return (
@@ -20,7 +22,11 @@ export default function Form({
                 Add File To IPFS
             </Label>
             {children}
-            <Status message={ipfsMessage} error={ipfsError || error} />
+            <Status
+                message={ipfsMessage}
+                isIpfsReady={isIpfsReady}
+                error={ipfsError || error}
+            />
         </div>
     )
 }

client/src/routes/Publish/Files/Ipfs/Status.module.scss

@@ -10,10 +10,18 @@
         width: .5rem;
         height: .5rem;
         display: inline-block;
-        background: $green;
+        background: $yellow;
         border-radius: 50%;
-        margin-right: $spacer / 4;
+        margin-right: $spacer / 6;
-        margin-bottom: .05rem;
+        margin-bottom: .1rem;
+    }
+}
+
+.success {
+    composes: message;
+
+    &:before {
+        background: $green;
     }
 }
 

client/src/routes/Publish/Files/Ipfs/Status.tsx

@@ -3,11 +3,17 @@ import styles from './Status.module.scss'
 
 export default function Status({
     message,
-    error
+    error,
+    isIpfsReady
 }: {
     message: string
     error?: string
+    isIpfsReady: boolean
 }) {
-    const classes = error ? styles.error : styles.message
+    const classes = isIpfsReady
+        ? styles.success
+        : error
+        ? styles.error
+        : styles.message
     return <div className={classes}>{message}</div>
 }

client/src/routes/Publish/Files/Ipfs/index.tsx

@@ -4,17 +4,19 @@ import useIpfsApi, { IpfsConfig } from '../../../../hooks/use-ipfs-api'
 import Spinner from '../../../../components/atoms/Spinner'
 import Dropzone from '../../../../components/molecules/Dropzone'
 import { formatBytes, pingUrl, readFileAsync } from '../../../../utils/utils'
-import { ipfsGatewayUri } from '../../../../config'
+import { ipfsGatewayUri, ipfsNodeUri } from '../../../../config'
 import Form from './Form'
 
-const config: IpfsConfig = {
+const { hostname, port, protocol } = new URL(ipfsNodeUri)
-    host: 'ipfs.infura.io',
+
-    port: '5001',
+const ipfsConfig: IpfsConfig = {
-    protocol: 'https'
+    host: hostname,
+    port,
+    protocol: protocol.replace(':', '')
 }
 
 export default function Ipfs({ addFile }: { addFile(url: string): void }) {
-    const { ipfs, isIpfsReady, ipfsError, ipfsMessage } = useIpfsApi(config)
+    const { ipfs, isIpfsReady, ipfsError, ipfsMessage } = useIpfsApi(ipfsConfig)
     const [loading, setLoading] = useState(false)
     const [message, setMessage] = useState('')
     const [fileSize, setFileSize] = useState('')
@@ -80,7 +82,12 @@ export default function Ipfs({ addFile }: { addFile(url: string): void }) {
     }
 
     return (
-        <Form error={error} ipfsMessage={ipfsMessage} ipfsError={ipfsError}>
+        <Form
+            error={error}
+            ipfsMessage={ipfsMessage}
+            ipfsError={ipfsError}
+            isIpfsReady={isIpfsReady}
+        >
             {loading ? (
                 <Spinner message={message} />
             ) : (

server/.env.example

@@ -1,2 +1,2 @@
 SENDGRID_API_KEY='xxx'
-IPFS_GATEWAY_URL='https://gateway.ipfs.io'
+IPFS_GATEWAY_URI='https://ipfs.dev-ocean.com'

server/src/config.ts

@@ -3,7 +3,7 @@ import 'dotenv/config'
 const config = {
     app: { port: 4000 },
     sendgridApiKey: process.env.SENDGRID_API_KEY,
-    ipfsGatewayUrl: process.env.IPFS_GATEWAY_URL || 'https://gateway.ipfs.io'
+    ipfsGatewayUri: process.env.IPFS_GATEWAY_URI || 'https://gateway.ipfs.io'
 }
 
 export default config

server/src/routes/UrlCheckRouter.ts

@@ -22,7 +22,7 @@ export class UrlCheckRouter {
         // map native IPFS URLs to gateway URLs
         if (url.includes('ipfs://')) {
             const cid = url.split('ipfs://')[1]
-            url = `${config.ipfsGatewayUrl}/ipfs/${cid}`
+            url = `${config.ipfsGatewayUri}/ipfs/${cid}`
         }
 
         request(