diff --git a/packages/website/ts/pages/governance/address_table.tsx b/packages/website/ts/pages/governance/address_table.tsx index e3f88e249f..28bfd09687 100644 --- a/packages/website/ts/pages/governance/address_table.tsx +++ b/packages/website/ts/pages/governance/address_table.tsx @@ -68,15 +68,15 @@ export class AddressTable extends React.Component` - 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%; `; diff --git a/packages/website/ts/pages/governance/ledger_sign_note.tsx b/packages/website/ts/pages/governance/ledger_sign_note.tsx new file mode 100644 index 0000000000..08d472a7ac --- /dev/null +++ b/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 = ({ + text, + isVisible, +}) => { + return ( + + + {text} + + + ); +}; + +LedgerSignNote.defaultProps = { + isVisible: false, +}; + +const Wrapper = styled.div` + 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; +`; diff --git a/packages/website/ts/pages/governance/vote_form.tsx b/packages/website/ts/pages/governance/vote_form.tsx index d4c5b6bc8b..bafd5572e0 100644 --- a/packages/website/ts/pages/governance/vote_form.tsx +++ b/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 { 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 { 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 { Back Submit + ); @@ -193,15 +197,19 @@ export class VoteForm extends React.Component { 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 { 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 { } 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 { 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;