Merge pull request #168 from us3r-network/dashboard-dev

Dashboard dev
us3r-network · Jul 10, 2023 · b7d58c2 · b7d58c2
2 parents 4d068da + 68e57e2
commit b7d58c2
Show file tree

Hide file tree

Showing 41 changed files with 1,204 additions and 736 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/dashboard/src/components/CopyTint.tsx b/packages/client/dashboard/src/components/CopyTint.tsx
@@ -0,0 +1,47 @@
+import { useCallback, useState } from 'react'
+import CopyIcon from './Icons/CopyIcon'
+import styled from 'styled-components'
+
+export default function CopyTint({ data }: { data: string }) {
+  const [showCopyTint, setShowCopyTint] = useState(false)
+  const copyId = useCallback(async (appId: string) => {
+    try {
+      await navigator.clipboard.writeText(appId)
+      setShowCopyTint(true)
+      setTimeout(() => {
+        setShowCopyTint(false)
+      }, 2000)
+    } catch (error) {
+      console.error(error)
+    }
+  }, [])
+  return (
+    <CopyBox>
+      <button
+        onClick={() => {
+          copyId(data)
+        }}
+      >
+        <CopyIcon />
+      </button>
+      {showCopyTint && <span>Copied</span>}
+    </CopyBox>
+  )
+}
+
+const CopyBox = styled.div`
+  position: relative;
+  > span {
+    position: absolute;
+    font-size: 13px;
+    color: inherit;
+    left: 0;
+    bottom: -12px;
+    /* transform: translate(-50%, 50%); */
+  }
+  > button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`
diff --git a/packages/client/dashboard/src/components/CreateCompositeModal.tsx b/packages/client/dashboard/src/components/CreateCompositeModal.tsx
@@ -9,20 +9,39 @@ import { schemas } from '../utils/composedb-types/schemas'
 import useSelectedDapp from '../hooks/useSelectedDapp'
 import { createDappComposites } from '../api'
 import { useSession } from '@us3r-network/auth-with-rainbowkit'
+import { ModelStream } from '../types'
+
+const TINT_WORD = `# Edit the model's relation based on your business needs.
+# See Example below
+# https://composedb.js.org/docs/0.4.x/guides/data-modeling/relations-container-of-items
+
+`
 
 export default function CreateCompositeModal({
   closeModal,
   loadDappComposites,
+  dappModels,
 }: {
   closeModal: () => void
   loadDappComposites: () => Promise<void>
+  dappModels: ModelStream[]
 }) {
   const { selectedDapp } = useSelectedDapp()
   const session = useSession()
   const [submitting, setSubmitting] = useState(false)
   const [name, setName] = useState('')
   const [gqlSchema, setGqlSchema] = useState<PassedSchema>({
-    code: schemas.code,
+    code:
+      TINT_WORD +
+      dappModels
+        .map((item) => {
+          return `
+type ${item.stream_content.name} @loadModel(id: "${item.stream_id}") {
+  id: ID!
+}
+`
+        })
+        .join('\n'),
     libraries: schemas.library,
   })
 
@@ -84,6 +103,10 @@ export default function CreateCompositeModal({
             setGqlSchema(props)
           }}
           schema={gqlSchema}
+          sidebarExpanded={false}
+          routeState={{
+            code: 'on',
+          }}
         />
       </EditorBox>
       <div className="btns">

diff --git a/packages/client/dashboard/src/components/CreateNewModel.tsx b/packages/client/dashboard/src/components/CreateNewModel.tsx
@@ -68,6 +68,10 @@ export default function CreateNewModel({
             setGqlSchema(props)
           }}
           schema={gqlSchema}
+          sidebarExpanded={false}
+          routeState={{
+            code: 'on',
+          }}
         />
       </EditorBox>
       <div className="btns">

diff --git a/packages/client/dashboard/src/components/FavoriteModal.tsx b/packages/client/dashboard/src/components/FavoriteModal.tsx
@@ -81,16 +81,20 @@ function ModelList() {
       return
     }
 
-    const resp = await getStarModels({
-      network: (selectedDapp?.network as Network) || Network.TESTNET,
-      ids,
-    })
-    if (resp.data.code !== 0) {
-      throw new Error(resp.data.msg)
-    }
+    try {
+      const resp = await getStarModels({
+        network: (selectedDapp?.network as Network) || Network.TESTNET,
+        ids,
+      })
+      if (resp.data.code !== 0) {
+        throw new Error(resp.data.msg)
+      }
 
-    const list = resp.data.data
-    setStarModels([...list])
+      const list = resp.data.data
+      setStarModels([...list])
+    } catch (error) {
+      console.error(error)
+    }
   }, [personalCollections, selectedDapp?.network])
 
   useEffect(() => {

diff --git a/packages/client/dashboard/src/components/ModelList.tsx b/packages/client/dashboard/src/components/ModelList.tsx
@@ -20,6 +20,8 @@ import MergeModal from './MergeModal'
 import CreateNewModel from './CreateNewModel'
 import CreateCompositeModal from './CreateCompositeModal'
 import MergeIcon from './Icons/MergeIcon'
+import { shortPubKey } from '../utils/shortPubKey'
+import CopyTint from './CopyTint'
 
 export default function ModelList({
   editable,
@@ -50,13 +52,21 @@ export default function ModelList({
       return
     }
 
-    const resp = await getStarModels({
-      network: selectedDapp.network as Network,
-      ids: selectedDapp.models || [],
-    })
+    try {
+      const resp = await getStarModels({
+        network: selectedDapp.network as Network,
+        ids: selectedDapp.models || [],
+      })
 
-    const list = resp.data.data
-    setDappModels(list)
+      const list = resp.data.data
+      setDappModels(list)
+      if (list.length > 0) {
+        setSelectModel(list[0])
+      }
+    } catch (error) {
+      console.error(error)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDapp])
 
   const loadDappComposites = useCallback(async () => {
@@ -211,7 +221,10 @@ export default function ModelList({
           <div className="title">
             <h3>Composites</h3>
             {editable && (
-              <CreateComposite loadDappComposites={loadDappComposites} />
+              <CreateComposite
+                loadDappComposites={loadDappComposites}
+                dappModels={dappModels || []}
+              />
             )}
           </div>
 
@@ -346,8 +359,16 @@ function DappModelList({
             {active && (
               <>
                 <hr />
+                <div className="id-copy">
+                  <p>ID: {shortPubKey(selected.stream_id, { len: 7 })}</p>
+                  <div>
+                    <CopyTint data={selected.stream_id} />
+                  </div>
+                </div>
                 <p>{selected.stream_content.description}</p>
-                <p>Streams:{selected.useCount}</p>
+                <p>
+                  Streams: <span>{selected.useCount}</span>
+                </p>
               </>
             )}
           </div>
@@ -436,8 +457,10 @@ function CreateNew() {
 
 function CreateComposite({
   loadDappComposites,
+  dappModels,
 }: {
   loadDappComposites: () => Promise<void>
+  dappModels: ModelStream[]
 }) {
   return (
     <DialogTrigger>
@@ -451,6 +474,7 @@ function CreateComposite({
               <CreateCompositeModal
                 closeModal={close}
                 loadDappComposites={loadDappComposites}
+                dappModels={dappModels}
               />
             )}
           </Dialog>
@@ -529,6 +553,16 @@ const DappModelsListBox = styled.div`
     background: rgba(113, 128, 150, 0.3);
     border: 1px solid #718096;
     border-radius: 12px;
+
+    .id-copy {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      > p {
+        margin: 0;
+      }
+    }
   }
 
   hr {
@@ -538,6 +572,14 @@ const DappModelsListBox = styled.div`
 
   p {
     color: #718096;
+    > span {
+      color: #ffffff;
+      font-size: 16px;
+      font-family: Rubik;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+    }
   }
 
   .removing {

diff --git a/packages/client/dashboard/src/components/Selector/DappSelector.tsx b/packages/client/dashboard/src/components/Selector/DappSelector.tsx
@@ -24,7 +24,6 @@ export default function DappSelector({
       items={dappItems}
       selectedKey={Number(selected)}
       onSelectionChange={(k) => {
-        console.log({ k })
         if (k === 0) {
           navigate('/dapp/create')
           return

diff --git a/packages/client/dashboard/src/container/ExploreModel.tsx b/packages/client/dashboard/src/container/ExploreModel.tsx
@@ -73,16 +73,20 @@ export default function ExploreModel() {
       return
     }
 
-    const resp = await getStarModels({
-      network: (selectedDapp?.network as Network) || Network.TESTNET,
-      ids,
-    })
-    if (resp.data.code !== 0) {
-      throw new Error(resp.data.msg)
-    }
+    try {
+      const resp = await getStarModels({
+        network: (selectedDapp?.network as Network) || Network.TESTNET,
+        ids,
+      })
+      if (resp.data.code !== 0) {
+        throw new Error(resp.data.msg)
+      }
 
-    const list = resp.data.data
-    setStarModels([...list])
+      const list = resp.data.data
+      setStarModels([...list])
+    } catch (error) {
+      console.error(error)
+    }
   }, [personalCollections, selectedDapp?.network])
 
   const fetchModel = useCallback(async () => {

diff --git a/packages/client/scan/.env.example b/packages/client/scan/.env.example
@@ -1,8 +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,10 +18,11 @@
     "@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",
-    "@us3r-network/auth-with-rainbowkit": "^0.1.3",
+    "@us3r-network/auth-with-rainbowkit": "^0.1.8",
     "@us3r-network/data-model": "^0.2.1",
     "@us3r-network/profile": "^0.4.2",
     "axios": "^1.2.6",
@@ -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",