Merge pull request #1901 from ResearchHub/support-base-deposits

Support base deposits
ResearchHub · Jan 15, 2025 · 9ad7cb5 · 9ad7cb5
2 parents 2e3401e + 704d4b7
commit 9ad7cb5
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 159 deletions.
diff --git a/components/Ethereum/DepositScreen.js b/components/Ethereum/DepositScreen.js
@@ -11,7 +11,7 @@ import {
   useAccount,
   // eslint-disable-next-line
 } from "wagmi";
-import { sepolia, mainnet } from "wagmi/chains";
+import { sepolia, mainnet, base, baseSepolia } from "wagmi/chains";
 
 // Component
 import Button from "~/components/Form/Button";
@@ -25,16 +25,24 @@ import { captureEvent } from "~/config/utils/events";
 
 const isProduction = process.env.REACT_APP_ENV === "production";
 
-const CHAIN_ID = isProduction ? mainnet.id : sepolia.id;
+const CHAIN_IDS = isProduction
+  ? [mainnet.id, base.id]
+  : [sepolia.id, baseSepolia.id];
 
 // Constants
-const RSCContractAddress = isProduction
-  ? "0xd101dcc414f310268c37eeb4cd376ccfa507f571"
-  : "0xEe8D932a66aDA39E4EF08046734F601D04B6a3DA";
+const RSCContractAddress = {
+  [mainnet.id]: "0xd101dcc414f310268c37eeb4cd376ccfa507f571",
+  [base.id]: "0xfbb75a59193a3525a8825bebe7d4b56899e2f7e1",
+  [sepolia.id]: "0xEe8D932a66aDA39E4EF08046734F601D04B6a3DA",
+  [baseSepolia.id]: "0xdAf43508D785939D6C2d97c2df73d65c9359dBEa",
+};
 
-const HOTWALLET = isProduction
-  ? "0x7F57d306a9422ee8175aDc25898B1b2EBF1010cb"
-  : "0xA8ebEc7ec4BDd36b603C1Bb46C92B8Cc93616e8F";
+const HOTWALLET = {
+  [mainnet.id]: "0x7F57d306a9422ee8175aDc25898B1b2EBF1010cb",
+  [base.id]: "0x7F57d306a9422ee8175aDc25898B1b2EBF1010cb",
+  [sepolia.id]: "0xA8ebEc7ec4BDd36b603C1Bb46C92B8Cc93616e8F",
+  [baseSepolia.id]: "0xA8ebEc7ec4BDd36b603C1Bb46C92B8Cc93616e8F",
+};
 
 const CONTRACT_ABI = isProduction ? contractABI : stagingContractABI;
 export function DepositScreen(props) {
@@ -45,14 +53,14 @@ export function DepositScreen(props) {
   const { chain } = useNetwork();
   const { switchNetwork } = useSwitchNetwork();
   const [amount, setAmount] = useState(0);
-  const { data: signer } = useWalletClient({ chainId: CHAIN_ID });
+  const { data: signer } = useWalletClient({ chainId: chain?.id });
 
   const { config } = usePrepareContractWrite({
-    address: RSCContractAddress,
+    address: RSCContractAddress[chain?.id],
     abi: CONTRACT_ABI,
     functionName: "transfer",
     args: [
-      HOTWALLET,
+      HOTWALLET[chain?.id],
       amount && ethersRef.current
         ? ethersRef.current.utils.parseEther(amount)._hex
         : 0,
@@ -76,7 +84,7 @@ export function DepositScreen(props) {
   const [balance, setBalance] = useState(0);
 
   const { data: RSCBalance, isError: isLoadingBalance } = useContractRead({
-    address: RSCContractAddress,
+    address: RSCContractAddress[chain?.id],
     abi: CONTRACT_ABI,
     functionName: "balanceOf",
     args: [address],
@@ -91,19 +99,53 @@ export function DepositScreen(props) {
     }
   }, [RSCBalance]);
 
+  // Initialize ethers earlier to avoid race conditions
+  useEffect(() => {
+    const ethers = require("ethers").ethers;
+    ethersRef.current = ethers;
+  }, []);
+
+  // Add error state
+  const [error, setError] = useState(null);
+
   const onChange = (e) => {
-    setAmount(e.target.value);
+    const value = e.target.value;
+    // Validate amount
+    if (value && (!Number(value) || Number(value) <= 0)) {
+      setError("Please enter a valid amount");
+    } else if (value && Number(value) > Number(balance)) {
+      setError("Amount exceeds balance");
+    } else {
+      setError(null);
+    }
+    setAmount(value);
   };
 
   const [isTransacting, setIsTransacting] = useState(false);
 
+  const getNetworkName = (chainId) => {
+    switch (chainId) {
+      case mainnet.id:
+        return "ETHEREUM";
+      case sepolia.id:
+        return "ETHEREUM";
+      case base.id:
+        return "BASE";
+      case baseSepolia.id:
+        return "BASE";
+      default:
+        return "unknown";
+    }
+  };
+
   useEffect(() => {
     if (data?.hash) {
       setIsTransacting(false);
       const PAYLOAD = {
         amount,
         transaction_hash: data.hash,
         from_address: address,
+        network: getNetworkName(chain?.id),
       };
 
       fetch(API.TRANSFER, API.POST_CONFIG(PAYLOAD))
@@ -127,6 +169,12 @@ export function DepositScreen(props) {
 
   const signTransaction = async (e) => {
     e && e.preventDefault();
+
+    if (!amount || Number(amount) <= 0) {
+      setError("Please enter a valid amount");
+      return;
+    }
+
     setIsTransacting(true);
 
     if (!signer) {
@@ -135,9 +183,10 @@ export function DepositScreen(props) {
       return;
     }
 
-    if (chain.id !== CHAIN_ID) {
+    if (!CHAIN_IDS.includes(chain?.id)) {
       setIsTransacting(false);
-      switchNetwork(CHAIN_ID);
+      switchNetwork(CHAIN_IDS[0]);
+      return;
     }
 
     write?.();
@@ -180,6 +229,7 @@ export function DepositScreen(props) {
         inputStyles={[styles.fullWidth]}
         rightAlignBalance={true}
         required={true}
+        error={error || (isError ? "Transaction failed" : null)}
       />
       <div className={css(styles.buttonContainer)}>
         <Button