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.

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

2 Contract calls #2

Open
wants to merge 2 commits into
base: contracts
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
"@web3-react/core": "^6.0.9",
"@web3-react/injected-connector": "^6.0.7",
"ethers": "^4.0.47",
"react": ">=16.8",
"react-dom": "^16.13.1",
"react": "^16.8",
"react-dom": "^16.8",
"web3": "^1.2.7"
},
"scripts": {
Expand Down
4 changes: 3 additions & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import { Web3ReactProvider } from '@web3-react/core'
import Main from "./Main";
import Web3 from "web3";

const getLibrary = (provider: any): Web3 => new Web3(provider);
const getLibrary = (provider: any): Web3 => {
return new Web3(provider)
};

const App: React.FC = () => (
<Web3ReactProvider getLibrary={getLibrary}>
Expand Down
2 changes: 1 addition & 1 deletion src/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const Layout: React.FC = ({ children }) => {
const { activate } = context;

useEffect(() => {
activate(injected);
activate(injected, console.error);
}, []);

return !context.active && !context.error ? (
Expand Down
45 changes: 41 additions & 4 deletions src/Main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,60 @@ import React, { useState, useEffect } from "react";
import { useWeb3React } from "@web3-react/core";
import Web3 from "web3";

import ADIToken from "./contracts/ADIToken.json";
import TransferForm from "./TransferForm";
import _secrets from "../.secrets.json";

const Main: React.FC = () => {
const { account, library: web3 } = useWeb3React<Web3>();

const [ethBalance, setEthBalance] = useState<string>("");
const [adiBalance, setADIBalance] = useState<string>("");

//https://github.com/OpenZeppelin/openzeppelin-contracts-ethereum-package/blob/master/contracts/presets/ERC20PresetMinterPauser.sol
const queryADIBalance = async (): Promise<string> => {
const contract = new web3.eth.Contract(
ADIToken.abi,
_secrets.contractAddress
);

const balance = await contract.methods
.balanceOf(account)
.call({ from: account });
return balance;
};

useEffect(() => {
(async () => {
const ethBalance = await web3.eth.getBalance(account);
setEthBalance(ethBalance);
if (!!web3) {
const _ethBalance = await web3.eth.getBalance(account);
const readableEthBalance = Web3.utils.fromWei(_ethBalance);
setEthBalance(readableEthBalance);

const _adiBalance = await queryADIBalance();
const readableAdiBalance = Web3.utils.fromWei(_adiBalance);
setADIBalance(readableAdiBalance);
}

})();
}, [web3]);

return (
<div>
<p>oh hai {account}</p>
<p>You've got {ethBalance}ETH</p>
<p>
oh hai <b>{account}</b>
</p>
<p>
You've got <b>{ethBalance}ETH</b>
</p>
<p>
You've got {adiBalance}AĐI <br />
<small>({_secrets.contractAddress})</small>
</p>
<p>to spare with others.</p>
{adiBalance && (
<TransferForm updateBalance={queryADIBalance}></TransferForm>
)}
</div>
);
};
Expand Down
68 changes: 68 additions & 0 deletions src/TransferForm.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React, { useState } from "react";
import { useWeb3React } from "@web3-react/core";
import Web3 from "web3";

import ADIToken from "./contracts/ADIToken.json";
import _secrets from "../.secrets.json";

const TransferForm = ({ updateBalance }: { updateBalance: Function }) => {
const { account, library: web3 } = useWeb3React<Web3>();

const [to, setTo] = useState("");
const [amount, setAmount] = useState("");
const [isTransactionPending, setIsTransactionPending] = useState(false);
const [transactionHash, setTransactionHash] = useState<string>();

const transferADITokens = async (): Promise<void> => {
const contract = new web3.eth.Contract(
ADIToken.abi,
_secrets.contractAddress
);

setIsTransactionPending(true);
// https://web3js.readthedocs.io/en/v1.2.7/web3-eth-contract.html#id36
const promiEvent = contract.methods.transfer(to, amount).send({
from: account,
gasPrice: 21 * 1e5,
});
promiEvent.on("transactionHash", setTransactionHash);
promiEvent.on("receipt", (receipt) => {
console.log(receipt);
setIsTransactionPending(false);
setTransactionHash("");
updateBalance();
});
promiEvent.on("confirmation", (number, confirmation) => {
console.debug(confirmation);
});
};

return (
<div>
{isTransactionPending ? (
<p>standby, your transaction {transactionHash} is pending</p>
) : (
<>
<label htmlFor="address">Adress</label>
<input
type="text"
value={to}
onChange={(e) => setTo(e.target.value)}
/>

<label htmlFor="amount">Amount</label>
<input
type="text"
value={amount}
onChange={(e) => setAmount(e.target.value)}
/>
<button disabled={!to || !amount} onClick={transferADITokens}>
Send!
</button>
</>
)}
</div>
);
};

export default TransferForm;
2 changes: 1 addition & 1 deletion src/connectors.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { InjectedConnector } from '@web3-react/injected-connector'

export const injected = new InjectedConnector({
supportedChainIds: [1, 3, 4, 5, 17, 42, 5778]
supportedChainIds: [1, 3, 4, 5, 17, 42, 1337, 5778]
})
Loading