git.iko.soy/bridge
on a0efefc help sign in
bridge/src/form/Inputs.js
199 lines 4.3 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 stripHexPrefix,
11 ensureHexPrefix,
12} from 'form/formatters';
13import { DEFAULT_HD_PATH } from 'lib/wallet';
14import InputSigil from 'components/InputSigil';
16const PLACEHOLDER_POINT = '~sampel-ponnym';
17const PLACEHOLDER_HD_PATH = DEFAULT_HD_PATH;
18const PLACEHOLDER_MNEMONIC =
19 'example crew supreme gesture quantum web media hazard theory mercy wing kitten';
20const PLACEHOLDER_TICKET = '~sampel-ticlyt-migfun-falmel';
21const PLACEHOLDER_PASSWORD = '••••••-••••••-••••••-••••••';
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, hidden, ...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={hidden ? 'password' : 'text'}
46 name={name}
47 obscure={value => value.replace(/[^~-]+/g, '••••••')}
48 placeholder={hidden ? PLACEHOLDER_PASSWORD : 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 );