unicape / use-wagmi Goto Github PK

View Code? Open in Web Editor NEW

166.0 166.0 28.0 2.46 MB

Vue Composition for Ethereum based on wagmi

License: MIT License

TypeScript 93.88% HTML 0.32% Vue 5.53% CSS 0.27%

dapp ethereum ethers hooks viem vue wagmi wallet web3

use-wagmi's Introduction

Hi I'm UnicApe 👋

一个来自中国的Web3前端开发

愿世界和平没有战争没有疾病 🙏

希望未来的某天可以实现

居家办公
房车旅行
买啥啥涨
财富自由(万一呢)

Call me

use-wagmi's People

Contributors

Stargazers

Watchers

use-wagmi's Issues

How to use viem functions using use-wagmi ?

because we are setuping wagmi on the app. how to use viem functions ? please show some samples

InjectedConnector() is not found on nuxt 3

<script setup>
// import { InjectedConnector } from 'use-wagmi/connectors/injected'

const { address, isConnected } = useAccount()
const { connect } = useConnect({
  connector: new InjectedConnector(),
})
const { disconnect } = useDisconnect()
</script>
<template>
  <div v-if="isConnected">
    Connected to {{ address }}
    <button @click="disconnect">Disconnect</button>
  </div>
  <button v-else @click="connect">
    Connect Wallet
  </button>
</template>

the import is not working , the auto import also not working on nuxt 3

不支持vue3吗或者说是vite

bug: <title> useSendTransaction not working properly

Is there an existing issue for this?

I have searched the existing issues

Package Version

0.4.3

Current Behavior

I tried to use the useSendTransaction hook, I parsed the configuration params which are stored on pinia state. I used the function sendTransactionAsync from the hook, yesterday it was working fine but today when I called it, it returned the error (err.walk is not a function):

the configuration params look like this:
account
:
"0xcFD64601902A56d9030835731193fD643c74F37d"
data
:
"0x6b4e5dbf000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000008fc0000000000000000000000000000000000000000000000000000000000000001000000000000000000000000524253e41be63f275e57208603764602ef130c2d0000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000002386f26fc10000"
maxFeePerGas
:
1.00000004
maxPriorityFeePerGas
:
1
to
:
"0xcd89d7ae644e15378558F2e18Db2e0492D41e637"
value
:
"10000000000000000"

Expected Behavior

It should work fine, parse the sendTransaction request to MetaMask wallet

Steps To Reproduce

No response

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

https://stackblitz.com/edit/nuxt-starter-hnpxvv?file=app.vue

Anything else?

No response

Module level directives cause errors when bundled, "use client" in "useToken.js" was ignored.

The above situation will occur in the build, but it does not affect normal use.

Wagmi v2

Wagmi v2 is in beta right now, any plans to implement it?

The document guidance seems incorrect and was not exported

wait for using Viem :)

hi @unicape wait for Viem support :)
https://github.com/unicape/use-wagmi/tree/develop
🔥

bug: <title> How to refetch prepareSendTransaction hook after its configuration changed

Is there an existing issue for this?

I have searched the existing issues

Package Version

0.4.10

Current Behavior

I'm using usePrepareSendTransaction hook and useSendTransaction hook for sending transaction function.

When I change some parameters in usePrepareSendTransaction configuration and I call the refetch() function right after, the usePrepareSendTransaction still receives the old parameters.

Could you help me please?

Expected Behavior

usePrepareSendTransaction receives new parameters

Steps To Reproduce

No response

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

No response

Anything else?

No response

bug: How to combine different public clients with useWagmiPlugin?

Is there an existing issue for this?

I have searched the existing issues

Package Version

0.3.7

Current Behavior

Hello!

I am using web3Modal as my connector inside the use-wagmi.ts plugin:

import { UseWagmiPlugin, configureChains, createConfig, mainnet, sepolia } from 'use-wagmi'
import { publicProvider } from 'use-wagmi/providers/public'
import { infuraProvider } from 'use-wagmi/providers/infura'
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/html'

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig()
    const projectId = config.public.WALLETCONNECT_PROJECT_ID
    const infuraKey = config.public.INFURA_API_KEY
    const chains = [mainnet, sepolia]

    const { publicClient } = configureChains(chains,
        [w3mProvider({ projectId }), infuraProvider({ apiKey: infuraKey }), publicProvider()]
    )

    const web3config = createConfig({
        autoConnect: true,
        connectors: w3mConnectors({ projectId, chains }),
        publicClient
    })

    let web3Modal = null
    if (process.client) {
        const ethereumClient = new EthereumClient(web3config, chains)
        web3Modal = new Web3Modal({ projectId }, ethereumClient)
    }

    nuxtApp.vueApp.use(UseWagmiPlugin, web3config)

    return {
        provide: {
            web3Modal
        }
    }
})

The problem is that, using the web3modal connection, I cannot query any data from the blockchain before the user connects the wallet. The public client relies on the connection made by the wallet. But I want to be able to execute readContract before the user connects (to display all tokens of my nft collection...). How can I accomplish this? Do I need to make a separate publicClient (that simply uses Public or infura provider)? But how can I switch it sothat it uses the UseWagmiPlugin? What would you recommend?

Thank you for the help!

Expected Behavior

No response

Steps To Reproduce

No response

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

No response

Anything else?

No response

Uncaught Error: `useConfig` must be used within `UseWagmiPlugin`.

Hello,
I copied your code of the nuxt example... I have the same use-wagmi.ts plugin file, my infura api key is in my .env file. I have the same app.vue with some added code. However, you don't show how to do a contractWrite ... Whenever I try to execute a contractWrite method I get the " useConfig must be used withinUseWagmiPlugin " error.

Here's my updated app.vue, please help or provide an example with contractWrite/read. Thank you!

<template>
    <div>
      <div>
        <button
          v-for="x in connectors"
          :key="x.name"
          :disabled="!x.ready || isReconnecting || connector?.id === x.id"
          @click="() => connect({ connector: x })"
        >
          <span>{{ x.name }}</span>
          <span v-if="!x.ready"> (unsupported)</span>
          <span v-if="isLoading && x.id === pendingConnector?.id">…</span>
        </button>
      </div>
  
      <div>{{ error && error.message }}</div>
  
      <div>
        <span>{{ ensName ?? address }}</span>
        <span v-if="ensName"> ({{ address }})</span>
      </div>
  
      <img v-if="ensAvatar" :src="ensAvatar" width="40" height="40">
  
      <div>
        <button v-if="address" @click="() => disconnect()">Disconnect</button>
        <span v-if="connector?.name">Connected to {{ connector.name }}</span>
        <button @click="mint">Mint</button>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { useAccount, useDisconnect, useEnsAvatar, useEnsName, useConnect, usePrepareContractWrite, useContractWrite } from 'use-wagmi'
  
  const { connector, isReconnecting } = useAccount()
  const { connect, connectors, isLoading, error, pendingConnector } = useConnect()
  
  const { address } = useAccount({
    onConnect: (data:any) => console.log('connected', data),
    onDisconnect: () => console.log('disconnected')
  })
  
  const { data: ensName } = useEnsName({
    address,
    chainId: 1
  })
  
  const { data: ensAvatar } = useEnsAvatar({
    name: ensName,
    chainId: 1
  })
  
  const { disconnect } = useDisconnect()

const ABI = [
        {
            "inputs": [
                {
                "internalType": "contract HashCalls",
                "name": "_tokenContract",
                "type": "address"
                },
                {
                "internalType": "address payable",
                "name": "_artistWallet",
                "type": "address"
                }
            ],
            "stateMutability": "nonpayable",
            "type": "constructor"
            },
            {
            "anonymous": false,
            "inputs": [
                {
                "indexed": true,
                "internalType": "address",
                "name": "previousOwner",
                "type": "address"
                },
                {
                "indexed": true,
                "internalType": "address",
                "name": "newOwner",
                "type": "address"
                }
            ],
            "name": "OwnershipTransferred",
            "type": "event"
            },
            {
            "inputs": [],
            "name": "artist",
            "outputs": [
                {
                "internalType": "address payable",
                "name": "",
                "type": "address"
                }
            ],
            "stateMutability": "view",
            "type": "function"
            },
            {
            "inputs": [],
            "name": "buy",
            "outputs": [],
            "stateMutability": "payable",
            "type": "function"
            },
            {
            "inputs": [],
            "name": "owner",
            "outputs": [
                {
                "internalType": "address",
                "name": "",
                "type": "address"
                }
            ],
            "stateMutability": "view",
            "type": "function"
            },
            {
            "inputs": [],
            "name": "paused",
            "outputs": [
                {
                "internalType": "bool",
                "name": "",
                "type": "bool"
                }
            ],
            "stateMutability": "view",
            "type": "function"
            },
            {
            "inputs": [],
            "name": "price",
            "outputs": [
                {
                "internalType": "uint256",
                "name": "",
                "type": "uint256"
                }
            ],
            "stateMutability": "view",
            "type": "function"
            },
            {
            "inputs": [],
            "name": "renounceOwnership",
            "outputs": [],
            "stateMutability": "nonpayable",
            "type": "function"
            },
            {
            "inputs": [],
            "name": "tokenContract",
            "outputs": [
                {
                "internalType": "contract HashCalls",
                "name": "",
                "type": "address"
                }
            ],
            "stateMutability": "view",
            "type": "function"
            },
            {
            "inputs": [
                {
                "internalType": "address",
                "name": "newOwner",
                "type": "address"
                }
            ],
            "name": "transferOwnership",
            "outputs": [],
            "stateMutability": "nonpayable",
            "type": "function"
            },
            {
            "inputs": [
                {
                "internalType": "bool",
                "name": "_paused",
                "type": "bool"
                }
            ],
            "name": "updatePaused",
            "outputs": [],
            "stateMutability": "nonpayable",
            "type": "function"
        }
    ]

    const mint = () => {
        const { config } = usePrepareContractWrite({ 
            address: '0x9C7F78fB4560f5dB11E634cfF8751aF47C5240bF',
            abi: ABI, 
            functionName: 'buy' 
        })
        const { write } = useContractWrite(config)
        write?.()
    }

  </script>

`autoConnect` flag doesn't work as expected

Is there an existing issue for this?

I have searched the existing issues

Package Version

0.4.3

Current Behavior

Hey there, the autoconnect does not work as expected. when you connect any provider you want and refresh the page, the connection was gone.

Expected Behavior

the connection should be persist as long as autoConnect flag is true.

Steps To Reproduce

Select any provider you want and connect
Refresh the page you'll see connection was gone.

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

https://stackblitz.com/edit/nuxt-starter-zgbggc?file=components%2FWeb3Button.vue,plugins%2Fwagmi.ts,package.json,nuxt.config.ts,app.vue

Anything else?

i've initilized config via Nuxt plugins and also created minimal replication to see what's going on actually.

thank you!

bug: Example for useWaitForTransaction? [not working]

Is there an existing issue for this?

I have searched the existing issues

Package Version

0.3.7

Current Behavior

Could you provide an example for useWaitForTransaction? I don't know why but I cannot make it work. Maybe it's the way the use-wagmi refs are interacting with eachother... or am I calling the methods incorrectly/in the wrong order? I tried lots of stuff but could not make it work. Here's an example... the watchers are never called after I executed the transaction in metamask.

Thanks

<template>
    <div>
        <button @click="createToken">
            Mint (0.0033 ETH)
        </button>
    </div>
</template>

<script lang="ts" setup>
import { useContractWrite, useNetwork, useWaitForTransaction } from 'use-wagmi'
import { parseEther } from 'viem'

const { chain } = useNetwork()
const { hashCallsControllerContract, getContractAddress } = useBlockchain()
const controllerAddress = (chain?.value !== undefined) ? getContractAddress(hashCallsControllerContract, chain.value) : null
const controllerAbi = hashCallsControllerContract.abi
const { data: mintResult, write: mint } = useContractWrite({
    address: controllerAddress,
    abi: controllerAbi,
    functionName: 'mint',
    value: parseEther('0.0033')
})
const { isLoading, isSuccess } = useWaitForTransaction({
    hash: mintResult.value?.hash
})

watch(mintResult, (newValue:any) => {
    console.log('mintResult: ' + newValue)
})
watch(isLoading, (newValue:any) => {
    console.log('isLoading: ' + newValue)
})
watch(isSuccess, (newValue:any) => {
    console.log('isSuccess: ' + newValue)
})
watchEffect((newSomething:any) => {
    console.log(newSomething)
})

const createToken = async () => {
    const { data: tokenMetadata } = await useFetch('/api/createToken', { method: 'POST' })
    if (!tokenMetadata.value) { console.error('could not create token metadata'); return }
    mint({ args: [tokenMetadata.value.tokenMetadataHash, tokenMetadata.value.metadataAuthChecksum] })
}
</script>

<style scoped>

</style>

Expected Behavior

No response

Steps To Reproduce

No response

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

No response

Anything else?

No response

Usage Example Exception

Metamask on safari

Is there an existing issue for this?

I have searched the existing issues

Package Version

0.4.3

Current Behavior

Upon trying to connect to metamask on safari on my phone, i get the Connector not found error.

Expected Behavior

I would like for this to trigger a deep link into metamask.

Steps To Reproduce

Use use-wagmi on safari on a mobile device
Try to connect to metamask

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

No response

Anything else?

No response

Exception in using example, running without this command pnpm run playground:vue

[idea] Cli plugin

It would be cool to have a vue or use-wagmi plugin for @wagmi/cli that auto-generates hooks like the one that is present for react @wagmi/cli/react.

What do you think?

The source code of the react plugin can be found here: https://github.com/wevm/wagmi/blob/main/packages/cli/src/plugins/react.ts

Do you have any official document cases?

usePrepareContractWrite not working as expected

I'm trying to use usePrepareContractWrite and useContractWrite as follows:

const { config } = usePrepareContractWrite({
  ...contractStore.wagmiConfig, // address, abi
  functionName: 'addToTeam',
  args: [props.address],
  onSettled(data, error) {
    console.log('Prepare settled', { data, error })
  },
})

const { isLoading, write } = useContractWrite(config)

const onClick = () => {
  console.log(config, write)
}

onSettled is called with success state, and I can see the request key has been prepared. However when the onClick handler is called, config.request is still undefined, as is the write function.

If I pass the same arguments to useContractWrite in unprepared mode it works fine.

useContractRead throws InvalidAddressError

I see that useBalance accept null address as arg and does not throw any error. However useContractRead does not follow same pattern. This way when user is not connected the address is null and try to call the hook useContractRead using an null address will throw the error. Then trying to add a conditional to the this hook also throws another error:

Uncaught (in promise) Error: `useConfig` must be used within `UseWagmiPlugin`.

How could solve this?

Example 1: Throws InvalidAddressError: Address "null" is invalid.

const { address } = useAccount();

const { data } = useContractRead({
    address,
    abi,
    functionName,
    args: [address.value],
    watch: true,
  }); 
}

Example 2: Throws Uncaught (in promise) Error: useConfig must be used within UseWagmiPlugin

const { address } = useAccount();

if(address.value){
  useContractRead({
      address,
      abi,
      functionName,
      args: [address.value],
      watch: true,
      onSuccess: (data) => {
        myRef.value = data;
      },
    }); 
}

bug: Can not run preview in nuxt example

Is there an existing issue for this?

I have searched the existing issues

Package Version

0.4.9

Current Behavior

When I run yarn build and yarn preview in nuxt example this error appears

[nuxt] [request error] [unhandled] [500] Cannot find module '/ui/use-wagmi/examples/nuxt/.output/server/node_modules/vue/server-renderer/index.mjs' imported from /ui/use-wagmi/examples/nuxt/.output/server/chunks/handlers/renderer.mjs
  at new NodeError (node:internal/errors:405:5)  
  at finalizeResolution (node:internal/modules/esm/resolve:327:11)  
  at moduleResolve (node:internal/modules/esm/resolve:946:10)  
  at defaultResolve (node:internal/modules/esm/resolve:1132:11)  
  at nextResolve (node:internal/modules/esm/loader:163:28)  
  at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)  
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)  
  at link (node:internal/modules/esm/module_job:76:36)

Expected Behavior

Should show UI correctly without any error.

Steps To Reproduce

No response

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

No response

Anything else?

No response

Does it support Vue3 version?

useConfig does not work with @tanstack/vue-query

Is there an existing issue for this?

I have searched the existing issues

Package Version

1.1.8

Current Behavior

Cannot get a working app with useConfig and Nuxt3. Can anyone provide a working example of use-wagmi.ts plugin for Nuxt3 exporting the config with useWagmiPlugin?

Expected Behavior

Expecting no errors passing nuxtApp.vueApp.use(UseWagmiPlugin, config)

Steps To Reproduce

install nuxt3
install wagmi viem use-wagmi
create use-wagmi plugin
try and use anything wagmi

stackblitz doesn't even recognize use-wagmi but I provided a minimal example there.

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

https://stackblitz.com/edit/github-cgbkrw-m2kxhc?file=README.md

Anything else?

No response

question: how can i get encoded data with using useWriteContract

Is there an existing issue for this?

I have searched the existing issues

Package Version

1.1.0

Current Behavior

Hey, thank you for great wrapper of wagmi hooks!

I have a question about usage about useWriteContract. currently usage of quite usefull, however i want to use tenderly to simulation mode, so i need to get encoded data somehow, is there any way to achieve with current API's?

Thanks again!

Expected Behavior

No response

Steps To Reproduce

No response

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

No response

Anything else?

No response

bug: <title>Sepolia RPC CORS Policy

Is there an existing issue for this?

I have searched the existing issues

Package Version

0.4.4

Current Behavior

There's a CORS problem with Sepolia network after I connect

Therefore, when I build the code and run it on a domain, this error occurs and the wagmi hooks are unable to fetch.
I config the chains by importing them from 'use-wagmi/chains'. I use 5 chains: sepolia, mainnet, polygon, bsc, arbitrum and only sepolia has this error, the rest work fine.

Expected Behavior

No response

Steps To Reproduce

No response

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

No response

Anything else?

No response

vite build error

ERROR: Big integer literals are not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari12" + 2 overrides)

bug: doesn't connect with WalletConnect (first connection ANDROID)

Is there an existing issue for this?

I have searched the existing issues

Package Version

^1.3.4

Current Behavior

Packages:

vue 3.4.15
viem 2.7.6
vite 5.0.12
@wagmi/connectors 4.1.13
@wagmi/core 2.6.4

Devices:

Chrome Version 122.0.6261.129 (Official Build) (arm64)
Mobile Metamask Android v7.16.0 (1265)

When connecting via WalletConnect for the first time, it does not connect the wallet the first time. (reconnection will work correctly)

works correctly for IOS

Expected Behavior

The wallet should connect the first time

Steps To Reproduce

open browsers with a clean site data
click on WalletConnect
open Metamask on your phone (must be closed)
click Scan
scan QR

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

https://codesandbox.io/p/devbox/wagmi-vue-4g8lmj

https://github.com/Pasha8914/use-wagmi-approve

Anything else?

In order to run codesandbox, you need to open new terminal tab and run the command
yarn;yarn dev

bug: please provide a working example

Is there an existing issue for this?

I have searched the existing issues

Package Version

^1.0.0

Current Behavior

I go to playgrounds/nuxt.
I run
npm i
npm run dev

I expect something to happen but all I see is

Expected Behavior

Something to happen

Account
account: chainId: status: disconnected

And a lot of errors in the console...

How are we to actually connect with a wallet? Don;t you need osme integration such as rainbowkit or web3modal? It is not clear how to use such connectors reading the documentation.

Please help

Steps To Reproduce

No response

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

No response

Anything else?

No response

Auto Import Support

it will be good if we add Auto Import support to the vite projects using https://github.com/unplugin/unplugin-auto-import

sample template : https://github.com/antfu/vitesse

How does the nuxt module work?

I currently have this plugin in my nuxt 3 project:

It works but I am using use-wagmi 0.3.7. and I installed it using the --force flag, because nuxt 3 is using vue 3, but use-wagmi 0.3.7 depends on vue 2?

Anyways, I tried to use your latest nuxt plugin, but I dont understand how to use it.. does it replace the manual plugin completely? How are we supposed to set it up? Like in my case I'm using web3modal.

Thank you!

import { UseWagmiPlugin, configureChains, createConfig, mainnet, sepolia } from 'use-wagmi'
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/html'

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig()
    const projectId = config.public.WALLETCONNECT_PROJECT_ID
    const chains = [mainnet, sepolia]

    const { publicClient } = configureChains(chains,
        [w3mProvider({ projectId })]
    )

    const web3config = createConfig({
        autoConnect: true,
        connectors: w3mConnectors({ projectId, chains }),
        publicClient
    })

    let web3Modal = null
    if (process.client) {
        const ethereumClient = new EthereumClient(web3config, chains)
        web3Modal = new Web3Modal({ projectId }, ethereumClient)
    }

    nuxtApp.vueApp.use(UseWagmiPlugin, web3config)

    return {
        provide: {
            web3Modal
        }
    }
})

use-wagmi with Web3Modal Vue SDK

is there any way to use the latest web3model vue package with use-wagmi ?
link: https://docs.walletconnect.com/web3modal/vue/about

i'm trying to create like this

how to use reactive args?

hi @unicape thx for good lib :)

also I have a problem with arg in prepareWriteContract, I need get arg from backend before initialize, and the set to reactive or ref, and then call refetch, but wagmi use old data.

repro: https://stackblitz.com/edit/vitejs-vite-chnpkp?file=examples%2Fvite%2Fsrc%2Fcomponents%2FWriteContractPrepared.vue

const args = reactive({
  tokenId: BigInt(1),
})

const { config, refetch } = usePrepareContractWrite({
  ...wagmiContractConfig,
  functionName: 'mint',
  args: [args.tokenId],
  enabled: false,
})

const { write, data, error, isLoading, isError, isSuccess } =
  useContractWrite(config)

async function prepare() {
  // emulate xhr getting args
  await new Promise((r) => setTimeout(r, 2000))
  args.tokenId = BigInt(2)

  console.log(config)

  refetch()
}

I use computed and ref but no result, how is the right solution for this?

we used @wagmi/core temporarily, what parameters must be passed to the prepareWriteContract function (account , walletClient ? ) to make it work seamlessly with useContractWrite from use-wagmi ?

 const config = await prepareWriteContract({
   // ... abi config 
   chainId: 1
   // walletClient ? 
   // account ?
 })
``

bug: Error when using use-wagmi with pinia nuxt3

Is there an existing issue for this?

I have searched the existing issues

Package Version

latest

Current Behavior

When using use-wagmi with pinia in nuxt3 I get this error.

dependencies:

nuxt: 3.9.0
viem: latest
use-wagmi: latest
pinia: 2.1.7

Expected Behavior

No response

Steps To Reproduce

No response

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

No response

Anything else?

No response

CORS issues

Hello!

While my nuxt app is working... I get the data I request from my smart contracts etc, I do get a lot of errors in the console related to CORS. Any idea why this is, and how I can fix it?

thnx

Access to fetch at 'https://rpc.sepolia.org/' from origin 'http://localhost:3000' 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.
chunk-BVQHDTV7.js:1565     POST https://rpc.sepolia.org/ net::ERR_FAILED
withTimeout.errorInstance.TimeoutError.body.body @ rpc.ts:79
(anonymous) @ withTimeout.ts:30
(anonymous) @ withTimeout.ts:37
withTimeout @ withTimeout.ts:16
http @ rpc.ts:77
fn @ http.ts:95
request @ http.ts:97
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
fetch2 @ fallback.ts:108
request @ fallback.ts:142
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
retry @ withRetry.ts:30
await in retry (async)
attemptRetry @ withRetry.ts:41
await in attemptRetry (async)
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
fn @ call.ts:252
exec @ createBatchScheduler.ts:54
setTimeout (async)
schedule @ createBatchScheduler.ts:95
scheduleMulticall @ call.ts:272
call @ call.ts:135
readContract @ readContract.ts:85
readContract @ public.ts:1506
readContract @ chunk-LAFZBYO7.js:2158
(anonymous) @ index.js:1076
fetchFn @ query.ts:400
run @ retryer.ts:147
createRetryer @ retryer.ts:204
fetch @ query.ts:458
executeFetch @ queryObserver.ts:350
onSubscribe @ queryObserver.ts:107
subscribe @ subscribable.ts:15
watch.immediate @ useBaseQuery.ts:88
callWithErrorHandling @ chunk-BVQHDTV7.js:1565
callWithAsyncErrorHandling @ chunk-BVQHDTV7.js:1573
job @ chunk-BVQHDTV7.js:3162
doWatch @ chunk-BVQHDTV7.js:3193
watch @ chunk-BVQHDTV7.js:3050
useBaseQuery @ useBaseQuery.ts:82
useQuery @ useQuery.ts:171
useQuery2 @ index.js:458
useContractRead @ index.js:1150
useContracts @ useContracts.ts:29
setup @ app.vue:113
callWithErrorHandling @ chunk-BVQHDTV7.js:1565
setupStatefulComponent @ chunk-BVQHDTV7.js:8631
setupComponent @ chunk-BVQHDTV7.js:8592
mountComponent @ chunk-BVQHDTV7.js:6997
hydrateNode @ chunk-BVQHDTV7.js:6026
hydrateSuspense @ chunk-BVQHDTV7.js:2953
hydrateNode @ chunk-BVQHDTV7.js:6066
hydrateSubTree @ chunk-BVQHDTV7.js:7073
componentUpdateFn @ chunk-BVQHDTV7.js:7093
run @ chunk-BVQHDTV7.js:423
instance.update @ chunk-BVQHDTV7.js:7212
setupRenderEffect @ chunk-BVQHDTV7.js:7220
mountComponent @ chunk-BVQHDTV7.js:7010
hydrateNode @ chunk-BVQHDTV7.js:6026
hydrate2 @ chunk-BVQHDTV7.js:5920
mount @ chunk-BVQHDTV7.js:5213
app.mount @ chunk-BVQHDTV7.js:10556
initApp @ entry.js:55
await in initApp (async)
(anonymous) @ entry.js:64
Show 42 more frames
Show less
localhost/:1 Access to fetch at 'https://rpc.sepolia.org/' from origin 'http://localhost:3000' has been blocked by CORS policy: 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.
chunk-BVQHDTV7.js:1565     POST https://rpc.sepolia.org/ net::ERR_FAILED 503
withTimeout.errorInstance.TimeoutError.body.body @ rpc.ts:79
(anonymous) @ withTimeout.ts:30
(anonymous) @ withTimeout.ts:37
withTimeout @ withTimeout.ts:16
http @ rpc.ts:77
fn @ http.ts:95
request @ http.ts:97
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
fetch2 @ fallback.ts:108
request @ fallback.ts:142
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
retry @ withRetry.ts:30
await in retry (async)
attemptRetry @ withRetry.ts:41
await in attemptRetry (async)
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
(anonymous) @ getBlockNumber.ts:50
withCache @ withCache.ts:55
getBlockNumber @ getBlockNumber.ts:48
getBlockNumber @ public.ts:1485
fetchBlockNumber @ chunk-LAFZBYO7.js:2637
queryFn2 @ index.js:331
fetchFn @ query.ts:400
run @ retryer.ts:147
createRetryer @ retryer.ts:204
fetch @ query.ts:458
executeFetch @ queryObserver.ts:350
onSubscribe @ queryObserver.ts:107
subscribe @ subscribable.ts:15
watch.immediate @ useBaseQuery.ts:88
callWithErrorHandling @ chunk-BVQHDTV7.js:1565
callWithAsyncErrorHandling @ chunk-BVQHDTV7.js:1573
job @ chunk-BVQHDTV7.js:3162
doWatch @ chunk-BVQHDTV7.js:3193
watch @ chunk-BVQHDTV7.js:3050
useBaseQuery @ useBaseQuery.ts:82
useQuery @ useQuery.ts:171
useQuery2 @ index.js:458
useBlockNumber @ index.js:367
useContractReads @ index.js:1237
useContracts @ useContracts.ts:36
setup @ app.vue:113
callWithErrorHandling @ chunk-BVQHDTV7.js:1565
setupStatefulComponent @ chunk-BVQHDTV7.js:8631
setupComponent @ chunk-BVQHDTV7.js:8592
mountComponent @ chunk-BVQHDTV7.js:6997
hydrateNode @ chunk-BVQHDTV7.js:6026
hydrateSuspense @ chunk-BVQHDTV7.js:2953
hydrateNode @ chunk-BVQHDTV7.js:6066
hydrateSubTree @ chunk-BVQHDTV7.js:7073
componentUpdateFn @ chunk-BVQHDTV7.js:7093
run @ chunk-BVQHDTV7.js:423
instance.update @ chunk-BVQHDTV7.js:7212
setupRenderEffect @ chunk-BVQHDTV7.js:7220
mountComponent @ chunk-BVQHDTV7.js:7010
hydrateNode @ chunk-BVQHDTV7.js:6026
hydrate2 @ chunk-BVQHDTV7.js:5920
mount @ chunk-BVQHDTV7.js:5213
app.mount @ chunk-BVQHDTV7.js:10556
initApp @ entry.js:55
await in initApp (async)
(anonymous) @ entry.js:64
Show 40 more frames
Show less
localhost/:1 Access to fetch at 'https://rpc.sepolia.org/' from origin 'http://localhost:3000' 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.
web3Connection.js:24     POST https://rpc.sepolia.org/ net::ERR_FAILED
withTimeout.errorInstance.TimeoutError.body.body @ rpc.ts:79
(anonymous) @ withTimeout.ts:30
(anonymous) @ withTimeout.ts:37
withTimeout @ withTimeout.ts:16
http @ rpc.ts:77
fn @ http.ts:95
request @ http.ts:97
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
fetch2 @ fallback.ts:108
request @ fallback.ts:142
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
retry @ withRetry.ts:30
await in retry (async)
attemptRetry @ withRetry.ts:41
await in attemptRetry (async)
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
getBalance @ getBalance.ts:68
getBalance @ public.ts:1483
fetchBalance @ chunk-LAFZBYO7.js:2414
fetchBalance @ AccountCtrl.ts:78
fetchBalance @ w3m-account-context.ts:73
Le @ w3m-account-context.ts:23
_clone @ lit-html.ts:1129
_commitTemplateResult @ lit-html.ts:1543
_$setValue @ lit-html.ts:1384
render @ lit-html.ts:2183
update @ lit-element.ts:165
performUpdate @ reactive-element.ts:1329
scheduleUpdate @ reactive-element.ts:1261
__enqueueUpdate @ reactive-element.ts:1233
await in __enqueueUpdate (async)
requestUpdate @ reactive-element.ts:1208
__initialize @ reactive-element.ts:946
ReactiveElement @ reactive-element.ts:931
LitElement @ lit-element.ts:115
jt @ index.ts:23
initUi @ client.ts:31
await in initUi (async)
c @ client.ts:25
(anonymous) @ web3Connection.js:24
(anonymous) @ client.mjs:20
executeAsync @ index.mjs:111
(anonymous) @ client.mjs:20
(anonymous) @ nuxt.js:107
fn @ nuxt.js:146
runWithContext @ chunk-BVQHDTV7.js:5256
callWithNuxt @ nuxt.js:151
runWithContext @ nuxt.js:28
applyPlugin @ nuxt.js:107
applyPlugins @ nuxt.js:119
await in applyPlugins (async)
initApp @ entry.js:47
(anonymous) @ entry.js:64
Show 43 more frames
Show less
localhost/:1 Access to fetch at 'https://rpc.sepolia.org/' from origin 'http://localhost:3000' has been blocked by CORS policy: 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.
chunk-BVQHDTV7.js:1565     POST https://rpc.sepolia.org/ net::ERR_FAILED 503
withTimeout.errorInstance.TimeoutError.body.body @ rpc.ts:79
(anonymous) @ withTimeout.ts:30
(anonymous) @ withTimeout.ts:37
withTimeout @ withTimeout.ts:16
http @ rpc.ts:77
fn @ http.ts:95
request @ http.ts:97
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
fetch2 @ fallback.ts:108
request @ fallback.ts:142
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
retry @ withRetry.ts:30
await in retry (async)
attemptRetry @ withRetry.ts:41
await in attemptRetry (async)
retry @ withRetry.ts:30
await in retry (async)
attemptRetry @ withRetry.ts:41
await in attemptRetry (async)
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
call @ call.ts:149
readContract @ readContract.ts:85
(anonymous) @ multicall.ts:177
multicall @ multicall.ts:176
multicall @ public.ts:1505
multicall @ chunk-LAFZBYO7.js:2138
(anonymous) @ chunk-LAFZBYO7.js:2188
promises @ chunk-LAFZBYO7.js:2187
readContracts @ chunk-LAFZBYO7.js:2198
(anonymous) @ index.js:1208
fetchFn @ query.ts:400
run @ retryer.ts:147
createRetryer @ retryer.ts:204
fetch @ query.ts:458
executeFetch @ queryObserver.ts:350
onSubscribe @ queryObserver.ts:107
subscribe @ subscribable.ts:15
watch.immediate @ useBaseQuery.ts:88
callWithErrorHandling @ chunk-BVQHDTV7.js:1565
callWithAsyncErrorHandling @ chunk-BVQHDTV7.js:1573
job @ chunk-BVQHDTV7.js:3162
doWatch @ chunk-BVQHDTV7.js:3193
watch @ chunk-BVQHDTV7.js:3050
useBaseQuery @ useBaseQuery.ts:82
useQuery @ useQuery.ts:171
useQuery2 @ index.js:458
useContractReads @ index.js:1270
useContracts @ useContracts.ts:36
setup @ app.vue:113
callWithErrorHandling @ chunk-BVQHDTV7.js:1565
setupStatefulComponent @ chunk-BVQHDTV7.js:8631
setupComponent @ chunk-BVQHDTV7.js:8592
mountComponent @ chunk-BVQHDTV7.js:6997
hydrateNode @ chunk-BVQHDTV7.js:6026
hydrateSuspense @ chunk-BVQHDTV7.js:2953
hydrateNode @ chunk-BVQHDTV7.js:6066
hydrateSubTree @ chunk-BVQHDTV7.js:7073
componentUpdateFn @ chunk-BVQHDTV7.js:7093
run @ chunk-BVQHDTV7.js:423
instance.update @ chunk-BVQHDTV7.js:7212
setupRenderEffect @ chunk-BVQHDTV7.js:7220
mountComponent @ chunk-BVQHDTV7.js:7010
hydrateNode @ chunk-BVQHDTV7.js:6026
hydrate2 @ chunk-BVQHDTV7.js:5920
mount @ chunk-BVQHDTV7.js:5213
app.mount @ chunk-BVQHDTV7.js:10556
initApp @ entry.js:55
await in initApp (async)
(anonymous) @ entry.js:64
Show 45 more frames
Show less
localhost/:1 Access to fetch at 'https://rpc.sepolia.org/' from origin 'http://localhost:3000' has been blocked by CORS policy: 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.
chunk-BVQHDTV7.js:1565     POST https://rpc.sepolia.org/ net::ERR_FAILED 503
withTimeout.errorInstance.TimeoutError.body.body @ rpc.ts:79
(anonymous) @ withTimeout.ts:30
(anonymous) @ withTimeout.ts:37
withTimeout @ withTimeout.ts:16
http @ rpc.ts:77
fn @ http.ts:95
request @ http.ts:97
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
fetch2 @ fallback.ts:108
request @ fallback.ts:142
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
retry @ withRetry.ts:30
await in retry (async)
attemptRetry @ withRetry.ts:41
await in attemptRetry (async)
retry @ withRetry.ts:30
await in retry (async)
attemptRetry @ withRetry.ts:41
await in attemptRetry (async)
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
(anonymous) @ getBlockNumber.ts:50
withCache @ withCache.ts:55
getBlockNumber @ getBlockNumber.ts:48
getBlockNumber @ public.ts:1485
fetchBlockNumber @ chunk-LAFZBYO7.js:2637
queryFn2 @ index.js:331
fetchFn @ query.ts:400
run @ retryer.ts:147
createRetryer @ retryer.ts:204
fetch @ query.ts:458
executeFetch @ queryObserver.ts:350
onSubscribe @ queryObserver.ts:107
subscribe @ subscribable.ts:15
watch.immediate @ useBaseQuery.ts:88
callWithErrorHandling @ chunk-BVQHDTV7.js:1565
callWithAsyncErrorHandling @ chunk-BVQHDTV7.js:1573
job @ chunk-BVQHDTV7.js:3162
doWatch @ chunk-BVQHDTV7.js:3193
watch @ chunk-BVQHDTV7.js:3050
useBaseQuery @ useBaseQuery.ts:82
useQuery @ useQuery.ts:171
useQuery2 @ index.js:458
useBlockNumber @ index.js:367
useContractReads @ index.js:1237
useContracts @ useContracts.ts:36
setup @ app.vue:113
callWithErrorHandling @ chunk-BVQHDTV7.js:1565
setupStatefulComponent @ chunk-BVQHDTV7.js:8631
setupComponent @ chunk-BVQHDTV7.js:8592
mountComponent @ chunk-BVQHDTV7.js:6997
hydrateNode @ chunk-BVQHDTV7.js:6026
hydrateSuspense @ chunk-BVQHDTV7.js:2953
hydrateNode @ chunk-BVQHDTV7.js:6066
hydrateSubTree @ chunk-BVQHDTV7.js:7073
componentUpdateFn @ chunk-BVQHDTV7.js:7093
run @ chunk-BVQHDTV7.js:423
instance.update @ chunk-BVQHDTV7.js:7212
setupRenderEffect @ chunk-BVQHDTV7.js:7220
mountComponent @ chunk-BVQHDTV7.js:7010
hydrateNode @ chunk-BVQHDTV7.js:6026
hydrate2 @ chunk-BVQHDTV7.js:5920
mount @ chunk-BVQHDTV7.js:5213
app.mount @ chunk-BVQHDTV7.js:10556
initApp @ entry.js:55
await in initApp (async)
(anonymous) @ entry.js:64
Show 42 more frames
Show less
localhost/:1 Access to fetch at 'https://rpc.sepolia.org/' from origin 'http://localhost:3000' has been blocked by CORS policy: 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.
web3Connection.js:24     POST https://rpc.sepolia.org/ net::ERR_FAILED 503
withTimeout.errorInstance.TimeoutError.body.body @ rpc.ts:79
(anonymous) @ withTimeout.ts:30
(anonymous) @ withTimeout.ts:37
withTimeout @ withTimeout.ts:16
http @ rpc.ts:77
fn @ http.ts:95
request @ http.ts:97
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
fetch2 @ fallback.ts:108
request @ fallback.ts:142
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
retry @ withRetry.ts:30
await in retry (async)
attemptRetry @ withRetry.ts:41
await in attemptRetry (async)
retry @ withRetry.ts:30
await in retry (async)
attemptRetry @ withRetry.ts:41
await in attemptRetry (async)
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
getBalance @ getBalance.ts:68
getBalance @ public.ts:1483
fetchBalance @ chunk-LAFZBYO7.js:2414
fetchBalance @ AccountCtrl.ts:78
fetchBalance @ w3m-account-context.ts:73
Le @ w3m-account-context.ts:23
_clone @ lit-html.ts:1129
_commitTemplateResult @ lit-html.ts:1543
_$setValue @ lit-html.ts:1384
render @ lit-html.ts:2183
update @ lit-element.ts:165
performUpdate @ reactive-element.ts:1329
scheduleUpdate @ reactive-element.ts:1261
__enqueueUpdate @ reactive-element.ts:1233
await in __enqueueUpdate (async)
requestUpdate @ reactive-element.ts:1208
__initialize @ reactive-element.ts:946
ReactiveElement @ reactive-element.ts:931
LitElement @ lit-element.ts:115
jt @ index.ts:23
initUi @ client.ts:31
await in initUi (async)
c @ client.ts:25
(anonymous) @ web3Connection.js:24
(anonymous) @ client.mjs:20
executeAsync @ index.mjs:111
(anonymous) @ client.mjs:20
(anonymous) @ nuxt.js:107
fn @ nuxt.js:146
runWithContext @ chunk-BVQHDTV7.js:5256
callWithNuxt @ nuxt.js:151
runWithContext @ nuxt.js:28
applyPlugin @ nuxt.js:107
applyPlugins @ nuxt.js:119
await in applyPlugins (async)
initApp @ entry.js:47
(anonymous) @ entry.js:64
Show 45 more frames
Show less
localhost/:1 Access to fetch at 'https://rpc.sepolia.org/' from origin 'http://localhost:3000' has been blocked by CORS policy: 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.
web3Connection.js:24     POST https://rpc.sepolia.org/ net::ERR_FAILED 503
withTimeout.errorInstance.TimeoutError.body.body @ rpc.ts:79
(anonymous) @ withTimeout.ts:30
(anonymous) @ withTimeout.ts:37
withTimeout @ withTimeout.ts:16
http @ rpc.ts:77
fn @ http.ts:95
request @ http.ts:97
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
fetch2 @ fallback.ts:108
request @ fallback.ts:142
withRetry.delay.count.count @ buildRequest.ts:69
attemptRetry @ withRetry.ts:34
retry @ withRetry.ts:30
await in retry (async)
attemptRetry @ withRetry.ts:41
await in attemptRetry (async)
retry @ withRetry.ts:30
await in retry (async)
attemptRetry @ withRetry.ts:41
await in attemptRetry (async)
retry @ withRetry.ts:30
await in retry (async)
attemptRetry @ withRetry.ts:41
await in attemptRetry (async)
(anonymous) @ withRetry.ts:45
withRetry @ withRetry.ts:24
(anonymous) @ buildRequest.ts:66
getBalance @ getBalance.ts:68
getBalance @ public.ts:1483
fetchBalance @ chunk-LAFZBYO7.js:2414
fetchBalance @ AccountCtrl.ts:78
fetchBalance @ w3m-account-context.ts:73
Le @ w3m-account-context.ts:23
_clone @ lit-html.ts:1129
_commitTemplateResult @ lit-html.ts:1543
_$setValue @ lit-html.ts:1384
render @ lit-html.ts:2183
update @ lit-element.ts:165
performUpdate @ reactive-element.ts:1329
scheduleUpdate @ reactive-element.ts:1261
__enqueueUpdate @ reactive-element.ts:1233
await in __enqueueUpdate (async)
requestUpdate @ reactive-element.ts:1208
__initialize @ reactive-element.ts:946
ReactiveElement @ reactive-element.ts:931
LitElement @ lit-element.ts:115
jt @ index.ts:23
initUi @ client.ts:31
await in initUi (async)
c @ client.ts:25
(anonymous) @ web3Connection.js:24
(anonymous) @ client.mjs:20
executeAsync @ index.mjs:111
(anonymous) @ client.mjs:20
(anonymous) @ nuxt.js:107
fn @ nuxt.js:146
runWithContext @ chunk-BVQHDTV7.js:5256
callWithNuxt @ nuxt.js:151
runWithContext @ nuxt.js:28
applyPlugin @ nuxt.js:107
applyPlugins @ nuxt.js:119
await in applyPlugins (async)
initApp @ entry.js:47
(anonymous) @ entry.js:64
Show 47 more frames
Show less
web3Connection.js:24 HttpRequestError: HTTP request failed.

URL: https://rpc.sepolia.org
Request body: {"method":"eth_getBalance","params":["0x0A49c25Ed8fb99C06527EDB99E61E155F2C8d674","latest"]}

Details: Failed to fetch
Version: [email protected]
    at Object.http (rpc.ts:127:11)
    at async fn (http.ts:95:18)
    at async request (http.ts:97:39)
    at async withRetry.delay.count.count (buildRequest.ts:69:18)
    at async attemptRetry (withRetry.ts:34:22)
fetchBalance @ w3m-account-context.ts:75
await in fetchBalance (async)
Le @ w3m-account-context.ts:23
_clone @ lit-html.ts:1129
_commitTemplateResult @ lit-html.ts:1543
_$setValue @ lit-html.ts:1384
render @ lit-html.ts:2183
update @ lit-element.ts:165
performUpdate @ reactive-element.ts:1329
scheduleUpdate @ reactive-element.ts:1261
__enqueueUpdate @ reactive-element.ts:1233
await in __enqueueUpdate (async)
requestUpdate @ reactive-element.ts:1208
__initialize @ reactive-element.ts:946
ReactiveElement @ reactive-element.ts:931
LitElement @ lit-element.ts:115
jt @ index.ts:23
initUi @ client.ts:31
await in initUi (async)
c @ client.ts:25
(anonymous) @ web3Connection.js:24
(anonymous) @ client.mjs:20
executeAsync @ index.mjs:111
(anonymous) @ client.mjs:20
(anonymous) @ nuxt.js:107
fn @ nuxt.js:146
runWithContext @ chunk-BVQHDTV7.js:5256
callWithNuxt @ nuxt.js:151
runWithContext @ nuxt.js:28
applyPlugin @ nuxt.js:107
applyPlugins @ nuxt.js:119
await in applyPlugins (async)
initApp @ entry.js:47
(anonymous) @ entry.js:64
Show 18 more frames
Show less

useWaitForTransaction pass the hash parameter

Is there an existing issue for this?

I have searched the existing issues

Package Version

use-wagmi v0.4.0

Current Behavior

Using it this way causes data.value.hash to lose responsive. This disables the isLoading of useWaitForTransaction. As long as .value is used to pass parameters, the return value of the hook will be invalidated. Is there any solution?

Expected Behavior

No response

Steps To Reproduce

const {
  write,
  isLoading: loading1,
  isSuccess,
  data
} = useContractWrite(config)
const { isLoading: loading2 } = useWaitForTransaction({ hash: data.value?.hash })

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

No response

Anything else?

No response

Trying to connect with web3modal - is it possible?

I am not sure if it is possible but I would like to have web3Modal as my provider in my nuxt 3 project.
So far I have this plugin (plugins/use-wagmi.js):

import { UseWagmiPlugin, configureChains, createConfig, mainnet, sepolia } from 'use-wagmi'
import { w3mConnectors, w3mProvider } from '@web3modal/ethereum'

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig()
    const projectId = config.public.walletConnectProjectId
    const chains = [mainnet, sepolia]

    const { publicClient, webSocketPublicClient } = configureChains(chains, [w3mProvider({ projectId })])
    const wagmiConfig = createConfig({
        autoConnect: true,
        connectors: w3mConnectors({ projectId, chains }),
        publicClient,
        webSocketPublicClient
    })

    nuxtApp.vueApp.use(UseWagmiPlugin, wagmiConfig)
})

But I am unsure how to proceed since actually web3Modal requires an Ethereum client like so:

const ethereumClient = new EthereumClient(wagmiConfig, chains)
const web3modal = new Web3Modal({ projectId }, ethereumClient)

I should then call

const connect = () => { web3modal.openModal() }
to make the modal appear.

How would you recommend me to continue?

Nuxt.js compatibility

Are there possible pointers on how to extend for Nuxt.js. I keep running into a bunch of errors

cc: @unicape

Using examples to prompt for exceptions

@unicape Hello, I am using the latest version of the example to connect to the wallet, but I will still be prompted export named 'InjectedConnector'，I want to export Meat Mask and Coinbase from it, which will also throw the same exception

sendTransactionAsync does not return a Promise

Is there an existing issue for this?

I have searched the existing issues

Package Version

0.4.3

Current Behavior

I want to use sendTransaction as an asynchronous function, so I call sendTransactionAsync. But it's shown that its type is a normal function. Please helpp!!!

Expected Behavior

No response

Steps To Reproduce

No response

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

No response

Anything else?

No response

How do I reconnect automatically?

I tried using useReconnect with onMounted but it doesn't work. I see there is a reconnectOnMount option for the Nuxt plugin but I'm using Vue.

bug: How to use accountWatch useAccountEffect ?

Is there an existing issue for this?

I have searched the existing issues

Package Version

1.3.5

Current Behavior

Hello, I want a vue callback when the account is being switched in the wallet. Is that possible using use-wagmi? It is not clear to me how. and I couldnt find an example.

Thanks

Expected Behavior

No response

Steps To Reproduce

No response

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

No response

Anything else?

No response

bug: Type issue when using useContractRead composable.

Is there an existing issue for this?

I have searched the existing issues

Package Version

0.3.9

Current Behavior

const { data: symbol } = useContractRead({
^ biging | number | boolean | string | void
...tokenConfig,
functionName: "symbol",
});

Expected Behavior

const { data: symbol } = useContractRead({
^ string | undefined
...tokenConfig,
functionName: "symbol",
});

Steps To Reproduce

No response

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

No response

Anything else?

No response

bug: <title>如何在vue2.7 中使用呢？

Is there an existing issue for this?

I have searched the existing issues

Package Version

0.4.6

Current Behavior

composition API 测试是正常能用的。但是引入use-wagmi中的hook时控制台就会报错

Expected Behavior

能够正常使用

Steps To Reproduce

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

No response

Anything else?

Could I get signature from useConnect?

I would like to check out if the address belongs to the current user, so is it possible to get the signature from useConnect() and let me pass it to my backend?
If so, I can verify the address on backend to allow user to sign in.
Last but not last, I am really appreciated to your work on this project. Thanks a lot!

Do you want to synchronize a sample document?

Do you want to synchronize a sample document?According to Github's example, the wallet was not connected within 60 seconds

bug: TypeError: Cannot write to private field

Is there an existing issue for this?

I have searched the existing issues

Package Version

0.4.4

Current Behavior

There are two bugs here actually:

onConnect with useAccount isn't triggering at all. I get it to trigger sometimes when editing and saving a file but otherwise it doesn't work. Neither when clicking connect or when reloading the page and letting it reconnect.
When I get it to run I'm not able to do getProvider on the connector. I get the error TypeError: Cannot write to private field

Expected Behavior

onConnect should trigger when connecting and when reconnecting. And I should be able to access getProvider without an error.

Steps To Reproduce

Run the code locally or on stackblitz see onConnect isn't triggering and when it does it will throw an error when I try to access connector.getProvider

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

https://github.com/samuveth/vitejs-vite-4acvat

Anything else?

No response

feature: generate use-wagmi for Wagmi v2 packages

I have recently ported a project form wagmi v1 to wagmi v2 using use-wagmi.

Everything works fine 👌 but I need to build and install use-wagmi packages from the git repository because there are not release candidate or beta packages anywhere (npmjs, github).

Having built packages would make use-wagmi (for wagmi v2) integrations far easier.

Unable to integrate web3auth using use-wagmi library

Hi there,

I'm currently experiencing issues while attempting to integrate the web3auth authentication system using the use-wagmi library. Here are the details of the issue.

unicape / use-wagmi Goto Github PK

use-wagmi's Introduction

Hi I'm UnicApe 👋

use-wagmi's People

Contributors

Stargazers

Watchers

Forkers

use-wagmi's Issues

Is there an existing issue for this?

Package Version

Current Behavior

Expected Behavior

Steps To Reproduce

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

Anything else?

Is there an existing issue for this?

Package Version

Current Behavior

Expected Behavior

Steps To Reproduce

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

Anything else?

Is there an existing issue for this?

Package Version

Current Behavior

Expected Behavior

Steps To Reproduce

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

Anything else?

Is there an existing issue for this?

Package Version

Current Behavior

Expected Behavior

Steps To Reproduce

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

Anything else?

Is there an existing issue for this?

Package Version

Current Behavior

Expected Behavior

Steps To Reproduce

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

Anything else?

Is there an existing issue for this?

Package Version

Current Behavior

Expected Behavior

Steps To Reproduce

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

Anything else?

Is there an existing issue for this?

Package Version

Current Behavior

Expected Behavior

Steps To Reproduce

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

Anything else?

Is there an existing issue for this?

Package Version

Current Behavior

Expected Behavior

Steps To Reproduce

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

Anything else?

Is there an existing issue for this?

Package Version

Current Behavior

Expected Behavior

Steps To Reproduce

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

Anything else?

Is there an existing issue for this?

Package Version

Current Behavior

Expected Behavior

Steps To Reproduce

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

Anything else?

Is there an existing issue for this?