Merge pull request #18 from dappforce/fix/dep-error

Fix Query Error

src/components/Code/Code.tsx

@@ -1,13 +1,16 @@
-import { PlayArrow } from "@mui/icons-material"
-import { Box, Button, CircularProgress } from "@mui/material"
-import runPlayground from "../../playground"
-import { useAppDispatch, useAppSelector } from "../../redux/hooks"
-import { selectLoading, setTabLoading, updateTabResult } from "../../redux/slice"
+import { PlayArrow } from '@mui/icons-material'
+import { Button, CircularProgress } from '@mui/material'
+import runPlayground from '../../playground'
+import { useAppDispatch, useAppSelector } from '../../redux/hooks'
+import {
+  selectLoading,
+  setTabLoading,
+  updateTabResult,
+} from '../../redux/slice'
 import dynamic from 'next/dynamic'
-import useNetworkManager from "../../networkManager"
-import { testAuthKeyForCrust } from "../../constants"
-import { CodeTabs } from "./CodeTabs"
-
+import useNetworkManager from '../../networkManager'
+import { testAuthKeyForCrust } from '../../constants'
+import { CodeTabs } from './CodeTabs'
 
 const CodeEditor = dynamic(import('./Editor'), { ssr: false })
 
@@ -22,12 +25,23 @@ const RunButton = ({ runCode }: RunCodeProps) => {
 
   const onBtnClick = async () => runCode(snippet)
 
-  return <Button disabled={loading} onClick={onBtnClick} sx={{ paddingLeft: 1, color: '#fff' }} variant="contained" color="primary">
-    {loading ? <CircularProgress size={20} sx={{ marginRight: 1 }} /> : <PlayArrow />}Run
-  </Button>
+  return (
+    <Button
+      disabled={loading}
+      onClick={onBtnClick}
+      sx={{ paddingLeft: 1, color: '#fff' }}
+      variant='contained'
+      color='primary'>
+      {loading ? (
+        <CircularProgress size={20} sx={{ marginRight: 1 }} />
+      ) : (
+        <PlayArrow />
+      )}
+      Run
+    </Button>
+  )
 }
 
-
 const CodeWindow = () => {
   const dispatch = useAppDispatch()
   const selectedNetwork = useAppSelector((state) => state.code.selectedNetwork)
@@ -36,38 +50,51 @@ const CodeWindow = () => {
 
   const logToResponseWindow = (log: any) => {
     const status = log.status ?? ''
-    const progressStatus = log.id != null || status.includes("Finalised")
+    const progressStatus = log.id != null || status.includes('Finalised')
     dispatch(setTabLoading({ index: selectedTab, loading: !progressStatus }))
     dispatch(updateTabResult({ index: selectedTab, data: log }))
   }
 
   const runCode = async (code: string) => {
-    if (!isApiReady || api == undefined) return;
+    if (!isApiReady || api == undefined) return
 
     const selectedNetworkApi = api.get(selectedNetwork)
 
-    if (selectedNetworkApi == undefined) return;
-
+    if (selectedNetworkApi == undefined) return
 
     dispatch(setTabLoading({ index: selectedTab, loading: true }))
     if (selectedNetwork === 'testnet' || selectedNetwork === 'xsocial') {
       selectedNetworkApi.ipfs.setWriteHeaders({
-        authorization: 'Basic ' + testAuthKeyForCrust
+        authorization: 'Basic ' + testAuthKeyForCrust,
       })
     }
 
-    const res = await runPlayground(code, selectedNetworkApi, logToResponseWindow)
+    const res = await runPlayground(
+      code,
+      selectedNetworkApi,
+      logToResponseWindow
+    )
     dispatch(updateTabResult({ index: selectedTab, data: res }))
     dispatch(setTabLoading({ index: selectedTab, loading: false }))
   }
 
-  return <div className='displayArea'>
-    <div style={{ display: 'flex', flex: '0 1', flexDirection: 'row', alignItems: 'center', marginBottom: '8.25px', minHeight: '36px' }}>
-      <CodeTabs />
-      <RunButton runCode={runCode} />
+  return (
+    <div className='displayArea'>
+      <div
+        style={{
+          display: 'flex',
+          flex: '0 1',
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginBottom: '8.25px',
+          minHeight: '36px',
+        }}>
+        <CodeTabs />
+        <RunButton runCode={runCode} />
+      </div>
+      <CodeEditor runCode={runCode} />
     </div>
-    <CodeEditor runCode={runCode} />
-  </div>
+  )
 }
 
-export default CodeWindow
+export default CodeWindow

src/components/Output/Output.tsx

@@ -1,25 +1,49 @@
-import { Box, Typography } from "@mui/material"
+import { Box, Typography } from '@mui/material'
 
-import { useAppSelector } from "../../redux/hooks"
+import { useAppSelector } from '../../redux/hooks'
 import dynamic from 'next/dynamic'
-import { selectResponse } from "../../redux/slice"
+import { selectResponse } from '../../redux/slice'
 
 const ReactJson = dynamic(import('react-json-view'), { ssr: false })
 
 const OutputWindow = () => {
-
   const response = useAppSelector((state) => selectResponse(state))
 
-  return <div className='output'>
-    <div style={{ display: 'flex', flex: '0 1', flexDirection: 'row', alignItems: 'center', marginBottom: '8.25px', minHeight: '34px' }}>
-      <Typography sx={{ mt: 0 }} variant="caption" display="block">
-        Result
-      </Typography>
+  return (
+    <div className='output'>
+      <div
+        style={{
+          display: 'flex',
+          flex: '0 1',
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginBottom: '8.25px',
+          minHeight: '34px',
+        }}>
+        <Typography sx={{ mt: 0 }} variant='caption' display='block'>
+          Result
+        </Typography>
+      </div>
+      <Box className='output-box'>
+        <ReactJson
+          defaultValue={{}}
+          collapsed={false}
+          displayDataTypes={false}
+          iconStyle='triangle'
+          style={{
+            height: '100%',
+            width: '100%',
+            backgroundColor: '#1E1E1E',
+            fontSize: '14px',
+            fontFamily:
+              "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace",
+          }}
+          theme='tomorrow'
+          src={response ? JSON.parse(JSON.stringify(response)) : undefined}
+        />
+      </Box>
     </div>
-    <Box className='output-box'>
-      <ReactJson defaultValue={{}} collapsed={false} displayDataTypes={false} iconStyle="triangle" style={{ height: '100%', width: '100%', backgroundColor: '#1E1E1E', fontSize: '14px', fontFamily: 'Monaco' }} theme="tomorrow" src={response ? JSON.parse(JSON.stringify(response)) : undefined} />
-    </Box>
-  </div>
+  )
 }
 
-export default OutputWindow
+export default OutputWindow

yarn.lock

@@ -1196,7 +1196,7 @@
     "@polkadot/api" latest
     lodash.camelcase "^4.3.0"
 
-"@subsocial/utils@^0.8.14":
+"@subsocial/utils@^0.8.14", "@subsocial/utils@latest":
   version "0.8.14"
   resolved "https://registry.yarnpkg.com/@subsocial/utils/-/utils-0.8.14.tgz#40a1e29404dced28236d412f941a5a26821dcc9e"
   integrity sha512-yblvEQ2v5aqGr+aK/kMMqYFsnLqXq3fBDAM55mpfPoBNrCsmXH1AAEN2LGeYRnBV0lfO6FwZEpW9CfBES1AujA==
@@ -1219,28 +1219,6 @@
     strip-markdown "^4.0.0"
     tweetnacl "^1.0.3"
 
-"@subsocial/utils@latest":
-  version "0.7.13"
-  resolved "https://registry.yarnpkg.com/@subsocial/utils/-/utils-0.7.13.tgz#546abef2c4fa5e1f3d8e3de3ee69fb107f977309"
-  integrity sha512-HNHV+ZG/1yHgi4JcOLAWW0p4oaa6JCrv5///DzUuJbhpLjR7k6gKnF+ReXqEp9hFJggH4WCWPtNUCODD1FxlSA==
-  dependencies:
-    "@polkadot/util-crypto" latest
-    "@sindresorhus/slugify" "^1.1.0"
-    autolinker "^4.0.0"
-    bignumber.js "^9.0.1"
-    bn.js "^5.1.1"
-    chalk "^3.0.0"
-    dayjs "^1.10.7"
-    lodash.isempty "^4.4.0"
-    lodash.memoize "^4.1.2"
-    lodash.truncate "^4.4.2"
-    loglevel "^1.7.0"
-    loglevel-plugin-prefix "^0.8.4"
-    remark "^13.0.0"
-    remark-gfm "^1.0.0"
-    remark-html "^13.0.1"
-    strip-markdown "^4.0.0"
-
 "@substrate/connect-extension-protocol@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@substrate/connect-extension-protocol/-/connect-extension-protocol-1.0.1.tgz#fa5738039586c648013caa6a0c95c43265dbe77d"