+ {truncateToTwoDecimals(
ethers.utils.formatEther(
ethers.BigNumber.from(
vault.status.totalCollateralValue
).toString()
)
)}
- length={12}
- />{" "}
+
|
{truncateToTwoDecimals(
formatEther(vault.status.minted.toString())
)}
| {" "}
-
+ |
{vault.status.liquidated ? (
Vault Liquidated
@@ -511,4 +417,4 @@ const DataGridComponent: React.FC = ({ vaults }) => {
);
};
-export default DataGridComponent;
\ No newline at end of file
+export default VaultList;
\ No newline at end of file
diff --git a/src/components/listNFTModal/StepOne.tsx b/src/components/listNFTModal/StepOne.tsx
index 9b471e40..66c508a3 100644
--- a/src/components/listNFTModal/StepOne.tsx
+++ b/src/components/listNFTModal/StepOne.tsx
@@ -3,15 +3,17 @@ import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import { Button } from "@mui/material";
+import { arbitrumSepolia } from "viem/chains";
+import { useChainId } from "wagmi";
+
import {
useVaultForListingStore,
useNFTListingModalStore,
useSnackBarStore,
useContractAddressStore,
} from "../../store/Store.ts";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import { useNetwork } from "wagmi";
interface StepProps {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -37,18 +39,15 @@ const StepOne: React.FC = ({
} = useNFTListingModalStore();
const { getSnackBar } = useSnackBarStore();
- const { chain } = useNetwork();
+ const chainId = useChainId();
const { arbitrumSepoliaContractAddress, arbitrumContractAddress } =
useContractAddressStore();
- let vaultManagerAddress: any;
-
- if (chain?.id == 421614) {
- vaultManagerAddress = arbitrumSepoliaContractAddress;
- } else if (chain?.id === 42161) {
- vaultManagerAddress = arbitrumContractAddress;
- }
+ const vaultManagerAddress =
+ chainId === arbitrumSepolia.id
+ ? arbitrumSepoliaContractAddress
+ : arbitrumContractAddress;
useEffect(() => {
getNFTListingModalTotalValue(
diff --git a/src/components/listNFTModal/StepTwo.tsx b/src/components/listNFTModal/StepTwo.tsx
index d41832a7..6a9e28f9 100644
--- a/src/components/listNFTModal/StepTwo.tsx
+++ b/src/components/listNFTModal/StepTwo.tsx
@@ -5,8 +5,11 @@ import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import { Button } from "@mui/material";
import { providers, BigNumber, ethers } from "ethers";
-import { useAccount, useContractReads, useWalletClient } from "wagmi";
+import { useAccount, useReadContracts, useWalletClient, useChainId} from "wagmi";
import { OpenSeaSDK, Chain } from "opensea-js";
+import { arbitrumSepolia } from "viem/chains";
+import { fromHex } from "viem";
+
import {
useVaultForListingStore,
useContractAddressStore,
@@ -15,8 +18,6 @@ import {
useEthToUsdAddressStore,
useSnackBarStore,
} from "../../store/Store";
-import { fromHex } from "viem";
-import { useNetwork } from "wagmi";
interface StepProps {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -32,7 +33,7 @@ const StepTwo: React.FC = ({ modalChildState, tokenMap }) => {
useContractAddressStore();
//this might be useless. where else do I u,se it?
const { chainlinkAbi } = useChainlinkAbiStore();
- const { chain } = useNetwork();
+ const chainId = useChainId();
const { arbitrumOneUSDToEuroAddress, arbitrumSepoliaUSDToEuroAddress } =
useUSDToEuroAddressStore();
const { arbitrumOneEthToUsdAddress, arbitrumSepoliaEthToUsdAddress } =
@@ -44,15 +45,15 @@ const StepTwo: React.FC = ({ modalChildState, tokenMap }) => {
functionName: "latestRoundData",
};
const eurUsdAddress =
- chain?.id === 421614
+ chainId === arbitrumSepolia.id
? arbitrumSepoliaUSDToEuroAddress
: arbitrumOneUSDToEuroAddress;
const ethUsdAddress =
- chain?.id === 421614
+ chainId === arbitrumSepolia.id
? arbitrumSepoliaEthToUsdAddress
: arbitrumOneEthToUsdAddress;
- const { data: priceData } = useContractReads({
+ const { data: priceData } = useReadContracts({
contracts: [
{
address: ethUsdAddress,
@@ -83,7 +84,7 @@ const StepTwo: React.FC = ({ modalChildState, tokenMap }) => {
};
provider = new providers.Web3Provider(transport, network);
- openseaSDK = chain?.id === 421614 ?
+ openseaSDK = chainId === arbitrumSepolia.id ?
new OpenSeaSDK(provider, {
chain: Chain.ArbitrumGoerli,
}) :
@@ -99,7 +100,7 @@ const StepTwo: React.FC = ({ modalChildState, tokenMap }) => {
const tokenIdBeforeConversion: any = vaultForListing.tokenId;
const tokenId: any = fromHex(tokenIdBeforeConversion, "number").toString();
- const tokenAddress = chain?.id === 421614 ?
+ const tokenAddress = chainId === arbitrumSepolia.id ?
arbitrumSepoliaContractAddress :
arbitrumContractAddress;
diff --git a/src/components/staking/StakingEarn.tsx b/src/components/staking/StakingEarn.tsx
index d50cfebb..63a33193 100644
--- a/src/components/staking/StakingEarn.tsx
+++ b/src/components/staking/StakingEarn.tsx
@@ -1,9 +1,8 @@
import { useState, useEffect } from "react";
import { Box, Typography, Tooltip } from "@mui/material";
-import { getNetwork } from "@wagmi/core";
-import { useContractRead, useAccount } from "wagmi";
+import { useReadContract, useAccount, useChainId } from "wagmi";
import axios from "axios";
-
+import { arbitrumSepolia } from "wagmi/chains";
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import {
@@ -27,21 +26,18 @@ const StakingEarn = () => {
} = useLiquidationPoolStore();
const { address } = useAccount();
- const { chain } = getNetwork();
+ const chainId = useChainId();
const liquidationPoolAddress =
- chain?.id === 421614
+ chainId === arbitrumSepolia.id
? arbitrumSepoliaLiquidationPoolAddress
: arbitrumLiquidationPoolAddress;
- const { data: liquidationPool } = useContractRead({
+ const { data: liquidationPool } = useReadContract({
address: liquidationPoolAddress,
abi: liquidationPoolAbi,
functionName: "position",
- args: [
- address
- ],
- watch: false,
+ args: [address as any],
});
const positions: any = liquidationPool && liquidationPool[0];
diff --git a/src/components/staking/StakingLiquidations.tsx b/src/components/staking/StakingLiquidations.tsx
index 3f2e57d9..ed5e9f6b 100644
--- a/src/components/staking/StakingLiquidations.tsx
+++ b/src/components/staking/StakingLiquidations.tsx
@@ -3,10 +3,12 @@ import { ethers } from "ethers";
import { Box, Typography } from "@mui/material";
import { styled } from '@mui/material/styles';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import { formatUnits } from "ethers/lib/utils";
import {
- useContractWrite
+ useWriteContract,
+ useChainId,
} from "wagmi";
-import { getNetwork } from "@wagmi/core";
+import { arbitrumSepolia } from "wagmi/chains";
import {
useSnackBarStore,
useCircularProgressStore,
@@ -15,7 +17,6 @@ import {
} from "../../store/Store.ts";
import Button from "../Button";
-import { formatUnits } from "ethers/lib/utils";
import ethereumlogo from "../../assets/ethereumlogo.svg";
import wbtclogo from "../../assets/wbtclogo.svg";
import linklogo from "../../assets/linklogo.svg";
@@ -47,7 +48,7 @@ interface StakingLiquidationsProps {
const StakingLiquidations: React.FC = ({
rewards,
}) => {
- const { chain } = getNetwork();
+ const chainId = useChainId();
const { liquidationPoolAbi } = useLiquidationPoolAbiStore();
const { getSnackBar } = useSnackBarStore();
@@ -59,34 +60,33 @@ const StakingLiquidations: React.FC = ({
} = useLiquidationPoolStore();
const liquidationPoolAddress =
- chain?.id === 421614
+ chainId === arbitrumSepolia.id
? arbitrumSepoliaLiquidationPoolAddress
: arbitrumLiquidationPoolAddress;
- const depositToken = useContractWrite({
- address: liquidationPoolAddress,
- abi: liquidationPoolAbi,
- functionName: "claimRewards",
- onError(error: any) {
+ const { writeContract, isError, isPending, isSuccess } = useWriteContract();
+
+ const handleClaimRewards = async () => {
+ try {
+ writeContract({
+ abi: liquidationPoolAbi,
+ address: liquidationPoolAddress as any,
+ functionName: "claimRewards",
+ args: [],
+ });
+
+ getSnackBar('SUCCESS', 'Success!');
+ } catch (error: any) {
let errorMessage: any = '';
if (error && error.shortMessage) {
errorMessage = error.shortMessage;
}
getSnackBar('ERROR', errorMessage);
- },
- onSuccess() {
- getSnackBar('SUCCESS', 'Success!');
}
- });
-
- const handleWithdrawTokens = async () => {
- const { write } = depositToken;
- write();
};
useEffect(() => {
- const { isLoading, isSuccess, isError } = depositToken;
- if (isLoading) {
+ if (isPending) {
getProgressType('STAKE_CLAIM');
getCircularProgress(true);
} else if (isSuccess) {
@@ -95,9 +95,9 @@ const StakingLiquidations: React.FC = ({
getCircularProgress(false);
}
}, [
- depositToken.isLoading,
- depositToken.isSuccess,
- depositToken.isError,
+ isPending,
+ isSuccess,
+ isError,
]);
const [paginationModel, setPaginationModel] = useState({
@@ -327,7 +327,7 @@ const StakingLiquidations: React.FC = ({
sm: "unset"
}
}}
- clickFunction={handleWithdrawTokens}
+ clickFunction={handleClaimRewards}
isDisabled={noRewards}
>
Claim All Rewards
diff --git a/src/components/staking/StakingStake.tsx b/src/components/staking/StakingStake.tsx
index 7737fd72..0d758720 100644
--- a/src/components/staking/StakingStake.tsx
+++ b/src/components/staking/StakingStake.tsx
@@ -9,12 +9,14 @@ import {
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import {
useAccount,
- useContractReads,
- useContractWrite
+ useReadContracts,
+ useWriteContract,
+ useChainId,
+ useWatchBlockNumber,
} from "wagmi";
-import { getNetwork } from "@wagmi/core";
-import { arbitrum } from "wagmi/chains";
+import { arbitrum, arbitrumSepolia } from "wagmi/chains";
import { formatEther, parseEther } from "viem";
+
import {
usePositionStore,
useTstAddressStore,
@@ -25,12 +27,13 @@ import {
useLiquidationPoolAbiStore,
useLiquidationPoolStore,
} from "../../store/Store.ts";
+
import Card from "../Card.tsx";
import Button from "../Button.tsx";
import Exchange from "../Exchange.tsx";
const StakingStake = () => {
- const { chain } = getNetwork();
+ const chainId = useChainId();
const {
arbitrumTstAddress,
arbitrumSepoliaTstAddress,
@@ -53,6 +56,7 @@ const StakingStake = () => {
const [learnMore, setLearnMore] = useState(false);
const [tstStakeAmount, setTstStakeAmount] = useState(0);
const [eurosStakeAmount, setEurosStakeAmount] = useState(0);
+ const [stage, setStage] = useState('');
// const [autoTrade, setAutoTrade] = useState(false);
const tstInputRef: any = useRef(null);
@@ -70,15 +74,15 @@ const StakingStake = () => {
return () => window.removeEventListener("resize", updatePosition);
}, [setPosition]);
- const tstAddress = chain?.id === 421614 ?
+ const tstAddress = chainId === arbitrumSepolia.id ?
arbitrumSepoliaTstAddress :
arbitrumTstAddress;
- const eurosAddress = chain?.id === 421614 ?
+ const eurosAddress = chainId === arbitrumSepolia.id ?
arbitrumSepoliasEuroAddress :
arbitrumsEuroAddress;
- const liquidationPoolAddress = chain?.id === 421614 ? arbitrumSepoliaLiquidationPoolAddress :
+ const liquidationPoolAddress = chainId === arbitrumSepolia.id ? arbitrumSepoliaLiquidationPoolAddress :
arbitrumLiquidationPoolAddress;
const tstContract = {
@@ -86,17 +90,16 @@ const StakingStake = () => {
abi: erc20Abi,
}
- const { data: tstData } = useContractReads({
+ const { data: tstData, refetch: refetchTst } = useReadContracts({
contracts: [{
... tstContract,
functionName: "allowance",
args: [address as any, liquidationPoolAddress]
- },{
+ },{
... tstContract,
functionName: "balanceOf",
args: [address as any]
- }],
- watch: true
+ }],
});
const eurosContract = {
@@ -104,19 +107,25 @@ const StakingStake = () => {
abi: erc20Abi,
}
- const { data: eurosData } = useContractReads({
+ const { data: eurosData, refetch: refetchEuros } = useReadContracts({
contracts: [{
... eurosContract,
functionName: "allowance",
args: [address as any, liquidationPoolAddress]
- },{
+ },{
... eurosContract,
functionName: "balanceOf",
args: [address as any]
- }],
- watch: true
+ }],
});
+ useWatchBlockNumber({
+ onBlockNumber() {
+ refetchTst();
+ refetchEuros();
+ },
+ })
+
const existingTstAllowance: any = tstData && tstData[0].result;
const tstBalance: any = tstData && tstData[1].result;
@@ -126,137 +135,136 @@ const StakingStake = () => {
const tstInWei = parseEther(tstStakeAmount.toString());
const eurosInWei = parseEther(eurosStakeAmount.toString());
- const approveTst = useContractWrite({
- address: tstAddress as any,
- abi: erc20Abi,
- functionName: "approve",
- args: [liquidationPoolAddress as any, tstInWei],
- onError(error: any) {
+ const { writeContract, isError, isPending, isSuccess } = useWriteContract();
+
+ const handleApproveTst = async () => {
+ setStage('APPROVE_TST');
+ try {
+ writeContract({
+ abi: erc20Abi,
+ address: tstAddress as any,
+ functionName: "approve",
+ args: [liquidationPoolAddress as any, tstInWei],
+ });
+
+ getSnackBar('SUCCESS', 'TST Approved');
+ } catch (error: any) {
let errorMessage: any = '';
if (error && error.shortMessage) {
errorMessage = error.shortMessage;
}
getSnackBar('ERROR', errorMessage);
- },
- onSuccess() {
- getSnackBar('SUCCESS', 'TST Approved');
- }
- });
-
- useEffect(() => {
- const { isLoading, isSuccess, isError } = approveTst;
- if (isLoading) {
- getProgressType('STAKE_DEPOSIT');
- getCircularProgress(true);
- } else if (isSuccess) {
- handleApproveEuros();
- } else if (isError) {
- getCircularProgress(false);
}
- }, [
- approveTst.isLoading,
- approveTst.isSuccess,
- approveTst.data,
- approveTst.isError,
- ]);
+ };
const handleApproveEuros = async () => {
- const { write } = approveEuros;
+ setStage('APPROVE_EUROS');
setTimeout(() => {
- write();
+ try {
+ writeContract({
+ abi: erc20Abi,
+ address: eurosAddress as any,
+ functionName: "approve",
+ args: [liquidationPoolAddress as any, eurosInWei],
+ });
+
+ getSnackBar('SUCCESS', 'EUROs Approved');
+ } catch (error: any) {
+ let errorMessage: any = '';
+ if (error && error.shortMessage) {
+ errorMessage = error.shortMessage;
+ }
+ getSnackBar('ERROR', errorMessage);
+ }
}, 1000);
};
- const approveEuros = useContractWrite({
- address: eurosAddress as any,
- abi: erc20Abi,
- functionName: "approve",
- args: [liquidationPoolAddress as any, eurosInWei],
- onError(error: any) {
- let errorMessage: any = '';
- if (error && error.shortMessage) {
- errorMessage = error.shortMessage;
- }
- getSnackBar('ERROR', errorMessage);
- },
- onSuccess() {
- getSnackBar('SUCCESS', 'EUROs Approved');
- }
- });
-
- useEffect(() => {
- const { isLoading, isSuccess, isError } = approveEuros;
- if (isLoading) {
- getProgressType('STAKE_DEPOSIT');
- getCircularProgress(true);
- } else if (isSuccess) {
- handleDepositToken();
- } else if (isError) {
- getCircularProgress(false);
- }
- }, [
- approveEuros.isLoading,
- approveEuros.isSuccess,
- approveEuros.data,
- approveEuros.isError,
- ]);
-
const handleDepositToken = async () => {
- const { write } = depositToken;
+ setStage('DEPOSIT_TOKEN');
setTimeout(() => {
- write();
+ try {
+ writeContract({
+ abi: liquidationPoolAbi,
+ address: liquidationPoolAddress as any,
+ functionName: "increasePosition",
+ args: [
+ tstInWei,
+ eurosInWei
+ ],
+ });
+
+ getSnackBar('SUCCESS', 'Success!');
+ } catch (error: any) {
+ let errorMessage: any = '';
+ if (error && error.shortMessage) {
+ errorMessage = error.shortMessage;
+ }
+ getSnackBar('ERROR', errorMessage);
+ }
}, 1000);
};
-
- const depositToken = useContractWrite({
- address: liquidationPoolAddress,
- abi: liquidationPoolAbi,
- functionName: "increasePosition",
- args: [
- tstInWei,
- eurosInWei
- ],
- onError(error: any) {
- let errorMessage: any = '';
- if (error && error.shortMessage) {
- errorMessage = error.shortMessage;
+
+ const handleLetsStake = async () => {
+ if (existingTstAllowance < tstInWei) {
+ handleApproveTst();
+ } else {
+ if (existingEurosAllowance < eurosInWei) {
+ handleApproveEuros();
+ } else {
+ handleDepositToken();
}
- getSnackBar('ERROR', errorMessage);
- },
- onSuccess() {
- getSnackBar('SUCCESS', 'Success!');
}
- });
-
- const handleDepositTokens = async () => {
- const { write } = existingTstAllowance < tstInWei ?
- approveTst : existingEurosAllowance < eurosInWei ?
- approveEuros : depositToken;
- write();
};
useEffect(() => {
- const { isLoading, isSuccess, isError } = depositToken;
- if (isLoading) {
- getProgressType('STAKE_DEPOSIT');
- getCircularProgress(true);
- } else if (isSuccess) {
- getCircularProgress(false);
- eurosInputRef.current.value = "";
- tstInputRef.current.value = "";
- setTstStakeAmount(0);
- setEurosStakeAmount(0);
- } else if (isError) {
- getCircularProgress(false);
- eurosInputRef.current.value = "";
- tstInputRef.current.value = "";
- setTstStakeAmount(0);
- setEurosStakeAmount(0);
+ if (stage === 'APPROVE_TST') {
+ if (isPending) {
+ getProgressType('STAKE_DEPOSIT');
+ getCircularProgress(true);
+ } else if (isSuccess) {
+ handleApproveEuros();
+ setStage('');
+ } else if (isError) {
+ getCircularProgress(false);
+ setStage('');
+ }
+ }
+ if (stage === 'APPROVE_EUROS') {
+ if (isPending) {
+ getProgressType('STAKE_DEPOSIT');
+ getCircularProgress(true);
+ } else if (isSuccess) {
+ handleDepositToken();
+ setStage('');
+ } else if (isError) {
+ getCircularProgress(false);
+ setStage('');
+ }
+ }
+ if (stage === 'DEPOSIT_TOKEN') {
+ if (isPending) {
+ getProgressType('STAKE_DEPOSIT');
+ getCircularProgress(true);
+ } else if (isSuccess) {
+ getCircularProgress(false);
+ eurosInputRef.current.value = "";
+ tstInputRef.current.value = "";
+ setTstStakeAmount(0);
+ setEurosStakeAmount(0);
+ setStage('');
+ } else if (isError) {
+ getCircularProgress(false);
+ eurosInputRef.current.value = "";
+ tstInputRef.current.value = "";
+ setTstStakeAmount(0);
+ setEurosStakeAmount(0);
+ setStage('');
+ }
}
}, [
- depositToken.isLoading,
- depositToken.isSuccess,
- depositToken.isError,
+ isPending,
+ isSuccess,
+ isError,
]);
const handleTstAmount = (e: any) => {
@@ -456,7 +464,7 @@ const StakingStake = () => {
marginTop: "1rem",
}}
isDisabled={tstStakeAmount <= 0 && eurosStakeAmount <= 0}
- clickFunction={handleDepositTokens}
+ clickFunction={handleLetsStake}
>
Let's Stake
diff --git a/src/components/staking/WithdrawModal.tsx b/src/components/staking/WithdrawModal.tsx
index 6deb14de..8231c063 100644
--- a/src/components/staking/WithdrawModal.tsx
+++ b/src/components/staking/WithdrawModal.tsx
@@ -1,7 +1,10 @@
import { useState, useEffect, useRef } from "react";
import { Box, Modal, Typography } from "@mui/material";
-import { useContractWrite } from "wagmi";
-import { getNetwork } from "@wagmi/core";
+import {
+ useWriteContract,
+ useChainId,
+} from "wagmi";
+import { arbitrumSepolia } from "wagmi/chains";
import { formatEther, parseEther } from "viem";
import Lottie from "lottie-react";
import withdrawLottie from "../../lotties/withdrawal.json";
@@ -32,7 +35,7 @@ const WithdrawModal: React.FC = ({
const [claimLoading, setClaimLoading] = useState(false);
const [tstWithdrawAmount, setTstWithdrawAmount] = useState(0);
const [eurosWithdrawAmount, setEurosWithdrawAmount] = useState(0);
- const { chain } = getNetwork();
+ const chainId = useChainId();
const tstInputRef: any = useRef(null);
const eurosInputRef: any = useRef(null);
@@ -46,32 +49,35 @@ const WithdrawModal: React.FC = ({
const useTstStakedAmount = formatEther(tstStakedAmount.toString());
const useEurosStakedAmount = formatEther(eurosStakedAmount.toString());
- const liquidationPoolAddress = chain?.id === 421614 ? arbitrumSepoliaLiquidationPoolAddress :
+ const liquidationPoolAddress = chainId === arbitrumSepolia.id ? arbitrumSepoliaLiquidationPoolAddress :
arbitrumLiquidationPoolAddress;
- const withdrawToken = useContractWrite({
- address: liquidationPoolAddress,
- abi: liquidationPoolAbi,
- functionName: "decreasePosition",
- args: [
- parseEther(tstWithdrawAmount.toString()),
- parseEther(eurosWithdrawAmount.toString()),
- ],
- onError(error: any) {
+ const { writeContract, isError, isPending, isSuccess } = useWriteContract();
+
+ const handleApproveWithdraw = async () => {
+ try {
+ writeContract({
+ abi: liquidationPoolAbi,
+ address: liquidationPoolAddress as any,
+ functionName: "decreasePosition",
+ args: [
+ parseEther(tstWithdrawAmount.toString()),
+ parseEther(eurosWithdrawAmount.toString()),
+ ],
+ });
+
+ getSnackBar('SUCCESS', 'Success!');
+ } catch (error: any) {
let errorMessage: any = '';
if (error && error.shortMessage) {
errorMessage = error.shortMessage;
}
getSnackBar('ERROR', errorMessage);
- },
- onSuccess() {
- getSnackBar('SUCCESS', 'Success!');
}
- });
+ };
useEffect(() => {
- const { isLoading, isSuccess, isError } = withdrawToken;
- if (isLoading) {
+ if (isPending) {
setClaimLoading(true);
} else if (isSuccess) {
setClaimLoading(false);
@@ -84,17 +90,11 @@ const WithdrawModal: React.FC = ({
setEurosWithdrawAmount(0);
}
}, [
- withdrawToken.isLoading,
- withdrawToken.isSuccess,
- withdrawToken.data,
- withdrawToken.isError,
+ isPending,
+ isSuccess,
+ isError,
]);
- const handleApproveWithdraw = async () => {
- const { write } = withdrawToken;
- write();
- };
-
const handleTstAmount = (e: any) => {
if (Number(e.target.value) < 10n ** 21n) {
setTstWithdrawAmount(Number(e.target.value));
diff --git a/src/components/staking/legacy/ClaimingModal.tsx b/src/components/staking/legacy/ClaimingModal.tsx
index f4205b05..07385a9c 100644
--- a/src/components/staking/legacy/ClaimingModal.tsx
+++ b/src/components/staking/legacy/ClaimingModal.tsx
@@ -1,13 +1,18 @@
import { useState, useEffect } from "react";
import { Box, Modal, Typography } from "@mui/material";
import CircularProgress from "@mui/material/CircularProgress";
-import { useAccount, useContractWrite } from "wagmi";
import { formatEther } from "viem";
import Confetti from 'react-confetti';
+import {
+ useAccount,
+ useWriteContract,
+} from "wagmi";
+
import {
useStakingAbiStore,
useSnackBarStore,
} from "../../../store/Store";
+
import Button from "../../../components/Button";
interface ClaimingModalProps {
@@ -44,26 +49,30 @@ const ClaimingModal: React.FC = ({
const stakingAddress = stakingPosition?.address;
- const claimPosition = useContractWrite({
- address: stakingAddress as any,
- abi: stakingAbi,
- functionName: "burn",
- account: address,
- onError(error: any) {
+ const { writeContract, isError, isPending, isSuccess } = useWriteContract();
+
+ const handleClaimPosition = async () => {
+ try {
+ writeContract({
+ abi: stakingAbi,
+ address: stakingAddress as any,
+ functionName: "burn",
+ account: address as any,
+ args: [],
+ });
+
+ getSnackBar('SUCCESS', 'TST Approved');
+ } catch (error: any) {
let errorMessage: any = '';
if (error && error.shortMessage) {
errorMessage = error.shortMessage;
}
getSnackBar('ERROR', errorMessage);
- },
- onSuccess() {
- getSnackBar('SUCCESS', 'Success!');
}
- });
+ };
useEffect(() => {
- const { isLoading, isSuccess, isError } = claimPosition;
- if (isLoading) {
+ if (isPending) {
setClaimLoading(true);
setSuccess(false);
} else if (isSuccess) {
@@ -74,17 +83,11 @@ const ClaimingModal: React.FC = ({
setSuccess(false);
}
}, [
- claimPosition.isLoading,
- claimPosition.isSuccess,
- claimPosition.data,
- claimPosition.isError,
+ isPending,
+ isSuccess,
+ isError,
]);
- const handleApproveClaim = async () => {
- const { write } = claimPosition;
- write();
- };
-
return (
<>
= ({
padding: "5px",
height: "2rem",
}}
- clickFunction={handleApproveClaim}
+ clickFunction={handleClaimPosition}
>
Claim
diff --git a/src/components/staking/legacy/StakingModal.tsx b/src/components/staking/legacy/StakingModal.tsx
index 3023e247..c4a6abb3 100644
--- a/src/components/staking/legacy/StakingModal.tsx
+++ b/src/components/staking/legacy/StakingModal.tsx
@@ -1,16 +1,25 @@
import { useState, useEffect, useRef } from "react";
import { Box, Modal, Typography } from "@mui/material";
import CircularProgress from "@mui/material/CircularProgress";
-import { useAccount, useContractRead, useContractReads, useContractWrite } from "wagmi";
-import { getNetwork } from "@wagmi/core";
+import {
+ useAccount,
+ useReadContract,
+ useReadContracts,
+ useWriteContract,
+ useChainId,
+ useWatchBlockNumber
+} from "wagmi";
import { formatEther, parseEther } from "viem";
import moment from 'moment';
+import { arbitrumSepolia } from "wagmi/chains";
+
import {
useTstAddressStore,
useErc20AbiStore,
useStakingAbiStore,
useSnackBarStore,
} from "../../../store/Store";
+
import Button from "../../../components/Button";
interface StakingModalProps {
@@ -24,7 +33,7 @@ const StakingModal: React.FC = ({
isOpen,
handleCloseModal,
}) => {
- const { chain } = getNetwork();
+ const chainId = useChainId();
const [stakeAmount, setStakeAmount] = useState(0);
const {
arbitrumTstAddress,
@@ -38,6 +47,7 @@ const StakingModal: React.FC = ({
const [approveLoading, setApproveLoading] = useState(false);
const [mintLoading, setMintLoading] = useState(false);
const [success, setSuccess] = useState(false);
+ const [stage, setStage] = useState('');
const inputRef: any = useRef(null);
@@ -46,7 +56,7 @@ const StakingModal: React.FC = ({
setSuccess(false);
}, [isOpen]);
- const tstAddress = chain?.id === 421614 ?
+ const tstAddress = chainId === arbitrumSepolia.id ?
arbitrumSepoliaTstAddress :
arbitrumTstAddress ;
@@ -60,55 +70,58 @@ const StakingModal: React.FC = ({
const windowEndUnix = Number(stakingWindowEnd);
const windowEnd = moment.unix(windowEndUnix);
- const approvePayment = useContractWrite({
- address: tstAddress as any,
- abi: erc20Abi,
- functionName: "approve",
- args: [stakingAddress as any, amountInWei],
- onError(error: any) {
+ const { writeContract, isError, isPending, isSuccess } = useWriteContract();
+
+ const handleApprovePayment = async () => {
+ setStage('APPROVE_PAYMENT');
+ try {
+ writeContract({
+ abi: erc20Abi,
+ address: tstAddress as any,
+ functionName: "approve",
+ args: [stakingAddress as any, amountInWei],
+ });
+
+ getSnackBar('SUCCESS', 'Success!');
+ } catch (error: any) {
let errorMessage: any = '';
if (error && error.shortMessage) {
errorMessage = error.shortMessage;
}
getSnackBar('ERROR', errorMessage);
- },
- onSuccess() {
- getSnackBar('SUCCESS', 'Success!');
}
- });
+ };
- const {data: rewardAmount}: any = useContractRead({
+ const {data: rewardAmount}: any = useReadContract({
address: stakingAddress,
abi: stakingAbi,
functionName: "calculateReward",
args: [amountInWei]
});
- // const {data: existingAllowance}: any = useContractRead({
- // address: tstAddress as any,
- // abi: erc20Abi,
- // functionName: "allowance",
- // args: [accountAddress, stakingAddress]
- // })
-
const tstContract = {
address: tstAddress,
abi: erc20Abi,
}
- const { data: tstData } = useContractReads({
+ const { data: tstData, refetch } = useReadContracts({
contracts: [{
... tstContract,
functionName: "allowance",
args: [accountAddress as any, stakingAddress]
- },{
+ },{
... tstContract,
functionName: "balanceOf",
args: [accountAddress as any]
- }],
- watch: true
+ }],
});
+ useWatchBlockNumber({
+ onBlockNumber() {
+ refetch();
+ },
+ })
+
const existingAllowance: any = tstData && tstData[0].result;
const tstBalance: any = tstData && tstData[1].result;
@@ -122,65 +135,61 @@ const StakingModal: React.FC = ({
rewardRate = Number(stakingContract.SI_RATE) / 1000;
}
- useEffect(() => {
- const { isLoading, isSuccess, isError } = approvePayment;
- if (isLoading) {
- setApproveLoading(true);
- } else if (isSuccess) {
- setApproveLoading(false);
- handleMintPosition();
- } else if (isError) {
- setApproveLoading(false);
- handleCloseModal();
- }
- }, [
- approvePayment.isLoading,
- approvePayment.isSuccess,
- approvePayment.data,
- approvePayment.isError,
- ]);
-
const handleMintPosition = async () => {
- const { write } = mintPosition;
- write();
- };
+ setStage('MINT_POSITION');
+ try {
+ writeContract({
+ abi: stakingAbi,
+ address: stakingAddress as any,
+ functionName: "mint",
+ args: [amountInWei],
+ });
- const mintPosition = useContractWrite({
- address: stakingAddress,
- abi: stakingAbi,
- functionName: "mint",
- args: [amountInWei],
- onError(error: any) {
+ getSnackBar('SUCCESS', 'Success!');
+ } catch (error: any) {
let errorMessage: any = '';
if (error && error.shortMessage) {
errorMessage = error.shortMessage;
}
getSnackBar('ERROR', errorMessage);
- },
- onSuccess() {
- getSnackBar('SUCCESS', 'Success!');
}
- });
+ };
useEffect(() => {
- const { isLoading, isSuccess, isError } = mintPosition;
- if (isLoading) {
- setMintLoading(true);
- setSuccess(false);
- } else if (isSuccess) {
- setMintLoading(false);
- setSuccess(true);
- } else if (isError) {
- setMintLoading(false);
- setSuccess(false);
+ if (stage === 'APPROVE_PAYMENT') {
+ if (isPending) {
+ setApproveLoading(true);
+ } else if (isSuccess) {
+ setApproveLoading(false);
+ handleMintPosition();
+ setStage('');
+ } else if (isError) {
+ setApproveLoading(false);
+ handleCloseModal();
+ setStage('');
+ }
+ }
+ if (stage === 'MINT_POSITION') {
+ if (isPending) {
+ setMintLoading(true);
+ setSuccess(false);
+ } else if (isSuccess) {
+ setMintLoading(false);
+ setSuccess(true);
+ setStage('');
+ } else if (isError) {
+ setMintLoading(false);
+ setSuccess(false);
+ setStage('');
+ }
}
}, [
- mintPosition.isLoading,
- mintPosition.isSuccess,
- mintPosition.data,
- mintPosition.isError,
+ isPending,
+ isSuccess,
+ isError,
]);
+
const handleAmount = (e: any) => {
if (Number(e.target.value) < 10n ** 21n) {
setStakeAmount(Number(e.target.value));
@@ -194,9 +203,14 @@ const StakingModal: React.FC = ({
}
const handleStaking = async () => {
- const { write } = existingAllowance >= amountInWei ?
- mintPosition : approvePayment;
- write();
+ // const { write } = existingAllowance >= amountInWei ?
+ // handleMintPosition : handleApprovePayment;
+ // write();
+ if (existingAllowance >= amountInWei) {
+ handleMintPosition();
+ } else {
+ handleApprovePayment();
+ }
};
return (
diff --git a/src/components/staking/legacy/StakingTST.tsx b/src/components/staking/legacy/StakingTST.tsx
index c13d8997..e40fc1ce 100644
--- a/src/components/staking/legacy/StakingTST.tsx
+++ b/src/components/staking/legacy/StakingTST.tsx
@@ -1,6 +1,12 @@
import { Box, Typography } from "@mui/material";
-import { getNetwork } from "@wagmi/core";
-import { useContractRead, useContractReads, useAccount } from "wagmi";
+import {
+ useReadContract,
+ useReadContracts,
+ useAccount,
+ useChainId,
+ useWatchBlockNumber
+} from "wagmi";
+import { arbitrumSepolia } from "wagmi/chains";
import {
useStakingAbiStore,
@@ -26,21 +32,21 @@ const StakingTST = () => {
} = useStakingContractsStore();
const { address } = useAccount();
- const { chain } = getNetwork();
+ const chainId = useChainId();
const vaultManagerAddress =
- chain?.id === 421614
+ chainId === arbitrumSepolia.id
? arbitrumSepoliaContractAddress
: arbitrumContractAddress;
const stakingContractsAddress =
- chain?.id === 421614
+ chainId === arbitrumSepolia.id
? arbitrumSepoliaStakingContractsAddress
: arbitrumStakingContractsAddress;
//////////////////////////
// Handling Directory List
- const { data: stakingAddresses } = useContractRead({
+ const { data: stakingAddresses } = useReadContract({
address: stakingContractsAddress,
abi: stakingAbi,
functionName: "list",
@@ -79,7 +85,7 @@ const StakingTST = () => {
]
}).flat();
- const { data: stakingData } = useContractReads({contracts});
+ const { data: stakingData } = useReadContracts({contracts});
const nestedStakingData = stakingData && stakingAddresses?.map((address, i) => {
return {
@@ -107,7 +113,15 @@ const StakingTST = () => {
]
}).flat();
- const { data: positionData } = useContractReads({contracts: positions, watch: true});
+ const { data: positionData, refetch } = useReadContracts({
+ contracts: positions,
+ });
+
+ useWatchBlockNumber({
+ onBlockNumber() {
+ refetch();
+ },
+ })
const nestedPositionData = positionData && nestedStakingData && stakingAddresses?.map((address, i) => {
const positionItem: any = positionData[i].result;
diff --git a/src/components/vaultCard/VaultCard.tsx b/src/components/vaultCard/VaultCard.tsx
index 915c1b16..968be8f7 100644
--- a/src/components/vaultCard/VaultCard.tsx
+++ b/src/components/vaultCard/VaultCard.tsx
@@ -10,9 +10,8 @@ import {
} from "../../store/Store.ts";
import "../../styles/buttonStyle.css";
import { useNavigate } from "react-router-dom";
-import { getNetwork } from "@wagmi/core";
-import { useAccount, useContractEvent, useContractWrite } from "wagmi";
-import { arbitrum } from "wagmi/chains";
+import { useAccount, useChainId, useWatchContractEvent, useWriteContract } from "wagmi";
+import { arbitrum, arbitrumSepolia } from "wagmi/chains";
import Card from "../Card";
import Button from "../Button";
@@ -28,7 +27,7 @@ const Alert = React.forwardRef(function Alert(
interface VaultCardProps {
title: string;
para: string;
- borrowRate: string;
+ // borrowRate: string;
image: string;
isActive: boolean;
}
@@ -36,7 +35,7 @@ interface VaultCardProps {
const VaultCard: React.FC = ({
title,
para,
- borrowRate,
+ // borrowRate,
image,
isActive,
}) => {
@@ -50,10 +49,10 @@ const VaultCard: React.FC = ({
const { vaultManagerAbi } = useVaultManagerAbiStore();
const navigate = useNavigate();
const { address } = useAccount();
+ const [tokenId, setTokenId] = useState();
const { getCircularProgress, getProgressType } = useCircularProgressStore();
const { getSnackBar } = useSnackBarStore();
- const [tokenId, setTokenId] = useState();
const handleClose = (
_event?: React.SyntheticEvent | Event,
@@ -66,47 +65,30 @@ const VaultCard: React.FC = ({
setOpen(false);
};
- const { chain } = getNetwork();
+ const chainId = useChainId();
+ const vaultAddress = chainId === arbitrumSepolia.id
+ ? arbitrumSepoliaContractAddress
+ : arbitrumContractAddress;
- const mintVault = useContractWrite({
- address:
- chain?.id === 421614
- ? arbitrumSepoliaContractAddress
- : arbitrumContractAddress, // Set a default value or handle this case as per your requirement
- abi: vaultManagerAbi, // Make sure you have vaultManagerAbi defined
- functionName: "mint", // Assuming the function name is 'mint'
- onError(error: any) {
- let errorMessage: any = '';
- if (error && error.shortMessage) {
- errorMessage = error.shortMessage;
- }
- getSnackBar('ERROR', errorMessage);
- },
- onSuccess() {
- getSnackBar('SUCCESS', 'Success!');
- }
- });
+ const { writeContract: mintVault, isError, isPending, isSuccess } = useWriteContract();
// Define your function using async/await
const handleMintVault = async () => {
- if (chain?.id !== 421614 && chain?.id !== arbitrum.id) {
+ if (chainId !== arbitrumSepolia.id && chainId !== arbitrum.id) {
getSnackBar('ERROR', 'Please change to Arbitrum network!');
return;
}
- const { write } = mintVault;
- try {
- // Execute the contract method by calling the 'write' function
- write();
- } catch (error) {
- console.error("error", error);
- // Handle error state
- }
+ mintVault({
+ abi: vaultManagerAbi,
+ address: vaultAddress,
+ functionName: 'mint',
+ args: [],
+ });
};
-
+
useEffect(() => {
- const { isLoading, isSuccess, isError } = mintVault;
- if (isLoading) {
+ if (isPending) {
getProgressType(3);
getCircularProgress(true);
} else if (isSuccess && tokenId) {
@@ -117,34 +99,40 @@ const VaultCard: React.FC = ({
getCircularProgress(false);
}
}, [
- mintVault.data,
- mintVault.error,
- mintVault.isLoading,
- mintVault.isSuccess,
- tokenId,
+ isError,
+ isPending,
+ isSuccess,
+ tokenId
]);
- const unwatchDeployEvent = useContractEvent({
- address:
- chain?.id === 421614
- ? arbitrumSepoliaContractAddress
- : arbitrumContractAddress,
+ useWatchContractEvent({
+ address: vaultAddress,
abi: vaultManagerAbi,
eventName: "VaultDeployed",
- listener(log: any) {
- const { owner, tokenId: newTokenId } = log[0].args;
- if (owner === address) {
- unwatchDeployEvent?.();
- setTokenId(newTokenId);
- }
+ args: {
+ owner: address
},
+ poll: true,
+ pollingInterval: 1000,
+ onLogs(logs: any) {
+ if (logs[0] && logs[0].args) {
+ const { tokenId } = logs[0] && logs[0].args;
+ setTokenId(tokenId)
+ }
+ }
});
return (
= ({
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
- padding: "1rem",
- paddingLeft: "2rem",
}}
>
= ({
sx={{
width: "auto",
height: "15px",
- marginBottom: {
- xs: "2rem",
- lg: "0.5rem",
- },
+ marginBottom: "0.5rem",
}}
variant="body1"
>
{para}
-
{borrowRate}
-
+ */}
|