b178502 · bridge · git.iko.soy

git.iko.soy/bridge

feat: disable hardware options insted of hiding the tab entirely

+ strikes a balance between visibility of options & UX

commitb178502521e916993b36f04614d6d335341beed7 authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateMon 19 Aug 2019, 13:10 (7 years ago) parent9d95424

3 files changed+32−23

compare with master

unifiedsplit

src/components/Accordion.js+17−3 src/views/Login.js+2−18 src/views/Login/Hardware.js+13−2

src/components/Accordion.js+17−3

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

11import React from 'react';

2+import cn from 'classnames';

23import { Grid, AccessoryIcon } from 'indigo-react';

45export default function Accordion({

@@ -22,9 +23,19 @@ export default function Accordion({

2223 <React.Fragment key={option.value}>

2324 <Grid.Item

2425 full

25− className="f5 pv3 rel clickable"

26− onClick={() => onTabChange(isActive ? undefined : option.value)}>

26+ className={cn('f5 pv3 rel', {

27+ clickable: !option.disabled,

28+ gray3: option.disabled,

29+ })}

30+ onClick={

31+ option.disabled

32+ ? null

33+ : () => onTabChange(isActive ? undefined : option.value)

34+ }>

2735 {option.text}

36+ {option.disabled && (

37+ <sup className="f6"> Not Available on Mobile</sup>

38+ )}

2839 <div

2940 className="abs"

3041 style={{

@@ -34,7 +45,10 @@ export default function Accordion({

3445 width: '44px',

3546 overflow: 'hidden',

3647 }}>

37− <AccessoryIcon className="black">

48+ <AccessoryIcon

49+ className={cn({

50+ black: !option.disabled,

51+ })}>

3852 {isActive ? '▲' : '▼'}

3953 </AccessoryIcon>

4054 </div>

src/views/Login.js+2−18

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

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

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

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

3−import { filter } from 'lodash';

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

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

@@ -17,7 +16,6 @@ import Ticket from './Login/Ticket';

1716import Mnemonic from './Login/Mnemonic';

1817import Advanced from './Login/Advanced';

1918import Hardware from './Login/Hardware';

20−import useBreakpoints from 'lib/useBreakpoints';

2119

2220const NAMES = {

2321 TICKET: 'TICKET',

@@ -63,20 +61,6 @@ export default function Login() {

6361 const { pop, push, names } = useHistory();

6462 const { walletType } = useWallet();

6563

66− // again, using breakpoint to decide if we're on mobile or not

67− // see ActivateCode for more details

68− const hardwareAllowed = useBreakpoints([false, true, true]);

69−

70− // filter out hardware if mobile

71− const options = useMemo(

72− () =>

73− filter(

74− OPTIONS,

75− ({ value }) => hardwareAllowed || value !== NAMES.HARDWARE

76− ),

77− [hardwareAllowed]

78− );

79−

8064 // inputs

8165 const [currentTab, setCurrentTab] = useState(

8266 walletTypeToViewName(walletType)

@@ -105,7 +89,7 @@ export default function Login() {

10589 className="mt1"

10690 // Tabs

10791 views={VIEWS}

108− options={options}

92+ options={OPTIONS}

10993 currentTab={currentTab}

11094 onTabChange={setCurrentTab}

11195 // Tab extra

src/views/Login/Hardware.js+13−2

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

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

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

3+import useBreakpoints from 'lib/useBreakpoints';

35import Accordion from 'components/Accordion';

@@ -23,11 +25,20 @@ const OPTIONS = [

2325export default function Hardware({ className, ...rest }) {

2426 const [currentTab, setCurrentTab] = useState(undefined);

2527

28+ // using breakpoint to decide if we're on mobile or not

29+ // see ActivateCode for more details on this approach

30+ const hardwareAllowed = useBreakpoints([false, true, true]);

31+

32+ const options = useMemo(

33+ () => OPTIONS.map(option => ({ ...option, disabled: !hardwareAllowed })),

34+ [hardwareAllowed]

35+ );

36+

2637 return (

2738 <Accordion

2839 className={className}

2940 views={VIEWS}

30− options={OPTIONS}

41+ options={options}

3142 currentTab={currentTab}

3243 onTabChange={setCurrentTab}

3344 //