begin wizard

components/forms/styles.module.css

@@ -56,4 +56,8 @@
 
 .test {
   background-color: #1b1b1b !important;
+}
+
+@media screen and (max-width: 700) {
+
 }

components/layout/index.tsx

@@ -9,7 +9,10 @@ export function Layout({Component}: any) {
           padding: '1em',
           borderBottom: '3px solid #30303030',
           display: 'flex',
-          justifyContent: 'right'
+          justifyContent: 'right',
+          position: 'absolute',
+          zIndex: '100',
+          width: '100vw',
         }}
       >
         <ConnectKitButton />

components/wizard/input/Input.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+export const InputField: React.FC<{
+  label: string,
+  value: string,
+  placeholder: string,
+}> = ({ label, value, placeholder }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: '100%',
+        marginTop: '20px'
+      }}
+    >
+      <label>
+        {label}
+      </label>
+      <input value={''} placeholder={placeholder} onChange={() => console.log()} />
+    </div>
+  )
+}

components/wizard/input/Toggle.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+export const InputField: React.FC<{
+  label: string,
+  value: string,
+  placeholder: string,
+}> = ({ label, value, placeholder }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: '100%',
+        marginTop: '20px'
+      }}
+    >
+      <label>
+        {label}
+        <input type={'checkbow'} value={''} placeholder={placeholder} onChange={() => console.log()} />
+        <span className="slider"></span>
+      </label>
+
+    </div>
+  )
+}

components/wizard/input/styles.module.css

@@ -0,0 +1,62 @@
+ /* The switch - the box around the slider */
+ .switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+} 

constants/addresses.ts

@@ -16,7 +16,9 @@ export const supertoken_factory_optimism_goerli_proxy: string = '0x9aCc39d15e3f1
 export const supertoken_factory_arbitrum_goerli_proxy: string = '0x9aCc39d15e3f168c111a1D4F80271a9E526c9a9F';
 export const supertoken_factory_avalanche_fuji_proxy: string = '0xA25dbEa94C5824892006b30a629213E7Bf238624';
 
-export const contractMap: { [key: number]: string } = {
+// Pure supertoken deployer
+
+export const wrapperContractMap: { [key: number]: string } = {
 
   //Main networks:
 
@@ -36,3 +38,19 @@ export const contractMap: { [key: number]: string } = {
   80001: supertoken_factory_mumbai_proxy,
   421613: supertoken_factory_arbitrum_goerli_proxy,
 }
+
+export const pureContractMap: { [key: number]: string } = {
+  1: '',
+  10: '',
+  56: '',
+  100: '',
+  137: '',
+  42161: '',
+  43114: '',
+
+  5: '',
+  420: '',
+  43113: '',
+  80001: '',
+  421613: '',
+}

pages/wizard.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { InputField } from '../components/wizard/input/Input'
+
+export default function Wizard() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100vw',
+        height: '100vh',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          height: '10vh',
+          width: '20vw',
+          padding: '1em',
+          justifyContent: 'space-between'
+        }}
+      >
+        <button
+          style={{
+            paddingLeft: '1em',
+            paddingRight: '1em'
+          }}
+        >
+          Copy
+        </button>
+        <button
+          style={{
+            paddingLeft: '1em',
+            paddingRight: '1em'
+          }}
+        >
+          Download
+        </button>
+        <button
+          style={{
+            paddingLeft: '1em',
+            paddingRight: '1em'
+          }}
+        >
+          Remix
+        </button>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          height: '90vh',
+          width: '100vw',
+          flexDirection: 'row'
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            height: '90vh',
+            width: '20vw',
+            padding: '1em',
+            flexDirection: 'column',
+            backgroundColor: '#303030'
+          }}
+        >
+          <h4>Settings</h4>
+          <InputField
+            label={'name'}
+            value={'name'}
+            placeholder='name here'
+          />
+           <InputField
+            label={'symbol'}
+            value={'symbol'}
+            placeholder='token symbol here (ex: dai)'
+          />
+          <InputField
+            label={'premint'}
+            value={'name'}
+            placeholder='premint amount (ex: 1234)'
+          />
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            height: '90vh',
+            width: '80vw',
+            padding: '1em',
+            flexDirection: 'column',
+            backgroundColor: '#1b1b1b'
+          }}
+        >
+
+        </div>
+      </div>
+    </div>
+  )
+}

styles/globals.css

@@ -127,4 +127,4 @@ a {
 .ant-input {
   background-color: #0e0e0e !important;
   color: lightgray !important;
-
+}

utils/getLinkAddress.ts

@@ -1,7 +1,5 @@
 const scanMap: any = {
-
   //Mainnet scans
-
   1: 'https://etherscan.io/',
   10: 'https://optimistic.etherscan.io/',
   56: 'https://bscscan.com/',

utils/getNetworkContract.ts

@@ -1,7 +1,7 @@
-import { contractMap } from "../constants/addresses"
+import { wrapperContractMap } from "../constants/addresses";
 
 export const getNetworkContract = (chain: number) => {
-  const contract = contractMap[chain];
+  const contract = wrapperContractMap[chain];
 
   return contract;
 }