git.iko.soy/bridge
on master help sign in
ux: address PR feedback
bf9c5f2tomholford
src/lib/useWalletConnect.ts+21−5
compare with master
unifiedsplit
@@ -33,8 +33,7 @@ export const useWalletConnect = () => {
33 const [address, setAddress] = useState<string | null>(null);
33 const [address, setAddress] = useState<string | null>(null);
34 const [peerMeta, setPeerMeta] = useState<PeerMeta | null>(null);
34 const [peerMeta, setPeerMeta] = useState<PeerMeta | null>(null);
35
35
36− // Init connector
36+ const resetConnector = () => {
37− useEffect(() => {
38 const newConnector = new WalletConnect({
37 const newConnector = new WalletConnect({
39 bridge: 'https://bridge.walletconnect.org',
38 bridge: 'https://bridge.walletconnect.org',
40 qrcodeModal: QRCodeModal,
39 qrcodeModal: QRCodeModal,
@@ -50,6 +49,11 @@ export const useWalletConnect = () => {
50 if (newConnector.peerMeta) {
49 if (newConnector.peerMeta) {
51 setPeerMeta(newConnector.peerMeta);
50 setPeerMeta(newConnector.peerMeta);
52 }
51 }
52+ };
53+
54+ // Init connector
55+ useEffect(() => {
56+ resetConnector();
53 // eslint-disable-next-line react-hooks/exhaustive-deps
57 // eslint-disable-next-line react-hooks/exhaustive-deps
54 }, []);
58 }, []);
55
59
@@ -62,13 +66,12 @@ export const useWalletConnect = () => {
62 connector.createSession();
66 connector.createSession();
63 };
67 };
64
68
65− const disconnect = () => {
69+ const disconnect = async () => {
66 if (!connector) {
70 if (!connector) {
67− console.warn('Nothing to disconnect');
68 return;
71 return;
69 }
72 }
70
73
71− connector.killSession();
74+ await connector.killSession();
72 };
75 };
73
76
74 type AuthenticateArgs = {
77 type AuthenticateArgs = {
@@ -155,6 +158,17 @@ export const useWalletConnect = () => {
155 });
158 });
156 };
159 };
157
160
161+ const initModalClosedHandler = () => {
162+ if (!connector) {
163+ return;
164+ }
165+
166+ connector.on('modal_closed', () => {
167+ resetWallet();
168+ resetConnector();
169+ });
170+ };
171+
158 // Init and clean up
172 // Init and clean up
159 useEffect(() => {
173 useEffect(() => {
160 if (!connector) {
174 if (!connector) {
@@ -164,6 +178,7 @@ export const useWalletConnect = () => {
164 initConnectHandler();
178 initConnectHandler();
165 initDisconnectHandler();
179 initDisconnectHandler();
166 initSessionUpdateHandler();
180 initSessionUpdateHandler();
181+ initModalClosedHandler();
167
182
168 return () => {
183 return () => {
169 // Clean up listeners
184 // Clean up listeners
@@ -182,5 +197,6 @@ export const useWalletConnect = () => {
182 disconnect,
197 disconnect,
183 isConnected,
198 isConnected,
184 peerMeta,
199 peerMeta,
200+ resetConnector,
185 };
201 };
186};
202};
src/views/Login/WalletConnect.tsx+2−13
@@ -30,14 +30,6 @@ const WalletConnectLogin = ({ className, goHome }) => {
30 peerMeta,
30 peerMeta,
31 } = useWalletConnect();
31 } = useWalletConnect();
32
32
33− const handleConnectButtonClick = () => {
34− if (isConnected()) {
35− disconnect();
36− } else {
37− connect();
38− }
39− };
40−
41 const initialValues = useMemo(
33 const initialValues = useMemo(
42 () => ({
34 () => ({
43 useCustomPath: false,
35 useCustomPath: false,
@@ -100,7 +92,7 @@ const WalletConnectLogin = ({ className, goHome }) => {
100 <RestartButton
92 <RestartButton
101 as="a"
93 as="a"
102 className={'gray3'}
94 className={'gray3'}
103− onClick={handleConnectButtonClick}>
95+ onClick={disconnect}>
104 disconnect
96 disconnect
105 </RestartButton>
97 </RestartButton>
106 </Grid.Item>
98 </Grid.Item>
@@ -148,10 +140,7 @@ const WalletConnectLogin = ({ className, goHome }) => {
148 </>
140 </>
149 ) : (
141 ) : (
150 <>
142 <>
151− <Grid.Item
152− full
153− as={ForwardButton}
143+ <Grid.Item full as={ForwardButton} solid onClick={connect}>
154− onClick={handleConnectButtonClick}>
155 {'Connect'}
144 {'Connect'}
156 </Grid.Item>
145 </Grid.Item>
157 </>
146 </>