🪄 [QA] Update stage environments

src/assets/xp-data.json

@@ -25,7 +25,8 @@
     "xpGlossary": [
       "0xccf3c79aefe494173c6673a8382c40bcf60528539e78353315b4892de0c9cd76.json",
       "0x823bd7f1c36fe10cd440e190850f69ec7a8d3fa1fac105c223befad1bb193fab.json",
-      "0x1b387cacb27052e3e5576848ce71979e0177e140466481134a01f3877f67838e.json"
+      "0x1b387cacb27052e3e5576848ce71979e0177e140466481134a01f3877f67838e.json",
+      "0x96709300b725c2c6984500e0d402f8d2f33f19674bbea087cf27831aedf779cb.json"
     ],
     "leaderboard": "leaderboard.json"
   },
@@ -35,7 +36,8 @@
     "xpGlossary": [
       "0x9374e0cc26272296a252fb4f02c6bc24c47c712a916627b30652486e58dc4e90.json",
       "0xa72ed1f1c91e909a27da3242fbe3080c0d9520b73f75673007ca9e164768b381.json",
-      "0x4c98014763abc933133f49e4ce1146d79311dcfc1c28628a287b4658a86293d2.json"
+      "0x4c98014763abc933133f49e4ce1146d79311dcfc1c28628a287b4658a86293d2.json",
+      "0x7e9b018d9798647a667e725a310b74f66b2ab94987631e585428b9bec792ae3b.json"
     ],
     "leaderboard": "leaderboard.json"
   },
@@ -44,7 +46,8 @@
     "claimsFolder": "/assets/xp/frax/claims",
     "xpGlossary": [
       "0x08cb87568f0f067408729a093e2c14082212f368b05aa7d27c15a66bb416c6e5.json",
-      "0xbb96bd7e3d3c87bd3f9aef6fc5d27096732ea1e24336ad5be140232bfadfac64.json"
+      "0xbb96bd7e3d3c87bd3f9aef6fc5d27096732ea1e24336ad5be140232bfadfac64.json",
+      "0xb8a8f2bd05d37aeb0ceadaa013adbd2741bd3ee1f2fcb202b4dbad0240df420b.json"
     ],
     "leaderboard": "leaderboard.json"
   }

src/assets/xp/arbitrum/0x96709300b725c2c6984500e0d402f8d2f33f19674bbea087cf27831aedf779cb.json

@@ -0,0 +1 @@
+{"totalAmount":"0x1bd9cc82c9acc14734c9","merkleRoot":"0x96709300b725c2c6984500e0d402f8d2f33f19674bbea087cf27831aedf779cb","glossary":[{"startAddress":"0x00787ff586dc768e66ad98a4b03f8ce6d5f1ea3d","file":"/0x96709300b725c2c6984500e0d402f8d2f33f19674bbea087cf27831aedf779cb-0.json"}],"merkleDistributor":"0x6E1866Dd4681cEd9914486b732F4e929f20B4842"}

src/assets/xp/frax/0xb8a8f2bd05d37aeb0ceadaa013adbd2741bd3ee1f2fcb202b4dbad0240df420b.json

@@ -0,0 +1 @@
+{"totalAmount":"0x011dd9a6815f30bb65b2","merkleRoot":"0xb8a8f2bd05d37aeb0ceadaa013adbd2741bd3ee1f2fcb202b4dbad0240df420b","glossary":[{"startAddress":"0x189b5600b6a6fd38f976cffc4868f168c61c24f4","file":"/0xb8a8f2bd05d37aeb0ceadaa013adbd2741bd3ee1f2fcb202b4dbad0240df420b-0.json"}],"merkleDistributor":"0x8a9a487bCA377ca8FC1bB8FbCcB3E56f3A27c573"}

src/assets/xp/frax/claims/0xb8a8f2bd05d37aeb0ceadaa013adbd2741bd3ee1f2fcb202b4dbad0240df420b-0.json

@@ -0,0 +1 @@
+{"0x189b5600b6a6fd38f976cffc4868f168c61c24f4":{"index":"0x0","amount":"0x1147c9621ad3","proof":["0x70e43594367aa3a02897f5fecd33466566d6eaee073317b936c9ae225de7fb0e","0x73ad2d9a832a88de8026f7b4787837ee26d6ec3567d4f71f46ac2e168e5635f5","0xb633498ad545d42cccefe3a4a34bbcdcb22f5d607bd7cd18beb73abb057ccbfe"]},"0x402d7aab5ad51a9d81b6c8b9f0a039cc3ebe41bb":{"index":"0x1","amount":"0x1a60186d515d","proof":["0xbf95d19e1d6103c9470b0cbc57394c3f367f8bffcca1ecc0b2fdb46a0d3eeb44","0x447d7f77979c32a139f4800a697407eef575fbaa80d7f8f81e93bf4cffd440ee"]},"0xe3a1b9c107422de304cf9f57fc307bfca195bb9a":{"index":"0x2","amount":"0x0270804681d046756d","proof":["0xa7dc1a48356cd51bef82ca7edc745f0ac3c57a8871ce3044dd92557f4e488fd4","0x447d7f77979c32a139f4800a697407eef575fbaa80d7f8f81e93bf4cffd440ee"]},"0xf5a308b6076afcb44744a1f02ff763ed0ffc68e2":{"index":"0x3","amount":"0x011b6925afb640afc76c","proof":["0x54c2c6d199645c188a36c1de1c4ce300fa7660d290a79c46e4e632d8e1312d11","0x73ad2d9a832a88de8026f7b4787837ee26d6ec3567d4f71f46ac2e168e5635f5","0xb633498ad545d42cccefe3a4a34bbcdcb22f5d607bd7cd18beb73abb057ccbfe"]},"0xf8575829fd42050997fb08093db564037478be75":{"index":"0x4","amount":"0x33d75c265079","proof":["0x2e8bc5eb0b5f6a049867e7230a5fbca7126f585f5d89a52be8b8d47109b9b393","0xe66447381d3c7232f00959276c3f40d95c7ebe5b5d09a72ec3df7a118b39fa08","0xb633498ad545d42cccefe3a4a34bbcdcb22f5d607bd7cd18beb73abb057ccbfe"]},"0xfa1a33f67df8318f8b1ab607d3ec866fca61e782":{"index":"0x5","amount":"0x2ba7e1cf6c30","proof":["0x4107bc22a9a2c02ef762bafaf75dbc9c6175e5656178597d06bb937acad708d2","0xe66447381d3c7232f00959276c3f40d95c7ebe5b5d09a72ec3df7a118b39fa08","0xb633498ad545d42cccefe3a4a34bbcdcb22f5d607bd7cd18beb73abb057ccbfe"]}}

src/assets/xp/frax/leaderboard.json

@@ -1 +1 @@
-[{"rank":1,"beneficiary":"0x22510fe99f63ae03ba792c21a29ec10fd87cae08","amount":"0x02090faabb2539cab394cf"},{"rank":2,"beneficiary":"0xa05b26f366035f4a797c12cbc23b87633f353337","amount":"0x71b91bbc6040bb9c6b30"},{"rank":3,"beneficiary":"0xd897d8d6c19a4f981bcad5c96ba5311513e349d0","amount":"0x3643aa647986040000"},{"rank":4,"beneficiary":"0xcd9ac897be0ab91d8e3bd63ca15bde0debdacf1e","amount":"0x22f72c52a4bef40000"},{"rank":5,"beneficiary":"0x82abedf193942a6cdc4704a8d49e54fe51160e99","amount":"0x1c06d0f8d10cf40000"},{"rank":6,"beneficiary":"0xf8575829fd42050997fb08093db564037478be75","amount":"0x031708ae0045440000"},{"rank":7,"beneficiary":"0xfa1a33f67df8318f8b1ab607d3ec866fca61e782","amount":"0x029a2241af62c00000"},{"rank":8,"beneficiary":"0x402d7aab5ad51a9d81b6c8b9f0a039cc3ebe41bb","amount":"0x019274b259f6540000"},{"rank":9,"beneficiary":"0x189b5600b6a6fd38f976cffc4868f168c61c24f4","amount":"0x0107ad8f556c6c0000"},{"rank":10,"beneficiary":"0xf48b09f85b88b31cdde74a06d7890e893fda1115","amount":"0x00"}]
+[{"rank":1,"beneficiary":"0x22510fe99f63ae03ba792c21a29ec10fd87cae08","amount":"0x02090faabb2539cab394cf"},{"rank":2,"beneficiary":"0xa05b26f366035f4a797c12cbc23b87633f353337","amount":"0x71b91bbc6040bb9c6b30"},{"rank":3,"beneficiary":"0xf5a308b6076afcb44744a1f02ff763ed0ffc68e2","amount":"0x011b6925afb640afc76c"},{"rank":4,"beneficiary":"0xd897d8d6c19a4f981bcad5c96ba5311513e349d0","amount":"0x3643aa647986040000"},{"rank":5,"beneficiary":"0xcd9ac897be0ab91d8e3bd63ca15bde0debdacf1e","amount":"0x22f72c52a4bef40000"},{"rank":6,"beneficiary":"0x82abedf193942a6cdc4704a8d49e54fe51160e99","amount":"0x1c06d0f8d10cf40000"},{"rank":7,"beneficiary":"0xf8575829fd42050997fb08093db564037478be75","amount":"0x031708e1d7a16a5079"},{"rank":8,"beneficiary":"0xfa1a33f67df8318f8b1ab607d3ec866fca61e782","amount":"0x029a226d57448f6c30"},{"rank":9,"beneficiary":"0xe3a1b9c107422de304cf9f57fc307bfca195bb9a","amount":"0x0270804681d046756d"},{"rank":10,"beneficiary":"0x402d7aab5ad51a9d81b6c8b9f0a039cc3ebe41bb","amount":"0x019274ccba0ec1515d"},{"rank":11,"beneficiary":"0x189b5600b6a6fd38f976cffc4868f168c61c24f4","amount":"0x0107ada09d35ce1ad3"},{"rank":12,"beneficiary":"0xf48b09f85b88b31cdde74a06d7890e893fda1115","amount":"0x00"}]

src/assets/xp/galxe/0x7e9b018d9798647a667e725a310b74f66b2ab94987631e585428b9bec792ae3b.json

@@ -0,0 +1 @@
+{"totalAmount":"0x138a962905632eefcd4c","merkleRoot":"0x7e9b018d9798647a667e725a310b74f66b2ab94987631e585428b9bec792ae3b","glossary":[{"startAddress":"0x0000000000ce6d8c1fba76f26d6cc5db71432710","file":"/0x7e9b018d9798647a667e725a310b74f66b2ab94987631e585428b9bec792ae3b-0.json"},{"startAddress":"0x358a8f25b51705400bf7371776f71bd59a6b4982","file":"/0x7e9b018d9798647a667e725a310b74f66b2ab94987631e585428b9bec792ae3b-1.json"},{"startAddress":"0x6ac2d9f8b79a5b8ec577f79f1afe71163dcec4f8","file":"/0x7e9b018d9798647a667e725a310b74f66b2ab94987631e585428b9bec792ae3b-2.json"},{"startAddress":"0xa308a81e6d23abaf239b1feed2c9b0dd3db7457a","file":"/0x7e9b018d9798647a667e725a310b74f66b2ab94987631e585428b9bec792ae3b-3.json"},{"startAddress":"0xd6fa9cc03a7ecd020a75fdf78970a24de6016f3b","file":"/0x7e9b018d9798647a667e725a310b74f66b2ab94987631e585428b9bec792ae3b-4.json"}],"merkleDistributor":"0xFE3dfdAA0663DcAc090cd7298aa2E178Fd254eF3"}

src/redux-state/selectors/population.ts

@@ -1,12 +1,11 @@
 import { createSelector } from "@reduxjs/toolkit"
 import {
-  getDisplayedPopulationOfRealms,
   getPopulationOfRealms,
-} from "redux-state/utils/population"
+  getDisplayedPopulationOfRealms,
+} from "redux-state/utils"
+import { PopulationKey } from "shared/types/selectors"
 import { selectRealmById, selectRealms } from "./realm"
 
-type PopulationKey = "population" | "displayedPopulation"
-
 const getPopulationById = (key: PopulationKey) =>
   createSelector(selectRealmById, (realm) => realm?.[key] ?? 0)
 

src/redux-state/selectors/realm.ts

@@ -1,13 +1,8 @@
 import { createSelector } from "@reduxjs/toolkit"
-import { RootState } from "redux-state/reducers"
 import { createIslandSelector } from "redux-state/selectors"
-import { RealmData } from "shared/types"
+import { DisplayedRealmProperty } from "shared/types/selectors"
 import { isSameAddress } from "shared/utils"
 
-type DisplayedRealmProperty = <K extends keyof RealmData>(
-  value: K
-) => (state: RootState) => RealmData[K] | undefined
-
 export const selectRealms = createIslandSelector("realms")
 export const selectDisplayedRealmId = createIslandSelector("displayedRealmId")
 
@@ -23,7 +18,8 @@ export const selectRealmById = createSelector(
 
 export const selectRealmNameById = createSelector(
   [selectRealms, (_, realmId: string | null) => realmId],
-  (realms, realmId) => (realmId ? realms[realmId].name : null)
+  (realms, realmId) =>
+    realmId && realms[realmId] ? realms[realmId].name : "Test"
 )
 
 export const selectRealmWithIdByAddress = createSelector(

src/redux-state/selectors/season.ts

@@ -1,12 +1,7 @@
 import { createSelector } from "@reduxjs/toolkit"
-import { RootState } from "redux-state/reducers"
 import { createIslandSelector } from "redux-state/selectors"
 import { DAY } from "shared/constants"
-import { SeasonInfo } from "shared/types"
-
-type SeasonInfoProperty = <K extends keyof SeasonInfo>(
-  value: K
-) => (state: RootState) => SeasonInfo[K] | undefined
+import { SeasonInfoProperty } from "shared/types/selectors"
 
 export const selectSeasonInfo = createIslandSelector("seasonInfo")
 

src/shared/components/RealmCutout/RealmCutout.tsx

@@ -1,4 +1,5 @@
-import React from "react"
+/* eslint-disable react/no-array-index-key */
+import React, { Fragment } from "react"
 import { ISLAND_BOX, getRealmMapData } from "shared/constants"
 import backgroundImg from "public/dapp_island_bg.webp"
 import {
@@ -25,6 +26,7 @@ export default function RealmCutout() {
   const pathDataRatio = pathData.h / pathData.w
 
   const pathCutoutXref = `cutout_${realmId}_path`
+
   return (
     <>
       <div className="realm_cutout">
@@ -43,42 +45,46 @@ export default function RealmCutout() {
               "drop-shadow(0px 2px 4px rgba(7, 17, 17, 0.34)) drop-shadow(0px 6px 8px rgba(7, 17, 17, 0.24)) drop-shadow(0px 16px 16px rgba(7, 17, 17, 0.30))",
           }}
         >
-          <defs>
-            <path
-              id={pathCutoutXref}
-              d={pathData.paths[0].data}
-              width={pathData.w}
-              height={pathData.h}
-            />
-            <mask id={`cutout_${realmId}`}>
+          {pathData.paths.map((path, index) => (
+            <Fragment key={index}>
+              <defs>
+                <path
+                  id={`${pathCutoutXref}_${index}`}
+                  d={path.data}
+                  width={pathData.w}
+                  height={pathData.h}
+                />
+                <mask id={`cutout_${realmId}_${index}`}>
+                  <use
+                    href={`#${pathCutoutXref}_${index}`}
+                    fill="#fff"
+                    transform={`translate(${pathData.x}, ${pathData.y})`}
+                  />
+                </mask>
+              </defs>
+              <image
+                transform={`scale(0.25) translate(-${pathData.x}, -${pathData.y})`}
+                width={ISLAND_BOX.width}
+                height={ISLAND_BOX.height}
+                href={backgroundImg}
+                mask={`url(#cutout_${realmId}_${index})`}
+              />
+              <use
+                href={`#${pathCutoutXref}_${index}`}
+                transform="scale(0.25)"
+                fill="transparent"
+                stroke={pathData.color}
+                strokeWidth="10"
+              />
               <use
-                href={`#${pathCutoutXref}`}
-                fill="#fff"
-                transform={`translate(${pathData.x}, ${pathData.y})`}
+                href={`#${pathCutoutXref}_${index}`}
+                transform="scale(0.25)"
+                fill={pathData.color}
+                opacity={0.7}
+                style={{ mixBlendMode: "color" }}
               />
-            </mask>
-          </defs>
-          <image
-            transform={`scale(0.25) translate(-${pathData.x}, -${pathData.y})`}
-            width={ISLAND_BOX.width}
-            height={ISLAND_BOX.height}
-            href={backgroundImg}
-            mask={`url(#cutout_${realmId})`}
-          />
-          <use
-            href={`#${pathCutoutXref}`}
-            transform="scale(0.25)"
-            fill="transparent"
-            stroke={pathData.color}
-            strokeWidth="10"
-          />
-          <use
-            href={`#${pathCutoutXref}`}
-            transform="scale(0.25)"
-            fill={pathData.color}
-            opacity={0.7}
-            style={{ mixBlendMode: "color" }}
-          />
+            </Fragment>
+          ))}
         </svg>
       </div>
       <style jsx>

src/shared/components/RealmModal/RealmHeader.tsx

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

src/shared/constants/realms-data.ts

@@ -301,9 +301,10 @@ export const realm16 = {
     },
   ],
   realmType: "realm",
-  color: "#000",
-  labelX: 0,
-  labelY: 0,
+  color: "#F7DC6F",
+  labelX: 160,
+  labelY: 350,
+  partnerIcons: partners.arbitrum, // TODO: change to valid partner logo
 }
 
 export const realm17 = {

src/shared/constants/realms.ts

@@ -1,5 +1,12 @@
 import { RealmQuestlineData, RealmMapData } from "shared/types"
-import { realm19, realm22, realm4, realm7, realm9 } from "./realms-data"
+import {
+  realm19,
+  realm22,
+  realm4,
+  realm7,
+  realm9,
+  realm16,
+} from "./realms-data"
 import QUESTLINE_DATA from "../../assets/questline-data.json"
 
 // TODO: names and ids may change
@@ -54,14 +61,21 @@ export const FIGMA_FACTOR = {
   Y: ISLAND_BOX.height / FIGMA_WORKSPACE_SIZE.height,
 }
 
-export const REALMS_MAP_DATA: RealmMapData[] = [
+export const BASE_REALMS_MAP_DATA: RealmMapData[] = [
   realm4,
   realm7,
   realm9,
   realm19,
   realm22,
 ]
 
+export const ADDITIONAL_REALMS_MAP_DATA: RealmMapData[] = [realm16]
+
+export const REALMS_MAP_DATA =
+  process.env.SHOW_ADDITIONAL_REALMS === "true"
+    ? [...BASE_REALMS_MAP_DATA, ...ADDITIONAL_REALMS_MAP_DATA]
+    : BASE_REALMS_MAP_DATA
+
 export const REALMS_COUNT = REALMS_MAP_DATA.length
 
 export function getRealmMapData(realmId: string): RealmMapData {

src/shared/hooks/helpers.ts

@@ -1,5 +1,12 @@
 /* eslint-disable no-console */
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
+import {
+  MutableRefObject,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
 import { debounce } from "lodash"
 import { useSpring } from "@react-spring/web"
 import { getWindowDimensions } from "shared/utils"
@@ -249,3 +256,16 @@ export function useTrackEvents() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 }
+
+export function useMultiRef<T>(): [
+  MutableRefObject<(T | null)[]>,
+  (element: T | null, index: number) => void
+] {
+  const multiRef = useRef<(T | null)[]>([])
+
+  const addMultiRef = (element: T | null, index: number) => {
+    multiRef.current[index] = element
+  }
+
+  return [multiRef, addMultiRef]
+}

src/shared/hooks/island.ts

@@ -4,6 +4,10 @@ import React, {
   useEffect,
   useState,
   useCallback,
+  useLayoutEffect,
+  RefObject,
+  SetStateAction,
+  Dispatch,
 } from "react"
 import {
   fetchWalletBalances,
@@ -13,7 +17,7 @@ import {
   selectWalletAddress,
   selectRealms,
 } from "redux-state"
-import { SECOND } from "shared/constants"
+import { REALMS_COUNT, SECOND } from "shared/constants"
 import {
   fetchLeaderboardData,
   fetchPopulation,
@@ -22,6 +26,9 @@ import {
   initRealmsDataFromContracts,
   initSeasonInfoData,
 } from "redux-state/thunks/island"
+import Konva from "konva"
+import { Path } from "konva/lib/shapes/Path"
+import { Group } from "konva/lib/Group"
 import { useArbitrumProvider } from "./wallets"
 import { useInterval } from "./helpers"
 
@@ -137,3 +144,35 @@ export function useStakeCooldownPeriod() {
 
   return { hasCooldown: !!timeRemaining && timeRemaining > 0, timeRemaining }
 }
+
+export function useIslandRealmsPaths(
+  pathRef: MutableRefObject<(Path | null)[]>,
+  groupRef: RefObject<Group>,
+  setHover: Dispatch<SetStateAction<boolean>>
+) {
+  useLayoutEffect(() => {
+    const group = groupRef.current
+
+    pathRef.current.forEach((ref) => {
+      const stage = ref?.getStage()
+      if (!stage || !ref || !group) return () => {}
+      const defaultZ = group.zIndex()
+
+      const handleHover = (evt: Konva.KonvaEventObject<MouseEvent>) => {
+        if (evt.type === "mouseenter") {
+          stage.container().style.cursor = "pointer"
+          group.zIndex(REALMS_COUNT)
+          setHover(true)
+        } else if (evt.type === "mouseleave") {
+          stage.container().style.cursor = "default"
+          group.zIndex(defaultZ)
+          setHover(false)
+        }
+      }
+
+      ref.on("mouseenter.hover mouseleave.hover", handleHover)
+
+      return () => ref.off(".hover")
+    })
+  }, [pathRef, groupRef, setHover])
+}

src/shared/types/selectors.ts

@@ -2,6 +2,7 @@ import { IslandState } from "redux-state/slices/island"
 import { ClaimState } from "redux-state/slices/claim"
 import { WalletState } from "redux-state/slices/wallet"
 import { RootState } from "redux-state/reducers"
+import { RealmData, SeasonInfo } from "./island"
 
 type Selector<T, K extends keyof T> = (state: RootState) => T[K]
 
@@ -20,3 +21,13 @@ export type CreateClaimSelector = <K extends keyof ClaimState>(
 export type CreateWalletSelector = <K extends keyof WalletState>(
   value: K
 ) => WalletSelector<K>
+
+export type SeasonInfoProperty = <K extends keyof SeasonInfo>(
+  value: K
+) => (state: RootState) => SeasonInfo[K] | undefined
+
+export type DisplayedRealmProperty = <K extends keyof RealmData>(
+  value: K
+) => (state: RootState) => RealmData[K] | undefined
+
+export type PopulationKey = "population" | "displayedPopulation"