git.iko.soy/bridge
on cfae92f help sign in
bridge/src/form/Inputs.js
182 lines 3.8 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 = '0x';
20const PLACEHOLDER_PRIVATE_KEY = '0x';
21const PLACEHOLDER_EMAIL = 'email@example.com';
23const formatPat = buildFormatter([downcase, ensurePatFormat]);
25export function TicketInput({ name, ...rest }) {
26 const {
27 meta: { valid, error, validating, touched, active },
28 } = useField(name, {
29 subscription: {
30 valid: true,
31 error: true,
32 validating: true,
33 touched: true,
34 active: true,
35 },
36 });
38 return (
39 <Input
40 type="text"
41 name={name}
42 obscure={value => value.replace(/[^~-]+/g, '••••••')}
43 placeholder={PLACEHOLDER_TICKET}
44 autoCapitalize="none"
45 autoCorrect="off"
46 accessory={
47 touched && !active && error ? (
48 <AccessoryIcon.Failure />
49 ) : validating ? (
50 <AccessoryIcon.Pending />
51 ) : valid ? (
52 <AccessoryIcon.Success />
53 ) : null
54 }
55 config={{ parse: formatPat }}
56 mono
57 {...rest}
58 />
59 );
62export function MnemonicInput({ ...rest }) {
63 return (
64 <Input
65 type="textarea"
66 placeholder={PLACEHOLDER_MNEMONIC}
67 autoCapitalize="none"
68 autoComplete="off"
69 mono
70 {...rest}
71 />
72 );
75export function HdPathInput({ ...rest }) {
76 return (
77 <Input
78 type="text"
79 placeholder={PLACEHOLDER_HD_PATH}
80 autoCapitalize="none"
81 autoComplete="off"
82 autoCorrect="off"
83 {...rest}
84 />
85 );
88export function PassphraseInput({ ...rest }) {
89 return (
90 <Input
91 type="password"
92 placeholder="Passphrase"
93 autoCapitalize="none"
94 autoCorrect="off"
95 {...rest}
96 />
97 );
100export function PointInput({ name, size = 4, ...rest }) {
101 const {
102 input: { value },
103 meta: { active, valid, error },
104 } = useField(name, {
105 subscription: { value: true, active: true, valid: true, error: true },
106 });
108 return (
109 <Input
110 type="text"
111 label="Point"
112 name={name}
113 placeholder={PLACEHOLDER_POINT}
114 autoCapitalize="none"
115 autoComplete="off"
116 autoCorrect="off"
117 accessory={
118 value ? (
119 <InputSigil
120 patp={value}
121 size={44}
122 valid={valid}
123 error={error}
124 active={active}
125 />
126 ) : null
127 }
128 config={{ parse: formatPat }}
129 mono
130 {...rest}
131 />
132 );
135export function HexInput({ ...rest }) {
136 return (
137 <Input
138 type="text"
139 placeholder={PLACEHOLDER_PRIVATE_KEY}
140 autoCapitalize="none"
141 autoComplete="off"
142 autoCorrect="off"
143 mono
144 {...rest}
145 />
146 );
149export function AddressInput({ ...rest }) {
150 return (
151 <Input
152 type="text"
153 placeholder={PLACEHOLDER_ADDRESS}
154 autoCapitalize="none"
155 autoCorrect="off"
156 mono
157 {...rest}
158 />
159 );
162export function NumberInput({ ...rest }) {
163 return (
164 <Input
165 type="number"
166 label="Number"
167 config={{ format: convertToNumber }}
168 {...rest}
169 />
170 );
173export function EmailInput({ ...rest }) {
174 return (
175 <Input
176 type="email"
177 placeholder={PLACEHOLDER_EMAIL}
178 autoCapitalize="none"
179 {...rest}
180 />
181 );