{
- setSelectedPair(pair);
+ setSelectedPairIndex(index);
setStateType({ actionType, dialogOpen: true });
}}
/>
diff --git a/src/app/dashboard/__components__/input.tsx b/src/app/dashboard/__components__/input.tsx
index 4ad0fc15..1deb7f19 100755
--- a/src/app/dashboard/__components__/input.tsx
+++ b/src/app/dashboard/__components__/input.tsx
@@ -2,11 +2,12 @@
import React, { useState } from "react";
import { CheckIcon } from "@radix-ui/react-icons";
-import Image from "next/image";
-import copyIcon from "@/assets/copy-icon.svg";
+import { useAccount } from "wagmi";
+import { zeroAddress } from "viem";
+import { CopyIcon } from "lucide-react";
export default function DynamicInputBox({ label }: { label: string }) {
- const [value, setValue] = useState("");
+ const { address = zeroAddress } = useAccount();
const [copied, setCopied] = useState(false);
// Truncate long values for display
@@ -16,8 +17,8 @@ export default function DynamicInputBox({ label }: { label: string }) {
};
const copyToClipboard = () => {
- if (value.trim() !== "") {
- navigator.clipboard.writeText(value);
+ if (address) {
+ navigator.clipboard.writeText(address);
setCopied(true);
setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
}
@@ -29,30 +30,30 @@ export default function DynamicInputBox({ label }: { label: string }) {
{label}:
- {value ? formatValue(value) : "-"}
+ {address ? formatValue(address) : "-"}
{/* Action Icon */}
- {value && (
+ {address && (
)}
{/* Input Field */}
- setValue(e.target.value)}
+ value={address}
className="absolute top-0 left-0 w-full h-full opacity-0 cursor-text"
style={{ zIndex: 1 }}
- />
+ disabled
+ /> */}
);
}
diff --git a/src/app/dashboard/__components__/liquidityRow.tsx b/src/app/dashboard/__components__/liquidityRow.tsx
index f71c3368..b5997abf 100755
--- a/src/app/dashboard/__components__/liquidityRow.tsx
+++ b/src/app/dashboard/__components__/liquidityRow.tsx
@@ -79,21 +79,26 @@ export function LiquidityRow({
{isInRange ? "In Range" : "Out Of Range"}
-
-
+
+
{isInRange ? "Earning emissions" : "Not earning emissions"}
|
${totalMarketQuote} |
+ {/* */}
{formatEther(emissions)}% |
diff --git a/src/app/dashboard/__hooks__/removeLiquidity/useRemoveLiquidity.ts b/src/app/dashboard/__hooks__/removeLiquidity/useRemoveLiquidity.ts
deleted file mode 100644
index 4759ef27..00000000
--- a/src/app/dashboard/__hooks__/removeLiquidity/useRemoveLiquidity.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-import useGetButtonStatuses from "@/components/shared/__hooks__/useGetButtonStatuses";
-import { useTransactionToastProvider } from "@/contexts/transactionToastProvider";
-import { ROUTER, WETH } from "@/data/constants";
-import * as Router from "@/lib/abis/Router";
-import { useAtomicDate } from "@/lib/hooks/useAtomicDate";
-import { useEffect, useMemo } from "react";
-import { Address, zeroAddress } from "viem";
-import {
- useAccount,
- useChainId,
- useSimulateContract,
- useWaitForTransactionReceipt,
- useWriteContract,
-} from "wagmi";
-import { FormAction } from "../../types";
-import { SimulateContractReturnType } from "@wagmi/core";
-import { useQueryClient } from "@tanstack/react-query";
-import { useRemoveLiquidityValidation } from "./useRemoveLiquidityValidation";
-import { useAtom } from "jotai/react";
-import { transactionDeadlineAtom } from "@/store";
-interface Props {
- amount: bigint;
- token0: Address;
- token1: Address;
- isStable: boolean;
- needsApproval: boolean;
- fetchingApproval: boolean;
- approvalSimulation: SimulateContractReturnType["request"] | undefined;
- pairQueryKey: readonly unknown[];
- balanceQueryKey: readonly unknown[];
- allowanceKey: readonly unknown[];
- closeModal: () => void;
-}
-export function useRemoveLiquidity({
- token0,
- token1,
- isStable,
- allowanceKey,
- amount,
- needsApproval,
- fetchingApproval,
- approvalSimulation,
- pairQueryKey,
- balanceQueryKey,
- closeModal,
-}: Props): FormAction {
- const { address = zeroAddress } = useAccount();
- const chainId = useChainId();
- const now = useAtomicDate();
- const [transactionDeadlineInMinutes] = useAtom(transactionDeadlineAtom);
- const router = useMemo(() => ROUTER[chainId], [chainId]);
- const weth = useMemo(() => WETH[chainId], [chainId]);
- const nonETHToken = useMemo(
- () =>
- weth.toLowerCase() === token0.toLowerCase()
- ? token1
- : weth.toLowerCase() === token1.toLowerCase()
- ? token0
- : zeroAddress,
- [weth, token0, token1]
- );
-
- const deadline = useMemo(() => {
- const ttl =
- Math.floor(now.getTime() / 1000) +
- Number(transactionDeadlineInMinutes) * 60;
- return BigInt(ttl);
- }, [now, transactionDeadlineInMinutes]);
- console.log({ deadline });
- const isEth =
- token0.toLowerCase() === weth.toLowerCase() ||
- token1.toLowerCase() === weth.toLowerCase();
-
- const removeLiquiditySimulation = useSimulateContract({
- ...Router,
- address: router,
- functionName: "removeLiquidity",
- args: [
- token0,
- token1,
- isStable,
- amount, // liquidity
- 0n, //amountBMin
- 0n, //amountBMin
- address,
- deadline, //deadline
- ],
- query: { enabled: !isEth && amount > 0n },
- });
-
- const removeLiquidityEthSimulation = useSimulateContract({
- ...Router,
- address: router,
- functionName: "removeLiquidityETH",
- args: [
- nonETHToken,
- isStable,
- amount, // liquidity
- 0n, //amountAMin
- 0n, //amountETHMin
- address,
- deadline, //deadline
- true, //withFeeOnTransferTokens
- ],
- query: { enabled: isEth && amount > 0n },
- });
- const { writeContract, isPending, reset, data: hash } = useWriteContract();
- const { isSuccess, isLoading } = useWaitForTransactionReceipt({ hash });
- const { setToast } = useTransactionToastProvider();
- console.log({
- error: removeLiquiditySimulation.data?.request,
- });
- const onSubmit = () => {
- if (needsApproval) {
- if (approvalSimulation) {
- writeContract(approvalSimulation);
- return;
- }
- }
-
- if (isEth && removeLiquidityEthSimulation.data?.request) {
- writeContract(removeLiquidityEthSimulation.data.request);
- return;
- } else if (removeLiquiditySimulation.data?.request) {
- writeContract(removeLiquiditySimulation.data.request);
- return;
- }
- };
- const queryClient = useQueryClient();
- useEffect(() => {
- if (isSuccess) {
- reset();
- if (needsApproval) {
- queryClient.invalidateQueries({ queryKey: allowanceKey });
- setToast({
- hash,
- actionDescription: "Approved",
- actionTitle: "Approved",
- });
- return;
- }
- setToast({
- hash,
- actionDescription: "Removed Liquidity",
- actionTitle: "Removed Liquidity",
- });
- queryClient.invalidateQueries({ queryKey: pairQueryKey });
- queryClient.invalidateQueries({ queryKey: balanceQueryKey });
- closeModal();
- }
- }, [
- allowanceKey,
- balanceQueryKey,
- closeModal,
- hash,
- isSuccess,
- needsApproval,
- pairQueryKey,
- queryClient,
- reset,
- setToast,
- ]);
-
- const { state: buttonState } = useGetButtonStatuses({
- isLoading: isLoading,
- isPending,
- isFetching: fetchingApproval,
- needsApproval,
- });
- const { isValid, errorMessage } = useRemoveLiquidityValidation({
- needsApproval,
- approvalSimulation: !!approvalSimulation,
- removeLiqsimulation: !!removeLiquiditySimulation.data,
- removeLiqEthSimulation: !!removeLiquidityEthSimulation.data,
- removeLiqSimulationError: removeLiquiditySimulation.error?.message,
- isEth,
- });
- return {
- onSubmit,
- isValid,
- errorMessage,
- buttonProps: { state: buttonState },
- };
-}
diff --git a/src/app/dashboard/__hooks__/stake/useStake.ts b/src/app/dashboard/__hooks__/stake/useStake.ts
deleted file mode 100644
index 4426ea11..00000000
--- a/src/app/dashboard/__hooks__/stake/useStake.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { SimulateContractReturnType, zeroAddress } from "viem";
-import {
- useSimulateContract,
- useWaitForTransactionReceipt,
- useWriteContract,
-} from "wagmi";
-import { useEffect, useMemo } from "react";
-import * as Gauge from "@/lib/abis/Gauge";
-import { FormAction, TPair } from "../../types";
-import useGetButtonStatuses from "@/components/shared/__hooks__/useGetButtonStatuses";
-import { useTransactionToastProvider } from "@/contexts/transactionToastProvider";
-import { useQueryClient } from "@tanstack/react-query";
-export interface StakeProps {
- pairInfo: TPair;
- amount: bigint;
- needsApproval: boolean;
- fetchingApproval: boolean;
- approvalSimulation: SimulateContractReturnType["request"] | undefined;
- allowanceKey: readonly unknown[];
- resetKeys: (readonly unknown[])[];
- closeModal: () => void;
-}
-export function useStake({
- amount,
- approvalSimulation,
- fetchingApproval,
- needsApproval,
- allowanceKey,
- closeModal,
- resetKeys,
- pairInfo,
-}: StakeProps): FormAction {
- const gaugeExists = pairInfo.gauge !== zeroAddress;
- const { data, error } = useSimulateContract({
- ...Gauge,
- address: pairInfo.gauge,
- functionName: "deposit",
- args: [amount],
- query: { enabled: gaugeExists && !needsApproval },
- });
- const { writeContract, reset, data: hash, isPending } = useWriteContract({});
- const { isSuccess, isLoading } = useWaitForTransactionReceipt({ hash });
- const { setToast } = useTransactionToastProvider();
- const queryClient = useQueryClient();
- useEffect(() => {
- if (isSuccess) {
- reset();
- if (needsApproval) {
- queryClient.invalidateQueries({ queryKey: allowanceKey });
- setToast({
- hash,
- actionDescription: "Approved",
- actionTitle: "",
- });
- return;
- }
-
- setToast({
- hash,
- actionDescription: "Approved",
- actionTitle: "",
- });
- [...resetKeys, pairInfo.queryKey].forEach((key) => {
- queryClient.invalidateQueries({ queryKey: key });
- });
- closeModal();
- }
- }, [
- allowanceKey,
- closeModal,
- hash,
- isLoading,
- isSuccess,
- needsApproval,
- pairInfo.queryKey,
- queryClient,
- reset,
- resetKeys,
- setToast,
- ]);
- useEffect(() => {
- if (error) console.log(error);
- }, [error]);
- const onSubmit = () => {
- if (needsApproval && approvalSimulation) {
- writeContract(approvalSimulation);
- }
- if (data?.request) {
- writeContract(data.request);
- }
- };
- const { isValid, errorMessage } = useMemo(() => {
- if (needsApproval) {
- if (approvalSimulation) {
- return { isValid: true, errorMessage: null };
- }
- }
- if (data?.request) {
- return { isValid: true, errorMessage: null };
- }
- return { isValid: false, errorMessage: null };
- }, [approvalSimulation, data?.request, needsApproval]);
- const { state: buttonState } = useGetButtonStatuses({
- needsApproval,
- isFetching: fetchingApproval,
- isLoading,
- isPending,
- });
- return {
- onSubmit,
- isValid,
- errorMessage,
- buttonProps: { state: buttonState },
- };
-}
diff --git a/src/app/dashboard/__hooks__/unstake/useUnstake.ts b/src/app/dashboard/__hooks__/unstake/useUnstake.ts
deleted file mode 100644
index 10a17396..00000000
--- a/src/app/dashboard/__hooks__/unstake/useUnstake.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { zeroAddress } from "viem";
-import {
- useSimulateContract,
- useTransactionReceipt,
- useWriteContract,
-} from "wagmi";
-import { useEffect, useMemo } from "react";
-import * as Gauge from "@/lib/abis/Gauge";
-import { FormAction, TPair } from "../../types";
-import useGetButtonStatuses from "@/components/shared/__hooks__/useGetButtonStatuses";
-import { useTransactionToastProvider } from "@/contexts/transactionToastProvider";
-import { useQueryClient } from "@tanstack/react-query";
-export interface UnstakeProps {
- pairInfo: TPair;
- amount: bigint;
- resetKeys: (readonly unknown[])[];
- closeModal: () => void;
-}
-export function useUnstake({
- pairInfo,
- closeModal,
- amount,
- resetKeys,
-}: UnstakeProps): FormAction {
- console.log({ amount }, "unstake");
- const gaugeExists = pairInfo.gauge !== zeroAddress;
- const { data, error } = useSimulateContract({
- ...Gauge,
- address: pairInfo.gauge,
- functionName: "withdraw",
- args: [amount],
- query: { enabled: gaugeExists },
- });
- useEffect(() => {
- console.log(error);
- }, [error]);
- const { isPending, data: hash, reset, writeContract } = useWriteContract();
- const { isSuccess, isLoading } = useTransactionReceipt({ hash });
- const { setToast } = useTransactionToastProvider();
- const queryClient = useQueryClient();
-
- useEffect(() => {
- if (isSuccess) {
- reset();
- [...resetKeys, pairInfo.queryKey].forEach((key) => {
- queryClient.invalidateQueries({ queryKey: key });
- });
- setToast({
- hash,
- actionDescription: "",
- actionTitle: "Unstaked",
- });
- closeModal();
- }
- }, [
- closeModal,
- hash,
- isLoading,
- isSuccess,
- pairInfo.queryKey,
- queryClient,
- reset,
- resetKeys,
- setToast,
- ]);
- const onSubmit = () => {
- if (data?.request) {
- writeContract(data.request);
- }
- };
- const { state } = useGetButtonStatuses({
- isPending,
- isLoading: isLoading,
- });
- const { isValid, errorMessage } = useMemo(() => {
- if (data?.request) {
- return { isValid: true, errorMessage: null };
- }
- if (error) {
- return { isValid: false, errorMessage: "Error Occured" };
- }
- return { isValid: false, errorMessage: null };
- }, [data?.request, error]);
- return {
- onSubmit,
- errorMessage,
- isValid,
- buttonProps: { state },
- };
-}
diff --git a/src/app/dashboard/__hooks__/useCreateGauge.ts b/src/app/dashboard/__hooks__/useCreateGauge.ts
index 002c8a3e..2268e48e 100644
--- a/src/app/dashboard/__hooks__/useCreateGauge.ts
+++ b/src/app/dashboard/__hooks__/useCreateGauge.ts
@@ -1,17 +1,10 @@
-import {
- useChainId,
- useSimulateContract,
- useWaitForTransactionReceipt,
- useWriteContract,
-} from "wagmi";
+import { useChainId, useSimulateContract } from "wagmi";
import { VOTER } from "@/data/constants";
import { Address } from "viem";
import { useEffect, useMemo } from "react";
import * as Voter from "@/lib/abis/Voter";
-import { FormAction } from "../types";
-import useGetButtonStatuses from "@/components/shared/__hooks__/useGetButtonStatuses";
-import { useTransactionToastProvider } from "@/contexts/transactionToastProvider";
-export function useCreateGauge({ pair }: { pair: Address }): FormAction {
+
+export function useCreateGauge({ pair }: { pair: Address }) {
const chainId = useChainId();
const voter = useMemo(() => VOTER[chainId], [chainId]);
const { data, error } = useSimulateContract({
@@ -22,44 +15,8 @@ export function useCreateGauge({ pair }: { pair: Address }): FormAction {
});
useEffect(() => {
- if (error) console.log(error);
+ if (error) console.error(error);
}, [error]);
- const { writeContract, data: hash, isPending } = useWriteContract();
- const { setToast } = useTransactionToastProvider();
- const { isLoading, isSuccess } = useWaitForTransactionReceipt({ hash });
- useEffect(() => {
- if (isSuccess) {
- setToast({
- hash,
- actionDescription: "Created Gauge",
- actionTitle: "",
- });
- }
- }, [hash, isSuccess, setToast]);
- const onSubmit = () => {
- if (data?.request) {
- writeContract(data.request);
- }
- };
- const { state: buttonState } = useGetButtonStatuses({
- isPending,
- isLoading: isLoading,
- });
- const { isValid, errorMessage } = useMemo(() => {
- if (data?.request) {
- return { isValid: true, errorMessage: null };
- }
- if (error) {
- if (error.message.includes("whitelisted")) {
- return { isValid: false, errorMessage: "Pair Not Whitelisted" };
- }
- }
- return { isValid: false, errorMessage: null };
- }, [data?.request, error]);
- return {
- onSubmit,
- isValid,
- buttonProps: { state: buttonState },
- errorMessage,
- };
+
+ return { simulation: data?.request };
}
diff --git a/src/app/dashboard/__hooks__/removeLiquidity/useQuoteRemoveLiquidity.ts b/src/app/dashboard/__hooks__/useQuoteRemoveLiquidity.ts
similarity index 55%
rename from src/app/dashboard/__hooks__/removeLiquidity/useQuoteRemoveLiquidity.ts
rename to src/app/dashboard/__hooks__/useQuoteRemoveLiquidity.ts
index d2e4e0bc..becff10c 100644
--- a/src/app/dashboard/__hooks__/removeLiquidity/useQuoteRemoveLiquidity.ts
+++ b/src/app/dashboard/__hooks__/useQuoteRemoveLiquidity.ts
@@ -1,7 +1,9 @@
import { ROUTER } from "@/data/constants";
import { useChainId, useReadContract } from "wagmi";
import { abi } from "@/lib/abis/Router";
-import { getAddress } from "viem";
+import { getAddress, zeroAddress } from "viem";
+import { useMemo } from "react";
+
export default function useQuoteRemoveLiquidity({
token0,
token1,
@@ -14,18 +16,20 @@ export default function useQuoteRemoveLiquidity({
isStable: boolean | undefined;
amount: bigint;
enabled: boolean;
- needsApproval: boolean;
}) {
const chainId = useChainId();
- const t0 = token0 ? getAddress(token0) : undefined;
- const t1 = token1 ? getAddress(token1) : undefined;
+ const t0 = useMemo(() => (token0 ? getAddress(token0) : undefined), [token0]);
+ const t1 = useMemo(() => (token1 ? getAddress(token1) : undefined), [token1]);
+ const router = useMemo(() => ROUTER[chainId], [chainId]);
+
return useReadContract({
- address: ROUTER[chainId],
+ address: router,
abi,
functionName: "quoteRemoveLiquidity",
- args: [t0 ?? "0x", t1 ?? "0x", isStable ?? false, amount],
+ args: [t0 ?? zeroAddress, t1 ?? zeroAddress, !!isStable, amount],
query: {
enabled,
+ refetchInterval: 5_000,
},
});
}
diff --git a/src/app/dashboard/__hooks__/useRemoveLiquidity.ts b/src/app/dashboard/__hooks__/useRemoveLiquidity.ts
new file mode 100644
index 00000000..1b7fc7c8
--- /dev/null
+++ b/src/app/dashboard/__hooks__/useRemoveLiquidity.ts
@@ -0,0 +1,77 @@
+import { ROUTER, WETH } from "@/data/constants";
+import * as Router from "@/lib/abis/Router";
+import { useAtomicDate } from "@/lib/hooks/useAtomicDate";
+import { transactionDeadlineAtom } from "@/store";
+import { useAtom } from "jotai/react";
+import { useMemo } from "react";
+import { Address, zeroAddress } from "viem";
+import { useAccount, useChainId, useSimulateContract } from "wagmi";
+
+export function useRemoveLiquidity({
+ token0,
+ token1,
+ isStable,
+ amount,
+}: {
+ amount: bigint;
+ token0: Address;
+ token1: Address;
+ isStable: boolean;
+}) {
+ const { address = zeroAddress } = useAccount();
+ const chainId = useChainId();
+ const now = useAtomicDate();
+ const [transactionDeadlineInMinutes] = useAtom(transactionDeadlineAtom);
+ const router = useMemo(() => ROUTER[chainId], [chainId]);
+ const weth = useMemo(() => WETH[chainId], [chainId]);
+ const nonETHToken = useMemo(
+ () =>
+ weth.toLowerCase() === token0.toLowerCase()
+ ? token1
+ : weth.toLowerCase() === token1.toLowerCase()
+ ? token0
+ : zeroAddress,
+ [weth, token0, token1]
+ );
+
+ const deadline = useMemo(() => {
+ const ttl =
+ Math.floor(now.getTime() / 1000) + transactionDeadlineInMinutes * 60;
+ return BigInt(ttl);
+ }, [now, transactionDeadlineInMinutes]);
+
+ const removeLiquiditySimulation = useSimulateContract({
+ ...Router,
+ address: router,
+ functionName: "removeLiquidity",
+ args: [
+ token0,
+ token1,
+ isStable,
+ amount, // liquidity
+ 0n, //amountBMin
+ 0n, //amountBMin
+ address,
+ deadline, //deadline
+ ],
+ query: { enabled: true },
+ });
+
+ const removeLiquidityEthSimulation = useSimulateContract({
+ ...Router,
+ address: router,
+ functionName: "removeLiquidityETH",
+ args: [
+ nonETHToken,
+ isStable,
+ amount, // liquidity
+ 0n, //amountAMin
+ 0n, //amountETHMin
+ address,
+ deadline, //deadline
+ true, //withFeeOnTransferTokens
+ ],
+ query: { enabled: true },
+ });
+ return { removeLiquiditySimulation, removeLiquidityEthSimulation };
+}
diff --git a/src/app/dashboard/__hooks__/useStake.ts b/src/app/dashboard/__hooks__/useStake.ts
new file mode 100644
index 00000000..029ef6b7
--- /dev/null
+++ b/src/app/dashboard/__hooks__/useStake.ts
@@ -0,0 +1,26 @@
+import { Address } from "viem";
+import { useSimulateContract } from "wagmi";
+import { useEffect } from "react";
+import * as Gauge from "@/lib/abis/Gauge";
+
+export function useStake({
+ gaugeAddress,
+ amount,
+}: {
+ gaugeAddress: Address;
+ amount: bigint;
+}) {
+ const { data, error } = useSimulateContract({
+ ...Gauge,
+ address: gaugeAddress,
+ functionName: "deposit",
+ args: [amount],
+ query: { enabled: true, refetchInterval: 5_000 },
+ });
+
+ useEffect(() => {
+ if (error) console.error(error);
+ }, [error]);
+
+ return { simulation: data?.request };
+}
diff --git a/src/app/dashboard/__hooks__/useUnstake.ts b/src/app/dashboard/__hooks__/useUnstake.ts
new file mode 100644
index 00000000..9bd061a8
--- /dev/null
+++ b/src/app/dashboard/__hooks__/useUnstake.ts
@@ -0,0 +1,26 @@
+import { Address } from "viem";
+import { useSimulateContract } from "wagmi";
+import { useEffect } from "react";
+import * as Gauge from "@/lib/abis/Gauge";
+
+export function useUnstake({
+ gaugeAddress,
+ amount,
+}: {
+ gaugeAddress: Address;
+ amount: bigint;
+}) {
+ const { data, error } = useSimulateContract({
+ ...Gauge,
+ address: gaugeAddress,
+ functionName: "withdraw",
+ args: [amount],
+ query: { enabled: true },
+ });
+
+ useEffect(() => {
+ if (error) console.error(error);
+ }, [error]);
+
+ return { simulation: data?.request };
+}
diff --git a/src/app/liquidity/add-liquidity/__components__/liquidityCard/assetCard.tsx b/src/app/liquidity/add-liquidity/__components__/liquidityCard/assetCard.tsx
index 81f68ca6..d5687d8c 100755
--- a/src/app/liquidity/add-liquidity/__components__/liquidityCard/assetCard.tsx
+++ b/src/app/liquidity/add-liquidity/__components__/liquidityCard/assetCard.tsx
@@ -5,6 +5,7 @@ import { formatUnits } from "viem";
import { TToken } from "@/lib/types";
import Input from "@/components/ui/input";
import { formatNumber, inputPatternMatch } from "@/lib/utils";
+import { useGetBalance } from "@/lib/hooks/useGetBalance";
interface Props {
token: TToken;
@@ -12,7 +13,6 @@ interface Props {
value: string;
disableInput?: boolean;
onFocus?: () => void;
- balance: bigint | undefined;
}
export default function AssetCard({
@@ -21,13 +21,12 @@ export default function AssetCard({
value,
disableInput,
onFocus,
- balance,
}: Props) {
+ const balance = useGetBalance({ tokenAddress: token.address });
const formattedBalance = useMemo(
() => formatNumber(formatUnits(balance ?? 0n, token.decimals)),
[balance, token.decimals]
);
- console.log({ formattedBalance });
return (
@@ -54,9 +53,7 @@ export default function AssetCard({
{formattedBalance}
setSelectedInput("0")}
+ onFocus={() => setSelectedInput(0)}
/>
$5,505,444 |
- 11% |
- {emissions.toString()} |
+ ${formatNumber(formatEther(volumeUSD))} |
+
+ {formatNumber(formatEther(emissions))}%
+ |
+ {} |
{} |
diff --git a/src/app/liquidity/poolsTable.tsx b/src/app/liquidity/poolsTable.tsx
index d461cc56..afffec19 100755
--- a/src/app/liquidity/poolsTable.tsx
+++ b/src/app/liquidity/poolsTable.tsx
@@ -1,20 +1,18 @@
"use client";
-import { useState, useCallback, useEffect, useMemo } from "react";
+import { useState, useCallback, useMemo } from "react";
import { ChevronRight, ChevronLeft, ChevronDown } from "lucide-react";
import PoolRow from "./poolRow";
-import { abi } from "@/lib/abis/PairHelper";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import SearchInput from "@/components/shared/searchInput";
import { useDebounce } from "@/lib/hooks/useDebounce";
import PoolRowSkeleton from "./poolRowSkeleton";
-import { useChainId, useReadContract } from "wagmi";
-import { ChainId, PAIR_HELPER } from "@/data/constants";
+import { useGetPairs } from "@/lib/hooks/useGetPairs";
import { zeroAddress } from "viem";
type QueryFilters = {
searchQuery: string;
isStable: boolean | undefined;
- orderTvl: boolean;
+ orderByTvl: boolean;
};
enum TabValues {
@@ -24,98 +22,94 @@ enum TabValues {
CONCENTRATED = "concentrated",
}
-const pageLength = 10;
export default function PoolsTable() {
- const [loadingBounced, setLoadingBounced] = useState(false);
const [filters, setFilters] = useState ({
searchQuery: "",
isStable: undefined,
- orderTvl: true,
+ orderByTvl: true,
});
const [page, setPage] = useState(1);
- const updateState = useCallback(
- (value: Partial) => {
- setFilters({ ...filters, ...value });
- },
- [filters]
+
+ const updateState = useCallback((value: Partial) => {
+ setFilters((filters) => ({ ...filters, ...value }));
+ }, []);
+
+ const { data, isLoading } = useGetPairs({});
+ const prunedData = useMemo(
+ () =>
+ data.filter((p) => p.pair_address !== zeroAddress && p.total_supply > 0n),
+ [data]
+ );
+ const lastPage = useMemo(
+ () => Math.ceil(prunedData.length / 20),
+ [prunedData]
);
- const {} = useChainId();
- const { data, isLoading } = useReadContract({
- abi,
- address: PAIR_HELPER[ChainId.MONAD_TESTNET],
- functionName: "getAllPair",
- args: [zeroAddress, 200n, 0n],
- });
// ** this stops react query refetching our data from server
// until one of the filters changes
- const { debouncedValue: filersBounced } = useDebounce(filters, 300);
- const poolsLength = useMemo(
- () => data?.filter((p) => p.pair_address !== zeroAddress).length ?? 0,
- [data]
- );
- const newPools = useMemo(() => {
- const result =
- data
- ?.filter((pair) => {
- const { searchQuery } = filersBounced;
- const notZeroAddr = pair.pair_address !== zeroAddress;
- const search0 = searchQuery
- .toLowerCase()
- .includes(searchQuery.toLowerCase());
- const search1 = pair.token0_symbol
- .toLowerCase()
- .includes(searchQuery.toLowerCase());
- let versionFilter = true;
- if (filters.isStable && filters.isStable !== undefined) {
- versionFilter = pair.stable;
- } else if (filters.isStable !== undefined) {
- versionFilter = !pair.stable;
- }
- return notZeroAddr && search0 && search1 && versionFilter;
- })
- .slice(pageLength * page - pageLength, pageLength * page)
- .sort((a, b) => Number(a.total_supply) - Number(b.total_supply)) ?? [];
- if (filters.orderTvl) {
- result.reverse();
- }
- return result;
- }, [data, filersBounced, filters.isStable, filters.orderTvl, page]);
- useEffect(() => {
- newPools.forEach((p) => console.log(p.fee));
- }, [newPools]);
- useEffect(() => {
- setPage(1);
- }, [filters.searchQuery, filters.isStable]);
- useEffect(() => {
- if (isLoading) {
- setLoadingBounced(true);
- } else {
- const timer = setTimeout(() => {
- setLoadingBounced(false);
- }, 400);
+ const { debouncedValue: filtersDebounced } = useDebounce(filters, 300);
+ const pools = useMemo(() => {
+ const { searchQuery, isStable, orderByTvl } = filtersDebounced;
+ // First filter by search query
+ let filteredPools = searchQuery.trim().length
+ ? prunedData.filter(
+ (pool) =>
+ pool.token0_symbol
+ .toLowerCase()
+ .startsWith(searchQuery.toLowerCase()) ||
+ pool.token1_symbol
+ .toLowerCase()
+ .startsWith(searchQuery.toLowerCase()) ||
+ pool.name.toLowerCase().startsWith(searchQuery.toLowerCase()) ||
+ pool.symbol.toLowerCase().startsWith(searchQuery.toLowerCase())
+ )
+ : prunedData;
+ // Filter now by stability
+ if (isStable)
+ filteredPools = filteredPools.filter((pool) => pool.stable === isStable);
+ // Sort by TVL
+ if (orderByTvl)
+ filteredPools = filteredPools.toSorted(
+ (a, b) =>
+ Number(b.reserve0 + b.reserve1) - Number(a.reserve0 + a.reserve1)
+ );
+
+ const start = (page - 1) * 20;
+ const end = page * 20;
+ return filteredPools.slice(start, end);
+ }, [filtersDebounced, page, prunedData]);
- return () => {
- clearTimeout(timer);
- };
- }
- }, [isLoading]);
- const handleTabChange = (value: string) => {
- if (value === TabValues.ALL) {
- updateState({ isStable: undefined });
- }
- if (value === TabValues.STABLE) {
- updateState({ isStable: true });
- }
- if (value === TabValues.VOLATILE) {
- updateState({ isStable: false });
- }
- };
+ const handleTabChange = useCallback(
+ (value: TabValues) => {
+ switch (value) {
+ case TabValues.ALL: {
+ updateState({ isStable: undefined });
+ break;
+ }
+ case TabValues.STABLE: {
+ updateState({ isStable: true });
+ break;
+ }
+ case TabValues.VOLATILE: {
+ updateState({ isStable: false });
+ break;
+ }
+ case TabValues.CONCENTRATED: {
+ updateState({ isStable: undefined });
+ break;
+ }
+ }
+ },
+ [updateState]
+ );
return (
<>
-
+ handleTabChange(val as TabValues)}
+ >
All
Stable
@@ -131,7 +125,7 @@ export default function PoolsTable() {
setValue={(value) => {
updateState({ searchQuery: value });
}}
- >
+ />
@@ -142,11 +136,13 @@ export default function PoolsTable() {
|
| | |