add currency code indicator to marketplace

commitlint.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['@commitlint/config-conventional']
-};
+  extends: ["@commitlint/config-conventional"],
+};

components/modals/CreateListingModal.tsx

@@ -5,12 +5,14 @@ import { FaBolt, FaDollarSign, FaFire } from "react-icons/fa";
 import { IconType } from "react-icons";
 import router from "next/router";
 import { ListingType } from "@/types/ListingType";
+import { codes } from "currency-codes";
 
 type Props = {
   isOpen: boolean;
   setOpen: Dispatch<SetStateAction<boolean>>;
 };
 
+const currencyOptions = ["USD", ""];
 const Input = (props: {
   className?: string;
   placeholder: string;
@@ -49,13 +51,15 @@ const ModalBody = (props: { setOpen: Dispatch<SetStateAction<boolean>> }) => {
   const [listingType, setListingType] = useState<ListingType>(
     ListingType.controller
   );
+  const [currencyType, setCurrencyType] = useState("USD");
 
   const createListing = async () => {
     const data = {
       title: title,
       content: description,
       price: price,
       type: listingType,
+      currencyType: currencyType,
     };
 
     await fetch(`${API_URL}/api/@me/post`, {
@@ -103,7 +107,8 @@ const ModalBody = (props: { setOpen: Dispatch<SetStateAction<boolean>> }) => {
               <select
                 className="w-full border border-[#2A2A2A] bg-card outline-none rounded-lg placeholder-lightGray text-lightGray px-3 py-[6px] text-sm pl-8"
                 value={listingType}
-                onChange={(e) => {setListingType(e.target.value as ListingType) 
+                onChange={(e) => {
+                  setListingType(e.target.value as ListingType);
                 }}
               >
                 {Object.entries(ListingType).map((type) => (
@@ -123,6 +128,23 @@ const ModalBody = (props: { setOpen: Dispatch<SetStateAction<boolean>> }) => {
           </div>
         </div>
 
+        <div>
+          <p className="uppercase text-xs text-lightGray mb-2">Currency Type</p>
+          <div className="flex gap-x-2">
+            <select
+              className="w-full border border-[#2A2A2A] bg-card outline-none rounded-lg placeholder-lightGray text-lightGray px-3 py-[6px] text-sm pl-8"
+              value={currencyType}
+              onChange={(e) => setCurrencyType(e.target.value)}
+            >
+              {codes().map((currency) => (
+                <option key={currency} value={currency}>
+                  {currency}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+
         <button
           className="border border-[#2A2A2A] bg-card px-3 rounded-lg py-1 text-lightGray text-sm hover:border-gray-600"
           onClick={() => createListing()}

components/screens/marketplace/MarketplacePage.tsx

@@ -39,16 +39,23 @@ export const MarketplacePage = (props: any) => {
               style={{ backgroundColor: partTypeColour() }}
               className="px-2 py-1 text-white font-medium uppercase rounded-md text-xs"
             >
-              {ListingType[props.marketplacePost.type as keyof typeof ListingType]}
+              {
+                ListingType[
+                  props.marketplacePost.type as keyof typeof ListingType
+                ]
+              }
             </span>
           </div>
           <p className="text-lightGray break-words">
             {props.marketplacePost.content}
           </p>
 
           <p className="flex bg-card border border-[#2a2a2a] rounded-lg py-2 px-4 text-xl text-lightGray mt-16">
-            <FaMoneyBill className="mr-2 text-3xl" /> $
-            {props.marketplacePost.price}
+            <FaMoneyBill className="mr-2 text-3xl" />
+            {props.marketplacePost.price}{" "}
+            {props.marketplacePost.currencyType != null
+              ? props.marketplacePost.currencyType
+              : "Invalid Currency Type"}
           </p>
 
           <div className="flex mt-6 items-center pb-5 border-b-2 border-[#2a2a2a] mb-5"></div>

package.json

@@ -24,6 +24,7 @@
     "autoprefixer": "10.4.14",
     "axios": "^1.4.0",
     "chalk": "^5.2.0",
+    "currency-codes": "^2.1.0",
     "eslint": "8.40.0",
     "eslint-config-next": "13.4.2",
     "export-from-json": "^1.7.2",

pages/api/@me/post.ts

@@ -21,6 +21,7 @@ export default async function marketplaceAPI(
         title: body.title,
         content: body.content,
         type: body.type,
+        currencyType: body.currencyType as string,
         published: false,
         price: Number(body.price),
       },

prisma/schema.prisma

@@ -76,6 +76,7 @@ model Post {
   content   String?
   price     Int
   type      PostType
+  currencyType String?
   media     String[]
   published Boolean  @default(false)
   author    User     @relation(fields: [authorId], references: [id])

yarn.lock

@@ -1108,6 +1108,14 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+currency-codes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/currency-codes/-/currency-codes-2.1.0.tgz#6d84a1b7fec70ecb9ef64e57bf60f4271899044c"
+  integrity sha512-aASwFNP8VjZ0y0PWlSW7c9N/isYTLxK6OCbm7aVuQMk7dWO2zgup9KGiFQgeL9OGL5P/ulvCHcjQizmuEeZXtw==
+  dependencies:
+    first-match "~0.0.1"
+    nub "~0.0.0"
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -1718,6 +1726,11 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
+first-match@~0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/first-match/-/first-match-0.0.1.tgz#a60ec642700f0f437234ebb7ec3f382476e542fd"
+  integrity sha512-VvKbnaxrC0polTFDC+teKPTdl2mn6B/KUW+WB3C9RzKDeNwbzfLdnUz3FxC+tnjvus6bI0jWrWicQyVIPdS37A==
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -2780,6 +2793,11 @@ npm-run-path@^5.1.0:
   dependencies:
     path-key "^4.0.0"
 
+nub@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/nub/-/nub-0.0.0.tgz#b369bd32bdde66af59605c3b0520bc219dccc04f"
+  integrity sha512-dK0Ss9C34R/vV0FfYJXuqDAqHlaW9fvWVufq9MmGF2umCuDbd5GRfRD9fpi/LiM0l4ZXf8IBB+RYmZExqCrf0w==
+
 oauth@^0.9.15:
   version "0.9.15"
   resolved "https://registry.yarnpkg.com/oauth/-/oauth-0.9.15.tgz#bd1fefaf686c96b75475aed5196412ff60cfb9c1"