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 && ( + )}