use GraphContainer

polkadot-cloud · Jan 9, 2025 · ba7eb95 · ba7eb95
1 parent 72f3923
commit ba7eb95
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 49 deletions.
diff --git a/packages/app/src/overlay/canvas/JoinPool/Overview/index.tsx b/packages/app/src/overlay/canvas/JoinPool/Overview/index.tsx
@@ -6,8 +6,7 @@ import { JoinForm } from './JoinForm'
 import { useActiveAccounts } from 'contexts/ActiveAccounts'
 import { useActivePool } from 'contexts/Pools/ActivePool'
 import { useStaking } from 'contexts/Staking'
-import { Interface } from 'ui-core/canvas'
-import { GraphLayoutWrapper } from '../Wrappers'
+import { GraphContainer, Interface } from 'ui-core/canvas'
 import type { OverviewSectionProps } from '../types'
 import { Addresses } from './Addresses'
 import { Performance } from './Performance'
@@ -28,10 +27,10 @@ export const Overview = (props: OverviewSectionProps) => {
     <Interface
       Main={
         <>
-          <GraphLayoutWrapper>
+          <GraphContainer>
             <Stats {...props} />
             <Performance {...props} />
-          </GraphLayoutWrapper>
+          </GraphContainer>
           <Addresses {...props} />
           <Roles {...props} />
         </>

diff --git a/packages/app/src/overlay/canvas/JoinPool/Wrappers.ts b/packages/app/src/overlay/canvas/JoinPool/Wrappers.ts
@@ -151,33 +151,6 @@ export const GraphWrapper = styled.div`
   }
 `
 
-// Element used to wrap graph and pool stats, allowing flex ordering on smaller screens.
-// TODO: abstract this into shared GraphContainer component.
-export const GraphLayoutWrapper = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-
-  @media (min-width: 1001px) {
-    > div:last-child {
-      margin-top: 1.25rem;
-    }
-  }
-
-  @media (max-width: 1000px) {
-    > div {
-      &:first-child {
-        order: 2;
-        margin-top: 1.5rem;
-        margin-bottom: 0;
-      }
-      &:last-child {
-        order: 1;
-      }
-    }
-  }
-`
-
 export const NominationsWrapper = styled.div`
   flex: 1;
   display: flex;

diff --git a/packages/app/src/overlay/canvas/ValidatorMetrics/index.tsx b/packages/app/src/overlay/canvas/ValidatorMetrics/index.tsx
@@ -4,11 +4,19 @@
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 import { Polkicon } from '@w3ux/react-polkicon'
 import BigNumber from 'bignumber.js'
+import { useHelp } from 'contexts/Help'
 import { useNetwork } from 'contexts/Network'
 import { useStaking } from 'contexts/Staking'
 import { useTranslation } from 'react-i18next'
-import { ButtonPrimary } from 'ui-buttons'
-import { AccountTitle, Head, Main, Stat, Subheading } from 'ui-core/canvas'
+import { ButtonHelp, ButtonPrimary } from 'ui-buttons'
+import {
+  AccountTitle,
+  GraphContainer,
+  Head,
+  Main,
+  Stat,
+  Subheading,
+} from 'ui-core/canvas'
 import { useOverlay } from 'ui-overlay'
 import { planckToUnitBn } from 'utils'
 
@@ -28,6 +36,7 @@ export const ValidatorMetrics = () => {
       brand: { token: Token },
     },
   } = useNetwork()
+  const { openHelp } = useHelp()
   const validator = options!.validator
   const identity = options!.identity
 
@@ -74,22 +83,35 @@ export const ValidatorMetrics = () => {
           </div>
         </div>
       </AccountTitle>
-      <Subheading>
-        <h4>
-          <Stat withIcon>
-            <Token />
-            {t('selfStake', { ns: 'modals' })}:{' '}
-            {planckToUnitBn(validatorOwnStake, units).toFormat()} {unit}
-          </Stat>
-
-          <Stat withIcon>
-            <Token />
-            {t('nominatorStake', { ns: 'modals' })}:{' '}
-            {planckToUnitBn(otherStake, units).decimalPlaces(0).toFormat()}{' '}
-            {unit}
-          </Stat>
-        </h4>
-      </Subheading>
+      <GraphContainer>
+        <Subheading>
+          <h4>
+            <Stat withIcon>
+              <Token />
+              {t('selfStake', { ns: 'modals' })}:{' '}
+              {planckToUnitBn(validatorOwnStake, units).toFormat()} {unit}
+            </Stat>
+            <Stat withIcon>
+              <Token />
+              {t('nominatorStake', { ns: 'modals' })}:{' '}
+              {planckToUnitBn(otherStake, units).decimalPlaces(0).toFormat()}{' '}
+              {unit}
+            </Stat>
+          </h4>
+        </Subheading>
+        <div>
+          <Subheading>
+            <h3>
+              {t('recentPerformance', { ns: 'library' })}
+              <ButtonHelp
+                outline
+                marginLeft
+                onClick={() => openHelp('Era Points')}
+              />
+            </h3>
+          </Subheading>
+        </div>
+      </GraphContainer>
     </Main>
   )
 }
diff --git a/packages/ui-core/src/canvas/GraphContainer/index.module.scss b/packages/ui-core/src/canvas/GraphContainer/index.module.scss
@@ -0,0 +1,25 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+.graphContainer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  @media (min-width: 1001px) {
+    > div:last-child {
+      margin-top: 1.25rem;
+    }
+  }
+  @media (max-width: 1000px) {
+    > div {
+      &:first-child {
+        order: 2;
+        margin-top: 1.5rem;
+        margin-bottom: 0;
+      }
+      &:last-child {
+        order: 1;
+      }
+    }
+  }
+}
diff --git a/packages/ui-core/src/canvas/GraphContainer/index.tsx b/packages/ui-core/src/canvas/GraphContainer/index.tsx
@@ -0,0 +1,11 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import type { ComponentBase } from '@w3ux/types'
+import classes from './index.module.scss'
+
+export const GraphContainer = ({ children, style }: ComponentBase) => (
+  <div className={classes.graphContainer} style={style}>
+    {children}
+  </div>
+)
diff --git a/packages/ui-core/src/canvas/index.tsx b/packages/ui-core/src/canvas/index.tsx
@@ -5,6 +5,7 @@ export * from './AccountTitle'
 export * from './Container'
 export * from './Content'
 export * from './Footer'
+export * from './GraphContainer'
 export * from './Head'
 export * from './HeadTags'
 export * from './Interface'