{"id":13735834,"url":"https://github.com/kolirt/vue-web3-auth","last_synced_at":"2025-03-17T10:07:30.810Z","repository":{"id":156807762,"uuid":"633157234","full_name":"kolirt/vue-web3-auth","owner":"kolirt","description":"💎 Web3 authentication for Vue3 apps based on WalletConnect Web3Modal v2 and wagmi","archived":false,"fork":false,"pushed_at":"2024-11-17T20:26:27.000Z","size":1673,"stargazers_count":36,"open_issues_count":5,"forks_count":9,"subscribers_count":3,"default_branch":"v2","last_synced_at":"2025-03-04T09:11:32.325Z","etag":null,"topics":["dapps","ethereum","vue","vuejs","wagmi","walletconnect","web3","web3modal"],"latest_commit_sha":null,"homepage":"https://kolirt.github.io/vue-web3-auth/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kolirt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"https://www.buymeacoffee.com/kolirt"}},"created_at":"2023-04-26T22:53:00.000Z","updated_at":"2024-12-22T17:55:27.000Z","dependencies_parsed_at":"2024-03-18T12:01:27.156Z","dependency_job_id":"7bc6d263-37cf-4c4c-acf7-c6ff86e688ef","html_url":"https://github.com/kolirt/vue-web3-auth","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolirt%2Fvue-web3-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolirt%2Fvue-web3-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolirt%2Fvue-web3-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolirt%2Fvue-web3-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kolirt","download_url":"https://codeload.github.com/kolirt/vue-web3-auth/tar.gz/refs/heads/v2","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244014136,"owners_count":20383715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dapps","ethereum","vue","vuejs","wagmi","walletconnect","web3","web3modal"],"created_at":"2024-08-03T03:01:11.814Z","updated_at":"2025-03-17T10:07:30.776Z","avatar_url":"https://github.com/kolirt.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/kolirt"],"categories":["Packages","Software Development","Components \u0026 Libraries"],"sub_categories":["JavaScript","UI Components"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://vuejs.org/\"\u003e\u003cimg height=\"185\" hspace=\"10\" src=\"https://github.com/kolirt/vue-web3-auth/blob/v2/assets/vue.png\" alt=\"Vue logo\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://docs.walletconnect.com/web3modal/v2/about\"\u003e\u003cimg height=\"185\" hspace=\"10\" src=\"https://github.com/kolirt/vue-web3-auth/blob/v2/assets/wc.png\" alt=\"Wallet connect logo\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eVue web3 auth\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eWeb3 authentication for Vue3 apps based on \u003ca href=\"https://github.com/reown-com/appkit/tree/V2\"\u003eWalletConnect Web3Modal v2\u003c/a\u003e and wagmi\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dependency-version/%40kolirt%2Fvue-web3-auth/peer/vue\" alt=\"vue-version\" /\u003e\n  \n  \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/%40kolirt%2Fvue-web3-auth\" alt=\"npm bundle size\"/\u003e\n  \n  \u003ca href=\"https://www.npmjs.com/package/@kolirt/vue-web3-auth\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/%40kolirt%2Fvue-web3-auth\" alt=\"npm-version\" /\u003e\u003c/a\u003e\n\n  \u003cimg src=\"https://img.shields.io/npm/l/vite-plugin-robots\" alt=\"licence\" /\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/static/v1?label=Made%20with\u0026message=VueJS\u0026color=limegreen\u0026style=for-the-badge\u0026logo=vue.js\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Made%20for-Dapps-orange?style=for-the-badge\u0026logo=ethereum\" /\u003e\n\u003c/p\u003e\n\nSimple WalletConnect Web3Modal v2 integration package for Vue3 apps.\n\n### Versions\n\n| package version                                          | web3modal                                                |\n| -------------------------------------------------------- | -------------------------------------------------------- |\n| [2.x.x](https://github.com/kolirt/vue-web3-auth/tree/v2) | [v2](https://github.com/reown-com/appkit/tree/V2) |\n\n### Table of Contents\n\n- [Versions](#versions)\n- [Getting started](#getting-started)\n  - [Installation](#installation)\n  - [Setup](#setup)\n    - [Configuration](#configuration)\n    - [Custom chain](#custom-chain)\n    - [Custom rpc provider](#custom-rpc-provider)\n- [Usage](#usage)\n  - [Basic usage](#basic-usage) \n    - [Info about the user's connected wallet and wallet type](#info-about-the-users-connected-wallet-and-wallet-type)\n    - [Connect wallet button](#connect-wallet-button)\n    - [Switch chain](#switch-chain)\n    - [Select chain via Web3Modal](#select-chain-via-web3modal)\n    - [FetchGasPrice](#fetchgasprice)\n    - [FetchBlockNumber](#fetchblocknumber)\n    - [FetchTransaction](#fetchtransaction)\n    - [FetchTransactionReceipt](#fetchtransactionreceipt)\n    - [PrepareSendTransaction](#preparesendtransaction)\n    - [SendTransaction](#sendtransaction)\n    - [WaitForTransaction](#waitfortransaction)\n    - [SignMessage](#signmessage)\n    - [Multicall](#multicall)\n    - [FetchBalance](#fetchbalance)\n    - [FetchToken](#fetchtoken)\n    - [ReadContract](#readcontract)\n    - [WriteContract](#writecontract)\n    - [EstimateWriteContractGas](#estimatewritecontractgas)\n    - [ParseEvents](#parseevents)\n    - [WatchContractEvent](#watchcontractevent)\n    - [WatchAsset](#watchasset)\n  - [Composable](#composable)\n    - [UseFetchBalance](#usefetchbalance)\n- [Demo](#demo)\n- [Example](#example)\n- [Faq](#faq)\n- [License](#license)\n- [Other packages](#other-packages)\n\n\u003ca href=\"https://www.buymeacoffee.com/kolirt\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/arial-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\n\u003c/a\u003e\n\n# Getting started\n\n## Installation\n\nUse yarn or npm to install the package `@kolirt/vue-web3-auth`.\n\n```bash\nnpm install --save @kolirt/vue-web3-auth\n\nyarn add @kolirt/vue-web3-auth\n```\n\n## Setup\n\n### Configuration\n\nAdd dependencies to your `main.js`:\n\n```javascript\nimport { createApp } from 'vue'\nimport { Chains, createWeb3Auth } from '@kolirt/vue-web3-auth'\n\nconst app = createApp({...})\n\napp.use(createWeb3Auth({\n  projectId: '', // generate here https://cloud.walletconnect.com/ and turn on 'Supports Sign v2'\n  chains: [\n    Chains.bsc,\n    Chains.mainnet,\n    Chains.polygon\n  ]\n}))\n\napp.mount('#app')\n```\n\n### Custom chain\n\n```ts\nimport { type Chain } from '@kolirt/vue-web3-auth'\n\nconst bsc: Chain = {\n  id: 56,\n  name: 'BNB Smart Chain',\n  network: 'bsc',\n  nativeCurrency: {\n    decimals: 18,\n    name: 'BNB',\n    symbol: 'BNB'\n  },\n  rpcUrls: {\n    default: {\n      http: ['https://rpc.ankr.com/bsc'],\n      webSocket: ['wss://bsc-ws-node.nariox.org:443']\n    },\n    public: {\n      http: ['https://rpc.ankr.com/bsc'],\n      webSocket: ['wss://bsc-ws-node.nariox.org:443']\n    }\n  },\n  blockExplorers: {\n    etherscan: {\n      name: 'BscScan',\n      url: 'https://bscscan.com'\n    },\n    default: {\n      name: 'BscScan',\n      url: 'https://bscscan.com'\n    }\n  },\n  contracts: {\n    multicall3: {\n      address: '0xca11bde05977b3631167028862be2a173976ca11',\n      blockCreated: 15921452\n    }\n  }\n}\n```\n\n### Custom rpc provider\n\nBy default, the package uses the walletconnect rpc provider. If you want to use a custom rpc from the chain, you can set the `enableCustomProvider` option to `true`.\n\n```ts\napp.use(createWeb3Auth({\n  enableCustomProvider: true\n})\n```\n\n# Usage\n\n## Basic usage\n\n### Info about the user's connected wallet and wallet type\n\n```ts\nimport { account } from '@kolirt/vue-web3-auth'\n\naccount.connected // if connected\naccount.address // current account address\naccount.shortAddress // current account address with 3 dots\naccount.wallet.id // current wallet id\naccount.wallet.name // current wallet name\n```\n\n### Connect wallet button\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { account, accountDetails, connect, disconnect } from '@kolirt/vue-web3-auth'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv v-if=\"account.connected\"\u003e\n    \u003cbutton @click=\"accountDetails()\"\u003e\n      {{ account.address }}\n    \u003c/button\u003e\n    \u003cbutton @click=\"disconnect()\"\u003eDisconnect from {{ account.wallet.name }}\u003c/button\u003e\n  \u003c/div\u003e\n  \u003cbutton v-else @click=\"connect()\"\u003eConnect wallet\u003c/button\u003e\n\u003c/template\u003e\n```````\n\n### Switch chain\nTo switch the chain, you need to add it during [configuration](#configuration). \n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { switchChain, Chains } from '@kolirt/vue-web3-auth'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton @click=\"switchChain(Chains.polygon)\"\u003eSwitch to polygon\u003c/button\u003e\n\u003c/template\u003e\n```\n\n### Select chain via Web3Modal\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { selectChain } from '@kolirt/vue-web3-auth'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton @click=\"selectChain\"\u003eSelect chain\u003c/button\u003e\n\u003c/template\u003e\n```\n\n### FetchGasPrice\n\n```ts\nimport { fetchGasPrice } from '@kolirt/vue-web3-auth'\n\nconst data = await fetchGasPrice()\n\n/**\n * Result in data\n *\n * {\n *  formatted: {\n *   gasPrice: '3'\n *  },\n *  gasPrice: 3000000000n\n * }\n */\n```\n\n### FetchBlockNumber\n\n```ts\nimport { fetchBlockNumber } from '@kolirt/vue-web3-auth'\n\nconst data = await fetchBlockNumber()\n\n/**\n * Result in data\n *\n * 29288229n\n */\n```\n\n### FetchTransaction\n\n```ts\nimport { fetchTransaction } from '@kolirt/vue-web3-auth'\n\nconst transaction = await fetchTransaction({\n  hash: '0x7ed8dc64f54ae43f4d53173e95aa929c52de44ec5cea8c28246989914ed7f4fb'\n})\n```\n\n### FetchTransactionReceipt\n\n```ts\nimport { fetchTransactionReceipt } from '@kolirt/vue-web3-auth'\n\nconst transactionReceipt = await fetchTransactionReceipt({\n  hash: '0x7ed8dc64f54ae43f4d53173e95aa929c52de44ec5cea8c28246989914ed7f4fb'\n})\n```\n\n### PrepareSendTransaction\n\n```ts\nimport { prepareSendTransaction } from '@kolirt/vue-web3-auth'\n\nconst preparedTxn = await prepareSendTransaction({\n  to: '0x2D4C407BBe49438ED859fe965b140dcF1aaB71a9',\n  value: 1n\n})\n```\n\n### SendTransaction\n\n```ts\nimport { sendTransaction } from '@kolirt/vue-web3-auth'\n\nconst txn = await sendTransaction({\n  to: '0x2D4C407BBe49438ED859fe965b140dcF1aaB71a9',\n  value: 1n\n})\n```\n\n### WaitForTransaction\n\n```ts\nimport { waitForTransaction } from '@kolirt/vue-web3-auth'\n\nconst transactionReceipt = await waitForTransaction({\n  hash: '0x7ed8dc64f54ae43f4d53173e95aa929c52de44ec5cea8c28246989914ed7f4fb',\n})\n```\n\n### SignMessage\n\n```ts\nimport { signMessage } from '@kolirt/vue-web3-auth'\n\nconst signature = await signMessage('test message')\n```\n\n### Multicall\n\n```ts\nimport { chain, multicall, multicallABI } from '@kolirt/vue-web3-auth'\n\nlet data = await multicall({\n  calls: [\n    {\n      abi: multicallABI,\n      contractAddress: chain.value.contracts.multicall3.address,\n      calls: [\n        ['getEthBalance', ['0x2D4C407BBe49438ED859fe965b140dcF1aaB71a9']],\n        ['getEthBalance', ['0x295e26495CEF6F69dFA69911d9D8e4F3bBadB89B']],\n        ['getEthBalance', ['0x2465176C461AfB316ebc773C61fAEe85A6515DAA']]\n      ]\n    }\n  ]\n})\n\n/**\n * Result in data\n *\n * [\n *  {result: 1908669631824871303n, status: \"success\"},\n *  {result: 133515691552422277n, status: \"success\"},\n *  {result: 2080909582708869960n, status: \"success\"}\n * ]\n */\n```\n\n### FetchBalance\n\n```ts\nimport { fetchBalance } from '@kolirt/vue-web3-auth'\n\nlet bnbBalance = await fetchBalance({\n  address: '0x2D4C407BBe49438ED859fe965b140dcF1aaB71a9'\n})\n\n/**\n * Result in bnbBalance\n *\n * {\n *  decimals: 18,\n *  formatted: '1.908669631824871303',\n *  symbol: 'BNB',\n *  value: 1908669631824871303n\n * }\n */\n\nlet tokenBalance = await fetchBalance({\n  address: '0x2D4C407BBe49438ED859fe965b140dcF1aaB71a9',\n  token: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c'\n})\n\n/**\n * Result in tokenBalance\n *\n * {\n *  decimals: 18,\n *  formatted: '0',\n *  symbol: 'WBNB',\n *  value: 0n\n * }\n */\n```\n\n### FetchToken\n\n```ts\nimport { fetchToken } from '@kolirt/vue-web3-auth'\n\nlet data = await fetchToken({\n  address: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c'\n})\n\n/**\n * Result in data\n *\n * {\n *  address: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c',\n *  decimals: 18,\n *  name: 'Wrapped BNB',\n *  symbol: 'WBNB',\n *  totalSupply: {\n *   formatted: '2538454.736169014001284694',\n *   value: 2538454736169014001284694n\n *  }\n * }\n */\n```\n\n### ReadContract\n\n```ts\nimport { erc20ABI, readContract } from '@kolirt/vue-web3-auth'\n\nlet data = await readContract({\n  address: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c', // wbnb on bsc\n  abi: erc20ABI,\n  functionName: 'balanceOf',\n  args: ['0x36696169c63e42cd08ce11f5deebbcebae652050']\n})\n\n/**\n * Result in data\n *\n * 107109316688516684525777n\n */\n```\n\n### WriteContract\n\n```ts\nimport { erc20ABI, writeContract } from '@kolirt/vue-web3-auth'\n\nawait writeContract({\n  abi: erc20ABI,\n  address: '0x55d398326f99059fF775485246999027B3197955',\n  functionName: 'approve',\n  args: ['0x685B1ded8013785d6623CC18D214320b6Bb64759', 100]\n}).then(async (data) =\u003e {\n  console.log('hash', data.hash)\n\n  await data.wait()\n\n  console.log('transaction successfully')\n})\n```\n\n### EstimateWriteContractGas\n\n```ts\nimport { erc20ABI, estimateWriteContractGas } from '@kolirt/vue-web3-auth'\n\nconst gas = await estimateWriteContractGas({\n  abi: erc20ABI,\n  address: '0x55d398326f99059fF775485246999027B3197955',\n  functionName: 'approve',\n  args: ['0x685B1ded8013785d6623CC18D214320b6Bb64759', 100]\n}).catch((e) =\u003e {})\n```\n\n### ParseEvents\n\n```ts\nimport { erc20ABI, fetchTransactionReceipt, parseEvents } from '@kolirt/vue-web3-auth'\n\nconst transactionReceipt = await fetchTransactionReceipt({\n  hash: '0x2a328737e94bb243b1ff64792ae68cd6c179797dc1de1e092c96137f0d3404c3'\n})\n\nconst events = parseEvents({ abi: erc20ABI }, transactionReceipt)\n/**\n * Result in events\n *\n * [\n *  {\n *   args: {\n *    owner: '0xaA916B4a4cDbEFC045fa24542673F500a11F5413',\n *    spender: '0x023963f7e755bE4F743047183d1F49C31E84AEa4',\n *    value: 1000000000000000000n\n *   },\n *   eventName: 'Approval'\n *  }\n * ]\n */\n```\n\n### WatchContractEvent\n\n```ts\nimport { erc20ABI, watchContractEvent } from '@kolirt/vue-web3-auth'\n\nconst unwatch = watchContractEvent(\n  {\n    address: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c',\n    abi: erc20ABI,\n    eventName: 'Transfer'\n  },\n  (log) =\u003e {\n    console.log(log)\n  }\n)\n```\n\n### WatchAsset\n\n```ts\nimport { watchAsset } from '@kolirt/vue-web3-auth'\n\nconst result = watchAsset({\n  address: '0x6b175474e89094c44da98b954eedeac495271d0f',\n  decimals: 18,\n  symbol: 'DAI'\n})\n```\n\n## Composable\n\n### UseFetchBalance\n\n```ts\nimport { useFetchBalance } from '@kolirt/vue-web3-auth'\n\n// use `fetch` for manual init when `disableAutoFetch` is `true`\nconst { loaded, fetching, data, fetch, reload, disableAutoReload } = useFetchBalance(\n  {\n    address: '0x2D4C407BBe49438ED859fe965b140dcF1aaB71a9'\n  },\n  {\n    disableAutoFetch: false,\n    autoReloadTime: 30000,\n    disableAutoReload: false\n  }\n)\n```\n\n# Demo\n\n[Demo here](https://kolirt.github.io/vue-web3-auth/)\n\n# Example\n\n[Example here](https://github.com/kolirt/vue-web3-auth/tree/v2/examples)\n\n# FAQ\n\nCheck closed [issues](https://github.com/kolirt/vue-web3-auth/issues) to get answers for most asked questions.\n\n# License\n\n[MIT](https://github.com/kolirt/vue-web3-auth/tree/v2/LICENSE)\n\n# Other packages\n\nCheck out my other projects on my [GitHub profile](https://github.com/kolirt).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkolirt%2Fvue-web3-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkolirt%2Fvue-web3-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkolirt%2Fvue-web3-auth/lists"}