git.iko.soy/bridge
on e8991de help sign in
bridge/src/form/Inputs.js
159 lines 3.4 kB history raw
1import React from 'react';
2import { Input, AccessoryIcon } from 'indigo-react';
3import { useField } from 'react-final-form';
5import { prependSig, convertToNumber } from 'lib/transformers';
6import { DEFAULT_HD_PATH } from 'lib/wallet';
7import InputSigil from 'components/InputSigil';
9const PLACEHOLDER_POINT = '~sampel-ponnym';
10const PLACEHOLDER_HD_PATH = DEFAULT_HD_PATH;
11const PLACEHOLDER_MNEMONIC =
12 'example crew supreme gesture quantum web media hazard theory mercy wing kitten';
13const PLACEHOLDER_TICKET = '~sampel-ticlyt-migfun-falmel';
14const PLACEHOLDER_ADDRESS = '0x12345abcdeDB11D175F123F6891AA64F01c24F7d';
15const PLACEHOLDER_PRIVATE_KEY =
16 '0x12345abcdee6beb2f323fab48b432925c9785808d33a6ca6d7ba00b45e9370c3';
17const PLACEHOLDER_EMAIL = 'Email Address';
19export function TicketInput({ name, ...rest }) {
20 const {
21 meta: { valid, error, validating, touched, active },
22 } = useField(name, {
23 subscription: {
24 valid: true,
25 error: true,
26 validating: true,
27 touched: true,
28 active: true,
29 },
30 });
32 return (
33 <Input
34 type="text"
35 name={name}
36 placeholder={PLACEHOLDER_TICKET}
37 accessory={
38 touched && !active && error ? (
39 <AccessoryIcon.Failure />
40 ) : validating ? (
41 <AccessoryIcon.Pending />
42 ) : valid ? (
43 <AccessoryIcon.Success />
44 ) : null
45 }
46 config={{ format: prependSig }}
47 mono
48 {...rest}
49 />
50 );
53export function MnemonicInput({ ...rest }) {
54 return (
55 <Input type="textarea" placeholder={PLACEHOLDER_MNEMONIC} mono {...rest} />
56 );
59export function HdPathInput({ ...rest }) {
60 return (
61 <Input
62 type="text"
63 placeholder={PLACEHOLDER_HD_PATH}
64 autoComplete="off"
65 {...rest}
66 />
67 );
70export function PassphraseInput({ ...rest }) {
71 return (
72 <Input
73 type="password"
74 placeholder="Passphrase"
75 autoComplete="off"
76 {...rest}
77 />
78 );
81export function PointInput({ name, size = 4, ...rest }) {
82 const {
83 input: { value },
84 meta: { active, valid, error },
85 } = useField(name, {
86 subscription: { value: true, active: true, valid: true, error: true },
87 });
89 return (
90 <Input
91 type="text"
92 label="Point"
93 name={name}
94 placeholder={PLACEHOLDER_POINT}
95 accessory={
96 value ? (
97 <InputSigil
98 patp={value}
99 size={44}
100 margin={8}
101 pass={valid}
102 focused={active}
103 error={error}
104 />
105 ) : null
106 }
107 config={{ format: prependSig }}
108 mono
109 {...rest}
110 />
111 );
114export function HexInput({ ...rest }) {
115 return (
116 <Input
117 type="text"
118 placeholder={PLACEHOLDER_PRIVATE_KEY}
119 autoComplete="off"
120 mono
121 {...rest}
122 />
123 );
126export function AddressInput({ ...rest }) {
127 return (
128 <Input
129 type="text"
130 placeholder={PLACEHOLDER_ADDRESS}
131 autoComplete="off"
132 mono
133 {...rest}
134 />
135 );
138export function NumberInput({ ...rest }) {
139 return (
140 <Input
141 type="number"
142 label="Number"
143 autoComplete="off"
144 config={{ format: convertToNumber }}
145 {...rest}
146 />
147 );
150export function EmailInput({ ...rest }) {
151 return (
152 <Input
153 type="email"
154 placeholder={PLACEHOLDER_EMAIL}
155 autoComplete="off"
156 {...rest}
157 />
158 );