\nLibrary that takes care of connecting to different web3 wallets.\n
\n\n \n\n| Statements | Branches | Functions | Lines |\n| --------------------------- | ----------------------- | ------------------------- | ----------------- |\n|  |  |  |  |\n\n# Installation\n\n1. Run `yarn`\n\n# Run\n\n1. Run `yarn storybook`\n\n# Contributing\n\n## Branching model\n\nIn the UI world you should branch off `main` when building a feature.\nSo just go on `main`, pull latest and then branch out of it.\nCreate your PR against `main`.\n\nBranch naming is quite standard, we tried to duplicate what we have done for\nthe committing messages, following standard commit message format: [https://www.conventionalcommits.org/en/v1.0.0/].\n\nBranch names can start with the prefixes found in the regex under '.husky/pre-commit'.\n\n### Short summary:\n\n**DEVELOPING**\n* create a branch from `main`, follow the naming convention for a branch\n* wait for approval, resolve comments and make sure you have a green build\n* merge to `main` using **Rebase and merge**\n\n## Tools\n\nHelpful tools to install to improve your development life!\n\n* [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)\n\n# How to Connect\n## Prerequisites\n\nMake sure the package and peerDependencies are installed:\n\n```shell\nyarn add @voltz-protocol/react-web3-wallet viem wagmi\n```\n\n## Step 1: Configuring Connectors\n\nFirst, we create a new config set up with the Injected (i.e. MetaMask), WalletConnect, and Coinbase Wallet connectors.\n\n```tsx\nimport { setup, WalletConfig } from '@voltz-protocol/react-web3-wallet';\n\n// Set up wagmi config\nconst config = setup({\n supportedChains: ['mainnet', 'goerli'],\n supportedWallets: [{\n type: 'metamask',\n }, {\n type: 'wallet-connect',\n projectId: process.env.WALLET_CONNECT_PROJECT_ID,\n }, {\n type: 'coinbase',\n appName: process.env.COINBASE_APP_NAME,\n },],\n});\n\n// Pass config to React Context Provider\nfunction App() {\n return (\n \n \n \n )\n}\n```\n\n\n## Step 2: Connect account and show it\n\nLet's create the needed `Profile` component. Note this component uses `brokoli-ui` components so make sure you have a `ThemeProvider` \nwrapping the `brokoli-ui` components\n\n```tsx\nimport { Button, ThemeProvider, Typography } from 'brokoli-ui';\nimport React, { useMemo } from 'react';\nimport { useWalletAccount, useWalletConnect } from '@voltz-protocol/react-web3-wallet';\n\n// Pass config to React Context Provider\nfunction Profile() {\n const { connect, connectors, error } = useWalletConnect();\n const { disconnect, ensName, ensAvatar, address, connector, isConnected } = useWalletAccount();\n if (isConnected) {\n return (\n
![\"Voltz\"](\"./docs/logo.png\"){kind=logo}
\n