How to deploy a solidity contract using ContractFactory

[sgabriels]

I'm new to coding but I put a lot of effort on researching things, but I really can't find my way around this.

I'm trying to make a front-end app (running in browser) that deploys a specific solidity contract that I coded, from the browser's connected MetaMask account.

I'm using ContractFactory, and my issues are:

new ethers.ContractFactory( interface , bytecode [ , signer ] )

First I can't find a way to get the "signer". I've seen some people defining the signer with their private keys but it doesn't work for me because I want the user to deploy it. I've seen people saying that the way to connect ethers.js to metamask is through

const provider = new ethers.providers.Web3Provider(window.ethereum); await provider.send("eth_requestAccounts", []); const signer = provider.getSigner(); console.log("Account:", await signer.getAddress());

but soon I found out that window.ethereum is deprecated and typescript would mark it as an error.

I've seen people stating that you should switch window.ethereum for

ethereum.request({ method: 'eth_requestAccounts' })

but besides typescript also marks "ethereum" as an error, I don't really know what to do with this piece of code. Is it the signer? The provider? ??

I decided then to move on without a signer (hoping that metamask would pop out when I called the function), but I stumbled with another problem

When creating the ContractFactory instance, I need to feed it with both abi and the bin of my solidity contract. I compiled it in the shell using solcjs, extracted both files and saved it locally. In order to turn them into string variables to feed the instance, I tried to use fs.readFileSync but as soon as I tested I got an error and found out that fs can't be used in browsers.

I'm very stuck at this point because all the information I look for is either outdated (elements deprecated) or badly explained. If someone could help me on this I would be utterly grateful.

Thank you very much,
Gabriel.

---

UPDATE:

When creating the ContractFactory instance, I need to feed it with both abi and the bin of my solidity contract. I compiled it in the shell using solcjs, extracted both files and saved it locally. In order to turn them into string variables to feed the instance, I tried to use fs.readFileSync but as soon as I tested I got an error and found out that fs can't be used in browsers.

It worked with raw.macro

I deployed successfully providing the private key of an account inside my code. Not the way I wanted to do but until I find a more suitable solution that's what I could do.

---

UPDATE 2:

Solved it!

import detectEthereumProvider from '@metamask/detect-provider';
import { ethers } from 'ethers'
import raw from 'raw.macro';


const abi = raw('./YourContractsAbi.abi')
const bytecode = raw('./YourContractsBin.bin')

async YourFunction() {
    const metamask:any = await detectEthereumProvider()
    const provider = new ethers.providers.Web3Provider(metamask)
    const signer = provider.getSigner()

    const myContract = new ContractFactory(abi, bytecode, signer)
    const contract = await myContract.deploy()
}

[ricmoo]

You must have a Signer at some point. It costs ether to deploy a contract, and only Signers can access ether.

You can use a Wallet with a private key, or use the method you mentioned with metamask; I'm not aware of window.ethereum being deprecated, that should be the correct route to go down. Since it is not part of the DOM spec, ethereum will not appear in the TypeScript definitions, but you can simply use (window as any).ethereum) to get rid of type checking errors. If the window.ethereum is undefined, you don't have access to a Signer, and should notify the user accordingly.

But this is up to you and how you expect users to interact with your contract. MetaMask (and ilk) are the simplest way for most users to interact with your application. There are other libraries like Web3 Modal that can help too.

You should not include any private keys in your source; this is very bad and will result in lost assets if anyone discovers it. Don't do it! Please. :)