Skip to content

Commit

Permalink
fix errors with hooks
Browse files Browse the repository at this point in the history
  • Loading branch information
rtomas committed Oct 3, 2024
1 parent 1193521 commit c250f1d
Show file tree
Hide file tree
Showing 10 changed files with 108 additions and 146 deletions.
2 changes: 1 addition & 1 deletion docs/appkit/javascript/solana/about/programs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function deserializeCounterAccount(data) {
}
}

const { address, currentChain } = useAppKitAccount()
const { address } = useAppKitAccount()
const { walletProvider, connection } = useAppKitProvider()

async function onIncrementCounter() {
Expand Down
1 change: 0 additions & 1 deletion docs/appkit/next/core/hooks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ export default function Component() {

<OpenModal />


## useDisconnect

<PlatformTabs groupId="eth-lib" activeOptions={["wagmi", "ethers5","ethers","solana"]}>
Expand Down
14 changes: 0 additions & 14 deletions docs/appkit/next/ethers5/hooks.mdx
Original file line number Diff line number Diff line change
@@ -1,19 +1,5 @@
import Button from '../../../components/button'

### useAppKitAccount

Hook that returns the client's information.

```tsx
import { useAppKitAccount } from '@reown/appkit/react'

function Components() {
const { address, chainId, isConnected } = useAppKitAccount()

//...
}
```

### switchNetwork

```tsx
Expand Down
2 changes: 1 addition & 1 deletion docs/appkit/next/solana/about/programs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function deserializeCounterAccount(data?: Buffer): { count: number } {
}
}

const { address, currentChain } = useAppKitAccount()
const { address } = useAppKitAccount()
const { walletProvider, connection } = useAppKitProvider()

async function onIncrementCounter() {
Expand Down
157 changes: 56 additions & 101 deletions docs/appkit/react/core/hooks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,136 +4,108 @@ import PlatformTabItem from '../../../components/PlatformTabItem'

import WagmiHooks from '../wagmi/hooks.mdx'
import EthersHooks from '../ethers/hooks.mdx'
import SolanaHooks from '../solana/hooks.mdx'

import OpenModal from './open.mdx'

# Hooks

Hooks are functions that will help you control the modal, subscribe to wallet events and interact with them and smart contracts.

## useAppKit
## useAppKitAccount

Control the modal with the `useAppKit` hook
Hook for accessing account data and connection status.

<PlatformTabs groupId="eth-lib" activeOptions={["wagmi", "ethers5","ethers", "solana"]}>
<PlatformTabItem value="wagmi">
List of possible `status`: "reconnecting" | "connected" | "disconnected" | "connecting" | undefined

```ts
import { useAppKit } from '@reown/appkit/react'
The `caipAddress` is composed by `network:chainId:address`. An Example for an Ethereum mainnet address is eip155:1:0xab16a96D359eC26a11e2C2b3d8f8B8942d5Bfcdb

export default function Component() {
const { open, close } = useAppKit()

open()
```ts
import { useAppKitAccount } from "@reown/appkit/react";

//...
export default Component(){
const { address, isConnected, caipAddress, status } = useAppKitAccount()
}
```

</PlatformTabItem>
<PlatformTabItem value="ethers5">
## useAppKit

Control the modal with the `useAppKit` hook

```ts
import { useAppKit } from '@reown/appkit/react'
import { useAppKit } from "@reown/appkit/react";

export default function Component() {
const { open, close } = useAppKit()

open()

//...
}
```

</PlatformTabItem>
<PlatformTabItem value="ethers">

```ts
import { useAppKit } from '@reown/appkit/react'
<OpenModal />

export default function Component() {
const { open, close } = useAppKit()
## useDisconnect

open()
<PlatformTabs groupId="eth-lib" activeOptions={["wagmi", "ethers5","ethers","solana"]}>

//...
}
```
<PlatformTabItem value="wagmi">

</PlatformTabItem>
<PlatformTabItem value="solana">
To disconnect the session call the wagmi hook:

```ts
import { useAppKit } from '@reown/appkit/react'
import { useDisconnect } from 'wagmi'

export default function Component() {
const { open, close } = useAppKit()
const { disconnect } = useDisconnect()

open()
disconnect()
```
</PlatformTabItem>
<PlatformTabItem value="ethers5">

//...
}
To disconnect the session using a hook in ethers v5, you need to install this package and use the `useDisconnect` hook in this way:

```bash npm2yarn
npm install @reown/appkit-ethers5
```

```ts
import { useDisconnect } from '@reown/appkit-ethers5/react'

const { disconnect } = useDisconnect()

disconnect()
```
</PlatformTabItem>
</PlatformTabs>
<PlatformTabItem value="ethers">

You can also select the modal's view when calling the `open` function
To disconnect the session using a hook in ethers, you need to install this package and use the `useDisconnect` hook in this way:

```ts
open({ view: 'Account' })
```bash npm2yarn
npm install @reown/appkit-ethers
```

List of views you can select
```ts
import { useDisconnect } from '@reown/appkit-ethers/react'

<Table
headers={['Variable', 'Description']}
data={[
{
variable: { code: 'Connect' },
description: 'Principal view of the modal - default view when disconnected'
},
{
variable: { code: 'Account' },
description: 'User profile - default view when connected'
},
{
variable: { code: 'AllWallets' },
description: 'Shows the list of all available wallets'
},
{
variable: { code: 'Networks' },
description:
'List of available networks - you can select and target a specific network before connecting'
},
{
variable: { code: 'WhatIsANetwork' },
description: '"What is a network" onboarding view'
},
{
variable: { code: 'WhatIsAWallet' },
description: '"What is a wallet" onboarding view'
},
{
variable: { code: 'OnRampProviders' },
description: '"On-Ramp main view'
},
{
variable: { code: 'Swap' },
description: '"Swap main view'
}
]}
/>
const { disconnect } = useDisconnect()

## useDisconnect
disconnect()
```
</PlatformTabItem>
<PlatformTabItem value="solana">

To disconnect the session using a hook in Solana, you need to install this package and use the `useDisconnect` hook in this way:

```bash npm2yarn
npm install @reown/appkit-solana
```

```ts
// import useDisconnect from wagmi if on EVM
//import useDisconnect from @reown/appkit-solana/react if on Solana
import { useDisconnect } from '@reown/appkit-solana/react'

const { disconnect } = useDisconnect()

disconnect()
```
</PlatformTabItem>
</PlatformTabs>

## useWalletInfo

Expand All @@ -153,23 +125,6 @@ export default Component(){
```


## useAppKitAccount

Hook for accessing account data and connection status.

List of possible status: "reconnecting" | "connected" | "disconnected" | "connecting" | undefined

```ts
import { useAppKitAccount } from "@reown/appkit/react";


export default Component(){
const { address, isConnected, status } = useAppKitAccount()

//...
}
```

## Ethereum Library

<PlatformTabs groupId="eth-lib" activeOptions={["wagmi", "ethers"]}>
Expand Down
48 changes: 48 additions & 0 deletions docs/appkit/react/core/open.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import Table from '../../../components/Table'

You can also select the modal's view when calling the `open` function

```ts
open({ view: 'Account' })
```

List of views you can select

<Table
headers={['Variable', 'Description']}
data={[
{
variable: { code: 'Connect' },
description: 'Principal view of the modal - default view when disconnected'
},
{
variable: { code: 'Account' },
description: 'User profile - default view when connected'
},
{
variable: { code: 'AllWallets' },
description: 'Shows the list of all available wallets'
},
{
variable: { code: 'Networks' },
description:
'List of available networks - you can select and target a specific network before connecting'
},
{
variable: { code: 'WhatIsANetwork' },
description: '"What is a network" onboarding view'
},
{
variable: { code: 'WhatIsAWallet' },
description: '"What is a wallet" onboarding view'
},
{
variable: { code: 'OnRampProviders' },
description: '"On-Ramp main view'
},
{
variable: { code: 'Swap' },
description: '"Swap main view'
}
]}
/>
14 changes: 0 additions & 14 deletions docs/appkit/react/ethers/hooks.mdx
Original file line number Diff line number Diff line change
@@ -1,19 +1,5 @@
import Button from '../../../components/button'

### useAppKitAccount

Hook that returns the client's information.

```tsx
import { useAppKitAccount } from '@reown/base/react'

function Components() {
const { address, status, isConnected } = useAppKitAccount()

//...
}
```

### switchNetwork

```tsx
Expand Down
2 changes: 1 addition & 1 deletion docs/appkit/react/solana/about/programs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function deserializeCounterAccount(data?: Buffer): { count: number } {
}
}

const { address, currentChain } = useAppKitAccount()
const { address } = useAppKitAccount()
const { walletProvider, connection } = useAppKitProvider()

async function onIncrementCounter() {
Expand Down
12 changes: 0 additions & 12 deletions docs/appkit/react/solana/hooks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -47,15 +47,3 @@ function SignMessage() {
return <button onClick={onSignMessage}>Sign Message</button>
}
```

### useAppKitError

```ts
import { useAppKitError } from '@reown/solana/react'

function Components() {
const { error } = useAppKitError()

//...
}
```
2 changes: 1 addition & 1 deletion docs/appkit/vue/solana/programs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { useAppKitAccount, useAppKitProvider } from '@reown/appkit/vue'
export default {
setup() {
const counterMessage = ref('');
const { address, currentChain } = useAppKitAccount();
const { address } = useAppKitAccount();
const { walletProvider, connection } = useAppKitProvider();

function deserializeCounterAccount(data) {
Expand Down

0 comments on commit c250f1d

Please sign in to comment.