e8991de · bridge · git.iko.soy

git.iko.soy/bridge

fix: implement warnings

commite8991deef9f4860d82ea68df323ef4290e515630 authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateTue 6 Aug 2019, 12:35 (7 years ago) parente006bf2

8 files changed+78−19

compare with master

unifiedsplit

src/components/Highlighted.js+14−6 src/form/BridgeForm.js+3 src/form/WarningEngine.js+15 src/indigo-react/components/Input.js+16−2 src/indigo-react/components/SelectInput.js+17−3 src/views/Login/Ledger.js+1−1 src/views/Login/Ticket.js+11−6 src/views/Login/Trezor.js+1−1

src/components/Highlighted.js+14−6

@@ -1,13 +1,21 @@

11import React from 'react';

22import cn from 'classnames';

4−export default function Highlighted({ warning = false, ...rest }) {

4+export default function Highlighted({

5+ as: As = 'span',

6+ className,

7+ warning = false,

8+ ...rest

9+}) {

510 return (

6− <span

7− className={cn({

8− red3: warning,

9− green3: !warning,

10− })}

11+ <As

12+ className={cn(

13+ {

14+ red3: warning,

15+ green3: !warning,

16+ },

17+ className

18+ )}

1119 {...rest}

1220 />

1321 );

src/form/BridgeForm.js+3

@@ -6,6 +6,7 @@ import { noop } from 'lodash';

77import ValuesHandler from './ValuesHandler';

88import ValidationPauser from './ValidationPauser';

9+import WarningEngine from './WarningEngine';

910

1011/**

1112 * BridgeForm adds nice-to-haves for every form in bridge.

@@ -20,6 +21,7 @@ export default function BridgeForm({

2021 onValues,

2122 onSubmit = noop,

2223 afterSubmit = noop,

24+ warnings,

2325 ...rest

2426}) {

2527 const _onSubmit = useCallback(

@@ -41,6 +43,7 @@ export default function BridgeForm({

4143 {...rest}>

4244 {formProps => (

4345 <>

46+ {warnings && <WarningEngine warnings={warnings} />}

4447 <ValidationPauser />

4548 {children(formProps)}

4649 {onValues && <ValuesHandler onValues={onValues} />}

src/form/WarningEngine.jsnew file+15

@@ -0,0 +1,15 @@

1+import { useEffect } from 'react';

2+import { useForm } from 'react-final-form';

3+import { map } from 'lodash';

5+export default function WarningEngine({ warnings }) {

6+ const form = useForm();

8+ useEffect(() => {

9+ map(warnings, (warning, name) =>

10+ form.mutators.setFieldData(name, { warning })

11+ );

12+ }, [form, warnings]);

13+

14+ return null;

15+}

src/indigo-react/components/Input.js+16−2

@@ -1,9 +1,9 @@

11import React from 'react';

22import cn from 'classnames';

3+import { useField } from 'react-final-form';

45import Flex from './Flex';

56import { ErrorText } from './Typography';

6−import { useField } from 'react-final-form';

88export default function Input({

99 // visuals

@@ -26,7 +26,14 @@ export default function Input({

2626}) {

2727 const {

2828 input,

29− meta: { active, error, submitting, touched, valid },

29+ meta: {

30+ active,

31+ error,

32+ submitting,

33+ touched,

34+ valid,

35+ data: { warning },

36+ },

3037 } = useField(name, config);

3138

3239 disabled = disabled || submitting;

@@ -101,6 +108,13 @@ export default function Input({

101108 </div>

102109 )}

103110 </Flex.Item>

111+

112+ {warning && (

113+ <Flex.Item as={ErrorText} className="mv1">

114+ {warning}

115+ </Flex.Item>

116+ )}

117+

104118 {touched && !active && error && (

105119 <Flex.Item as={ErrorText} className="mv1">

106120 {error}

src/indigo-react/components/SelectInput.js+17−3

@@ -1,11 +1,11 @@

11import React, { useCallback, useRef, useState } from 'react';

22import cn from 'classnames';

3+import { useField } from 'react-final-form';

4+import useOnClickOutside from 'indigo-react/lib/useOnClickOutside';

46import Flex from './Flex';

57import { ErrorText } from './Typography';

6−import useOnClickOutside from 'indigo-react/lib/useOnClickOutside';

78import AccessoryIcon from './AccessoryIcon';

8−import { useField } from 'react-final-form';

1010// NOTE: if we really care about accessibility, we should pull in a dependency

1111export default function SelectInput({

@@ -19,7 +19,14 @@ export default function SelectInput({

1919}) {

2020 const {

2121 input,

22− meta: { active, error, submitting, touched, valid },

22+ meta: {

23+ active,

24+ error,

25+ submitting,

26+ touched,

27+ valid,

28+ data: { warning },

29+ },

2330 } = useField(name, {

2431 type: 'select',

2532 });

@@ -121,6 +128,13 @@ export default function SelectInput({

121128 </Flex>

122129 )}

123130 </Flex.Item>

131+

132+ {warning && (

133+ <Flex.Item as={ErrorText} className="mv1">

134+ {warning}

135+ </Flex.Item>

136+ )}

137+

124138 {touched && !active && error && (

125139 <Flex.Item as={ErrorText} className="mv1">

126140 {error}

src/views/Login/Ledger.js+1−1

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

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

22import cn from 'classnames';

3−import { Just, Nothing } from 'folktale/maybe';

3+import { Just } from 'folktale/maybe';

44import {

55 P,

66 Text,

src/views/Login/Ticket.js+11−6

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

3030import FormError from 'form/FormError';

3131

3232import ContinueButton from './ContinueButton';

33+import useSetState from 'lib/useSetState';

3334

3435export default function Ticket({ className, goHome }) {

3536 useLoginView(WALLET_TYPES.TICKET);

@@ -38,6 +39,7 @@ export default function Ticket({ className, goHome }) {

3839 const { setUrbitWallet } = useWallet();

3940 const { setPointCursor } = usePointCursor();

4041 const impliedPoint = useImpliedPoint();

42+ const [warnings, addWarning] = useSetState();

4143

4244 const cachedUrbitWallet = useRef(Nothing());

4345

@@ -88,11 +90,13 @@ export default function Ticket({ className, goHome }) {

8890 ),

8991 ]);

9092

91− if (!isOwner && !isTransferProxy) {

92− // notify the user, but allow login regardless

93− // TODO: warnings

94− // 'This ticket is not the owner of or transfer proxy for this point.'

95− }

93+ const noPermissions = !isOwner && !isTransferProxy;

94+ // notify the user, but allow login regardless

95+ addWarning({

96+ point: noPermissions

97+ ? 'This wallet is not the owner or transfer proxy for this point.'

98+ : null,

99+ });

96100 } catch (error) {

97101 console.error(error);

98102 return {

@@ -102,7 +106,7 @@ export default function Ticket({ className, goHome }) {

102106 };

103107 }

104108 },

105− [contracts]

109+ [addWarning, contracts]

106110 );

107111

108112 const validate = useMemo(

@@ -147,6 +151,7 @@ export default function Ticket({ className, goHome }) {

147151 return (

148152 <Grid className={cn('mt4', className)}>

149153 <BridgeForm

154+ warnings={warnings}

150155 validate={validate}

151156 onValues={onValues}

152157 afterSubmit={goHome}

src/views/Login/Trezor.js+1−1

@@ -1,5 +1,5 @@

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

2−import { Just, Nothing } from 'folktale/maybe';

2+import { Just } from 'folktale/maybe';

33import * as bip32 from 'bip32';

44import { times } from 'lodash';

55import TrezorConnect from 'trezor-connect';