git.iko.soy/bridge
on 58fbcd2 help sign in
bridge/src/form/Inputs.js
165 lines 3.5 kB history raw
1import React from 'react';
2import { Input, AccessoryIcon } from 'indigo-react';
3import { useField } from 'react-final-form';
5import {
6 prependSig,
7 convertToNumber,
8 buildFormatter,
9 downcase,
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 = '0x12345abcdeDB11D175F123F6891AA64F01c24F7d';
20const PLACEHOLDER_PRIVATE_KEY =
21 '0x12345abcdee6beb2f323fab48b432925c9785808d33a6ca6d7ba00b45e9370c3';
22const PLACEHOLDER_EMAIL = 'Email Address';
24const formatPat = buildFormatter([downcase, prependSig]);
26export function TicketInput({ name, ...rest }) {
27 const {
28 meta: { valid, error, validating, touched, active },
29 } = useField(name, {
30 subscription: {
31 valid: true,
32 error: true,
33 validating: true,
34 touched: true,
35 active: true,
36 },
37 });
39 return (
40 <Input
41 type="text"
42 name={name}
43 placeholder={PLACEHOLDER_TICKET}
44 accessory={
45 touched && !active && error ? (
46 <AccessoryIcon.Failure />
47 ) : validating ? (
48 <AccessoryIcon.Pending />
49 ) : valid ? (
50 <AccessoryIcon.Success />
51 ) : null
52 }
53 config={{ format: formatPat }}
54 mono
55 {...rest}
56 />
57 );
60export function MnemonicInput({ ...rest }) {
61 return (
62 <Input type="textarea" placeholder={PLACEHOLDER_MNEMONIC} mono {...rest} />
63 );
66export function HdPathInput({ ...rest }) {
67 return (
68 <Input
69 type="text"
70 placeholder={PLACEHOLDER_HD_PATH}
71 autoComplete="off"
72 {...rest}
73 />
74 );
77export function PassphraseInput({ ...rest }) {
78 return (
79 <Input
80 type="password"
81 placeholder="Passphrase"
82 autoComplete="off"
83 {...rest}
84 />
85 );
88export function PointInput({ name, size = 4, ...rest }) {
89 const {
90 input: { value },
91 meta: { active, valid, error },
92 } = useField(name, {
93 subscription: { value: true, active: true, valid: true, error: true },
94 });
96 return (
97 <Input
98 type="text"
99 label="Point"
100 name={name}
101 placeholder={PLACEHOLDER_POINT}
102 accessory={
103 value ? (
104 <InputSigil
105 patp={value}
106 size={44}
107 valid={valid}
108 error={error}
109 active={active}
110 />
111 ) : null
112 }
113 config={{ format: formatPat }}
114 mono
115 {...rest}
116 />
117 );
120export function HexInput({ ...rest }) {
121 return (
122 <Input
123 type="text"
124 placeholder={PLACEHOLDER_PRIVATE_KEY}
125 autoComplete="off"
126 mono
127 {...rest}
128 />
129 );
132export function AddressInput({ ...rest }) {
133 return (
134 <Input
135 type="text"
136 placeholder={PLACEHOLDER_ADDRESS}
137 autoComplete="off"
138 mono
139 {...rest}
140 />
141 );
144export function NumberInput({ ...rest }) {
145 return (
146 <Input
147 type="number"
148 label="Number"
149 autoComplete="off"
150 config={{ format: convertToNumber }}
151 {...rest}
152 />
153 );
156export function EmailInput({ ...rest }) {
157 return (
158 <Input
159 type="email"
160 placeholder={PLACEHOLDER_EMAIL}
161 autoComplete="off"
162 {...rest}
163 />
164 );