Pat/revamp stacking page

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

@@ -2,13 +2,13 @@
 import type { ComponentType, Node } from 'react';
 import { Box, styled } from '@mui/system';
 import { Button, Typography } from '@mui/material';
-import { toSvg } from 'jdenticon';
 import { injectIntl } from 'react-intl';
 import { observer } from 'mobx-react';
 import type { $npm$ReactIntl$IntlShape } from 'react-intl';
 import globalMessages from '../../../../i18n/global-messages';
-import { HelperTooltip, SocialMediaStakePool } from './StakePool/StakePool';
+import { SocialMediaStakePool } from './StakePool/StakePool';
 import type { PoolData } from '../../../../containers/wallet/staking/SeizaFetcher';
+import { getAvatarFromPoolId } from '../utils';
 
 type Props = {|
   delegatedPool: PoolData,
@@ -20,57 +20,102 @@ type Intl = {|
 |};
 
 function DelegatedStakePoolCard({ delegatedPool, undelegate, intl }: Props & Intl): Node {
-  const { id, name, ticker, avatar, roa, socialLinks, websiteUrl } = delegatedPool || {};
-  const avatarSource = toSvg(id, 36, { padding: 0 });
-  const avatarGenerated = `data:image/svg+xml;utf8,${encodeURIComponent(avatarSource)}`;
+  const { id, name, ticker, poolSize, share, avatar, roa, socialLinks, websiteUrl } =
+    delegatedPool || {};
+  const avatarGenerated = getAvatarFromPoolId(id);
 
   return (
-    <Wrapper>
-      <AvatarWrapper>
-        {avatar != null ? (
-          <AvatarImg src={avatar} alt="stake pool logo" />
-        ) : (
-          <AvatarImg src={avatarGenerated} alt="stake pool logo" />
-        )}
-      </AvatarWrapper>
-      <Box width="180px" overflow="hidden" paddingLeft="4px">
-        <Typography color="var(--yoroi-palette-gray-900)" variant="body1" mb="3px">
-          [{ticker}] {name}
+    <Card>
+      <Box
+        sx={{
+          padding: '15px 24px',
+          borderBottom: '1px solid var(--yoroi-palette-gray-200)',
+        }}
+      >
+        <Typography variant="h5" color="var(--yoroi-palette-gray-900)">
+          {intl.formatMessage(globalMessages.stakePoolDelegated)}
         </Typography>
-        <SocialMediaStakePool
-          color="var(--yoroi-palette-gray-600)"
-          websiteUrl={websiteUrl}
-          socialLinks={socialLinks}
-        />
       </Box>
-      <Box display="flex" alignItems="center" flex="1">
-        {roa !== undefined && (
-          <>
-            <Typography variant="body1" color="var(--yoroi-palette-gray-600)">
+      <Wrapper sx={{ paddingBottom: 0 }}>
+        <AvatarWrapper>
+          {avatar != null ? (
+            <AvatarImg src={avatar} alt="stake pool logo" />
+          ) : (
+            <AvatarImg src={avatarGenerated} alt="stake pool logo" />
+          )}
+        </AvatarWrapper>
+        <Box marginLeft="16px" sx={{ display: 'flex', alignItems: 'flex-start', gap: '10px' }}>
+          <Typography color="black" variant="body1" fontWeight="medium" mb="3px">
+            {ticker !== undefined ? `[${ticker}]` : ''} {name}
+          </Typography>
+          <SocialMediaStakePool
+            color="var(--yoroi-palette-gray-500)"
+            websiteUrl={websiteUrl}
+            socialLinks={socialLinks}
+          />
+        </Box>
+      </Wrapper>
+      <Wrapper justifyContent="space-between" sx={{ paddingBottom: 0 }}>
+        {roa != null ? (
+          <Box sx={{ display: 'flex', flexFlow: 'column' }}>
+            <Typography variant="caption" fontWeight="500" color="var(--yoroi-palette-gray-500)">
               {intl.formatMessage(globalMessages.roa30d)}
-              <Typography ml="8px" as="span" color="var(--yoroi-palette-gray-900)">
-                {roa}
-              </Typography>
             </Typography>
-            <HelperTooltip message={intl.formatMessage(globalMessages.roaHelperMessage)} />
-          </>
+            <Typography as="span" color="black" variant="h2">
+              {roa} %
+            </Typography>
+          </Box>
+        ) : null}
+        {poolSize != null && (
+          <Box sx={{ display: 'flex', flexFlow: 'column' }}>
+            <Typography variant="caption" fontWeight="500" color="var(--yoroi-palette-gray-500)">
+              Pool Size
+            </Typography>
+            <Typography as="span" color="black" variant="h2">
+              {poolSize}
+            </Typography>
+          </Box>
         )}
-      </Box>
+        {share != null && (
+          <Box sx={{ display: 'flex', flexFlow: 'column' }}>
+            <Typography variant="caption" fontWeight="500" color="var(--yoroi-palette-gray-500)">
+              Share
+            </Typography>
+            <Typography as="span" color="black" variant="h2">
+              {share} %
+            </Typography>
+          </Box>
+        )}
+      </Wrapper>
       {undelegate && (
-        <UndelegateButton color="secondary" onClick={undelegate}>
-          {intl.formatMessage(globalMessages.undelegateLabel)}
-        </UndelegateButton>
+        <Wrapper>
+          <UndelegateButton
+            sx={{ border: '2px solid #17D1AA', width: '50%' }}
+            color="secondary"
+            onClick={undelegate}
+          >
+            {intl.formatMessage(globalMessages.undelegateLabel)}
+          </UndelegateButton>
+        </Wrapper>
       )}
-    </Wrapper>
+    </Card>
   );
 }
 export default (injectIntl(observer(DelegatedStakePoolCard)): ComponentType<Props>);
 
+const Card = styled(Box)({
+  backgroundColor: 'var(--yoroi-palette-common-white)',
+  borderRadius: '8px',
+  flex: '1 1 100%',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
 const Wrapper: any = styled(Box)({
   display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'flex-start',
+  padding: 24,
 });
+
 const AvatarWrapper: any = styled(Box)({
   width: '40px',
   height: '40px',

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

@@ -0,0 +1,59 @@
+// @flow
+import type { ComponentType, Node } from 'react';
+import { Box, styled } from '@mui/system';
+import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { injectIntl } from 'react-intl';
+import type { $npm$ReactIntl$IntlShape } from 'react-intl';
+import globalMessages from '../../../../i18n/global-messages';
+import { EpochProgressCard } from './EpochProgressCard';
+import moment from 'moment';
+
+type Props = {|
+  epochProgress: {|
+    currentEpoch: number,
+    startEpochDate: string,
+    endEpochDate: string,
+    percentage: number,
+  |},
+|};
+
+type Intl = {|
+  intl: $npm$ReactIntl$IntlShape,
+|};
+
+function EpochProgressWrapper({ epochProgress, intl }: Props & Intl): Node {
+  return (
+    <Card>
+      <Box
+        sx={{
+          padding: '15px 24px',
+          borderBottom: '1px solid var(--yoroi-palette-gray-200)',
+        }}
+      >
+        <Typography variant="h5" color="var(--yoroi-palette-gray-900)">
+          {intl.formatMessage(globalMessages.epochProgress)}
+        </Typography>
+      </Box>
+      <Box sx={{ padding: '24px' }}>
+        <EpochProgressCard
+          percentage={epochProgress.percentage}
+          days={moment(epochProgress.endEpochDate).diff(moment(), 'days')}
+          currentEpoch={epochProgress.currentEpoch}
+          startEpochDate={epochProgress.startEpochDate}
+          endEpochDate={epochProgress.endEpochDate}
+        />
+      </Box>
+    </Card>
+  );
+}
+
+export default (injectIntl(observer(EpochProgressWrapper)): ComponentType<Props>);
+
+const Card = styled(Box)({
+  backgroundColor: 'var(--yoroi-palette-common-white)',
+  borderRadius: '8px',
+  flex: '1 1 100%',
+  display: 'flex',
+  flexDirection: 'column',
+});

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

@@ -0,0 +1,141 @@
+// @flow
+import { Component } from 'react';
+import type { Node } from 'react';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
+import { Box } from '@mui/system';
+import type { GraphItems } from '../dashboard/GraphWrapper';
+
+const graphVars = {
+  barWidth: 10,
+  fontSize: '14px',
+  lineHeight: 16,
+};
+
+type Props = {|
+  data: Array<GraphItems>,
+  epochTitle: string,
+  stakepoolNameTitle: string,
+  xAxisLabel: string,
+  yAxisLabel: string,
+  primaryBarLabel: string,
+  hideYAxis: boolean,
+|};
+
+export default class RewardGraphClean 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: '#242838',
+              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 (
+      <ResponsiveContainer width="100%" height={210}>
+        <BarChart
+          data={data.slice(-10)}
+          height={200}
+          margin={{ top: 0, right: 0, left: 30, bottom: 0 }}
+        >
+          <XAxis
+            tick={{
+              fill: '#6B7384',
+              fontSize: graphVars.fontSize,
+              lineHeight: graphVars.lineHeight,
+            }}
+            dataKey="name"
+            height={50}
+            label={{
+              value: xAxisLabel,
+              position: 'insideBottom',
+              fontSize: graphVars.fontSize,
+              fill: '#6B7384',
+            }}
+            padding={{ left: 24, right: 24 }}
+            stroke="#DCE0E9"
+            tickLine={false}
+          />
+          <YAxis
+            tickFormatter={formatYAxis}
+            padding={{ top: 12 }}
+            tick={{
+              fill: '#6B7384',
+              fontSize: graphVars.fontSize,
+              lineHeight: graphVars.lineHeight,
+            }}
+            stroke="#DCE0E9"
+            tickLine={false}
+            label={{
+              value: yAxisLabel,
+              position: 'insideLeft',
+              offset: -20,
+              dy: 50,
+              angle: -90,
+              fill: '#6B7384',
+              textAnchor: 'middle',
+            }}
+          />
+
+          <Tooltip content={graphTooltip} cursor={false} />
+
+          <Bar
+            name={primaryBarLabel}
+            maxBarSize={graphVars.barWidth}
+            radius={[4, 4, 0, 0]}
+            dataKey="primary"
+            stackId="a"
+            fill="#3154CB"
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    );
+  }
+}