Load reflect icons dynamically (#722)

Load reflect realm icons dynamically with a path relative to component
tahowallet · Nov 21, 2023 · b03bc1c · b03bc1c
2 parents 5fd7037 + 32fef68
commit b03bc1c
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/src/shared/constants/realms.ts b/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 }
diff --git a/src/shared/hooks/reflect.ts b/src/shared/hooks/reflect.ts
@@ -1,22 +1,28 @@
 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 realmIcon = realmMapData?.partnerIcons.default ?? null
   const stakingRealmColor = realmMapData?.color ?? "#2C2C2C"
   const cursorTextColor = realmMapData?.cursorText ?? "#FFF"
 
@@ -29,7 +35,7 @@ export function useReflect() {
         cursor: null,
         userInfo: {
           name,
-          realmIcon,
+          realmName,
           stakingRealmColor,
           cursorTextColor,
         },
@@ -44,15 +50,15 @@ export function useReflect() {
 
       await reflectInstance.mutate.setUserInfo({
         name,
-        realmIcon,
+        realmName,
         stakingRealmColor,
         cursorTextColor,
       })
     }
 
     initReflect()
     updateUserInfo()
-  }, [reflectInitialized, name, realmIcon, stakingRealmColor, cursorTextColor])
+  }, [reflectInitialized, name, realmName, stakingRealmColor, cursorTextColor])
 
   useEffect(() => {
     const handleReflectCursor = async (e: MouseEvent) => {

diff --git a/src/shared/types/reflect.ts b/src/shared/types/reflect.ts
@@ -5,7 +5,7 @@ export type ReflectCursor = {
 
 export type ReflectUserInfo = {
   name: string
-  realmIcon: string | null
+  realmName: string | null
   stakingRealmColor: string
   cursorTextColor: string
 }

diff --git a/src/ui/Island/Cursor/CursorLabel.tsx b/src/ui/Island/Cursor/CursorLabel.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import Icon from "shared/components/Icon"
 import { ReflectCursor, ReflectUserInfo } from "shared/types"
+import { REALM_ICONS } from "shared/constants"
 
 export type CursorLabelProps = {
   cursor: ReflectCursor | null
@@ -15,7 +16,8 @@ export default function CursorLabel({
 }: CursorLabelProps) {
   if (!cursor) return null
 
-  const { name, realmIcon, stakingRealmColor, cursorTextColor } = userInfo
+  const { name, realmName, stakingRealmColor, cursorTextColor } = userInfo
+  const iconKey = realmName?.toLowerCase() as keyof typeof REALM_ICONS
 
   return (
     <>
@@ -32,8 +34,13 @@ export default function CursorLabel({
         >
           {name}
         </div>
-        {realmIcon && (
-          <Icon src={realmIcon} type="image" height="16px" width="16px" />
+        {realmName && (
+          <Icon
+            src={REALM_ICONS[iconKey]}
+            type="image"
+            height="16px"
+            width="16px"
+          />
         )}
       </div>
       <style jsx>{`