output js-ipfs version

client/src/hooks/use-ipfs.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react'
 
 let ipfs: any = null
 let ipfsMessage = ''
+let ipfsVersion = ''
 
 export default function useIpfs() {
     const [isIpfsReady, setIpfsReady] = useState(Boolean(ipfs))
@@ -25,6 +26,9 @@ export default function useIpfs() {
                 ipfs = await Ipfs.create()
                 console.timeEnd(message)
                 ipfsMessage = message
+
+                const { version } = await ipfs.version()
+                ipfsVersion = version
             } catch (error) {
                 const message = `IPFS init error: ${error.message}`
                 ipfsMessage = message
@@ -47,11 +51,12 @@ export default function useIpfs() {
                 setIpfsReady(false)
                 ipfs = null
                 ipfsMessage = ''
+                ipfsVersion = ''
                 setIpfsInitError(null)
                 console.timeEnd('IPFS stopped')
             }
         }
     }, [])
 
-    return { ipfs, isIpfsReady, ipfsInitError, ipfsMessage }
+    return { ipfs, ipfsVersion, isIpfsReady, ipfsInitError, ipfsMessage }
 }

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

@@ -9,7 +9,7 @@
 
     input {
         display: block;
-        width: fit-content;
+        width: 100%;
         cursor: pointer;
         border: .1rem solid $brand-grey-lighter;
         border-radius: $border-radius;

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

@@ -30,7 +30,13 @@ function formatBytes(a: number, b: number) {
 }
 
 export default function Ipfs({ addFile }: { addFile(url: string): void }) {
-    const { ipfs, isIpfsReady, ipfsInitError, ipfsMessage } = useIpfs()
+    const {
+        ipfs,
+        ipfsVersion,
+        isIpfsReady,
+        ipfsInitError,
+        ipfsMessage
+    } = useIpfs()
     const [loading, setLoading] = useState(false)
     const [message, setMessage] = useState('')
 
@@ -92,7 +98,12 @@ export default function Ipfs({ addFile }: { addFile(url: string): void }) {
                 />
             )}
             {ipfsMessage !== '' && (
-                <div className={styles.message}>{ipfsMessage}</div>
+                <div
+                    className={styles.message}
+                    title={`js-ipfs v${ipfsVersion}`}
+                >
+                    {ipfsMessage}
+                </div>
             )}
             {ipfsInitError && (
                 <div className={styles.error}>{ipfsInitError}</div>