EthQuad

Polyglot hack to demonstrate a combination of Filecoin related tooling

Demo Video Live Demo Source Code

Description

The EthQuad project provides the boilerplate for anyone building full-stack Filecoin related DApps. It has incorporated products from as many HackFS sponsors as possible. The technical stack is primarily JavaScript (front-end built with React.js and TypeScript, and Express.js and Node.js used for the backend API). It shows users how to run Lotus Filecoin Testnet using Textile Lotus (Filecoin), PowerGate, and IPFS on a local machine using Docker, and then build and deploy the front-end website to an IPFS hash using Pinata Cloud's SDK, and to deploy and run the backend API on Heroku, which was necessary so as not to expose Infura's or Pinata's sensitive API keys. In future these Docker containers would hosted in the cloud so the production front-end may query it. The website may be zipped and stored on the Lotus Filecoin Testnet by making a deal using the Slate Design System UI components, by using the Textile.io storage API (PowerGate) to obtain authorisation to access the Filecoin File System (FFS) API using the Textile PowerGate JS Client @textile/powergate-client) and interact with the Docker containers that are running Lotus Filecoin Testnet and IPFS. The front-end queries the backend API for the latest block information from Infura's Eth2.0 Altona endpoint and displays it. An Unstoppable Domains domain name ethquad.crypto has been configured to redirect to the latest IPFS hash where it is deployed (which would then redirect to the traditional domain name), however DNS records have not yet been updated. In the interim the website may be accessed at ethquad.herokuapp.com, which redirects to an IPFS hash where the front-end is stored.

How It's Made

The following checklist describes the steps I followed to build the project, including various challenges that I encountered and overcame through help from the cohort and sponsors. It is extracted from https://github.com/ltfschoen/ethquad#roadmap * [X] Frontend React.js & TypeScript boilerplate (./client) * [X] Backend Express.js API boilerplate (./server). Served at https://ethquad.herokuapp.com/api * [X] Configure CORS to allow requests from Official IPFS Gateway * [X] Local Docker container setup process for running with Textile.io storage API (PowerGate) that interacts with Lotus (Filecoin) and IPFS * [ ] Production Docker container running with Textile.io storage API (PowerGate) that interacts with Lotus (Filecoin) and IPFS * [X] Frontend Slate Design System UI components that interact with PowerGate (./client/src/) * [X] Connect and obtain Authorisation to access the Filecoin File System (FFS) API using Textile PowerGate JS Client (@textile/powergate-client) * [X] Generate a Powergate token. Store or retrieve (if exists) from web browser Local Storage. Check if retrieved existing Powergate token invalid due to restarting local Docker container with Textile PowerGate * [X] Create and view multiple Filecoin Addresses and associate them with PowerGate token. * [X] Retrieve Pin (IPFS Hash where front-end deployed) from PinList using Express.js API endpoint that connects to Pinata (http://ethquad.herokuapp.com/api/getWebsiteIPFSHash) * [X] Display latest Pin (Website IPFS Hash) in front-end * [X] Use Slate's "Make a Storage Deal" code to deploy a zip file of the website to Lotus Filecoin Testnet. Only works in 'development' environment where Lotus Filecoin Testnet and PowerGate Docker instances are running (see section "Connect to Lotus (Filecoin) and IPFS" below) * [ ] Modify the Slate's "Make a Storage Deal" code to deploy that latest Pin to Lotus Filecoin Testnet (not just Local) * [ ] Pending resolution of issues: * https://github.com/filecoin-project/slate/issues/71 * https://github.com/textileio/powergate/issues/521 * https://github.com/ltfschoen/ethquad/pull/7 * [X] Frontend deployed to IPFS Address using Pinata SDK * [X] Request decentralised domain name from Unstoppable Domains (https://ethquad.crypto) * [X] Deployment script generate a new Pin and Unpins all previous (./scripts/pinataUploadIpfs.js) * [X] Separate IPFS Address Pin for deployed frontend depending on environment (development or proudction). Used Pinata metadata to identify associated environment. * [X] Preview using Official IPFS Gateway (i.e. https://ipfs.io/ipfs/) in development environment (`yarn dev:ipfs:preview`) * [X] Configure ethquad.crypto domain name to redirect to an IPFS Hash (which just redirects to Heroku at ethquad.herokuapp.com), and configure ethquad.herokuapp.com to further redirects to the IPFS hash where the front-end of the website is stored. * [X] Temporary workaround since 'Redirect to Traditional Domain' is not working yet (as advised by Magomet Tsanajev from Unstoppable Domains). See https://community.unstoppabledomains.com/t/redirect-blockchain-domains/621 * [ ] Pending name server changes to propagate https://filecoinproject.slack.com/archives/C016UAP2N8Z/p1594877963245700. Note that this requires Unstoppable Domains to get the 'Redirect to Traditional Domain' functionality working * [X] Backend Express.js API connection to Infura Eth 2.0 Endpoint (https://altona.infura.io)

Team

Luke Schoen
← click here to see all projects