🪄 [QA] Update stage environments (#701)

This is a pull request that upon merging will update stage environments
with recent `main` changes.
The environments that will be updated:
* Stage live: https://stage-live--taho-development.netlify.app/
* Stage fork: https://stage-fork--taho-development.netlify.app/

Read more: [Deployment to Production
Flow](https://github.com/tahowallet/dapp/blob/main/docs/testing-env.md)

docs/testing-env.md

@@ -3,7 +3,7 @@
 ### Branches
 
 - `main`
-  - branch `main` is the base branch for current developement
+  - branch `main` is the base branch for current development
   - every feature branch should be merged into `main` via pull request
 - `stage-live`
   - base for running the staging environment that is running on the live chain

src/redux-state/selectors/population.ts

@@ -1,22 +1,33 @@
 import { createSelector } from "@reduxjs/toolkit"
-import { RealmData } from "shared/types"
+import {
+  getDisplayedPopulationOfRealms,
+  getPopulationOfRealms,
+} from "redux-state/utils/population"
 import { selectRealmById, selectRealms } from "./realm"
 
-const getPopulationOfRealms = (realms: RealmData[]) =>
-  realms.map((realm) => realm.population)
+type PopulationKey = "population" | "displayedPopulation"
 
-export const selectSortedPopulation = createSelector(selectRealms, (realms) => {
-  const realmsData = Object.entries(realms).map(([id, data]) => ({
-    id,
-    ...data,
-  }))
+const getPopulationById = (key: PopulationKey) =>
+  createSelector(selectRealmById, (realm) => realm?.[key] ?? 0)
 
-  return realmsData.sort((a, b) => a.population - b.population)
-})
+const sortPopulation = (key: PopulationKey) =>
+  createSelector(selectRealms, (realms) => {
+    const realmsData = Object.entries(realms).map(([id, data]) => ({
+      id,
+      ...data,
+    }))
 
-export const selectPopulationById = createSelector(
-  selectRealmById,
-  (realm) => realm?.population ?? 0
+    return realmsData.sort((a, b) => a[key] - b[key])
+  })
+
+export const selectSortedPopulation = sortPopulation("population")
+export const selectSortedDisplayedPopulation = sortPopulation(
+  "displayedPopulation"
+)
+
+export const selectPopulationById = getPopulationById("population")
+export const selectDisplayedPopulationById = getPopulationById(
+  "displayedPopulation"
 )
 
 export const selectTotalPopulation = createSelector(
@@ -25,7 +36,24 @@ export const selectTotalPopulation = createSelector(
     realms.length ? getPopulationOfRealms(realms).reduce((a, b) => a + b) : 0
 )
 
+export const selectTotalDisplayedPopulation = createSelector(
+  selectSortedDisplayedPopulation,
+  (realms) =>
+    realms.length
+      ? getDisplayedPopulationOfRealms(realms).reduce((a, b) => a + b)
+      : 0
+)
+
 export const selectMaxPopulation = createSelector(
   selectSortedPopulation,
-  (realms) => (realms.length ? Math.max(...getPopulationOfRealms(realms)) : 0)
+  (realms) =>
+    realms.length ? getPopulationOfRealms(realms)[realms.length - 1] : 0
+)
+
+export const selectMaxDisplayedPopulation = createSelector(
+  selectSortedDisplayedPopulation,
+  (realms) =>
+    realms.length
+      ? getDisplayedPopulationOfRealms(realms)[realms.length - 1]
+      : 0
 )

src/redux-state/slices/island.ts

@@ -3,17 +3,17 @@ import {
   LeaderboardData,
   UnclaimedXpData,
   OverlayType,
-  RealmData,
   RealmDataWithId,
   SeasonInfo,
+  RealmDataById,
 } from "shared/types"
 
 export type IslandModeType = "default" | "join-realm"
 
 export type IslandState = {
   mode: IslandModeType
   overlay: OverlayType
-  realms: { [id: string]: RealmData }
+  realms: RealmDataById
   leaderboards: { [id: string]: LeaderboardData }
   unclaimedXp: { [id: string]: UnclaimedXpData[] }
   stakingRealmId: string | null
@@ -75,6 +75,15 @@ const islandSlice = createSlice({
       immerState.realms[realmPopulation.id].population =
         realmPopulation.population
     },
+    setRealmDisplayedPopulation: (
+      immerState,
+      {
+        payload: realmPopulation,
+      }: { payload: { id: string; population: number } }
+    ) => {
+      immerState.realms[realmPopulation.id].displayedPopulation =
+        realmPopulation.population
+    },
     setRealmXpAllocatable: (
       immerState,
       {
@@ -139,6 +148,7 @@ export const {
   resetIslandDisplay,
   resetIslandAccount,
   setRealmPopulation,
+  setRealmDisplayedPopulation,
   setRealmXpAllocatable,
   setRealmsData,
   setDisplayedRealmId,

src/redux-state/thunks/island.ts

@@ -6,6 +6,7 @@ import {
   setRealmXpAllocatable,
   setRealmsData,
   setSeasonInfo,
+  setRealmDisplayedPopulation,
 } from "redux-state/slices/island"
 import {
   REALMS_WITH_CONTRACT_NAME,
@@ -29,7 +30,11 @@ import {
   UnclaimedXpData,
 } from "shared/types"
 import { updateTransactionStatus } from "redux-state/slices/wallet"
-import { bigIntToUserAmount, getAllowanceTransactionID } from "shared/utils"
+import {
+  bigIntToUserAmount,
+  getAllowanceTransactionID,
+  isDisplayedPopulationAvailable,
+} from "shared/utils"
 import {
   getRealmLeaderboardData,
   getUserLeaderboardRank,
@@ -107,8 +112,14 @@ export const fetchPopulation = createDappAsyncThunk(
       realmsWithAddress,
     })
 
+    const displayedPopulationAvailable = isDisplayedPopulationAvailable(realms)
+
     if (result) {
-      result.forEach((data) => dispatch(setRealmPopulation(data)))
+      result.forEach((data) => {
+        dispatch(setRealmPopulation(data))
+        if (!displayedPopulationAvailable)
+          dispatch(setRealmDisplayedPopulation(data))
+      })
     }
 
     return !!result

src/redux-state/utils/population.ts

@@ -0,0 +1,7 @@
+import { RealmData } from "shared/types"
+
+export const getPopulationOfRealms = (realms: RealmData[]) =>
+  realms.map((realm) => realm.population)
+
+export const getDisplayedPopulationOfRealms = (realms: RealmData[]) =>
+  realms.map((realm) => realm.displayedPopulation)

src/shared/components/Input.tsx

@@ -51,6 +51,7 @@ export default function SharedInput({
       <div className="input_box">
         <input
           type={type}
+          step="any"
           min={isTypeNumber ? "0" : undefined}
           className={classNames({ input_number: isTypeNumber })}
           value={value}

src/shared/components/RealmCutout/Bubble.tsx

@@ -0,0 +1,48 @@
+import { animated, easings, useSpring } from "@react-spring/web"
+import React, { useEffect, useState } from "react"
+import { getRealmPopulationIcon } from "shared/constants"
+import { usePopulationBubble } from "shared/hooks"
+
+export const STYLE = {
+  default: { opacity: 0, transform: "translateY(150px)" },
+  highlight: { opacity: 1, transform: "translateY(50px)" },
+}
+
+export const BUBBLE_CONFIG = {
+  precision: 0.1,
+  duration: 2000,
+  easing: easings.easeOutCubic,
+}
+
+export default function Bubble({ realmId }: { realmId: string }) {
+  const { showBubble, setShowBubble } = usePopulationBubble(realmId)
+
+  const [iconSrc, setIconSrc] = useState<string | null>(null)
+
+  useEffect(() => {
+    const icon = getRealmPopulationIcon(realmId)
+    setIconSrc(icon)
+  }, [realmId])
+
+  const [bubbleProps] = useSpring(
+    () => ({
+      from: STYLE.default,
+      to: showBubble ? STYLE.highlight : STYLE.default,
+      config: BUBBLE_CONFIG,
+      onRest: () => setShowBubble(false),
+    }),
+    [showBubble]
+  )
+
+  if (!iconSrc) return null
+
+  return (
+    <animated.div
+      style={{ ...bubbleProps, left: "220px", position: "absolute", zIndex: 2 }}
+    >
+      <div>
+        <img src={iconSrc} height={24} width={24} alt="Bubble" />
+      </div>
+    </animated.div>
+  )
+}