From cad9cecb11704585714e31e2bed24cc9ca560817 Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Wed, 21 Jun 2023 16:56:25 +0800
Subject: [PATCH 01/23] feat: model instance form

---
 packages/client/dashboard/package.json        |   3 +
 packages/client/dashboard/public/index.html   |  10 ++
 .../src/components/ModelInstance.tsx          | 107 ++++++++++++++++-
 .../src/components/ModelInstanceForm.tsx      |  87 ++++++++++++++
 .../src/container/DappDataStatistic.tsx       |   1 +
 packages/client/dashboard/yarn.lock           | 110 +++++++++++++++++-
 6 files changed, 313 insertions(+), 5 deletions(-)
 create mode 100644 packages/client/dashboard/src/components/ModelInstanceForm.tsx

diff --git a/packages/client/dashboard/package.json b/packages/client/dashboard/package.json
index 09ad1d23..3ace7cfa 100644
--- a/packages/client/dashboard/package.json
+++ b/packages/client/dashboard/package.json
@@ -8,6 +8,9 @@
     "@composedb/devtools": "0.4",
     "@graphiql/plugin-explorer": "^0.1.20",
     "@monaco-editor/react": "^4.5.1",
+    "@rjsf/core": "^5.8.2",
+    "@rjsf/utils": "^5.8.2",
+    "@rjsf/validator-ajv8": "^5.8.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
diff --git a/packages/client/dashboard/public/index.html b/packages/client/dashboard/public/index.html
index e417c4d8..1d925954 100644
--- a/packages/client/dashboard/public/index.html
+++ b/packages/client/dashboard/public/index.html
@@ -25,6 +25,16 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>%REACT_APP_NAME%</title>
+
+    <!-- 
+      Bootstrap core CSS .
+      Provides default styling for react-jsonschema-form .
+      See https://rjsf-team.github.io/react-jsonschema-form/docs/usage/themes .
+    -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
     <style>
       @font-face {
         font-family: 'Rubik';
diff --git a/packages/client/dashboard/src/components/ModelInstance.tsx b/packages/client/dashboard/src/components/ModelInstance.tsx
index fbf44600..47a7104c 100644
--- a/packages/client/dashboard/src/components/ModelInstance.tsx
+++ b/packages/client/dashboard/src/components/ModelInstance.tsx
@@ -5,16 +5,29 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 // import ModelStreamList from '../../components/ModelStreamList'
 import { AxiosError } from 'axios'
 import { Network } from './Selector/EnumSelect'
-import { ModelMid } from '../types'
+import { ModelMid, ModelStream } from '../types'
 import { getModelMid, PageSize } from '../api'
 import ModelStreamList from './ModelStreamList'
+import {
+  Button,
+  Dialog,
+  DialogTrigger,
+  Heading,
+  Modal,
+  ModalOverlay,
+} from 'react-aria-components'
+import ModelInstanceForm from './ModelInstanceForm'
+import PlusIcon from './Icons/PlusIcon'
+import CloseIcon from './Icons/CloseIcon'
 
 export default function Instance({
   streamId,
   network,
+  schema,
 }: {
   streamId: string
   network: Network
+  schema: ModelStream['stream_content']['schema']
 }) {
   const pageNum = useRef(1)
   // const { network } = useCeramicCtx()
@@ -22,6 +35,7 @@ export default function Instance({
   const [streams, setStreams] = useState<Array<ModelMid>>([])
   const [loading, setLoading] = useState(false)
   const [errMsg, setErrMsg] = useState('')
+  const [formData, setFormData] = useState({})
 
   const fetchMoreStreams = useCallback(
     async (pageNumber: number) => {
@@ -77,6 +91,35 @@ export default function Instance({
 
   return (
     <PageBox>
+      <ListHeading>
+        <DialogTrigger>
+          <PlusButton>
+            <PlusIcon />
+          </PlusButton>
+          <ModalOverlay>
+            <Modal>
+              <Dialog>
+                {({ close }) => (
+                  <FormContentBox>
+                    <Heading className="title">
+                      <span>Create Stream</span>
+                      <button onClick={close}>
+                        <CloseIcon />
+                      </button>
+                    </Heading>
+                    <ModelInstanceForm
+                      schema={schema}
+                      formData={formData}
+                      onChange={(e) => setFormData(e.formData)}
+                      onSubmit={() => close()}
+                    />
+                  </FormContentBox>
+                )}
+              </Dialog>
+            </Modal>
+          </ModalOverlay>
+        </DialogTrigger>
+      </ListHeading>
       <InfiniteScroll
         dataLength={streams.length}
         next={() => {
@@ -131,3 +174,65 @@ const PageBox = styled.div`
     }
   }
 `
+const ListHeading = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-bottom: 20px;
+`
+const PlusButton = styled(Button)`
+  box-sizing: border-box;
+
+  /* Auto layout */
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 24px;
+  isolation: isolate;
+
+  height: 36px;
+
+  /* 🌘 $neutral/100 */
+
+  background: #1a1e23;
+  border: 1px solid #39424c;
+  border-radius: 12px;
+
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  /* identical to box height, or 150% */
+
+  text-align: center;
+
+  /* #718096 */
+
+  color: #718096;
+`
+const FormContentBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  gap: 20px;
+
+  position: relative;
+  width: 800px;
+  margin: 0 auto;
+
+  /* #1B1E23 */
+
+  background: #1b1e23;
+  border-radius: 20px;
+
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    color: #ffffff;
+  }
+`
diff --git a/packages/client/dashboard/src/components/ModelInstanceForm.tsx b/packages/client/dashboard/src/components/ModelInstanceForm.tsx
new file mode 100644
index 00000000..813166f8
--- /dev/null
+++ b/packages/client/dashboard/src/components/ModelInstanceForm.tsx
@@ -0,0 +1,87 @@
+import styled from 'styled-components'
+import Form, { FormProps } from '@rjsf/core'
+import { RJSFSchema } from '@rjsf/utils'
+import validator from '@rjsf/validator-ajv8'
+
+const formatSchema = (schema: RJSFSchema) => {
+  const newSchema = { ...schema }
+  if (newSchema.properties) {
+    for (const key in newSchema.properties) {
+      const prop = newSchema.properties[key] || {}
+      if (typeof prop === 'object' && prop['$ref'] && !prop['title']) {
+        prop['title'] = key
+      }
+    }
+  }
+  delete newSchema.$schema
+  return newSchema
+}
+
+interface ModelInstanceFormProps extends Omit<FormProps, 'validator'> {
+  validator?: FormProps['validator']
+}
+export default function ModelInstanceForm(props: ModelInstanceFormProps) {
+  const newProps = {
+    ...props,
+    validator: props.validator || validator,
+    schema: formatSchema(props.schema),
+  }
+  return <FormBox {...newProps} />
+}
+
+const FormBox = styled(Form)`
+  button[type='submit'] {
+    box-sizing: border-box;
+
+    /* Auto layout */
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 12px 24px;
+    isolation: isolate;
+
+    width: 160px;
+    height: 48px;
+
+    /* 🌘 $neutral/100 */
+
+    background: #1a1e23;
+    border: 1px solid #39424c;
+    border-radius: 12px;
+
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    /* identical to box height, or 150% */
+
+    text-align: center;
+
+    /* #718096 */
+
+    color: #718096;
+  }
+  button[type='submit']:active {
+    background: #1a1e23;
+  }
+
+  input {
+    color: #fff;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+
+    background: #1a1e23;
+    border: 1px solid #39424c;
+    border-radius: 12px;
+    padding: 16px;
+    outline: none;
+    /* width: 100%; */
+    flex-grow: 1;
+    box-sizing: border-box;
+    height: 48px;
+  }
+`
diff --git a/packages/client/dashboard/src/container/DappDataStatistic.tsx b/packages/client/dashboard/src/container/DappDataStatistic.tsx
index 051c18a8..85774743 100644
--- a/packages/client/dashboard/src/container/DappDataStatistic.tsx
+++ b/packages/client/dashboard/src/container/DappDataStatistic.tsx
@@ -17,6 +17,7 @@ export default function DappDataStatistic() {
         <Instance
           streamId={selectModel.stream_id}
           network={(selectedDapp?.network as Network) || Network.TESTNET}
+          schema={selectModel?.stream_content?.schema || {}}
         />
       </div>
     )
diff --git a/packages/client/dashboard/yarn.lock b/packages/client/dashboard/yarn.lock
index e8a2280f..508774f0 100644
--- a/packages/client/dashboard/yarn.lock
+++ b/packages/client/dashboard/yarn.lock
@@ -4228,6 +4228,38 @@
   resolved "https://registry.npmjs.org/@repeaterjs/repeater/-/repeater-3.0.4.tgz#a04d63f4d1bf5540a41b01a921c9a7fddc3bd1ca"
   integrity sha512-AW8PKd6iX3vAZ0vA43nOUOnbq/X5ihgU+mSXXqunMkeQADGiqw/PY0JNeYtD5sr0PAy51YPgAPbDoeapv9r8WA==
 
+"@rjsf/core@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.npmjs.org/@rjsf/core/-/core-5.8.2.tgz#4d04ce099e793ac1ca311cd13b32084f266b96a4"
+  integrity sha512-DwFPYHFGRR3xzmFa5EpffcmDoW/tKcLaDRU8t15Uv8mbr7OBhLavwTceGGgO/TYCTjNUDwofcnwquPzKRw39Cg==
+  dependencies:
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    markdown-to-jsx "^7.2.1"
+    nanoid "^3.3.6"
+    prop-types "^15.8.1"
+
+"@rjsf/utils@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.npmjs.org/@rjsf/utils/-/utils-5.8.2.tgz#82e4263eae860f8b08dd9dc7e91585eaf1cf87d9"
+  integrity sha512-vSnXHuUAg2dUmkGn9HNoEkuykno4vTb8hef+YoMDU3+oi3z5Bb8yZw/UC02Lo40Uo5XxvQeBfLb3RN0vfeSpMg==
+  dependencies:
+    json-schema-merge-allof "^0.8.1"
+    jsonpointer "^5.0.1"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-is "^18.2.0"
+
+"@rjsf/validator-ajv8@^5.8.2":
+  version "5.8.2"
+  resolved "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.8.2.tgz#91106dada3334bc857c676236cf6d9e773e2526b"
+  integrity sha512-Rahn2D0iXVPkadpgQ12HmEocnTNg6QVy2sqmBfpXV8jYQHKZMpk4llEHw0FTjuBN8jMusKcdWYN4Dp/fLPHESQ==
+  dependencies:
+    ajv "^8.12.0"
+    ajv-formats "^2.1.1"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -6065,7 +6097,7 @@ ajv@^6.10.0, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.6.0, ajv@^8.9.0:
+ajv@^8.0.0, ajv@^8.12.0, ajv@^8.6.0, ajv@^8.9.0:
   version "8.12.0"
   resolved "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
   integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
@@ -7076,6 +7108,25 @@ compression@^1.7.4:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
+compute-gcd@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/compute-gcd/-/compute-gcd-1.2.1.tgz#34d639f3825625e1357ce81f0e456a6249d8c77f"
+  integrity sha512-TwMbxBNz0l71+8Sc4czv13h4kEqnchV9igQZBi6QUaz09dnz13juGnnaWWJTRsP3brxOoxeB4SA2WELLw1hCtg==
+  dependencies:
+    validate.io-array "^1.0.3"
+    validate.io-function "^1.0.2"
+    validate.io-integer-array "^1.0.0"
+
+compute-lcm@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/compute-lcm/-/compute-lcm-1.1.2.tgz#9107c66b9dca28cefb22b4ab4545caac4034af23"
+  integrity sha512-OFNPdQAXnQhDSKioX8/XYT6sdUlXwpeMjfd6ApxMJfyZ4GxmLR1xvMERctlYhlHwIiz6CSpBc2+qYKjHGZw4TQ==
+  dependencies:
+    compute-gcd "^1.2.1"
+    validate.io-array "^1.0.3"
+    validate.io-function "^1.0.2"
+    validate.io-integer-array "^1.0.0"
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -10797,6 +10848,22 @@ json-rpc-random-id@^1.0.0, json-rpc-random-id@^1.0.1:
   resolved "https://registry.npmjs.org/json-rpc-random-id/-/json-rpc-random-id-1.0.1.tgz#ba49d96aded1444dbb8da3d203748acbbcdec8c8"
   integrity sha512-RJ9YYNCkhVDBuP4zN5BBtYAzEl03yq/jIIsyif0JY9qyJuQQZNeDK7anAPKKlyEtLSj2s8h6hNh2F8zO5q7ScA==
 
+json-schema-compare@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/json-schema-compare/-/json-schema-compare-0.2.2.tgz#dd601508335a90c7f4cfadb6b2e397225c908e56"
+  integrity sha512-c4WYmDKyJXhs7WWvAWm3uIYnfyWFoIp+JEoX34rctVvEkMYCPGhXtvmFFXiffBbxfZsvQ0RNnV5H7GvDF5HCqQ==
+  dependencies:
+    lodash "^4.17.4"
+
+json-schema-merge-allof@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.npmjs.org/json-schema-merge-allof/-/json-schema-merge-allof-0.8.1.tgz#ed2828cdd958616ff74f932830a26291789eaaf2"
+  integrity sha512-CTUKmIlPJbsWfzRRnOXz+0MjIqvnleIXwFTzz+t9T86HnYX/Rozria6ZVGLktAU9e+NygNljveP+yxqtQp/Q4w==
+  dependencies:
+    compute-lcm "^1.1.2"
+    json-schema-compare "^0.2.2"
+    lodash "^4.17.20"
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -10853,7 +10920,7 @@ jsonparse@^1.2.0:
   resolved "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
   integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
 
-jsonpointer@^5.0.0:
+jsonpointer@^5.0.0, jsonpointer@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
   integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
@@ -11097,7 +11164,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -11180,6 +11247,11 @@ markdown-it@^12.2.0:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+markdown-to-jsx@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.2.1.tgz#87061fd3176ad926ef3d99493e5c57f6335e0c51"
+  integrity sha512-9HrdzBAo0+sFz9ZYAGT5fB8ilzTW+q6lPocRxrIesMO+aB40V9MgFfbfMXxlGjf22OpRy+IXlvVaQenicdpgbg==
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -12853,7 +12925,7 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^18.0.0:
+react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
@@ -14630,6 +14702,36 @@ v8-to-istanbul@^8.1.0:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
+validate.io-array@^1.0.3:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/validate.io-array/-/validate.io-array-1.0.6.tgz#5b5a2cafd8f8b85abb2f886ba153f2d93a27774d"
+  integrity sha512-DeOy7CnPEziggrOO5CZhVKJw6S3Yi7e9e65R1Nl/RTN1vTQKnzjfvks0/8kQ40FP/dsjRAOd4hxmJ7uLa6vxkg==
+
+validate.io-function@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/validate.io-function/-/validate.io-function-1.0.2.tgz#343a19802ed3b1968269c780e558e93411c0bad7"
+  integrity sha512-LlFybRJEriSuBnUhQyG5bwglhh50EpTL2ul23MPIuR1odjO7XaMLFV8vHGwp7AZciFxtYOeiSCT5st+XSPONiQ==
+
+validate.io-integer-array@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/validate.io-integer-array/-/validate.io-integer-array-1.0.0.tgz#2cabde033293a6bcbe063feafe91eaf46b13a089"
+  integrity sha512-mTrMk/1ytQHtCY0oNO3dztafHYyGU88KL+jRxWuzfOmQb+4qqnWmI+gykvGp8usKZOM0H7keJHEbRaFiYA0VrA==
+  dependencies:
+    validate.io-array "^1.0.3"
+    validate.io-integer "^1.0.4"
+
+validate.io-integer@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/validate.io-integer/-/validate.io-integer-1.0.5.tgz#168496480b95be2247ec443f2233de4f89878068"
+  integrity sha512-22izsYSLojN/P6bppBqhgUDjCkr5RY2jd+N2a3DCAUey8ydvrZ/OkGvFPR7qfOpwR2LC5p4Ngzxz36g5Vgr/hQ==
+  dependencies:
+    validate.io-number "^1.0.3"
+
+validate.io-number@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/validate.io-number/-/validate.io-number-1.0.3.tgz#f63ffeda248bf28a67a8d48e0e3b461a1665baf8"
+  integrity sha512-kRAyotcbNaSYoDnXvb4MHg/0a1egJdLwS6oJ38TJY7aw9n93Fl/3blIXdyYvPOp55CNxywooG/3BcrwNrBpcSg==
+
 valtio@1.10.5:
   version "1.10.5"
   resolved "https://registry.npmjs.org/valtio/-/valtio-1.10.5.tgz#7852125e3b774b522827d96bd9c76d285c518678"

From 08eec733b436cf414959717d571cfa8479c45e37 Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Wed, 21 Jun 2023 22:18:59 +0800
Subject: [PATCH 02/23] fix: form style

---
 packages/client/dashboard/public/index.html   |   9 -
 .../src/components/ModelInstanceForm.tsx      | 186 +++++++++++++++---
 2 files changed, 155 insertions(+), 40 deletions(-)

diff --git a/packages/client/dashboard/public/index.html b/packages/client/dashboard/public/index.html
index 1d925954..cc78d8fc 100644
--- a/packages/client/dashboard/public/index.html
+++ b/packages/client/dashboard/public/index.html
@@ -26,15 +26,6 @@
     -->
     <title>%REACT_APP_NAME%</title>
 
-    <!-- 
-      Bootstrap core CSS .
-      Provides default styling for react-jsonschema-form .
-      See https://rjsf-team.github.io/react-jsonschema-form/docs/usage/themes .
-    -->
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
     <style>
       @font-face {
         font-family: 'Rubik';
diff --git a/packages/client/dashboard/src/components/ModelInstanceForm.tsx b/packages/client/dashboard/src/components/ModelInstanceForm.tsx
index 813166f8..d26589e8 100644
--- a/packages/client/dashboard/src/components/ModelInstanceForm.tsx
+++ b/packages/client/dashboard/src/components/ModelInstanceForm.tsx
@@ -1,18 +1,47 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import Form, { FormProps } from '@rjsf/core'
 import { RJSFSchema } from '@rjsf/utils'
 import validator from '@rjsf/validator-ajv8'
 
 const formatSchema = (schema: RJSFSchema) => {
   const newSchema = { ...schema }
-  if (newSchema.properties) {
-    for (const key in newSchema.properties) {
-      const prop = newSchema.properties[key] || {}
-      if (typeof prop === 'object' && prop['$ref'] && !prop['title']) {
-        prop['title'] = key
+  const formatFieldRef = (fieldObj: any) => {
+    const refKey = fieldObj['$ref'].split('/').pop()
+    const defs = newSchema['$defs'] || {}
+    const def = defs[refKey]
+    if (typeof def === 'object') {
+      delete def.title
+      delete fieldObj.$ref
+      Object.assign(fieldObj, def)
+      formatFieldTitle(fieldObj)
+    }
+  }
+  const formatFieldItems = (fieldObj: any) => {
+    const items = fieldObj['items']
+    if (items['$ref']) {
+      formatFieldRef(items)
+    }
+  }
+  const formatFieldTitle = (fieldObj: any) => {
+    if (typeof fieldObj !== 'object') return
+    // has properties
+    if (fieldObj.properties) {
+      for (const key in fieldObj.properties) {
+        const field = fieldObj.properties[key]
+        field['title'] = key
+        formatFieldTitle(field)
       }
     }
+    // has $ref
+    if (fieldObj['$ref']) {
+      formatFieldRef(fieldObj)
+    }
+    // has items
+    if (fieldObj['items']) {
+      formatFieldItems(fieldObj)
+    }
   }
+  formatFieldTitle(newSchema)
   delete newSchema.$schema
   return newSchema
 }
@@ -29,40 +58,135 @@ export default function ModelInstanceForm(props: ModelInstanceFormProps) {
   return <FormBox {...newProps} />
 }
 
-const FormBox = styled(Form)`
-  button[type='submit'] {
-    box-sizing: border-box;
+const ButtonCss = css`
+  box-sizing: border-box;
 
-    /* Auto layout */
+  /* Auto layout */
 
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    padding: 12px 24px;
-    isolation: isolate;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 24px;
+  isolation: isolate;
 
-    width: 160px;
-    height: 48px;
+  width: 160px;
+  height: 48px;
 
-    /* 🌘 $neutral/100 */
+  /* 🌘 $neutral/100 */
 
-    background: #1a1e23;
-    border: 1px solid #39424c;
-    border-radius: 12px;
+  background: #1a1e23;
+  border: 1px solid #39424c;
+  border-radius: 12px;
 
-    font-family: 'Rubik';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 24px;
-    /* identical to box height, or 150% */
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  /* identical to box height, or 150% */
+
+  text-align: center;
+
+  /* #718096 */
+
+  color: #718096;
 
-    text-align: center;
+  margin-top: 20px;
+`
 
-    /* #718096 */
+const FormBox = styled(Form)`
+  fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+  #root,
+  .form-group,
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
 
-    color: #718096;
+  .field-array {
+    button[type='button'] {
+      ${ButtonCss}
+      margin: 0;
+    }
+    button[type='button'].btn-add {
+      margin: 0;
+      margin-left: auto;
+      &::before {
+        content: '+';
+        font-size: 24px;
+        line-height: 24px;
+        color: #718096;
+      }
+    }
+    legend {
+      width: 100%;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #39424c;
+    }
+    .array-item-list {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .array-item {
+      display: flex;
+      flex-direction: row;
+      gap: 20px;
+      align-items: center;
+
+      .field,
+      .array-item-toolbox,
+      .btn-group {
+        display: flex;
+        flex-direction: row;
+        gap: 20px;
+        align-items: center;
+      }
+
+      div:first-child {
+        flex: 1;
+      }
+
+      .btn-group {
+        button {
+          width: 48px !important;
+        }
+        .array-item-remove {
+          &::before {
+            content: 'x';
+            font-size: 24px;
+            line-height: 24px;
+            color: #fff;
+          }
+        }
+        .array-item-move-up {
+          &::before {
+            content: '↑';
+            font-size: 24px;
+            line-height: 24px;
+            color: #fff;
+          }
+        }
+        .array-item-move-down {
+          &::before {
+            content: '↓';
+            font-size: 24px;
+            line-height: 24px;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+  button[type='submit'] {
+    ${ButtonCss}
   }
   button[type='submit']:active {
     background: #1a1e23;

From b03711dca0da2717184efcedfb02e53c1ab042af Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Sun, 25 Jun 2023 18:35:33 +0800
Subject: [PATCH 03/23] feat: update stream form modal

---
 .../src/components/Modal/ModalBase.module.css |  81 ++++++
 .../src/components/Modal/ModalBase.tsx        |  66 +++++
 .../src/components/ModelInstance.tsx          |  90 ++----
 .../src/components/ModelInstanceForm.tsx      | 266 +++++++++---------
 .../src/components/ModelInstanceFormModal.tsx |  35 +++
 .../src/components/ModelStreamList.tsx        |  14 +
 6 files changed, 365 insertions(+), 187 deletions(-)
 create mode 100644 packages/client/dashboard/src/components/Modal/ModalBase.module.css
 create mode 100644 packages/client/dashboard/src/components/Modal/ModalBase.tsx
 create mode 100644 packages/client/dashboard/src/components/ModelInstanceFormModal.tsx

diff --git a/packages/client/dashboard/src/components/Modal/ModalBase.module.css b/packages/client/dashboard/src/components/Modal/ModalBase.module.css
new file mode 100644
index 00000000..254a20ba
--- /dev/null
+++ b/packages/client/dashboard/src/components/Modal/ModalBase.module.css
@@ -0,0 +1,81 @@
+.ModalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    z-index: 100000;
+    height: var(--visual-viewport-height);
+    background: rgba(0 0 0 / 0.5);
+    backdrop-filter: blur(12px);
+    overflow: scroll;
+
+    &[data-entering] {
+        animation: fade 200ms;
+    }
+
+    &[data-exiting] {
+        animation: fade 150ms reverse ease-in;
+    }
+}
+
+.Modal {
+    box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
+    border-radius: 6px;
+    background: var(--page-background);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    outline: none;
+    padding: 30px;
+    position: relative;
+
+    &[data-entering] {
+        animation: zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+}
+
+.Dialog {
+    outline: none;
+    width: fit-content;
+    margin: 0 auto;
+    background: #1b1e23;
+    border-radius: 20px;
+    padding: 20px;
+}
+
+.Heading {
+    margin: 0;
+    padding: 0;
+    height: 30px;
+    line-height: 30px;
+    margin-top: 0;
+    color: #FFF;
+    font-size: 24px;
+    font-style: italic;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.CloseBtn {
+    margin-left: auto;
+}
+
+@keyframes fade {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes zoom {
+    from {
+        transform: scale(0.8);
+    }
+
+    to {
+        transform: scale(1);
+    }
+}
\ No newline at end of file
diff --git a/packages/client/dashboard/src/components/Modal/ModalBase.tsx b/packages/client/dashboard/src/components/Modal/ModalBase.tsx
new file mode 100644
index 00000000..614930f3
--- /dev/null
+++ b/packages/client/dashboard/src/components/Modal/ModalBase.tsx
@@ -0,0 +1,66 @@
+import {
+  Button,
+  Dialog,
+  Heading,
+  Modal,
+  ModalOverlay,
+} from 'react-aria-components'
+import styles from './ModalBase.module.css'
+import CloseIcon from '../Icons/CloseIcon'
+
+export interface ModalBaseProps {
+  title?: string
+  showCloseBtn?: boolean
+  children?: React.ReactNode
+  isOpen: boolean
+  onOpenChange?: (isOpen: boolean) => void
+  isDismissable?: boolean
+  overlayClassName?: string
+  modalClassName?: string
+  dialogClassName?: string
+}
+const ModalBase = ({
+  title,
+  showCloseBtn = true,
+  children,
+  isOpen,
+  onOpenChange,
+  isDismissable = true,
+  overlayClassName = '',
+  modalClassName = '',
+  dialogClassName = '',
+}: ModalBaseProps) => {
+  return (
+    <ModalOverlay
+      className={`${styles.ModalOverlay} ${overlayClassName}`}
+      isDismissable={isDismissable}
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+    >
+      <Modal className={`${styles.Modal} ${modalClassName}`}>
+        <Dialog className={`${styles.Dialog} ${dialogClassName}`}>
+          {(!!title || showCloseBtn) && (
+            <Heading className={styles.Heading}>
+              {' '}
+              <span>{title}</span>
+              {showCloseBtn && (
+                <Button
+                  className={styles.CloseBtn}
+                  onPress={() => {
+                    if (!onOpenChange) return
+                    onOpenChange(false)
+                  }}
+                >
+                  <CloseIcon />
+                </Button>
+              )}
+            </Heading>
+          )}
+          {children}
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}
+
+export default ModalBase
diff --git a/packages/client/dashboard/src/components/ModelInstance.tsx b/packages/client/dashboard/src/components/ModelInstance.tsx
index 47a7104c..a779535b 100644
--- a/packages/client/dashboard/src/components/ModelInstance.tsx
+++ b/packages/client/dashboard/src/components/ModelInstance.tsx
@@ -8,17 +8,9 @@ import { Network } from './Selector/EnumSelect'
 import { ModelMid, ModelStream } from '../types'
 import { getModelMid, PageSize } from '../api'
 import ModelStreamList from './ModelStreamList'
-import {
-  Button,
-  Dialog,
-  DialogTrigger,
-  Heading,
-  Modal,
-  ModalOverlay,
-} from 'react-aria-components'
-import ModelInstanceForm from './ModelInstanceForm'
+import { Button } from 'react-aria-components'
 import PlusIcon from './Icons/PlusIcon'
-import CloseIcon from './Icons/CloseIcon'
+import ModelInstanceFormModal from './ModelInstanceFormModal'
 
 export default function Instance({
   streamId,
@@ -36,6 +28,7 @@ export default function Instance({
   const [loading, setLoading] = useState(false)
   const [errMsg, setErrMsg] = useState('')
   const [formData, setFormData] = useState({})
+  const [isOpenStreamForm, setIsOpenStreamForm] = useState(false)
 
   const fetchMoreStreams = useCallback(
     async (pageNumber: number) => {
@@ -91,34 +84,23 @@ export default function Instance({
 
   return (
     <PageBox>
+      <ModelInstanceFormModal
+        title="Create Stream"
+        isOpen={isOpenStreamForm}
+        onOpenChange={setIsOpenStreamForm}
+        schema={schema}
+        formData={formData}
+        onChange={(e) => setFormData(e.formData)}
+        onSubmit={() => setIsOpenStreamForm(false)}
+      />
       <ListHeading>
-        <DialogTrigger>
-          <PlusButton>
-            <PlusIcon />
-          </PlusButton>
-          <ModalOverlay>
-            <Modal>
-              <Dialog>
-                {({ close }) => (
-                  <FormContentBox>
-                    <Heading className="title">
-                      <span>Create Stream</span>
-                      <button onClick={close}>
-                        <CloseIcon />
-                      </button>
-                    </Heading>
-                    <ModelInstanceForm
-                      schema={schema}
-                      formData={formData}
-                      onChange={(e) => setFormData(e.formData)}
-                      onSubmit={() => close()}
-                    />
-                  </FormContentBox>
-                )}
-              </Dialog>
-            </Modal>
-          </ModalOverlay>
-        </DialogTrigger>
+        <PlusButton
+          onPress={() => {
+            setIsOpenStreamForm(true)
+          }}
+        >
+          <PlusIcon />
+        </PlusButton>
       </ListHeading>
       <InfiniteScroll
         dataLength={streams.length}
@@ -129,7 +111,16 @@ export default function Instance({
         hasMore={hasMore}
         loader={<Loading>Loading...</Loading>}
       >
-        {streamId && <ModelStreamList data={streams} modelId={streamId} />}
+        {streamId && (
+          <ModelStreamList
+            data={streams}
+            modelId={streamId}
+            editAction={(stream: any) => {
+              setFormData(stream?.streamContent)
+              setIsOpenStreamForm(true)
+            }}
+          />
+        )}
       </InfiniteScroll>
       {!hasMore && <Loading>no more data</Loading>}
     </PageBox>
@@ -213,26 +204,3 @@ const PlusButton = styled(Button)`
 
   color: #718096;
 `
-const FormContentBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 20px;
-  gap: 20px;
-
-  position: relative;
-  width: 800px;
-  margin: 0 auto;
-
-  /* #1B1E23 */
-
-  background: #1b1e23;
-  border-radius: 20px;
-
-  .title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    color: #ffffff;
-  }
-`
diff --git a/packages/client/dashboard/src/components/ModelInstanceForm.tsx b/packages/client/dashboard/src/components/ModelInstanceForm.tsx
index d26589e8..d18adea6 100644
--- a/packages/client/dashboard/src/components/ModelInstanceForm.tsx
+++ b/packages/client/dashboard/src/components/ModelInstanceForm.tsx
@@ -5,48 +5,60 @@ import validator from '@rjsf/validator-ajv8'
 
 const formatSchema = (schema: RJSFSchema) => {
   const newSchema = { ...schema }
-  const formatFieldRef = (fieldObj: any) => {
-    const refKey = fieldObj['$ref'].split('/').pop()
-    const defs = newSchema['$defs'] || {}
-    const def = defs[refKey]
-    if (typeof def === 'object') {
-      delete def.title
-      delete fieldObj.$ref
-      Object.assign(fieldObj, def)
-      formatFieldTitle(fieldObj)
-    }
+
+  const formatDefByRef = (orgDef: RJSFSchema) => {
+    if (!orgDef?.$ref) return
+    // 从 $ref 中的路径获取对应的定义，如：#/definitions/aaa/bbb 中获取bbb的定义
+    const refPaths = orgDef.$ref.replace(/^#/, '').split('/').filter(Boolean)
+    if (!refPaths.length) return
+    const def = refPaths.reduce((acc, cur) => {
+      if (!acc) return null
+      return acc[cur]
+    }, newSchema)
+    if (!def || typeof def !== 'object') return
+    delete def.title
+    delete orgDef.$ref
+    Object.assign(orgDef, { ...def, ...orgDef })
+    formatDef(orgDef)
   }
-  const formatFieldItems = (fieldObj: any) => {
-    const items = fieldObj['items']
-    if (items['$ref']) {
-      formatFieldRef(items)
+
+  const formatDefByObj = (objDef: RJSFSchema) => {
+    if (objDef?.type !== 'object' || !objDef?.properties) return
+    for (const key in objDef.properties) {
+      if (!objDef.properties[key]) continue
+      const prop = objDef.properties[key]
+      formatDef(prop as RJSFSchema)
     }
   }
-  const formatFieldTitle = (fieldObj: any) => {
-    if (typeof fieldObj !== 'object') return
-    // has properties
-    if (fieldObj.properties) {
-      for (const key in fieldObj.properties) {
-        const field = fieldObj.properties[key]
-        field['title'] = key
-        formatFieldTitle(field)
-      }
+
+  const formatDefByAry = (aryDef: RJSFSchema) => {
+    if (aryDef?.type !== 'array' || !aryDef?.items) return
+    const items = aryDef.items
+    formatDef(items as RJSFSchema)
+  }
+
+  const formatDef = (def: RJSFSchema, defConfig?: Partial<RJSFSchema>) => {
+    if (def?.$ref) {
+      formatDefByRef(def)
+    }
+
+    if (def?.type === 'object') {
+      formatDefByObj(def)
     }
-    // has $ref
-    if (fieldObj['$ref']) {
-      formatFieldRef(fieldObj)
+
+    if (def?.type === 'array') {
+      formatDefByAry(def)
     }
-    // has items
-    if (fieldObj['items']) {
-      formatFieldItems(fieldObj)
+
+    if (defConfig) {
+      Object.assign(def, defConfig)
     }
   }
-  formatFieldTitle(newSchema)
-  delete newSchema.$schema
+  formatDef(newSchema)
   return newSchema
 }
 
-interface ModelInstanceFormProps extends Omit<FormProps, 'validator'> {
+export interface ModelInstanceFormProps extends Omit<FormProps, 'validator'> {
   validator?: FormProps['validator']
 }
 export default function ModelInstanceForm(props: ModelInstanceFormProps) {
@@ -59,127 +71,140 @@ export default function ModelInstanceForm(props: ModelInstanceFormProps) {
 }
 
 const ButtonCss = css`
-  box-sizing: border-box;
-
-  /* Auto layout */
-
   display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 12px 24px;
-  isolation: isolate;
-
   width: 160px;
   height: 48px;
-
-  /* 🌘 $neutral/100 */
-
-  background: #1a1e23;
-  border: 1px solid #39424c;
+  justify-content: center;
+  align-items: center;
   border-radius: 12px;
-
-  font-family: 'Rubik';
-  font-style: normal;
+  background: #fff;
+  font-size: 16px;
   font-weight: 500;
+  line-height: 24px;
+`
+const InputCss = css`
+  color: #fff;
+  font-weight: 400;
   font-size: 16px;
   line-height: 24px;
-  /* identical to box height, or 150% */
 
-  text-align: center;
-
-  /* #718096 */
-
-  color: #718096;
-
-  margin-top: 20px;
+  background: #1a1e23;
+  border: 1px solid #39424c;
+  border-radius: 12px;
+  padding: 16px;
+  outline: none;
+  width: 100%;
+  flex-grow: 1;
+  box-sizing: border-box;
+  height: 48px;
 `
 
 const FormBox = styled(Form)`
-  fieldset {
-    border: none;
+  & > div:first-child {
+    padding-bottom: 20px;
+    border-bottom: 1px solid #39424c;
+  }
+  button {
     margin: 0;
     padding: 0;
   }
-  #root,
-  .form-group,
-  .field {
+  fieldset {
+    border: unset;
+    margin: unset;
+    padding: unset;
+
     display: flex;
     flex-direction: column;
     gap: 20px;
   }
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  legend {
+    width: 100%;
+    box-sizing: border-box;
+    text-transform: capitalize;
+  }
+  .control-label {
+    color: #fff;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+  }
 
   .field-array {
-    button[type='button'] {
-      ${ButtonCss}
-      margin: 0;
+    & > fieldset > legend {
+      border-left: 6px solid #fff;
+      color: var(--ffffff, #fff);
+      font-size: 20px;
+      font-style: italic;
+      font-weight: 700;
+      padding-left: 10px;
     }
-    button[type='button'].btn-add {
-      margin: 0;
+    .btn-add {
+      ${ButtonCss}
       margin-left: auto;
+      width: 132px;
+      border: 1px solid #39424c;
+      background: #718096;
+      color: #fff;
       &::before {
-        content: '+';
-        font-size: 24px;
-        line-height: 24px;
-        color: #718096;
+        content: '＋ Add';
       }
     }
-    legend {
-      width: 100%;
-      padding-bottom: 10px;
-      border-bottom: 1px solid #39424c;
-    }
+
     .array-item-list {
       margin-top: 20px;
       display: flex;
       flex-direction: column;
       gap: 20px;
     }
+    .array-item-add {
+      margin: 0;
+      margin-top: 20px;
+    }
     .array-item {
       display: flex;
       flex-direction: row;
       gap: 20px;
-      align-items: center;
-
-      .field,
-      .array-item-toolbox,
-      .btn-group {
-        display: flex;
-        flex-direction: row;
-        gap: 20px;
-        align-items: center;
+      align-items: flex-end;
+      justify-content: space-between;
+      .form-group > fieldset > legend {
+        margin-bottom: 20px;
       }
 
-      div:first-child {
+      & > div:first-child {
         flex: 1;
       }
 
-      .btn-group {
-        button {
-          width: 48px !important;
-        }
-        .array-item-remove {
-          &::before {
-            content: 'x';
-            font-size: 24px;
-            line-height: 24px;
-            color: #fff;
+      & > .array-item-toolbox {
+        & > .btn-group {
+          ${ButtonCss}
+          width: 132px;
+          background: #14171a;
+
+          button {
+            font-size: 20px;
           }
-        }
-        .array-item-move-up {
-          &::before {
-            content: '↑';
-            font-size: 24px;
-            line-height: 24px;
-            color: #fff;
+          & > .array-item-remove {
+            &::before {
+              content: 'x';
+              color: #aa4f4f;
+            }
           }
-        }
-        .array-item-move-down {
-          &::before {
-            content: '↓';
-            font-size: 24px;
-            line-height: 24px;
-            color: #fff;
+          & > .array-item-move-up {
+            &::before {
+              content: '↑';
+              color: #718096;
+            }
+          }
+          & > .array-item-move-down {
+            &::before {
+              content: '↓';
+              color: #718096;
+            }
           }
         }
       }
@@ -187,25 +212,14 @@ const FormBox = styled(Form)`
   }
   button[type='submit'] {
     ${ButtonCss}
+    margin-top: 20px;
+    margin-left: auto;
   }
   button[type='submit']:active {
-    background: #1a1e23;
+    background: var(--ffffff, #fff);
   }
 
   input {
-    color: #fff;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-
-    background: #1a1e23;
-    border: 1px solid #39424c;
-    border-radius: 12px;
-    padding: 16px;
-    outline: none;
-    /* width: 100%; */
-    flex-grow: 1;
-    box-sizing: border-box;
-    height: 48px;
+    ${InputCss}
   }
 `
diff --git a/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx b/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx
new file mode 100644
index 00000000..d67b15af
--- /dev/null
+++ b/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx
@@ -0,0 +1,35 @@
+import { ModelInstanceFormProps } from './ModelInstanceForm'
+import ModelInstanceForm from './ModelInstanceForm'
+import styled from 'styled-components'
+import ModalBase, { ModalBaseProps } from './Modal/ModalBase'
+
+interface ModelInstanceFormModalProps
+  extends ModalBaseProps,
+    Pick<
+      ModelInstanceFormProps,
+      'schema' | 'formData' | 'onChange' | 'onSubmit'
+    > {}
+export default function ModelInstanceFormModal({
+  schema,
+  formData,
+  onChange,
+  onSubmit,
+  ...props
+}: ModelInstanceFormModalProps) {
+  return (
+    <ModalBase {...props}>
+      <ModelInstanceFormStyled
+        schema={schema}
+        formData={formData}
+        onChange={onChange}
+        onSubmit={onSubmit}
+      />
+    </ModalBase>
+  )
+}
+
+const ModelInstanceFormStyled = styled(ModelInstanceForm)`
+  width: 800px;
+  height: calc(100vh - 150px);
+  overflow-y: auto;
+`
diff --git a/packages/client/dashboard/src/components/ModelStreamList.tsx b/packages/client/dashboard/src/components/ModelStreamList.tsx
index 3697b7d6..e5492f12 100644
--- a/packages/client/dashboard/src/components/ModelStreamList.tsx
+++ b/packages/client/dashboard/src/components/ModelStreamList.tsx
@@ -5,13 +5,17 @@ import dayjs from 'dayjs'
 import { shortPubKey } from '../utils/shortPubKey'
 import UserAvatarStyled from './UserAvatarStyled'
 import { UserName } from '@us3r-network/profile'
+import EditIcon from './Icons/EditIcon'
+import { Button } from 'react-aria-components'
 
 export default function ModelStreamList({
   modelId,
   data,
+  editAction,
 }: {
   modelId: string
   data: ModelMid[]
+  editAction?: (stream: ModelMid) => void
 }) {
   return (
     <TableBox>
@@ -21,6 +25,7 @@ export default function ModelStreamList({
             <th>Stream ID</th>
             <th>DID</th>
             <th>Indexing Time</th>
+            <th>Action</th>
           </tr>
         </thead>
         <tbody>
@@ -44,6 +49,15 @@ export default function ModelStreamList({
                     <time>{dayjs(item.createdAt).fromNow()}</time>
                   </div>
                 </td>
+                <td className="td-action">
+                  <Button
+                    onPress={() => {
+                      if (editAction) editAction(item)
+                    }}
+                  >
+                    <EditIcon />
+                  </Button>
+                </td>
               </tr>
             )
           })}

From 31cca416bd86d0368e4ab2b83bbf00a8f34c0ea3 Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Mon, 26 Jun 2023 10:54:22 +0800
Subject: [PATCH 04/23] feat: Modify the user's stream form

---
 .../src/components/ModelInstance.tsx          |  2 ++
 .../src/components/ModelInstanceFormModal.tsx |  2 +-
 .../src/components/ModelStreamList.tsx        | 35 +++++++++++++------
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/packages/client/dashboard/src/components/ModelInstance.tsx b/packages/client/dashboard/src/components/ModelInstance.tsx
index a779535b..0ccf0b17 100644
--- a/packages/client/dashboard/src/components/ModelInstance.tsx
+++ b/packages/client/dashboard/src/components/ModelInstance.tsx
@@ -96,6 +96,7 @@ export default function Instance({
       <ListHeading>
         <PlusButton
           onPress={() => {
+            setFormData({})
             setIsOpenStreamForm(true)
           }}
         >
@@ -115,6 +116,7 @@ export default function Instance({
           <ModelStreamList
             data={streams}
             modelId={streamId}
+            editable={true}
             editAction={(stream: any) => {
               setFormData(stream?.streamContent)
               setIsOpenStreamForm(true)
diff --git a/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx b/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx
index d67b15af..8f02ff9b 100644
--- a/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx
+++ b/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx
@@ -30,6 +30,6 @@ export default function ModelInstanceFormModal({
 
 const ModelInstanceFormStyled = styled(ModelInstanceForm)`
   width: 800px;
-  height: calc(100vh - 150px);
+  max-height: calc(100vh - 150px);
   overflow-y: auto;
 `
diff --git a/packages/client/dashboard/src/components/ModelStreamList.tsx b/packages/client/dashboard/src/components/ModelStreamList.tsx
index e5492f12..0c88d3d9 100644
--- a/packages/client/dashboard/src/components/ModelStreamList.tsx
+++ b/packages/client/dashboard/src/components/ModelStreamList.tsx
@@ -7,16 +7,25 @@ import UserAvatarStyled from './UserAvatarStyled'
 import { UserName } from '@us3r-network/profile'
 import EditIcon from './Icons/EditIcon'
 import { Button } from 'react-aria-components'
+import { useSession } from '@us3r-network/auth-with-rainbowkit'
+import { useMemo } from 'react'
 
 export default function ModelStreamList({
   modelId,
   data,
+  editable,
   editAction,
 }: {
   modelId: string
   data: ModelMid[]
+  editable?: boolean
   editAction?: (stream: ModelMid) => void
 }) {
+  const session = useSession()
+  const showAction = useMemo(
+    () => session?.id && editable,
+    [editable, session?.id]
+  )
   return (
     <TableBox>
       <TableContainer>
@@ -25,7 +34,7 @@ export default function ModelStreamList({
             <th>Stream ID</th>
             <th>DID</th>
             <th>Indexing Time</th>
-            <th>Action</th>
+            {showAction && <th>Action</th>}
           </tr>
         </thead>
         <tbody>
@@ -49,15 +58,21 @@ export default function ModelStreamList({
                     <time>{dayjs(item.createdAt).fromNow()}</time>
                   </div>
                 </td>
-                <td className="td-action">
-                  <Button
-                    onPress={() => {
-                      if (editAction) editAction(item)
-                    }}
-                  >
-                    <EditIcon />
-                  </Button>
-                </td>
+                {showAction && (
+                  <td className="td-action">
+                    {session?.id === item.controllerDid ? (
+                      <Button
+                        onPress={() => {
+                          if (editAction) editAction(item)
+                        }}
+                      >
+                        <EditIcon />
+                      </Button>
+                    ) : (
+                      '-'
+                    )}
+                  </td>
+                )}
               </tr>
             )
           })}

From dce8e17cf1c299e91b4633c7db6573079222baea Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Mon, 26 Jun 2023 11:22:35 +0800
Subject: [PATCH 05/23] fix: update stream form

---
 .../src/components/ModelInstance.tsx          | 24 ++++++++++++++++++-
 .../src/components/ModelInstanceForm.tsx      | 15 ++++++++----
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/packages/client/dashboard/src/components/ModelInstance.tsx b/packages/client/dashboard/src/components/ModelInstance.tsx
index 0ccf0b17..099014eb 100644
--- a/packages/client/dashboard/src/components/ModelInstance.tsx
+++ b/packages/client/dashboard/src/components/ModelInstance.tsx
@@ -29,6 +29,8 @@ export default function Instance({
   const [errMsg, setErrMsg] = useState('')
   const [formData, setFormData] = useState({})
   const [isOpenStreamForm, setIsOpenStreamForm] = useState(false)
+  const [formType, setFormType] = useState<'create' | 'update'>('create')
+  const [updateStreamId, setUpdateStreamId] = useState('')
 
   const fetchMoreStreams = useCallback(
     async (pageNumber: number) => {
@@ -65,6 +67,23 @@ export default function Instance({
     fetchModelMid()
   }, [fetchModelMid])
 
+  const createStream = useCallback(async () => {
+    console.log({ formData })
+  }, [formData])
+
+  const updateStream = useCallback(async () => {
+    console.log({ updateStreamId, formData })
+  }, [updateStreamId, formData])
+
+  const submitStream = useCallback(async () => {
+    if (formType === 'create') {
+      await createStream()
+    }
+    if (formType === 'update') {
+      await updateStream()
+    }
+  }, [formType, createStream, updateStream])
+
   if (loading) {
     return (
       <PageBox>
@@ -91,11 +110,12 @@ export default function Instance({
         schema={schema}
         formData={formData}
         onChange={(e) => setFormData(e.formData)}
-        onSubmit={() => setIsOpenStreamForm(false)}
+        onSubmit={() => submitStream()}
       />
       <ListHeading>
         <PlusButton
           onPress={() => {
+            setFormType('create')
             setFormData({})
             setIsOpenStreamForm(true)
           }}
@@ -118,6 +138,8 @@ export default function Instance({
             modelId={streamId}
             editable={true}
             editAction={(stream: any) => {
+              setFormType('update')
+              setUpdateStreamId(stream?.streamId)
               setFormData(stream?.streamContent)
               setIsOpenStreamForm(true)
             }}
diff --git a/packages/client/dashboard/src/components/ModelInstanceForm.tsx b/packages/client/dashboard/src/components/ModelInstanceForm.tsx
index d18adea6..808baf45 100644
--- a/packages/client/dashboard/src/components/ModelInstanceForm.tsx
+++ b/packages/client/dashboard/src/components/ModelInstanceForm.tsx
@@ -1,7 +1,8 @@
+import { useMemo } from 'react'
 import styled, { css } from 'styled-components'
 import Form, { FormProps } from '@rjsf/core'
 import { RJSFSchema } from '@rjsf/utils'
-import validator from '@rjsf/validator-ajv8'
+import defaultValidator from '@rjsf/validator-ajv8'
 
 const formatSchema = (schema: RJSFSchema) => {
   const newSchema = { ...schema }
@@ -55,17 +56,23 @@ const formatSchema = (schema: RJSFSchema) => {
     }
   }
   formatDef(newSchema)
+  delete newSchema.$schema
   return newSchema
 }
 
 export interface ModelInstanceFormProps extends Omit<FormProps, 'validator'> {
   validator?: FormProps['validator']
 }
-export default function ModelInstanceForm(props: ModelInstanceFormProps) {
+export default function ModelInstanceForm({
+  validator,
+  schema,
+  ...props
+}: ModelInstanceFormProps) {
+  const newSchema = useMemo(() => formatSchema(schema), [schema])
   const newProps = {
     ...props,
-    validator: props.validator || validator,
-    schema: formatSchema(props.schema),
+    validator: validator || defaultValidator,
+    schema: newSchema,
   }
   return <FormBox {...newProps} />
 }

From bda761643f101b24ddd84d76756686d33aa12d70 Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Mon, 26 Jun 2023 13:56:40 +0800
Subject: [PATCH 06/23] feat: model form submit

---
 .../src/components/ModelInstance.tsx          | 153 +++++++++++++++---
 .../src/components/ModelInstanceFormModal.tsx |   4 +-
 .../src/container/DappDataStatistic.tsx       |   1 +
 .../dashboard/src/hooks/useComposeClient.ts   |  47 ++++++
 4 files changed, 185 insertions(+), 20 deletions(-)
 create mode 100644 packages/client/dashboard/src/hooks/useComposeClient.ts

diff --git a/packages/client/dashboard/src/components/ModelInstance.tsx b/packages/client/dashboard/src/components/ModelInstance.tsx
index 099014eb..4ddf6863 100644
--- a/packages/client/dashboard/src/components/ModelInstance.tsx
+++ b/packages/client/dashboard/src/components/ModelInstance.tsx
@@ -6,20 +6,24 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 import { AxiosError } from 'axios'
 import { Network } from './Selector/EnumSelect'
 import { ModelMid, ModelStream } from '../types'
-import { getModelMid, PageSize } from '../api'
+import { getModelMid, PageSize, queryModelGraphql } from '../api'
 import ModelStreamList from './ModelStreamList'
 import { Button } from 'react-aria-components'
 import PlusIcon from './Icons/PlusIcon'
 import ModelInstanceFormModal from './ModelInstanceFormModal'
+import useSelectedDapp from '../hooks/useSelectedDapp'
+import { useComposeClient } from '../hooks/useComposeClient'
 
 export default function Instance({
   streamId,
   network,
   schema,
+  name,
 }: {
   streamId: string
   network: Network
   schema: ModelStream['stream_content']['schema']
+  name: string
 }) {
   const pageNum = useRef(1)
   // const { network } = useCeramicCtx()
@@ -27,10 +31,6 @@ export default function Instance({
   const [streams, setStreams] = useState<Array<ModelMid>>([])
   const [loading, setLoading] = useState(false)
   const [errMsg, setErrMsg] = useState('')
-  const [formData, setFormData] = useState({})
-  const [isOpenStreamForm, setIsOpenStreamForm] = useState(false)
-  const [formType, setFormType] = useState<'create' | 'update'>('create')
-  const [updateStreamId, setUpdateStreamId] = useState('')
 
   const fetchMoreStreams = useCallback(
     async (pageNumber: number) => {
@@ -67,13 +67,122 @@ export default function Instance({
     fetchModelMid()
   }, [fetchModelMid])
 
+  // stream form
+  // TODO alert error
+  const [isOpenStreamForm, setIsOpenStreamForm] = useState(false)
+  const [formType, setFormType] = useState<'create' | 'update'>('create')
+  const [formData, setFormData] = useState({})
+  const [formDisabled, setFormDisabled] = useState(false)
+  const [updateStreamId, setUpdateStreamId] = useState('')
+  const [definition, setDefinition] = useState<any>()
+  const { selectedDapp } = useSelectedDapp()
+  useEffect(() => {
+    ;(async () => {
+      if (!streamId || !selectedDapp) {
+        setDefinition(null)
+        return
+      }
+      try {
+        const resp = await queryModelGraphql(
+          streamId,
+          selectedDapp.network as Network
+        )
+        const { data } = resp.data
+        setDefinition(data.runtimeDefinition)
+      } catch (error) {
+        setDefinition(null)
+      }
+    })()
+  }, [streamId, selectedDapp])
+
+  const { composeClient, composeClientAuthenticated } =
+    useComposeClient(definition)
+
   const createStream = useCallback(async () => {
-    console.log({ formData })
-  }, [formData])
+    if (!composeClientAuthenticated || !composeClient) {
+      alert('composeClient not authenticated')
+      return
+    }
+    if (!name) {
+      alert('model name not found')
+      return
+    }
+    const mutation = `
+      mutation create${name}($input: Create${name}Input!) {
+        create${name}(input: $input) {
+          document {
+            id
+          }
+        }
+      }
+    `
+    setFormDisabled(true)
+    const res = await composeClient.executeQuery(mutation, {
+      input: {
+        content: { ...formData },
+      },
+    })
+    if (res?.errors && res?.errors.length > 0) {
+      alert(res?.errors[0]?.message)
+    } else {
+      alert('success')
+      setIsOpenStreamForm(false)
+      fetchModelMid()
+    }
+    setFormDisabled(false)
+  }, [formData, composeClientAuthenticated, composeClient, name, fetchModelMid])
 
   const updateStream = useCallback(async () => {
-    console.log({ updateStreamId, formData })
-  }, [updateStreamId, formData])
+    if (!composeClientAuthenticated || !composeClient) {
+      alert('composeClient not authenticated')
+      return
+    }
+    if (!name) {
+      alert('model name not found')
+      return
+    }
+    const mutation = `
+      mutation update${name}($input: Update${name}Input!) {
+        update${name}(input: $input) {
+          document {
+            id
+          }
+        }
+      }
+    `
+    setFormDisabled(true)
+    const res = await composeClient.executeQuery(mutation, {
+      input: {
+        id: updateStreamId,
+        content: { ...formData },
+      },
+    })
+    if (res?.errors && res?.errors.length > 0) {
+      alert(res?.errors[0]?.message)
+    } else {
+      alert('success')
+      setIsOpenStreamForm(false)
+      setStreams(
+        (streams) =>
+          streams?.map((stream: any) => {
+            if (stream.streamId === updateStreamId) {
+              return {
+                ...stream,
+                content: { ...(stream?.streamContent || {}), ...formData },
+              }
+            }
+            return stream
+          }) || []
+      )
+    }
+    setFormDisabled(false)
+  }, [
+    updateStreamId,
+    formData,
+    composeClientAuthenticated,
+    composeClient,
+    name,
+  ])
 
   const submitStream = useCallback(async () => {
     if (formType === 'create') {
@@ -106,22 +215,28 @@ export default function Instance({
       <ModelInstanceFormModal
         title="Create Stream"
         isOpen={isOpenStreamForm}
+        disabled={formDisabled}
         onOpenChange={setIsOpenStreamForm}
         schema={schema}
         formData={formData}
         onChange={(e) => setFormData(e.formData)}
         onSubmit={() => submitStream()}
       />
+
       <ListHeading>
-        <PlusButton
-          onPress={() => {
-            setFormType('create')
-            setFormData({})
-            setIsOpenStreamForm(true)
-          }}
-        >
-          <PlusIcon />
-        </PlusButton>
+        {composeClientAuthenticated ? (
+          <PlusButton
+            onPress={() => {
+              setFormType('create')
+              setFormData({})
+              setIsOpenStreamForm(true)
+            }}
+          >
+            <PlusIcon />
+          </PlusButton>
+        ) : (
+          "You don't have permission to create stream, please connect wallet."
+        )}
       </ListHeading>
       <InfiniteScroll
         dataLength={streams.length}
@@ -136,7 +251,7 @@ export default function Instance({
           <ModelStreamList
             data={streams}
             modelId={streamId}
-            editable={true}
+            editable={composeClientAuthenticated}
             editAction={(stream: any) => {
               setFormType('update')
               setUpdateStreamId(stream?.streamId)
diff --git a/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx b/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx
index 8f02ff9b..732f2b19 100644
--- a/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx
+++ b/packages/client/dashboard/src/components/ModelInstanceFormModal.tsx
@@ -7,13 +7,14 @@ interface ModelInstanceFormModalProps
   extends ModalBaseProps,
     Pick<
       ModelInstanceFormProps,
-      'schema' | 'formData' | 'onChange' | 'onSubmit'
+      'schema' | 'formData' | 'onChange' | 'onSubmit' | 'disabled'
     > {}
 export default function ModelInstanceFormModal({
   schema,
   formData,
   onChange,
   onSubmit,
+  disabled,
   ...props
 }: ModelInstanceFormModalProps) {
   return (
@@ -23,6 +24,7 @@ export default function ModelInstanceFormModal({
         formData={formData}
         onChange={onChange}
         onSubmit={onSubmit}
+        disabled={disabled}
       />
     </ModalBase>
   )
diff --git a/packages/client/dashboard/src/container/DappDataStatistic.tsx b/packages/client/dashboard/src/container/DappDataStatistic.tsx
index 85774743..dbb67337 100644
--- a/packages/client/dashboard/src/container/DappDataStatistic.tsx
+++ b/packages/client/dashboard/src/container/DappDataStatistic.tsx
@@ -18,6 +18,7 @@ export default function DappDataStatistic() {
           streamId={selectModel.stream_id}
           network={(selectedDapp?.network as Network) || Network.TESTNET}
           schema={selectModel?.stream_content?.schema || {}}
+          name={selectModel?.stream_content?.name}
         />
       </div>
     )
diff --git a/packages/client/dashboard/src/hooks/useComposeClient.ts b/packages/client/dashboard/src/hooks/useComposeClient.ts
new file mode 100644
index 00000000..8e059697
--- /dev/null
+++ b/packages/client/dashboard/src/hooks/useComposeClient.ts
@@ -0,0 +1,47 @@
+import { useSession } from '@us3r-network/auth-with-rainbowkit'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { ComposeClient } from '@composedb/client'
+import { RuntimeCompositeDefinition } from '@composedb/types'
+import { DID } from 'dids'
+import useSelectedDapp from './useSelectedDapp'
+import { Network } from '../components/Selector/EnumSelect'
+import { CERAMIC_MAINNET_HOST, CERAMIC_TESTNET_HOST } from '../constants'
+
+export function useComposeClient(definition: RuntimeCompositeDefinition) {
+  const { selectedDapp } = useSelectedDapp()
+  const session = useSession()
+
+  const composeClient = useMemo(
+    () =>
+      definition
+        ? new ComposeClient({
+            ceramic:
+              selectedDapp?.network === Network.MAINNET
+                ? CERAMIC_MAINNET_HOST
+                : CERAMIC_TESTNET_HOST,
+            definition,
+          })
+        : null,
+    [definition, selectedDapp?.network]
+  )
+  const [composeClientAuthenticated, setComposeClientAuthenticated] =
+    useState(false)
+
+  const authComposeClients = useCallback(() => {
+    if (!composeClient) return
+    if (session) {
+      composeClient.setDID(session.did)
+      setComposeClientAuthenticated(true)
+    } else {
+      const did = new DID()
+      composeClient.setDID(did)
+      setComposeClientAuthenticated(false)
+    }
+  }, [session, composeClient, setComposeClientAuthenticated])
+
+  useEffect(() => {
+    authComposeClients()
+  }, [authComposeClients])
+
+  return { composeClient, composeClientAuthenticated }
+}

From e4817876f943f541b65b10d591a793701e6bc966 Mon Sep 17 00:00:00 2001
From: ttang <ttang@ttang-MBP-2021.lan>
Date: Mon, 26 Jun 2023 14:51:15 +0800
Subject: [PATCH 07/23] feat: network not allow editable

---
 packages/client/dashboard/src/components/EditDappInfo.tsx   | 1 +
 .../client/dashboard/src/components/Selector/EnumSelect.tsx | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/packages/client/dashboard/src/components/EditDappInfo.tsx b/packages/client/dashboard/src/components/EditDappInfo.tsx
index 14a86216..42e650ca 100644
--- a/packages/client/dashboard/src/components/EditDappInfo.tsx
+++ b/packages/client/dashboard/src/components/EditDappInfo.tsx
@@ -126,6 +126,7 @@ export default function EditDappInfo({
           setValue={setNetwork}
           labelText="Network:"
           values={Network}
+          isDisabled={true}
         />
       </div>
 
diff --git a/packages/client/dashboard/src/components/Selector/EnumSelect.tsx b/packages/client/dashboard/src/components/Selector/EnumSelect.tsx
index 36103134..e0c79244 100644
--- a/packages/client/dashboard/src/components/Selector/EnumSelect.tsx
+++ b/packages/client/dashboard/src/components/Selector/EnumSelect.tsx
@@ -36,11 +36,13 @@ export default function EnumSelector<T extends Stage | Network | AppType>({
   setValue,
   values,
   labelText = 'Selector:',
+  isDisabled = false,
 }: {
   value: T
   setValue: (s: T) => void
   values: any // TODO: fix this
   labelText?: string
+  isDisabled?: boolean
 }) {
   const [width, setWidth] = useState(0)
   let options = useMemo(() => {
@@ -53,6 +55,7 @@ export default function EnumSelector<T extends Stage | Network | AppType>({
   return (
     <SelectStyled
       selectedKey={value}
+      isDisabled={isDisabled}
       onSelectionChange={(k) => {
         setValue(k as T)
       }}
@@ -109,6 +112,9 @@ const ButtonStyled = styled(Button)`
 
     color: #ffffff;
   }
+  &:disabled {
+    cursor: not-allowed;
+  }
 `
 
 const PopoverStyled = styled(Popover)<{ width: number }>`

From 4c85fa30da5e851aee12aea893896ef7dc8a1867 Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Tue, 27 Jun 2023 09:21:50 +0800
Subject: [PATCH 08/23] fix: update style

---
 .../src/components/Modal/ModalBase.module.css |  81 -----------
 .../src/components/Modal/ModalBase.tsx        | 135 +++++++++++++-----
 .../src/components/ModelInstance.tsx          |  11 +-
 .../src/components/ModelStreamList.tsx        |   8 +-
 4 files changed, 114 insertions(+), 121 deletions(-)
 delete mode 100644 packages/client/dashboard/src/components/Modal/ModalBase.module.css

diff --git a/packages/client/dashboard/src/components/Modal/ModalBase.module.css b/packages/client/dashboard/src/components/Modal/ModalBase.module.css
deleted file mode 100644
index 254a20ba..00000000
--- a/packages/client/dashboard/src/components/Modal/ModalBase.module.css
+++ /dev/null
@@ -1,81 +0,0 @@
-.ModalOverlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    z-index: 100000;
-    height: var(--visual-viewport-height);
-    background: rgba(0 0 0 / 0.5);
-    backdrop-filter: blur(12px);
-    overflow: scroll;
-
-    &[data-entering] {
-        animation: fade 200ms;
-    }
-
-    &[data-exiting] {
-        animation: fade 150ms reverse ease-in;
-    }
-}
-
-.Modal {
-    box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
-    border-radius: 6px;
-    background: var(--page-background);
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    outline: none;
-    padding: 30px;
-    position: relative;
-
-    &[data-entering] {
-        animation: zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    }
-}
-
-.Dialog {
-    outline: none;
-    width: fit-content;
-    margin: 0 auto;
-    background: #1b1e23;
-    border-radius: 20px;
-    padding: 20px;
-}
-
-.Heading {
-    margin: 0;
-    padding: 0;
-    height: 30px;
-    line-height: 30px;
-    margin-top: 0;
-    color: #FFF;
-    font-size: 24px;
-    font-style: italic;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-}
-
-.CloseBtn {
-    margin-left: auto;
-}
-
-@keyframes fade {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes zoom {
-    from {
-        transform: scale(0.8);
-    }
-
-    to {
-        transform: scale(1);
-    }
-}
\ No newline at end of file
diff --git a/packages/client/dashboard/src/components/Modal/ModalBase.tsx b/packages/client/dashboard/src/components/Modal/ModalBase.tsx
index 614930f3..697227cf 100644
--- a/packages/client/dashboard/src/components/Modal/ModalBase.tsx
+++ b/packages/client/dashboard/src/components/Modal/ModalBase.tsx
@@ -4,63 +4,134 @@ import {
   Heading,
   Modal,
   ModalOverlay,
+  ModalOverlayProps,
 } from 'react-aria-components'
-import styles from './ModalBase.module.css'
 import CloseIcon from '../Icons/CloseIcon'
+import styled, { keyframes } from 'styled-components'
 
-export interface ModalBaseProps {
+export interface ModalBaseProps extends ModalOverlayProps {
+  children?: React.ReactNode
   title?: string
   showCloseBtn?: boolean
-  children?: React.ReactNode
-  isOpen: boolean
-  onOpenChange?: (isOpen: boolean) => void
-  isDismissable?: boolean
-  overlayClassName?: string
   modalClassName?: string
   dialogClassName?: string
+  headingClassName?: string
+  titleClassName?: string
+  closeBtnClassName?: string
 }
-const ModalBase = ({
+
+export default function ModalBase({
+  children,
   title,
   showCloseBtn = true,
-  children,
-  isOpen,
-  onOpenChange,
-  isDismissable = true,
-  overlayClassName = '',
   modalClassName = '',
   dialogClassName = '',
-}: ModalBaseProps) => {
+  headingClassName = '',
+  titleClassName = '',
+  closeBtnClassName = '',
+  onOpenChange,
+  ...props
+}: ModalBaseProps) {
   return (
-    <ModalOverlay
-      className={`${styles.ModalOverlay} ${overlayClassName}`}
-      isDismissable={isDismissable}
-      isOpen={isOpen}
-      onOpenChange={onOpenChange}
-    >
-      <Modal className={`${styles.Modal} ${modalClassName}`}>
-        <Dialog className={`${styles.Dialog} ${dialogClassName}`}>
+    <ModalOverlayStyled onOpenChange={onOpenChange} {...props}>
+      <ModalStyled className={modalClassName}>
+        <DialogStyled className={dialogClassName}>
           {(!!title || showCloseBtn) && (
-            <Heading className={styles.Heading}>
+            <HeadingStyled className={headingClassName}>
               {' '}
-              <span>{title}</span>
+              <span className={titleClassName}>{title}</span>
               {showCloseBtn && (
-                <Button
-                  className={styles.CloseBtn}
+                <CloseBtnStyled
+                  className={closeBtnClassName}
                   onPress={() => {
                     if (!onOpenChange) return
                     onOpenChange(false)
                   }}
                 >
                   <CloseIcon />
-                </Button>
+                </CloseBtnStyled>
               )}
-            </Heading>
+            </HeadingStyled>
           )}
           {children}
-        </Dialog>
-      </Modal>
-    </ModalOverlay>
+        </DialogStyled>
+      </ModalStyled>
+    </ModalOverlayStyled>
   )
 }
 
-export default ModalBase
+const fade = keyframes`
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+`
+const zoom = keyframes`
+    from {
+        transform: scale(0.8);
+    }
+
+    to {
+        transform: scale(1);
+    }
+`
+const ModalOverlayStyled = styled(ModalOverlay)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  z-index: 100000;
+  height: var(--visual-viewport-height);
+  background: rgba(0 0 0 / 0.5);
+  backdrop-filter: blur(12px);
+  overflow: scroll;
+
+  &[data-entering] {
+    animation: ${fade} 200ms;
+  }
+
+  &[data-exiting] {
+    animation: ${fade} 150ms reverse ease-in;
+  }
+`
+const ModalStyled = styled(Modal)`
+  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
+  border-radius: 6px;
+  background: var(--page-background);
+  border: 1px solid var(--spectrum-global-color-gray-300);
+  outline: none;
+  padding: 30px;
+  position: relative;
+
+  &[data-entering] {
+    animation: ${zoom} 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+`
+const DialogStyled = styled(Dialog)`
+  outline: none;
+  width: fit-content;
+  margin: 0 auto;
+  background: #1b1e23;
+  border-radius: 20px;
+  padding: 20px;
+`
+const HeadingStyled = styled(Heading)`
+  margin: 0;
+  padding: 0;
+  height: 30px;
+  line-height: 30px;
+  margin-top: 0;
+  color: #fff;
+  font-size: 24px;
+  font-style: italic;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+`
+const CloseBtnStyled = styled(Button)`
+  margin-left: auto;
+`
diff --git a/packages/client/dashboard/src/components/ModelInstance.tsx b/packages/client/dashboard/src/components/ModelInstance.tsx
index 4ddf6863..9c9ad0f5 100644
--- a/packages/client/dashboard/src/components/ModelInstance.tsx
+++ b/packages/client/dashboard/src/components/ModelInstance.tsx
@@ -223,8 +223,8 @@ export default function Instance({
         onSubmit={() => submitStream()}
       />
 
-      <ListHeading>
-        {composeClientAuthenticated ? (
+      {composeClientAuthenticated && (
+        <ListHeading>
           <PlusButton
             onPress={() => {
               setFormType('create')
@@ -234,10 +234,9 @@ export default function Instance({
           >
             <PlusIcon />
           </PlusButton>
-        ) : (
-          "You don't have permission to create stream, please connect wallet."
-        )}
-      </ListHeading>
+        </ListHeading>
+      )}
+
       <InfiniteScroll
         dataLength={streams.length}
         next={() => {
diff --git a/packages/client/dashboard/src/components/ModelStreamList.tsx b/packages/client/dashboard/src/components/ModelStreamList.tsx
index 0c88d3d9..a01811a1 100644
--- a/packages/client/dashboard/src/components/ModelStreamList.tsx
+++ b/packages/client/dashboard/src/components/ModelStreamList.tsx
@@ -61,13 +61,13 @@ export default function ModelStreamList({
                 {showAction && (
                   <td className="td-action">
                     {session?.id === item.controllerDid ? (
-                      <Button
+                      <EditBtn
                         onPress={() => {
                           if (editAction) editAction(item)
                         }}
                       >
                         <EditIcon />
-                      </Button>
+                      </EditBtn>
                     ) : (
                       '-'
                     )}
@@ -166,3 +166,7 @@ const TableContainer = styled.table`
     color: #718096;
   }
 `
+const EditBtn = styled(Button)`
+  margin: 0;
+  padding: 0;
+`

From 4ab8620c790424cd9099588b32de1845ba2fb966 Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Tue, 27 Jun 2023 10:37:17 +0800
Subject: [PATCH 09/23] fix: model instance form title

---
 packages/client/dashboard/src/components/ModelInstance.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/dashboard/src/components/ModelInstance.tsx b/packages/client/dashboard/src/components/ModelInstance.tsx
index 9c9ad0f5..e472911b 100644
--- a/packages/client/dashboard/src/components/ModelInstance.tsx
+++ b/packages/client/dashboard/src/components/ModelInstance.tsx
@@ -213,7 +213,7 @@ export default function Instance({
   return (
     <PageBox>
       <ModelInstanceFormModal
-        title="Create Stream"
+        title={formType === 'create' ? 'Create Stream' : 'Update Stream'}
         isOpen={isOpenStreamForm}
         disabled={formDisabled}
         onOpenChange={setIsOpenStreamForm}

From b9e3f5b10ce848cc0ac2c3cc871f00a288f54c0e Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Tue, 27 Jun 2023 10:41:31 +0800
Subject: [PATCH 10/23] fix: update streamContent

---
 packages/client/dashboard/src/components/ModelInstance.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/client/dashboard/src/components/ModelInstance.tsx b/packages/client/dashboard/src/components/ModelInstance.tsx
index e472911b..69882500 100644
--- a/packages/client/dashboard/src/components/ModelInstance.tsx
+++ b/packages/client/dashboard/src/components/ModelInstance.tsx
@@ -168,7 +168,10 @@ export default function Instance({
             if (stream.streamId === updateStreamId) {
               return {
                 ...stream,
-                content: { ...(stream?.streamContent || {}), ...formData },
+                streamContent: {
+                  ...(stream?.streamContent || {}),
+                  ...formData,
+                },
               }
             }
             return stream

From e0466c255c124876d3c0f464f78321bcc62ac3bb Mon Sep 17 00:00:00 2001
From: ttang <ttang@ttang-MBP-2021.lan>
Date: Tue, 27 Jun 2023 14:36:59 +0800
Subject: [PATCH 11/23] feat: del unused

---
 packages/client/dashboard/src/components/ModelTabs.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/dashboard/src/components/ModelTabs.tsx b/packages/client/dashboard/src/components/ModelTabs.tsx
index 2910e3f6..50f7145c 100644
--- a/packages/client/dashboard/src/components/ModelTabs.tsx
+++ b/packages/client/dashboard/src/components/ModelTabs.tsx
@@ -2,7 +2,6 @@ import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'react-aria-components'
 import Definition from './Definition'
 import Instance from './Instance'
 import PlaygroundGraphiQL from './Playground'
-import { Network } from './Selector/EnumSelect'
 
 export default function ModelTabs({
   name,

From c0c68afa3bdefee4f9fd4d932a57b2e8bc6ad709 Mon Sep 17 00:00:00 2001
From: ttang <ttang@ttang-MBP-2021.lan>
Date: Wed, 28 Jun 2023 11:34:51 +0800
Subject: [PATCH 12/23] feat: fix UI

---
 .../dashboard/src/components/Icons/PlusCircleIcon.tsx     | 2 +-
 packages/client/dashboard/src/components/TableBox.tsx     | 8 ++++----
 packages/client/dashboard/src/container/DappHome.tsx      | 1 +
 packages/client/dashboard/src/container/DappInfo.tsx      | 6 ++++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/client/dashboard/src/components/Icons/PlusCircleIcon.tsx b/packages/client/dashboard/src/components/Icons/PlusCircleIcon.tsx
index 63387d06..b1f4fe04 100644
--- a/packages/client/dashboard/src/components/Icons/PlusCircleIcon.tsx
+++ b/packages/client/dashboard/src/components/Icons/PlusCircleIcon.tsx
@@ -9,7 +9,7 @@ export default function PlusCircleIcon() {
     >
       <path
         d="M10.0003 6.66602V13.3327M6.66699 9.99935H13.3337M18.3337 9.99935C18.3337 14.6017 14.6027 18.3327 10.0003 18.3327C5.39795 18.3327 1.66699 14.6017 1.66699 9.99935C1.66699 5.39698 5.39795 1.66602 10.0003 1.66602C14.6027 1.66602 18.3337 5.39698 18.3337 9.99935Z"
-        stroke="#718096"
+        stroke="#fff"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
diff --git a/packages/client/dashboard/src/components/TableBox.tsx b/packages/client/dashboard/src/components/TableBox.tsx
index 730a3d68..42f1b405 100644
--- a/packages/client/dashboard/src/components/TableBox.tsx
+++ b/packages/client/dashboard/src/components/TableBox.tsx
@@ -37,8 +37,8 @@ export const TableContainer = styled.table<{ isMobile?: boolean }>`
     }
 
     &:last-child {
-      padding-left: 20px;
-      padding-right: 0px;
+      padding-left: 0px;
+      padding-right: 10px;
       width: 70px !important;
     }
   }
@@ -56,8 +56,8 @@ export const TableContainer = styled.table<{ isMobile?: boolean }>`
     }
 
     &:last-child {
-      padding-left: 20px;
-      padding-right: 0px;
+      padding-left: 0px;
+      padding-right: 10px;
     }
 
     > div {
diff --git a/packages/client/dashboard/src/container/DappHome.tsx b/packages/client/dashboard/src/container/DappHome.tsx
index 9d730298..1aee35f7 100644
--- a/packages/client/dashboard/src/container/DappHome.tsx
+++ b/packages/client/dashboard/src/container/DappHome.tsx
@@ -252,6 +252,7 @@ const DappHomeContainer = styled.div`
     line-height: 47px;
     margin: 0;
     color: #ffffff;
+    word-break: break-all;
   }
 
   > div {
diff --git a/packages/client/dashboard/src/container/DappInfo.tsx b/packages/client/dashboard/src/container/DappInfo.tsx
index 065df7ac..3e6c7cc7 100644
--- a/packages/client/dashboard/src/container/DappInfo.tsx
+++ b/packages/client/dashboard/src/container/DappInfo.tsx
@@ -64,7 +64,7 @@ export default function DappInfo() {
               {showCopyTint && <span>Copied</span>}
             </div>
           </div>
-          <p>{selectedDapp.description}</p>
+          <p className="description">{selectedDapp.description}</p>
         </div>
       </div>
       <div className="links">
@@ -173,7 +173,7 @@ const DappInfoContainer = styled.div`
           }
         }
       }
-      > p {
+      > p.description {
         margin: 0;
         padding: 0;
         font-weight: 400;
@@ -181,6 +181,8 @@ const DappInfoContainer = styled.div`
         line-height: 19px;
 
         color: #718096;
+        max-width: 1141px;
+        word-break: break-all;
       }
     }
   }

From f8eb7156b6ed90eb09a77a4bfb0d313f686e3d0f Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Wed, 28 Jun 2023 17:50:57 +0800
Subject: [PATCH 13/23] feat: dashboard supports walletConnect v2

---
 packages/client/dashboard/.env.example         |  2 ++
 packages/client/dashboard/package.json         |  3 ++-
 packages/client/dashboard/src/App.tsx          |  7 +++++--
 .../client/dashboard/src/constants/index.ts    |  4 ++++
 packages/client/dashboard/src/index.tsx        |  1 +
 packages/client/dashboard/src/polyfills.ts     | 11 +++++++++++
 packages/client/dashboard/yarn.lock            | 18 +++++++++---------
 7 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 packages/client/dashboard/src/polyfills.ts

diff --git a/packages/client/dashboard/.env.example b/packages/client/dashboard/.env.example
index 912f4904..d2c51335 100644
--- a/packages/client/dashboard/.env.example
+++ b/packages/client/dashboard/.env.example
@@ -11,3 +11,5 @@ REACT_APP_DOCS_URL=https://docs.userscan.app
 REACT_APP_API_BASE_URL=https://api-test.s3.xyz
 
 REACT_APP_S3_SCAN_URL=https://scan-dev.s3.xyz
+
+REACT_APP_WALLET_CONNECT_PROJECT_ID = c652d0148879353d7e965d7f6f361e59
\ No newline at end of file
diff --git a/packages/client/dashboard/package.json b/packages/client/dashboard/package.json
index 3ace7cfa..9881c89b 100644
--- a/packages/client/dashboard/package.json
+++ b/packages/client/dashboard/package.json
@@ -21,9 +21,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.4",
+    "@us3r-network/auth-with-rainbowkit": "^0.1.7",
     "@us3r-network/data-model": "^0.2.1",
     "@us3r-network/profile": "^0.4.11",
+    "buffer": "^6.0.3",
     "dayjs": "^1.11.7",
     "file-saver": "^2.0.5",
     "graphiql": "^2.4.7",
diff --git a/packages/client/dashboard/src/App.tsx b/packages/client/dashboard/src/App.tsx
index 755f25aa..f7751e4e 100644
--- a/packages/client/dashboard/src/App.tsx
+++ b/packages/client/dashboard/src/App.tsx
@@ -10,7 +10,7 @@ import { useAppCtx } from './context/AppCtx'
 import MyDapps from './container/MyDapps'
 import NoMatch from './container/NoMatch'
 import CeramicProvider from './context/AppCtx'
-import { CERAMIC_TESTNET_HOST } from './constants'
+import { CERAMIC_TESTNET_HOST, WALLET_CONNECT_PROJECT_ID } from './constants'
 import DappHome from './container/DappHome'
 import DappCreate from './container/DappCreate'
 import Header from './components/Header'
@@ -55,7 +55,10 @@ function Routers() {
 
 export default function App() {
   return (
-    <Us3rAuthWithRainbowkitProvider>
+    <Us3rAuthWithRainbowkitProvider
+      projectId={WALLET_CONNECT_PROJECT_ID}
+      appName="S3 Dashboard"
+    >
       <ProfileStateProvider ceramicHost={CERAMIC_TESTNET_HOST}>
         <CeramicProvider>
           <Routers />
diff --git a/packages/client/dashboard/src/constants/index.ts b/packages/client/dashboard/src/constants/index.ts
index 9a312524..53e9f82b 100644
--- a/packages/client/dashboard/src/constants/index.ts
+++ b/packages/client/dashboard/src/constants/index.ts
@@ -20,3 +20,7 @@ export const DISCORD = 'discord'
 export const MEDIUM = 'medium'
 export const MIRROR = 'mirror'
 export const GITHUB = 'github'
+
+export const WALLET_CONNECT_PROJECT_ID =
+  process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID ||
+  'c652d0148879353d7e965d7f6f361e59'
diff --git a/packages/client/dashboard/src/index.tsx b/packages/client/dashboard/src/index.tsx
index d5bf0657..bda8c608 100644
--- a/packages/client/dashboard/src/index.tsx
+++ b/packages/client/dashboard/src/index.tsx
@@ -1,3 +1,4 @@
+import './polyfills'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
diff --git a/packages/client/dashboard/src/polyfills.ts b/packages/client/dashboard/src/polyfills.ts
new file mode 100644
index 00000000..86b7b851
--- /dev/null
+++ b/packages/client/dashboard/src/polyfills.ts
@@ -0,0 +1,11 @@
+/**
+ * ref: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-create-react-app/src/polyfills.ts
+ */
+
+import { Buffer } from 'buffer'
+
+window.global = window.global ?? window
+window.Buffer = window.Buffer ?? Buffer
+window.process = window.process ?? { env: {} } // Minimal process polyfill
+
+export {}
diff --git a/packages/client/dashboard/yarn.lock b/packages/client/dashboard/yarn.lock
index 508774f0..4e22dc94 100644
--- a/packages/client/dashboard/yarn.lock
+++ b/packages/client/dashboard/yarn.lock
@@ -3040,10 +3040,10 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
-"@rainbow-me/rainbowkit@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/@rainbow-me/rainbowkit/-/rainbowkit-1.0.1.tgz#c852383a5a16fb6452e2533992aa2cd6d562a992"
-  integrity sha512-P+2lgHaN5X84K1e+MARUydyhYRS+nStN4H470QloBBWP5UsidHZpSJGd4qi0WFtfR6zBff96N6kmsfJo7PjFhQ==
+"@rainbow-me/rainbowkit@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@rainbow-me/rainbowkit/-/rainbowkit-1.0.2.tgz#d6113ffe95c7af0ef03a8c0dcf227862e7730136"
+  integrity sha512-CIcEekBBlYiqg2oNS7LZqqN882OfJ0T1ORe4c46dscSuMCaX9sdbviQR1m8LoA4KocSCzSxOPAnfoVN8eC/HNA==
   dependencies:
     "@vanilla-extract/css" "1.9.1"
     "@vanilla-extract/dynamic" "2.0.2"
@@ -5319,12 +5319,12 @@
     "@typescript-eslint/types" "5.59.8"
     eslint-visitor-keys "^3.3.0"
 
-"@us3r-network/auth-with-rainbowkit@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.npmjs.org/@us3r-network/auth-with-rainbowkit/-/auth-with-rainbowkit-0.1.4.tgz#79c4bc50ed3e77fba8fded42ed52d0d43f234f70"
-  integrity sha512-s4BwBW/55Z0ebIDb2dAb0L2C1nxYZl/PCZRXu1QFNpvw/2F9tuttnYpcE5Bdu5f//D5Go1Hw4kam7m6JfqO6GQ==
+"@us3r-network/auth-with-rainbowkit@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.npmjs.org/@us3r-network/auth-with-rainbowkit/-/auth-with-rainbowkit-0.1.7.tgz#e0b30f68d88096cc4e5cf9976da6dd6912dfbf0e"
+  integrity sha512-Uk5Qh00cNE3Czswf1eLhc2rpRb4xQdLh22W92j2GqzHEItHMpcNNdUskxaq71JY/fbwRgPXtoBEyZ18c1OFtmg==
   dependencies:
-    "@rainbow-me/rainbowkit" "^1.0.1"
+    "@rainbow-me/rainbowkit" "1.0.2"
     "@us3r-network/auth" "^0.2.2"
     viem "^0.3.37"
     wagmi "^1.0.7"

From 2260f68716ab2855572406288e056e48a3bbbf21 Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Thu, 29 Jun 2023 10:57:45 +0800
Subject: [PATCH 14/23] fix: remove polyfills

---
 packages/client/dashboard/package.json     |  2 +-
 packages/client/dashboard/src/index.tsx    |  1 -
 packages/client/dashboard/src/polyfills.ts | 11 -----------
 packages/client/dashboard/yarn.lock        |  9 +++++----
 4 files changed, 6 insertions(+), 17 deletions(-)
 delete mode 100644 packages/client/dashboard/src/polyfills.ts

diff --git a/packages/client/dashboard/package.json b/packages/client/dashboard/package.json
index 9881c89b..ab97eb9a 100644
--- a/packages/client/dashboard/package.json
+++ b/packages/client/dashboard/package.json
@@ -21,7 +21,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.26",
-    "@us3r-network/auth-with-rainbowkit": "^0.1.7",
+    "@us3r-network/auth-with-rainbowkit": "^0.1.8",
     "@us3r-network/data-model": "^0.2.1",
     "@us3r-network/profile": "^0.4.11",
     "buffer": "^6.0.3",
diff --git a/packages/client/dashboard/src/index.tsx b/packages/client/dashboard/src/index.tsx
index bda8c608..d5bf0657 100644
--- a/packages/client/dashboard/src/index.tsx
+++ b/packages/client/dashboard/src/index.tsx
@@ -1,4 +1,3 @@
-import './polyfills'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
diff --git a/packages/client/dashboard/src/polyfills.ts b/packages/client/dashboard/src/polyfills.ts
deleted file mode 100644
index 86b7b851..00000000
--- a/packages/client/dashboard/src/polyfills.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * ref: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-create-react-app/src/polyfills.ts
- */
-
-import { Buffer } from 'buffer'
-
-window.global = window.global ?? window
-window.Buffer = window.Buffer ?? Buffer
-window.process = window.process ?? { env: {} } // Minimal process polyfill
-
-export {}
diff --git a/packages/client/dashboard/yarn.lock b/packages/client/dashboard/yarn.lock
index 4e22dc94..fc0efc90 100644
--- a/packages/client/dashboard/yarn.lock
+++ b/packages/client/dashboard/yarn.lock
@@ -5319,13 +5319,14 @@
     "@typescript-eslint/types" "5.59.8"
     eslint-visitor-keys "^3.3.0"
 
-"@us3r-network/auth-with-rainbowkit@^0.1.7":
-  version "0.1.7"
-  resolved "https://registry.npmjs.org/@us3r-network/auth-with-rainbowkit/-/auth-with-rainbowkit-0.1.7.tgz#e0b30f68d88096cc4e5cf9976da6dd6912dfbf0e"
-  integrity sha512-Uk5Qh00cNE3Czswf1eLhc2rpRb4xQdLh22W92j2GqzHEItHMpcNNdUskxaq71JY/fbwRgPXtoBEyZ18c1OFtmg==
+"@us3r-network/auth-with-rainbowkit@^0.1.8":
+  version "0.1.8"
+  resolved "https://registry.npmjs.org/@us3r-network/auth-with-rainbowkit/-/auth-with-rainbowkit-0.1.8.tgz#af2039e67c3426e052b7651b0fa6028b3fd0fc6c"
+  integrity sha512-k4zMN8XpHNANhqIk9s1xX5JYrF7vUxnvdWImGtOiWq5Z0iixtN7HY6tTiQhKM1C3W2hD/ZgsCUBKBso11Jdc2A==
   dependencies:
     "@rainbow-me/rainbowkit" "1.0.2"
     "@us3r-network/auth" "^0.2.2"
+    buffer "^6.0.3"
     viem "^0.3.37"
     wagmi "^1.0.7"
 

From 9d700722c8b66050baf3e84eabb48c2f87f6fea1 Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Thu, 29 Jun 2023 11:04:19 +0800
Subject: [PATCH 15/23] fix: remove buffer

---
 packages/client/dashboard/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/dashboard/package.json b/packages/client/dashboard/package.json
index ab97eb9a..bd7f3258 100644
--- a/packages/client/dashboard/package.json
+++ b/packages/client/dashboard/package.json
@@ -24,7 +24,6 @@
     "@us3r-network/auth-with-rainbowkit": "^0.1.8",
     "@us3r-network/data-model": "^0.2.1",
     "@us3r-network/profile": "^0.4.11",
-    "buffer": "^6.0.3",
     "dayjs": "^1.11.7",
     "file-saver": "^2.0.5",
     "graphiql": "^2.4.7",

From ea3e7726ee013a0649529274da9df8970feafb72 Mon Sep 17 00:00:00 2001
From: ttang <ttang@ttang-MBP-2021.lan>
Date: Thu, 29 Jun 2023 17:16:55 +0800
Subject: [PATCH 16/23] feat: sdk code hight

---
 packages/client/dashboard/package.json        |   3 +
 packages/client/dashboard/src/api/index.ts    |  23 +-
 .../src/components/DappTitleEditor.tsx        |   1 +
 .../dashboard/src/components/ModelSDK.tsx     | 263 +++++++++++++++
 .../dashboard/src/components/ModelTabs.tsx    |  11 +-
 .../src/components/Selector/EnumSelect.tsx    |  16 +-
 packages/client/dashboard/src/index.tsx       |   1 +
 .../src/styles/prism-vsc-dark-plus.css        | 318 ++++++++++++++++++
 8 files changed, 631 insertions(+), 5 deletions(-)
 create mode 100644 packages/client/dashboard/src/components/ModelSDK.tsx
 create mode 100644 packages/client/dashboard/src/styles/prism-vsc-dark-plus.css

diff --git a/packages/client/dashboard/package.json b/packages/client/dashboard/package.json
index 09ad1d23..1b07ded5 100644
--- a/packages/client/dashboard/package.json
+++ b/packages/client/dashboard/package.json
@@ -15,6 +15,7 @@
     "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.195",
     "@types/node": "^16.7.13",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.26",
@@ -28,6 +29,8 @@
     "json-bigint-patch": "^0.0.8",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.38.0",
+    "prism-react-renderer": "^2.0.6",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-aria-components": "^1.0.0-alpha.4",
     "react-dom": "^18.2.0",
diff --git a/packages/client/dashboard/src/api/index.ts b/packages/client/dashboard/src/api/index.ts
index 3b4f1836..b368fa79 100644
--- a/packages/client/dashboard/src/api/index.ts
+++ b/packages/client/dashboard/src/api/index.ts
@@ -8,7 +8,11 @@ import {
   ModelMid,
   ModelStream,
 } from '../types'
-import { Network } from '../components/Selector/EnumSelect'
+import {
+  GraphqlGenType,
+  GraphqlGenTypeServer,
+  Network,
+} from '../components/Selector/EnumSelect'
 
 export const PageSize = 50
 
@@ -257,3 +261,20 @@ export function deleteDappComposites({
     },
   })
 }
+
+export function getModelSDK({
+  network,
+  modelId,
+  type,
+}: {
+  network: Network
+  modelId: string
+  type: GraphqlGenType
+}): AxiosPromise<ApiResp<any>> {
+  let host = APP_API_URL
+  const serverType = GraphqlGenTypeServer[type]
+  return axios({
+    url: host + `/models/${modelId}/sdk?network=${network}&type=${serverType}`,
+    method: 'GET',
+  })
+}
diff --git a/packages/client/dashboard/src/components/DappTitleEditor.tsx b/packages/client/dashboard/src/components/DappTitleEditor.tsx
index 523fad98..3a67ca6d 100644
--- a/packages/client/dashboard/src/components/DappTitleEditor.tsx
+++ b/packages/client/dashboard/src/components/DappTitleEditor.tsx
@@ -58,6 +58,7 @@ const TitleBox = styled.div`
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
+      max-width: 800px;
 
       padding: 0 5px 0 0;
     }
diff --git a/packages/client/dashboard/src/components/ModelSDK.tsx b/packages/client/dashboard/src/components/ModelSDK.tsx
new file mode 100644
index 00000000..139b304a
--- /dev/null
+++ b/packages/client/dashboard/src/components/ModelSDK.tsx
@@ -0,0 +1,263 @@
+import { useCallback, useEffect, useState } from 'react'
+import styled from 'styled-components'
+
+import Prism from 'prismjs'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
+
+import { getModelSDK } from '../api'
+import useSelectedDapp from '../hooks/useSelectedDapp'
+
+import EnumSelect, { GraphqlGenType, Network } from './Selector/EnumSelect'
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'react-aria-components'
+import FileSaver from 'file-saver'
+
+export default function ModelSDK({ modelId }: { modelId: string }) {
+  const { selectedDapp } = useSelectedDapp()
+
+  const [codes, setCodes] = useState<
+    { id: number; title: string; content: string }[]
+  >([])
+  const [loading, setLoading] = useState<boolean>(false)
+  const [selectKey, setSelectKey] = useState<string>('0')
+  const [genType, setGenType] = useState(GraphqlGenType.CLIENT_PRESET)
+
+  const download = (text: string, filename: string) => {
+    const blob = new Blob([text], {
+      type: 'text/plain;charset=utf-8',
+    })
+
+    FileSaver.saveAs(blob, filename)
+  }
+
+  const downloadCurr = useCallback(() => {
+    if (codes.length === 0) {
+      return
+    }
+    let curr
+    if (selectKey) {
+      curr = codes.find((item) => `${item.id}` === selectKey)
+    } else {
+      curr = codes[0]
+    }
+    if (!curr) {
+      console.error('no curr')
+      return
+    }
+
+    download(curr.content, curr.title)
+  }, [selectKey, codes])
+
+  const fetchModelSDK = useCallback(async () => {
+    try {
+      setLoading(true)
+      const resp = await getModelSDK({
+        network: selectedDapp?.network as Network,
+        modelId: modelId,
+        type: genType,
+      })
+      if (resp.data.code !== 0) {
+        throw new Error(resp.data.msg)
+      }
+      const data: { filename: string; content: string }[] = resp.data.data
+
+      setCodes(
+        data.map((item, i) => ({
+          title: item.filename,
+          content: item.content,
+          id: i,
+        }))
+      )
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setLoading(false)
+    }
+  }, [selectedDapp, modelId, genType])
+
+  useEffect(() => {
+    fetchModelSDK()
+  }, [fetchModelSDK])
+
+  return (
+    <SDKContainer>
+      <EnumSelect
+        value={genType}
+        setValue={setGenType}
+        labelText=""
+        values={GraphqlGenType}
+      />
+
+      {(loading && (
+        <SDKBoxLoading>
+          <Loading>Loading...</Loading>
+        </SDKBoxLoading>
+      )) || (
+        <SDKBox>
+          <TabsStyle>
+            <TabBox>
+              <TabList
+                className={'code-tabs'}
+                aria-label="Dynamic tabs"
+                items={codes}
+                onSelectionChange={(key) => {
+                  setSelectKey(key.toString())
+                }}
+              >
+                {(item) => <Tab className={'code-tab'}>{item.title}</Tab>}
+              </TabList>
+
+              <button onClick={downloadCurr}>Download</button>
+            </TabBox>
+            <TabPanels items={codes}>
+              {(item) => (
+                <TabPanel>
+                  <Code name={item.title} content={item.content} />
+                </TabPanel>
+              )}
+            </TabPanels>
+          </TabsStyle>
+        </SDKBox>
+      )}
+    </SDKContainer>
+  )
+}
+
+function Code({ name, content }: { name: string; content: string }) {
+  useEffect(() => {
+    Prism.highlightAll()
+  }, [content])
+
+  const preCode = `<pre class="line-numbers"><code class="language-typescript">${content}</code></pre>`
+  return (
+    <CodeBox>
+      <div
+        className="line-numbers"
+        dangerouslySetInnerHTML={{ __html: preCode }}
+      ></div>
+    </CodeBox>
+  )
+}
+
+const SDKContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`
+
+const SDKBox = styled.div`
+  padding: 12px 20px 0 20px;
+  border-radius: 20px;
+  border: 1px solid #39424c;
+  background: #1b1e23;
+`
+
+const CodeBox = styled.div`
+  > .name {
+    border-bottom: none;
+    display: inline-block;
+    padding: 10px 20px;
+  }
+  > .line-numbers {
+    overflow: scroll;
+    margin-bottom: 20px;
+  }
+`
+
+const TabsStyle = styled(Tabs)`
+  margin: 0;
+  padding: 0;
+
+  .react-aria-TabPanel {
+    padding: 0;
+    margin: 0;
+  }
+`
+
+const TabBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #39424c;
+  margin-bottom: 10px;
+  .code-tabs {
+    display: flex;
+    height: 72px;
+    align-items: center;
+    gap: 20px;
+
+    .code-tab {
+      display: flex;
+      height: 72px;
+      justify-content: center;
+      align-items: center;
+
+      position: relative;
+      border-bottom: none;
+      border-left: none;
+      cursor: pointer;
+
+      font-size: 18px;
+      font-family: Rubik;
+      border: none;
+      outline: none;
+      color: #718096;
+      /* medium-16 */
+      font-size: 16px;
+      font-family: Rubik;
+      font-weight: 500;
+
+      &:first-child {
+        border-top-left-radius: 5px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 5px;
+      }
+
+      &::before {
+        content: ' ';
+        position: absolute;
+        width: 100%;
+        height: 3px;
+        left: 0;
+        bottom: -1px;
+        border-radius: 100px 100px 0px 0px;
+      }
+      &[aria-selected='true']::before {
+        background-color: #fff;
+      }
+
+      &[aria-selected='true'] {
+        color: #fff;
+      }
+    }
+  }
+
+  > button {
+    background-color: #fff;
+    padding: 5px 15px;
+    border-radius: 100px;
+
+    color: #14171a;
+    height: 40px;
+    /* Text/Body 16pt · 1rem */
+    font-size: 16px;
+    font-family: Rubik;
+    line-height: 24px;
+  }
+`
+
+const SDKBoxLoading = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+`
+
+const Loading = styled.div`
+  padding: 20px;
+  text-align: center;
+  color: gray;
+`
diff --git a/packages/client/dashboard/src/components/ModelTabs.tsx b/packages/client/dashboard/src/components/ModelTabs.tsx
index 50f7145c..4f61f41e 100644
--- a/packages/client/dashboard/src/components/ModelTabs.tsx
+++ b/packages/client/dashboard/src/components/ModelTabs.tsx
@@ -2,6 +2,7 @@ import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'react-aria-components'
 import Definition from './Definition'
 import Instance from './Instance'
 import PlaygroundGraphiQL from './Playground'
+import ModelSDK from './ModelSDK'
 
 export default function ModelTabs({
   name,
@@ -16,19 +17,23 @@ export default function ModelTabs({
         <span>{name}</span>
         <TabList aria-label="History of Ancient Rome">
           <Tab id="Definition">Model Definition</Tab>
-          <Tab id="Instance">Model Instance Documents</Tab>
-          <Tab id="Playground">Model Playground</Tab>
+          {/* <Tab id="Instance">Model Instance Documents</Tab>
+          <Tab id="Playground">Model Playground</Tab> */}
+          <Tab id="model-sdk">Model SDK</Tab>
         </TabList>
       </div>
       <TabPanels>
         <TabPanel id="Definition">
           <Definition streamId={modelId} />
         </TabPanel>
-        <TabPanel id="Instance">
+        {/* <TabPanel id="Instance">
           <Instance streamId={modelId} />
         </TabPanel>
         <TabPanel id="Playground">
           <PlaygroundGraphiQL streamId={modelId} />
+        </TabPanel> */}
+        <TabPanel id="model-sdk">
+          <ModelSDK modelId={modelId} />
         </TabPanel>
       </TabPanels>
     </Tabs>
diff --git a/packages/client/dashboard/src/components/Selector/EnumSelect.tsx b/packages/client/dashboard/src/components/Selector/EnumSelect.tsx
index e0c79244..39436fbd 100644
--- a/packages/client/dashboard/src/components/Selector/EnumSelect.tsx
+++ b/packages/client/dashboard/src/components/Selector/EnumSelect.tsx
@@ -31,7 +31,21 @@ export enum AppType {
   OTHER = 'Other',
 }
 
-export default function EnumSelector<T extends Stage | Network | AppType>({
+export enum GraphqlGenType {
+  CLIENT_PRESET = 'Client preset',
+  REACT_QUERY_HOOKS = 'React-Query Hooks',
+  REACT_APOLLO_HOOKS = 'React-Apollo Hooks',
+}
+
+export enum GraphqlGenTypeServer {
+  'Client preset' = 'ClientPreset',
+  'React-Query Hooks' = 'ReactQueryHooks',
+  'React-Apollo Hooks' = 'ReactApolloHooks',
+}
+
+export default function EnumSelector<
+  T extends Stage | Network | AppType | GraphqlGenType
+>({
   value,
   setValue,
   values,
diff --git a/packages/client/dashboard/src/index.tsx b/packages/client/dashboard/src/index.tsx
index d5bf0657..26d7472d 100644
--- a/packages/client/dashboard/src/index.tsx
+++ b/packages/client/dashboard/src/index.tsx
@@ -10,6 +10,7 @@ import './styles/tab.css'
 import './styles/playground.css'
 import './styles/menu.css'
 import './styles/checkbox.css'
+import './styles/prism-vsc-dark-plus.css'
 
 import '@graphiql/plugin-explorer/dist/style.css'
 import 'graphiql/graphiql.css'
diff --git a/packages/client/dashboard/src/styles/prism-vsc-dark-plus.css b/packages/client/dashboard/src/styles/prism-vsc-dark-plus.css
new file mode 100644
index 00000000..b4753b89
--- /dev/null
+++ b/packages/client/dashboard/src/styles/prism-vsc-dark-plus.css
@@ -0,0 +1,318 @@
+pre[class*="language-"],
+code[class*="language-"] {
+	color: #d4d4d4;
+	font-size: 13px;
+	text-shadow: none;
+	font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::selection,
+code[class*="language-"]::selection,
+pre[class*="language-"] *::selection,
+code[class*="language-"] *::selection {
+	text-shadow: none;
+	background: #264F78;
+}
+
+@media print {
+	pre[class*="language-"],
+	code[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+pre[class*="language-"] {
+	padding: 1em;
+	margin:  0;
+	overflow: auto;
+	background: #1e1e1e;
+}
+
+:not(pre) > code[class*="language-"] {
+	padding: .1em .3em;
+	border-radius: .3em;
+	color: #db4c69;
+	background: #1e1e1e;
+}
+/*********************************************************
+* Tokens
+*/
+.namespace {
+	opacity: .7;
+}
+
+.token.doctype .token.doctype-tag {
+	color: #569CD6;
+}
+
+.token.doctype .token.name {
+	color: #9cdcfe;
+}
+
+.token.comment,
+.token.prolog {
+	color: #6a9955;
+}
+
+.token.punctuation,
+.language-html .language-css .token.punctuation,
+.language-html .language-javascript .token.punctuation {
+	color: #d4d4d4;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.inserted,
+.token.unit {
+	color: #b5cea8;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.deleted {
+	color: #ce9178;
+}
+
+.language-css .token.string.url {
+	text-decoration: underline;
+}
+
+.token.operator,
+.token.entity {
+	color: #d4d4d4;
+}
+
+.token.operator.arrow {
+	color: #569CD6;
+}
+
+.token.atrule {
+	color: #ce9178;
+}
+
+.token.atrule .token.rule {
+	color: #c586c0;
+}
+
+.token.atrule .token.url {
+	color: #9cdcfe;
+}
+
+.token.atrule .token.url .token.function {
+	color: #dcdcaa;
+}
+
+.token.atrule .token.url .token.punctuation {
+	color: #d4d4d4;
+}
+
+.token.keyword {
+	color: #569CD6;
+}
+
+.token.keyword.module,
+.token.keyword.control-flow {
+	color: #c586c0;
+}
+
+.token.function,
+.token.function .token.maybe-class-name {
+	color: #dcdcaa;
+}
+
+.token.regex {
+	color: #d16969;
+}
+
+.token.important {
+	color: #569cd6;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.constant {
+	color: #9cdcfe;
+}
+
+.token.class-name,
+.token.maybe-class-name {
+	color: #4ec9b0;
+}
+
+.token.console {
+	color: #9cdcfe;
+}
+
+.token.parameter {
+	color: #9cdcfe;
+}
+
+.token.interpolation {
+	color: #9cdcfe;
+}
+
+.token.punctuation.interpolation-punctuation {
+	color: #569cd6;
+}
+
+.token.boolean {
+	color: #569cd6;
+}
+
+.token.property,
+.token.variable,
+.token.imports .token.maybe-class-name,
+.token.exports .token.maybe-class-name {
+	color: #9cdcfe;
+}
+
+.token.selector {
+	color: #d7ba7d;
+}
+
+.token.escape {
+	color: #d7ba7d;
+}
+
+.token.tag {
+	color: #569cd6;
+}
+
+.token.tag .token.punctuation {
+	color: #808080;
+}
+
+.token.cdata {
+	color: #808080;
+}
+
+.token.attr-name {
+	color: #9cdcfe;
+}
+
+.token.attr-value,
+.token.attr-value .token.punctuation {
+	color: #ce9178;
+}
+
+.token.attr-value .token.punctuation.attr-equals {
+	color: #d4d4d4;
+}
+
+.token.entity {
+	color: #569cd6;
+}
+
+.token.namespace {
+	color: #4ec9b0;
+}
+/*********************************************************
+* Language Specific
+*/
+
+pre[class*="language-javascript"],
+code[class*="language-javascript"],
+pre[class*="language-jsx"],
+code[class*="language-jsx"],
+pre[class*="language-typescript"],
+code[class*="language-typescript"],
+pre[class*="language-tsx"],
+code[class*="language-tsx"] {
+	color: #9cdcfe;
+}
+
+pre[class*="language-css"],
+code[class*="language-css"] {
+	color: #ce9178;
+}
+
+pre[class*="language-html"],
+code[class*="language-html"] {
+	color: #d4d4d4;
+}
+
+.language-regex .token.anchor {
+	color: #dcdcaa;
+}
+
+.language-html .token.punctuation {
+	color: #808080;
+}
+/*********************************************************
+* Line highlighting
+*/
+pre[class*="language-"] > code[class*="language-"] {
+	position: relative;
+	z-index: 1;
+}
+
+.line-highlight.line-highlight {
+	background: #f7ebc6;
+	box-shadow: inset 5px 0 0 #f7d87c;
+	z-index: 0;
+}
+
+pre[class*="language-"].line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+    white-space: pre-wrap;
+}
+
+pre[class*="language-"].line-numbers > code {
+    position: relative;
+    white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em; /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+}
+
+.line-numbers-rows > span {
+    pointer-events: none;
+    display: block;
+    counter-increment: linenumber;
+}
+
+.line-numbers-rows > span:before {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+}

From 6f3edb96d77fc6dc183d02d23fa82f265a1a3342 Mon Sep 17 00:00:00 2001
From: ttang <ttang@ttang-MBP-2021.lan>
Date: Fri, 30 Jun 2023 10:12:25 +0800
Subject: [PATCH 17/23] feat: err msg tint

---
 .../dashboard/src/components/ModelSDK.tsx     | 82 ++++++++++++-------
 1 file changed, 53 insertions(+), 29 deletions(-)

diff --git a/packages/client/dashboard/src/components/ModelSDK.tsx b/packages/client/dashboard/src/components/ModelSDK.tsx
index 139b304a..8e6ee739 100644
--- a/packages/client/dashboard/src/components/ModelSDK.tsx
+++ b/packages/client/dashboard/src/components/ModelSDK.tsx
@@ -20,6 +20,7 @@ export default function ModelSDK({ modelId }: { modelId: string }) {
     { id: number; title: string; content: string }[]
   >([])
   const [loading, setLoading] = useState<boolean>(false)
+  const [errMsg, setErrMsg] = useState('')
   const [selectKey, setSelectKey] = useState<string>('0')
   const [genType, setGenType] = useState(GraphqlGenType.CLIENT_PRESET)
 
@@ -52,6 +53,7 @@ export default function ModelSDK({ modelId }: { modelId: string }) {
   const fetchModelSDK = useCallback(async () => {
     try {
       setLoading(true)
+      setErrMsg('')
       const resp = await getModelSDK({
         network: selectedDapp?.network as Network,
         modelId: modelId,
@@ -71,6 +73,7 @@ export default function ModelSDK({ modelId }: { modelId: string }) {
       )
     } catch (error) {
       console.error(error)
+      setErrMsg((error as any).message)
     } finally {
       setLoading(false)
     }
@@ -89,36 +92,45 @@ export default function ModelSDK({ modelId }: { modelId: string }) {
         values={GraphqlGenType}
       />
 
-      {(loading && (
-        <SDKBoxLoading>
-          <Loading>Loading...</Loading>
-        </SDKBoxLoading>
+      {(errMsg && (
+        <div className="err-msg">
+          <p>An Error Occurred Please Try Again Later.</p>
+          <p className="info">{errMsg}</p>
+        </div>
       )) || (
-        <SDKBox>
-          <TabsStyle>
-            <TabBox>
-              <TabList
-                className={'code-tabs'}
-                aria-label="Dynamic tabs"
-                items={codes}
-                onSelectionChange={(key) => {
-                  setSelectKey(key.toString())
-                }}
-              >
-                {(item) => <Tab className={'code-tab'}>{item.title}</Tab>}
-              </TabList>
-
-              <button onClick={downloadCurr}>Download</button>
-            </TabBox>
-            <TabPanels items={codes}>
-              {(item) => (
-                <TabPanel>
-                  <Code name={item.title} content={item.content} />
-                </TabPanel>
-              )}
-            </TabPanels>
-          </TabsStyle>
-        </SDKBox>
+        <>
+          {(loading && (
+            <SDKBoxLoading>
+              <Loading>Loading...</Loading>
+            </SDKBoxLoading>
+          )) || (
+            <SDKBox>
+              <TabsStyle>
+                <TabBox>
+                  <TabList
+                    className={'code-tabs'}
+                    aria-label="Dynamic tabs"
+                    items={codes}
+                    onSelectionChange={(key) => {
+                      setSelectKey(key.toString())
+                    }}
+                  >
+                    {(item) => <Tab className={'code-tab'}>{item.title}</Tab>}
+                  </TabList>
+
+                  <button onClick={downloadCurr}>Download</button>
+                </TabBox>
+                <TabPanels items={codes}>
+                  {(item) => (
+                    <TabPanel>
+                      <Code name={item.title} content={item.content} />
+                    </TabPanel>
+                  )}
+                </TabPanels>
+              </TabsStyle>
+            </SDKBox>
+          )}
+        </>
       )}
     </SDKContainer>
   )
@@ -144,6 +156,18 @@ const SDKContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 20px;
+
+  .err-msg {
+    text-align: center;
+    margin-top: 20px;
+    color: #ff4d4f;
+    font-size: 16px;
+
+    .info {
+      font-size: 14px;
+      color: #718096;
+    }
+  }
 `
 
 const SDKBox = styled.div`

From ca54505c460856e6612ba112b6f37d858707ee20 Mon Sep 17 00:00:00 2001
From: ttang <ttang@ttang-MBP-2021.lan>
Date: Fri, 30 Jun 2023 14:45:11 +0800
Subject: [PATCH 18/23] feat: change to updateTime

---
 packages/client/dashboard/src/components/ModelStreamList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/dashboard/src/components/ModelStreamList.tsx b/packages/client/dashboard/src/components/ModelStreamList.tsx
index 11c2e742..c75723a7 100644
--- a/packages/client/dashboard/src/components/ModelStreamList.tsx
+++ b/packages/client/dashboard/src/components/ModelStreamList.tsx
@@ -36,7 +36,7 @@ export default function ModelStreamList({
           <tr>
             <th>Stream ID</th>
             <th>DID</th>
-            <th>Indexing Time</th>
+            <th>Update Time</th>
             {showAction && <th>Action</th>}
           </tr>
         </thead>
@@ -66,7 +66,7 @@ export default function ModelStreamList({
                 </td>
                 <td className="index-time">
                   <div>
-                    <time>{dayjs(item.createdAt).fromNow()}</time>
+                    <time>{dayjs(item.updatedAt).fromNow()}</time>
                   </div>
                 </td>
                 {showAction && (

From 559506070dafc2a560a2b080c06b26a45844e9fb Mon Sep 17 00:00:00 2001
From: shixuewen <friendlysxw@163.com>
Date: Fri, 30 Jun 2023 16:07:45 +0800
Subject: [PATCH 19/23] fix: update stream form style

---
 packages/client/dashboard/package.json        |  1 +
 packages/client/dashboard/src/App.tsx         | 14 +++++++++++
 .../src/components/ModelInstance.tsx          | 20 +++++++--------
 .../src/components/ModelInstanceForm.tsx      | 13 +++++++++-
 packages/client/dashboard/yarn.lock           | 25 +++++++++++++++++++
 5 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/packages/client/dashboard/package.json b/packages/client/dashboard/package.json
index 9237f5e6..96789505 100644
--- a/packages/client/dashboard/package.json
+++ b/packages/client/dashboard/package.json
@@ -40,6 +40,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.1.3",
     "styled-components": "^5.3.11",
     "typescript": "^4.4.2",
     "use-url-search-params": "^2.5.1",
diff --git a/packages/client/dashboard/src/App.tsx b/packages/client/dashboard/src/App.tsx
index f7751e4e..bcf68853 100644
--- a/packages/client/dashboard/src/App.tsx
+++ b/packages/client/dashboard/src/App.tsx
@@ -26,6 +26,8 @@ import Components from './container/Components'
 import { useState } from 'react'
 import ModelList from './components/ModelList'
 import { DappComposite, ModelStream } from './types'
+import { ToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.min.css'
 
 dayjs.extend(relativeTime)
 
@@ -75,6 +77,18 @@ function Layout() {
       <AppContainer>
         <Outlet />
       </AppContainer>
+      <ToastContainer
+        position="top-right"
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="dark"
+      />
     </div>
   )
 }
diff --git a/packages/client/dashboard/src/components/ModelInstance.tsx b/packages/client/dashboard/src/components/ModelInstance.tsx
index 69882500..dbb847e1 100644
--- a/packages/client/dashboard/src/components/ModelInstance.tsx
+++ b/packages/client/dashboard/src/components/ModelInstance.tsx
@@ -13,6 +13,7 @@ import PlusIcon from './Icons/PlusIcon'
 import ModelInstanceFormModal from './ModelInstanceFormModal'
 import useSelectedDapp from '../hooks/useSelectedDapp'
 import { useComposeClient } from '../hooks/useComposeClient'
+import { toast } from 'react-toastify'
 
 export default function Instance({
   streamId,
@@ -68,7 +69,6 @@ export default function Instance({
   }, [fetchModelMid])
 
   // stream form
-  // TODO alert error
   const [isOpenStreamForm, setIsOpenStreamForm] = useState(false)
   const [formType, setFormType] = useState<'create' | 'update'>('create')
   const [formData, setFormData] = useState({})
@@ -100,11 +100,11 @@ export default function Instance({
 
   const createStream = useCallback(async () => {
     if (!composeClientAuthenticated || !composeClient) {
-      alert('composeClient not authenticated')
+      toast.error('composeClient not authenticated')
       return
     }
     if (!name) {
-      alert('model name not found')
+      toast.error('model name not found')
       return
     }
     const mutation = `
@@ -123,9 +123,9 @@ export default function Instance({
       },
     })
     if (res?.errors && res?.errors.length > 0) {
-      alert(res?.errors[0]?.message)
+      toast.error(res?.errors[0]?.message)
     } else {
-      alert('success')
+      toast.success('Submitted successfully!')
       setIsOpenStreamForm(false)
       fetchModelMid()
     }
@@ -134,11 +134,11 @@ export default function Instance({
 
   const updateStream = useCallback(async () => {
     if (!composeClientAuthenticated || !composeClient) {
-      alert('composeClient not authenticated')
+      toast.error('composeClient not authenticated')
       return
     }
     if (!name) {
-      alert('model name not found')
+      toast.error('model name not found')
       return
     }
     const mutation = `
@@ -158,10 +158,9 @@ export default function Instance({
       },
     })
     if (res?.errors && res?.errors.length > 0) {
-      alert(res?.errors[0]?.message)
+      toast.error(res?.errors[0]?.message)
     } else {
-      alert('success')
-      setIsOpenStreamForm(false)
+      toast.success('Submitted successfully!')
       setStreams(
         (streams) =>
           streams?.map((stream: any) => {
@@ -177,6 +176,7 @@ export default function Instance({
             return stream
           }) || []
       )
+      setIsOpenStreamForm(false)
     }
     setFormDisabled(false)
   }, [
diff --git a/packages/client/dashboard/src/components/ModelInstanceForm.tsx b/packages/client/dashboard/src/components/ModelInstanceForm.tsx
index 808baf45..e585b05d 100644
--- a/packages/client/dashboard/src/components/ModelInstanceForm.tsx
+++ b/packages/client/dashboard/src/components/ModelInstanceForm.tsx
@@ -104,10 +104,21 @@ const InputCss = css`
   flex-grow: 1;
   box-sizing: border-box;
   height: 48px;
+
+  &::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
 `
 
 const FormBox = styled(Form)`
-  & > div:first-child {
+  & > .errors {
+    display: none;
+  }
+  .text-danger {
+    font-size: 12px;
+    color: #aa4f4f;
+  }
+  & > .form-group:first-child {
     padding-bottom: 20px;
     border-bottom: 1px solid #39424c;
   }
diff --git a/packages/client/dashboard/yarn.lock b/packages/client/dashboard/yarn.lock
index fc0efc90..3db0b451 100644
--- a/packages/client/dashboard/yarn.lock
+++ b/packages/client/dashboard/yarn.lock
@@ -5081,6 +5081,11 @@
   resolved "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz#6c2324641cc4ba050a8c710b2b251b377581fbf0"
   integrity sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==
 
+"@types/prismjs@^1.26.0":
+  version "1.26.0"
+  resolved "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654"
+  integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==
+
 "@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
@@ -12594,6 +12599,19 @@ pretty-format@^29.0.0, pretty-format@^29.5.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+prism-react-renderer@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.0.6.tgz#24f0c1afbc07d4a268677fb05e77079ea80b6a2f"
+  integrity sha512-ERzmAI5UvrcTw5ivfEG20/dYClAsC84eSED5p9X3oKpm0xPV4A5clFK1mp7lPIdKmbLnQYsPTGiOI7WS6gWigw==
+  dependencies:
+    "@types/prismjs" "^1.26.0"
+    clsx "^1.2.1"
+
+prismjs@^1.29.0:
+  version "1.29.0"
+  resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -13080,6 +13098,13 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
+react-toastify@^9.1.3:
+  version "9.1.3"
+  resolved "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz#1e798d260d606f50e0fab5ee31daaae1d628c5ff"
+  integrity sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==
+  dependencies:
+    clsx "^1.1.1"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"

From 1518129e46ff780c5d2931a95493ad81ab4915ee Mon Sep 17 00:00:00 2001
From: ttang <ttang@ttang-MacBook-Pro-2021.local>
Date: Mon, 3 Jul 2023 10:47:16 +0800
Subject: [PATCH 20/23] feat: first change to last

---
 packages/client/dashboard/src/utils/createDefaultQuery.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/dashboard/src/utils/createDefaultQuery.ts b/packages/client/dashboard/src/utils/createDefaultQuery.ts
index b93e7969..32fbf36a 100644
--- a/packages/client/dashboard/src/utils/createDefaultQuery.ts
+++ b/packages/client/dashboard/src/utils/createDefaultQuery.ts
@@ -1,7 +1,7 @@
 export function createGraphqlDefaultQuery(modelName: string, propertes: any[]) {
   return `
     {
-      ${modelName.charAt(0).toLowerCase() + modelName.slice(1)}Index(first: 5) {
+      ${modelName.charAt(0).toLowerCase() + modelName.slice(1)}Index(last: 5) {
         edges {
           node {
             id,${propertes.map((p) => {

From c50adabe0d4453090c2e885f8c3a248b36cdc842 Mon Sep 17 00:00:00 2001
From: ttang <ttang@ttang-MBP-2021.lan>
Date: Wed, 5 Jul 2023 13:12:49 +0800
Subject: [PATCH 21/23] feat: sdk template

---
 packages/client/dashboard/package.json        |   3 +
 .../dashboard/src/components/Definition.tsx   |  25 +--
 .../dashboard/src/components/ModelSDK.tsx     |  39 ++++-
 .../dashboard/src/components/ModelTabs.tsx    |  13 +-
 .../dashboard/src/components/sdkTemplate.ts   | 143 ++++++++++++++++++
 5 files changed, 194 insertions(+), 29 deletions(-)
 create mode 100644 packages/client/dashboard/src/components/sdkTemplate.ts

diff --git a/packages/client/dashboard/package.json b/packages/client/dashboard/package.json
index 96789505..41331a62 100644
--- a/packages/client/dashboard/package.json
+++ b/packages/client/dashboard/package.json
@@ -14,6 +14,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "@types/ejs": "^3.1.2",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.195",
@@ -25,7 +26,9 @@
     "@us3r-network/auth-with-rainbowkit": "^0.1.8",
     "@us3r-network/data-model": "^0.2.1",
     "@us3r-network/profile": "^0.4.11",
+    "camelcase": "^7.0.1",
     "dayjs": "^1.11.7",
+    "ejs": "^3.1.9",
     "file-saver": "^2.0.5",
     "graphiql": "^2.4.7",
     "graphql-editor": "6.3.2",
diff --git a/packages/client/dashboard/src/components/Definition.tsx b/packages/client/dashboard/src/components/Definition.tsx
index 2f41bc86..5a4f2642 100644
--- a/packages/client/dashboard/src/components/Definition.tsx
+++ b/packages/client/dashboard/src/components/Definition.tsx
@@ -8,6 +8,7 @@ import { schemas } from '../utils/composedb-types/schemas'
 import { AxiosError } from 'axios'
 import { Network } from './Selector/EnumSelect'
 import useSelectedDapp from '../hooks/useSelectedDapp'
+import { Code } from './ModelSDK'
 
 export default function Definition({ streamId }: { streamId: string }) {
   const [modelData, setModelData] = useState<ModeQueryResult>()
@@ -120,9 +121,10 @@ export default function Definition({ streamId }: { streamId: string }) {
               </button>
             </div>
             <div className="result-text">
-              <pre>
-                <code>{JSON.stringify(modelData.composite, null, 2)}</code>
-              </pre>
+              <Code
+                name="composite"
+                content={JSON.stringify(modelData.composite, null, 2)}
+              />
             </div>
           </div>
         )}
@@ -143,11 +145,10 @@ export default function Definition({ streamId }: { streamId: string }) {
               </button>
             </div>
             <div className="result-text">
-              <pre>
-                <code>
-                  {JSON.stringify(modelData.runtimeDefinition, null, 2)}
-                </code>
-              </pre>
+              <Code
+                name="runtimeDefinition"
+                content={JSON.stringify(modelData.runtimeDefinition, null, 2)}
+              />
             </div>
           </div>
         )}
@@ -173,6 +174,7 @@ const ResultBox = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
+  margin-top: 20px;
   > div {
     background: #1b1e23;
     border: 1px solid #39424c;
@@ -180,11 +182,10 @@ const ResultBox = styled.div`
     overflow: hidden;
   }
   div {
-    margin: 20px 0px;
-    padding: 10px;
     box-sizing: border-box;
     background-color: #1a1a1c;
     .title {
+      padding: 10px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -213,6 +214,10 @@ const ResultBox = styled.div`
     color: #718096;
     overflow: scroll;
     width: 100%;
+    margin-top: 0;
+    > div {
+      width: fit-content;
+    }
   }
 
   button {
diff --git a/packages/client/dashboard/src/components/ModelSDK.tsx b/packages/client/dashboard/src/components/ModelSDK.tsx
index 8e6ee739..a83f24b1 100644
--- a/packages/client/dashboard/src/components/ModelSDK.tsx
+++ b/packages/client/dashboard/src/components/ModelSDK.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
+import camelCase from 'camelcase'
 
 import Prism from 'prismjs'
 import 'prismjs/components/prism-typescript'
@@ -8,12 +9,19 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 
 import { getModelSDK } from '../api'
 import useSelectedDapp from '../hooks/useSelectedDapp'
+import { sdkTemplate } from './sdkTemplate'
 
-import EnumSelect, { GraphqlGenType, Network } from './Selector/EnumSelect'
+import { GraphqlGenType, Network } from './Selector/EnumSelect'
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'react-aria-components'
 import FileSaver from 'file-saver'
 
-export default function ModelSDK({ modelId }: { modelId: string }) {
+export default function ModelSDK({
+  modelId,
+  modelName,
+}: {
+  modelId: string
+  modelName: string
+}) {
   const { selectedDapp } = useSelectedDapp()
 
   const [codes, setCodes] = useState<
@@ -62,10 +70,25 @@ export default function ModelSDK({ modelId }: { modelId: string }) {
       if (resp.data.code !== 0) {
         throw new Error(resp.data.msg)
       }
+
       const data: { filename: string; content: string }[] = resp.data.data
+      const graphql = data.find((item: any) => item.filename === 'graphql.ts')
+      if (!graphql) {
+        throw new Error('no graphql')
+      }
+
+      const sdkContent = sdkTemplate
+        .replaceAll('<%= modelName %>', modelName)
+        .replaceAll('<%= modelNameCamelcase %>', camelCase(modelName))
 
       setCodes(
-        data.map((item, i) => ({
+        [
+          graphql,
+          {
+            filename: `S3${modelName}Model.ts`,
+            content: sdkContent,
+          },
+        ].map((item, i) => ({
           title: item.filename,
           content: item.content,
           id: i,
@@ -77,7 +100,7 @@ export default function ModelSDK({ modelId }: { modelId: string }) {
     } finally {
       setLoading(false)
     }
-  }, [selectedDapp, modelId, genType])
+  }, [selectedDapp?.network, modelId, genType, modelName])
 
   useEffect(() => {
     fetchModelSDK()
@@ -85,12 +108,12 @@ export default function ModelSDK({ modelId }: { modelId: string }) {
 
   return (
     <SDKContainer>
-      <EnumSelect
+      {/* <EnumSelect
         value={genType}
         setValue={setGenType}
         labelText=""
         values={GraphqlGenType}
-      />
+      /> */}
 
       {(errMsg && (
         <div className="err-msg">
@@ -136,7 +159,7 @@ export default function ModelSDK({ modelId }: { modelId: string }) {
   )
 }
 
-function Code({ name, content }: { name: string; content: string }) {
+export function Code({ name, content }: { name: string; content: string }) {
   useEffect(() => {
     Prism.highlightAll()
   }, [content])
@@ -185,7 +208,7 @@ const CodeBox = styled.div`
   }
   > .line-numbers {
     overflow: scroll;
-    margin-bottom: 20px;
+    /* margin-bottom: 20px; */
   }
 `
 
diff --git a/packages/client/dashboard/src/components/ModelTabs.tsx b/packages/client/dashboard/src/components/ModelTabs.tsx
index 4f61f41e..9a2a5607 100644
--- a/packages/client/dashboard/src/components/ModelTabs.tsx
+++ b/packages/client/dashboard/src/components/ModelTabs.tsx
@@ -1,7 +1,6 @@
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'react-aria-components'
 import Definition from './Definition'
-import Instance from './Instance'
-import PlaygroundGraphiQL from './Playground'
+
 import ModelSDK from './ModelSDK'
 
 export default function ModelTabs({
@@ -17,8 +16,6 @@ export default function ModelTabs({
         <span>{name}</span>
         <TabList aria-label="History of Ancient Rome">
           <Tab id="Definition">Model Definition</Tab>
-          {/* <Tab id="Instance">Model Instance Documents</Tab>
-          <Tab id="Playground">Model Playground</Tab> */}
           <Tab id="model-sdk">Model SDK</Tab>
         </TabList>
       </div>
@@ -26,14 +23,8 @@ export default function ModelTabs({
         <TabPanel id="Definition">
           <Definition streamId={modelId} />
         </TabPanel>
-        {/* <TabPanel id="Instance">
-          <Instance streamId={modelId} />
-        </TabPanel>
-        <TabPanel id="Playground">
-          <PlaygroundGraphiQL streamId={modelId} />
-        </TabPanel> */}
         <TabPanel id="model-sdk">
-          <ModelSDK modelId={modelId} />
+          <ModelSDK modelId={modelId} modelName={name} />
         </TabPanel>
       </TabPanels>
     </Tabs>
diff --git a/packages/client/dashboard/src/components/sdkTemplate.ts b/packages/client/dashboard/src/components/sdkTemplate.ts
new file mode 100644
index 00000000..f24cbf7e
--- /dev/null
+++ b/packages/client/dashboard/src/components/sdkTemplate.ts
@@ -0,0 +1,143 @@
+export const sdkTemplate = `
+import { ComposeClient } from "@composedb/client";
+import { RuntimeCompositeDefinition } from "@composedb/types";
+import { DIDSession } from "did-session";
+import type { CeramicApi } from "@ceramicnetwork/common";
+import { DID } from "dids";
+import { Page } from "@ceramicnetwork/common";
+
+import { definition } from "./runtime-composite";
+
+import {
+  <%= modelName %>,
+  Create<%= modelName %>Input,
+  Create<%= modelName %>Payload,
+  Update<%= modelName %>Input,
+  Update<%= modelName %>Payload,
+  Scalars,
+} from "./graphql";
+
+export class S3<%= modelName %>Model {
+  composeClient: ComposeClient;
+
+  constructor(ceramic: CeramicApi | string) {
+    this.composeClient = new ComposeClient({
+      ceramic: ceramic,
+      definition: definition as RuntimeCompositeDefinition,
+    });
+  }
+
+  public authComposeClient(session: DIDSession) {
+    if (!session || (session.hasSession && session.isExpired)) {
+      throw new Error("Please login with wallet first!");
+    }
+    this.composeClient.setDID(session.did);
+  }
+
+  public resetComposeClient() {
+    const did = new DID();
+    this.composeClient.setDID(did);
+  }
+
+  async create<%= modelName %>(input: Create<%= modelName %>Input) {
+    const mutation = \`
+      mutation create<%= modelName %>($input: Create<%= modelName %>Input!) {
+        create<%= modelName %>(input: $input) {
+          document {
+            id
+          }
+        }
+      }
+    \`;
+    const resp = await this.composeClient.executeQuery<{
+      create<%= modelName %>: Create<%= modelName %>Payload;
+    }>(mutation, {
+      input: {
+        content: {
+          ...input.content,
+        },
+      },
+    });
+    return resp;
+  }
+
+  async update<%= modelName %>(input: Update<%= modelName %>Input) {
+    const mutation = \`
+      mutation($input: Update<%= modelName %>Input!) {
+        update<%= modelName %>(input: $input) {
+          document {
+            id
+          }
+        }
+      }
+    \`;
+    const resp = await this.composeClient.executeQuery<{
+      update<%= modelName %>: Update<%= modelName %>Payload;
+    }>(mutation, {
+      input: {
+        id: input.id,
+        content: {
+          ...input.content,
+        },
+      },
+    });
+
+    return resp;
+  }
+
+  async query<%= modelName %>Index({
+    first = 100,
+    after = "",
+  }: {
+    first: number;
+    after?: string;
+  }) {
+    const query = \`
+      query {
+        <%= modelNameCamelcase %>Index(first: \${first}, after: "\${after}") {
+          edges {
+            node {
+              id
+              # other fields
+            }
+          }
+          pageInfo {
+            hasNextPage
+            hasPreviousPage
+            endCursor
+            startCursor
+          }
+        }
+      }
+    \`;
+
+    const resp = await this.composeClient.executeQuery<{
+      <%= modelNameCamelcase %>Index: Page<<%= modelName %>>;
+    }>(query);
+
+    return resp;
+  }
+
+  async query<%= modelName %>WithId(id: Scalars["ID"]["input"]) {
+    const query = \`
+      query($id: ID!) {
+        node(id: $id) {
+          ... on <%= modelName %> {
+            id
+            # other fields
+          }
+        }
+      }
+    \`;
+
+    const resp = await this.composeClient.executeQuery<{
+      node: <%= modelName %>;
+    }>(query, {
+      id,
+    });
+
+    return resp;
+  }
+}
+
+`

From 725df6e59f073d0825ed1a3817a7591525f164de Mon Sep 17 00:00:00 2001
From: ttang <ttang@ttang-MBP-2021.lan>
Date: Wed, 5 Jul 2023 14:16:26 +0800
Subject: [PATCH 22/23] feat: hightlight code

---
 .../src/components/CompositeDefinition.tsx    | 39 +++++++++++--------
 .../dashboard/src/components/ModelSDK.tsx     |  2 +-
 .../dashboard/src/components/sdkTemplate.ts   | 20 ++++++++++
 3 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/packages/client/dashboard/src/components/CompositeDefinition.tsx b/packages/client/dashboard/src/components/CompositeDefinition.tsx
index 48f91ba4..4bf5de47 100644
--- a/packages/client/dashboard/src/components/CompositeDefinition.tsx
+++ b/packages/client/dashboard/src/components/CompositeDefinition.tsx
@@ -4,6 +4,7 @@ import FileSaver from 'file-saver'
 import { GraphQLEditor, PassedSchema } from 'graphql-editor'
 import { DappComposite } from '../types'
 import { schemas } from '../utils/composedb-types/schemas'
+import { Code } from './ModelSDK'
 
 export default function CompositeDefinition({
   composite,
@@ -57,11 +58,14 @@ export default function CompositeDefinition({
               </button>
             </div>
             <div className="result-text">
-              <pre>
-                <code>
-                  {JSON.stringify(JSON.parse(composite.composite), null, 2)}
-                </code>
-              </pre>
+              <Code
+                name="composite"
+                content={JSON.stringify(
+                  JSON.parse(composite.composite),
+                  null,
+                  2
+                )}
+              />
             </div>
           </div>
         )}
@@ -82,15 +86,14 @@ export default function CompositeDefinition({
               </button>
             </div>
             <div className="result-text">
-              <pre>
-                <code>
-                  {JSON.stringify(
-                    JSON.parse(composite.runtimeDefinition),
-                    null,
-                    2
-                  )}
-                </code>
-              </pre>
+              <Code
+                name="runtimeDefinition"
+                content={JSON.stringify(
+                  JSON.parse(composite.runtimeDefinition),
+                  null,
+                  2
+                )}
+              />
             </div>
           </div>
         )}
@@ -134,6 +137,7 @@ const ResultBox = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
+  margin-top: 20px;
   > div {
     background: #1b1e23;
     border: 1px solid #39424c;
@@ -141,11 +145,10 @@ const ResultBox = styled.div`
     overflow: hidden;
   }
   div {
-    margin: 20px 0px;
-    padding: 10px;
     box-sizing: border-box;
     background-color: #1a1a1c;
     .title {
+      padding: 10px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -174,6 +177,10 @@ const ResultBox = styled.div`
     color: #718096;
     overflow: scroll;
     width: 100%;
+
+    > div {
+      width: fit-content;
+    }
   }
 
   button {
diff --git a/packages/client/dashboard/src/components/ModelSDK.tsx b/packages/client/dashboard/src/components/ModelSDK.tsx
index a83f24b1..d5fc6410 100644
--- a/packages/client/dashboard/src/components/ModelSDK.tsx
+++ b/packages/client/dashboard/src/components/ModelSDK.tsx
@@ -83,11 +83,11 @@ export default function ModelSDK({
 
       setCodes(
         [
-          graphql,
           {
             filename: `S3${modelName}Model.ts`,
             content: sdkContent,
           },
+          graphql,
         ].map((item, i) => ({
           title: item.filename,
           content: item.content,
diff --git a/packages/client/dashboard/src/components/sdkTemplate.ts b/packages/client/dashboard/src/components/sdkTemplate.ts
index f24cbf7e..4618b147 100644
--- a/packages/client/dashboard/src/components/sdkTemplate.ts
+++ b/packages/client/dashboard/src/components/sdkTemplate.ts
@@ -1,4 +1,24 @@
 export const sdkTemplate = `
+/**
+ * How to use this model:
+ * 
+ * export const CERAMIC_TESTNET_HOST = "https://gcp-ceramic-testnet-dev.s3.xyz";
+ * const <%= modelNameCamelcase %>Model = new S3<%= modelName %>Model(CERAMIC_TESTNET_HOST);
+ * 
+ * // createNew
+ * const resp = await <%= modelNameCamelcase %>Model.create<%= modelName %>({...});
+ * 
+ * // update
+ * const resp = await <%= modelNameCamelcase %>Model.update<%= modelName %>({...});
+ * 
+ * // queryList
+ * const resp = await <%= modelNameCamelcase %>Model.query<%= modelName %>Index({first: 100, after: ""});
+ *
+ * // queryWithId
+ * const resp = await <%= modelNameCamelcase %>Model.query<%= modelName %>WithId("...");
+ * 
+ */
+
 import { ComposeClient } from "@composedb/client";
 import { RuntimeCompositeDefinition } from "@composedb/types";
 import { DIDSession } from "did-session";

From 8565a1f4af87f66e5e631fa27b84639b8683ed35 Mon Sep 17 00:00:00 2001
From: ttang <ttang@ttang-MBP-2021.lan>
Date: Wed, 5 Jul 2023 15:23:40 +0800
Subject: [PATCH 23/23] feat: sdk with definition

---
 .../dashboard/src/components/ModelSDK.tsx     | 19 ++++++++++++++-
 .../dashboard/src/components/sdkTemplate.ts   | 24 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/packages/client/dashboard/src/components/ModelSDK.tsx b/packages/client/dashboard/src/components/ModelSDK.tsx
index a83f24b1..c078868f 100644
--- a/packages/client/dashboard/src/components/ModelSDK.tsx
+++ b/packages/client/dashboard/src/components/ModelSDK.tsx
@@ -77,17 +77,34 @@ export default function ModelSDK({
         throw new Error('no graphql')
       }
 
+      const runtimeComposite = data.find(
+        (item) => item.filename === 'runtime-composite.ts'
+      )
+      if (!runtimeComposite) {
+        throw new Error('no runtime-composite')
+      }
+
+      runtimeComposite.content = `// This is an auto-generated file, do not edit manually
+
+export const definition = ${JSON.stringify(
+        JSON.parse(runtimeComposite.content),
+        null,
+        2
+      )}
+      `
+
       const sdkContent = sdkTemplate
         .replaceAll('<%= modelName %>', modelName)
         .replaceAll('<%= modelNameCamelcase %>', camelCase(modelName))
 
       setCodes(
         [
-          graphql,
           {
             filename: `S3${modelName}Model.ts`,
             content: sdkContent,
           },
+          runtimeComposite,
+          graphql,
         ].map((item, i) => ({
           title: item.filename,
           content: item.content,
diff --git a/packages/client/dashboard/src/components/sdkTemplate.ts b/packages/client/dashboard/src/components/sdkTemplate.ts
index f24cbf7e..03e0c5e9 100644
--- a/packages/client/dashboard/src/components/sdkTemplate.ts
+++ b/packages/client/dashboard/src/components/sdkTemplate.ts
@@ -1,4 +1,26 @@
-export const sdkTemplate = `
+export const sdkTemplate = `/**
+ * How to use this model:
+ * 
+ * export const CERAMIC_TESTNET_HOST = "https://gcp-ceramic-testnet-dev.s3.xyz";
+ * const <%= modelNameCamelcase %>Model = new S3<%= modelName %>Model(CERAMIC_TESTNET_HOST);
+ * 
+ * // auth with didSession
+ * <%= modelNameCamelcase %>Model.authComposeClient(didSession);
+ * 
+ * // createNew
+ * const resp = await <%= modelNameCamelcase %>Model.create<%= modelName %>({...});
+ * 
+ * // update
+ * const resp = await <%= modelNameCamelcase %>Model.update<%= modelName %>({...});
+ * 
+ * // queryList
+ * const resp = await <%= modelNameCamelcase %>Model.query<%= modelName %>Index({first: 100, after: ""});
+ *
+ * // queryWithId
+ * const resp = await <%= modelNameCamelcase %>Model.query<%= modelName %>WithId("...");
+ * 
+ */
+
 import { ComposeClient } from "@composedb/client";
 import { RuntimeCompositeDefinition } from "@composedb/types";
 import { DIDSession } from "did-session";