Merge pull request #166 from us3r-network/dev

Dev

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
 

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

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",

packages/client/scan/src/App.tsx

@@ -1,4 +1,4 @@
-import { Routes, Route, Outlet } from 'react-router-dom'
+import { Routes, Route, Outlet, useSearchParams } from 'react-router-dom'
 import styled from 'styled-components'
 import dayjs from 'dayjs'
 import { isMobile } from 'react-device-detect'
@@ -17,21 +17,21 @@ import Nav from './components/Nav'
 import MobileNav from './components/MobileNav'
 import NoMatch from './components/NoMatch'
 import { useGAPageView } from './hooks/useGoogleAnalytics'
-import { CERAMIC_TESTNET_HOST } from './constants'
+import { CERAMIC_TESTNET_HOST, WALLET_CONNECT_PROJECT_ID } from './constants'
 import Models from './container/Models'
 import ModelStream from './container/ModelStream'
 import ModelCreate from './container/ModelCreate'
 import UserModels from './container/UserModels'
 import ModelView from './container/ModelView'
 import ModelMidInfo from './container/ModelMidInfo'
-import { useLocalStorage } from './hooks/useLocalStorage'
 import { Network } from './types'
 import CeramicProvider from './context/CeramicCtx'
 import Header from './components/Header'
 import ModelStreams from './container/ModelStreams'
 import DappCreate from './container/DappCreate'
 import DappInfo from './container/DappInfo'
 import DappEdit from './container/DappEdit'
+import { useEffect, useState } from 'react'
 
 dayjs.extend(relativeTime)
 
@@ -70,15 +70,34 @@ function Routers() {
 }
 
 export default function App() {
-  const [network, setNetwork] = useLocalStorage(
-    'network-select',
-    Network.TESTNET
-  )
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const [network, setNetwork] = useState(Network.TESTNET)
+
+  useEffect(() => {
+    const routerNet = searchParams.get('network')?.toUpperCase()
+
+    if (routerNet) {
+      Object.values(Network).includes(routerNet as Network) &&
+        setNetwork(routerNet as Network)
+    }
+  }, [searchParams, setSearchParams])
 
   return (
-    <Us3rAuthWithRainbowkitProvider>
+    <Us3rAuthWithRainbowkitProvider
+      projectId={WALLET_CONNECT_PROJECT_ID}
+      appName="S3 Scan"
+    >
       <ProfileStateProvider ceramicHost={CERAMIC_TESTNET_HOST}>
-        <CeramicProvider network={network} setNetwork={setNetwork}>
+        <CeramicProvider
+          network={network}
+          setNetwork={(n) => {
+            searchParams.delete('network')
+            searchParams.append('network', n)
+            setSearchParams(searchParams)
+            setNetwork(n)
+          }}
+        >
           <Routers />
         </CeramicProvider>
       </ProfileStateProvider>

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 || '',
+    },
+  })
+}

packages/client/scan/src/components/Dapp/BasicInfo.tsx

@@ -10,7 +10,7 @@ import DappMirror from '../icons/DappMirror'
 import DappMedium from '../icons/DappMedium'
 import DappGithub from '../icons/DappGithub'
 import Copy from '../icons/Copy'
-
+import { useCeramicCtx } from '../../context/CeramicCtx'
 
 export default function BasicInfo({ dapp }: { dapp?: Dapp }) {
   const socialLink = dapp?.socialLink || []
@@ -21,7 +21,7 @@ export default function BasicInfo({ dapp }: { dapp?: Dapp }) {
   const socialMedium = socialLink.find((item) => item.platform === 'medium')
 
   const [showCopyTint, setShowCopyTint] = useState(false)
-
+  const { network } = useCeramicCtx()
   const copyAppId = useCallback(async (appId: string) => {
     try {
       await navigator.clipboard.writeText(appId)
@@ -56,7 +56,7 @@ export default function BasicInfo({ dapp }: { dapp?: Dapp }) {
           </div>
         </div>
         <div className="edit">
-          <Link to={`/dapp/${dapp?.id}/edit`}>
+          <Link to={`/dapp/${dapp?.id}/edit?network=${network}`}>
             <button>
               <DappEdit />
             </button>

packages/client/scan/src/components/Dapp/Definition.tsx

@@ -8,7 +8,7 @@ import { schemas } from '../../utils/composedb-types/schemas'
 import { AxiosError } from 'axios'
 import { useCeramicCtx } from '../../context/CeramicCtx'
 
-export default function Definition({streamId}: {streamId: string}) {
+export default function Definition({ streamId }: { streamId: string }) {
   const { network } = useCeramicCtx()
   const [modelData, setModelData] = useState<ModeQueryResult>()
   const [gqlSchema, setGqlSchema] = useState<PassedSchema>({
@@ -35,9 +35,16 @@ export default function Definition({streamId}: {streamId: string}) {
         const resp = await queryModelGraphql(streamId, network)
         const { data } = resp.data
         setModelData(data)
-        setGqlSchema({
-          code: data.graphqlSchema,
-        })
+        if (data.graphqlSchemaDefinition) {
+          setGqlSchema({
+            code: data.graphqlSchemaDefinition,
+            libraries: schemas.library,
+          })
+        } else {
+          setGqlSchema({
+            code: data.graphqlSchema,
+          })
+        }
       } catch (error) {
         const err = error as AxiosError
         setErrMsg((err.response?.data as any).message || err.message)

packages/client/scan/src/components/Dapp/Playground.tsx

@@ -44,7 +44,7 @@ export type YogaGraphiQLProps = Omit<
   | 'onEditQuery'
 > &
   Partial<Omit<LoadFromUrlOptions, 'headers'>> & {
-    streamId: string;
+    streamId: string
     title?: string
     additionalHeaders?: LoadFromUrlOptions['headers']
   }
@@ -134,6 +134,7 @@ export default function PlaygroundGraphiQL(
       const resp = await queryModelGraphql(streamId, network)
       const { data } = resp.data
       setDefinition(data.runtimeDefinition)
+
       const definition = data.runtimeDefinition
       const modelName = Object.keys(definition.models)[0]
       const objValues: any[] = Object.values(definition.objects)

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>
   )
 }

packages/client/scan/src/components/Header.tsx

@@ -48,7 +48,7 @@ export default function Header() {
   return (
     <Box>
       <div>
-        {(showBack && (
+        {(showBack && window.history.length > 1 && (
           <BackBtn
             backAction={() => {
               if (location.pathname.startsWith('/models/modelview')) {

packages/client/scan/src/components/Home/Lists/Models.tsx

@@ -53,11 +53,13 @@ function ListCard({
   count: number
   isIndexed?: boolean
 }) {
+  const { network } = useCeramicCtx()
+
   return (
     <CardBox className="models-box">
       <div className="name">
         {(isIndexed && (
-          <Link to={`/models/modelview/${stream_id}`}>
+          <Link to={`/models/modelview/${stream_id}?network=${network}`}>
             <h4>{name}</h4>
             <span>{shortPubKey(stream_id, { len: 8, split: '-' })}</span>
           </Link>
@@ -71,7 +73,9 @@ function ListCard({
       <div className="desc">{description}</div>
       <div className="count">
         {(isIndexed && (
-          <Link to={`/models/model/${stream_id}/mids`}>{count}</Link>
+          <Link to={`/models/model/${stream_id}/mids?network=${network}`}>
+            {count}
+          </Link>
         )) ||
           count}
       </div>

packages/client/scan/src/components/Home/Lists/Streams.tsx

@@ -45,16 +45,17 @@ function ListCard({
   did: string
   indexingTime: number
 }) {
+  const { network } = useCeramicCtx()
   return (
     <CardBox className="streams-box">
       <div className="short-key">
-        <Link to={`/streams/stream/${streamId}`}>
+        <Link to={`/streams/stream/${streamId}?network=${network}`}>
           {shortPubKey(streamId, { len: 8, split: '-' })}
         </Link>{' '}
       </div>
       <div className="avatar">
         <Avatar did={did} />
-        <Link to={`/streams/profile/${did}`}>
+        <Link to={`/streams/profile/${did}?network=${network}`}>
           <UserName did={did} />
         </Link>
       </div>

packages/client/scan/src/components/Home/Lists/Title.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 import ComposeDB from '../../icons/ComposeDB'
 import { Link } from 'react-router-dom'
+import { useCeramicCtx } from '../../../context/CeramicCtx'
 
 export default function Title({
   title,
@@ -9,14 +10,15 @@ export default function Title({
   title: string
   viewAll: string
 }) {
+  const { network } = useCeramicCtx()
   return (
     <Box>
       <div>
         <ComposeDB />
         <h2>{title}</h2>
       </div>
       <div className="view-all">
-        <Link to={viewAll}>View All</Link>
+        <Link to={`${viewAll}?network=${network}`}>View All</Link>
       </div>
     </Box>
   )