git.iko.soy/bridge
on 7b9591f help sign in
bridge/src/form/Inputs.js
189 lines 4.0 kB history raw
1import React from 'react';
2import { Input, AccessoryIcon } from 'indigo-react';
3import { useField } from 'react-final-form';
5import {
6 prependSig,
7 convertToNumber,
8 buildFormatter,
9 downcase,
10 ensurePatQDashes,
11} from 'form/formatters';
12import { DEFAULT_HD_PATH } from 'lib/wallet';
13import InputSigil from 'components/InputSigil';
15const PLACEHOLDER_POINT = '~sampel-ponnym';
16const PLACEHOLDER_HD_PATH = DEFAULT_HD_PATH;
17const PLACEHOLDER_MNEMONIC =
18 'example crew supreme gesture quantum web media hazard theory mercy wing kitten';
19const PLACEHOLDER_TICKET = '~sampel-ticlyt-migfun-falmel';
20const PLACEHOLDER_ADDRESS = '0x12345abcdeDB11D175F123F6891AA64F01c24F7d';
21const PLACEHOLDER_PRIVATE_KEY =
22 '0x12345abcdee6beb2f323fab48b432925c9785808d33a6ca6d7ba00b45e9370c3';
23const PLACEHOLDER_EMAIL = 'Email Address';
25const TICKET_MAX_BYTE_LEN = 32; // tickets can be as large as 32 bytes
26const formatPat = buildFormatter([
27 downcase,
28 prependSig,
29 ensurePatQDashes(TICKET_MAX_BYTE_LEN),
30]);
32export function TicketInput({ name, ...rest }) {
33 const {
34 meta: { valid, error, validating, touched, active },
35 } = useField(name, {
36 subscription: {
37 valid: true,
38 error: true,
39 validating: true,
40 touched: true,
41 active: true,
42 },
43 });
45 return (
46 <Input
47 type="text"
48 name={name}
49 obscure={value => value.replace(/[^~-]+/g, '••••••')}
50 placeholder={PLACEHOLDER_TICKET}
51 autoCapitalize="none"
52 autoCorrect="off"
53 accessory={
54 touched && !active && error ? (
55 <AccessoryIcon.Failure />
56 ) : validating ? (
57 <AccessoryIcon.Pending />
58 ) : valid ? (
59 <AccessoryIcon.Success />
60 ) : null
61 }
62 config={{ parse: formatPat }}
63 mono
64 {...rest}
65 />
66 );
69export function MnemonicInput({ ...rest }) {
70 return (
71 <Input
72 type="textarea"
73 placeholder={PLACEHOLDER_MNEMONIC}
74 autoCapitalize="none"
75 autoComplete="off"
76 mono
77 {...rest}
78 />
79 );
82export function HdPathInput({ ...rest }) {
83 return (
84 <Input
85 type="text"
86 placeholder={PLACEHOLDER_HD_PATH}
87 autoCapitalize="none"
88 autoComplete="off"
89 autoCorrect="off"
90 {...rest}
91 />
92 );
95export function PassphraseInput({ ...rest }) {
96 return (
97 <Input
98 type="password"
99 placeholder="Passphrase"
100 autoCapitalize="none"
101 autoCorrect="off"
102 {...rest}
103 />
104 );
107export function PointInput({ name, size = 4, ...rest }) {
108 const {
109 input: { value },
110 meta: { active, valid, error },
111 } = useField(name, {
112 subscription: { value: true, active: true, valid: true, error: true },
113 });
115 return (
116 <Input
117 type="text"
118 label="Point"
119 name={name}
120 placeholder={PLACEHOLDER_POINT}
121 autoCapitalize="none"
122 autoComplete="off"
123 autoCorrect="off"
124 accessory={
125 value ? (
126 <InputSigil
127 patp={value}
128 size={44}
129 valid={valid}
130 error={error}
131 active={active}
132 />
133 ) : null
134 }
135 config={{ parse: formatPat }}
136 mono
137 {...rest}
138 />
139 );
142export function HexInput({ ...rest }) {
143 return (
144 <Input
145 type="text"
146 placeholder={PLACEHOLDER_PRIVATE_KEY}
147 autoCapitalize="none"
148 autoComplete="off"
149 autoCorrect="off"
150 mono
151 {...rest}
152 />
153 );
156export function AddressInput({ ...rest }) {
157 return (
158 <Input
159 type="text"
160 placeholder={PLACEHOLDER_ADDRESS}
161 autoCapitalize="none"
162 autoCorrect="off"
163 mono
164 {...rest}
165 />
166 );
169export function NumberInput({ ...rest }) {
170 return (
171 <Input
172 type="number"
173 label="Number"
174 config={{ format: convertToNumber }}
175 {...rest}
176 />
177 );
180export function EmailInput({ ...rest }) {
181 return (
182 <Input
183 type="email"
184 placeholder={PLACEHOLDER_EMAIL}
185 autoCapitalize="none"
186 {...rest}
187 />
188 );