Skip to content

Commit

Permalink
Merge pull request #138 from protofire/release/0.3.0
Browse files Browse the repository at this point in the history 
Bump version to 0.3.0
  • Loading branch information
@henrypalacios
henrypalacios authored Jul 6, 2023
2 parents eac686c + 8bbe8a9 commit 59d5e64
Show file tree
Hide file tree
Showing 6 changed files with 124 additions and 143 deletions.
10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "polkadot-contract-wizard",
"version": "0.2.1",
"version": "0.3.0",
"private": true,
"scripts": {
"dev": "next dev",
Expand Down Expand Up @@ -46,7 +46,7 @@
"semver": "^7.3.8",
"sharp": "^0.32.1",
"simplebar-react": "^3.2.0",
"whatwg-url": "^12.0.1"
"whatwg-url": "^13.0.0"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.5",
Expand All @@ -58,11 +58,11 @@
"@types/react": "18.0.38",
"@types/react-dom": "18.0.11",
"@types/react-toastify": "^4.1.0",
"@types/testing-library__jest-dom": "^5.14.5",
"@types/testing-library__jest-dom": "^5.14.6",
"@types/whatwg-url": "^11.0.0",
"@typescript-eslint/eslint-plugin": "^5.59.8",
"@typescript-eslint/parser": "^5.59.1",
"cypress": "^12.9.0",
"@typescript-eslint/parser": "^5.61.0",
"cypress": "^12.16.0",
"eslint": "^8.41.0",
"eslint-config-next": "13.1.1",
"eslint-config-prettier": "^8.6.0",
Expand Down
112 changes: 27 additions & 85 deletions pages/docs/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
import { Box, Link, Stack, Typography } from '@mui/material'
import Image from 'next/image'

const ImageResponsive = ({ alt, src }: { alt: string; src: string }) => {
return (
<Image
alt={alt}
src={src}
width={0}
height={0}
sizes="100vw"
style={{ width: '100%', height: 'auto' }}
/>
)
}

export default function Home() {
return (
<Box
Expand Down Expand Up @@ -41,24 +54,14 @@ export default function Home() {
<li>MULTITOKEN | PSP37: standard contract for a multi token.</li>
</ul>
</Box>
<Image
alt="select a contract"
src="/assets/docs1.png"
height={496}
width={870}
/>
<ImageResponsive alt="select a contract" src="/assets/docs1.png" />
<Typography variant="h4">1. Extensions choices 🪄</Typography>
<Typography variant="body1">
Once you select one of the options (Token, NFT or Multi Token), you
will be able to choose one or more Extensions: Functionalities and
Security.
</Typography>
<Image
alt="select a extension"
src="/assets/docs2.png"
height={496}
width={870}
/>
<ImageResponsive alt="select a extension" src="/assets/docs2.png" />
<Typography variant="h4">2. Compile your contract ⚙️</Typography>
<Typography variant="body1">
Now you have your contract ready to be compiled. If you prefer you can
Expand All @@ -68,21 +71,11 @@ export default function Home() {
<Typography variant="body1">
First, you need to connect your wallet.
</Typography>
<Image
alt="connect your wallet"
src="/assets/docs3.png"
height={496}
width={870}
/>
<ImageResponsive alt="connect your wallet" src="/assets/docs3.png" />
<Typography variant="body1">
Then, you can compile your contract.
</Typography>
<Image
alt="compile your contract"
src="/assets/docs4.png"
height={496}
width={870}
/>
<ImageResponsive alt="compile your contract" src="/assets/docs4.png" />
<Typography variant="h4">3. Deploy your contract 🚀</Typography>
<Typography variant="body1">
After the smart contract has been compiled, it is ready to be deployed
Expand All @@ -92,39 +85,19 @@ export default function Home() {
Now you need to fill in the required fields for the contract
constructor.
</Typography>
<Image
alt="fill the fields"
src="/assets/docs5.png"
height={496}
width={870}
/>
<ImageResponsive alt="fill the fields" src="/assets/docs5.png" />
<Typography variant="body1">
Once you have finished, you can deploy your contract.
</Typography>
<Image
alt="deploy your contract"
src="/assets/docs6.png"
height={496}
width={870}
/>
<ImageResponsive alt="deploy your contract" src="/assets/docs6.png" />
<Typography variant="body1">
You will be prompted to sign the transaction with your wallet.
</Typography>
<Image
alt="sign transaction"
src="/assets/docs7.png"
height={496}
width={870}
/>
<ImageResponsive alt="sign transaction" src="/assets/docs7.png" />
<Typography variant="body1">
After a little while, your contract will be deployed.
</Typography>
<Image
alt="contract deployed"
src="/assets/docs9.png"
height={496}
width={870}
/>
<ImageResponsive alt="contract deployed" src="/assets/docs9.png" />
<Typography variant="h4">4. Interact with your contract 💻</Typography>
<Typography
variant="h5"
Expand Down Expand Up @@ -155,64 +128,33 @@ export default function Home() {
First, go to the main dashboard and copy the address where your
contract was deployed.
</Typography>
<Image
alt="copy address"
src="/assets/docs10.png"
height={496}
width={870}
/>
<ImageResponsive alt="copy address" src="/assets/docs10.png" />
<Typography variant="body1">
Second, click the icon in the same row as your contract to download
the Metadata file.
</Typography>
<Image
alt="download metadata"
src="/assets/docs11.png"
height={496}
width={870}
/>
<ImageResponsive alt="download metadata" src="/assets/docs11.png" />
<Typography variant="body1">
Then, go to contracts-ui site and select the network where you
deployed your contract.
</Typography>
<Image
alt="select network"
src="/assets/docs12.png"
height={496}
width={870}
/>
<ImageResponsive alt="select network" src="/assets/docs12.png" />
<Typography variant="body1">
Click &apos;Add new contract&apos; from the top left corner and then
&apos;Use On-Chain Contract Address&apos;
</Typography>
<Image
alt="add new contract"
src="/assets/docs13.png"
height={496}
width={870}
/>
<ImageResponsive alt="add new contract" src="/assets/docs13.png" />
<Typography variant="body1">
Fill in the address field with the address you copied from the
Polkadot Contract Wizard and upload the Metadata file you downloaded.
Click &apos;Add Contract&apos;.
</Typography>
<Image
alt="fill fields"
src="/assets/docs14.png"
height={496}
width={870}
/>
<ImageResponsive alt="fill fields" src="/assets/docs14.png" />
<Typography variant="body1">
Now you are ready to interact with your contract!!
</Typography>
<Image
alt="ready to interact"
src="/assets/docs15.png"
height={496}
width={870}
/>
<ImageResponsive alt="ready to interact" src="/assets/docs15.png" />
</Stack>
{/* <Accordion /> */}
</Box>
)
}
21 changes: 21 additions & 0 deletions src/hooks/useViewportWidth.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { useEffect, useState } from 'react'

export function useViewportWidth() {
const [viewportWidth, setViewportWidth] = useState(0)

useEffect(() => {
const handleResize = () => {
setViewportWidth(window.innerWidth)
}

handleResize()

window.addEventListener('resize', handleResize)

return () => {
window.removeEventListener('resize', handleResize)
}
}, [])

return { viewportWidth }
}
18 changes: 18 additions & 0 deletions src/view/layout/MainDrawer/DrawerContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import SimpleBar from 'src/view/components/third-party/SimpleBar'
import { LOGO_PROTOFIRE } from 'src/constants/images'
import { Typography, Stack, Link, Box } from '@mui/material'
import TelegramIcon from '@mui/icons-material/Telegram'
import GithubIcon from '@mui/icons-material/GitHub'

const DrawerContent = ({ version }: { version: string }) => {
const { pathname } = useRouter()
Expand Down Expand Up @@ -47,6 +48,23 @@ const DrawerContent = ({ version }: { version: string }) => {
Need Help?
</Link>
</Typography>
<Typography variant="h5" mb={4}>
<Link
href="https://github.com/protofire/polkadot-contract-wizard"
underline="hover"
target="_blank"
rel="noopener noreferrer"
sx={{
color: '#ffffff',
display: 'flex',
alignItems: 'center',
gap: '1rem'
}}
>
<GithubIcon fontSize="small" sx={{ color: '#ffffff' }} />
Github
</Link>
</Typography>
<Box
sx={{
display: 'flex',
Expand Down
2 changes: 1 addition & 1 deletion src/view/wizardView/Step2Compile/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function Step2Compile({ tokenType }: { tokenType: TokenType }) {
return (
<>
<Typography variant="h4" mb={2}>
Excelent! Now you need to compile contract {tokenType}!
Excellent! Now you need to compile contract!
</Typography>
<StyledCopyBlock
sx={{ overflowY: 'scroll', height: '60vh', resize: 'both' }}
Expand Down
Loading

1 comment on commit 59d5e64

@vercel
Copy link

@vercel vercel bot commented on 59d5e64 Jul 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

polkadot-contract-wizard – ./

polkadot-contract-wizard-git-main-proto-polkadot.vercel.app
polkadot-contract-wizard.vercel.app
polkadot-contract-wizard-proto-polkadot.vercel.app

Please sign in to comment.