🚀 [QA] Update release environment (#721)

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)

.gitignore

@@ -24,6 +24,7 @@ node_modules
 yarn-error.log
 .pnp/
 .pnp.js
+
 # Yarn Integrity file
 .yarn-integrity
 
@@ -33,4 +34,7 @@ yarn-error.log
 .idea
 
 # Dist directory
-dist
+dist
+
+# Reflect files
+.reflect

package.json

@@ -19,6 +19,8 @@
     "@react-spring/konva": "^9.7.3",
     "@react-spring/web": "^9.7.3",
     "@reduxjs/toolkit": "^1.9.5",
+    "@rocicorp/rails": "^0.8.0",
+    "@rocicorp/reflect": "0.38.202311200859",
     "@web3-onboard/core": "^2.21.0",
     "@web3-onboard/react": "^2.8.11",
     "@web3-onboard/taho": "^2.0.5",
@@ -71,6 +73,7 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "babel-loader": "^9.1.3",
+    "concurrently": "^8.2.2",
     "copy-webpack-plugin": "^11.0.0",
     "dotenv-defaults": "^5.0.2",
     "dotenv-webpack": "^8.0.1",

reflect.config.json

@@ -0,0 +1,8 @@
+{
+  "server": "./src/shared/utils/reflect.ts",
+  "apps": {
+    "default": {
+      "appID": "loztnkex"
+    }
+  }
+}

src/shared/constants/realms-data.ts

@@ -73,6 +73,7 @@ export const realm4 = {
   labelY: 216.5,
   partnerIcons: partners.gitcoin,
   partnerColor: "#1D4E56",
+  cursorText: "var(--primary-p1-100)",
 }
 
 export const realm5 = {
@@ -128,6 +129,7 @@ export const realm7 = {
   labelX: 540,
   labelY: 400,
   partnerIcons: partners.cyberconnect,
+  cursorText: "var(--primary-p1-100)",
   partnerColor: "#fff",
 }
 
@@ -147,6 +149,7 @@ export const realm8 = {
   color: "#000",
   labelX: 0,
   labelY: 0,
+  cursorText: "#FFF",
 }
 
 export const realm9 = {
@@ -166,6 +169,7 @@ export const realm9 = {
   labelX: 700,
   labelY: 350,
   partnerIcons: partners.arbitrum,
+  cursorText: "#FFF",
 }
 
 export const realm10 = {
@@ -304,6 +308,7 @@ export const realm16 = {
   color: "#F7DC6F",
   labelX: 160,
   labelY: 350,
+  cursorText: "#FFF",
   partnerIcons: partners.arbitrum, // TODO: change to valid partner logo
 }
 
@@ -359,6 +364,7 @@ export const realm19 = {
   labelX: 264,
   labelY: 409,
   partnerIcons: partners.galxe,
+  cursorText: "#FFF",
 }
 
 export const realm20 = {
@@ -413,6 +419,7 @@ export const realm22 = {
   labelX: 337,
   labelY: 388,
   partnerIcons: partners.frax,
+  cursorText: "var(--primary-p1-100)",
 }
 
 export const realm23 = {

src/shared/constants/realms.ts

@@ -1,4 +1,9 @@
 import { RealmQuestlineData, RealmMapData } from "shared/types"
+import arbitrum from "shared/assets/partners/arbitrum.svg"
+import cyberconnect from "shared/assets/partners/cyberconnect.svg"
+import gitcoin from "shared/assets/partners/gitcoin.svg"
+import galxe from "shared/assets/partners/galxe.svg"
+import frax from "shared/assets/partners/frax.svg"
 import {
   realm19,
   realm22,
@@ -113,3 +118,5 @@ export const REALM_FONT_SIZE = 78
 export const REALM_FONT_FAMILY = "QuincyCF"
 export const REALM_FONT_STYLE = "bold"
 export const REALM_IMAGE_SIZE = 70
+
+export const REALM_ICONS = { arbitrum, cyberconnect, gitcoin, galxe, frax }

src/shared/hooks/index.ts

@@ -1,7 +1,8 @@
-export * from "./wallets"
+export * from "./assistant"
 export * from "./helpers"
 export * from "./island"
-export * from "./transactions"
-export * from "./assistant"
+export * from "./reflect"
 export * from "./tenderly"
+export * from "./transactions"
+export * from "./wallets"
 export * from "./population"

src/shared/hooks/reflect.ts

@@ -0,0 +1,143 @@
+import { useEffect, useState } from "react"
+import {
+  selectDisplayedRealmId,
+  selectRealmNameById,
+  selectStakingRealmId,
+  selectWalletName,
+  useDappSelector,
+} from "redux-state"
+import { usePresence, useSubscribe } from "@rocicorp/reflect/react"
+import { getClientState, reflectInstance } from "shared/utils"
+import { getRealmMapData } from "shared/constants"
+import { RootState } from "redux-state/reducers"
+
+export function useReflect() {
+  const name = useDappSelector(selectWalletName)
+  const stakingRealmId = useDappSelector(selectStakingRealmId)
+  const realmName =
+    useDappSelector((state: RootState) =>
+      selectRealmNameById(state, stakingRealmId)
+    ) ?? null
+
+  const realmMapData = stakingRealmId ? getRealmMapData(stakingRealmId) : null
+
+  const [reflectInitialized, setReflectInitialized] = useState(false)
+
+  const stakingRealmColor = realmMapData?.color ?? "#2C2C2C"
+  const cursorTextColor = realmMapData?.cursorText ?? "#FFF"
+
+  useEffect(() => {
+    const initReflect = async () => {
+      if (reflectInitialized || !reflectInstance) return
+
+      await reflectInstance.mutate.initClientState({
+        id: reflectInstance.clientID,
+        cursor: null,
+        userInfo: {
+          name,
+          realmName,
+          stakingRealmColor,
+          cursorTextColor,
+        },
+        isPresent: true,
+      })
+
+      setReflectInitialized(true)
+    }
+
+    const updateUserInfo = async () => {
+      if (!reflectInstance) return
+
+      await reflectInstance.mutate.setUserInfo({
+        name,
+        realmName,
+        stakingRealmColor,
+        cursorTextColor,
+      })
+    }
+
+    initReflect()
+    updateUserInfo()
+  }, [reflectInitialized, name, realmName, stakingRealmColor, cursorTextColor])
+
+  useEffect(() => {
+    const handleReflectCursor = async (e: MouseEvent) => {
+      if (!reflectInstance) return
+
+      await reflectInstance.mutate.setCursor({ x: e.clientX, y: e.clientY })
+    }
+
+    window.addEventListener("mousemove", handleReflectCursor)
+    return () => window.removeEventListener("mousemove", handleReflectCursor)
+  }, [])
+}
+
+export function useReflectPresence() {
+  const presentClientsdIds = usePresence(reflectInstance)
+  const presentClients = useSubscribe(
+    reflectInstance,
+    async (tx) => {
+      const clients = await Promise.all(
+        presentClientsdIds.map(async (clientID) => {
+          const presentClient = await getClientState(tx, clientID)
+          return presentClient ? [presentClient] : []
+        })
+      )
+
+      return clients
+        .flatMap((client) => client)
+        .filter((client) => client.isPresent)
+    },
+    [],
+    [presentClientsdIds]
+  )
+
+  return presentClients
+}
+
+export function useReflectCurrentUser() {
+  return useSubscribe(
+    reflectInstance,
+    async (tx) => {
+      const currentUser = await getClientState(tx, tx.clientID)
+      return currentUser
+    },
+    null
+  )
+}
+
+export function useReflectCursors() {
+  useReflect()
+
+  const reflectClients = useReflectPresence()
+  const currentUser = useReflectCurrentUser()
+  const realmModalOpened = useDappSelector(selectDisplayedRealmId)
+
+  // Find index of current user to determine the "room" placement
+  const currentUserIndex = reflectClients.findIndex(
+    (client) => client.id === currentUser?.id
+  )
+
+  // Set max number of visible cursors in .env (or default to 5)
+  const maxNumberOfVisibleCursors =
+    Number(process.env.REFLECT_MAX_CAPACITY) || 5
+
+  const currentUserRoom = Math.floor(
+    currentUserIndex / maxNumberOfVisibleCursors
+  )
+
+  const currentRoomValue = currentUserRoom * maxNumberOfVisibleCursors
+
+  // We want users to always have a chance to interact with each other so we split them
+  // into "rooms" based on their index in the reflectClients array. This way map stays interactive
+  // while still being not overcrowded.
+  const visibleClients = reflectClients.slice(
+    currentRoomValue,
+    currentRoomValue + maxNumberOfVisibleCursors
+  )
+
+  // Hide current user cursor when the realm modal is opened
+  return !realmModalOpened
+    ? visibleClients
+    : visibleClients.filter((client) => client.id !== currentUser?.id)
+}

src/shared/hooks/wallets.ts

@@ -23,6 +23,7 @@ import {
 } from "shared/constants"
 import { Network } from "@ethersproject/networks"
 import { Logger, defineReadOnly } from "ethers/lib/utils"
+import { reflectInstance } from "shared/utils"
 import { useAssistant } from "./assistant"
 import { useInterval, useLocalStorageChange } from "./helpers"
 
@@ -168,6 +169,16 @@ export function useWalletOnboarding(): {
   const { value, updateStorage } =
     useLocalStorageChange<string>(LOCAL_STORAGE_WALLET)
 
+  useEffect(() => {
+    const updateReflectPresence = async () => {
+      if (!reflectInstance) return
+
+      await reflectInstance.mutate.setUserPresence(!!value)
+    }
+
+    updateReflectPresence()
+  }, [value])
+
   return { walletOnboarded: value, updateWalletOnboarding: updateStorage }
 }
 

src/shared/services/index.ts

@@ -1,3 +1,2 @@
-// eslint-disable-next-line import/prefer-default-export
 export { default as TransactionService } from "./transaction"
 export { default as StorageService } from "./storage"

src/shared/types/index.ts

@@ -1,5 +1,6 @@
 export * from "./claim"
 export * from "./pool"
+export * from "./reflect"
 export * from "./transaction"
 export * from "./island"
 export * from "./wallet"

src/shared/types/island.ts

@@ -83,4 +83,5 @@ export type RealmMapData = {
   labelY: number
   partnerIcons: { default: string; shadow: string; population: string }
   partnerColor?: string
+  cursorText: string
 }

src/shared/types/reflect.ts

@@ -0,0 +1,18 @@
+export type ReflectCursor = {
+  x: number
+  y: number
+}
+
+export type ReflectUserInfo = {
+  name: string
+  realmName: string | null
+  stakingRealmColor: string
+  cursorTextColor: string
+}
+
+export type ReflectClient = {
+  id: string
+  cursor: ReflectCursor | null
+  userInfo: ReflectUserInfo
+  isPresent: boolean
+}

src/shared/utils/index.ts

@@ -5,6 +5,7 @@ export * from "./claim"
 export * from "./pool"
 export * from "./population"
 export * from "./providers"
+export * from "./reflect"
 export * from "./island"
 export * from "./timers"
 export * from "./numbers"