fdeb086 · bridge · git.iko.soy

git.iko.soy/bridge

chore: untested: update more form components

commitfdeb086cf085a40f3308493bd99d9849aceb200e authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateMon 5 Aug 2019, 12:45 (7 years ago) parent329f1a9

5 files changed+170−185

compare with master

unifiedsplit

src/form/Inputs.js+24−2 src/lib/useInputs.js−89 src/views/Admin/AdminSetProxy.js+86−57 src/views/Admin/Reticket/ReticketVerify.js+35−21 src/views/Disclaimer.js+25−16

src/form/Inputs.js+24−2

@@ -13,6 +13,7 @@ import {

1313 validateOneOf,

1414 validateHexString,

1515 validateHexLength,

16+ validateEthereumAddress,

1617} from 'lib/validators';

1718import { compose } from 'lib/lib';

1819import { prependSig } from 'lib/transformers';

@@ -46,8 +47,10 @@ export const buildTicketValidator = (validators = []) =>

4647 buildValidator([...validators, validateTicket, validateNotEmpty]);

4748export const buildMnemonicValidator = () =>

4849 buildValidator([validateMnemonic, validateNotEmpty]);

49−export const buildCheckboxValidator = () =>

50− buildValidator([validateOneOf([true, false])]);

50+export const buildCheckboxValidator = mustBe =>

51+ buildValidator([

52+ validateOneOf(mustBe !== undefined ? [mustBe] : [true, false]),

53+ ]);

5154export const buildPassphraseValidator = () => buildValidator([]);

5255// TODO: validate hdpath format

5356export const buildHdPathValidator = () => buildValidator([validateNotEmpty]);

@@ -66,6 +69,13 @@ export const buildHexValidator = length =>

6669 validateNotEmpty,

6770 ]);

6871export const buildUploadValidator = () => buildValidator([validateNotEmpty]);

72+export const buildAddressValidator = () =>

73+ buildValidator([

74+ validateEthereumAddress,

75+ validateHexLength(40),

76+ validateHexString,

77+ validateNotEmpty,

78+ ]);

6979

7080// the default form validator just returns field-level validations

7181const kDefaultFormValidator = (values, errors) => errors;

@@ -205,3 +215,15 @@ export function HexInput({ ...rest }) {

205215 />

206216 );

207217}

218+

219+export function AddressInput({ ...rest }) {

220+ return (

221+ <Input

222+ type="text"

223+ placeholder={PLACEHOLDER_ADDRESS}

224+ autoComplete="off"

225+ mono

226+ {...rest}

227+ />

228+ );

229+}

src/lib/useInputs.js−89

@@ -57,64 +57,6 @@ function useFirstOf({ inputs, setValue, ...rest }, mapper = identity) {

5757 ];

5858}

5959

60−const kMnemonicValidators = [validateMnemonic, validateNotEmpty];

61−export function useMnemonicInput(props) {

62− return useFirstOf(

63− useForm([

64− {

65− type: 'textarea',

66− autoComplete: 'off',

67− placeholder: PLACEHOLDER_MNEMONIC,

68− validators: kMnemonicValidators,

69− ...props,

70− },

71− ])

72− );

73−}

74−

75−export function useHdPathInput(props) {

76− return useFirstOf(

77− useForm([

78− {

79− type: 'text',

80− autoComplete: 'off',

81− placeholder: PLACEHOLDER_HD_PATH,

82− ...props,

83− },

84− ])

85− );

86−}

87−

88−const kTicketValidators = [validateTicket, validateNotEmpty];

89−//TODO needs to be fancier, displaying sig and dashes instead of •ing all

90−const kTicketTransformers = [prependSig];

91−export function useTicketInput({ validators = [], deriving = false, ...rest }) {

92− return useFirstOf(

93− useForm([

94− {

95− type: 'password',

96− label: 'Ticket',

97− placeholder: PLACEHOLDER_TICKET,

98− validators: useMemo(() => [...validators, ...kTicketValidators], [

99− validators,

100− ]),

101− transformers: kTicketTransformers,

102− mono: true,

103− ...rest,

104− },

105− ]),

106− ({ error, pass }) => ({

107− accessory: error ? (

108− <AccessoryIcon.Failure />

109− ) : deriving ? (

110− <AccessoryIcon.Pending />

111− ) : pass ? (

112− <AccessoryIcon.Success />

113− ) : null,

114− })

115− );

116−}

117−

11860const kPointTransformers = [prependSig];

11961export function usePointInput({ size = 4, validators = [], ...rest }) {

12062 const _validators = useMemo(

@@ -162,37 +104,6 @@ export function useGalaxyInput(props) {

162104 });

163105}

164106

165−export function useCheckboxInput({ initialValue, ...rest }) {

166− return useFirstOf(

167− useForm([

168− {

169− type: 'checkbox',

170− ...rest,

171− },

172− ])

173− );

174−}

175−

176−export function useSelectInput({ initialValue, options, ...rest }) {

177− return useFirstOf(

178− useForm([

179− {

180− type: 'select',

181− validators: useMemo(

182− () => [

183− validateOneOf(options.map(option => option.value)),

184− validateNotEmpty,

185− ],

186− [options]

187− ),

188− options,

189− initialValue: initialValue || options[0].value,

190− ...rest,

191− },

192− ])

193− );

194−}

195−

196107const kAddressValidators = [

197108 validateEthereumAddress,

198109 validateNotNullAddress,

src/views/Admin/AdminSetProxy.js+86−57

@@ -1,6 +1,6 @@

1−import React, { useCallback, useEffect } from 'react';

1+import React, { useCallback, useMemo } from 'react';

22import cn from 'classnames';

3−import { Grid, Text, Input, Flex, ToggleInput } from 'indigo-react';

3+import { Grid, Text, Flex, ToggleInput } from 'indigo-react';

44import * as azimuth from 'azimuth-js';

66import { useNetwork } from 'store/network';

@@ -16,12 +16,18 @@ import * as need from 'lib/need';

1616import { useLocalRouter } from 'lib/LocalRouter';

1717import { ETH_ZERO_ADDR, eqAddr, isZeroAddress } from 'lib/wallet';

1818import capitalize from 'lib/capitalize';

19−import { useAddressInput, useCheckboxInput } from 'lib/useInputs';

2019import useEthereumTransaction from 'lib/useEthereumTransaction';

2120

2221import ViewHeader from 'components/ViewHeader';

2322import InlineEthereumTransaction from 'components/InlineEthereumTransaction';

2423import { GAS_LIMITS } from 'lib/constants';

24+import {

25+ composeValidator,

26+ buildCheckboxValidator,

27+ buildAddressValidator,

28+ AddressInput,

29+} from 'form/Inputs';

30+import BridgeForm from 'form/BridgeForm';

2531

2632const proxyFromDetails = (details, contracts, proxyType) => {

2733 switch (proxyType) {

@@ -107,41 +113,41 @@ export default function AdminSetProxy() {

107113 bind,

108114 } = useSetProxy(data.proxyType);

109115

110− const [unsetInput, { data: isUnsetting }] = useCheckboxInput({

111− name: 'unset',

112− label: 'Unset',

113− inverseLabel: 'Specify',

114− initialValue: false,

115− disabled: inputsLocked,

116− });

117− const [

118− addressInput,

119− { pass: validAddress, data: address },

120− { reset: resetAddress },

121− ] = useAddressInput({

122− name: 'address',

123− label: `New ${properProxyType} Address`,

124− disabled: inputsLocked || isUnsetting,

125− });

126−

127− useEffect(() => {

128− if (isUnsetting) {

129− unset();

130− resetAddress();

131− } else if (validAddress) {

132− construct(address);

133− } else {

134− unconstruct();

116+ const validateForm = useCallback((values, errors) => {

117+ if (!values.unset && errors.address) {

118+ return errors;

135119 }

136− }, [

137− validAddress,

138− address,

139− construct,

140− isUnsetting,

141− unset,

142− unconstruct,

143− resetAddress,

144− ]);

120+

121+ return {};

122+ }, []);

123+

124+ const validate = useMemo(

125+ () =>

126+ composeValidator(

127+ {

128+ unset: buildCheckboxValidator(),

129+ address: buildAddressValidator(),

130+ },

131+ validateForm

132+ ),

133+ [validateForm]

134+ );

135+

136+ const onValues = useCallback(

137+ ({ valid, values, form }) => {

138+ if (valid) {

139+ if (values.unset) {

140+ unset();

141+ form.change('address', '');

142+ } else {

143+ construct(values.address);

144+ }

145+ } else {

146+ unconstruct();

147+ }

148+ },

149+ [construct, unconstruct, unset]

150+ );

145151

146152 const proxyAddress = proxyFromDetails(_details, _contracts, data.proxyType);

147153 const isProxySet = !isZeroAddress(proxyAddress);

@@ -169,27 +175,50 @@ export default function AdminSetProxy() {

169175 {proxyAddressLabel}

170176 </Grid.Item>

171177

172− <Grid.Item full as={Flex} row justify="between" align="center">

173− <Flex.Item

174− flex

175− as={Text}

176− className={cn('mono', {

177− black: !completed && isProxySet,

178− gray4: !completed && !isProxySet,

179− green3: completed,

180− })}>

181− {isProxySet ? proxyAddress : 'Unset'}

182− </Flex.Item>

183− {!completed && isProxySet && (

184− <Flex.Item as={ToggleInput} {...unsetInput} />

178+ <BridgeForm

179+ validate={validate}

180+ onValues={onValues}

181+ onSubmit={() => {}}

182+ initialValues={{ unset: false }}>

183+ {({ handleSubmit, values }) => (

184+ <>

185+ <Grid.Item full as={Flex} row justify="between" align="center">

186+ <Flex.Item

187+ flex

188+ as={Text}

189+ className={cn('mono', {

190+ black: !completed && isProxySet,

191+ gray4: !completed && !isProxySet,

192+ green3: completed,

193+ })}>

194+ {isProxySet ? proxyAddress : 'Unset'}

195+ </Flex.Item>

196+ {!completed && isProxySet && (

197+ <Flex.Item

198+ as={ToggleInput}

199+ name="unset"

200+ label="Unset"

201+ inverseLabel="Specify"

202+ disabled={inputsLocked}

203+ />

204+ )}

205+ </Grid.Item>

206+

207+ {completed ? (

208+ <Grid.Item full className="mb4" />

209+ ) : (

210+ <Grid.Item

211+ full

212+ as={AddressInput}

213+ className="mv4"

214+ name="address"

215+ label={`New ${properProxyType} Address`}

216+ disabled={inputsLocked || values.unset}

217+ />

218+ )}

219+ </>

185220 )}

186− </Grid.Item>

187−

188− {completed ? (

189− <Grid.Item full className="mb4" />

190− ) : (

191− <Grid.Item full as={Input} {...addressInput} className="mv4" />

192− )}

221+ </BridgeForm>

193222

194223 <Grid.Item

195224 full

src/views/Admin/Reticket/ReticketVerify.js+35−21

@@ -1,12 +1,17 @@

11import React, { useCallback, useMemo } from 'react';

2−import { Input, Text, Grid } from 'indigo-react';

2+import { Text, Grid } from 'indigo-react';

4−import { useTicketInput } from 'lib/useInputs';

54import { useLocalRouter } from 'lib/LocalRouter';

65import { validateExactly } from 'lib/validators';

76import { isDevelopment } from 'lib/flags';

9−import { ForwardButton } from 'components/Buttons';

8+import BridgeForm from 'form/BridgeForm';

9+import {

10+ TicketInput,

11+ composeValidator,

12+ buildTicketValidator,

13+} from 'form/Inputs';

14+import SubmitButton from 'form/SubmitButton';

1015

1116const STUB_VERIFY_TICKET = isDevelopment;

1217

@@ -14,17 +19,15 @@ export default function ReticketVerify({ newWallet }) {

1419 const { push, names } = useLocalRouter();

1520

1621 const ticket = newWallet.value.wallet.ticket;

17− const validators = useMemo(

18− () => [validateExactly(ticket, 'Does not match expected master ticket.')],

22+ const validate = useMemo(

23+ () =>

24+ composeValidator({

25+ ticket: buildTicketValidator([

26+ validateExactly(ticket, 'Does not match expected master ticket.'),

27+ ]),

28+ }),

1929 [ticket]

2030 );

21− const [ticketInput, { pass }] = useTicketInput({

22− name: 'ticket',

23− label: 'New master ticket',

24− initialValue: STUB_VERIFY_TICKET ? ticket : undefined,

25− autoFocus: true,

26− validators,

27− });

2831

2932 const goExecute = useCallback(() => push(names.EXECUTE), [push, names]);

3033

@@ -33,15 +36,26 @@ export default function ReticketVerify({ newWallet }) {

3336 <Grid.Item full as={Text}>

3437 Verify New Master Ticket

3538 </Grid.Item>

36− <Grid.Item full as={Input} {...ticketInput} />

37− <Grid.Item

38− full

39− as={ForwardButton}

40− solid

41− disabled={!pass}

42− onClick={goExecute}>

43− Verify & Reticket

44− </Grid.Item>

39+ <BridgeForm

40+ validate={validate}

41+ onSubmit={goExecute}

42+ initialVaues={{

43+ ticket: STUB_VERIFY_TICKET ? ticket : 'undefined',

44+ }}>

45+ {({ handleSubmit }) => (

46+ <>

47+ <Grid.Item

48+ full

49+ as={TicketInput}

50+ name="ticket"

51+ label="New master ticket"

52+ />

53+ <Grid.Item full as={SubmitButton} handleSubmit={handleSubmit}>

54+ Verify & Reticket

55+ </Grid.Item>

56+ </>

57+ )}

58+ </BridgeForm>

4559 </Grid>

4660 );

4761}

src/views/Disclaimer.js+25−16

@@ -1,24 +1,26 @@

1−import React, { useCallback } from 'react';

1+import React, { useCallback, useMemo } from 'react';

22import cn from 'classnames';

33import { Grid, H3, B, Text, CheckboxInput } from 'indigo-react';

5−import { useCheckboxInput } from 'lib/useInputs';

65import { useHistory } from 'store/history';

76import useHasDisclaimed from 'lib/useHasDisclaimed';

98import View from 'components/View';

10−import { ForwardButton } from 'components/Buttons';

119import WarningBox from 'components/WarningBox';

10+import BridgeForm from 'form/BridgeForm';

11+import SubmitButton from 'form/SubmitButton';

12+import { composeValidator, buildCheckboxValidator } from 'form/Inputs';

1213

1314const TEXT_STYLE = 'f5';

1415

1516export default function ActivateDisclaimer() {

1617 const { pop } = useHistory();

1718 const [, setHasDisclaimed] = useHasDisclaimed();

18− const [understoodInput, { data: isUnderstood }] = useCheckboxInput({

19− name: 'checkbox',

20− label: 'I acknowledge and understand these rights',

21− });

19+

20+ const validate = useMemo(

21+ () => composeValidator({ checkbox: buildCheckboxValidator(true) }),

22+ []

23+ );

2224

2325 const goBack = useCallback(async () => {

2426 setHasDisclaimed(true);

@@ -76,15 +78,22 @@ export default function ActivateDisclaimer() {

7678 <Grid.Item full as={WarningBox}>

7779 Warning: Nobody but you can restore or reset your Master Ticket

7880 </Grid.Item>

79− <Grid.Item as={CheckboxInput} {...understoodInput} full />

80− <Grid.Item

81− as={ForwardButton}

82− disabled={!isUnderstood}

83− onClick={goBack}

84− solid

85− full>

86− Continue

87− </Grid.Item>

81+ <BridgeForm validate={validate} onSubmit={goBack}>

82+ {({ handleSubmit }) => (

83+ <>

84+ <Grid.Item

85+ full

86+ as={CheckboxInput}

87+ name="checkbox"

88+ label="I acknowledge and understand these rights"

89+ />

90+

91+ <Grid.Item full as={SubmitButton} handleSubmit={handleSubmit}>

92+ Continue

93+ </Grid.Item>

94+ </>

95+ )}

96+ </BridgeForm>

8897 </Grid>

8998 </View>

9099 );