@@ -1,20 +1,37 @@
11import React, { useMemo } from 'react';
22import { Input, AccessoryIcon } from 'indigo-react';
33import { useField } from 'react-final-form';
4+
45import {
56 validateNotEmpty,
67 validateTicket,
78 kDefaultValidator,
9+ validateMnemonic,
810} from 'lib/validators';
911import { compose } from 'lib/lib';
12+import { prependSig } from 'lib/transformers';
13+import { DEFAULT_HD_PATH } from 'lib/wallet';
14+
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
1017
18+const kEmptyValidators = []; // necessary for referential stability
19+const kEmptyTransformers = []; // also for referential stability
20+
21+const PLACEHOLDER_POINT = '~sampel-ponnym';
22+const PLACEHOLDER_HD_PATH = DEFAULT_HD_PATH;
23+const PLACEHOLDER_MNEMONIC =
24+ 'example crew supreme gesture quantum web media hazard theory mercy wing kitten';
1125const PLACEHOLDER_TICKET = '~sampel-ticlyt-migfun-falmel';
26+const PLACEHOLDER_ADDRESS = '0x12345abcdeDB11D175F123F6891AA64F01c24F7d';
27+const PLACEHOLDER_PRIVATE_KEY =
28+ '0x12345abcdee6beb2f323fab48b432925c9785808d33a6ca6d7ba00b45e9370c3';
1229
1330const buildValidator = (
1431 validators = [],
1532 fn = x => undefined
1633) => async value => {
17− console.log('validating', value);
34+ // console.log('validating:', value);
1835 return (
1936 compose(
2037 ...validators,
@@ -24,19 +41,27 @@ const buildValidator = (
2441};
2542
2643const kTicketValidators = [validateTicket, validateNotEmpty];
27−export function TicketInput({ name, validators = [], config = {}, ...rest }) {
44+export function TicketInput({
45+ name,
46+ validators = kEmptyValidators,
47+ transformers = kEmptyTransformers,
48+ validate,
49+ ...rest
50+}) {
2851 const { valid, error, validating } = useField(name, {
2952 subscription: { error: true, validating: true },
3053 });
3154
32− const validate = useMemo(
33− () =>
34− buildValidator([...validators, ...kTicketValidators], config.validate),
35− [config.validate, validators]
55+ const _validate = useMemo(
56+ () => buildValidator([...validators, ...kTicketValidators], validate),
57+ [validate, validators]
3658 );
3759
60+ const _format = (value, name) => prependSig(value);
61+
3862 return (
3963 <Input
64+ type="text"
4065 name={name}
4166 placeholder={PLACEHOLDER_TICKET}
4267 accessory={
@@ -48,9 +73,71 @@ export function TicketInput({ name, validators = [], config = {}, ...rest }) {
4873 <AccessoryIcon.Success />
4974 ) : null
5075 }
51− config={{ validate }}
76+ config={{ validate: _validate, format: _format }}
77+ mono
78+ {...rest}
79+ />
80+ );
81+}
82+
83+const kMnemonicValidators = [validateMnemonic, validateNotEmpty];
84+export 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+ );
95+
96+ return (
97+ <Input
98+ type="textarea"
99+ name={name}
100+ placeholder={PLACEHOLDER_MNEMONIC}
101+ config={{ validate: _validate }}
102+ autoComplete="off"
52103 mono
53104 {...rest}
54105 />
55106 );
56107}
108+
109+const kHdPathValidators = [validateNotEmpty];
110+export 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+ );
121+
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+ );
132+}
133+
134+export function PassphraseInput({ ...rest }) {
135+ return (
136+ <Input
137+ type="password"
138+ placeholder="Passphrase"
139+ autoComplete="off"
140+ {...rest}
141+ />
142+ );
143+}