🪄 [QA] Update stage environments

src/assets/questline-data.json

@@ -29,7 +29,7 @@
             "quests": [
                 {
                     "name": "Execute individual transactions on Arbitrum",
-                    "description": "The more transactions you execute on Arbitrum compared to other members of this realm in a week, the more of the weekly XP drop you will get."
+                    "description": "The more contract interactions you execute on Arbitrum compared to other members of this realm in a week, the more of the weekly XP drop you will get."
                 }
             ]
         },

src/ui/Footer/FooterLinks.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+import IconLink from "shared/components/IconLink"
+import { LINKS } from "shared/constants"
+import discordIcon from "shared/assets/icons/discord.svg"
+import twitterIcon from "shared/assets/icons/twitter.svg"
+import githubIcon from "shared/assets/icons/github.svg"
+
+const ICON_SIZE = "18px"
+
+export default function FooterLinks() {
+  return (
+    <>
+      <div className="links">
+        <IconLink
+          href={LINKS.DISCORD}
+          iconWidth={ICON_SIZE}
+          iconHeight={ICON_SIZE}
+          iconSrc={discordIcon}
+        />
+        <IconLink
+          href={LINKS.TWITTER}
+          iconWidth={ICON_SIZE}
+          iconHeight={ICON_SIZE}
+          iconSrc={twitterIcon}
+        />
+        <IconLink
+          href={LINKS.GITHUB}
+          iconWidth={ICON_SIZE}
+          iconHeight={ICON_SIZE}
+          iconSrc={githubIcon}
+        />
+      </div>
+      <a href={LINKS.RULEBOOK} target="_blank" rel="noreferrer">
+        Rulebook
+      </a>
+      <style jsx>{`
+        .links {
+          display: flex;
+          gap: 24px;
+        }
+      `}</style>
+    </>
+  )
+}

src/ui/Footer/FooterWrapper.tsx

@@ -0,0 +1,27 @@
+import React, { CSSProperties, ReactNode } from "react"
+
+type FooterWrapperProps = {
+  children: ReactNode
+  style?: CSSProperties
+}
+
+export default function FooterWrapper({ children, style }: FooterWrapperProps) {
+  return (
+    <>
+      <footer style={style}>{children}</footer>
+      <style jsx>{`
+        footer {
+          position: absolute;
+          bottom: 0;
+          display: flex;
+          align-items: center;
+          gap: 32px;
+          z-index: var(--z-navigation);
+          padding: 63px 41px 0;
+          height: 114px;
+          width: 100%;
+        }
+      `}</style>
+    </>
+  )
+}

src/ui/Footer/OnboardingFooter.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+import FooterWrapper from "./FooterWrapper"
+import FooterLinks from "./FooterLinks"
+import PopulationCount from "./PopulationCount"
+
+export default function OnboardingFooter() {
+  return (
+    <FooterWrapper>
+      <FooterLinks />
+      <PopulationCount />
+    </FooterWrapper>
+  )
+}

src/ui/Footer/PopulationCount.tsx

@@ -0,0 +1,46 @@
+import React from "react"
+import Icon from "shared/components/Icon"
+import { separateThousandsByComma } from "shared/utils"
+import populationIcon from "shared/assets/icons/people.svg"
+import { selectTotalPopulation, useDappSelector } from "redux-state"
+
+export default function PopulationCount() {
+  const population = useDappSelector(selectTotalPopulation)
+
+  if (!population) return null
+
+  return (
+    <>
+      <div className="population_count">
+        <div className="row_center population_label">
+          <Icon
+            src={populationIcon}
+            height="24px"
+            width="24px"
+            type="image"
+            color="currentColor"
+          />
+          <p>Population</p>
+        </div>
+        <p style={{ font: "var(--text-h1)" }}>
+          {separateThousandsByComma(population)}
+        </p>
+      </div>
+      <style jsx>{`
+        .population_count {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+          bottom: 13px;
+          text-align: center;
+        }
+        .population_label {
+          gap: 7px;
+        }
+        .population_label p {
+          color: var(--secondary-s1-60);
+        }
+      `}</style>
+    </>
+  )
+}

src/ui/Footer/index.tsx

@@ -1,65 +1,21 @@
 import React from "react"
-import IconLink from "shared/components/IconLink"
-import discordIcon from "shared/assets/icons/discord.svg"
-import twitterIcon from "shared/assets/icons/twitter.svg"
-import githubIcon from "shared/assets/icons/github.svg"
 // import ClaimProgressBar from "./ClaimProgressBar" // not used at the moment
-import { LINKS } from "shared/constants"
 import Version from "shared/components/Version"
 import RealmsBar from "./RealmBar"
-
-const ICON_SIZE = "18px"
+import FooterLinks from "./FooterLinks"
+import FooterWrapper from "./FooterWrapper"
 
 export default function Footer() {
   return (
-    <footer>
-      <div className="links">
-        <IconLink
-          href={LINKS.DISCORD}
-          iconWidth={ICON_SIZE}
-          iconHeight={ICON_SIZE}
-          iconSrc={discordIcon}
-        />
-        <IconLink
-          href={LINKS.TWITTER}
-          iconWidth={ICON_SIZE}
-          iconHeight={ICON_SIZE}
-          iconSrc={twitterIcon}
-        />
-        <IconLink
-          href={LINKS.GITHUB}
-          iconWidth={ICON_SIZE}
-          iconHeight={ICON_SIZE}
-          iconSrc={githubIcon}
-        />
-      </div>
-      <a href={LINKS.RULEBOOK} target="_blank" rel="noreferrer">
-        Rulebook
-      </a>
+    <FooterWrapper
+      style={{
+        background:
+          "linear-gradient(0deg, #032c2a 0%, rgba(0, 29, 27, 0) 100%)",
+      }}
+    >
+      <FooterLinks />
       <Version />
       <RealmsBar />
-      <style jsx>{`
-        footer {
-          position: absolute;
-          bottom: 0;
-          display: flex;
-          align-items: center;
-          gap: 32px;
-          z-index: var(--z-navigation);
-          padding: 63px 41px 0;
-          height: 114px;
-          width: 100%;
-          background: linear-gradient(
-            0deg,
-            #032c2a 0%,
-            rgba(0, 29, 27, 0) 100%
-          );
-        }
-        .links {
-          display: flex;
-          gap: 24px;
-        }
-      `}</style>
-    </footer>
+    </FooterWrapper>
   )
 }

src/ui/Island/RealmDetails/LeaderboardList/LeaderboardItem.tsx

@@ -112,12 +112,12 @@ export default function LeaderboardItem({
         }
 
         .leaderboard_item[data-rank="2"] {
-          color: #d99e45;
+          color: #d0d6d6;
           border: 1px solid currentColor;
         }
 
         .leaderboard_item[data-rank="3"] {
-          color: #d0d6d6;
+          color: #d99e45;
           border: 1px solid currentColor;
           margin-bottom: 14px;
         }

src/ui/Onboarding/index.tsx

@@ -9,6 +9,7 @@ import FullPageLoader from "shared/components/FullPageLoader"
 import Nav from "ui/Nav"
 import portalBackground from "shared/assets/portal-background.mp4"
 import Version from "shared/components/Version"
+import OnboardingFooter from "ui/Footer/OnboardingFooter"
 import ConnectWallet from "./ConnectWallet"
 import JoinWaitlist from "./JoinWaitlist"
 import EnterPortal from "./EnterPortal"
@@ -65,6 +66,7 @@ export default function Onboarding() {
         </div>
       </div>
       <Nav />
+      <OnboardingFooter />
       <style jsx>{`
         .onboarding {
           height: 100vh;