chore: continue with platform

src/screens/staking/components/staking_hero/index.tsx

@@ -1,16 +1,22 @@
 import Trans from "next-translate/Trans";
 import useTranslation from "next-translate/useTranslation";
+import { useEffect } from "react";
 
 import CtaButton from "@src/components/cta-button";
 import HighlightButton from "@src/components/highlight-button";
 import {
   getAllAccounts,
   getAllRewards,
   getAllStaked,
+  getCoinPriceForNetwork,
   setSelectedAccount,
   useStakingRef,
 } from "@src/screens/staking/lib/staking_sdk/context";
-import { accountHasRewards } from "@src/screens/staking/lib/staking_sdk/utils/accounts";
+import {
+  accountHasRewards,
+  filterOutTestnets,
+  filterUniqueAddresses,
+} from "@src/screens/staking/lib/staking_sdk/utils/accounts";
 
 import * as styles from "./index.module.scss";
 
@@ -25,6 +31,23 @@ const StakingHero = () => {
 
   const { hasInit } = stakingRef.current.state;
 
+  useEffect(() => {
+    if (hasInit) {
+      const filteredAccounts = getAllAccounts(stakingRef.current.state)
+        .filter(filterUniqueAddresses())
+        .filter(filterOutTestnets);
+
+      const networks = new Set(
+        filteredAccounts.map((account) => account.networkId),
+      );
+
+      // Once it has init, fetch all coin prices for all the networks
+      Array.from(networks).forEach((networkId) => {
+        getCoinPriceForNetwork(stakingRef.current, networkId);
+      });
+    }
+  }, [hasInit, stakingRef]);
+
   if (!hasInit) return null;
 
   const accounts = getAllAccounts(stakingRef.current.state);

src/screens/staking/components/staking_section/unstaking_modal.module.scss

@@ -20,8 +20,8 @@
 }
 
 .info {
-  background: #dbedff;
-  border-left: 2px solid #007fff;
+  background: #fffbd8;
+  border-left: 2px solid rgba(237, 213, 0, 1);
   border-radius: 8px;
   box-shadow:
     0 1px 10px 0 rgba(16, 24, 40, 0.05),
@@ -68,7 +68,7 @@
     line-height: 20px;
 
     b {
-      color: #007fff;
+      color: #e4a11e;
       font-size: 14px;
       font-style: normal;
       font-weight: 600;

src/screens/staking/components/staking_section/unstaking_modal.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
 
 import FormInput from "@src/components/form_input";
 import HighlightButton from "@src/components/highlight-button";
-import IconInfoCircle from "@src/components/icons/info_circle_blue.svg";
+import IconWarning from "@src/components/icons/icon_warning.svg";
 import LoadingSpinner from "@src/components/loading_spinner";
 import { toastSuccess } from "@src/components/notification";
 import { displayGenericError } from "@src/screens/staking/lib/error";
@@ -224,7 +224,7 @@ const UnstakingModal = () => {
         />
         {!!memoError && <ModalError>{memoError}</ModalError>}
         <div className={styles.info}>
-          <IconInfoCircle />
+          <IconWarning />
           <div className={styles.infoContent}>
             <div className={styles.title}>{t("unstakingModal.infoTitle")}</div>
             {networkInfo ? (

src/screens/staking/lib/staking_sdk/context.tsx

@@ -168,7 +168,7 @@ const getCoinPrice = async (
   context: TStakingContext,
   denom: CoinDenom,
 ): Promise<string> => {
-  const { setState, state } = context;
+  const { state } = context;
 
   const coinPrice = state.coinsPrices[denom];
 
@@ -179,7 +179,7 @@ const getCoinPrice = async (
   if (coinRequest) return coinRequest;
 
   const newRequest = geckoClient.getCoinPrice(denom).then((price): string => {
-    setState((prevState) => ({
+    context.setState((prevState) => ({
       ...prevState,
       coinsPrices: {
         ...prevState.coinsPrices,