diff --git a/docs/guides/nextjs-wallet-connect.mdx b/docs/guides/nextjs-wallet-connect.mdx index 5fbfcfd26..53bf78d4c 100644 --- a/docs/guides/nextjs-wallet-connect.mdx +++ b/docs/guides/nextjs-wallet-connect.mdx @@ -81,9 +81,15 @@ export default function ConnectWalletButton() { const handleConnect = async () => { try { - // Access the Midnight Lace wallet through the window object - const wallet: InitialAPI = await window.midnight!.mnLace; - + // Wallets inject their Initial API into `window.midnight` under a + // wallet-specific key (not a fixed key like `mnLace`), so look it up + // by the `name` property instead of assuming the key. + const wallets = Object.values(window.midnight ?? {}); + const wallet: InitialAPI | undefined = wallets.find((w) => w.name === 'Lace'); + if (!wallet) { + throw new Error('Lace wallet not found. Please install the Lace wallet extension.'); + } + // Connect to the specified network (use 'undeployed' for local development) const connectedApi = await wallet.connect('preprod'); @@ -134,7 +140,7 @@ This component manages the wallet connection flow: 1. **Client-side rendering**: The `"use client"` directive ensures this component runs in the browser where wallet APIs are available. 2. **State management**: Uses React's `useState` hook to track connection status and wallet address. -3. **Connection logic**: The `handleConnect` function accesses the wallet through `window.midnight.mnLace`, connects to the specified network, and retrieves the wallet's shielded address. +3. **Connection logic**: The `handleConnect` function looks up the Lace wallet from `window.midnight` by its `name` property, connects to the specified network, and retrieves the wallet's shielded address. 4. **User feedback**: Displays the wallet address (truncated) and provides connect/disconnect actions. diff --git a/docs/guides/react-wallet-connect.mdx b/docs/guides/react-wallet-connect.mdx index e40f13f93..3d94adeea 100644 --- a/docs/guides/react-wallet-connect.mdx +++ b/docs/guides/react-wallet-connect.mdx @@ -149,9 +149,15 @@ const App: React.FC = () => { let address = null; try { - // Access the Midnight Lace wallet through the window object - const wallet: InitialAPI = window.midnight!.mnLace; - + // Wallets inject their Initial API into `window.midnight` under a + // wallet-specific key (not a fixed key like `mnLace`), so look it up + // by the `name` property instead of assuming the key. + const wallets = Object.values(window.midnight ?? {}); + const wallet: InitialAPI | undefined = wallets.find((w) => w.name === 'Lace'); + if (!wallet) { + throw new Error('Lace wallet not found. Please install the Lace wallet extension.'); + } + // Connect to the specified network (use 'undeployed' for local development) const connectedApi = await wallet.connect('preprod'); @@ -204,8 +210,8 @@ export default App; Let's break down the wallet connection process: -1. **Access the wallet**: The DApp Connector API exposes the wallet through `window.midnight.{walletProvider}`. -In our example, we used `window.midnight.mnLace` to access the Midnight Lace wallet. +1. **Access the wallet**: The DApp Connector API exposes each wallet through `window.midnight.{walletId}`, where `{walletId}` is a wallet-specific key chosen by the wallet (not a fixed value). +In our example, we find the Lace wallet by looking up `window.midnight` values whose `name` property is `'Lace'`. 2. **Connect to network**: Call the `connect()` method and pass the network ID as an argument. In our example, we used `'undeployed'` for local development. You can use `'preview'` for the Preview testnet or `'preprod'` for the PreProd network. 3. **Retrieve addresses**: After connecting to the network, call the `getShieldedAddresses()` method to get the wallet's shielded address. diff --git a/sdks/official/wallet-dev-guide.mdx b/sdks/official/wallet-dev-guide.mdx index 83b50069c..170fba644 100644 --- a/sdks/official/wallet-dev-guide.mdx +++ b/sdks/official/wallet-dev-guide.mdx @@ -793,8 +793,10 @@ The example below shows how a DApp connects to and interacts with a Lace Midnigh ```typescript import { nativeToken } from '@midnight-ntwrk/ledger-v8'; -// Check if wallet is available -const wallet = window.midnight?.mnLace; +// Wallets inject their Initial API into `window.midnight` under a +// wallet-specific key (not a fixed key like `mnLace`), so look it up +// by the `name` property instead of assuming the key. +const wallet = Object.values(window.midnight ?? {}).find((w) => w.name === 'Lace'); if (!wallet) { console.error('Please install Lace Midnight wallet');