🚀 [QA] Update release environment (#549)

This is a pull request that upon merging will update production
environment with recent `stage-live` changes.
The environment that will be updated:
* Production: https://taho-development.netlify.app/ (aka
https://app.taho.xyz/)

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

.env.defaults

@@ -5,6 +5,7 @@ FILE_DIRECTORY_IPFS_HASH="QmYwYkRdYMBCtMqbimgaXjf7UL4RUb5zBQu4TDE67oZbq5"
 PART_GLOSSARY_IPFS_HASH="bafybeibytsozn7qsvqgecogv5urg5en34r7v3zxo326vacumi56ckah5b4"
 # RPC URLs
 ARBITRUM_RPC_URL="https://sepolia-rollup.arbitrum.io/rpc"
+ARBITRUM_RPC_FALLBACK_URL="https://arbitrum-sepolia.blockpi.network/v1/rpc/public"
 TENDERLY_RPC_URL="https://rpc.tenderly.co/fork/2fc2cf12-5c58-439f-9b5e-967bfd02191a"
 LOCALHOST_RPC_URL="http://localhost:8545"
 ETHEREUM_RPC_URL="https://1rpc.io/eth"
@@ -16,8 +17,12 @@ USE_ARBITRUM_SEPOLIA="false"
 TENDERLY_USER=thesis
 TENDERLY_PROJECT=development
 ALLOW_TENDERLY_RESET="false"
+# Analytics
+ANALYTICS_ENV=DEV
+POSTHOG_API_KEY=
 # Misc
 SEASON_LENGTH_IN_WEEKS=8
 CONTRACT_DEPLOYMENT_BLOCK_NUMBER=553443
+SEASON_START_DATE="2023-10-26"
 SKIP_REACT_STRICT_MODE="false"
-IS_COMING_SOON="true"
+IS_COMING_SOON="true"

.github/workflows/test-list.yml

@@ -15,7 +15,7 @@ on:
 jobs:
   add-release-test-list:
     runs-on: ubuntu-latest
-    if: github.head_ref == 'refs/heads/stage-live'
+    if: github.head_ref == 'stage-live'
     permissions:
       pull-requests: write
     steps:

package.json

@@ -5,7 +5,7 @@
   "version": "1.0.0",
   "prettier": "@thesis/prettier-config",
   "scripts": {
-    "start": "yarn write-types && patch-package && webpack serve --mode=development",
+    "start": "yarn write-types && patch-package && webpack serve --mode=development --https",
     "build": "yarn write-types && patch-package && webpack build --mode=production",
     "write-types": "node scripts/write-taho-types.mjs",
     "lint:eslint": "eslint .",
@@ -15,6 +15,7 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
+    "@ethersproject/networks": "^5.7.1",
     "@react-spring/konva": "^9.7.3",
     "@react-spring/web": "^9.7.3",
     "@reduxjs/toolkit": "^1.9.5",
@@ -29,7 +30,6 @@
     "crypto-browserify": "^3.12.0",
     "emittery": "^1.0.1",
     "ethers": "^5",
-    "@ethersproject/networks": "^5.7.1",
     "gifler": "^0.1.0",
     "https-browserify": "^1.0.0",
     "konva": "^9.2.0",
@@ -77,6 +77,7 @@
     "eslint-plugin-import": "^2.28.1",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.3",
+    "posthog-js": "^1.85.3",
     "prettier": "^2.8.1",
     "typescript": "^5.0.2",
     "webpack": "^5.88.1",

src/assets/xp-data.json

@@ -0,0 +1,22 @@
+{
+    "4": {
+        "xp": [],
+        "leaderboard": null
+    },
+    "7": {
+        "xp": [],
+        "leaderboard": null
+    },
+    "9": {
+        "xp": [],
+        "leaderboard": null
+    },
+    "19": {
+        "xp": [],
+        "leaderboard": null
+    },
+    "22": {
+        "xp": [],
+        "leaderboard": null
+    }
+}

src/index.tsx

@@ -1,6 +1,11 @@
-import React from "react"
+import React, { ReactNode, useEffect } from "react"
 import ReactDOM from "react-dom/client"
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  useLocation,
+} from "react-router-dom"
 import { Web3OnboardProvider } from "@web3-onboard/react"
 import { Provider } from "react-redux"
 import {
@@ -32,8 +37,23 @@ 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 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()
@@ -56,7 +76,7 @@ function DApp() {
       <Router>
         {(!walletOnboarded || !isConnected) && <Onboarding />}
         {walletOnboarded && isConnected && (
-          <>
+          <TrackEvents>
             <FullPageLoader
               loaded={hasLoadedRealmData && hasLoadedSeasonInfo && hasBalances}
             />
@@ -76,7 +96,7 @@ function DApp() {
               </Route>
             </Switch>
             <Footer />
-          </>
+          </TrackEvents>
         )}
       </Router>
     </>
@@ -87,7 +107,25 @@ function DAppProviders() {
   return (
     <Provider store={reduxStore}>
       <Web3OnboardProvider web3Onboard={web3Onboard}>
-        <DApp />
+        <PostHogProvider
+          apiKey={process.env.POSTHOG_API_KEY}
+          options={{
+            persistence: "localStorage",
+            autocapture: false,
+            capture_pageview: false,
+            disable_session_recording: true,
+            sanitize_properties(properties) {
+              return {
+                ...properties,
+                // The extension has set an expectation that the lib is set to
+                // the analytics env.
+                $lib: process.env.ANALYTICS_ENV,
+              }
+            },
+          }}
+        >
+          <DApp />
+        </PostHogProvider>
       </Web3OnboardProvider>
     </Provider>
   )

src/redux-state/selectors/island.ts

@@ -66,6 +66,9 @@ export const selectSeasonWeek = createSelector(
     if (isEndOfSeason) return durationInWeeks
 
     if (seasonStartTimestamp && durationInWeeks) {
+      const hasSeasonStarted = seasonStartTimestamp < Date.now()
+      if (!hasSeasonStarted) return 1 // if the start date is placed in the future, set season week to 1
+
       return Math.trunc((Date.now() - seasonStartTimestamp) / (7 * DAY) + 1)
     }
 
@@ -153,10 +156,8 @@ export const selectUnclaimedXpById = createSelector(
 export const selectUnclaimedXpSumById = createSelector(
   [selectUnclaimedXpById],
   (unclaimedXp) =>
-    unclaimedXp?.reduce(
-      (acc, item) => acc + parseInt(item.claim.amount, 16),
-      0
-    ) ?? 0
+    unclaimedXp?.reduce((acc, item) => acc + BigInt(item.claim.amount), 0n) ??
+    0n
 )
 /* Population - selectors */
 export const selectSortedPopulation = createSelector(selectRealms, (realms) => {

src/redux-state/thunks/island.ts

@@ -30,9 +30,7 @@ import {
 import { updateTransactionStatus } from "redux-state/slices/wallet"
 import { bigIntToUserAmount, getAllowanceTransactionID } from "shared/utils"
 import {
-  convertXpData,
   getRealmLeaderboardData,
-  getRealmXpSorted,
   getUserLeaderboardRank,
 } from "shared/utils/xp"
 import { getXpAllocatable } from "shared/contracts/xp"
@@ -291,17 +289,12 @@ export const fetchLeaderboardData = createDappAsyncThunk(
 
     await Promise.allSettled(
       Object.keys(realms).map(async (realmId) => {
-        const xpData = await getRealmLeaderboardData(realmId)
+        const leaderboardData = await getRealmLeaderboardData(realmId)
 
-        if (xpData) {
-          const converted = convertXpData(xpData)
-          const sorted = getRealmXpSorted(converted)
-          const leaderboard = sorted.slice(0, 10).map((item, index) => ({
-            ...item,
-            rank: index + 1,
-          }))
+        if (leaderboardData) {
+          const leaderboard = leaderboardData.slice(0, 10)
 
-          const currentUser = getUserLeaderboardRank(sorted, address)
+          const currentUser = getUserLeaderboardRank(leaderboardData, address)
 
           dispatch(
             setLeaderboardData({
@@ -328,27 +321,24 @@ export const fetchUnclaimedXp = createDappAsyncThunk(
     if (!account) return false
 
     await Promise.allSettled(
-      Object.entries(realms).map(
-        async ([realmId, { realmContractAddress, xpToken }]) => {
-          const unclaimedXp = await transactionService.read(
-            getUnclaimedXpDistributions,
-            {
-              realmAddress: realmContractAddress,
-              xpAddress: xpToken.contractAddress,
-              account,
-            }
-          )
-
-          if (unclaimedXp) {
-            dispatch(
-              setUnclaimedXpData({
-                id: realmId,
-                data: unclaimedXp,
-              })
-            )
+      Object.keys(realms).map(async (realmId) => {
+        const unclaimedXp = await transactionService.read(
+          getUnclaimedXpDistributions,
+          {
+            realmId,
+            account,
           }
+        )
+
+        if (unclaimedXp) {
+          dispatch(
+            setUnclaimedXpData({
+              id: realmId,
+              data: unclaimedXp,
+            })
+          )
         }
-      )
+      })
     )
 
     return true

src/redux-state/thunks/wallet.ts

@@ -58,6 +58,22 @@ export const connectArbitrumProvider = createDappAsyncThunk(
   }
 )
 
+export const connectArbitrumProviderFallback = createDappAsyncThunk(
+  "wallet/connectArbitrumProviderFallback",
+  async (
+    {
+      arbitrumProviderFallback,
+    }: {
+      arbitrumProviderFallback: ethers.providers.JsonRpcBatchProvider
+    },
+    { extra: { transactionService } }
+  ) => {
+    await transactionService.setArbitrumProviderFallback(
+      arbitrumProviderFallback
+    )
+  }
+)
+
 export const prepareForWalletChange = createDappAsyncThunk(
   "wallet/prepareForWalletChange",
   async (_, { dispatch }) => {

src/shared/components/RealmModal/RealmHeader.tsx

@@ -27,7 +27,7 @@ export default function RealmHeader() {
       <div className="realm_thumb">
         <RealmCutout />
       </div>
-      <h1>{realm?.name}</h1>
+      <h1>{realm?.name} Realm</h1>
       <div className="realm_details_header column">
         <div className="tags row">
           <div className="tag column">

src/shared/components/RealmModal/RealmModalContent.tsx

@@ -37,7 +37,7 @@ export default function RealmModalContent({
   }
 
   return (
-    <Modal.AnimatedContent>
+    <Modal.Content>
       <div className="modal">
         <div
           className={classNames("modal_header", {
@@ -88,6 +88,6 @@ export default function RealmModalContent({
           }
         `}
       </style>
-    </Modal.AnimatedContent>
+    </Modal.Content>
   )
 }

src/shared/components/RealmModal/index.tsx

@@ -45,15 +45,8 @@ export default function RealmModal({
 
   const [props] = useSpring(
     () => ({
-      from: {
-        transform: "translate3d(0,38.5%,0) scale(0.8)",
-        opacity: 0,
-      },
-      to: {
-        transform: "translate3d(0,0,0) scale(1)",
-        opacity: 1,
-        position: "relative",
-      },
+      from: { opacity: 0 },
+      to: { opacity: 1, position: "relative" },
       config: { duration: 300, easing: easings.easeInOutCubic },
     }),
     []

src/shared/constants/chains.ts

@@ -51,3 +51,6 @@ export const CONTRACT_DEPLOYMENT_BLOCK_NUMBER = process.env
   .CONTRACT_DEPLOYMENT_BLOCK_NUMBER
   ? parseInt(process.env.CONTRACT_DEPLOYMENT_BLOCK_NUMBER, 10)
   : undefined
+
+export const ARBITRUM_SEPOLIA_RPC_FALLBACK =
+  process.env.ARBITRUM_RPC_FALLBACK_URL

src/shared/constants/external-links.ts

@@ -7,4 +7,5 @@ export default {
   DOCS: "https://docs.taho.xyz/app/",
   BRAVE_SUPPORT:
     "https://support.brave.com/hc/en-us/articles/360023646212-How-do-I-configure-global-and-site-specific-Shields-settings-",
+  FEEDBACK: "https://tahowallet.typeform.com/subscapebeta",
 }

src/shared/constants/game.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const WEEKLY_XP_ALLOCATION = 1_000_000

src/shared/constants/index.ts

@@ -4,3 +4,4 @@ export { default as ROUTES } from "./routes"
 export * from "./time"
 export * from "./local-storage"
 export { default as LINKS } from "./external-links"
+export * from "./game"

src/shared/constants/realms-data.ts

@@ -68,7 +68,7 @@ export const realm4 = {
     },
   ],
   realmType: "realm",
-  color: "#C6CB60",
+  color: "#D1F5F5",
   labelX: 380,
   labelY: 216.5,
   partnerLogo: partners.gitcoin,

src/shared/constants/realms.ts

@@ -1,6 +1,6 @@
 import { RealmQuestlineData, RealmMapData } from "shared/types"
 import { realm19, realm22, realm4, realm7, realm9 } from "./realms-data"
-import QUESTLINE_DATA from "../../data/questline-data.json"
+import QUESTLINE_DATA from "../../assets/questline-data.json"
 
 // TODO: names and ids may change
 export const REALMS_WITH_CONTRACT_NAME: {