upgrade ceramic version

.github/workflows/dashboard-firebase-hosting-merge.yml

@@ -18,7 +18,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: "18"
+          node-version: "20"
       - run: |
           cd packages/client/dashboard
           yarn 
@@ -52,7 +52,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: "18"
+          node-version: "20"
       - run: |
           cd packages/client/dashboard
           yarn 

.github/workflows/dashboard-firebase-hosting-pull-request.yml

@@ -18,7 +18,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: "18"
+          node-version: "20"
       - run: |
           cd packages/client/dashboard
           yarn 
@@ -51,7 +51,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: "18"
+          node-version: "20"
       - run: |
           cd packages/client/dashboard
           yarn 

.github/workflows/scan-firebase-hosting-merge.yml

@@ -18,7 +18,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
       - run: |
           cd packages/client/scan
           yarn 
@@ -49,7 +49,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
       - run: |
           cd packages/client/scan
           yarn 

.github/workflows/scan-firebase-hosting-pull-request.yml

@@ -18,7 +18,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
       - run: |
           cd packages/client/scan
           yarn 
@@ -48,7 +48,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
       - run: |
           cd packages/client/scan
           yarn 

packages/client/dashboard/package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ceramicnetwork/common": "^2.26.0",
-    "@ceramicnetwork/http-client": "^2.22.0",
-    "@composedb/devtools": "0.5.0",
+    "@ceramicnetwork/common": "^3.2.0",
+    "@ceramicnetwork/http-client": "^3.2.0",
+    "@composedb/devtools": "0.6.1",
     "@graphiql/plugin-explorer": "^0.1.20",
     "@monaco-editor/react": "^4.5.1",
     "@rjsf/core": "^5.8.2",
@@ -24,9 +24,10 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.26",
-    "@us3r-network/auth-with-rainbowkit": "^0.1.8",
-    "@us3r-network/data-model": "^0.2.1",
-    "@us3r-network/profile": "^0.4.11",
+    "@us3r-network/auth-with-rainbowkit": "^0.2.1",
+    "@us3r-network/data-model": "^0.7.0",
+    "@us3r-network/profile": "^0.7.0",
+    "axios": "^1.6.2",
     "camelcase": "^7.0.1",
     "dayjs": "^1.11.7",
     "ejs": "^3.1.9",
@@ -40,16 +41,22 @@
     "prism-react-renderer": "^2.0.6",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
-    "react-aria-components": "^1.0.0-alpha.4",
+    "typescript": "^5.3.3",
+    "wagmi": "^1.4.10",
+    "viem": "^1.19.13",
+    "@rainbow-me/rainbowkit": "^1.3.0",
+    "react-aria-components": "^1.0.0",
     "react-dom": "^18.2.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.1.3",
+    "socket.io-client": "^4.7.2",
     "styled-components": "^5.3.11",
-    "typescript": "^4.4.2",
     "use-url-search-params": "^2.5.1",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^2.1.0",
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0"
   },
   "scripts": {
     "start": "react-scripts start",

packages/client/dashboard/src/App.tsx

@@ -29,58 +29,63 @@ import { DappComposite, ModelStream } from './types'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.min.css'
 import DappModelSdk from './container/DappModelSdk'
+import CeramicNodes from './container/CeramicNodes'
+import CeramicNodeProvider from './context/CeramicNodeCtx'
 
 dayjs.extend(relativeTime)
 
-function Routers() {
+function Routers () {
   return (
     <Routes>
-      <Route path="/" element={<Layout />}>
+      <Route path='/' element={<Layout />}>
         <Route index element={<MyDapps />} />
-        <Route path="dapp/create" element={<DappCreate />} />
-        <Route path="dapp/:appId" element={<DappLayout />}>
-          <Route path="index" element={<DappHome />} />
+        <Route path='dapp/create' element={<DappCreate />} />
+        <Route path='dapp/:appId' element={<DappLayout />}>
+          <Route path='index' element={<DappHome />} />
+          <Route path='node' element={<CeramicNodes />} />
           <Route element={<ModelEditorLayout />}>
-            <Route path="model-editor" element={<DappModelEditor />} />
-            <Route path="model-playground" element={<DappModelPlayground />} />
-            <Route path="model-sdk" element={<DappModelSdk />} />
-            <Route path="statistic" element={<DappDataStatistic />} />
+            <Route path='model-editor' element={<DappModelEditor />} />
+            <Route path='model-playground' element={<DappModelPlayground />} />
+            <Route path='model-sdk' element={<DappModelSdk />} />
+            <Route path='statistic' element={<DappDataStatistic />} />
           </Route>
-          <Route path="info" element={<DappInfo />} />
-          <Route path="explore" element={<ExploreModel />} />
-          <Route path="favorite" element={<ExploreModel />} />
-          <Route path="components" element={<Components />} />
+          <Route path='info' element={<DappInfo />} />
+          <Route path='explore' element={<ExploreModel />} />
+          <Route path='favorite' element={<ExploreModel />} />
+          <Route path='components' element={<Components />} />
         </Route>
       </Route>
-      <Route path="*" element={<NoMatch />} />
+      <Route path='*' element={<NoMatch />} />
     </Routes>
   )
 }
 
-export default function App() {
+export default function App () {
   return (
     <Us3rAuthWithRainbowkitProvider
       projectId={WALLET_CONNECT_PROJECT_ID}
-      appName="S3 Console"
+      appName='S3 Console'
     >
       <ProfileStateProvider ceramicHost={CERAMIC_TESTNET_HOST}>
         <CeramicProvider>
-          <Routers />
+          <CeramicNodeProvider>
+            <Routers />
+          </CeramicNodeProvider>
         </CeramicProvider>
       </ProfileStateProvider>
     </Us3rAuthWithRainbowkitProvider>
   )
 }
 
-function Layout() {
+function Layout () {
   return (
     <div>
       <Header />
       <AppContainer>
         <Outlet />
       </AppContainer>
       <ToastContainer
-        position="top-right"
+        position='top-right'
         autoClose={3000}
         hideProgressBar={false}
         newestOnTop={false}
@@ -89,13 +94,13 @@ function Layout() {
         pauseOnFocusLoss
         draggable
         pauseOnHover
-        theme="dark"
+        theme='dark'
       />
     </div>
   )
 }
 
-function DappLayout() {
+function DappLayout () {
   const { loadingDApps, setCurrAppId } = useAppCtx()
   const { appId } = useParams()
 
@@ -105,16 +110,16 @@ function DappLayout() {
 
   if (!appId || loadingDApps) {
     return (
-      <main className="container">
-        <div className="login-first">
-          <img src="/loading.gif" alt="" />
+      <main className='container'>
+        <div className='login-first'>
+          <img src='/loading.gif' alt='' />
         </div>
       </main>
     )
   }
 
   return (
-    <main className="container">
+    <main className='container'>
       <Nav appId={appId} />
       <div>
         <Outlet />
@@ -123,7 +128,7 @@ function DappLayout() {
   )
 }
 
-function ModelEditorLayout() {
+function ModelEditorLayout () {
   const [selectModel, setSelectModel] = useState<ModelStream>()
   const [selectComposite, setSelectComposite] = useState<DappComposite>()
 
@@ -133,11 +138,11 @@ function ModelEditorLayout() {
     <EditorLayoutContainer>
       <ModelList
         selectModel={selectModel}
-        setSelectModel={(data) => {
+        setSelectModel={data => {
           setSelectModel(data)
           setSelectComposite(undefined)
         }}
-        setSelectComposite={(data) => {
+        setSelectComposite={data => {
           setSelectModel(undefined)
           setSelectComposite(data)
         }}
@@ -147,7 +152,7 @@ function ModelEditorLayout() {
       <Outlet
         context={{
           selectModel,
-          selectComposite,
+          selectComposite
         }}
       />
     </EditorLayoutContainer>

packages/client/dashboard/src/api/ceramicNode.ts

@@ -0,0 +1,95 @@
+/*
+ * @Author: bufan bufan@hotmail.com
+ * @Date: 2023-12-15 14:39:12
+ * @LastEditors: bufan bufan@hotmail.com
+ * @LastEditTime: 2023-12-15 15:25:53
+ * @FilePath: /s3/packages/client/dashboard/src/api/ceramicNode.ts
+ * @Description: 
+ */
+
+import axios, { AxiosPromise } from 'axios'
+import { CERAMIC_NODE_SERVICE_API_URL } from '../constants'
+import {
+  CeramicRequestDto,
+  CeramicDto,
+  CeramicNetwork,
+} from '../types'
+
+enum ApiRespCode {
+  SUCCESS = 0,
+  ERROR = 1,
+}
+
+type ApiResp<T> = {
+  code: ApiRespCode
+  msg: string
+  data: T
+}
+
+export function getCeramicNode(id: number): AxiosPromise<ApiResp<CeramicDto>> {
+  return axios({
+    url: CERAMIC_NODE_SERVICE_API_URL + `/ceramics/${id}`,
+    method: 'GET',
+  })
+}
+
+export function createCeramicNode(
+  ceramicNodeParams: CeramicRequestDto,
+  didSession: string
+): AxiosPromise<ApiResp<CeramicDto>> {
+  return axios({
+    url: CERAMIC_NODE_SERVICE_API_URL + '/ceramics',
+    method: 'POST',
+    headers: {
+      'did-session': didSession,
+    },
+    data: { ...ceramicNodeParams },
+  })
+}
+
+// export function updateCeramicNode(
+//   id: number,
+//   dapp: CeramicRequestDto,
+//   didSession: string
+// ): AxiosPromise<ApiResp<CeramicDto>> {
+//   if (!id) throw new Error('ceramic node id is required')
+
+//   return axios({
+//     url: CERAMIC_NODE_SERVICE_API_URL + '/ceramics',
+//     method: 'POST',
+//     headers: {
+//       'did-session': didSession,
+//     },
+//     data: { ...dapp, id: Number(id) },
+//   })
+// }
+
+export function delCeramicNode(
+  id: number,
+  didSession: string
+): AxiosPromise<ApiResp<undefined>> {
+  if (!id) throw new Error('ceramic node id is required')
+
+  return axios({
+    url: CERAMIC_NODE_SERVICE_API_URL + '/ceramics/' + id,
+    method: 'DELETE',
+    headers: {
+      'did-session': didSession,
+    },
+  })
+}
+
+export function getCeramicNodes(
+  didSession: string,
+  network?: CeramicNetwork
+): AxiosPromise<ApiResp<CeramicDto[]>> {
+
+  return axios({
+    url: CERAMIC_NODE_SERVICE_API_URL + '/ceramics',
+    method: 'GET',
+    headers: {
+      'did-session': didSession,
+    },
+    data: { network },
+  })
+}