Fix text in tips on staking page

ui/pages/Staking.tsx

@@ -22,7 +22,7 @@ const Staking = () => {
   const detailsInfoItems = [
     {
       title: 'Total Validators',
-      hint: 'Validators secure the Polkadot Relay Chain by validating blocks.',
+      hint: 'Validators secure the Atleta Relay Chain by validating blocks.',
       isLoading,
       value: stats.totalValidators,
     },
@@ -34,7 +34,7 @@ const Staking = () => {
     },
     {
       title: 'Active Pools',
-      hint: 'The current amount of active nomination pools on Polkadot.',
+      hint: 'The current amount of active nomination pools on Atleta.',
       isLoading,
       value: stats.activePools,
     },

ui/staking/StakingStats.tsx

@@ -10,7 +10,7 @@ import { useSupply } from './utils/useSupply';
 const StakingStats = () => {
   const registry = useRegistry();
 
-  const eraRemaining = useEraRemaining();
+  const { erasProgress, estimatedEraLength } = useEraRemaining();
   const supply = useSupply();
 
   return (
@@ -41,8 +41,11 @@ const StakingStats = () => {
       <StatsItem
         icon="clock-light"
         title="Time Remaining This Era"
-        value={ `${ Math.trunc(eraRemaining.asHours()) }h ${ eraRemaining.minutes() }m ${ eraRemaining.seconds() }s` }
-        tooltipLabel="At the end of each era, validators are rewarded DOT based on era points accumulated.  1 era is currently 24 hours in Polkadot."
+        value={ `${ Math.trunc(erasProgress.asHours()) }h ${ erasProgress.minutes() }m ${ erasProgress.seconds() }s` }
+        tooltipLabel={
+          `At the end of each era, validators are rewarded ${ registry.symbol } based on era points accumulated. ` +
+          `1 era is currently ${ estimatedEraLength.asHours() } hour${ estimatedEraLength.asHours() > 1 ? 's' : '' } in Atleta.`
+        }
       />
     </Grid>
   );

ui/staking/utils/useEraRemaining.ts

@@ -18,6 +18,11 @@ type CalcRemainingProps = {
   expectedBlockTime: number;
 }
 
+type CalcRemainingReturn = {
+  erasProgress: number;
+  estimatedEraLength: number;
+}
+
 dayjs.extend(duration);
 
 const calcRemaining = ({
@@ -29,7 +34,7 @@ const calcRemaining = ({
   erasStartSessionIndex,
   sessionsPerEra,
   expectedBlockTime,
-}: CalcRemainingProps): number => {
+}: CalcRemainingProps): CalcRemainingReturn => {
   // era length in slots
   const estimatedEraLength = sessionsPerEra * sessionLength * expectedBlockTime;
   // when epoch started
@@ -41,11 +46,14 @@ const calcRemaining = ({
 
   // slots length possinble may be in constants
   // now it's 6000
-  return estimatedEraLength - erasProgress * 6000;
+  return {
+    erasProgress: estimatedEraLength - erasProgress * 6000,
+    estimatedEraLength,
+  };
 };
 
 export const useEraRemaining = () => {
-  const [ remaining, setRemaining ] = useState(0);
+  const [ remaining, setRemaining ] = useState<CalcRemainingReturn>({ erasProgress: 0, estimatedEraLength: 0 });
   const { api } = usePolkadotApi();
 
   useEffect(() => {
@@ -93,5 +101,8 @@ export const useEraRemaining = () => {
     };
   }, [ api ]);
 
-  return dayjs.duration(remaining);
+  return {
+    erasProgress: dayjs.duration(remaining.erasProgress),
+    estimatedEraLength: dayjs.duration(remaining.estimatedEraLength),
+  };
 };