Skip to content

Commit 062afa3

Browse files
kostyshkostysh
committed
refactor: 💡 Client example updated to use refactored Client
1 parent 4601a62 commit 062afa3

File tree

3 files changed

+151
-97
lines changed

3 files changed

+151
-97
lines changed

‎examples/client/src/App.tsx

Lines changed: 111 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
import { useState, useEffect, useRef } from 'react';
22
import { hardhat, polygonZkEvmTestnet } from 'viem/chains';
3+
import { EventHandler } from '@libp2p/interfaces/events';
34
import {
45
Client,
56
ClientOptions,
67
createClient,
78
storage,
89
ClientRequestsManager,
910
buildRequest,
11+
ClientDealsManager,
12+
ClientRequestRecord,
1013
} from '../../../src/index.js'; // @windingtree/sdk
1114
import {
1215
RequestQuery,
1316
OfferOptions,
1417
contractsConfig,
1518
serverAddress,
1619
} from '../../shared/index.js';
17-
import { OfferData } from '../../../src/shared/types.js';
20+
import { OfferData, RequestData } from '../../../src/shared/types.js';
1821
import { useWallet } from './providers/WalletProvider/WalletProviderContext.js';
1922
import { AccountWidget } from './providers/WalletProvider/AccountWidget.js';
2023
import { FormValues, RequestForm } from './components/RequestForm.js';
@@ -42,6 +45,10 @@ export const App = () => {
4245
const requestsManager = useRef<
4346
ClientRequestsManager<RequestQuery, OfferOptions> | undefined
4447
>();
48+
const dealsManager = useRef<ClientDealsManager<
49+
RequestQuery,
50+
OfferOptions
51+
>>();
4552
const { publicClient } = useWallet();
4653
const [connected, setConnected] = useState<boolean>(false);
4754
const [selectedTab, setSelectedTab] = useState<number>(0);
@@ -57,6 +64,63 @@ export const App = () => {
5764

5865
/** This hook starts the client that will be available via `client.current` */
5966
useEffect(() => {
67+
const updateRequests = () => {
68+
setRequests(requestsManager.current?.getAll() || []);
69+
};
70+
71+
const updateDeals = () => {
72+
if (dealsManager.current) {
73+
dealsManager.current
74+
.getAll()
75+
.then((newDeals) => {
76+
setDeals(newDeals);
77+
})
78+
.catch(console.error);
79+
}
80+
};
81+
82+
const onClientStart = () => {
83+
console.log('🚀 Client started at:', new Date().toISOString());
84+
updateRequests();
85+
updateDeals();
86+
};
87+
88+
const onClientStop = () => {
89+
console.log('👋 Client stopped at:', new Date().toISOString());
90+
};
91+
92+
const onClientConnected = () => {
93+
setConnected(true);
94+
console.log(
95+
'🔗 Client connected to server at:',
96+
new Date().toISOString(),
97+
);
98+
};
99+
100+
const onClientDisconnected = () => {
101+
setConnected(false);
102+
console.log(
103+
'🔌 Client disconnected from server at:',
104+
new Date().toISOString(),
105+
);
106+
};
107+
108+
const onRequestSubscribe: EventHandler<CustomEvent<ClientRequestRecord>> = ({ detail }) => {
109+
client.current?.subscribe(detail.data.id);
110+
};
111+
112+
const onRequestUnsubscribe: EventHandler<CustomEvent<ClientRequestRecord>> = ({ detail }) => {
113+
client.current?.unsubscribe(detail.data.id);
114+
};
115+
116+
const onRequestPublish: EventHandler<CustomEvent<RequestData<RequestQuery>>> = ({ detail }) => {
117+
requestsManager.current?.add(detail);
118+
};
119+
120+
const onOffer: EventHandler<CustomEvent<OfferData<RequestQuery, OfferOptions>>> = ({ detail }) => {
121+
requestsManager.current?.addOffer(detail);
122+
};
123+
60124
const startClient = async () => {
61125
try {
62126
setError(undefined);
@@ -67,88 +131,47 @@ export const App = () => {
67131

68132
const store = await storageInitializer();
69133

70-
const clientRequestManager = new ClientRequestsManager<
134+
requestsManager.current = new ClientRequestsManager<
71135
RequestQuery,
72136
OfferOptions
73137
>({
74138
storage: store,
75139
prefix: 'wt_requests_',
76140
});
77141

78-
const options: ClientOptions = {
142+
dealsManager.current = new ClientDealsManager<
143+
RequestQuery,
144+
OfferOptions
145+
>({
146+
storage: store,
147+
prefix: 'wt_deals_',
148+
checkInterval: '5s',
79149
chain,
80150
contracts: contractsConfig,
81-
serverAddress,
82-
storageInitializer,
83-
dbKeysPrefix: 'wt_',
84151
publicClient,
85-
};
86-
87-
const updateRequests = () => {
88-
setRequests(clientRequestManager.getAll());
89-
};
90-
91-
const updateDeals = () => {
92-
if (client.current) {
93-
client.current.deals
94-
.getAll()
95-
.then((newDeals) => {
96-
setDeals(newDeals);
97-
})
98-
.catch(console.error);
99-
}
100-
};
101-
102-
client.current = createClient<RequestQuery, OfferOptions>(options);
103-
104-
client.current.addEventListener('start', () => {
105-
console.log('🚀 Client started at:', new Date().toISOString());
106-
updateRequests();
107-
updateDeals();
108-
});
109-
110-
client.current.addEventListener('stop', () => {
111-
console.log('👋 Client stopped at:', new Date().toISOString());
112152
});
113153

114-
client.current.addEventListener('connected', () => {
115-
setConnected(true);
116-
console.log(
117-
'🔗 Client connected to server at:',
118-
new Date().toISOString(),
119-
);
120-
});
121-
122-
client.current.addEventListener('disconnected', () => {
123-
setConnected(false);
124-
console.log(
125-
'🔌 Client disconnected from server at:',
126-
new Date().toISOString(),
127-
);
154+
client.current = createClient<RequestQuery, OfferOptions>({
155+
serverAddress,
128156
});
129157

130-
/** Listening for requests events and update tables */
131-
clientRequestManager.addEventListener('request', updateRequests);
132-
clientRequestManager.addEventListener('expire', updateRequests);
133-
clientRequestManager.addEventListener('cancel', updateRequests);
134-
clientRequestManager.addEventListener('delete', updateRequests);
135-
clientRequestManager.addEventListener('clear', updateRequests);
136-
clientRequestManager.addEventListener('offer', updateRequests);
158+
client.current.addEventListener('start', onClientStart);
159+
client.current.addEventListener('stop', onClientStop);
160+
client.current.addEventListener('connected', onClientConnected);
161+
client.current.addEventListener('disconnected', onClientDisconnected);
162+
client.current.addEventListener('publish', onRequestPublish);
163+
client.current.addEventListener('offer', onOffer);
137164

138-
clientRequestManager.addEventListener('subscribe', ({ detail }) => {
139-
client.current?.subscribe(detail.data.id);
140-
});
141-
clientRequestManager.addEventListener('unsubscribe', ({ detail }) => {
142-
client.current?.unsubscribe(detail.data.id);
143-
});
165+
requestsManager.current.addEventListener('request', updateRequests);
166+
requestsManager.current.addEventListener('expire', updateRequests);
167+
requestsManager.current.addEventListener('cancel', updateRequests);
168+
requestsManager.current.addEventListener('delete', updateRequests);
169+
requestsManager.current.addEventListener('clear', updateRequests);
170+
requestsManager.current.addEventListener('offer', updateRequests);
171+
requestsManager.current.addEventListener('subscribe', onRequestSubscribe);
172+
requestsManager.current.addEventListener('unsubscribe', onRequestUnsubscribe);
144173

145-
client.current.addEventListener('publish', ({ detail }) => {
146-
clientRequestManager.add(detail);
147-
});
148-
client.current.addEventListener('offer', ({ detail }) => {
149-
clientRequestManager.addOffer(detail);
150-
});
151-
client.current.addEventListener('deal:changed', updateDeals);
174+
dealsManager.current.addEventListener('changed', updateDeals);
152175

153176
await client.current.start();
154177
} catch (error) {
@@ -164,7 +187,26 @@ export const App = () => {
164187
startClient();
165188

166189
return () => {
190+
client.current?.removeEventListener('start', onClientStart);
191+
client.current?.removeEventListener('stop', onClientStop);
192+
client.current?.removeEventListener('connected', onClientConnected);
193+
client.current?.removeEventListener('disconnected', onClientDisconnected);
194+
client.current?.removeEventListener('publish', onRequestPublish);
195+
client.current?.removeEventListener('offer', onOffer);
196+
197+
requestsManager.current?.removeEventListener('request', updateRequests);
198+
requestsManager.current?.removeEventListener('expire', updateRequests);
199+
requestsManager.current?.removeEventListener('cancel', updateRequests);
200+
requestsManager.current?.removeEventListener('delete', updateRequests);
201+
requestsManager.current?.removeEventListener('clear', updateRequests);
202+
requestsManager.current?.removeEventListener('offer', updateRequests);
203+
requestsManager.current?.removeEventListener('subscribe', onRequestSubscribe);
204+
requestsManager.current?.removeEventListener('unsubscribe', onRequestUnsubscribe);
205+
206+
dealsManager.current?.removeEventListener('changed', updateDeals);
207+
167208
stopClient().catch(console.error);
209+
dealsManager.current?.stop();
168210
};
169211
}, [publicClient]);
170212

@@ -248,10 +290,10 @@ export const App = () => {
248290
setOffers(undefined);
249291
}}
250292
/>
251-
<MakeDeal offer={offer} client={client.current} />
293+
<MakeDeal offer={offer} manager={dealsManager.current} />
252294
</TabPanel>
253295
<TabPanel id={1} activeTab={selectedTab}>
254-
<Deals deals={deals} client={client.current} />
296+
<Deals deals={deals} manager={dealsManager.current} />
255297
</TabPanel>
256298

257299
{error && <div style={{ marginTop: 20 }}>🚨 {error}</div>}

0 commit comments

Comments
 (0)