Skip to content

Commit 334d62d

Browse files
kostyshkostysh
authored
Merge pull request #24 from windingtree/develop
Thin Client
2 parents c8bf48c + 4b2fe55 commit 334d62d

File tree

17 files changed

+1212
-1423
lines changed

17 files changed

+1212
-1423
lines changed

‎examples/client/src/App.tsx‎

Lines changed: 144 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +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,
9+
ClientRequestsManager,
10+
buildRequest,
11+
ClientDealsManager,
12+
ClientRequestRecord,
813
} from '../../../src/index.js'; // @windingtree/sdk
914
import {
1015
RequestQuery,
1116
OfferOptions,
1217
contractsConfig,
1318
serverAddress,
1419
} from '../../shared/index.js';
15-
import { OfferData } from '../../../src/shared/types.js';
20+
import { OfferData, RequestData } from '../../../src/shared/types.js';
1621
import { useWallet } from './providers/WalletProvider/WalletProviderContext.js';
1722
import { AccountWidget } from './providers/WalletProvider/AccountWidget.js';
1823
import { FormValues, RequestForm } from './components/RequestForm.js';
@@ -37,6 +42,13 @@ const defaultTopic = 'hello';
3742
*/
3843
export const App = () => {
3944
const client = useRef<Client<RequestQuery, OfferOptions> | undefined>();
45+
const requestsManager = useRef<
46+
ClientRequestsManager<RequestQuery, OfferOptions> | undefined
47+
>();
48+
const dealsManager = useRef<ClientDealsManager<
49+
RequestQuery,
50+
OfferOptions
51+
>>();
4052
const { publicClient } = useWallet();
4153
const [connected, setConnected] = useState<boolean>(false);
4254
const [selectedTab, setSelectedTab] = useState<number>(0);
@@ -52,77 +64,114 @@ export const App = () => {
5264

5365
/** This hook starts the client that will be available via `client.current` */
5466
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+
55124
const startClient = async () => {
56125
try {
57126
setError(undefined);
58127

59-
const options: ClientOptions = {
60-
chain,
61-
contracts: contractsConfig,
62-
serverAddress,
63-
storageInitializer: storage.localStorage.createInitializer({
64-
session: false, // session or local storage
65-
}),
66-
dbKeysPrefix: 'wt_',
67-
publicClient,
68-
};
69-
70-
const updateRequests = () => {
71-
if (client.current) {
72-
setRequests(client.current.requests.getAll());
73-
}
74-
};
75-
76-
const updateDeals = () => {
77-
if (client.current) {
78-
client.current.deals
79-
.getAll()
80-
.then((newDeals) => {
81-
setDeals(newDeals);
82-
})
83-
.catch(console.error);
84-
}
85-
};
128+
const storageInitializer = storage.localStorage.createInitializer({
129+
session: false, // session or local storage
130+
});
86131

87-
client.current = createClient<RequestQuery, OfferOptions>(options);
132+
const store = await storageInitializer();
88133

89-
client.current.addEventListener('start', () => {
90-
console.log('🚀 Client started at:', new Date().toISOString());
91-
updateRequests();
92-
updateDeals();
134+
requestsManager.current = new ClientRequestsManager<
135+
RequestQuery,
136+
OfferOptions
137+
>({
138+
storage: store,
139+
prefix: 'wt_requests_',
93140
});
94141

95-
client.current.addEventListener('stop', () => {
96-
console.log('👋 Client stopped at:', new Date().toISOString());
142+
dealsManager.current = new ClientDealsManager<
143+
RequestQuery,
144+
OfferOptions
145+
>({
146+
storage: store,
147+
prefix: 'wt_deals_',
148+
checkInterval: '5s',
149+
chain,
150+
contracts: contractsConfig,
151+
publicClient,
97152
});
98153

99-
client.current.addEventListener('connected', () => {
100-
setConnected(true);
101-
console.log(
102-
'🔗 Client connected to server at:',
103-
new Date().toISOString(),
104-
);
154+
client.current = createClient<RequestQuery, OfferOptions>({
155+
serverAddress,
105156
});
106157

107-
client.current.addEventListener('disconnected', () => {
108-
setConnected(false);
109-
console.log(
110-
'🔌 Client disconnected from server at:',
111-
new Date().toISOString(),
112-
);
113-
});
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);
114164

115-
/** Listening for requests events and update tables */
116-
client.current.addEventListener('request:create', updateRequests);
117-
client.current.addEventListener('request:subscribe', updateRequests);
118-
client.current.addEventListener('request:publish', updateRequests);
119-
client.current.addEventListener('request:unsubscribe', updateRequests);
120-
client.current.addEventListener('request:expire', updateRequests);
121-
client.current.addEventListener('request:cancel', updateRequests);
122-
client.current.addEventListener('request:delete', updateRequests);
123-
client.current.addEventListener('request:offer', updateRequests);
124-
client.current.addEventListener('request:clear', updateRequests);
125-
client.current.addEventListener('deal:changed', updateDeals);
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);
173+
174+
dealsManager.current.addEventListener('changed', updateDeals);
126175

127176
await client.current.start();
128177
} catch (error) {
@@ -131,7 +180,34 @@ export const App = () => {
131180
}
132181
};
133182

183+
const stopClient = async () => {
184+
client.current?.stop();
185+
};
186+
134187
startClient();
188+
189+
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+
208+
stopClient().catch(console.error);
209+
dealsManager.current?.stop();
210+
};
135211
}, [publicClient]);
136212

137213
/** Publishing of request */
@@ -143,7 +219,7 @@ export const App = () => {
143219
throw new Error('The client is not initialized yet');
144220
}
145221

146-
const request = await client.current.requests.create({
222+
const request = await buildRequest<RequestQuery>({
147223
topic,
148224
expire: defaultExpire,
149225
nonce: BigInt(1),
@@ -152,7 +228,7 @@ export const App = () => {
152228
},
153229
});
154230

155-
client.current.requests.publish(request);
231+
client.current.publish(request);
156232
} catch (error) {
157233
console.log('@@@', error);
158234
setError((error as Error).message);
@@ -193,15 +269,15 @@ export const App = () => {
193269
<TabPanel id={0} activeTab={selectedTab}>
194270
<Requests
195271
requests={requests}
196-
subscribed={(id) => client.current?.requests.subscribed(id) || false}
272+
subscribed={(id) =>
273+
requestsManager.current?.get(id)?.subscribed || false
274+
}
197275
onClear={() => {
198-
if (client.current) {
199-
client.current?.requests.clear();
200-
}
276+
requestsManager.current?.clear();
201277
}}
202278
onCancel={(id) => {
203279
if (client.current) {
204-
client.current.requests.cancel(id);
280+
requestsManager.current?.cancel(id);
205281
}
206282
}}
207283
onOffers={setOffers}
@@ -214,10 +290,10 @@ export const App = () => {
214290
setOffers(undefined);
215291
}}
216292
/>
217-
<MakeDeal offer={offer} client={client.current} />
293+
<MakeDeal offer={offer} manager={dealsManager.current} />
218294
</TabPanel>
219295
<TabPanel id={1} activeTab={selectedTab}>
220-
<Deals deals={deals} client={client.current} />
296+
<Deals deals={deals} manager={dealsManager.current} />
221297
</TabPanel>
222298

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

0 commit comments

Comments
 (0)