Skip to content
This repository was archived by the owner on Jul 30, 2025. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions apps/nextra/pages/en/build/sdks/wallet-adapter/dapp.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,64 @@ See the next.js example dapp for a demonstration of how these components are use
- [Live site](https://aptos-labs.github.io/aptos-wallet-adapter/)
- [Source code](https://github.com/aptos-labs/aptos-wallet-adapter/tree/main/apps/nextjs-example)

### `wallets`

`wallets` is a list of available wallets, including standard supported ones, each with name, URL, icon, readiness state, and AIP62 standard compliance indication.

```tsx filename="WalletDisplayDemo.tsx"
import { useWallet } from '@aptos-labs/wallet-adapter-react';

const displayInstalledWalletsDemo = () => {

const { wallets } = useWallet();

return (
<div>
{wallets.map(wallet => {
return <p>{wallet.name}</p>
})}
</div>
)
}
```

#### Support for Uninstalled Wallets

Following AIP-62, the adapter uses an event-based communication model between a wallet and a dapp. This means only wallets installed in the user's browser are detected automatically and available for use.
To support the full Aptos wallet ecosystem, the adapter maintains a registry of supported wallets—allowing dapps to also display uninstalled wallets. It also exposes a utility function to easily manage all wallets.

```tsx filename="WalletDisplayDemo.tsx"
import { useWallet, groupAndSortWallets } from '@aptos-labs/wallet-adapter-react';

const displayAllWalletsDemo = () => {

const { wallets = [], notDetectedWallets = [] } = useWallet();

const { aptosConnectWallets, availableWallets, installableWallets } =
groupAndSortWallets(
[...wallets, ...notDetectedWallets]
);

return (
<div>
/** Wallets that use social login to create an account on the blockchain */
{aptosConnectWallets.map((aptosConnectwallet) => (
return <p>{aptosConnectwallet.name}</p>
))}
/** Wallets that are currently installed or loadable. */
{availableWallets.map((availableWallet) => (
return <p>{availableWallet.name}</p>
))}
/** Wallets that are NOT currently installed or loadable. */
{installableWallets.map((installableWallet) => (
return <p>{installableWallet.name}</p>
))}
</div>
)
}
```


### `connect()` and `disconnect()`

`connect()` establishes a connection between the dapp and a Wallet. You can then use `disconnect()` to
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ searchable: false
# Next.js Image

The standard way to use
[Next.js Image](https://nextjs.org/docs/basic-features/image-optimization)
[Next.js Image](https://nextjs.org/docs/app/getting-started/images)
inside MDX is to directly import the component:

```mdx filename="MDX"
import Image from 'next/image'
import Image from "next/image";

<Image src="/demo.png" alt="Hello" width={500} height={500} />
```

## Static Image

import { Callout } from 'nextra/components'
import { Callout } from "nextra/components";

<Callout>
This feature is enabled via `staticImage: true` in the Nextra config by
Expand Down