merge main

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

@@ -2,7 +2,7 @@
 # https://github.com/firebase/firebase-tools
 
 name: Deploy Dashboard to Firebase Hosting on merge
-'on':
+"on":
   push:
     branches:
       - dashboard
@@ -11,14 +11,14 @@ jobs:
   prod_build_and_deploy:
     if: github.ref == 'refs/heads/dashboard'
     runs-on: ubuntu-latest
-    environment: 
+    environment:
       name: production
       url: https://dashboard.s3.xyz
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: "18"
       - run: |
           cd packages/client/dashboard
           yarn 
@@ -36,23 +36,23 @@ jobs:
           REACT_APP_ADMIN_ADDRESS: '${{ vars.REACT_APP_ADMIN_ADDRESS }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}'
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}"
           channelId: live
           projectId: us3r-network
           target: dashboard
-          entryPoint: './packages/client/dashboard/' 
+          entryPoint: "./packages/client/dashboard/"
   dev_build_and_deploy:
     if: github.ref == 'refs/heads/dashboard-dev'
     runs-on: ubuntu-latest
-    environment: 
+    environment:
       name: development
       url: https://dashboard-dev.s3.xyz
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: "18"
       - run: |
           cd packages/client/dashboard
           yarn 
@@ -70,9 +70,9 @@ jobs:
           REACT_APP_ADMIN_ADDRESS: '${{ vars.REACT_APP_ADMIN_ADDRESS }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}'
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}"
           channelId: live
           projectId: us3r-network
           target: dashboard-dev
-          entryPoint: './packages/client/dashboard/'
+          entryPoint: "./packages/client/dashboard/"

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

@@ -2,7 +2,7 @@
 # https://github.com/firebase/firebase-tools
 
 name: Deploy Dashboard to Firebase Hosting on PR
-'on': 
+"on":
   pull_request:
     branches:
       - dashboard
@@ -11,14 +11,14 @@ jobs:
   prod_build_and_deploy:
     if: github.ref == 'refs/heads/dashboard' && github.event.pull_request.head.repo.full_name == github.repository
     runs-on: ubuntu-latest
-    environment: 
+    environment:
       name: production
       url: https://dashboard.s3.xyz
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: "18"
       - run: |
           cd packages/client/dashboard
           yarn 
@@ -36,22 +36,22 @@ jobs:
           REACT_APP_ADMIN_ADDRESS: '${{ vars.REACT_APP_ADMIN_ADDRESS }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}'
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}"
           projectId: us3r-network
           target: dashboard
-          entryPoint: './packages/client/dashboard/' 
+          entryPoint: "./packages/client/dashboard/"
   dev_build_and_deploy:
     if: github.ref == 'refs/heads/dashboard-dev' && github.event.pull_request.head.repo.full_name == github.repository
     runs-on: ubuntu-latest
-    environment: 
+    environment:
       name: development
       url: https://dashboard-dev.s3.xyz
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: "18"
       - run: |
           cd packages/client/dashboard
           yarn 
@@ -69,8 +69,8 @@ jobs:
           REACT_APP_ADMIN_ADDRESS: '${{ vars.REACT_APP_ADMIN_ADDRESS }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}'
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_US3R_NETWORK }}"
           projectId: us3r-network
           target: dashboard-dev
-          entryPoint: './packages/client/dashboard/'
+          entryPoint: "./packages/client/dashboard/"

.gitignore

@@ -104,3 +104,5 @@ dist
 .tern-port
 
 .DS_Store
+
+dump.rdb

README.md

@@ -2,15 +2,12 @@
 S3 is a set of develop tools for the Ceramic network.  
 S3 is completely open source.
 
-## Us3rScan
+## US3R-Scan
 https://scan.s3.xyz
 
-## OUs3rDashboard
+## US3R-Dashboard
 https://dashboard.s3.xyz
 
-## SDKs
-Client side under ./packages/client.  
-Server side under ./packages/server.
 
 ## Docker
 S3 ships with a [Docker Compose](https://docs.docker.com/compose/) configuration for setting up a local development and testing environment.  

packages/client/dashboard/.env.example

@@ -1,4 +1,4 @@
-REACT_APP_NAME=US3R DASHBOARD
+REACT_APP_NAME=US3R CONSOLE
 REACT_APP_VERSION=$npm_package_version
 
 REACT_APP_UPLOAD_API_URL=https://api-dev.u3.xyz

packages/client/dashboard/package.json

@@ -17,6 +17,7 @@
     "@types/ejs": "^3.1.2",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "^27.0.1",
+    "@types/jszip": "^3.4.1",
     "@types/lodash": "^4.14.195",
     "@types/node": "^16.7.13",
     "@types/prismjs": "^1.26.0",
@@ -33,6 +34,7 @@
     "graphiql": "^2.4.7",
     "graphql-editor": "6.3.2",
     "json-bigint-patch": "^0.0.8",
+    "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.38.0",
     "prism-react-renderer": "^2.0.6",

packages/client/dashboard/src/App.tsx

@@ -28,6 +28,7 @@ import ModelList from './components/ModelList'
 import { DappComposite, ModelStream } from './types'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.min.css'
+import DappModelSdk from './container/DappModelSdk'
 
 dayjs.extend(relativeTime)
 
@@ -42,6 +43,7 @@ function Routers() {
           <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>
           <Route path="info" element={<DappInfo />} />
@@ -59,7 +61,7 @@ export default function App() {
   return (
     <Us3rAuthWithRainbowkitProvider
       projectId={WALLET_CONNECT_PROJECT_ID}
-      appName="S3 Dashboard"
+      appName="S3 Console"
     >
       <ProfileStateProvider ceramicHost={CERAMIC_TESTNET_HOST}>
         <CeramicProvider>

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

@@ -278,3 +278,21 @@ export function getModelSDK({
     method: 'GET',
   })
 }
+
+export function startIndexModel({
+  network,
+  modelId,
+  didSession,
+}: {
+  network: Network
+  modelId: string
+  didSession?: string
+}): AxiosPromise<ApiResp<null>> {
+  return axios({
+    url: `${APP_API_URL}/models/indexing?network=${network.toUpperCase()}&model=${modelId}`,
+    method: 'post',
+    headers: {
+      'did-session': didSession || '',
+    },
+  })
+}

packages/client/dashboard/src/components/CodeDownload.tsx

@@ -0,0 +1,95 @@
+import FileSaver from 'file-saver'
+import ChevronDown from './Icons/CheckronDown'
+import DownloadIcon from './Icons/DownloadIcon'
+import { Code } from './ModelSDK'
+import styled from 'styled-components'
+import { useState } from 'react'
+
+export default function CodeDownload({
+  downloadContent,
+  downloadFileName,
+  title,
+  content,
+}: {
+  title: string
+  content: string
+  downloadContent: string
+  downloadFileName: string
+}) {
+  const [show, setShow] = useState(false)
+  const download = (text: string, filename: string) => {
+    const blob = new Blob([text], {
+      type: 'text/plain;charset=utf-8',
+    })
+
+    FileSaver.saveAs(blob, filename)
+  }
+
+  return (
+    <DefinitionBox show={show}>
+      <div className="title">
+        <div
+          onClick={() => {
+            setShow(!show)
+          }}
+        >
+          <ChevronDown />
+          <h3>{title}</h3>
+        </div>
+        <button
+          onClick={() => {
+            download(downloadContent, downloadFileName)
+          }}
+        >
+          <DownloadIcon />
+        </button>
+      </div>
+      {show && (
+        <div className="result-text">
+          <Code name="runtimeDefinition" content={content} />
+        </div>
+      )}
+    </DefinitionBox>
+  )
+}
+
+const DefinitionBox = styled.div<{ show?: boolean }>`
+  box-sizing: border-box;
+  background-color: #1a1a1c;
+  height: fit-content;
+  .title {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    font-style: italic;
+    color: #ffffff;
+
+    > div {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      > svg {
+        transition: transform 0.1s ease-in-out;
+        transform: ${(props) =>
+          props.show ? `rotate(-180deg)` : `rotate(0deg)`};
+      }
+    }
+
+    button {
+      background: inherit;
+    }
+
+    h3 {
+      margin: 0;
+      padding: 0;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 24px;
+    }
+  }
+`