Initial commit from Create Eth App

2022-10-26 07:52:17 +02:00
commit 7f3291b602
33 changed files with 17728 additions and 0 deletions
--- a/packages/react-app/src/App.js
+++ b/packages/react-app/src/App.js
@@ -0,0 +1,91 @@
+import { useQuery } from "@apollo/client";
+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";
+import logo from "./ethereumLogo.png";
+
+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() {
+  // 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;
--- a/packages/react-app/src/App.test.js
+++ b/packages/react-app/src/App.test.js
@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import App from "./App";
+
+test("renders learn react link", () => {
+  const { getByText } = render(<App />);
+  const linkElement = getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
--- a/packages/react-app/src/components/index.js
+++ b/packages/react-app/src/components/index.js
@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+export const Body = styled.div`
+  align-items: center;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  font-size: calc(10px + 2vmin);
+  justify-content: center;
+  margin-top: 40px;
+`;
+
+export const Button = styled.button`
+  background-color: white;
+  border: none;
+  border-radius: 8px;
+  color: #282c34;
+  cursor: pointer;
+  font-size: 16px;
+  margin: 0px 20px;
+  padding: 12px 24px;
+  text-align: center;
+  text-decoration: none;
+`;
+
+export const Container = styled.div`
+  background-color: #282c34;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh);
+`;
+
+export const Header = styled.header`
+  align-items: center;
+  background-color: #282c34;
+  color: white;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  min-height: 70px;
+`;
+
+export const Image = styled.img`
+  height: 40vmin;
+  margin-bottom: 16px;
+  pointer-events: none;
+`;
+
+export const Link = styled.a.attrs({
+  target: "_blank",
+  rel: "noopener noreferrer",
+})`
+  color: #61dafb;
+  margin-top: 8px;
+`;
--- a/packages/react-app/src/ethereumLogo.png
+++ b/packages/react-app/src/ethereumLogo.png
--- a/packages/react-app/src/graphql/subgraph.js
+++ b/packages/react-app/src/graphql/subgraph.js
@@ -0,0 +1,15 @@
+import { gql } from "@apollo/client";
+
+// See more example queries on https://thegraph.com/explorer/subgraph/paulrberg/create-eth-app
+const GET_TRANSFERS = gql`
+  {
+    transfers(first: 10) {
+      id
+      from
+      to
+      value
+    }
+  }
+`;
+
+export default GET_TRANSFERS;
--- a/packages/react-app/src/index.css
+++ b/packages/react-app/src/index.css
@@ -0,0 +1,11 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
--- a/packages/react-app/src/index.js
+++ b/packages/react-app/src/index.js
@@ -0,0 +1,37 @@
+import "./index.css";
+
+import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
+import { DAppProvider, Mainnet } from "@usedapp/core";
+import React from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
+
+// IMPORTANT, PLEASE READ
+// To avoid disruptions in your app, change this to your own Infura project id.
+// https://infura.io/register
+const INFURA_PROJECT_ID = "529670718fd74cd2a041466303daecd7";
+const config = {
+  readOnlyChainId: Mainnet.chainId,
+  readOnlyUrls: {
+    [Mainnet.chainId]: "https://mainnet.infura.io/v3/" + INFURA_PROJECT_ID,
+  },
+}
+
+// You should replace this url with your own and put it into a .env file
+// See all subgraphs: https://thegraph.com/explorer/
+const client = new ApolloClient({
+  cache: new InMemoryCache(),
+  uri: "https://api.thegraph.com/subgraphs/name/paulrberg/create-eth-app",
+});
+
+ReactDOM.render(
+  <React.StrictMode>
+    <DAppProvider config={config}>
+      <ApolloProvider client={client}>
+        <App />
+      </ApolloProvider>
+    </DAppProvider>
+  </React.StrictMode>,
+  document.getElementById("root"),
+);
--- a/packages/react-app/src/setupTests.js
+++ b/packages/react-app/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom/extend-expect";