Staking Revamp

packages/yoroi-extension/app/Routes.js

@@ -204,9 +204,7 @@ export const YoroiRoutes = (stores: StoresMap): Node => {
           <Route element={<DappCenterSubpages stores={stores} />}>
             <Route path={ROUTES.DAPP_CONNECTOR.DAPP_CENTER} element={<DappCenterPage stores={stores} />} />
           </Route>
-          <Route element={<StakingSubpages stores={stores} />}>
-            <Route path={ROUTES.STAKING_REVAMP.ROOT} element={<StakingPageRevamp stores={stores} />} />
-          </Route>
+
           <Route element={<WalletsSubpages stores={stores} />}>
             <Route path={ROUTES.WALLETS.TRANSACTIONS} element={<WalletSummaryPage stores={stores} />} />
             <Route path={ROUTES.WALLETS.SEND} element={<WalletSendPage stores={stores} />} />
@@ -256,6 +254,9 @@ export const YoroiRoutes = (stores: StoresMap): Node => {
             <Route path={ROUTES.GOVERNANCE.ROOT} element={<GovernanceStatusPage stores={stores} />} />
             <Route path={ROUTES.GOVERNANCE.OPTIONS} element={<GovernanceOptionsPage stores={stores} />} />
           </Route>
+          <Route element={<StakingSubpages stores={stores} />}>
+            <Route path={ROUTES.STAKING_REVAMP.ROOT} element={<StakingPageRevamp stores={stores} />} />
+          </Route>
           <Route element={<PortfolioSubpages stores={stores} />}>
             <Route path={ROUTES.PORTFOLIO.ROOT} element={<PortfolioPage stores={stores} />} />
             <Route path={ROUTES.PORTFOLIO.DAPPS} element={<PortfolioDappsPage stores={stores} />} />

packages/yoroi-extension/app/UI/features/staking/StakingRoot.tsx

@@ -1,12 +1,49 @@
-import { Stack } from '@mui/material';
+import { Box, Stack, styled } from '@mui/material';
 import { PoolList } from './useCases/PoolList/PoolList';
 import { RewardsSummaryCard } from './useCases/RewardsSummary/RewardsSummaryCard';
+import { StakePoolDelegated } from './useCases/DelegatedStakePoolInfo/StakePoolDelegated';
+import EpochProgress from './useCases/EpochProgress/EpochProgress';
+import { LegacyDialogs } from './useCases/LegacyDialogs/LegacyDialogs.tsx';
+import { useStaking } from './module/StakingContextProvider';
+import BuySellDialog from '../../../components/buySell/BuySellDialog';
+import WalletEmptyBanner from './common/components/EmptyWalletBanner';
 
 export const StakingRoot = () => {
+  const { isWalletWithNoFunds, selectedWallet, legacyUIDialogs, currentlyDelegating } = useStaking();
+
   return (
     <Stack>
-      <RewardsSummaryCard />
+      {isWalletWithNoFunds ? (
+        <WalletEmptyBanner
+          onBuySellClick={() => legacyUIDialogs.open({ dialog: BuySellDialog })}
+          isTestnet={selectedWallet.isTestnet}
+        />
+      ) : null}
+      {currentlyDelegating && (
+        <WrapperCards>
+          <RewardsSummaryCard />
+          <RightCardsWrapper>
+            <StakePoolDelegated />
+            <EpochProgress />
+          </RightCardsWrapper>
+        </WrapperCards>
+      )}
       <PoolList />
+      <LegacyDialogs />
     </Stack>
   );
 };
+
+const WrapperCards = styled(Box)({
+  display: 'flex',
+  gap: '24px',
+  justifyContent: 'space-between',
+  marginBottom: '24px',
+});
+
+const RightCardsWrapper = styled(Box)({
+  display: 'flex',
+  width: '100%',
+  flexDirection: 'column',
+  gap: '24px',
+});

packages/yoroi-extension/app/UI/features/staking/common/components/EmptyWalletBanner.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Box } from '@mui/system';
+import { Button, Stack, Typography } from '@mui/material';
+import { ReactComponent as CoverBg } from './wallet-empty-banner.inline.svg';
+import { captureEvent } from '../../../../../../posthog';
+import { TESTNET_FAUCET } from '../constants';
+import { useStrings } from '../hooks/useStrings';
+
+export type WalletEmptyBannerProps = {
+  onBuySellClick: () => void;
+  isTestnet: boolean;
+};
+
+const WalletEmptyBanner: React.FC<WalletEmptyBannerProps> = ({ isTestnet, onBuySellClick }) => {
+  const strings = useStrings();
+
+  const handleClick = () => {
+    if (isTestnet) {
+      window.open(TESTNET_FAUCET, '_blank');
+    } else {
+      onBuySellClick();
+    }
+
+    captureEvent('Wallet Page Exchange Clicked');
+  };
+
+  return (
+    <Box>
+      <Box
+        sx={{
+          background: theme => theme.palette.ds.bg_gradient_1,
+          marginBottom: '40px',
+          borderRadius: '8px',
+          overflowY: 'hidden',
+          position: 'relative',
+          padding: '16px',
+          height: 'auto',
+        }}
+        id="wallet|staking-emptyWalletBanner-box"
+      >
+        <Box sx={{ position: 'absolute', right: '1%', top: 'auto', bottom: '-3px' }}>
+          <CoverBg />
+        </Box>
+
+        <Box>
+          <Typography component="div" variant="h3" color="ds.gray_max" fontWeight={500} fontSize="18px" mb="8px">
+            {isTestnet ? strings.welcomeMessageTestnet : strings.welcomeMessage}
+          </Typography>
+
+          <Typography component="div" variant="body1" color="ds.gray_max" mb="24px">
+            {isTestnet ? strings.welcomeMessageSubtitleTestnet : strings.welcomeMessageSubtitle}
+            {isTestnet ? (
+              <>
+                <br />
+                {strings.welcomeMessageSubtitleTestnetExtra}
+              </>
+            ) : null}
+          </Typography>
+        </Box>
+
+        <Stack direction="row" gap="16px">
+          <Button
+            variant="contained"
+            color="primary"
+            size="medium"
+            sx={{
+              '&.MuiButton-sizeMedium': {
+                padding: '9px 20px',
+                height: 'unset',
+              },
+            }}
+            onClick={handleClick}
+          >
+            <Typography component="div" variant="button" fontWeight={500} sx={{ lineHeight: '19px' }}>
+              {isTestnet ? strings.goToFaucetButton : strings.buyAda}
+            </Typography>
+          </Button>
+        </Stack>
+      </Box>
+    </Box>
+  );
+};
+
+export default WalletEmptyBanner;

packages/yoroi-extension/app/UI/features/staking/common/constants.ts

@@ -0,0 +1 @@
+export const TESTNET_FAUCET = 'https://docs.cardano.org/cardano-testnets/tools/faucet';

packages/yoroi-extension/app/UI/features/staking/common/hooks/useStrings.ts

@@ -48,6 +48,74 @@ export const messages = Object.freeze(
       id: 'global.labels.error',
       defaultMessage: '!!!Error',
     },
+    stakePoolDelegated: {
+      id: 'wallet.dashboard.upcomingRewards.stakePoolDelegated',
+      defaultMessage: '!!!Stake Pool Delegated',
+    },
+    roa30dLabel: {
+      id: 'wallet.staking.banner.roa30d',
+      defaultMessage: '!!!ROA 30d',
+    },
+    poolSizeLabel: {
+      id: 'wallet.staking.pool.size',
+      defaultMessage: '!!!Pool size',
+    },
+    poolSaturation: {
+      id: 'wallet.staking.pool.saturation',
+      defaultMessage: '!!!Saturation',
+    },
+    updatePoolLabel: {
+      id: 'global.updatePool',
+      defaultMessage: '!!!  UPDATE POOL',
+    },
+    undelegatePool: {
+      id: 'transaction.review.undelegatePool',
+      defaultMessage: '!!!Unstake entire wallet balance from',
+    },
+    undelegateLabel: {
+      id: 'global.labael.undelegate',
+      defaultMessage: '!!!Undelegate',
+    },
+    deregisteringStakingKey: {
+      id: 'transaction.review.deregisteringStakingKey',
+      defaultMessage: '!!!Undelegating from the pool',
+    },
+    epochProgress: {
+      id: 'wallet.staking.epochProgress',
+      defaultMessage: '!!!Epoch Progress',
+    },
+    welcomeMessage: {
+      id: 'wallet.emptyWalletMessage',
+      defaultMessage: '!!!Your wallet is empty',
+    },
+    welcomeMessageSubtitle: {
+      id: 'wallet.emptyWalletMessageSubtitle',
+      defaultMessage: '!!!Top up your wallet safely using our trusted partners',
+    },
+    welcomeMessageTestnet: {
+      id: 'wallet.emptyWalletMessage.testnet',
+      defaultMessage: '!!!Learn Cardano with test ADA ⭐',
+    },
+    welcomeMessageSubtitleTestnet: {
+      id: 'wallet.emptyWalletMessageSubtitle.testnet',
+      defaultMessage: '!!!Stake your test ADA by participating in our testnet staking program.',
+    },
+    welcomeMessageSubtitleTestnetExtra: {
+      id: 'wallet.emptyWalletMessageSubtitle.testnetExtra',
+      defaultMessage: "!!!Get your TADA. It's your key to testing a new world of possibilities.",
+    },
+    goToFaucetButton: {
+      id: 'wallet.emptyWalletMessage.goToFaucet',
+      defaultMessage: '!!!ADD TEST ADA',
+    },
+    buyAda: {
+      id: 'button.buyAda',
+      defaultMessage: '!!!Buy ADA',
+    },
+    stakePoolLabel: {
+      id: 'wallet.delegation.transaction.stakePoolLabel',
+      defaultMessage: '!!!Stake pool',
+    },
   })
 );
 
@@ -65,5 +133,22 @@ export const useStrings = () => {
     rewardValue: intl.formatMessage(messages.rewardValue),
     rewardsLabel: intl.formatMessage(messages.rewardsLabel),
     errorLabel: intl.formatMessage(messages.errorLabel),
+    stakePoolDelegated: intl.formatMessage(messages.stakePoolDelegated),
+    roa30dLabel: intl.formatMessage(messages.roa30dLabel),
+    poolSizeLabel: intl.formatMessage(messages.poolSizeLabel),
+    poolSaturation: intl.formatMessage(messages.poolSaturation),
+    updatePoolLabel: intl.formatMessage(messages.updatePoolLabel),
+    undelegatePool: intl.formatMessage(messages.undelegatePool),
+    undelegateLabel: intl.formatMessage(messages.undelegateLabel),
+    deregisteringStakingKey: intl.formatMessage(messages.deregisteringStakingKey),
+    epochProgress: intl.formatMessage(messages.epochProgress),
+    welcomeMessage: intl.formatMessage(messages.welcomeMessage),
+    welcomeMessageSubtitle: intl.formatMessage(messages.welcomeMessageSubtitle),
+    welcomeMessageTestnet: intl.formatMessage(messages.welcomeMessageTestnet),
+    welcomeMessageSubtitleTestnet: intl.formatMessage(messages.welcomeMessageSubtitleTestnet),
+    welcomeMessageSubtitleTestnetExtra: intl.formatMessage(messages.welcomeMessageSubtitleTestnetExtra),
+    goToFaucetButton: intl.formatMessage(messages.goToFaucetButton),
+    buyAda: intl.formatMessage(messages.buyAda),
+    stakePoolLabel: intl.formatMessage(messages.stakePoolLabel),
   }).current;
 };

packages/yoroi-extension/app/UI/features/staking/common/types/index.ts

@@ -1,4 +1,4 @@
-// Define types
+import type { ExplorerPoolInfo as PoolInfo } from '@emurgo/yoroi-lib';
 export type StakingActions = {};
 
 // Define state type
@@ -13,6 +13,13 @@ export type StakingState = {
   historyGraphData: GraphData | null;
   primaryTokenInfo: any;
   toUnitOfAccount: (entry: any) => void | { currency: string; amount: string };
+  defaultDelegatedAsset: any;
+  selectedWallet: any;
+  delegationStore: any;
+  legacyUIDialogs: any;
+  delegationRequests: any;
+  isWalletWithNoFunds: boolean;
+  currentlyDelegating: boolean;
 };
 
 export interface GraphItems {
@@ -33,3 +40,35 @@ export interface RewardsGraphData {
 export interface GraphData {
   readonly rewardsGraphData: RewardsGraphData;
 }
+
+export interface SocialLinks {
+  tw?: string;
+  fb?: string;
+  gh?: string;
+  tc?: string;
+  tg?: string;
+  di?: string;
+  yt?: string;
+  web?: string;
+  icon?: string;
+}
+
+export interface PoolData {
+  id: string;
+  name: string;
+  ticker?: string;
+  avatar?: string | null;
+  roa?: string | null;
+  poolSize?: string | null;
+  share?: string | null;
+  websiteUrl?: string;
+  socialLinks?: SocialLinks;
+}
+
+export interface PoolTransition {
+  currentPool?: PoolInfo | null;
+  deadlineMilliseconds?: number | null;
+  shouldShowTransitionFunnel: boolean;
+  suggestedPool?: PoolInfo | null;
+  deadlinePassed: boolean;
+}

packages/yoroi-extension/app/UI/features/staking/module/state.ts

@@ -12,6 +12,13 @@ export const defaultStakingState: StakingState = {
   historyGraphData: null,
   primaryTokenInfo: null,
   toUnitOfAccount: () => ({ currency: '', amount: '' }),
+  defaultDelegatedAsset: null,
+  selectedWallet: null,
+  delegationStore: null,
+  legacyUIDialogs: null,
+  delegationRequests: null,
+  isWalletWithNoFunds: false,
+  currentlyDelegating: false,
 };
 
 // Define action handlers