1
1
import { useState , useEffect , useRef } from 'react' ;
2
- import { Client , ClientOptions , createClient , storage } from '../../../src/index.js' ; // @windingtree /sdk
3
- import { RequestQuery , OfferOptions , chainConfig , serverAddress } from '../../shared/index.js' ;
2
+ import { hardhat , polygonZkEvmTestnet } from 'viem/chains' ;
3
+ import {
4
+ Client ,
5
+ ClientOptions ,
6
+ createClient ,
7
+ storage ,
8
+ } from '../../../src/index.js' ; // @windingtree /sdk
9
+ import {
10
+ RequestQuery ,
11
+ OfferOptions ,
12
+ contractsConfig ,
13
+ serverAddress ,
14
+ } from '../../shared/index.js' ;
4
15
import { OfferData } from '../../../src/shared/types.js' ;
5
16
import { useWallet } from './providers/WalletProvider/WalletProviderContext.js' ;
6
17
import { AccountWidget } from './providers/WalletProvider/AccountWidget.js' ;
@@ -11,6 +22,10 @@ import { MakeDeal } from './components/MakeDeal.js';
11
22
import { Offers } from './components/Offers.js' ;
12
23
import { Deals , DealsRegistryRecord } from './components/Deals.js' ;
13
24
25
+ /** Target chain config */
26
+ const chain =
27
+ import . meta. env . LOCAL_NODE === 'true' ? hardhat : polygonZkEvmTestnet ;
28
+
14
29
/** Default request expiration time */
15
30
const defaultExpire = '30s' ;
16
31
@@ -27,8 +42,12 @@ export const App = () => {
27
42
const [ selectedTab , setSelectedTab ] = useState < number > ( 0 ) ;
28
43
const [ requests , setRequests ] = useState < RequestsRegistryRecord [ ] > ( [ ] ) ;
29
44
const [ deals , setDeals ] = useState < DealsRegistryRecord [ ] > ( [ ] ) ;
30
- const [ offers , setOffers ] = useState < OfferData < RequestQuery , OfferOptions > [ ] | undefined > ( ) ;
31
- const [ offer , setOffer ] = useState < OfferData < RequestQuery , OfferOptions > | undefined > ( ) ;
45
+ const [ offers , setOffers ] = useState <
46
+ OfferData < RequestQuery , OfferOptions > [ ] | undefined
47
+ > ( ) ;
48
+ const [ offer , setOffer ] = useState <
49
+ OfferData < RequestQuery , OfferOptions > | undefined
50
+ > ( ) ;
32
51
const [ error , setError ] = useState < string | undefined > ( ) ;
33
52
34
53
/** This hook starts the client that will be available via `client.current` */
@@ -38,7 +57,8 @@ export const App = () => {
38
57
setError ( undefined ) ;
39
58
40
59
const options : ClientOptions = {
41
- chain : chainConfig ,
60
+ chain,
61
+ contracts : contractsConfig ,
42
62
serverAddress,
43
63
storageInitializer : storage . localStorage . createInitializer ( {
44
64
session : false , // session or local storage
@@ -55,9 +75,12 @@ export const App = () => {
55
75
56
76
const updateDeals = ( ) => {
57
77
if ( client . current ) {
58
- client . current . deals . getAll ( ) . then ( ( newDeals ) => {
59
- setDeals ( newDeals ) ;
60
- } ) . catch ( console . error ) ;
78
+ client . current . deals
79
+ . getAll ( )
80
+ . then ( ( newDeals ) => {
81
+ setDeals ( newDeals ) ;
82
+ } )
83
+ . catch ( console . error ) ;
61
84
}
62
85
} ;
63
86
@@ -75,12 +98,18 @@ export const App = () => {
75
98
76
99
client . current . addEventListener ( 'connected' , ( ) => {
77
100
setConnected ( true ) ;
78
- console . log ( '🔗 Client connected to server at:' , new Date ( ) . toISOString ( ) ) ;
101
+ console . log (
102
+ '🔗 Client connected to server at:' ,
103
+ new Date ( ) . toISOString ( ) ,
104
+ ) ;
79
105
} ) ;
80
106
81
107
client . current . addEventListener ( 'disconnected' , ( ) => {
82
108
setConnected ( false ) ;
83
- console . log ( '🔌 Client disconnected from server at:' , new Date ( ) . toISOString ( ) ) ;
109
+ console . log (
110
+ '🔌 Client disconnected from server at:' ,
111
+ new Date ( ) . toISOString ( ) ,
112
+ ) ;
84
113
} ) ;
85
114
86
115
/** Listening for requests events and update tables */
@@ -132,15 +161,21 @@ export const App = () => {
132
161
133
162
return (
134
163
< >
135
- < div style = { { display : 'flex' , flexDirection : 'row' , alignItems : 'center' } } >
164
+ < div
165
+ style = { { display : 'flex' , flexDirection : 'row' , alignItems : 'center' } }
166
+ >
136
167
< div style = { { flex : 1 } } >
137
168
< h1 > Client</ h1 >
138
169
</ div >
139
170
< AccountWidget />
140
171
</ div >
141
172
{ client . current && < div > ✅ Client started</ div > }
142
173
{ connected && < div > ✅ Connected to the coordination server</ div > }
143
- < RequestForm connected = { connected } onSubmit = { sendRequest } defaultTopic = { defaultTopic } />
174
+ < RequestForm
175
+ connected = { connected }
176
+ onSubmit = { sendRequest }
177
+ defaultTopic = { defaultTopic }
178
+ />
144
179
< Tabs
145
180
tabs = { [
146
181
{
0 commit comments