Skip to content

Commit

Permalink
Merge pull request #155 from us3r-network/dashboard-dev
Browse files Browse the repository at this point in the history 
Dashboard dev
  • Loading branch information
@sin-bufan
sin-bufan authored Jul 6, 2023
2 parents 47d0894 + 4dfedde commit 4d068da
Show file tree
Hide file tree
Showing 29 changed files with 1,806 additions and 67 deletions.
2 changes: 2 additions & 0 deletions packages/client/dashboard/.env.example
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,5 @@ REACT_APP_DOCS_URL=https://docs.userscan.app
REACT_APP_API_BASE_URL=https://api-test.s3.xyz

REACT_APP_S3_SCAN_URL=https://scan-dev.s3.xyz

REACT_APP_WALLET_CONNECT_PROJECT_ID = c652d0148879353d7e965d7f6f361e59
12 changes: 11 additions & 1 deletion packages/client/dashboard/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,42 @@
"@composedb/devtools": "0.4",
"@graphiql/plugin-explorer": "^0.1.20",
"@monaco-editor/react": "^4.5.1",
"@rjsf/core": "^5.8.2",
"@rjsf/utils": "^5.8.2",
"@rjsf/validator-ajv8": "^5.8.2",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/ejs": "^3.1.2",
"@types/file-saver": "^2.0.5",
"@types/jest": "^27.0.1",
"@types/lodash": "^4.14.195",
"@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.4",
"@us3r-network/auth-with-rainbowkit": "^0.1.8",
"@us3r-network/data-model": "^0.2.1",
"@us3r-network/profile": "^0.4.11",
"camelcase": "^7.0.1",
"dayjs": "^1.11.7",
"ejs": "^3.1.9",
"file-saver": "^2.0.5",
"graphiql": "^2.4.7",
"graphql-editor": "6.3.2",
"json-bigint-patch": "^0.0.8",
"lodash": "^4.17.21",
"monaco-editor": "^0.38.0",
"prism-react-renderer": "^2.0.6",
"prismjs": "^1.29.0",
"react": "^18.2.0",
"react-aria-components": "^1.0.0-alpha.4",
"react-dom": "^18.2.0",
"react-infinite-scroll-component": "^6.1.0",
"react-router-dom": "^6.11.2",
"react-scripts": "5.0.1",
"react-toastify": "^9.1.3",
"styled-components": "^5.3.11",
"typescript": "^4.4.2",
"use-url-search-params": "^2.5.1",
Expand Down
1 change: 1 addition & 0 deletions packages/client/dashboard/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>%REACT_APP_NAME%</title>

<style>
@font-face {
font-family: 'Rubik';
Expand Down
21 changes: 19 additions & 2 deletions packages/client/dashboard/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useAppCtx } from './context/AppCtx'
import MyDapps from './container/MyDapps'
import NoMatch from './container/NoMatch'
import CeramicProvider from './context/AppCtx'
import { CERAMIC_TESTNET_HOST } from './constants'
import { CERAMIC_TESTNET_HOST, WALLET_CONNECT_PROJECT_ID } from './constants'
import DappHome from './container/DappHome'
import DappCreate from './container/DappCreate'
import Header from './components/Header'
Expand All @@ -26,6 +26,8 @@ import Components from './container/Components'
import { useState } from 'react'
import ModelList from './components/ModelList'
import { DappComposite, ModelStream } from './types'
import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.min.css'

dayjs.extend(relativeTime)

Expand Down Expand Up @@ -55,7 +57,10 @@ function Routers() {

export default function App() {
return (
<Us3rAuthWithRainbowkitProvider>
<Us3rAuthWithRainbowkitProvider
projectId={WALLET_CONNECT_PROJECT_ID}
appName="S3 Dashboard"
>
<ProfileStateProvider ceramicHost={CERAMIC_TESTNET_HOST}>
<CeramicProvider>
<Routers />
Expand All @@ -72,6 +77,18 @@ function Layout() {
<AppContainer>
<Outlet />
</AppContainer>
<ToastContainer
position="top-right"
autoClose={3000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="dark"
/>
</div>
)
}
Expand Down
23 changes: 22 additions & 1 deletion packages/client/dashboard/src/api/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import {
ModelMid,
ModelStream,
} from '../types'
import { Network } from '../components/Selector/EnumSelect'
import {
GraphqlGenType,
GraphqlGenTypeServer,
Network,
} from '../components/Selector/EnumSelect'

export const PageSize = 50

Expand Down Expand Up @@ -257,3 +261,20 @@ export function deleteDappComposites({
},
})
}

export function getModelSDK({
network,
modelId,
type,
}: {
network: Network
modelId: string
type: GraphqlGenType
}): AxiosPromise<ApiResp<any>> {
let host = APP_API_URL
const serverType = GraphqlGenTypeServer[type]
return axios({
url: host + `/models/${modelId}/sdk?network=${network}&type=${serverType}`,
method: 'GET',
})
}
39 changes: 23 additions & 16 deletions packages/client/dashboard/src/components/CompositeDefinition.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import FileSaver from 'file-saver'
import { GraphQLEditor, PassedSchema } from 'graphql-editor'
import { DappComposite } from '../types'
import { schemas } from '../utils/composedb-types/schemas'
import { Code } from './ModelSDK'

export default function CompositeDefinition({
composite,
Expand Down Expand Up @@ -57,11 +58,14 @@ export default function CompositeDefinition({
</button>
</div>
<div className="result-text">
<pre>
<code>
{JSON.stringify(JSON.parse(composite.composite), null, 2)}
</code>
</pre>
<Code
name="composite"
content={JSON.stringify(
JSON.parse(composite.composite),
null,
2
)}
/>
</div>
</div>
)}
Expand All @@ -82,15 +86,14 @@ export default function CompositeDefinition({
</button>
</div>
<div className="result-text">
<pre>
<code>
{JSON.stringify(
JSON.parse(composite.runtimeDefinition),
null,
2
)}
</code>
</pre>
<Code
name="runtimeDefinition"
content={JSON.stringify(
JSON.parse(composite.runtimeDefinition),
null,
2
)}
/>
</div>
</div>
)}
Expand Down Expand Up @@ -134,18 +137,18 @@ const ResultBox = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
> div {
background: #1b1e23;
border: 1px solid #39424c;
border-radius: 20px;
overflow: hidden;
}
div {
margin: 20px 0px;
padding: 10px;
box-sizing: border-box;
background-color: #1a1a1c;
.title {
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
Expand Down Expand Up @@ -174,6 +177,10 @@ const ResultBox = styled.div`
color: #718096;
overflow: scroll;
width: 100%;
> div {
width: fit-content;
}
}
button {
Expand Down
1 change: 1 addition & 0 deletions packages/client/dashboard/src/components/DappTitleEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const TitleBox = styled.div`
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 800px;
padding: 0 5px 0 0;
}
Expand Down
25 changes: 15 additions & 10 deletions packages/client/dashboard/src/components/Definition.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { schemas } from '../utils/composedb-types/schemas'
import { AxiosError } from 'axios'
import { Network } from './Selector/EnumSelect'
import useSelectedDapp from '../hooks/useSelectedDapp'
import { Code } from './ModelSDK'

export default function Definition({ streamId }: { streamId: string }) {
const [modelData, setModelData] = useState<ModeQueryResult>()
Expand Down Expand Up @@ -120,9 +121,10 @@ export default function Definition({ streamId }: { streamId: string }) {
</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>
)}
Expand All @@ -143,11 +145,10 @@ export default function Definition({ streamId }: { streamId: string }) {
</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>
)}
Expand All @@ -173,18 +174,18 @@ const ResultBox = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
> div {
background: #1b1e23;
border: 1px solid #39424c;
border-radius: 20px;
overflow: hidden;
}
div {
margin: 20px 0px;
padding: 10px;
box-sizing: border-box;
background-color: #1a1a1c;
.title {
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
Expand Down Expand Up @@ -213,6 +214,10 @@ const ResultBox = styled.div`
color: #718096;
overflow: scroll;
width: 100%;
margin-top: 0;
> div {
width: fit-content;
}
}
button {
Expand Down
1 change: 1 addition & 0 deletions packages/client/dashboard/src/components/EditDappInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ export default function EditDappInfo({
setValue={setNetwork}
labelText="Network:"
values={Network}
isDisabled={true}
/>
</div>

Expand Down
2 changes: 1 addition & 1 deletion packages/client/dashboard/src/components/Icons/PlusCircleIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function PlusCircleIcon() {
>
<path
d="M10.0003 6.66602V13.3327M6.66699 9.99935H13.3337M18.3337 9.99935C18.3337 14.6017 14.6027 18.3327 10.0003 18.3327C5.39795 18.3327 1.66699 14.6017 1.66699 9.99935C1.66699 5.39698 5.39795 1.66602 10.0003 1.66602C14.6027 1.66602 18.3337 5.39698 18.3337 9.99935Z"
stroke="#718096"
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
/>
Expand Down
Loading

0 comments on commit 4d068da

Please sign in to comment.