diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..81c43117 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,6 @@ +# Ignore generated folders +./dist +./node_modules + +# Ignore build and types files +.next-env.d.ts \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..8d7b43be --- /dev/null +++ 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 new file mode 100644 index 00000000..c83e2634 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["esbenp.prettier-vscode"] +} diff --git a/app/components/CardBet.tsx b/app/components/CardBet.tsx index 93da2ae3..46a48cca 100644 --- 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 ; @@ -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 ( - -
+ +
@@ -146,21 +139,19 @@ export const CardBet = ({ userPosition }: BetProps) => { {remainingTime(market.closingDate)}

-
-
-
+
+
+
{market.data.title}
-
-
-
+
+
+
-

- Bet amount: -

+

Bet amount:

{collateralAmountUSDSpent?.toFixed(2)} {WXDAI.symbol}

@@ -177,7 +168,7 @@ export const CardBet = ({ userPosition }: BetProps) => {

{!market.isClosed || isWinner ? balance - : collateralAmountUSDSpent?.toFixed(2)}{" "} + : collateralAmountUSDSpent?.toFixed(2)}{' '} {WXDAI.symbol}

{
{canClaim && ( <> - @@ -207,17 +193,17 @@ export const CardBet = ({ userPosition }: BetProps) => { }; export const LoadingCardBet = () => ( - +
-
-
-
{" "} -
+
+
+
{' '} +
-
-
+
+
); diff --git a/app/components/CardMarket.tsx b/app/components/CardMarket.tsx index 45a06474..4991a9bb 100644 --- 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,17 +17,17 @@ export const CardMarket = ({ market }: CardMarketProps) => { return ( -
-
-
- +
+
+
+ {market.title}
-
-
+
+
{ size="xs" />

- {formattedNumberDollars(+market.usdVolume) || "-"}{" "} - Vol + {formattedNumberDollars(+market.usdVolume) || '-'} Vol

-

- {remainingTime(closingDate)} -

+

{remainingTime(closingDate)}

@@ -50,13 +47,13 @@ export const CardMarket = ({ market }: CardMarketProps) => { export const LoadingCardMarket = () => ( -
-
-
+
+
+
-
-
+
+
); diff --git a/app/components/ConfirmTrade.tsx b/app/components/ConfirmTrade.tsx index 8616dd44..adb7bfeb 100644 --- a/app/components/ConfirmTrade.tsx +++ b/app/components/ConfirmTrade.tsx @@ -1,4 +1,4 @@ -import { ModalId, useModal } from "@/context/ModalContext"; +import { ModalId, useModal } from '@/context/ModalContext'; import { Button, Dialog, @@ -8,18 +8,18 @@ import { DialogFooter, DialogHeader, Icon, -} from "swapr-ui"; -import { SLIPPAGE, SwapDirection, SwapState } from "."; -import MarketABI from "@/abi/market.json"; +} from 'swapr-ui'; +import { SLIPPAGE, SwapDirection, SwapState } from '.'; +import MarketABI from '@/abi/market.json'; import { CONDITIONAL_TOKEN_CONTRACT_ADDRESS, useReadCalcSellAmount, -} from "@/hooks/contracts"; -import ConditionalTokensABI from "@/abi/conditionalTokens.json"; -import { addFraction, removeFraction } from "@/utils/price"; -import { Abi, Address, erc20Abi, formatEther, parseEther } from "viem"; -import { WXDAI } from "@/constants"; -import { useTx } from "@/context"; +} from '@/hooks/contracts'; +import ConditionalTokensABI from '@/abi/conditionalTokens.json'; +import { addFraction, removeFraction } from '@/utils/price'; +import { Abi, Address, erc20Abi, formatEther, parseEther } from 'viem'; +import { WXDAI } from '@/constants'; +import { useTx } from '@/context'; const ROUNDING_PRECISON = 0.00000000001; @@ -60,16 +60,16 @@ export const ConfirmTrade = ({ const amountWei = parseEther(tokenAmountIn); const twoDecimalsTokenAmountIn = tokenAmountIn ? parseFloat(tokenAmountIn).toFixed(2) - : ""; + : ''; const twoDecimalsTokenAmountOut = tokenAmountOut ? parseFloat(formatEther(tokenAmountOut)).toFixed(2) - : ""; + : ''; const approveToken = async () => { submitTx({ abi: erc20Abi, address: WXDAI.address, - functionName: "approve", + functionName: 'approve', args: [marketId, amountWei], }).then(() => { onApprove(); @@ -80,7 +80,7 @@ export const ConfirmTrade = ({ submitTx({ abi: ConditionalTokensABI as Abi, address: CONDITIONAL_TOKEN_CONTRACT_ADDRESS, - functionName: "setApprovalForAll", + functionName: 'setApprovalForAll', args: [marketId, true], }).then(() => { onApprove(); @@ -91,7 +91,7 @@ export const ConfirmTrade = ({ submitTx({ abi: MarketABI as Abi, address: marketId, - functionName: "buy", + functionName: 'buy', args: [amountWei, outcomeIndex, tokenAmountOut], }).then(() => { closeBetModal(); @@ -108,7 +108,7 @@ export const ConfirmTrade = ({ submitTx({ abi: MarketABI as Abi, address: marketId, - functionName: "sell", + functionName: 'sell', args: [roundedAmountOut, outcomeIndex, maxSellAmount], }).then(() => { closeBetModal(); @@ -124,10 +124,7 @@ export const ConfirmTrade = ({ const currentConfirmState = confirmState[swapDirection]; return ( - + @@ -137,45 +134,41 @@ export const ConfirmTrade = ({ Confirm Swap - -
-
+ +
+

You sell

- {twoDecimalsTokenAmountIn}{" "} - - {swapState.inToken.symbol} - + {twoDecimalsTokenAmountIn}{' '} + {swapState.inToken.symbol}
-
+
-
+

You buy

- {twoDecimalsTokenAmountOut}{" "} - - {swapState.outToken.symbol} - + {twoDecimalsTokenAmountOut}{' '} + {swapState.outToken.symbol}
-
+
-

Price

+

Price

1 {swapState.inToken.symbol}

=

{swapState.tokenPrice} {swapState.outToken.symbol}

-

(≈ $1)

+

(≈ $1)

-

Slippage

+

Slippage

{SLIPPAGE * 100}%

diff --git a/app/components/ConnectButton.tsx b/app/components/ConnectButton.tsx index 4b5e1161..0b73f540 100644 --- a/app/components/ConnectButton.tsx +++ b/app/components/ConnectButton.tsx @@ -1,20 +1,20 @@ -"use client"; +'use client'; -import { ConnectKitButton } from "connectkit"; -import Image from "next/image"; -import { useBalance, useEnsAvatar } from "wagmi"; +import { ConnectKitButton } from 'connectkit'; +import Image from 'next/image'; +import { useBalance, useEnsAvatar } from 'wagmi'; -import { ChainId } from "@/constants"; -import { Address, formatEther } from "viem"; -import { Button, ButtonProps, ButtonSizeProp } from "swapr-ui"; -import { PropsWithChildren } from "react"; +import { ChainId } from '@/constants'; +import { Address, formatEther } from 'viem'; +import { Button, ButtonProps, ButtonSizeProp } from 'swapr-ui'; +import { PropsWithChildren } from 'react'; interface CustomConnectButtonProps { address: Address; onClick: () => void; ensName?: string; size?: ButtonSizeProp; - width?: ButtonProps["width"]; + width?: ButtonProps['width']; } const CustomConnectButton = ({ @@ -34,30 +34,23 @@ const CustomConnectButton = ({ }); const truncatedAddress = (size: number) => - `${address.slice(0, size)}...${address.slice( - address.length - size, - address.length - )}`; + `${address.slice(0, size)}...${address.slice(address.length - size, address.length)}`; const formattedBalance = (balanceData: NonNullable) => { const balanceValue = formatEther(balanceData.value); // Regex to show only 2 digits after the decimal point - return `${balanceValue.replace(/(\.\d{2})\d*/, "$1")} ${ - balanceData.symbol - }`; + return `${balanceValue.replace(/(\.\d{2})\d*/, '$1')} ${balanceData.symbol}`; }; return ( -
- {balance && ( -

{formattedBalance(balance)}

- )} +
+ {balance &&

{formattedBalance(balance)}

} ); diff --git a/app/components/OutcomeBar.tsx b/app/components/OutcomeBar.tsx index d00fc172..8c1ab047 100644 --- a/app/components/OutcomeBar.tsx +++ b/app/components/OutcomeBar.tsx @@ -1,8 +1,8 @@ -"use client"; +'use client'; -import { FixedProductMarketMaker } from "@/queries/omen"; -import { cx } from "class-variance-authority"; -import { Outcome } from "@/entities"; +import { FixedProductMarketMaker } from '@/queries/omen'; +import { cx } from 'class-variance-authority'; +import { Outcome } from '@/entities'; interface OutcomeBarProps { market: FixedProductMarketMaker; @@ -11,14 +11,14 @@ interface OutcomeBarProps { export const OutcomeBar = ({ market }: OutcomeBarProps) => { const outcome0 = new Outcome( 0, - market.outcomes?.[0] || "Option 1", + market.outcomes?.[0] || 'Option 1', market.id, market.outcomeTokenMarginalPrices?.[0], market.question?.currentAnswer ); const outcome1 = new Outcome( 1, - market.outcomes?.[1] || "Option 2", + market.outcomes?.[1] || 'Option 2', market.id, market.outcomeTokenMarginalPrices?.[1], market.question?.currentAnswer @@ -27,42 +27,36 @@ export const OutcomeBar = ({ market }: OutcomeBarProps) => { return (
- {outcome0.percentage !== "0" && ( + {outcome0.percentage !== '0' && (
)} - {outcome1.percentage !== "0" && ( + {outcome1.percentage !== '0' && (
)}
-

- {`${outcome0.symbol} ${outcome0.percentage || "-"}%`} -

+

{`${outcome0.symbol} ${outcome0.percentage || '-'}%`}

- {`${outcome1.symbol} ${outcome1.percentage || "-"}%`} + {`${outcome1.symbol} ${outcome1.percentage || '-'}%`}

diff --git a/app/components/SettingsPopover.tsx b/app/components/SettingsPopover.tsx index 65aa3784..51a66e7a 100644 --- a/app/components/SettingsPopover.tsx +++ b/app/components/SettingsPopover.tsx @@ -1,6 +1,6 @@ -"use client"; +'use client'; -import { useTheme } from "next-themes"; +import { useTheme } from 'next-themes'; import { Icon, IconButton, @@ -9,8 +9,8 @@ import { PopoverTrigger, ToggleGroup, ToggleGroupOption, -} from "swapr-ui"; -import { useShowClientUI } from "@/hooks"; +} from 'swapr-ui'; +import { useShowClientUI } from '@/hooks'; export const SettingsPopover = () => { const { setTheme, theme } = useTheme(); diff --git a/app/components/Swapbox.tsx b/app/components/Swapbox.tsx index 537b527e..d4506de1 100644 --- a/app/components/Swapbox.tsx +++ b/app/components/Swapbox.tsx @@ -1,34 +1,34 @@ -"use client"; +'use client'; -import { Button, IconButton } from "swapr-ui"; -import { SwapInput } from "./ui/SwapInput"; -import { useEffect, useState } from "react"; -import { erc20Abi, formatEther, parseEther, Address } from "viem"; -import { useAccount, useReadContract } from "wagmi"; -import { ConnectButton } from "."; -import { Outcome, Token } from "@/entities"; -import { FixedProductMarketMaker } from "@/queries/omen"; +import { Button, IconButton } from 'swapr-ui'; +import { SwapInput } from './ui/SwapInput'; +import { useEffect, useState } from 'react'; +import { erc20Abi, formatEther, parseEther, Address } from 'viem'; +import { useAccount, useReadContract } from 'wagmi'; +import { ConnectButton } from '.'; +import { Outcome, Token } from '@/entities'; +import { FixedProductMarketMaker } from '@/queries/omen'; import { CONDITIONAL_TOKEN_CONTRACT_ADDRESS, useReadBalance, useReadCalcBuyAmount, -} from "@/hooks/contracts"; -import ConditionalTokensABI from "@/abi/conditionalTokens.json"; +} from '@/hooks/contracts'; +import ConditionalTokensABI from '@/abi/conditionalTokens.json'; import { calcSellAmountInCollateral, formatTokenPrice, removeFraction, -} from "@/utils/price"; -import { ConfirmTrade } from "./ConfirmTrade"; -import { ModalId, useModal } from "@/context/ModalContext"; -import { WXDAI } from "@/constants"; +} from '@/utils/price'; +import { ConfirmTrade } from './ConfirmTrade'; +import { ModalId, useModal } from '@/context/ModalContext'; +import { WXDAI } from '@/constants'; export const SLIPPAGE = 0.01; -const ONE_UNIT = "1"; +const ONE_UNIT = '1'; export enum SwapDirection { - BUY = "BUY", - SELL = "SELL", + BUY = 'BUY', + SELL = 'SELL', } export type SwapState = { @@ -47,18 +47,16 @@ export type SwapState = { export const Swapbox = ({ market }: { market: FixedProductMarketMaker }) => { const id = market.id as Address; - const outcome0 = new Outcome(0, market.outcomes?.[0] || "Option 1", id); - const outcome1 = new Outcome(1, market.outcomes?.[1] || "Option 2", id); + const outcome0 = new Outcome(0, market.outcomes?.[0] || 'Option 1', id); + const outcome1 = new Outcome(1, market.outcomes?.[1] || 'Option 2', id); const { address, isDisconnected } = useAccount(); const { openModal } = useModal(); - const [tokenAmountIn, setTokenAmountIn] = useState(""); + const [tokenAmountIn, setTokenAmountIn] = useState(''); const [tokenAmountOut, setTokenAmountOut] = useState(); const [outcome, setOutcome] = useState(outcome0); - const [swapDirection, setSwapDirection] = useState( - SwapDirection.BUY - ); + const [swapDirection, setSwapDirection] = useState(SwapDirection.BUY); const changeOutcome = (outcome?: Outcome) => { outcome && setOutcome(outcome); @@ -67,24 +65,26 @@ export const Swapbox = ({ market }: { market: FixedProductMarketMaker }) => { const amountWei = parseEther(tokenAmountIn); const twoDecimalsTokenOutAmount = tokenAmountOut ? parseFloat(formatEther(tokenAmountOut)).toFixed(2) - : ""; + : ''; - const { data: buyAmount, isLoading: isLoadingBuyAmount } = - useReadCalcBuyAmount(id, tokenAmountIn, outcome.index); + const { data: buyAmount, isLoading: isLoadingBuyAmount } = useReadCalcBuyAmount( + id, + tokenAmountIn, + outcome.index + ); - const { data: allowance, refetch: refetchCollateralAllowence } = - useReadContract({ - abi: erc20Abi, - address: WXDAI.address, - functionName: "allowance", - args: [address as Address, id], - query: { enabled: !!address }, - }); + const { data: allowance, refetch: refetchCollateralAllowence } = useReadContract({ + abi: erc20Abi, + address: WXDAI.address, + functionName: 'allowance', + args: [address as Address, id], + query: { enabled: !!address }, + }); const { data: isNFTAllowed, refetch: refetchNFTAllowence } = useReadContract({ abi: ConditionalTokensABI, address: CONDITIONAL_TOKEN_CONTRACT_ADDRESS, - functionName: "isApprovedForAll", + functionName: 'isApprovedForAll', args: [address as Address, id], query: { enabled: !!address }, }); @@ -92,16 +92,24 @@ export const Swapbox = ({ market }: { market: FixedProductMarketMaker }) => { const { data: balance, refetch: refetchCollateralBalance } = useReadContract({ abi: erc20Abi, address: WXDAI.address, - functionName: "balanceOf", + functionName: 'balanceOf', args: [address as Address], query: { enabled: !!address }, }); - const { data: outcome0Balance, refetch: refetchOutcome0Balance } = - useReadBalance(address, market.collateralToken, market.condition?.id, 1); + const { data: outcome0Balance, refetch: refetchOutcome0Balance } = useReadBalance( + address, + market.collateralToken, + market.condition?.id, + 1 + ); - const { data: outcome1Balance, refetch: refetchOutcome1Balance } = - useReadBalance(address, market.collateralToken, market.condition?.id, 2); + const { data: outcome1Balance, refetch: refetchOutcome1Balance } = useReadBalance( + address, + market.collateralToken, + market.condition?.id, + 2 + ); useEffect(() => { if (swapDirection === SwapDirection.BUY) { @@ -134,14 +142,10 @@ export const Swapbox = ({ market }: { market: FixedProductMarketMaker }) => { ]); useEffect(() => { - if (tokenAmountIn === "") setTokenAmountOut(undefined); + if (tokenAmountIn === '') setTokenAmountOut(undefined); }, [tokenAmountIn]); - const { data: oneShareBuyPrice } = useReadCalcBuyAmount( - id, - ONE_UNIT, - outcome.index - ); + const { data: oneShareBuyPrice } = useReadCalcBuyAmount(id, ONE_UNIT, outcome.index); const oneShareSellPrice = calcSellAmountInCollateral( parseEther(ONE_UNIT).toString(), @@ -162,7 +166,7 @@ export const Swapbox = ({ market }: { market: FixedProductMarketMaker }) => { isLoading: isLoadingBuyAmount, balance: balance as bigint, isAllowed: !!allowance && !!amountWei && allowance >= amountWei, - buttonText: "Bet", + buttonText: 'Bet', onSwitchButtonClick: () => setSwapDirection(SwapDirection.SELL), refetchAllowence: refetchCollateralAllowence, }, @@ -175,7 +179,7 @@ export const Swapbox = ({ market }: { market: FixedProductMarketMaker }) => { isLoading: false, balance: outcomeBalances[outcome.index] as bigint, isAllowed: !!isNFTAllowed, - buttonText: "Sell bet", + buttonText: 'Sell bet', onSwitchButtonClick: () => setSwapDirection(SwapDirection.BUY), refetchAllowence: refetchNFTAllowence, }, @@ -184,8 +188,7 @@ export const Swapbox = ({ market }: { market: FixedProductMarketMaker }) => { const currentState = swapState[swapDirection]; const maxBalance = () => { - currentState.balance && - setTokenAmountIn(formatEther(currentState.balance as bigint)); + currentState.balance && setTokenAmountIn(formatEther(currentState.balance as bigint)); }; const openBetModal = () => { @@ -200,19 +203,19 @@ export const Swapbox = ({ market }: { market: FixedProductMarketMaker }) => { { + onChange={event => { setTokenAmountIn(event.target.value); }} onTokenClick={currentState.changeInToken} selectedToken={currentState.inToken} tokenList={outcomeList} > -
+

Balance: {currentState.balance ? parseFloat(formatEther(currentState.balance)).toFixed(2) - : "0"} + : '0'}

{!!currentState.balance && ( ) : ( - )} diff --git a/app/components/TransactionModal.tsx b/app/components/TransactionModal.tsx index cf7248b3..b7acdf07 100644 --- a/app/components/TransactionModal.tsx +++ b/app/components/TransactionModal.tsx @@ -7,9 +7,9 @@ import { DialogHeader, Icon, IconBadge, -} from "swapr-ui"; -import { ModalId, useModal } from "@/context/ModalContext"; -import Image from "next/image"; +} from 'swapr-ui'; +import { ModalId, useModal } from '@/context/ModalContext'; +import Image from 'next/image'; interface TransactionModalProps { isLoading: boolean; @@ -29,14 +29,11 @@ export const TransactionModal = ({ }; return ( - + - -
+ +
{isLoading ? ( <> Transaction submitted

-

+

The transaction has been submitted.
It takes a couple of minutes to complete.

@@ -65,7 +62,7 @@ export const TransactionModal = ({

Transaction successful!

-

+

The transaction has been completed.
You can close this window now.

@@ -79,7 +76,7 @@ export const TransactionModal = ({

There was an error.

-

+

Unfortunately the transaction was not completed.

@@ -99,9 +96,7 @@ export const TransactionModal = ({ >
-
+
gnosis avatar
diff --git a/app/components/ui/RowCard.tsx b/app/components/ui/RowCard.tsx index fbd2e814..10ce9e71 100644 --- a/app/components/ui/RowCard.tsx +++ b/app/components/ui/RowCard.tsx @@ -1,5 +1,5 @@ export const RowCard = () => { return ( -
+
); }; diff --git a/app/components/ui/ScrollArea.tsx b/app/components/ui/ScrollArea.tsx index b06d160e..3420f32a 100644 --- a/app/components/ui/ScrollArea.tsx +++ b/app/components/ui/ScrollArea.tsx @@ -1,8 +1,8 @@ -"use client"; +'use client'; -import * as React from "react"; -import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"; -import { cx } from "class-variance-authority"; +import * as React from 'react'; +import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; +import { cx } from 'class-variance-authority'; const ScrollArea = React.forwardRef< React.ElementRef, @@ -10,7 +10,7 @@ const ScrollArea = React.forwardRef< >(({ className, children, ...props }, ref) => ( @@ -25,21 +25,20 @@ ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName; const ScrollBar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, orientation = "vertical", ...props }, ref) => ( +>(({ className, orientation = 'vertical', ...props }, ref) => ( - + )); ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName; diff --git a/app/components/ui/SwapInput.tsx b/app/components/ui/SwapInput.tsx index e1ac43ec..f90d4211 100644 --- a/app/components/ui/SwapInput.tsx +++ b/app/components/ui/SwapInput.tsx @@ -1,16 +1,9 @@ -"use client"; +'use client'; -import { InputHTMLAttributes } from "react"; -import { - Button, - Icon, - Logo, - Popover, - PopoverContent, - PopoverTrigger, -} from "swapr-ui"; -import { Outcome, Token } from "@/entities"; -import { cx } from "class-variance-authority"; +import { InputHTMLAttributes } from 'react'; +import { Button, Icon, Logo, Popover, PopoverContent, PopoverTrigger } from 'swapr-ui'; +import { Outcome, Token } from '@/entities'; +import { cx } from 'class-variance-authority'; interface SwapInputProps extends InputHTMLAttributes { title: string; @@ -28,21 +21,19 @@ export const SwapInput = ({ ...props }: SwapInputProps) => { return ( -
-
- {title} -
+
+
{title}
event.currentTarget.blur()} - onKeyDown={(evt) => - ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault() + onWheel={event => event.currentTarget.blur()} + onKeyDown={evt => + ['e', 'E', '+', '-'].includes(evt.key) && evt.preventDefault() } - className="bg-transparent overflow-hidden overscroll-none outline-none caret-text-primary-main text-3xl placeholder:text-text-disabled" + className="overflow-hidden overscroll-none bg-transparent text-3xl caret-text-primary-main outline-none placeholder:text-text-disabled" {...props} /> {selectedToken instanceof Token ? ( @@ -61,10 +52,10 @@ export const SwapInput = ({ - - {tokenList.map((outcome) => { + + {tokenList.map(outcome => { return (
onTokenClick && onTokenClick(outcome)} className={cx( - "flex justify-end items-center space-x-2 py-2 px-3 cursor-pointer font-semibold", + 'flex cursor-pointer items-center justify-end space-x-2 px-3 py-2 font-semibold', outcome.index === 0 - ? "text-text-success-main" - : "text-text-danger-main" + ? 'text-text-success-main' + : 'text-text-danger-main' )} > {selectedToken.equals(outcome) && } diff --git a/app/components/ui/Table.tsx b/app/components/ui/Table.tsx index 7977c350..8078734a 100644 --- a/app/components/ui/Table.tsx +++ b/app/components/ui/Table.tsx @@ -1,39 +1,34 @@ -import { cx } from "class-variance-authority"; -import * as React from "react"; +import { cx } from 'class-variance-authority'; +import * as React from 'react'; -const Table = React.forwardRef< - HTMLTableElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
- - -)); -Table.displayName = "Table"; +const Table = React.forwardRef>( + ({ className, ...props }, ref) => ( +
+
+ + ) +); +Table.displayName = 'Table'; const TableHeader = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( - + )); -TableHeader.displayName = "TableHeader"; +TableHeader.displayName = 'TableHeader'; const TableBody = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( - + )); -TableBody.displayName = "TableBody"; +TableBody.displayName = 'TableBody'; const TableFooter = React.forwardRef< HTMLTableSectionElement, @@ -41,14 +36,11 @@ const TableFooter = React.forwardRef< >(({ className, ...props }, ref) => ( tr]:last:border-b-0", - className - )} + className={cx('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)} {...props} /> )); -TableFooter.displayName = "TableFooter"; +TableFooter.displayName = 'TableFooter'; const TableRow = React.forwardRef< HTMLTableRowElement, @@ -57,13 +49,13 @@ const TableRow = React.forwardRef< )); -TableRow.displayName = "TableRow"; +TableRow.displayName = 'TableRow'; const TableHead = React.forwardRef< HTMLTableCellElement, @@ -72,13 +64,13 @@ const TableHead = React.forwardRef<
[role=checkbox]]:translate-y-[2px]", + 'text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className )} {...props} /> )); -TableHead.displayName = "TableHead"; +TableHead.displayName = 'TableHead'; const TableCell = React.forwardRef< HTMLTableCellElement, @@ -87,13 +79,13 @@ const TableCell = React.forwardRef< [role=checkbox]]:translate-y-[2px]", + 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className )} {...props} /> )); -TableCell.displayName = "TableCell"; +TableCell.displayName = 'TableCell'; const TableCaption = React.forwardRef< HTMLTableCaptionElement, @@ -101,11 +93,11 @@ const TableCaption = React.forwardRef< >(({ className, ...props }, ref) => (
)); -TableCaption.displayName = "TableCaption"; +TableCaption.displayName = 'TableCaption'; export { Table, diff --git a/app/components/ui/images/ConnectWalletImage.tsx b/app/components/ui/images/ConnectWalletImage.tsx index 9726cfc5..c776572b 100644 --- a/app/components/ui/images/ConnectWalletImage.tsx +++ b/app/components/ui/images/ConnectWalletImage.tsx @@ -1,10 +1,10 @@ -import { useTheme } from "next-themes"; +import { useTheme } from 'next-themes'; export const ConnectWalletImage = ({ ...props }) => { const { resolvedTheme } = useTheme(); - const color1 = "#7755FF"; - const color2 = resolvedTheme === "light" ? "#F4F3FF" : "#251255"; + const color1 = '#7755FF'; + const color2 = resolvedTheme === 'light' ? '#F4F3FF' : '#251255'; return ( { const { resolvedTheme } = useTheme(); - return resolvedTheme === "light" ? ( + return resolvedTheme === 'light' ? ( ) : ( @@ -164,10 +164,7 @@ const BetsImageDark = ({ ...props }) => ( - + ( in2="effect1_dropShadow_6631_6295" result="shape" /> - + ) { return ( - - + + {children} diff --git a/app/markets/ActivityTable.tsx b/app/markets/ActivityTable.tsx index 2900fefe..bd150512 100644 --- a/app/markets/ActivityTable.tsx +++ b/app/markets/ActivityTable.tsx @@ -5,44 +5,44 @@ import { TableHead, TableHeader, TableRow, -} from "@/app/components/ui/Table"; -import { formatDateTime, shortenAddress } from "@/utils"; -import { Tag } from "swapr-ui"; +} from '@/app/components/ui/Table'; +import { formatDateTime, shortenAddress } from '@/utils'; +import { Tag } from 'swapr-ui'; const activities = [ { - user: "0x8a05649a4fa186d032376f6d34f6bf40ca0168ae", - action: "Yes", - shares: "1.24", + user: '0x8a05649a4fa186d032376f6d34f6bf40ca0168ae', + action: 'Yes', + shares: '1.24', date: 1718999911, }, { - user: "0x1b3bbecdcb76594e1dc5f7550263cd5ea4a6ab6d", - action: "No", - shares: "2.3", + user: '0x1b3bbecdcb76594e1dc5f7550263cd5ea4a6ab6d', + action: 'No', + shares: '2.3', date: 1718999111, }, { - user: "0x7532a3ce4d80cc3fb71d69a5329f76f9f375aa27", - action: "Yes", - shares: "32.2", + user: '0x7532a3ce4d80cc3fb71d69a5329f76f9f375aa27', + action: 'Yes', + shares: '32.2', date: 1718912111, }, { - user: "0x2fe3e7422f35ecbb9dca542279fb2ee172faab32", - action: "Yes", + user: '0x2fe3e7422f35ecbb9dca542279fb2ee172faab32', + action: 'Yes', shares: 23.1, date: 1718903353, }, { - user: "0x269e4c1cb7d8586a99baca522db8c2ef72bbf3ac", - action: "No", + user: '0x269e4c1cb7d8586a99baca522db8c2ef72bbf3ac', + action: 'No', shares: 12.2, date: 1718901111, }, { - user: "0xf9d7aeaa523906f59070eee225f16c7893e2b262", - action: "Yes", + user: '0xf9d7aeaa523906f59070eee225f16c7893e2b262', + action: 'Yes', shares: 0.42, date: 1718801111, }, @@ -68,15 +68,13 @@ export const ActivityTable = () => { {activity.action} - - {activity.shares} - + {activity.shares} {formatDateTime(activity.date)} diff --git a/app/markets/HistorySection.tsx b/app/markets/HistorySection.tsx index 85fb76e0..a3df25d1 100644 --- a/app/markets/HistorySection.tsx +++ b/app/markets/HistorySection.tsx @@ -1,12 +1,5 @@ -import { ActivityTable } from "@/app/markets/ActivityTable"; -import { - Icon, - TabBody, - TabGroup, - TabHeader, - TabPanel, - TabStyled, -} from "swapr-ui"; +import { ActivityTable } from '@/app/markets/ActivityTable'; +import { Icon, TabBody, TabGroup, TabHeader, TabPanel, TabStyled } from 'swapr-ui'; export const HistorySection = () => { return ( @@ -27,8 +20,8 @@ export const HistorySection = () => { -
-
+
+

Charts coming soon.

diff --git a/app/markets/MarketDetails.tsx b/app/markets/MarketDetails.tsx index 29879e47..8e53571c 100644 --- a/app/markets/MarketDetails.tsx +++ b/app/markets/MarketDetails.tsx @@ -1,42 +1,35 @@ -"use client"; +'use client'; -import { OutcomeBar, Swapbox } from "@/app/components"; -import { useQuery } from "@tanstack/react-query"; -import { getMarket } from "@/queries/omen"; -import { - Button, - IconButton, - Tag, - ToggleGroup, - ToggleGroupOption, -} from "swapr-ui"; -import { remainingTime } from "@/utils/dates"; -import { Address } from "viem"; -import { Market } from "@/entities"; -import { UserBets } from "../components/UserBets"; -import { useRouter } from "next/navigation"; -import { useState } from "react"; -import { HistorySection } from "@/app/markets/HistorySection"; +import { OutcomeBar, Swapbox } from '@/app/components'; +import { useQuery } from '@tanstack/react-query'; +import { getMarket } from '@/queries/omen'; +import { Button, IconButton, Tag, ToggleGroup, ToggleGroupOption } from 'swapr-ui'; +import { remainingTime } from '@/utils/dates'; +import { Address } from 'viem'; +import { Market } from '@/entities'; +import { UserBets } from '../components/UserBets'; +import { useRouter } from 'next/navigation'; +import { useState } from 'react'; +import { HistorySection } from '@/app/markets/HistorySection'; interface MarketDetailsProps { id: Address; } enum Tabs { - BET = "bet", - HISTORY = "history", + BET = 'bet', + HISTORY = 'history', } export const MarketDetails = ({ id }: MarketDetailsProps) => { const [tab, setTab] = useState(Tabs.BET); const { data, error, isLoading } = useQuery({ - queryKey: ["getMarket", id], + queryKey: ['getMarket', id], queryFn: async () => getMarket({ id }), }); if (error) throw error; - if (isLoading || !data?.fixedProductMarketMaker) - return ; + if (isLoading || !data?.fixedProductMarketMaker) return ; const market = data.fixedProductMarketMaker; const marketModel = new Market(market); @@ -44,34 +37,24 @@ export const MarketDetails = ({ id }: MarketDetailsProps) => { return (
-
+
-
-
+
+
- + {market.category} {marketModel.isClosed ? ( - + Market Closed ) : ( -

- {remainingTime(closingDate)} -

+

{remainingTime(closingDate)}

)}
-
+

{market.title}

@@ -82,14 +65,14 @@ export const MarketDetails = ({ id }: MarketDetailsProps) => { {Object.values(Tabs).map(tab => (
{tab} @@ -97,7 +80,7 @@ export const MarketDetails = ({ id }: MarketDetailsProps) => { ))}
- {tab === "bet" && ( + {tab === 'bet' && (
{!marketModel.isClosed ? ( @@ -106,7 +89,7 @@ export const MarketDetails = ({ id }: MarketDetailsProps) => { )}
)} - {tab === "history" && } + {tab === 'history' && }
@@ -115,36 +98,36 @@ export const MarketDetails = ({ id }: MarketDetailsProps) => { }; const LoadingMarketDetails = () => ( -
-
-
+
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
+
-
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
@@ -155,7 +138,7 @@ const BackButton = () => { return (
{ variant="pastel" size="sm" /> -
diff --git a/app/markets/error.tsx b/app/markets/error.tsx index a098ba42..c9e2a64a 100644 --- a/app/markets/error.tsx +++ b/app/markets/error.tsx @@ -1,8 +1,8 @@ -"use client"; +'use client'; -import Link from "next/link"; -import { useEffect } from "react"; -import { Button } from "swapr-ui"; +import Link from 'next/link'; +import { useEffect } from 'react'; +import { Button } from 'swapr-ui'; export default function Error({ error, @@ -16,7 +16,7 @@ export default function Error({ }, [error]); return ( -
+

Sorry, something went wrong!

diff --git a/app/my-bets/NoWalletConnectedPage.tsx b/app/my-bets/NoWalletConnectedPage.tsx index f1146f2d..ffabbb63 100644 --- a/app/my-bets/NoWalletConnectedPage.tsx +++ b/app/my-bets/NoWalletConnectedPage.tsx @@ -1,17 +1,17 @@ -import { ConnectButton } from "@/app/components"; -import { ConnectWalletImage } from "@/app/components/ui"; +import { ConnectButton } from '@/app/components'; +import { ConnectWalletImage } from '@/app/components/ui'; export default function NoWalletConnectedPage() { return ( -
+

Connect wallet to check your bets

- Click the button below to connect your wallet and check your bets or - create new ones. + Click the button below to connect your wallet and check your bets or create new + ones.

getUserPositions({ id: address?.toLowerCase() as string }), enabled: !!address, }); @@ -48,20 +42,14 @@ export default function MyBetsPage() { try { const conditionData = await queryClient.fetchQuery({ - queryKey: ["getConditionMarket", position.conditionId], + queryKey: ['getConditionMarket', position.conditionId], queryFn: () => getConditionMarket({ id: position.conditionId }), }); const condition = conditionData?.conditions[0]; - const market = - condition && new Market(condition?.fixedProductMarketMakers[0]); + const market = condition && new Market(condition?.fixedProductMarketMakers[0]); const userTrades = await queryClient.fetchQuery({ - queryKey: [ - "getMarketUserTrades", - address, - market?.data.id, - outcomeIndex, - ], + queryKey: ['getMarketUserTrades', address, market?.data.id, outcomeIndex], queryFn: () => { if (!!address && !!market) return getMarketUserTrades({ @@ -82,11 +70,9 @@ export default function MyBetsPage() { const isWinner = market.isWinner(outcomeIndex); const isResolved = userPositionCondition.resolved; - const hasPayoutDenominator = - +userPositionCondition.payoutDenominator > 0; + const hasPayoutDenominator = +userPositionCondition.payoutDenominator > 0; - const canClaim = - isWinner && isResolved && !isClaimed && hasPayoutDenominator; + const canClaim = isWinner && isResolved && !isClaimed && hasPayoutDenominator; if (canClaim) return userPosition; } catch (error) { @@ -113,9 +99,9 @@ export default function MyBetsPage() { if (data && data.userPositions.length === 0) return ; return ( -
+
-

My bets

+

My bets

@@ -150,7 +136,7 @@ export default function MyBetsPage() { } const BetsListTabCounter = ({ children }: PropsWithChildren) => ( -
+
{children}
); @@ -171,7 +157,7 @@ interface BetsListTabProps { } const BetsListTab = ({ children, bets }: BetsListTabProps) => { - const counter = bets?.length ?? "-"; + const counter = bets?.length ?? '-'; return ( {children} @@ -180,11 +166,7 @@ const BetsListTab = ({ children, bets }: BetsListTabProps) => { ); }; -const BetsListPanel = ({ - emptyText = "", - bets, - isLoading, -}: BetsListPanelProps) => { +const BetsListPanel = ({ emptyText = '', bets, isLoading }: BetsListPanelProps) => { return ( {isLoading && } @@ -194,7 +176,7 @@ const BetsListPanel = ({ ))} {!isLoading && !bets.length && ( -
+

{emptyText}

)} diff --git a/app/page.tsx b/app/page.tsx index 61de942e..7a3f539c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,9 +1,9 @@ -"use client"; +'use client'; -import { useQuery } from "@tanstack/react-query"; -import Link from "next/link"; -import { getMarkets } from "@/queries/omen"; -import { CardMarket, LoadingCardMarket } from "@/app/components"; +import { useQuery } from '@tanstack/react-query'; +import Link from 'next/link'; +import { getMarkets } from '@/queries/omen'; +import { CardMarket, LoadingCardMarket } from '@/app/components'; import { Button, Icon, @@ -14,18 +14,13 @@ import { PopoverTrigger, ToggleGroup, ToggleGroupOption, -} from "swapr-ui"; -import { useState } from "react"; -import { useShowClientUI, useDebounce } from "@/hooks"; -import { cx } from "class-variance-authority"; -import { useRouter } from "next/navigation"; -import { AI_AGENTS_ALLOWLIST } from "@/constants"; -import { - OrderFilter, - StateFilter, - orderFilters, - stateFilters, -} from "./filters"; +} from 'swapr-ui'; +import { useState } from 'react'; +import { useShowClientUI, useDebounce } from '@/hooks'; +import { cx } from 'class-variance-authority'; +import { useRouter } from 'next/navigation'; +import { AI_AGENTS_ALLOWLIST } from '@/constants'; +import { OrderFilter, StateFilter, orderFilters, stateFilters } from './filters'; const ITEMS_PER_PAGE = 12; const SEARCH_DEBOUNCE_DELAY = 600; @@ -33,17 +28,17 @@ const DEFAULT_ORDER_OPTION = orderFilters[0]; const DEFAULT_STATE_OPTION = stateFilters[0]; enum Categories { - TECHNOLOGY = "technology", - CRYPTO = "crypto", - BUSINESS = "business", - POLITICS = "politics", - ECONOMY = "economy", - INTERNATIONAL = "international", - SPORTS = "sports", - ENTERTAINMENT = "entertainment", + TECHNOLOGY = 'technology', + CRYPTO = 'crypto', + BUSINESS = 'business', + POLITICS = 'politics', + ECONOMY = 'economy', + INTERNATIONAL = 'international', + SPORTS = 'sports', + ENTERTAINMENT = 'entertainment', } -type CategoryOptions = Categories | ""; +type CategoryOptions = Categories | ''; export default function HomePage() { const router = useRouter(); @@ -52,47 +47,41 @@ export default function HomePage() { const [isStateFilterPopoverOpen, setStateFilterPopoverOpen] = useState(false); const searchParams = - typeof window !== "undefined" + typeof window !== 'undefined' ? new URLSearchParams(window.location.search) - : new URLSearchParams("/"); + : new URLSearchParams('/'); - const [category, setCategory] = useState(searchParams.get("c") || ""); + const [category, setCategory] = useState(searchParams.get('c') || ''); - const [search, setSearch] = useState(searchParams.get("s") || ""); + const [search, setSearch] = useState(searchParams.get('s') || ''); const debouncedSearch = useDebounce(search, SEARCH_DEBOUNCE_DELAY); const initialFilter = () => { - const filterValueFromSearchParams = searchParams.get("f"); + const filterValueFromSearchParams = searchParams.get('f'); if (!filterValueFromSearchParams) return DEFAULT_ORDER_OPTION; return ( - orderFilters.find( - (option) => option.key === filterValueFromSearchParams - ) || DEFAULT_ORDER_OPTION + orderFilters.find(option => option.key === filterValueFromSearchParams) || + DEFAULT_ORDER_OPTION ); }; - const [selectedOrderOption, setSelectedOrderOption] = useState( - initialFilter() - ); + const [selectedOrderOption, setSelectedOrderOption] = useState(initialFilter()); const initialStateFilter = () => { - const filterValueFromSearchParams = searchParams.get("sf"); + const filterValueFromSearchParams = searchParams.get('sf'); if (!filterValueFromSearchParams) return DEFAULT_STATE_OPTION; return ( - stateFilters.find( - (option) => option.key === filterValueFromSearchParams - ) || DEFAULT_STATE_OPTION + stateFilters.find(option => option.key === filterValueFromSearchParams) || + DEFAULT_STATE_OPTION ); }; - const [selectedStateOption, setSelectedStateOption] = useState( - initialStateFilter() - ); + const [selectedStateOption, setSelectedStateOption] = useState(initialStateFilter()); const initialPage = () => { - const page = searchParams.get("p"); + const page = searchParams.get('p'); if (!page || isNaN(Number(page))) return 1; return Number(page); @@ -102,7 +91,7 @@ export default function HomePage() { const { data, isLoading } = useQuery({ queryKey: [ - "getMarkets", + 'getMarkets', debouncedSearch, selectedOrderOption.orderBy, selectedOrderOption.orderDirection, @@ -127,8 +116,8 @@ export default function HomePage() { }); const handleSearch = (query: string) => { - query ? searchParams.set("s", query) : searchParams.delete("s"); - searchParams.delete("p"); + query ? searchParams.set('s', query) : searchParams.delete('s'); + searchParams.delete('p'); setSearch(query); setPage(1); @@ -139,8 +128,8 @@ export default function HomePage() { const handleCategory = (category: CategoryOptions) => { setCategory(category); - searchParams.delete("p"); - category ? searchParams.set("c", category) : searchParams.delete("c"); + searchParams.delete('p'); + category ? searchParams.set('c', category) : searchParams.delete('c'); router.replace(`?${searchParams.toString()}`); }; @@ -149,8 +138,8 @@ export default function HomePage() { setOrderFilterPopoverOpen(false); setPage(1); - searchParams.delete("p"); - searchParams.set("f", option.key); + searchParams.delete('p'); + searchParams.set('f', option.key); router.replace(`?${searchParams.toString()}`); }; @@ -159,16 +148,16 @@ export default function HomePage() { setStateFilterPopoverOpen(false); setPage(1); - searchParams.delete("p"); - searchParams.set("sf", option.key); + searchParams.delete('p'); + searchParams.set('sf', option.key); router.replace(`?${searchParams.toString()}`); }; const handleNextPage = (page: number) => { if (page <= 0) return; - if (page > 1) searchParams.set("p", page.toString()); - else searchParams.delete("p"); + if (page > 1) searchParams.set('p', page.toString()); + else searchParams.delete('p'); setPage(page); router.replace(`?${searchParams.toString()}`); @@ -178,7 +167,7 @@ export default function HomePage() { const { data: marketsNextPage } = useQuery({ queryKey: [ - "getMarkets", + 'getMarkets', debouncedSearch, selectedOrderOption.orderBy, selectedOrderOption.orderDirection, @@ -210,26 +199,26 @@ export default function HomePage() { const showPaginationButtons = hasMoreMarkets || page !== 1; return ( -
+
-

- 🔮 {category ? category : "All"} +

+ 🔮 {category ? category : 'All'}

-
+
- + All - {Object.values(Categories).map((category) => ( + {Object.values(Categories).map(category => ( {category} @@ -241,7 +230,7 @@ export default function HomePage() { className="w-full" placeholder="Search market" leftIcon="search" - onChange={(event) => handleSearch(event.target.value)} + onChange={event => handleSearch(event.target.value)} value={search} /> {showClientUI ? ( @@ -256,11 +245,11 @@ export default function HomePage() { - {orderFilters.map((option) => ( + {orderFilters.map(option => (
selectOrderFilter(option)} - className="flex items-center justify-start px-3 py-2 space-x-2 font-semibold cursor-pointer" + className="flex cursor-pointer items-center justify-start space-x-2 px-3 py-2 font-semibold" > - {stateFilters.map((option) => ( + {stateFilters.map(option => (
selectStateFilter(option)} - className="flex items-center justify-start px-3 py-2 space-x-2 font-semibold cursor-pointer" + className="flex cursor-pointer items-center justify-start space-x-2 px-3 py-2 font-semibold" > ) : markets?.length ? (
- {markets.map((market) => ( + {markets.map(market => ( ))}
) : ( -
+

No market found for current search

)} {showClientUI && showPaginationButtons && ( -
+
{page > 1 && ( )} - + {hasMoreMarkets && (