From f013ae67a7bbbf33a94ba7e2d2203a35f34346d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@protofire.io>
Date: Thu, 28 Sep 2023 15:44:33 -0300
Subject: [PATCH] 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
---
 public/assets/custom-contract.png             | Bin 0 -> 7990 bytes
 src/constants/images.ts                       |   1 +
 src/constants/menu.ts                         |  20 ++++--
 src/pages/contracts/index.tsx                 |  31 +++++++++
 src/pages/index.tsx                           |  24 +++++--
 .../components/HomeButton/CustomContract.tsx  |  61 ++++++++++++++++++
 src/view/components/HomeButton/index.tsx      |  16 ++---
 src/view/components/HomeButton/styled.ts      |  35 ++++++++++
 src/view/components/index.ts                  |   1 +
 9 files changed, 172 insertions(+), 17 deletions(-)
 create mode 100644 public/assets/custom-contract.png
 create mode 100644 src/pages/contracts/index.tsx
 create mode 100644 src/view/components/HomeButton/CustomContract.tsx
 create mode 100644 src/view/components/HomeButton/styled.ts

diff --git a/public/assets/custom-contract.png b/public/assets/custom-contract.png
new file mode 100644
index 0000000000000000000000000000000000000000..02cea907ab77646c85192accb098edbf6ce14799
GIT binary patch
literal 7990
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

literal 0
HcmV?d00001

diff --git a/src/constants/images.ts b/src/constants/images.ts
index 7a13ad35..63db349e 100644
--- a/src/constants/images.ts
+++ b/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',
diff --git a/src/constants/menu.ts b/src/constants/menu.ts
index a221fb84..a9f80a0e 100644
--- a/src/constants/menu.ts
+++ b/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
   },
   {
diff --git a/src/pages/contracts/index.tsx b/src/pages/contracts/index.tsx
new file mode 100644
index 00000000..e6aae708
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2cd389d3..cb0148c9 100644
--- a/src/pages/index.tsx
+++ b/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} />}
     </>
   )
diff --git a/src/view/components/HomeButton/CustomContract.tsx b/src/view/components/HomeButton/CustomContract.tsx
new file mode 100644
index 00000000..4eeed6f4
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/view/components/HomeButton/index.tsx b/src/view/components/HomeButton/index.tsx
index d4ea834c..c7253faa 100644
--- a/src/view/components/HomeButton/index.tsx
+++ b/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}
diff --git a/src/view/components/HomeButton/styled.ts b/src/view/components/HomeButton/styled.ts
new file mode 100644
index 00000000..ef3a457c
--- /dev/null
+++ b/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)'
+  }
+}))
diff --git a/src/view/components/index.ts b/src/view/components/index.ts
index 0013260c..e94e1573 100644
--- a/src/view/components/index.ts
+++ b/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'