add banner about staking data source

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

@@ -0,0 +1,52 @@
+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 />}
+          <div className={classes.content}>
+            <Typography variant="h4"> {t('stakingDataIsSourcedFromCosmoshub')}</Typography>
+          </div>
+          <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,50 @@
+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',
+    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/layout/types.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export interface LayoutProps {
+  children: ReactNode;
+  navTitle?: string;
+  className?: string;
+}

packages/ui/public/locales/en/web_neutron.json

@@ -6,5 +6,6 @@
   "params.softOptOutThreshold": "Soft Opt Out Threshold",
   "params.transferTimeoutPeriod": "Transfer Timeout Period",
   "params.consumerRedistributionFraction": "Consumer Redistribution Fraction",
-  "params.blocksPerDistributionTransmission": "Blocks Per Distribution Transmission"
+  "params.blocksPerDistributionTransmission": "Blocks Per Distribution Transmission",
+  "validators.stakingDataIsSourcedFromCosmoshub": "The staking data is sourced from Cosmos Hub, as Neutron is a consumer chain."
 }

packages/ui/public/locales/it/web_neutron.json

@@ -6,5 +6,6 @@
   "params.softOptOutThreshold": "Soglia di disattivazione soft",
   "params.transferTimeoutPeriod": "Periodo di timeout del trasferimento",
   "params.consumerRedistributionFraction": "Frazione di ridistribuzione del consumatore",
-  "params.blocksPerDistributionTransmission": "Blocchi per trasmissione di distribuzione"
+  "params.blocksPerDistributionTransmission": "Blocchi per trasmissione di distribuzione",
+  "validators.stakingDataIsSourcedFromCosmoshub": "I dati di staking provengono da Cosmos Hub, poiché Neutron è una catena di consumatori."
 }

packages/ui/public/locales/pl/web_neutron.json

@@ -6,5 +6,6 @@
   "params.softOptOutThreshold": "Próg rezygnacji",
   "params.transferTimeoutPeriod": "Okres limitu czasu transferu",
   "params.consumerRedistributionFraction": "Frakcja redystrybucji konsumentów",
-  "params.blocksPerDistributionTransmission": "Bloki na transmisję dystrybucyjną"
+  "params.blocksPerDistributionTransmission": "Bloki na transmisję dystrybucyjną",
+  "validators.stakingDataIsSourcedFromCosmoshub": "Dane dotyczące stakingu pochodzą z Cosmos Hub, ponieważ Neutron jest siecią konsumencką."
 }

packages/ui/public/locales/zhs/web_neutron.json

@@ -6,5 +6,6 @@
   "params.softOptOutThreshold": "软选择退出阈值",
   "params.transferTimeoutPeriod": "传输超时时间",
   "params.consumerRedistributionFraction": "消费者重新分配分数",
-  "params.blocksPerDistributionTransmission": "每次分发传输的块数"
+  "params.blocksPerDistributionTransmission": "每次分发传输的块数",
+  "validators.stakeDataIsSourcedFromCosmoshub": "质押数据来源于 Cosmos Hub，因为 Neutron 是一条消费者链。"
 }

packages/ui/public/locales/zht/web_neutron.json

@@ -6,5 +6,6 @@
   "params.softOptOutThreshold": "軟體選擇退出閾值",
   "params.transferTimeoutPeriod": "傳輸逾時時間",
   "params.consumerRedistributionFraction": "消費者重新分配分數",
-  "params.blocksPerDistributionTransmission": "每次分發傳輸的區塊數"
+  "params.blocksPerDistributionTransmission": "每次分發傳輸的區塊數",
+  "validators.stakeDataIsSourcedFromCosmoshub": "質押資料來自 Cosmos Hub，因為 Neutron 是一條消費鏈。"
 }