Skip to content

Update App.js #1

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

Open
Asif2902 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Update App.js #1

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ba04a0e
Update App.js
Asif2902 Jan 30, 2024
a64cb32
Update App.js
Asif2902 Jan 30, 2024
704fdec
Update App.js
Asif2902 Jan 30, 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
132 changes: 90 additions & 42 deletions faucet-ui/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,70 +9,102 @@ function App() {
const [fcContract, setFcContract] = useState();
const [withdrawError, setWithdrawError] = useState("");
const [withdrawSuccess, setWithdrawSuccess] = useState("");
const [transactionData, setTransactionData] = useState("");
const [transactionData, setTransactionData] = useState(
localStorage.getItem("transactionData") || ""
);
const [isConnected, setIsConnected] = useState(false);
const [isCorrectNetwork, setIsCorrectNetwork] = useState(true);
const [isSwitchingChain, setIsSwitchingChain] = useState(false);

useEffect(() => {
getCurrentWalletConnected();
addWalletListener();
}, [walletAddress]);

useEffect(() => {
localStorage.setItem("transactionData", transactionData);
}, [transactionData]);

const connectWallet = async () => {
if (typeof window != "undefined" && typeof window.ethereum != "undefined") {
if (typeof window !== "undefined" && typeof window.ethereum !== "undefined") {
try {
/* get provider */
const provider = new ethers.providers.Web3Provider(window.ethereum);
/* get accounts */
const accounts = await provider.send("eth_requestAccounts", []);
/* get signer */
setSigner(provider.getSigner());
/* local contract instance */
setFcContract(faucetContract(provider));
/* set active wallet address */
setWalletAddress(accounts[0]);
} catch (err) {
console.error(err.message);
if (isSwitchingChain) {
setIsSwitchingChain(false);
await window.ethereum.request({
method: "wallet_switchEthereumChain",
params: [{ chainId: "0x28c60" }],
});
} else {
await window.ethereum.request({
method: "wallet_addEthereumChain",
params: [
{
chainId: "0x28c60",
chainName: "Katla",
nativeCurrency: {
name: "Ethereum",
symbol: "ETH",
decimals: 18,
},
rpcUrls: ["https://rpc.katla.taiko.xyz"],
blockExplorerUrls: ["https://explorer.katla.taiko.xyz/"],
},
],
});
const provider = new ethers.providers.Web3Provider(window.ethereum);
const accounts = await provider.send("eth_requestAccounts", []);
setSigner(provider.getSigner());
setFcContract(faucetContract(provider));
setWalletAddress(accounts[0]);
setIsConnected(true);
}
} catch (error) {
console.error(error);
setIsConnected(false);
}
} else {
/* MetaMask is not installed */
console.log("Please install MetaMask");
console.log("MetaMask is not installed");
}
};

const getCurrentWalletConnected = async () => {
if (typeof window != "undefined" && typeof window.ethereum != "undefined") {
if (typeof window !== "undefined" && typeof window.ethereum !== "undefined") {
try {
/* get provider */
const provider = new ethers.providers.Web3Provider(window.ethereum);
/* get accounts */
const accounts = await provider.send("eth_accounts", []);
if (accounts.length > 0) {
/* get signer */
setSigner(provider.getSigner());
/* local contract instance */
setFcContract(faucetContract(provider));
/* set active wallet address */
setWalletAddress(accounts[0]);
const chainId = await provider.send("eth_chainId");
if (chainId === "0x28c60") {
setIsCorrectNetwork(true);
const accounts = await provider.send("eth_accounts", []);
if (accounts.length > 0) {
setSigner(provider.getSigner());
setFcContract(faucetContract(provider));
setWalletAddress(accounts[0]);
setIsConnected(true);
}
} else {
console.log("Connect to MetaMask using the Connect Wallet button");
setIsCorrectNetwork(false);
}
} catch (err) {
console.error(err.message);
} catch (error) {
console.error(error);
setIsConnected(false);
}
} else {
/* MetaMask is not installed */
console.log("Please install MetaMask");
console.log("MetaMask is not installed");
}
};

const addWalletListener = async () => {
if (typeof window != "undefined" && typeof window.ethereum != "undefined") {
if (typeof window !== "undefined" && typeof window.ethereum !== "undefined") {
window.ethereum.on("accountsChanged", (accounts) => {
setWalletAddress(accounts[0]);
});
window.ethereum.on("chainChanged", () => {
window.location.reload();
});
} else {
/* MetaMask is not installed */
setWalletAddress("");
console.log("Please install MetaMask");
setIsConnected(false);
console.log("MetaMask is not installed");
}
};

Expand All @@ -89,6 +121,11 @@ function App() {
}
};

const handleSwitchChain = () => {
setIsSwitchingChain(true);
connectWallet();
};

return (
<div>
<nav className="navbar">
Expand All @@ -101,13 +138,16 @@ function App() {
<button
className="button is-white connect-wallet"
onClick={connectWallet}
disabled={!isCorrectNetwork || isSwitchingChain}
>
<span className="is-link has-text-weight-bold">
{walletAddress && walletAddress.length > 0
{isConnected
? `Connected: ${walletAddress.substring(
0,
6
)}...${walletAddress.substring(38)}`
: isSwitchingChain
? "Switching Chain..."
: "Connect Wallet"}
</span>
</button>
Expand All @@ -120,7 +160,7 @@ function App() {
<div className="container has-text-centered main-content">
<h1 className="title is-1">Faucet</h1>
<p>Fast and reliable. 500 AT/12h</p>
<a href="https://test.everypunks.xyz">COINFILP DAPP!</a>
<a href="https://test.everypunks.xyz">COINFILP DAPP!</a>
<div className="mt-5">
{withdrawError && (
<div className="withdraw-error">{withdrawError}</div>
Expand All @@ -137,13 +177,14 @@ function App() {
type="text"
placeholder="Enter your wallet address (0x...)"
defaultValue={walletAddress}
disabled={!isConnected}
/>
</div>
<div className="column">
<button
className="button is-link is-medium"
onClick={getOCTHandler}
disabled={walletAddress ? false : true}
disabled={!isConnected || !isCorrectNetwork}
>
GET TOKENS
</button>
Expand All @@ -153,9 +194,17 @@ function App() {
<p className="panel-heading">Transaction Data</p>
<div className="panel-block">
<p>
{transactionData
? `Transaction hash: ${transactionData}`
: "--"}
{transactionData ? (
<a
href={`https://explorer.katla.taiko.xyz/tx/${transactionData}`}
target="_blank"
rel="noopener noreferrer"
>
Transaction hash: {transactionData}
</a>
) : (
"--"
)}
</p>
</div>
</article>
Expand All @@ -167,5 +216,4 @@ function App() {
);
}


export default App;