diff --git a/package-lock.json b/package-lock.json index 409f3a14..d3fc8f60 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2226,63 +2226,64 @@ } }, "node_modules/@formatjs/ecma402-abstract": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.2.0.tgz", - "integrity": "sha512-IpM+ev1E4QLtstniOE29W1rqH9eTdx5hQdNL8pzrflMj/gogfaoONZqL83LUeQScHAvyMbpqP5C9MzNf+fFwhQ==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.3.tgz", + "integrity": "sha512-pJT1OkhplSmvvr6i3CWTPvC/FGC06MbN5TNBfRO6Ox62AEz90eMq+dVvtX9Bl3jxCEkS0tATzDarRZuOLw7oFg==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@formatjs/fast-memoize": "2.2.1", - "@formatjs/intl-localematcher": "0.5.5", - "tslib": "^2.7.0" + "@formatjs/fast-memoize": "2.2.6", + "@formatjs/intl-localematcher": "0.6.0", + "decimal.js": "10", + "tslib": "2" } }, "node_modules/@formatjs/fast-memoize": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.1.tgz", - "integrity": "sha512-XS2RcOSyWxmUB7BUjj3mlPH0exsUzlf6QfhhijgI941WaJhVxXQ6mEWkdUFIdnKi3TuTYxRdelsgv3mjieIGIA==", + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.6.tgz", + "integrity": "sha512-luIXeE2LJbQnnzotY1f2U2m7xuQNj2DA8Vq4ce1BY9ebRZaoPB1+8eZ6nXpLzsxuW5spQxr7LdCg+CApZwkqkw==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "tslib": "^2.7.0" + "tslib": "2" } }, "node_modules/@formatjs/icu-messageformat-parser": { - "version": "2.7.10", - "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.10.tgz", - "integrity": "sha512-wlQfqCZ7PURkUNL2+8VTEFavPovtADU/isSKLFvDbdFmV7QPZIYqFMkhklaDYgMyLSBJa/h2MVQ2aFvoEJhxgg==", + "version": "2.11.1", + "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.11.1.tgz", + "integrity": "sha512-o0AhSNaOfKoic0Sn1GkFCK4MxdRsw7mPJ5/rBpIqdvcC7MIuyUSW8WChUEvrK78HhNpYOgqCQbINxCTumJLzZA==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@formatjs/ecma402-abstract": "2.2.0", - "@formatjs/icu-skeleton-parser": "1.8.4", - "tslib": "^2.7.0" + "@formatjs/ecma402-abstract": "2.3.3", + "@formatjs/icu-skeleton-parser": "1.8.13", + "tslib": "2" } }, "node_modules/@formatjs/icu-skeleton-parser": { - "version": "1.8.4", - "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.4.tgz", - "integrity": "sha512-LMQ1+Wk1QSzU4zpd5aSu7+w5oeYhupRwZnMQckLPRYhSjf2/8JWQ882BauY9NyHxs5igpuQIXZDgfkaH3PoATg==", + "version": "1.8.13", + "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.13.tgz", + "integrity": "sha512-N/LIdTvVc1TpJmMt2jVg0Fr1F7Q1qJPdZSCs19unMskCmVQ/sa0H9L8PWt13vq+gLdLg1+pPsvBLydL1Apahjg==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@formatjs/ecma402-abstract": "2.2.0", - "tslib": "^2.7.0" + "@formatjs/ecma402-abstract": "2.3.3", + "tslib": "2" } }, "node_modules/@formatjs/intl-localematcher": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.5.tgz", - "integrity": "sha512-t5tOGMgZ/i5+ALl2/offNqAQq/lfUnKLEw0mXQI4N4bqpedhrSE+fyKLpwnd22sK0dif6AV+ufQcTsKShB9J1g==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.6.0.tgz", + "integrity": "sha512-4rB4g+3hESy1bHSBG3tDFaMY2CH67iT7yne1e+0CLTsGLDcmoEWWpJjjpWVaYgYfYuohIRuo0E+N536gd2ZHZA==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "tslib": "^2.7.0" + "tslib": "2" } }, "node_modules/@gilbarbara/deep-equal": { @@ -18376,17 +18377,17 @@ } }, "node_modules/intl-messageformat": { - "version": "10.7.0", - "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.0.tgz", - "integrity": "sha512-2P06M9jFTqJnEQzE072VGPjbAx6ZG1YysgopAwc8ui0ajSjtwX1MeQ6bXFXIzKcNENJTizKkcJIcZ0zlpl1zSg==", + "version": "10.7.15", + "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.15.tgz", + "integrity": "sha512-LRyExsEsefQSBjU2p47oAheoKz+EOJxSLDdjOaEjdriajfHsMXOmV/EhMvYSg9bAgCUHasuAC+mcUBe/95PfIg==", "dev": true, "license": "BSD-3-Clause", "peer": true, "dependencies": { - "@formatjs/ecma402-abstract": "2.2.0", - "@formatjs/fast-memoize": "2.2.1", - "@formatjs/icu-messageformat-parser": "2.7.10", - "tslib": "^2.7.0" + "@formatjs/ecma402-abstract": "2.3.3", + "@formatjs/fast-memoize": "2.2.6", + "@formatjs/icu-messageformat-parser": "2.11.1", + "tslib": "2" } }, "node_modules/into-stream": { diff --git a/public/locales/en/explore.json b/public/locales/en/explore.json index b6422f5d..bccd590d 100644 --- a/public/locales/en/explore.json +++ b/public/locales/en/explore.json @@ -69,6 +69,16 @@ } }, "errors": { - "BlockFetchTimeoutError": "Failed to fetch content in {timeout}s. Please refresh the page to retry or try a different CID." + "BlockFetchTimeoutError": "Failed to fetch content in {timeout}s. Please refresh the page to retry or try a different CID.", + "BlockFetchError": "Failed to fetch content: {error}. This could mean the content is not available on the network or there are connectivity issues.", + "CidSyntaxError": "Invalid CID format: {cid}. Please ensure you are using a valid CID.", + "checkIpfsNetwork": "Check content availability on IPFS Network", + "troubleshootingTips": { + "title": "Troubleshooting Tips", + "refresh": "Try refreshing the page", + "checkConnection": "Check your internet connection", + "tryLater": "Try again later - the content may still be propagating through the network", + "checkCidSyntax": "Verify that your CID is formatted correctly or that your CAR file is valid" + } } } diff --git a/src/components/ExplorePage.tsx b/src/components/ExplorePage.tsx index 9985f873..a909d32c 100644 --- a/src/components/ExplorePage.tsx +++ b/src/components/ExplorePage.tsx @@ -63,7 +63,7 @@ export const ExplorePage = ({ :
}
-
+
{targetNode != null diff --git a/src/components/explore/IpldExploreErrorComponent.tsx b/src/components/explore/IpldExploreErrorComponent.tsx index 842841d7..54234ddf 100644 --- a/src/components/explore/IpldExploreErrorComponent.tsx +++ b/src/components/explore/IpldExploreErrorComponent.tsx @@ -1,18 +1,55 @@ import React from 'react' import { useTranslation } from 'react-i18next' +import { useExplore } from '../../providers/explore' import type IpldExploreError from '../../lib/errors' export interface IpldExploreErrorComponentProps { error: IpldExploreError | null } +const TroubleshootingTips: React.FC<{ cid: string }> = ({ cid }) => { + const { t } = useTranslation('explore', { keyPrefix: 'errors' }) + if (cid == null) return null + + return ( + <> +
+

{t('troubleshootingTips.title')}

+
    +
  • {t('troubleshootingTips.refresh')}
    • +
  • {t('troubleshootingTips.checkConnection')}
    • +
  • {t('troubleshootingTips.tryLater')}
    • +
  • {t('troubleshootingTips.checkCidSyntax')}
    • +
+
+ + + ) +} + export function IpldExploreErrorComponent ({ error }: IpldExploreErrorComponentProps): JSX.Element | null { + const { exploreState } = useExplore() + const { path } = exploreState + const [cid] = path?.split('/') ?? [] const { t } = useTranslation('explore', { keyPrefix: 'errors' }) if (error == null) return null + // more self service return ( -
-
{error.toString(t)}
+
+
+
{error.toString(t)}
+ +
) } diff --git a/tsconfig.json b/tsconfig.json index 0f514144..59d49e18 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -37,7 +37,8 @@ "include": [ "src/**/*", "dev/**/*", - "test/**/*" + "test/**/*", + "vite.config.ts" ], "exclude": [ "src/**/*.stories.*",