From 91717b553c141ad11fe7662befd6ff7f432ddb7b Mon Sep 17 00:00:00 2001 From: Tom Meagher Date: Tue, 22 Mar 2022 20:50:46 -0400 Subject: [PATCH] docs: restructure --- README.md | 35 +--- docs/components/docs/Header.tsx | 42 +++++ docs/components/docs/index.ts | 1 + docs/next.config.js | 19 +- docs/pages/_middleware.ts | 2 + docs/pages/comparison.mdx | 73 -------- docs/pages/docs/connectors/coinbaseWallet.mdx | 50 ----- docs/pages/docs/connectors/injected.mdx | 44 ----- docs/pages/docs/connectors/meta.json | 5 - docs/pages/docs/connectors/walletConnect.mdx | 48 ----- docs/pages/docs/constants.mdx | 67 ------- docs/pages/docs/getting-started.en-US.mdx | 17 ++ docs/pages/docs/hooks/meta.json | 23 --- docs/pages/docs/hooks/useAccount.mdx | 77 -------- docs/pages/docs/hooks/useBalance.mdx | 148 --------------- docs/pages/docs/hooks/useBlockNumber.mdx | 73 -------- docs/pages/docs/hooks/useConnect.mdx | 58 ------ docs/pages/docs/hooks/useContract.mdx | 85 --------- docs/pages/docs/hooks/useContractEvent.mdx | 102 ---------- docs/pages/docs/hooks/useContractRead.mdx | 177 ------------------ docs/pages/docs/hooks/useContractWrite.mdx | 126 ------------- docs/pages/docs/hooks/useEnsAvatar.mdx | 77 -------- docs/pages/docs/hooks/useEnsLookup.mdx | 77 -------- docs/pages/docs/hooks/useEnsResolveName.mdx | 77 -------- docs/pages/docs/hooks/useEnsResolver.mdx | 77 -------- docs/pages/docs/hooks/useFeeData.mdx | 105 ----------- docs/pages/docs/hooks/useNetwork.mdx | 60 ------ docs/pages/docs/hooks/useProvider.mdx | 25 --- docs/pages/docs/hooks/useSignMessage.mdx | 73 -------- docs/pages/docs/hooks/useSigner.mdx | 63 ------- docs/pages/docs/hooks/useToken.mdx | 129 ------------- docs/pages/docs/hooks/useTransaction.mdx | 78 -------- .../docs/hooks/useWaitForTransaction.mdx | 132 ------------- .../pages/docs/hooks/useWebSocketProvider.mdx | 25 --- docs/pages/docs/meta.en-US.json | 3 + docs/pages/docs/meta.json | 6 - docs/pages/docs/provider.mdx | 133 ------------- .../connect-wallet.en-US.mdx} | 0 docs/pages/examples/meta.en-US.json | 5 + .../sign-in-with-ethereum.en-US.mdx} | 48 ++++- .../sign-message.en-US.mdx} | 0 docs/pages/getting-started.mdx | 55 ------ docs/pages/guides/connectors.mdx | 47 ----- docs/pages/guides/meta.json | 6 - docs/pages/index.en-US.mdx | 72 +++++++ docs/pages/index.mdx | 47 ----- docs/pages/meta.en-US.json | 15 ++ docs/pages/meta.json | 7 - docs/styles/globals.css | 16 ++ docs/theme.config.js | 14 +- packages/react/package.json | 2 +- 51 files changed, 248 insertions(+), 2498 deletions(-) create mode 100644 docs/components/docs/Header.tsx create mode 100644 docs/components/docs/index.ts create mode 100644 docs/pages/_middleware.ts delete mode 100644 docs/pages/comparison.mdx delete mode 100644 docs/pages/docs/connectors/coinbaseWallet.mdx delete mode 100644 docs/pages/docs/connectors/injected.mdx delete mode 100644 docs/pages/docs/connectors/meta.json delete mode 100644 docs/pages/docs/connectors/walletConnect.mdx delete mode 100644 docs/pages/docs/constants.mdx create mode 100644 docs/pages/docs/getting-started.en-US.mdx delete mode 100644 docs/pages/docs/hooks/meta.json delete mode 100644 docs/pages/docs/hooks/useAccount.mdx delete mode 100644 docs/pages/docs/hooks/useBalance.mdx delete mode 100644 docs/pages/docs/hooks/useBlockNumber.mdx delete mode 100644 docs/pages/docs/hooks/useConnect.mdx delete mode 100644 docs/pages/docs/hooks/useContract.mdx delete mode 100644 docs/pages/docs/hooks/useContractEvent.mdx delete mode 100644 docs/pages/docs/hooks/useContractRead.mdx delete mode 100644 docs/pages/docs/hooks/useContractWrite.mdx delete mode 100644 docs/pages/docs/hooks/useEnsAvatar.mdx delete mode 100644 docs/pages/docs/hooks/useEnsLookup.mdx delete mode 100644 docs/pages/docs/hooks/useEnsResolveName.mdx delete mode 100644 docs/pages/docs/hooks/useEnsResolver.mdx delete mode 100644 docs/pages/docs/hooks/useFeeData.mdx delete mode 100644 docs/pages/docs/hooks/useNetwork.mdx delete mode 100644 docs/pages/docs/hooks/useProvider.mdx delete mode 100644 docs/pages/docs/hooks/useSignMessage.mdx delete mode 100644 docs/pages/docs/hooks/useSigner.mdx delete mode 100644 docs/pages/docs/hooks/useToken.mdx delete mode 100644 docs/pages/docs/hooks/useTransaction.mdx delete mode 100644 docs/pages/docs/hooks/useWaitForTransaction.mdx delete mode 100644 docs/pages/docs/hooks/useWebSocketProvider.mdx create mode 100644 docs/pages/docs/meta.en-US.json delete mode 100644 docs/pages/docs/meta.json delete mode 100644 docs/pages/docs/provider.mdx rename docs/pages/{guides/connect-wallet.mdx => examples/connect-wallet.en-US.mdx} (100%) create mode 100644 docs/pages/examples/meta.en-US.json rename docs/pages/{guides/sign-in-with-ethereum.mdx => examples/sign-in-with-ethereum.en-US.mdx} (89%) rename docs/pages/{guides/sign-message.mdx => examples/sign-message.en-US.mdx} (100%) delete mode 100644 docs/pages/getting-started.mdx delete mode 100644 docs/pages/guides/connectors.mdx delete mode 100644 docs/pages/guides/meta.json create mode 100644 docs/pages/index.en-US.mdx delete mode 100644 docs/pages/index.mdx create mode 100644 docs/pages/meta.en-US.json delete mode 100644 docs/pages/meta.json diff --git a/README.md b/README.md index 71835837b4..faa1075629 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,6 @@ -# wagmi - -React Hooks library for Ethereum, built on [ethers.js](https://github.com/ethers-io/ethers.js). - -

- - - - - - - - - - - - -

+# wagmi [![Version](https://img.shields.io/npm/v/wagmi?colorA=292929&colorB=3c82f6)](https://www.npmjs.com/package/wagmi) [![Downloads](https://img.shields.io/npm/dm/wagmi?colorA=292929&colorB=3c82f6)](https://www.npmjs.com/package/wagmi) [![Sponsors](https://img.shields.io/github/sponsors/tmm?colorA=292929&colorB=3c82f6)](https://github.com/sponsors/tmm) + +React Hooks for Ethereum, built on [ethers.js](https://github.com/ethers-io/ethers.js). ## Features @@ -79,7 +52,7 @@ const Page = () => { Every component inside the `Provider` is set up with the default `InjectedConnector` for connecting wallets and ethers.js [Default Provider](https://docs.ethers.io/v5/api/providers/#providers-getDefaultProvider) for fetching data. -Want to learn more? Check out the [guides](https://wagmi.sh/guides/connect-wallet) or browse the [API docs](https://wagmi.sh/docs/provider). +Want to learn more? Check out the [guides](https://wagmi-xyz.vercel.app/guides/connect-wallet) or browse the [API docs](https://wagmi-xyz.vercel.app/docs/provider). ## Community diff --git a/docs/components/docs/Header.tsx b/docs/components/docs/Header.tsx new file mode 100644 index 0000000000..d792fc1369 --- /dev/null +++ b/docs/components/docs/Header.tsx @@ -0,0 +1,42 @@ +import { useRouter } from 'next/router' + +const TITLE_WITH_TRANSLATIONS: Record = { + 'en-US': 'React Hooks for Ethereum', +} + +export const Header = () => { + const { locale, defaultLocale = 'en-US' } = useRouter() + const resolvedLocale = locale || defaultLocale + const title = TITLE_WITH_TRANSLATIONS[resolvedLocale] + + return ( +
+

wagmi

+ +

+ {title} +

+ +
+ + + + + + + + + +
+
+ ) +} diff --git a/docs/components/docs/index.ts b/docs/components/docs/index.ts new file mode 100644 index 0000000000..e0e2673ae7 --- /dev/null +++ b/docs/components/docs/index.ts @@ -0,0 +1 @@ +export { Header } from './Header' diff --git a/docs/next.config.js b/docs/next.config.js index 698b83ff77..05c1d41bef 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -1,18 +1,27 @@ const withNextra = require('nextra')({ theme: 'nextra-theme-docs', themeConfig: './theme.config.js', - unstable_stork: false, unstable_contentDump: true, + unstable_flexsearch: true, unstable_staticImage: true, }) /** @type {import('next').NextConfig} */ const config = { - // i18n: { - // locales: ['en-US'], - // defaultLocale: 'en-US', - // }, + i18n: { + locales: ['en-US'], + defaultLocale: 'en-US', + }, reactStrictMode: true, + redirects: () => { + return [ + { + source: '/examples', + destination: '/examples/connect-wallet', + statusCode: 302, + }, + ] + }, } module.exports = withNextra(config) diff --git a/docs/pages/_middleware.ts b/docs/pages/_middleware.ts new file mode 100644 index 0000000000..f7317af018 --- /dev/null +++ b/docs/pages/_middleware.ts @@ -0,0 +1,2 @@ +import { locales } from 'nextra/locales' +export const middleware = locales diff --git a/docs/pages/comparison.mdx b/docs/pages/comparison.mdx deleted file mode 100644 index e76873fd7c..0000000000 --- a/docs/pages/comparison.mdx +++ /dev/null @@ -1,73 +0,0 @@ -import Callout from 'nextra-theme-docs/callout' - -# Comparison To Other Libraries - -There are a few different options of React libraries for Ethereum that help manage wallet connections, provide utility methods/hooks, etc. - - - If you have any thoughts about this section or want to add another comparison, - [please contribute](https://github.com/tmm/wagmi)! The goal is for these - comparisons to be unbiased and informative. - - -## [wagmi](https://github.com/tmm/wagmi) - -### Pros - -- 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc. -- Built-in wallet connectors for MetaMask, WalletConnect, and Coinbase Wallet -- Auto-refresh data on wallet and network changes -- TypeScript ready -- Zero-dependencies (besides ethers.js peer dependency) -- Test suite and documentation -- MIT License - -### Cons - -- Not as many connectors as `web3-react` - -## [web3-react](https://github.com/NoahZinsmeister/web3-react) - -### Pros - -- Supports many different connectors (conceptually similar to wagmi's connectors) -- Used by [Uniswap](https://uniswap.org) and some other popular projects - -### Cons - -- Need to set up connectors and method for connecting wallet on your own -- Need to install connectors separately -- No hooks for interacting with Ethereum, fetching information, etc. -- Almost no tests or documentation; infrequent updates -- GPL-3.0 License - -## [useDApp](https://github.com/EthWorks/useDApp) - -### Pros - -- Auto-refresh on new blocks and wallet changes -- Multicall support -- Transaction notifications -- Chrome extension and Firefox add-on -- MIT License - -### Cons - -- Uses `web3-react` -- Non-standard hook API -- Lack of TypeScript generics support -- Almost no tests - -## [web3modal](https://github.com/Web3Modal/web3modal) - -### Pros - -- UI component for connecting wallet -- Supports many different connectors -- MIT License - -### Cons - -- Cannot be used headlessly -- No hooks for interacting with Ethereum, fetching information, etc. -- Almost no tests and infrequent updates diff --git a/docs/pages/docs/connectors/coinbaseWallet.mdx b/docs/pages/docs/connectors/coinbaseWallet.mdx deleted file mode 100644 index 3210a0d0b9..0000000000 --- a/docs/pages/docs/connectors/coinbaseWallet.mdx +++ /dev/null @@ -1,50 +0,0 @@ -# Coinbase Wallet - -The **CoinbaseWalletConnector** wraps the [Coinbase Wallet SDK](https://github.com/coinbase/coinbase-wallet-sdk) and supports connecting with Coinbase Wallet. - -```tsx -import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet' -``` - -## Usage - -```tsx -import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet' - -const connector = new CoinbaseWalletConnector({ - options: { - appName: 'Mirror.xyz', - jsonRpcUrl: 'https://mainnet.infura.io/v3', - }, -}) -``` - -## Configuration - -### chains (optional) - -Chains supported by app. Defaults to `defaultChains`. - -```tsx highlight='5' -import { defaultChains, defaultL2Chains } from 'wagmi' -import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet' - -const connector = new CoinbaseWalletConnector({ - chains: [...defaultChains, ...defaultL2Chains], -}) -``` - -### options - -Options to pass to the [Coinbase Wallet SDK](https://github.com/coinbase/coinbase-wallet-sdk). - -```tsx highlight='4-7' -import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet' - -const connector = new CoinbaseWalletConnector({ - options: { - appName: 'Mirror.xyz', - jsonRpcUrl: 'https://mainnet.infura.io/v3', - }, -}) -``` diff --git a/docs/pages/docs/connectors/injected.mdx b/docs/pages/docs/connectors/injected.mdx deleted file mode 100644 index b8f57488e7..0000000000 --- a/docs/pages/docs/connectors/injected.mdx +++ /dev/null @@ -1,44 +0,0 @@ -# InjectedConnector (MetaMask, etc.) - -The **InjectedConnector** supports wallets that _inject_ an Ethereum provider into the browser or window. The [MetaMask](https://metamask.io) browser extension is the most popular example of this. - -```tsx -import { InjectedConnector } from 'wagmi/connectors/injected' -``` - -## Usage - -```tsx -import { InjectedConnector } from 'wagmi/connectors/injected' - -const connector = new InjectedConnector() -``` - -## Configuration - -### chains (optional) - -Chains supported by app. Defaults to `defaultChains`. - -```tsx highlight='5' -import { defaultChains, defaultL2Chains } from 'wagmi' -import { InjectedConnector } from 'wagmi/connectors/injected' - -const connector = new InjectedConnector({ - chains: [...defaultChains, ...defaultL2Chains], -}) -``` - -### options - -Options for configuring the connector. - -```tsx highlight='4-6' -import { InjectedConnector } from 'wagmi/connectors/injected' - -const connector = new InjectedConnector({ - options: { - shimDisconnect: true, - }, -}) -``` diff --git a/docs/pages/docs/connectors/meta.json b/docs/pages/docs/connectors/meta.json deleted file mode 100644 index 11cc8e34de..0000000000 --- a/docs/pages/docs/connectors/meta.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "injected": "Injected", - "walletConnect": "WalletConnect", - "coinbaseWallet": "Coinbase Wallet" -} diff --git a/docs/pages/docs/connectors/walletConnect.mdx b/docs/pages/docs/connectors/walletConnect.mdx deleted file mode 100644 index 0103bebabe..0000000000 --- a/docs/pages/docs/connectors/walletConnect.mdx +++ /dev/null @@ -1,48 +0,0 @@ -# WalletConnect (Rainbow, etc.) - -The **WalletConnectConnector** wraps the [WalletConnect](https://walletconnect.com) Ethereum provider and supports its configuration options. This is a great option for adding support for many wallets to your app. - -```tsx -import { WalletConnectConnector } from 'wagmi/connectors/walletConnect' -``` - -## Usage - -```tsx -import { WalletConnectConnector } from 'wagmi/connectors/walletConnect' - -const connector = new WalletConnectConnector({ - options: { - qrcode: true, - }, -}) -``` - -## Configuration - -### chains (optional) - -Chains supported by app. Defaults to `defaultChains`. - -```tsx highlight='5' -import { defaultChains, defaultL2Chains } from 'wagmi' -import { WalletConnectConnector } from 'wagmi/connectors/walletConnect' - -const connector = new WalletConnectConnector({ - chains: [...defaultChains, ...defaultL2Chains], -}) -``` - -### options - -Options to pass to the WalletConnect [Ethereum Provider](https://docs.walletconnect.com/quick-start/dapps/web3-provider). - -```tsx highlight='4-6' -import { WalletConnectConnector } from 'wagmi/connectors/walletConnect' - -const connector = new WalletConnectConnector({ - options: { - qrcode: true, - }, -}) -``` diff --git a/docs/pages/docs/constants.mdx b/docs/pages/docs/constants.mdx deleted file mode 100644 index c5c869f5aa..0000000000 --- a/docs/pages/docs/constants.mdx +++ /dev/null @@ -1,67 +0,0 @@ -# Constants - -wagmi exposes some helpful constants to standardize frequently used values and objects. - -## Networks/Chains - -### Chain - -Object containing chains by name. Useful for creating lists of specific chains, like `defaultL2Chains`. - -```ts -import { chain } from 'wagmi' - -chain.mainnet -chain.rinkeby -chain.polygonMainnet -// ... -``` - -Chains conform to the following type: - -```ts -export type Chain = { - id: number - name: string - nativeCurrency?: { - decimals: 18 - name: string - symbol: string - } - rpcUrls: string[] - blockExplorers?: { name: string; url: string }[] - testnet?: boolean -} -``` - -### Default Groups - -wagmi has a few built-in chain groups for convenience: - -```ts -import { - defaultChains, // mainnet, rinkeby, etc. - defaultL2Chains, // arbitrum, polygon, etc. - developmentChains, // localhost -} from 'wagmi' -``` - -## ABIs - -### ERC-20 - -```ts -import { erc20ABI } from 'wagmi' -``` - -### ERC-721 - -```ts -import { erc721ABI } from 'wagmi' -``` - -### ERC-1155 - -```ts -import { erc1155ABI } from 'wagmi' -``` diff --git a/docs/pages/docs/getting-started.en-US.mdx b/docs/pages/docs/getting-started.en-US.mdx new file mode 100644 index 0000000000..110e904386 --- /dev/null +++ b/docs/pages/docs/getting-started.en-US.mdx @@ -0,0 +1,17 @@ +# Getting Started + +## Installation + +Inside your React project directory, run the following: + +```plaintext +yarn add wagmi ethers +``` + +Or with npm: + +```plaintext +npm install wagmi ethers +``` + +## Quick Start diff --git a/docs/pages/docs/hooks/meta.json b/docs/pages/docs/hooks/meta.json deleted file mode 100644 index 8330eacbb4..0000000000 --- a/docs/pages/docs/hooks/meta.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "useAccount": "useAccount", - "useBalance": "useBalance", - "useBlockNumber": "useBlockNumber", - "useConnect": "useConnect", - "useContract": "useContract", - "useContractEvent": "useContractEvent", - "useContractRead": "useContractRead", - "useContractWrite": "useContractWrite", - "useEnsAvatar": "useEnsAvatar", - "useEnsLookup": "useEnsLookup", - "useEnsResolveName": "useEnsResolveName", - "useEnsResolver": "useEnsResolver", - "useFeeData": "useFeeData", - "useNetwork": "useNetwork", - "useProvider": "useProvider", - "useSigner": "useSigner", - "useSignMessage": "useSignMessage", - "useToken": "useToken", - "useTransaction": "useTransaction", - "useWaitForTransaction": "useWaitForTransaction", - "useWebSocketProvider": "useWebSocketProvider" -} diff --git a/docs/pages/docs/hooks/useAccount.mdx b/docs/pages/docs/hooks/useAccount.mdx deleted file mode 100644 index d6382bd9e4..0000000000 --- a/docs/pages/docs/hooks/useAccount.mdx +++ /dev/null @@ -1,77 +0,0 @@ -# useAccount - -Hook for accessing the connected account. - -```tsx -import { useAccount } from 'wagmi' -``` - -## Usage - -```tsx -import { useAccount } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, disconnect] = useAccount() - - return ( - <> -
{data?.address}
- - - - ) -} -``` - -## Return Values - -### result - -```ts -{ - data?: { - address: string - connector: Connector - ens?: { - avatar?: string - name: string - } - } - error?: Error - loading?: boolean -} -``` - -### disconnect - -```ts -() => void -``` - -## Configuration - -### fetchEns (optional) - -Fetches ENS name and avatar for connected account. Defaults to `false`. - -```tsx highlight='5' -import { useAccount } from 'wagmi' - -const App = () => { - const [{ data, error, loading }] = useAccount({ - fetchEns: true, - }) - - if (loading) return
Fetching ENS…
- if (error) return
Error fetching ENS
- return ( - <> -
{data?.ens?.name}
- - - ) -} -``` diff --git a/docs/pages/docs/hooks/useBalance.mdx b/docs/pages/docs/hooks/useBalance.mdx deleted file mode 100644 index da7f3078af..0000000000 --- a/docs/pages/docs/hooks/useBalance.mdx +++ /dev/null @@ -1,148 +0,0 @@ -# useBalance - -Hook for fetching balance information for Ethereum or ERC-20 tokens. - -```tsx -import { useBalance } from 'wagmi' -``` - -## Usage - -```tsx -import { useBalance } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getBalance] = useBalance({ - addressOrName: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e', - }) - - if (loading) return
Fetching balance…
- if (error) return
Error fetching balance
- return ( -
- {data?.formatted} {data?.symbol} -
- ) -} -``` - -## Return Values - -### result - -```ts -{ - data?: { - decimals: number - formatted: string - symbol: string - value: BigNumber - } - error?: Error - loading?: boolean -} -``` - -### getBalance - -```ts -(config?: { - addressOrName: string - formatUnits?: Unit | number - token?: string -}) => Promise<{ - data?: { - decimals: number - formatted: string - symbol: string - value: BigNumber - } - error?: Error -}> -``` - -## Configuration - -### addressOrName (optional) - -Fetches Ethereum balance for address or ENS name. - -```tsx highlight='5' -import { useBalance } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getBalance] = useBalance({ - addressOrName: 'awkweb.eth' - }) - - return ... -} -``` - -### formatUnits (optional) - -Formats balance using ethers.js [units](https://docs.ethers.io/v5/api/utils/display-logic/#display-logic--units). Defaults to `ether`. - -```tsx highlight='6' -import { useBalance } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getBalance] = useBalance({ - addressOrName: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e' - formatUnits: 'gwei', - }) - - return ... -} -``` - -### skip (optional) - -Skips automatically fetching data on mount. Defaults to `false`. Useful if you want to call `getBalance` manually at some other point. - -```tsx highlight='6' -import { useBalance } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getBalance] = useBalance({ - addressOrName: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e' - skip: true, - }) - - return ... -} -``` - -### token (optional) - -Fetches ERC-20 balance instead of Ethereum balance. For example, [$UNI](https://etherscan.io/address/0x1f9840a85d5af5bf1d1762f925bdaddc4201f984): - -```tsx highlight='6' -import { useBalance } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getBalance] = useBalance({ - addressOrName: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e' - token: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984', - }) - - return ... -} -``` - -### watch (optional) - -Watches and refreshes balance for new blocks. - -```tsx highlight='6' -import { useBalance } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getBalance] = useBalance({ - addressOrName: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e' - watch: true - }) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useBlockNumber.mdx b/docs/pages/docs/hooks/useBlockNumber.mdx deleted file mode 100644 index 5536b087c6..0000000000 --- a/docs/pages/docs/hooks/useBlockNumber.mdx +++ /dev/null @@ -1,73 +0,0 @@ -# useBlockNumber - -Hook for fetching block number. - -```tsx -import { useBlockNumber } from 'wagmi' -``` - -## Usage - -```tsx -import { useBlockNumber } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getBlockNumber] = useBlockNumber() - - if (loading) return
Fetching block number…
- if (error) return
Error fetching block number
- return
Block number: {data}
-} -``` - -## Return Values - -### result - -```ts -{ - data?: number - error?: Error - loading?: boolean -} -``` - -### getBlockNumber - -```ts -() => Promise<{ data?: number; error?: Error }> -``` - -## Configuration - -### skip (optional) - -Skips automatically fetching data on mount. Defaults to `false`. Useful if you want to call `getBlockNumber` manually at some other point. - -```tsx highlight='5' -import { useBlockNumber } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getBlockNumber] = useBlockNumber({ - skip: true, - }) - - return ... -} -``` - -### watch (optional) - -Watches and refreshes balance for new blocks. - -```tsx highlight='5' -import { useBlockNumber } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getBlockNumber] = useBlockNumber({ - watch: true - }) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useConnect.mdx b/docs/pages/docs/hooks/useConnect.mdx deleted file mode 100644 index fcd3af8572..0000000000 --- a/docs/pages/docs/hooks/useConnect.mdx +++ /dev/null @@ -1,58 +0,0 @@ -# useConnect - -Hook for connecting to configured connectors. - -```tsx -import { useConnect } from 'wagmi' -``` - -## Usage - -```tsx -import { useConnect } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, connect] = useConnect() - - return ( - <> -
Connected: {data.connected.toString()}
- - {data.connectors.map((x) => ( - - ))} - - ) -} -``` - -## Return Values - -### result - -```ts -{ - data?: { - connected: boolean - connector: Connector - connectors: Connector[] - } - error?: Error - loading?: boolean -} -``` - -### connect - -```ts -(connector: Connector) => Promise<{ - data?: { - account?: string - chain?: { id: number; unsupported: boolean } - provider?: Provider - } - error?: Error -}> -``` diff --git a/docs/pages/docs/hooks/useContract.mdx b/docs/pages/docs/hooks/useContract.mdx deleted file mode 100644 index d5a5cba637..0000000000 --- a/docs/pages/docs/hooks/useContract.mdx +++ /dev/null @@ -1,85 +0,0 @@ -# useContract - -Hook for declaratively creating ethers.js [Contract](https://docs.ethers.io/v5/api/contract/contract). - -```tsx -import { useContract } from 'wagmi' -``` - -## Usage - -The following examples use the [ENS Registry Contract](https://etherscan.io/address/0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e#code). - -```tsx -import { useContract } from 'wagmi' - -const App = () => { - const contract = useContract({ - addressOrName: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e', - contractInterface: ensRegistryABI, - }) - - return ... -} -``` - -## Return Values - -```ts -ethers.Contract -``` - -## Configuration - -### addressOrName - -Contract address or ENS name. - -```tsx highlight='5' -import { useContract } from 'wagmi' - -const App = () => { - const contract = useContract({ - addressOrName: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e', - contractInterface: ensRegistryABI, - }) - - return ... -} -``` - -### contractInterface - -Contract ABI in JSON or JS object format. An [**ethers.js** Interface](https://docs.ethers.io/v5/api/utils/abi/interface) is also allowed. - -```tsx highlight='6' -import { useContract } from 'wagmi' - -const App = () => { - const contract = useContract({ - addressOrName: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e', - contractInterface: ensRegistryABI, - }) - - return ... -} -``` - -### signerOrProvider (optional) - -An ethers.js [Provider](https://docs.ethers.io/v5/api/providers/provider/#Provider) or [Signer](https://docs.ethers.io/v5/api/signer/#Signer). - -```tsx highlight='8' -import { useContract, useProvider } from 'wagmi' - -const App = () => { - const provider = useProvider() - const contract = useContract({ - addressOrName: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e', - contractInterface: ensRegistryABI, - signerOrProvider: provider, - }) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useContractEvent.mdx b/docs/pages/docs/hooks/useContractEvent.mdx deleted file mode 100644 index c310b56143..0000000000 --- a/docs/pages/docs/hooks/useContractEvent.mdx +++ /dev/null @@ -1,102 +0,0 @@ -# useContractEvent - -Hook for subscribing to Contract events. - -```tsx -import { useContractEvent } from 'wagmi' -``` - -## Usage - -The following examples use the [ENS Registry Contract](https://etherscan.io/address/0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e#code). - -```tsx -import { useContractEvent } from 'wagmi' - -const App = () => { - useContractEvent( - { - addressOrName: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e', - contractInterface: ensRegistryABI, - }, - 'NewOwner', - (event) => console.log(event), - ) - - return ... -} -``` - -## Arguments - -### contractConfig - -See [`useContract`](/docs/hooks/useContract) for more info. - -### eventName - -Name of event to listen to. - -```tsx highlight='9' -import { useContractEvent } from 'wagmi' - -const App = () => { - useContractEvent( - { - addressOrName: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e', - contractInterface: ensRegistryABI, - }, - 'NewResolver', - (event) => console.log(event), - ) - - return ... -} -``` - -### listener - -Callback that receives event. - -```tsx highlight='10' -import { useContractEvent } from 'wagmi' - -const App = () => { - useContractEvent( - { - addressOrName: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e', - contractInterface: ensRegistryABI, - }, - 'NewOwner', - (event) => console.log(event), - ) - - return ... -} -``` - -### Configuration - -#### once (optional) - -Receive only a single event. Defaults to `false`. - -```tsx highlight='12' -import { useContractEvent } from 'wagmi' - -const App = () => { - useContractEvent( - { - addressOrName: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e', - contractInterface: ensRegistryABI, - }, - 'NewOwner', - (event) => console.log(event), - { - once: true, - }, - ) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useContractRead.mdx b/docs/pages/docs/hooks/useContractRead.mdx deleted file mode 100644 index d279921777..0000000000 --- a/docs/pages/docs/hooks/useContractRead.mdx +++ /dev/null @@ -1,177 +0,0 @@ -import Callout from 'nextra-theme-docs/callout' - -# useContractRead - -Hook for calling a Contract [read-only](https://docs.ethers.io/v5/api/contract/contract/#Contract--readonly) method. - -```tsx -import { useContractRead } from 'wagmi' -``` - -## Usage - -The following examples use the [WAGMIGOTCHI Contract](https://etherscan.io/address/0xecb504d39723b0be0e3a9aa33d646642d1051ee1). - -```tsx -import { useContractRead } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, read] = useContractRead( - { - addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1', - contractInterface: wagmigotchiABI, - }, - 'getHunger', - ) - - return ... -} -``` - -## Return Values - -### result - -```ts -{ - data?: Result - error?: Error - loading?: boolean -} -``` - -### read - -```ts -( - config: { - args: any | any[] - overrides?: Overrides - } = {}, -) => Promise<{ data?: Result; error?: Error }> -``` - -## Arguments - -### contractConfig - -See [`useContract`](/docs/hooks/useContract) for more info. - -### functionName - -Name of function to call. - -```tsx highlight='9' -import { useContractRead } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, read] = useContractRead( - { - addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1', - contractInterface: wagmigotchiABI, - }, - 'getSleep', - ) - - return ... -} -``` - -### Configuration - -#### args (optional) - -Arguments to pass to function call. Accepts `any | any[]`. - - - When using a list of positional arguments, you probably want to memoize them - with something like `React.useMemo` so the updater effect remains stable. - - -```tsx highlight='11' -import { useContractRead } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, read] = useContractRead( - { - addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1', - contractInterface: wagmigotchiABI, - }, - 'love', - { - args: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e', - } - ) - - return ... -} -``` - -#### overrides (optional) - -[Overrides](https://docs.ethers.io/v5/api/contract/contract/#Contract-functionsCall) to pass to function call. - -```tsx highlight='11' -import { useContractRead } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, read] = useContractRead( - { - addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1', - contractInterface: wagmigotchiABI, - }, - 'getHunger', - { - overrides: { from: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e' } - } - ) - - return ... -} -``` - -#### skip (optional) - -Skips automatically fetching data on mount. Defaults to `false`. Useful if you want to call `read` manually at some other point. - -```tsx highlight='11' -import { useContractRead } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, read] = useContractRead( - { - addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1', - contractInterface: wagmigotchiABI, - }, - 'getHunger', - { - skip: true, - } - ) - - return ... -} -``` - -#### watch (optional) - -Watches and refreshes data for new blocks. - -```tsx highlight='11' -import { useContractRead } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, read] = useContractRead( - { - addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1', - contractInterface: wagmigotchiABI, - }, - 'getHunger', - { - watch: true, - } - ) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useContractWrite.mdx b/docs/pages/docs/hooks/useContractWrite.mdx deleted file mode 100644 index 0efe6fd33c..0000000000 --- a/docs/pages/docs/hooks/useContractWrite.mdx +++ /dev/null @@ -1,126 +0,0 @@ -# useContractWrite - -Hook for calling a Contract [write](https://docs.ethers.io/v5/api/contract/contract/#Contract--write) method. - -```tsx -import { useContractWrite } from 'wagmi' -``` - -## Usage - -The following examples use the [WAGMIGOTCHI Contract](https://etherscan.io/address/0xecb504d39723b0be0e3a9aa33d646642d1051ee1). - -```tsx -import { useContractWrite } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, write] = useContractWrite( - { - addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1', - contractInterface: wagmigotchiABI, - }, - 'feed', - ) - - return ( - - ) -} -``` - -## Return Values - -### result - -```ts -{ - data?: TransactionResponse - error?: Error - loading?: boolean -} -``` - -### write - -```ts -( - config: { - args: any | any[] - overrides?: Overrides - } = {}, -) => Promise<{ data?: TransactionResponse; error?: Error }> -``` - -## Arguments - -### contractConfig - -See [`useContract`](/docs/hooks/useContract) for more info. - -### functionName - -Name of function to call. - -```tsx highlight='9' -import { useContractWrite } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, write] = useContractWrite( - { - addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1', - contractInterface: wagmigotchiABI, - }, - 'sleep', - ) - - return ... -} -``` - -### Configuration - -#### args (optional) - -Arguments to pass to function call. Accepts `any | any[]`. - -```tsx highlight='11' -import { useContractWrite } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, write] = useContractWrite( - { - addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1', - contractInterface: wagmigotchiABI, - }, - 'feed', - { - args: [], - } - ) - - return ... -} -``` - -#### overrides (optional) - -[Overrides](https://docs.ethers.io/v5/api/contract/contract/#Contract-functionsCall) to pass to function call. - -```tsx highlight='11' -import { useContractWrite } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, write] = useContracWrite( - { - addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1', - contractInterface: wagmigotchiABI, - }, - 'feed', - { - overrides: { from: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e' } - } - ) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useEnsAvatar.mdx b/docs/pages/docs/hooks/useEnsAvatar.mdx deleted file mode 100644 index e98f9eb233..0000000000 --- a/docs/pages/docs/hooks/useEnsAvatar.mdx +++ /dev/null @@ -1,77 +0,0 @@ -# useEnsAvatar - -Hook for fetching ENS avatar for address or ENS name. - -```tsx -import { useEnsAvatar } from 'wagmi' -``` - -## Usage - -```tsx -import { useEnsAvatar } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getEnsAvatar] = useEnsAvatar({ - addressOrName: 'awkweb.eth', - }) - - if (loading) return
Fetching avatar…
- if (error || !data) return
Error fetching avatar
- return -} -``` - -## Return Values - -### result - -```ts -{ - data?: string - error?: Error - loading?: boolean -} -``` - -### getEnsAvatar - -```ts -(config?: { - addressOrName: string -}) => Promise<{ data?: string; error?: Error }> -``` - -## Configuration - -### addressOrName (optional) - -Address or ENS name to fetch avatar. - -```tsx highlight='5' -import { useEnsAvatar } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getEnsAvatar] = useEnsAvatar({ - addressOrName: 'awkweb.eth', - }) - - return ... -} -``` - -### skip (optional) - -Skips automatically fetching data on mount. Defaults to `false`. Useful if you want to call `getAvatar` manually at some other point. - -```tsx highlight='5' -import { useEnsAvatar } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getEnsAvatar] = useEnsAvatar({ - skip: true, - }) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useEnsLookup.mdx b/docs/pages/docs/hooks/useEnsLookup.mdx deleted file mode 100644 index 03cf8a7bf1..0000000000 --- a/docs/pages/docs/hooks/useEnsLookup.mdx +++ /dev/null @@ -1,77 +0,0 @@ -# useEnsLookup - -Hook for looking up ENS name for address. - -```tsx -import { useEnsLookup } from 'wagmi' -``` - -## Usage - -```tsx -import { useEnsLookup } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, lookupAddress] = useEnsLookup({ - address: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e', - }) - - if (loading) return
Fetching name…
- if (error || !data) return
Error fetching name
- return
{data}
-} -``` - -## Return Values - -### result - -```ts -{ - data?: string - error?: Error - loading?: boolean -} -``` - -### lookupAddress - -```ts -(config?: { - address: string -}) => Promise<{ data?: string; error?: Error }> -``` - -## Configuration - -### address (optional) - -Address to look up. - -```tsx highlight='5' -import { useEnsLookup } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, lookupAddress] = useEnsLookup({ - address: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e', - }) - - return ... -} -``` - -### skip (optional) - -Skips automatically fetching data on mount. Defaults to `false`. Useful if you want to call `lookupAddress` manually at some other point. - -```tsx highlight='5' -import { useEnsLookup } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, lookupAddress] = useEnsLookup({ - skip: true, - }) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useEnsResolveName.mdx b/docs/pages/docs/hooks/useEnsResolveName.mdx deleted file mode 100644 index 841efaf47b..0000000000 --- a/docs/pages/docs/hooks/useEnsResolveName.mdx +++ /dev/null @@ -1,77 +0,0 @@ -# useEnsResolveName - -Hook for looking up address for ENS name. - -```tsx -import { useEnsResolveName } from 'wagmi' -``` - -## Usage - -```tsx -import { useEnsResolveName } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, resolveName] = useEnsResolveName({ - name: 'meagher.eth', - }) - - if (loading) return
Fetching address…
- if (error || !data) return
Error fetching address
- return
{data}
-} -``` - -## Return Values - -### result - -```ts -{ - data?: string - error?: Error - loading?: boolean -} -``` - -### resolveName - -```ts -(config?: { - name: string -}) => Promise<{ data?: string; error?: Error }> -``` - -## Configuration - -### name (optional) - -Name to look up. - -```tsx highlight='5' -import { useEnsResolveName } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, lookupAddress] = useEnsResolveName({ - name: 'meagher.eth', - }) - - return ... -} -``` - -### skip (optional) - -Skips automatically fetching data on mount. Defaults to `false`. Useful if you want to call `resolveName` manually at some other point. - -```tsx highlight='5' -import { useEnsResolveName } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, resolveName] = useEnsResolveName({ - skip: true, - }) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useEnsResolver.mdx b/docs/pages/docs/hooks/useEnsResolver.mdx deleted file mode 100644 index 67417f18fc..0000000000 --- a/docs/pages/docs/hooks/useEnsResolver.mdx +++ /dev/null @@ -1,77 +0,0 @@ -# useEnsResolver - -Hook for getting ENS resolver for name. - -```tsx -import { useEnsResolver } from 'wagmi' -``` - -## Usage - -```tsx -import { useEnsResolver } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getEnsResolver] = useEnsResolver({ - name: 'awkweb.eth', - }) - - if (loading) return
Fetching resolver…
- if (error || !data) return
Error fetching resolver
- return
Success
-} -``` - -## Return Values - -### result - -```ts -{ - data?: EnsResolver - error?: Error - loading?: boolean -} -``` - -### getEnsResolver - -```ts -(config?: { - name: string -}) => Promise<{ data?: EnsResolver; error?: Error }> -``` - -## Configuration - -### name (optional) - -Name to fetch resolver. - -```tsx highlight='5' -import { useEnsResolver } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getEnsResolver] = useEnsResolver({ - name: 'awkweb.eth', - }) - - return ... -} -``` - -### skip (optional) - -Skips automatically fetching data on mount. Defaults to `false`. Useful if you want to call `getEnsResolver` manually at some other point. - -```tsx highlight='5' -import { useEnsResolver } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getEnsResolver] = useEnsResolver({ - skip: true, - }) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useFeeData.mdx b/docs/pages/docs/hooks/useFeeData.mdx deleted file mode 100644 index 7f65f11224..0000000000 --- a/docs/pages/docs/hooks/useFeeData.mdx +++ /dev/null @@ -1,105 +0,0 @@ -# useFeeData - -Hook for fetching fee information. - -```tsx -import { useFeeData } from 'wagmi' -``` - -## Usage - -```tsx -import { useFeeData } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getFeeData] = useFeeData() - - if (loading) return
Fetching fee data…
- if (error) return
Error fetching fee data
- return
{data?.formatted?.maxFeePerGas}
-} -``` - -## Return Values - -### result - -```ts -{ - data?: { - gasPrice: BigNumber - maxFeePerGas: BigNumber - maxPriorityFeePerGas: BigNumber - formatted: { - gasPrice: string - maxFeePerGas: string - maxPriorityFeePerGas: string - } - } - error?: Error - loading?: boolean -} -``` - -### getFeeData - -```ts -() => Promise<{ - data?: { - gasPrice: BigNumber - maxFeePerGas: BigNumber - maxPriorityFeePerGas: BigNumber - } - error?: Error -}> -``` - -## Configuration - -### formatUnits (optional) - -Formats balance using ethers.js [units](https://docs.ethers.io/v5/api/utils/display-logic/#display-logic--units). Defaults to `wei`. - -```tsx highlight='5' -import { useFeeData } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getFeeData] = useFeeData({ - formatUnits: 'gwei', - }) - - return ... -} -``` - -### skip (optional) - -Skips automatically fetching data on mount. Defaults to `false`. Useful if you want to call `getFeeData` manually at some other point. - -```tsx highlight='5' -import { useFeeData } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getFeeData] = useFeeData({ - skip: true, - }) - - return ... -} -``` - -### watch (optional) - -Watches and refreshes balance for new blocks. - -```tsx highlight='5' -import { useFeeData } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getFeeData] = useFeeData({ - watch: true - }) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useNetwork.mdx b/docs/pages/docs/hooks/useNetwork.mdx deleted file mode 100644 index 91de9e6813..0000000000 --- a/docs/pages/docs/hooks/useNetwork.mdx +++ /dev/null @@ -1,60 +0,0 @@ -# useNetwork - -Hook for accessing information about connected network. - -```tsx -import { useNetwork } from 'wagmi' -``` - -## Usage - -Some connectors do not support programmatic network switching (i.e. WalletConnect) and `switchNetwork` will be `undefined`. For those situations, you can typically switch networks in the wallet app (i.e. Rainbow) and wagmi will stay up-to-date. - -```tsx -import { useNetwork } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, switchNetwork] = useNetwork() - - return ( - <> -
- {data.chain?.name ?? networkData.chain?.id}{' '} - {data.chain?.unsupported && '(unsupported)'} -
- - {switchNetwork && - data.chains.map((x) => - x.id === data.chain?.id ? null : ( - - ), - )} - - {error &&
{error?.message}
} - - ) -} -``` - -## Return Values - -### result - -```ts -{ - data?: { - chain?: Chain & { unsupported: boolean } - chains: Chain[] - } - error?: Error - loading?: boolean -} -``` - -### switchNetwork - -```ts -(chainId: number) => Promise<{ data?: Chain; error?: Error }> -``` diff --git a/docs/pages/docs/hooks/useProvider.mdx b/docs/pages/docs/hooks/useProvider.mdx deleted file mode 100644 index f1ee3ad2aa..0000000000 --- a/docs/pages/docs/hooks/useProvider.mdx +++ /dev/null @@ -1,25 +0,0 @@ -# useProvider - -Hook for accessing ethers.js [Provider](https://docs.ethers.io/v5/api/providers/provider/#Provider) from [global configuration](/docs/provider#provider-optional). - -```tsx -import { useProvider } from 'wagmi' -``` - -## Usage - -```tsx -import { useProvider } from 'wagmi' - -const App = () => { - const provider = useProvider() - - return ... -} -``` - -## Return Values - -```ts -ethers.Provider -``` diff --git a/docs/pages/docs/hooks/useSignMessage.mdx b/docs/pages/docs/hooks/useSignMessage.mdx deleted file mode 100644 index bf562842fb..0000000000 --- a/docs/pages/docs/hooks/useSignMessage.mdx +++ /dev/null @@ -1,73 +0,0 @@ -# useSignMessage - -Hook for signing messages with connected account. - -```tsx -import { useSignMessage } from 'wagmi' -``` - -## Usage - -The following examples use the message: `gm wagmi frens`. - -```tsx -import { useSignMessage } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, signMessage] = useSignMessage({ - message: 'gm wagmi frens', - }) - - if (!data) - return ( - - ) - - return ( -
- {data &&
Signature: {data}
} - {error &&
Error signing message
} -
- ) -} -``` - -## Return Values - -### result - -```ts -{ - data?: string - error?: Error - loading?: boolean -} -``` - -### signMessage - -```ts -(config?: { - message: string -}) => Promise<{ data?: string; error?: Error }> -``` - -## Configuration - -### message (optional) - -Message to sign with wallet. - -```tsx highlight='5' -import { useSignMessage } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, signMessage] = useSignMessage({ - message: 'gm wagmi frens', - }) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useSigner.mdx b/docs/pages/docs/hooks/useSigner.mdx deleted file mode 100644 index 78626e9463..0000000000 --- a/docs/pages/docs/hooks/useSigner.mdx +++ /dev/null @@ -1,63 +0,0 @@ -# useSigner - -Hook for accessing ethers.js [Signer](https://docs.ethers.io/v5/api/signer) object for connected account. - -```tsx -import { useSigner } from 'wagmi' -``` - -## Usage - -The following examples use the [ENS Registry Contract](https://etherscan.io/address/0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e#code). - -```tsx -import { useContract, useSigner } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getSigner] = useSigner() - - const contract = useContract({ - addressOrName: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e', - contractInterface: ensRegistryABI, - signerOrProvider: data, - }) - - return ... -} -``` - -## Return Values - -### result - -```ts -{ - data?: ethers.Signer - error?: Error - loading?: boolean -} -``` - -### getSigner - -```ts -() => Promise -``` - -## Configuration - -### skip (optional) - -Skips automatically loading signer on mount. Defaults to `false`. Useful if you want to call `getSigner` manually at some other point. - -```tsx highlight='5' -import { useSigner } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getSigner] = useSigner({ - skip: true, - }) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useToken.mdx b/docs/pages/docs/hooks/useToken.mdx deleted file mode 100644 index b488d27734..0000000000 --- a/docs/pages/docs/hooks/useToken.mdx +++ /dev/null @@ -1,129 +0,0 @@ -# useToken - -Hook for fetching ERC-20 token information. - -```tsx -import { useToken } from 'wagmi' -``` - -## Usage - -The following examples use [$UNI](https://etherscan.io/token/0x1f9840a85d5af5bf1d1762f925bdaddc4201f984). - -```tsx -import { useToken } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getToken] = useToken({ - address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984', - }) - - if (loading) return
Fetching token…
- if (error) return
Error fetching token
- return ( -
- {data?.totalSupply?.formatted} {data?.symbol} -
- ) -} -``` - -## Return Values - -### result - -```ts -{ - data?: { - address: string - decimals: number - symbol: string - totalSupply: { - formatted: string - value: BigNumber - } - } - error?: Error - loading?: boolean -} -``` - -### watchToken - -```ts -(token?: { - address: string - decimals?: number - image?: string - symbol: string -}) => Promise<{ data?: boolean; error?: Error }> -``` - -### getToken - -```ts -(config: { address: string; formatUnits?: string } = {}) => Promise< - | { - address: string - decimals: number - symbol: string - totalSupply: { - formatted: string - value: BigNumber - } - } - | Error -> -``` - -## Configuration - -### address - -Address of token. - -```tsx highlight='5' -import { useContractEvent } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getToken] = useToken({ - address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984', - }) - - return ... -} -``` - -### formatUnits (optional) - -Formats balance using ethers.js [units](https://docs.ethers.io/v5/api/utils/display-logic/#display-logic--units). Defaults to `ether`. - -```tsx highlight='6' -import { useContractEvent } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getToken] = useToken({ - address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984', - formatUnits: 'gwei', - }) - - return ... -} -``` - -### skip (optional) - -Skips automatically fetching data on mount. Defaults to `false`. Useful if you want to call `getToken` manually at some other point. - -```tsx highlight='6' -import { useContractEvent } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, getToken] = useToken({ - address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984', - skip: true, - }) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useTransaction.mdx b/docs/pages/docs/hooks/useTransaction.mdx deleted file mode 100644 index b507708332..0000000000 --- a/docs/pages/docs/hooks/useTransaction.mdx +++ /dev/null @@ -1,78 +0,0 @@ -# useTransaction - -Hook for sending transaction. - -```tsx -import { useTransaction } from 'wagmi' -``` - -## Usage - -```tsx -import { useTransaction } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, sendTransaction] = useTransaction({ - request: { - to: 'awkweb.eth', - value: BigNumber.from('1000000000000000000'), // 1 ETH - }, - }) - - if (loading) return
Check Wallet
- if (!data) - return ( - - ) - - return ( -
- {data &&
Transaction: {JSON.stringify(data)}
} - {error &&
Error sending transaction
} -
- ) -} -``` - -## Return Values - -### result - -```ts -{ - data?: TransactionResponse - error?: Error - loading?: boolean -} -``` - -### sendTransaction - -```ts -(config?: { - request: TransactionRequest -}) => Promise<{ data?: string; error?: Error }> -``` - -## Configuration - -### request (optional) - -Object to use when creating transaction. See [TransactionRequest](https://docs.ethers.io/v5/api/providers/types/#providers-TransactionRequest) for more info. - -```tsx highlight='5-8' -import { useTransaction } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, sendTransaction] = useTransaction({ - request: { - to: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e', - value: BigNumber.from('1000000000000000000') - } - }) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useWaitForTransaction.mdx b/docs/pages/docs/hooks/useWaitForTransaction.mdx deleted file mode 100644 index 60adbc2595..0000000000 --- a/docs/pages/docs/hooks/useWaitForTransaction.mdx +++ /dev/null @@ -1,132 +0,0 @@ -# useWaitForTransaction - -Hook for declaratively waiting until transaction is processed. Pairs well with [`useContractWrite`](/docs/hooks/useContractWrite) and [`useTransaction`](/docs/hooks/useTransaction). - -```tsx -import { useWaitForTransaction } from 'wagmi' -``` - -## Usage - -```tsx -import { useWaitForTransaction } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, wait] = useWaitForTransaction({ - hash: '0x5c504ed432cb51138bcf09aa5e8a410dd4a1e204ef84bfed1be16dfba1b22060', - }) - - if (loading) return
Processing…
- if (error) return
Transaction error
- return
Transaction: {JSON.stringify(data)}
-} -``` - -## Return Values - -### result - -```ts -{ - data?: TransactionReceipt - error?: Error - loading?: boolean -} -``` - -### wait - -```ts -(config?: { - confirmations?: number - hash?: string - timeout?: number - wait?: TransactionResponse['wait'] -}) => Promise<{ data?: TransactionReceipt; error?: Error }> -``` - -## Configuration - -### confirmations (optional) - -Waits until _confirmations_ number of blocks are mined on top of the block containing the transaction. Defaults to `1`. If _confirmations_ is `0`, hook will not wait and return immediately without blocking, likely resulting in `data` being `null`. - -```tsx highlight='5' -import { useWaitForTransaction } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, wait] = useWaitForTransaction({ - confirmations: 1, - hash: '0x5c504ed432cb51138bcf09aa5e8a410dd4a1e204ef84bfed1be16dfba1b22060', - }) - - return ... -} -``` - -### hash (optional) - -Transaction hash to monitor. - -```tsx highlight='5' -import { useWaitForTransaction } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, wait] = useWaitForTransaction({ - hash: '0x7be10a9c3440cdc09f7e9b36b7b162e0a377cae104742f6ee43e8f2fea6cfdcf', - }) - - return ... -} -``` - -### skip (optional) - -Skips automatically waiting for transaction to process on mount. Defaults to `false`. Useful if you want to call `wait` manually at some other point. - -```tsx highlight='6' -import { useWaitForTransaction } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, wait] = useWaitForTransaction({ - hash: '0x5c504ed432cb51138bcf09aa5e8a410dd4a1e204ef84bfed1be16dfba1b22060', - skip: true, - }) - - return ... -} -``` - -### timeout (optional) - -Maximum amount of time to wait before timing out in milliseconds. Defaults to `0` (will wait until transaction processes). - -```tsx highlight='5' -import { useWaitForTransaction } from 'wagmi' - -const App = () => { - const [{ data, error, loading }, wait] = useWaitForTransaction({ - hash: '0x5c504ed432cb51138bcf09aa5e8a410dd4a1e204ef84bfed1be16dfba1b22060', - timeout: 2000, // 2 seconds - }) - - return ... -} -``` - -### wait (optional) - -Function that resolves to processed transaction receipt. Works well with [`useContractWrite`](/docs/hooks/useContractWrite) and [`useTransaction`](/docs/hooks/useTransaction) results `hash` or `wait`. - -```tsx highlight='6' -import { useTransaction, useWaitForTransaction } from 'wagmi' - -const App = () => { - const [result, sendTransaction] = useTransaction() - const [{ data, error, loading }, wait] = useWaitForTransaction({ - wait: result.data?.wait - }) - - return ... -} -``` diff --git a/docs/pages/docs/hooks/useWebSocketProvider.mdx b/docs/pages/docs/hooks/useWebSocketProvider.mdx deleted file mode 100644 index 9eb4e6b0a3..0000000000 --- a/docs/pages/docs/hooks/useWebSocketProvider.mdx +++ /dev/null @@ -1,25 +0,0 @@ -# useWebSocketProvider - -Hook for accessing ethers.js [WebSocketProvider](https://docs.ethers.io/v5/api/providers/other/#WebSocketProvider) from [global configuration](/docs/provider#provider-optional). - -```tsx -import { useWebSocketProvider } from 'wagmi' -``` - -## Usage - -```tsx -import { useWebSocketProvider } from 'wagmi' - -const App = () => { - const webSocketProvider = useWebSocketProvider() - - return ... -} -``` - -## Return Values - -```ts -ethers.WebSocketProvider -``` diff --git a/docs/pages/docs/meta.en-US.json b/docs/pages/docs/meta.en-US.json new file mode 100644 index 0000000000..f0e609e8b6 --- /dev/null +++ b/docs/pages/docs/meta.en-US.json @@ -0,0 +1,3 @@ +{ + "getting-started": "Getting Started" +} diff --git a/docs/pages/docs/meta.json b/docs/pages/docs/meta.json deleted file mode 100644 index b044c274f5..0000000000 --- a/docs/pages/docs/meta.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "provider": "Provider", - "connectors": "Connectors", - "hooks": "Hooks", - "constants": "Constants" -} diff --git a/docs/pages/docs/provider.mdx b/docs/pages/docs/provider.mdx deleted file mode 100644 index 79c9a4317a..0000000000 --- a/docs/pages/docs/provider.mdx +++ /dev/null @@ -1,133 +0,0 @@ -import Callout from 'nextra-theme-docs/callout' - -# Provider - -The **Provider** manages configuration for all hooks using [React Context](https://reactjs.org/docs/context.html). - -```tsx -import { Provider } from 'wagmi' -``` - -To help avoid conflicts with other providers in your app, the **Provider** is also aliased as **WagmiProvider**. - -```tsx -import { WagmiProvider } from 'wagmi' -``` - -## Usage - -```tsx -import { Provider } from 'wagmi' - -const App = () => ( - - - -) -``` - -## Configuration - -### autoConnect (optional) - -Enables reconnecting to last used connector on mount. Defaults to `false`. - -```tsx highlight='4' -import { Provider } from 'wagmi' - -const App = () => ( - - - -) -``` - -### connectorStorageKey (optional) - -Key for saving connector preference to browser. Defaults to `wagmi.connector`. Should be unique so it doesn't get overwritten by other libraries. - -```tsx highlight='4' -import { Provider } from 'wagmi' - -const App = () => ( - - - -) -``` - -### connectors (optional) - -Connectors used for linking accounts. Defaults to `[new InjectedConnector()]`. - -```tsx highlight='5-14,17' -import { Provider, defaultChains } from 'wagmi' -import { InjectedConnector } from 'wagmi/connectors/injected' -import { WalletConnectConnector } from 'wagmi/connectors/walletConnect' - -const connectors = [ - new InjectedConnector({ chains: defaultChains }), - new WalletConnectConnector({ - chains: defaultChains, - options: { - infuraId: 'Your infura id', - qrcode: true, - }, - }), -] - -const App = () => ( - - - -) -``` - - - Learn more about wagmi's built-in connectors or how to create a custom - connector [here](/docs/connectors). - - -### provider (optional) - -ether.js [interface](https://docs.ethers.io/v5/api/providers/) for connecting to a network. Defaults to `getDefaultProvider()`. - -```tsx highlight='4-5,8' -import { providers } from 'ethers' -import { Provider } from 'wagmi' - -const provider = ({ chainId }) => - new providers.InfuraProvider(chainId, 'Your infura id') - -const App = () => ( - - - -) -``` - - - When using `getDefaultProvider()`, you likely want to [provide an API key for - each - service](https://docs.ethers.io/v5/api-keys/#api-keys--getDefaultProvider) to - minimize disruptions. (By default `getDefaultProvider` falls back to ethers.js - shared API keys.) - - -### webSocketProvider (optional) - -WebSocket interface for connecting to a network. If you provide a WebSocket provider, it will be used instead of polling in certain instances. - -```tsx highlight='4-5,8' -import { providers } from 'ethers' -import { Provider } from 'wagmi' - -const webSocketProvider = ({ chainId }) => - new providers.InfuraWebSocketProvider(chainId, 'Your infura id') - -const App = () => ( - - - -) -``` diff --git a/docs/pages/guides/connect-wallet.mdx b/docs/pages/examples/connect-wallet.en-US.mdx similarity index 100% rename from docs/pages/guides/connect-wallet.mdx rename to docs/pages/examples/connect-wallet.en-US.mdx diff --git a/docs/pages/examples/meta.en-US.json b/docs/pages/examples/meta.en-US.json new file mode 100644 index 0000000000..26d2c2349b --- /dev/null +++ b/docs/pages/examples/meta.en-US.json @@ -0,0 +1,5 @@ +{ + "connect-wallet": "Connect Wallet", + "sign-message": "Sign Message", + "sign-in-with-ethereum": "Sign-In with Ethereum" +} diff --git a/docs/pages/guides/sign-in-with-ethereum.mdx b/docs/pages/examples/sign-in-with-ethereum.en-US.mdx similarity index 89% rename from docs/pages/guides/sign-in-with-ethereum.mdx rename to docs/pages/examples/sign-in-with-ethereum.en-US.mdx index 553311ed65..fe8bca5119 100644 --- a/docs/pages/guides/sign-in-with-ethereum.mdx +++ b/docs/pages/examples/sign-in-with-ethereum.en-US.mdx @@ -38,6 +38,52 @@ yarn add siwe iron-session npm install siwe iron-session ``` +## Typing Requirements + +In order for TypeScript to work properly with `iron-session` you will need add support for custom types. + +```diff +# tsconfig.json + +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, +- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], ++ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types/**/*.d.ts"], + "exclude": ["node_modules"] +} +``` + +Include your custom types in a new `./types/` folder with your specific library name. + +```ts +# types/iron-session/index.d.ts + +import 'iron-session'; +import { SiweMessage } from 'siwe'; + +declare module 'iron-session' { + interface IronSessionData { + nonce?: string; + siwe?: SiweMessage; + } +} +``` + ## Step 1: Connect Wallet Follow the [Connect Wallet](/guides/connect-wallet#step-1-configuring-connectors) guide to get this set up. @@ -53,7 +99,7 @@ import { withIronSessionApiRoute } from 'iron-session/next' import { NextApiRequest, NextApiResponse } from 'next' import { generateNonce } from 'siwe' -const handler = (req: NextApiRequest, res: NextApiResponse) => { +const handler = async (req: NextApiRequest, res: NextApiResponse) => { const { method } = req switch (method) { case 'GET': diff --git a/docs/pages/guides/sign-message.mdx b/docs/pages/examples/sign-message.en-US.mdx similarity index 100% rename from docs/pages/guides/sign-message.mdx rename to docs/pages/examples/sign-message.en-US.mdx diff --git a/docs/pages/getting-started.mdx b/docs/pages/getting-started.mdx deleted file mode 100644 index b3bad9e4b1..0000000000 --- a/docs/pages/getting-started.mdx +++ /dev/null @@ -1,55 +0,0 @@ -import Callout from 'nextra-theme-docs/callout' - -# Getting Started - -## Installation - -Inside your React project directory, run the following: - -``` -yarn add wagmi ethers -``` - -Or with npm: - -``` -npm install wagmi ethers -``` - -## Quick Start - -Wrap your app with the [`Provider`](/docs/provider) component. - -```tsx -import { Provider } from 'wagmi' - -const App = () => ( - - - -) -``` - - - `Provider` has multiple configuration options: connectors (i.e. - WalletConnect), auto connect, websockets, etc. Check - [here](/docs/provider#options) for more info. - - -Use hooks! Every component inside the `Provider` is set up with the default `InjectedConnector` for connecting wallets and ethers.js [Default Provider](https://docs.ethers.io/v5/api/providers/#providers-getDefaultProvider) for fetching data. - -```tsx -import { useAccount } from 'wagmi' - -const Page = () => { - const [{ data, error, loading }, disconnect] = useAccount({ - fetchEns: true, - }) - - return ... -} -``` - -Continue on to check out the [Guides](/guides/connect-wallet) or skip to the [API Documentation](/docs/provider). - -wagmi! diff --git a/docs/pages/guides/connectors.mdx b/docs/pages/guides/connectors.mdx deleted file mode 100644 index b3f78cbede..0000000000 --- a/docs/pages/guides/connectors.mdx +++ /dev/null @@ -1,47 +0,0 @@ -import Callout from 'nextra-theme-docs/callout' - -# Connectors - -Connectors allow users to securely connect their wallet to your app. When using wagmi, you configure whatever connectors you want to use and wagmi handles the rest! - -## Built-in Connectors - -wagmi has built-in wallet connectors for [Injected](/docs/connectors/injected) (i.e. MetaMask), [WalletConnect](/docs/connectors/walletConnect) (i.e. Rainbow), and [Coinbase Wallet](/docs/connectors/coinbaseWallet). Tens of millions of users are supported by these options and they are very fast to set up! - -## Creating A Custom Connector - -If none of the built-in connectors work for your app, you can create a custom connector by extending the `Connector` class: - -```ts -import { Connector } from 'wagmi' - -export class CoolL2CustomConnector extends Connector { - name = 'My Cool Custom Connector for L2s' - - constructor(config) { - super(config) - } - - // Implement other methods -} -``` - - - If you create a custom connector, consider creating a [pull - request](https://github.com/tmm/wagmi/pulls) to make it a built-in. - - -Then, use it just like any other connector: - -```ts -import { defaultL2Chains } from 'wagmi' - -import { CoolL2CustomConnector } from './CoolL2CustomConnector' - -const connector = new CoolL2CustomConnector({ - chains: defaultL2Chains, - options: { - // Custom connector options - }, -}) -``` diff --git a/docs/pages/guides/meta.json b/docs/pages/guides/meta.json deleted file mode 100644 index c7908cd550..0000000000 --- a/docs/pages/guides/meta.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "connect-wallet": "Connect Wallet", - "sign-message": "Sign Message", - "sign-in-with-ethereum": "Sign-In with Ethereum", - "connectors": "Connectors" -} diff --git a/docs/pages/index.en-US.mdx b/docs/pages/index.en-US.mdx new file mode 100644 index 0000000000..aa46a9f19b --- /dev/null +++ b/docs/pages/index.en-US.mdx @@ -0,0 +1,72 @@ +--- +title: React Hooks for Ethereum +--- + +import { Header } from '../components/docs' + +
+ +**wagmi** is a collection of React Hooks containing everything you need to start working with Ethereum. wagmi makes it easy to "Connect Wallet," display ENS and balance information, sign messages, interact with contracts, and much more — all with caching, request deduplication, and persistence. + +
+ [Get Started](/docs/getting-started) · [Examples](/examples/connect-wallet) · + [GitHub Repository](https://github.com/tmm/wagmi) +
+ +## Overview + +```tsx +import { Provider, createClient, useAccount, useConnect } from 'wagmi' + +const client = createClient() + +function App() { + return ( + + + + ) +} + +function Profile() { + const { data } = useAccount() + const { connectors, connect } = useConnect() + + if (data?.address) return
Connected to {data.address}
+ return +} +``` + +In this example, we create a wagmi `Client` (using the default configuration) and pass it to the React Context `Provider`. Then, we use the `useConnect` hook to connect a wallet to the app. Finally, we show the connected account's address using `useAccount`. + +The default client is initialized with MetaMask, but connectors for WalletConnect and Coinbase Wallet are also just an import away. `useAccount` can also automatically fetch the ENS name and avatar for the connected account. We've only scratched the surface for what you can do with wagmi! + +## Features + +wagmi is built on [ethers.js](https://github.com/ethers-io/ethers.js) and supports all these amazing features out-of-the-box: + +- 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc. +- Built-in wallet connectors for [MetaMask](https://metamask.io), [WalletConnect](https://walletconnect.com), and [Coinbase Wallet](https://www.coinbase.com/wallet) +- Caching, request deduplication, and persistence powered by [react-query](https://github.com/tannerlinsley/react-query) +- Auto-refresh data on wallet, block, and network changes +- TypeScript ready, solid test suite and documentation +- MIT License + +And a lot [more](/docs/getting-started). + +## Community & Support + +Check out the following places for more wagmi-related content: + +- Join the [discussions on GitHub](https://github.com/tmm/wagmi/discussions) +- Follow [@awkweb](https://twitter.com/awkweb) on Twitter for project updates +- Sign the [guestbook](https://github.com/tmm/wagmi/discussions/2) +- Share [your project/organization](https://github.com/tmm/wagmi/discussions/201) that uses wagmi + +Or support future development: + +- [awkweb.eth](https://etherscan.io/enslookup-search?search=awkweb.eth) +- [GitHub Sponsors](https://github.com/sponsors/tmm) +- [Gitcoin Grant](https://gitcoin.co/grants/4493/wagmi-react-hooks-library-for-ethereum). + +
wagmi frens
diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx deleted file mode 100644 index 902e09b4ad..0000000000 --- a/docs/pages/index.mdx +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: React Hooks library for Ethereum ---- - -# wagmi - -**wagmi** is a React Hooks library for Ethereum, built on [ethers.js](https://github.com/ethers-io/ethers.js). - -

- - - - - - - - - - - - -

- -## Features - -- 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc. -- Built-in wallet connectors for MetaMask, WalletConnect, and Coinbase Wallet -- Auto-refresh data on wallet and network changes -- TypeScript ready -- Zero-dependencies (besides ethers.js peer dependency) -- Test suite and documentation -- MIT License - -And a lot [more](/getting-started). - -## Community - -- Join the [discussions on GitHub](https://github.com/tmm/wagmi/discussions) -- Follow [@awkweb](https://twitter.com/awkweb) on Twitter for project updates -- Sign the [guestbook](https://github.com/tmm/wagmi/discussions/2) -- Share [your project/organization](https://github.com/tmm/wagmi/discussions/201) that uses wagmi - -## Support - -- awkweb.eth -- [GitHub Sponsors](https://github.com/sponsors/tmm) -- [Gitcoin Grant](https://gitcoin.co/grants/4493/wagmi-react-hooks-library-for-ethereum) diff --git a/docs/pages/meta.en-US.json b/docs/pages/meta.en-US.json new file mode 100644 index 0000000000..243321bf72 --- /dev/null +++ b/docs/pages/meta.en-US.json @@ -0,0 +1,15 @@ +{ + "index": { + "title": "Introduction", + "type": "page", + "hidden": true + }, + "docs": { + "title": "Docs", + "type": "page" + }, + "examples": { + "title": "Examples", + "type": "page" + } +} diff --git a/docs/pages/meta.json b/docs/pages/meta.json deleted file mode 100644 index cbacd2bae8..0000000000 --- a/docs/pages/meta.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "index": "Introduction", - "getting-started": "Getting Started", - "guides": "Guides", - "comparison": "Library Comparison", - "docs": "Documentation" -} diff --git a/docs/styles/globals.css b/docs/styles/globals.css index 3c4fa8402f..187334d944 100644 --- a/docs/styles/globals.css +++ b/docs/styles/globals.css @@ -15,3 +15,19 @@ html { .dark .invert-on-dark { filter: invert(1) brightness(1.8); } + +body { + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 1) 300px + ), + fixed 0 0 / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0), + fixed 10px 10px / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0); +} + +.dark body { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #111 300px), + fixed 0 0 / 20px 20px radial-gradient(#313131 1px, transparent 0), + fixed 10px 10px / 20px 20px radial-gradient(#313131 1px, transparent 0); +} diff --git a/docs/theme.config.js b/docs/theme.config.js index 2c06c28965..c2074470f4 100644 --- a/docs/theme.config.js +++ b/docs/theme.config.js @@ -3,7 +3,7 @@ import { useRouter } from 'next/router' const github = 'https://github.com/tmm/wagmi' const TITLE_WITH_TRANSLATIONS = { - 'en-US': 'React Hooks library for Ethereum', + 'en-US': 'React Hooks for Ethereum', } const FEEDBACK_LINK_WITH_TRANSLATIONS = { @@ -20,7 +20,11 @@ export default { }, floatTOC: true, footerEditLink: `Edit this page on GitHub`, - footerText: `MIT ${new Date().getFullYear()} © awkweb.eth`, + footerText: () => ( +
+ MIT ${new Date().getFullYear()} © awkweb.eth +
+ ), github, head: ({ title, meta }) => { return ( @@ -31,11 +35,11 @@ export default { ) }, - // i18n: [{ locale: 'en-US', text: 'English' }], + i18n: [{ locale: 'en-US', text: 'English' }], logo: () => { // eslint-disable-next-line react-hooks/rules-of-hooks const { locale } = useRouter() diff --git a/packages/react/package.json b/packages/react/package.json index 64c07c82ed..805f88d677 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "wagmi", - "description": "React Hooks library for Ethereum", + "description": "React Hooks for Ethereum", "license": "MIT", "version": "0.2.17", "ethereum": "awkweb.eth",