{"version":3,"sources":["components/index.js","ethereumLogo.png","hooks/useWeb3Modal.js","graphql/subgraph.js","App.js","index.js"],"names":["Header","styled","header","Body","div","Image","img","Button","a","attrs","target","rel","button","props","hidden","INFURA_ID","NETWORK","useWeb3Modal","config","useState","provider","setProvider","autoLoaded","setAutoLoaded","autoLoad","infuraId","network","web3Modal","useMemo","Web3Modal","cacheProvider","providerOptions","walletconnect","package","WalletConnectProvider","options","loadWeb3Modal","useCallback","connect","newProvider","Web3Provider","logoutOfWeb3Modal","clearCachedProvider","window","location","reload","useEffect","cachedProvider","GET_TRANSFERS","gql","WalletButton","account","setAccount","rendered","setRendered","listAccounts","accounts","lookupAddress","name","substring","console","error","fetchAccount","onClick","App","useQuery","loading","data","React","transfers","log","src","logo","alt","client","ApolloClient","uri","ReactDOM","render","ApolloProvider","document","getElementById"],"mappings":"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","file":"static/js/main.6af4be12.chunk.js","sourcesContent":["import styled from \"styled-components\";\n\nexport const Header = styled.header`\n  background-color: #282c34;\n  min-height: 70px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-end;\n  color: white;\n`;\n\nexport const Body = styled.div`\n  align-items: center;\n  background-color: #282c34;\n  color: white;\n  display: flex;\n  flex-direction: column;\n  font-size: calc(10px + 2vmin);\n  justify-content: center;\n  min-height: calc(100vh - 70px);\n`;\n\nexport const Image = styled.img`\n  height: 40vmin;\n  margin-bottom: 16px;\n  pointer-events: none;\n`;\n\nexport const Link = styled.a.attrs({\n  target: \"_blank\",\n  rel: \"noopener noreferrer\",\n})`\n  color: #61dafb;\n  margin-top: 10px;\n`;\n\nexport const Button = styled.button`\n  background-color: white;\n  border: none;\n  border-radius: 8px;\n  color: #282c34;\n  cursor: pointer;\n  font-size: 16px;\n  text-align: center;\n  text-decoration: none;\n  margin: 0px 20px;\n  padding: 12px 24px;\n\n  ${props => props.hidden && \"hidden\"} :focus {\n    border: none;\n    outline: none;\n  }\n`;\n","export default __webpack_public_path__ + \"static/media/ethereumLogo.a1b9f99b.png\";","import { Web3Provider } from \"@ethersproject/providers\";\nimport WalletConnectProvider from \"@walletconnect/web3-provider\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport Web3Modal from \"web3modal\";\n\n// Enter a valid infura key here to avoid being rate limited\n// You can get a key for free at https://infura.io/register\nconst INFURA_ID = \"INVALID_INFURA_KEY\";\n\nconst NETWORK = \"mainnet\";\n\nfunction useWeb3Modal(config = {}) {\n  const [provider, setProvider] = useState();\n  const [autoLoaded, setAutoLoaded] = useState(false);\n  const { autoLoad = true, infuraId = INFURA_ID, network = NETWORK } = config;\n\n  // Web3Modal also supports many other wallets.\n  // You can see other options at https://github.com/Web3Modal/web3modal\n  const web3Modal = useMemo(() => {\n    return new Web3Modal({\n      network,\n      cacheProvider: true,\n      providerOptions: {\n        walletconnect: {\n          package: WalletConnectProvider,\n          options: {\n            infuraId,\n          },\n        },\n      },\n    });\n  }, [infuraId, network]);\n\n  // Open wallet selection modal.\n  const loadWeb3Modal = useCallback(async () => {\n    const newProvider = await web3Modal.connect();\n    setProvider(new Web3Provider(newProvider));\n  }, [web3Modal]);\n\n  const logoutOfWeb3Modal = useCallback(\n    async function () {\n      await web3Modal.clearCachedProvider();\n      window.location.reload();\n    },\n    [web3Modal],\n  );\n\n  // If autoLoad is enabled and the the wallet had been loaded before, load it automatically now.\n  useEffect(() => {\n    if (autoLoad && !autoLoaded && web3Modal.cachedProvider) {\n      loadWeb3Modal();\n      setAutoLoaded(true);\n    }\n  }, [autoLoad, autoLoaded, loadWeb3Modal, setAutoLoaded, web3Modal.cachedProvider]);\n\n  return [provider, loadWeb3Modal, logoutOfWeb3Modal];\n}\n\nexport default useWeb3Modal;\n","import { gql } from \"apollo-boost\";\n\n// See more example queries on https://thegraph.com/explorer/subgraph/paulrberg/create-eth-app\nconst GET_TRANSFERS = gql`\n  {\n    transfers(first: 10) {\n      id\n      from\n      to\n      value\n    }\n  }\n`;\n\nexport default GET_TRANSFERS;\n","import { useQuery } from \"@apollo/react-hooks\";\nimport { Contract } from \"@ethersproject/contracts\";\nimport { getDefaultProvider } from \"@ethersproject/providers\";\nimport React, { useEffect, useState } from \"react\";\n\nimport { Body, Button, Header, Image, Link } from \"./components\";\nimport logo from \"./ethereumLogo.png\";\nimport useWeb3Modal from \"./hooks/useWeb3Modal\";\n\nimport { addresses, abis } from \"@project/contracts\";\nimport GET_TRANSFERS from \"./graphql/subgraph\";\n\nasync function readOnChainData() {\n  // Should replace with the end-user wallet, e.g. Metamask\n  const defaultProvider = getDefaultProvider();\n  // Create an instance of an ethers.js Contract\n  // Read more about ethers.js on https://docs.ethers.io/v5/api/contract/contract/\n  const ceaErc20 = new Contract(addresses.ceaErc20, abis.erc20, defaultProvider);\n  // A pre-defined address that owns some CEAERC20 tokens\n  const tokenBalance = await ceaErc20.balanceOf(\"0x3f8CB69d9c0ED01923F11c829BaE4D9a4CB6c82C\");\n  console.log({ tokenBalance: tokenBalance.toString() });\n}\n\nfunction WalletButton({ provider, loadWeb3Modal, logoutOfWeb3Modal }) {\n  const [account, setAccount] = useState(\"\");\n  const [rendered, setRendered] = useState(\"\");\n\n  useEffect(() => {\n    async function fetchAccount() {\n      try {\n        if (!provider) {\n          return;\n        }\n\n        // Load the user's accounts.\n        const accounts = await provider.listAccounts();\n        setAccount(accounts[0]);\n\n        // Resolve the ENS name for the first account.\n        const name = await provider.lookupAddress(accounts[0]);\n\n        // Render either the ENS name or the shortened account address.\n        if (name) {\n          setRendered(name);\n        } else {\n          setRendered(account.substring(0, 6) + \"...\" + account.substring(36));\n        }\n      } catch (err) {\n        setAccount(\"\");\n        setRendered(\"\");\n        console.error(err);\n      }\n    }\n    fetchAccount();\n  }, [account, provider, setAccount, setRendered]);\n\n  return (\n    <Button\n      onClick={() => {\n        if (!provider) {\n          loadWeb3Modal();\n        } else {\n          logoutOfWeb3Modal();\n        }\n      }}\n    >\n      {rendered === \"\" && \"Connect Wallet\"}\n      {rendered !== \"\" && rendered}\n    </Button>\n  );\n}\n\nfunction App() {\n  const { loading, error, data } = useQuery(GET_TRANSFERS);\n  const [provider, loadWeb3Modal, logoutOfWeb3Modal] = useWeb3Modal();\n\n  React.useEffect(() => {\n    if (!loading && !error && data && data.transfers) {\n      console.log({ transfers: data.transfers });\n    }\n  }, [loading, error, data]);\n\n  return (\n    <div>\n      <Header>\n        <WalletButton provider={provider} loadWeb3Modal={loadWeb3Modal} logoutOfWeb3Modal={logoutOfWeb3Modal} />\n      </Header>\n      <Body>\n        <Image src={logo} alt=\"react-logo\" />\n        <p>\n          Welcome to BlockOTP\n        </p>\n\n      </Body>\n    </div>\n  );\n}\n\nexport default App;\n","import \"./index.css\";\n\nimport { ApolloProvider } from \"@apollo/react-hooks\";\nimport ApolloClient from \"apollo-boost\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport App from \"./App\";\n\n// You should replace this url with your own and put it into a .env file\n// See all subgraphs: https://thegraph.com/explorer/\nconst client = new ApolloClient({\n  uri: \"https://api.thegraph.com/subgraphs/name/paulrberg/create-eth-app\",\n});\n\nReactDOM.render(\n  <ApolloProvider client={client}>\n    <App />\n  </ApolloProvider>,\n  document.getElementById(\"root\"),\n);\n"],"sourceRoot":""}