Remove wagmi dependency to allow for web3js integrations

Se7en-Seas · Jul 9, 2024 · 40d158b · 40d158b
1 parent 850c4c6
commit 40d158b
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 157 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "boring-vault-ui",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "A reusable package to quickly integrate boring vaults onto a UI.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/v1/DelayWithdrawButton.tsx b/src/components/v1/DelayWithdrawButton.tsx
@@ -39,6 +39,7 @@ import { Token } from "../../types";
 import { Contract, formatUnits } from "ethers";
 import { erc20Abi } from "viem";
 import { useEthersSigner } from "../../hooks/ethers";
+import { useAccount } from "wagmi";
 
 interface DelayWithdrawButtonProps {
   buttonText: string;
@@ -70,8 +71,6 @@ const DelayWithdrawButton: React.FC<DelayWithdrawButtonProps> = ({
   const { isOpen, onOpen, onClose } = useDisclosure();
   const {
     withdrawTokens,
-    isConnected,
-    userAddress,
     ethersProvider,
     withdrawStatus,
     delayWithdraw,
@@ -88,10 +87,12 @@ const DelayWithdrawButton: React.FC<DelayWithdrawButtonProps> = ({
 
   useEffect(() => {
     async function fetchBalance() {
-      if (!userAddress || !ethersProvider) return;
+      if (!signer || !ethersProvider) return;
 
       try {
-        const shareBalance = await fetchUserShares();
+        const shareBalance = await fetchUserShares(
+          await signer.getAddress(),
+        );
         setBalance(shareBalance);
       } catch (error) {
         console.error("Failed to fetch share balance:", error);
@@ -100,7 +101,7 @@ const DelayWithdrawButton: React.FC<DelayWithdrawButtonProps> = ({
     }
 
     fetchBalance();
-  }, [userAddress, ethersProvider]);
+  }, [signer, ethersProvider]);
 
   const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newTokenAddress = event.target.value;
@@ -144,7 +145,7 @@ const DelayWithdrawButton: React.FC<DelayWithdrawButtonProps> = ({
 
   return (
     <>
-      <Button onClick={onOpen} isDisabled={!isConnected} {...buttonProps}>
+      <Button onClick={onOpen} isDisabled={!useAccount().isConnected} {...buttonProps}>
         {buttonText}
       </Button>
       <Modal isOpen={isOpen} onClose={onClose} isCentered {...modalProps}>

diff --git a/src/components/v1/DepositButton.tsx b/src/components/v1/DepositButton.tsx
@@ -39,6 +39,7 @@ import { Token } from "../../types";
 import { Contract, formatUnits } from "ethers";
 import { erc20Abi } from "viem";
 import { useEthersSigner } from "../../hooks/ethers";
+import { useAccount } from "wagmi";
 
 interface DepositButtonProps {
   buttonText: string;
@@ -70,8 +71,6 @@ const DepositButton: React.FC<DepositButtonProps> = ({
   const { isOpen, onOpen, onClose } = useDisclosure();
   const {
     depositTokens,
-    isConnected,
-    userAddress,
     ethersProvider,
     deposit,
     depositStatus,
@@ -88,7 +87,7 @@ const DepositButton: React.FC<DepositButtonProps> = ({
     async function fetchBalance() {
       console.log("Token:", selectedToken);
 
-      if (!userAddress || !selectedToken || !ethersProvider) return;
+      if (!signer || !selectedToken || !ethersProvider) return;
 
       try {
         const tokenContract = new Contract(
@@ -97,7 +96,7 @@ const DepositButton: React.FC<DepositButtonProps> = ({
           ethersProvider
         );
 
-        const tokenBalance = await tokenContract.balanceOf(userAddress);
+        const tokenBalance = await tokenContract.balanceOf(await signer.getAddress());
         const formattedBalance = parseFloat(
           formatUnits(tokenBalance, selectedToken.decimals)
         );
@@ -109,7 +108,7 @@ const DepositButton: React.FC<DepositButtonProps> = ({
     }
 
     fetchBalance();
-  }, [userAddress, selectedToken, ethersProvider]);
+  }, [signer, selectedToken, ethersProvider]);
 
   const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newTokenAddress = event.target.value;
@@ -153,7 +152,7 @@ const DepositButton: React.FC<DepositButtonProps> = ({
 
   return (
     <>
-      <Button onClick={onOpen} isDisabled={!isConnected} {...buttonProps}>
+      <Button onClick={onOpen} isDisabled={!useAccount().isConnected} {...buttonProps}>
         {buttonText}
       </Button>
       <Modal isOpen={isOpen} onClose={onClose} isCentered {...modalProps}>

diff --git a/src/components/v1/PendingDelayedWithdraws.tsx b/src/components/v1/PendingDelayedWithdraws.tsx
@@ -14,13 +14,15 @@ const PendingDelayedWithdraws: React.FC<PendingDelayedWithdrawsProps> = ({
   title,
   ...pendingDelayWithdrawProps
 }) => {
-  const { isConnected, userAddress, ethersProvider, delayWithdrawStatuses } =
+  const { ethersProvider, delayWithdrawStatuses } =
     useBoringVaultV1();
   const [statuses, setStatuses] = useState<any[]>([]); // State to store fetched statuses
   const signer = useEthersSigner();
 
   useEffect(() => {
     const fetchStatuses = async () => {
+      if (!signer) return;
+
       const fetchedStatuses = await delayWithdrawStatuses(signer!);
       setStatuses(fetchedStatuses);
     };

diff --git a/src/components/v1/PendingWithdrawQueueStatuses.tsx b/src/components/v1/PendingWithdrawQueueStatuses.tsx
@@ -13,13 +13,14 @@ interface PendingWithdrawQueueStatusesProps {
 const PendingWithdrawQueueStatuses: React.FC<
   PendingWithdrawQueueStatusesProps
 > = ({ title, ...pendingWithdrawQueueProps }) => {
-  const { isConnected, userAddress, ethersProvider, withdrawQueueStatuses } =
-    useBoringVaultV1();
+  const { ethersProvider, withdrawQueueStatuses } = useBoringVaultV1();
   const [statuses, setStatuses] = useState<any[]>([]); // State to store fetched statuses
   const signer = useEthersSigner();
 
   useEffect(() => {
     const fetchStatuses = async () => {
+      if (!signer) return;
+
       const fetchedStatuses: WithdrawQueueStatus[] =
         await withdrawQueueStatuses(signer!);
       setStatuses(fetchedStatuses);

diff --git a/src/components/v1/WithdrawQueueButton.tsx b/src/components/v1/WithdrawQueueButton.tsx
@@ -40,6 +40,7 @@ import { Token } from "../../types";
 import { Contract, formatUnits } from "ethers";
 import { erc20Abi } from "viem";
 import { useEthersSigner } from "../../hooks/ethers";
+import { useAccount } from "wagmi";
 
 interface WithdrawQueueButtonProps {
   buttonText: string;
@@ -71,8 +72,6 @@ const WithdrawQueueButton: React.FC<WithdrawQueueButtonProps> = ({
   const { isOpen, onOpen, onClose } = useDisclosure();
   const {
     withdrawTokens,
-    isConnected,
-    userAddress,
     ethersProvider,
     withdrawStatus,
     queueWithdraw,
@@ -90,10 +89,12 @@ const WithdrawQueueButton: React.FC<WithdrawQueueButtonProps> = ({
 
   useEffect(() => {
     async function fetchBalance() {
-      if (!userAddress || !ethersProvider) return;
+      if (!signer || !ethersProvider) return;
 
       try {
-        const shareBalance = await fetchUserShares();
+        const shareBalance = await fetchUserShares(
+          await signer.getAddress(),
+        );
         setBalance(shareBalance);
       } catch (error) {
         console.error("Failed to fetch share balance:", error);
@@ -102,7 +103,7 @@ const WithdrawQueueButton: React.FC<WithdrawQueueButtonProps> = ({
     }
 
     fetchBalance();
-  }, [userAddress, ethersProvider]);
+  }, [signer, ethersProvider]);
 
   const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newTokenAddress = event.target.value;
@@ -146,7 +147,7 @@ const WithdrawQueueButton: React.FC<WithdrawQueueButtonProps> = ({
 
   return (
     <>
-      <Button onClick={onOpen} isDisabled={!isConnected} {...buttonProps}>
+      <Button onClick={onOpen} isDisabled={!useAccount().isConnected} {...buttonProps}>
         {buttonText}
       </Button>
       <Modal isOpen={isOpen} onClose={onClose} isCentered {...modalProps}>