From 22cbfc2568a594f46098a1e195bfde5138a3edd7 Mon Sep 17 00:00:00 2001
From: Memo Khoury <majd.khoury93@gmail.com>
Date: Fri, 27 Sep 2024 20:02:07 +0100
Subject: [PATCH] metatags

---
 .../world-builder-dashboard/package-lock.json | 24 +++++++++
 webapps/world-builder-dashboard/package.json  |  1 +
 webapps/world-builder-dashboard/src/App.tsx   | 53 ++++++++++---------
 .../src/layouts/MainLayout/MainLayout.tsx     | 11 +++-
 .../src/pages/BridgePage/BridgePage.tsx       |  6 +++
 .../src/pages/FaucetPage/FaucetPage.tsx       |  6 +++
 6 files changed, 75 insertions(+), 26 deletions(-)

diff --git a/webapps/world-builder-dashboard/package-lock.json b/webapps/world-builder-dashboard/package-lock.json
index 78c16595..cb151bb7 100644
--- a/webapps/world-builder-dashboard/package-lock.json
+++ b/webapps/world-builder-dashboard/package-lock.json
@@ -19,6 +19,7 @@
         "prettier-plugin-tailwindcss": "^0.6.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-helmet-async": "^2.0.5",
         "react-query": "^3.39.3",
         "react-router-dom": "^6.11.2",
         "summon-ui": "^0.21.0"
@@ -9493,6 +9494,24 @@
         "react": ">= 16.8 || 18.0.0"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
+    "node_modules/react-helmet-async": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz",
+      "integrity": "sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "react-fast-compare": "^3.2.2",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-intl": {
       "version": "6.6.8",
       "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.6.8.tgz",
@@ -9981,6 +10000,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
diff --git a/webapps/world-builder-dashboard/package.json b/webapps/world-builder-dashboard/package.json
index 6e1fb7cb..b3d6b885 100644
--- a/webapps/world-builder-dashboard/package.json
+++ b/webapps/world-builder-dashboard/package.json
@@ -22,6 +22,7 @@
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.5",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.11.2",
     "summon-ui": "^0.21.0"
diff --git a/webapps/world-builder-dashboard/src/App.tsx b/webapps/world-builder-dashboard/src/App.tsx
index 542a1ba0..0452001d 100644
--- a/webapps/world-builder-dashboard/src/App.tsx
+++ b/webapps/world-builder-dashboard/src/App.tsx
@@ -1,3 +1,4 @@
+import { HelmetProvider } from 'react-helmet-async'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { RouterProvider } from 'react-router-dom'
 import { FIVE_MINUTES } from '../constants'
@@ -50,30 +51,32 @@ const { name, lang, uiTheme } = TENANT_CONFIG
 
 export default function App() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <BlockchainProvider>
-        <UISettingsProvider>
-          <AssetsProvider tenant={name as Tenant}>
-            <IntlProvider
-              intlConf={{
-                currentLang: lang as LangKey,
-                messagesConf: {
-                  ...enMessages
-                }
-              }}
-            >
-              <ThemeProvider uiTheme={uiTheme}>
-                <BridgeNotificationsProvider>
-                  <Notifications position='top-right' zIndex={1000} styles={NOTIFICATIONS_STYLES} />
-                  <AuthProvider>
-                    <RouterProvider router={router} />
-                  </AuthProvider>
-                </BridgeNotificationsProvider>
-              </ThemeProvider>
-            </IntlProvider>
-          </AssetsProvider>
-        </UISettingsProvider>
-      </BlockchainProvider>
-    </QueryClientProvider>
+    <HelmetProvider>
+      <QueryClientProvider client={queryClient}>
+        <BlockchainProvider>
+          <UISettingsProvider>
+            <AssetsProvider tenant={name as Tenant}>
+              <IntlProvider
+                intlConf={{
+                  currentLang: lang as LangKey,
+                  messagesConf: {
+                    ...enMessages
+                  }
+                }}
+              >
+                <ThemeProvider uiTheme={uiTheme}>
+                  <BridgeNotificationsProvider>
+                    <Notifications position='top-right' zIndex={1000} styles={NOTIFICATIONS_STYLES} />
+                    <AuthProvider>
+                      <RouterProvider router={router} />
+                    </AuthProvider>
+                  </BridgeNotificationsProvider>
+                </ThemeProvider>
+              </IntlProvider>
+            </AssetsProvider>
+          </UISettingsProvider>
+        </BlockchainProvider>
+      </QueryClientProvider>
+    </HelmetProvider>
   )
 }
diff --git a/webapps/world-builder-dashboard/src/layouts/MainLayout/MainLayout.tsx b/webapps/world-builder-dashboard/src/layouts/MainLayout/MainLayout.tsx
index 24807c3c..37d29b06 100644
--- a/webapps/world-builder-dashboard/src/layouts/MainLayout/MainLayout.tsx
+++ b/webapps/world-builder-dashboard/src/layouts/MainLayout/MainLayout.tsx
@@ -1,5 +1,6 @@
 // React and related libraries
 import React from 'react'
+import { Helmet } from 'react-helmet-async'
 import { Outlet } from 'react-router-dom'
 // Styles
 import styles from './MainLayout.module.css'
@@ -14,12 +15,20 @@ interface MainLayoutProps {}
 
 const NAVIGATION_ITEMS = [
   { name: 'bridge', navigateTo: '/bridge', icon: <IconWallet04 /> },
-  { name: 'faucet', navigateTo: '/faucet', icon: <IconDroplets02 /> },
+  { name: 'faucet', navigateTo: '/faucet', icon: <IconDroplets02 /> }
 ]
 const MainLayout: React.FC<MainLayoutProps> = ({}) => {
   const smallView = useMediaQuery('(max-width: 1199px)')
   return (
     <div className={styles.container}>
+      <Helmet>
+        <meta name='title' content='G7 Network Developer Hub' />
+        <meta
+          name='description'
+          content='Launch your game on G7 network and gain access to the growing Game7 community of players and tools'
+        />
+        <meta name='robots' content='index, follow' />
+      </Helmet>
       {smallView ? (
         <MobileSidebar navigationItems={NAVIGATION_ITEMS} />
       ) : (
diff --git a/webapps/world-builder-dashboard/src/pages/BridgePage/BridgePage.tsx b/webapps/world-builder-dashboard/src/pages/BridgePage/BridgePage.tsx
index 58949a03..92eea46f 100644
--- a/webapps/world-builder-dashboard/src/pages/BridgePage/BridgePage.tsx
+++ b/webapps/world-builder-dashboard/src/pages/BridgePage/BridgePage.tsx
@@ -1,5 +1,6 @@
 // React and hooks
 import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
 import { useQueryClient } from 'react-query'
 import { useLocation, useNavigate } from 'react-router-dom'
 // Styles
@@ -44,6 +45,11 @@ const BridgePage = () => {
 
   return (
     <div className={styles.container}>
+      <Helmet>
+        <meta name='title' content='The official G7 bridge' />
+        <meta name='description' content='Bridge tokens to and from the G7 network through the G7 official bridge.' />
+        <meta name='robots' content='index, follow' />
+      </Helmet>
       <div className={styles.top}>
         <div className={styles.headerContainer}>
           {notifications.data && <FloatingNotification notifications={newNotifications} />}
diff --git a/webapps/world-builder-dashboard/src/pages/FaucetPage/FaucetPage.tsx b/webapps/world-builder-dashboard/src/pages/FaucetPage/FaucetPage.tsx
index 69323b27..d3a5d170 100644
--- a/webapps/world-builder-dashboard/src/pages/FaucetPage/FaucetPage.tsx
+++ b/webapps/world-builder-dashboard/src/pages/FaucetPage/FaucetPage.tsx
@@ -1,5 +1,6 @@
 // React and hooks
 import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
 import { useQueryClient } from 'react-query'
 // Constants
 import { L3_NATIVE_TOKEN_SYMBOL } from '../../../constants'
@@ -36,6 +37,11 @@ const BridgePage = () => {
 
   return (
     <div className={bridgeStyles.container}>
+      <Helmet>
+        <meta name='title' content='G7 Sepolia faucet' />
+        <meta name='description' content='Get G7 testnet tokens and begin participating in the Game7 network.' />
+        <meta name='robots' content='index, follow' />
+      </Helmet>
       <div className={bridgeStyles.top}>
         <div className={bridgeStyles.headerContainer}>
           {notifications.data && <FloatingNotification notifications={newNotifications} />}