How do I deploy a smart contract?

[vrde]

I want to create a component to deploy my smart contract. I ended up writing this:

import { Button, FormControl, FormLabel, Input, Stack } from "@chakra-ui/react";
import { Heading } from "@chakra-ui/react";
import { useWaitForTransaction, useWalletClient } from "wagmi";
import { useState } from "react";
import landscapesJson from "../../../artifacts/contracts/Landscapes.sol/Landscapes.json";
import { Select } from "@chakra-ui/react";

export default function Deploy() {
  const [holder, setHolder] = useState("");
  const [hash, setHash] = useState<undefined | `0x${string}`>();
  const [chainId, setChainId] = useState(5);
  const { data: walletClient } = useWalletClient({ chainId });
  const {
    data: deployTx,
    isError,
    isLoading,
  } = useWaitForTransaction({
    hash,
  });

  async function onSubmit() {
    const hash = await walletClient?.deployContract({
      abi: landscapesJson.abi,
      bytecode: landscapesJson.bytecode as `0x${string}`,
      args: [],
    });
    setHash(hash);
  }

  return (
    <Stack spacing={5}>
      <Heading as="h1">Deploy</Heading>
      <FormControl>
        <Stack spacing={5}>
          <FormLabel>
            Holder address (will receive the tokens)
            <Input
              placeholder="Address"
              value={holder}
              onChange={(e) => setHolder(e.target.value)}
              isRequired
            />
          </FormLabel>
          <FormLabel>
            Select Network
            <Select
              defaultValue={5}
              onChange={(e) => setChainId(parseInt(e.target.value))}
            >
              <option value="5">Görli: testnet</option>
              <option value="666666">Localhost: testnet</option>
              <option value="1">Mainnet: production 💸</option>
            </Select>
          </FormLabel>
          <Button
            type="submit"
            isDisabled={!holder}
            isLoading={isLoading}
            onClick={onSubmit}
          >
            Deploy
          </Button>
        </Stack>
      </FormControl>

      {isLoading && <p>Deploying Landscapes.sol</p>}
      {isError && <p>There was an issue deploying Landscapes.sol</p>}
      {deployTx && <p>Contract deployed at ${deployTx.contractAddress}</p>}
    </Stack>
  );
}

If I try to deploy using this component, I get this error on the browser:

Uncaught (in promise) TransactionExecutionError: No chain was provided to the request.
Please provide a chain with the `chain` argument on the Action, or by supplying a `chain` to WalletClient.

Request Arguments:
  from:  0x<my-address>
  data:  0x608060405234801562000010575f80fd…

I'm puzzled because I pass the chainId to useWalletClient, am I missing anything here?

[cse18107]

I am facing the same issue

[cse18107]

are you still facing this issue or did you resolved this

[Iamknownasfesal]

I cannot deploy a smart contract either, providing the chain aswell but in metamask it says in "submitted" state

[NickStein85]

Any updates on this?

[AJB-dev]

I use one of Viem Chain objects in https://wagmi.sh/react/api/chains and it works for me. For example, to connect to goerli.

1. Import Goerli chain object.

import { goerli } from 'wagmi/chains'

2. Set chainId property:

const { data: walletClient } = useWalletClient({ chainId: goerli.id });

[dylansproule]

@vrde did this help you out?

[dylansproule]

Were you able to find a workable solution?

[vrde]

I ended up using something else and not wagmi

[dylansproule]

what was that implementation?

[dylansproule]

without wagmi I mean

[vrde]

I used ethersjs