Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.18

Current Behavior

I use Next.js to build the login flow with crypto wallet. When a user closes the WalletConnect modal without establishing a connection, the application breaks and throw a Runtime Error

This issue happens in web3-react library as well: https://github.com/NoahZinsmeister/web3-react/issues/454

Expected Behavior

When the user closes the WalletConnect without establishing a connection, an error message will be shown on the UI instead of breaking the UI

Steps To Reproduce

Follow the steps described on the wagmi library documentation

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.9

Current Behavior

When using the autoConnect prop on the Provider, if a user connects via Wallet Connect using MetaMask (I did not test other Wallet Connect clients) and refreshes the page, the user appears connected from the perspective of wagmi (useAccount) returns an address, but actions involving the user's wallet will fail. Specifically, prompting a signature with useSignMessage seems to send a message across the Wallet Connect bridge and displays within the user's wallet, but never resolves in wagmi. Prompting a transaction with useTransaction calcuates gas, but does not display the transaction within the user's wallet.

Expected Behavior

After connecting via Wallet Connect and refreshing the page, the user remains connected and is able to complete actions with their wallet.

Steps To Reproduce

1. Connect using Wallet Connect
2. Refresh the page, have autoConnect set on wagmi provider
3. Attempt to use useTransaction or useSignMessage

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.9

Current Behavior

Access to fetch at 'https://cloudflare-eth.com/' from origin 'https://xxxx.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

POST https://cloudflare-eth.com/ net::ERR_FAILED

Expected Behavior

Successfully read contract

Steps To Reproduce

const NFTId = () => {
  const provider = useProvider()
  const [{ data, error, loading }, read] = useContractRead(
    {
      addressOrName: '0xe538B351070C02d17b5878D3017932A68606fbaE',
      contractInterface: passABI,
      signerOrProvider: provider,
    },
    'totalSupply',
    {
      args: [0],
    }
  )
  console.log(data)
  return (
    <div>
      <span className="nes-text">{loading
        ?
        null
        : data}</span>
    </div>
  )
}

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.21

Current Behavior

When a user connects a wallet using either the injected providers (wallet link or metamask) or the wallet connect provider, there is no emit('connect') called. This is useful for syncing with logic that may exist outside of react or need to be invoked using the event listeners (since .on('connect') is provided)

Expected Behavior

Whenever a wallet is connected, there should be a call to wallet.emit('connect') in order to send those events.

Steps To Reproduce

• go to the provided code-sandbox and connect a metamask or coinbase wallet
• see that the connect event is never emitted (on manual or auto connect)

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://codesandbox.io/s/holy-thunder-t4yzxb?file=/src/App.tsx

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.9

Current Behavior

When using the existing Remix example the alchemy, etherscan, infuraId API keys stored in the .env files are exposed to the client allowing anyone access to the keys. This seems like this shouldn't be the case given some api keys are not for free accounts. Am I missing something here?

The keys are returned from the loader function

export function loader() {
  require('dotenv').config()
  return {
    alchemy: process.env.REMIX_ALCHEMY_ID as string,
    etherscan: process.env.REMIX_ETHERSCAN_API_KEY as string,
    infuraId: process.env.REMIX_INFURA_ID as string,
  }
}

and exposed via the provider in the App()

const provider = ({ chainId }: ProviderConfig) =>
    providers.getDefaultProvider(
      isChainSupported(chainId) ? chainId : defaultChain.id,
      {
        alchemy,
        etherscan,
        infuraId,
      },
    )

Even in the build these keys are easily found by searching for getDefaultProvider.

provider: ({chainId: x})=>Tg.providers.getDefaultProvider(s(x) ? x : i.id, {
            alchemy: t,
            etherscan: e,
            infuraId: r
        }),

Expected Behavior

No response

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.21

Current Behavior

With a hook call such as const [{ data , loading }] = useAccount({ fetchEns: true });, the value for loading will be false during initial render as the initial state for useEnsLookup is { loading: false }. This introduces a need for application developers to track load status until "second load" to ensure that ENS lookup has been performed.

Expected Behavior

The initial state for useEnsLookup should reflect the fetchEns parameter. If fetchEns is true, the initial state for useEnsLookup should be { loading: true }. This will allow applications to withhold actions through initial account connection until ENS data has been fetched.

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://codesandbox.io/s/dazzling-wright-4405hb?file=/src/App.tsx:0-32

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.21

Current Behavior

When I try to connect to coinbase wallet, the modal for Coinbase Wallet correctly opens up, but throws the following error (which stalls the web app). It seems to be related to the QR code they try to show.

Uncaught ReferenceError: Buffer is not defined
    at Object.__ (QRCode.js:28:1)
    at j (index.js:368:1)
    at Array.forEach (<anonymous>)
    at preact__WEBPACK_IMPORTED_MODULE_0__.options.__r (index.js:36:1)
    at j (index.js:171:1)
    at w (children.js:137:1)
    at L (index.js:392:1)
    at j (index.js:224:1)
    at w (children.js:137:1)
    at L (index.js:392:1)

Expected Behavior

To be able to connect to coinbase wallet.

Steps To Reproduce

I tried following both the set up guide from both Wagmi and Coinbase (https://docs.cloud.coinbase.com/wallet-sdk/docs/wagmi#additional-resources), including trying their troubleshooting solution at the bottom of the page.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

I've tried copying my package list into the working codesandbox example (that does work), but it doesn't seem to break when I do this, so I'm at a loss for what is causing my issue. I'm also unable to get WalletConnect to open on my machine but can in CodeSandbox, so is this maybe expected that these connections will not work when running from localhost or something?

Is there an existing issue for this?

• I have searched the existing issues

Package Version

1.0.0

Current Behavior

For those who copy + paste code, the example on the useTransaction hook (Link to docs) calls the signMessage function, which is undefined.

<button disabled={loading} onClick={async () => **await signMessage**()}> Send Transaction </button>

Expected Behavior

Should call sendTransaction instead

Steps To Reproduce

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

^0.2.17

Current Behavior

When clicking on MetaMask to connect your wallet the Coinbase browser extension also pops up.
If you have the CoinBase wallet extension downloaded just like MetaMask it opens up when you click on MetaMask as your chosen provider for connection. However, when you click on CoinBase as your chosen wallet provider MetaMask doesn't open up as it should. So the problem is only when you click on MetaMask the CoinBase wallet extension pops up when it shouldn't because I clicked on MetaMask, not CoinBase.

I first noticed this within my app but then went back to docs to see if I was missing something but noticed it also happens within the docs in the connect wallet guide section (https://wagmi.sh/guides/connect-wallet).

Expected Behavior

The expected behavior should be when I click on MetaMask to connect my wallet only the MetaMask extension should popup and not any other wallet provider extension.

Steps To Reproduce

Download the CoinBase wallet extension got to the docs here : https://wagmi.sh/guides/connect-wallet
Click on MetaMask then watch both MetaMask and CoinBase wallet extension pop up

CoinBase Extension Download https://chrome.google.com/webstore/detail/coinbase-wallet-extension/hnfanknocfeofbddgcijnmhnfnkdnaad?hl=en

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://wagmi.sh/guides/connect-wallet

Anything else?

Browser: Google Chrome Version 99.0.4844.74 (Official Build) (x86_64)
MetaMask Version: 10.11.1
CoinBase Version: 2.10.3
WAGMI Version: ^0.2.17

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.12

Current Behavior

const connectors = ({ chainId }) => {
  const rpcUrl = chain.hardhat.rpcUrls[0];

  // console.log("rpcUrl", rpcUrl, developmentChains, chain.hardhat);
  return [
    new InjectedConnector({
      chains: [chain.hardhat],
      options: { shimDisconnect: true },
    }),
  ];
};

I am trying to get my hardhat localhost balance, but instead the browser requesting to mainnet.infura?

Expected Behavior

it should return the balance of my current selected network balance... and provide a way set a default network.

Steps To Reproduce

const connectors = ({ chainId }) => {
  const rpcUrl = chain.hardhat.rpcUrls[0];

  // console.log("rpcUrl", rpcUrl, developmentChains, chain.hardhat);
  return [
    new InjectedConnector({
      chains: [chain.hardhat],
      options: { shimDisconnect: true },
    }),
  ];
};

  const [{ data: accountData }, disconnect] = useAccount({
    fetchEns: true,
  });
  console.log("accountData?.address", accountData?.address);

  const [
    { data: balanceData, error: balanceError, loading: loadingBalance },
    getBalance,
  ] = useBalance({
    addressOrName: accountData?.address,
    // watch: true,
  });

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.24

Current Behavior

https://github.com/tmm/wagmi/tree/main/examples/next
I am using the above example project to display the page properly in the TokenPoket Dapp browser for iPhone XR, iPhone 11Pro, and iPhone 11. Using JSConsole debugging, I can't see any obvious error messages.

Expected Behavior

No response

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://github.com/tmm/wagmi/tree/main/examples/next

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.21

Current Behavior

In the examples/vite-react example project it works with

yarn dev;

It does not work with the vite build process:

❯ yarn build
yarn run v1.22.17
$ tsc && vite build
node_modules/walletlink/dist/index.d.ts:10:9 - error TS2717: Subsequent property declarations must have the same type.  Property 'ethereum' must be of type '(InjectedProviders & { on?: ((...args: any[]) => void) | undefined; removeListener?: ((...args: any[]) => void) | undefined; request<T = any>(args: RequestArguments): Promise<...>; }) | undefined', but here has type 'WalletLinkProvider | undefined'.

10         ethereum?: WalletLinkProvider;
           ~~~~~~~~

  node_modules/wagmi-core/dist/declarations/src/types/declarations.d.ts:41:3
    41   ethereum?: InjectedProviders & {
         ~~~~~~~~
    'ethereum' was also declared here.


Found 1 error in node_modules/walletlink/dist/index.d.ts:10

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This looks to be related specifically with WalletLinkConnector, because when you comment out this section from the example, everything works properly.

Expected Behavior

Builds without any errors and are able to run yarn preview afterwards.

Steps To Reproduce

1 - Clone Repository & Install Dependencies:

git clone https://github.com/tmm/wagmi;
cd wagmi/examples/vite-react;
yarn install;

2 - Run Build

yarn build;

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

"wagmi": "^0.2.9"

Current Behavior

Typescript fails to add a new Property to an IronSession as shown in the example

./pages/api/verify.ts:21:21
Type error: Property 'siwe' does not exist on type 'IronSession'.

  19 |         const siweMessage = new SiweMessage(message)
  20 |         const fields = await siweMessage.validate(signature)
> 21 |         req.session.siwe = fields
     |                     ^
  22 |         await req.session.save()
  23 |         res.json({ ok: true })
  24 |       } catch (_error) {
error Command failed with exit code 1.

Expected Behavior

No response

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.1.2

Current Behavior

When installing the latest version (in a nextjs 11 app), I get the error:

error - Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './connectors/injected' is not defined by "exports" in /Users/gosset/Dev/frontend/node_modules/wagmi/package.json

Expected Behavior

No response

Steps To Reproduce

Install the latest version of the package inside of a nextjs 11 app and then run it.

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.21

Current Behavior

When switching from BSC Mainnet to BSC Testnet for the first time, when not 'autoconnected' it will disconnect metamask without any error.
Not sure why this happens. I first commented here as it seemed related able.
#180 (comment)

Expected Behavior

Metamask should stay connected during network switch.

Steps To Reproduce

• don't use autoconnect in Provider Code
• use Metamask
• Start from a fresh page (only seems to be reproducible on the first change)
• switch from BSC Mainnet to BSC Testnet
• check connection status of metamask

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://codesandbox.io/s/wagmi-issue-287-9o9cos

Anything else?

This Error bubbles up in our Dapp if this behaviour occurs., but can't see it in the CodeSandbox.
Not sure where this is coming from. Can't find the source. Might be related.

Error: underlying network changed (
  event="changed", 
  network={"name":"bnb","chainId":56,"ensAddress":null,"_defaultProvider":null}, 
  detectedNetwork={"name":"bnbt","chainId":97,"ensAddress":null,"_defaultProvider":null},
  code=NETWORK_ERROR, 
  version=providers/5.6.1
)
    at Logger.makeError (index.js?dd68:219:1)
    at Web3Provider.eval (base-provider.js?4ba1:971:1)
    at Generator.next (<anonymous>)
    at fulfilled (base-provider.js?4ba1:5:43)

Is there an existing issue for this?

• I have searched the existing issues

Package Version

1

Current Behavior

Is there a way to use the lib with React Class Components?

Expected Behavior

No response

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.18

Current Behavior

When running editSwap with the following code

  const [{ data: editData, error: editError, loading: editLoading }, editSwap] =
    useContractWrite(
      {
        addressOrName: genStore.currentContract,
        contractInterface: contractInterface,
      },
      "extendAllotedTime",
      { args: [0] }
    );

I get the following error:

Error: missing argument: passed to contract (count=0, expectedCount=1, code=MISSING_ARGUMENT, version=contracts/5.5.0)

I tried placing the argument with and without an array and successfully used useContractWrite on other functions with no args.

Expected Behavior

No response

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.24

Current Behavior

My project is reporting an error in the TokenPoket Dapp browser on iPhone XR,iPhone 11 Pro, it can't bring up the wallet, I tried to switch to another version but still can't solve it.

Expected Behavior

No response

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.1.5

Current Behavior

I have a contractWrite:

  const [{ data, error, loading }, write] = useContractWrite(
    {
      addressOrName: SMART_CONTRACT, // Ropsten ERC1155 contract
      contractInterface: AccessTokenABI.abi,
      signerOrProvider: signerData,
    },
    "buy"
  )

I'm calling the write method and passing value in overrides:

    const writeResult = await write({
      args: [id],
      overrides: {
        gasLimit: "1000000",
        value: ethers.utils.parseEther("0.01"),
      },
    })

I'm getting a typescript error:

Object literal may only specify known properties, and 'value' does not exist in type 'Overrides'.

The actual request works as intended, so I'm not sure why TS is throwing an error. Couldn't find anything in the ethers doc either.

Expected Behavior

No typescript error when passing value as an override.

Steps To Reproduce

Use the above code.

Anything else?

Discussed in #80

useContractEvent(
    {
        addressOrName: myContractAddress,
        contractInterface: myContractInterface,
    },
    'myEventName',
    (event) => console.log(event),
)

Is there an existing issue for this?

• I have searched the existing issues

Package Version

latest

Current Behavior

the official listed website shows 404: https://wagmi-xyz.vercel.app

Expected Behavior

should not 404

Steps To Reproduce

visit https://wagmi-xyz.vercel.app/

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://wagmi-xyz.vercel.app/

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.12

Current Behavior

Currently if my wallet is connected to a network and that network is down (for example; at the time of writing https://matic-mumbai.chainstacklabs.com is down), then the connect function does nothing.

It appears to eventually time out, after a good 3-4 minutes:

Expected Behavior

It'd be nice to have the connect function timeout / reject after a configurable amount of time. Right now it just looks like my site is broken, so I'm keen to feed back to the user that the issue is with the network they've currently got selected in metamask.

Steps To Reproduce

Set your metamask wallet to a network that's done, any RPC address that times out will do.
Attempt to connect using an injected connector
Wait

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.21

Current Behavior

If you wrap your app with the wagmi provider and give it the WalletConnectConnector it will work just fine on any macbook and any browser but on any mobile device third party modals like https://chakra-ui.com/ wont open anymore.

Its most likely cause of the Support for the experimental syntax 'classPrivateMethods' isn't currently enabled error you see in sandbox, but i am not sure.

So if you recreate the sandbox repo locally on your computer (I use nextjs, next build && next export && next start) it will work just fine on the mac but not on your ios device anymore. i did not check android.

Problem lies with the WalletConnectConnector

Expected Behavior

that it works

Steps To Reproduce

read "current behavior"

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://codesandbox.io/s/reverent-gould-ryzlsx

Anything else?

Bug is gone on ios 15 but present on ios 14

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.0.17

Current Behavior

I think I may have come across a bug in the useContract hook that surfaces when any of the hook arguments change throughout the lifetime of the component. Will provide an example below using a changing signer object.

Using the hook to instantiate a contract w/ a signer:

const contract = useContract({
  addressOrName: '0xa50f703771d04d9e76e03b20720539fc014aaa40',
  contractInterface: Erc20Abi,
  signerOrProvider: signer,
});

This seems to work fine if the signer object is available on first component render (i.e. the first time the hook runs), but if the signer is undefined on first render (which it typically would be since account.connector.getSigner() is an async call), then the contract object returned by useContract will not be updated with the proper signer object, and it will instead take an additional render to see the contract object you're expecting.

This can be verified by forcing a re-render of the consumer component after signer is available, but this shouldn't be necessary and is indicative of a bug in the useContract hook. The logic in the useEffect block of the hook says "instantiate a new contract object if the contract address, ABI, or signer/provider has changed", which is correct, but because it's being stored in a ref (and not React state) it doesn't trigger the consumer component to re-render after the ref value is updated, causing the component to have a stale version of the contract object until a subsequent re-render is triggered.

From React useRef docs:

Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render.

Based on the way the hook is written, this bug will also surface when any of the other hook arguments change.

Expected Behavior

When any of the useContract hook arguments change throughout the lifetime of the component, a newly instantiated contract object should be provided to the component by the hook.

Steps To Reproduce

import { useState, useEffect } from 'react';
import { useAccount, useContract } from 'wagmi';
import { Signer } from 'ethers';

export default () => {
  const [{ data: account }] = useAccount();
  const [signer, setSigner] = useState<Signer>();

  // get signer
  useEffect(() => {
    (async () => {
      try {
        const res = await account?.connector?.getSigner();
        setSigner(res);
      } catch (e) {
        setSigner(undefined);
      }
    })();
  }, [account?.connector]);

  // instantiate contract
  const contract = useContract({
    addressOrName: '0xa50f703771d04d9e76e03b20720539fc014aaa40',
    contractInterface: Erc20Abi,
    signerOrProvider: signer,
  });

  useEffect(() => {
    // this is incorrectly `null` even after `signer` is available
    console.log(contract.signer);
  }, [contract]);

  return null;
}

Anything else?

This issue may be related to this discussion: #49

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.7

Current Behavior

I added some new chains when setting up the providers.

When i use SwitchNetwork from the useNetwork hook with chains i added e.g BSC, BSC Testnet etc, the selected network and list of networks do not show any longer.
There is no error and if i refresh the page, it now shows that i am connected to the right network

Expected Behavior

SwitchNetwork should work well with default and non default chains

Steps To Reproduce

Add new chains to the provider on setup and then use the code below to select and switch between chains

import { useNetwork } from 'wagmi'

const App = () => {
  const [{ data, error, loading }, switchNetwork] = useNetwork()

  return (
    <>
      <div>
        {data.chain?.name ?? networkData.chain?.id}{' '}
        {data.chain?.unsupported && '(unsupported)'}
      </div>

      {switchNetwork &&
        data.chains.map((x) =>
          x.id === data.chain?.id ? null : (
            <button key={x.id} onClick={() => switchNetwork(x.id)}>
              Switch to {x.name}
            </button>
          ),
        )}

      {error && <div>{error?.message}</div>}
    </>
  )
}

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.21

Current Behavior

I have cloned the repo of the remix example merged into wagmi over at a examples/remix - Upon installing the dependencies and making no changes beside configuring the ENV file - starting the app with npm run dev leads to an application error on the root with the following error.

TypeError: Cannot read properties of undefined (reading 'root')

How can we fix this official example so that we can start using wagmi with Remix?

Expected Behavior

The expected behavior is to compile without error on a clone.

Steps To Reproduce

1. Clone the examples/remix example in the tmm/wagmi repo.
2. run npm install && npm run dev
3. Error will be displayed.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

1.0.0

Current Behavior

Whenever an Injected connector is initiated and found, the connection prompt (in my case MetaMask) is always initiated, asking me which MetaMask account I want to connect with. From a UX perspective, it would be nicer to wait until the user clicks one of the wallet buttons to trigger this. I've essentially copied the code from the example docs.

Expected Behavior

Wait for the connection to be initiated by the user, or have an option to toggle this off. I checked the source, seems like getAccounts() is called when an InjectedConnector is initiated, which in turn triggers a window.ethereum.requestAccounts() call.

Steps To Reproduce

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

latest

Current Behavior

I am keep getting Ethereum mainnet balance while I am connected to Polygon Mainnet.

Expected Behavior

No response

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.0.17

Current Behavior

Not sure if this is a Next.js specific thing - it's happening for me in the example + in my own fresh Next.js app

Simple setup - just following the guide

export const Example = () => {
  const [{ data, error }, connect] = useConnect();

  return (
    <div>
      {data.connectors.map((x) => (
        <button disabled={!x.ready} key={x.id} onClick={() => connect(x)}>
          {x.name}
          {!x.ready && ' (unsupported)'}
        </button>
      ))}

      {error && <div>{error?.message ?? 'Failed to connect'}</div>}
    </div>
  );
};

Expected Behavior

No response

Steps To Reproduce

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

wagmie-core 0.1.15

Current Behavior

Safari iOS doesnt support private instance fields in a class, this causes an exception on devices due to the # character.

Expected Behavior

Ideally it would be transpiled and targeted at a lower version

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.17

Current Behavior

Hooks that return tuples do not have their indexes named

Expected Behavior

A hook should return [result: Data, disconnect: () => void] so that it's clear what the function does rather than having to consult the docs.

I was writing the code below getting started with wagmi and wanted to quickly see what useAccount would do in the second item in the tuple

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.21

Current Behavior

When I try to connect to Wallet Connect, it throws the following error and does not display QR code:

ReferenceError: Buffer is not defined
    at typedarrayToBuffer (index.js:15:1)
    at Module.arrayToBuffer (index.js:28:1)
    at Module.generateKey (index.js:7:1)
    at WalletConnect._generateKey (index.js:847:1)
    at WalletConnect.createSession (index.js:299:1)
    at SignerConnection.create (index.js:136:1)
    at index.js:54:1
    at new Promise (<anonymous>)
    at SignerConnection.open (index.js:47:1)
    at JsonRpcProvider.open (provider.js:84:1)

Expected Behavior

To be able to connect using Wallet Connect

Steps To Reproduce

1. Using RedwoodJS
2. Follow Getting Started guide
3. Click Wallet Connect button
4. See error message: Buffer is not defined
5. QR code does not pop up

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

Related: #261

Related: WalletConnect/walletconnect-monorepo#748

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.0.17

Current Behavior

Using a Next.js app, Im calling the disconnect function from the useAccount hook. It does disconnect but then after refreshing the page it reconnects again and the account info re-populates

Expected Behavior

I would expect to be disconnected from ym wallet so that I may be able to reconnect again with a different wallet or simply use the site in its disconnected state

Steps To Reproduce

1. Connect via InjectedConnector -> useAccount becomes populated with data and useConnect returns connected:true.
2. Press disconnect button which calls the disconnect function. -> useAccount returns empty data as expected and connected: false.
3. Refresh the page
4. usAccount becomes populated with data again and connected:true

Anything else?

No response

Edit: It seems as though if I remove autoConnect prop on the provider then it does indeed keep me disconnected however that then means on every refresh I need to reconnect. Ideally I would like connect automatically until I explicitly call disconnect

Is there an existing issue for this?

• I have searched the existing issues

Package Version

1.2.0

Current Behavior

It shows duplicate fetch requests upon route transition in next.js
What is the getUrl and is there any way i can deduplicate the requests

Expected Behavior

No response

Steps To Reproduce

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.0.17

Current Behavior

The disconnect wallet feature from the useAccount hook doesn't seem to disconnect the wallet completely and just shows that it is disconnected on the client side as I have autoconnect enabled while declaring the Provider in the App.js even after disconnecting the wallet if I reload the app it gets connected to the account that I connected previously.

Expected Behavior

The disconnect feature should remove the app from the metamask connected sites of the user is what I believe and I'm not sure if its possible but what I've seen other packages do is they change the account state to undefined and even after a reload it stays undefined unless and until the user connects wallet again.

Steps To Reproduce

Codesandbox link:- https://codesandbox.io/s/thirsty-butterfly-6i0ct

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.15

Current Behavior

When building a page with next.js using getStaticProps, it attempts to use the commonjs module version of wagmi and breaks as it looks like wagmi-core doesnt export or include the required module.

Expected Behavior

No response

Steps To Reproduce

Create a next.js app
Use get static props to force serverside build of the page.
Attempt to load the page

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.1.3

Current Behavior

Tried using the WalletConnectConnector from the module import as stated in the docs as usual, getting an error with a message that it's not a constructor.

Expected Behavior

Expecting to instantiate the WalletConnectConnector

Steps To Reproduce

Function for instantiating wallet connectors

export const walletConnectors = ({ chainId }) => {
	const rpcUrl =
		chains.find((x) => x.id === chainId)?.rpcUrls?.[0] ??
		chain.mainnet.rpcUrls[0];
	return [
		new InjectedConnector({ chains }),
		new WalletConnectConnector({
			options: {
				infuraId: INFURA_ID,
				qrcode: true,
			},
		}),
		new WalletLinkConnector({
			options: {
				appName: "AppName",
				jsonRpcUrl: `${rpcUrl}/${INFURA_ID}`,
			},
		}),
	];
};

Anything else?

Is there an existing issue for this?

• I have searched the existing issues

Package Version

latest

Current Behavior

I cloned the vite-react example from https://github.com/tmm/wagmi/tree/main/examples/vite-react and found the following issues:

• MirrorERC20FactoryContract is imported but it doesn't exist: https://github.com/tmm/wagmi/blob/21d6de32e4cdbf40a6d9c01f0993876af33f89b7/examples/vite-react/src/components/ContractFunction.tsx#L6
• The tsconfig.json file extends another config file that's not accessible: https://github.com/tmm/wagmi/blob/21d6de32e4cdbf40a6d9c01f0993876af33f89b7/examples/vite-react/tsconfig.json#L2

Expected Behavior

The example should run as a standalone without breaking issues. Currently cloning the vite-react example locally or using stackblitz or codestandbox fails to run.

Steps To Reproduce

Stackblitz: https://stackblitz.com/github/tmm/wagmi/tree/main/examples/vite-react
Codesandbox: https://githubbox.com/tmm/wagmi/tree/main/examples/vite-react

Anything else?

Use a separate repo for the examples to ensure the examples are not relying on external files that are not part of dependencies.

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.1

Current Behavior

The following should detect account change:

provider.on("accountsChanged", (accounts) => {
    console.log("accountsChanged", accounts);
})
// This also should work
provider.once("accountsChanged", (accounts) => {
    console.log("accountsChanged", accounts);
})

However neither works. When using window.ethereum instead of the wagmi provider, it works.
I'm using the official example provided in the package.

Expected Behavior

Should emit account change activity.

Steps To Reproduce

provider.on("accountsChanged", (accounts) => {
    console.log("accountsChanged", accounts);
})

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.1

Current Behavior

I am using the package in my next.js application.

When I send transactions to a wallet connected with WalletConnect, the transaction promise never returns.

In the following code snippet, the transaction is picked up by the wallet and will successfully send, but the notifications aren't displayed and the receipt isn't logged.

I tried this with multiple wallets (Metamask and Valora) and neither of them work. Metamask works as expected.

  const setStorage = async (values) => {
    let tx = await contract.store(values.number);

    notification.open({
      message: "Updating Storage",
      description: `Contract storage updating to: ${values.number}`,
    });

    let receipt = await tx.wait();
    console.log("receipt", receipt);
}

Expected Behavior

I expect the transaction promise to resolve when it is sent by the wallet.

Steps To Reproduce

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.0.17

Current Behavior

When I clone examples/next to local, visit index page, found that MetaMask button is disabled, it seems that MetaMask in connectors is not ready, and there is another warning says
Warning: Text content did not match. Server: "Injected" Client: "MetaMask" at button

So, what's the reason leads that issue?

Expected Behavior

1. No this warning;
2. Button should not be disabled since MetaMask is installed.

Steps To Reproduce

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.15

Current Behavior

Demo repo:

https://github.com/liran319/next-wagmi-demo

I have install [email protected] into my project with Nextjs, it works well when start project with 'yarn dev'.
But Uncaught SyntaxError: Unexpected template string occurs when run 'yarn build && yarn start'.

It seems that only occurs on production mode.And there is no stack to debug.
Could you please have a check?

Expected Behavior

Both development and production mode work well.

Steps To Reproduce

1. Clone the repo https://github.com/liran319/next-wagmi-demo, and enter that folder;
2. Run yarn to install deps;
3. Run 'yarn build && yarn start'
4. check console, found 'Uncaught SyntaxError: Unexpected template string', and button doesn't work

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

Module parse failed: Unexpected token (255:5)

Current Behavior

CRA with package [email protected] fails with this error:

./node_modules/wagmi-core/dist/wagmi-core.esm.js 255:5
Module parse failed: Unexpected token (255:5)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| class InjectedConnector extends Connector {
>   id = 'injected';
|   ready = typeof window != 'undefined' && !!window.ethereum;
|   #provider;

wgami versions below 0.2.15 work fine.

Expected Behavior

[email protected] should still be supported.

Steps To Reproduce

• Boostrap CRA project
• Add [email protected] and [email protected]

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

2.0.1

Current Behavior

Component re-render infinitely

Expected Behavior

Component rerender only when data is not loaded

Steps To Reproduce

Here is codesandbox

Anything else?

Nope

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.1

Current Behavior

When a wallet is connected the useAccount hook returns an address, but this address is not checksummed.

Expected Behavior

It would be much more canonical if the address returned was in the checksummed format.

Steps To Reproduce

1. Connect wallet (to metamask)
2. Look at address returned

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

Not sure if this is dependent on the connector but it would be good to normalise thise

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.0.17

Current Behavior

I connected my metamask wallet while I was connected to the avalache c chain network, the app crashes and show this screen. The tab also hangs and console shows that the app goes into an infinite loop trying to reconnect.

Expected Behavior

The app should catch errors on unsupported networks and gracefully show the user a prompt.

Steps To Reproduce

In metamask, switch to a network that's unsupported, then try to "Connect Wallet".

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.24

Current Behavior

Using latest version of React (18)

$ npx create-react-app my-app

Appears not be supported

$ npm add wagmi ethers
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from [email protected]
npm ERR! node_modules/wagmi
npm ERR!   wagmi@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Expected Behavior

No response

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.0.17

Current Behavior

1. i select localhost network (chain-id 1337) in metamask
2. i connect wagmi to metamask using useConnect() hook
3. i get myself a provider using getProvider()
4. i log the provider instance to the console
5. in the console i see that the property "_network" of the provider says that it is connected to mainnet (homeastead, chain id 1)

when i instead create a new ethers instance manually by providing the injected ethereum instance from window into the ethers web3 provider constructor, the network is correctly set to localhost.

Expected Behavior

it should connect to localhost, not mainnet

Steps To Reproduce

see current behaviour

Anything else?

just tried using "useNetwork" to check what wagmi thinks is the current network...
useNetwork correctly return 1337 as chain id... weird

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.2.17

Current Behavior

In a Next.js application, just adding
import {WagmiProvider} from "wagmi";
Even without using it, causes:
SyntaxError: Unexpected token '.'

The same happens when importing:
import {Provider} from "wagmi"

Expected Behavior

Shouldn't crash the app.

Steps To Reproduce

In a working Next.js app:

• npm install wagmi ethers
• Add import {Provider} from "wagmi" in your index file or _app file

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.1.2

Current Behavior

Using the example code from https://wagmi-xyz.vercel.app/guides/connect-wallet, I am connecting to my Ethereum wallet which has an ENS entry

The avatar does not display and the console reads Fetch API cannot load ipfs://QmPMc4tcBsMqLRuCQtPmPe84bpSjrC3Ky7t3JWuHXYB4aS/8929. URL scheme "ipfs" is not supported.

Expected Behavior

That my ENS avatar displays correctly

Steps To Reproduce

Run the example code from the wagmi docs (https://wagmi-xyz.vercel.app/guides/connect-wallet) and connect to an Ethereum address that has an ENS entry with an avatar set according to these docs

Anything else?

This package is amazing! Thank you.