git.iko.soy/bridge
on master help sign in
Update login design for metamask and walletconnect
ab21b4bWill Galebach
src/lib/validators.ts+1
compare with master
unifiedsplit
@@ -72,6 +72,7 @@ export const validatePatq = (v: string) => {
72};
72};
73
73
74export const validateActivationTicket = (v: string) => {
74export const validateActivationTicket = (v: string) => {
75+ console.log('HERE', v.length)
75 try {
76 try {
76 if (v.length < 42) {
77 if (v.length < 42) {
77 throw new Error();
78 throw new Error();
src/views/CancelTransfer.tsx+2−1
@@ -147,6 +147,7 @@ function AdminCancelTransfer() {
147export default function CancelTransfer() {
147export default function CancelTransfer() {
148 const { pop }: any = useLocalRouter();
148 const { pop }: any = useLocalRouter();
149 const { setPointCursor }: any = usePointCursor();
149 const { setPointCursor }: any = usePointCursor();
150+ const { point } = useRollerStore();
150
151
151 const goBack = useCallback(() => {
152 const goBack = useCallback(() => {
152 setPointCursor(Nothing());
153 setPointCursor(Nothing());
@@ -158,7 +159,7 @@ export default function CancelTransfer() {
158 pop={pop}
159 pop={pop}
159 className="cancel-transfer"
160 className="cancel-transfer"
160 hideBack
161 hideBack
161− header={<L2BackHeader hideBalance back={goBack} />}>
162+ header={<L2BackHeader hideBalance={point.isL2} back={goBack} />}>
162 <AdminCancelTransfer />
163 <AdminCancelTransfer />
163 </View>
164 </View>
164 );
165 );
src/views/Login/LoginSelector.scss+25
@@ -80,4 +80,29 @@
80 }
80 }
81 }
81 }
82 }
82 }
83+
84+ .wc-info, .wc-buttons {
85+ .cancel, .check {
86+ height: 16px;
87+ width: 16px;
88+ padding: 8px;
89+ border-radius: $medium-border-radius;
90+ margin: -4px 0;
91+ }
92+
93+ .wallet-icon {
94+ margin-right: 6px;
95+ height: 24px;
96+ width: 24px;
97+ }
98+
99+ .cancel {
100+ margin-right: 6px;
101+ background-color: $activate-error-red;
102+ }
103+
104+ .check {
105+ background-color: $washed-gray;
106+ }
107+ }
83}
108}
src/views/Login/LoginSelector.tsx+110−10
@@ -1,17 +1,34 @@
1import React, { useCallback, useState } from 'react';
1import React, { useCallback, useState } from 'react';
2import cn from 'classnames';
2import cn from 'classnames';
3import { Grid } from 'indigo-react';
3import { Grid } from 'indigo-react';
4+import {
5+ Box,
6+ Button,
7+ Icon,
8+ LoadingSpinner,
9+ Row,
10+ Text,
11+ Image,
4−import { Box, Button, Icon, LoadingSpinner, Text } from '@tlon/indigo-react';
12+} from '@tlon/indigo-react';
13+import Web3 from 'web3';
14+import { Just } from 'folktale/maybe';
15+
5import { useHistory } from 'store/history';
16import { useHistory } from 'store/history';
17+import { useWallet } from 'store/wallet';
18+import { useNetwork } from 'store/network';
6
19
7import { WALLET_TYPES } from 'lib/constants';
20import { WALLET_TYPES } from 'lib/constants';
8import { useWalletConnect } from 'lib/useWalletConnect';
21import { useWalletConnect } from 'lib/useWalletConnect';
22+import { MetamaskWallet } from 'lib/metamask';
23+import useLoginView from 'lib/useLoginView';
24+import { getAuthToken } from 'lib/authToken';
9
25
10import Modal from 'components/L2/Modal';
26import Modal from 'components/L2/Modal';
11import HeaderButton from 'components/L2/Headers/HeaderButton';
27import HeaderButton from 'components/L2/Headers/HeaderButton';
12−import './LoginSelector.scss';
13import { NAMES } from './Other';
28import { NAMES } from './Other';
14−import useLoginView from 'lib/useLoginView';
29+
30+import './LoginSelector.scss';
31+import { abbreviateAddress } from 'lib/utils/address';
15
32
16interface LoginSelectorProps {
33interface LoginSelectorProps {
17 className: string;
34 className: string;
@@ -40,21 +57,70 @@ export default function LoginSelector({
40 useLoginView(WALLET_TYPES.WALLET_CONNECT);
57 useLoginView(WALLET_TYPES.WALLET_CONNECT);
41
58
42 const { push, names }: any = useHistory();
59 const { push, names }: any = useHistory();
60+ const { setWallet, setWalletType, setAuthToken }: any = useWallet();
61+ const { setMetamask }: any = useNetwork();
43 const [showModal, setShowModal] = useState(false);
62 const [showModal, setShowModal] = useState(false);
44 const [metamaskSelected, setMetamaskSelected] = useState(false);
63 const [metamaskSelected, setMetamaskSelected] = useState(false);
45
64
65+ const {
66+ address,
67+ authenticate,
68+ connect,
69+ disconnect,
70+ isConnected,
71+ peerIcon,
46− const { connect } = useWalletConnect();
72+ } = useWalletConnect();
47
73
48 const goToActivate = useCallback(() => push(names.ACTIVATE), [
74 const goToActivate = useCallback(() => push(names.ACTIVATE), [
49 push,
75 push,
50 names.ACTIVATE,
76 names.ACTIVATE,
51 ]);
77 ]);
52
78
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+
53 const selectOption = (value: string) => async () => {
116 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) {
55 connect();
120 connect();
121+ } else {
122+ setCurrentTab(value);
56 }
123 }
57− setCurrentTab(value);
58 };
124 };
59
125
60 const loader = <LoadingSpinner background="#bce2ff" foreground="#219DFF" />;
126 const loader = <LoadingSpinner background="#bce2ff" foreground="#219DFF" />;
@@ -63,6 +129,8 @@ export default function LoginSelector({
63 ({ value }) => value !== NAMES.METAMASK || !!(window as any).ethereum
129 ({ value }) => value !== NAMES.METAMASK || !!(window as any).ethereum
64 );
130 );
65
131
132+ const wcConnected = isConnected();
133+
66 if (!currentTab) {
134 if (!currentTab) {
67 return (
135 return (
68 <Grid className={className}>
136 <Grid className={className}>
@@ -72,10 +140,42 @@ export default function LoginSelector({
72 full
140 full
73 className={cn('f5 pv3 rel pointer login-menu-item')}
141 className={cn('f5 pv3 rel pointer login-menu-item')}
74 onClick={selectOption(option.value)}>
142 onClick={selectOption(option.value)}>
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+ <>
75− {option.text}
173+ {option.text}
76− {option.value === NAMES.METAMASK && metamaskSelected
174+ {option.value === NAMES.METAMASK && metamaskSelected
77− ? loader
175+ ? loader
78− : option.menuIcon}
176+ : option.menuIcon}
177+ </>
178+ )}
79 </Grid.Item>
179 </Grid.Item>
80 </React.Fragment>
180 </React.Fragment>
81 ))}
181 ))}
src/views/Ops/Residents.scss+3−5
@@ -1,3 +1,5 @@
1+@import 'style/shared/variables.scss';
2+
1.ops-residents {
3.ops-residents {
2 div.content-container {
4 div.content-container {
3 height: 550px;
5 height: 550px;
@@ -79,7 +81,7 @@
79 font-style: normal;
81 font-style: normal;
80 font-weight: 500;
82 font-weight: 500;
81 line-height: 16px;
83 line-height: 16px;
82− color: rgba(255, 65, 54, 1);
84+ color: $activate-error-red;
83 }
85 }
84 }
86 }
85
87
@@ -94,10 +96,6 @@
94 height: 16px;
96 height: 16px;
95 width: 16px;
97 width: 16px;
96 padding: 4px;
98 padding: 4px;
97−
98− svg {
99−
100− }
101 }
99 }
102
100
103 }
101 }