DopeyCode/technikoin
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

First edits made like in the video.

Browse Source
This commit is contained in:
StockiP
2022-11-01 17:07:31 +01:00
parent 9fdfe8b23f
commit 2e2f7fbd3a
1 changed files with 4 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
packages/react-app/src/App.js vendored
View File

@@ -1,91 +1,7 @@
import { useQuery } from "@apollo/client"; import React from "react"
import { Contract } from "@ethersproject/contracts";
import { shortenAddress, useCall, useEthers, useLookupAddress } from "@usedapp/core";
import React, { useEffect, useState } from "react";
import { Body, Button, Container, Header, Image, Link } from "./components"; const App = () => {
import logo from "./ethereumLogo.png"; return <p>Hello, Web3!</p>
import { addresses, abis } from "@my-app/contracts";
import GET_TRANSFERS from "./graphql/subgraph";
function WalletButton() {
const [rendered, setRendered] = useState("");
const { ens } = useLookupAddress();
const { account, activateBrowserWallet, deactivate, error } = useEthers();
useEffect(() => {
if (ens) {
setRendered(ens);
} else if (account) {
setRendered(shortenAddress(account));
} else {
setRendered("");
}
}, [account, ens, setRendered]);
useEffect(() => {
if (error) {
console.error("Error while connecting wallet:", error.message);
}
}, [error]);
return (
<Button
onClick={() => {
if (!account) {
activateBrowserWallet();
} else {
deactivate();
}
}}
>
{rendered === "" && "Connect Wallet"}
{rendered !== "" && rendered}
</Button>
);
} }
function App() { export default App;
// Read more about useDapp on https://usedapp.io/
const { error: contractCallError, value: tokenBalance } =
useCall({
contract: new Contract(addresses.ceaErc20, abis.erc20),
method: "balanceOf",
args: ["0x3f8CB69d9c0ED01923F11c829BaE4D9a4CB6c82C"],
}) ?? {};
const { loading, error: subgraphQueryError, data } = useQuery(GET_TRANSFERS);
useEffect(() => {
if (subgraphQueryError) {
console.error("Error while querying subgraph:", subgraphQueryError.message);
return;
}
if (!loading && data && data.transfers) {
console.log({ transfers: data.transfers });
}
}, [loading, subgraphQueryError, data]);
return (
<Container>
<Header>
<WalletButton />
</Header>
<Body>
<Image src={logo} alt="ethereum-logo" />
<p>
Edit <code>packages/react-app/src/App.js</code> and save to reload.
</p>
<Link href="https://reactjs.org">
Learn React
</Link>
<Link href="https://usedapp.io/">Learn useDapp</Link>
<Link href="https://thegraph.com/docs/quick-start">Learn The Graph</Link>
</Body>
</Container>
);
}
export default App;