diff --git a/src/components/farms/row/CurveFarmContent.tsx b/src/components/farms/row/CurveFarmContent.tsx
index 89e93cf7..6214e97c 100644
--- a/src/components/farms/row/CurveFarmContent.tsx
+++ b/src/components/farms/row/CurveFarmContent.tsx
@@ -1,7 +1,7 @@
import { useAllowance } from "@/hooks/useAllowance";
import { useWatchQuery } from "@/hooks/useWatchQuery";
import { CURVE } from "@/lib/config/farms";
-import { QueryKeys } from "@/lib/queries/queriesSchema";
+import { QueryKeys, ScopeKeys } from "@/lib/queries/queriesSchema";
import { Farm } from "@/lib/types";
import { isInputZero } from "@/utils/inputNotZero";
import { useQueryClient } from "@tanstack/react-query";
@@ -18,6 +18,7 @@ import { curveGaugeAbi } from "@/abi/curveGauge";
import { useWriteContractMutationCallback } from "@/hooks/useWriteContractMutationCallback";
import { useChain } from "@/hooks/useChain";
import { FarmContent } from "./FarmContent";
+import { invalidateWagmiUseQueryPredicate } from "@/utils/helpers/invalidateWagmiUseQueryPredicate";
export const CurveFarmContent = ({ farm }: { farm: Farm }) => {
const chain = useChain();
@@ -27,6 +28,13 @@ export const CurveFarmContent = ({ farm }: { farm: Farm }) => {
queryClient.invalidateQueries({
queryKey: [QueryKeys.Farms("curve")],
});
+ queryClient.invalidateQueries({
+ predicate: (query) =>
+ invalidateWagmiUseQueryPredicate({
+ query,
+ scopeKey: ScopeKeys.CurveFarmContent,
+ }),
+ });
}, [queryClient]);
const [depositAmount, setDepositAmount] = useState("");
@@ -34,18 +42,19 @@ export const CurveFarmContent = ({ farm }: { farm: Farm }) => {
const { address = zeroAddress } = useAccount();
- const { data: withdrawBalance, queryKey: balanceQueryKey } = useReadContract({
+ const { data: withdrawBalance } = useReadContract({
address: CURVE.gauge,
abi: curveGaugeAbi,
chainId: chain.id,
functionName: "balanceOf",
args: [address],
+ scopeKey: ScopeKeys.CurveFarmContent,
query: {
select: (data) => formatEther(data),
},
});
useWatchQuery({
- queryKey: balanceQueryKey,
+ scopeKey: ScopeKeys.CurveFarmContent,
});
//-- Deposit --//
@@ -79,6 +88,7 @@ export const CurveFarmContent = ({ farm }: { farm: Farm }) => {
useEffect(() => {
if (depositReceipt) {
+ setDepositAmount("");
receiptCallback();
}
}, [depositReceipt, queryClient, receiptCallback]);
@@ -115,6 +125,7 @@ export const CurveFarmContent = ({ farm }: { farm: Farm }) => {
useEffect(() => {
if (withdrawReceipt) {
+ setWithdrawAmount("");
receiptCallback();
}
}, [withdrawReceipt, queryClient, receiptCallback]);
@@ -133,7 +144,11 @@ export const CurveFarmContent = ({ farm }: { farm: Farm }) => {
args: [],
});
- const { writeContract: claim, data: claimHash } = useWriteContract({
+ const {
+ writeContract: claim,
+ data: claimHash,
+ reset: resetClaim,
+ } = useWriteContract({
mutation: mutationCallback({
action: "Claim",
}),
@@ -145,9 +160,10 @@ export const CurveFarmContent = ({ farm }: { farm: Farm }) => {
useEffect(() => {
if (claimReceipt) {
+ resetClaim();
receiptCallback();
}
- }, [claimReceipt, queryClient, receiptCallback]);
+ }, [claimReceipt, queryClient, receiptCallback, resetClaim]);
const onClaim = () => {
claimConfig && claim(claimConfig.request);
diff --git a/src/components/farms/row/ExitButton.tsx b/src/components/farms/row/ExitButton.tsx
index 8b7d199e..66bba24d 100644
--- a/src/components/farms/row/ExitButton.tsx
+++ b/src/components/farms/row/ExitButton.tsx
@@ -5,8 +5,9 @@ import { Button } from "@/components/ui/button";
import { useChain } from "@/hooks/useChain";
import { useWriteContractMutationCallback } from "@/hooks/useWriteContractMutationCallback";
import { CURVE, STAKING_POOL_ADDRESSES, SUSHI } from "@/lib/config/farms";
-import { QueryKeys } from "@/lib/queries/queriesSchema";
+import { QueryKeys, ScopeKeys } from "@/lib/queries/queriesSchema";
import { Farm } from "@/lib/types";
+import { invalidateWagmiUseQueryPredicate } from "@/utils/helpers/invalidateWagmiUseQueryPredicate";
import { useQueryClient } from "@tanstack/react-query";
import { useCallback, useEffect } from "react";
import { toast } from "sonner";
@@ -38,12 +39,15 @@ export const ExitButton = ({ farm }: { farm: Farm }) => {
enabled: farm.type === "internal",
},
});
- const { writeContract: exitInternal, data: internalExitHash } =
- useWriteContract({
- mutation: mutationCallback({
- action: "Exit",
- }),
- });
+ const {
+ writeContract: exitInternal,
+ data: internalExitHash,
+ reset: resetExitInternal,
+ } = useWriteContract({
+ mutation: mutationCallback({
+ action: "Exit",
+ }),
+ });
const { data: internalExitReceipt } = useWaitForTransactionReceipt({
hash: internalExitHash,
});
@@ -52,8 +56,16 @@ export const ExitButton = ({ farm }: { farm: Farm }) => {
queryClient.invalidateQueries({
queryKey: [QueryKeys.Farms("internal")],
});
+ queryClient.invalidateQueries({
+ predicate: (query) =>
+ invalidateWagmiUseQueryPredicate({
+ query,
+ scopeKey: ScopeKeys.InternalFarmContent,
+ }),
+ });
+ resetExitInternal();
}
- }, [internalExitReceipt, queryClient]);
+ }, [internalExitReceipt, queryClient, resetExitInternal]);
//-- Sushi --//
const { data: sushiExitConfig, error: sushiError } = useSimulateContract({
@@ -66,7 +78,11 @@ export const ExitButton = ({ farm }: { farm: Farm }) => {
enabled: !!address && farm.type === "external-sushi",
},
});
- const { writeContract: exitSushi, data: sushiExitHash } = useWriteContract({
+ const {
+ writeContract: exitSushi,
+ data: sushiExitHash,
+ reset: resetExitSushi,
+ } = useWriteContract({
mutation: mutationCallback({
action: "Exit",
}),
@@ -79,8 +95,16 @@ export const ExitButton = ({ farm }: { farm: Farm }) => {
queryClient.invalidateQueries({
queryKey: [QueryKeys.Farms("sushi")],
});
+ queryClient.invalidateQueries({
+ predicate: (query) =>
+ invalidateWagmiUseQueryPredicate({
+ query,
+ scopeKey: ScopeKeys.SushiFarmContent,
+ }),
+ });
+ resetExitSushi();
}
- }, [sushiExitReceipt, queryClient]);
+ }, [sushiExitReceipt, queryClient, resetExitSushi]);
//-- Curve --//
const { data: curveExitConfig, error: curveError } = useSimulateContract({
@@ -93,7 +117,11 @@ export const ExitButton = ({ farm }: { farm: Farm }) => {
enabled: farm.type === "external-curve" && +farm.staked.amount > 0,
},
});
- const { writeContract: exitCurve, data: curveExitHash } = useWriteContract({
+ const {
+ writeContract: exitCurve,
+ data: curveExitHash,
+ reset: resetExitCurve,
+ } = useWriteContract({
mutation: mutationCallback({
action: "Exit",
}),
@@ -106,8 +134,16 @@ export const ExitButton = ({ farm }: { farm: Farm }) => {
queryClient.invalidateQueries({
queryKey: [QueryKeys.Farms("curve")],
});
+ queryClient.invalidateQueries({
+ predicate: (query) =>
+ invalidateWagmiUseQueryPredicate({
+ query,
+ scopeKey: ScopeKeys.CurveFarmContent,
+ }),
+ });
+ resetExitCurve();
}
- }, [curveExitReceipt, queryClient]);
+ }, [curveExitReceipt, queryClient, resetExitCurve]);
const onExitFarm = useCallback(() => {
if (farm.type === "internal") {
diff --git a/src/components/farms/row/FarmContent.tsx b/src/components/farms/row/FarmContent.tsx
index 7575279e..f11b1188 100644
--- a/src/components/farms/row/FarmContent.tsx
+++ b/src/components/farms/row/FarmContent.tsx
@@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useChain } from "@/hooks/useChain";
import { useWatchQuery } from "@/hooks/useWatchQuery";
+import { ScopeKeys } from "@/lib/queries/queriesSchema";
import { cn } from "@/utils/cn";
import { isInputZero } from "@/utils/inputNotZero";
import { decimalNumberValidationRegex } from "@/utils/inputValidation";
@@ -42,12 +43,13 @@ export const FarmContent = ({
}: FarmProps) => {
const chain = useChain();
const { address } = useAccount();
- const { data: balance, queryKey: balanceQueryKey } = useReadContract({
+ const { data: balance } = useReadContract({
address: poolTokenAddress,
chainId: chain.id,
abi: erc20Abi,
functionName: "balanceOf",
args: [address!],
+ scopeKey: ScopeKeys.FarmContent,
query: {
enabled: !!address,
select: (balance) => formatEther(balance),
@@ -55,7 +57,7 @@ export const FarmContent = ({
});
useWatchQuery({
- queryKey: balanceQueryKey,
+ scopeKey: ScopeKeys.FarmContent,
});
const onDepositChange = (e: React.ChangeEvent) => {
diff --git a/src/components/farms/row/InternalFarmContent.tsx b/src/components/farms/row/InternalFarmContent.tsx
index 02d14c51..f7736c12 100644
--- a/src/components/farms/row/InternalFarmContent.tsx
+++ b/src/components/farms/row/InternalFarmContent.tsx
@@ -3,7 +3,7 @@ import { useAllowance } from "@/hooks/useAllowance";
import { useChain } from "@/hooks/useChain";
import { useWatchQuery } from "@/hooks/useWatchQuery";
import { STAKING_POOL_ADDRESSES } from "@/lib/config/farms";
-import { QueryKeys } from "@/lib/queries/queriesSchema";
+import { QueryKeys, ScopeKeys } from "@/lib/queries/queriesSchema";
import { Farm } from "@/lib/types";
import { isInputZero } from "@/utils/inputNotZero";
import { useQueryClient } from "@tanstack/react-query";
@@ -19,6 +19,7 @@ import {
} from "wagmi";
import { useWriteContractMutationCallback } from "@/hooks/useWriteContractMutationCallback";
import { FarmContent } from "./FarmContent";
+import { invalidateWagmiUseQueryPredicate } from "@/utils/helpers/invalidateWagmiUseQueryPredicate";
export const InternalFarmContent = ({ farm }: { farm: Farm }) => {
const chain = useChain();
@@ -28,6 +29,13 @@ export const InternalFarmContent = ({ farm }: { farm: Farm }) => {
queryClient.invalidateQueries({
queryKey: [QueryKeys.Farms("internal")],
});
+ queryClient.invalidateQueries({
+ predicate: (query) =>
+ invalidateWagmiUseQueryPredicate({
+ query,
+ scopeKey: ScopeKeys.InternalFarmContent,
+ }),
+ });
}, [queryClient]);
const [depositAmount, setDepositAmount] = useState("");
@@ -35,18 +43,19 @@ export const InternalFarmContent = ({ farm }: { farm: Farm }) => {
const { address = zeroAddress } = useAccount();
- const { data: withdrawBalance, queryKey: balanceQueryKey } = useReadContract({
+ const { data: withdrawBalance } = useReadContract({
address: STAKING_POOL_ADDRESSES[mainnet.id],
abi: stakingPoolsAbi,
chainId: chain.id,
functionName: "getStakeTotalDeposited",
args: [address, BigInt(farm.poolId)],
+ scopeKey: ScopeKeys.InternalFarmContent,
query: {
select: (data) => formatEther(data),
},
});
useWatchQuery({
- queryKey: balanceQueryKey,
+ scopeKey: ScopeKeys.InternalFarmContent,
});
//-- Deposit --//
@@ -80,6 +89,7 @@ export const InternalFarmContent = ({ farm }: { farm: Farm }) => {
useEffect(() => {
if (depositReceipt) {
+ setDepositAmount("");
receiptCallback();
}
}, [depositReceipt, queryClient, receiptCallback]);
@@ -116,6 +126,7 @@ export const InternalFarmContent = ({ farm }: { farm: Farm }) => {
useEffect(() => {
if (withdrawReceipt) {
+ setWithdrawAmount("");
receiptCallback();
}
}, [withdrawReceipt, queryClient, receiptCallback]);
@@ -133,7 +144,11 @@ export const InternalFarmContent = ({ farm }: { farm: Farm }) => {
args: [BigInt(farm.poolId)],
});
- const { writeContract: claim, data: claimHash } = useWriteContract({
+ const {
+ writeContract: claim,
+ data: claimHash,
+ reset: resetClaim,
+ } = useWriteContract({
mutation: mutationCallback({
action: "Claim",
}),
@@ -145,9 +160,10 @@ export const InternalFarmContent = ({ farm }: { farm: Farm }) => {
useEffect(() => {
if (claimReceipt) {
+ resetClaim();
receiptCallback();
}
- }, [claimReceipt, queryClient, receiptCallback]);
+ }, [claimReceipt, queryClient, receiptCallback, resetClaim]);
const onClaim = () => {
claimConfig && claim(claimConfig.request);
diff --git a/src/components/farms/row/SushiFarmContent.tsx b/src/components/farms/row/SushiFarmContent.tsx
index ae5c6009..20d72e29 100644
--- a/src/components/farms/row/SushiFarmContent.tsx
+++ b/src/components/farms/row/SushiFarmContent.tsx
@@ -2,7 +2,7 @@ import { useAllowance } from "@/hooks/useAllowance";
import { useChain } from "@/hooks/useChain";
import { useWatchQuery } from "@/hooks/useWatchQuery";
import { SUSHI } from "@/lib/config/farms";
-import { QueryKeys } from "@/lib/queries/queriesSchema";
+import { QueryKeys, ScopeKeys } from "@/lib/queries/queriesSchema";
import { Farm } from "@/lib/types";
import { isInputZero } from "@/utils/inputNotZero";
import { useQueryClient } from "@tanstack/react-query";
@@ -18,6 +18,7 @@ import {
import { sushiMasterchefAbi } from "@/abi/sushiMasterchef";
import { useWriteContractMutationCallback } from "@/hooks/useWriteContractMutationCallback";
import { FarmContent } from "./FarmContent";
+import { invalidateWagmiUseQueryPredicate } from "@/utils/helpers/invalidateWagmiUseQueryPredicate";
export const SushiFarmContent = ({ farm }: { farm: Farm }) => {
const chain = useChain();
@@ -27,6 +28,13 @@ export const SushiFarmContent = ({ farm }: { farm: Farm }) => {
queryClient.invalidateQueries({
queryKey: [QueryKeys.Farms("curve")],
});
+ queryClient.invalidateQueries({
+ predicate: (query) =>
+ invalidateWagmiUseQueryPredicate({
+ query,
+ scopeKey: ScopeKeys.SushiFarmContent,
+ }),
+ });
}, [queryClient]);
const [depositAmount, setDepositAmount] = useState("");
@@ -34,18 +42,19 @@ export const SushiFarmContent = ({ farm }: { farm: Farm }) => {
const { address = zeroAddress } = useAccount();
- const { data: withdrawBalance, queryKey: balanceQueryKey } = useReadContract({
+ const { data: withdrawBalance } = useReadContract({
address: SUSHI.masterchef,
abi: sushiMasterchefAbi,
chainId: chain.id,
functionName: "userInfo",
args: [0n, address],
+ scopeKey: ScopeKeys.SushiFarmContent,
query: {
select: ([balance]) => formatEther(balance),
},
});
useWatchQuery({
- queryKey: balanceQueryKey,
+ scopeKey: ScopeKeys.SushiFarmContent,
});
//-- Deposit --//
@@ -79,6 +88,7 @@ export const SushiFarmContent = ({ farm }: { farm: Farm }) => {
useEffect(() => {
if (depositReceipt) {
+ setDepositAmount("");
receiptCallback();
}
}, [depositReceipt, queryClient, receiptCallback]);
@@ -115,6 +125,7 @@ export const SushiFarmContent = ({ farm }: { farm: Farm }) => {
useEffect(() => {
if (withdrawReceipt) {
+ setWithdrawAmount("");
receiptCallback();
}
}, [withdrawReceipt, queryClient, receiptCallback]);
@@ -132,7 +143,11 @@ export const SushiFarmContent = ({ farm }: { farm: Farm }) => {
args: [0n, address],
});
- const { writeContract: claim, data: claimHash } = useWriteContract({
+ const {
+ writeContract: claim,
+ data: claimHash,
+ reset: resetClaim,
+ } = useWriteContract({
mutation: mutationCallback({
action: "Claim",
}),
@@ -144,9 +159,10 @@ export const SushiFarmContent = ({ farm }: { farm: Farm }) => {
useEffect(() => {
if (claimReceipt) {
+ resetClaim();
receiptCallback();
}
- }, [claimReceipt, queryClient, receiptCallback]);
+ }, [claimReceipt, queryClient, receiptCallback, resetClaim]);
const onClaim = () => {
claimConfig && claim(claimConfig.request);
diff --git a/src/components/governance/row/ProposalAccordionRow.tsx b/src/components/governance/row/ProposalAccordionRow.tsx
index 3fd25733..707b2ff8 100644
--- a/src/components/governance/row/ProposalAccordionRow.tsx
+++ b/src/components/governance/row/ProposalAccordionRow.tsx
@@ -1,5 +1,5 @@
import { getAddress } from "viem";
-import { Fragment, useMemo, useState } from "react";
+import { Fragment, useState } from "react";
import { useAccount, useWalletClient } from "wagmi";
import { toast } from "sonner";
import {
@@ -68,24 +68,21 @@ export const ProposalsAccordionRow = ({ proposal }: { proposal: Proposal }) => {
const isSupported = supportedTypes.indexOf(proposal.type) !== -1;
- const message = useMemo(() => {
- const choice = proposal.choices.indexOf(selectedChoice) + 1;
- return {
- choice,
- proposal: proposal.id,
- app: "alchemix",
- space: "alchemixstakers.eth",
- type: proposal.type,
- metadata: "{}",
- reason: "",
- };
- }, [proposal, selectedChoice]);
-
const { mutate: writeVote, isPending } = useMutation({
mutationFn: async () => {
if (!address) throw new Error("Not connected.");
if (!walletClient) throw new Error("No wallet.");
+ const message = {
+ choice: proposal.choices.indexOf(selectedChoice) + 1,
+ proposal: proposal.id,
+ app: "alchemix",
+ space: "alchemixstakers.eth",
+ type: proposal.type,
+ metadata: "{}",
+ reason: "",
+ };
+
const type2 = message.proposal.startsWith("0x");
const types = type2
? {
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 20e3a539..3cb381bb 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -4,7 +4,7 @@ import { ToOptions } from "@tanstack/react-router";
import { IS_TENDERLY_FORK } from "@/lib/wagmi/tenderly";
export const routeTitleToPathMapping = {
- Vaults: { to: "/vaults", icon: "/images/icons/yield_med.svg" },
+ Vaults: { to: "/vaults", icon: "/images/icons/vaults_med.svg" },
Transmuters: { to: "/transmuters", icon: "/images/icons/transmuter_med.svg" },
Bridge: { to: "/bridge", icon: "/images/icons/swap_med.svg" },
Farms: { to: "/farms", icon: "/images/icons/farm_med.svg" },
@@ -16,7 +16,7 @@ export type RouteTitle = keyof typeof routeTitleToPathMapping;
export function Header() {
return (
-
+
![]()
-
diff --git a/src/components/vaults/common_actions/Repay.tsx b/src/components/vaults/common_actions/Repay.tsx
index 748e4e0b..70a0163d 100644
--- a/src/components/vaults/common_actions/Repay.tsx
+++ b/src/components/vaults/common_actions/Repay.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import {
Select,
SelectTrigger,
@@ -7,7 +7,6 @@ import {
SelectItem,
} from "@/components/ui/select";
import { useTokensQuery } from "@/lib/queries/useTokensQuery";
-import { Button } from "@/components/ui/button";
import {
useAccount,
useSimulateContract,
@@ -25,9 +24,11 @@ import { useAlchemists } from "@/lib/queries/useAlchemists";
import { useAllowance } from "@/hooks/useAllowance";
import { DebtSelection } from "@/components/vaults/common_actions/DebtSelection";
import { isInputZero } from "@/utils/inputNotZero";
-import { QueryKeys } from "@/lib/queries/queriesSchema";
+import { QueryKeys, ScopeKeys } from "@/lib/queries/queriesSchema";
import { useWriteContractMutationCallback } from "@/hooks/useWriteContractMutationCallback";
import { RepayInput } from "@/components/common/input/RepayInput";
+import { invalidateWagmiUseQueryPredicate } from "@/utils/helpers/invalidateWagmiUseQueryPredicate";
+import { CtaButton } from "@/components/common/CtaButton";
export const Repay = () => {
const queryClient = useQueryClient();
@@ -74,17 +75,23 @@ export const Repay = () => {
(token) => token.address === repaymentTokenAddress,
);
- const { isApprovalNeeded, approve, approveConfig, approveUsdtEthConfig } =
- useAllowance({
- tokenAddress: repaymentToken?.address,
- spender: ALCHEMISTS_METADATA[chain.id][selectedSynthAsset],
- amount,
- decimals: repaymentToken?.decimals,
- });
+ const {
+ isApprovalNeeded,
+ approve,
+ approveConfig,
+ approveUsdtEthConfig,
+ isPending: isPendingAllowance,
+ isFetching: isFetchingAllowance,
+ } = useAllowance({
+ tokenAddress: repaymentToken?.address,
+ spender: ALCHEMISTS_METADATA[chain.id][selectedSynthAsset],
+ amount,
+ decimals: repaymentToken?.decimals,
+ });
const {
data: burnConfig,
- isFetching: isFetchingBurnConfig,
+ isPending: isPendingBurnConfig,
error: burnConfigError,
} = useSimulateContract({
address: ALCHEMISTS_METADATA[chain.id][selectedSynthAsset],
@@ -105,7 +112,7 @@ export const Repay = () => {
const {
data: repayConfig,
- isFetching: isFetchingRepayConfig,
+ isPending: isPendingRepayConfig,
error: repayConfigError,
} = useSimulateContract({
address: ALCHEMISTS_METADATA[chain.id][selectedSynthAsset],
@@ -144,6 +151,13 @@ export const Repay = () => {
setAmount("");
queryClient.invalidateQueries({ queryKey: [QueryKeys.Alchemists] });
queryClient.invalidateQueries({ queryKey: [QueryKeys.Vaults] });
+ queryClient.invalidateQueries({
+ predicate: (query) =>
+ invalidateWagmiUseQueryPredicate({
+ query,
+ scopeKey: ScopeKeys.RepayInput,
+ }),
+ });
}
}, [repayReceipt, queryClient]);
@@ -161,7 +175,7 @@ export const Repay = () => {
setSelectedSynthAsset(newSynthAsset);
};
- const onCtaClick = useCallback(() => {
+ const onCtaClick = () => {
if (isApprovalNeeded) {
if (approveUsdtEthConfig?.request) {
approve(approveUsdtEthConfig.request);
@@ -211,24 +225,15 @@ export const Repay = () => {
"Repay failed. Unknown error. Please contact Alchemix team.",
});
}
- }, [
- approve,
- approveConfig?.request,
- approveUsdtEthConfig?.request,
- burnConfig,
- burnConfigError,
- isApprovalNeeded,
- repay,
- repayConfig,
- repayConfigError,
- repaymentToken?.symbol,
- selectedSynthAsset,
- ]);
+ };
- const isFetching =
- repaymentToken?.symbol.toLowerCase() === selectedSynthAsset.toLowerCase()
- ? isFetchingBurnConfig
- : isFetchingRepayConfig;
+ const isPending =
+ isApprovalNeeded === false
+ ? repaymentToken?.symbol.toLowerCase() ===
+ selectedSynthAsset.toLowerCase()
+ ? isPendingBurnConfig
+ : isPendingRepayConfig
+ : isPendingAllowance || isFetchingAllowance;
return (
diff --git a/src/components/vaults/row/Deposit.tsx b/src/components/vaults/row/Deposit.tsx
index 9e527940..2c01aaf8 100644
--- a/src/components/vaults/row/Deposit.tsx
+++ b/src/components/vaults/row/Deposit.tsx
@@ -1,7 +1,6 @@
import { Token, Vault } from "@/lib/types";
import { TokenInput } from "@/components/common/input/TokenInput";
-import { Button } from "@/components/ui/button";
-import { useCallback, useState } from "react";
+import { useState } from "react";
import {
Select,
SelectTrigger,
@@ -19,6 +18,7 @@ import { alchemistV2Abi } from "@/abi/alchemistV2";
import { useChain } from "@/hooks/useChain";
import { SlippageInput } from "@/components/common/input/SlippageInput";
import { VaultActionMotionDiv } from "./motion";
+import { CtaButton } from "@/components/common/CtaButton";
export const Deposit = ({
vault,
@@ -80,7 +80,7 @@ export const Deposit = ({
const isSelectedTokenYieldToken =
token.address.toLowerCase() === yieldTokenData.address.toLowerCase();
- const { isApprovalNeeded, writeApprove, writeDeposit, isFetching } =
+ const { isApprovalNeeded, writeApprove, writeDeposit, isPending } =
useDeposit({
vault,
selectedToken: token,
@@ -90,13 +90,13 @@ export const Deposit = ({
setAmount,
});
- const onCtaClick = useCallback(() => {
+ const onCtaClick = () => {
if (token.address !== GAS_ADDRESS && isApprovalNeeded === true) {
writeApprove();
} else {
writeDeposit();
}
- }, [token, isApprovalNeeded, writeApprove, writeDeposit]);
+ };
return (
diff --git a/src/components/transmuters/row/TransmuterApr.tsx b/src/components/transmuters/row/TransmuterApr.tsx
new file mode 100644
index 00000000..104e9d83
--- /dev/null
+++ b/src/components/transmuters/row/TransmuterApr.tsx
@@ -0,0 +1,135 @@
+import { useQuery } from "@tanstack/react-query";
+import { InfoIcon } from "lucide-react";
+
+import { dayjs } from "@/lib/dayjs";
+import { Transmuter } from "@/lib/types";
+import { formatNumber } from "@/utils/number";
+import { QueryKeys } from "@/lib/queries/queriesSchema";
+
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import { ONE_DAY_IN_MS } from "@/lib/constants";
+
+interface TransmuterAprDuneQueryResponse {
+ execution_id: string;
+ query_id: number;
+ is_execution_finished: boolean;
+ state: string;
+ submitted_at: string;
+ expires_at: string;
+ execution_started_at: string;
+ execution_ended_at: string;
+ result: {
+ rows: [
+ {
+ projected_yield_rate: number;
+ time_to_transmute: number;
+ },
+ ];
+ metadata: {
+ column_names: string[];
+ column_types: string[];
+ row_count: number;
+ result_set_bytes: number;
+ total_row_count: number;
+ total_result_set_bytes: number;
+ datapoint_count: number;
+ pending_time_millis: number;
+ execution_time_millis: number;
+ };
+ };
+}
+
+const DUNE_API_ENDPOINT = "https://api.dune.com/api/v1/query";
+const API_KEY = import.meta.env.VITE_DUNE_API_KEY;
+
+export const TransmuterApr = ({ transmuter }: { transmuter: Transmuter }) => {
+ const { data, isError, isPending } = useQuery({
+ queryKey: [
+ QueryKeys.TransmuterApr,
+ transmuter.address,
+ transmuter.metadata.aprQueryUri,
+ ],
+ queryFn: async () => {
+ const response = await fetch(
+ `${DUNE_API_ENDPOINT}/${transmuter.metadata.aprQueryUri}/results?api_key=${API_KEY}`,
+ );
+ const data = (await response.json()) as TransmuterAprDuneQueryResponse;
+
+ const apr = data.result.rows[0].projected_yield_rate;
+ const timeToTransmute = data.result.rows[0].time_to_transmute;
+
+ if (apr === undefined || timeToTransmute === undefined) {
+ throw new Error("APR fetch failed.");
+ }
+
+ return {
+ apr,
+ timeToTransmute,
+ };
+ },
+ enabled: !!transmuter.metadata.aprQueryUri,
+ staleTime: ONE_DAY_IN_MS,
+ retry: false,
+ });
+ return (
+
+
+
+
+ e.stopPropagation()}>
+
+ + Learn more. + +
+
+ );
+};
diff --git a/src/components/transmuters/row/TransmuterApy.tsx b/src/components/transmuters/row/TransmuterApy.tsx
deleted file mode 100644
index af6621b7..00000000
--- a/src/components/transmuters/row/TransmuterApy.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { InfoIcon } from "lucide-react";
-
-import { dayjs } from "@/lib/dayjs";
-import { Transmuter } from "@/lib/types";
-import { formatNumber } from "@/utils/number";
-import { QueryKeys } from "@/lib/queries/queriesSchema";
-
-import {
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from "@/components/ui/popover";
-import { ONE_DAY_IN_MS } from "@/lib/constants";
-
-interface TransmuterApyDuneQueryResponse {
- execution_id: string;
- query_id: number;
- is_execution_finished: boolean;
- state: string;
- submitted_at: string;
- expires_at: string;
- execution_started_at: string;
- execution_ended_at: string;
- result: {
- rows: [
- {
- projected_yield_rate: number;
- time_to_transmute: number;
- },
- ];
- metadata: {
- column_names: string[];
- column_types: string[];
- row_count: number;
- result_set_bytes: number;
- total_row_count: number;
- total_result_set_bytes: number;
- datapoint_count: number;
- pending_time_millis: number;
- execution_time_millis: number;
- };
- };
-}
-
-const DUNE_API_ENDPOINT = "https://api.dune.com/api/v1/query";
-const API_KEY = import.meta.env.VITE_DUNE_API_KEY;
-
-export const TransmuterApy = ({ transmuter }: { transmuter: Transmuter }) => {
- const { data, isError, isPending } = useQuery({
- queryKey: [
- QueryKeys.TransmuterApy,
- transmuter.address,
- transmuter.metadata.apyQueryUri,
- ],
- queryFn: async () => {
- const response = await fetch(
- `${DUNE_API_ENDPOINT}/${transmuter.metadata.apyQueryUri}/results?api_key=${API_KEY}`,
- );
- const data = (await response.json()) as TransmuterApyDuneQueryResponse;
-
- const apy = data.result.rows[0].projected_yield_rate;
- const timeToTransmute = data.result.rows[0].time_to_transmute;
-
- if (!apy) {
- throw new Error("APY is not available.");
- }
-
- return {
- apy,
- timeToTransmute,
- };
- },
- enabled: !!transmuter.metadata.apyQueryUri,
- staleTime: ONE_DAY_IN_MS,
- retry: false,
- });
- return (
-
-
-
-
-
- {timeToTransmute > 0 && (
-
-
- );
-};
-
-const NAPopover = ({ isError }: { isError: boolean }) => {
- return (
-
-
-
-
-
-
-
- );
-};
diff --git a/src/components/transmuters/row/Withdraw.tsx b/src/components/transmuters/row/Withdraw.tsx
index 6a231d0b..bf6bb017 100644
--- a/src/components/transmuters/row/Withdraw.tsx
+++ b/src/components/transmuters/row/Withdraw.tsx
@@ -1,13 +1,14 @@
import { transmuterV2Abi } from "@/abi/transmuterV2";
+import { CtaButton } from "@/components/common/CtaButton";
import { TransmuterInput } from "@/components/common/input/TransmuterInput";
-import { Button } from "@/components/ui/button";
import { useChain } from "@/hooks/useChain";
import { useWriteContractMutationCallback } from "@/hooks/useWriteContractMutationCallback";
-import { QueryKeys } from "@/lib/queries/queriesSchema";
+import { QueryKeys, ScopeKeys } from "@/lib/queries/queriesSchema";
import { Token, Transmuter } from "@/lib/types";
+import { invalidateWagmiUseQueryPredicate } from "@/utils/helpers/invalidateWagmiUseQueryPredicate";
import { isInputZero } from "@/utils/inputNotZero";
import { useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
import { toast } from "sonner";
import { parseEther } from "viem";
import {
@@ -34,7 +35,7 @@ export const Withdraw = ({
const {
data: withdrawConfig,
- isFetching,
+ isPending,
error: withdrawConfigError,
} = useSimulateContract({
address: transmuter.address,
@@ -61,10 +62,17 @@ export const Withdraw = ({
if (withdrawReceipt) {
setWithdrawAmount("");
queryClient.invalidateQueries({ queryKey: [QueryKeys.Transmuters] });
+ queryClient.invalidateQueries({
+ predicate: (query) =>
+ invalidateWagmiUseQueryPredicate({
+ query,
+ scopeKey: ScopeKeys.TransmuterInput,
+ }),
+ });
}
}, [withdrawReceipt, queryClient]);
- const onCtaClick = useCallback(() => {
+ const onCtaClick = () => {
if (withdrawConfigError) {
toast.error("Withdraw failed", {
description:
@@ -81,7 +89,7 @@ export const Withdraw = ({
description: "Unknown error occurred. Please contact Alchemix team.",
});
}
- }, [withdraw, withdrawConfig, withdrawConfigError]);
+ };
return (
<>
@@ -95,13 +103,13 @@ export const Withdraw = ({
tokenDecimals={syntheticToken.decimals}
/>
-
+
);
};
diff --git a/src/components/vaults/common_actions/Borrow.tsx b/src/components/vaults/common_actions/Borrow.tsx
index 30160725..b7be9671 100644
--- a/src/components/vaults/common_actions/Borrow.tsx
+++ b/src/components/vaults/common_actions/Borrow.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import { BorrowInput } from "@/components/common/input/BorrowInput";
import {
Select,
@@ -23,12 +23,14 @@ import { useChain } from "@/hooks/useChain";
import { useQueryClient } from "@tanstack/react-query";
import { ALCHEMISTS_METADATA, SYNTH_ASSETS } from "@/lib/config/alchemists";
import { isInputZero } from "@/utils/inputNotZero";
-import { QueryKeys } from "@/lib/queries/queriesSchema";
+import { QueryKeys, ScopeKeys } from "@/lib/queries/queriesSchema";
import { useWriteContractMutationCallback } from "@/hooks/useWriteContractMutationCallback";
import { Switch } from "@/components/ui/switch";
import { AnimatePresence, m } from "framer-motion";
import { Input } from "@/components/ui/input";
import { accordionTransition, accordionVariants } from "@/lib/motion/motion";
+import { invalidateWagmiUseQueryPredicate } from "@/utils/helpers/invalidateWagmiUseQueryPredicate";
+import { CtaButton } from "@/components/common/CtaButton";
export const Borrow = () => {
const queryClient = useQueryClient();
@@ -76,7 +78,7 @@ export const Borrow = () => {
const {
data: borrowConfig,
error: borrowError,
- isFetching,
+ isPending,
} = useSimulateContract({
address: alchemistForDebtTokenAddress,
abi: alchemistV2Abi,
@@ -103,6 +105,13 @@ export const Borrow = () => {
setAmount("");
queryClient.invalidateQueries({ queryKey: [QueryKeys.Alchemists] });
queryClient.invalidateQueries({ queryKey: [QueryKeys.Vaults] });
+ queryClient.invalidateQueries({
+ predicate: (query) =>
+ invalidateWagmiUseQueryPredicate({
+ query,
+ scopeKey: ScopeKeys.BorrowInput,
+ }),
+ });
}
}, [borrowReceipt, queryClient]);
@@ -123,7 +132,7 @@ export const Borrow = () => {
setConfirmedDifferentAddress(checked);
};
- const onCtaClick = useCallback(() => {
+ const onCtaClick = () => {
if (borrowError) {
toast.error("Borrow failed", {
description:
@@ -141,7 +150,7 @@ export const Borrow = () => {
"Borrow failed. Unexpected. Please contract Alchemix team.",
});
}
- }, [borrow, borrowConfig, borrowError]);
+ };
return (
diff --git a/src/components/vaults/common_actions/DebtSelection.tsx b/src/components/vaults/common_actions/DebtSelection.tsx
index d34fdb5a..928f0cd9 100644
--- a/src/components/vaults/common_actions/DebtSelection.tsx
+++ b/src/components/vaults/common_actions/DebtSelection.tsx
@@ -7,6 +7,7 @@ import { useWatchQuery } from "@/hooks/useWatchQuery";
import { useChain } from "@/hooks/useChain";
import { formatNumber } from "@/utils/number";
import { cn } from "@/utils/cn";
+import { ScopeKeys } from "@/lib/queries/queriesSchema";
export const DebtSelection = ({
selectedSynthAsset,
@@ -20,7 +21,7 @@ export const DebtSelection = ({
const chain = useChain();
const { address } = useAccount();
- const { data: debts, queryKey: debtsQueryKey } = useReadContracts({
+ const { data: debts } = useReadContracts({
allowFailure: false,
contracts: availableSynthAssets.map(
(synthAsset) =>
@@ -32,6 +33,7 @@ export const DebtSelection = ({
args: [address!],
}) as const,
),
+ scopeKey: ScopeKeys.DebtSelection,
query: {
select: (accounts) => accounts.map(([debt]) => debt),
enabled: !!address,
@@ -39,7 +41,7 @@ export const DebtSelection = ({
});
useWatchQuery({
- queryKey: debtsQueryKey,
+ scopeKey: ScopeKeys.DebtSelection,
});
return (
diff --git a/src/components/vaults/common_actions/Liquidate.tsx b/src/components/vaults/common_actions/Liquidate.tsx
index 51636506..c5d44306 100644
--- a/src/components/vaults/common_actions/Liquidate.tsx
+++ b/src/components/vaults/common_actions/Liquidate.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import {
Select,
SelectTrigger,
@@ -7,7 +7,6 @@ import {
SelectItem,
} from "@/components/ui/select";
import { useTokensQuery } from "@/lib/queries/useTokensQuery";
-import { Button } from "@/components/ui/button";
import {
useReadContract,
useSimulateContract,
@@ -25,12 +24,14 @@ import { DebtSelection } from "@/components/vaults/common_actions/DebtSelection"
import { calculateMinimumOut } from "@/utils/helpers/minAmountWithSlippage";
import { useVaults } from "@/lib/queries/useVaults";
import { isInputZero } from "@/utils/inputNotZero";
-import { QueryKeys } from "@/lib/queries/queriesSchema";
+import { QueryKeys, ScopeKeys } from "@/lib/queries/queriesSchema";
import { LiquidateTokenInput } from "@/components/common/input/LiquidateInput";
import { useWriteContractMutationCallback } from "@/hooks/useWriteContractMutationCallback";
import { Switch } from "@/components/ui/switch";
import { SlippageInput } from "@/components/common/input/SlippageInput";
import { MAX_UINT256_BN } from "@/lib/constants";
+import { invalidateWagmiUseQueryPredicate } from "@/utils/helpers/invalidateWagmiUseQueryPredicate";
+import { CtaButton } from "@/components/common/CtaButton";
export const Liquidate = () => {
const queryClient = useQueryClient();
@@ -120,7 +121,7 @@ export const Liquidate = () => {
const {
data: liquidateConfig,
- isFetching,
+ isPending,
error: liquidateError,
} = useSimulateContract({
address: ALCHEMISTS_METADATA[chain.id][selectedSynthAsset],
@@ -156,6 +157,13 @@ export const Liquidate = () => {
setAmount("");
queryClient.invalidateQueries({ queryKey: [QueryKeys.Alchemists] });
queryClient.invalidateQueries({ queryKey: [QueryKeys.Vaults] });
+ queryClient.invalidateQueries({
+ predicate: (query) =>
+ invalidateWagmiUseQueryPredicate({
+ query,
+ scopeKey: ScopeKeys.LiquidateInput,
+ }),
+ });
}
}, [liquidateReceipt, queryClient, chain.id]);
@@ -186,7 +194,7 @@ export const Liquidate = () => {
setConfirmedLiquidation(checked);
};
- const onCtaClick = useCallback(() => {
+ const onCtaClick = () => {
if (liquidateError) {
toast.error("Liquidate failed", {
description:
@@ -204,7 +212,7 @@ export const Liquidate = () => {
description: "Unknown error. Please contact Alchemix team.",
});
}
- }, [liquidate, liquidateConfig, liquidateError]);
+ };
return (
+
+ );
+};
+
+const TransmuterAprPopover = () => {
+ return (
+
+
+ APR
+
+
+ + {isError || !transmuter.metadata.aprQueryUri + ? "N/A" + : isPending + ? "..." + : `${formatNumber(data.apr, { allowNegative: false })}%`} +
+ {!!data?.timeToTransmute && ( ++ {formatNumber( + dayjs.duration({ years: data.timeToTransmute }).asDays(), + )}{" "} + days +
+ )} +
+ Users are credited with corresponding assets based on the deposited
+ alAsset amount.
+
+ The alAsset is burned when user claims the transmuted token.
+
+
+ This APR assumes open-market alAsset buy and 1:1 transmute.
+
+ + Learn more. + +
-
- );
-};
-
-const TransmuterApyPopover = ({
- timeToTransmute,
-}: {
- timeToTransmute: number;
-}) => {
- return (
- APY
- {isError || !transmuter.metadata.apyQueryUri ? ( -
-
- ) : isPending ? (
- N/A
-...
- ) : ( -
-
- )}
- {formatNumber(data.apy, { allowNegative: false })}%
-- It will take approximately{" "} - - {formatNumber( - dayjs.duration({ years: timeToTransmute }).asDays(), - )}{" "} - days - {" "} - to transmute your deposit. -
- )} -- Yield will increase, if more people deposit to - Alchemix, or liquidate/repay their loans. Yield will{" "} - decrease, if more people deposit alTOKEN in the - Transmuter. -
-{isError ? "Error. Report to Alchemix" : "Coming soon!"}
-
@@ -239,19 +248,19 @@ export const Borrow = () => {
)}
-
+
)}
@@ -270,16 +278,14 @@ export const Liquidate = () => {
repay the outstanding debt
-
+ Liquidate
+
)}
@@ -283,16 +288,16 @@ export const Repay = () => {
}
/>
-
+
)}
+
@@ -67,6 +74,7 @@ export const VaultsMetrics = () => {
decimals: 2,
isCurrency: true,
allowNegative: false,
+ currency,
})}
@@ -81,6 +89,7 @@ export const VaultsMetrics = () => {
decimals: 2,
isCurrency: true,
allowNegative: false,
+ currency,
})}
@@ -91,7 +100,11 @@ export const VaultsMetrics = () => {
{formatNumber(tokenAmountFormated, { dustToZero: true, tokenDecimals })}{" "} {tokenSymbol}
{tokenPrice && (- {formatNumber(amountInUsd, { + {formatNumber(amountInCurrency, { decimals: 2, isCurrency: true, + currency, dustToZero: true, tokenDecimals, })} diff --git a/src/components/vaults/row/VaultsMetrics.tsx b/src/components/vaults/row/VaultsMetrics.tsx index f6fbe95e..47239eb4 100644 --- a/src/components/vaults/row/VaultsMetrics.tsx +++ b/src/components/vaults/row/VaultsMetrics.tsx @@ -10,11 +10,14 @@ import { useTokensQuery } from "@/lib/queries/useTokensQuery"; import { useVaults } from "@/lib/queries/useVaults"; import { Token, Vault } from "@/lib/types"; import { formatNumber } from "@/utils/number"; +import { useSettings } from "@/components/providers/SettingsProvider"; export const VaultsMetrics = () => { + const { currency } = useSettings(); + const { data: alchemists } = useAlchemists(); const { data: vaults } = useVaults(); - // TODO: DefiLlama has missing price for alETH on Arb. Possible somewhere else too. So we take underlying price. Which is more than real value, but better than 0. + const debtTokenPrices = useGetMultipleTokenPrices( alchemists?.map((alchemist) => alchemist.underlyingTokens[0]), ); @@ -53,7 +56,11 @@ export const VaultsMetrics = () => {
- {formatNumber(totalDeposit, { decimals: 2, isCurrency: true })}
+ {formatNumber(totalDeposit, {
+ decimals: 2,
+ isCurrency: true,
+ currency,
+ })}
- {formatNumber(globalTVL, { decimals: 2, isCurrency: true })}
+ {formatNumber(globalTVL, {
+ decimals: 2,
+ isCurrency: true,
+ currency,
+ })}
-
+ We are integrating bridging into the Alchemix front end.
-In the meantime, you may bridge directly through Connext:
-
-
-
-
-
-