Decentralized Uniswap Interface Hosting on IPFS
Hosting a website/DApp frontend on IPFS grants you several benefits, such as serverless hosting, potential resilience to DNS hijacks (together with IPNS/ENS), and high uptime. Uniswap, as one of the most widely used DEX’s (Decentralized Exchange), has been integrated with IPFS for approximately a year. This Uniswap blog also explains some aspects of the IPFS integration.
This article explains the whole process in more detail, and also describes the way to host a website in a more decentralized way using Crust.
1. Hosting Uniswap Interface on IPFS
Step 1: Build the Uniswap Website
Uniswap builds the website, and all contents for the newest version of Uniswap Interface are contained in one Build Folder.
Step 2: Upload the Website to IPFS
Uniswap uploads Build Folder via Pinata (a form of Pinning Service) to the IPFS network so that this file can be retrieved on the IPFS Network.
Step 3: Pin to IPFS
Uniswap Interface integrates with Pinning Services, such as pinata.cloud and Crust Network, to ensure the Build Folder is spread throughout the network.
Step 4: Update DNS Records
The DNS records of the Uniswap Interface make the website accessible via a readable URL app.uniswap.org. The DNS records are configured as follows:
- A CNAME record for app.uniswap.org with a value of cloudflare-ipfs.com.
- A TXT record for _dnslink.app.uniswap.org with a value of dnslink=/ipfs/QmRELxvJy8rNA5EoCpYQkWKzxi5y1zCMmcM4UveBaNGuLo
As of this writing, the Content ID of Uniswap Interface is QmRELxvJy8rNA5EoCpYQkWKzxi5y1zCMmcM4UveBaNGuLo, which may change once the Uniswap Interface updates.
Continuous Integration and Deployment
Uniswap integrates the above steps into GitHub Actions, establishing a consistent and automated CI/CD pipeline.
2. Decentralized Uniswap Interface Hosting
To decentralize the deployment workflow, Uniswap is using Crust Network as one of its pinning services. Whenever the Uniswap Interface is updated, the corresponding deployment workflow will be automatically executed while triggering Crust IPFS Pin Actions.
The Crust IPFS Pin Action helps place a storage order (an on-chain order contains IPFS CID of the website Build Folder) on Crust Network. Once this action is completed, the website build folder will be pinned and distributed by storage nodes of Crust Network. The order placement and file distribution are both decentralized.
When the storage order is generated, the storage info including status and the number of replicas can be collected on-chain and can be viewed via Crust Apps.
From above, it can be seen that the Uniswap Interface (with the CID QmbvfctPrBHtSBrvBY8ENRbkaFzeJt2rP7gu6cTdBKJNVe) is pinned by a total of 122 nodes on Crust Network.
3. A General Workflow of Decentralized Websites/DApps Hosting
Here is a general Github Workflow that can guide developers to deploy a website/DApp decentralized: IPFS Crust Pinner Template Workflow. With the Workflow combined, the whole deployment process is as follows (take website deployment as an example):
Step 1: Build the Website
The same as the build-step of Uniswap Interface, and websites should be built into a Build Folder.
Step 2: Upload the Website to IPFS
In this step, Crust IPFS Upload Action will be triggered.
The website Build Folder will be uploaded onto a public IPFS Gateway — crustwebsites.net.
Step 3: Pin to IPFS
In this step, Crust IPFS Pin Action will be triggered. The website Build Folder will be pinned and distributed by storage nodes of Crust Network.
Step 4: Update DNS Records
The DNS configuration is demonstrated in this doc. Also, there is a standard Github Workflow to help automatically update the DNS Record of Cloudflare.
More Decentralization
Developers can integrate products such as Ethereum Name Service (ENS) to further decentralize their websites/DApps. This will make the website more secure, effectively avoid DNS hijacking. Details of this section will come in the following articles.
4. Resources
IPFS Materials
Crust Materials
Crust provides a decentralized storage network of the Web 3.0 ecosystem.
