diff --git a/apps/nextra/pages/en/build/sdks/wallet-adapter/dapp.mdx b/apps/nextra/pages/en/build/sdks/wallet-adapter/dapp.mdx index 5907f502c..9c8251f5f 100644 --- a/apps/nextra/pages/en/build/sdks/wallet-adapter/dapp.mdx +++ b/apps/nextra/pages/en/build/sdks/wallet-adapter/dapp.mdx @@ -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 ( +
+ {wallets.map(wallet => { + return

{wallet.name}

+ })} +
+ ) +} +``` + +#### 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 ( +
+ /** Wallets that use social login to create an account on the blockchain */ + {aptosConnectWallets.map((aptosConnectwallet) => ( + return

{aptosConnectwallet.name}

+ ))} + /** Wallets that are currently installed or loadable. */ + {availableWallets.map((availableWallet) => ( + return

{availableWallet.name}

+ ))} + /** Wallets that are NOT currently installed or loadable. */ + {installableWallets.map((installableWallet) => ( + return

{installableWallet.name}

+ ))} +
+ ) +} +``` + + ### `connect()` and `disconnect()` `connect()` establishes a connection between the dapp and a Wallet. You can then use `disconnect()` to diff --git a/apps/nextra/pages/en/developer-platforms/contribute/components/image.mdx b/apps/nextra/pages/en/developer-platforms/contribute/components/image.mdx index c8d4d4b5c..f9f78e1bc 100644 --- a/apps/nextra/pages/en/developer-platforms/contribute/components/image.mdx +++ b/apps/nextra/pages/en/developer-platforms/contribute/components/image.mdx @@ -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"; Hello ``` ## Static Image -import { Callout } from 'nextra/components' +import { Callout } from "nextra/components"; This feature is enabled via `staticImage: true` in the Nextra config by