@@ -1,17 +1,34 @@
11import React, { useCallback, useState } from 'react';
22import cn from 'classnames';
33import { Grid } from 'indigo-react';
4−import { Box, Button, Icon, LoadingSpinner, Text } from '@tlon/indigo-react';
4+import {
5+ Box,
6+ Button,
7+ Icon,
8+ LoadingSpinner,
9+ Row,
10+ Text,
11+ Image,
12+} from '@tlon/indigo-react';
13+import Web3 from 'web3';
14+import { Just } from 'folktale/maybe';
15+
516import { useHistory } from 'store/history';
17+import { useWallet } from 'store/wallet';
18+import { useNetwork } from 'store/network';
619
720import { WALLET_TYPES } from 'lib/constants';
821import { useWalletConnect } from 'lib/useWalletConnect';
22+import { MetamaskWallet } from 'lib/metamask';
23+import useLoginView from 'lib/useLoginView';
24+import { getAuthToken } from 'lib/authToken';
925
1026import Modal from 'components/L2/Modal';
1127import HeaderButton from 'components/L2/Headers/HeaderButton';
12−import './LoginSelector.scss';
1328import { NAMES } from './Other';
14−import useLoginView from 'lib/useLoginView';
29+
30+import './LoginSelector.scss';
31+import { abbreviateAddress } from 'lib/utils/address';
1532
1633interface LoginSelectorProps {
1734 className: string;
@@ -40,21 +57,70 @@ export default function LoginSelector({
4057 useLoginView(WALLET_TYPES.WALLET_CONNECT);
4158
4259 const { push, names }: any = useHistory();
60+ const { setWallet, setWalletType, setAuthToken }: any = useWallet();
61+ const { setMetamask }: any = useNetwork();
4362 const [showModal, setShowModal] = useState(false);
4463 const [metamaskSelected, setMetamaskSelected] = useState(false);
4564
46− const { connect } = useWalletConnect();
65+ const {
66+ address,
67+ authenticate,
68+ connect,
69+ disconnect,
70+ isConnected,
71+ peerIcon,
72+ } = useWalletConnect();
4773
4874 const goToActivate = useCallback(() => push(names.ACTIVATE), [
4975 push,
5076 names.ACTIVATE,
5177 ]);
5278
79+ const selectMetamask = useCallback(async () => {
80+ try {
81+ setMetamask(true);
82+ setMetamaskSelected(true);
83+ const accounts = await (window as any).ethereum.send(
84+ 'eth_requestAccounts'
85+ );
86+ const wallet = new MetamaskWallet(accounts.result[0]);
87+
88+ const web3 = new Web3((window as any).ethereum);
89+ const authToken = await getAuthToken({
90+ address: wallet.address,
91+ walletType: WALLET_TYPES.METAMASK,
92+ web3,
93+ });
94+
95+ setAuthToken(Just(authToken));
96+ setWallet(Just(wallet));
97+ setWalletType(WALLET_TYPES.METAMASK);
98+
99+ goHome();
100+ } catch (e) {
101+ console.error(e);
102+ setMetamask(false);
103+ setMetamaskSelected(false);
104+ }
105+ }, [setAuthToken, setWallet, setWalletType, setMetamask, goHome]);
106+
107+ const onSubmitWalletConnect = useCallback(async () => {
108+ try {
109+ await authenticate();
110+ goHome();
111+ } catch (error) {
112+ console.warn(error);
113+ }
114+ }, [authenticate, goHome]);
115+
53116 const selectOption = (value: string) => async () => {
54− if (value === NAMES.WALLET_CONNECT) {
117+ if (value === NAMES.METAMASK) {
118+ selectMetamask();
119+ } else if (value === NAMES.WALLET_CONNECT) {
55120 connect();
121+ } else {
122+ setCurrentTab(value);
56123 }
57− setCurrentTab(value);
58124 };
59125
60126 const loader = <LoadingSpinner background="#bce2ff" foreground="#219DFF" />;
@@ -63,6 +129,8 @@ export default function LoginSelector({
63129 ({ value }) => value !== NAMES.METAMASK || !!(window as any).ethereum
64130 );
65131
132+ const wcConnected = isConnected();
133+
66134 if (!currentTab) {
67135 return (
68136 <Grid className={className}>
@@ -72,10 +140,42 @@ export default function LoginSelector({
72140 full
73141 className={cn('f5 pv3 rel pointer login-menu-item')}
74142 onClick={selectOption(option.value)}>
75− {option.text}
76− {option.value === NAMES.METAMASK && metamaskSelected
77− ? loader
78− : option.menuIcon}
143+ {option.value === NAMES.WALLET_CONNECT && wcConnected ? (
144+ <>
145+ <Row className="wc-info">
146+ {peerIcon ? (
147+ <Image className="wallet-icon" src={peerIcon} />
148+ ) : (
149+ option.menuIcon
150+ )}
151+ {address && (
152+ <Box className="mono address">
153+ {abbreviateAddress(address)}
154+ </Box>
155+ )}
156+ </Row>
157+ <Row className="wc-buttons">
158+ <Icon
159+ onClick={disconnect}
160+ className="cancel"
161+ icon="X"
162+ color="white"
163+ />
164+ <Icon
165+ onClick={onSubmitWalletConnect}
166+ className="check"
167+ icon="ChevronEast"
168+ />
169+ </Row>
170+ </>
171+ ) : (
172+ <>
173+ {option.text}
174+ {option.value === NAMES.METAMASK && metamaskSelected
175+ ? loader
176+ : option.menuIcon}
177+ </>
178+ )}
79179 </Grid.Item>
80180 </React.Fragment>
81181 ))}