Merge pull request #2848 from Emurgo/Ahmed/fill-missing-parts-in-dele…

…gating-screen

Add rewards graph to the staking dashboard page

packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/RewardsGraph.js

@@ -0,0 +1,142 @@
+// @flow
+import { Component } from 'react';
+import type { Node } from 'react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import { readCssVar } from '../../../../styles/utils';
+import { Box } from '@mui/system';
+import { Typography } from '@mui/material';
+import type { GraphItems } from '../dashboard/GraphWrapper';
+
+const graphVars = {
+    barWidth: readCssVar('--yoroi-dashboard-graph-bar-width'),
+    fontSize: '0.75rem',
+    lineHeight: 14,
+};
+
+type Props = {|
+    data: Array<GraphItems>,
+    epochTitle: string,
+    stakepoolNameTitle: string,
+    xAxisLabel: string,
+    yAxisLabel: string,
+    primaryBarLabel: string,
+    hideYAxis: boolean,
+|};
+
+export default class RewardGraph extends Component<Props> {
+    render(): Node {
+      const {
+          hideYAxis,
+          data,
+          xAxisLabel,
+          yAxisLabel,
+          primaryBarLabel,
+          epochTitle,
+          stakepoolNameTitle
+      } = this.props;
+
+      const formatYAxis = (value) => (
+          !hideYAxis ? value : '∗∗∗ '
+      );
+      const GraphTooltip = (
+          { active, payload, label }: {| active: boolean, payload: ?[any], label: string |}
+      ) => {
+          if (active && payload != null) {
+            const { poolName } =  payload[0].payload
+            return (
+              <Box sx={{
+                padding: '8px 12px 8px 8px',
+                backgroundColor: 'var(--yoroi-dashboard-graph-tooltip-background)',
+                color: 'var(--yoroi-dashboard-graph-tooltip-text-color)',
+                fontSize: '0.75rem',
+                lineHeight: '14px',
+                borderRadius: '4px',
+              }}
+              >
+                <p>
+                  <span>{epochTitle}:</span>&nbsp;
+                  <span>{label}</span>
+                </p>
+                <p>
+                  <span>{primaryBarLabel}:</span>&nbsp;
+                  <span>{payload[0].value}</span>
+                </p>
+                {poolName && (
+                <p>
+                  <span>{stakepoolNameTitle}:</span>&nbsp;
+                  <span>{payload[0].payload.poolName}</span>
+                </p>)}
+              </Box>
+            );
+          }
+          return null;
+      };
+
+      // $FlowExpectedError[prop-missing] props are passed implicitly which causes a flow error
+      const graphTooltip = (<GraphTooltip />);
+      return (
+        <>
+          <Typography
+            variant='body1'
+            color='var(--yoroi-palette-gray-600)'
+            sx={{
+              marginTop: '20px',
+              marginBottom: '6px',
+            }}
+          >
+            {yAxisLabel}
+          </Typography>
+          <ResponsiveContainer width="100%" height={200}>
+            <BarChart
+              data={data}
+              margin={{
+                left: -25
+              }}
+            >
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis
+                tick={{
+                  fill: '#A7AFC0',
+                  fontSize: graphVars.fontSize,
+                  lineHeight: graphVars.lineHeight
+                }}
+                dataKey="name"
+                height={50}
+                label={{
+                  value: xAxisLabel,
+                  position: 'insideBottom',
+                  fontSize: graphVars.fontSize,
+                  fill: '#A7AFC0'
+                }}
+                stroke="#A7AFC0"
+                tickLine={false}
+              />
+              <YAxis
+                tickFormatter={formatYAxis}
+                tick={{
+                  fill: '#A7AFC0',
+                  fontSize: graphVars.fontSize,
+                  lineHeight: graphVars.lineHeight
+                }}
+                stroke="#A7AFC0"
+                tickLine={false}
+              />
+              <Tooltip
+                content={graphTooltip}
+                cursor={{ fill: '#D9DDE0' }}
+              />
+
+              <Bar
+                name={primaryBarLabel}
+                maxBarSize={graphVars.barWidth}
+                radius={[25, 25, 0, 0]}
+                dataKey="primary"
+                stackId="a"
+                fill="#C4CAD7"
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </>
+      );
+    }
+};

packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/StakingTabs.js

@@ -12,11 +12,16 @@ import { defineMessages, injectIntl } from 'react-intl';
 import type { $npm$ReactIntl$IntlShape } from 'react-intl';
 import globalMessages from '../../../../i18n/global-messages';
 import type { PoolData } from '../../../../containers/wallet/staking/SeizaFetcher';
+import RewardGraph from './RewardsGraph';
+import type { GraphData } from '../dashboard/StakingDashboard';
 
 type Props = {|
   delegatedPool: PoolData,
   +undelegate: void | (void => Promise<void>),
+  +epochLength: ?number,
+  +graphData: GraphData
 |};
+
 type Intl = {|
   intl: $npm$ReactIntl$IntlShape,
 |};
@@ -27,15 +32,40 @@ const messages = defineMessages({
     defaultMessage:
       '!!!The first reward to receive takes 3-4 epochs which is equal to 15-20 days, learn more.',
   },
+  epochAxisLabel: {
+    id: 'wallet.dashboard.graph.epochAxisLabel',
+    defaultMessage: '!!!Epoch ({epochLength} days)',
+  },
+  singleEpochAxisLabel: {
+    id: 'wallet.dashboard.graph.singleEpochAxisLabel',
+    defaultMessage: '!!!Epoch (1 day)',
+  },
 });
 
-function StakingTabs({ delegatedPool, undelegate, intl }: Props & Intl): Node {
+function StakingTabs({
+  delegatedPool,
+  epochLength,
+  undelegate,
+  intl,
+  graphData
+ }: Props & Intl): Node {
   const [value, setValue] = useState(0);
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
 
+  const getEpochLengthLabel: void => string = () => {
+    if (epochLength == null) {
+      return intl.formatMessage(globalMessages.epochLabel);
+    }
+
+    return epochLength === 1
+      ? intl.formatMessage(messages.singleEpochAxisLabel)
+      : intl.formatMessage(messages.epochAxisLabel, { epochLength });
+  }
+
+  const { hideYAxis, items } = graphData.rewardsGraphData
   const tabs = [
     {
       id: 0,
@@ -47,6 +77,16 @@ function StakingTabs({ delegatedPool, undelegate, intl }: Props & Intl): Node {
           <Box py="10px" borderBottom="1px solid var(--yoroi-palette-gray-200)">
             <DelegatedStakePoolCard delegatedPool={delegatedPool} undelegate={undelegate} />
           </Box>
+
+          <RewardGraph
+            epochTitle={intl.formatMessage(globalMessages.epochLabel)}
+            stakepoolNameTitle={intl.formatMessage(globalMessages.stakepoolNameLabel)}
+            xAxisLabel={getEpochLengthLabel()}
+            yAxisLabel={intl.formatMessage(globalMessages.rewardsLabel)}
+            primaryBarLabel={intl.formatMessage(globalMessages.rewardsLabel)}
+            data={items ? items.perEpochRewards : []}
+            hideYAxis={hideYAxis}
+          />
         </Box>
       ),
     },

packages/yoroi-extension/app/components/wallet/staking/dashboard/GraphWrapper.js

@@ -96,7 +96,7 @@ const GraphTabs: {|
 //   );
 // };
 
-const Graph: {|
+export const Graph: {|
   data: Array<GraphItems>,
   epochTitle: string,
   stakepoolNameTitle: string,