{"_id":"@amax/amaxwallet-adapter-vue-ui","_rev":"1-217c54c8c602ef2a71f75efb242ff875","name":"@amax/amaxwallet-adapter-vue-ui","description":"A set of out-of-the-box components to make it easy to interact with Tron wallets.","dist-tags":{"latest":"1.1.1"},"versions":{"1.1.0":{"name":"@amax/amaxwallet-adapter-vue-ui","version":"1.1.0","keywords":["armoniax","amaxScan"],"author":{"name":"armoniax"},"license":"MIT","_id":"@amax/amaxwallet-adapter-vue-ui@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":"5629d7ca81d3c981c73910a3d2eccdf9abc0a5c9","tarball":"https://registry.npmjs.org/@amax/amaxwallet-adapter-vue-ui/-/amaxwallet-adapter-vue-ui-1.1.0.tgz","fileCount":121,"integrity":"sha512-3JoLflF1/QsMZN4EvHitDTaiAk/MSk6YtpJhx4S8h5ZiA+ahmwDsAHkFiFDkZoKIk9KdYzrn9tOjrT1h0BTF2Q==","signatures":[{"sig":"MEUCIC4Sb5fqCpGLu9AKFv/AygzOkWm+wY3ePVF46lqhYL6gAiEAgTsdpK4+R+P+2AFG6yPJPC3sUEPLiIaQKJQ8ezvDVO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":373248},"main":"./lib/cjs/index.js","type":"module","_from":"file:amax-amaxwallet-adapter-vue-ui-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"},"./style.css":"./style.css"},"scripts":{"test":"vitest run","build":"pnpm build:cjs & pnpm build:esm & pnpm build:types","clean":"shx mkdir -p lib && shx rm -rf lib","watch":"pnpm build:cjs -w & pnpm build:esm -w & pnpm build:types --watch","package":"shx echo '{ \"type\": \"commonjs\" }' > lib/cjs/package.json","build:cjs":"babel ./src --out-dir lib/cjs --extensions .tsx,.ts --config-file ./babel.config.cjs.json","build:esm":"babel ./src --out-dir lib/esm --extensions .tsx,.ts --config-file ./babel.config.esm.json","build:types":"tsc -p tsconfig.esm.json"},"_npmUser":{"name":"armoniametachain","email":"aplink2022@gmail.com"},"_resolved":"/private/var/folders/3f/51_3qrs158j01hsttw5lg5940000gn/T/49804a88fcd5889c273d70e38e5e8af7/amax-amaxwallet-adapter-vue-ui-1.1.0.tgz","_integrity":"sha512-3JoLflF1/QsMZN4EvHitDTaiAk/MSk6YtpJhx4S8h5ZiA+ahmwDsAHkFiFDkZoKIk9KdYzrn9tOjrT1h0BTF2Q==","repository":{"url":"git+https://github.com/armoniax/amaxjs.git#main","type":"git"},"_npmVersion":"10.2.3","description":"A set of out-of-the-box components to make it easy to interact with Tron wallets.","directories":{},"sideEffects":false,"_nodeVersion":"20.10.0","dependencies":{"@amax/abstract-adapter":"^1.1.0","@amax/amaxwallet-adapter-vue-hooks":"^1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"shx":"^0.3.4","vue":"^3.4.29","vite":"^5.3.1","jsdom":"^23.2.0","vitest":"^1.6.0","@babel/cli":"^7.24.7","@babel/core":"^7.24.7","@vue/test-utils":"^2.4.6","@vitejs/plugin-vue":"^4.6.2","@vue/babel-plugin-jsx":"^1.2.2","@vitejs/plugin-vue-jsx":"^3.1.0","@babel/preset-typescript":"^7.24.7"},"_npmOperationalInternal":{"tmp":"tmp/amaxwallet-adapter-vue-ui_1.1.0_1718853793066_0.2404430579462209","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@amax/amaxwallet-adapter-vue-ui","version":"1.1.1","description":"A set of out-of-the-box components to make it easy to interact with Tron wallets.","keywords":["armoniax","amaxScan"],"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":{".":{"import":"./lib/esm/index.js","require":"./lib/cjs/index.js","types":"./lib/types/index.d.ts"},"./style.css":"./style.css"},"publishConfig":{"access":"public"},"dependencies":{"@amax/abstract-adapter":"^1.1.0","@amax/amaxwallet-adapter-vue-hooks":"^1.1.1"},"devDependencies":{"@babel/cli":"^7.24.7","@babel/core":"^7.24.7","@babel/preset-typescript":"^7.24.7","@vitejs/plugin-vue":"^4.6.2","@vitejs/plugin-vue-jsx":"^3.1.0","@vue/babel-plugin-jsx":"^1.2.2","@vue/test-utils":"^2.4.6","jsdom":"^23.2.0","shx":"^0.3.4","vite":"^5.3.1","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","build:types":"tsc -p tsconfig.esm.json","build:cjs":"babel ./src --out-dir lib/cjs --extensions .tsx,.ts --config-file ./babel.config.cjs.json","build:esm":"babel ./src --out-dir lib/esm --extensions .tsx,.ts --config-file ./babel.config.esm.json","build":"pnpm build:cjs & pnpm build:esm & pnpm build:types","watch":"pnpm build:cjs -w & pnpm build:esm -w & pnpm build:types --watch","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-ui@1.1.1","_integrity":"sha512-VD/UZhtb/fuFuXlJgrjHrzk61sW6qQRXPYkV/EAS2Vkguy1e0ZcDGMMYPFYEkUzM8zRBAjokZd4Gc8B1o2qU9A==","_resolved":"/private/var/folders/3f/51_3qrs158j01hsttw5lg5940000gn/T/9ba26342e3c952d80adeac800ccc9b41/amax-amaxwallet-adapter-vue-ui-1.1.1.tgz","_from":"file:amax-amaxwallet-adapter-vue-ui-1.1.1.tgz","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-VD/UZhtb/fuFuXlJgrjHrzk61sW6qQRXPYkV/EAS2Vkguy1e0ZcDGMMYPFYEkUzM8zRBAjokZd4Gc8B1o2qU9A==","shasum":"f79580f2c79ce842ef9cb0397728f918a3744879","tarball":"https://registry.npmjs.org/@amax/amaxwallet-adapter-vue-ui/-/amaxwallet-adapter-vue-ui-1.1.1.tgz","fileCount":121,"unpackedSize":372819,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHKPgwYbe0AethX3fSE7fR/PXQrNmOTRSAhu3mjkfjRhAiEAnJYypm1HV96aOgNE7iLFUyu2IWNmX6RRO2tuzBrJclo="}]},"_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-ui_1.1.1_1718871817408_0.6001249255560492"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-20T03:23:12.968Z","modified":"2024-06-20T08:23:37.842Z","1.1.0":"2024-06-20T03:23:13.276Z","1.1.1":"2024-06-20T08:23:37.588Z"},"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"],"license":"MIT","homepage":"https://github.com/armoniax/amaxjs/tree/main#readme","bugs":{"url":"https://github.com/armoniax/amaxjs/issues"},"readme":"# @amax/amaxwallet-adapter-vue-ui\n\n`@amax/amaxwallet-adapter-vue-ui` provides a set of out-of-the-box components to make it easy to select, change, connect and disconnect wallet.\n\n`@amax/amaxwallet-adapter-vue-ui` depends `@amax/amaxwallet-adapter-vue-hooks` to work. So developers must wrap `App` content within the `WalletProvider`.\n\n## Installation\n\n```bash\nnpm install @amax/amaxwallet-adapter-vue-ui @amax/amaxwallet-adapter-vue-hooks @amax/abstract-adapter @amax/amaxwallet-adapters\n\n# or pnpm install @amax/amaxwallet-adapter-vue-ui @amax/amaxwallet-adapter-vue-hooks @amax/abstract-adapter @amax/amaxwallet-adapters\n\n# or yarn install @amax/amaxwallet-adapter-vue-ui @amax/amaxwallet-adapter-vue-hooks @amax/abstract-adapter @amax/amaxwallet-adapters\n```\n\n## Usage\n\n`@amax/amaxwallet-adapter-vue-ui` provide a `Select Wallet Modal` by `provide()` in Vue. So developers must wrap `App` content within the `WalletProvider` and `WalletModalProvider`.\n\n> Note: A stylesheet must be imported to make components work fine.\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<template>\n    <WalletProvider @error=\"onError\">\n        <WalletModalProvider>\n            <WalletActionButton></WalletActionButton>\n            <Profile></Profile>\n        </WalletModalProvider>\n    </WalletProvider>\n</template>\n<script setup>\n    import { h, defineComponent } from 'vue';\n    import { useWallet, WalletProvider } from '@amax/amaxwallet-adapter-vue-hooks';\n    import { WalletModalProvider, WalletActionButton } from '@amax/amaxwallet-adapter-vue-ui';\n    // This is necessary to keep style normal.\n    import '@amax/amaxwallet-adapter-vue-ui/style.css';\n    import { WalletDisconnectedError, WalletError, WalletNotFoundError } from '@amax/abstract-adapter';\n\n    function onError(e: WalletError) {\n        if (e instanceof WalletNotFoundError) {\n            console.error(e.message);\n        } else if (e instanceof WalletDisconnectedError) {\n            console.error(e.message);\n        } else console.error(e.message);\n    }\n\n    const ConnectComponent = defineComponent({\n        setup() {\n            return () => h(WalletActionButton);\n        },\n    });\n\n    const Profile = defineComponent({\n        setup() {\n            const { wallet } = useWallet();\n            return () => h('div', `Current adapter: ${wallet?.adapter.name}`);\n        },\n    });\n</script>\n```\n\n## `WalletModalProvider` and `useWalletModal`\n\n`WalletModalProvider` provide a `Select Wallet Modal` by `provide()` in Vue. The modal can be controled by `useWalletModal`.\n\n```html\n<template>\n    <div>\n        <button @click=\"toggle\">{{visible ? 'Close Modal' : 'Open Modal'}}</button>\n    </div>\n</template>\n<script setup>\n    const { visible, setVisible } = useWalletModal();\n    function toggle() {\n        setVisible((visible) => !visible);\n    }\n</script>\n```\n\n## `WalletConnectButton`\n\nButton to connect to the selected wallet. The button is disabled when:\n\n-   no wallet is selected\n-   is connecting to wallet\n-   is connected\n-   disabled by props\n\n### Props\n\n```jsx\ntype ButtonProps = PropsWithChildren<{\n    className?: string,\n    disabled?: boolean,\n    onClick?: (e: MouseEvent<HTMLButtonElement>) => void,\n    style?: CSSProperties,\n    tabIndex?: number,\n    icon?: string,\n}>;\n```\n\n## `WalletDisconnectButton`\n\nButton to connect to the selected wallet. The button is disabled when:\n\n-   no wallet is selected\n-   is connecting to wallet\n-   disabled by props\n\n### Props\n\nSame as `WalletConnectButton`.\n\n## `WalletSelectButton`\n\nButton to open `Select Wallet Modal`.\n\n### Props\n\nSame as `WalletConnectButton`.\n\n## `WalletActionButton`\n\nButton with multiple functions including:\n\n-   Select wallet\n-   Connect to wallet\n-   Disconnect from wallet\n-   Show current selected wallet and address\n-   Copy address\n\nIt's recommended to use this component to connect wallet easily.\n\n### Props\n\nSame as `WalletConnectButton`.\n","readmeFilename":"README.md"}