Skip to content

Commit

Permalink
Add UI for all pages
Browse files Browse the repository at this point in the history
  • Loading branch information
ahmetson committed Dec 3, 2023
1 parent 9073575 commit 78e3d44
Show file tree
Hide file tree
Showing 3 changed files with 210 additions and 0 deletions.
59 changes: 59 additions & 0 deletions packages/nextjs/pages/approve.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { useEffect } from "react";
import type { NextPage } from "next";
import { useLocalStorage } from "usehooks-ts";
import { MetaHeader } from "~~/components/MetaHeader";
import { ContractName } from "~~/utils/scaffold-eth/contract";
import { getContractNames } from "~~/utils/scaffold-eth/contractNames";

const selectedContractStorageKey = "scaffoldEth2.selectedContract";
const contractNames = getContractNames();

const Approve: NextPage = () => {
const [selectedContract, setSelectedContract] = useLocalStorage<ContractName>(
selectedContractStorageKey,
contractNames[0],
);

useEffect(() => {
if (!contractNames.includes(selectedContract)) {
setSelectedContract(contractNames[0]);
}
}, [selectedContract, setSelectedContract]);

return (
<>
<MetaHeader title="Asking your approval to bridge | NFT Bridge" description="Need to approve your NFT" />
<div className="flex justify-center items-center gap-12 flex-col sm:flex-row mt-20">
<div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
<h1>Approve</h1>
<label className="form-control w-full max-w-xs">
<div className="label">
<span className="label-text">NFT ADDRESS?</span>
</div>
<input type="text" placeholder="0x..." className="input input-bordered w-full max-w-xs" />
<div className="stats">
<div className="stat">
<ul className="list-disc">
<li className="label-text-alt text-left">Wallets may warn that its dangerous. Simply ignore it.</li>
</ul>
</div>
</div>
</label>
<label className="form-control w-full max-w-xs">
<div className="label divider">COMPLETE</div>
<button className="btn btn-primary">Approve</button>
<div className="stats">
<div className="stat">
<ul className="list-disc">
<li className="label-text-alt text-left">Approves for all NFTs, so call only once</li>
</ul>
</div>
</div>
</label>
</div>
</div>
</>
);
};

export default Approve;
66 changes: 66 additions & 0 deletions packages/nextjs/pages/register.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { useEffect } from "react";
import type { NextPage } from "next";
import { useLocalStorage } from "usehooks-ts";
import { MetaHeader } from "~~/components/MetaHeader";
import { ContractName } from "~~/utils/scaffold-eth/contract";
import { getContractNames } from "~~/utils/scaffold-eth/contractNames";

const selectedContractStorageKey = "scaffoldEth2.selectedContract";
const contractNames = getContractNames();

const Register: NextPage = () => {
const [selectedContract, setSelectedContract] = useLocalStorage<ContractName>(
selectedContractStorageKey,
contractNames[0],
);

useEffect(() => {
if (!contractNames.includes(selectedContract)) {
setSelectedContract(contractNames[0]);
}
}, [selectedContract, setSelectedContract]);

return (
<>
<MetaHeader
title="Debug Contracts | Scaffold-ETH 2"
description="Debug your deployed 🏗 Scaffold-ETH 2 contracts in an easy way"
/>
<div className="flex justify-center items-center gap-12 flex-col sm:flex-row mt-20">
<div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
<h1>Register</h1>
<label className="form-control w-full max-w-xs">
<div className="label">
<span className="label-text">ORIGINAL NFT?</span>
</div>
<input type="text" placeholder="0x..." className="input input-bordered w-full max-w-xs" />
<div className="stats">
<div className="stat">
<ul className="list-disc">
<li className="label-text-alt text-left">Only smartcontract owner can call it.</li>
<li className="label-text-alt text-left">
NFT must be deployed and not bridged with NFT Bridge before.
</li>
<li className="label-text-alt text-left">Its free! :)</li>
</ul>
</div>
</div>
</label>
<label className="form-control w-full max-w-xs">
<div className="label divider">COMPLETE</div>
<button className="btn btn-primary">Register</button>
<div className="stats">
<div className="stat">
<ul className="list-disc">
<li className="label-text-alt text-left">Creates a Wrapper thats linked to all other NFTs.</li>
</ul>
</div>
</div>
</label>
</div>
</div>
</>
);
};

export default Register;
85 changes: 85 additions & 0 deletions packages/nextjs/pages/setup.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { useEffect } from "react";
import Link from "next/link";
import type { NextPage } from "next";
import { useLocalStorage } from "usehooks-ts";
import { MetaHeader } from "~~/components/MetaHeader";
import { ContractName } from "~~/utils/scaffold-eth/contract";
import { getContractNames } from "~~/utils/scaffold-eth/contractNames";

const selectedContractStorageKey = "scaffoldEth2.selectedContract";
const contractNames = getContractNames();

const Setup: NextPage = () => {
const [selectedContract, setSelectedContract] = useLocalStorage<ContractName>(
selectedContractStorageKey,
contractNames[0],
);

useEffect(() => {
if (!contractNames.includes(selectedContract)) {
setSelectedContract(contractNames[0]);
}
}, [selectedContract, setSelectedContract]);

return (
<>
<MetaHeader
title="Debug Contracts | Scaffold-ETH 2"
description="Debug your deployed 🏗 Scaffold-ETH 2 contracts in an easy way"
/>
<div className="flex justify-center items-center gap-12 flex-col sm:flex-row mt-20">
<div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
<h1>Setup</h1>
<label className="form-control w-full max-w-xs">
<div className="label">
<span className="label-text">ORIGINAL NFT?</span>
</div>
<input type="text" placeholder="0x..." className="input input-bordered w-full max-w-xs" />
<div className="stats">
<div className="stat">
<ul className="list-disc">
<li className="label-text-alt text-left">
NFT Must be{" "}
<Link href={"/register"} className={"bold bg-base-300"}>
Registered
</Link>
</li>
<li className="label-text-alt text-left">:) Supports cross-chain, simply setup repeatedly</li>
</ul>
</div>
</div>
</label>
<label className="form-control w-full max-w-xs">
<div className="label">
<span className="label-text">Target</span>
</div>
<select className="select select-bordered">
<option disabled selected>
Select a network
</option>
<option>Sepolia</option>
<option>Avalanche Fuji</option>
<option>BNB Chain Testnet</option>
<option>Polygon Mumbai</option>
</select>
</label>
<label className="form-control w-full max-w-xs">
<div className="label divider">COMPLETE</div>
<button className="btn btn-primary">Setup</button>
<div className="stats">
<div className="stat">
<ul className="list-disc">
<li className="label-text-alt text-left">
Setup creates a linked NFT on a target blockchain linked to all other Linked NFTs and Wrapped NFT.
</li>
</ul>
</div>
</div>
</label>
</div>
</div>
</>
);
};

export default Setup;

0 comments on commit 78e3d44

Please sign in to comment.