🪄 [QA] Update stage environments (#566)

This is a pull request that upon merging will update stage environments
with recent `main` changes.
The environments that will be updated:
* Stage live: https://stage-live--taho-development.netlify.app/
* Stage fork: https://stage-fork--taho-development.netlify.app/

Read more: [Deployment to Production
Flow](https://github.com/tahowallet/dapp/blob/main/docs/testing-env.md)

src/index.tsx

@@ -1,110 +1,15 @@
-import React, { ReactNode, useEffect } from "react"
+import React from "react"
 import ReactDOM from "react-dom/client"
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  useLocation,
-} from "react-router-dom"
 import { Web3OnboardProvider } from "@web3-onboard/react"
 import { Provider } from "react-redux"
-import {
-  useBalanceFetch,
-  useConnect,
-  useGameDataFetch,
-  useGameLoadDataFetch,
-  usePopulationFetch,
-  useWallet,
-  useWalletChange,
-  useWalletOnboarding,
-} from "shared/hooks"
-import LiquidityPool from "ui/LiquidityPool"
-import {
-  selectHasLoadedBalances,
-  selectHasLoadedRealmData,
-  selectHasLoadedSeasonInfo,
-  selectIslandMode,
-  useDappSelector,
-} from "redux-state"
-import TestingPanel from "testing/components/TestingPanel"
-import Referrals from "ui/Referrals"
-import Footer from "ui/Footer"
-import Nav from "ui/Nav"
-import Claim from "ui/Claim"
-import GlobalStyles from "ui/GlobalStyles"
-import IslandComponent from "ui/Island"
 import web3Onboard from "shared/utils/web3Onboard"
-import { ROUTES } from "shared/constants"
-import Onboarding from "ui/Onboarding"
-import FullPageLoader from "shared/components/FullPageLoader"
-import MobileScreen from "ui/MobileScreen"
 // Unfortunately the PostHog React package structure does not play nice with
 // no-extraneous-dependencies.
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { PostHogProvider, usePostHog } from "posthog-js/react"
+import { PostHogProvider } from "posthog-js/react"
+import DApp from "shared/components/DApps"
 import reduxStore from "./redux-state"
 
-function TrackEvents({ children }: { children: ReactNode[] }) {
-  const location = useLocation()
-  const posthog = usePostHog()
-
-  useEffect(() => {
-    posthog?.capture("$pageview", { url: location.pathname })
-  }, [])
-
-  return children
-}
-
-function DApp() {
-  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 (
-    <>
-      <GlobalStyles />
-      <MobileScreen />
-      <Router>
-        {(!walletOnboarded || !isConnected) && <Onboarding />}
-        {walletOnboarded && isConnected && (
-          <TrackEvents>
-            <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 />
-          </TrackEvents>
-        )}
-      </Router>
-    </>
-  )
-}
-
 function DAppProviders() {
   return (
     <Provider store={reduxStore}>

src/redux-state/selectors/island.ts

@@ -20,6 +20,11 @@ export const selectRealmById = createSelector(
   (realms, realmId) => (realmId ? realms[realmId] : null)
 )
 
+export const selectRealmNameById = createSelector(
+  [selectRealms, (_, realmId: string | null) => realmId],
+  (realms, realmId) => (realmId ? realms[realmId].name : null)
+)
+
 export const selectRealmWithIdByAddress = createSelector(
   [selectRealms, (_, realmAddress: string) => realmAddress],
   (realms, realmAddress) =>

src/shared/components/DApps/DesktopDApp.tsx

@@ -0,0 +1,94 @@
+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"
+
+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>
+      {(!walletOnboarded || !isConnected) && <Onboarding />}
+      {walletOnboarded && isConnected && (
+        <TrackEvents>
+          <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 />
+        </TrackEvents>
+      )}
+    </Router>
+  )
+}

src/shared/components/DApps/MobileDApp.tsx

@@ -0,0 +1,6 @@
+import React from "react"
+import MobileScreen from "ui/MobileScreen"
+
+export default function MobileDApp() {
+  return <MobileScreen />
+}

src/shared/components/DApps/index.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import { useMobileScreen } from "shared/hooks"
+import GlobalStyles from "ui/GlobalStyles"
+import MobileDApp from "./MobileDApp"
+import DesktopDApp from "./DesktopDApp"
+
+export default function DApp() {
+  const isMobileScreen = useMobileScreen()
+
+  return (
+    <>
+      <GlobalStyles />
+      {isMobileScreen ? <MobileDApp /> : <DesktopDApp />}
+    </>
+  )
+}

src/shared/constants/game.ts

@@ -1,2 +1,2 @@
-// eslint-disable-next-line import/prefer-default-export
 export const WEEKLY_XP_ALLOCATION = 1_000_000
+export const MOBILE_BREAKPOINT = 854 // qHD width

src/shared/hooks/helpers.ts

@@ -2,6 +2,8 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
 import { debounce } from "lodash"
 import { useSpring } from "@react-spring/web"
+import { getWindowDimensions } from "shared/utils"
+import { MOBILE_BREAKPOINT } from "shared/constants"
 
 type VoidFn = () => unknown
 
@@ -218,3 +220,14 @@ export function useLocalStorageChange<T>(key: string): {
 
   return { value, updateStorage }
 }
+
+export function useMobileScreen() {
+  const [width, setWidth] = useState(window.innerWidth)
+
+  useOnResize(() => {
+    const windowSize = getWindowDimensions()
+    setWidth(windowSize.width)
+  })
+
+  return width < MOBILE_BREAKPOINT
+}

src/ui/Island/RealmDetails/Quests/QuestsDetails.tsx

@@ -32,7 +32,7 @@ export default function QuestsDetails({
             {!!seasonWeek && (
               <>
                 <div className="content_details_weeks">
-                  Total real rewards Week {seasonWeek}
+                  Total realm rewards Week {seasonWeek}
                 </div>
                 <span style={{ color: "var(--secondary-s1-70)" }}>
                   / {duration}

src/ui/Island/RealmDetails/StakingForms/StakeForm.tsx

@@ -10,6 +10,7 @@ import {
   stopTrackingTransactionStatus,
   selectStakingRealmAddress,
   selectStakingRealmId,
+  selectRealmNameById,
 } from "redux-state"
 import { isValidInputAmount, userAmountToBigInt } from "shared/utils"
 import classNames from "classnames"
@@ -31,6 +32,9 @@ export default function StakeForm({ isDisabled }: { isDisabled: boolean }) {
   const displayedRealmAddress = useDappSelector(selectDisplayedRealmAddress)
   const stakingRealmAddress = useDappSelector(selectStakingRealmAddress)
   const stakingRealmId = useDappSelector(selectStakingRealmId)
+  const realmName = useDappSelector((state) =>
+    selectRealmNameById(state, stakingRealmId)
+  )
 
   const [stakeAmount, setStakeAmount] = useState("")
   const [isStakeAmountValid, setIsStakeAmountValid] = useState(false)
@@ -60,7 +64,7 @@ export default function StakeForm({ isDisabled }: { isDisabled: boolean }) {
         })
       )
       posthog?.capture("Realm stake started", {
-        realmId: displayedRealmAddress,
+        realmName,
       })
     }
   }
@@ -81,7 +85,7 @@ export default function StakeForm({ isDisabled }: { isDisabled: boolean }) {
 
   const stakeTransactionSuccessCallback = useCallback(() => {
     posthog?.capture("Realm stake completed", {
-      realmId: displayedRealmAddress,
+      realmName,
     })
 
     setIsStakeTransactionModalOpen(false)
@@ -90,13 +94,7 @@ export default function StakeForm({ isDisabled }: { isDisabled: boolean }) {
     if (!stakingRealmId) {
       updateAssistant({ visible: true, type: "quests" })
     }
-  }, [
-    dispatch,
-    posthog,
-    displayedRealmAddress,
-    stakingRealmId,
-    updateAssistant,
-  ])
+  }, [posthog, realmName, dispatch, stakingRealmId, updateAssistant])
 
   const onInputChange = (value: string) => {
     setStakeAmount(value)

src/ui/Island/RealmDetails/StakingForms/UnstakeForm.tsx

@@ -11,6 +11,7 @@ import {
   selectTransactionStatusById,
   stopTrackingTransactionStatus,
   selectTokenBalanceByAddress,
+  selectRealmNameById,
 } from "redux-state"
 import { isValidInputAmount, userAmountToBigInt } from "shared/utils"
 import classNames from "classnames"
@@ -38,6 +39,9 @@ export default function UnstakeForm({ isDisabled }: { isDisabled: boolean }) {
     selectDisplayedRealmVeTokenAddress
   )
   const displayedRealmId = useDappSelector(selectDisplayedRealmId)
+  const realmName = useDappSelector((state) =>
+    selectRealmNameById(state, displayedRealmId)
+  )
 
   const veTahoBalance = useDappSelector((state) =>
     selectTokenBalanceByAddress(state, displayedRealmVeTokenAddress)
@@ -74,7 +78,7 @@ export default function UnstakeForm({ isDisabled }: { isDisabled: boolean }) {
       )
     }
     posthog?.capture("Realm unstake started", {
-      realmId: displayedRealmAddress,
+      realmName,
     })
   }
 
@@ -88,15 +92,15 @@ export default function UnstakeForm({ isDisabled }: { isDisabled: boolean }) {
 
   const unstakeTransactionSuccessCallback = useCallback(() => {
     posthog?.capture("Realm unstake completed", {
-      realmId: displayedRealmAddress,
+      realmName,
     })
 
     setIsUnstakeTransactionModalOpen(false)
     setIsLeavingRealmModalOpen(false)
     setUnstakeAmount("")
     dispatch(stopTrackingTransactionStatus(UNSTAKE_TX_ID))
     updateAssistant({ visible: false, type: "default" })
-  }, [dispatch, displayedRealmAddress, posthog, updateAssistant])
+  }, [dispatch, realmName, posthog, updateAssistant])
 
   useTransactionSuccessCallback(
     unstakeTransactionStatus,