[Epic] Custom contracts

.env.example

@@ -1,4 +1,4 @@
-NEXT_PUBLIC_DOMAIN=""
+NEXT_PUBLIC_DOMAIN="http://web:3000/"
 NEXT_PUBLIC_BACKEND_API="http://compiler-be:8000/"
 
 NEXT_PUBLIC_PROVIDER_DEFAULT_SOCKET="wss://rococo-contracts-rpc.polkadot.io"

next.config.js

@@ -11,9 +11,12 @@ const nextConfig = {
   publicRuntimeConfig: {
     version,
   },
+  env: {
+    NEXT_PUBLIC_DOMAIN: process.env.VERCEL_URL,
+  },
   async rewrites() {
     return [{ source: '/api/:path*', destination: backendApi }]
-  }
+  },
 }
 
 module.exports = nextConfig

package.json

@@ -40,6 +40,7 @@
     "react-code-blocks": "^0.0.9-0",
     "react-device-detect": "^2.2.2",
     "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-element-to-jsx-string": "^15.0.0",
     "react-syntax-highlighter": "^15.5.0",
     "semver": "^7.3.8",

src/constants/chains.ts

@@ -5,7 +5,7 @@ import {
   RococoContractsTestnet,
   ShibuyaTestnet,
   ShidenKusama
-} from '@/infrastructure/useink/chains'
+} from '@/services/useink/chains'
 import { ArrayOneOrMore, ChainExtended } from '@/types'
 import { CHAINS_IMG_PATH } from './images'
 

src/constants/config.ts

@@ -1,4 +1,4 @@
-import { Chain } from '@/infrastructure/useink/chains'
+import { Chain } from '@/services/useink/chains'
 
 export const IS_PRODUCTION = process.env.NODE_ENV === ('production' as string)
 export const IS_DEVELOPMENT = process.env.NODE_ENV === ('development' as string)
@@ -27,7 +27,11 @@ const backendRouterApi = {
     method: 'POST'
   },
   listDeployment: {
-    pathName: 'deployments?user_address=',
+    pathName: 'deployments',
+    method: 'GET'
+  },
+  findDeployment: {
+    pathName: 'deployment',
     method: 'GET'
   },
   createCompileContract: {
@@ -37,6 +41,14 @@ const backendRouterApi = {
   searchCompileContract: {
     pathName: 'contract?code_id=',
     method: 'GET'
+  },
+  updateDeployment: {
+    pathName: 'deployments',
+    method: 'PATCH'
+  },
+  version: {
+    pathName: 'version',
+    method: 'GET'
   }
 }
 
@@ -51,19 +63,23 @@ export interface BackendApiConfig {
   routes: RouteApi
 }
 
-/** URL of the API will be rewritten in next.config */
-const apiBaseUrlPath = '/api'
-
-export const BACKEND_API: BackendApiConfig = {
-  basePath: apiBaseUrlPath,
-  routes: Object.keys(backendRouterApi).reduce((acc, key) => {
-    const currentRoute = backendRouterApi[key as BackendRoutesApi]
-    return {
-      ...acc,
-      [key]: {
-        method: currentRoute.method,
-        url: `${apiBaseUrlPath}/${currentRoute.pathName}`
+export function getBackendApiConfig(basePath: string): BackendApiConfig {
+  return {
+    basePath,
+    routes: Object.keys(backendRouterApi).reduce((acc, key) => {
+      const currentRoute = backendRouterApi[key as BackendRoutesApi]
+      return {
+        ...acc,
+        [key]: {
+          method: currentRoute.method,
+          url: `${basePath}/${currentRoute.pathName}`
+        }
       }
-    }
-  }, {} as RouteApi)
+    }, {} as RouteApi)
+  }
 }
+
+/** URL of the API will be rewritten in next.config */
+export const apiBaseUrlPath = `/api`
+
+export const BACKEND_API = getBackendApiConfig(apiBaseUrlPath)

src/constants/images.ts

@@ -1,4 +1,4 @@
-import { TokenType } from '@/domain'
+import { ContractType } from '@/domain/repositories/DeploymentRepository'
 
 export const LOGO_POLKADOT = '/assets/polka_logo_horizontal.svg'
 export const CW_POLKADOT = '/assets/CW_logo.svg'
@@ -7,9 +7,11 @@ export const GIF_COMPILING = '/assets/compiling.gif'
 export const SVG_SUCCESSFULLY = '/assets/successfully.svg'
 export const SVG_AWESOME = '/assets/auto_awesome.svg'
 export const CHAINS_IMG_PATH = `/assets/chains/`
+export const CUSTOM_CONTRACT = '/assets/custom-contract.png'
 
-export const TOKEN_PATHS: Record<TokenType, string> = {
+export const TOKEN_PATHS: Record<ContractType, string> = {
   psp22: '/assets/token.png',
   psp34: '/assets/nft.png',
-  psp37: '/assets/multitoken.png'
+  psp37: '/assets/multitoken.png',
+  custom: '/assets/multitoken.png' // TODO: Add missing img
 }

src/constants/menu.ts

@@ -1,7 +1,8 @@
 import {
   LocalLibrary,
   SvgIconComponent,
-  HomeRounded
+  SettingsSuggestRounded,
+  DataArrayRounded
 } from '@mui/icons-material'
 import { ROUTES } from '@/constants/routes'
 
@@ -15,25 +16,26 @@ export type NavLink = {
 }
 
 const icons = {
-  HomeRounded,
-  LocalLibrary
+  SettingsSuggestRounded,
+  LocalLibrary,
+  DataArrayRounded
 }
 
 export const MENU_ITEMS: NavLink[] = [
   {
     id: 'home',
-    title: 'Home',
+    title: 'Builder',
     type: 'item',
     url: ROUTES.HOME,
-    icon: icons.HomeRounded,
+    icon: icons.SettingsSuggestRounded,
     target: true
   },
   {
-    id: 'docs',
-    title: 'Docs',
+    id: 'contracts',
+    title: 'Contracts',
     type: 'item',
-    url: ROUTES.DOCS,
-    icon: icons.LocalLibrary,
+    url: ROUTES.CONTRACTS,
+    icon: icons.DataArrayRounded,
     target: true
   }
 ]

src/constants/routes.ts

@@ -1,5 +1,10 @@
 export const ROUTES = {
   HOME: '/',
   WIZARD: '/wizard',
-  DOCS: '/docs'
+  CONTRACTS: '/contracts',
+  CUSTOM: '/custom-contract',
+  CONTRACTDETAIL: '/contract-detail',
+  DOCUMENTATION: 'https://contractwizard-docs.vercel.app/',
+  TELEGRAM: 'https://t.me/+u5M4K7vKfbQxZjMx',
+  GITHUB: 'https://github.com/protofire/polkadot-contract-wizard"'
 } as const

src/constants/titleTokenType.ts

@@ -1,5 +1,5 @@
-import { TokenType } from '@/domain'
 import { TOKEN_PATHS } from '@/constants/images'
+import { ContractType } from '@/domain/repositories/DeploymentRepository'
 
 export interface TitleMapProps {
   title: string
@@ -8,7 +8,7 @@ export interface TitleMapProps {
   imgProps: { width: number; height: number }
 }
 
-export const TITLE_MAP_TOKEN: Record<TokenType, TitleMapProps> = {
+export const TITLE_MAP_TOKEN: Record<ContractType, TitleMapProps> = {
   psp22: {
     title: 'TOKEN | PSP22',
     subtitle: 'Standard smart contract for a fungible token',
@@ -26,5 +26,11 @@ export const TITLE_MAP_TOKEN: Record<TokenType, TitleMapProps> = {
     subtitle: 'Standard smart contract for a Multi Token',
     imgPath: TOKEN_PATHS.psp37,
     imgProps: { width: 45, height: 39 }
+  },
+  custom: {
+    title: 'CUSTOM',
+    subtitle: 'Standard smart contract for a custom Token',
+    imgPath: TOKEN_PATHS.custom,
+    imgProps: { width: 45, height: 39 }
   }
 }

src/constants/wallets.ts

@@ -1,4 +1,4 @@
-import { WalletLogoProps } from '@/infrastructure/useink/walletTypes'
+import { WalletLogoProps } from '@/services/useink/walletTypes'
 
 export type WalletImg = { [name: string]: WalletLogoProps }
 export type WalletKeys = keyof typeof WALLET_IMG_DETAILS

src/context/ApiVersionContext.tsx

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react'
+
+interface ApiVersionContextProps {
+  version: string | null
+}
+
+const ApiVersionContext = createContext<ApiVersionContextProps>({
+  version: null
+})
+
+export const useApiVersion = () => {
+  return useContext(ApiVersionContext)
+}
+
+export default ApiVersionContext

src/context/LocalDbContext.tsx

@@ -1,46 +1,66 @@
 import { INetworkRepository } from '@/domain/repositories/INetworkRepository'
-import { LocalStorageNetworkRepository } from '@/infrastructure/LocalStorageNetworkRepository'
+import { LocalStorageNetworkRepository } from '@/services/LocalStorageNetworkRepository'
 import {
   ApiDeploymentRepository,
   IApiDeploymentRepository
-} from '@/infrastructure/backendApi/ApiDeploymentRepository'
-import React, { createContext, PropsWithChildren, useContext } from 'react'
+} from '@/services/backendApi/ApiDeploymentRepository'
+import React, {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useState
+} from 'react'
 import { BACKEND_API } from '../constants'
-import { MyDatabase } from '@/infrastructure/localDB'
-import { UserContractsRepository } from '@/infrastructure/localDB/UserContractsRepository'
+import { MyDatabase } from '@/services/localDB'
+import { UserContractsRepository } from '@/services/localDB/UserContractsRepository'
 import { IUserContractsRepository } from '@/domain/repositories/IUserContractsRepository'
 import {
   ApiCompileContractRepository,
   IApiCompileContractRepository
-} from '@/infrastructure/backendApi/ApiCompileContractRepository'
+} from '@/services/backendApi/ApiCompileContractRepository'
+import { apiVersionService } from '@/services/backendApi/ApiVersionService'
 
 interface DbContext {
   networkRepository: INetworkRepository
-  deploymentsRepository: IApiDeploymentRepository
+  apiDeploymentsRepository: IApiDeploymentRepository
   userContractsRepository: IUserContractsRepository
-  compileContractRepository: IApiCompileContractRepository
+  apiCompileContractRepository: IApiCompileContractRepository
+  backendApiVersion: string
 }
 
+const apiDeploymentsRepository = new ApiDeploymentRepository(BACKEND_API)
+const apiCompileContractRepository = new ApiCompileContractRepository(
+  BACKEND_API
+)
 const networkRepository = new LocalStorageNetworkRepository()
-const deploymentsRepository = new ApiDeploymentRepository(BACKEND_API)
-const compileContractRepository = new ApiCompileContractRepository(BACKEND_API)
 const userContractsRepository = new UserContractsRepository(new MyDatabase())
 
 const DbContext = createContext<DbContext>({
   networkRepository,
-  deploymentsRepository,
+  apiDeploymentsRepository,
   userContractsRepository,
-  compileContractRepository
+  apiCompileContractRepository,
+  backendApiVersion: ''
 })
 
 export const LocalDbProvider: React.FC<PropsWithChildren> = ({ children }) => {
+  const [backendApiVersion, setBackendApiVersion] = useState('')
+
+  useEffect(() => {
+    void apiVersionService
+      .getApiVersion()
+      .then(version => setBackendApiVersion(version))
+  }, [])
+
   return (
     <DbContext.Provider
       value={{
         networkRepository,
-        deploymentsRepository,
+        apiDeploymentsRepository,
         userContractsRepository,
-        compileContractRepository
+        apiCompileContractRepository,
+        backendApiVersion
       }}
     >
       {children}

src/context/NetworkAccountsContext.tsx

@@ -10,11 +10,11 @@ import jsonrpc from '@polkadot/types/interfaces/jsonrpc'
 import { WalletState, useAllWallets, useWallet } from 'useink'
 import { WalletKeys } from '@/constants/wallets'
 
-import { ChainProperties } from '@/infrastructure/NetworkAccountRepository'
-import { Wallet, WalletAccount } from '@/infrastructure/useink/walletTypes'
+import { ChainProperties } from '@/services/NetworkAccountRepository'
+import { Wallet, WalletAccount } from '@/services/useink/walletTypes'
 import { DEFAULT_CHAIN } from '../constants'
 import { useLocalDbContext } from './LocalDbContext'
-import { ChainId } from '@/infrastructure/useink/chains'
+import { ChainId } from '@/services/useink/chains'
 import { createNotImplementedWarning } from '@/utils/error'
 import { WalletConnectionEvents } from '@/domain'
 

src/domain/Contract.ts

@@ -1,5 +1,5 @@
 import { TokenType } from '@/domain/TokenType'
-import { ContractCompiledRaw } from '@/infrastructure'
+import { ContractCompiledRaw } from '@/services'
 
 export type ContractMetadata = ContractCompiledRaw
 

src/domain/DomainEvents.ts

@@ -4,6 +4,10 @@ export const enum WalletConnectionEvents {
   networkChanged = 'networkChanged'
 }
 
+export const enum UserContractEvents {
+  userContractUpdated = 'userContractUpdated'
+}
+
 export const enum AppNotificationEvents {
   notificationUpdated = 'notificationUpdated'
 }

src/domain/FileState.ts

@@ -0,0 +1,5 @@
+export interface FileState {
+  data: Uint8Array
+  name: string
+  size: number
+}