feat: update neutron [web-neutron] (#1320)

## Description

Closes: #XXXX

<!-- Add a description of the changes that this PR introduces and the
files that
are the most critical to review. -->

---

### Author Checklist

_All items are required. Please add a note to the item if the item is
not applicable and
please add links to any relevant follow up issues._

I have...

- [x] ran linting via `yarn lint`
- [ ] wrote tests where necessary
- [x] included the correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
in the PR title
- [x] targeted the correct branch
- [x] provided a link to the relevant issue or specification
- [x] reviewed "Files changed" and left comments if necessary
- [x] confirmed all CI checks have passed
- [x] added a changeset via [`yarn && yarn
changeset`](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)

.changeset/smooth-terms-stare.md

@@ -0,0 +1,5 @@
+---
+'web-neutron': major
+---
+
+updated params page and token display in staking component

apps/web-neutron/src/chainConfig/types.ts

@@ -147,7 +147,7 @@ export interface ChainConfig extends ChainSettings {
   keplr: string | undefined;
   provider: {
     primaryTokenUnit: string;
-    tokenunits: {
+    tokenUnits: {
       [token: string]: {
         display: string;
         exponent: number;

apps/web-neutron/src/components/layout/index.tsx

@@ -0,0 +1,54 @@
+import { motion, Transition, Variants } from 'framer-motion';
+import Banner, { getBannersLinks } from '@/components/banner';
+import Footer from '@/components/footer';
+import useStyles from '@/components/layout/styles';
+import type { LayoutProps } from '@/components/layout/types';
+import Nav from '@/components/nav';
+import Typography from '@mui/material/Typography';
+import useAppTranslation from '@/hooks/useAppTranslation';
+
+const bannerLinks = getBannersLinks();
+
+const variants: Variants = {
+  initial: { filter: 'blur(4px)' },
+  animate: { filter: 'blur(0px)' },
+  exit: { filter: 'blur(4px)' },
+};
+
+const transition: Transition = {
+  duration: 1,
+};
+
+const Layout = (props: LayoutProps) => {
+  const { classes, cx } = useStyles();
+  const { children, navTitle, className } = props;
+  const { t } = useAppTranslation('validators');
+
+  return (
+    <motion.div
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      variants={variants}
+      transition={transition}
+      className={classes.root}
+    >
+      <div className={classes.contentWrapper}>
+        <Nav title={navTitle} />
+        <div className={classes.children}>
+          <div className={classes.appBarPlaceholder} />
+          {!!bannerLinks.length && <Banner />}
+          {navTitle === 'Validators' ? (
+            <div className={classes.content}>
+              <Typography variant="h4"> {t('stakingDataIsSourcedFromCosmoshub')}</Typography>
+            </div>
+          ) : null}
+          <div className={cx(className, 'main-content')}>{children}</div>
+        </div>
+      </div>
+      <Footer className={classes.footer} />
+    </motion.div>
+  );
+};
+
+export default Layout;

apps/web-neutron/src/components/layout/styles.ts

@@ -0,0 +1,49 @@
+import { CSSObject } from '@emotion/react';
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    [theme.breakpoints.up('lg')]: {
+      display: 'flex',
+      flexDirection: 'column',
+      minHeight: '100vh',
+    },
+  },
+  contentWrapper: {
+    [theme.breakpoints.up('lg')]: {
+      display: 'flex',
+      flex: 1,
+    },
+  },
+  footer: {
+    [theme.breakpoints.up('lg')]: {
+      position: 'relative',
+      zIndex: 1299,
+    },
+  },
+  appBarPlaceholder: theme.mixins.toolbar as CSSObject,
+  children: {
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    '& .main-content': {
+      width: '100%',
+      flex: 1,
+    },
+  },
+  content: {
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    textAlign: 'center',
+    color: theme.palette.custom.fonts.fontOne,
+    backgroundColor: theme.palette.custom.wallet.backgroundTwo,
+    padding: theme.spacing(1.5),
+    marginTop: theme.spacing(2),
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+  },
+}));
+
+export default useStyles;

apps/web-neutron/src/components/nav/components/title_bar/styles.ts

@@ -0,0 +1,76 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  root: {
+    padding: theme.spacing(1, 2),
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    [theme.breakpoints.up('lg')]: {
+      padding: theme.spacing(1, 3),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      flexDirection: 'row',
+      width: '100%',
+      '& .MuiTypography-h1': {
+        lineHeight: 1,
+        alignSelf: 'flex-end',
+      },
+    },
+    '&& h1': {
+      lineHeight: '56px',
+    },
+  },
+  logo: {
+    height: '36px',
+  },
+  content: {
+    width: '100%',
+    background: theme.palette.custom.general.surfaceOne,
+    marginTop: theme.spacing(2),
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(1),
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    [theme.breakpoints.up('md')]: {
+      flexDirection: 'row',
+    },
+    [theme.breakpoints.up('lg')]: {
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginTop: 0,
+      width: '70%',
+      padding: theme.spacing(1, 3),
+      flexWrap: 'nowrap',
+    },
+  },
+  item: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    flexDirection: 'column',
+    padding: theme.spacing(1),
+    width: '100%',
+    '& .label': {
+      marginRight: theme.spacing(1),
+    },
+    [theme.breakpoints.up('sm')]: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    [theme.breakpoints.up('md')]: {
+      width: '50%',
+    },
+    [theme.breakpoints.up('lg')]: {
+      padding: 0,
+      width: 'auto',
+    },
+  },
+}));
+
+export default useStyles;

apps/web-neutron/src/screens/params/hooks.ts

@@ -1,63 +1,16 @@
-import numeral from 'numeral';
 import * as R from 'ramda';
 import { useCallback, useState } from 'react';
-import chainConfig from '@/chainConfig';
 import { ParamsQuery, useParamsQuery } from '@/graphql/types/provider_types';
-import { DistributionParams, GovParams, MintParams, SlashingParams, StakingParams } from '@/models';
+import { DistributionParams, MintParams } from '@/models';
 import type { ParamsState } from '@/screens/params/types';
-import { formatToken } from '@/utils/format_token';
 import CCVConsumerParams from '../../models/ccv_consumer_params';
 
-const { primaryTokenUnit } = chainConfig();
-
 const initialState: ParamsState = {
   loading: true,
   exists: true,
   ccvConsumer: null,
-  staking: null,
-  slashing: null,
   minting: null,
   distribution: null,
-  gov: null,
-};
-
-// ================================
-// staking
-// ================================
-const formatStaking = (data: ParamsQuery) => {
-  if (data.bdjuno_provider?.staking_params.length) {
-    const stakingParamsRaw = StakingParams.fromJson(
-      data?.bdjuno_provider?.staking_params?.[0]?.params ?? {}
-    );
-    return {
-      bondDenom: stakingParamsRaw.bondDenom,
-      unbondingTime: stakingParamsRaw.unbondingTime,
-      maxEntries: stakingParamsRaw.maxEntries,
-      historicalEntries: stakingParamsRaw.historicalEntries,
-      maxValidators: stakingParamsRaw.maxValidators,
-    };
-  }
-
-  return null;
-};
-
-// ================================
-// slashing
-// ================================
-const formatSlashing = (data: ParamsQuery) => {
-  if (data.bdjuno_provider?.staking_params.length) {
-    const slashingParamsRaw = SlashingParams.fromJson(
-      data?.bdjuno_provider?.staking_params?.[0]?.params ?? {}
-    );
-    return {
-      downtimeJailDuration: slashingParamsRaw.downtimeJailDuration,
-      minSignedPerWindow: slashingParamsRaw.minSignedPerWindow,
-      signedBlockWindow: slashingParamsRaw.signedBlockWindow,
-      slashFractionDoubleSign: slashingParamsRaw.slashFractionDoubleSign,
-      slashFractionDowntime: slashingParamsRaw.slashFractionDowntime,
-    };
-  }
-  return null;
 };
 
 // ================================
@@ -102,30 +55,6 @@ const formatDistribution = (data: ParamsQuery) => {
   return null;
 };
 
-// ================================
-// distribution
-// ================================
-
-const formatGov = (data: ParamsQuery) => {
-  if (data.bdjuno_provider?.gov_params.length) {
-    const govParamsRaw = GovParams.fromJson(data?.bdjuno_provider?.gov_params?.[0] ?? {});
-    return {
-      minDeposit: formatToken(
-        govParamsRaw.depositParams.minDeposit?.[0]?.amount ?? 0,
-        govParamsRaw.depositParams.minDeposit?.[0]?.denom ?? primaryTokenUnit
-      ),
-      maxDepositPeriod: govParamsRaw.depositParams.maxDepositPeriod,
-      quorum: numeral(numeral(govParamsRaw.tallyParams.quorum).format('0.[00]')).value() ?? 0,
-      threshold: numeral(numeral(govParamsRaw.tallyParams.threshold).format('0.[00]')).value() ?? 0,
-      vetoThreshold:
-        numeral(numeral(govParamsRaw.tallyParams.vetoThreshold).format('0.[00]')).value() ?? 0,
-      votingPeriod: govParamsRaw.votingParams.votingPeriod,
-    };
-  }
-
-  return null;
-};
-
 const formatCCVConsumer = (data: ParamsQuery) => {
   if (data?.ccv_consumer_params[0]?.params) {
     const ccvConsumerParamsRaw = CCVConsumerParams(data?.ccv_consumer_params[0]?.params ?? {});
@@ -149,16 +78,10 @@ const formatParam = (data: ParamsQuery) => {
 
   results.ccvConsumer = formatCCVConsumer(data);
 
-  results.staking = formatStaking(data);
-
-  results.slashing = formatSlashing(data);
-
   results.minting = formatMint(data);
 
   results.distribution = formatDistribution(data);
 
-  results.gov = formatGov(data);
-
   return results;
 };
 

apps/web-neutron/src/screens/params/index.tsx

@@ -5,34 +5,12 @@ import Layout from '@/components/layout';
 import LoadAndExist from '@/components/load_and_exist';
 import { useParams } from '@/screens/params/hooks';
 import useStyles from '@/screens/params/styles';
-import {
-  formatDistribution,
-  formatGov,
-  formatMinting,
-  formatSlashing,
-  formatStaking,
-  formatCCVConsumer,
-} from '@/screens/params/utils';
+import { formatDistribution, formatMinting, formatCCVConsumer } from '@/screens/params/utils';
 
 const Params = () => {
   const { t } = useAppTranslation('params');
   const { classes } = useStyles();
   const { state } = useParams();
-
-  const staking = state.staking
-    ? {
-        title: t('staking') ?? undefined,
-        details: formatStaking(state.staking, t),
-      }
-    : null;
-
-  const slashing = state.slashing
-    ? {
-        title: t('slashing') ?? undefined,
-        details: formatSlashing(state.slashing, t),
-      }
-    : null;
-
   const minting = state.minting
     ? {
         title: t('minting') ?? undefined,
@@ -47,13 +25,6 @@ const Params = () => {
       }
     : null;
 
-  const gov = state.gov
-    ? {
-        title: t('gov') ?? undefined,
-        details: formatGov(state.gov, t),
-      }
-    : null;
-
   const ccvConsumer = state.ccvConsumer
     ? {
         title: t('CCVConsumer') ?? undefined,
@@ -71,11 +42,8 @@ const Params = () => {
       <Layout navTitle={t('params') ?? undefined}>
         <LoadAndExist loading={state.loading} exists={state.exists}>
           <span className={classes.root}>
-            {staking && <BoxDetails {...staking} />}
-            {slashing && <BoxDetails {...slashing} />}
             {minting && <BoxDetails {...minting} />}
             {distribution && <BoxDetails {...distribution} />}
-            {gov && <BoxDetails {...gov} />}
             {ccvConsumer && <BoxDetails {...ccvConsumer} />}
           </span>
         </LoadAndExist>