{"_id":"@amax/amaxwallet-adapter-react-ui","name":"@amax/amaxwallet-adapter-react-ui","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@amax/amaxwallet-adapter-react-ui","version":"1.1.0","description":"A set of out-of-the-box components to make it easy to interact with Tron wallets.","keywords":["armoniax","amaxScan","react-ui"],"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"},"peerDependencies":{"react":"*","react-dom":"*"},"dependencies":{"@amax/abstract-adapter":"^1.1.0","@amax/amaxwallet-adapter-react-hooks":"^1.1.0"},"devDependencies":{"@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^13.4.0","@testing-library/user-event":"^13.5.0","@types/jest":"^27.5.2","@types/react":"^18.0.26","@types/react-dom":"^18.0.0","@types/testing-library__jest-dom":"^5.14.5","jest":"^29.3.1","jest-environment-jsdom":"^29.3.1","jest-localstorage-mock":"^2.4.22","react":"^18.0.0","react-dom":"^18.0.0","shx":"^0.3.4"},"scripts":{"clean":"shx mkdir -p lib && shx rm -rf lib","package":"shx echo '{ \"type\": \"commonjs\" }' > lib/cjs/package.json","test":"jest"},"bugs":{"url":"https://github.com/armoniax/amaxjs/issues"},"homepage":"https://github.com/armoniax/amaxjs/tree/main#readme","_id":"@amax/amaxwallet-adapter-react-ui@1.1.0","_integrity":"sha512-OeMZLRL7bYTY/JWY/czA99VhhrL3eRjA3sVtLN7l3pREGMAugQGO61Xcet7+u17b/8gBbng+hgVkpbeLQkCE3g==","_resolved":"/private/var/folders/3f/51_3qrs158j01hsttw5lg5940000gn/T/6227fd8059660bfff446eebd856a081d/amax-amaxwallet-adapter-react-ui-1.1.0.tgz","_from":"file:amax-amaxwallet-adapter-react-ui-1.1.0.tgz","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-OeMZLRL7bYTY/JWY/czA99VhhrL3eRjA3sVtLN7l3pREGMAugQGO61Xcet7+u17b/8gBbng+hgVkpbeLQkCE3g==","shasum":"68fff791652c4aaea1a7fad9c080db35fd20fc8a","tarball":"https://registry.npmjs.org/@amax/amaxwallet-adapter-react-ui/-/amaxwallet-adapter-react-ui-1.1.0.tgz","fileCount":97,"unpackedSize":121969,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGx7o/MAgQJc0D+UkDnr83NHkeJqNSGbawDeHiPbAYMoAiATMM0Pw3e97e1fjXjS26FIZ4uYSKCoIXIRFHK2wl0mKg=="}]},"_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-react-ui_1.1.0_1718853792264_0.6526042586353988"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-20T03:23:12.122Z","1.1.0":"2024-06-20T03:23:12.428Z","modified":"2024-06-20T03:23:12.744Z"},"maintainers":[{"name":"armoniametachain","email":"aplink2022@gmail.com"}],"description":"A set of out-of-the-box components to make it easy to interact with Tron wallets.","homepage":"https://github.com/armoniax/amaxjs/tree/main#readme","keywords":["armoniax","amaxScan","react-ui"],"repository":{"type":"git","url":"git+https://github.com/armoniax/amaxjs.git#main"},"author":{"name":"armoniax"},"bugs":{"url":"https://github.com/armoniax/amaxjs/issues"},"license":"MIT","readme":"# @amax/amaxwallet-adapter-react-ui\n\n`@amax/amaxwallet-adapter-react-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-react-ui` depends `@amax/amaxwallet-adapter-react-hooks` to work. So developers must wrap `App` content within the `WalletProvider`.\n\n## Installation\n\n```bash\nnpm install @amax/amaxwallet-adapter-react-ui @amax/amaxwallet-adapter-react-hooks @amax/abstract-adapter @amax/amaxwallet-adapters\n\n# or pnpm install @amax/amaxwallet-adapter-react-ui @amax/amaxwallet-adapter-react-hooks @amax/abstract-adapter @amax/amaxwallet-adapters\n\n# or yarn install @amax/amaxwallet-adapter-react-ui @amax/amaxwallet-adapter-react-hooks @amax/abstract-adapter @amax/amaxwallet-adapters\n```\n\n## Usage\n\n`@amax/amaxwallet-adapter-react-ui` provide a `Select Wallet Modal` by `Context.Provider`. 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\n```jsx\nimport { useWallet, WalletProvider } from '@amax/amaxwallet-adapter-react-hooks';\nimport { WalletModalProvider, WalletActionButton } from '@amax/amaxwallet-adapter-react-ui';\n// This is necessary to keep style normal.\nimport '@amax/amaxwallet-adapter-react-ui/style.css';\nimport { WalletDisconnectedError, WalletError, WalletNotFoundError } from '@amax/abstract-adapter';\nimport toast, { Toaster } from 'react-hot-toast';\n\nfunction App() {\n    // here use `react-hot-toast` npm package to notify user what happened\n    function onError(e: WalletError) {\n        if (e instanceof WalletNotFoundError) {\n            toast.error(e.message);\n        } else if (e instanceof WalletDisconnectedError) {\n            toast.error(e.message);\n        } else toast.error(e.message);\n    }\n    return (\n        <WalletProvider onError={onError}>\n            <WalletModalProvider>\n                <ConnectComponent></ConnectComponent>\n                <Profile></Profile>\n            </WalletModalProvider>\n        </WalletProvider>\n    );\n}\nfunction ConnectComponent() {\n    const { connect, disconnect, select, connected } = useWallet();\n    return <WalletActionButton></WalletActionButton>;\n}\nfunction Profile() {\n    const { account, connected, wallet } = useWallet();\n    return (\n        <div>\n            <p>\n                <span>Connection Status:</span> {connected ? 'Connected' : 'Disconnected'}\n            </p>\n            <p>\n                <span>Your selected Wallet:</span> {wallet?.adapter.name}\n            </p>\n            <p>\n                <span>Your Account:</span> {JSON.stringify(account)}\n            </p>\n        </div>\n    );\n}\n```\n\n## `WalletModalProvider` and `useWalletModal`\n\n`WalletModalProvider` provide a `Select Wallet Modal` by `Context.Provider`. The modal can be controled by `useWalletModal`.\n\n```jsx\nfunction App() {\n    const { visible, setVisible } = useWalletModal();\n    function toggle() {\n        setVisible((visible) => !visible);\n    }\n    return (\n        <div>\n            <button onClick={toggle}>{visible ? 'Close Modal' : 'Open Modal'}</button>\n        </div>\n    );\n}\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"}