diff --git a/package.json b/package.json
index e0264b9..872c246 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"@oceanprotocol/art": "^2.2.0",
"@oceanprotocol/typographies": "^0.1.0",
"@zeit/next-css": "^1.0.1",
+ "axios": "^0.19.0",
"ipfs-http-client": "^39.0.0",
"next": "9.1.1",
"next-seo": "^2.1.2",
diff --git a/src/components/Add.tsx b/src/components/Add.tsx
index 53736d9..4b9a51a 100644
--- a/src/components/Add.tsx
+++ b/src/components/Add.tsx
@@ -24,9 +24,9 @@ const ipfsConfig: IpfsConfig = {
async function addToIpfs(
files: File[],
- setFileSizeReceived: (size: string) => void
+ setFileSizeReceived: (size: string) => void,
+ ipfs: any
) {
- const { ipfs } = useIpfsApi(ipfsConfig)
const file = [...files][0]
const fileDetails = { path: file.name, content: file }
@@ -36,12 +36,12 @@ async function addToIpfs(
})
// CID of wrapping directory is returned last
- const cid = response[response.length - 1].hash
+ const cid = `${response[response.length - 1].hash}/${file.name}`
return cid
}
export default function Add() {
- const { isIpfsReady, ipfsError } = useIpfsApi(ipfsConfig)
+ const { ipfs, isIpfsReady, ipfsError } = useIpfsApi(ipfsConfig)
const [fileHash, setFileHash] = useState()
const [loading, setLoading] = useState(false)
const [message, setMessage] = useState()
@@ -66,7 +66,7 @@ export default function Add() {
setFileSize(totalSize)
try {
- const cid = await addToIpfs(acceptedFiles, setFileSizeReceived)
+ const cid = await addToIpfs(acceptedFiles, setFileSizeReceived, ipfs)
if (!cid) return
setFileHash(cid)
setLoading(false)
@@ -89,14 +89,12 @@ export default function Add() {
ipfs://{fileHash}
) : (
- <>
-
- >
+
)}
)
diff --git a/src/components/Info.mdx b/src/components/Info.mdx
index dae7dc3..0725356 100644
--- a/src/components/Info.mdx
+++ b/src/components/Info.mdx
@@ -1,17 +1,18 @@
+import Status from './Status'
import styles from './Info.module.css'
-export default ({ children }) => (
-
-)
+export default ({ children }) => {
+ return
+}
-## Gateway
+## Gateway
```text
https://ipfs.oceanprotocol.com/ipfs/
https://ipfs.oceanprotocol.com/ipns/
```
-## API
+## API
The IPFS node exposes selected endpoints:
diff --git a/src/components/Status.module.css b/src/components/Status.module.css
new file mode 100644
index 0000000..12ac537
--- /dev/null
+++ b/src/components/Status.module.css
@@ -0,0 +1,28 @@
+@import '../styles/_variables.css';
+
+/* default: red square */
+.status {
+ width: var(--font-size-mini);
+ height: var(--font-size-mini);
+ display: inline-block;
+ background: var(--red);
+ margin-right: calc(var(--spacer) / 8);
+}
+
+/* yellow triangle */
+.loading {
+ composes: status;
+ background: none;
+ width: 0;
+ height: 0;
+ border-left: calc(var(--font-size-mini) / 1.7) solid transparent;
+ border-right: calc(var(--font-size-mini) / 1.7) solid transparent;
+ border-bottom: var(--font-size-mini) solid var(--yellow);
+}
+
+/* green circle */
+.online {
+ composes: status;
+ border-radius: 50%;
+ background: var(--green);
+}
diff --git a/src/components/Status.tsx b/src/components/Status.tsx
new file mode 100644
index 0000000..1fd5fc6
--- /dev/null
+++ b/src/components/Status.tsx
@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react'
+import { pingUrl } from '../utils'
+import { ipfsGateway, ipfsNodeUri } from '../../site.config'
+import styles from './Status.module.css'
+
+export default function Status({ type }: { type: string }) {
+ const [isOnline, setIsOnline] = useState(false)
+ const [isLoading, setIsLoading] = useState(true)
+
+ async function ping() {
+ const url =
+ type === 'gateway'
+ ? `${ipfsGateway}/ipfs/QmYwAPJzv5CZsnA625s3Xf2nemtYgPpHdWEz79ojWnPbdG/readme`
+ : `${ipfsNodeUri}/api/v0/id`
+
+ const ping = await pingUrl(url)
+ setIsLoading(false)
+ isOnline !== ping && setIsOnline(ping)
+ }
+
+ useEffect(() => {
+ ping()
+
+ const timer = setInterval(() => {
+ ping()
+ }, 10000) // run every 10 sec.
+
+ return () => {
+ clearInterval(timer)
+ setIsOnline(false)
+ setIsLoading(false)
+ }
+ }, [])
+
+ const classes = isLoading
+ ? styles.loading
+ : isOnline
+ ? styles.online
+ : styles.status
+
+ return (
+
+ )
+}
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..ced6785
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,12 @@
+import axios from 'axios'
+
+export async function pingUrl(url: string) {
+ try {
+ const response = await axios(url, { timeout: 5000 })
+ if (!response || response.status !== 200) return false
+ return true
+ } catch (error) {
+ console.error(error.message)
+ return false
+ }
+}