Merge pull request #32 from pierobassa/improve-profile-buy-ux

pierobassa · Jan 5, 2024 · d5c704a · d5c704a
2 parents af52d93 + adf44a8
commit d5c704a
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 179 deletions.
diff --git a/src/components/Gems/GemsPriceInfo/GemsPriceInfo.tsx b/src/components/Gems/GemsPriceInfo/GemsPriceInfo.tsx
@@ -0,0 +1,83 @@
+import { ethers } from "ethers";
+import { useMemo } from "react";
+import { FaEthereum, FaGem } from "react-icons/fa";
+
+type Props = {
+  buyPrice: ethers.BigNumber;
+  sellPrice: ethers.BigNumber;
+  onBuyClick?: () => void;
+  onSellClick?: () => void;
+};
+
+export const GemsPriceInfo: React.FC<Props> = ({
+  buyPrice,
+  sellPrice,
+  onBuyClick,
+  onSellClick
+}) => {
+  const buyPriceEther = useMemo(() => {
+    return ethers.utils.formatEther(buyPrice);
+  }, [buyPrice]);
+
+  const sellPriceEther = useMemo(() => {
+    return ethers.utils.formatEther(sellPrice);
+  }, [sellPrice]);
+
+  return (
+    <div className="bg-[#FF89A9] flex flex-col items-center rounded-md text-[#2b2b2b] py-1 px-2">
+      <div className="flex flex-row items-center gap-1 ">
+        <div>
+          <FaGem />
+        </div>
+        <p className="font-medium text-lg">Buy/Sell gems</p>
+      </div>
+      <div className="flex flex-row items-center gap-0.5 ">
+        {onBuyClick ? (
+          <button
+            className="py-1 px-2 flex flex-row items-center bg-[#006400] hover:brightness-90 rounded-md "
+            onClick={onBuyClick}
+          >
+            <div className="text-white">
+              <FaEthereum />
+            </div>
+            <div className="pl-1 text-white font-medium">
+              {buyPriceEther} ETH
+            </div>
+          </button>
+        ) : (
+          <div className="py-1 px-2 flex flex-row items-center bg-[#006400] rounded-md ">
+            <div className="text-white">
+              <FaEthereum />
+            </div>
+            <div className="pl-1 text-white font-medium">
+              {buyPriceEther} ETH
+            </div>
+          </div>
+        )}
+
+        {onSellClick ? (
+          <button
+            className="py-1 px-2 flex flex-row items-center bg-[#99324e] hover:brightness-90 rounded-md "
+            onClick={onSellClick}
+          >
+            <div className="text-white">
+              <FaEthereum />
+            </div>
+            <div className="pl-1 text-white font-medium">
+              {sellPriceEther} ETH
+            </div>
+          </button>
+        ) : (
+          <div className="py-1 px-2 flex flex-row items-center bg-[#99324e]  rounded-md ">
+            <div className="text-white">
+              <FaEthereum />
+            </div>
+            <div className="pl-1 text-white font-medium">
+              {sellPriceEther} ETH
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Gems/GemsPriceInfo/index.ts b/src/components/Gems/GemsPriceInfo/index.ts
@@ -0,0 +1 @@
+export * from "./GemsPriceInfo";
diff --git a/src/components/Gems/index.ts b/src/components/Gems/index.ts
@@ -0,0 +1 @@
+export * from "./GemsPriceInfo";
diff --git a/src/components/Pages/Profile/Profile.tsx b/src/components/Pages/Profile/Profile.tsx
@@ -8,9 +8,8 @@ import {
 import { useRouter } from "next/router";
 import { FaGem } from "react-icons/fa";
 import { useCallback, useMemo, useState } from "react";
-import { ethers } from "ethers";
 import dynamic from "next/dynamic";
-import { BaseSpacer } from "@/components";
+import { BaseSpacer, GemsPriceInfo } from "@/components";
 import {
   profileId,
   useProfile,
@@ -20,14 +19,6 @@ import { LensUtils } from "@/utils";
 import { BeatLoader } from "react-spinners";
 import { WithLensContext } from "@/providers";
 
-const TradeDialog = dynamic(
-  () =>
-    import("@/components/TradeDialog/TradeDialog").then((res) => res.default),
-  {
-    ssr: false
-  }
-);
-
 const TransactionDialog = dynamic(
   () =>
     import("@/components/TransactionDialog/TransactionDialog").then(
@@ -109,20 +100,6 @@ function ProfileContent() {
     return gemBalance.toNumber();
   }, [gemBalance]);
 
-  const buyPriceEther = useMemo(() => {
-    return ethers.utils.formatEther(buyPrice);
-  }, [buyPrice]);
-
-  const sellPriceEther = useMemo(() => {
-    return ethers.utils.formatEther(sellPrice);
-  }, [sellPrice]);
-
-  const {
-    isOpen: isTradeDialogOpen,
-    onOpen: openTradeDialog,
-    onClose: closeTradeDialog
-  } = useDisclosure();
-
   const {
     isOpen: isTransactionDialogOpen,
     onOpen: openTransactionDialog,
@@ -131,36 +108,25 @@ function ProfileContent() {
 
   const [isBuy, setIsBuy] = useState(true);
 
-  const onBuyPress = useCallback(() => {
+  const onBuyClick = useCallback(() => {
     setIsBuy(true);
 
-    closeTradeDialog();
-
     openTransactionDialog();
-  }, [closeTradeDialog, openTransactionDialog]);
+  }, [openTransactionDialog]);
 
-  const onSellPress = useCallback(() => {
+  const onSellClick = useCallback(() => {
     setIsBuy(false);
 
-    closeTradeDialog();
-
     openTransactionDialog();
-  }, [closeTradeDialog, openTransactionDialog]);
+  }, [openTransactionDialog]);
 
   const onTxFinish = useCallback(() => {
     closeTransactionDialog();
-    openTradeDialog();
 
     fetchBuyPrice();
     fetchSellPrice();
     fetchGemBalance();
-  }, [
-    closeTransactionDialog,
-    fetchBuyPrice,
-    fetchGemBalance,
-    fetchSellPrice,
-    openTradeDialog
-  ]);
+  }, [closeTransactionDialog, fetchBuyPrice, fetchGemBalance, fetchSellPrice]);
 
   const profilePicture = useMemo(
     () => LensUtils.getProfilePicture(profile),
@@ -186,15 +152,14 @@ function ProfileContent() {
               </div>
             </div>
             <div className="flex flex-col gap-2 items-center">
-              <button
-                className="py-2 px-3 bg-[#FF89A9] rounded-md text-[#2b2b2b] text-xs md:text-sm flex items-center justify-between"
-                onClick={openTradeDialog}
-              >
-                <FaGem />
-                <div className="pl-2 font-medium text-base">BUY GEMS</div>
-              </button>
+              <GemsPriceInfo
+                buyPrice={buyPrice}
+                sellPrice={sellPrice}
+                onBuyClick={onBuyClick}
+                onSellClick={onSellClick}
+              />
               <div className="flex items-center">
-                <p className="font-light ">You own {userGemBalance}</p>
+                <p className="font-medium ">You own {userGemBalance}</p>
                 {/* TODO: Replace with balance of gems owned */}
                 <div className="pl-1">
                   <FaGem />
@@ -229,20 +194,6 @@ function ProfileContent() {
             )}
           </div>
         </div>
-        <TradeDialog
-          userName={userInfo?.name ?? ""}
-          userImg={profilePicture}
-          userAddress={smartAccountAddress ?? ""}
-          gemSubjectAddress={profileSmartAccountAddress ?? ""}
-          isOpen={isTradeDialogOpen}
-          buyPriceEther={buyPriceEther}
-          sellPriceEther={sellPriceEther}
-          gemBalanceEther={userGemBalance}
-          onBuyPress={onBuyPress}
-          onSellPress={onSellPress}
-          openModal={openTradeDialog}
-          closeModal={closeTradeDialog}
-        />
 
         <TransactionDialog
           isOpen={isTransactionDialogOpen}

diff --git a/src/components/TradeDialog/TradeDialog.tsx b/src/components/TradeDialog/TradeDialog.tsx
diff --git a/src/components/TradeDialog/index.ts b/src/components/TradeDialog/index.ts
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -2,6 +2,7 @@ export * from "./AccountBox";
 export * from "./AccountCard";
 export * from "./Base";
 export * from "./Breadcrumbs";
+export * from "./Gems";
 export * from "./ImageDropzone";
 export * from "./InputField";
 export * from "./Lens";
@@ -10,5 +11,4 @@ export * from "./Navbar";
 export * from "./SearchBar";
 export * from "./SocialLoginWrapper";
 export * from "./SuccessAnimation";
-export * from "./TradeDialog";
 export * from "./TransactionDialog";