git.iko.soy/bridge
on 4e06b3a help sign in
bridge/src/form/Inputs.js
247 lines 5.4 kB history raw
1import React from 'react';
2import { Input, AccessoryIcon, Flex } from 'indigo-react';
3import cn from 'classnames';
4import { useField } from 'react-final-form';
6import {
7 convertToNumber,
8 buildFormatter,
9 downcase,
10 ensurePatFormat,
11 stripHexPrefix,
12 ensureHexPrefix,
13} from 'form/formatters';
14import { DEFAULT_HD_PATH } from 'lib/wallet';
15import InputSigil from 'components/InputSigil';
17const PLACEHOLDER_POINT = '~sampel-ponnym';
18const PLACEHOLDER_HD_PATH = DEFAULT_HD_PATH;
19const PLACEHOLDER_MNEMONIC =
20 'example crew supreme gesture quantum web media hazard theory mercy wing kitten';
21const PLACEHOLDER_TICKET = '~sampel-ticlyt-migfun-falmel';
22const PLACEHOLDER_ADDRESS = '0x';
23const PLACEHOLDER_HEX = '0x';
24const PLACEHOLDER_PRIVATE_KEY =
25 'a44de2416ee6beb2f323fab48b432925c9785808d33a6ca6d7ba00b45e9370c3';
26const PLACEHOLDER_EMAIL = 'email@example.com';
28const formatPat = buildFormatter([downcase, ensurePatFormat]);
30export function TicketInput({ name, ...rest }) {
31 const {
32 meta: { valid, error, validating, touched, active },
33 } = useField(name, {
34 subscription: {
35 valid: true,
36 error: true,
37 validating: true,
38 touched: true,
39 active: true,
40 },
41 });
43 return (
44 <Input
45 type="text"
46 name={name}
47 obscure={value => value.replace(/[^~-]+/g, '••••••')}
48 placeholder={PLACEHOLDER_TICKET}
49 autoCapitalize="none"
50 autoCorrect="off"
51 accessory={
52 touched && !active && error ? (
53 <AccessoryIcon.Failure />
54 ) : validating ? (
55 <AccessoryIcon.Pending />
56 ) : valid ? (
57 <AccessoryIcon.Success />
58 ) : null
59 }
60 config={{ parse: formatPat }}
61 mono
62 {...rest}
63 />
64 );
67export function MnemonicInput({ ...rest }) {
68 return (
69 <Input
70 type="textarea"
71 placeholder={PLACEHOLDER_MNEMONIC}
72 autoCapitalize="none"
73 autoComplete="off"
74 mono
75 {...rest}
76 />
77 );
80export function HdPathInput({ ...rest }) {
81 return (
82 <Input
83 type="text"
84 placeholder={PLACEHOLDER_HD_PATH}
85 autoCapitalize="none"
86 autoComplete="off"
87 autoCorrect="off"
88 {...rest}
89 />
90 );
93export function PassphraseInput({ ...rest }) {
94 return (
95 <Input
96 type="password"
97 placeholder="Passphrase"
98 autoCapitalize="none"
99 autoCorrect="off"
100 {...rest}
101 />
102 );
105export function PointInput({ name, size = 4, ...rest }) {
106 const {
107 input: { value },
108 meta: { active, valid, error },
109 } = useField(name, {
110 subscription: { value: true, active: true, valid: true, error: true },
111 });
113 return (
114 <Input
115 type="text"
116 label="Urbit ID"
117 name={name}
118 placeholder={PLACEHOLDER_POINT}
119 autoCapitalize="none"
120 autoComplete="off"
121 autoCorrect="off"
122 accessory={
123 value ? (
124 <InputSigil
125 patp={value}
126 size={44}
127 valid={valid}
128 error={error}
129 active={active}
130 />
131 ) : null
132 }
133 config={{ parse: formatPat }}
134 mono
135 {...rest}
136 />
137 );
140export function HexInput({ ...rest }) {
141 return (
142 <Input
143 type="text"
144 placeholder={PLACEHOLDER_HEX}
145 autoCapitalize="none"
146 autoComplete="off"
147 autoCorrect="off"
148 mono
149 config={{ parse: ensureHexPrefix }}
150 {...rest}
151 />
152 );
155export function PrivateKeyInput({ ...rest }) {
156 return (
157 <HexInput
158 type="password"
159 placeholder={PLACEHOLDER_PRIVATE_KEY}
160 config={{ parse: stripHexPrefix }}
161 {...rest}
162 />
163 );
166export function AddressInput({ ...rest }) {
167 return (
168 <Input
169 type="text"
170 placeholder={PLACEHOLDER_ADDRESS}
171 autoCapitalize="none"
172 autoCorrect="off"
173 mono
174 {...rest}
175 />
176 );
179export function NumberInput({ ...rest }) {
180 return (
181 <Input
182 type="number"
183 label="Number"
184 config={{ format: convertToNumber }}
185 {...rest}
186 />
187 );
190export function EmailInput({ ...rest }) {
191 return (
192 <Input
193 type="email"
194 placeholder={PLACEHOLDER_EMAIL}
195 autoCapitalize="none"
196 {...rest}
197 />
198 );
201export const ColorInput = ({
202 name,
203 colors,
204 disabled = false,
205 label,
206 className,
207}) => {
208 const { input } = useField(name, { subscription: { value: true } });
210 const isWhite = c => c === '#FFFFFF';
212 // disabled = disabled || submitting || submitSucceeded;
213 return (
214 <Flex col className={cn(className, 'flex-wrap mb1')}>
215 <Flex.Item
216 as="label"
217 className={cn('f6 lh-tall', {
218 black: !disabled,
219 gray4: disabled,
220 })}
221 htmlFor={name}>
222 {label}
223 </Flex.Item>
224 <div className="flex">
225 {colors.map(c => (
226 <button
227 className={cn('m0 p0 h7 w7 p2 flex flex-center', {
228 'b b-black': isWhite(c),
229 })}
230 style={{ backgroundColor: c }}
231 onClick={() => input.onChange(c)}>
232 {c === input.value ? (
233 <div
234 className={cn(
235 { 'bg-black': isWhite(c), 'bg-white': !isWhite(c) },
236 'w2 h2 r-full'
237 )}
238 />
239 ) : (
240 <div />
241 )}
242 </button>
243 ))}
244 </div>
245 </Flex>
246 );
247};