Cw docs

.docker/dev.docker.env

@@ -4,3 +4,4 @@ DB_EXTERNAL_PORT=27027
 BACKEND_EXTERNAL_PORT=8000
 WEB_EXTERNAL_PORT=3000
 WEB_ENVIRONMENT="production"
+DOC_EXTERNAL_PORT=3020

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "ink-compiler-be"]
 	path = ink-compiler-be
 	url = https://github.com/protofire/ink-compiler-be.git
+[submodule "cw_docs"]
+	path = cw_docs
+	url = https://github.com/protofire/cw_docs

docker-compose.yml

@@ -34,6 +34,7 @@ services:
       - ${BACKEND_EXTERNAL_PORT}:8000
     environment:
       - MONGOURI=mongodb://mongodb:27017
+      - NEXT_PUBLIC_DOCUMENTATION_URL=http://localhost:${DOC_EXTERNAL_PORT}
     networks:
       - polkadot-wizard
     depends_on:
@@ -49,3 +50,12 @@ services:
     image: mongo:5.0.16
     networks:
       - polkadot-wizard
+  doc:
+    container_name: ${CONTAINER_BASE}_doc
+    build:
+      context: ./cw_docs
+      dockerfile: ./Dockerfile
+    ports:
+      - ${DOC_EXTERNAL_PORT}:3000
+    networks:
+      - polkadot-wizard

src/constants/routes.ts

@@ -4,7 +4,9 @@ export const ROUTES = {
   CONTRACTS: '/contracts',
   CUSTOM: '/custom-contract',
   CONTRACTDETAIL: '/contract-detail',
-  DOCUMENTATION: 'https://contractwizard-docs.vercel.app/',
+  DOCUMENTATION:
+    process.env.NEXT_PUBLIC_DOCUMENTATION_URL ||
+    'https://contractwizard-docs.vercel.app/',
   TELEGRAM: 'https://t.me/+u5M4K7vKfbQxZjMx',
   GITHUB: 'https://github.com/protofire/polkadot-contract-wizard"'
 } as const

src/domain/Metadata.ts

@@ -1,3 +1,4 @@
+
 import { Abi, AbiMessage } from '@/services/substrate/types'
 
 export interface Validation {

src/pages/contract-detail/contract-detail.tsx

@@ -0,0 +1,144 @@
+import React from 'react'
+import { CopyToClipboardButton } from '@/view/components/CopyButton'
+import { MonoTypography } from '@/view/components/MonoTypography'
+import { Box, Typography, Stack, Tooltip } from '@mui/material'
+import { DefaultToolTipButton } from '@/view/components/DefaultTooltipButton'
+import EditIcon from '@mui/icons-material/Edit'
+import ShareIcon from '@mui/icons-material/Share'
+import DownloadIcon from '@mui/icons-material/Download'
+import { getChain } from '@/constants/chains'
+import NetworkBadge from '@/view/components/NetworkBadge'
+import { UseModalBehaviour } from '@/hooks/useModalBehaviour'
+import { UserContractDetails } from '@/domain'
+import { isoDate, isoToReadableDate } from '@/utils/formatString'
+import { useNetworkAccountsContext } from '@/context/NetworkAccountsContext'
+import { ContractDetailsInteraction } from '@/view/ContractDetailsInteraction'
+import { ConnectWalletSection } from '@/view/components/ConnectWalletSection'
+
+type ContractTabType = 'Read Contract' | 'Write Contract'
+const types: ContractTabType[] = ['Read Contract', 'Write Contract']
+
+interface Props {
+  modalBehaviour: UseModalBehaviour
+  userContract: UserContractDetails
+}
+
+interface AbiSource {
+  source: { language: string }
+}
+
+export default function ContractDetail({
+  modalBehaviour,
+  userContract
+}: Props) {
+  const [type, setType] = React.useState(types[0])
+  const { accountConnected } = useNetworkAccountsContext()
+  if (!userContract) {
+    return null
+  }
+
+  const chainDetails = getChain(userContract.network)
+  const isReadContract = type === 'Read Contract'
+  const abi = userContract.abi as AbiSource | undefined
+
+  const handleChange = (newValue: number) => {
+    setType(types[newValue])
+  }
+
+  return (
+    <>
+      <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" justifyContent="space-between">
+          <Typography variant="h2">{userContract.name}</Typography>
+          <DefaultToolTipButton
+            id="edit-contract-address"
+            sx={{ marginLeft: '0.5rem', color: 'white' }}
+            title="Edit"
+            Icon={EditIcon}
+          ></DefaultToolTipButton>
+          <DefaultToolTipButton
+            id="download-contract-address"
+            sx={{ marginLeft: '0.5rem', color: 'white' }}
+            title="Download metadata"
+            Icon={DownloadIcon}
+          ></DefaultToolTipButton>
+          <DefaultToolTipButton
+            id="share-contract-address"
+            sx={{ marginLeft: '0.5rem', color: 'white' }}
+            title="Share"
+            Icon={ShareIcon}
+            onClick={() => modalBehaviour.openModal()}
+          ></DefaultToolTipButton>
+        </Stack>
+        <Typography variant="body1">
+          Added {''}
+          <Tooltip placement="top" title={isoDate(userContract.date)}>
+            <Typography variant="body1" component="span">
+              {isoToReadableDate(userContract.date)}
+            </Typography>
+          </Tooltip>
+        </Typography>
+      </Stack>
+      <Stack direction="row">
+        <MonoTypography>{userContract.address}</MonoTypography>
+        <CopyToClipboardButton
+          id="copy-contract-address"
+          sx={{ marginLeft: '0.5rem' }}
+          data={userContract.address}
+        />
+      </Stack>
+      <Box
+        display="flex"
+        flexDirection="row"
+        justifyContent="space-between"
+        sx={{ margin: '2em 0 3rem' }}
+      >
+        <Box display="flex" flexDirection="column">
+          <Typography variant="caption" align="left">
+            TYPE
+          </Typography>
+          <Typography variant="h5" align="left">
+            {userContract.type}
+          </Typography>
+        </Box>
+        <Box display="flex" flexDirection="column">
+          <Typography variant="caption" align="left">
+            NETWORK
+          </Typography>
+          <Typography variant="h5" align="left">
+            <NetworkBadge
+              name={chainDetails.name}
+              logo={chainDetails.logo.src}
+              logoSize={{ width: 20, height: 20 }}
+              description={chainDetails.logo.alt}
+              textTooltip="This network is the one that the contract has been deployed."
+            />
+          </Typography>
+        </Box>
+        <Box display="flex" flexDirection="column">
+          <Typography variant="caption" align="left">
+            LANGUAGE
+          </Typography>
+          <Typography variant="h5" align="left">
+            {abi?.source.language}
+          </Typography>
+        </Box>
+        <Box display="flex" flexDirection="column">
+          <Typography variant="caption" align="left">
+            Actions
+          </Typography>
+          <Typography variant="h5" align="left">
+            --
+          </Typography>
+        </Box>
+      </Box>
+      {accountConnected ? (
+        <ContractDetailsInteraction userContract={userContract} />
+      ) : (
+        <ConnectWalletSection
+          text={'You need to connect a wallet to interact with this contract.'}
+        />
+      )}
+    </>
+  )
+}

src/view/ContractDetailsInteraction/index.tsx

@@ -0,0 +1,86 @@
+import { Box, Typography } from '@mui/material'
+import React from 'react'
+import { UserContractDetails } from '@/domain'
+import BasicTabs from '@/components/Tabs'
+import SimpleAccordion from '@/components/Accordion'
+
+type ContractTabType = 'Read Contract' | 'Write Contract'
+const types: ContractTabType[] = ['Read Contract', 'Write Contract']
+
+interface Props {
+  userContract: UserContractDetails
+}
+
+export function ContractDetailsInteraction({ userContract }: Props) {
+  const [type, setType] = React.useState(types[0])
+  const isReadContract = type === 'Read Contract'
+
+  const handleChange = (newValue: number) => {
+    setType(types[newValue])
+  }
+
+  return (
+    <>
+      <Box sx={{ width: '100%' }}>
+        <BasicTabs
+          options={['Read Contract', 'Write Contract']}
+          onChange={handleChange}
+        >
+          <>
+            {/* <Typography variant="h4">{type}</Typography> */}
+            {isReadContract ? (
+              <>
+                <Typography variant="h4">
+                  Learn more about your contract 🔁
+                </Typography>
+                <Typography variant="body1">
+                  Let&apos;start to work with your contract displaying each
+                  method.
+                </Typography>
+              </>
+            ) : (
+              <>
+                <Typography variant="h4">
+                  Interact with your contract 🔁
+                </Typography>
+                <Typography variant="body1">
+                  Let&apos;s start to work with your contract doing different
+                  querys.
+                </Typography>
+              </>
+            )}
+            <SimpleAccordion
+              elements={
+                isReadContract
+                  ? [
+                      {
+                        tittle: 'psp22::balance',
+                        content: 'text balance',
+                        id: '1'
+                      },
+                      {
+                        tittle: 'psp22::owners',
+                        content: 'text owners',
+                        id: '2'
+                      }
+                    ]
+                  : [
+                      {
+                        tittle: 'psp22::approve',
+                        content: 'Form approve',
+                        id: '1'
+                      },
+                      {
+                        tittle: 'psp22::tranfer',
+                        content: 'Form transfer',
+                        id: '2'
+                      }
+                    ]
+              }
+            />
+          </>
+        </BasicTabs>
+      </Box>
+    </>
+  )
+}