git.iko.soy/bridge
on 7f9d7df help sign in
bridge/src/lib/useWalletConnect.ts
226 lines 4.6 kB history raw
1import WalletConnect from '@walletconnect/client';
2import QRCodeModal from '@walletconnect/qrcode-modal';
3import { ITxData } from '@walletconnect/types';
5import { useEffect, useState } from 'react';
6import { Just } 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 const authToken = await getAuthToken({
85 address,
86 connector,
87 walletType: WALLET_TYPES.WALLET_CONNECT,
88 });
90 const wallet: WalletConnectWallet = {
91 address,
92 };
94 setAuthToken(Just(authToken));
95 setWallet(Just(wallet));
96 };
98 const isConnected = () => {
99 if (!connector) {
100 return false;
101 }
103 return connector.connected;
104 };
106 const signTransaction = async ({
107 from,
108 to,
109 gas,
110 gasPrice,
111 value,
112 data,
113 nonce,
114 }: ITxData): Promise<string> => {
115 return new Promise((resolve, reject) => {
116 if (!connector || !isConnected()) {
117 reject(new Error('No connected wallet available for signing'));
118 return;
119 }
121 return connector
122 .signTransaction({
123 from,
124 to,
125 gas,
126 gasPrice,
127 value,
128 data,
129 nonce,
130 })
131 .then((txHash: string) => resolve(txHash))
132 .catch((error: Error) => reject(error));
133 });
134 };
136 // Event Handlers
137 const initConnectHandler = () => {
138 if (!connector) {
139 return;
140 }
142 connector.on('connect', async (error, payload: ConnectEvent) => {
143 if (error) {
144 throw error;
145 }
147 const address = payload.params[0].accounts[0];
148 setAddress(address);
149 setPeerMeta(payload.params[0].peerMeta);
150 });
151 };
153 const initDisconnectHandler = () => {
154 if (!connector) {
155 return;
156 }
158 connector.on('disconnect', (error, _payload) => {
159 if (error) {
160 throw error;
161 }
163 setAddress(null);
164 setPeerMeta(null);
165 resetWallet();
166 });
167 };
169 const initSessionUpdateHandler = () => {
170 if (!connector) {
171 return;
172 }
174 connector.on('session_update', (error, payload) => {
175 if (error) {
176 throw error;
177 }
179 disconnect();
180 });
181 };
183 const initModalClosedHandler = () => {
184 if (!connector) {
185 return;
186 }
188 connector.on('modal_closed', () => {
189 resetWallet();
190 resetConnector();
191 });
192 };
194 // Init and clean up
195 useEffect(() => {
196 if (!connector) {
197 return;
198 }
200 initConnectHandler();
201 initDisconnectHandler();
202 initSessionUpdateHandler();
203 initModalClosedHandler();
205 return () => {
206 // Clean up listeners
207 connector.off('connect');
208 connector.off('disconnect');
209 connector.off('session_update');
210 connector.off('modal_closed');
211 };
212 // eslint-disable-next-line react-hooks/exhaustive-deps
213 }, [connector]);
215 return {
216 address,
217 authenticate,
218 connect,
219 connector,
220 disconnect,
221 isConnected,
222 peerMeta,
223 resetConnector,
224 signTransaction,
225 };
226};