Add min and max stake (#92)

packages/protocol-dashboard/src/components/Bounds/Bounds.module.css

@@ -0,0 +1,34 @@
+.container {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0px;
+  width: 300px;
+  min-width: 300px;
+  margin-bottom: 8px;
+}
+
+.rowContainer {
+  display: inline-flex;
+  width: 100%;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
+
+.label {
+  font-weight: var(--font-bold);
+  font-size: var(--font-m);
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+  color: var(--neutral-light-4);
+}
+
+.value {
+  font-weight: var(--font-bold);
+  font-size: var(--font-m);
+
+  text-align: right;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+  color: var(--neutral);
+}

packages/protocol-dashboard/src/components/Bounds/Bounds.tsx

@@ -0,0 +1,51 @@
+import React, { ReactNode } from 'react'
+
+import Paper from 'components/Paper'
+import styles from './Bounds.module.css'
+import { Address } from 'types'
+import DisplayAudio from 'components/DisplayAudio'
+import { useUser } from 'store/cache/user/hooks'
+
+const messages = {
+  minimumTotalStake: 'Min Allowed Stake',
+  maximumTotalStake: 'Max Allowed Stake'
+}
+
+type RowStatProps = {
+  label: string
+  value: ReactNode
+}
+const RowStat: React.FC<RowStatProps> = ({ label, value }) => {
+  return (
+    <div className={styles.rowContainer}>
+      <div className={styles.label}>{label}</div>
+      <div className={styles.value}>{value}</div>
+    </div>
+  )
+}
+
+type OwnProps = {
+  wallet: Address
+}
+
+type BoundsProps = OwnProps
+
+/**
+ * Shows stats about staking. Lives on the SP page
+ */
+const Bounds: React.FC<BoundsProps> = ({ wallet }) => {
+  const { user } = useUser({ wallet })
+  if (!user || !('serviceProvider' in user)) {
+    return null
+  }
+  const min = <DisplayAudio amount={user.serviceProvider.minAccountStake} />
+  const max = <DisplayAudio amount={user.serviceProvider.maxAccountStake} />
+  return (
+    <Paper className={styles.container}>
+      <RowStat label={messages.minimumTotalStake} value={min} />
+      <RowStat label={messages.maximumTotalStake} value={max} />
+    </Paper>
+  )
+}
+
+export default Bounds

packages/protocol-dashboard/src/components/Bounds/index.tsx

@@ -0,0 +1 @@
+export { default } from './Bounds'

packages/protocol-dashboard/src/components/UserInfo/UserInfo.tsx

@@ -24,6 +24,7 @@ import desktopStyles from './UserInfo.module.css'
 import mobileStyles from './UserInfoMobile.module.css'
 import { createStyles } from 'utils/mobile'
 import UserImage from 'components/UserImage'
+import Bounds from 'components/Bounds'
 
 const styles = createStyles({ desktopStyles, mobileStyles })
 
@@ -105,6 +106,7 @@ const UserInfo = ({
       </div>
     </StandaloneBox>
   )
+  const isOperator = (user as Operator)?.serviceProvider ?? false
   const isValidBounds =
     (user as Operator)?.serviceProvider?.validBounds ?? false
   const makeClaimBox = <StandaloneBox> {messages.makeClaim} </StandaloneBox>
@@ -188,6 +190,7 @@ const UserInfo = ({
       />
       <div className={styles.userName}>{name !== wallet && name}</div>
       <div className={styles.userWallet}>{wallet}</div>
+      {isOperator && <Bounds wallet={wallet} />}
       <MyEstimatedRewards wallet={wallet} />
     </>
   )