@@ -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,22 +57,71 @@ 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 // TODO: do we still need this? currently not being set
4564 const [metamaskSelected, setMetamaskSelected] = useState(false);
4665
47− const { connect } = useWalletConnect();
66+ const {
67+ address,
68+ authenticate,
69+ connect,
70+ disconnect,
71+ isConnected,
72+ peerIcon,
73+ } = useWalletConnect();
4874
4975 const goToActivate = useCallback(() => push(names.ACTIVATE), [
5076 push,
5177 names.ACTIVATE,
5278 ]);
5379
80+ const selectMetamask = useCallback(async () => {
81+ try {
82+ setMetamask(true);
83+ setMetamaskSelected(true);
84+ const accounts = await (window as any).ethereum.send(
85+ 'eth_requestAccounts'
86+ );
87+ const wallet = new MetamaskWallet(accounts.result[0]);
88+
89+ const web3 = new Web3((window as any).ethereum);
90+ const authToken = await getAuthToken({
91+ address: wallet.address,
92+ walletType: WALLET_TYPES.METAMASK,
93+ web3,
94+ });
95+
96+ setAuthToken(Just(authToken));
97+ setWallet(Just(wallet));
98+ setWalletType(WALLET_TYPES.METAMASK);
99+
100+ goHome();
101+ } catch (e) {
102+ console.error(e);
103+ setMetamask(false);
104+ setMetamaskSelected(false);
105+ }
106+ }, [setAuthToken, setWallet, setWalletType, setMetamask, goHome]);
107+
108+ const onSubmitWalletConnect = useCallback(async () => {
109+ try {
110+ await authenticate();
111+ goHome();
112+ } catch (error) {
113+ console.warn(error);
114+ }
115+ }, [authenticate, goHome]);
116+
54117 const selectOption = (value: string) => async () => {
55− if (value === NAMES.WALLET_CONNECT) {
118+ if (value === NAMES.METAMASK) {
119+ selectMetamask();
120+ } else if (value === NAMES.WALLET_CONNECT) {
56121 connect();
122+ } else {
123+ setCurrentTab(value);
57124 }
58− setCurrentTab(value);
59125 };
60126
61127 const loader = <LoadingSpinner background="#bce2ff" foreground="#219DFF" />;
@@ -64,6 +130,8 @@ export default function LoginSelector({
64130 ({ value }) => value !== NAMES.METAMASK || !!(window as any).ethereum
65131 );
66132
133+ const wcConnected = isConnected();
134+
67135 if (!currentTab) {
68136 return (
69137 <Grid className={className}>
@@ -73,10 +141,42 @@ export default function LoginSelector({
73141 full
74142 className={cn('f5 pv3 rel pointer login-menu-item')}
75143 onClick={selectOption(option.value)}>
76− {option.text}
77− {option.value === NAMES.METAMASK && metamaskSelected
78− ? loader
79− : option.menuIcon}
144+ {option.value === NAMES.WALLET_CONNECT && wcConnected ? (
145+ <>
146+ <Row className="wc-info">
147+ {peerIcon ? (
148+ <Image className="wallet-icon" src={peerIcon} />
149+ ) : (
150+ option.menuIcon
151+ )}
152+ {address && (
153+ <Box className="mono address">
154+ {abbreviateAddress(address)}
155+ </Box>
156+ )}
157+ </Row>
158+ <Row className="wc-buttons">
159+ <Icon
160+ onClick={disconnect}
161+ className="cancel"
162+ icon="X"
163+ color="white"
164+ />
165+ <Icon
166+ onClick={onSubmitWalletConnect}
167+ className="check"
168+ icon="ChevronEast"
169+ />
170+ </Row>
171+ </>
172+ ) : (
173+ <>
174+ {option.text}
175+ {option.value === NAMES.METAMASK && metamaskSelected
176+ ? loader
177+ : option.menuIcon}
178+ </>
179+ )}
80180 </Grid.Item>
81181 </React.Fragment>
82182 ))}