git.iko.soy/bridge
on master help sign in
Merge pull request #865 from willbach/mm-redesign
1f43839tomholford
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,22 +57,71 @@ 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 // TODO: do we still need this? currently not being set
63 // TODO: do we still need this? currently not being set
45 const [metamaskSelected, setMetamaskSelected] = useState(false);
64 const [metamaskSelected, setMetamaskSelected] = useState(false);
46
65
66+ const {
67+ address,
68+ authenticate,
69+ connect,
70+ disconnect,
71+ isConnected,
72+ peerIcon,
47− const { connect } = useWalletConnect();
73+ } = useWalletConnect();
48
74
49 const goToActivate = useCallback(() => push(names.ACTIVATE), [
75 const goToActivate = useCallback(() => push(names.ACTIVATE), [
50 push,
76 push,
51 names.ACTIVATE,
77 names.ACTIVATE,
52 ]);
78 ]);
53
79
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+
54 const selectOption = (value: string) => async () => {
117 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) {
56 connect();
121 connect();
122+ } else {
123+ setCurrentTab(value);
57 }
124 }
58− setCurrentTab(value);
59 };
125 };
60
126
61 const loader = <LoadingSpinner background="#bce2ff" foreground="#219DFF" />;
127 const loader = <LoadingSpinner background="#bce2ff" foreground="#219DFF" />;
@@ -64,6 +130,8 @@ export default function LoginSelector({
64 ({ value }) => value !== NAMES.METAMASK || !!(window as any).ethereum
130 ({ value }) => value !== NAMES.METAMASK || !!(window as any).ethereum
65 );
131 );
66
132
133+ const wcConnected = isConnected();
134+
67 if (!currentTab) {
135 if (!currentTab) {
68 return (
136 return (
69 <Grid className={className}>
137 <Grid className={className}>
@@ -73,10 +141,42 @@ export default function LoginSelector({
73 full
141 full
74 className={cn('f5 pv3 rel pointer login-menu-item')}
142 className={cn('f5 pv3 rel pointer login-menu-item')}
75 onClick={selectOption(option.value)}>
143 onClick={selectOption(option.value)}>
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+ <>
76− {option.text}
174+ {option.text}
77− {option.value === NAMES.METAMASK && metamaskSelected
175+ {option.value === NAMES.METAMASK && metamaskSelected
78− ? loader
176+ ? loader
79− : option.menuIcon}
177+ : option.menuIcon}
178+ </>
179+ )}
80 </Grid.Item>
180 </Grid.Item>
81 </React.Fragment>
181 </React.Fragment>
82 ))}
182 ))}
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 }