diff --git a/.docker/dev.docker.env b/.docker/dev.docker.env
index d6844696..0c5e2fba 100644
--- a/.docker/dev.docker.env
+++ b/.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
diff --git a/.gitmodules b/.gitmodules
index 3b8f37d7..45eeab27 100644
--- a/.gitmodules
+++ b/.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
diff --git a/cw_docs b/cw_docs
new file mode 160000
index 00000000..11aa2c3e
--- /dev/null
+++ b/cw_docs
@@ -0,0 +1 @@
+Subproject commit 11aa2c3e743fce64e97eae82a17a8416fb8ce833
diff --git a/docker-compose.yml b/docker-compose.yml
index a1341d1f..bb5337f6 100644
--- a/docker-compose.yml
+++ b/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
diff --git a/ink-compiler-be b/ink-compiler-be
index bc79e834..73fded08 160000
--- a/ink-compiler-be
+++ b/ink-compiler-be
@@ -1 +1 @@
-Subproject commit bc79e8345f0519be799a37105dd58d24203a781f
+Subproject commit 73fded08898b7c7eadab9c4c0788f2bbb5e964d4
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index 3f6d791f..1dde83ec 100644
--- a/src/constants/routes.ts
+++ b/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
diff --git a/src/domain/Metadata.ts b/src/domain/Metadata.ts
index 9f7ff215..7ada0bb4 100644
--- a/src/domain/Metadata.ts
+++ b/src/domain/Metadata.ts
@@ -1,3 +1,4 @@
+
import { Abi, AbiMessage } from '@/services/substrate/types'
export interface Validation {
diff --git a/src/pages/contract-detail/contract-detail.tsx b/src/pages/contract-detail/contract-detail.tsx
new file mode 100644
index 00000000..f522d95e
--- /dev/null
+++ b/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 (
+ <>
+
+
+ {userContract.name}
+
+
+ modalBehaviour.openModal()}
+ >
+
+
+ Added {''}
+
+
+ {isoToReadableDate(userContract.date)}
+
+
+
+
+
+ {userContract.address}
+
+
+
+
+
+ TYPE
+
+
+ {userContract.type}
+
+
+
+
+ NETWORK
+
+
+
+
+
+
+
+ LANGUAGE
+
+
+ {abi?.source.language}
+
+
+
+
+ Actions
+
+
+ --
+
+
+
+ {accountConnected ? (
+
+ ) : (
+
+ )}
+
+ )
+}
diff --git a/src/view/ContractDetailsInteraction/index.tsx b/src/view/ContractDetailsInteraction/index.tsx
new file mode 100644
index 00000000..41c28c36
--- /dev/null
+++ b/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 (
+ <>
+
+
+ <>
+ {/* {type} */}
+ {isReadContract ? (
+ <>
+
+ Learn more about your contract 🔁
+
+
+ Let'start to work with your contract displaying each
+ method.
+
+
+ ) : (
+ <>
+
+ Interact with your contract 🔁
+
+
+ Let's start to work with your contract doing different
+ querys.
+
+
+ )}
+
+
+
+
+
+ )
+}