11import { 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' ;
415import { OfferData } from '../../../src/shared/types.js' ;
516import { useWallet } from './providers/WalletProvider/WalletProviderContext.js' ;
617import { AccountWidget } from './providers/WalletProvider/AccountWidget.js' ;
@@ -11,6 +22,10 @@ import { MakeDeal } from './components/MakeDeal.js';
1122import { Offers } from './components/Offers.js' ;
1223import { Deals , DealsRegistryRecord } from './components/Deals.js' ;
1324
25+ /** Target chain config */
26+ const chain =
27+ import . meta. env . LOCAL_NODE === 'true' ? hardhat : polygonZkEvmTestnet ;
28+
1429/** Default request expiration time */
1530const defaultExpire = '30s' ;
1631
@@ -27,8 +42,12 @@ export const App = () => {
2742 const [ selectedTab , setSelectedTab ] = useState < number > ( 0 ) ;
2843 const [ requests , setRequests ] = useState < RequestsRegistryRecord [ ] > ( [ ] ) ;
2944 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+ > ( ) ;
3251 const [ error , setError ] = useState < string | undefined > ( ) ;
3352
3453 /** This hook starts the client that will be available via `client.current` */
@@ -38,7 +57,8 @@ export const App = () => {
3857 setError ( undefined ) ;
3958
4059 const options : ClientOptions = {
41- chain : chainConfig ,
60+ chain,
61+ contracts : contractsConfig ,
4262 serverAddress,
4363 storageInitializer : storage . localStorage . createInitializer ( {
4464 session : false , // session or local storage
@@ -55,9 +75,12 @@ export const App = () => {
5575
5676 const updateDeals = ( ) => {
5777 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 ) ;
6184 }
6285 } ;
6386
@@ -75,12 +98,18 @@ export const App = () => {
7598
7699 client . current . addEventListener ( 'connected' , ( ) => {
77100 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+ ) ;
79105 } ) ;
80106
81107 client . current . addEventListener ( 'disconnected' , ( ) => {
82108 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+ ) ;
84113 } ) ;
85114
86115 /** Listening for requests events and update tables */
@@ -132,15 +161,21 @@ export const App = () => {
132161
133162 return (
134163 < >
135- < div style = { { display : 'flex' , flexDirection : 'row' , alignItems : 'center' } } >
164+ < div
165+ style = { { display : 'flex' , flexDirection : 'row' , alignItems : 'center' } }
166+ >
136167 < div style = { { flex : 1 } } >
137168 < h1 > Client</ h1 >
138169 </ div >
139170 < AccountWidget />
140171 </ div >
141172 { client . current && < div > ✅ Client started</ div > }
142173 { 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+ />
144179 < Tabs
145180 tabs = { [
146181 {
0 commit comments