Do not load video if onboarding skipped (#654)

Resolves #652 

What has been done:
- Moves `DApps` to ui folder
- Video is only loaded when user is not onboarded

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() {

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 { walletOnboarded } = useWalletOnboarding()
+  const { isConnected } = useConnect()
+
+  useWallet()
+  useGameLoadDataFetch()
+  useBalanceFetch()
+  usePopulationFetch()
+  useGameDataFetch()
+  useWalletChange()
+
+  return (
+    <Router>
+      <TrackEvents>
+        {!walletOnboarded && <Onboarding />}
+        {walletOnboarded && isConnected && <IslandView />}
+        <PrivacyPolicy />
+      </TrackEvents>
+    </Router>
+  )
+}

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 />
+    </>
+  )
+}