Add Custom Contracts and Contracts section (#195)

* add custom option on home

* add HomeButtonHorizontal variant

* refactor CustomContract component

* fix layout

* add dashboard page and menu

* rm contract form dashboard menu and add icon

* Dashboard --> Contracts

* change folder name to contracts

* img uppercase

* add styles refactor

src/constants/images.ts

@@ -7,6 +7,7 @@ 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> = {
   psp22: '/assets/token.png',

src/constants/menu.ts

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

src/pages/contracts/index.tsx

@@ -0,0 +1,31 @@
+import { Box, Link, Stack, Typography } from '@mui/material'
+
+export default function Contracts() {
+  return (
+    <Box
+      sx={{
+        width: { sm: '90%', md: '75%', lg: '80%', xl: '60%' },
+        margin: '0 auto 2rem auto'
+      }}
+    >
+      <Typography variant="h1" align="center">
+        Contracts
+      </Typography>
+      <Stack mt={8} flexDirection="column" gap={4} justifyContent={'center'}>
+        <Typography variant="h3">Sample title</Typography>
+        <Typography variant="body1">
+          The Polkadot Contract Wizard is a non-code tool to generate, compile
+          and deploy smart contracts on Polkadot Ecosystem. It provides{' '}
+          <Link
+            href="https://github.com/w3f/PSPs"
+            underline="hover"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            standard contracts based on PSP.
+          </Link>
+        </Typography>
+      </Stack>
+    </Box>
+  )
+}

src/pages/index.tsx

@@ -1,8 +1,8 @@
 import Link from 'next/link'
 import { Stack, Typography } from '@mui/material'
 
-import { HomeButton } from '@/components'
-import { ROUTES, TOKEN_PATHS } from '@/constants/index'
+import { HomeButton, HomeButtonCustom } from '@/components'
+import { CUSTOM_CONTRACT, ROUTES, TOKEN_PATHS } from '@/constants/index'
 import { TokenType } from '@/domain'
 import { useNetworkAccountsContext } from '@/context/NetworkAccountsContext'
 import { ContractsTableWidget } from '@/view/HomeView/ContractsTableWidget'
@@ -31,9 +31,9 @@ function Home() {
       </Typography>
       <Stack
         spacing={{ xs: 1, sm: 2, md: 4 }}
-        direction="column"
+        direction={{ xs: 'column', md: 'row' }}
         alignItems="center"
-        m={{ xs: 2, sm: 4, md: 8 }}
+        m={{ xs: 2, sm: 4, md: 4 }}
       >
         <HomeButton
           LinkComponent={Link}
@@ -60,6 +60,22 @@ function Home() {
           imgProps={{ width: 75, height: 65 }}
         />
       </Stack>
+      <Stack
+        spacing={{ xs: 1, sm: 2, md: 4 }}
+        direction="column"
+        alignItems="center"
+        m={{ xs: 2, sm: 4, md: 3 }}
+      >
+        <Typography variant="h5">Import your own contract ⚡</Typography>
+        <HomeButtonCustom
+          LinkComponent={Link}
+          href={`/`}
+          title="CUSTOM CONTRACT"
+          subtitle="Upload a new contract code"
+          imgPath={CUSTOM_CONTRACT}
+          imgProps={{ width: 60, height: 60 }}
+        />
+      </Stack>
       {accountConnected && <ContractsTableWidget contracts={contracts} />}
     </>
   )

src/view/components/HomeButton/CustomContract.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+import { WrapperButton } from './styled'
+import { Typography, Stack, ButtonProps } from '@mui/material'
+
+import Image from 'next/image'
+interface Props extends ButtonProps {
+  title: string
+  subtitle: string
+  imgPath: string
+  imgProps: { width?: number; height?: number }
+}
+
+export const HomeButtonCustom = (props: Props) => {
+  const { title, subtitle, imgProps, imgPath, ...restProps } = props
+
+  return (
+    <WrapperButton variant="contained" {...restProps}>
+      <Stack
+        spacing={{ xs: 1, sm: 0, md: 0 }}
+        direction="row"
+        alignItems="center"
+      >
+        <Stack
+          spacing={0}
+          direction="column"
+          alignItems="center"
+          sx={{ width: '5rem' }}
+        >
+          <Image alt={title} src={imgPath} {...imgProps} />
+        </Stack>
+        <Stack
+          direction="column"
+          alignItems={{ xs: 'center', md: 'center', lg: 'center' }}
+          sx={{
+            width: { xs: '100%', md: '100%', lg: '100%' }
+          }}
+        >
+          <Typography
+            variant="h3"
+            sx={{
+              fontSize: { xs: '1rem', md: '1.1rem', lg: '1.2rem' }
+            }}
+          >
+            {title}
+          </Typography>
+          <Typography
+            variant="subtitle1"
+            align="center"
+            sx={{
+              fontSize: { xs: '0.8rem', md: '0.9rem', lg: '0.9rem' },
+              opacity: '0.6',
+              fontWeight: '400'
+            }}
+          >
+            {subtitle}
+          </Typography>
+        </Stack>
+      </Stack>
+    </WrapperButton>
+  )
+}

src/view/components/HomeButton/index.tsx

@@ -17,13 +17,13 @@ const WrapperButton = styled(Button)<ButtonProps>(({ theme }) => ({
   color: 'white',
   fontSize: '1.4rem',
   borderRadius: '1rem',
-  width: '85%',
+  width: '100%',
   backgroundColor: 'transparent',
   display: 'flex',
   alignItems: 'center',
   margin: '0',
   position: 'relative',
-  padding: '2rem',
+  padding: '1.5rem',
   border: 'solid 1px transparent',
   backgroundImage:
     'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(180deg, #B214AC, #8C7524)',
@@ -52,8 +52,8 @@ export const HomeButton = (props: Props) => {
   return (
     <WrapperButton variant="contained" {...restProps}>
       <Stack
-        spacing={{ xs: 1, sm: 0, md: 4 }}
-        direction={{ xs: 'column', lg: 'row' }}
+        spacing={{ xs: 1, sm: 0, md: 0 }}
+        direction={{ xs: 'row', lg: 'column' }}
         alignItems="center"
       >
         <Stack
@@ -66,16 +66,16 @@ export const HomeButton = (props: Props) => {
         </Stack>
         <Stack
           direction="column"
-          alignItems={{ xs: 'center', md: 'center', lg: 'flex-start' }}
+          alignItems={{ xs: 'center', md: 'center', lg: 'center' }}
           sx={{
-            width: { xs: '100%', md: '100%', lg: '27rem' },
-            marginTop: { sm: '1rem !important', lg: '0 !important' }
+            width: { xs: '100%', md: '100%', lg: '100%' },
+            marginTop: '1rem !important'
           }}
         >
           <Typography
             variant="h3"
             sx={{
-              fontSize: { xs: '1rem', md: '1.2rem', lg: '1.4rem' }
+              fontSize: { xs: '1rem', md: '1.1rem', lg: '1.2rem' }
             }}
           >
             {title}

src/view/components/HomeButton/styled.ts

@@ -0,0 +1,35 @@
+import { styled } from '@mui/material/styles'
+import Button, { ButtonProps } from '@mui/material/Button'
+
+export const WrapperButton = styled(Button)<ButtonProps>(({ theme }) => ({
+  color: 'white',
+  fontSize: '1.4rem',
+  borderRadius: '1rem',
+  width: '100%',
+  backgroundColor: 'transparent',
+  display: 'flex',
+  alignItems: 'center',
+  margin: '0',
+  position: 'relative',
+  padding: '1.5rem',
+  border: 'solid 1px transparent',
+  backgroundImage:
+    'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #B214AC, #2EB5FD)',
+  backgroundOrigin: 'border-box',
+  backgroundClip: 'content-box, border-box',
+  boxShadow: '2px 1000px 1px #0D0E13 inset',
+  [theme.breakpoints.down('sm')]: {
+    width: '100%',
+    margin: '0.5rem !important',
+    padding: '1.3rem'
+  },
+
+  '&:hover': {
+    backgroundImage:
+      'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #ffffff, #ffb7ff)',
+    backgroundOrigin: 'border-box',
+    backgroundClip: 'content-box, border-box',
+    boxShadow:
+      '2px 1000px 1px #11121a inset, 0 4px 20px 2px rgba(241, 83, 255, 0.25)'
+  }
+}))

src/view/components/index.ts

@@ -1,5 +1,6 @@
 export * as Transitions from './Transitions'
 export * from './HomeButton'
+export * from './HomeButton/CustomContract'
 export * from './LoadingButton/styled'
 export * from './LoadingButton'
 export { default as Stepper } from './StepperWrapper'