Merge pull request #2423 from DzhideX/sumer-update-tokenomics-operation

Add Operations group to Tokenomics

pioneer/packages/joy-tokenomics/src/Overview/SpendingAndStakeDistributionTable.tsx

@@ -5,6 +5,8 @@ import { useWindowDimensions } from '../../../joy-utils/src/react/hooks';
 
 import { TokenomicsData, StatusServerData } from '@polkadot/joy-utils/src/types/tokenomics';
 
+import { COLORS } from './index';
+
 const round = (num: number): number => Math.round((num + Number.EPSILON) * 100) / 100;
 
 const applyCss = (columns: number[]): string => {
@@ -123,7 +125,8 @@ type TokenomicsGroup =
   'validators' |
   'council' |
   'storageProviders' |
-  'contentCurators'
+  'contentCurators' |
+  'operations'
 
 const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; statusData?: StatusServerData | null}> = ({ data, statusData }) => {
   const { width } = useWindowDimensions();
@@ -167,7 +170,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.validators.totalStake}`}
           groupStakeDollar={displayStatusData('validators', 'totalStake')}
           stakeShare={data && `${round(data.validators.stakeShare * 100)}`}
-          color='rgb(246, 109, 68)'
+          color={COLORS.VALIDATOR}
         />
         <SpendingAndStakeTableRow
           role={width <= 1015 ? 'Council' : 'Council Members'}
@@ -179,7 +182,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.council.totalStake}`}
           groupStakeDollar={displayStatusData('council', 'totalStake')}
           stakeShare={data && `${round(data.council.stakeShare * 100)}`}
-          color='rgb(254, 174, 101)'
+          color={COLORS.COUNCIL_MEMBER}
         />
         <SpendingAndStakeTableRow
           role={width <= 1015 ? 'Storage' : 'Storage Providers'}
@@ -191,7 +194,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.storageProviders.totalStake}`}
           groupStakeDollar={displayStatusData('storageProviders', 'totalStake')}
           stakeShare={data && `${round(data.storageProviders.stakeShare * 100)}`}
-          color='rgb(230, 246, 157)'
+          color={COLORS.STORAGE_PROVIDER}
         />
         <SpendingAndStakeTableRow
           role={width <= 1015 ? 'S. Lead' : width <= 1050 ? 'Storage Lead' : 'Storage Provider Lead'}
@@ -203,7 +206,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.storageProviders.lead.totalStake}`}
           groupStakeDollar={displayStatusData('storageProviders', 'totalStake', true)}
           stakeShare={data && `${round(data.storageProviders.lead.stakeShare * 100)}`}
-          color='rgb(170, 222, 167)'
+          color={COLORS.STORAGE_LEAD}
         />
         <SpendingAndStakeTableRow
           role={width <= 1015 ? 'Curators' : 'Content Curators'}
@@ -215,7 +218,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.contentCurators.totalStake}`}
           groupStakeDollar={displayStatusData('contentCurators', 'totalStake')}
           stakeShare={data && `${round(data.contentCurators.stakeShare * 100)}`}
-          color='rgb(100, 194, 166)'
+          color={COLORS.CONTENT_CURATOR}
         />
         <SpendingAndStakeTableRow
           role={width <= 1015 ? 'C. Lead' : 'Curators Lead'}
@@ -227,7 +230,31 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
           groupStake={data && `${data.contentCurators.lead.totalStake}`}
           groupStakeDollar={displayStatusData('contentCurators', 'totalStake', true)}
           stakeShare={data && `${round(data.contentCurators.lead.stakeShare * 100)}`}
-          color='rgb(100, 160, 190)'
+          color={COLORS.CURATOR_LEAD}
+        />
+        <SpendingAndStakeTableRow
+          role='Operations'
+          helpContent='The current Operations members, and the sum of their projected rewards and stakes.'
+          numberOfActors={data && `${data.operations.number}`}
+          groupEarning={data && `${Math.round(data.operations.rewardsPerWeek)}`}
+          groupEarningDollar={displayStatusData('operations', 'rewardsPerWeek')}
+          earningShare={data && `${round(data.operations.rewardsShare * 100)}`}
+          groupStake={data && `${data.operations.totalStake}`}
+          groupStakeDollar={displayStatusData('operations', 'totalStake')}
+          stakeShare={data && `${round(data.operations.stakeShare * 100)}`}
+          color={COLORS.OPERATIONS}
+        />
+        <SpendingAndStakeTableRow
+          role='Operations Lead'
+          helpContent='Current Operations Lead, and their projected reward and stake.'
+          numberOfActors={data && `${data.operations.lead.number}`}
+          groupEarning={data && `${Math.round(data.operations.lead.rewardsPerWeek)}`}
+          groupEarningDollar={displayStatusData('operations', 'rewardsPerWeek', true)}
+          earningShare={data && `${round(data.operations.lead.rewardsShare * 100)}`}
+          groupStake={data && `${data.operations.lead.totalStake}`}
+          groupStakeDollar={displayStatusData('operations', 'totalStake', true)}
+          stakeShare={data && `${round(data.operations.lead.stakeShare * 100)}`}
+          color={COLORS.OPERATIONS_LEAD}
         />
         <SpendingAndStakeTableRow
           role='TOTAL'

pioneer/packages/joy-tokenomics/src/Overview/TokenomicsCharts.tsx

@@ -4,6 +4,7 @@ import PieChart from '../../../react-components/src/Chart/PieChart';
 import styled from 'styled-components';
 
 import { TokenomicsData } from '@polkadot/joy-utils/src/types/tokenomics';
+import { COLORS } from './index';
 
 const StyledPieChart = styled(PieChart)`
   width:15rem;
@@ -31,29 +32,37 @@ const TokenomicsCharts: React.FC<{data?: TokenomicsData; className?: string}> =
       {data ? <ChartContainer>
         <StyledPieChart
           values={[{
-            colors: ['rgb(246, 109, 68)'],
+            colors: [COLORS.VALIDATOR],
             label: 'Validators',
             value: data.validators.rewardsShare * 100
           }, {
-            colors: ['rgb(254, 174, 101)'],
+            colors: [COLORS.COUNCIL_MEMBER],
             label: 'Council',
             value: data.council.rewardsShare * 100
           }, {
-            colors: ['rgb(230, 246, 157)'],
+            colors: [COLORS.STORAGE_PROVIDER],
             label: 'Storage Providers',
             value: data.storageProviders.rewardsShare * 100
           }, {
-            colors: ['rgb(170, 222, 167)'],
+            colors: [COLORS.STORAGE_LEAD],
             label: 'Storage Lead',
             value: data.storageProviders.lead.rewardsShare * 100
           }, {
-            colors: ['rgb(100, 194, 166)'],
+            colors: [COLORS.CONTENT_CURATOR],
             label: 'Content Curators',
             value: data.contentCurators.rewardsShare * 100
           }, {
-            colors: ['rgb(100, 160, 190)'],
+            colors: [COLORS.CURATOR_LEAD],
             label: 'Content Curators Lead',
             value: data.contentCurators.lead.rewardsShare * 100
+          }, {
+            colors: [COLORS.OPERATIONS],
+            label: 'Operations',
+            value: data.operations.rewardsShare * 100
+          }, {
+            colors: [COLORS.OPERATIONS_LEAD],
+            label: 'Operations Lead',
+            value: data.operations.lead.rewardsShare * 100
           }
           ]} />
         <Label as='div'>
@@ -64,30 +73,37 @@ const TokenomicsCharts: React.FC<{data?: TokenomicsData; className?: string}> =
       {data ? <ChartContainer>
         <StyledPieChart
           values={[{
-            colors: ['rgb(246, 109, 68)'],
+            colors: [COLORS.VALIDATOR],
             label: 'Validators',
             value: data.validators.stakeShare * 100
           }, {
-            colors: ['rgb(254, 174, 101)'],
+            colors: [COLORS.COUNCIL_MEMBER],
             label: 'Council',
             value: data.council.stakeShare * 100
           }, {
-            colors: ['rgb(230, 246, 157)'],
+            colors: [COLORS.STORAGE_PROVIDER],
             label: 'Storage Providers',
             value: data.storageProviders.stakeShare * 100
           }, {
-            colors: ['rgb(170, 222, 167)'],
+            colors: [COLORS.STORAGE_LEAD],
             label: 'Storage Lead',
             value: data.storageProviders.lead.stakeShare * 100
           }, {
-            colors: ['rgb(100, 194, 166)'],
+            colors: [COLORS.CONTENT_CURATOR],
             label: 'Content Curators',
             value: data.contentCurators.stakeShare * 100
-          },
-          {
-            colors: ['rgb(100, 160, 190)'],
+          }, {
+            colors: [COLORS.CURATOR_LEAD],
             label: 'Content Curators Lead',
             value: data.contentCurators.lead.stakeShare * 100
+          }, {
+            colors: [COLORS.OPERATIONS],
+            label: 'Operations',
+            value: data.operations.stakeShare * 100
+          }, {
+            colors: [COLORS.OPERATIONS_LEAD],
+            label: 'Operations Lead',
+            value: data.operations.lead.stakeShare * 100
           }
           ]} />
         <Label as='div'>

pioneer/packages/joy-tokenomics/src/Overview/index.tsx

@@ -38,6 +38,17 @@ const StyledTokenomicsCharts = styled(TokenomicsCharts)`
   }
 `;
 
+const COLORS = {
+  VALIDATOR: '#ff9800',
+  COUNCIL_MEMBER: '#ffc107',
+  STORAGE_PROVIDER: '#ffeb3b',
+  STORAGE_LEAD: '#cddc39',
+  CONTENT_CURATOR: '#8bc34a',
+  CURATOR_LEAD: '#4caf50',
+  OPERATIONS: '#009688',
+  OPERATIONS_LEAD: '#00bcd4'
+};
+
 const Overview: React.FC = () => {
   const transport = useTransport();
   const [statusDataValue, statusDataError] = usePromise<StatusServerData | undefined>(() => fetch('https://status.joystream.org/status').then((res) => res.json().then((data) => data as StatusServerData)), undefined, []);
@@ -57,3 +68,4 @@ const Overview: React.FC = () => {
 };
 
 export default Overview;
+export { COLORS };

pioneer/packages/joy-utils/src/transport/tokenomics.ts

@@ -227,7 +227,8 @@ export default class TokenomicsTransport extends BaseTransport {
       await this.getCouncilData();
     const workingGroupsData = {
       storageProviders: await this.getWorkingGroupData('Storage'),
-      curators: await this.getWorkingGroupData('Content')
+      curators: await this.getWorkingGroupData('Content'),
+      operations: await this.getWorkingGroupData('Operations')
     };
     const { numberOfValidators, numberOfNominators, totalValidatorStake, validatorRewardsPerWeek, totalIssuance } =
       await this.getValidatorData();
@@ -291,7 +292,8 @@ export default class TokenomicsTransport extends BaseTransport {
         stakeShare: totalCouncilStake / currentlyStakedTokens
       },
       storageProviders: resolveGroupData(workingGroupsData.storageProviders),
-      contentCurators: resolveGroupData(workingGroupsData.curators)
+      contentCurators: resolveGroupData(workingGroupsData.curators),
+      operations: resolveGroupData(workingGroupsData.operations)
     };
   }
 }

pioneer/packages/joy-utils/src/types/tokenomics.ts

@@ -37,6 +37,7 @@ export type TokenomicsData = {
   };
   storageProviders: WorkingGroupTokenomicsData;
   contentCurators: WorkingGroupTokenomicsData;
+  operations: WorkingGroupTokenomicsData;
 }
 
 export type StatusServerData = {