🌱Build a Web UI

In this tutorial, we walk through how to set up a React app incorporating CO2.storage. Unlike in the previous tutorial, where you set up your credentials in a .env file, in this case the user will authenticate with their own browser extension wallet.

1) In the folder where you want the project, run:

npm init react-app demo-app

This will make a new demo-app subfolder with React installed.

2) Navigate to that folder using cd demo-app and check that React is working by starting the web app:

npm run start

You should see your app when you go to http://localhost:3000/

3) In the app folder, install the latest co2-storage javascript package by running:

npm install @co2-storage/js-api@latest --save

Now in demo-app/package.json you should see co2-storage/js-api listed under dependencies:

...
"dependencies": {
    "@co2-storage/js-api": "^X.Y.Z",
    ...

Where X.Y.Z is the version installed (at time of writing, 1.2.2).

4) We can now copy code from the examples repo folder in order to bring CO2.Storage functionality to our web app!

Open demo-app/src/App.js and near the top add this import statement and these constants:

import { FGStorage } from '@co2-storage/js-api';

const authType = "metamask"
const ipfsNodeType = "browser"
const ipfsNodeAddr = "/dns4/web2.co2.storage/tcp/5002/https"
const fgApiUrl = "https://web2.co2.storage"

const fgStorage = new FGStorage({authType: authType, ipfsNodeType: ipfsNodeType, ipfsNodeAddr: ipfsNodeAddr, fgApiHost: fgApiUrl})

Here, we are:

• Importing the package

• Using the metamask browser plugin for authentication

• Running an ipfs node locally in the web browser and using this to pin and retrieve files

• Connecting to other ipfs nodes running co2-storage

• Instantiating a FGStorage object

5) For example, if we want to add a button that searches templates we can add this to the HTML in App.js:

<button onClick={SearchTemplates}>search</button>

And add the SearchTemplates function below, copying from the search_templates.js example:

async function SearchTemplates(){

  /**
   * Search templates
   * parameters: (chainName, phrases, cid, name, base, account, offset, limit, sortBy, sortDir)
   * // default data_chain: 'sandbox', phrases: null, cid: null, name: null, base: null, account: null, offset: 0, limit: 10
   */

  let searchTemplatesResponse = await fgStorage.searchTemplates('sandbox')    // ('SP Audits', 'Water')
  if(searchTemplatesResponse.error != null) {
      console.error(searchTemplatesResponse.error)
      // await new Promise(reject => setTimeout(reject, 300));
      // process.exit()
  }

  console.log(searchTemplatesResponse.result)

}

When you go to your browser console, this should cause the results of the search to be returned.