IPLD Explorer Components

React components for https://explore.ipld.io (https://github.com/ipfs/explore.ipld.io) and ipfs-webui

Background

This module was extracted from the explore.ipld.io so it could be reused from the IPFS Web UI.

Usage

WARNING: This module is not intended to be re-used in it's current form by other projects. There is more work to do to make this a nice set of generic components.

Install it from npm:

npm install ipld-explorer-components

The ES5 friendly version of the src dir is generated to the dist dir and the page components are all provided as named exports so you can import them like so:

import {ExplorePage, StartExploringPage} from `ipld-explorer-components`

The following Components are available:

export {
  StartExploringPage,
  ExplorePage,
  IpldExploreForm,
  IpldCarExploreForm,
  CidInfo,
  IpldGraph
  ObjectInfo,
  exploreBundle,
  heliaBundle
}

There are peerDependencies so that the parent app can pick the versions of common deps. You'll need to add relevant deps to your project.

And, assuming you are using create-react-app or a similar webpack set up, you'll need the following CSS imports:

import 'tachyons'
import 'ipfs-css'
import 'react-virtualized/styles.css'
import 'ipld-explorer-components/dist/components/object-info/LinksTable.css'
import 'ipld-explorer-components/dist/components/loader/Loader.css'

Adding another codec

NOTE: PRs adding an old IPLDFormat codec would need the old blockcodec-to-ipld-format tool, which has many out-of-date deps. We will only accept PRs for adding BlockCodec interface codecs.

To add another codec, you will need to update all locations containing the comment // #WhenAddingNewCodec:

1. Add a dependency on the codec to this package (if it's not already in multiformats or other package)
2. Add the codec in the switch statement in ./src/lib/codec-importer.ts
3. Update ./src/lib/get-codec-name-from-code.ts to return the codec name for your codec
4. Add a unit test to ./src/lib/resolve-ipld-path.test.js and ensure that calling resolveIpldPath returns the expected results
   • If the default resolveFn in ./src/lib/get-codec-for-cid.ts doesn't resolve your paths correctly, you will need to add a resolver method for your codec to the codecResolverMap in ./src/lib/get-codec-for-cid.ts

see https://github.com/ipfs/ipld-explorer-components/pull/360#discussion_r1206251817 for history.

Adding another hasher

To add another hasher, you will need to update all locations containing the comment // #WhenAddingNewHasher:

1. Add a dependency on the hasher to this package (if it's not already in multiformats or other package)
2. Add the hasher in the switch statement in ./src/lib/get-codec-for-cid.ts
3. Update ./src/lib/hash-importer.ts
   • Update SupportedHashers to include your hasher type
   • Update getHasherForCode to return your hasher
4. Update the hasher codes used by the hashers property passed to Helia init in ./src/lib/init-helia.ts

see https://github.com/ipfs/ipld-explorer-components/pull/395 for an example.

Redux-bundler requirements

These components use redux-bundler, and your app will need to use a redux-bundler provider to propagate the properties and selectors. You can find a basic example in ./dev/devPage.jsx.

In short, these components export two bundles found in ./src/bundles: explore and heliaBundle. The explore bundle and components herein have a few redux-bundler selector dependencies that you need to make sure exist and are called properly.

Dependent	redux-bundler selector	Notes
explore bundle	selectHeliaReady	The explore bundle depends on this selector so it knows when the Helia node is available for use
explore & other bundles	selectHelia	The explore bundle gets the Helia node via this selector
Main page (or any)	doInitHelia	A consuming app needs to call this selector to tell the bundle that provides the Helia node to instantiate it.

If you don't want to use the heliaBundle, you must adapt the selectors appropriately.

Contribute

Feel free to dive in! Open an issue or submit PRs.

To contribute to IPFS in general, see the contributing guide.

Releasing

• Run tx pull -a to pull the latest translations from Transifex (i18n#transifex-101))
• Update the version (npm version major/minor/patch)
• Push the changes (git push && git push --follow-tags)
• Update the changelog
• Add release notes to https://github.com/ipfs/ipld-explorer-components/releases, use the tag and copy changelog changes
• Publish to npm (npm publish)

License

MIT © Protocol Labs