Started adding UI w/ Tailwind

adriandelgg · Jun 13, 2021 · c45f201 · c45f201
1 parent a65961e
commit c45f201
Show file tree

Hide file tree

Showing 12 changed files with 1,659 additions and 147 deletions.
diff --git a/components/AllTokens.js b/components/AllTokens.js
@@ -61,24 +61,46 @@ const AllTokens = () => {
 		}
 	);
 
+	async function buyToken(tokenId, tokenPrice) {
+		await contract.methods
+			.buyToken(tokenId)
+			.send({ from: account, value: tokenPrice });
+	}
+
 	return (
-		<div>
+		<>
 			<CheckTokenOwner />
-			{tokensForSale &&
-				tokensForSale.map(token => {
-					const { tokenId, tokenColor, tokenOwner, tokenSalePrice } = token;
-
-					return (
-						<div key={tokenId}>
-							<h5>{tokenColor}</h5>
-							<p>Price: {web3.utils.fromWei(tokenSalePrice)} Ether</p>
-							<p>Token ID: {tokenId}</p>
-							<p>Owner: {tokenOwner}</p>
-						</div>
-					);
-				})}
 			<SellToken />
-		</div>
+			<section className="flex flex-wrap justify-center align-center">
+				{tokensForSale &&
+					tokensForSale.map(token => {
+						const { tokenId, tokenColor, tokenOwner, tokenSalePrice } = token;
+
+						return (
+							<div
+								className="flex flex-col text-center bg-gray-100 rounded m-3 py-3 shadow-lg w-60"
+								key={tokenId}
+							>
+								<h5 className="text-lg font-medium">{tokenColor}</h5>
+								<p>Token ID: {tokenId}</p>
+								<p>Price: {web3.utils.fromWei(tokenSalePrice)} Ξ Ether</p>
+								<button
+									className="bg-green-400 hover:bg-green-500 text-white font-bold
+										py-1 px-4 w-28 rounded mx-auto mt-2
+									"
+									onClick={() => buyToken(tokenId, tokenSalePrice)}
+								>
+									BUY
+								</button>
+								<div className="pt-2">
+									<p className="text-xs">Owner:</p>
+									<p className="text-xxs text-gray-500">{tokenOwner}</p>
+								</div>
+							</div>
+						);
+					})}
+			</section>
+		</>
 	);
 };
 

diff --git a/components/CheckTokenOwner.js b/components/CheckTokenOwner.js
@@ -13,9 +13,12 @@ const CheckTokenOwner = () => {
 	}
 
 	return (
-		<>
-			<label htmlFor="check-owner">Check Token's Owner: </label>
+		<div className="flex flex-col w-56">
+			<label className="p-1" htmlFor="check-owner">
+				Check Token's Owner:
+			</label>
 			<input
+				className="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
 				type="number"
 				id="check-owner"
 				name="tokenOwner"
@@ -24,8 +27,14 @@ const CheckTokenOwner = () => {
 				placeholder="Enter a Token ID:"
 				onChange={e => setTokenOwner(e.target.value)}
 			/>
-			<button onClick={() => checkTokenOwner(tokenOwner)}>Check Owner</button>
-		</>
+			<button
+				className="bg-blue-400 hover:bg-blue-500 text-white font-bold
+										py-1 px-4 w-32 rounded mx-auto mt-2"
+				onClick={() => checkTokenOwner(tokenOwner)}
+			>
+				Check Owner
+			</button>
+		</div>
 	);
 };
 

diff --git a/components/DexInfo.js b/components/DexInfo.js
@@ -49,11 +49,23 @@ const DexInfo = () => {
 	}
 
 	return (
-		<div className="dex-info-container">
-			<p>Total Supply: {totalSupply}</p>
-			<p>Your total NFTs: {ownerBalance}</p>
-			<p>NFTs Owned by Exchange: {contractBalance}</p>
-			<p>Total NFTs Minted: {totalMinted}</p>
+		<div className="flex justify-around">
+			<div className="text-center">
+				<p>Total Supply:</p>
+				<p>{totalSupply}</p>
+			</div>
+			<div className="text-center">
+				<p>Your total NFTs:</p>
+				<p>{ownerBalance}</p>
+			</div>
+			<div className="text-center">
+				<p>NFTs Owned by Exchange:</p>
+				<p>{contractBalance}</p>
+			</div>
+			<div className="text-center">
+				<p>Total NFTs Minted:</p>
+				<p>{totalMinted}</p>
+			</div>
 		</div>
 	);
 };

diff --git a/components/MetaMask.js b/components/MetaMask.js
@@ -29,7 +29,10 @@ export default function MetaMask() {
 
 	return (
 		<div>
-			<button className="metamask-btn" onClick={ethEnabled}>
+			<button
+				className="bg-green-400 hover:bg-green-600 text-white font-bold py-1 px-4 rounded"
+				onClick={ethEnabled}
+			>
 				Connect Wallet
 			</button>
 		</div>

diff --git a/components/SellToken.js b/components/SellToken.js
@@ -38,31 +38,48 @@ const SellToken = () => {
 	// the UI of all tokens being displayed
 
 	return (
-		<form>
-			<label htmlFor="sell-token-id">NFT ID: </label>
-			<input
-				type="number"
-				name="tokenId"
-				id="sell-token-id"
-				placeholder="Token's ID to Sell:"
-				value={sellToken.tokenId}
-				min="0"
-				required={true}
-				onChange={e => handleChange(e)}
-			/>
+		<form className="flex">
+			<div className="flex flex-col p-2">
+				<label className="p-1" htmlFor="sell-token-id">
+					NFT ID:
+				</label>
 
-			<label htmlFor="sell-token-price">Sell Price: </label>
-			<input
-				type="number"
-				name="sellPrice"
-				id="sell-token-price"
-				placeholder="Amount in wei:"
-				value={sellToken.sellPrice}
-				required={true}
-				min="0"
-				onChange={e => handleChange(e)}
-			/>
-			<button type="submit" onClick={e => handleSubmit(e)}>
+				<input
+					className="shadow appearance-none border rounded py-2 px-3 text-gray-700
+				leading-tight focus:outline-none focus:shadow-outline"
+					type="number"
+					name="tokenId"
+					id="sell-token-id"
+					placeholder="Token's ID to Sell:"
+					value={sellToken.tokenId}
+					min="0"
+					required={true}
+					onChange={e => handleChange(e)}
+				/>
+			</div>
+			<div className="flex flex-col p-2">
+				<label className="p-1" htmlFor="sell-token-price">
+					Sell Price:
+				</label>
+				<input
+					className="shadow appearance-none border rounded py-2 px-3 text-gray-700
+										leading-tight focus:outline-none focus:shadow-outline"
+					type="number"
+					name="sellPrice"
+					id="sell-token-price"
+					placeholder="Amount in wei:"
+					value={sellToken.sellPrice}
+					required={true}
+					min="0"
+					onChange={e => handleChange(e)}
+				/>
+			</div>
+			<button
+				className="bg-green-400 text-white font-bold
+				rounded"
+				type="submit"
+				onClick={e => handleSubmit(e)}
+			>
 				Sell NFT
 			</button>
 		</form>

diff --git a/components/navbar/NavBar.js b/components/navbar/NavBar.js
@@ -6,16 +6,16 @@ const NavBar = () => {
 	const { account } = useContext(Web3Context);
 
 	return (
-		<header>
+		<header className="flex justify-around align-center">
 			<h1>Logo</h1>
 			<nav>
 				{!account ? (
 					<MetaMask />
 				) : (
-					<div className="wallet-connected">
-						<h3>Wallet Connected</h3>
+					<div className="">
+						<h3 className="text-center py-1">Wallet Connected</h3>
 						<button
-							className="check-account-btn"
+							className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-4 rounded"
 							onClick={() => console.log(account)}
 						>
 							Check Account