Ported project to typescript.

.gitignore

@@ -4,3 +4,5 @@ node_modules
 #Hardhat files
 cache
 artifacts
+
+typechain-types

README.md

@@ -30,7 +30,7 @@ Then, on a new terminal, go to the repository's root folder and run this to
 deploy your contract:
 
 ```sh
-npx hardhat run scripts/deploy.js --network localhost
+npx hardhat run scripts/deploy.ts --network localhost
 ```
 
 Finally, we can run the frontend with:

frontend/README.md

@@ -21,7 +21,7 @@ This Dapp consists of multiple React Components, which you can find in
 
 Most of them are presentational components, have no logic, and just render HTML.
 
-The core functionality is implemented in `src/components/Dapp.js`, which has
+The core functionality is implemented in `src/components/Dapp.ts`, which has
 examples of how to connect to the user's wallet, initialize your Ethereum
 connection and contracts, read from the contract's state, and send transactions.
 

frontend/package.json

@@ -6,9 +6,12 @@
     "bootstrap": "^4.4.1",
     "ethers": "^5.4.7",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "typescript": "^4.7.4"
   },
   "devDependencies": {
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "react-scripts": "5.0.1"
   },
   "scripts": {

frontend/src/components/Dapp.js → frontend/src/components/Dapp.tsx

@@ -27,6 +27,25 @@ const HARDHAT_NETWORK_ID = '1337';
 // This is an error code that indicates that the user canceled a transaction
 const ERROR_CODE_TX_REJECTED_BY_USER = 4001;
 
+// Defining the Dapp components state and props for type safety.
+interface TokenData {
+  name: string;
+  symbol: string;
+}
+
+interface IState {
+  tokenData?: TokenData;
+  selectedAddress?: string;
+  balance?: ethers.BigNumber;
+  txBeingSent?: string;
+  transactionError?: Error;
+  networkError?: string;
+}
+
+// Since window.ethereum is not recognized by the TypeScript compiler, 
+// we use this little hack
+declare let window: any;
+
 // This component is in charge of doing these things:
 //   1. It connects to the user's wallet
 //   2. Initializes ethers and the Token contract
@@ -37,24 +56,29 @@ const ERROR_CODE_TX_REJECTED_BY_USER = 4001;
 // Note that (3) and (4) are specific of this sample application, but they show
 // you how to keep your Dapp and contract's state in sync,  and how to send a
 // transaction.
-export class Dapp extends React.Component {
+export class Dapp extends React.Component<{}, IState> {
+  // We store multiple things in Dapp's state.
+  // You don't need to follow this pattern, but it's an useful example.
+  initialState = {
+    // The info of the token (i.e. It's Name and symbol)
+    tokenData: undefined,
+    // The user's address and balance
+    selectedAddress: undefined,
+    balance: undefined,
+    // The ID about transactions being sent, and any possible error with them
+    txBeingSent: undefined,
+    transactionError: undefined,
+    networkError: undefined,
+  };
+  private _provider: ethers.providers.Web3Provider;
+  private _pollDataInterval: NodeJS.
+    // We'll use ethers to interact with the Ethereum network and our contract
+    Timer;
+  private _token: any;
+
   constructor(props) {
     super(props);
 
-    // We store multiple things in Dapp's state.
-    // You don't need to follow this pattern, but it's an useful example.
-    this.initialState = {
-      // The info of the token (i.e. It's Name and symbol)
-      tokenData: undefined,
-      // The user's address and balance
-      selectedAddress: undefined,
-      balance: undefined,
-      // The ID about transactions being sent, and any possible error with them
-      txBeingSent: undefined,
-      transactionError: undefined,
-      networkError: undefined,
-    };
-
     this.state = this.initialState;
   }
 

frontend/src/components/Transfer.js → frontend/src/components/Transfer.tsx

@@ -10,7 +10,7 @@ export function Transfer({ transferTokens, tokenSymbol }) {
           // form's data.
           event.preventDefault();
 
-          const formData = new FormData(event.target);
+          const formData = new FormData(event.target as HTMLFormElement);
           const to = formData.get("to");
           const amount = formData.get("amount");