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