git.iko.soy/bridge
on master help sign in
feat: disable hardware options insted of hiding the tab entirely
b178502Matt Condon (shrugs)
src/components/Accordion.js+17−3
compare with master
unifiedsplit
@@ -1,4 +1,5 @@
1import React from 'react';
1import React from 'react';
2+import cn from 'classnames';
2import { Grid, AccessoryIcon } from 'indigo-react';
3import { Grid, AccessoryIcon } from 'indigo-react';
3
4
4export default function Accordion({
5export default function Accordion({
@@ -22,9 +23,19 @@ export default function Accordion({
22 <React.Fragment key={option.value}>
23 <React.Fragment key={option.value}>
23 <Grid.Item
24 <Grid.Item
24 full
25 full
25− className="f5 pv3 rel clickable"
26+ className={cn('f5 pv3 rel', {
27+ clickable: !option.disabled,
28+ gray3: option.disabled,
29+ })}
30+ onClick={
31+ option.disabled
32+ ? null
26− onClick={() => onTabChange(isActive ? undefined : option.value)}>
33+ : () => onTabChange(isActive ? undefined : option.value)
34+ }>
27 {option.text}
35 {option.text}
36+ {option.disabled && (
37+ <sup className="f6"> Not Available on Mobile</sup>
38+ )}
28 <div
39 <div
29 className="abs"
40 className="abs"
30 style={{
41 style={{
@@ -34,7 +45,10 @@ export default function Accordion({
34 width: '44px',
45 width: '44px',
35 overflow: 'hidden',
46 overflow: 'hidden',
36 }}>
47 }}>
37− <AccessoryIcon className="black">
48+ <AccessoryIcon
49+ className={cn({
50+ black: !option.disabled,
51+ })}>
38 {isActive ? '▲' : '▼'}
52 {isActive ? '▲' : '▼'}
39 </AccessoryIcon>
53 </AccessoryIcon>
40 </div>
54 </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';
2import { H4, Grid } from 'indigo-react';
2import { H4, Grid } from 'indigo-react';
3−import { filter } from 'lodash';
4
3
5import { useHistory } from 'store/history';
4import { useHistory } from 'store/history';
6import { useWallet } from 'store/wallet';
5import { useWallet } from 'store/wallet';
@@ -17,7 +16,6 @@ import Ticket from './Login/Ticket';
17import Mnemonic from './Login/Mnemonic';
16import Mnemonic from './Login/Mnemonic';
18import Advanced from './Login/Advanced';
17import Advanced from './Login/Advanced';
19import Hardware from './Login/Hardware';
18import Hardware from './Login/Hardware';
20−import useBreakpoints from 'lib/useBreakpoints';
21
19
22const NAMES = {
20const NAMES = {
23 TICKET: 'TICKET',
21 TICKET: 'TICKET',
@@ -63,20 +61,6 @@ export default function Login() {
63 const { pop, push, names } = useHistory();
61 const { pop, push, names } = useHistory();
64 const { walletType } = useWallet();
62 const { walletType } = useWallet();
65
63
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−
80 // inputs
64 // inputs
81 const [currentTab, setCurrentTab] = useState(
65 const [currentTab, setCurrentTab] = useState(
82 walletTypeToViewName(walletType)
66 walletTypeToViewName(walletType)
@@ -105,7 +89,7 @@ export default function Login() {
105 className="mt1"
89 className="mt1"
106 // Tabs
90 // Tabs
107 views={VIEWS}
91 views={VIEWS}
108− options={options}
92+ options={OPTIONS}
109 currentTab={currentTab}
93 currentTab={currentTab}
110 onTabChange={setCurrentTab}
94 onTabChange={setCurrentTab}
111 // Tab extra
95 // 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';
2+
3+import useBreakpoints from 'lib/useBreakpoints';
2
4
3import Accordion from 'components/Accordion';
5import Accordion from 'components/Accordion';
4
6
@@ -23,11 +25,20 @@ const OPTIONS = [
23export default function Hardware({ className, ...rest }) {
25export default function Hardware({ className, ...rest }) {
24 const [currentTab, setCurrentTab] = useState(undefined);
26 const [currentTab, setCurrentTab] = useState(undefined);
25
27
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+
26 return (
37 return (
27 <Accordion
38 <Accordion
28 className={className}
39 className={className}
29 views={VIEWS}
40 views={VIEWS}
30− options={OPTIONS}
41+ options={options}
31 currentTab={currentTab}
42 currentTab={currentTab}
32 onTabChange={setCurrentTab}
43 onTabChange={setCurrentTab}
33 //
44 //