2492fc2 · bridge · git.iko.soy

git.iko.soy/bridge

ux: keyfile unavailable modal

Address PR feedback by swapping the unwieldy tooltip for a cleaner modal

commit2492fc2eb0fabc0e62709e78f37ca3bd3c7888f6 authortomholford <tomholford@users.noreply.github.com> dateThu 24 Feb 2022, 11:46 (5 years ago) parentfe8db0a

5 files changed+37−20

compare with master

unifiedsplit

src/components/L2/Modal.scss+12 src/views/Login/LoginSelector.scss−12 src/views/Login/Mnemonic.tsx+1−1 src/views/Login/Ticket.tsx+1−1 src/views/UrbitOS/Home.tsx+23−6

src/components/L2/Modal.scss+12

@@ -39,3 +39,15 @@

3939 }

4040 }

4141}

42+

43+.info-modal-content {

44+ position: relative;

45+ background-color: white;

46+ width: 280px;

47+ border-radius: $large-border-radius;

48+ font-family: $default-font;

49+ padding: 24px;

50+ font-size: 14px;

51+ line-height: 24px;

52+ max-width: 100%;

53+}

src/views/Login/LoginSelector.scss−12

@@ -60,18 +60,6 @@

6060 }

6161 }

6262

63− .info-modal-content {

64− position: relative;

65− background-color: white;

66− width: 280px;

67− border-radius: $large-border-radius;

68− font-family: $default-font;

69− padding: 24px;

70− font-size: 14px;

71− line-height: 24px;

72− max-width: 100%;

73− }

74−

7563 .master-ticket {

7664 .body-pane {

7765 .input-form {

src/views/Login/Mnemonic.tsx+1−1

@@ -105,7 +105,7 @@ export default function Mnemonic({ className, goHome }: MnemonicProps) {

105105 {

106106 selected: useLegacyTokenSigning,

107107 key: 'useLegacyTokenSigning',

108− label: 'Use Legacy Compatibility',

108+ label: 'Use Legacy Keyfile',

109109 onClick: () => setUseLegacyTokenSigning(!useLegacyTokenSigning),

110110 },

111111 ];

src/views/Login/Ticket.tsx+1−1

@@ -179,7 +179,7 @@ export default function Ticket({ className, goHome }: TicketProps) {

179179 {

180180 selected: useLegacyTokenSigning,

181181 key: 'useLegacyTokenSigning',

182− label: 'Use Legacy Compatibility',

182+ label: 'Use Legacy Keyfile',

183183 onClick: () => setUseLegacyTokenSigning(!useLegacyTokenSigning),

184184 },

185185 ];

src/views/UrbitOS/Home.tsx+23−6

@@ -7,6 +7,7 @@ import Window from 'components/L2/Window/Window';

77import HeaderPane from 'components/L2/Window/HeaderPane';

88import BodyPane from 'components/L2/Window/BodyPane';

99import { ReactComponent as KeyfileIcon } from 'assets/keyfile.svg';

10+import { ReactComponent as InfoIcon } from 'assets/info.svg';

1011

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

1213import { useSingleKeyfileGenerator } from 'lib/useKeyfileGenerator';

@@ -16,7 +17,6 @@ import CopiableWithTooltip from 'components/copiable/CopiableWithTooltip';

1617import './UrbitOS.scss';

1718import Modal from 'components/L2/Modal';

1819import { useRollerStore } from 'store/rollerStore';

19−import WithTooltip from 'components/WithTooltip';

2020

2121export default function UrbitOSHome() {

2222 const { point } = useRollerStore();

@@ -47,6 +47,9 @@ export default function UrbitOSHome() {

4747 {}

4848 );

4949 const keyfileAvailable = available && !generating;

50+ const [showKeysUnavailableModal, setShowKeysUnavailableModal] = useState(

51+ false

52+ );

5053

5154 const headerButton = () => {

5255 if (!hasSetNetworkKeys) {

@@ -63,11 +66,25 @@ export default function UrbitOSHome() {

6366 Download Keyfile

6467 </Button>

6568 ) : (

66− <WithTooltip content="Either the key was derived non-deterministically, or try Login > Use Legacy Compatibility">

67− <Box className="header-button keyfile-unavailable">

68− Keyfile Unavailable

69− </Box>

70− </WithTooltip>

69+ <>

70+ <Button

71+ className="header-button keyfile-unavailable"

72+ onClick={() => setShowKeysUnavailableModal(true)}>

73+ <InfoIcon />

74+  Keyfile Unavailable

75+ </Button>

76+ <Modal

77+ show={showKeysUnavailableModal}

78+ hide={() => setShowKeysUnavailableModal(false)}>

79+ <Box className="info-modal-content">

80+ <div className="fw-bold mb5">Keyfile Unavailable</div>

81+ <div className="mb5">

82+ Keys generated between 2021-05 and 2022-02 used a different

83+ algorithm. Please login again with 'Use Legacy Keyfile' selected.

84+ </div>

85+ </Box>

86+ </Modal>

87+ </>

7188 );

7289 };

7390