git.iko.soy/bridge
on ff59435 help sign in
bridge/src/form/Inputs.js
198 lines 4.2 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_ADDRESS = '0x';
22const PLACEHOLDER_HEX = '0x';
23const PLACEHOLDER_PRIVATE_KEY =
24 'a44de2416ee6beb2f323fab48b432925c9785808d33a6ca6d7ba00b45e9370c3';
25const PLACEHOLDER_EMAIL = 'email@example.com';
27const formatPat = buildFormatter([downcase, ensurePatFormat]);
29export function TicketInput({ name, ...rest }) {
30 const {
31 meta: { valid, error, validating, touched, active },
32 } = useField(name, {
33 subscription: {
34 valid: true,
35 error: true,
36 validating: true,
37 touched: true,
38 active: true,
39 },
40 });
42 return (
43 <Input
44 type="text"
45 name={name}
46 obscure={value => value.replace(/[^~-]+/g, '••••••')}
47 placeholder={PLACEHOLDER_TICKET}
48 autoCapitalize="none"
49 autoCorrect="off"
50 accessory={
51 touched && !active && error ? (
52 <AccessoryIcon.Failure />
53 ) : validating ? (
54 <AccessoryIcon.Pending />
55 ) : valid ? (
56 <AccessoryIcon.Success />
57 ) : null
58 }
59 config={{ parse: formatPat }}
60 mono
61 {...rest}
62 />
63 );
66export function MnemonicInput({ ...rest }) {
67 return (
68 <Input
69 type="textarea"
70 placeholder={PLACEHOLDER_MNEMONIC}
71 autoCapitalize="none"
72 autoComplete="off"
73 mono
74 {...rest}
75 />
76 );
79export function HdPathInput({ ...rest }) {
80 return (
81 <Input
82 type="text"
83 placeholder={PLACEHOLDER_HD_PATH}
84 autoCapitalize="none"
85 autoComplete="off"
86 autoCorrect="off"
87 {...rest}
88 />
89 );
92export function PassphraseInput({ ...rest }) {
93 return (
94 <Input
95 type="password"
96 placeholder="Passphrase"
97 autoCapitalize="none"
98 autoCorrect="off"
99 {...rest}
100 />
101 );
104export function PointInput({ name, size = 4, ...rest }) {
105 const {
106 input: { value },
107 meta: { active, valid, error },
108 } = useField(name, {
109 subscription: { value: true, active: true, valid: true, error: true },
110 });
112 return (
113 <Input
114 type="text"
115 label="Urbit ID"
116 name={name}
117 placeholder={PLACEHOLDER_POINT}
118 autoCapitalize="none"
119 autoComplete="off"
120 autoCorrect="off"
121 accessory={
122 value ? (
123 <InputSigil
124 patp={value}
125 size={44}
126 valid={valid}
127 error={error}
128 active={active}
129 />
130 ) : null
131 }
132 config={{ parse: formatPat }}
133 mono
134 {...rest}
135 />
136 );
139export function HexInput({ ...rest }) {
140 return (
141 <Input
142 type="text"
143 placeholder={PLACEHOLDER_HEX}
144 autoCapitalize="none"
145 autoComplete="off"
146 autoCorrect="off"
147 mono
148 config={{ parse: ensureHexPrefix }}
149 {...rest}
150 />
151 );
154export function PrivateKeyInput({ ...rest }) {
155 return (
156 <HexInput
157 type="password"
158 placeholder={PLACEHOLDER_PRIVATE_KEY}
159 config={{ parse: stripHexPrefix }}
160 {...rest}
161 />
162 );
165export function AddressInput({ ...rest }) {
166 return (
167 <Input
168 type="text"
169 placeholder={PLACEHOLDER_ADDRESS}
170 autoCapitalize="none"
171 autoCorrect="off"
172 mono
173 {...rest}
174 />
175 );
178export function NumberInput({ ...rest }) {
179 return (
180 <Input
181 type="number"
182 label="Number"
183 config={{ format: convertToNumber }}
184 {...rest}
185 />
186 );
189export function EmailInput({ ...rest }) {
190 return (
191 <Input
192 type="email"
193 placeholder={PLACEHOLDER_EMAIL}
194 autoCapitalize="none"
195 {...rest}
196 />
197 );