diff --git a/components/forms/styles.module.css b/components/forms/styles.module.css index bef9f5d..3df7a87 100644 --- a/components/forms/styles.module.css +++ b/components/forms/styles.module.css @@ -56,4 +56,8 @@ .test { background-color: #1b1b1b !important; +} + +@media screen and (max-width: 700) { + } \ No newline at end of file diff --git a/components/layout/index.tsx b/components/layout/index.tsx index 760ee6b..6edb05c 100644 --- a/components/layout/index.tsx +++ b/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', }} > diff --git a/components/wizard/input/Input.tsx b/components/wizard/input/Input.tsx new file mode 100644 index 0000000..84a82a9 --- /dev/null +++ b/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 ( +
+ + console.log()} /> +
+ ) +} diff --git a/components/wizard/input/Toggle.tsx b/components/wizard/input/Toggle.tsx new file mode 100644 index 0000000..d4a2509 --- /dev/null +++ b/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 ( +
+ + +
+ ) +} diff --git a/components/wizard/input/styles.module.css b/components/wizard/input/styles.module.css new file mode 100644 index 0000000..dd9d6e2 --- /dev/null +++ b/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%; +} \ No newline at end of file diff --git a/constants/addresses.ts b/constants/addresses.ts index 6a592cb..b51136b 100644 --- a/constants/addresses.ts +++ b/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: '', +} \ No newline at end of file diff --git a/pages/wizard.tsx b/pages/wizard.tsx new file mode 100644 index 0000000..e52f55d --- /dev/null +++ b/pages/wizard.tsx @@ -0,0 +1,98 @@ +import React from 'react' +import { InputField } from '../components/wizard/input/Input' + +export default function Wizard() { + return ( +
+
+ + + +
+
+
+

Settings

+ + + +
+
+ +
+
+
+ ) +} diff --git a/styles/globals.css b/styles/globals.css index 0fa35f7..db30fc4 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -127,4 +127,4 @@ a { .ant-input { background-color: #0e0e0e !important; color: lightgray !important; - +} \ No newline at end of file diff --git a/utils/getLinkAddress.ts b/utils/getLinkAddress.ts index 906c4d6..6e3c910 100644 --- a/utils/getLinkAddress.ts +++ b/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/', diff --git a/utils/getNetworkContract.ts b/utils/getNetworkContract.ts index e03214b..b4929ee 100644 --- a/utils/getNetworkContract.ts +++ b/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; } \ No newline at end of file