{"_id":"@amax/amaxwallet-adapter-vue-hooks","_rev":"1-6da9d7d57c9fc7fa8c0c265a805dd20c","name":"@amax/amaxwallet-adapter-vue-hooks","description":"A `useWallet()` hook to make it easy to interact with Tron wallets.","dist-tags":{"latest":"1.1.1"},"versions":{"1.1.0":{"name":"@amax/amaxwallet-adapter-vue-hooks","version":"1.1.0","keywords":["armoniax","amaxScan","vue-hooks"],"author":{"name":"armoniax"},"license":"MIT","_id":"@amax/amaxwallet-adapter-vue-hooks@1.1.0","maintainers":[{"name":"armoniametachain","email":"aplink2022@gmail.com"}],"homepage":"https://github.com/armoniax/amaxjs/tree/main#readme","bugs":{"url":"https://github.com/armoniax/amaxjs/issues"},"dist":{"shasum":"e3a71bae63a6efd9e619ddb8a36b0a22ddaa5af5","tarball":"https://registry.npmjs.org/@amax/amaxwallet-adapter-vue-hooks/-/amaxwallet-adapter-vue-hooks-1.1.0.tgz","fileCount":33,"integrity":"sha512-k2zij64X6B1IAxcjwNeVMcN12orhz+AMGwSzipdRSSxuE/OlLUYcVDIIu2Us+vvRxi9Qng0gkhSdLdgulKu2jA==","signatures":[{"sig":"MEQCIAOGGMCDMmSTAinEQnIFjjzJiajghmd69hu50XwA1AK6AiAxfFfhBUFU0ro6LyUSHlW3nXM594Bw6kkAWiR2AW2GuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79990},"main":"./lib/cjs/index.js","type":"module","_from":"file:amax-amaxwallet-adapter-vue-hooks-1.1.0.tgz","types":"./lib/types/index.d.ts","module":"./lib/esm/index.js","engines":{"node":">=16","pnpm":">=7"},"exports":{"types":"./lib/types/index.d.ts","import":"./lib/esm/index.js","require":"./lib/cjs/index.js"},"scripts":{"test":"vitest run","clean":"shx mkdir -p lib && shx rm -rf lib","package":"shx echo '{ \"type\": \"commonjs\" }' > lib/cjs/package.json"},"_npmUser":{"name":"armoniametachain","email":"aplink2022@gmail.com"},"_resolved":"/private/var/folders/3f/51_3qrs158j01hsttw5lg5940000gn/T/8098ee025f16968a951d9b7c3115ce61/amax-amaxwallet-adapter-vue-hooks-1.1.0.tgz","_integrity":"sha512-k2zij64X6B1IAxcjwNeVMcN12orhz+AMGwSzipdRSSxuE/OlLUYcVDIIu2Us+vvRxi9Qng0gkhSdLdgulKu2jA==","repository":{"url":"git+https://github.com/armoniax/amaxjs.git#main","type":"git"},"_npmVersion":"10.2.3","description":"A `useWallet()` hook to make it easy to interact with Tron wallets.","directories":{},"sideEffects":false,"_nodeVersion":"20.10.0","dependencies":{"@amax/abstract-adapter":"^1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"shx":"^0.3.4","vue":"^3.4.29","jsdom":"^23.2.0","vitest":"^1.6.0","@vue/test-utils":"^2.4.6"},"_npmOperationalInternal":{"tmp":"tmp/amaxwallet-adapter-vue-hooks_1.1.0_1718853792147_0.862321592450239","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@amax/amaxwallet-adapter-vue-hooks","version":"1.1.1","description":"A `useWallet()` hook to make it easy to interact with Tron wallets.","keywords":["armoniax","amaxScan","vue-hooks"],"author":{"name":"armoniax"},"repository":{"type":"git","url":"git+https://github.com/armoniax/amaxjs.git#main"},"license":"MIT","type":"module","sideEffects":false,"engines":{"node":">=16","pnpm":">=7"},"main":"./lib/cjs/index.js","module":"./lib/esm/index.js","types":"./lib/types/index.d.ts","exports":{"require":"./lib/cjs/index.js","import":"./lib/esm/index.js","types":"./lib/types/index.d.ts"},"publishConfig":{"access":"public"},"dependencies":{"@amax/abstract-adapter":"^1.1.0"},"devDependencies":{"@vue/test-utils":"^2.4.6","jsdom":"^23.2.0","shx":"^0.3.4","vitest":"^1.6.0","vue":"^3.4.29"},"scripts":{"clean":"shx mkdir -p lib && shx rm -rf lib","package":"shx echo '{ \"type\": \"commonjs\" }' > lib/cjs/package.json","test":"vitest run"},"bugs":{"url":"https://github.com/armoniax/amaxjs/issues"},"homepage":"https://github.com/armoniax/amaxjs/tree/main#readme","_id":"@amax/amaxwallet-adapter-vue-hooks@1.1.1","_integrity":"sha512-POKoA0DUbhn6W9wbUZUxkoM4svZimMSXz5B9o38lcpMokMy+/KbT/VwII88uk7Dj1/GNagsKu+bl+26czkRcBw==","_resolved":"/private/var/folders/3f/51_3qrs158j01hsttw5lg5940000gn/T/3e9f5bfc90a5460e0852191b51ba8c2b/amax-amaxwallet-adapter-vue-hooks-1.1.1.tgz","_from":"file:amax-amaxwallet-adapter-vue-hooks-1.1.1.tgz","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-POKoA0DUbhn6W9wbUZUxkoM4svZimMSXz5B9o38lcpMokMy+/KbT/VwII88uk7Dj1/GNagsKu+bl+26czkRcBw==","shasum":"7c057ce5ce793d5773fda51799578686904a0e75","tarball":"https://registry.npmjs.org/@amax/amaxwallet-adapter-vue-hooks/-/amaxwallet-adapter-vue-hooks-1.1.1.tgz","fileCount":33,"unpackedSize":80475,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTkPysBfFAlkXXGyRiVhAO/mBl1BonqP5jxLMG9N08nAiEAzdU/g5bYBXBFohGz4Q9cwMkM0rPPAMIp0VwFqBjkgPo="}]},"_npmUser":{"name":"armoniametachain","email":"aplink2022@gmail.com"},"directories":{},"maintainers":[{"name":"armoniametachain","email":"aplink2022@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amaxwallet-adapter-vue-hooks_1.1.1_1718871817019_0.9091924485417924"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-20T03:23:12.057Z","modified":"2024-06-20T08:23:37.410Z","1.1.0":"2024-06-20T03:23:12.288Z","1.1.1":"2024-06-20T08:23:37.202Z"},"maintainers":[{"name":"armoniametachain","email":"aplink2022@gmail.com"}],"author":{"name":"armoniax"},"repository":{"type":"git","url":"git+https://github.com/armoniax/amaxjs.git#main"},"keywords":["armoniax","amaxScan","vue-hooks"],"license":"MIT","homepage":"https://github.com/armoniax/amaxjs/tree/main#readme","bugs":{"url":"https://github.com/armoniax/amaxjs/issues"},"readme":"# @amax/amaxwallet-adapter-vue-hooks\n\n`@amax/amaxwallet-adapter-vue-hooks` provides a `useWallet()` hook which will make it easy to \"Connect Wallet\" and listen to the state change for developers.\n\n## Installation\n\n```bash\nnpm install @amax/amaxwallet-adapter-vue-hooks @amax/abstract-adapter @amax/amaxwallet-adapters\n# or pnpm install @amax/amaxwallet-adapter-vue-hooks @amax/abstract-adapter @amax/amaxwallet-adapters\n# or yarn install @amax/amaxwallet-adapter-vue-hooks @amax/abstract-adapter @amax/amaxwallet-adapters\n```\n\n## Usage\n\n`@amax/amaxwallet-adapter-vue-hooks` uses [`Provide / Inject ` in Vue](https://vuejs.org/guide/components/provide-inject.html) to maintain a shared data. So developers need to wrap `App` content within the `WalletProvider`.\n\nYou can provide a `onError` callback to handle various errors such as `WalletConnectionError`, `WalletNotFoundError`.\n\nHere is a [Demo project](https://github.com/armoniax/amaxjs/tree/main/packages/amaxwallet-adapter/demos/vue-ui/vite-app);\n\n```html\n<script setup>\n    import { defineComponent, h } from 'vue';\n    import { WalletProvider, useWallet } from '@amax/amaxwallet-adapter-vue-hooks';\n    import { ArmodilloAdapter } from '@amax/amaxwallet-adapters';\n    const armodilloAdapter = new ArmodilloAdapter();\n\n    const adapters = [armodilloAdapter];\n\n    function onConnect(address) {\n        console.log('[wallet hooks] onConnect: ', address);\n    }\n    function onDisconnect() {\n        console.log('[wallet hooks] onDisconnect');\n    }\n\n    const VueComponent = defineComponent({\n        setup() {\n            // Here you can use `useWallet` API\n            const { wallet, connect, signMessage, signTransaction } = useWallet();\n            return () =>\n                h('div', [\n                    h('div', { style: 'color: #222;' }, `Current Adapter: ${(wallet && wallet.adapter.name) || ''}`),\n                ]);\n        },\n    });\n</script>\n\n<template>\n    <WalletProvider :adapters=\"adapters\" @connect=\"onConnect\" @disconnect=\"onDisconnect\">\n        <VueComponent />\n    </WalletProvider>\n</template>\n```\n\n## `WalletProvider`\n\n`WalletProvider` and `useWallet` work together. `WalletProvider` use `provide()` in Vue to provide a shared state. `useWallet` use `inject()` to get the shared state. Developers need to wrap application components with `WalletProvider`.\n\n```html\n<html>\n    <WalletProvider>/* here is application components */</WalletProvider>\n</html>\n<script setup>\n    import { useWallet, WalletProvider } from '@amax/amaxwallet-adapter-vue-hooks';\n</script>\n```\n\n### Props\n\n#### adapters:\n\n-   Required: `false`\n-   Type: `Adapter[]`\n-   Default: `[ new ArmodilloAdapter() ]`\n\nUsed to specify what wallet adapters are supported. All wallet adapters can be imported from `@amax/amaxwallet-adapters` package or their standalone package.\n\n-   Example\n    ```html\n    <template>\n        <WalletProvider :adapters=\"adapters\">/* here is application components */</WalletProvider>\n    </template>\n    <script setup>\n        import { useWallet, WalletProvider } from '@amax/amaxwallet-adapter-vue-hooks';\n        import { ArmodilloAdapter } from '@amax/amaxwallet-adapters';\n        const adapters = [new ArmodilloAdapter()];\n    </script>\n    ```\n\n#### autoConnect\n\n-   Required: `false`\n-   Type: `boolean`\n-   Default: `true`\n\nWhether connect to the specified wallet automatically after a wallet is selected.\n\n#### disableAutoConnectOnLoad\n\n-   Required: `false`\n-   Type: `boolean`\n-   Default: `false`\n\nWhether automatically connect to current selected wallet after the page is loaded when `autoConnect` enabled.\nIf you don't want to connect the wallet when page is first loaded, set `disableAutoConnectOnLoad: true`.\n\n#### localStorageKey\n\n-   Required: `false`\n-   Type: `string`\n-   Default: `amaxAdapterName`\n\nSpecified the key used to cache wallet name in `localStorage`. When user select a wallet, applications will cache the wallet name to localStorage.\n\n#### Events\n\nYou can provide event handlers for listen adapter events, such as `connect`,`disconnect`,`accountsChanged`. Available events and their types are as follows:\n\n-   `readyStateChanged: (readyState: 'Found' | 'NotFound') => void`: Emits when current adapter emits `readyStateChanged` event.\n-   `connect: (address: string) => void`: Emits when current adapter emits `connect` event.\n-   `disconnect: () => void`: Emits when current adapter emits `disconnect` event.\n-   `accountsChanged: (newAddress: string; preAddress?: string) => void`: Emits when current adapter emits `accountsChanged` event.\n-   `error: (error) => void`: Emits when occurs error in methods calls.\n\nAn event named `adapterChanged` is also avaliable to get noticed when selected adapter is changed.\n\n-   `adapterChanged: (adapter: Adapter | undefined) => void`: Called when current adapter is changed.\n\nHere is an example:\n\n    ```html\n    <template>\n        <WalletProvider :adapters=\"adapters\" @accountsChanged=\"onAccountsChanged\">/* here is application components */</WalletProvider>\n    </template>\n    <script setup>\n        import { useWallet, WalletProvider } from '@amax/amaxwallet-adapter-vue-hooks';\n        import { ArmodilloAdapter } from '@amax/amaxwallet-adapters';\n        const adapters = [new ArmodilloAdapter()];\n\n        function onAccountsChanged(curAddress, preAddress) {}\n    </script>\n    ```\n\n## `useWallet()`\n\n`useWallet` is a Vue hook providing a set of properties and methods which can be used to select and connect wallet, get wallet state and so on.\n\n> `useWallet()` must be used in the descendant components of `WalletProvider`!\n\n### ReturnedValue\n\n#### `autoConnect`\n\n-   Type: `ComputedRef<boolean>`\n    Synchronous with `autoConnect` property passed to `WalletProvider`.\n\n#### `disableAutoConnectOnLoad`\n\n-   Type: `ComputedRef<boolean>`\n    Synchronous with `disableAutoConnectOnLoad` property passed to `WalletProvider`.\n\n#### `wallet`\n\n-   Type: `ComputedRef<Wallet | null>`\n    The wallet current selected. If no wallet is selected, the value is `null`.\n\n`Wallet` is defined as follow:\n\n```typescript\ninterface Wallet {\n    adapter: Adapter; // wallet adapter\n    state: AdapterState;\n}\nenum AdapterState {\n    NotFound = 'NotFound',\n    Disconnect = 'Disconnected',\n    Connected = 'Connected',\n}\n```\n\n#### `account`\n\n-   Type: `ComputedRef<Account | null>`\n    Account of current selected wallet. If no wallet is selected, the value is `null`.\n\n#### `wallets`\n\n-   Type: `Ref<Wallet[]>`\n    Wallet list based on current used adapters when initial `WalletProvider`.\n\n#### `connecting`\n\n-   Type: `Ref<boolean>`\n    Indicate if is connecting to the wallet.\n\n#### `connected`\n\n-   Type: `Ref<boolean>`\n    Indicate if is connected with the wallet.\n\n#### `disconnecting`\n\n-   Type: `Ref<boolean>`\n    Indicate if is connecting to the wallet.\n\n### Methods\n\n#### select\n\n-   Type: `(walletAdapterName: AdapterName) => void`\n    Select a wallet by walletAdapterName. \n\n#### connect\n\n-   Type: `() => Promise<void>`\n    Connect to current selected wallet.\n\n#### disconnect\n\n-   Type: `() => Promise<void>`\n    Disconnect from current selected wallet.\n\n#### transact\n\n-   Type: `(actions: Actions[]) => Promise<TransactResult>;\n    Push a transaction.\n\n#### signMessage\n\n-   Type: `(message: string) => Promise<string>`\n    Sign a message.\n\n### Example\n\n```html\n<template>\n    <div>\n        <button type=\"button\" @click=\"() => select('Armodillo')\">Select Armodillo</button>\n        <button type=\"button\" :disabled=\"connected\" @click=\"connect\">Connect</button>\n        <button type=\"button\" :disabled=\"!connected\" @click=\"disconnect\">Disconnect</button>\n    </div>\n</template>\n<script setup>\n    import { useWallet } from '@amax/amaxwallet-adapter-vue-hooks';\n    import { AdapterName } from '@amax/abstract-adapter';\n\n    const { connect, disconnect, select, connected } = useWallet();\n</script>\n```\n","readmeFilename":"README.md"}