collapse contracts by default

client/package-lock.json

@@ -12982,6 +12982,15 @@
         }
       }
     },
+    "react-collapsed": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-collapsed/-/react-collapsed-2.0.1.tgz",
+      "integrity": "sha512-ullymRST/C5iy0szhxpYmIaLUhi+IC8EpFySmUjttoc+ErotaKAx+z1ff0d2PCJF7ksW8crTiOrIwGtFqYw3Tg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "raf": "^3.4.0"
+      }
+    },
     "react-datepicker": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-2.6.0.tgz",

client/package.json

@@ -25,6 +25,7 @@
     "moment": "^2.24.0",
     "query-string": "^6.5.0",
     "react": "^16.8.6",
+    "react-collapsed": "^2.0.1",
     "react-datepicker": "^2.5.0",
     "react-dom": "^16.8.6",
     "react-dotdotdot": "^1.3.0",

client/src/@types/react-collapsed/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-collapsed'

client/src/components/molecules/VersionNumbers/VersionTable.module.scss

@@ -10,6 +10,10 @@
     display: table;
     border-top: 1px solid $brand-grey-lighter;
 
+    tr {
+        position: relative;
+    }
+
     table {
         display: table;
         margin-left: $spacer;
@@ -57,3 +61,16 @@
     composes: spinner, small from '../../atoms/Spinner.module.scss';
     margin-right: $spacer;
 }
+
+.handle {
+    display: inline-block;
+    border: 0;
+    background: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+    margin-left: -1rem;
+    padding-right: .5rem;
+    cursor: pointer;
+    color: $brand-grey-light;
+}

client/src/components/molecules/VersionNumbers/VersionTable.tsx

@@ -1,8 +1,9 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useState } from 'react'
 import { OceanPlatformTechStatus } from '@oceanprotocol/squid'
+import slugify from '@sindresorhus/slugify'
+import useCollapse from 'react-collapsed'
 import { VersionNumbersState } from '.'
 import styles from './VersionTable.module.scss'
-import slugify from '@sindresorhus/slugify'
 
 const VersionTableContracts = ({
     contracts,
@@ -71,16 +72,33 @@ const VersionNumber = ({
         <span>{status || 'Could not get version'}</span>
     )
 
-const VersionTable = ({ data }: { data: VersionNumbersState }) => (
-    <div className={styles.tableWrap}>
-        <table className={styles.table}>
-            <tbody>
-                {Object.entries(data)
-                    .filter(([key, value]) => key !== 'status')
-                    .map(([key, value]) => (
-                        <Fragment key={key}>
+const VersionRow = ({ value }: { value: any }) => {
+    const collapseStyles = {
+        transitionDuration: '0.1s'
+    }
+
+    const expandStyles = {
+        transitionDuration: '0.1s'
+    }
+
+    const { getCollapseProps, getToggleProps, isOpen } = useCollapse({
+        collapseStyles,
+        expandStyles
+    })
+
+    return (
+        <>
             <tr>
                 <td>
+                    {value.contracts && (
+                        <button className={styles.handle} {...getToggleProps()}>
+                            {isOpen ? (
+                                <span>&#9660;</span>
+                            ) : (
+                                <span>&#9658;</span>
+                            )}
+                        </button>
+                    )}
                     <a
                         href={`https://github.com/oceanprotocol/${slugify(
                             value.name || value.software
@@ -99,7 +117,7 @@ const VersionTable = ({ data }: { data: VersionNumbersState }) => (
                 </td>
             </tr>
             {value.contracts && (
-                                <tr>
+                <tr {...getCollapseProps()}>
                     <td colSpan={2}>
                         <VersionTableContracts
                             contracts={value.contracts}
@@ -108,11 +126,24 @@ const VersionTable = ({ data }: { data: VersionNumbersState }) => (
                     </td>
                 </tr>
             )}
-                        </Fragment>
+        </>
+    )
+}
+
+const VersionTable = ({ data }: { data: VersionNumbersState }) => {
+    return (
+        <div className={styles.tableWrap}>
+            <table className={styles.table}>
+                <tbody>
+                    {Object.entries(data)
+                        .filter(([key, value]) => key !== 'status')
+                        .map(([key, value]) => (
+                            <VersionRow key={key} value={value} />
                         ))}
                 </tbody>
             </table>
         </div>
     )
+}
 
 export default VersionTable

client/src/components/molecules/VersionNumbers/index.tsx

@@ -120,20 +120,28 @@ export default class VersionNumbers extends PureComponent<
         }
     }
 
-    public render() {
-        const { minimal } = this.props
+    private MinimalOutput = () => {
         const { commons, squid, brizo, aquarius } = this.state
 
-        const mimimalOutput = `${squid.name} v${squid.version}\n${
-            brizo.name
-        } v${brizo.version}\n${aquarius.name} v${aquarius.version}`
-
-        return minimal ? (
+        return (
             <p className={styles.versionsMinimal}>
-                <a title={mimimalOutput} href={'/about'}>
-                    v{commons.version} {brizo.network && `(${brizo.network})`}
+                <a
+                    title={`${squid.name} v${squid.version}\n${brizo.name} v${
+                        brizo.version
+                    }\n${aquarius.name} v${aquarius.version}`}
+                    href={'/about'}
+                >
+                    v{commons.version} {squid.network && `(${squid.network})`}
                 </a>
             </p>
+        )
+    }
+
+    public render() {
+        const { minimal } = this.props
+
+        return minimal ? (
+            <this.MinimalOutput />
         ) : (
             <div className={styles.versions} id="#oceanversions">
                 <h2 className={styles.versionsTitle}>