git.iko.soy/bridge
on fdeb086 help sign in
bridge/src/lib/useInputs.js
152 lines 3.8 kB history raw
1import React, { useCallback, useMemo } from 'react';
2import { AccessoryIcon, useForm } from 'indigo-react';
3import { identity } from 'lodash';
5import { DEFAULT_HD_PATH } from 'lib/wallet';
6import {
7 validateNotEmpty,
8 validateMnemonic,
9 validatePoint,
10 validateTicket,
11 validateEmail,
12 validateLength,
13 validateHexString,
14 validateOneOf,
15 validateMaximumPatpByteLength,
16 validateEthereumAddress,
17 validateNotNullAddress,
18 validateGreaterThan,
19} from 'lib/validators';
20import { prependSig, convertToNumber } from 'lib/transformers';
22import InputSigil from 'components/InputSigil';
24const PLACEHOLDER_POINT = '~sampel-ponnym';
25const PLACEHOLDER_HD_PATH = DEFAULT_HD_PATH;
26const PLACEHOLDER_MNEMONIC =
27 'example crew supreme gesture quantum web media hazard theory mercy wing kitten';
28const PLACEHOLDER_TICKET = '~sampel-ticlyt-migfun-falmel';
29const PLACEHOLDER_ADDRESS = '0x12345abcdeDB11D175F123F6891AA64F01c24F7d';
30const PLACEHOLDER_PRIVATE_KEY =
31 '0x12345abcdee6beb2f323fab48b432925c9785808d33a6ca6d7ba00b45e9370c3';
33// pulls out the first input from a useForm() call
34function useFirstOf({ inputs, setValue, ...rest }, mapper = identity) {
35 // ask the mapper function for any values to overwrite
36 const input = {
37 ...inputs[0],
38 ...mapper(inputs[0]),
39 };
40 // memoize the setValue callback for manually setting the value
41 // in response to some imperative event
42 const _setValue = useCallback(value => setValue(input.name, value), [
43 setValue,
44 input.name,
45 ]);
47 // provide the first input as the first element
48 // _and_ as the second element to facilitate destructuring
49 // and then provide the pass/error/setValue/etc properties at the end
50 return [
51 input,
52 input,
53 {
54 ...rest,
55 setValue: _setValue,
56 },
57 ];
60const kPointTransformers = [prependSig];
61export function usePointInput({ size = 4, validators = [], ...rest }) {
62 const _validators = useMemo(
63 () => [
64 ...validators,
65 validatePoint,
66 validateMaximumPatpByteLength(size),
67 validateNotEmpty,
68 ],
69 [size, validators]
70 );
72 return useFirstOf(
73 useForm([
74 {
75 type: 'text',
76 label: 'Point',
77 placeholder: PLACEHOLDER_POINT,
78 validators: _validators,
79 transformers: kPointTransformers,
80 mono: true,
81 ...rest,
82 },
83 ]),
84 ({ error, pass, focused, value }) => ({
85 accessory: value ? (
86 <InputSigil
87 patp={value}
88 size={44}
89 margin={8}
90 pass={pass}
91 focused={focused}
92 error={error}
93 />
94 ) : null,
95 })
96 );
99export function useGalaxyInput(props) {
100 return usePointInput({
101 label: 'Galaxy Name',
102 size: 1,
103 ...props,
104 });
107const kAddressValidators = [
108 validateEthereumAddress,
109 validateNotNullAddress,
110 validateNotEmpty,
111];
112export function useAddressInput({ ...rest }) {
113 return useFirstOf(
114 useForm([
115 {
116 type: 'string',
117 label: 'Ethereum Address',
118 placeholder: PLACEHOLDER_ADDRESS,
119 autoComplete: 'off',
120 validators: kAddressValidators,
121 mono: true,
122 ...rest,
123 },
124 ])
125 );
128const kNumberTransformers = [convertToNumber];
129const kNumberValidators = [validateGreaterThan(0)];
130export function useNumberInput({ ...rest }) {
131 return useFirstOf(
132 useForm([
133 {
134 type: 'number',
135 label: 'Number',
136 autoComplete: 'off',
137 transformers: kNumberTransformers,
138 validators: kNumberValidators,
139 ...rest,
140 },
141 ])
142 );
145const kEmailValidators = [validateEmail, validateNotEmpty];
146export const buildEmailInputConfig = extra => ({
147 type: 'email',
148 autoComplete: 'off',
149 validators: kEmailValidators,
150 initialValue: '',
151 ...extra,
152});