diff --git a/packages/client/dashboard/.env.example b/packages/client/dashboard/.env.example index d2c51335..6266a5b1 100644 --- 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 index f70e30b5..7dc961bf 100644 --- 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 \ No newline at end of file diff --git a/packages/client/scan/package.json b/packages/client/scan/package.json index ee41473d..de86b82b 100644 --- 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 index 081721c2..9c0c8133 100644 --- 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> { + 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 index 28fb9450..4859232b 100644 --- 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({ Model Playground - - - - - - - - - - - + + + + + + + + + + ) } diff --git a/packages/client/scan/src/components/ModelView/Definition.tsx b/packages/client/scan/src/components/ModelView/Definition.tsx index 1b516f44..b211bfb7 100644 --- 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() {
- 
-                {JSON.stringify(modelData.composite, null, 2)}
-
+
)} @@ -139,11 +145,10 @@ export default function Definition() {
- 
-                
-                  {JSON.stringify(modelData.runtimeDefinition, null, 2)}
-                
-
+
)} @@ -152,6 +157,34 @@ export default function Definition() { ) } +export function Code({ name, content }: { name: string; content: string }) { + useEffect(() => { + Prism.highlightAll() + }, [content]) + + const preCode = `
${content}
` + return ( + +
+ + ) +} + +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 { diff --git a/packages/client/scan/src/container/ModelView.tsx b/packages/client/scan/src/container/ModelView.tsx index 8f5c4029..992ee9e4 100644 --- a/packages/client/scan/src/container/ModelView.tsx +++ b/packages/client/scan/src/container/ModelView.tsx @@ -1,24 +1,17 @@ import { useCallback, useEffect, useMemo, useState } from 'react' import { useParams } from 'react-router-dom' -import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'react-aria-components' -import { getModelInfo } from '../api' +import { Tabs, TabList, Tab, TabPanel } from 'react-aria-components' +import { getModelInfo, startIndexModel } from '../api' import { ModelStream } from '../types' import { useCeramicCtx } from '../context/CeramicCtx' import Definition from '../components/ModelView/Definition' import Instance from '../components/ModelView/Instance' import PlaygroundGraphiQL from '../components/ModelView/Playground' import styled from 'styled-components' -import { - Button, - Item, - Label, - ListBox, - Popover, - Select, -} from 'react-aria-components' -import AddIcon from '../components/icons/Add' + import { useSession } from '@us3r-network/auth-with-rainbowkit' import { Dapp } from '@us3r-network/data-model' +import { set } from 'lodash' export default function ModelView() { const { streamId } = useParams() @@ -34,6 +27,7 @@ export default function ModelView() { const session = useSession() const [modelStream, setModelStream] = useState() + const [indexing, setIndexing] = useState(false) const fetchModelInfo = useCallback( async (streamId: string) => { @@ -111,6 +105,26 @@ export default function ModelView() { [streamId, dapps, addModelToDapp, addModelToCollection] ) + const startIndex = useCallback(async () => { + if (!streamId) return + try { + 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) + } + await fetchModelInfo(streamId) + } catch (error) { + console.error(error) + } finally { + setIndexing(false) + } + }, [streamId, network, session, fetchModelInfo]) + useEffect(() => { if (!streamId) return fetchModelInfo(streamId) @@ -127,27 +141,21 @@ export default function ModelView() { }) }, [dapps]) + const isIndexed = useMemo(() => { + return !!modelStream?.isIndexed + }, [modelStream]) + + const disabledKeys = useMemo(() => { + if (isIndexed) return [] + return ['Instance', 'Playground'] + }, [isIndexed]) + return ( - +
{modelStream?.streamContent?.name} - {/* - */} + {!isIndexed && } Model Definition @@ -155,17 +163,16 @@ export default function ModelView() { Model Playground
- - - - - - - - - - - + + + + + + + + + + ) } @@ -175,7 +182,7 @@ const ToolsBox = styled.div` padding-right: 20px; display: flex; align-items: center; - justify-content: space-between; + gap: 20px; > span { font-style: italic; @@ -185,6 +192,28 @@ const ToolsBox = styled.div` color: #ffffff; } + > button { + cursor: pointer; + border: none; + outline: none; + padding: 0 15px; + height: 36px; + border-radius: 100px; + background: #14171a; + font-size: 14px; + line-height: 20px; + text-align: center; + color: #a0aec0; + text-transform: capitalize; + background: #718096; + color: #14171a; + background: #ffffff; + font-family: Rubik; + font-style: normal; + font-weight: 500; + line-height: normal; + } + .add-to-dapp { border: none; border-radius: 100px; diff --git a/packages/client/scan/src/container/Models.tsx b/packages/client/scan/src/container/Models.tsx index 9d385a19..49cdfca5 100644 --- a/packages/client/scan/src/container/Models.tsx +++ b/packages/client/scan/src/container/Models.tsx @@ -167,19 +167,11 @@ export default function ModelsPage() { {!isMobile ? ( - <> - {(item.isIndexed && ( - - {item.stream_content.name} - - )) || ( -
- {item.stream_content.name} -
- )} - + + {item.stream_content.name} + ) : ( item.stream_content.name )} diff --git a/packages/client/scan/src/index.tsx b/packages/client/scan/src/index.tsx index 273cf430..a06462e8 100644 --- a/packages/client/scan/src/index.tsx +++ b/packages/client/scan/src/index.tsx @@ -5,6 +5,7 @@ import { BrowserRouter } from 'react-router-dom' import './styles/index.css' import './styles/select.css' import './styles/tab.css' +import './styles/prism-vsc-dark-plus.css' import App from './App' import reportWebVitals from './reportWebVitals' diff --git a/packages/client/scan/src/setupProxy.js b/packages/client/scan/src/setupProxy.js index 81c51960..32e779f4 100644 --- a/packages/client/scan/src/setupProxy.js +++ b/packages/client/scan/src/setupProxy.js @@ -5,42 +5,42 @@ module.exports = function (app) { .use( '/api', createProxyMiddleware({ - target: 'https://ceramic-private-clay.3boxlabs.com', + target: 'https://gcp-ceramic-testnet-dev.s3.xyz', changeOrigin: true, }) ) .use( '/streams', createProxyMiddleware({ - target: 'https://cscan.onrender.com/', + target: 'https://api-dev.s3.xyz/', changeOrigin: true, }) ) .use( '/models', createProxyMiddleware({ - target: 'https://cscan.onrender.com/', + target: 'https://api-dev.s3.xyz/', changeOrigin: true, }) ) .use( '/testnet', createProxyMiddleware({ - target: 'https://cscan.onrender.com/', + target: 'https://api-dev.s3.xyz/', changeOrigin: true, }) ) .use( '/MAINNET', createProxyMiddleware({ - target: 'https://cscan.onrender.com/', + target: 'https://api-dev.s3.xyz/', changeOrigin: true, }) ) // .use( // "/model", // createProxyMiddleware({ - // target: "https://ceramic-private-clay.3boxlabs.com", + // target: "https://gcp-ceramic-testnet-dev.s3.xyz", // changeOrigin: true, // }) // ); diff --git a/packages/client/scan/src/styles/prism-vsc-dark-plus.css b/packages/client/scan/src/styles/prism-vsc-dark-plus.css new file mode 100644 index 00000000..b4753b89 --- /dev/null +++ b/packages/client/scan/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; +} diff --git a/packages/client/scan/src/styles/tab.css b/packages/client/scan/src/styles/tab.css index 6bf44724..fd2fcc07 100644 --- a/packages/client/scan/src/styles/tab.css +++ b/packages/client/scan/src/styles/tab.css @@ -61,6 +61,7 @@ border-right: 3px solid var(--border-color, transparent); } } + } .dapp-title-bar .react-aria-TabList { @@ -93,13 +94,16 @@ color: var(--text-color-hover); } + + &[aria-selected='true'] { --border-color: var(--highlight-color); color: var(--text-color-selected); } &[aria-disabled] { - color: var(--text-color-disabled); + cursor: not-allowed; + color: #718096; &[aria-selected='true'] { --border-color: var(--text-color-disabled); }