Governance tweaks

packages/website/ts/pages/governance/address_table.tsx

@@ -68,15 +68,15 @@ export class AddressTable extends React.Component<AddressTableProps, AddressTabl
     }
 }
 const Wrapper = styled.div<{ marginBottom?: string }>`
-    background - color: #fff;
-    border -radius;: 4;px;
-    margin-bottom;: $;{props => props.marginBottom || '25px';}
-    padding: 10;px; 30;px;
-    height: 230;px;
-    overflow - y;: auto;
+    background-color: #fff;
+    border-radius: 4px;
+    margin-bottom: ${props => props.marginBottom || '25px'};
+    padding: 10px 30px;
+    height: 230px;
+    overflow-y: auto;
 `;
 
-const Table = styled.table`;
-    border-collapse;: collapse;
+const Table = styled.table`
+    border-collapse: collapse;
     width: 100%;
 `;

packages/website/ts/pages/governance/ledger_sign_note.tsx

@@ -0,0 +1,50 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+interface LedgerSignNoteProps {
+    text?: string;
+    isVisible: boolean;
+}
+
+export const LedgerSignNote: React.StatelessComponent<LedgerSignNoteProps> = ({
+    text,
+    isVisible,
+}) => {
+    return (
+        <Wrapper isVisible={isVisible}>
+            <Text>
+                {text}
+            </Text>
+        </Wrapper>
+    );
+};
+
+LedgerSignNote.defaultProps = {
+    isVisible: false,
+};
+
+const Wrapper = styled.div<LedgerSignNoteProps>`
+    background-color: #7A7A7A;
+    display: flex;
+    align-items: center;
+    padding: 28px 30px;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    justify-content: center;
+    opacity: ${props => props.isVisible ? 1 : 0};
+    visibility: ${props => props.isVisible ? 'visible' : 'hidden'};
+`;
+
+const Text = styled.p`
+    color: ${colors.white};
+    font-size: 1rem;
+    line-height: 1;
+    font-weight: 400;
+`;

packages/website/ts/pages/governance/vote_form.tsx

@@ -14,6 +14,7 @@ import styled from 'styled-components';
 import { Button } from 'ts/components/button';
 import { Input } from 'ts/components/modals/input';
 import { Heading, Paragraph } from 'ts/components/text';
+import { LedgerSignNote } from 'ts/pages/governance/ledger_sign_note';
 import { PreferenceSelecter } from 'ts/pages/governance/preference_selecter';
 import { colors } from 'ts/style/colors';
 import { InjectedProvider } from 'ts/types';
@@ -50,6 +51,7 @@ interface State {
     isWalletConnected: boolean;
     isSubmitting: boolean;
     isSuccessful: boolean;
+    isAwaitingLedgerSignature: boolean;
     isVoted: boolean;
     selectedAddress?: string;
     votePreference?: string;
@@ -95,6 +97,7 @@ export class VoteForm extends React.Component<Props> {
     public networkId: number;
     public state: State = {
         isWalletConnected: false,
+        isAwaitingLedgerSignature: false,
         isSubmitting: false,
         isSuccessful: false,
         isVoted: false,
@@ -116,7 +119,7 @@ export class VoteForm extends React.Component<Props> {
         super(props);
     }
     public render(): React.ReactNode {
-        const { votePreference, errors, isSuccessful } = this.state;
+        const { votePreference, errors, isSuccessful, isAwaitingLedgerSignature } = this.state;
         const { currentBalance, selectedAddress } = this.props;
         const bigNumberFormat = {
             decimalSeparator: '.',
@@ -185,6 +188,7 @@ export class VoteForm extends React.Component<Props> {
                         Back
                     </Button>
                     <ButtonDisabled disabled={!votePreference}>Submit</ButtonDisabled>
+                    <LedgerSignNote text={'Accept or reject signature on the Ledger'} isVisible={isAwaitingLedgerSignature} />
                 </ButtonRow>
             </Form>
         );
@@ -193,15 +197,19 @@ export class VoteForm extends React.Component<Props> {
         e.preventDefault();
 
         const { zeip, votePreference, comment } = this.state;
-        const { currentBalance, selectedAddress } = this.props;
+        const { currentBalance, selectedAddress, isLedger } = this.props;
         const makerAddress = selectedAddress;
+
+        if (isLedger) {
+            this.setState({ isAwaitingLedgerSignature: true });
+        }
+
         const domainType = [{ name: 'name', type: 'string' }];
         const voteType = [
             { name: 'preference', type: 'string' },
             { name: 'zeip', type: 'uint256' },
             { name: 'from', type: 'address' },
         ];
-
         const domainData = {
             name: '0x Protocol Governance',
         };
@@ -224,8 +232,8 @@ export class VoteForm extends React.Component<Props> {
         const voteHashHex = `0x${voteHashBuffer.toString('hex')}`;
         try {
             const signedVote = await this._signVoteAsync(makerAddress, typedData);
-            // Store the signed Order
-            this.setState(prevState => ({ ...prevState, signedVote, voteHash: voteHashHex, isSuccessful: true }));
+            // Store the signed vote
+            this.setState(prevState => ({ ...prevState, signedVote, voteHash: voteHashHex, isSuccessful: true, isAwaitingLedgerSignature: false }));
 
             const voteDomain = utils.isProduction() ? `https://${configs.DOMAIN_VOTE}` : 'http://localhost:3000';
             const voteEndpoint = `${voteDomain}/v1/vote`;
@@ -248,27 +256,27 @@ export class VoteForm extends React.Component<Props> {
             } else {
                 const responseBody = await response.json();
                 const errorMessage = !_.isUndefined(responseBody.reason) ? responseBody.reason : 'Unknown Error';
-                this.props.onError
-                    ? this.props.onError(errorMessage)
-                    : this.setState({
-                          errors: {
-                              signError: errorMessage,
-                          },
-                          isSuccessful: false,
-                      });
+                this._handleError(errorMessage);
             }
         } catch (err) {
-            const errorMessage = err.message;
-            this.props.onError
-                ? this.props.onError(errorMessage)
-                : this.setState({
-                      errors: {
-                          signError: errorMessage,
-                      },
-                      isSuccessful: false,
-                  });
+            this._handleError(err.message);
         }
     };
+    private _handleError(errorMessage: string): void {
+        const { onError } = this.props;
+        onError
+            ? onError(errorMessage)
+            : this.setState({
+                    errors: {
+                        signError: errorMessage,
+                    },
+                    isSuccessful: false,
+                    isAwaitingLedgerSignature: false,
+                });
+        this.setState({
+            isAwaitingLedgerSignature: false,
+        });
+    }
     private async _signVoteAsync(signerAddress: string, typedData: any): Promise<SignedVote> {
         const { provider: providerEngine } = this.props;
         let signatureHex;
@@ -340,6 +348,8 @@ const InputRow = styled.div`
 `;
 
 const ButtonRow = styled(InputRow)`
+    position: relative;
+
     @media (max-width: 768px) {
         display: flex;
         flex-direction: column;