git.iko.soy/bridge
on 91176c2 help sign in
bridge/src/form/Inputs.js
184 lines 3.9 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} 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 Address';
24const formatPat = buildFormatter([downcase, prependSig]);
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="password"
42 name={name}
43 placeholder={PLACEHOLDER_TICKET}
44 autoCapitalize="none"
45 autoComplete="off"
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={{ format: 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 autoComplete="off"
96 autoCorrect="off"
97 {...rest}
98 />
99 );
102export function PointInput({ name, size = 4, ...rest }) {
103 const {
104 input: { value },
105 meta: { active, valid, error },
106 } = useField(name, {
107 subscription: { value: true, active: true, valid: true, error: true },
108 });
110 return (
111 <Input
112 type="text"
113 label="Point"
114 name={name}
115 placeholder={PLACEHOLDER_POINT}
116 autoCapitalize="none"
117 autoComplete="off"
118 autoCorrect="off"
119 accessory={
120 value ? (
121 <InputSigil
122 patp={value}
123 size={44}
124 valid={valid}
125 error={error}
126 active={active}
127 />
128 ) : null
129 }
130 config={{ format: formatPat }}
131 mono
132 {...rest}
133 />
134 );
137export function HexInput({ ...rest }) {
138 return (
139 <Input
140 type="text"
141 placeholder={PLACEHOLDER_PRIVATE_KEY}
142 autoCapitalize="none"
143 autoComplete="off"
144 autoCorrect="off"
145 mono
146 {...rest}
147 />
148 );
151export function AddressInput({ ...rest }) {
152 return (
153 <Input
154 type="text"
155 placeholder={PLACEHOLDER_ADDRESS}
156 autoCapitalize="none"
157 autoCorrect="off"
158 mono
159 {...rest}
160 />
161 );
164export function NumberInput({ ...rest }) {
165 return (
166 <Input
167 type="number"
168 label="Number"
169 config={{ format: convertToNumber }}
170 {...rest}
171 />
172 );
175export function EmailInput({ ...rest }) {
176 return (
177 <Input
178 type="email"
179 placeholder={PLACEHOLDER_EMAIL}
180 autoCapitalize="none"
181 {...rest}
182 />
183 );