Sync beta

.env.example

@@ -2,3 +2,4 @@
 EXAMPLE_ENTITY_SIGNER_MNEMONIC=
 # EXAMPLE_ENTITY_SIGNER_PK=
 EXAMPLE_ENTITY_ID=
+EXAMPLE_ENTITY_OWNER_ADDRESS=

.github/workflows/release.yml

@@ -18,7 +18,7 @@ jobs:
         with:
           node-version: "lts/*"
       - name: Install dependencies
-        run: yarn install --frozen-lockfile && yarn --cwd ./examples/client install --frozen-lockfile
+        run: yarn install --frozen-lockfile && yarn --cwd ./examples/client install --frozen-lockfile && yarn --cwd ./examples/manager install --frozen-lockfile
       - name: Lint
         run: yarn lint
       - name: Test

.github/workflows/test.yml

@@ -20,7 +20,11 @@ jobs:
         with:
           node-version: "lts/*"
       - name: Install dependencies
-        run: yarn install --frozen-lockfile && yarn --cwd ./examples/client install --frozen-lockfile
+        run: |
+          yarn install --frozen-lockfile && \
+          yarn --cwd ./examples/client install --frozen-lockfile && \
+          yarn --cwd ./examples/manager install --frozen-lockfile && \
+          yarn --cwd ./examples/react-libs install --frozen-lockfile
       - name: Lint
         run: yarn lint
       - name: Test

examples/client/package.json

@@ -4,15 +4,16 @@
   "version": "0.0.0",
   "type": "module",
   "devDependencies": {
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.44.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^5.0.4",
-    "viem": "^0.3.43",
+    "typescript": "^5.1.6",
+    "viem": "^1.2.9",
     "vite": "^4.3.9"
   },
   "eslintConfig": {
@@ -39,8 +40,9 @@
     ]
   },
   "scripts": {
-    "dev": "vite --force",
+    "dev": "vite --force --port 5173",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint . --ext .ts"
   }
 }

examples/client/src/App.tsx

@@ -3,23 +3,21 @@ import { hardhat, polygonZkEvmTestnet } from 'viem/chains';
 import { EventHandler } from '@libp2p/interfaces/events';
 import {
   Client,
-  ClientOptions,
   createClient,
-  storage,
   ClientRequestsManager,
-  buildRequest,
   ClientDealsManager,
   ClientRequestRecord,
-} from '../../../src/index.js'; // @windingtree/sdk
+} from '../../../src/client/index.js'; // @windingtree/sdk
+import { storage, buildRequest } from '../../../src/index.js'; // @windingtree/sdk
 import {
   RequestQuery,
   OfferOptions,
   contractsConfig,
   serverAddress,
 } from '../../shared/index.js';
 import { OfferData, RequestData } from '../../../src/shared/types.js';
-import { useWallet } from './providers/WalletProvider/WalletProviderContext.js';
-import { AccountWidget } from './providers/WalletProvider/AccountWidget.js';
+import { useWallet } from '../../react-libs/src/providers/WalletProvider/WalletProviderContext.js';
+import { AccountWidget } from '../../react-libs/src/providers/WalletProvider/AccountWidget.js';
 import { FormValues, RequestForm } from './components/RequestForm.js';
 import { Tabs, TabPanel } from './components/Tabs.js';
 import { Requests, RequestsRegistryRecord } from './components/Requests.js';

examples/client/src/components/Deals.tsx

@@ -1,14 +1,18 @@
 import { useState, useCallback, useEffect } from 'react';
 import { DateTime } from 'luxon';
-import { Address } from 'viem';
+import { Address, Hash } from 'viem';
 import {
-  ClientDealsManager,
   DealRecord,
   DealStatus,
 } from '../../../../src/index.js'; // @windingtree/sdk
+import { ClientDealsManager } from '../../../../src/client/dealsManager.js';
 import { RequestQuery, OfferOptions } from '../../../shared/index.js';
-import { centerEllipsis, formatBalance, parseWalletError } from '../utils.js';
-import { useWallet } from '../providers/WalletProvider/WalletProviderContext.js';
+import {
+  centerEllipsis,
+  formatBalance,
+  parseWalletError,
+} from '../../../react-libs/src/utils/index.js';
+import { useWallet } from '../../../react-libs/src/providers/WalletProvider/WalletProviderContext.js';
 
 export type DealsRegistryRecord = Required<
   DealRecord<RequestQuery, OfferOptions>
@@ -219,13 +223,31 @@ export const Cancel = ({ deal, manager, onClose }: CancelProps) => {
  * Created deals table
  */
 export const Deals = ({ deals, manager }: DealsProps) => {
+  const { walletClient } = useWallet();
   const [dealStates, setDealStates] = useState<Record<string, DealStatus>>({});
   const [transferDeal, setTransferDeal] = useState<
     DealsRegistryRecord | undefined
   >();
   const [cancelDeal, setCancelDeal] = useState<
     DealsRegistryRecord | undefined
   >();
+  const [userSign, setUserSign] = useState<Hash | undefined>();
+  const [error, setError] = useState<string | undefined>();
+
+  const handleCheckInOut = useCallback(async (deal: DealsRegistryRecord) => {
+    try {
+      if (!manager || !walletClient) {
+        throw new Error('Wallet not connected yet');
+      }
+      setUserSign(await manager.checkInOutSignature(
+        deal.offer.id,
+        walletClient,
+      ));
+    } catch (error) {
+      console.log(error);
+      setError((error as Error).message || 'Unknown check in signature error');
+    }
+  }, [manager, walletClient]);
 
   useEffect(() => {
     if (deals && deals.length > 0) {
@@ -271,8 +293,8 @@ export const Deals = ({ deals, manager }: DealsProps) => {
                 {DealStatus[dealStates[d.offer.id]]}
               </td>
               <td>
-                <div style={{ display: 'flex', flexDirection: 'column' }}>
-                  <div style={{ marginBottom: 5 }}>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+                  <div>
                     <button
                       onClick={() => setCancelDeal(d)}
                       disabled={
@@ -302,13 +324,22 @@ export const Deals = ({ deals, manager }: DealsProps) => {
                       Transfer
                     </button>
                   </div>
+                  {d.status === DealStatus.Claimed &&
+                    <div>
+                      <button
+                        onClick={() => handleCheckInOut(d)}
+                      >
+                        Check In
+                      </button>
+                    </div>
+                  }
                 </div>
               </td>
             </tr>
           ))}
         </tbody>
       </table>
-      <div style={{ marginTop: 20 }}>
+      <div>
         <TransferForm
           deal={transferDeal}
           manager={manager}
@@ -319,7 +350,17 @@ export const Deals = ({ deals, manager }: DealsProps) => {
           manager={manager}
           onClose={() => setCancelDeal(undefined)}
         />
+        {userSign &&
+          <div style={{ marginTop: 20 }}>
+            <h2>Provide this signature to the reception manager:</h2>
+            <input style={{ width: '100%' }} onFocus={(event) => {
+              event.target.select();
+            }} value={userSign} onChange={() => {}} />
+          </div>
+        }
       </div>
+
+      {error && <div style={{ marginTop: 20 }}>🚨 {error}</div>}
     </div>
   );
 };

examples/client/src/components/MakeDeal.tsx

@@ -1,16 +1,16 @@
 import { useState, useCallback, useEffect } from 'react';
 import { Hash, stringify } from 'viem';
-import { ClientDealsManager } from '../../../../src/index.js'; // @windingtree/sdk
+import { ClientDealsManager } from '../../../../src/client/dealsManager.js';
 import { OfferData } from '../../../../src/shared/types.js';
 import { RequestQuery, OfferOptions } from '../../../shared/index.js';
 import {
   ZeroHash,
   centerEllipsis,
   formatBalance,
   parseWalletError,
-} from '../utils.js';
-import { useWallet } from '../providers/WalletProvider/WalletProviderContext.js';
-import { ConnectButton } from '../providers/WalletProvider/ConnectButton.js';
+} from '../../../react-libs/src/utils/index.js';
+import { useWallet } from '../../../react-libs/src/providers/WalletProvider/WalletProviderContext.js';
+import { ConnectButton } from '../../../react-libs/src/providers/WalletProvider/ConnectButton.js';
 
 interface MakeDealProps {
   offer?: OfferData<RequestQuery, OfferOptions>;

examples/client/src/components/Offers.tsx

@@ -3,7 +3,7 @@ import { stringify } from 'viem';
 import { utils } from '../../../../src/index.js'; // @windingtree/sdk
 import { OfferData } from '../../../../src/shared/types.js';
 import { RequestQuery, OfferOptions } from '../../../shared/index.js';
-import { centerEllipsis } from '../utils.js';
+import { centerEllipsis } from '../../../react-libs/src/utils/index.js';
 
 interface OffersProps {
   offers?: OfferData<RequestQuery, OfferOptions>[];

examples/client/src/components/Requests.tsx

@@ -1,7 +1,8 @@
-import { ClientRequestRecord, utils } from '../../../../src/index.js'; // @windingtree/sdk
+import { utils } from '../../../../src/index.js'; // @windingtree/sdk
+import { ClientRequestRecord } from '../../../../src/client/requestsManager.js';
 import { OfferData } from '../../../../src/shared/types.js';
 import { RequestQuery, OfferOptions } from '../../../shared/index.js';
-import { centerEllipsis } from '../utils.js';
+import { centerEllipsis } from '../../../react-libs/src/utils/index.js';
 
 export type RequestsRegistryRecord = Required<
   ClientRequestRecord<RequestQuery, OfferOptions>

examples/client/src/main.tsx

@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import { WalletProvider } from './providers/WalletProvider';
+import { WalletProvider } from '../../react-libs/src/providers/WalletProvider/index.js';
 import { App } from './App';
 
 window.addEventListener('unhandledrejection', (event) => {