Skip to content

Feature/ui #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
thebeyondr wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Feature/ui #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e0616d4
feat: :heavy_plus_sign: Switch to TailwindCSS
thebeyondr Jun 20, 2022
d9a4c94
chore: :lipstick: Update tailwind theme
thebeyondr Jun 21, 2022
32e75b1
chore: :bento: Add firefox icon
thebeyondr Jun 21, 2022
2193f8f
chore: :speech_balloon: Update font links
thebeyondr Jun 21, 2022
d4377cf
feat: :construction: Add masthead content and styles
thebeyondr Jun 21, 2022
3600266
chore: :bento: Add bg image
thebeyondr Jun 23, 2022
b69a30e
feat: :lipstick: Update landing page styling
thebeyondr Jun 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
"lint": "next lint"
},
"dependencies": {
"clsx": "^1.1.1",
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0",
Expand All @@ -19,8 +18,11 @@
"@types/node": "17.0.42",
"@types/react": "18.0.12",
"@types/react-dom": "18.0.5",
"autoprefixer": "^10.4.7",
"eslint": "8.17.0",
"eslint-config-next": "12.1.6",
"postcss": "^8.4.14",
"tailwind": "^4.0.0",
"typescript": "4.7.3"
}
}
26 changes: 22 additions & 4 deletions pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,26 @@
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import 'tailwindcss/tailwind.css';
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import Head from 'next/head';

function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
return (
<>
<Head>
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<link rel="icon" href="./favicon.ico" />
<meta name="msapplication-TileColor" content="#405AE0" />
<meta name="theme-color" content="#405AE0" />
<meta name="viewport" content="viewport-fit=cover" />
<meta
name="description"
content="The onboarding page for the ZKOPRU extension"
/>
</Head>
<Component {...pageProps} />
</>
);
}

export default MyApp
export default MyApp;
43 changes: 26 additions & 17 deletions pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,31 @@
import Document, { Html, Head, Main, NextScript } from "next/document";
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=replace"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
render() {
return (
<Html>
<Head>
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="true"
/>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

export default MyDocument;
110 changes: 64 additions & 46 deletions pages/deposit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,76 @@
import { NextPage } from "next";
import { useForm } from "react-hook-form";
import clsx from "clsx";
import styles from "../styles/Deposit.module.css";
import { NextPage } from 'next';
import { useForm } from 'react-hook-form';
import clsx from 'clsx';
// import styles from "../styles/Deposit.module.css";

const DEPOSIT_EVENT = "ZKOPRU#DEPOSIT_ETH";
const DEPOSIT_EVENT = 'ZKOPRU#DEPOSIT_ETH';

type FormData = {
amount: number;
fee: number;
amount: number;
fee: number;
};

const DepositPage: NextPage = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormData>();

const deposit = handleSubmit(async (data) => {
console.log("deposit", data);
// TODO: use some form library for better typing
window.dispatchEvent(new CustomEvent(DEPOSIT_EVENT, { detail: { data } }));
});

return (
<div className={styles.container}>
<h1 className={styles.title}>Deposit Ether</h1>
<form onSubmit={deposit}>
<div className={styles.formControl}>
<label htmlFor="amount">Amount</label>
<input
className={clsx(styles.value, errors.fee && styles.error)}
{...register("amount", { required: true, valueAsNumber: true })}
/>
{errors.amount && <p className={styles.error}>Required Field</p>}
</div>
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormData>();

<div className={styles.formControl}>
<label htmlFor="fee">Fee</label>
<input
className={clsx(styles.value, errors.fee && styles.error)}
{...register("fee", { required: true, valueAsNumber: true })}
/>
{errors.fee && <p className={styles.error}>Required Field</p>}
</div>
const deposit = handleSubmit(async (data) => {
console.log('deposit', data);
// TODO: use some form library for better typing
window.dispatchEvent(
new CustomEvent(DEPOSIT_EVENT, { detail: { data } })
);
});

return (
<div className={styles.container}>
<h1 className={styles.title}>Deposit Ether</h1>
<form onSubmit={deposit}>
<div className={styles.formControl}>
<label htmlFor="amount">Amount</label>
<input
className={clsx(
styles.value,
errors.fee && styles.error
)}
{...register('amount', {
required: true,
valueAsNumber: true,
})}
/>
{errors.amount && (
<p className={styles.error}>Required Field</p>
)}
</div>

<div className={styles.formControl}>
<label htmlFor="fee">Fee</label>
<input
className={clsx(
styles.value,
errors.fee && styles.error
)}
{...register('fee', {
required: true,
valueAsNumber: true,
})}
/>
{errors.fee && (
<p className={styles.error}>Required Field</p>
)}
</div>

<div className={styles.formControl}>
<button className={styles.mainButton} type="submit">
Deposit
</button>
<div className={styles.formControl}>
<button className={styles.mainButton} type="submit">
Deposit
</button>
</div>
</form>
</div>
</form>
</div>
);
);
};

export default DepositPage;
119 changes: 75 additions & 44 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,81 @@
import { useEffect, useState } from "react";
import type { NextPage } from "next";
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { useEffect, useState } from 'react';
import type { NextPage } from 'next';
import Head from 'next/head';
import fireFoxIcon from '../public/assets/firefox.svg';
import abstractBg from '../public/assets/desktop-bg.png';
import Image from 'next/image';

const GENERATE_WALLET_EVENT = "ZKOPRU#GENERATE_WALLET_KEY";
const GENERATE_WALLET_EVENT = 'ZKOPRU#GENERATE_WALLET_KEY';

const Home: NextPage = () => {
const [needWalletGeneration, setNeedWalletGeneration] = useState(false);
const [providerAvailable, setProviderAvailable] = useState(false);
const [loading, setLoading] = useState(true);

useEffect(() => {
// TODO:
// check if L2 wallet is installed
// check if L1 wallet is installed
// check background status
// if background status is not onboarded, display text to let user to open popup
// and register password.
// if background status is INITIALIZED, user don't need to do anything
// if background status is NEED_WALLET_GENERATION, display button
}, []);

const handleClick = async () => {
console.log("handle click");
window.dispatchEvent(new Event(GENERATE_WALLET_EVENT));
};

return (
<div className={styles.container}>
<Head>
<title>Zkopru extension onboarding page</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>

<main className={styles.main}>
<h1 className={styles.title}>
Transactions are private and cheap on ZKOPRU.
</h1>

<button className={styles.mainButton} onClick={handleClick}>
Connect and Sign
</button>
</main>
</div>
);
const [needWalletGeneration, setNeedWalletGeneration] = useState(false);
const [providerAvailable, setProviderAvailable] = useState(false);
const [loading, setLoading] = useState(true);

useEffect(() => {
// TODO:
// check if L2 wallet is installed
// check if L1 wallet is installed
// check background status
// if background status is not onboarded, display text to let user to open popup
// and register password.
// if background status is INITIALIZED, user don't need to do anything
// if background status is NEED_WALLET_GENERATION, display button
}, []);

const handleClick = async () => {
console.log('handle click');
window.dispatchEvent(new Event(GENERATE_WALLET_EVENT));
};

return (
<>
<Head>
<title>ZKOPRU Extension Onboarding</title>
</Head>

<main className="bg-[url('/assets/desktop-bg.png')] bg-cover bg-center">
<div className="p-4 pt-16 min-h-screen">
<div className="container mx-auto flex flex-col gap-8 p-16 rounded-3xl max-w-4xl">
<h1 className="text-6xl text-center leading-snug max-w-3xl text-white">
Transactions are private and cheap on ZKOPRU.
</h1>

<div className="flex flex-col items-center gap-3">
<button className="py-3 px-8 hover:-translate-y-2 outline-none focus:outline-2 focus:outline-white/60 outline-offset-4 transition bg-gradient-to-br from-wblue to-wlilac rounded-full text-white flex gap-x-4 justify-between items-center text-lg">
<Image
alt="Firefox Logo"
src={fireFoxIcon}
width={20}
height={20}
/>
<p>Install wallet addon</p>
</button>
<p className="text-sm font-light text-white tracking-wide">
Available only on Firefox, for now 😉
</p>
</div>
<div className="grid grid-cols-8 gap-6 p-4 border-wlilac border-2 rounded-2xl bg-black/20">
<div className="flex items-center gap-8 col-span-5">
<p className="filter drop-shadow-lg">💡</p>
<p className="text-gray-200 font-normal text-sm">
After you install our addon, we&apos;ll need
to connect to your MetaMask wallet to sync
with ZKOPRU
</p>
</div>
<button
className="py-1 px-2 rounded-full text-white bg-white/10 transition hover:bg-wlilac col-span-3"
onClick={handleClick}
>
Connect Ethereum wallet
</button>
</div>
</div>
</div>
</main>
</>
);
};

export default Home;
Loading