https://github.com/brianseong99/sygma-wagmi

https://github.com/brianseong99/sygma-wagmi

Last synced: 25 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/brianseong99/sygma-wagmi
• Owner: BrianSeong99
• License: mit
• Created: 2023-11-17T05:55:44.000Z (about 1 year ago)
• Default Branch: sygma
• Last Pushed: 2024-02-01T13:25:51.000Z (12 months ago)
• Last Synced: 2024-11-08T13:56:18.114Z (3 months ago)
• Language: TypeScript
• Size: 15 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

    

  





  React Hooks for Ethereum





  

    

      

      

    

  

  

    

      

      

    

  

  

    

      

      

    

  

  

    

      

      

    

  






## Features

- 🚀 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc.

- 💼 Built-in wallet connectors for MetaMask, WalletConnect, Coinbase Wallet, Injected, and more

- 👟 Caching, request deduplication, multicall, batching, and persistence

- 🌀 Auto-refresh data on wallet, block, and network changes

- 🦄 TypeScript ready (infer types from ABIs and EIP-712 Typed Data)

- 📦 Command-line interface for managing ABIs and code generation

- 🌳 Test suite running against forked Ethereum network

...and a lot more.

## Documentation

For full documentation and examples, visit [wagmi.sh](https://wagmi.sh).

## Installation

Install wagmi and its [viem](https://viem.sh) peer dependency.

```bash

npm install wagmi viem

```

## Quick Start

Connect a wallet in under 60 seconds. LFG.

```tsx

import { WagmiConfig, createConfig, mainnet } from 'wagmi'

import { createPublicClient, http } from 'viem'

const config = createConfig({

  autoConnect: true,

  publicClient: createPublicClient({

    chain: mainnet,

    transport: http(),

  }),

})

function App() {

  return (

    

      

    

  )

}

```

```tsx

import { useAccount, useConnect, useDisconnect } from 'wagmi'

import { InjectedConnector } from 'wagmi/connectors/injected'

function Profile() {

  const { address } = useAccount()

  const { connect } = useConnect({

    connector: new InjectedConnector(),

  })

  const { disconnect } = useDisconnect()

  if (address)

    return (

      


        Connected to {address}

         disconnect()}>Disconnect

      

    )

  return  connect()}>Connect Wallet

}

```


In this example, we create a wagmi `config` and pass it to the `WagmiConfig` React Context. The config is set up to use viem's Public Client and automatically connect to previously connected wallets.

Next, we use the `useConnect` hook to connect an injected wallet (e.g. MetaMask) to the app. Finally, we show the connected account's address with `useAccount` and allow them to disconnect with `useDisconnect`.

We've only scratched the surface for what you can do with wagmi!

—

Check out [RainbowKit](https://rainbowkit.com/docs/introduction), [ConnectKit](https://docs.family.co/connectkit?utm_source=wagmi-dev) or [Web3Modal](https://web3modal.com) to get started with pre-built interface on top of wagmi for managing wallet connections.

## Community

Check out the following places for more wagmi-related content:

- Join the [discussions on GitHub](https://github.com/wagmi-dev/wagmi/discussions)

- Follow [@wagmi_sh](https://twitter.com/wagmi_sh) on Twitter for project updates

- Share [your project/organization](https://github.com/wagmi-dev/wagmi/discussions/201) using wagmi

- Browse the [awesome-wagmi](https://github.com/wagmi-dev/awesome-wagmi) list of awesome projects and resources

## Support

If you find wagmi useful, please consider supporting development. Thank you 🙏

- [GitHub Sponsors](https://github.com/sponsors/wagmi-dev?metadata_campaign=gh_readme_support)

- [Gitcoin Grant](https://wagmi.sh/gitcoin)

- [wagmi-dev.eth](https://etherscan.io/enslookup-search?search=wagmi-dev.eth)

## Sponsors



  

    

    

  








  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  





  

    

    

  



## Contributing

If you're interested in contributing, please read the [contributing docs](/.github/CONTRIBUTING.md) **before submitting a pull request**.

## Authors

- [@tmm](https://github.com/tmm) (awkweb.eth, [Twitter](https://twitter.com/awkweb))

- [@jxom](https://github.com/jxom) (moxey.eth, [Twitter](https://twitter.com/jakemoxey))

Thanks to julianhutton.eth ([@julianjhutton](https://twitter.com/julianjhutton)) for providing the awesome logo!

## License

[MIT](/LICENSE) License