{"_id":"@alphpro/web3-vue","_rev":"4-e2e8027c545ea8e57e4d5b7b25f88338","name":"@alphpro/web3-vue","description":"> `@alphpro/web3-vue` is a series of renderless components and hooks to provide easy access to the Alephium blockchain","dist-tags":{"latest":"0.45.0"},"versions":{"0.0.1":{"name":"@alphpro/web3-vue","version":"0.0.1","_id":"@alphpro/web3-vue@0.0.1","maintainers":[{"name":"0x_reed","email":"reed@degen.watch"}],"homepage":"https://github.com/alphpro/web3-vue#readme","bugs":{"url":"https://github.com/alphpro/web3-vue/issues"},"dist":{"shasum":"0bfb33545356d2768cfd540f50e19b253d206758","tarball":"https://registry.npmjs.org/@alphpro/web3-vue/-/web3-vue-0.0.1.tgz","fileCount":25,"integrity":"sha512-mEGVL1d42+Jd4ZGuVCaMWyzEMhosN1A5Say1t3hloaQ4n+csUoQrV1QyT+Iwy4+YY5RygRCwBc0iAH1I7Scksw==","signatures":[{"sig":"MEUCIQC39u/xrlEVaQU/05h4GeRyjL0WTk1zpjM6TwtT/XcYmgIgBWSaWLZKU6NvG/WTXcaTuyK/gtTRH6XAT/nJxVKn8Jc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2028653},"main":"./dist/web3-vue.umd.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/web3-vue.es.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/web3-vue.es.js","require":"./dist/web3-vue.umd.js"}},"scripts":{"dev":"vite","test":"exit 0","build":"vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types","preview":"vite preview","preserve":"vite build","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"0x_reed","email":"reed@degen.watch"},"repository":{"url":"git+https://github.com/alphpro/web3-vue.git","type":"git"},"_npmVersion":"10.2.4","description":"> `@alphpro/web3-vue` is a series of renderless components and hooks to provide easy access to the Alephium blockchain","directories":{},"_nodeVersion":"21.6.2","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.1.4","vue-tsc":"^1.8.27","typescript":"^5.2.2","@types/node":"^20.11.25","@biomejs/biome":"^1.6.0","@vitejs/plugin-vue":"^5.0.4","vite-plugin-css-injected-by-js":"^3.4.0"},"peerDependencies":{"vue":"^3.4.19","@alephium/web3":"^0.36.1","@alephium/get-extension-wallet":"^0.36.1","@alephium/walletconnect-provider":"^0.36.1","@alephium/walletconnect-qrcode-modal":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/web3-vue_0.0.1_1710440220768_0.8585687092557723","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@alphpro/web3-vue","version":"0.0.2","_id":"@alphpro/web3-vue@0.0.2","maintainers":[{"name":"0x_reed","email":"reed@degen.watch"}],"homepage":"https://github.com/alphpro/web3-vue#readme","bugs":{"url":"https://github.com/alphpro/web3-vue/issues"},"dist":{"shasum":"2fc099473cbba9df6ae25e2374ebf81a4158d0d9","tarball":"https://registry.npmjs.org/@alphpro/web3-vue/-/web3-vue-0.0.2.tgz","fileCount":25,"integrity":"sha512-5y4BcCY1ampEU51BvyjPzEuPqkGwktMbMoftZxzQsMpwPLDzwa4ERdcl8aAuZQIegIAfS10iWLM2C5wQWe3XdA==","signatures":[{"sig":"MEUCIHpVeYJpReEVofv/gEjkW2uJYj0xeVKzhOahYnjMPj86AiEAt1WnS03dcoS2metXFUuKOoxZbQ0TIi8/eHycYM9eP+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2028705},"main":"./dist/web3-vue.umd.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/web3-vue.es.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/web3-vue.es.js","require":"./dist/web3-vue.umd.js"}},"gitHead":"608393d594444b26248456f3c02a7edb7fced52c","scripts":{"dev":"vite","test":"exit 0","build":"vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types","preview":"vite preview","preserve":"vite build","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"0x_reed","email":"reed@degen.watch"},"repository":{"url":"git+https://github.com/alphpro/web3-vue.git","type":"git"},"_npmVersion":"10.2.4","description":"> `@alphpro/web3-vue` is a series of renderless components and hooks to provide easy access to the Alephium blockchain","directories":{},"_nodeVersion":"21.6.2","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.1.4","vue-tsc":"^1.8.27","typescript":"^5.2.2","@types/node":"^20.11.25","@biomejs/biome":"^1.6.0","@vitejs/plugin-vue":"^5.0.4","vite-plugin-css-injected-by-js":"^3.4.0"},"peerDependencies":{"vue":"^3.4.19","@alephium/web3":"^0.36.1","@alephium/get-extension-wallet":"^0.36.1","@alephium/walletconnect-provider":"^0.36.1","@alephium/walletconnect-qrcode-modal":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/web3-vue_0.0.2_1711309048608_0.5914053264940007","host":"s3://npm-registry-packages"}},"0.0.3":{"name":"@alphpro/web3-vue","version":"0.0.3","_id":"@alphpro/web3-vue@0.0.3","maintainers":[{"name":"0x_reed","email":"reed@degen.watch"}],"homepage":"https://github.com/alphpro/web3-vue#readme","bugs":{"url":"https://github.com/alphpro/web3-vue/issues"},"dist":{"shasum":"56b1d2da8c215cef00f7bb5d3d69d0e04f69b119","tarball":"https://registry.npmjs.org/@alphpro/web3-vue/-/web3-vue-0.0.3.tgz","fileCount":26,"integrity":"sha512-5EPcOdrHkgVL2TuyjwKjLyMz7RmaKUDPTg1pk+RCRpIrAyYzUyqJTuvU5VOoETh6PzUVgCgRKmj9rd5cAoISCQ==","signatures":[{"sig":"MEQCICVqONiFzJSVMWSfxOw5tsk2idzWw7VcxQrtPefyb9h9AiB9cuJNdPhRCHgYEF5OV1M4ibmo71RkLwpqoRxw50OyEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2203841},"main":"./dist/web3-vue.umd.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/web3-vue.es.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/web3-vue.es.js","require":"./dist/web3-vue.umd.js"}},"gitHead":"b932d0586b65123562dc62ecca93981e739da89b","scripts":{"dev":"vite","test":"exit 0","build":"vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types","preview":"vite preview","preserve":"vite build","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"0x_reed","email":"reed@degen.watch"},"repository":{"url":"git+https://github.com/alphpro/web3-vue.git","type":"git"},"_npmVersion":"10.2.4","description":"> `@alphpro/web3-vue` is a series of renderless components and hooks to provide easy access to the Alephium blockchain","directories":{},"_nodeVersion":"21.6.2","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.2.8","buffer":"^6.0.3","vue-tsc":"^2.0.13","typescript":"^5.4.5","@types/node":"^20.12.7","@biomejs/biome":"^1.6.4","@vitejs/plugin-vue":"^5.0.4","vite-plugin-css-injected-by-js":"^3.5.0"},"peerDependencies":{"vue":"^3.4.19","@alephium/web3":"^0.38.1","@alephium/get-extension-wallet":"^0.38.1","@alephium/walletconnect-provider":"^0.38.1","@alephium/walletconnect-qrcode-modal":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/web3-vue_0.0.3_1712946025785_0.9712472180924092","host":"s3://npm-registry-packages"}},"0.0.4":{"name":"@alphpro/web3-vue","version":"0.0.4","_id":"@alphpro/web3-vue@0.0.4","maintainers":[{"name":"0x_reed","email":"reed@degen.watch"}],"homepage":"https://github.com/alphpro/web3-vue#readme","bugs":{"url":"https://github.com/alphpro/web3-vue/issues"},"dist":{"shasum":"0c53f7d45859c9dbf2c21c9eb5fb71f501947c35","tarball":"https://registry.npmjs.org/@alphpro/web3-vue/-/web3-vue-0.0.4.tgz","fileCount":26,"integrity":"sha512-uNSNRlCJThVB8x7jfsCL9AkKSDn9hZASfiBMat0knijZ2vgnxW700iOxsNu1FMJoEefnq+xfWD5yWIgRc1U3Dg==","signatures":[{"sig":"MEQCIAIKMTxM5kd9U5BpD6WNNBqbCssfBi3pvOh6O5QFwoyrAiBdHlvyt1IkpeNsUi6GIUfWlGC4U739iP8sI47c3oVxnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2203934},"main":"./dist/web3-vue.umd.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/web3-vue.es.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/web3-vue.es.js","require":"./dist/web3-vue.umd.js"}},"gitHead":"b932d0586b65123562dc62ecca93981e739da89b","scripts":{"dev":"vite","test":"exit 0","build":"vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types","preview":"vite preview","preserve":"vite build","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"0x_reed","email":"reed@degen.watch"},"repository":{"url":"git+https://github.com/alphpro/web3-vue.git","type":"git"},"_npmVersion":"10.2.4","description":"> `@alphpro/web3-vue` is a series of renderless components and hooks to provide easy access to the Alephium blockchain","directories":{},"_nodeVersion":"21.6.2","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.2.11","buffer":"^6.0.3","vue-tsc":"^2.0.16","typescript":"^5.4.5","@types/node":"^20.12.10","@biomejs/biome":"^1.7.3","@vitejs/plugin-vue":"^5.0.4","vite-plugin-css-injected-by-js":"^3.5.1"},"peerDependencies":{"vue":"^3.4.19","@alephium/web3":"^0.38.1","@alephium/get-extension-wallet":"^0.38.1","@alephium/walletconnect-provider":"^0.38.1","@alephium/walletconnect-qrcode-modal":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/web3-vue_0.0.4_1715115843579_0.0694463310994915","host":"s3://npm-registry-packages"}},"0.45.0":{"name":"@alphpro/web3-vue","version":"0.45.0","main":"./dist/web3-vue.umd.js","module":"./dist/web3-vue.es.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/web3-vue.es.js","require":"./dist/web3-vue.umd.js"}},"types":"./dist/types/index.d.ts","repository":{"type":"git","url":"git+https://github.com/alphpro/web3-vue.git"},"type":"module","scripts":{"dev":"vite","build":"vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types","preserve":"vite build","typecheck":"vue-tsc --noEmit","preview":"vite preview","test":"exit 0"},"dependencies":{},"devDependencies":{"@alephium/get-extension-wallet":"^0.45.0","@alephium/walletconnect-provider":"^0.45.0","@alephium/walletconnect-qrcode-modal":"^0.1.0","@alephium/web3":"^0.45.0","@biomejs/biome":"^1.8.1","@types/node":"^20.14.2","@vitejs/plugin-vue":"^5.0.5","buffer":"^6.0.3","typescript":"^5.4.5","vite":"^5.2.13","vite-plugin-css-injected-by-js":"^3.5.1","vue-tsc":"^2.0.21"},"peerDependencies":{"@alephium/walletconnect-qrcode-modal":"^0.1.0","@alephium/get-extension-wallet":"^0.45.0","@alephium/walletconnect-provider":"^0.45.0","@alephium/web3":"^0.45.0","vue":"^3.4.19"},"_id":"@alphpro/web3-vue@0.45.0","gitHead":"19ced12e65274813df3594baa33af94ececac415","description":"> `@alphpro/web3-vue` is a series of renderless components and hooks to provide easy access to the Alephium blockchain","bugs":{"url":"https://github.com/alphpro/web3-vue/issues"},"homepage":"https://github.com/alphpro/web3-vue#readme","_nodeVersion":"22.1.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-3tG/gQf2tHd016f6pMU0jkBUpdmWRxXp9TYQ1guwRWwgwZk+yCpo+amcu+RkpWvq1x10xJ6imEr0kq5GOwHmug==","shasum":"32480ae5e59ebf13d72df4cee68a1212a768dbc2","tarball":"https://registry.npmjs.org/@alphpro/web3-vue/-/web3-vue-0.45.0.tgz","fileCount":26,"unpackedSize":4049301,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEmC9BNuo9gMAhURIUwqdhO3RzLNw2oWRUgvQIoHxHd6AiBg/wfA9WmaXmoAInBJQf0CrlwzilRX1L/CMwcmjyZbxA=="}]},"_npmUser":{"name":"0x_reed","email":"reed@degen.watch"},"directories":{},"maintainers":[{"name":"0x_reed","email":"reed@degen.watch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web3-vue_0.45.0_1718205394851_0.11159550793743112"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-14T18:17:00.619Z","modified":"2024-06-12T15:16:35.263Z","0.0.1":"2024-03-14T18:17:01.038Z","0.0.2":"2024-03-24T19:37:28.839Z","0.0.3":"2024-04-12T18:20:25.978Z","0.0.4":"2024-05-07T21:04:03.791Z","0.45.0":"2024-06-12T15:16:35.050Z"},"maintainers":[{"name":"0x_reed","email":"reed@degen.watch"}],"repository":{"type":"git","url":"git+https://github.com/alphpro/web3-vue.git"},"homepage":"https://github.com/alphpro/web3-vue#readme","bugs":{"url":"https://github.com/alphpro/web3-vue/issues"},"readme":"# Alephium Web3-Vue by [Alph.Pro](https://alph.pro)\n\n> `@alphpro/web3-vue` is a series of renderless components and hooks to provide easy access to the Alephium blockchain\n\n## Install\n\n```sh\n# install library\nbun add @alphpro/web3-vue\n\n# install peer dependencies\nbun add \\\n  @alephium/web3 \\\n  @alephium/walletconnect-provider \\\n  @alephium/get-extension-wallet \\\n  @alephium/walletconnect-qrcode-modal\n```\n\n## Setup\n\nSimply import components as needed from `@alphpro/web3-vue` or initialize the plugin to install the components globally\n\n```html\n<script setup lang=\"ts\">\n  // use locally in your component\n  import {\n    AlephiumConnectionProvider,\n    AlephiumConnect,\n    AlephiumExecute,\n  } from \"@alphpro/web3-vue\";\n</script>\n```\n\n~ or ~\n\n```ts\n// main.ts\nimport AlphProWeb3 from \"@alphpro/web3-vue\";\n\ncreateApp(App)\n  .use(AlphProWeb3) // install components globally\n  .mount(\"#app\");\n```\n\n## Components\n\n### Alephium Provider\n\nAlephium Provider should be placed on the furthest edge of your app that you will be using any Alephium features. For most dapps this means wrap your entire app with it for simplicity. Its responsible for resuming with auto-connect, and providing all children components with Alephium functionality\n\n```html\n<template>\n  <AlephiumConnectionProvider :autoConnect=\"true\" :group=\"0\" network=\"mainnet\">\n    <!-- Your App -->\n  </AlephiumConnectionProvider>\n</template>\n```\n\n### Alephium Connect\n\nAlephium Connect can be used anywhere, any time (as long as its a child of AlephiumConnectionProvider). Through its slots API it provides connect, disconnect functionality\n\nNow Add a Connect Button\n\n```html\n<template>\n  <AlephiumConnect\n    v-slot=\"{ isConnected, connectExtension, connectDesktop, disconnect }\"\n  >\n    <template v-if=\"!isConnected\">\n      <button @click=\"connectExtension\">Extension</button>\n      <button @click=\"connectDesktop\">Desktop</button>\n    </template>\n    <button v-else @click=\"disconnect\">Disconnect</button>\n  </AlephiumConnect>\n</template>\n```\n\nIt also provides easy access to the currently connected account\n\n```html\n<template>\n  <AlephiumConnect v-slot=\"{ account, balances }\">\n    <div>Hello {{ account.address }}</div>\n    <div>Balance: {{ balances.balance }}</div>\n  </AlephiumConnect>\n</template>\n```\n\nHow you want to show your connect options is completely up to you, one common pattern is to have the 'Connect' button to simply open a modal, and this modal is where the actual connection takes place. Several helper functions are available to make it easy to create such a modal.\n\n```html\n<template>\n  <AlephiumConnect\n    v-slot=\"{ \n        connectExtension, \n        connectMobile, \n        connectDesktop, \n        connectWalletConnect \n    }\"\n  >\n    <ul>\n      <li><button @click=\"connectExtension\">Extension Wallet</button></li>\n      <li><button @click=\"connectMobile\">Mobile Wallet</button></li>\n      <li><button @click=\"connectDesktop\">Desktop Wallet</button></li>\n      <li><button @click=\"connectWalletConnect\">Wallet Connect</button></li>\n    </ul>\n  </AlephiumConnect>\n</template>\n```\n\n### Alephium Execute\n\nWhen creating a dApp, execution of a TxScript is probably something you will encounter. Using the AlephiumExecute component you can provide the generated Artifact & Options and will have access to a simple `execute` function. Managing signer/provider will be handled behind the scenes. a set of events will be emitted so that you can easily track transaction status\n\n```html\n<script setup>\n  import { Withdraw } from \"../artifacts\";\n\n  const fields = {\n    initialFields: {},\n    attoAlphAmount: DUST_AMOUNT,\n  };\n\n  function handleNewTransaction(txId: string) {\n    //\n  }\n  function handleConfirmedTransaction(txId: string) {\n    //\n  }\n  function handleFailedTransaction(txId: string) {\n    //\n  }\n</script>\n\n<template>\n  <AlephiumExecute\n    :txScript=\"Withdraw\"\n    :fields=\"fields\"\n    v-slot=\"{ execute }\"\n    @txInitiated=\"handleNewTransaction\"\n    @txConfirmed=\"handleConfirmedTransaction\"\n    @txFailed=\"handleFailedTransaction\"\n  >\n    <button @click=\"execute\">Withdraw</button>\n  </AlephiumExecute>\n</template>\n```\n\n## Hooks\n\nIf you require access to the blockchain from within `<script />` tags, a set of hooks are also provided for more raw access. These are what power the above components and are capable of managing more advanced use-cases when needed.\n\n```ts\nimport { useConnect, useAccount, useProvider } from \"@alphpro/web3-vue\";\n\nconst { connect, disconnect, autoConnect } = useConnect();\nconst { account, balances, fetchBalances } = useAccount();\nconst { getProvider } = useProvider();\n```\n\n## Tips & Troubleshooting\n\n### Balances\n\n1. Balances will be fetched automatically on connection, and refreshed after every successful transaction. Generally you shouldn't need to manually fetch balances, however in some scenarios it may be desired and can be done by simply calling `fetchBalances` from `useAccount()`\n\n2. access to the reactive `provider` is available from `useProvider()` however due to management of vue internals, in some cases this will cause issues. The solution is to call the `getProvider()` getter on demand when needed, and this will return the users untouched provider which you can sign transactions manually for example.\n\n### Buffer is not defined\nInstall Buffer\n```sh\nbun add buffer\n```\nAdd it to your index.html\n```ts\nimport { Buffer } from \"buffer\";\nwindow.Buffer = Buffer;\n```","readmeFilename":"README.md"}