Merge pull request #164 from us3r-network/scan-dev

Scan dev
us3r-network · Jul 10, 2023 · 8c94fa5 · 8c94fa5
2 parents c135cf6 + 75a8d21
commit 8c94fa5
Show file tree

Hide file tree

Showing 12 changed files with 497 additions and 96 deletions.
diff --git a/packages/client/dashboard/.env.example b/packages/client/dashboard/.env.example
@@ -1,14 +1,14 @@
-REACT_APP_NAME=s3-dashboard
+REACT_APP_NAME=US3R DASHBOARD
 REACT_APP_VERSION=$npm_package_version
 
-REACT_APP_UPLOAD_API_URL=https://test-enchanft-backend.onrender.com
+REACT_APP_UPLOAD_API_URL=https://api-dev.u3.xyz
 
-REACT_APP_CERAMIC_MAINNET_HOST=https://ceramic-miannet.s3.xyz
-REACT_APP_CERAMIC_TESTNET_HOST=https://ceramic-testnet.s3.xyz
+REACT_APP_CERAMIC_MAINNET_HOST=https://gcp-ceramic-mainnet-dev.s3.xyz
+REACT_APP_CERAMIC_TESTNET_HOST=https://gcp-ceramic-testnet-dev.s3.xyz
 
-REACT_APP_DOCS_URL=https://docs.userscan.app
+REACT_APP_DOCS_URL=https://component-doc.s3.xyz/
 
-REACT_APP_API_BASE_URL=https://api-test.s3.xyz
+REACT_APP_API_BASE_URL=https://api-dev.s3.xyz
 
 REACT_APP_S3_SCAN_URL=https://scan-dev.s3.xyz
 

diff --git a/packages/client/scan/.env.example b/packages/client/scan/.env.example
@@ -1,10 +1,10 @@
-REACT_APP_NAME=userscan-client
+REACT_APP_NAME=US3R SCAN
 REACT_APP_VERSION=$npm_package_version
 
-REACT_APP_API_BASE_URL = http://localhost:3002
-REACT_APP_UPLOAD_API_URL=https://test-enchanft-backend.onrender.com
+REACT_APP_API_BASE_URL = https://api-dev.s3.xyz
+REACT_APP_UPLOAD_API_URL=https://api-dev.u3.xyz
 
-REACT_APP_CERAMIC_MAINNET_HOST=https://ceramic-miannet.s3.xyz
-REACT_APP_CERAMIC_TESTNET_HOST=https://ceramic-testnet.s3.xyz
+REACT_APP_CERAMIC_MAINNET_HOST=https://gcp-ceramic-mainnet-dev.s3.xyz
+REACT_APP_CERAMIC_TESTNET_HOST=https://gcp-ceramic-testnet-dev.s3.xyz
 
 REACT_APP_WALLET_CONNECT_PROJECT_ID = c652d0148879353d7e965d7f6f361e59
diff --git a/packages/client/scan/package.json b/packages/client/scan/package.json
@@ -18,6 +18,7 @@
     "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.191",
     "@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",
@@ -34,8 +35,9 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.36.1",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
-    "react-aria-components": "^1.0.0-alpha.3",
+    "react-aria-components": "^1.0.0-alpha.5",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.0.0",

diff --git a/packages/client/scan/src/api/index.ts b/packages/client/scan/src/api/index.ts
@@ -211,3 +211,21 @@ export function uploadImage({ file }: { file: File }) {
     data: form,
   })
 }
+
+export function startIndexModel({
+  network,
+  modelId,
+  didSession,
+}: {
+  network: Network
+  modelId: string
+  didSession?: string
+}): AxiosPromise<ApiResp<null>> {
+  return axios({
+    url: `${API_BASE_URL}/models/indexing?network=${network.toUpperCase()}&model=${modelId}`,
+    method: 'post',
+    headers: {
+      'did-session': didSession || '',
+    },
+  })
+}
diff --git a/packages/client/scan/src/components/Dapp/Tabs.tsx b/packages/client/scan/src/components/Dapp/Tabs.tsx
@@ -1,4 +1,4 @@
-import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'react-aria-components'
+import { Tabs, TabList, Tab, TabPanel } from 'react-aria-components'
 import Definition from './Definition'
 import Instance from './Instance'
 import PlaygroundGraphiQL from './Playground'
@@ -20,17 +20,16 @@ export default function ModelTabs({
           <Tab id="Playground">Model Playground</Tab>
         </TabList>
       </div>
-      <TabPanels>
-        <TabPanel id="Definition">
-          <Definition streamId={modelId} />
-        </TabPanel>
-        <TabPanel id="Instance">
-          <Instance streamId={modelId}/>
-        </TabPanel>
-        <TabPanel id="Playground">
-          <PlaygroundGraphiQL streamId={modelId}/>
-        </TabPanel>
-      </TabPanels>
+
+      <TabPanel id="Definition">
+        <Definition streamId={modelId} />
+      </TabPanel>
+      <TabPanel id="Instance">
+        <Instance streamId={modelId} />
+      </TabPanel>
+      <TabPanel id="Playground">
+        <PlaygroundGraphiQL streamId={modelId} />
+      </TabPanel>
     </Tabs>
   )
 }
diff --git a/packages/client/scan/src/components/ModelView/Definition.tsx b/packages/client/scan/src/components/ModelView/Definition.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import styled from 'styled-components'
+import Prism from 'prismjs'
 import FileSaver from 'file-saver'
 import { GraphQLEditor, PassedSchema } from 'graphql-editor'
 import { getModelInfo, queryModelGraphql } from '../../api'
@@ -9,6 +10,10 @@ import { schemas } from '../../utils/composedb-types/schemas'
 import { AxiosError } from 'axios'
 import { useCeramicCtx } from '../../context/CeramicCtx'
 
+import 'prismjs/components/prism-typescript'
+import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
+
 export default function Definition() {
   const { streamId } = useParams()
   const { network } = useCeramicCtx()
@@ -116,9 +121,10 @@ export default function Definition() {
               </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>
         )}
@@ -139,11 +145,10 @@ export default function Definition() {
               </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>
         )}
@@ -152,6 +157,34 @@ export default function Definition() {
   )
 }
 
+export 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 CodeBox = styled.div`
+  > .name {
+    border-bottom: none;
+    display: inline-block;
+    padding: 10px 20px;
+  }
+  > .line-numbers {
+    overflow: scroll;
+    /* margin-bottom: 20px; */
+  }
+`
+
 const EditorBox = styled.div`
   height: calc(100vh - 300px);
   max-height: 800px;
@@ -175,10 +208,10 @@ const ResultBox = styled.div`
     border: 1px solid #39424c;
     border-radius: 20px;
   }
-  div {
+  > div {
     width: calc(50% - 10px);
     margin: 20px 0px;
-    padding: 10px;
+    /* padding: 10px; */
     box-sizing: border-box;
     background-color: #1a1a1c;
     .title {
@@ -192,7 +225,8 @@ const ResultBox = styled.div`
       line-height: 28px;
       font-style: italic;
       color: #ffffff;
-
+      padding: 10px;
+      box-sizing: border-box;
       button {
         background: #ffffff;
       }
@@ -204,10 +238,14 @@ const ResultBox = styled.div`
     }
   }
   .result-text {
-    width: 100%;
     word-wrap: break-word;
     color: #718096;
     overflow: scroll;
+    width: 100%;
+    margin-top: 0;
+    > div {
+      width: fit-content;
+    }
   }
 
   button {