f231080 · bridge · git.iko.soy

package-lock.json+8

compare with master

unifiedsplit

@@ -2143,6 +2143,14 @@

2143 "@xtuc/long": "4.2.2"

2144 }

2145 },

2146+ "@welldone-software/why-did-you-render": {

2147+ "version": "3.2.3",

2148+ "resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-3.2.3.tgz",

2149+ "integrity": "sha512-dUMkjsVsCfIo+IEmiMyb/FGKVbXrzbGqLvDTCn0ad5drNmD+BGoU/7Z+Nc7ckkV0F1G4vzs1XQrAcIxyPa8Ssw==",

2150+ "requires": {

2151+ "lodash": "^4"

2152+ }

2153+ },

2146 "@xtuc/ieee754": {

2154 "@xtuc/ieee754": {

2147 "version": "1.2.0",

2155 "version": "1.2.0",

2148 "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",

2156 "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",

package.json+1

@@ -17,6 +17,7 @@

17 "@hot-loader/react-dom": "^16.8.6",

18 "@ledgerhq/hw-app-eth": "^4.61.0",

19 "@ledgerhq/hw-transport-u2f": "^4.61.0",

20+ "@welldone-software/why-did-you-render": "^3.2.3",

20 "PaperCollateralRenderer": "github:urbit/PaperCollateralRenderer#rc-immediate",

21 "PaperCollateralRenderer": "github:urbit/PaperCollateralRenderer#rc-immediate",

21 "async-retry": "^1.2.3",

22 "async-retry": "^1.2.3",

22 "azimuth-js": "^0.15.1",

23 "azimuth-js": "^0.15.1",

src/Bridge.js+6−2

@@ -10,7 +10,7 @@ import Provider from 'store/Provider';

10import { ROUTE_NAMES } from 'lib/routeNames';

11import { ROUTES } from 'lib/router';

12import { NETWORK_TYPES } from 'lib/network';

13−import { walletFromMnemonic } from 'lib/wallet';

13+import { walletFromMnemonic, WALLET_TYPES } from 'lib/wallet';

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

15import useImpliedTicket from 'lib/useImpliedTicket';

16import useHasDisclaimed from 'lib/useHasDisclaimed';

@@ -41,7 +41,11 @@ function useInitialRoutes() {

41 const hasImpliedTicket = !!useImpliedTicket();

42

43 if (IS_STUBBED) {

44+ return [

44− return [{ key: ROUTE_NAMES.ACTIVATE }];

45+ { key: ROUTE_NAMES.LOGIN },

46+ // { key: ROUTE_NAMES.POINTS },

47+ // { key: ROUTE_NAMES.POINT },

48+ ];

45 }

49 }

46

50

47 return hasImpliedTicket

51 return hasImpliedTicket

src/form/Autosaver.js+2−2

@@ -11,8 +11,8 @@ export default function Autosaver({ onValues }) {

11 });

12

13 useEffect(() => {

14− if (valid && !validating) {

14+ if (!validating) {

15− onValues && onValues(values);

15+ onValues && onValues({ valid: valid && !validating, values });

16 }

17 }, [onValues, valid, validating, values]);

18

src/form/Condition.jsnew file+11

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

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

2+

3+// inspired by: https://codesandbox.io/s/lm4p3m92q

4+// renders childen if the relevant field's value is the test value

5+export default function Condition({ when, is, children }) {

6+ const {

7+ input: { value },

8+ } = useField(when, { subscription: { value: true } });

9+

10+ return value === is ? children : null;

11+}

src/form/Inputs.js+94−7

@@ -1,20 +1,37 @@

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

2import { Input, AccessoryIcon } from 'indigo-react';

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

4+

4import {

5import {

5 validateNotEmpty,

6 validateNotEmpty,

6 validateTicket,

7 validateTicket,

7 kDefaultValidator,

8 kDefaultValidator,

9+ validateMnemonic,

8} from 'lib/validators';

10} from 'lib/validators';

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

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

12+import { prependSig } from 'lib/transformers';

13+import { DEFAULT_HD_PATH } from 'lib/wallet';

14+

15+// TODO: why is `validate` called when routing away? new props?

16+// active not true: https://github.com/final-form/react-final-form/issues/558

10

17

18+const kEmptyValidators = []; // necessary for referential stability

19+const kEmptyTransformers = []; // also for referential stability

20+

21+const PLACEHOLDER_POINT = '~sampel-ponnym';

22+const PLACEHOLDER_HD_PATH = DEFAULT_HD_PATH;

23+const PLACEHOLDER_MNEMONIC =

24+ 'example crew supreme gesture quantum web media hazard theory mercy wing kitten';

11const PLACEHOLDER_TICKET = '~sampel-ticlyt-migfun-falmel';

25const PLACEHOLDER_TICKET = '~sampel-ticlyt-migfun-falmel';

26+const PLACEHOLDER_ADDRESS = '0x12345abcdeDB11D175F123F6891AA64F01c24F7d';

27+const PLACEHOLDER_PRIVATE_KEY =

28+ '0x12345abcdee6beb2f323fab48b432925c9785808d33a6ca6d7ba00b45e9370c3';

12

29

13const buildValidator = (

30const buildValidator = (

14 validators = [],

31 validators = [],

15 fn = x => undefined

32 fn = x => undefined

16) => async value => {

33) => async value => {

17− console.log('validating', value);

34+ // console.log('validating:', value);

18 return (

35 return (

19 compose(

36 compose(

20 ...validators,

37 ...validators,

@@ -24,19 +41,27 @@ const buildValidator = (

24};

41};

25

42

26const kTicketValidators = [validateTicket, validateNotEmpty];

43const kTicketValidators = [validateTicket, validateNotEmpty];

27−export function TicketInput({ name, validators = [], config = {}, ...rest }) {

44+export function TicketInput({

45+ name,

46+ validators = kEmptyValidators,

47+ transformers = kEmptyTransformers,

48+ validate,

49+ ...rest

50+}) {

28 const { valid, error, validating } = useField(name, {

51 const { valid, error, validating } = useField(name, {

29 subscription: { error: true, validating: true },

52 subscription: { error: true, validating: true },

30 });

53 });

31

54

32− const validate = useMemo(

55+ const _validate = useMemo(

33− () =>

34− buildValidator([...validators, ...kTicketValidators], config.validate),

56+ () => buildValidator([...validators, ...kTicketValidators], validate),

35− [config.validate, validators]

57+ [validate, validators]

36 );

58 );

37

59

60+ const _format = (value, name) => prependSig(value);

61+

38 return (

62 return (

39 <Input

63 <Input

64+ type="text"

40 name={name}

65 name={name}

41 placeholder={PLACEHOLDER_TICKET}

66 placeholder={PLACEHOLDER_TICKET}

42 accessory={

67 accessory={

@@ -48,9 +73,71 @@ export function TicketInput({ name, validators = [], config = {}, ...rest }) {

48 <AccessoryIcon.Success />

73 <AccessoryIcon.Success />

49 ) : null

74 ) : null

50 }

75 }

51− config={{ validate }}

76+ config={{ validate: _validate, format: _format }}

77+ mono

78+ {...rest}

79+ />

80+ );

81+}

82+

83+const kMnemonicValidators = [validateMnemonic, validateNotEmpty];

84+export function MnemonicInput({

85+ name,

86+ validators = kEmptyValidators,

87+ transformers = kEmptyTransformers,

88+ validate,

89+ ...rest

90+}) {

91+ const _validate = useMemo(

92+ () => buildValidator([...validators, ...kMnemonicValidators], validate),

93+ [validate, validators]

94+ );

95+

96+ return (

97+ <Input

98+ type="textarea"

99+ name={name}

100+ placeholder={PLACEHOLDER_MNEMONIC}

101+ config={{ validate: _validate }}

102+ autoComplete="off"

52 mono

103 mono

53 {...rest}

104 {...rest}

54 />

105 />

55 );

106 );

56}

107}

108+

109+const kHdPathValidators = [validateNotEmpty];

110+export function HdPathInput({

111+ name,

112+ validators = kEmptyValidators,

113+ transformers = kEmptyTransformers,

114+ validate,

115+ ...rest

116+}) {

117+ const _validate = useMemo(

118+ () => buildValidator([...validators, ...kHdPathValidators], validate),

119+ [validate, validators]

120+ );

121+

122+ return (

123+ <Input

124+ type="text"

125+ name={name}

126+ placeholder={PLACEHOLDER_HD_PATH}

127+ config={{ validate: _validate }}

128+ autoComplete="off"

129+ {...rest}

130+ />

131+ );

132+}

133+

134+export function PassphraseInput({ ...rest }) {

135+ return (

136+ <Input

137+ type="password"

138+ placeholder="Passphrase"

139+ autoComplete="off"

140+ {...rest}

141+ />

142+ );

143+}

src/form/SubmitButton.js+3−2

@@ -13,11 +13,12 @@ export default function SubmitButton({

13 handleSubmit,

14 ...rest

15}) {

16− const { valid, validating, submitting } = useFormState({

16+ const { valid, validating, submitting, submitError } = useFormState({

17 subscription: {

18 valid: true,

19 validating: true,

20 submitting: true,

21+ submitError: true,

21 },

22 },

22 });

23 });

23

24

@@ -29,7 +30,7 @@ export default function SubmitButton({

29 onClick={handleSubmit}

30 onClick={handleSubmit}

30 solid

31 solid

31 {...rest}>

32 {...rest}>

32− {children}

33+ {submitError ? 'Error submitting' : children}

33 </As>

34 </As>

34 );

35 );

35}

36}

src/index.js+4

@@ -3,4 +3,8 @@ import ReactDOM from 'react-dom';

3

4import Bridge from './Bridge';

5

6+if (process.env.NODE_ENV !== 'production') {

7+ require('@welldone-software/why-did-you-render')(React);

8+}

9+

6ReactDOM.render(<Bridge />, document.getElementById('root'));

10ReactDOM.render(<Bridge />, document.getElementById('root'));

src/indigo-react/components/CheckboxInput.js+16−28

@@ -2,6 +2,7 @@ import React from 'react';

2import cn from 'classnames';

3

4import Flex from './Flex';

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

5

6

6export default function CheckboxInput({

7export default function CheckboxInput({

7 // visuals

8 // visuals

@@ -9,30 +10,15 @@ export default function CheckboxInput({

9 label,

10 label,

10 className,

11 className,

11

12

12− // callbacks

13− onEnter,

14−

15− // state from hook

16− focused,

17− pass,

18− syncPass,

19− visiblyPassed,

20− error,

21− hintError,

22− data,

23− bind,

24− autoFocus,

25 disabled,

13 disabled,

26− touched,

14+}) {

15+ const {

16+ input,

17+ meta: { submitting },

18+ } = useField(name);

27

19

28− // ignored

20+ disabled = disabled || submitting;

29− initialValue,

30− validators,

31− transformers,

32

21

33− // extra

34− ...rest

35−}) {

36 return (

22 return (

37 <Flex

23 <Flex

38 row

24 row

@@ -50,11 +36,13 @@ export default function CheckboxInput({

50 {/* we totally hide the checkbox itself */}

36 {/* we totally hide the checkbox itself */}

51 <Flex.Item

37 <Flex.Item

52 as="input"

38 as="input"

53− {...rest}

39+ type="checkbox"

54− className={cn('super-hidden')}

40+ className="super-hidden"

55 id={name}

41 id={name}

56− name={name}

42+ {...input}

57− {...bind}

43+ // TODO: this seems hacky... final-form should have a standard way to do this

44+ checked={input.value}

45+ onClick={e => input.onChange(!input.value)}

58 />

46 />

59 {/* and then display a prettier one in its stead */}

47 {/* and then display a prettier one in its stead */}

60 <Flex.Item

48 <Flex.Item

@@ -67,14 +55,14 @@ export default function CheckboxInput({

67 align="center"

55 align="center"

68 className={cn('b1 p1 mr3', {

56 className={cn('b1 p1 mr3', {

69 'bg-gray1': disabled,

57 'bg-gray1': disabled,

70− 'bg-black white b-black': !disabled && data,

58+ 'bg-black white b-black': !disabled && input.value,

71− 'bg-white black b-black': !disabled && !data,

59+ 'bg-white black b-black': !disabled && !input.value,

72 })}

60 })}

73 style={{

61 style={{

74 height: '14px',

62 height: '14px',

75 width: '14px',

63 width: '14px',

76 }}>

64 }}>

77− {data && '✓'}

65+ {input.value && '✓'}

78 </Flex>

66 </Flex>

79 {label}

67 {label}

80 </Flex.Item>

68 </Flex.Item>

src/lib/transformers.js+2−1

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

1// import { fill } from './lib'

2

3−export const prependSig = s => (s.charAt(0) !== '~' ? `~${s}` : s);

3+export const prependSig = (s = '') =>

4+ s.length && s.charAt(0) !== '~' ? `~${s}` : s;

4

5

5export const convertToNumber = s => {

6export const convertToNumber = s => {

6 try {

7 try {

src/store/wallet.js+6−1

@@ -33,7 +33,12 @@ const DEFAULT_WALLET_TYPE = WALLET_TYPES.TICKET;

33// JSON keystore files, and Metamask authentication, it wraps an

34// 'EthereumWallet'.

35function _useWallet(initialWallet = Nothing(), initialMnemonic = Nothing()) {

36− const [walletType, _setWalletType] = useState(DEFAULT_WALLET_TYPE);

36+ const [walletType, _setWalletType] = useState(() =>

37+ initialMnemonic.matchWith({

38+ Nothing: () => DEFAULT_WALLET_TYPE,

39+ Just: () => WALLET_TYPES.MNEMONIC,

40+ })

41+ );

37 const [walletHdPath, setWalletHdPath] = useState(DEFAULT_HD_PATH);

42 const [walletHdPath, setWalletHdPath] = useState(DEFAULT_HD_PATH);

38 const [wallet, _setWallet] = useState(initialWallet);

43 const [wallet, _setWallet] = useState(initialWallet);

39 const [urbitWallet, _setUrbitWallet] = useState(Nothing());

44 const [urbitWallet, _setUrbitWallet] = useState(Nothing());

src/views/Activate/ActivateCode.js+4−5

@@ -87,7 +87,7 @@ export default function ActivateCode() {

87 }

88

89 const point = parseInt(incoming[0], 10);

90− // setDerivedPoint(Just(point));

90+ setDerivedPoint(Just(point));

91 cachedPoint.current = point;

92 } else {

93 return (

@@ -96,18 +96,17 @@ export default function ActivateCode() {

96 );

97 }

98 },

99− [contracts]

99+ [contracts, setDerivedPoint]

100 );

101

102 const onSubmit = useCallback(

103 async values => {

104 setInviteWallet(cachedInviteWallet.current);

105− setDerivedPoint(Just(cachedPoint.current));

106 setDerivedWallet(Just(await generateWallet(cachedPoint)));

105 setDerivedWallet(Just(await generateWallet(cachedPoint)));

107

106

108 goToPassport();

107 goToPassport();

109 },

108 },

110− [goToPassport, setDerivedPoint, setDerivedWallet, setInviteWallet]

109+ [goToPassport, setDerivedWallet, setInviteWallet]

111 );

110 );

112

111

113 return (

112 return (

@@ -127,7 +126,7 @@ export default function ActivateCode() {

127 as={TicketInput}

126 as={TicketInput}

128 name="ticket"

127 name="ticket"

129 label="Activation Code"

128 label="Activation Code"

130− config={{ validate }}

129+ validate={validate}

131 autoFocus

130 autoFocus

132 />

131 />

133

132

src/views/Activate/PassportVerify.js+32−20

@@ -1,13 +1,14 @@

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

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

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

3

4import * as need from 'lib/need';

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

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

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

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

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

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

9

8

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

9+import SubmitButton from 'form/SubmitButton';

10+import { TicketInput } from 'form/Inputs';

11+import BridgeForm from 'form/BridgeForm';

11

12

12import { useActivateFlow } from './ActivateFlow';

13import { useActivateFlow } from './ActivateFlow';

13import PassportView from './PassportView';

14import PassportView from './PassportView';

@@ -24,13 +25,8 @@ export default function PassportVerify({ className }) {

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

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

25 [ticket]

26 [ticket]

26 );

27 );

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

28+

28− name: 'ticket',

29+ const onSubmit = useCallback(() => goToTransfer(), [goToTransfer]);

29− label: 'Master Ticket',

30− initialValue: STUB_VERIFY_TICKET ? ticket : undefined,

31− autoFocus: true,

32− validators,

33− });

34

30

35 return (

31 return (

36 <PassportView header="Verify Passport" step={2} className={className}>

32 <PassportView header="Verify Passport" step={2} className={className}>

@@ -40,16 +36,32 @@ export default function PassportVerify({ className }) {

40 should be a folder of image files. One of them is your Master Ticket.

36 should be a folder of image files. One of them is your Master Ticket.

41 Open it and enter the 4 word phrase below (with hyphens).

37 Open it and enter the 4 word phrase below (with hyphens).

42 </Grid.Item>

38 </Grid.Item>

39+ <BridgeForm

40+ onSubmit={onSubmit}

41+ initialValues={{

42+ ticket: STUB_VERIFY_TICKET ? ticket : undefined,

43+ }}>

44+ {({ handleSubmit }) => (

45+ <>

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

46+ <Grid.Item

47+ full

48+ as={TicketInput}

49+ name="ticket"

50+ label="Master Ticket"

51+ validators={validators}

52+ autoFocus

53+ />

54+

44− <Grid.Item

55+ <Grid.Item

45− full

56+ full

46− className="mt3"

57+ className="mt3"

47− as={ForwardButton}

58+ as={SubmitButton}

48− disabled={!pass}

59+ handleSubmit={handleSubmit}>

49− onClick={goToTransfer}

50− solid>

51− Verify

60+ Verify

52− </Grid.Item>

61+ </Grid.Item>

62+ </>

63+ )}

64+ </BridgeForm>

53 </Grid>

65 </Grid>

54 </PassportView>

66 </PassportView>

55 );

67 );

src/views/Login/Mnemonic.js+62−52

@@ -1,18 +1,15 @@

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

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

2import cn from 'classnames';

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

4−import { Grid, Input, CheckboxInput } from 'indigo-react';

4+import { Grid, CheckboxInput } from 'indigo-react';

5

6import { useWallet } from 'store/wallet';

7

8−import {

9− usePassphraseInput,

10− useMnemonicInput,

11− useHdPathInput,

12− useCheckboxInput,

13−} from 'lib/useInputs';

14import { walletFromMnemonic, WALLET_TYPES } from 'lib/wallet';

8import { walletFromMnemonic, WALLET_TYPES } from 'lib/wallet';

15import useLoginView from 'lib/useLoginView';

9import useLoginView from 'lib/useLoginView';

10+import { MnemonicInput, HdPathInput, PassphraseInput } from 'form/Inputs';

11+import BridgeForm from 'form/BridgeForm';

12+import Condition from 'form/Condition';

16

13

17export default function Mnemonic({ className }) {

14export default function Mnemonic({ className }) {

18 useLoginView(WALLET_TYPES.MNEMONIC);

15 useLoginView(WALLET_TYPES.MNEMONIC);

@@ -24,61 +21,74 @@ export default function Mnemonic({ className }) {

24 setWalletHdPath,

21 setWalletHdPath,

25 } = useWallet();

22 } = useWallet();

26

23

27− const [advancedInput, { data: useAdvanced }] = useCheckboxInput({

28− name: 'advanced',

29− label: 'Passphrase & HD Path',

30− initialValue: false,

31− });

32−

33− const [mnemonicInput, { pass, data: mnemonic }] = useMnemonicInput({

34− name: 'mnemonic',

35− label: 'BIP39 Mnemonic',

36− autoFocus: true,

37− });

38−

39− const [passphraseInput, { data: passphrase }] = usePassphraseInput({

40− name: 'passphrase',

41− label: 'Wallet Passphrase',

42− });

43−

44− const [hdPathInput, { data: hdPath }] = useHdPathInput({

45− name: 'hdpath',

46− label: 'HD Path',

47− initialValue: walletHdPath,

48− });

49−

50 // when the properties change, re-derive wallet and set global state

24 // when the properties change, re-derive wallet and set global state

51− useEffect(() => {

25+ const onValues = useCallback(

52− if (pass) {

26+ ({ valid, values }) => {

27+ console.log(valid, values);

28+ if (valid) {

53− setWalletHdPath(hdPath);

29+ setWalletHdPath(values.hdpath);

54− setAuthMnemonic(Just(mnemonic));

30+ setAuthMnemonic(Just(values.mnemonic));

31+ setWallet(

55− setWallet(walletFromMnemonic(mnemonic, hdPath, passphrase));

32+ walletFromMnemonic(values.mnemonic, values.hdpath, values.passphrase)

33+ );

56− } else {

34+ } else {

57− setAuthMnemonic(Nothing());

35+ setAuthMnemonic(Nothing());

58− setWallet(Nothing());

36+ setWallet(Nothing());

59− }

37+ }

60− }, [

38+ },

61− pass,

62− mnemonic,

63− passphrase,

64− hdPath,

65− setWallet,

66− setAuthMnemonic,

67− setWalletHdPath,

39+ [setAuthMnemonic, setWallet, setWalletHdPath]

68− ]);

40+ );

69

41

70 return (

42 return (

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

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

44+ <BridgeForm

45+ onValues={onValues}

46+ onSubmit={() => undefined}

47+ initialValues={{ hdpath: walletHdPath, advanced: false }}>

48+ {() => (

49+ <>

72− <Grid.Item full as={Input} {...mnemonicInput} />

50+ <Grid.Item

51+ full

52+ as={MnemonicInput}

53+ name="mnemonic"

54+ label="BIP39 Mnemonic"

55+ />

56+

57+ <Condition when="advanced" is={true}>

58+ <Grid.Item

59+ full

60+ as={PassphraseInput}

61+ name="passphrase"

62+ label="Passphrase"

63+ />

64+

65+ <Grid.Item

66+ full

67+ as={HdPathInput}

68+ name="hdpath"

69+ label="HD Path"

70+ autoFocus

71+ />

72+ </Condition>

73+

74+ <Grid.Item

75+ full

76+ as={CheckboxInput}

77+ name="advanced"

78+ label="Passphrase & HD Path"

79+ />

80+ </>

81+ )}

82+ </BridgeForm>

73

83

74− {useAdvanced && (

84+ {/* {useAdvanced && (

75 <>

85 <>

76 <Grid.Item full as={Input} {...passphraseInput} />

86 <Grid.Item full as={Input} {...passphraseInput} />

77 <Grid.Item full as={Input} {...hdPathInput} />

87 <Grid.Item full as={Input} {...hdPathInput} />

78 </>

88 </>

79 )}

89 )}

80

90

81− <Grid.Item as={CheckboxInput} {...advancedInput} full />

91+ <Grid.Item as={CheckboxInput} {...advancedInput} full /> */}

82 </Grid>

92 </Grid>

83 );

93 );

84}

94}