Provider ledger

package.json

@@ -30,8 +30,10 @@
     "bb >= 10"
   ],
   "dependencies": {
+    "@ledgerhq/hw-transport-webusb": "6.1.0",
     "@waves.exchange/provider-web": "1.0.2",
     "@waves/js-test-env": "1.1.4-beta",
+    "@waves/ledger": "^4.0.0",
     "@waves/ride-js": "2.1.1",
     "@waves/ride-language-server": "1.0.0",
     "@waves/signer": "1.0.2",

src/interface.ts

@@ -0,0 +1,21 @@
+// TODO use from ts-types
+
+export enum ETxType {
+    GENESIS = 1,
+    PAYMENT = 2,
+    ISSUE = 3,
+    TRANSFER = 4,
+    REISSUE = 5,
+    BURN = 6,
+    EXCHANGE = 7,
+    LEASE = 8,
+    LEASE_CANCEL = 9,
+    CREATE_ALIAS = 10,
+    MASS_TRANSFER = 11,
+    DATA = 12,
+    SET_SCRIPT = 13,
+    SPONSORSHIP = 14,
+    SET_ASSET_SCRIPT = 15,
+    INVOKE_SCRIPT = 16,
+    UPDATE_ASSET_INFO = 17,
+}

src/layout/Dialogs/TransactionSigning/TransactionSigning.interface.ts

@@ -0,0 +1,54 @@
+import { RouteComponentProps } from 'react-router';
+
+import {
+    IAccount,
+    AccountsStore,
+    SettingsStore,
+    SignerStore,
+    UIStore,
+    NotificationsStore
+} from '@stores';
+
+interface IInjectedProps {
+    signerStore?: SignerStore
+    accountsStore?: AccountsStore
+    settingsStore?: SettingsStore
+    notificationsStore?: NotificationsStore
+    uiStore?: UIStore
+}
+
+export enum ESignType {
+    ACCOUNT = 'account',
+    EXCHANGE = 'exchange',
+    LEDGER = 'ledger',
+    SEED = 'seed',
+    WAVES_KEEPER = 'wavesKeeper',
+}
+
+export interface ITransactionEditorProps extends IInjectedProps, RouteComponentProps { }
+
+export interface ITransactionEditorState {
+    editorValue: string
+    proofIndex: number
+    seed: string
+    selectedAccount: number
+    signType: ESignType
+    isAwaitingConfirmation: boolean
+}
+
+export interface ITransactionSigningFormProps {
+    signType: ESignType;
+    onSignTypeChange: (v: string) => void;
+    seed: string;
+    availableProofIndexes: number[];
+    proofIndex: number;
+    accounts: IAccount[];
+    selectedAccount: number;
+    signDisabled: boolean;
+    onSign: () => Promise<boolean>;
+    onProofNChange: (v: string) => void;
+    onSeedChange: (v: string) => void;
+    onAccountChange: (v: string) => void;
+    disableAwaitingConfirmation: () => void;
+    isAwaitingConfirmation: boolean
+}

src/layout/Dialogs/TransactionSigning/TransactionSigningForm.tsx

@@ -1,27 +1,13 @@
 import * as React from 'react';
-import { IAccount } from '@stores';
 import Select from '@src/components/Select';
-import Button from '@src/components/Button';
-import styles from './styles.less';
-import classNames from 'classnames';
 import Input from '@components/Input';
 
-interface ITransactionSigningFormProps {
-    signType: 'account' | 'seed' | 'wavesKeeper' | 'exchange'
-    onSignTypeChange: (v: string) => void;
-    seed: string;
-    availableProofIndexes: number[];
-    proofIndex: number;
-    accounts: IAccount[];
-    selectedAccount: number;
-    signDisabled: boolean;
-    onSign: () => Promise<boolean>;
-    onProofNChange: (v: string) => void;
-    onSeedChange: (v: string) => void;
-    onAccountChange: (v: string) => void;
-    disableAwaitingConfirmation: () => void;
-    isAwaitingConfirmation: boolean
-}
+import styles from './styles.less';
+import { WaitForWavesKeeper } from './WaitForWavesKeeper';
+import {
+    ESignType,
+    ITransactionSigningFormProps,
+} from './TransactionSigning.interface';
 
 export default class TransactionSigningFormComponent extends React.Component<ITransactionSigningFormProps> {
 
@@ -35,16 +21,32 @@ export default class TransactionSigningFormComponent extends React.Component<ITr
 
     onSeedChange = (e: React.ChangeEvent<HTMLInputElement>) => this.props.onSeedChange(e.target.value);
 
-
     render(): React.ReactNode {
         const keeperEnabled = typeof window.Waves === 'object';
+        const signOptions = [
+            { value: ESignType.SEED, title: 'Seed phrase' },
+            { value: ESignType.ACCOUNT, title: 'IDE Account' },
+            { value: ESignType.EXCHANGE, title: 'waves.exchange' },
+            { value: ESignType.LEDGER, title: 'Ledger' },
+        ];
+
         const {
-            signType, onSignTypeChange, seed, proofIndex, availableProofIndexes, disableAwaitingConfirmation,
-            onProofNChange, accounts, selectedAccount, onAccountChange, signDisabled, isAwaitingConfirmation
+            availableProofIndexes,
+            signType,
+            proofIndex,
+            signDisabled,
+            isAwaitingConfirmation,
+            disableAwaitingConfirmation,
+            onSignTypeChange,
+            onProofNChange,
         } = this.props;
-        const signOptions = [{value: 'seed', title: 'Seed phrase'}, {value: 'account', title: 'IDE Account'}, {value: 'exchange', title: 'waves.exchange'}];
-        if (keeperEnabled) signOptions.push({value: 'wavesKeeper', title: 'Waves Keeper'});
+
         const {justSigned} = this.state;
+
+        if (keeperEnabled) {
+            signOptions.push({value: ESignType.WAVES_KEEPER, title: 'Waves Keeper'});
+        }
+
         return isAwaitingConfirmation
             ? <WaitForWavesKeeper
                 onCancel={disableAwaitingConfirmation}
@@ -63,36 +65,7 @@ export default class TransactionSigningFormComponent extends React.Component<ITr
                         />
                     </div>
                     <div className={styles.signing_field}>
-                        {{
-                            account: <>
-                                <div className={styles.signing_title}>Account</div>
-                                <Select
-                                    className={styles.signing_select}
-                                    required={true}
-                                    value={accounts.length !== 0 ? selectedAccount : undefined}
-                                    onChange={onAccountChange}
-                                    disabled={availableProofIndexes.length === 0}
-                                    options={accounts.map((acc, i) => ({title: acc.label, value: i}))}
-                                />
-                            </>,
-                            seed: <>
-                                <div className={styles.signing_title}>Seed to sign</div>
-                                <Input
-                                    invalid={seed === ''}
-                                    value={seed}
-                                    onChange={this.onSeedChange}
-                                    className={styles.signing_input}
-                                />
-                            </>,
-                            wavesKeeper: <>
-                                <div className={styles.signing_title}/>
-                                <div className={styles.signing_input}/>
-                            </>,
-                            exchange: <>
-                                <div className={styles.signing_title}/>
-                                <div className={styles.signing_input}/>
-                            </>
-                        }[signType]}
+                        {this.renderOptionBySignType(signType)}
                     </div>
                     <div className={styles.signing_field}>
                         <div className={styles.signing_title}>Proof index</div>
@@ -109,28 +82,92 @@ export default class TransactionSigningFormComponent extends React.Component<ITr
                         />
                     </div>
                     <div className={styles.signing_buttonField}>
-
                         {
-                            <button
-                                className={styles[`signing_button${justSigned ? '-added' : ''}`]}
-                                disabled={signDisabled}
-                                onClick={justSigned ? () => this.setState({justSigned: false}) : this.onSign}
-                                onBlur={() => this.setState({justSigned: false})}
-                            >
-                                <div className={justSigned ? styles.check : styles.plus}/>
-                                {justSigned ? 'Sign added' : 'Add sign'}
-                            </button>}
+                            justSigned
+                            ? (
+                                <button
+                                    className={styles['signing_button-added']}
+                                    disabled={signDisabled}
+                                    onClick={() => this.setState({justSigned: false})}
+                                    onBlur={() => this.setState({justSigned: false})}
+                                >
+                                    <div className={styles.check}/>
+                                    <span>Sign added</span>
+                                </button>
+                            )
+                            : (
+                                <button
+                                    className={styles['signing_button']}
+                                    disabled={signDisabled}
+                                    onClick={this.onSign}
+                                    onBlur={() => this.setState({justSigned: false})}
+                                >
+                                    <div className={styles.plus}/>
+                                    <span>Add sign</span>
+                                </button>
+                            )
+                        }
                     </div>
                 </div>
             );
     }
-}
 
-const WaitForWavesKeeper = ({onCancel}: { onCancel: () => void }) =>
-    <div className={styles.signing_WaitKeeperRoot}>
-        <div className={styles.signing_WaitKeeperText}>
-            <div className={styles.signing_title_blue}>Waiting for confirmation</div>
-            <div className={styles.signing_loading}>Loading...</div>
-        </div>
-        <Button className={styles.signing_WaitKeeperBtn} onClick={onCancel}>Cancel</Button>
-    </div>;
+    renderOptionBySignType(signType: ESignType) {
+        const { accounts, availableProofIndexes, selectedAccount, onAccountChange, seed } = this.props;
+
+        switch (signType) {
+            case ESignType.ACCOUNT:
+                return (
+                    <>
+                        <div className={styles.signing_title}>Account</div>
+                        <Select
+                            className={styles.signing_select}
+                            required={true}
+                            value={accounts.length !== 0 ? selectedAccount : undefined}
+                            onChange={onAccountChange}
+                            disabled={availableProofIndexes.length === 0}
+                            options={accounts.map((acc, i) => ({title: acc.label, value: i}))}
+                        />
+                    </>
+                );
+
+            case ESignType.EXCHANGE:
+                return (
+                    <>
+                        <div className={styles.signing_title}/>
+                        <div className={styles.signing_input}/>
+                    </>
+                );
+
+            case ESignType.LEDGER:
+                return (
+                    <>
+                        <div className={styles.signing_title}></div>
+                        <div className={styles.signing_input}></div>
+                    </>
+                );
+
+            case ESignType.SEED:
+                return (
+                    <>
+                        <div className={styles.signing_title}>Seed to sign</div>
+                        <Input
+                            invalid={seed === ''}
+                            value={seed}
+                            onChange={this.onSeedChange}
+                            className={styles.signing_input}
+                        />
+                    </>
+                );
+
+            case ESignType.WAVES_KEEPER:
+                return (
+                    <>
+                        <div className={styles.signing_title}/>
+                        <div className={styles.signing_input}/>
+                    </>
+                );
+
+        }
+    }
+}

src/layout/Dialogs/TransactionSigning/WaitForWavesKeeper.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Button from '@src/components/Button';
+import styles from './styles.less';
+
+export const WaitForWavesKeeper = ({onCancel}: { onCancel: () => void }) =>
+    <div className={styles.signing_WaitKeeperRoot}>
+        <div className={styles.signing_WaitKeeperText}>
+            <div className={styles.signing_title_blue}>Waiting for confirmation</div>
+            <div className={styles.signing_loading}>Loading...</div>
+        </div>
+        <Button className={styles.signing_WaitKeeperBtn} onClick={onCancel}>Cancel</Button>
+    </div>;