git.iko.soy/bridge
on e1b0301 help sign in
bridge/src/lib/useWalletConnect.ts
251 lines 5.3 kB history raw
1import WalletConnect from '@walletconnect/client';
2import QRCodeModal from '@walletconnect/qrcode-modal';
3import { ITxData } from '@walletconnect/types';
5import { useEffect, useMemo, useState } from 'react';
6import { Just, Nothing } from 'folktale/maybe';
8import { useWallet } from 'store/wallet';
9import { getAuthToken } from './authToken';
10import { WALLET_TYPES } from './constants';
11import WalletConnectWallet from './types/WalletConnectWallet';
13type PeerMeta = {
14 description: string;
15 icons?: string[];
16 name: string;
17 url: string;
18};
20type ConnectEvent = {
21 event: 'connect';
22 params: [
23 {
24 accounts: string[];
25 chainId: number;
26 peerId: string;
27 peerMeta: PeerMeta;
28 }
29 ];
30};
32export const useWalletConnect = () => {
33 const { setWallet, setAuthToken, resetWallet } = useWallet();
34 const [connector, setConnector] = useState<WalletConnect | null>(null);
35 const [address, setAddress] = useState<string | null>(null);
36 const [peerMeta, setPeerMeta] = useState<PeerMeta | null>(null);
38 const resetConnector = () => {
39 const newConnector = new WalletConnect({
40 bridge: 'https://bridge.walletconnect.org',
41 qrcodeModal: QRCodeModal,
42 });
44 setConnector(newConnector);
46 // restore state from cached connection
47 if (newConnector.accounts.length > 0) {
48 setAddress(newConnector.accounts[0]);
49 }
51 if (newConnector.peerMeta) {
52 setPeerMeta(newConnector.peerMeta);
53 }
54 };
56 // Init connector
57 useEffect(() => {
58 resetConnector();
59 // eslint-disable-next-line react-hooks/exhaustive-deps
60 }, []);
62 // Behavior
63 const connect = async () => {
64 if (!connector || connector.connected) {
65 return;
66 }
68 await connector.createSession();
69 };
71 const disconnect = async () => {
72 if (!connector) {
73 return;
74 }
76 await connector.killSession();
77 };
79 const authenticate = async () => {
80 if (!(address && connector)) {
81 return;
82 }
84 let authToken = Nothing();
85 try {
86 const token = await getAuthToken({
87 address,
88 connector,
89 walletType: WALLET_TYPES.WALLET_CONNECT,
90 });
91 authToken = Just(token);
92 } catch (e) {
93 if (e.message === 'METHOD_NOT_SUPPORTED') {
94 console.warn(
95 'wallet does not support message signing. proceeding without auth token.'
96 );
97 } else {
98 throw e;
99 //TODO should errors with this *really* prevent login?
100 }
101 }
103 const wallet: WalletConnectWallet = {
104 address,
105 };
107 setAuthToken(authToken);
108 setWallet(Just(wallet));
109 };
111 const isConnected = () => {
112 if (!connector) {
113 return false;
114 }
116 return connector.connected;
117 };
119 const peerIcon = useMemo(() => {
120 if (!peerMeta?.icons) {
121 return null;
122 }
124 // Some peers return a list of empty string(s) :)
125 const iconCandidates = peerMeta.icons.filter(pm => pm !== '');
127 return iconCandidates.length > 0 ? iconCandidates[0] : null;
128 }, [peerMeta]);
130 const signTransaction = async ({
131 from,
132 to,
133 gas,
134 gasPrice,
135 value,
136 data,
137 nonce,
138 }: ITxData): Promise<string> => {
139 return new Promise((resolve, reject) => {
140 if (!connector || !isConnected()) {
141 reject(new Error('No connected wallet available for signing'));
142 return;
143 }
145 return connector
146 .signTransaction({
147 from,
148 to,
149 gas,
150 gasPrice,
151 value,
152 data,
153 nonce,
154 })
155 .then((txHash: string) => resolve(txHash))
156 .catch((error: Error) => reject(error));
157 });
158 };
160 // Event Handlers
161 const initConnectHandler = () => {
162 if (!connector) {
163 return;
164 }
166 connector.on('connect', async (error, payload: ConnectEvent) => {
167 if (error) {
168 throw error;
169 }
171 const address = payload.params[0].accounts[0];
172 setAddress(address);
173 setPeerMeta(payload.params[0].peerMeta);
174 });
175 };
177 const initDisconnectHandler = () => {
178 if (!connector) {
179 return;
180 }
182 connector.on('disconnect', (error, _payload) => {
183 if (error) {
184 throw error;
185 }
187 setAddress(null);
188 setPeerMeta(null);
189 resetWallet();
190 });
191 };
193 const initSessionUpdateHandler = () => {
194 if (!connector) {
195 return;
196 }
198 connector.on('session_update', (error, payload) => {
199 if (error) {
200 throw error;
201 }
203 disconnect();
204 });
205 };
207 const initModalClosedHandler = () => {
208 if (!connector) {
209 return;
210 }
212 connector.on('modal_closed', () => {
213 resetWallet();
214 resetConnector();
215 });
216 };
218 // Init and clean up
219 useEffect(() => {
220 if (!connector) {
221 return;
222 }
224 initConnectHandler();
225 initDisconnectHandler();
226 initSessionUpdateHandler();
227 initModalClosedHandler();
229 return () => {
230 // Clean up listeners
231 connector.off('connect');
232 connector.off('disconnect');
233 connector.off('session_update');
234 connector.off('modal_closed');
235 };
236 // eslint-disable-next-line react-hooks/exhaustive-deps
237 }, [connector]);
239 return {
240 address,
241 authenticate,
242 connect,
243 connector,
244 disconnect,
245 isConnected,
246 peerIcon,
247 peerMeta,
248 resetConnector,
249 signTransaction,
250 };
251};