From a84b03966ee9e5eb2bc80718a144aafebf6102e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Wed, 8 Nov 2023 10:43:57 +0100
Subject: [PATCH 1/2] Refactor `DApps` folder

---
 src/index.tsx                                 |  2 +-
 src/shared/components/DApps/DesktopDApp.tsx   | 98 -------------------
 src/ui/DApps/DesktopDApp.tsx                  | 53 ++++++++++
 src/ui/DApps/IslandView.tsx                   | 49 ++++++++++
 .../components => ui}/DApps/MobileDApp.tsx    |  0
 src/{shared/components => ui}/DApps/index.tsx |  0
 6 files changed, 103 insertions(+), 99 deletions(-)
 delete mode 100644 src/shared/components/DApps/DesktopDApp.tsx
 create mode 100644 src/ui/DApps/DesktopDApp.tsx
 create mode 100644 src/ui/DApps/IslandView.tsx
 rename src/{shared/components => ui}/DApps/MobileDApp.tsx (100%)
 rename src/{shared/components => ui}/DApps/index.tsx (100%)

diff --git a/src/index.tsx b/src/index.tsx
index 4de05c15b..f1458cbe5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,7 +7,7 @@ import web3Onboard from "shared/utils/web3Onboard"
 // no-extraneous-dependencies.
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { PostHogProvider } from "posthog-js/react"
-import DApp from "shared/components/DApps"
+import DApp from "ui/DApps"
 import reduxStore from "./redux-state"
 
 function DAppProviders() {
diff --git a/src/shared/components/DApps/DesktopDApp.tsx b/src/shared/components/DApps/DesktopDApp.tsx
deleted file mode 100644
index 59f619d11..000000000
--- a/src/shared/components/DApps/DesktopDApp.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { ReactNode, useEffect } from "react"
-import {
-  Route,
-  BrowserRouter as Router,
-  Switch,
-  useLocation,
-} from "react-router-dom"
-import {
-  selectHasLoadedBalances,
-  selectHasLoadedRealmData,
-  selectHasLoadedSeasonInfo,
-  selectIslandMode,
-  useDappSelector,
-} from "redux-state"
-import FullPageLoader from "shared/components/FullPageLoader"
-import {
-  useBalanceFetch,
-  useConnect,
-  useGameDataFetch,
-  useGameLoadDataFetch,
-  usePopulationFetch,
-  useWallet,
-  useWalletChange,
-  useWalletOnboarding,
-} from "shared/hooks"
-import Onboarding from "ui/Onboarding"
-import IslandComponent from "ui/Island"
-import TestingPanel from "testing/components/TestingPanel"
-import Nav from "ui/Nav"
-import { ROUTES } from "shared/constants"
-import Claim from "ui/Claim"
-import Referrals from "ui/Referrals"
-import LiquidityPool from "ui/LiquidityPool"
-import Footer from "ui/Footer"
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { usePostHog } from "posthog-js/react"
-import PrivacyPolicy from "../PrivacyPolicy"
-
-function TrackEvents({ children }: { children: ReactNode[] }) {
-  const location = useLocation()
-  const posthog = usePostHog()
-
-  useEffect(() => {
-    posthog?.capture("$pageview", { url: location.pathname })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  return children
-}
-
-export default function DesktopDApp() {
-  const islandMode = useDappSelector(selectIslandMode)
-  const { isConnected } = useConnect()
-  const { walletOnboarded } = useWalletOnboarding()
-
-  const hasLoadedRealmData = useDappSelector(selectHasLoadedRealmData)
-  const hasLoadedSeasonInfo = useDappSelector(selectHasLoadedSeasonInfo)
-  const hasBalances = useDappSelector(selectHasLoadedBalances)
-
-  useWallet()
-  useGameLoadDataFetch()
-  useBalanceFetch()
-  usePopulationFetch()
-  useGameDataFetch()
-  useWalletChange()
-
-  return (
-    <Router>
-      <TrackEvents>
-        {(!walletOnboarded || !isConnected) && <Onboarding />}
-        {walletOnboarded && isConnected && (
-          <>
-            <FullPageLoader
-              loaded={hasLoadedRealmData && hasLoadedSeasonInfo && hasBalances}
-            />
-            <IslandComponent />
-            <TestingPanel />
-            {islandMode === "default" && <Nav />}
-            <Switch>
-              <Route path={ROUTES.CLAIM.HOME}>
-                <Claim />
-              </Route>
-              <Route path={ROUTES.REFERRALS}>
-                <Referrals />
-              </Route>
-              {/* TODO should be removed or defined later */}
-              <Route path={ROUTES.LP}>
-                <LiquidityPool />
-              </Route>
-            </Switch>
-            <Footer />
-          </>
-        )}
-        <PrivacyPolicy />
-      </TrackEvents>
-    </Router>
-  )
-}
diff --git a/src/ui/DApps/DesktopDApp.tsx b/src/ui/DApps/DesktopDApp.tsx
new file mode 100644
index 000000000..735e318cd
--- /dev/null
+++ b/src/ui/DApps/DesktopDApp.tsx
@@ -0,0 +1,53 @@
+import React, { ReactNode, useEffect } from "react"
+import { BrowserRouter as Router, useLocation } from "react-router-dom"
+
+import {
+  useBalanceFetch,
+  useConnect,
+  useGameDataFetch,
+  useGameLoadDataFetch,
+  usePopulationFetch,
+  useWallet,
+  useWalletChange,
+  useWalletOnboarding,
+} from "shared/hooks"
+import Onboarding from "ui/Onboarding"
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { usePostHog } from "posthog-js/react"
+import PrivacyPolicy from "../../shared/components/PrivacyPolicy"
+import IslandView from "./IslandView"
+
+function TrackEvents({ children }: { children: ReactNode[] }) {
+  const location = useLocation()
+  const posthog = usePostHog()
+
+  useEffect(() => {
+    posthog?.capture("$pageview", { url: location.pathname })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return children
+}
+
+export default function DesktopDApp() {
+  const { isConnected } = useConnect()
+  const { walletOnboarded } = useWalletOnboarding()
+
+  useWallet()
+  useGameLoadDataFetch()
+  useBalanceFetch()
+  usePopulationFetch()
+  useGameDataFetch()
+  useWalletChange()
+
+  return (
+    <Router>
+      <TrackEvents>
+        {(!walletOnboarded || !isConnected) && <Onboarding />}
+        {walletOnboarded && isConnected && <IslandView />}
+        <PrivacyPolicy />
+      </TrackEvents>
+    </Router>
+  )
+}
diff --git a/src/ui/DApps/IslandView.tsx b/src/ui/DApps/IslandView.tsx
new file mode 100644
index 000000000..3ef4ca600
--- /dev/null
+++ b/src/ui/DApps/IslandView.tsx
@@ -0,0 +1,49 @@
+import React from "react"
+import IslandComponent from "ui/Island"
+import TestingPanel from "testing/components/TestingPanel"
+import Nav from "ui/Nav"
+import { ROUTES } from "shared/constants"
+import Claim from "ui/Claim"
+import Referrals from "ui/Referrals"
+import LiquidityPool from "ui/LiquidityPool"
+import Footer from "ui/Footer"
+import {
+  selectHasLoadedBalances,
+  selectHasLoadedRealmData,
+  selectHasLoadedSeasonInfo,
+  selectIslandMode,
+  useDappSelector,
+} from "redux-state"
+import FullPageLoader from "shared/components/FullPageLoader"
+import { Route, Switch } from "react-router-dom"
+
+export default function IslandView() {
+  const islandMode = useDappSelector(selectIslandMode)
+  const hasLoadedRealmData = useDappSelector(selectHasLoadedRealmData)
+  const hasLoadedSeasonInfo = useDappSelector(selectHasLoadedSeasonInfo)
+  const hasBalances = useDappSelector(selectHasLoadedBalances)
+
+  return (
+    <>
+      <FullPageLoader
+        loaded={hasLoadedRealmData && hasLoadedSeasonInfo && hasBalances}
+      />
+      <IslandComponent />
+      <TestingPanel />
+      {islandMode === "default" && <Nav />}
+      <Switch>
+        <Route path={ROUTES.CLAIM.HOME}>
+          <Claim />
+        </Route>
+        <Route path={ROUTES.REFERRALS}>
+          <Referrals />
+        </Route>
+        {/* TODO should be removed or defined later */}
+        <Route path={ROUTES.LP}>
+          <LiquidityPool />
+        </Route>
+      </Switch>
+      <Footer />
+    </>
+  )
+}
diff --git a/src/shared/components/DApps/MobileDApp.tsx b/src/ui/DApps/MobileDApp.tsx
similarity index 100%
rename from src/shared/components/DApps/MobileDApp.tsx
rename to src/ui/DApps/MobileDApp.tsx
diff --git a/src/shared/components/DApps/index.tsx b/src/ui/DApps/index.tsx
similarity index 100%
rename from src/shared/components/DApps/index.tsx
rename to src/ui/DApps/index.tsx

From 2395dd04b4afe64c0c7f894c96d11bbbf3fd9a8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Wed, 8 Nov 2023 11:44:27 +0100
Subject: [PATCH 2/2] Fix condition for displaying `Onboarding` component

---
 src/ui/DApps/DesktopDApp.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/DApps/DesktopDApp.tsx b/src/ui/DApps/DesktopDApp.tsx
index 735e318cd..7c07ea2ea 100644
--- a/src/ui/DApps/DesktopDApp.tsx
+++ b/src/ui/DApps/DesktopDApp.tsx
@@ -31,8 +31,8 @@ function TrackEvents({ children }: { children: ReactNode[] }) {
 }
 
 export default function DesktopDApp() {
-  const { isConnected } = useConnect()
   const { walletOnboarded } = useWalletOnboarding()
+  const { isConnected } = useConnect()
 
   useWallet()
   useGameLoadDataFetch()
@@ -44,7 +44,7 @@ export default function DesktopDApp() {
   return (
     <Router>
       <TrackEvents>
-        {(!walletOnboarded || !isConnected) && <Onboarding />}
+        {!walletOnboarded && <Onboarding />}
         {walletOnboarded && isConnected && <IslandView />}
         <PrivacyPolicy />
       </TrackEvents>