feat: Add governance voting form [LW-11519]

input-output-hk · Nov 14, 2024 · a27a4f0 · a27a4f0
1 parent 1950bfd
commit a27a4f0
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 8 deletions.
diff --git a/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.scss b/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.scss
@@ -22,3 +22,35 @@
     margin-bottom: 1em;
   }
 }
+
+.walletSelect {
+  margin-top: 20px;
+
+  &.error {
+    input {
+      border-color: var(--theme-color-error);
+    }
+
+    :global {
+      .SimpleSelect_selectInput {
+        &:after {
+          background-color: var(--theme-color-error);
+        }
+      }
+    }
+  }
+
+  :global {
+    .SimpleOptions_option {
+      align-items: center;
+      display: flex;
+      height: 50px;
+      padding-bottom: 0;
+      padding-top: 0;
+    }
+  }
+}
+
+.voteTypeSelect, .drepInput {
+  margin-top: 20px;
+}
diff --git a/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.tsx b/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.tsx
@@ -1,18 +1,50 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { observer } from 'mobx-react';
 import { injectIntl, FormattedHTMLMessage } from 'react-intl';
+import { Input } from 'react-polymorph/lib/components/Input';
+
 import BorderedBox from '../../widgets/BorderedBox';
 import { messages } from './VotingPowerDelegation.messages';
 import styles from './VotingPowerDelegation.scss';
 import type { Intl } from '../../../types/i18nTypes';
 import { FormattedHTMLMessageWithLink } from '../../widgets/FormattedHTMLMessageWithLink';
+import WalletsDropdown from '../../widgets/forms/WalletsDropdown';
+import Wallet from '../../../domains/Wallet';
+import StakePool from '../../../domains/StakePool';
+import ItemsDropdown from '../../widgets/forms/ItemsDropdown';
 
 type Props = {
+  getStakePoolById: (...args: Array<any>) => any;
   intl: Intl;
   onExternalLinkClick: (...args: Array<any>) => any;
+  stakePools: Array<StakePool>;
+  wallets: Array<Wallet>;
 };
 
-function VotingPowerDelegation({ intl, onExternalLinkClick }: Props) {
+function VotingPowerDelegation({
+  getStakePoolById,
+  intl,
+  onExternalLinkClick,
+  wallets,
+  stakePools,
+}: Props) {
+  const [selectedWalletId, setSelectedWalletId] = useState<string | null>(null);
+  const [selectedVoteType, setSelectedVoteType] = useState<string | null>(null);
+  const [drepInputValue, setDrepInputValue] = useState<string>('');
+  const voteTypes = [
+    {
+      value: 'abstain',
+      label: 'Abstain',
+    },
+    {
+      value: 'noConfidence',
+      label: 'No confidence',
+    },
+    {
+      value: 'drep',
+      label: 'Delegate to dRep',
+    },
+  ];
   return (
     <div className={styles.component}>
       <BorderedBox>
@@ -48,9 +80,50 @@ function VotingPowerDelegation({ intl, onExternalLinkClick }: Props) {
             />
           </p>
         </div>
+
+        <WalletsDropdown
+          className={styles.walletSelect}
+          // @ts-ignore ts-migrate(2322) FIXME: Type '{ className: any; label: any; numberOfStakeP... Remove this comment to see the full error message
+          label={'Select a wallet to delegate from'}
+          numberOfStakePools={stakePools.length}
+          wallets={wallets}
+          onChange={(walletId: string) => setSelectedWalletId(walletId)}
+          placeholder={'Select a wallet …'}
+          value={selectedWalletId}
+          getStakePoolById={getStakePoolById}
+        />
+
+        {selectedWalletId && (
+          <ItemsDropdown
+            className={styles.voteTypeSelect}
+            label={'Select voting registration type'}
+            placeholder={'Select delegation option'}
+            options={voteTypes}
+            handleChange={(option) => setSelectedVoteType(option.value)}
+            value={selectedVoteType}
+          />
+        )}
+
+        {selectedVoteType && (
+          <Input
+            className={styles.drepInput}
+            onChange={setDrepInputValue}
+            spellCheck={false}
+            value={drepInputValue}
+            label={
+              <div>
+                Please type or paste a valid DRep ID here. Look up{' '}
+                <a onClick={() => onExternalLinkClick('https://google.com')}>
+                  DRep directory
+                </a>
+              </div>
+            }
+            placeholder={'Paste DRep ID here.'}
+          />
+        )}
       </BorderedBox>
     </div>
   );
 }
 
-export default observer(injectIntl(VotingPowerDelegation));
+export default injectIntl(observer(VotingPowerDelegation));
diff --git a/source/renderer/app/components/widgets/FormattedHTMLMessageWithLink.tsx b/source/renderer/app/components/widgets/FormattedHTMLMessageWithLink.tsx
@@ -34,7 +34,11 @@ export class FormattedHTMLMessageWithLink extends Component<Props> {
       </Fragment>
     );
     return linkPosition === 'before'
-      ? [Link, <>&nbsp;</>, MainMessage]
-      : [MainMessage, <>&nbsp;</>, Link];
+      ? [Link, <React.Fragment key="space">&nbsp;</React.Fragment>, MainMessage]
+      : [
+          MainMessage,
+          <React.Fragment key="space">&nbsp;</React.Fragment>,
+          Link,
+        ];
   }
 }
diff --git a/source/renderer/app/components/widgets/forms/ItemsDropdown.tsx b/source/renderer/app/components/widgets/forms/ItemsDropdown.tsx
@@ -29,8 +29,12 @@ import globalMessages from '../../../i18n/global-messages';
  */
 export type ItemDropdownProps = {
   options: Array<ItemDropdown>;
+  label?: string;
   className?: string;
   disabled?: boolean;
+  handleChange?: (...args: Array<any>) => any;
+  value?: string;
+  placeholder?: string;
 };
 export const onSearchItemsDropdown = (
   searchValue: string,

diff --git a/source/renderer/app/containers/voting/VotingGovernancePage.tsx b/source/renderer/app/containers/voting/VotingGovernancePage.tsx
@@ -14,8 +14,16 @@ class VotingGovernancePage extends Component<Props> {
   };
 
   render() {
-    const { openExternalLink } = this.props.stores.app;
-    return <VotingPowerDelegation onExternalLinkClick={openExternalLink} />;
+    const { wallets, staking, app } = this.props.stores;
+    const { openExternalLink } = app;
+    return (
+      <VotingPowerDelegation
+        onExternalLinkClick={openExternalLink}
+        wallets={wallets.all}
+        stakePools={staking.stakePools}
+        getStakePoolById={staking.getStakePoolById}
+      />
+    );
   }
 }
 

diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
@@ -1353,4 +1353,4 @@
   "wallet.transferFunds.dialog2.total.label": "Total",
   "widgets.itemsDropdown.syncingLabel": "Syncing",
   "widgets.itemsDropdown.syncingLabelProgress": "Syncing {syncingProgress}%"
-}
+}