diff --git a/.env.sample b/.env.sample index 28af456..ada836c 100644 --- a/.env.sample +++ b/.env.sample @@ -1,5 +1,2 @@ -# requires full url -NEXT_PUBLIC_BACKEND_APP_URL = 'http://0.0.0.0:8000/api/...' - -# client app public URL -NEXT_PUBLIC_CLIENT_DOMAIN = \ No newline at end of file +# client app public URL (used in og:image and og:url metadata) +NEXT_PUBLIC_CLIENT_DOMAIN = diff --git a/next.config.js b/next.config.js index 9099da9..af67520 100644 --- a/next.config.js +++ b/next.config.js @@ -1,32 +1,39 @@ /** @type {import('next').NextConfig} */ +const GRAFANA_DASHBOARD_URL = + 'https://chainstack.grafana.net/public-dashboards/65c0fcb02f994faf845d4ec095771bd0?orgId=1'; + +const cspDirectives = [ + "default-src 'self'", + "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.segment.com https://www.googletagmanager.com https://www.google-analytics.com", + "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com", + "font-src 'self' https://fonts.gstatic.com data:", + "img-src 'self' data: https:", + "frame-src https://chainstack.grafana.net", + "connect-src 'self' https://api.segment.io https://*.segment.io https://www.google-analytics.com", + "frame-ancestors 'none'", + "base-uri 'self'", + "form-action 'self'", +].join('; '); + const nextConfig = { async headers() { return [ { - source: '/api/:path*', + source: '/(.*)', headers: [ - { key: 'Access-Control-Allow-Credentials', value: 'true' }, - { key: 'Access-Control-Allow-Origin', value: '*' }, - { - key: 'Access-Control-Allow-Methods', - value: 'GET,DELETE,PATCH,POST,PUT', - }, - { - key: 'Access-Control-Allow-Headers', - value: - 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version', - }, + { key: 'Content-Security-Policy', value: cspDirectives }, + { key: 'X-Content-Type-Options', value: 'nosniff' }, + { key: 'Referrer-Policy', value: 'no-referrer-when-downgrade' }, + { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' }, ], }, ]; }, async redirects() { return [ - { - source: '/dashboard', - destination: 'https://chainstack.grafana.net/public-dashboards/65c0fcb02f994faf845d4ec095771bd0?orgId=1', - permanent: true - } + { source: '/compare-single', destination: '/', permanent: true }, + { source: '/compare-double', destination: '/', permanent: true }, + { source: '/dashboard', destination: GRAFANA_DASHBOARD_URL, permanent: true }, ]; }, reactStrictMode: false, @@ -39,4 +46,4 @@ const withMDX = require('@next/mdx')({ }, }); -module.exports = withMDX(nextConfig); \ No newline at end of file +module.exports = withMDX(nextConfig); diff --git a/src/app/compare-double/page.js b/src/app/compare-double/page.js deleted file mode 100644 index 64efc4a..0000000 --- a/src/app/compare-double/page.js +++ /dev/null @@ -1,401 +0,0 @@ -'use client'; -import { useEffect, useState } from 'react'; - -import Header from '@/components/Header/Header'; -import ResultCard from '@/components/ResultCard/ResultCard'; -import ExplainResultsIcon from '../../components/Icons/ExplainResultsIcon'; - -import { CodeIcon, ShareIcon } from '@iconicicons/react'; -import { Button, Loading, Badge } from '@lemonsqueezy/wedges'; -import { ClipboardIcon, CheckIcon, PlusIcon } from '@iconicicons/react'; -import { Chart } from 'react-google-charts'; -import Link from 'next/link'; - -import { - NODE_ENDPOINT, - NODE_ENDPOINT_2, - SET_NODE_ENDPOINT, - SET_NODE_ENDPOINT_2, - METHODS, - METHODS_2, - SET_METHOD_RESPONSE_DATA, - SET_METHOD_RESPONSE_DATA_2, - GET_METHODS_NAMES, -} from '../store/store'; - -import { useSearchParams } from 'next/navigation'; - -const Result = () => { - const searchParams = useSearchParams(); - let url1 = searchParams.get('url1'); - let url2 = searchParams.get('url2'); - - const nodeEndpoint = url1 ? url1 : NODE_ENDPOINT.use(); - const nodeEndpoint2 = url2 ? url2 : NODE_ENDPOINT_2.use(); - const methods = METHODS.use(); - const methods2 = METHODS_2.use(); - const methodsNames = GET_METHODS_NAMES.use(); - - const [copiedToClipboard, setCopiedToClipboard] = useState(false); - const [copiedToClipboard2, setCopiedToClipboard2] = useState(false); - const [compareLinkCopiedToClipboard, setCompareLinkCopiedToClipboard] = - useState(false); - const [chartData, setChartData] = useState(null); - const [chartData2, setChartData2] = useState(null); - const [explainIsDisabled, setExplainIsDisabled] = useState(false); - - const downloadJson = () => { - const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent( - JSON.stringify([ - { - endpoint: nodeEndpoint, - results: methods.map((method) => { - return { - method: method.method_used, - results: method.data, - }; - }), - }, - { - endpoint: nodeEndpoint2, - results: methods2.map((method) => { - return { - method: method.method_used, - results: method.data, - }; - }), - }, - ]) - )}`; - const link = document.createElement('a'); - link.href = jsonString; - link.download = 'data.json'; - - link.click(); - }; - - useEffect(() => { - if ( - methods.every((item) => Object.keys(item.data).length != 0) === true && - methods2.every((item) => Object.keys(item.data).length != 0) === true - ) { - let chart = [methods[1], methods2[1]]; - 2; - let chart2 = [methods[0], methods2[0]]; - - setChartData([ - [ - '', - ...chart.map((item, index) => { - return `Endpoint ${index + 1}`; - }), - ], - [ - '', - ...chart.map((item) => { - if ( - Object.keys(item.data).length != 0 && - item.data.hasOwnProperty('error') === false - ) { - return +item.data.blocks_per_seconds.toFixed(2); - } else { - return 0; - } - }), - ], - ]); - - setChartData2([ - [ - '', - ...chart2.map((item, index) => { - return `Endpoint ${index + 1}`; - }), - ], - [ - '', - ...chart2.map((item) => { - if ( - Object.keys(item.data).length != 0 && - item.data.hasOwnProperty('error') === false - ) { - return +item.data.blocks_per_seconds.toFixed(2); - } else { - return 0; - } - }), - ], - ]); - } - }, [methods, methods2]); - - let grid = 'grid grid-cols-2 gap-10'; - - return ( -
-
- - {/* URLS */} -
- {[ - { - endpoint: nodeEndpoint, - copied: copiedToClipboard, - clip(value) { - setCopiedToClipboard(value); - }, - }, - { - endpoint: nodeEndpoint2, - copied: copiedToClipboard2, - clip(value) { - setCopiedToClipboard2(value); - }, - }, - ].map((item, index) => { - return ( -
-
[{index + 1}]
-
- {item.endpoint} -
-
- ); - })} -
- {/* URLS */} - - {/* eth_getBlockByNumber */} -
- {[ - { - config: methods[0], - endpoint: nodeEndpoint, - setResponse: SET_METHOD_RESPONSE_DATA, - }, - { - config: methods2[0], - endpoint: nodeEndpoint2, - setResponse: SET_METHOD_RESPONSE_DATA_2, - }, - ].map((item, index) => { - return ( - - ); - })} -
- {/* eth_getBlockByNumber */} - - {/* eth_call */} -
- {[ - { - config: { ...methods[1] }, - endpoint: nodeEndpoint, - setResponse: SET_METHOD_RESPONSE_DATA, - }, - { - config: { ...methods2[1] }, - endpoint: nodeEndpoint2, - setResponse: SET_METHOD_RESPONSE_DATA_2, - }, - ].map((item, index) => { - return ( - - ); - })} -
- {/* eth_call */} - -
-

- Compare results -

- -
-
- } color="blue" stroke className=""> - {methodsNames[1]} - -
Blocks per second
-
- {!chartData ? ( -
- -
- ) : ( - - )} -
-
-
- } color="blue" stroke className=""> - {methodsNames[0]} - -
Blocks per second
-
- {!chartData2 ? ( -
- -
- ) : ( - - )} -
- -
- - - - - -
- - -

- Learn how Chainstack Compare works -
under the hood and why we built it ↗. -

- -
-
- ); -}; - -export default Result; diff --git a/src/app/compare-single/page.js b/src/app/compare-single/page.js deleted file mode 100644 index 1f6b8d8..0000000 --- a/src/app/compare-single/page.js +++ /dev/null @@ -1,183 +0,0 @@ -'use client'; -import { useEffect, useState } from 'react'; - -import Header from '@/components/Header/Header'; -import ResultCard from '@/components/ResultCard/ResultCard'; -import ExplainResultsIcon from '../../components/Icons/ExplainResultsIcon'; - -import { Button, Loading } from '@lemonsqueezy/wedges'; -import { ClipboardIcon, CheckIcon, PlusIcon } from '@iconicicons/react'; -import { Chart } from 'react-google-charts'; -import Link from 'next/link'; - -import { - NODE_ENDPOINT, - METHODS, - SET_METHOD_RESPONSE_DATA, -} from '../store/store'; - -const Result = () => { - const nodeEndpoint = NODE_ENDPOINT.use(); - const methods = METHODS.use(); - - const [copiedToClipboard, setCopiedToClipboard] = useState(false); - const [chartData, setChartData] = useState(null); - const [explainIsDisabled, setExplainIsDisabled] = useState(true); - - const downloadJson = () => { - const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent( - JSON.stringify( - methods.map((method) => { - return { - method: method.method_used, - results: method.data, - }; - }) - ) - )}`; - const link = document.createElement('a'); - link.href = jsonString; - link.download = 'data.json'; - - link.click(); - }; - - useEffect(() => { - if (methods.every((item) => Object.keys(item.data).length != 0) === true) { - setChartData([ - ['', ...methods.map((item) => item.method_used)], - [ - '', - ...methods.map((item) => { - if ( - Object.keys(item.data).length != 0 && - item.data.hasOwnProperty('error') === false - ) { - return +item.data.blocks_per_seconds.toFixed(2); - } else { - return 0; - } - }), - ], - ]); - setExplainIsDisabled(false); - } - }, [methods]); - - return ( -
-
-
-
-
{nodeEndpoint}
-
- {methods.map((item, index) => { - return ( - - ); - })} - -
- {!chartData ? ( -
- -
- ) : ( - - )} -
- -
- - - - -
- - -

- Learn how Chainstack Compare works -
under the hood and why we built it ↗. -

- -
-
- ); -}; - -export default Result; diff --git a/src/app/injection-result-double/page.js b/src/app/injection-result-double/page.js deleted file mode 100644 index 8db746d..0000000 --- a/src/app/injection-result-double/page.js +++ /dev/null @@ -1,284 +0,0 @@ -'use client'; -import { useEffect, useState } from 'react'; -import ResultCard from '@/components/ResultCard/ResultCard'; -import { Button } from '@lemonsqueezy/wedges'; -import { ClipboardIcon, CheckIcon } from '@iconicicons/react'; - -import Link from 'next/link'; -import Script from 'next/script'; - -import { - NODE_ENDPOINT, - NODE_ENDPOINT_2, - METHODS, - METHODS_2, - SET_METHOD_RESPONSE_DATA, - SET_METHOD_RESPONSE_DATA_2, - GET_METHODS_NAMES, -} from '../store/store'; - -const Result = () => { - const nodeEndpoint = NODE_ENDPOINT.use(); - const nodeEndpoint2 = NODE_ENDPOINT_2.use(); - const methods = METHODS.use(); - const methods2 = METHODS_2.use(); - const methodsNames = GET_METHODS_NAMES.use(); - - const [copiedToClipboard, setCopiedToClipboard] = useState(false); - const [copiedToClipboard2, setCopiedToClipboard2] = useState(false); - const [chartData, setChartData] = useState(null); - const [chartData2, setChartData2] = useState(null); - const [explainIsDisabled, setExplainIsDisabled] = useState(false); - - const downloadJson = () => { - const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent( - JSON.stringify([ - { - endpoint: nodeEndpoint, - results: methods.map((method) => { - return { - method: method.method_used, - results: method.data, - }; - }), - }, - { - endpoint: nodeEndpoint2, - results: methods2.map((method) => { - return { - method: method.method_used, - results: method.data, - }; - }), - }, - ]) - )}`; - const link = document.createElement('a'); - link.href = jsonString; - link.download = 'data.json'; - - link.click(); - }; - - useEffect(() => { - if ( - methods.every((item) => Object.keys(item.data).length != 0) === true && - methods2.every((item) => Object.keys(item.data).length != 0) === true - ) { - let chart = [methods[1], methods2[1]]; - let chart2 = [methods[0], methods2[0]]; - - setChartData([ - [ - '', - ...chart.map((item, index) => { - return `Endpoint ${index + 1}`; - }), - ], - [ - '', - ...chart.map((item) => { - if ( - Object.keys(item.data).length != 0 && - item.data.hasOwnProperty('error') === false - ) { - return +item.data.blocks_per_seconds.toFixed(2); - } else { - return 0; - } - }), - ], - ]); - - setChartData2([ - [ - '', - ...chart2.map((item, index) => { - return `Endpoint ${index + 1}`; - }), - ], - [ - '', - ...chart2.map((item) => { - if ( - Object.keys(item.data).length != 0 && - item.data.hasOwnProperty('error') === false - ) { - return +item.data.blocks_per_seconds.toFixed(2); - } else { - return 0; - } - }), - ], - ]); - } - }, [methods, methods2]); - - let grid = 'grid grid-cols-2 gap-10'; - - return ( - //
- <> -
- {/* URLS */} -
- {[ - { - endpoint: nodeEndpoint, - copied: copiedToClipboard, - clip(value) { - setCopiedToClipboard(value); - }, - }, - { - endpoint: nodeEndpoint2, - copied: copiedToClipboard2, - clip(value) { - setCopiedToClipboard2(value); - }, - }, - ].map((item, index) => { - return ( -
-
[{index + 1}]
-
- {item.endpoint} -
-
- ); - })} -
- {/* URLS */} - - {/* eth_getBlockByNumber */} -
- {[ - { - config: methods[0], - endpoint: nodeEndpoint, - setResponse: SET_METHOD_RESPONSE_DATA, - }, - { - config: methods2[0], - endpoint: nodeEndpoint2, - setResponse: SET_METHOD_RESPONSE_DATA_2, - }, - ].map((item, index) => { - return ( - - ); - })} -
- {/* eth_getBlockByNumber */} - - {/* eth_call */} -
- {[ - { - config: { ...methods[1] }, - endpoint: nodeEndpoint, - setResponse: SET_METHOD_RESPONSE_DATA, - }, - { - config: { ...methods2[1] }, - endpoint: nodeEndpoint2, - setResponse: SET_METHOD_RESPONSE_DATA_2, - }, - ].map((item, index) => { - return ( - - ); - })} -
- {/* eth_call */} - -
- {/*

- Full results -

*/} - - - - {/* - - */} -
-
-