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

Dashboard dev

packages/client/dashboard/.env.example

@@ -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

packages/client/dashboard/package.json

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

packages/client/dashboard/public/index.html

@@ -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';

packages/client/dashboard/src/App.tsx

@@ -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'
@@ -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)
 
@@ -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 />
@@ -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>
   )
 }

packages/client/dashboard/src/api/index.ts

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

packages/client/dashboard/src/components/CompositeDefinition.tsx

@@ -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,
@@ -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>
         )}
@@ -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>
         )}
@@ -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;
@@ -174,6 +177,10 @@ const ResultBox = styled.div`
     color: #718096;
     overflow: scroll;
     width: 100%;
+
+    > div {
+      width: fit-content;
+    }
   }
 
   button {

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;
+  }
+`

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

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

packages/client/dashboard/src/components/DappTitleEditor.tsx

@@ -58,6 +58,7 @@ const TitleBox = styled.div`
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
+      max-width: 800px;
 
       padding: 0 5px 0 0;
     }