Skip to content

docs: fix wallet discovery using fixed window.midnight.mnLace key #1080

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
UtkarshArjariya wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: fix wallet discovery using fixed window.midnight.mnLace key #1080

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 10 additions & 4 deletions docs/guides/nextjs-wallet-connect.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Comment on lines +84 to +86

@oduameh oduameh Jul 15, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tutorial readers have not seen the old mnLace key, so the counter-example adds confusion. A concise comment about what the code does is clearer.

Suggested change
// 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.
// Discover the Lace wallet from the wallets injected into window.midnight

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');

Expand Down Expand Up @@ -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.

</Step>
Expand Down
16 changes: 11 additions & 5 deletions docs/guides/react-wallet-connect.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.');
}
Comment on lines +152 to +159

@oduameh oduameh Jul 15, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This entire block targets code that no longer exists on main. The React guide was reworked after this PR was opened and now uses a selectWallet() helper with the correct Object.values enumeration.

Please rebase onto main and drop the changes to react-wallet-connect.mdx.


// Connect to the specified network (use 'undeployed' for local development)
const connectedApi = await wallet.connect('preprod');

Expand Down Expand Up @@ -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.
Expand Down
6 changes: 4 additions & 2 deletions sdks/official/wallet-dev-guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Comment on lines +796 to +798

@oduameh oduameh Jul 15, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same note: drop the mnLace counter-example and describe what the code does.

Suggested change
// 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.
// Discover the Lace wallet from the wallets injected into window.midnight

const wallet = Object.values(window.midnight ?? {}).find((w) => w.name === 'Lace');

if (!wallet) {
console.error('Please install Lace Midnight wallet');
Expand Down
Loading