diff --git a/app/dc/connect-web3-modal.tsx b/app/dc/connect-web3-modal.tsx new file mode 100644 index 0000000..163ca43 --- /dev/null +++ b/app/dc/connect-web3-modal.tsx @@ -0,0 +1,60 @@ +import { ethers } from "ethers"; +import Web3Modal from "web3modal"; +import { useEffect, useState } from "react"; + +const INFURA_ID = "709bb38868e74ec589d302a96b94450b"; + +/** + * This because of infinite pain. AMA + */ +const providerOptions = + typeof window !== "undefined" + ? { + walletconnect: { + package: window.WalletConnectProvider, // required + options: { + infuraId: INFURA_ID, + }, + }, + } + : {}; + +async function connectWallet(web3Modal) { + const instance = await web3Modal.connect(); + const provider = new ethers.providers.Web3Provider(instance); + const signer = provider.getSigner(); + console.log(signer, provider); +} + +export default function ConnectWallet() { + let [web3Modal, setWeb3Modal] = useState(); + + useEffect(() => { + let w3m; + try { + w3m = new Web3Modal({ + disableInjectedProvider: true, + network: "mainnet", // optional + cacheProvider: false, // optional + providerOptions, // required + }); + } catch (e) { + debugger; + console.error(e); + } + + // TODO: While testing + // w3m.clearCachedProvider(); + + setWeb3Modal(w3m); + }, []); + + return ( +
connectWallet(web3Modal)} + > + Connecccct Wallet +
+ ); +} diff --git a/app/root.tsx b/app/root.tsx index 68a32f2..e0eb2c2 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -11,6 +11,7 @@ import Header from "~/components/header"; import SendEth from "~/components/send-eth"; import { DappContext } from "./contexts/dapp-context"; import { useDappContext } from "./hooks/useDappContext"; +import ConnectWeb3Modal from "~/dc/connect-web3-modal"; export const meta: MetaFunction = () => ({ charset: "utf-8", @@ -28,6 +29,7 @@ export default function App() { +
{/* How do we connect */} {dappContextData && ( @@ -37,6 +39,7 @@ export default function App() { )} +