git.iko.soy/bridge
on 6b3335e help sign in
bridge/src/form/Inputs.js
143 lines 3.5 kB history raw
1import React, { useMemo } from 'react';
2import { Input, AccessoryIcon } from 'indigo-react';
3import { useField } from 'react-final-form';
5import {
6 validateNotEmpty,
7 validateTicket,
8 kDefaultValidator,
9 validateMnemonic,
10} from 'lib/validators';
11import { compose } from 'lib/lib';
12import { prependSig } from 'lib/transformers';
13import { DEFAULT_HD_PATH } from 'lib/wallet';
15// TODO: why is `validate` called when routing away? new props?
16// active not true: https://github.com/final-form/react-final-form/issues/558
18const kEmptyValidators = []; // necessary for referential stability
19const kEmptyTransformers = []; // also for referential stability
21const PLACEHOLDER_POINT = '~sampel-ponnym';
22const PLACEHOLDER_HD_PATH = DEFAULT_HD_PATH;
23const PLACEHOLDER_MNEMONIC =
24 'example crew supreme gesture quantum web media hazard theory mercy wing kitten';
25const PLACEHOLDER_TICKET = '~sampel-ticlyt-migfun-falmel';
26const PLACEHOLDER_ADDRESS = '0x12345abcdeDB11D175F123F6891AA64F01c24F7d';
27const PLACEHOLDER_PRIVATE_KEY =
28 '0x12345abcdee6beb2f323fab48b432925c9785808d33a6ca6d7ba00b45e9370c3';
30const buildValidator = (
31 validators = [],
32 fn = x => undefined
33) => async value => {
34 // console.log('validating:', value);
35 return (
36 compose(
37 ...validators,
38 kDefaultValidator
39 )(value).error || (await fn(value))
40 );
41};
43const kTicketValidators = [validateTicket, validateNotEmpty];
44export function TicketInput({
45 name,
46 validators = kEmptyValidators,
47 transformers = kEmptyTransformers,
48 validate,
49 ...rest
50}) {
51 const { valid, error, validating } = useField(name, {
52 subscription: { error: true, validating: true },
53 });
55 const _validate = useMemo(
56 () => buildValidator([...validators, ...kTicketValidators], validate),
57 [validate, validators]
58 );
60 const _format = (value, name) => prependSig(value);
62 return (
63 <Input
64 type="text"
65 name={name}
66 placeholder={PLACEHOLDER_TICKET}
67 accessory={
68 error ? (
69 <AccessoryIcon.Failure />
70 ) : validating ? (
71 <AccessoryIcon.Pending />
72 ) : valid ? (
73 <AccessoryIcon.Success />
74 ) : null
75 }
76 config={{ validate: _validate, format: _format }}
77 mono
78 {...rest}
79 />
80 );
83const kMnemonicValidators = [validateMnemonic, validateNotEmpty];
84export function MnemonicInput({
85 name,
86 validators = kEmptyValidators,
87 transformers = kEmptyTransformers,
88 validate,
89 ...rest
90}) {
91 const _validate = useMemo(
92 () => buildValidator([...validators, ...kMnemonicValidators], validate),
93 [validate, validators]
94 );
96 return (
97 <Input
98 type="textarea"
99 name={name}
100 placeholder={PLACEHOLDER_MNEMONIC}
101 config={{ validate: _validate }}
102 autoComplete="off"
103 mono
104 {...rest}
105 />
106 );
109const kHdPathValidators = [validateNotEmpty];
110export function HdPathInput({
111 name,
112 validators = kEmptyValidators,
113 transformers = kEmptyTransformers,
114 validate,
115 ...rest
116}) {
117 const _validate = useMemo(
118 () => buildValidator([...validators, ...kHdPathValidators], validate),
119 [validate, validators]
120 );
122 return (
123 <Input
124 type="text"
125 name={name}
126 placeholder={PLACEHOLDER_HD_PATH}
127 config={{ validate: _validate }}
128 autoComplete="off"
129 {...rest}
130 />
131 );
134export function PassphraseInput({ ...rest }) {
135 return (
136 <Input
137 type="password"
138 placeholder="Passphrase"
139 autoComplete="off"
140 {...rest}
141 />
142 );