{"id":20001900,"url":"https://github.com/pooltogether/wallet-connection","last_synced_at":"2025-05-04T15:33:33.258Z","repository":{"id":37991155,"uuid":"472389374","full_name":"pooltogether/wallet-connection","owner":"pooltogether","description":"PoolTogether WAGMI wrapper with extra utilities!","archived":false,"fork":false,"pushed_at":"2023-06-26T16:32:14.000Z","size":1449,"stargazers_count":6,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-23T21:42:43.607Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pooltogether.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-21T15:06:18.000Z","updated_at":"2024-04-23T21:42:43.608Z","dependencies_parsed_at":"2023-02-15T23:46:16.333Z","dependency_job_id":null,"html_url":"https://github.com/pooltogether/wallet-connection","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pooltogether%2Fwallet-connection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pooltogether%2Fwallet-connection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pooltogether%2Fwallet-connection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pooltogether%2Fwallet-connection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pooltogether","download_url":"https://codeload.github.com/pooltogether/wallet-connection/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224394184,"owners_count":17303872,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T05:19:03.869Z","updated_at":"2024-11-13T05:19:05.297Z","avatar_url":"https://github.com/pooltogether.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PoolTogether Wallet Connection\n\nPoolTogether wallet connection logic wrapping [WAGMI](wagmi.sh), React UI elements for connecting to a users wallet and utility hooks for sending and managing transactions.\n\n## 💾 \u0026nbsp; Installation\n\n```bash\nyarn add @pooltogether/wallet-connection\n```\n\n## 💾 \u0026nbsp; Installation\n\n```bash\nyarn add @pooltogether/wallet-connection\n```\n\n## 🏎️ \u0026nbsp; Quickstart\n\n`@pooltogether/wallet-connection` relies on [PoolTogether components](https://www.npmjs.com/package/@pooltogether/react-components), [WAGMI](wagmi.sh), [Ethers](https://docs.ethers.io/v5/), [react-toastify](https://www.npmjs.com/package/react-toastify) and [Jotai](https://jotai.org/).\n\nThis means you **must** do some setup in your app. Place the following at the highest point inside your react app as possible:\n\n\u003e  `@pooltogether/wallet-connection` assumes 1 instance `FullWalletConnectionButton`. This component contains the modal for wallet connection and account modal. For all other \"Connect wallet\" buttons use the function returned by `useConnectWallet`.\n\n```ts\nimport { Provider as WagmiProvider } from 'wagmi'\nimport { InjectedConnector } from 'wagmi/connectors/injected'\nimport { WalletConnectConnector } from 'wagmi/connectors/walletConnect'\nimport { WalletLinkConnector } from 'wagmi/connectors/walletLink'\nimport { Provider as JotaiProvider } from 'jotai'\nimport { ThemeContext, ThemeContextProvider } from '@pooltogether/react-components'\nimport { ToastContainer } from 'react-toastify'\n\nimport { initProviderApiKeys, FullWalletConnectionButton } from '@pooltogether/wallet-connection'\n\n// Initialize provider API keys for the best experience\ninitProviderApiKeys(providerApiKeys)\n\n// Styles\nimport 'react-toastify/dist/ReactToastify.css'\nimport 'react-spring-bottom-sheet/dist/style.css'\n\n// chains are Chains from WAGMI that your app supports\nconst chains = [getChain(CHAIN_ID.mainnet), getChain(CHAIN_ID.polygon)]\n\n// connectors are Connectors from WAGMI that you want your app to connect to\nconst connectors = ({ chainId }) =\u003e {\n  return [\n    new InjectedConnector({ chains, options: {} }),\n    new WalletConnectConnector({\n      chains,\n      options: {\n        chainId: chainId || CHAIN_ID.mainnet,\n        rpc: getRpcUrls(chains.map((chain) =\u003e chain.id), providerApiKeys),\n        bridge: 'https://pooltogether.bridge.walletconnect.org/',\n        qrcode: true\n      }\n    }),\n    new WalletLinkConnector({\n      chains,\n      options: {\n        appName: 'PoolTogether',\n        jsonRpcUrl: getRpcUrl(chainId || CHAIN_ID.mainnet, providerApiKeys)\n      }\n    })\n  ]\n}\n\nconst PoolTogetherWalletProviders = (props) =\u003e (\n  \u003cWagmiProvider\n    autoConnect\n    connectorStorageKey='pooltogether-wallet'\n    connectors={connectors}\n    provider={({ chainId }) =\u003e\n      chainId ? getReadProvider(chainId, providerApiKeys) : getReadProvider(CHAIN_ID.mainnet, providerApiKeys)\n    }\n  \u003e\n    \u003cJotaiProvider\u003e\n      \u003cThemeContextProvider\u003e\n        \u003cThemedToastContainer /\u003e\n        \u003cFullWalletConnectionButton chains={chains} TosDisclaimer='I agree to TOS' /\u003e\n        {props.children}\n      \u003c/ThemeContextProvider\u003e\n    \u003c/JotaiProvider\u003e\n  \u003c/WagmiProvider\u003e\n)\n\n\nconst ThemedToastContainer = () =\u003e {\n  const { theme } = useContext(ThemeContext)\n  return (\n    \u003cToastContainer\n      limit={3}\n      style={{ zIndex: '99999' }}\n      position={'bottom-right'}\n      autoClose={7000}\n      theme={theme}\n    /\u003e\n  )\n}\n```\n\nReact Components\n`FullWalletConnectionButton` can be rendered anywhere in your app to allow users to connect their wallet to your app.\n`NetworkSelectionButton` can be rendered anywhere in your app to allow users to connect their wallet to a specific network.\n\nTransactions\n`useSendTransaction` can be used to send a transaction to the blockchain using the users connected wallet. Additionally it stores transaction data in local storage and provides simple hooks for reacting to different events throughout the transactions lifecycle.\n`useTransaction` can be used to read a transaction from local state.\n`useUsersTransactions`\n`useUsersPendingTransactions`\n`useUpdateStoredPendingTransactions`\n\nWallet\n`useUsersAddress`\n`useWalletChainId`\n`useIsWalletOnChainId`\n\nUtilities\n`getChain`\n`getChainAliasByChainId`\n`getChainIdByChainAlias`\n`getChainNameByChainId`\n`getReadProvider`\n`getReadProviders`\n`getRpcUrl`\n`getRpcUrls`\n\nConstants\n`CHAIN_ID`\n`ALL_CHAINS`\n`TransactionState`\n`TransactionStatus`\n\nTypes\n`ProviderApiKeys`\n`Transaction`\n`TransactionCallbacks`\n\n\n## 💻 \u0026nbsp; Developer Experience\n\n### Commands\n\n```bash\nyarn start\n```\n\nThis builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.\n\nThen run either Storybook or the example playground:\n\n### Storybook\n\nRun inside another terminal:\n\n```bash\nyarn storybook\n```\n\nThis loads the stories from `./stories`.\n\n\u003e NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.\n\n#### Example\n\nThen run the example inside another:\n\n```bash\ncd example\nnpm i # or yarn to install dependencies\nnpm start # or yarn start\n```\n\nThe default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).\n\nTo do a one-off build, use `npm run build` or `yarn build`.\n\nTo run tests, use `npm test` or `yarn test`.\n\n### Configuration\n\nCode quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.\n\n### Jest\n\nJest tests are set up to run with `npm test` or `yarn test`.\n\n### Bundle analysis\n\nCalculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.\n\n## Continuous Integration\n\n### GitHub Actions\n\n- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix\n- `size` which comments cost comparison of your library on every pull request using [size-limit](https://github.com/ai/size-limit)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpooltogether%2Fwallet-connection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpooltogether%2Fwallet-connection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpooltogether%2Fwallet-connection/lists"}