git.iko.soy/bridge
on master help sign in
Merge pull request #1050 from urbit/t/skip-signing

ux: option to skip token signing on login

commita6af760cfa1bd8296a58856d7e37b12e1f823725 authortomholford <16504501+tomholford@users.noreply.github.com> dateMon 10 Oct 2022, 14:15 (4 years ago) parent8e289ff6e6455a
7 files changed+175−28
compare with master
unifiedsplit
src/lib/useWalletConnect.ts+17−8 src/store/wallet.js+24−1 src/views/Login/Ledger.tsx+15−5 src/views/Login/LoginSelector.scss+24 src/views/Login/LoginSelector.tsx+57−5 src/views/Login/Metamask.js+23−5 src/views/Login/Trezor.tsx+15−4
src/lib/useWalletConnect.ts+17−8
@@ -30,7 +30,13 @@ type ConnectEvent = {
3030};
3131
3232export const useWalletConnect = () => {
33− const { setWallet, setAuthToken, resetWallet }: any = useWallet();
33+ const {
34+ setWallet,
35+ setAuthToken,
36+ setFakeToken,
37+ skipLoginSigning,
38+ resetWallet,
39+ }: any = useWallet();
3440 const [connector, setConnector] = useState<WalletConnect | null>(null);
3541 const [address, setAddress] = useState<string | null>(null);
3642 const [peerMeta, setPeerMeta] = useState<PeerMeta | null>(null);
@@ -81,6 +87,15 @@ export const useWalletConnect = () => {
8187 return;
8288 }
8389
90+ const wallet: WalletConnectWallet = {
91+ address,
92+ };
93+ setWallet(Just(wallet));
94+ if (skipLoginSigning) {
95+ setFakeToken();
96+ return;
97+ }
98+
8499 let authToken = Nothing();
85100 try {
86101 const token = await getAuthToken({
@@ -89,6 +104,7 @@ export const useWalletConnect = () => {
89104 walletType: WALLET_TYPES.WALLET_CONNECT,
90105 });
91106 authToken = Just(token);
107+ setAuthToken(authToken);
92108 } catch (e) {
93109 if (e.message === 'METHOD_NOT_SUPPORTED') {
94110 console.warn(
@@ -99,13 +115,6 @@ export const useWalletConnect = () => {
99115 //TODO should errors with this *really* prevent login?
100116 }
101117 }
102−
103− const wallet: WalletConnectWallet = {
104− address,
105− };
106−
107− setAuthToken(authToken);
108− setWallet(Just(wallet));
109118 };
110119
111120 const isConnected = () => {
src/store/wallet.js+24−1
@@ -8,6 +8,7 @@ import React, {
88} from 'react';
99import { Just, Nothing } from 'folktale/maybe';
1010import { includes } from 'lodash';
11+import { randomHex } from 'web3-utils';
1112
1213import { walletFromMnemonic } from 'lib/wallet';
1314import {
@@ -52,6 +53,12 @@ function _useWallet(initialWallet = Nothing(), initialMnemonic = Nothing()) {
5253 const [networkRevision, setNetworkRevision] = useState(Nothing());
5354
5455 const [authToken, setAuthToken] = useState(Nothing());
56+ // Allow users to skip signing the auth token on login
57+ const [skipLoginSigning, setSkipLoginSigning] = useState(false);
58+
59+ const setFakeToken = () => {
60+ setAuthToken(Just(randomHex(32)));
61+ };
5562
5663 // See: https://github.com/urbit/bridge/issues/549#issuecomment-1048359617
5764 // This is used for legacy compatibility; this flow should eventually be
@@ -72,6 +79,11 @@ function _useWallet(initialWallet = Nothing(), initialMnemonic = Nothing()) {
7279
7380 const _wallet = wallet.value;
7481 const _web3 = web3.value;
82+ if (skipLoginSigning) {
83+ setFakeToken();
84+ return;
85+ }
86+
7587 const token = await getAuthToken({
7688 wallet: _wallet,
7789 walletType,
@@ -82,7 +94,15 @@ function _useWallet(initialWallet = Nothing(), initialMnemonic = Nothing()) {
8294
8395 setAuthToken(Just(token));
8496 })();
85− }, [wallet, walletType, walletHdPath, web3, useLegacyTokenSigning]);
97+ }, [
98+ wallet,
99+ walletType,
100+ walletHdPath,
101+ web3,
102+ useLegacyTokenSigning,
103+ setAuthToken,
104+ skipLoginSigning,
105+ ]);
86106
87107 const setWalletType = useCallback(
88108 walletType => {
@@ -176,6 +196,9 @@ function _useWallet(initialWallet = Nothing(), initialMnemonic = Nothing()) {
176196 setAuthToken,
177197 useLegacyTokenSigning,
178198 setUseLegacyTokenSigning,
199+ skipLoginSigning,
200+ setSkipLoginSigning,
201+ setFakeToken,
179202 };
180203}
181204
src/views/Login/Ledger.tsx+15−5
@@ -52,7 +52,13 @@ interface LedgerProps {
5252export default function Ledger({ className, goHome }: LedgerProps) {
5353 useLoginView(WALLET_TYPES.LEDGER);
5454
55− const { setWallet, setWalletHdPath, setAuthToken }: any = useWallet();
55+ const {
56+ setWallet,
57+ setWalletHdPath,
58+ setAuthToken,
59+ setFakeToken,
60+ skipLoginSigning,
61+ }: any = useWallet();
5662
5763 const validate = useMemo(
5864 () =>
@@ -77,20 +83,24 @@ export default function Ledger({ className, goHome }: LedgerProps) {
7783 const chainCode = Buffer.from(info.chainCode!.toString(), 'hex');
7884 const pub = Buffer.from(publicKeyConvert(publicKey, true));
7985 const hd = bip32.fromPublicKey(pub, chainCode);
86+ setWallet(Just(hd));
87+ setWalletHdPath(addHdPrefix(values.hdpath));
88+ if (skipLoginSigning) {
89+ setFakeToken();
90+ return;
91+ }
92+
8093 const authToken = await getAuthToken({
8194 walletType: WALLET_TYPES.LEDGER,
8295 walletHdPath: addHdPrefix(values.hdpath),
8396 });
84−
8597 setAuthToken(Just(authToken));
86− setWallet(Just(hd));
87− setWalletHdPath(addHdPrefix(values.hdpath));
8898 } catch (error) {
8999 console.error(error);
90100 return { [FORM_ERROR]: error.message };
91101 }
92102 },
93− [setAuthToken, setWallet, setWalletHdPath]
103+ [setAuthToken, setFakeToken, setWallet, setWalletHdPath, skipLoginSigning]
94104 );
95105
96106 const onValues = useCallback(({ valid, values, form }) => {
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+57−5
@@ -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,21 @@ 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+ setFakeToken,
66+ skipLoginSigning,
67+ setSkipLoginSigning,
68+ }: any = useWallet();
6169 const { setMetamask }: any = useNetwork();
6270 const [showModal, setShowModal] = useState(false);
6371 // TODO: do we still need this? currently not being set
6472 const [metamaskSelected, setMetamaskSelected] = useState(false);
6573
74+ const [showAdvanced, setShowAdvanced] = useState(false);
75+
6676 const {
6777 address,
6878 authenticate,
@@ -96,6 +106,15 @@ export default function LoginSelector({
96106
97107 const wallet = new MetamaskWallet(accounts[0]);
98108 const web3 = new Web3(window.ethereum);
109+ setWallet(Just(wallet));
110+ setWalletType(WALLET_TYPES.METAMASK);
111+
112+ if (skipLoginSigning) {
113+ setFakeToken();
114+ goHome();
115+ return;
116+ }
117+
99118 const authToken = await getAuthToken({
100119 address: wallet.address,
101120 walletType: WALLET_TYPES.METAMASK,
@@ -103,8 +122,6 @@ export default function LoginSelector({
103122 });
104123
105124 setAuthToken(Just(authToken));
106− setWallet(Just(wallet));
107− setWalletType(WALLET_TYPES.METAMASK);
108125
109126 goHome();
110127 } catch (e) {
@@ -112,7 +129,15 @@ export default function LoginSelector({
112129 setMetamask(false);
113130 setMetamaskSelected(false);
114131 }
115− }, [setAuthToken, setWallet, setWalletType, setMetamask, goHome]);
132+ }, [
133+ setMetamask,
134+ setWallet,
135+ setWalletType,
136+ skipLoginSigning,
137+ setAuthToken,
138+ goHome,
139+ setFakeToken,
140+ ]);
116141
117142 const onSubmitWalletConnect = useCallback(async () => {
118143 try {
@@ -199,6 +224,33 @@ export default function LoginSelector({
199224 onClick={() => setShowModal(true)}>
200225 <Icon icon="Info" />I have a wallet type not supported here
201226 </Grid.Item>
227+ <Grid.Item
228+ className="advanced-options"
229+ full
230+ as={Text}
231+ onClick={() => setShowAdvanced(!showAdvanced)}>
232+ Advanced{' '}
233+ <Icon
234+ display="inline-block"
235+ icon={showAdvanced ? 'ChevronNorth' : 'ChevronSouth'}
236+ size="14px"
237+ color={'black'}
238+ />
239+ </Grid.Item>
240+ {showAdvanced ? (
241+ <Grid.Item
242+ full
243+ as={Box}
244+ onClick={() => setSkipLoginSigning(!skipLoginSigning)}>
245+ <Box className="skip-signing">
246+ <Checkbox
247+ selected={skipLoginSigning}
248+ onClick={() => setSkipLoginSigning(!skipLoginSigning)}
249+ />
250+ <Text>Skip Signing on Login</Text>
251+ </Box>
252+ </Grid.Item>
253+ ) : null}
202254 <Modal show={showModal} hide={() => setShowModal(false)}>
203255 <Box className="info-modal-content">
204256 <div className="fw-bold mb5">Other Wallet Types</div>
src/views/Login/Metamask.js+23−5
@@ -22,7 +22,13 @@ import Web3 from 'web3';
2222
2323export default function Metamask({ className, goHome }) {
2424 useLoginView(WALLET_TYPES.METAMASK);
25− const { setWallet, setWalletType, setAuthToken } = useWallet();
25+ const {
26+ setWallet,
27+ setWalletType,
28+ setAuthToken,
29+ setFakeToken,
30+ skipLoginSigning,
31+ } = useWallet();
2632
2733 const { setMetamask } = useNetwork();
2834
@@ -37,8 +43,15 @@ export default function Metamask({ className, goHome }) {
3743 method: 'eth_requestAccounts',
3844 });
3945 const wallet = new MetamaskWallet(accounts.result[0]);
40−
4146 const web3 = new Web3(window.ethereum);
47+ setWallet(Just(wallet));
48+ setWalletType(WALLET_TYPES.METAMASK);
49+
50+ if (skipLoginSigning) {
51+ setFakeToken();
52+ return;
53+ }
54+
4255 const authToken = await getAuthToken({
4356 address: wallet.address,
4457 walletType: WALLET_TYPES.METAMASK,
@@ -46,13 +59,18 @@ export default function Metamask({ className, goHome }) {
4659 });
4760
4861 setAuthToken(Just(authToken));
49− setWallet(Just(wallet));
50− setWalletType(WALLET_TYPES.METAMASK);
5162 } catch (e) {
5263 console.error(e);
5364 return { [FORM_ERROR]: e.message };
5465 }
55− }, [setAuthToken, setWallet, setWalletType, setMetamask]);
66+ }, [
67+ setMetamask,
68+ setWallet,
69+ setWalletType,
70+ skipLoginSigning,
71+ setAuthToken,
72+ setFakeToken,
73+ ]);
5674
5775 return (
5876 <Grid className={className}>
src/views/Login/Trezor.tsx+15−4
@@ -41,7 +41,13 @@ interface TrezorProps {
4141export default function Trezor({ className, goHome }: TrezorProps) {
4242 useLoginView(WALLET_TYPES.TREZOR);
4343
44− const { setWallet, setWalletHdPath, setAuthToken }: any = useWallet();
44+ const {
45+ setWallet,
46+ setWalletHdPath,
47+ setAuthToken,
48+ setFakeToken,
49+ skipLoginSigning,
50+ }: any = useWallet();
4551
4652 const validate = useMemo(
4753 () =>
@@ -81,6 +87,13 @@ export default function Trezor({ className, goHome }: TrezorProps) {
8187
8288 const pub = Buffer.from(publicKeyConvert(publicKey, true));
8389 const hd = bip32.fromPublicKey(pub, chainCode);
90+ setWallet(Just(hd));
91+ setWalletHdPath(values.hdPath);
92+
93+ if (skipLoginSigning) {
94+ setFakeToken();
95+ return;
96+ }
8497
8598 const authToken = await getAuthToken({
8699 walletType: WALLET_TYPES.TREZOR,
@@ -88,10 +101,8 @@ export default function Trezor({ className, goHome }: TrezorProps) {
88101 });
89102
90103 setAuthToken(Just(authToken));
91− setWallet(Just(hd));
92− setWalletHdPath(values.hdPath);
93104 },
94− [setAuthToken, setWallet, setWalletHdPath]
105+ [setAuthToken, setFakeToken, setWallet, setWalletHdPath, skipLoginSigning]
95106 );
96107
97108 const onValues = useCallback(({ valid, values, form }) => {