Governance Revamp UI fixes

packages/yoroi-extension/app/App.js

@@ -64,7 +64,7 @@ function RoutingHelper(props: Props) {
       captureEvent('Staking Center Page Viewed');
     } else if (pathname === ROUTES.WALLETS.ROOT) {
       captureEvent('Transactions Page Viewed');
-    } else if (pathname === ROUTES.Governance.ROOT) {
+    } else if (pathname === ROUTES.GOVERNANCE.ROOT) {
       captureEvent('Governance Dashboard Page Viewed');
     } else if (pathname === ROUTES.PORTFOLIO.ROOT) {
       captureEvent('Portfolio Dashboard Page Viewed');

packages/yoroi-extension/app/Routes.js

@@ -45,18 +45,10 @@ import { CatalystRegistrationContextProvider } from './UI/features/catalyst-regi
 // $FlowIgnore: suppressing this error
 import { DappCenterContextProvider } from './UI/features/dapp-center/module/DappCenterContextProvider';
 // $FlowIgnore: suppressing this error
-import GovernanceDelegationFormPage from './UI/pages/Governance/GovernanceDelegationFormPage';
-// $FlowIgnore: suppressing this error
-import GovernanceRevampStatusPage from './UI/pages/Governance-Revamp/GovernanceRevampStatusPage';
-// $FlowIgnore: suppressing this error
-import GovernanceOptionsPage from './UI/pages/Governance-Revamp/GovernanceOptionsPage';
+import GovernanceOptionsPage from './UI/pages/Governance/GovernanceOptionsPage';
 // $FlowIgnore: suppressing this error
 import GovernanceStatusPage from './UI/pages/Governance/GovernanceStatusPage';
 // $FlowIgnore: suppressing this error
-import GovernanceTransactionFailedPage from './UI/pages/Governance/GovernanceTransactionFailedPage';
-// $FlowIgnore: suppressing this error
-import GovernanceTransactionSubmittedPage from './UI/pages/Governance/GovernanceTransactionSubmittedPage';
-// $FlowIgnore: suppressing this error
 import PortfolioDappsPage from './UI/pages/portfolio/PortfolioDappsPage';
 // $FlowIgnore: suppressing this error
 import NftsPage from './UI/pages/nfts/NftsPage';
@@ -254,14 +246,8 @@ export const YoroiRoutes = (stores: StoresMap): Node => {
           </Route>
 
           <Route element={<GovernanceSubpages stores={stores} />}>
-            <Route path={ROUTES.Governance.ROOT} element={<GovernanceStatusPage stores={stores} />} />
-            <Route path={ROUTES.Governance.DELEGATE} element={<GovernanceDelegationFormPage stores={stores} />} />
-            <Route path={ROUTES.Governance.SUBMITTED} element={<GovernanceTransactionSubmittedPage stores={stores} />} />
-            <Route path={ROUTES.Governance.FAIL} element={<GovernanceTransactionFailedPage stores={stores} />} />
-          </Route>
-          <Route element={<GovernanceRevampSubpages stores={stores} />}>
-            <Route path={ROUTES.GOVERNANCE_REVAMP.ROOT} element={<GovernanceRevampStatusPage stores={stores} />} />
-            <Route path={ROUTES.GOVERNANCE_REVAMP.OPTIONS} element={<GovernanceOptionsPage stores={stores} />} />
+            <Route path={ROUTES.GOVERNANCE.ROOT} element={<GovernanceStatusPage stores={stores} />} />
+            <Route path={ROUTES.GOVERNANCE.OPTIONS} element={<GovernanceOptionsPage stores={stores} />} />
           </Route>
           <Route element={<PortfolioSubpages stores={stores} />}>
             <Route path={ROUTES.PORTFOLIO.ROOT} element={<PortfolioPage stores={stores} />} />
@@ -383,7 +369,6 @@ const CatalystRegistrationSubpages = ({ stores }) => (
   </CatalystRegistrationContextProvider>
 );
 
-// NEW UI - TODO: to be refactred
 const GovernanceSubpages = ({ stores }) => {
   const { unitOfAccount } = stores.profile;
   const currentWalletInfo = createCurrrentWalletInfo(stores);
@@ -410,30 +395,3 @@ const GovernanceSubpages = ({ stores }) => {
     </CurrencyProvider>
   );
 };
-
-const GovernanceRevampSubpages = ({ stores }) => {
-  const { unitOfAccount } = stores.profile;
-  const currentWalletInfo = createCurrrentWalletInfo(stores);
-  const { delegationTransaction } = stores.substores.ada;
-  const delegationTxResult = delegationTransaction.createDelegationTx.result;
-  const delegationTxError = delegationTransaction.createDelegationTx.error;
-
-  return (
-    <CurrencyProvider currency={unitOfAccount.currency || 'USD'}>
-      <GovernanceContextProvider
-        currentWallet={currentWalletInfo}
-        createDrepDelegationTransaction={request => stores.delegation.createDrepDelegationTransaction(request)}
-        signDelegationTransaction={request => stores.substores.ada.delegationTransaction.signTransaction(request)}
-        txDelegationResult={delegationTxResult}
-        txDelegationError={delegationTxError}
-        tokenInfo={stores.tokenInfoStore.tokenInfo}
-        triggerBuySellAdaDialog={() => stores.uiDialogs.open({ dialog: BuySellDialog })}
-        getCurrentPrice={stores.coinPriceStore.getCurrentPrice}
-      >
-        <Suspense fallback={null}>
-          <Outlet />
-        </Suspense>
-      </GovernanceContextProvider>
-    </CurrencyProvider>
-  );
-};

packages/yoroi-extension/app/UI/components/DrepPromotionBanner/DrepPromotionBanner.tsx

@@ -127,7 +127,7 @@ export const DrepPromotionBanner = observer(({ stores, onClose, intl }) => {
           }}
           onClick={() => {
             stores.routing.goToRoute({
-              route: ROUTES.Governance.ROOT,
+              route: ROUTES.GOVERNANCE.ROOT,
               query: { delegateToYoroiDrep: true },
             });
           }}

packages/yoroi-extension/app/UI/features/governace/common/SkeletonCardLoaders.tsx

@@ -0,0 +1,77 @@
+import { Box, Skeleton, Stack } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const StyledCard: any = styled(Stack)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: '0px',
+  gap: '24px',
+  width: '612px',
+  margin: '0 auto',
+  marginTop: '24px',
+}));
+
+const CardsRow = styled(Box)(() => ({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  padding: '0px',
+  gap: '24px',
+}));
+
+export const StatusSkeletonScreen = () => {
+  return (
+    <StyledCard>
+      <Stack direction={'column'} alignItems="center">
+        <Skeleton width={'200px'} variant="text" height="26px" />
+        <Skeleton width={'400px'} variant="text" height="26px" />
+        <Skeleton width={'300px'} variant="text" height="26px" />
+      </Stack>
+      <Stack direction={'column'} alignItems="center" gap={16}>
+        <Skeleton
+          animation="wave"
+          variant="rounded"
+          width={612}
+          height={294}
+          sx={{ marginBottom: '22px', backgroundColor: 'ds.gray_100' }}
+        />
+        <Skeleton
+          animation="wave"
+          variant="rounded"
+          width={612}
+          height={82}
+          sx={{ marginBottom: '12px', backgroundColor: 'ds.gray_100' }}
+        />
+      </Stack>
+    </StyledCard>
+  );
+};
+
+export const OptionsSkeletonScreen = () => {
+  return (
+    <CardsRow>
+      {[...Array(4)].map((_, idx) => (
+        <Stack
+          width={294}
+          height={320}
+          key={idx}
+          sx={{ border: '1px solid', borderColor: 'ds.gray_200', borderRadius: '8px', padding: '16px', boxSizing: 'border-box' }}
+        >
+          <Stack direction="column" justifyContent={'space-between'} height={'100%'}>
+            <Stack direction={'column'}>
+              <Stack direction="row" spacing={2} alignItems={'center'}>
+                <Skeleton variant="circular" height={48} width={48} />
+                <Skeleton variant="text" height={26} width={200} />
+              </Stack>
+
+              <Skeleton variant="text" height={146} width={260} />
+            </Stack>
+
+            <Skeleton variant="rounded" height={40} width={260} />
+          </Stack>
+        </Stack>
+      ))}
+    </CardsRow>
+  );
+};

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

@@ -10,6 +10,7 @@ export const YOROI_VOTING_RECORD_LINK =
 export const FIND_DREPS_LINK = 'https://beta.cexplorer.io/drep?tab=list';
 export const FIND_DREPS_LINK_TESTNET = 'https://preprod.cexplorer.io/drep?tab=list';
 export const YOROI_DREP_ID = 'drep1ygr9tuapcanc3kpeyy4dc3vmrz9cfe5q7v9wj3x9j0ap3tswtre9j';
+export const YOROI_DREP_ID_TESTNET = 'drep1y23nc498g205wtvp9esysyxam0n7msusm5d734xqlzhvkgq3pn5r7';
 export const EMURGO_DREP_ID = 'drep1ytvlwvyjmzfyn56n0zz4f6lj94wxhmsl5zky6knnzrf4jygpyahug';
 
 export const DREP_ALWAYS_ABSTAIN = API_ABSTAIN;
@@ -18,6 +19,7 @@ export const DREP_ALWAYS_NO_CONFIDENCE = API_NO_CONFIDENCE;
 export const drepNames = {
   [YOROI_DREP_ID]: 'Yoroi W₳llet',
   [EMURGO_DREP_ID]: 'EMURGO',
+  [YOROI_DREP_ID_TESTNET]: 'Testnet DRep',
 };
 
 export const GOVERNANCE_STATUS = {

packages/yoroi-extension/app/UI/features/governace/common/hooks/useStrings.tsx

@@ -186,6 +186,10 @@ export const messages = Object.freeze(
       id: 'governance.yoroiDRep',
       defaultMessage: '!!!Yoroi DRep',
     },
+    yoroiTestnetDRep: {
+      id: 'governance.yoroiTestnetDRep',
+      defaultMessage: '!!!Testnet DRep',
+    },
     yoroiDRepInfo: {
       id: 'governance.yoroiDRepInfo',
       defaultMessage:
@@ -254,6 +258,10 @@ export const messages = Object.freeze(
       defaultMessage:
         '!!!Your voting power is currently delegated and contributing to Cardano’s decision-making. You remain free to adjust your delegation whenever you choose.',
     },
+    delegatingInGovernance: {
+      id: 'gouvernace.delegatingInGovernance',
+      defaultMessage: '!!!Delegating in Governance',
+    },
   })
 );
 
@@ -323,5 +331,7 @@ export const useStrings = () => {
     delegatingLabel: intl.formatMessage(messages.delegatingLabel),
     delegationStatus: intl.formatMessage(messages.delegationStatus),
     votingPowerInfo: intl.formatMessage(messages.votingPowerInfo),
+    yoroiTestnetDRep: intl.formatMessage(messages.yoroiTestnetDRep),
+    delegatingInGovernance: intl.formatMessage(messages.delegatingInGovernance),
   }).current;
 };

packages/yoroi-extension/app/UI/features/governace/common/useNavigateTo.tsx

@@ -6,11 +6,7 @@ export const useNavigateTo = () => {
   const navigate = useNavigate();
 
   return React.useRef({
-    selectStatus: () => navigate(ROUTES.Governance.ROOT),
-    delegationForm: () => navigate(ROUTES.Governance.DELEGATE),
-    transactionSubmited: () => navigate(ROUTES.Governance.SUBMITTED),
-    transactionFail: () => navigate(ROUTES.Governance.FAIL),
-    selectRevampStatus: () => navigate(ROUTES.GOVERNANCE_REVAMP.ROOT),
-    selectRevampOptions: () => navigate(ROUTES.GOVERNANCE_REVAMP.OPTIONS),
+    selectRevampStatus: () => navigate(ROUTES.GOVERNANCE.ROOT),
+    selectRevampOptions: () => navigate(ROUTES.GOVERNANCE.OPTIONS),
   }).current;
 };