Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Init: Migrate frontend to typescript #31

Merged
merged 5 commits into from
Jun 15, 2024
Merged

Init: Migrate frontend to typescript #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dfbb09b
Init: Migrate frontend to typescript
rajkharvar Jul 29, 2023
1adb804
Fix type issue
rajkharvar Jul 29, 2023
cf988b3
Remove unnecessary type inference for hooks
rajkharvar Aug 1, 2023
d041319
Update README
rajkharvar Aug 1, 2023
00e3ef9
Merge branch 'master' of https://github.com/rajkharvar/disperse-clone…
rajkharvar Jun 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
{
Expand Down
2 changes: 1 addition & 1 deletion frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
98 changes: 98 additions & 0 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"build": "tsc && vite build",
"serve": "vite preview"
},
"dependencies": {
Expand All @@ -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"
}
}
13 changes: 7 additions & 6 deletions frontend/src/App.jsx → frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -84,7 +85,7 @@ function App() {
if (ethereum) {
setIsMetamaskInstalled(true);
checkAccountConnected();
fetchNetworkDetails(ethereum);
fetchNetworkDetails();
} else {
setIsMetamaskInstalled(false);
}
Expand Down
21 changes: 17 additions & 4 deletions frontend/src/components/Confirm.jsx → frontend/src/components/Confirm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -11,7 +24,7 @@ const Confirm = ({
disperse,
txStatus,
approveStatus,
}) => {
}: ConfirmProps) => {
const [isDisabled, setIsDisabled] = useState(false);

useEffect(() => {
Expand All @@ -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 */}
Expand Down
17 changes: 13 additions & 4 deletions frontend/src/components/ConfirmEther.jsx → frontend/src/components/ConfirmEther.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/Connect.jsx → frontend/src/components/Connect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
22 changes: 14 additions & 8 deletions frontend/src/components/Ether.jsx → frontend/src/components/Ether.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
};
Expand Down
7 changes: 6 additions & 1 deletion frontend/src/components/Headers.jsx → frontend/src/components/Headers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading
Loading