de4ad94 · bridge · git.iko.soy

git.iko.soy/bridge

ui: advanced login options toggle

commitde4ad94059c519543b12c7335942137261b9017e authortomholford <tomholford@users.noreply.github.com> dateThu 6 Oct 2022, 21:13 (4 years ago) parent8e289ff

3 files changed+66−2

compare with master

unifiedsplit

src/store/wallet.js+4 src/views/Login/LoginSelector.scss+24 src/views/Login/LoginSelector.tsx+38−2

src/store/wallet.js+4

@@ -52,6 +52,8 @@ function _useWallet(initialWallet = Nothing(), initialMnemonic = Nothing()) {

5252 const [networkRevision, setNetworkRevision] = useState(Nothing());

5353

5454 const [authToken, setAuthToken] = useState(Nothing());

55+ // Allow users to skip signing the auth token on login

56+ const [skipLoginSigning, setSkipLoginSigning] = useState(false);

5557

5658 // See: https://github.com/urbit/bridge/issues/549#issuecomment-1048359617

5759 // This is used for legacy compatibility; this flow should eventually be

@@ -176,6 +178,8 @@ function _useWallet(initialWallet = Nothing(), initialMnemonic = Nothing()) {

176178 setAuthToken,

177179 useLegacyTokenSigning,

178180 setUseLegacyTokenSigning,

181+ skipLoginSigning,

182+ setSkipLoginSigning

179183 };

180184}

181185

src/views/Login/LoginSelector.scss+24

@@ -93,4 +93,28 @@

9393 background-color: $washed-gray;

9494 }

9595 }

96+

97+ .advanced-options {

98+ margin-top: 16px;

99+ cursor: pointer;

100+ text-align: center;

101+ }

102+

103+ .skip-signing {

104+ margin-top: 16px;

105+ display: flex;

106+ flex-flow: row nowrap;

107+ cursor: pointer;

108+ width: 100%;

109+ justify-content: center;

110+ align-items: center;

111+ font-family: $default-font;

112+

113+ span {

114+ margin-left: 10px;

115+ width: 160px;

116+ font-size: 14px;

117+ line-height: 18px;

118+ }

119+ }

96120}

src/views/Login/LoginSelector.tsx+38−2

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

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

22import cn from 'classnames';

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

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

44import {

55 Box,

66 Button,

@@ -9,6 +9,7 @@ import {

99 Row,

1010 Text,

1111 Image,

12+ Checkbox,

1213} from '@tlon/indigo-react';

1314import Web3 from 'web3';

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

@@ -57,12 +58,20 @@ export default function LoginSelector({

5758 useLoginView(WALLET_TYPES.WALLET_CONNECT);

5859

5960 const { push, names }: any = useHistory();

60− const { setWallet, setWalletType, setAuthToken }: any = useWallet();

61+ const {

62+ setWallet,

63+ setWalletType,

64+ setAuthToken,

65+ skipLoginSigning,

66+ setSkipLoginSigning,

67+ }: any = useWallet();

6168 const { setMetamask }: any = useNetwork();

6269 const [showModal, setShowModal] = useState(false);

6370 // TODO: do we still need this? currently not being set

6471 const [metamaskSelected, setMetamaskSelected] = useState(false);

6572

73+ const [showAdvanced, setShowAdvanced] = useState(false);

74+

6675 const {

6776 address,

6877 authenticate,

@@ -199,6 +208,33 @@ export default function LoginSelector({

199208 onClick={() => setShowModal(true)}>

200209 <Icon icon="Info" />I have a wallet type not supported here

201210 </Grid.Item>

211+ <Grid.Item

212+ className="advanced-options"

213+ full

214+ as={Text}

215+ onClick={() => setShowAdvanced(!showAdvanced)}>

216+ Advanced{' '}

217+ <Icon

218+ display="inline-block"

219+ icon={showAdvanced ? 'ChevronNorth' : 'ChevronSouth'}

220+ size="14px"

221+ color={'black'}

222+ />

223+ </Grid.Item>

224+ {showAdvanced ? (

225+ <Grid.Item

226+ full

227+ as={Box}

228+ onClick={() => setSkipLoginSigning(!skipLoginSigning)}>

229+ <Box className="skip-signing">

230+ <Checkbox

231+ selected={skipLoginSigning}

232+ onClick={() => setSkipLoginSigning(!skipLoginSigning)}

233+ />

234+ <Text>Skip Signing on Login</Text>

235+ </Box>

236+ </Grid.Item>

237+ ) : null}

202238 <Modal show={showModal} hide={() => setShowModal(false)}>

203239 <Box className="info-modal-content">

204240 <div className="fw-bold mb5">Other Wallet Types</div>