From 66992439f579d4e83ad54785e31aba9a173bca28 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Wed, 14 Dec 2022 11:09:39 +0200
Subject: [PATCH] Adjust voting modal (buttons for non-conv.) (#8533)

---
 .../page-referenda/src/Referenda/Vote.tsx     | 143 ++++++++++--------
 .../src/Referenda/VoteBasic.tsx               |  19 ---
 2 files changed, 78 insertions(+), 84 deletions(-)
 delete mode 100644 packages/page-referenda/src/Referenda/VoteBasic.tsx

diff --git a/packages/page-referenda/src/Referenda/Vote.tsx b/packages/page-referenda/src/Referenda/Vote.tsx
index 8bf6609e6e..10b4b294f6 100644
--- a/packages/page-referenda/src/Referenda/Vote.tsx
+++ b/packages/page-referenda/src/Referenda/Vote.tsx
@@ -15,7 +15,6 @@ import { useAccounts, useApi, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import VoteAbstain from './VoteAbstain';
-import VoteBasic from './VoteBasic';
 import VoteSplit from './VoteSplit';
 import VoteStandard from './VoteStandard';
 
@@ -47,7 +46,7 @@ function filterMembers (allAccounts: string[], members?: string[], ranks?: BN[],
   return members;
 }
 
-function createVoteOpts (api: ApiPromise, t: TFunction, isConvictionVote: boolean): { text: string, value: string }[] {
+function createVoteOpts (api: ApiPromise, t: TFunction): { text: string, value: string }[] {
   let hasAbstain = false;
 
   try {
@@ -58,22 +57,17 @@ function createVoteOpts (api: ApiPromise, t: TFunction, isConvictionVote: boolea
     hasAbstain = false;
   }
 
-  return isConvictionVote
-    ? hasAbstain
-      ? [
-        { text: t<string>('Aye'), value: 'aye' },
-        { text: t<string>('Nay'), value: 'nay' },
-        { text: t<string>('Split'), value: 'split' },
-        { text: t<string>('Abstain'), value: 'abstain' }
-      ]
-      : [
-        { text: t<string>('Aye'), value: 'aye' },
-        { text: t<string>('Nay'), value: 'nay' },
-        { text: t<string>('Split'), value: 'split' }
-      ]
+  return hasAbstain
+    ? [
+      { text: t<string>('Aye'), value: 'aye' },
+      { text: t<string>('Nay'), value: 'nay' },
+      { text: t<string>('Split'), value: 'split' },
+      { text: t<string>('Abstain'), value: 'abstain' }
+    ]
     : [
       { text: t<string>('Aye'), value: 'aye' },
-      { text: t<string>('Nay'), value: 'nay' }
+      { text: t<string>('Nay'), value: 'nay' },
+      { text: t<string>('Split'), value: 'split' }
     ];
 }
 
@@ -89,8 +83,8 @@ function Voting ({ className, id, isConvictionVote, isMember, members, palletVot
   // Create the options for the vote toggle using the type of vote and also inspecting
   // the actual support of the on-chain runtime (e.g. Abstentions)
   const voteTypeOpts = useMemo(
-    () => createVoteOpts(api, t, isConvictionVote),
-    [api, isConvictionVote, t]
+    () => createVoteOpts(api, t),
+    [api, t]
   );
 
   const filteredMembers = useMemo(
@@ -116,7 +110,7 @@ function Voting ({ className, id, isConvictionVote, isMember, members, palletVot
       {isVotingOpen && (
         <Modal
           className={className}
-          header={t<string>('Vote on proposal')}
+          header={t<string>('Vote on referendum')}
           onClose={toggleVoting}
           size='large'
         >
@@ -135,68 +129,87 @@ function Voting ({ className, id, isConvictionVote, isMember, members, palletVot
                 onChange={setAccountId}
               />
             </Modal.Columns>
-            <Modal.Columns
-              className='centerVoteType'
-              hint={t<string>('The type of vote that you wish to cast on the referendum.')}
-            >
-              <ToggleGroup
-                onChange={setVoteTypeIndex}
-                options={voteTypeOpts}
-                value={voteTypeIndex}
-              />
-            </Modal.Columns>
-            {isConvictionVote
-              ? voteTypeIndex === 0
-                ? (
-                  <VoteStandard
-                    accountId={accountId}
-                    id={id}
-                    isAye
-                    onChange={setParams}
+            {isConvictionVote && (
+              <>
+                <Modal.Columns
+                  className='centerVoteType'
+                  hint={t<string>('The type of vote that you wish to cast on the referendum.')}
+                >
+                  <ToggleGroup
+                    onChange={setVoteTypeIndex}
+                    options={voteTypeOpts}
+                    value={voteTypeIndex}
                   />
-                )
-                : voteTypeIndex === 1
+                </Modal.Columns>
+                {voteTypeIndex === 0
                   ? (
                     <VoteStandard
                       accountId={accountId}
                       id={id}
+                      isAye
                       onChange={setParams}
                     />
                   )
-                  : voteTypeIndex === 2
+                  : voteTypeIndex === 1
                     ? (
-                      <VoteSplit
+                      <VoteStandard
                         accountId={accountId}
                         id={id}
                         onChange={setParams}
                       />
                     )
-                    : (
-                      <VoteAbstain
-                        accountId={accountId}
-                        id={id}
-                        onChange={setParams}
-                      />
-                    )
-              : (
-                <VoteBasic
-                  accountId={accountId}
-                  id={id}
-                  isAye={voteTypeIndex === 0}
-                  onChange={setParams}
-                />
-              )
-            }
+                    : voteTypeIndex === 2
+                      ? (
+                        <VoteSplit
+                          accountId={accountId}
+                          id={id}
+                          onChange={setParams}
+                        />
+                      )
+                      : (
+                        <VoteAbstain
+                          accountId={accountId}
+                          id={id}
+                          onChange={setParams}
+                        />
+                      )
+                }
+              </>
+            )}
           </Modal.Content>
           <Modal.Actions>
-            <TxButton
-              accountId={accountId}
-              icon='check-to-slot'
-              label={t<string>('Vote')}
-              onStart={toggleVoting}
-              params={params}
-              tx={api.tx[palletVote].vote}
-            />
+            {isConvictionVote
+              ? (
+                <TxButton
+                  accountId={accountId}
+                  icon='check-to-slot'
+                  label={t<string>('Vote')}
+                  onStart={toggleVoting}
+                  params={params}
+                  tx={api.tx[palletVote].vote}
+                />
+              )
+              : (
+                <>
+                  <TxButton
+                    accountId={accountId}
+                    icon='ban'
+                    label={t<string>('Vote Nay')}
+                    onStart={toggleVoting}
+                    params={[id, false]}
+                    tx={api.tx[palletVote].vote}
+                  />
+                  <TxButton
+                    accountId={accountId}
+                    icon='check'
+                    label={t<string>('Vote Aye')}
+                    onStart={toggleVoting}
+                    params={[id, true]}
+                    tx={api.tx[palletVote].vote}
+                  />
+                </>
+              )
+            }
           </Modal.Actions>
         </Modal>
       )}
diff --git a/packages/page-referenda/src/Referenda/VoteBasic.tsx b/packages/page-referenda/src/Referenda/VoteBasic.tsx
deleted file mode 100644
index ea1496e0b1..0000000000
--- a/packages/page-referenda/src/Referenda/VoteBasic.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright 2017-2022 @polkadot/app-democracy authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { VoteTypeProps as Props } from './types';
-
-import React, { useEffect } from 'react';
-
-function VoteBasic ({ id, isAye = false, onChange }: Props): React.ReactElement<Props> | null {
-  useEffect((): void => {
-    onChange([
-      id,
-      isAye
-    ]);
-  }, [id, isAye, onChange]);
-
-  return null;
-}
-
-export default React.memo(VoteBasic);