[DRAFT] feat: Gems profile dialogs

src/components/Base/BaseDialog/BaseDialog.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment } from "react";
+
+type Props = {
+  isOpen: boolean;
+  children: React.ReactNode;
+  openModal: () => void;
+  closeModal: () => void;
+};
+
+export const BaseDialog = ({ isOpen, children, closeModal }: Props) => {
+  return (
+    <>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black bg-opacity-25" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden text-left align-middle shadow-xl transition-all">
+                  {children}
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+};

src/components/Base/BaseDialog/index.ts

@@ -0,0 +1 @@
+export * from "./BaseDialog";

src/components/Base/BaseSeparator/BaseSeparator.tsx

@@ -0,0 +1,15 @@
+type Props = {
+  color: string;
+};
+
+export const BaseSeparator = ({ color }: Props) => {
+  return (
+    <div
+      style={{
+        backgroundColor: color,
+        width: "100%",
+        height: 1
+      }}
+    />
+  );
+};

src/components/Base/BaseSeparator/index.ts

@@ -0,0 +1 @@
+export * from "./BaseSeparator";

src/components/Base/BaseSpacer/BaseSpacer.tsx

@@ -0,0 +1,15 @@
+type Props = {
+  height?: number;
+  width?: number;
+};
+
+export const BaseSpacer = ({ height = 0, width = 0 }: Props) => {
+  return (
+    <div
+      style={{
+        height: `${height}px`,
+        width: `${width}px`
+      }}
+    />
+  );
+};

src/components/Base/BaseSpacer/index.ts

@@ -0,0 +1 @@
+export * from "./BaseSpacer";

src/components/Base/index.ts

@@ -0,0 +1,3 @@
+export * from "./BaseSeparator";
+export * from "./BaseSpacer";
+export * from "./BaseDialog";

src/components/CreatePost/CreatePost.tsx

@@ -0,0 +1,108 @@
+export default function CreatePost() {
+  return (
+    <>
+      <div className="w-full mb-4 border rounded-lg  bg-[#2b2b2b] border-gray-600">
+        <div className="flex items-center justify-between px-3 py-2 border-b border-gray-600">
+          <div className="flex flex-wrap items-center  sm:divide-x divide-gray-600">
+            <div className="flex items-center space-x-1 sm:pr-4">
+              <button
+                type="button"
+                className="p-2  rounded cursor-pointer  text-[#ff89a9] hover:text-white hover:bg-gray-600"
+              >
+                <svg
+                  className="w-4 h-4"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 12 20"
+                >
+                  <path
+                    stroke="currentColor"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M1 6v8a5 5 0 1 0 10 0V4.5a3.5 3.5 0 1 0-7 0V13a2 2 0 0 0 4 0V6"
+                  />
+                </svg>
+                <span className="sr-only">Attach file</span>
+              </button>
+              <button
+                type="button"
+                className="p-2  rounded cursor-pointer  text-[#ff89a9] hover:text-white hover:bg-gray-600"
+              >
+                <svg
+                  className="w-4 h-4"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 16 20"
+                >
+                  <path d="M8 0a7.992 7.992 0 0 0-6.583 12.535 1 1 0 0 0 .12.183l.12.146c.112.145.227.285.326.4l5.245 6.374a1 1 0 0 0 1.545-.003l5.092-6.205c.206-.222.4-.455.578-.7l.127-.155a.934.934 0 0 0 .122-.192A8.001 8.001 0 0 0 8 0Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
+                </svg>
+                <span className="sr-only">Embed map</span>
+              </button>
+              <button
+                type="button"
+                className="p-2 rounded cursor-pointer   text-[#ff89a9] hover:text-white hover:bg-gray-600"
+              >
+                <svg
+                  className="w-4 h-4"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 16 20"
+                >
+                  <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z" />
+                  <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z" />
+                </svg>
+                <span className="sr-only">Upload image</span>
+              </button>
+              <button
+                type="button"
+                className="p-2  rounded cursor-pointer   text-[#ff89a9] hover:text-white hover:bg-gray-600"
+              >
+                <svg
+                  className="w-4 h-4"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 16 20"
+                >
+                  <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z" />
+                  <path d="M14.067 0H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.933-2ZM6.709 13.809a1 1 0 1 1-1.418 1.409l-2-2.013a1 1 0 0 1 0-1.412l2-2a1 1 0 0 1 1.414 1.414L5.412 12.5l1.297 1.309Zm6-.6-2 2.013a1 1 0 1 1-1.418-1.409l1.3-1.307-1.295-1.295a1 1 0 0 1 1.414-1.414l2 2a1 1 0 0 1-.001 1.408v.004Z" />
+                </svg>
+                <span className="sr-only">Format code</span>
+              </button>
+              <button
+                type="button"
+                className="p-2  rounded cursor-pointer text-[#ff89a9] hover:text-white hover:bg-gray-600"
+              >
+                <svg
+                  className="w-4 h-4"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM13.5 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-7 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm3.5 9.5A5.5 5.5 0 0 1 4.6 11h10.81A5.5 5.5 0 0 1 10 15.5Z" />
+                </svg>
+                <span className="sr-only">Add emoji</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="px-4 py-2 rounded-b-lg bg-[#434343]">
+          <textarea
+            id="editor"
+            rows={8}
+            className="block w-full px-0 text-sm border-0 bg-[#434343] text-white placeholder-stone-200 ring-black ring-opacity-5 focus:outline-none"
+            placeholder="What are you thinking..."
+            required
+          />
+        </div>
+      </div>
+      <button className="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 hover:bg-blue-800">
+        Publish post
+      </button>
+    </>
+  );
+}

src/components/CreatePost/index.ts

@@ -0,0 +1 @@
+export * from "./CreatePost";

src/components/Lens/LensProfileCard/GemsInfo.tsx

@@ -13,27 +13,12 @@ type Props = {
  * @returns
  */
 export const GemsInfo: React.FC<Props> = ({ gemSubject, address }) => {
-  const {
-    // buyPrice,
-    // sellPrice,
-    gemBalance
-    // fetchBuyPrice,
-    // fetchGemBalance,
-    // fetchSellPrice
-  } = useGemsInfo(gemSubject, address);
+  const { gemBalance } = useGemsInfo(gemSubject, address);
 
   const userGemBalance = useMemo(() => {
     return gemBalance.toNumber();
   }, [gemBalance]);
 
-  // const buyPriceEther = useMemo(() => {
-  //   return ethers.utils.formatEther(buyPrice);
-  // }, [buyPrice]);
-
-  // const sellPriceEther = useMemo(() => {
-  //   return ethers.utils.formatEther(sellPrice);
-  // }, [sellPrice]);
-
   return (
     <div className="flex items-center">
       <p className="font-light ">You own {userGemBalance}</p>

src/components/TradeDialog/TradeDialog.tsx

@@ -0,0 +1,116 @@
+import { FaEthereum, FaGem } from "react-icons/fa";
+import { BaseDialog, BaseSeparator, BaseSpacer } from "../Base";
+import { DEFUALT_USER_IMG_PLACEHOLDER } from "../../Constants/Media";
+import Image from "next/image";
+
+type Props = {
+  userName: string;
+  userImg: string;
+  userAddress: string;
+  gemSubjectAddress: string;
+  isOpen: boolean;
+  buyPriceEther: string;
+  sellPriceEther: string;
+  gemBalanceEther: number;
+  onBuyPress: () => void;
+  onSellPress: () => void;
+  openModal: () => void;
+  closeModal: () => void;
+};
+
+export default function TradeDialog({
+  userImg,
+  userName,
+  isOpen,
+  buyPriceEther,
+  sellPriceEther,
+  gemBalanceEther,
+  onBuyPress,
+  onSellPress,
+  openModal,
+  closeModal
+}: Props) {
+  return (
+    <BaseDialog isOpen={isOpen} openModal={openModal} closeModal={closeModal}>
+      <div className="flex flex-col items-center justify-center w-full bg-stone-600 rounded-2xl py-6 px-4">
+        <p className="text-white font-medium uppercase">TRADE GEMS</p>
+        <div className="mt-3 w-full">
+          <div className="flex flex-row items-center justify-between ">
+            <div className="flex flex-row items-center">
+              <Image
+                className="h-12 w-12 md:h-20 md:w-20 rounded-full"
+                src={userImg ?? DEFUALT_USER_IMG_PLACEHOLDER}
+                alt="user-profile-img"
+              />
+              <div className="pl-3">
+                <p className="font-medium text-base">{userName}</p>
+                <div className="flex items-center">
+                  <p className="font-light ">You own {gemBalanceEther}</p>
+                  {/* TODO: Replace with balance of gems owned */}
+                  <div className="pl-1">
+                    <FaGem />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="bg-[#FF89A9] rounded-md text-[#2b2b2b] text-xs md:text-sm">
+              <div className="py-1 px-2">
+                <div className="flex items-center">
+                  <div>
+                    <FaGem />
+                  </div>
+                  <p className="font-medium pl-2">Gem Price</p>
+                </div>
+
+                <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">
+                    {buyPriceEther} ETH
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="py-6">
+            <BaseSeparator color="#444444" />
+          </div>
+
+          <div>
+            <div className="w-full flex items-center justify-center">
+              <button
+                className="bg-[#FF89A9] hover:brightness-90 rounded-md text-[#2b2b2b] w-[17rem]"
+                onClick={onBuyPress}
+              >
+                <p className="py-2 px-2 font-medium uppercase text-base">
+                  Buy gem
+                </p>
+              </button>
+            </div>
+
+            <BaseSpacer height={12} />
+
+            <div className="w-full flex items-center justify-center">
+              <button
+                className="bg-stone-700 hover:brightness-90 rounded-md text-white w-[17rem]"
+                onClick={onSellPress}
+              >
+                <p className="py-2 px-2 font-medium uppercase text-base">
+                  Sell gem
+                </p>
+              </button>
+            </div>
+            <div
+              className="pt-2 w-full flex items-center justify-center font-light text-sm text-stone-300"
+              onClick={onSellPress}
+            >
+              Sell price: {sellPriceEther} ETH
+            </div>
+          </div>
+        </div>
+      </div>
+    </BaseDialog>
+  );
+}

src/components/TradeDialog/index.ts

@@ -0,0 +1 @@
+export * from "./TradeDialog";