From adf44a80e0a425d5febb7ea6e52bfe5dd28809c0 Mon Sep 17 00:00:00 2001 From: Erik Nucibella Date: Mon, 25 Sep 2023 19:14:31 -0400 Subject: [PATCH] refactor(Profile): remove tradeDialog, add GemsPriceInfo component, polish ui --- .../Gems/GemsPriceInfo/GemsPriceInfo.tsx | 83 +++++++++++++ src/components/Gems/GemsPriceInfo/index.ts | 1 + src/components/Gems/index.ts | 1 + src/components/Pages/Profile/Profile.tsx | 75 ++---------- src/components/TradeDialog/TradeDialog.tsx | 115 ------------------ src/components/TradeDialog/index.ts | 1 - src/components/index.ts | 2 +- 7 files changed, 99 insertions(+), 179 deletions(-) create mode 100644 src/components/Gems/GemsPriceInfo/GemsPriceInfo.tsx create mode 100644 src/components/Gems/GemsPriceInfo/index.ts create mode 100644 src/components/Gems/index.ts delete mode 100644 src/components/TradeDialog/TradeDialog.tsx delete mode 100644 src/components/TradeDialog/index.ts diff --git a/src/components/Gems/GemsPriceInfo/GemsPriceInfo.tsx b/src/components/Gems/GemsPriceInfo/GemsPriceInfo.tsx new file mode 100644 index 0000000..9f28e63 --- /dev/null +++ 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 = ({ + buyPrice, + sellPrice, + onBuyClick, + onSellClick +}) => { + const buyPriceEther = useMemo(() => { + return ethers.utils.formatEther(buyPrice); + }, [buyPrice]); + + const sellPriceEther = useMemo(() => { + return ethers.utils.formatEther(sellPrice); + }, [sellPrice]); + + return ( +
+
+
+ +
+

Buy/Sell gems

+
+
+ {onBuyClick ? ( + + ) : ( +
+
+ +
+
+ {buyPriceEther} ETH +
+
+ )} + + {onSellClick ? ( + + ) : ( +
+
+ +
+
+ {sellPriceEther} ETH +
+
+ )} +
+
+ ); +}; diff --git a/src/components/Gems/GemsPriceInfo/index.ts b/src/components/Gems/GemsPriceInfo/index.ts new file mode 100644 index 0000000..e744efd --- /dev/null +++ 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 new file mode 100644 index 0000000..e744efd --- /dev/null +++ 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 index 0d68fe4..3db0f1c 100644 --- 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() {
- +
-

You own {userGemBalance}

+

You own {userGemBalance}

{/* TODO: Replace with balance of gems owned */}
@@ -229,20 +194,6 @@ function ProfileContent() { )}
- void; - onSellPress: () => void; - openModal: () => void; - closeModal: () => void; -}; - -export default function TradeDialog({ - userImg, - userName, - isOpen, - buyPriceEther, - sellPriceEther, - gemBalanceEther, - onBuyPress, - onSellPress, - openModal, - closeModal -}: Props) { - return ( - -
-

TRADE GEMS

-
-
-
- user-profile-img -
-

{userName}

-
-

You own {gemBalanceEther}

- {/* TODO: Replace with balance of gems owned */} -
- -
-
-
-
-
-
-
-
- -
-

Gem Price

-
- -
-
- -
-
- {buyPriceEther} ETH -
-
-
-
-
- -
- -
- -
-
- -
- - - -
- -
-
- Sell price: {sellPriceEther} ETH -
-
-
-
- - ); -} diff --git a/src/components/TradeDialog/index.ts b/src/components/TradeDialog/index.ts deleted file mode 100644 index b6c3e70..0000000 --- a/src/components/TradeDialog/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./TradeDialog"; diff --git a/src/components/index.ts b/src/components/index.ts index c099622..bcaf949 100644 --- 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";