added reCaptcha v2 , refactored components

.github/workflows/dev.yml

@@ -4,47 +4,49 @@ name: CI
 
 # Controls when the workflow will run
 on:
-  # Triggers the workflow on push request events but only for the main branch
-  push:
-    branches: [dev]
+    # Triggers the workflow on push request events but only for the main branch
+    push:
+        branches: [dev]
 
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
+    # Allows you to run this workflow manually from the Actions tab
+    workflow_dispatch:
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "build"
-  build:
-    # The type of runner that the job will run on
-    runs-on: ubuntu-latest
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
-    steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - name: Check out latest code
-        uses: actions/checkout@v2
-
-      # Grab the required version of NodeJS
-      - name: Set Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "18.17.0"
-
-      # Install all the Node dependencies for Gatsby, using your package.json file.
-      - name: Install Dependencies
-        run: npm install --legacy-peer-deps
-
-      # Speaks for itself no?
-      - name: Build Gatsby Site
-        run: npm run build
-
-      # This was the hardest part for me to figure out - see article for more details
-      - name: Install Deployment SSH Key
-        uses: shimataro/ssh-key-action@v2
-        with:
-          key: ${{secrets.deploy_key}}
-          known_hosts: ${{secrets.known_hosts}}
-
-      # Finally, deploy it to your very own server
-      - name: Deploy To Live
-        run: rsync -avzh --delete -e 'ssh' public/ --rsync-path='mkdir -p ${{secrets.target_dir_dev}} && rsync' ${{secrets.ssh_user}}@${{secrets.ssh_host}}:${{secrets.target_dir_dev}}
+    # This workflow contains a single job called "build"
+    build:
+        # The type of runner that the job will run on
+        runs-on: ubuntu-latest
+
+        # Steps represent a sequence of tasks that will be executed as part of the job
+        steps:
+            # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+            - name: Check out latest code
+              uses: actions/checkout@v2
+
+            # Grab the required version of NodeJS
+            - name: Set Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: "18.17.0"
+
+            # Install all the Node dependencies for Gatsby, using your package.json file.
+            - name: Install Dependencies
+              run: npm install --legacy-peer-deps
+
+            # Speaks for itself no?
+            - name: Build Gatsby Site
+              run: npm run build
+              env:
+                  GATSBY_RECAPTCHA_SITE_KEY: ${{ secrets.GATSBY_RECAPTCHA_SITE_KEY }}
+
+            # This was the hardest part for me to figure out - see article for more details
+            - name: Install Deployment SSH Key
+              uses: shimataro/ssh-key-action@v2
+              with:
+                  key: ${{secrets.deploy_key}}
+                  known_hosts: ${{secrets.known_hosts}}
+
+            # Finally, deploy it to your very own server
+            - name: Deploy To Live
+              run: rsync -avzh --delete -e 'ssh' public/ --rsync-path='mkdir -p ${{secrets.target_dir_dev}} && rsync' ${{secrets.ssh_user}}@${{secrets.ssh_host}}:${{secrets.target_dir_dev}}

.github/workflows/main.yml

@@ -4,47 +4,49 @@ name: CI
 
 # Controls when the workflow will run
 on:
-  # Triggers the workflow on push request events but only for the main branch
-  push:
-    branches: [main]
+    # Triggers the workflow on push request events but only for the main branch
+    push:
+        branches: [main]
 
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
+    # Allows you to run this workflow manually from the Actions tab
+    workflow_dispatch:
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "build"
-  build:
-    # The type of runner that the job will run on
-    runs-on: ubuntu-latest
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
-    steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - name: Check out latest code
-        uses: actions/checkout@v2
-
-      # Grab the required version of NodeJS
-      - name: Set Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "18.17.0"
-
-      # Install all the Node dependencies for Gatsby, using your package.json file.
-      - name: Install Dependencies
-        run: npm install --legacy-peer-deps
-
-      # Speaks for itself no?
-      - name: Build Gatsby Site
-        run: npm run build
-
-      # This was the hardest part for me to figure out - see article for more details
-      - name: Install Deployment SSH Key
-        uses: shimataro/ssh-key-action@v2
-        with:
-          key: ${{secrets.deploy_key}}
-          known_hosts: ${{secrets.known_hosts}}
-
-      # Finally, deploy it to your very own server
-      - name: Deploy To Live
-        run: rsync -avzh --delete -e 'ssh' public/ --rsync-path='mkdir -p ${{secrets.target_dir_main}} && rsync' ${{secrets.ssh_user}}@${{secrets.ssh_host}}:${{secrets.target_dir_main}}
+    # This workflow contains a single job called "build"
+    build:
+        # The type of runner that the job will run on
+        runs-on: ubuntu-latest
+
+        # Steps represent a sequence of tasks that will be executed as part of the job
+        steps:
+            # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+            - name: Check out latest code
+              uses: actions/checkout@v2
+
+            # Grab the required version of NodeJS
+            - name: Set Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: "18.17.0"
+
+            # Install all the Node dependencies for Gatsby, using your package.json file.
+            - name: Install Dependencies
+              run: npm install --legacy-peer-deps
+
+            # Speaks for itself no?
+            - name: Build Gatsby Site
+              run: npm run build
+              env:
+                  GATSBY_RECAPTCHA_SITE_KEY: ${{ secrets.GATSBY_RECAPTCHA_SITE_KEY }}
+
+            # This was the hardest part for me to figure out - see article for more details
+            - name: Install Deployment SSH Key
+              uses: shimataro/ssh-key-action@v2
+              with:
+                  key: ${{secrets.deploy_key}}
+                  known_hosts: ${{secrets.known_hosts}}
+
+            # Finally, deploy it to your very own server
+            - name: Deploy To Live
+              run: rsync -avzh --delete -e 'ssh' public/ --rsync-path='mkdir -p ${{secrets.target_dir_main}} && rsync' ${{secrets.ssh_user}}@${{secrets.ssh_host}}:${{secrets.target_dir_main}}

.gitignore

@@ -3,6 +3,7 @@ public/
 node_modules/
 .vscode/
 .DS_Store
-.env
 package-lock.json
 .idea/
+.env.development
+.env.production

gatsby-config.js

@@ -1,3 +1,7 @@
+require("dotenv").config({
+	path: `.env.${process.env.NODE_ENV}`,
+});
+
 module.exports = {
 	siteMetadata: {
 		title: `The first modular blockchain network`,

package.json

@@ -52,6 +52,7 @@
 		"qs": "^6.11.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-google-recaptcha": "^3.1.0",
 		"react-helmet": "^6.1.0",
 		"react-in-viewport": "^1.0.0-alpha.30",
 		"react-lottie-player": "^1.5.5",