improv(PGIO-37): Add a Prettier config on repo (#48)

* Installs and adds a series of Prettier rules to format our codebase * Adds an ignore file to place folders and files to be ignored from this formatting * Creates a VSCode extension suggestions file * Formats the whole codebase * Adds a tailwind plugin for Prettier, sorting the whole codebase classnames
SwaprHQ · Jun 25, 2024 · 7041aea · 7041aea
1 parent 27b68e2
commit 7041aea
Show file tree

Hide file tree

Showing 77 changed files with 5,639 additions and 5,999 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,6 @@
+# Ignore generated folders
+./dist
+./node_modules
+
+# Ignore build and types files
+.next-env.d.ts
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,12 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "arrowParens": "avoid",
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "bracketSpacing": true,
+  "printWidth": 90,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindConfig": "./tailwind.config.ts",
+  "tailwindFunctions": ["cva", "cx"]
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"]
+}
diff --git a/app/components/CardBet.tsx b/app/components/CardBet.tsx
@@ -1,28 +1,28 @@
-"use client";
+'use client';
 
-import { useQuery } from "@tanstack/react-query";
-import { cx } from "class-variance-authority";
-import Link from "next/link";
-import { useAccount, useConfig } from "wagmi";
+import { useQuery } from '@tanstack/react-query';
+import { cx } from 'class-variance-authority';
+import Link from 'next/link';
+import { useAccount, useConfig } from 'wagmi';
 
-import { Button, Logo, Tag } from "swapr-ui";
-import { Card } from "@/app/components/ui";
+import { Button, Logo, Tag } from 'swapr-ui';
+import { Card } from '@/app/components/ui';
 
-import { UserPosition } from "@/queries/conditional-tokens/types";
-import { getConditionMarket, getMarketUserTrades } from "@/queries/omen";
-import { remainingTime } from "@/utils/dates";
+import { UserPosition } from '@/queries/conditional-tokens/types';
+import { getConditionMarket, getMarketUserTrades } from '@/queries/omen';
+import { remainingTime } from '@/utils/dates';
 import {
   Market,
   Position,
   tradesCollateralAmountUSDSpent,
   tradesOutcomeBalance,
-} from "@/entities";
-import { redeemPositions } from "@/hooks/contracts";
-import { WXDAI } from "@/constants";
-import { waitForTransactionReceipt } from "wagmi/actions";
-import { useState } from "react";
-import { ModalId, useModal } from "@/context/ModalContext";
-import { TransactionModal } from "./TransactionModal";
+} from '@/entities';
+import { redeemPositions } from '@/hooks/contracts';
+import { WXDAI } from '@/constants';
+import { waitForTransactionReceipt } from 'wagmi/actions';
+import { useState } from 'react';
+import { ModalId, useModal } from '@/context/ModalContext';
+import { TransactionModal } from './TransactionModal';
 
 interface BetProps {
   userPosition: UserPosition;
@@ -34,12 +34,12 @@ export const CardBet = ({ userPosition }: BetProps) => {
 
   const config = useConfig();
   const { address } = useAccount();
-  const [txHash, setTxHash] = useState("");
+  const [txHash, setTxHash] = useState('');
   const [isTxLoading, setIsTxLoading] = useState(false);
   const { openModal } = useModal();
 
   const { data, isLoading } = useQuery({
-    queryKey: ["getConditionMarket", position.conditionId],
+    queryKey: ['getConditionMarket', position.conditionId],
     queryFn: async () =>
       getConditionMarket({
         id: position.conditionId,
@@ -48,11 +48,10 @@ export const CardBet = ({ userPosition }: BetProps) => {
   });
 
   const market =
-    data?.conditions[0] &&
-    new Market(data?.conditions[0]?.fixedProductMarketMakers[0]);
+    data?.conditions[0] && new Market(data?.conditions[0]?.fixedProductMarketMakers[0]);
 
   const { data: userTrades, isLoading: isUserTradesLoading } = useQuery({
-    queryKey: ["getMarketUserTrades", address, market?.data.id, outcomeIndex],
+    queryKey: ['getMarketUserTrades', address, market?.data.id, outcomeIndex],
     queryFn: async () => {
       if (!!address && !!market)
         return getMarketUserTrades({
@@ -72,7 +71,7 @@ export const CardBet = ({ userPosition }: BetProps) => {
     fpmmTrades: userTrades?.fpmmTrades,
   });
 
-  const balance = outcomeBalance ? outcomeBalance.toFixed(2) : "-";
+  const balance = outcomeBalance ? outcomeBalance.toFixed(2) : '-';
 
   if (isLoading || isUserTradesLoading) return <LoadingCardBet />;
 
@@ -84,9 +83,9 @@ export const CardBet = ({ userPosition }: BetProps) => {
 
   const outcomeAmountString = market.isClosed
     ? isWinner
-      ? "You won"
-      : "You lost"
-    : "Potential win";
+      ? 'You won'
+      : 'You lost'
+    : 'Potential win';
 
   const condition = userPosition.position.conditions[0];
 
@@ -120,19 +119,13 @@ export const CardBet = ({ userPosition }: BetProps) => {
   return (
     <Card
       className={cx(
-        "w-full bg-gradient-to-b from-[#F1F1F1] dark:from-[#131313]",
-        isWinner &&
-          "from-[#F2f2F2] to-[#d0ffd6] dark:from-[#131313] dark:to-[#11301F]",
-        isLoser &&
-          "from-[#F2f2F2] to-[#f4cbc4] dark:from-[#131313] dark:to-[#301111]"
+        'w-full bg-gradient-to-b from-[#F1F1F1] dark:from-[#131313]',
+        isWinner && 'from-[#F2f2F2] to-[#d0ffd6] dark:from-[#131313] dark:to-[#11301F]',
+        isLoser && 'from-[#F2f2F2] to-[#f4cbc4] dark:from-[#131313] dark:to-[#301111]'
       )}
     >
-      <Link
-        key={market.data.id}
-        href={`markets?id=${market.data.id}`}
-        className="block"
-      >
-        <section className="p-4 h-[144px] flex flex-col justify-between space-y-4">
+      <Link key={market.data.id} href={`markets?id=${market.data.id}`} className="block">
+        <section className="flex h-[144px] flex-col justify-between space-y-4 p-4">
           <div className="flex items-center justify-between">
             <div className="flex space-x-2">
               <Tag colorScheme="quaternary" size="sm" className="capitalize">
@@ -146,21 +139,19 @@ export const CardBet = ({ userPosition }: BetProps) => {
               {remainingTime(market.closingDate)}
             </p>
           </div>
-          <div className="flex space-x-4 ">
-            <div className="size-[40px] bg-text-low-em rounded-8 bg-gradient-to-r from-[#cb8fc1] to-[#b459c6]" />
-            <div className="flex-1 text-normal md:text-xl font-semibold text-text-high-em h-[80px] overflow-y-auto">
+          <div className="flex space-x-4">
+            <div className="size-[40px] rounded-8 bg-text-low-em bg-gradient-to-r from-[#cb8fc1] to-[#b459c6]" />
+            <div className="text-normal h-[80px] flex-1 overflow-y-auto font-semibold text-text-high-em md:text-xl">
               {market.data.title}
             </div>
           </div>
         </section>
       </Link>
-      <section className="flex items-center h-[56px] md:h-[48px] px-4 border-t border-outline-base-em">
-        <div className="flex items-center justify-between w-full space-x-4">
-          <div className="flex flex-col items-start md:flex-row md:items-center md:space-x-2 space-y-0.5">
+      <section className="flex h-[56px] items-center border-t border-outline-base-em px-4 md:h-[48px]">
+        <div className="flex w-full items-center justify-between space-x-4">
+          <div className="flex flex-col items-start space-y-0.5 md:flex-row md:items-center md:space-x-2">
             <div className="flex items-center space-x-1">
-              <p className="text-sm font-semibold text-text-med-em">
-                Bet amount:
-              </p>
+              <p className="text-sm font-semibold text-text-med-em">Bet amount:</p>
               <p className="text-sm font-semibold text-text-high-em">
                 {collateralAmountUSDSpent?.toFixed(2)} {WXDAI.symbol}
               </p>
@@ -177,7 +168,7 @@ export const CardBet = ({ userPosition }: BetProps) => {
               <p className="text-sm font-semibold text-text-high-em">
                 {!market.isClosed || isWinner
                   ? balance
-                  : collateralAmountUSDSpent?.toFixed(2)}{" "}
+                  : collateralAmountUSDSpent?.toFixed(2)}{' '}
                 {WXDAI.symbol}
               </p>
               <Logo
@@ -189,12 +180,7 @@ export const CardBet = ({ userPosition }: BetProps) => {
           </div>
           {canClaim && (
             <>
-              <Button
-                size="sm"
-                colorScheme="success"
-                variant="pastel"
-                onClick={redeem}
-              >
+              <Button size="sm" colorScheme="success" variant="pastel" onClick={redeem}>
                 Reedem
               </Button>
               <TransactionModal isLoading={isTxLoading} txHash={txHash} />
@@ -207,17 +193,17 @@ export const CardBet = ({ userPosition }: BetProps) => {
 };
 
 export const LoadingCardBet = () => (
-  <Card className="md:w-[760px] h-[194px] p-4 flex flex-col justify-between">
+  <Card className="flex h-[194px] flex-col justify-between p-4 md:w-[760px]">
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <div className="w-48 h-8 rounded-8 bg-outline-low-em animate-pulse"></div>
-        <div className="w-32 h-8 rounded-8 bg-outline-low-em animate-pulse"></div>
-      </div>{" "}
-      <div className="h-20 rounded-8 bg-outline-low-em animate-pulse"></div>
+        <div className="h-8 w-48 animate-pulse rounded-8 bg-outline-low-em"></div>
+        <div className="h-8 w-32 animate-pulse rounded-8 bg-outline-low-em"></div>
+      </div>{' '}
+      <div className="h-20 animate-pulse rounded-8 bg-outline-low-em"></div>
     </div>
     <div className="flex items-center justify-between">
-      <div className="w-48 h-6 rounded-8 bg-outline-low-em animate-pulse"></div>
-      <div className="w-20 h-6 rounded-8 bg-outline-low-em animate-pulse"></div>
+      <div className="h-6 w-48 animate-pulse rounded-8 bg-outline-low-em"></div>
+      <div className="h-6 w-20 animate-pulse rounded-8 bg-outline-low-em"></div>
     </div>
   </Card>
 );
diff --git a/app/components/CardMarket.tsx b/app/components/CardMarket.tsx
@@ -1,12 +1,12 @@
-"use client";
+'use client';
 
-import { Logo } from "swapr-ui";
+import { Logo } from 'swapr-ui';
 
-import { OutcomeBar } from "@/app/components";
-import { Card, ScrollArea } from "@/app/components/ui";
-import { FixedProductMarketMaker } from "@/queries/omen";
-import { formattedNumberDollars } from "@/utils/currencies";
-import { remainingTime } from "@/utils/dates";
+import { OutcomeBar } from '@/app/components';
+import { Card, ScrollArea } from '@/app/components/ui';
+import { FixedProductMarketMaker } from '@/queries/omen';
+import { formattedNumberDollars } from '@/utils/currencies';
+import { remainingTime } from '@/utils/dates';
 
 interface CardMarketProps {
   market: FixedProductMarketMaker;
@@ -17,31 +17,28 @@ export const CardMarket = ({ market }: CardMarketProps) => {
 
   return (
     <Card>
-      <div className="p-4 h-[160px] flex flex-col justify-between">
-        <div className="flex space-x-4 ">
-          <div className="size-[40px] bg-text-low-em rounded-8 bg-gradient-to-r from-[#cb8fc1] to-[#b459c6]" />
-          <ScrollArea className="flex-1 font-semibold text-text-high-em h-[98px]">
+      <div className="flex h-[160px] flex-col justify-between p-4">
+        <div className="flex space-x-4">
+          <div className="size-[40px] rounded-8 bg-text-low-em bg-gradient-to-r from-[#cb8fc1] to-[#b459c6]" />
+          <ScrollArea className="h-[98px] flex-1 font-semibold text-text-high-em">
             {market.title}
           </ScrollArea>
         </div>
         <OutcomeBar market={market} />
       </div>
-      <div className="flex items-center h-[40px] px-4 border-t border-outline-base-em">
-        <div className="flex items-center justify-between w-full space-x-4">
+      <div className="flex h-[40px] items-center border-t border-outline-base-em px-4">
+        <div className="flex w-full items-center justify-between space-x-4">
           <div className="flex items-center space-x-2">
             <Logo
               src="https://raw.githubusercontent.com/SmolDapp/tokenAssets/main/tokens/100/0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee/logo-128.png"
               alt="token logo"
               size="xs"
             />
             <p className="text-sm font-semibold text-text-med-em">
-              {formattedNumberDollars(+market.usdVolume) || "-"}{" "}
-              <span>Vol</span>
+              {formattedNumberDollars(+market.usdVolume) || '-'} <span>Vol</span>
             </p>
           </div>
-          <p className="text-sm text-text-low-em">
-            {remainingTime(closingDate)}
-          </p>
+          <p className="text-sm text-text-low-em">{remainingTime(closingDate)}</p>
         </div>
       </div>
     </Card>
@@ -50,13 +47,13 @@ export const CardMarket = ({ market }: CardMarketProps) => {
 
 export const LoadingCardMarket = () => (
   <Card className="h-[202px]">
-    <div className="p-4 space-y-3">
-      <div className="h-[80px] rounded-8 bg-outline-low-em animate-pulse"></div>
-      <div className="h-9 rounded-8 bg-outline-low-em animate-pulse"></div>
+    <div className="space-y-3 p-4">
+      <div className="h-[80px] animate-pulse rounded-8 bg-outline-low-em"></div>
+      <div className="h-9 animate-pulse rounded-8 bg-outline-low-em"></div>
     </div>
     <div className="flex items-center justify-between px-4">
-      <div className="w-20 h-8 rounded-8 bg-outline-low-em animate-pulse"></div>
-      <div className="w-20 h-8 rounded-8 bg-outline-low-em animate-pulse"></div>
+      <div className="h-8 w-20 animate-pulse rounded-8 bg-outline-low-em"></div>
+      <div className="h-8 w-20 animate-pulse rounded-8 bg-outline-low-em"></div>
     </div>
   </Card>
 );