fix: disable governance voting for unsynced node and wallets [LW-11919] (#3252)

Signed-off-by: Dominik Guzei <[email protected]>

Author: DominikGuzei

source/renderer/app/components/voting/VotingUnavailable.scss

@@ -7,8 +7,6 @@
   flex: 1;
   flex-direction: column;
   justify-content: center;
-  margin-bottom: -40px;
-  padding: 20px;
   text-align: center;
 
   h1 {

source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.tsx

@@ -217,6 +217,7 @@ function VotingPowerDelegation({
             placeholder={intl.formatMessage(messages.selectWalletPlaceholder)}
             value={state.selectedWallet?.id || null}
             getStakePoolById={getStakePoolById}
+            disableSyncingWallets
           />
 
           {state.selectedWallet && (

source/renderer/app/components/widgets/forms/WalletsDropdown.tsx

@@ -27,6 +27,7 @@ type Props = {
   value?: string;
   errorPosition?: string;
   disabled?: boolean;
+  disableSyncingWallets?: boolean;
   wallets?: Array<Partial<Wallet>>;
 };
 export const onSearchWalletsDropdown = (
@@ -46,6 +47,7 @@ function WalletsDropdown({
   numberOfStakePools,
   onSearch = onSearchWalletsDropdown,
   wallets = [],
+  disableSyncingWallets,
   ...props
 }: Props) {
   const discreetModeFeature = useDiscreetModeFeature();
@@ -81,6 +83,7 @@ function WalletsDropdown({
       walletName: wallet.name,
       isSyncing,
       syncingProgress,
+      isDisabled: disableSyncingWallets ? isSyncing : false,
     };
   });
   return (

source/renderer/app/containers/voting/VotingGovernancePage.tsx

@@ -4,6 +4,7 @@ import type { InjectedProps } from '../../types/injectedPropsType';
 import VotingPowerDelegation from '../../components/voting/voting-governance/VotingPowerDelegation';
 import VotingPowerDelegationConfirmationDialog from '../../components/voting/voting-governance/VotingPowerDelegationConfirmationDialog';
 import { ROUTES } from '../../routes-config';
+import VotingUnavailable from '../../components/voting/VotingUnavailable';
 
 type Props = InjectedProps;
 
@@ -22,8 +23,21 @@ class VotingGovernancePage extends Component<Props> {
       app,
       voting,
       hardwareWallets,
+      networkStatus,
     } = this.props.stores;
     const { openExternalLink } = app;
+    const { isSynced, syncPercentage } = networkStatus;
+
+    if (!isSynced) {
+      return (
+        <VotingUnavailable
+          syncPercentage={syncPercentage}
+          // @ts-ignore ts-migrate(2322) FIXME: Type '{ syncPercentage: any; onExternalLinkClick: ... Remove this comment to see the full error message
+          onExternalLinkClick={openExternalLink}
+        />
+      );
+    }
+
     return (
       <VotingPowerDelegation
         onExternalLinkClick={openExternalLink}