e7ae14d · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

feat: add disabledDetails to admin buttons

e7ae14dMatt Condon (shrugs)7 years ago

src/components/DownloadKeyfileButton.js+22−2

compare with master

unifiedsplit

@@ -1,12 +1,13 @@

1import React from 'react';

2−

2+import { Flex, B } from 'indigo-react';

3−import { DownloadButton } from 'components/Buttons';

5import { usePointCursor } from 'store/pointCursor';

4import { usePointCursor } from 'store/pointCursor';

7import useKeyfileGenerator from 'lib/useKeyfileGenerator';

6import useKeyfileGenerator from 'lib/useKeyfileGenerator';

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

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

9+import { DownloadButton } from 'components/Buttons';

10+

10export default function DownloadKeyfileButton({

11export default function DownloadKeyfileButton({

11 networkSeed,

12 networkSeed,

12 className,

13 className,

@@ -22,8 +23,27 @@ export default function DownloadKeyfileButton({

23 return (

24 return (

24 <DownloadButton

25 <DownloadButton

26+ as="span"

25 className={className}

27 className={className}

26 disabled={downloaded || !available}

28 disabled={downloaded || !available}

29+ disabledDetail={

30+ !generating &&

31+ !available && (

32+ // TODO: make this a toggle-able 'help' or something

33+ <Flex col>

34+ <Flex.Item as={B} className="wrap ws-normal">

35+ · You are using nondeterministic networking keys. To download your

36+ Arvo keyfile, either:

37+ </Flex.Item>

38+ <Flex.Item as={B} className="wrap ws-normal">

39+ a) Reset your networking keys, or

40+ </Flex.Item>

41+ <Flex.Item as={B} className="wrap ws-normal">

42+ b) Reticket to get deterministic networking keys.

43+ </Flex.Item>

44+ </Flex>

45+ )

46+ }

27 loading={generating}

47 loading={generating}

28 onClick={download}

48 onClick={download}

29 {...rest}>

49 {...rest}>

src/indigo-react/components/Button.js+12−9

@@ -10,6 +10,7 @@ export default function Button({

10 solid = false,

11 success = false,

12 disabled = false,

13+ disabledDetail,

13 detail,

14 detail,

14 className,

15 className,

15 accessory = '→',

16 accessory = '→',

@@ -33,6 +34,11 @@ export default function Button({

33 'bg-gray3': !success && solid && disabled,

34 'bg-gray3': !success && solid && disabled,

34 'bg-transparent': !success && !solid,

35 'bg-transparent': !success && !solid,

35 },

36 },

37+ {

38+ white: solid,

39+ black: !solid && !disabled,

40+ gray4: !solid && disabled,

41+ },

36 className

42 className

37 )}

43 )}

38 style={{

44 style={{

@@ -43,15 +49,7 @@ export default function Button({

43 }}

49 }}

44 onClick={!disabled && onClick ? onClick : undefined}

50 onClick={!disabled && onClick ? onClick : undefined}

45 {...rest}>

51 {...rest}>

46− <Grid.Item

47− full

48− as={Flex}

49− justify="between"

52+ <Grid.Item full as={Flex} justify="between">

50− className={cn({

51− white: solid,

52− black: !solid && !disabled,

53− gray4: !solid && disabled,

54− })}>

55 <span>{children}</span>

53 <span>{children}</span>

56 <div className={cn('pl4')}>{accessory}</div>

54 <div className={cn('pl4')}>{accessory}</div>

57 </Grid.Item>

55 </Grid.Item>

@@ -60,6 +58,11 @@ export default function Button({

60 {detail}

58 {detail}

61 </Grid.Item>

59 </Grid.Item>

62 )}

60 )}

61+ {disabled && disabledDetail && (

62+ <Grid.Item full className="f6 black mt1">

63+ {disabledDetail}

64+ </Grid.Item>

65+ )}

63 </Grid>

66 </Grid>

64 );

67 );

65}

68}

src/lib/constants.js+1

@@ -17,6 +17,7 @@ const GALAXY_ENTROPY_BITS = 384;

18const SEED_ENTROPY_BITS = 128;

20+// the null result if a key is unset within azimuth

20const ZERO_KEY =

21const ZERO_KEY =

21 '0x0000000000000000000000000000000000000000000000000000000000000000';

22 '0x0000000000000000000000000000000000000000000000000000000000000000';

src/lib/useKeyfileGenerator.js+1−3

@@ -21,7 +21,7 @@ export default function useKeyfileGenerator(point, manualNetworkSeed) {

21 const { urbitWallet, wallet, authMnemonic } = useWallet();

23 const [downloaded, setDownloaded] = useState(false);

24− const [generating, setGenerating] = useState(false);

24+ const [generating, setGenerating] = useState(true);

25 const [keyfile, setKeyfile] = useState(false);

27 const _address = need.wallet(wallet).address;

@@ -38,8 +38,6 @@ export default function useKeyfileGenerator(point, manualNetworkSeed) {

38 (isOwner || isManagementProxy) && hasNetworkingKeys && keyfile;

40 const generate = useCallback(async () => {

41− setGenerating(true);

42−

43 console.log('generating for network revision', networkRevision);

41 console.log('generating for network revision', networkRevision);

45 const networkSeed = manualNetworkSeed

43 const networkSeed = manualNetworkSeed

src/views/Admin/AdminHome.js+7−2

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

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

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

3−import { Grid } from 'indigo-react';

3+import { Grid, B } from 'indigo-react';

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

6import { ForwardButton } from 'components/Buttons';

@@ -47,7 +47,12 @@ export default function AdminHome() {

47 as={ForwardButton}

48 disabled={!canDownloadPassport}

49 onClick={goRedownload}

50− detail="Re-download your paper wallet">

50+ detail="Re-download your paper wallet"

51+ disabledDetail={

52+ <B className="wrap ws-normal">

53+ · Master Ticket Authentication required.

54+ </B>

55+ }>

51 Download Passport

56 Download Passport

52 </Grid.Item>

57 </Grid.Item>

53 <Grid.Divider />

58 <Grid.Divider />

src/views/Admin/AdminTransfer.js+60−13

@@ -1,18 +1,49 @@

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

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

2+import cn from 'classnames';

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

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

4+import * as azimuth from 'azimuth-js';

6+import { useNetwork } from 'store/network';

7+import { usePointCursor } from 'store/pointCursor';

9+import * as need from 'lib/need';

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

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

11+import { useAddressInput } from 'lib/useInputs';

12+import useCurrentPointName from 'lib/useCurrentPointName';

13+import useEthereumTransaction from 'lib/useEthereumTransaction';

14+import { GAS_LIMITS } from 'lib/constants';

5import ViewHeader from 'components/ViewHeader';

16import ViewHeader from 'components/ViewHeader';

6import MiniBackButton from 'components/MiniBackButton';

17import MiniBackButton from 'components/MiniBackButton';

7−import { GenerateButton } from 'components/Buttons';

18+import InlineEthereumTransaction from 'components/InlineEthereumTransaction';

8−import { useAddressInput } from 'lib/useInputs';

9−import useCurrentPointName from 'lib/useCurrentPointName';

11function useTransfer() {

20function useTransfer() {

21+ const { contracts } = useNetwork();

22+ const { pointCursor } = usePointCursor();

23+

24+ const _contracts = need.contracts(contracts);

25+ const _point = need.point(pointCursor);

26+

27+ const {

28+ construct: _construct,

29+ confirmed,

30+ inputsLocked,

31+ bind,

32+ } = useEthereumTransaction(GAS_LIMITS.TRANSFER);

33+

12− const transfer = useCallback(async () => {}, []);

34+ const construct = useCallback(

35+ address =>

36+ _construct(

37+ azimuth.ecliptic.setTransferProxy(_contracts, _point, address)

38+ ),

39+ [_construct, _contracts, _point]

40+ );

14 return {

42 return {

15− transfer,

43+ construct,

44+ confirmed,

45+ inputsLocked,

46+ bind,

16 };

47 };

17}

48}

@@ -20,12 +51,18 @@ export default function AdminTransfer() {

20 const { pop } = useLocalRouter();

51 const { pop } = useLocalRouter();

21 const name = useCurrentPointName();

52 const name = useCurrentPointName();

54+ const { construct, confirmed, inputsLocked, bind } = useTransfer();

23− const [addressInput, { pass }] = useAddressInput({

55+ const [addressInput, { pass, data: address }] = useAddressInput({

24 name: 'address',

56 name: 'address',

25 label: `Ethereum Address`,

57 label: `Ethereum Address`,

58+ disabled: inputsLocked,

26 });

59 });

28− const { transfer } = useTransfer();

61+ useEffect(() => {

62+ if (pass) {

63+ construct(address);

64+ }

65+ }, [pass, address, construct]);

30 return (

67 return (

31 <Grid>

68 <Grid>

@@ -33,15 +70,25 @@ export default function AdminTransfer() {

33 <Grid.Item full as={ViewHeader}>

70 <Grid.Item full as={ViewHeader}>

34 Transfer Point

71 Transfer Point

35 </Grid.Item>

72 </Grid.Item>

36− <Grid.Item full as={Text}>

73+ <Grid.Item

74+ full

75+ as={Text}

76+ className={cn('f5', {

77+ green3: confirmed,

78+ })}>

79+ {confirmed

80+ ? `${address} is now the Transfer Proxy for ${name} and can accept the transfer by logging into Multipass themselves. Until they accept your transfer, you will still have ownership over ${name}.`

37− Transfer {name} to a new owner.

81+ : `Transfer ${name} to a new owner.`}

38 </Grid.Item>

82 </Grid.Item>

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

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

42− <Grid.Item full as={GenerateButton} onClick={transfer} disabled={!pass}>

86+ <Grid.Item

43− Generate & Sign Transaction

87+ full

44− </Grid.Item>

88+ as={InlineEthereumTransaction}

89+ {...bind}

90+ onReturn={() => pop()}

91+ />

45 </Grid>

92 </Grid>

46 );

93 );

47}

94}

src/views/Login.js+31−19

@@ -1,27 +1,27 @@

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

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

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

4−

5import { H4, Grid } from 'indigo-react';

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

7−import Ticket from './Login/Ticket';

8−import Mnemonic from './Login/Mnemonic';

9−import Advanced from './Login/Advanced';

10−import Hardware from './Login/Hardware';

11−

12−import * as need from 'lib/need';

13−

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

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

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

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

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

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

17import { usePointCursor } from 'store/pointCursor';

9import { usePointCursor } from 'store/pointCursor';

11+import * as need from 'lib/need';

12+import { WALLET_TYPES } from 'lib/wallet';

13+

19import View from 'components/View';

14import View from 'components/View';

20import Tabs from 'components/Tabs';

15import Tabs from 'components/Tabs';

21import Crumbs from 'components/Crumbs';

16import Crumbs from 'components/Crumbs';

22import Footer from 'components/Footer';

17import Footer from 'components/Footer';

23import { ForwardButton, OfflineButton } from 'components/Buttons';

18import { ForwardButton, OfflineButton } from 'components/Buttons';

20+import Ticket from './Login/Ticket';

21+import Mnemonic from './Login/Mnemonic';

22+import Advanced from './Login/Advanced';

23+import Hardware from './Login/Hardware';

24+

25const NAMES = {

26 TICKET: 'TICKET',

27 MNEMONIC: 'MNEMONIC',

@@ -43,17 +43,37 @@ const OPTIONS = [

43 { text: 'Advanced', value: NAMES.ADVANCED },

44];

46+const walletTypeToViewName = walletType => {

47+ switch (walletType) {

48+ case WALLET_TYPES.MNEMONIC:

49+ return NAMES.MNEMONIC;

50+ case WALLET_TYPES.LEDGER:

51+ case WALLET_TYPES.TREZOR:

52+ return NAMES.HARDWARE;

53+ case WALLET_TYPES.KEYSTORE:

54+ case WALLET_TYPES.PRIVATE_KEY:

55+ return NAMES.ADVANCED;

56+ case WALLET_TYPES.TICKET:

57+ case WALLET_TYPES.SHARDS:

58+ return NAMES.TICKET;

59+ default:

60+ return NAMES.TICKET;

61+ }

62+};

63+

46export default function Login() {

64export default function Login() {

47 // globals

65 // globals

48 const { push, replaceWith, names } = useHistory();

66 const { push, replaceWith, names } = useHistory();

49 const { contracts } = useNetwork();

67 const { contracts } = useNetwork();

50− const { wallet } = useWallet();

68+ const { wallet, walletType } = useWallet();

51 const { pointCursor, setPointCursor } = usePointCursor();

69 const { pointCursor, setPointCursor } = usePointCursor();

53 const [deducing, setDeducing] = useState(false);

71 const [deducing, setDeducing] = useState(false);

55 // inputs

73 // inputs

56− const [currentTab, setCurrentTab] = useState(NAMES.TICKET);

74+ const [currentTab, setCurrentTab] = useState(

75+ walletTypeToViewName(walletType)

76+ );

58 const goToActivate = useCallback(

78 const goToActivate = useCallback(

59 () => replaceWith([{ key: names.LANDING }, { key: names.ACTIVATE }]),

79 () => replaceWith([{ key: names.LANDING }, { key: names.ACTIVATE }]),

@@ -75,8 +95,8 @@ export default function Login() {

76 setDeducing(true);

96 setDeducing(true);

78− // if no point cursor set by login logic, try to deduce it

79 let deduced = pointCursor;

98 let deduced = pointCursor;

99+ // if no point cursor set by login logic, try to deduce it

80 if (Nothing.hasInstance(deduced)) {

100 if (Nothing.hasInstance(deduced)) {

81 const owned = await azimuth.azimuth.getOwnedPoints(

101 const owned = await azimuth.azimuth.getOwnedPoints(

82 _contracts,

102 _contracts,

@@ -84,14 +104,6 @@ export default function Login() {

84 );

104 );

85 if (owned.length === 1) {

105 if (owned.length === 1) {

86 deduced = Just(owned[0]);

106 deduced = Just(owned[0]);

87− } else if (owned.length === 0) {

88− const canOwn = await azimuth.azimuth.getTransferringFor(

89− _contracts,

90− _wallet.address

91− );

92− if (canOwn.length === 1) {

93− deduced = Just(canOwn[0]);

94− }

95 }

107 }

96 }

108 }

109