migrate to Next.js (#935)

* migrate to Next.js * migrate scripts * generate markdown pages * make all the markdown work * fix profile, fix image loading * git+ssh → git+https, again * bump packages * maybe windows build fix * add public to gitignore Signed-off-by: mihaisc <[email protected]> * Next.js v12! Webpack 5! No build hacks anymore * json import fixes * fixes Co-authored-by: mihaisc <[email protected]>
deltaDAO · Oct 27, 2021 · 3729c63 · 3729c63
1 parent 032b3e1
commit 3729c63
Show file tree

Hide file tree

Showing 154 changed files with 56,281 additions and 87,052 deletions.
diff --git a/.env.example b/.env.example
@@ -1,17 +1,17 @@
 
-#GATSBY_INFURA_PROJECT_ID="xxx"
-#GATSBY_MARKET_FEE_ADDRESS="0xxx"
-#GATSBY_PORTIS_ID="xxx"
+#NEXT_INFURA_PROJECT_ID="xxx"
+#NEXT_MARKET_FEE_ADDRESS="0xxx"
+#NEXT_PORTIS_ID="xxx"
 
 
 #
 # ADVANCED SETTINGS
 #
 
 # Toggle pricing options presented during price creation
-#GATSBY_ALLOW_FIXED_PRICING="true"
-#GATSBY_ALLOW_DYNAMIC_PRICING="true"
-#GATSBY_ALLOW_FREE_PRICING="true"
+#NEXT_ALLOW_FIXED_PRICING="true"
+#NEXT_ALLOW_DYNAMIC_PRICING="true"
+#NEXT_ALLOW_FREE_PRICING="true"
 
 # Privacy Preference Center
-#GATSBY_PRIVACY_PREFERENCE_CENTER="true"
+#NEXT_PRIVACY_PREFERENCE_CENTER="true"
diff --git a/.eslintrc b/.eslintrc
@@ -27,6 +27,7 @@
       "rules": {
         "react/prop-types": "off",
         "react/no-unused-prop-types": "off",
+        "react/jsx-no-bind": "off",
         "@typescript-eslint/explicit-function-return-type": "off",
         "no-use-before-define": "off",
         "@typescript-eslint/no-use-before-define": "error"

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -36,7 +36,7 @@ jobs:
           restore-keys: ${{ runner.os }}-${{ matrix.node }}-build-${{ env.cache-name }}-
 
       - run: npm ci
-      - run: npm run apollo:codegen
+      - run: npm run codegen:apollo
       - run: npm run lint
       # - run: npm test
       - run: npm run build

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -16,8 +16,8 @@ jobs:
 
       - run: npm run build
         env:
-          GATSBY_INFURA_PROJECT_ID: ${{ secrets.GATSBY_INFURA_PROJECT_ID }}
-          GATSBY_PORTIS_ID: ${{ secrets.GATSBY_PORTIS_ID }}
+          NEXT_INFURA_PROJECT_ID: ${{ secrets.NEXT_INFURA_PROJECT_ID }}
+          NEXT_PORTIS_ID: ${{ secrets.NEXT_PORTIS_ID }}
 
       - run: npm run deploy:s3
         env:

diff --git a/.gitignore b/.gitignore
@@ -4,15 +4,13 @@ out
 .idea
 .env
 coverage
-dist
-public
 .cache
-storybook-static
-public/storybook
+.next
 .artifacts
 .vercel
 repo-metadata.json
-content/networks-metadata.json
+networks-metadata.json
 src/@types/apollo
 graphql.schema.json
 src/@types/graph.types.ts
+public
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,7 +11,7 @@
     "typescriptreact"
   ],
   "search.exclude": {
-    "**/.cache": true,
-    "**/public": true
+    "**/.next": true,
+    "**/out": true
   }
 }
diff --git a/README.md b/README.md
@@ -36,7 +36,7 @@
 
 ## 🏄 Get Started
 
-The app is a React app built with [Gatsby.js](https://www.gatsbyjs.org) + TypeScript + CSS modules and will connect to Ocean remote components by default.
+The app is a React app built with [Next.js](https://nextjs.org) + TypeScript + CSS modules and will connect to Ocean remote components by default.
 
 To start local development:
 
@@ -54,9 +54,6 @@ npm start
 This will start the development server under
 `http://localhost:8000`.
 
-To explore the generated GraphQL data structure fire up the accompanying GraphiQL IDE under
-`http://localhost:8000/__graphql`.
-
 ### Local components with Barge
 
 If you prefer to connect to locally running components instead of remote connections, you can spin up [`barge`](https://github.com/oceanprotocol/barge) and use a local Ganache network in another terminal before running `npm start`:
@@ -260,7 +257,7 @@ function Component() {
 
 ### Network Metadata
 
-All displayed chain & network metadata is retrieved from `https://chainid.network` on build time and integrated into Gatsby's GraphQL layer. This data source is a community-maintained GitHub repository under [ethereum-lists/chains](https://github.com/ethereum-lists/chains).
+All displayed chain & network metadata is retrieved from `https://chainid.network` on build time and integrated into NEXT's GraphQL layer. This data source is a community-maintained GitHub repository under [ethereum-lists/chains](https://github.com/ethereum-lists/chains).
 
 Within components this metadata can be queried for under `allNetworksMetadataJson`. The `useWeb3()` hook does this in the background to expose the final `networkDisplayName` for use in components:
 
@@ -343,15 +340,15 @@ Everything else is made open according to the apache2 license. We look forward t
 
 ### Dynamic Pricing
 
-To allow publishers to set pricing as "Dynamic" you need to add the following environmental variable to your .env file: `GATSBY_ALLOW_DYNAMIC_PRICING="true"` (default).
+To allow publishers to set pricing as "Dynamic" you need to add the following environmental variable to your .env file: `NEXT_ALLOW_DYNAMIC_PRICING="true"` (default).
 
 ### Fixed Pricing
 
-To allow publishers to set pricing as "Fixed" you need to add the following environmental variable to your .env file: `GATSBY_ALLOW_FIXED_PRICING="true"` (default).
+To allow publishers to set pricing as "Fixed" you need to add the following environmental variable to your .env file: `NEXT_ALLOW_FIXED_PRICING="true"` (default).
 
 ### Free Pricing
 
-To allow publishers to set pricing as "Free" you need to add the following environmental variable to your .env file: `GATSBY_ALLOW_FREE_PRICING="true"` (default).
+To allow publishers to set pricing as "Free" you need to add the following environmental variable to your .env file: `NEXT_ALLOW_FREE_PRICING="true"` (default).
 
 This allocates the datatokens to the [dispenser contract](https://github.com/oceanprotocol/contracts/blob/main/contracts/dispenser/Dispenser.sol) which dispenses data tokens to users for free. Publishers in your market will now be able to offer their datasets to users for free (excluding gas costs).
 
@@ -365,7 +362,7 @@ Feel free to adopt our provided privacy policies to your needs. Per default we c
 
 ### Privacy Preference Center
 
-Additionally, Ocean Market provides a privacy preference center for you to use. This feature is disabled per default since we do not use cookies requiring consent on our deployment of the market. However, if you need to add some functionality depending on cookies, you can simply enable this feature by changing the value of the `GATSBY_PRIVACY_PREFERENCE_CENTER` environmental variable to `"true"` in your `.env` file. This will enable a customizable cookie banner stating the use of your individual cookies. The content of this banner can be adjusted within the `content/gdpr.json` file. If no `optionalCookies` are provided, the privacy preference center will be set to a simpler version displaying only the `title`, `text` and `close`-button. This can be used to inform the user about the use of essential cookies, where no consent is needed. The privacy preference center supports two different styling options: `'small'` and `'default'`. Setting the style propertie to `'small'` will display a smaller cookie banner to the user at first, only showing the default styled privacy preference center upon the user's customization request.
+Additionally, Ocean Market provides a privacy preference center for you to use. This feature is disabled per default since we do not use cookies requiring consent on our deployment of the market. However, if you need to add some functionality depending on cookies, you can simply enable this feature by changing the value of the `NEXT_PRIVACY_PREFERENCE_CENTER` environmental variable to `"true"` in your `.env` file. This will enable a customizable cookie banner stating the use of your individual cookies. The content of this banner can be adjusted within the `content/gdpr.json` file. If no `optionalCookies` are provided, the privacy preference center will be set to a simpler version displaying only the `title`, `text` and `close`-button. This can be used to inform the user about the use of essential cookies, where no consent is needed. The privacy preference center supports two different styling options: `'small'` and `'default'`. Setting the style propertie to `'small'` will display a smaller cookie banner to the user at first, only showing the default styled privacy preference center upon the user's customization request.
 
 Now your market users will be provided with additional options to toggle the use of your configured cookie consent categories. You can always retrieve the current consent status per category with the provided `useConsent()` hook. See below, how you can set your own custom cookies depending on the market user's consent. Feel free to adjust the provided utility functions for cookie usage provided in the `src/utils/cookies.ts` file to your needs.
 

diff --git a/_redirects b/_redirects
diff --git a/app.config.js b/app.config.js
@@ -15,11 +15,11 @@ module.exports = {
   // List of all supported chainIds. Used to populate the Chains user preferences list.
   chainIdsSupported: [1, 3, 4, 137, 80001, 1287, 56, 2021000, 1285, 246],
 
-  infuraProjectId: process.env.GATSBY_INFURA_PROJECT_ID || 'xxx',
+  infuraProjectId: process.env.NEXT_INFURA_PROJECT_ID || 'xxx',
 
   // The ETH address the marketplace fee will be sent to.
   marketFeeAddress:
-    process.env.GATSBY_MARKET_FEE_ADDRESS ||
+    process.env.NEXT_MARKET_FEE_ADDRESS ||
     '0x9984b2453eC7D99a73A5B3a46Da81f197B753C8d',
 
   // Used for conversion display, can be whatever coingecko API supports
@@ -48,13 +48,13 @@ module.exports = {
   },
 
   // Wallets
-  portisId: process.env.GATSBY_PORTIS_ID || 'xxx',
+  portisId: process.env.NEXT_PORTIS_ID || 'xxx',
 
   // Used to show or hide the fixed, dynamic or free price options
   // tab to publishers during the price creation.
-  allowFixedPricing: process.env.GATSBY_ALLOW_FIXED_PRICING || 'true',
-  allowDynamicPricing: process.env.GATSBY_ALLOW_DYNAMIC_PRICING || 'true',
-  allowFreePricing: process.env.GATSBY_ALLOW_FREE_PRICING || 'true',
+  allowFixedPricing: process.env.NEXT_ALLOW_FIXED_PRICING || 'true',
+  allowDynamicPricing: process.env.NEXT_ALLOW_DYNAMIC_PRICING || 'true',
+  allowFreePricing: process.env.NEXT_ALLOW_FREE_PRICING || 'true',
 
   // Set the default privacy policy to initially display
   // this should be the slug of your default policy markdown file
@@ -65,6 +65,5 @@ module.exports = {
   // If set to true a gdpr.json file inside the content directory
   // is used to create and show a privacy preference center / cookie banner
   // To learn more about how to configure and use this, please refer to the readme
-  privacyPreferenceCenter:
-    process.env.GATSBY_PRIVACY_PREFERENCE_CENTER || 'false'
+  privacyPreferenceCenter: process.env.NEXT_PRIVACY_PREFERENCE_CENTER || 'false'
 }
diff --git a/content/site.json b/content/site.json
@@ -1,28 +1,26 @@
 {
-  "site": {
-    "siteTitle": "Ocean Market",
-    "siteTagline": "A marketplace to find, publish and trade data sets in the Ocean Network.",
-    "siteUrl": "https://market.oceanprotocol.com",
-    "siteIcon": "node_modules/@oceanprotocol/art/logo/favicon-white.png",
-    "siteImage": "../src/@images/share.png",
-    "copyright": "All Rights Reserved. Powered by [Ocean Protocol](https://oceanprotocol.com)",
-    "menu": [
-      {
-        "name": "Publish",
-        "link": "/publish"
-      },
-      {
-        "name": "Profile",
-        "link": "/profile"
-      }
-    ],
-    "warning": {
-      "main": "We are in beta. Please familiarize yourself with [the market](https://oceanprotocol.com/technology/marketplaces), [the risks](https://blog.oceanprotocol.com/on-staking-on-data-in-ocean-market-3d8e09eb0a13), and the [Terms of Use](/terms).",
-      "polygonPublish": "Only republish data sets with a pool from ETH Mainnet into Polygon/Matic if the liquidity is **less than or equal to 1000 OCEAN in the original pool**. Doing otherwise will lead to [purgatory](https://github.com/oceanprotocol/list-purgatory) for the data set in Polygon/Matic."
+  "siteTitle": "Ocean Market",
+  "siteTagline": "A marketplace to find, publish and trade data sets in the Ocean Network.",
+  "siteUrl": "https://market.oceanprotocol.com",
+  "siteIcon": "node_modules/@oceanprotocol/art/logo/favicon-white.png",
+  "siteImage": "../src/@images/share.png",
+  "copyright": "All Rights Reserved. Powered by [Ocean Protocol](https://oceanprotocol.com)",
+  "menu": [
+    {
+      "name": "Publish",
+      "link": "/publish"
     },
-    "announcement": {
-      "main": "Ocean Market is [available on Polygon](https://blog.oceanprotocol.com/ocean-on-polygon-network-8abad19cbf47).",
-      "polygon": "Polygon/Matic EVM support is in early stages. [Use the Polygon Bridge](https://docs.oceanprotocol.com/tutorials/polygon-bridge/) to get mOCEAN."
+    {
+      "name": "Profile",
+      "link": "/profile"
     }
+  ],
+  "warning": {
+    "main": "We are in beta. Please familiarize yourself with [the market](https://oceanprotocol.com/technology/marketplaces), [the risks](https://blog.oceanprotocol.com/on-staking-on-data-in-ocean-market-3d8e09eb0a13), and the [Terms of Use](/terms).",
+    "polygonPublish": "Only republish data sets with a pool from ETH Mainnet into Polygon/Matic if the liquidity is **less than or equal to 1000 OCEAN in the original pool**. Doing otherwise will lead to [purgatory](https://github.com/oceanprotocol/list-purgatory) for the data set in Polygon/Matic."
+  },
+  "announcement": {
+    "main": "Ocean Market is [available on Polygon](https://blog.oceanprotocol.com/ocean-on-polygon-network-8abad19cbf47).",
+    "polygon": "Polygon/Matic EVM support is in early stages. [Use the Polygon Bridge](https://docs.oceanprotocol.com/tutorials/polygon-bridge/) to get mOCEAN."
   }
 }
diff --git a/gatsby-browser.js b/gatsby-browser.js
diff --git a/gatsby-config.js b/gatsby-config.js
diff --git a/gatsby-node.js b/gatsby-node.js