1
0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00

show faucet version number, small refactor

This commit is contained in:
Matthias Kretschmann 2019-05-29 12:01:08 +02:00
parent 5a8d1884d3
commit ec887bebd7
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 273 additions and 188 deletions

View File

@ -0,0 +1,2 @@
import mockAxios from 'jest-mock-axios'
export default mockAxios

336
client/package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "commons-client",
"version": "0.4.0",
"version": "0.4.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -2467,6 +2467,22 @@
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
"integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
},
"axios": {
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
"integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
"requires": {
"follow-redirects": "^1.3.0",
"is-buffer": "^1.1.5"
},
"dependencies": {
"is-buffer": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
}
}
},
"axobject-query": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",
@ -6723,7 +6739,6 @@
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
"integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==",
"dev": true,
"requires": {
"debug": "^3.2.6"
},
@ -6732,7 +6747,6 @@
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
@ -6740,8 +6754,7 @@
"ms": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
"dev": true
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
}
}
},
@ -8370,158 +8383,6 @@
"is-object": "^1.0.1"
}
},
"jest": {
"version": "24.7.1",
"resolved": "https://registry.npmjs.org/jest/-/jest-24.7.1.tgz",
"integrity": "sha512-AbvRar5r++izmqo5gdbAjTeA6uNRGoNRuj5vHB0OnDXo2DXWZJVuaObiGgtlvhKb+cWy2oYbQSfxv7Q7GjnAtA==",
"dev": true,
"requires": {
"import-local": "^2.0.0",
"jest-cli": "^24.7.1"
},
"dependencies": {
"ansi-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
"camelcase": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
"dev": true
},
"cliui": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
"integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
"dev": true,
"requires": {
"string-width": "^2.1.1",
"strip-ansi": "^4.0.0",
"wrap-ansi": "^2.0.0"
}
},
"find-up": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
"dev": true,
"requires": {
"locate-path": "^3.0.0"
}
},
"invert-kv": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
"integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
"dev": true
},
"is-fullwidth-code-point": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
"dev": true
},
"jest-cli": {
"version": "24.8.0",
"resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-24.8.0.tgz",
"integrity": "sha512-+p6J00jSMPQ116ZLlHJJvdf8wbjNbZdeSX9ptfHX06/MSNaXmKihQzx5vQcw0q2G6JsdVkUIdWbOWtSnaYs3yA==",
"dev": true,
"requires": {
"@jest/core": "^24.8.0",
"@jest/test-result": "^24.8.0",
"@jest/types": "^24.8.0",
"chalk": "^2.0.1",
"exit": "^0.1.2",
"import-local": "^2.0.0",
"is-ci": "^2.0.0",
"jest-config": "^24.8.0",
"jest-util": "^24.8.0",
"jest-validate": "^24.8.0",
"prompts": "^2.0.1",
"realpath-native": "^1.1.0",
"yargs": "^12.0.2"
}
},
"lcid": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
"integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
"dev": true,
"requires": {
"invert-kv": "^2.0.0"
}
},
"os-locale": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
"integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
"dev": true,
"requires": {
"execa": "^1.0.0",
"lcid": "^2.0.0",
"mem": "^4.0.0"
}
},
"string-width": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
"integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
"dev": true,
"requires": {
"is-fullwidth-code-point": "^2.0.0",
"strip-ansi": "^4.0.0"
}
},
"strip-ansi": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": {
"ansi-regex": "^3.0.0"
}
},
"which-module": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
"dev": true
},
"yargs": {
"version": "12.0.5",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
"integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
"dev": true,
"requires": {
"cliui": "^4.0.0",
"decamelize": "^1.2.0",
"find-up": "^3.0.0",
"get-caller-file": "^1.0.1",
"os-locale": "^3.0.0",
"require-directory": "^2.1.1",
"require-main-filename": "^1.0.1",
"set-blocking": "^2.0.0",
"string-width": "^2.0.0",
"which-module": "^2.0.0",
"y18n": "^3.2.1 || ^4.0.0",
"yargs-parser": "^11.1.1"
}
},
"yargs-parser": {
"version": "11.1.1",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
"integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
"dev": true,
"requires": {
"camelcase": "^5.0.0",
"decamelize": "^1.2.0"
}
}
}
},
"jest-changed-files": {
"version": "24.8.0",
"resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-24.8.0.tgz",
@ -9428,6 +9289,21 @@
"@jest/types": "^24.8.0"
}
},
"jest-mock-axios": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/jest-mock-axios/-/jest-mock-axios-3.0.0.tgz",
"integrity": "sha512-l8ba32ZljX3/HYqhYOmRr0MDZcQcDEV3vflY6E8G/1bE8LNH2ypB1YWFdmTJENvUzrQiiFp3cQaWS8YjHYLgzQ==",
"dev": true,
"requires": {
"jest-mock-promise": "^1.0.23"
}
},
"jest-mock-promise": {
"version": "1.0.23",
"resolved": "https://registry.npmjs.org/jest-mock-promise/-/jest-mock-promise-1.0.23.tgz",
"integrity": "sha1-ySH9a1EqxUYJftvPR389QWllfkA=",
"dev": true
},
"jest-pnp-resolver": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz",
@ -13423,12 +13299,38 @@
"workbox-webpack-plugin": "4.2.0"
},
"dependencies": {
"ansi-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
"camelcase": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
"dev": true
},
"cliui": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
"integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
"dev": true,
"requires": {
"string-width": "^2.1.1",
"strip-ansi": "^4.0.0",
"wrap-ansi": "^2.0.0"
}
},
"find-up": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
"dev": true,
"requires": {
"locate-path": "^3.0.0"
}
},
"fs-extra": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
@ -13440,6 +13342,51 @@
"universalify": "^0.1.0"
}
},
"invert-kv": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
"integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
"dev": true
},
"is-fullwidth-code-point": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
"dev": true
},
"jest": {
"version": "24.7.1",
"resolved": "https://registry.npmjs.org/jest/-/jest-24.7.1.tgz",
"integrity": "sha512-AbvRar5r++izmqo5gdbAjTeA6uNRGoNRuj5vHB0OnDXo2DXWZJVuaObiGgtlvhKb+cWy2oYbQSfxv7Q7GjnAtA==",
"dev": true,
"requires": {
"import-local": "^2.0.0",
"jest-cli": "^24.7.1"
},
"dependencies": {
"jest-cli": {
"version": "24.8.0",
"resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-24.8.0.tgz",
"integrity": "sha512-+p6J00jSMPQ116ZLlHJJvdf8wbjNbZdeSX9ptfHX06/MSNaXmKihQzx5vQcw0q2G6JsdVkUIdWbOWtSnaYs3yA==",
"dev": true,
"requires": {
"@jest/core": "^24.8.0",
"@jest/test-result": "^24.8.0",
"@jest/types": "^24.8.0",
"chalk": "^2.0.1",
"exit": "^0.1.2",
"import-local": "^2.0.0",
"is-ci": "^2.0.0",
"jest-config": "^24.8.0",
"jest-util": "^24.8.0",
"jest-validate": "^24.8.0",
"prompts": "^2.0.1",
"realpath-native": "^1.1.0",
"yargs": "^12.0.2"
}
}
}
},
"jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@ -13449,6 +13396,26 @@
"graceful-fs": "^4.1.6"
}
},
"lcid": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
"integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
"dev": true,
"requires": {
"invert-kv": "^2.0.0"
}
},
"os-locale": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
"integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
"dev": true,
"requires": {
"execa": "^1.0.0",
"lcid": "^2.0.0",
"mem": "^4.0.0"
}
},
"resolve": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.0.tgz",
@ -13463,6 +13430,61 @@
"resolved": "https://registry.npmjs.org/semver/-/semver-6.0.0.tgz",
"integrity": "sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ==",
"dev": true
},
"string-width": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
"integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
"dev": true,
"requires": {
"is-fullwidth-code-point": "^2.0.0",
"strip-ansi": "^4.0.0"
}
},
"strip-ansi": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": {
"ansi-regex": "^3.0.0"
}
},
"which-module": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
"dev": true
},
"yargs": {
"version": "12.0.5",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
"integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
"dev": true,
"requires": {
"cliui": "^4.0.0",
"decamelize": "^1.2.0",
"find-up": "^3.0.0",
"get-caller-file": "^1.0.1",
"os-locale": "^3.0.0",
"require-directory": "^2.1.1",
"require-main-filename": "^1.0.1",
"set-blocking": "^2.0.0",
"string-width": "^2.0.0",
"which-module": "^2.0.0",
"y18n": "^3.2.1 || ^4.0.0",
"yargs-parser": "^11.1.1"
}
},
"yargs-parser": {
"version": "11.1.1",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
"integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
"dev": true,
"requires": {
"camelcase": "^5.0.0",
"decamelize": "^1.2.0"
}
}
}
},

View File

@ -16,6 +16,7 @@
"@oceanprotocol/squid": "^0.5.11",
"@oceanprotocol/typographies": "^0.1.0",
"@sindresorhus/slugify": "^0.9.1",
"axios": "^0.18.0",
"classnames": "^2.2.6",
"ethereum-blockies": "MyEtherWallet/blockies",
"filesize": "^4.1.2",
@ -53,6 +54,7 @@
"@types/react-transition-group": "^2.9.1",
"@types/web3": "^1.0.18",
"jest-dom": "^3.1.4",
"jest-mock-axios": "^3.0.0",
"node-sass": "^4.12.0",
"react-scripts": "^3.0.0",
"react-testing-library": "^7.0.0",

View File

@ -0,0 +1,22 @@
import React from 'react'
import { render, waitForElement } from 'react-testing-library'
import mockAxios from 'jest-mock-axios'
import VersionNumbers from './VersionNumbers'
afterEach(() => {
mockAxios.reset()
})
describe('VersionNumbers', () => {
it('renders without crashing', () => {
const { container } = render(<VersionNumbers />)
expect(container.firstChild).toBeInTheDocument()
})
it('returns component versions in link title, prefixed with `v`', async () => {
const { getByTitle } = render(<VersionNumbers />)
mockAxios.mockResponse({ data: { version: '6.6.6' } })
expect(mockAxios.get).toHaveBeenCalled()
await waitForElement(() => getByTitle(/v6.6.6/))
})
})

View File

@ -1,4 +1,6 @@
import React, { PureComponent } from 'react'
import { Logger } from '@oceanprotocol/squid'
import axios from 'axios'
import { version } from '../../../package.json'
import { version as versionSquid } from '@oceanprotocol/squid/package.json'
import styles from './VersionNumbers.module.scss'
@ -9,60 +11,95 @@ import {
aquariusScheme,
brizoHost,
brizoPort,
brizoScheme
brizoScheme,
faucetHost,
faucetPort,
faucetScheme
} from '../../config'
import { Logger } from '@oceanprotocol/squid'
const commonsVersion =
process.env.NODE_ENV === 'production' ? `v${version}` : `v${version}-dev`
export default class VersionNumbers extends PureComponent {
interface VersionNumbersState {
commons: string
squidJs: string
aquarius: string
brizo: string
faucet: string
}
export default class VersionNumbers extends PureComponent<
{},
VersionNumbersState
> {
public state = {
commons: commonsVersion,
squidJs: `v${versionSquid}`,
aquarius: 'v0.0.0',
brizo: 'v0.0.0'
brizo: 'v0.0.0',
faucet: 'v0.0.0'
}
public async componentDidMount() {
try {
const {
versionAquarius,
versionBrizo
} = await this.getComponentVersions()
// for canceling axios requests
public signal = axios.CancelToken.source()
this.setState({
aquarius: `v${versionAquarius}`,
brizo: `v${versionBrizo}`
})
public componentWillMount() {
this.setComponentVersions()
}
public componentWillUnmount() {
this.signal.cancel()
}
private async setComponentVersions() {
try {
const versionAquarius = await this.getVersion(
aquariusScheme,
aquariusHost,
aquariusPort
)
this.setState({ aquarius: `v${versionAquarius}` })
const versionBrizo = await this.getVersion(
brizoScheme,
brizoHost,
brizoPort
)
this.setState({ brizo: `v${versionBrizo}` })
const versionFaucet = await this.getVersion(
faucetScheme,
faucetHost,
faucetPort
)
this.setState({ faucet: `v${versionFaucet}` })
} catch (error) {
Logger.error(error.message)
!axios.isCancel(error) && Logger.error(error.message)
}
}
private async getComponentVersions() {
const responseAquarius = await fetch(
`${aquariusScheme}://${aquariusHost}:${aquariusPort}`
)
const jsonAquarius = await responseAquarius.json()
const versionAquarius = jsonAquarius.version
const responseBrizo = await fetch(
`${brizoScheme}://${brizoHost}:${brizoPort}`
)
const jsonBrizo = await responseBrizo.json()
const versionBrizo = jsonBrizo.version
return { versionAquarius, versionBrizo }
private async getVersion(
scheme: string,
host: string,
port: number | string
) {
const { data } = await axios.get(`${scheme}://${host}:${port}`, {
headers: { Accept: 'application/json' },
cancelToken: this.signal.token
})
const { version } = data
return version
}
public render() {
const { commons, squidJs, brizo, aquarius } = this.state
const { commons, squidJs, brizo, aquarius, faucet } = this.state
const componentsOutput = `Squid-js ${squidJs} \nBrizo ${brizo} \nAquarius ${aquarius} \nFaucet ${faucet}`
return (
<p className={styles.version}>
<a
title={`Squid-js ${squidJs} - Brizo ${brizo} - Aquarius ${aquarius}`}
title={componentsOutput}
href={`https://github.com/oceanprotocol/commons/releases/tag/${commons}`}
>
{commons}