Pool Transition Api integration

packages/yoroi-extension/app/components/common/separator/Separator.js

@@ -2,8 +2,8 @@
 import { Box } from '@mui/material';
 
 type Props = {|
-  sx: any,
-|}
+  sx?: any,
+|};
 
 export default function Separator({ sx }: Props): React$Node {
   return <Box width="100%" height="1px" bgcolor="grayscale.200" sx={sx} />;

packages/yoroi-extension/app/components/transfer/SuccessPageRevamp.js

@@ -47,7 +47,7 @@ export class SuccessPageRevamp extends Component<Props> {
           closeInfo ? <DialogCloseButton onClose={closeInfo.onClose} isRevampLayout /> : undefined
         }
       >
-        <Box maxWidth="600px" outline="10px solid green">
+        <Box maxWidth="600px">
           <Box
             sx={{
               display: 'flex',
@@ -58,7 +58,13 @@ export class SuccessPageRevamp extends Component<Props> {
           >
             <SuccessImg />
           </Box>
-          <Typography component="div" variant="body1" color="grayscale.900" textAlign="left" mt="4px">
+          <Typography
+            component="div"
+            variant="body1"
+            color="grayscale.900"
+            textAlign="left"
+            mt="4px"
+          >
             {text}
           </Typography>
           {this.props.closeInfo == null && <LoadingSpinner />}

packages/yoroi-extension/app/components/wallet/staking/DelegationTxDialog.js

@@ -336,7 +336,8 @@ class DelegationTxDialog extends Component<Props & InjectedLayoutProps> {
             {intl.formatMessage(globalMessages.stakePoolHash)}
           </Typography>
           <Box>
-            <Typography component="div"
+            <Typography
+              component="div"
               variant="body1"
               sx={{ '& > div > p': { p: '2px 3px' }, px: '2px', ml: '-3px', mt: '-2px' }}
             >

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

@@ -9,51 +9,78 @@ import globalMessages from '../../../../i18n/global-messages';
 import { SocialMediaStakePool } from './StakePool/StakePool';
 import type { PoolData } from '../../../../containers/wallet/staking/SeizaFetcher';
 import { getAvatarFromPoolId } from '../utils';
+import { Alert } from '@mui/material';
+import { Stack } from '@mui/material';
+import type { PoolTransition } from '../../../../stores/toplevel/DelegationStore';
 
 type Props = {|
   delegatedPool: PoolData,
   +undelegate: void | (void => Promise<void>),
+  poolTransition?: PoolTransition,
+  delegateToSpecificPool: (id: ?string) => void,
 |};
 
 type Intl = {|
   intl: $npm$ReactIntl$IntlShape,
 |};
 
-function DelegatedStakePoolCard({ delegatedPool, undelegate, intl }: Props & Intl): Node {
+function DelegatedStakePoolCard({
+  delegatedPool,
+  undelegate,
+  intl,
+  poolTransition,
+  delegateToSpecificPool,
+}: Props & Intl): Node {
   const { id, name, ticker, poolSize, share, avatar, roa, socialLinks, websiteUrl } =
     delegatedPool || {};
   const avatarGenerated = getAvatarFromPoolId(id);
+  const renderDelegationBtn = () => {
+    if (poolTransition?.shouldShowTransitionFunnel) {
+      return (
+        <UpdatePoolButton
+          variant="danger"
+          onClick={() => delegateToSpecificPool(poolTransition.suggestedPool?.hash ?? '')}
+        >
+          {intl.formatMessage(globalMessages.updatePool)}
+        </UpdatePoolButton>
+      );
+    }
+
+    return (
+      <UndelegateButton
+        variant="text"
+        onClick={undelegate}
+        disabled={!undelegate}
+        sx={{
+          lineHeight: '21px',
+          '&.MuiButton-sizeMedium': {
+            height: 'unset',
+            p: '9px 15px',
+          },
+        }}
+      >
+        {intl.formatMessage(globalMessages.undelegateLabel)}
+      </UndelegateButton>
+    );
+  };
 
   return (
     <Card sx={{ border: '1px solid', borderColor: 'grayscale.200', bgcolor: 'background.card' }}>
+      <Stack direction="row" px={4} py={2} alignItems="center">
+        <Typography component="div" variant="h5" color="common.black" fontWeight={500}>
+          {intl.formatMessage(globalMessages.stakePoolDelegated)}
+        </Typography>
+        {renderDelegationBtn()}
+      </Stack>
       <Box
         sx={{
-          padding: '16px 9px 16px 24px',
           borderBottom: '1px solid',
           borderBottomColor: 'grayscale.200',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
         }}
-      >
-        <Typography component="div" variant="h5" color="common.black" fontWeight={500}>
-          {intl.formatMessage(globalMessages.stakePoolDelegated)}
-        </Typography>
-        <UndelegateButton
-          variant="text"
-          onClick={undelegate}
-          disabled={!undelegate}
-          sx={{
-            lineHeight: '21px',
-            '&.MuiButton-sizeMedium': {
-              height: 'unset',
-              p: '9px 15px',
-            },
-          }}
-        >
-          {intl.formatMessage(globalMessages.undelegateLabel)}
-        </UndelegateButton>
-      </Box>
+      ></Box>
       <Wrapper sx={{ paddingBottom: 0 }}>
         <AvatarWrapper>
           {avatar != null ? (
@@ -63,7 +90,13 @@ function DelegatedStakePoolCard({ delegatedPool, undelegate, intl }: Props & Int
           )}
         </AvatarWrapper>
         <Box marginLeft="16px" sx={{ display: 'flex', alignItems: 'flex-start', gap: '10px' }}>
-          <Typography component="div" color="grayscale.max" variant="body1" fontWeight="medium" mb="3px">
+          <Typography
+            component="div"
+            color="grayscale.max"
+            variant="body1"
+            fontWeight="medium"
+            mb="3px"
+          >
             {ticker !== undefined ? `[${ticker}]` : ''} {name}
           </Typography>
           <SocialMediaStakePool
@@ -73,10 +106,11 @@ function DelegatedStakePoolCard({ delegatedPool, undelegate, intl }: Props & Int
           />
         </Box>
       </Wrapper>
-      <Wrapper justifyContent="space-between" sx={{ paddingBottom: 0 }}>
+      <Wrapper justifyContent="space-between" sx={{ paddingBottom: '25px' }}>
         {roa != null ? (
           <Box sx={{ display: 'flex', flexFlow: 'column' }}>
-            <Typography component="div"
+            <Typography
+              component="div"
               variant="caption1"
               color="grayscale.500"
               sx={{ textTransform: 'uppercase' }}
@@ -90,7 +124,8 @@ function DelegatedStakePoolCard({ delegatedPool, undelegate, intl }: Props & Int
         ) : null}
         {poolSize != null && (
           <Box sx={{ display: 'flex', flexFlow: 'column' }}>
-            <Typography component="div"
+            <Typography
+              component="div"
               variant="caption1"
               color="grayscale.500"
               sx={{ textTransform: 'uppercase' }}
@@ -104,7 +139,8 @@ function DelegatedStakePoolCard({ delegatedPool, undelegate, intl }: Props & Int
         )}
         {share != null && (
           <Box sx={{ display: 'flex', flexFlow: 'column' }}>
-            <Typography component="div"
+            <Typography
+              component="div"
               variant="caption1"
               color="grayscale.500"
               sx={{ textTransform: 'uppercase' }}
@@ -117,16 +153,38 @@ function DelegatedStakePoolCard({ delegatedPool, undelegate, intl }: Props & Int
           </Box>
         )}
       </Wrapper>
+      {poolTransition?.shouldShowTransitionFunnel && (
+        <SAlert severity="error">
+          <Typography variant="body2" mt="1px" ml="4px" color="grayscale.900">
+            {intl.formatMessage(globalMessages.poolNotGenerating)}
+          </Typography>
+        </SAlert>
+      )}
     </Card>
   );
 }
 export default (injectIntl(observer(DelegatedStakePoolCard)): ComponentType<Props>);
 
 const Card = styled(Box)({
   borderRadius: '8px',
-  flex: '1 1 100%',
   display: 'flex',
   flexDirection: 'column',
+  justifyContent: 'flex-end',
+});
+
+const SAlert = styled(Alert)({
+  width: '100%',
+  justifyContent: 'center',
+  backgroundColor: 'magenta.100',
+  borderTopLeftRadius: '0px',
+  borderTopRightRadius: '0px',
+  height: '40px',
+  padding: 0,
+  '& .MuiAlert-icon': {
+    color: 'magenta.500',
+    fontSize: '26px',
+    margin: '0',
+  },
 });
 
 const Wrapper: any = styled(Box)({
@@ -152,3 +210,18 @@ const UndelegateButton: any = styled(Button)({
   width: 'unset',
   marginLeft: 'auto',
 });
+const UpdatePoolButton: any = styled(Button)(({ theme }) => ({
+  minWidth: 'auto',
+  width: 'unset',
+  marginLeft: 'auto',
+  background: theme.palette.magenta['500'],
+  color: 'white',
+  height: '40px',
+  width: '140px',
+  padding: '0px !important',
+  fontSize: '14px',
+  '&:hover': {
+    backgroundColor: theme.palette.magenta['500'],
+    color: 'white',
+  },
+}));

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

@@ -41,7 +41,9 @@ export const RewardHistoryItem = ({
       <AccordionSummary aria-controls={poolId + '-content'} id={poolId + '-header'}>
         <Box>
           <Box display="block">
-            <Typography component="div" color="var(--yoroi-palette-gray-600)">Stake Pool</Typography>
+            <Typography component="div" color="var(--yoroi-palette-gray-600)">
+              Stake Pool
+            </Typography>
           </Box>
           <Box display="flex">
             <AvatarWrapper>
@@ -159,11 +161,7 @@ function RewardHistoryGraph({
   const rewardList = rewardsGraphData.items?.perEpochRewards;
   const title = intl.formatMessage(globalMessages.rewardHistory);
   return (
-    <Box
-      p="24px"
-      pt="4px"
-      sx={{ display: 'flex', flexFlow: 'column', justifyContent: 'space-between' }}
-    >
+    <Box p="24px" sx={{ display: 'flex', flexFlow: 'column', justifyContent: 'space-between' }}>
       <Box
         sx={{
           display: 'flex',