Governance Revamp UI fixes

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 Yoroi W₳llet',
 };
 
 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/useCases/GovernanceStatusRevamp/DRepOptions.tsx

@@ -8,7 +8,15 @@ import { DrepOptionsCard } from './DrepOptionsCard';
 import { useGovernance } from '../../module/GovernanceContextProvider';
 import { useGovernanceDelegationToYoroiDrep } from '../../common/hooks/useGovernanceDelegationToYoroiDrep';
 import { useGovernanceStatusState } from '../../common/hooks/useGovernanceStatusState';
-import { DREP_ALWAYS_ABSTAIN, DREP_ALWAYS_NO_CONFIDENCE, GOVERNANCE_STATUS, YOROI_DREP_ID } from '../../common/constants';
+import {
+  DREP_ALWAYS_ABSTAIN,
+  DREP_ALWAYS_NO_CONFIDENCE,
+  GOVERNANCE_STATUS,
+  YOROI_DREP_ID,
+  YOROI_DREP_ID_TESTNET,
+  YOROI_VOTING_RECORD_LINK,
+} from '../../common/constants';
+import { OptionsSkeletonScreen } from './SkeletonCardLoaders';
 
 interface DRepOptionsScreenProps {}
 
@@ -17,7 +25,7 @@ export const DRepOptions: React.FC<DRepOptionsScreenProps> = () => {
   const strings = useStrings();
   const theme: any = useTheme();
 
-  const { submitedTransactions } = useGovernance();
+  const { submitedTransactions, isTestnet } = useGovernance();
   const { loadingUnsignTx, delegateToDrep, openDelegateModalForCustomDrep, delegateToAbstain, delegateToNoConfidence } =
     useGovernanceDelegationToYoroiDrep();
   const isPendingDrepDelegationTx = submitedTransactions.length > 0 && submitedTransactions[0]?.isDrepDelegation === true;
@@ -27,23 +35,24 @@ export const DRepOptions: React.FC<DRepOptionsScreenProps> = () => {
     navigateTo.selectRevampStatus();
   };
 
-  const drepID = governanceStatus.drep ? governanceStatus.drep : YOROI_DREP_ID;
+  const drepYoroiId = isTestnet ? YOROI_DREP_ID_TESTNET : YOROI_DREP_ID;
+  const drepID = governanceStatus.drep ? governanceStatus.drep : drepYoroiId;
   const isDelegated = cardState === GOVERNANCE_STATUS.DELEGATED;
-  const isDelegatingToYoroiDrep = isDelegated && drepID === YOROI_DREP_ID;
-  const isDelegationToOtherDrep = isDelegated && drepID !== YOROI_DREP_ID;
+  const isDelegatingToYoroiDrep = isDelegated && drepID === drepYoroiId;
+  const isDelegationToOtherDrep = isDelegated && drepID !== drepYoroiId;
   const isAbstain = drepID === null || governanceStatus.status === DREP_ALWAYS_ABSTAIN;
   const isNoConfidence = drepID === null || governanceStatus.status === DREP_ALWAYS_NO_CONFIDENCE;
 
   const drepOptionsConfig = [
     {
       key: 'yoroi',
-      title: strings.yoroiDRep,
+      title: isTestnet ? strings.yoroiTestnetDRep : strings.yoroiDRep,
       description: strings.yoroiDRepInfo,
       buttonText: strings.delegateLabel,
       variant: 'primary' as const,
       icon: <Icon.YoroiLogo fill={theme.palette.ds.gray_min} />,
-      onAction: () => delegateToDrep(YOROI_DREP_ID),
-      onViewDetails: () => console.log('View Yoroi details'),
+      onAction: () => delegateToDrep(drepYoroiId),
+      onViewDetails: () => window.open(YOROI_VOTING_RECORD_LINK, '_blank'),
       status: cardState,
       drepId: governanceStatus.drep,
       isDelegated: isDelegatingToYoroiDrep,
@@ -103,22 +112,26 @@ export const DRepOptions: React.FC<DRepOptionsScreenProps> = () => {
       </TitleSection>
 
       <CardsRow>
-        {drepOptionsConfig.map(option => (
-          <DrepOptionsCard
-            key={option.key}
-            title={option.title}
-            description={option.description}
-            buttonText={option.buttonText}
-            variant={option.variant}
-            icon={option.icon}
-            onAction={option.onAction}
-            onViewDetails={option.onViewDetails}
-            status={option.status}
-            drepId={option.drepId}
-            isDelegated={option.isDelegated}
-            pending={isPendingDrepDelegationTx || loadingUnsignTx}
-          />
-        ))}
+        {governanceStatus.status !== null ? (
+          drepOptionsConfig.map(option => (
+            <DrepOptionsCard
+              key={option.key}
+              title={option.title}
+              description={option.description}
+              buttonText={option.buttonText}
+              variant={option.variant}
+              icon={option.icon}
+              onAction={option.onAction}
+              onViewDetails={option.onViewDetails}
+              status={option.status}
+              drepId={option.drepId}
+              isDelegated={option.isDelegated}
+              pending={isPendingDrepDelegationTx || loadingUnsignTx}
+            />
+          ))
+        ) : (
+          <OptionsSkeletonScreen />
+        )}
       </CardsRow>
     </Container>
   );

packages/yoroi-extension/app/UI/features/governace/useCases/GovernanceStatusRevamp/DrepOptionsCard.tsx

@@ -2,7 +2,6 @@ import { Box, Typography, Button, Stack, Link, IconButton } from '@mui/material'
 import { styled } from '@mui/system';
 import { useStrings } from '../../common/hooks/useStrings';
 import { GOVERNANCE_STATUS, GovernanceStatusState } from '../../common/constants';
-import { YOROI_VOTING_RECORD_LINK } from '../../common/constants';
 import { LoadingButton } from '@mui/lab';
 import { Icon } from '../../../../components';
 import { truncateFormatter } from '../../../../common/helpers/formatters';
@@ -68,9 +67,7 @@ export const DrepOptionsCard: React.FC<ActionCardProps> = ({
                   e.stopPropagation();
                   onViewDetails();
                 }}
-                href={YOROI_VOTING_RECORD_LINK}
                 rel="noopener"
-                target="_blank"
                 underline="hover"
                 sx={{ cursor: 'pointer' }}
               >

packages/yoroi-extension/app/UI/features/governace/useCases/GovernanceStatusRevamp/GovernanceStatusRevamp.tsx

@@ -3,21 +3,23 @@ import { Box, Typography, Button } from '@mui/material';
 import { GovernanceStatusRevampCard } from './GovernanceStatusRevampCard';
 import { useNavigateTo } from '../../common/useNavigateTo';
 import { useStrings } from '../../common/hooks/useStrings';
-import { GOVERNANCE_STATUS, YOROI_DREP_ID } from '../../common/constants';
+import { GOVERNANCE_STATUS, YOROI_DREP_ID, YOROI_DREP_ID_TESTNET } from '../../common/constants';
 import { useGovernanceDelegationToYoroiDrep } from '../../common/hooks/useGovernanceDelegationToYoroiDrep';
 import { useGovernanceStatusState } from '../../common/hooks/useGovernanceStatusState';
 import { useIsGovernanceAllowed } from '../../common/hooks/useIsGovernanceAllowed';
 import { NotAllowedInGovernance } from './NotAllowedInGovernance';
 import { useGovernance } from '../../module/GovernanceContextProvider';
+import { StatusSkeletonScreen } from './SkeletonCardLoaders';
 
 export const GovernanceStatusRevamp = () => {
   const navigateTo = useNavigateTo();
   const strings = useStrings();
   const { loadingUnsignTx, error, delegateToDrep, openDelegateModalForCustomDrep } = useGovernanceDelegationToYoroiDrep();
   const { governanceStatusState: cardState, governanceStatus } = useGovernanceStatusState();
-  const { submitedTransactions } = useGovernance();
-  const { isNotAllowed } = useIsGovernanceAllowed();
+  const { submitedTransactions, isTestnet } = useGovernance();
+  const { isNotAllowed, isParticipating } = useIsGovernanceAllowed();
   const isPendingDrepDelegationTx = submitedTransactions.length > 0 && submitedTransactions[0]?.isDrepDelegation === true;
+  const yoroiDrepId = isTestnet ? YOROI_DREP_ID_TESTNET : YOROI_DREP_ID;
 
   const onExploreMore = () => {
     navigateTo.selectRevampOptions();
@@ -27,18 +29,21 @@ export const GovernanceStatusRevamp = () => {
     return <NotAllowedInGovernance />;
   }
 
+  if (governanceStatus.status === null) {
+    return <StatusSkeletonScreen />;
+  }
+
   return (
     <Container>
       <TitleSection>
         <Typography variant="h5" color="ds.text_gray_medium">
-          {strings.delegationOptions}
+          {isParticipating ? strings.delegatingInGovernance : strings.delegationOptions}
         </Typography>
         <Typography variant="body1" color="ds.text_gray_low" textAlign={'center'}>
           {cardState === GOVERNANCE_STATUS.IDLE ? strings.chooseDelegationOption : strings.votingPowerInfo}
         </Typography>
       </TitleSection>
 
-      {/* Optionally render error */}
       {error != null && (
         <Typography variant="body2" color="error">
           {error}
@@ -49,8 +54,8 @@ export const GovernanceStatusRevamp = () => {
         <GovernanceStatusRevampCard
           state={cardState}
           governanceStatus={governanceStatus}
-          onDelegateClick={() => delegateToDrep(YOROI_DREP_ID)}
-          onDetailsClick={() => YOROI_DREP_ID}
+          onDelegateClick={() => delegateToDrep(yoroiDrepId)}
+          onDetailsClick={() => yoroiDrepId}
           btnLoading={loadingUnsignTx}
           openDelegateModalForCustomDrep={openDelegateModalForCustomDrep}
           pending={isPendingDrepDelegationTx}

packages/yoroi-extension/app/UI/features/governace/useCases/GovernanceStatusRevamp/GovernanceStatusRevampCard.tsx

@@ -10,10 +10,12 @@ import {
   GOVERNANCE_STATUS,
   GovernanceStatusState,
   YOROI_DREP_ID,
+  YOROI_DREP_ID_TESTNET,
   YOROI_VOTING_RECORD_LINK,
 } from '../../common/constants';
 import { truncateFormatter } from '../../../../common/helpers/formatters';
 import { useIsGovernanceAllowed } from '../../common/hooks/useIsGovernanceAllowed';
+import { useGovernance } from '../../module/GovernanceContextProvider';
 
 interface GovernanceStatusCardProps {
   state: GovernanceStatusState;
@@ -38,13 +40,16 @@ export const GovernanceStatusRevampCard: React.FC<GovernanceStatusCardProps> = (
 }) => {
   const isDisabled = state === GOVERNANCE_STATUS.DISABLED || pending;
   const isDelegated = state === GOVERNANCE_STATUS.DELEGATED;
+
   const { isParticipating } = useIsGovernanceAllowed();
+  const { isTestnet } = useGovernance();
   const strings = useStrings();
   const theme: any = useTheme();
 
-  const drepID = governanceStatus?.drep ? governanceStatus?.drep : YOROI_DREP_ID;
-  const isDelegationToYoroiDrep = isDelegated && drepID === YOROI_DREP_ID;
-  const isDelegationToOtherDrep = isDelegated && drepID !== YOROI_DREP_ID;
+  const yoroiDrepId = isTestnet ? YOROI_DREP_ID_TESTNET : YOROI_DREP_ID;
+  const drepID = governanceStatus?.drep ? governanceStatus?.drep : yoroiDrepId;
+  const isDelegationToYoroiDrep = isDelegated && drepID === yoroiDrepId;
+  const isDelegationToOtherDrep = isDelegated && drepID !== yoroiDrepId;
   const isAbstain = governanceStatus?.drep === null && governanceStatus?.status === DREP_ALWAYS_ABSTAIN;
   const isNoConfidence = governanceStatus?.drep === null && governanceStatus?.status === DREP_ALWAYS_NO_CONFIDENCE;
   const primaryButtonLabel = forModal ? strings.delegateLabel : isDelegated ? strings.changeToDrep : strings.delegateLabel;
@@ -53,7 +58,7 @@ export const GovernanceStatusRevampCard: React.FC<GovernanceStatusCardProps> = (
   const showDrepId = isDelegationToOtherDrep || isDelegationToYoroiDrep;
   const showDelegatingLabel = isParticipating;
   const showDelegateToOtherDrepButton = isAbstain || isNoConfidence;
-  const showDelegateToYoroiDrepButton = governanceStatus?.status === GOVERNANCE_STATUS.IDLE;
+  const showDelegateToYoroiDrepButton = governanceStatus?.status === GOVERNANCE_STATUS.IDLE && !isDelegated;
   const showVotingRecordLink = showOnDetailsLink && !isDelegationToOtherDrep;
 
   const handleCopy = () => {
@@ -78,7 +83,7 @@ export const GovernanceStatusRevampCard: React.FC<GovernanceStatusCardProps> = (
     if (isDelegationToYoroiDrep) {
       return {
         icon: <Icon.YoroiLogo width={24} height={24} fill={theme.palette.ds.gray_min} />,
-        title: strings.yoroiDRep,
+        title: isTestnet ? strings.yoroiTestnetDRep : strings.yoroiDRep,
         description: strings.yoroiDRepInfo,
       };
     }
@@ -105,7 +110,7 @@ export const GovernanceStatusRevampCard: React.FC<GovernanceStatusCardProps> = (
     }
     return {
       icon: <Icon.YoroiLogo width={24} height={24} fill={theme.palette.ds.gray_min} />,
-      title: strings.yoroiDRep,
+      title: isTestnet ? strings.yoroiTestnetDRep : strings.yoroiDRep,
       description: strings.yoroiDRepInfo,
     };
   };

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

@@ -0,0 +1,70 @@
+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) => (
+        <Skeleton key={idx} animation="wave" variant="rounded" width={294} height={320}>
+          <Stack direction="column">
+            <Stack direction="row" spacing={2}>
+              <Skeleton variant="rounded" height={48} width={48} />
+              <Skeleton variant="text" height={26} width={200} />
+            </Stack>
+
+            <Skeleton variant="text" height={96} width={260} />
+
+            <Skeleton variant="rounded" height={40} width={260} />
+          </Stack>
+        </Skeleton>
+      ))}
+    </CardsRow>
+  );
+};

packages/yoroi-extension/app/UI/features/transaction-review/useCases/ChooseDrepId/ChooseOtherDrepId.tsx

@@ -5,7 +5,13 @@ import { dRepToMaybeCredentialHex } from '../../../../../api/ada/lib/cardanoCryp
 import { TextInput } from '../../../../components';
 import { useTxReviewModal } from '../../module/ReviewTxProvider';
 import { useStrings } from '../../common/hooks/useStrings';
-import { GOVERNANCE_STATUS, YOROI_DREP_ID, FIND_DREPS_LINK, FIND_DREPS_LINK_TESTNET } from '../../../governace/common/constants';
+import {
+  GOVERNANCE_STATUS,
+  YOROI_DREP_ID,
+  FIND_DREPS_LINK,
+  FIND_DREPS_LINK_TESTNET,
+  YOROI_DREP_ID_TESTNET,
+} from '../../../governace/common/constants';
 import { GovernanceStatusRevampCard } from '../../../governace/useCases/GovernanceStatusRevamp/GovernanceStatusRevampCard';
 import { useGovernanceDelegationToYoroiDrep } from '../../../governace/common/hooks/useGovernanceDelegationToYoroiDrep';
 import { useGovernance } from '../../../governace/module/GovernanceContextProvider';
@@ -19,6 +25,7 @@ export const ChooseOtherDrepId = () => {
   const [drepIdInput, setDrepValueId] = React.useState('');
 
   const findDrepLink = isTestnet ? FIND_DREPS_LINK_TESTNET : FIND_DREPS_LINK;
+  const yoroiDrepId = isTestnet ? YOROI_DREP_ID_TESTNET : YOROI_DREP_ID;
 
   useEffect(() => {
     setError(false);
@@ -73,9 +80,9 @@ export const ChooseOtherDrepId = () => {
         <Stack p={24}>
           <GovernanceStatusRevampCard
             state={GOVERNANCE_STATUS.DELEGATED}
-            governanceStatus={{ status: GOVERNANCE_STATUS.IDLE, drep: YOROI_DREP_ID }}
+            governanceStatus={{ status: GOVERNANCE_STATUS.IDLE, drep: yoroiDrepId }}
             forModal
-            onDelegateClick={() => delegateToDrep(YOROI_DREP_ID)}
+            onDelegateClick={() => delegateToDrep(yoroiDrepId)}
           />
         </Stack>
       </Stack>