Merge pull request #31 from rajkharvar/ts-migration

Init: Migrate frontend to typescript
rajkharvar · Jun 15, 2024 · 5fae33c · 5fae33c
2 parents 9058191 + 00e3ef9
commit 5fae33c
Show file tree

Hide file tree

Showing 28 changed files with 346 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ npx hardhat scripts/deploy.js --network [NETWORK]
 
 5. Adding support in the frontend:
 
-   - Open the `constants.js` file in the `frontend/utils` directory.
+   - Open the `constants.ts` file in the `frontend/utils` directory.
    - Include the chain information and Disperse contract address by adding the following code snippet in `supportedChains` array:
      ```javascript
      {

diff --git a/frontend/index.html b/frontend/index.html
@@ -12,6 +12,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "serve": "vite preview"
   },
   "dependencies": {
@@ -13,10 +13,13 @@
     "web3modal": "^1.9.4"
   },
   "devDependencies": {
+    "@types/react": "^18.2.16",
+    "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^1.0.0",
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.4",
     "tailwindcss": "^2.2.19",
+    "typescript": "^5.1.6",
     "vite": "^2.6.4"
   }
 }
diff --git a/frontend/src/App.jsx → frontend/src/App.tsx b/frontend/src/App.jsx → frontend/src/App.tsx
@@ -8,15 +8,15 @@ import WalletInfo from "./components/WalletInfo";
 import Warn from "./components/Warn";
 import Web3Modal from "web3modal";
 import Connect from "./components/Connect";
-import { initState, reducer } from "./reducers/index";
+import { initNetworkContextType, initState, reducer } from "./reducers";
 import { getNetworkInfo, isChainSupported } from "./utils";
 
-export const NetworkContext = createContext();
+export const NetworkContext = createContext(initNetworkContextType);
 
 function App() {
-  const [isMetamaskConnected, setIsMetamaskConnected] = useState();
-  const [isMetamaskInstalled, setIsMetamaskInstalled] = useState();
-  const [address, setAddress] = useState(null);
+  const [isMetamaskConnected, setIsMetamaskConnected] = useState(false);
+  const [isMetamaskInstalled, setIsMetamaskInstalled] = useState(false);
+  const [address, setAddress] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [state, dispatch] = useReducer(reducer, initState);
 
@@ -57,6 +57,7 @@ function App() {
   };
 
   const checkAccountConnected = async () => {
+    const { ethereum } = window;
     const provider = new ethers.providers.Web3Provider(ethereum);
     const accounts = await provider.listAccounts();
     if (!accounts.length) {
@@ -84,7 +85,7 @@ function App() {
     if (ethereum) {
       setIsMetamaskInstalled(true);
       checkAccountConnected();
-      fetchNetworkDetails(ethereum);
+      fetchNetworkDetails();
     } else {
       setIsMetamaskInstalled(false);
     }

diff --git a/frontend/src/components/Confirm.jsx → frontend/src/components/Confirm.tsx b/frontend/src/components/Confirm.jsx → frontend/src/components/Confirm.tsx
@@ -1,7 +1,20 @@
 import { ethers } from "ethers";
-import { useState, useEffect, useContext } from "react";
+import { useEffect, useState } from "react";
+import { RecipientInfo } from "../types/Recipient";
+import { TxStatus } from "../types/Transaction";
 import Status from "./Status";
 
+type ConfirmProps = {
+  recipientsData: RecipientInfo[];
+  total: ethers.BigNumber | null;
+  tokenBalance: string | null;
+  remaining: string | null;
+  approve: () => Promise<void>;
+  disperse: () => Promise<void>;
+  txStatus: TxStatus | null;
+  approveStatus: TxStatus | null;
+};
+
 const Confirm = ({
   recipientsData,
   total,
@@ -11,7 +24,7 @@ const Confirm = ({
   disperse,
   txStatus,
   approveStatus,
-}) => {
+}: ConfirmProps) => {
   const [isDisabled, setIsDisabled] = useState(false);
 
   useEffect(() => {
@@ -31,8 +44,8 @@ const Confirm = ({
           </div>
         </li>
         {recipientsData.length > 0 &&
-          recipientsData.map((recipient) => (
-            <li>
+          recipientsData.map((recipient, index) => (
+            <li key={index}>
               <div className="flex justify-between mt-2">
                 <p>{recipient.address}</p>
                 {/* TODO: Add Horizontal line here */}

diff --git a/frontend/src/components/ConfirmEther.jsx → frontend/src/components/ConfirmEther.tsx b/frontend/src/components/ConfirmEther.jsx → frontend/src/components/ConfirmEther.tsx
@@ -1,18 +1,27 @@
 import { ethers } from "ethers";
-import { useContext, useEffect, useState } from "react";
-import { NetworkContext } from "../App";
+import { useEffect, useState } from "react";
+import { RecipientInfo } from "../types/Recipient";
+import { TxStatus } from "../types/Transaction";
 import Status from "./Status";
 
+type ConfirmEtherProps = {
+  recipientsData: RecipientInfo[];
+  total: ethers.BigNumber | null;
+  tokenBalance: string | null;
+  remaining: string | null;
+  disperse: () => Promise<void>;
+  txStatus: TxStatus | null;
+};
+
 const ConfirmEther = ({
   recipientsData,
   total,
   tokenBalance,
   remaining,
   disperse,
   txStatus,
-}) => {
+}: ConfirmEtherProps) => {
   const [isDisabled, setIsDisabled] = useState(false);
-  const { chainId } = useContext(NetworkContext);
 
   useEffect(() => {
     if (total && tokenBalance) {

diff --git a/frontend/src/components/Connect.jsx → frontend/src/components/Connect.tsx b/frontend/src/components/Connect.jsx → frontend/src/components/Connect.tsx
@@ -1,4 +1,8 @@
-const Connect = ({ connect }) => {
+type ConnectProps = {
+  connect: () => void;
+};
+
+const Connect = ({ connect }: ConnectProps) => {
   return (
     <div className="pt-16">
       <h3 className="text-2xl font-light italic">connect to wallet</h3>

diff --git a/frontend/src/components/Ether.jsx → frontend/src/components/Ether.tsx b/frontend/src/components/Ether.jsx → frontend/src/components/Ether.tsx
@@ -6,24 +6,30 @@ import { getNetworkInfo, parseText } from "../utils/index";
 import Recipients from "./Recipients";
 import ConfirmEther from "./ConfirmEther";
 import { NetworkContext } from "../App";
+import { TxStatus } from "../types/Transaction";
+import { RecipientInfo } from "../types/Recipient";
 
-const Ether = ({ address }) => {
-  const [ethBalance, setEthBalance] = useState(null);
+type EtherProps = {
+  address: string;
+};
+
+const Ether = ({ address }: EtherProps) => {
+  const [ethBalance, setEthBalance] = useState<string | null>(null);
   const [textValue, setTextValue] = useState("");
-  const [total, setTotal] = useState(null);
-  const [recipientsData, setRecipientsData] = useState([]);
-  const [remaining, setRemaining] = useState(null);
+  const [total, setTotal] = useState<ethers.BigNumber | null>(null);
+  const [recipientsData, setRecipientsData] = useState<RecipientInfo[]>([]);
+  const [remaining, setRemaining] = useState<string | null>(null);
   const { chainId } = useContext(NetworkContext);
-  const [txStatus, setTxStatus] = useState(null);
+  const [txStatus, setTxStatus] = useState<TxStatus | null>(null);
   const networkInfo = getNetworkInfo(chainId);
   const disperseAddress = networkInfo?.disperseAddress;
 
   const getEthBalance = async () => {
     const { ethereum } = window;
     if (!ethBalance) {
       const provider = new ethers.providers.Web3Provider(ethereum);
-      let ethBalance = await provider.getBalance(address);
-      ethBalance = ethers.utils.formatEther(ethBalance);
+      const balance = await provider.getBalance(address);
+      const ethBalance = ethers.utils.formatEther(balance);
       setEthBalance(ethBalance);
     }
   };

diff --git a/frontend/src/components/Headers.jsx → frontend/src/components/Headers.tsx b/frontend/src/components/Headers.jsx → frontend/src/components/Headers.tsx
@@ -2,8 +2,13 @@ import { useContext } from "react";
 import { NetworkContext } from "../App";
 import EthereumSVG from "../assets/ethereum.svg";
 
-const Header = ({ address }) => {
+type HeaderProps = {
+  address: string | null;
+};
+
+const Header = ({ address }: HeaderProps) => {
   const networkContext = useContext(NetworkContext);
+
   return (
     <div>
       <div className="flex space-between">