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

Scan dev
us3r-network · Sep 26, 2023 · e20caa2 · e20caa2
2 parents 920c5cb + a7cbd4d
commit e20caa2
Show file tree

Hide file tree

Showing 13 changed files with 191 additions and 47 deletions.
diff --git a/.github/workflows/dashboard-firebase-hosting-merge.yml b/.github/workflows/dashboard-firebase-hosting-merge.yml
@@ -33,6 +33,7 @@ jobs:
           REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
           REACT_APP_S3_SCAN_URL: '${{ vars.REACT_APP_S3_SCAN_URL }}'
           REACT_APP_DOCS_URL: '${{ vars.REACT_APP_DOCS_URL }}'
+          REACT_APP_ADMIN_ADDRESS: '${{ vars.REACT_APP_ADMIN_ADDRESS }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
@@ -66,6 +67,7 @@ jobs:
           REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
           REACT_APP_S3_SCAN_URL: '${{ vars.REACT_APP_S3_SCAN_URL }}'
           REACT_APP_DOCS_URL: '${{ vars.REACT_APP_DOCS_URL }}'
+          REACT_APP_ADMIN_ADDRESS: '${{ vars.REACT_APP_ADMIN_ADDRESS }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

diff --git a/.github/workflows/dashboard-firebase-hosting-pull-request.yml b/.github/workflows/dashboard-firebase-hosting-pull-request.yml
@@ -33,6 +33,7 @@ jobs:
           REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
           REACT_APP_S3_SCAN_URL: '${{ vars.REACT_APP_S3_SCAN_URL }}'
           REACT_APP_DOCS_URL: '${{ vars.REACT_APP_DOCS_URL }}'
+          REACT_APP_ADMIN_ADDRESS: '${{ vars.REACT_APP_ADMIN_ADDRESS }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
@@ -65,6 +66,7 @@ jobs:
           REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
           REACT_APP_S3_SCAN_URL: '${{ vars.REACT_APP_S3_SCAN_URL }}'
           REACT_APP_DOCS_URL: '${{ vars.REACT_APP_DOCS_URL }}'
+          REACT_APP_ADMIN_ADDRESS: '${{ vars.REACT_APP_ADMIN_ADDRESS }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

diff --git a/.github/workflows/scan-firebase-hosting-merge.yml b/.github/workflows/scan-firebase-hosting-merge.yml
@@ -30,6 +30,7 @@ jobs:
           REACT_APP_UPLOAD_API_URL: '${{ vars.REACT_APP_UPLOAD_API_URL }}'
           REACT_APP_CERAMIC_MAINNET_HOST: '${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}'
           REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
+          REACT_APP_ADMIN_ADDRESS: '${{ vars.REACT_APP_ADMIN_ADDRESS }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
@@ -60,6 +61,7 @@ jobs:
           REACT_APP_UPLOAD_API_URL: '${{ vars.REACT_APP_UPLOAD_API_URL }}'
           REACT_APP_CERAMIC_MAINNET_HOST: '${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}'
           REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
+          REACT_APP_ADMIN_ADDRESS: '${{ vars.REACT_APP_ADMIN_ADDRESS }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

diff --git a/.github/workflows/scan-firebase-hosting-pull-request.yml b/.github/workflows/scan-firebase-hosting-pull-request.yml
@@ -30,6 +30,7 @@ jobs:
           REACT_APP_UPLOAD_API_URL: '${{ vars.REACT_APP_UPLOAD_API_URL }}'
           REACT_APP_CERAMIC_MAINNET_HOST: '${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}'
           REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
+          REACT_APP_ADMIN_ADDRESS: '${{ vars.REACT_APP_ADMIN_ADDRESS }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
@@ -59,6 +60,7 @@ jobs:
           REACT_APP_UPLOAD_API_URL: '${{ vars.REACT_APP_UPLOAD_API_URL }}'
           REACT_APP_CERAMIC_MAINNET_HOST: '${{ vars.REACT_APP_CERAMIC_MAINNET_HOST }}'
           REACT_APP_CERAMIC_TESTNET_HOST: '${{ vars.REACT_APP_CERAMIC_TESTNET_HOST }}'
+          REACT_APP_ADMIN_ADDRESS: '${{ vars.REACT_APP_ADMIN_ADDRESS }}'
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

diff --git a/packages/client/scan/.env.example b/packages/client/scan/.env.example
@@ -7,4 +7,6 @@ REACT_APP_UPLOAD_API_URL=https://api-dev.u3.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
+REACT_APP_WALLET_CONNECT_PROJECT_ID = c652d0148879353d7e965d7f6f361e59
+
+REACT_APP_ADMIN_ADDRESS = 0x0000000
diff --git a/packages/client/scan/src/components/DappModelInstance.tsx b/packages/client/scan/src/components/DappModelInstance.tsx
@@ -7,6 +7,7 @@ import { ModelMid } from '../types'
 import { shortPubKey } from '../utils/shortPubKey'
 import { UserAvatar } from '@us3r-network/profile'
 import dayjs from 'dayjs'
+import { Link } from 'react-router-dom'
 
 export default function DappModelInstance({ modelId }: { modelId: string }) {
   const { network } = useCeramicCtx()
@@ -69,7 +70,13 @@ export default function DappModelInstance({ modelId }: { modelId: string }) {
               console.log(item)
               return (
                 <tr key={item.streamId}>
-                  <td>{shortPubKey(item.streamId, { len: 8 })}</td>
+                  <td>
+                    <Link
+                      to={`/streams/stream/${item.streamId}?network=${network}`}
+                    >
+                      {shortPubKey(item.streamId, { len: 8 })}
+                    </Link>
+                  </td>
                   <td>
                     <ControllerBox>
                       <UserAvatar did={item.controllerDid} />

diff --git a/packages/client/scan/src/components/Header.tsx b/packages/client/scan/src/components/Header.tsx
@@ -51,11 +51,12 @@ export default function Header() {
         {(showBack && window.history.length > 1 && (
           <BackBtn
             backAction={() => {
-              if (location.pathname.startsWith('/models/modelview')) {
-                navigate('/models')
-              } else {
-                navigate(-1)
-              }
+              navigate(-1)
+              // if (location.pathname.startsWith('/models/modelview')) {
+              //   navigate('/models')
+              // } else {
+              //   navigate(-1)
+              // }
             }}
           />
         )) || <div></div>}

diff --git a/packages/client/scan/src/components/icons/Spinner.tsx b/packages/client/scan/src/components/icons/Spinner.tsx
@@ -0,0 +1,91 @@
+export default function Spinner({ stroke = '#718096' }: { stroke?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      color="#fff"
+      width="32"
+    >
+      <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(0 16 16)">
+        <animate
+          attributeName="opacity"
+          from="1"
+          to=".1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0"
+        ></animate>
+      </path>
+      <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(45 16 16)">
+        <animate
+          attributeName="opacity"
+          from="1"
+          to=".1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.125s"
+        ></animate>
+      </path>
+      <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(90 16 16)">
+        <animate
+          attributeName="opacity"
+          from="1"
+          to=".1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.25s"
+        ></animate>
+      </path>
+      <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(135 16 16)">
+        <animate
+          attributeName="opacity"
+          from="1"
+          to=".1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.375s"
+        ></animate>
+      </path>
+      <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(180 16 16)">
+        <animate
+          attributeName="opacity"
+          from="1"
+          to=".1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.5s"
+        ></animate>
+      </path>
+      <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(225 16 16)">
+        <animate
+          attributeName="opacity"
+          from="1"
+          to=".1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.675s"
+        ></animate>
+      </path>
+      <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(270 16 16)">
+        <animate
+          attributeName="opacity"
+          from="1"
+          to=".1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.75s"
+        ></animate>
+      </path>
+      <path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(315 16 16)">
+        <animate
+          attributeName="opacity"
+          from="1"
+          to=".1"
+          dur="1s"
+          repeatCount="indefinite"
+          begin="0.875s"
+        ></animate>
+      </path>
+    </svg>
+  )
+}
diff --git a/packages/client/scan/src/constants/index.ts b/packages/client/scan/src/constants/index.ts
@@ -44,3 +44,5 @@ export const TypesReverse = Object.fromEntries(
 export const WALLET_CONNECT_PROJECT_ID =
   process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID ||
   'c652d0148879353d7e965d7f6f361e59'
+
+export const ADMIN_ADDRESS = process.env.REACT_APP_ADMIN_ADDRESS
diff --git a/packages/client/scan/src/container/DappsList.tsx b/packages/client/scan/src/container/DappsList.tsx
@@ -70,7 +70,13 @@ export default function DappsList() {
                         {(item.modelDetals.length > 0 &&
                           item.modelDetals.map((item, idx) => {
                             return (
-                              <span key={idx}>{item.stream_content.name}</span>
+                              <span key={idx}>
+                                <Link
+                                  to={`/models/modelview/${item.stream_id}?network=${network}`}
+                                >
+                                  {item.stream_content.name}
+                                </Link>
+                              </span>
                             )
                           })) ||
                           '-'}
@@ -217,9 +223,8 @@ const TableContainer = styled.table<{ isMobile: boolean }>`
     align-items: center;
     gap: 10px;
     max-width: 550px;
-    overflow: hidden;
     text-overflow: ellipsis;
-    overflow: hidden;
+    overflow: scroll;
     padding-right: 5px;
     white-space: nowrap;
   }

diff --git a/packages/client/scan/src/container/ModelView.tsx b/packages/client/scan/src/container/ModelView.tsx
@@ -11,7 +11,8 @@ import styled from 'styled-components'
 
 import { useSession } from '@us3r-network/auth-with-rainbowkit'
 import { Dapp } from '@us3r-network/data-model'
-import { set } from 'lodash'
+import Spinner from '../components/icons/Spinner'
+import { ADMIN_ADDRESS } from '../constants'
 
 export default function ModelView() {
   const { streamId } = useParams()
@@ -108,12 +109,13 @@ export default function ModelView() {
   const startIndex = useCallback(async () => {
     if (!streamId) return
     try {
+      setIndexing(true)
       const resp = await startIndexModel({
         network,
         modelId: streamId,
         didSession: session?.serialize(),
       })
-      console.log('startIndex', resp.data)
+
       if (resp.data.code !== 0) {
         throw new Error(resp.data.msg)
       }
@@ -150,13 +152,30 @@ export default function ModelView() {
     return ['Instance', 'Playground']
   }, [isIndexed])
 
+  const isAdmin = useMemo(() => {
+    if (!session?.id || !ADMIN_ADDRESS) return false
+    return session.id.endsWith(ADMIN_ADDRESS.toLowerCase())
+  }, [session?.id])
+
   return (
     <Tabs disabledKeys={disabledKeys}>
       <div className="title-bar">
-        <ToolsBox>
-          <span>{modelStream?.streamContent?.name}</span>
-          {!isIndexed && <button onClick={startIndex}>Start index</button>}
-        </ToolsBox>
+        {(modelStream?.streamContent?.name && (
+          <ToolsBox>
+            <span>{modelStream?.streamContent?.name}</span>
+            {isAdmin && !isIndexed && (
+              <>
+                {indexing ? (
+                  <button>
+                    <Spinner />
+                  </button>
+                ) : (
+                  <button onClick={startIndex}>Start index</button>
+                )}
+              </>
+            )}
+          </ToolsBox>
+        )) || <div></div>}
         <TabList aria-label="History of Ancient Rome">
           <Tab id="Definition">Model Definition</Tab>
           <Tab id="Instance">Model Instance Documents</Tab>

diff --git a/packages/client/scan/src/container/Models.tsx b/packages/client/scan/src/container/Models.tsx
@@ -266,8 +266,9 @@ export default function ModelsPage() {
 function Dapps({
   dapps,
 }: {
-  dapps: Array<{ name: string; description: string; icon: string }>
+  dapps: Array<{ name: string; description: string; icon: string; id: number }>
 }) {
+  const { network } = useCeramicCtx()
   const apps = useMemo(() => {
     const data = [...dapps]
     if (data.length > 3)
@@ -280,7 +281,13 @@ function Dapps({
       {apps.data.length > 0
         ? apps.data.map((item, idx) => {
             return (
-              <ImgOrName key={item.name} name={item.name} imgUrl={item.icon} />
+              <Link to={`/dapps/${item.id}?network=${network}`}>
+                <ImgOrName
+                  key={item.name}
+                  name={item.name}
+                  imgUrl={item.icon}
+                />
+              </Link>
             )
           })
         : 'None'}
@@ -299,35 +306,37 @@ const DappBox = styled.div`
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-  > span {
-    color: #fff;
-    width: 36px;
-    height: 36px;
-    border-radius: 10px;
-    border: 1px solid #718096;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    &.name {
-      font-size: 20px;
-      font-weight: 500;
-    }
-    &.left {
-      border: none;
+  a {
+    > span {
       color: #fff;
-      justify-content: start;
-      font-family: Rubik;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
-    }
-    > img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      flex-shrink: 0;
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
+      border: 1px solid #718096;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      &.name {
+        font-size: 20px;
+        font-weight: 500;
+      }
+      &.left {
+        border: none;
+        color: #fff;
+        justify-content: start;
+        font-family: Rubik;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+      > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        flex-shrink: 0;
+      }
     }
   }
 `

diff --git a/packages/client/scan/src/types/index.ts b/packages/client/scan/src/types/index.ts
@@ -82,7 +82,7 @@ export type ModelStream = {
   recentlyUseCount?: number
   isIndexed?: boolean
   firstRecordTime?: string
-  dapps?: { name: string; description: string; icon: string }[]
+  dapps?: { name: string; description: string; icon: string; id: number }[]
 }
 
 export type ModelStreamInfo = {