Modify Ether Input

ceeriil · Mar 21, 2024 · 9291e3f · 9291e3f
1 parent 6840b46
commit 9291e3f
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 14 deletions.
diff --git a/packages/nextjs/components/loogies/auction/Auction.tsx b/packages/nextjs/components/loogies/auction/Auction.tsx
@@ -1,11 +1,14 @@
 import React, { useState } from "react";
 import { Modal } from "../Modal";
+import { AuctionBidLists } from "./AuctionBidLists";
 import { AuctionBids } from "./AuctionBids";
 import { AuctionDetails } from "./AuctionDetails";
 import LoogieComponent from "~~/components/loogies";
+import { EtherInput } from "~~/components/scaffold-eth";
 
 export const Auction = () => {
   const [showModal, setShowModal] = useState(false);
+  const [ethAmount, SetEthAmount] = useState("");
 
   const handleCloseModal = () => {
     setShowModal(false);
@@ -21,12 +24,7 @@ export const Auction = () => {
         <AuctionDetails name={"Loggies #1234"} />
 
         <div className="mt-6 mb-4 flex">
-          <input
-            type="text"
-            className="border bg-transparent py-2 px-4 w-full border-black"
-            placeholder="0.01 eth or More"
-          />
-          {/*     <EtherInput onChange={() => console.log("hi")} value="0.1" disabled={false} /> */}
+          <EtherInput onChange={amount => SetEthAmount(amount)} value={ethAmount} disabled={false} />
           <button className="btn btn-primary text-white rounded-none px-16">Place Bid</button>
         </div>
 
@@ -44,8 +42,7 @@ export const Auction = () => {
 
       {showModal && (
         <Modal onClose={handleCloseModal} title={"Bid for Loogies"}>
-          <AuctionBids address="0x35b5Fd4102e30540A3A3b388A4556D8EeAF12DC6" amount={0.4} />
-          <AuctionBids address="0x35b5Fd4102e30540A3A3b388A4556D8EeAF12DC6" amount={0.04} />
+          <AuctionBidLists />
         </Modal>
       )}
     </div>

diff --git a/packages/nextjs/components/loogies/auction/AuctionBidLists.tsx b/packages/nextjs/components/loogies/auction/AuctionBidLists.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import { AuctionBids } from "./AuctionBids";
+
+export const AuctionBidLists = () => {
+  return (
+    <>
+      <AuctionBids address="0x35b5Fd4102e30540A3A3b388A4556D8EeAF12DC6" amount={0.4} />
+      <AuctionBids address="0x35b5Fd4102e30540A3A3b388A4556D8EeAF12DC6" amount={0.04} />
+    </>
+  );
+};
diff --git a/packages/nextjs/components/loogies/auction/AuctionBids.tsx b/packages/nextjs/components/loogies/auction/AuctionBids.tsx
@@ -5,7 +5,7 @@ export const AuctionBids = ({ address, amount }: { address: string; amount: numb
   return (
     <div className="flex justify-between border-b">
       <Address address={address} size="lg" />
-      <p className="font-bold text-lg">{amount}</p>
+      <p className="font-bold text-lg">{amount} Ξ</p>
     </div>
   );
 };
diff --git a/packages/nextjs/components/scaffold-eth/Input/EtherInput.tsx b/packages/nextjs/components/scaffold-eth/Input/EtherInput.tsx
@@ -110,7 +110,7 @@ export const EtherInput = ({
       placeholder={placeholder}
       onChange={handleChangeNumber}
       disabled={disabled}
-      prefix={<span className="pl-4 -mr-2 text-accent self-center">{internalUsdMode ? "$" : "Ξ"}</span>}
+      prefix={<span className="pl-4 mr-2 text-black self-center">{internalUsdMode ? "$" : "Ξ"}</span>}
       suffix={
         <div
           className={`${
@@ -121,11 +121,11 @@ export const EtherInput = ({
           data-tip="Unable to fetch price"
         >
           <button
-            className="btn btn-primary h-[2.2rem] min-h-[2.2rem]"
+            className="btn border border-black h-[2.2rem] min-h-[2.2rem] mr-4 mt-1"
             onClick={toggleMode}
             disabled={!internalUsdMode && !nativeCurrencyPrice}
           >
-            <ArrowsRightLeftIcon className="h-3 w-3 cursor-pointer" aria-hidden="true" />
+            <ArrowsRightLeftIcon className="h-4 w-4 cursor-pointer" aria-hidden="true" />
           </button>
         </div>
       }

diff --git a/packages/nextjs/components/scaffold-eth/Input/InputBase.tsx b/packages/nextjs/components/scaffold-eth/Input/InputBase.tsx
@@ -47,10 +47,10 @@ export const InputBase = <T extends { toString: () => string } | undefined = str
   }, [reFocus]);
 
   return (
-    <div className={`flex border-2 border-base-300 bg-base-200 rounded-full text-accent ${modifier}`}>
+    <div className={`flex border-2 border-black bg-base-200 text-black ${modifier}`}>
       {prefix}
       <input
-        className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-400 h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/50 text-gray-400"
+        className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent focus:text-gray-400 h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:black text-black pt-2"
         placeholder={placeholder}
         name={name}
         value={value?.toString()}