de4ad94 · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

ui: advanced login options toggle

de4ad94tomholford4 years ago

src/store/wallet.js+4

compare with master

unifiedsplit

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

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

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

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

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

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

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

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

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

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

176 setAuthToken,

178 setAuthToken,

177 useLegacyTokenSigning,

179 useLegacyTokenSigning,

178 setUseLegacyTokenSigning,

180 setUseLegacyTokenSigning,

181+ skipLoginSigning,

182+ setSkipLoginSigning

179 };

183 };

180}

184}

181

185

src/views/Login/LoginSelector.scss+24

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

93 background-color: $washed-gray;

94 }

95 }

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+ }

96}

120}

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

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

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

2import cn from 'classnames';

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

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

4import {

5 Box,

6 Button,

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

9 Row,

10 Text,

11 Image,

12+ Checkbox,

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

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

13import Web3 from 'web3';

14import Web3 from 'web3';

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

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

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

57 useLoginView(WALLET_TYPES.WALLET_CONNECT);

58 useLoginView(WALLET_TYPES.WALLET_CONNECT);

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

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

61+ const {

62+ setWallet,

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

63+ setWalletType,

64+ setAuthToken,

65+ skipLoginSigning,

66+ setSkipLoginSigning,

67+ }: any = useWallet();

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

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

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

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

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

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

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

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

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

74+

66 const {

75 const {

67 address,

76 address,

68 authenticate,

77 authenticate,

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

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

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

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

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

201 </Grid.Item>

210 </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}

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

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

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

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

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

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