diff --git a/src/shared/constants/realms.ts b/src/shared/constants/realms.ts
index cad100766..9af37318d 100644
--- 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
index dd56f1b0a..1568f853b 100644
--- a/src/shared/hooks/reflect.ts
+++ b/src/shared/hooks/reflect.ts
@@ -1,6 +1,7 @@
import { useEffect, useState } from "react"
import {
selectDisplayedRealmId,
+ selectRealmNameById,
selectStakingRealmId,
selectWalletName,
useDappSelector,
@@ -8,15 +9,20 @@ import {
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,7 +50,7 @@ export function useReflect() {
await reflectInstance.mutate.setUserInfo({
name,
- realmIcon,
+ realmName,
stakingRealmColor,
cursorTextColor,
})
@@ -52,7 +58,7 @@ export function useReflect() {
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
index 0a2af22a1..9f77bd931 100644
--- 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
index 44fd8d0fc..85ef9086a 100644
--- 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}
- {realmIcon && (
-
+ {realmName && (
+
)}