Add IPFS deploy pipeline

.github/workflows/preview-deploy-cleanup.yml

@@ -0,0 +1,20 @@
+name: IPFS Preview Deploy - Cleanup
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  cleanup:
+    name: Remove test environment deployment
+    runs-on: ubuntu-latest
+    steps:
+      - name: Inject slug variables
+        uses: rlespinasse/[email protected]
+
+      - name: Mark deployment as deactivated
+        uses: bobheadxi/[email protected]
+        with:
+          step: deactivate-env
+          token: ${{ secrets.GITHUB_TOKEN }}
+          env: ${{ env.GITHUB_HEAD_REF_SLUG_URL }}

.github/workflows/preview-deploy.yml

@@ -0,0 +1,61 @@
+name: IPFS Preview Deploy
+
+on:
+  push:
+    branches:
+      - dev
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  develop-ci:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [14.x]
+    steps:
+      - name: Inject slug variables
+        uses: rlespinasse/[email protected]
+
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Start Deployment
+        uses: bobheadxi/[email protected]
+        id: deployment
+        with:
+          step: start
+          token: ${{ secrets.GITHUB_TOKEN }}
+          env: ${{ env.GITHUB_HEAD_REF_SLUG_URL || env.GITHUB_REF_SLUG_URL }}
+          ref: ${{ github.head_ref }}
+
+      - name: Remove dependencies
+        run: rm -rf package-lock.json node_modules
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build Dapp
+        run: npm run build:xdai
+
+      - name: Deploy to IPFS
+        uses: web3-storage/add-to-web3@v1
+        id: web3
+        with:
+          web3_token: ${{ secrets.WEB3_STORAGE_TOKEN }}
+          path_to_add: 'build'
+
+      - name: Update Deployment Status
+        uses: bobheadxi/[email protected]
+        if: always()
+        with:
+          step: finish
+          token: ${{ secrets.GITHUB_TOKEN }}
+          status: ${{ job.status }}
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+          env_url: 'https://${{ steps.web3.outputs.cid }}.ipfs.dweb.link'

src/App.tsx

@@ -4,7 +4,7 @@ import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client'
 import React, { Suspense, useEffect, useState, useCallback } from 'react'
 import styled, { ThemeProvider } from 'styled-components'
 import { ToastContainer } from 'react-toastify'
-import { BrowserRouter } from 'react-router-dom'
+import { HashRouter } from 'react-router-dom'
 import { useWeb3React } from '@web3-react/core'
 import { CookiesProvider } from 'react-cookie'
 import Axios from 'axios'
@@ -84,7 +84,7 @@ export const App = () => {
               <ThemeProvider theme={theme}>
                 <GlobalStyle />
                 <Suspense fallback={<Center minHeight="100vh">LOADING</Center>}>
-                  <BrowserRouter>
+                  <HashRouter>
                     <Container>
                       <Header />
                       <AppRouter />
@@ -109,7 +109,7 @@ export const App = () => {
                       />
                       {!isMobile && <FeedbackOverlay />}
                     </Container>
-                  </BrowserRouter>
+                  </HashRouter>
                 </Suspense>
               </ThemeProvider>
             </SanctionContext.Provider>