@meshsdk/react 1.9.0-beta.98 → 2.0.0-beta.2

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,5 +1,330 @@
-# mesh-react
+# @meshsdk/react
 
-React component library - [meshjs.dev/react](https://meshjs.dev/react)
+React component library for Cardano blockchain wallet integration. Provides wallet connection UI components, React hooks for wallet state management, and context providers for the [MeshSDK](https://meshjs.dev/) ecosystem.
 
-[meshjs.dev](https://meshjs.dev/)
+**Docs:** [meshjs.dev/react](https://meshjs.dev/react) | **Formats:** ESM + CJS + TypeScript declarations
+
+## Quick Start
+
+```bash
+npm install @meshsdk/react @meshsdk/wallet @meshsdk/common
+```
+
+```tsx
+import { MeshProvider, CardanoWallet } from "@meshsdk/react";
+import "@meshsdk/react/styles.css";
+
+function App() {
+  return (
+    <MeshProvider>
+      <CardanoWallet />
+    </MeshProvider>
+  );
+}
+```
+
+> All hooks and wallet components **must** be rendered inside a `<MeshProvider>`.
+> The CSS import (`styles.css`) is required for component styling.
+
+## Wallet API (v2 — Breaking Changes)
+
+The wallet instance exposed via `useWallet().wallet` is typed as `MeshCardanoBrowserWallet`, which provides **two sets of methods**:
+
+### Base methods (breaking — raw CIP-30 passthrough)
+
+These return the raw data from the browser wallet's CIP-30 API. **This is a breaking change** from v1 where these methods returned human-friendly formats.
+
+| Method | Returns | v1 behavior (old) | v2 behavior (new) |
+|--------|---------|--------------------|--------------------|
+| `wallet.getChangeAddress()` | `Promise<string>` | bech32 address | **hex address** |
+| `wallet.getUsedAddresses()` | `Promise<string[]>` | bech32 addresses | **hex addresses** |
+| `wallet.getUnusedAddresses()` | `Promise<string[]>` | bech32 addresses | **hex addresses** |
+| `wallet.getRewardAddresses()` | `Promise<string[]>` | bech32 addresses | **hex addresses** |
+| `wallet.signTx(tx, partialSign)` | `Promise<string>` | full signed transaction | **witness set CBOR only** |
+| `wallet.getBalance()` | `Promise<string>` | `Asset[]` | **CBOR hex string** |
+| `wallet.getUtxos()` | `Promise<string[]>` | `UTxO[]` | **CBOR hex strings** |
+| `wallet.getCollateral()` | `Promise<string[]>` | `UTxO[]` | **CBOR hex strings** |
+| `wallet.signData(addressHex, data)` | `Promise<DataSignature>` | `(payload, address?)` | **address first, required; params swapped** |
+| `wallet.getNetworkId()` | `Promise<number>` | unchanged | unchanged |
+| `wallet.submitTx(tx)` | `Promise<string>` | unchanged | unchanged |
+
+### Convenience methods (new — human-friendly formats)
+
+These restore the v1 behavior under new explicit method names:
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `wallet.getChangeAddressBech32()` | `Promise<string>` | Change address in bech32 format |
+| `wallet.getUsedAddressesBech32()` | `Promise<string[]>` | Used addresses in bech32 format |
+| `wallet.getUnusedAddressesBech32()` | `Promise<string[]>` | Unused addresses in bech32 format |
+| `wallet.getRewardAddressesBech32()` | `Promise<string[]>` | Reward addresses in bech32 format |
+| `wallet.signTxReturnFullTx(tx, partialSign?)` | `Promise<string>` | Sign and return full signed transaction |
+| `wallet.getBalanceMesh()` | `Promise<Asset[]>` | Balance as Mesh `Asset[]` objects |
+| `wallet.getUtxosMesh()` | `Promise<UTxO[]>` | UTxOs as Mesh `UTxO[]` objects |
+| `wallet.getCollateralMesh()` | `Promise<UTxO[]>` | Collateral as Mesh `UTxO[]` objects |
+
+### Migration from v1
+
+| v1 call | v2 equivalent |
+|---------|---------------|
+| `wallet.getChangeAddress()` (expected bech32) | `wallet.getChangeAddressBech32()` |
+| `wallet.getUsedAddresses()` (expected bech32) | `wallet.getUsedAddressesBech32()` |
+| `wallet.signTx(tx)` (expected full signed tx) | `wallet.signTxReturnFullTx(tx)` |
+| `wallet.signTx(tx, partial, false)` (witness set) | `wallet.signTx(tx, partial)` |
+| `wallet.getBalance()` (expected Asset[]) | `wallet.getBalanceMesh()` |
+| `wallet.getUtxos()` (expected UTxO[]) | `wallet.getUtxosMesh()` |
+| `wallet.getCollateral()` (expected UTxO[]) | `wallet.getCollateralMesh()` |
+| `wallet.getLovelace()` | `(await wallet.getBalanceMesh()).find(v => v.unit === "lovelace")?.quantity` |
+| `wallet.getAssets()` | Derive from `wallet.getBalanceMesh()` — filter non-lovelace assets |
+| `wallet.signData(payload, address?)` | `wallet.signData(address, hexPayload)` — params swapped, address required |
+| `BrowserWallet.enable(name)` | `MeshCardanoBrowserWallet.enable(name)` |
+| `BrowserWallet.getInstalledWallets()` | `MeshCardanoBrowserWallet.getInstalledWallets()` |
+| `new MeshWallet({...key})` | `await MeshCardanoHeadlessWallet.fromMnemonic({...})` or `.fromBip32Root({...})` |
+
+### Removed methods (no v2 equivalent)
+
+These methods were removed from `@meshsdk/wallet` v2 and have no direct replacement:
+
+- `wallet.getDRep()` / `wallet.getPubDRepKey()` — Use raw CIP-95 API
+- `wallet.getRegisteredPubStakeKeys()` / `wallet.getUnregisteredPubStakeKeys()` — Use raw CIP-95 API
+- `wallet.getExtensions()` — Check raw wallet instance
+- `wallet.signTxs(txs, partial)` — Loop with `signTxReturnFullTx()` individually
+- `BrowserWallet.getAvailableWallets()` — Use `MeshCardanoBrowserWallet.getInstalledWallets()` (synchronous)
+- `BrowserWallet.getSupportedExtensions(name)` — Use `globalThis?.cardano?.[name]?.supportedExtensions`
+- `MeshWallet.brew()` — Use `generateMnemonic()` from `@meshsdk/common`
+
+### Internal usage
+
+All hooks and context code in this package use the **convenience methods** internally. The base (breaking) methods are only exposed for consumers who need raw CIP-30 data.
+
+## Class Hierarchy
+
+```
+CardanoBrowserWallet (implements ICardanoWallet)
+  └── MeshCardanoBrowserWallet (adds Bech32/Mesh/FullTx convenience methods)
+
+CardanoHeadlessWallet (implements ICardanoWallet)
+  └── MeshCardanoHeadlessWallet (adds Bech32/Mesh/FullTx convenience methods)
+```
+
+- **`CardanoBrowserWallet`** — Thin CIP-30 passthrough for browser extension wallets
+- **`MeshCardanoBrowserWallet`** — Adds `*Bech32()`, `*Mesh()`, `signTxReturnFullTx()` methods
+- **`CardanoHeadlessWallet`** — Server-side/headless wallet (mnemonic, keys)
+- **`MeshCardanoHeadlessWallet`** — Adds convenience methods to headless wallet
+- **`ICardanoWallet`** — Base interface all wallets implement (CIP-30 shape)
+
+The `useWallet().wallet` is always `MeshCardanoBrowserWallet`. When non-browser wallets (headless, Web3) are passed via `setWallet()`, they are automatically wrapped in `MeshCardanoBrowserWallet` to ensure the convenience methods are available.
+
+## Architecture
+
+### State Management
+
+Wallet state flows through React Context with a three-state machine:
+
+```
+NOT_CONNECTED  ──connectWallet()──>  CONNECTING  ──success──>  CONNECTED
+                                         |
+                                      error──>  NOT_CONNECTED
+```
+
+- **`WalletContext.ts`** defines the store via `useWalletStore()` hook (internal)
+- **`MeshProvider`** wraps children with `WalletContext.Provider`
+- The `connectedWalletInstance` is typed as `MeshCardanoBrowserWallet`
+- Sessions persist to `localStorage` under key `"mesh-wallet-persist"`
+- On mount, persisted sessions auto-reconnect (except `utxos` web3 wallets which require re-auth)
+
+### Wallet Connection Flow
+
+1. **Browser wallet:** `MeshCardanoBrowserWallet.enable(walletName, extensions)` returns a `MeshCardanoBrowserWallet` directly
+2. **Headless wallet (burner):** `MeshCardanoHeadlessWallet.fromMnemonic({...})` creates wallet, passed to `setWallet()` which wraps it in `MeshCardanoBrowserWallet`
+3. **Web3 wallet (social login):** `Web3Wallet.enable(options)` returns a wallet, its `.cardano` property is wrapped in `MeshCardanoBrowserWallet` via `setWallet()`
+
+All paths result in `connectedWalletInstance` being a `MeshCardanoBrowserWallet` with both base and convenience methods available.
+
+### Address Resolution (after connection)
+
+```typescript
+// WalletContext.ts — runs after wallet connects
+let address = (await connectedWalletInstance.getUnusedAddressesBech32())[0];
+if (!address) address = await connectedWalletInstance.getChangeAddressBech32();
+```
+
+### Component Hierarchy
+
+```
+<MeshProvider>                          # contexts/index.tsx — required wrapper
+  <CardanoWallet />                     # cardano-wallet/index.tsx — dialog variant
+    +-- <ConnectedButton />             # Shows wallet info when connected
+    +-- <Dialog>                        # Radix dialog with screen navigation
+         +-- <ScreenMain />             # Lists installed wallets
+         +-- <ScreenBurner />           # In-browser burner wallet
+         +-- <ScreenWebauthn />         # Passkey-derived wallet
+```
+
+### Styling Conventions
+
+- **Tailwind CSS** with `mesh-` prefix on all utility classes (avoids conflicts with consumer apps)
+- **Dark mode** via `class` strategy — toggle with `isDark` prop or `mesh-dark` class
+- **`cn()` utility** (`src/common/cn.ts`) merges classes using `clsx` + `tailwind-merge`
+- Source styles: `src/styles.css` -> compiled to `dist/index.css`
+- Consumer import: `import "@meshsdk/react/styles.css"`
+
+### Build Pipeline
+
+- **TSUP** bundles `src/index.ts` -> `dist/index.js` (ESM) + `dist/index.cjs` (CJS) + `dist/index.d.ts` (types)
+- **Tailwind** compiles `src/styles.css` -> `dist/index.css`
+- Both run concurrently in dev mode
+
+## Exported API
+
+### Components
+
+#### `CardanoWallet` (from `cardano-wallet/`)
+
+Dialog-based wallet connection component. Shows a "Connect Wallet" button that opens a modal listing available browser wallets, with optional burner wallet and WebAuthn/passkey screens.
+
+```tsx
+<CardanoWallet
+  label="Connect Wallet"       // Button text (default: "Connect Wallet")
+  onConnected={() => {}}       // Callback after successful connection
+  isDark={false}               // Dark mode toggle
+  persist={false}              // Persist session to localStorage
+  injectFn={async () => {}}    // Custom wallet injection function
+  burnerWallet={{              // Enable burner wallet screen
+    networkId: 0,              //   0 = testnet, 1 = mainnet
+    provider: fetcher,         //   IFetcher & ISubmitter instance
+  }}
+  webauthn={{                  // Enable WebAuthn/passkey screen
+    networkId: 0,
+    provider: fetcher,
+    url: "https://...",
+  }}
+  showDownload={true}          // Show wallet download links
+  web3Services={options}       // EnableWeb3WalletOptions for social login
+/>
+```
+
+#### `CardanoWallet` (from `cardano-wallet-dropdown/`)
+
+Dropdown (hover-based) variant. Simpler API, no dialog — shows wallet list in a dropdown menu.
+
+```tsx
+import { CardanoWallet } from "@meshsdk/react"; // Both export as CardanoWallet
+// The dialog variant from cardano-wallet/ is the one exported from the barrel
+
+<CardanoWallet
+  label="Connect Wallet"
+  onConnected={() => {}}
+  isDark={false}
+  persist={false}
+/>
+```
+
+> **Note:** Only the **dialog variant** (`cardano-wallet/`) is exported from the package barrel (`src/index.ts`). The dropdown variant exists in the source but is not currently re-exported.
+
+#### `MeshProvider`
+
+Required context wrapper. Must be an ancestor of any component or hook from this library.
+
+```tsx
+<MeshProvider>
+  {children}
+</MeshProvider>
+```
+
+#### `MeshBadge`
+
+Branding badge linking to meshjs.dev.
+
+```tsx
+<MeshBadge isDark={false} />
+```
+
+### Hooks
+
+All hooks must be called within a `<MeshProvider>`. They read from `WalletContext`.
+
+| Hook | Returns | Description |
+|------|---------|-------------|
+| `useWallet()` | `{ name, connecting, connected, wallet, connect, disconnect, setWallet, setPersist, setWeb3Services, web3UserData, setWeb3UserData, error, address, state }` | Primary hook. `wallet` is typed as `MeshCardanoBrowserWallet`. |
+| `useAddress(accountId?)` | `string \| undefined` | Bech32 used address. Internally calls `getUsedAddressesBech32()`. `accountId` defaults to `0`. |
+| `useAssets()` | `AssetExtended[] \| undefined` | All non-lovelace assets with policyId, assetName, fingerprint. Derived from `getBalanceMesh()`. |
+| `useLovelace()` | `string \| undefined` | ADA balance in lovelace. Derived from `getBalanceMesh()`. Fetches once per connection. |
+| `useNetwork()` | `number \| undefined` | Network ID (`0` = testnet, `1` = mainnet). Calls `getNetworkId()`. |
+| `useRewardAddress(accountId?)` | `string \| undefined` | Bech32 staking/reward address. Internally calls `getRewardAddressesBech32()`. `accountId` defaults to `0`. |
+| `useWalletList({ injectFn? })` | `Wallet[]` | Browser-installed Cardano wallets. Calls `MeshCardanoBrowserWallet.getInstalledWallets()`. |
+| `useWalletSubmit()` | `{ submitTx, submitting, result, error }` | Submit a signed transaction. Calls `wallet.submitTx()`. Returns tx hash on success. |
+
+### Context & Types
+
+| Export | From | Description |
+|--------|------|-------------|
+| `WalletContext` | `contexts/WalletContext.ts` | The React Context object (for advanced use with `useContext`) |
+| `WalletState` | `contexts/WalletContext.ts` | Enum: `NOT_CONNECTED`, `CONNECTING`, `CONNECTED` |
+| `MeshProvider` | `contexts/index.tsx` | Context provider component |
+| `MeshCardanoBrowserWallet` | re-exported from `@meshsdk/wallet` | Browser wallet with convenience methods |
+| `MeshCardanoHeadlessWallet` | re-exported from `@meshsdk/wallet` | Headless wallet with convenience methods |
+| `CardanoBrowserWallet` | re-exported from `@meshsdk/wallet` | Base browser wallet (CIP-30 passthrough) |
+| `CardanoHeadlessWallet` | re-exported from `@meshsdk/wallet` | Base headless wallet |
+| `ICardanoWallet` | re-exported from `@meshsdk/wallet` | Base interface for all wallet types |
+
+## Build & Development
+
+```bash
+# Build (bundles JS + compiles Tailwind CSS)
+pnpm run build
+
+# Dev mode (watch mode for both tsup and tailwind, concurrent)
+pnpm run dev
+
+# Type checking only
+pnpm run type-check
+
+# Lint (ESLint)
+pnpm run lint
+
+# Format check (Prettier)
+pnpm run format
+
+# Create npm tarball in dist/
+pnpm run pack
+
+# Clean all build artifacts (dist/, node_modules/, .turbo/)
+pnpm run clean
+```
+
+**Output files after build:**
+- `dist/index.js` — ESM bundle
+- `dist/index.cjs` — CJS bundle
+- `dist/index.d.ts` — TypeScript declarations
+- `dist/index.css` — Compiled Tailwind styles
+
+## Dependencies
+
+### Runtime
+| Package | Purpose |
+|---------|---------|
+| `@meshsdk/common` | Shared types (`Asset`, `AssetExtended`, `UTxO`, `Wallet`, `DataSignature`), utilities (`POLICY_ID_LENGTH`, `resolveFingerprint`, `generateMnemonic`) |
+| `@meshsdk/wallet` | `MeshCardanoBrowserWallet`, `MeshCardanoHeadlessWallet`, `CardanoBrowserWallet`, `CardanoHeadlessWallet`, `ICardanoWallet` — wallet adapters for browser and headless wallets |
+| `@utxos/sdk` | Web3 wallet services (`Web3Wallet` for social login via Google/Discord/Twitter) |
+| `@radix-ui/react-dialog` | Accessible dialog/modal primitive |
+| `@radix-ui/react-dropdown-menu` | Accessible dropdown menu primitive |
+| `@radix-ui/react-icons` | Icon set |
+| `@radix-ui/react-label` | Accessible label primitive |
+| `@radix-ui/react-tooltip` | Accessible tooltip primitive |
+| `class-variance-authority` | Type-safe CSS variant management for Button |
+| `tailwind-merge` | Intelligent Tailwind class merging |
+| `tailwindcss-animate` | Animation utilities for Tailwind |
+
+### Peer Dependencies
+- `react` >= 16 < 20
+- `react-dom` >= 16 < 20
+
+## Known Gaps
+
+- **WebAuthn `connect` function** was removed from `@meshsdk/wallet` v2. The `screen-webauthn.tsx` has a runtime fallback that will log an error if the function is unavailable. Needs re-implementation via WebAuthn API or a compatible package.
+- **`@utxos/sdk` type mismatch**: `Web3Wallet.cardano` returns a `MeshWallet` (old type from bundled dependency). It is cast as `any` and wrapped in `MeshCardanoBrowserWallet`. This will resolve when `@utxos/sdk` updates to `@meshsdk/wallet` v2.
+
+## License
+
+Apache-2.0

package/dist/index.cjs

@@ -30,8 +30,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  CardanoBrowserWallet: () => import_wallet6.CardanoBrowserWallet,
+  CardanoHeadlessWallet: () => import_wallet6.CardanoHeadlessWallet,
   CardanoWallet: () => CardanoWallet,
   MeshBadge: () => MeshBadge,
+  MeshCardanoBrowserWallet: () => import_wallet6.MeshCardanoBrowserWallet,
+  MeshCardanoHeadlessWallet: () => import_wallet6.MeshCardanoHeadlessWallet,
   MeshProvider: () => MeshProvider,
   WalletContext: () => WalletContext,
   useAddress: () => useAddress,
@@ -249,8 +253,8 @@ var useWalletStore = () => {
       setConnectingWallet(true);
       setState("CONNECTING" /* CONNECTING */);
       try {
-        const extensions = import_wallet.BrowserWallet.getSupportedExtensions(walletName);
-        const walletInstance = await import_wallet.BrowserWallet.enable(
+        const extensions = globalThis?.cardano?.[walletName]?.supportedExtensions ?? [];
+        const walletInstance = await import_wallet.MeshCardanoBrowserWallet.enable(
           walletName,
           extensions
         );
@@ -282,7 +286,8 @@ var useWalletStore = () => {
   }, []);
   const setWallet = (0, import_react.useCallback)(
     async (walletInstance, walletName, persist) => {
-      setConnectedWalletInstance(walletInstance);
+      const wrapped = walletInstance instanceof import_wallet.MeshCardanoBrowserWallet ? walletInstance : new import_wallet.MeshCardanoBrowserWallet(walletInstance);
+      setConnectedWalletInstance(wrapped);
       setConnectedWalletName(walletName);
       setState("CONNECTED" /* CONNECTED */);
       if (persist) {
@@ -300,9 +305,9 @@ var useWalletStore = () => {
   (0, import_react.useEffect)(() => {
     async function load() {
       if (Object.keys(connectedWalletInstance).length > 0 && address.length === 0) {
-        let address2 = (await connectedWalletInstance.getUnusedAddresses())[0];
+        let address2 = (await connectedWalletInstance.getUnusedAddressesBech32())[0];
         if (!address2)
-          address2 = await connectedWalletInstance.getChangeAddress();
+          address2 = await connectedWalletInstance.getChangeAddressBech32();
         setAddress(address2);
       }
     }
@@ -379,7 +384,7 @@ var useAddress = (accountId = 0) => {
   const { hasConnectedWallet, connectedWalletInstance } = (0, import_react2.useContext)(WalletContext);
   (0, import_react2.useEffect)(() => {
     if (hasConnectedWallet) {
-      connectedWalletInstance.getUsedAddresses().then((addresses) => {
+      connectedWalletInstance.getUsedAddressesBech32().then((addresses) => {
         if (addresses[accountId]) {
           setAddress(addresses[accountId]);
         }
@@ -391,12 +396,21 @@ var useAddress = (accountId = 0) => {
 
 // src/hooks/useAssets.ts
 var import_react3 = require("react");
+var import_common = require("@meshsdk/common");
 var useAssets = () => {
   const [assets, setAssets] = (0, import_react3.useState)();
   const { hasConnectedWallet, connectedWalletInstance } = (0, import_react3.useContext)(WalletContext);
   (0, import_react3.useEffect)(() => {
     if (hasConnectedWallet) {
-      connectedWalletInstance.getAssets().then(setAssets);
+      connectedWalletInstance.getBalanceMesh().then((balance) => {
+        const derived = balance.filter((v) => v.unit !== "lovelace").map((v) => {
+          const policyId = v.unit.slice(0, import_common.POLICY_ID_LENGTH);
+          const assetName = v.unit.slice(import_common.POLICY_ID_LENGTH);
+          const fingerprint = (0, import_common.resolveFingerprint)(policyId, assetName);
+          return { unit: v.unit, policyId, assetName, fingerprint, quantity: v.quantity };
+        });
+        setAssets(derived);
+      });
     }
   }, [hasConnectedWallet, connectedWalletInstance]);
   return assets;
@@ -411,7 +425,10 @@ var useWalletList = ({
   const [wallets, setWallets] = (0, import_react4.useState)([]);
   (0, import_react4.useEffect)(() => {
     async function get() {
-      setWallets(await import_wallet2.BrowserWallet.getAvailableWallets({ injectFn }));
+      if (injectFn) {
+        await injectFn();
+      }
+      setWallets(import_wallet2.MeshCardanoBrowserWallet.getInstalledWallets());
     }
     get();
   }, []);
@@ -427,7 +444,9 @@ var useLovelace = () => {
   (0, import_react5.useEffect)(() => {
     async function getLovelace() {
       if (hasConnectedWallet && !hasFetchedLovelace.current) {
-        setLovelace(await connectedWalletInstance.getLovelace());
+        const balance = await connectedWalletInstance.getBalanceMesh();
+        const lovelaceAmount = balance.find((v) => v.unit === "lovelace")?.quantity ?? "0";
+        setLovelace(lovelaceAmount);
         hasFetchedLovelace.current = true;
       }
     }
@@ -461,7 +480,7 @@ var useRewardAddress = (accountId = 0) => {
   const { hasConnectedWallet, connectedWalletInstance } = (0, import_react7.useContext)(WalletContext);
   (0, import_react7.useEffect)(() => {
     if (hasConnectedWallet) {
-      connectedWalletInstance.getRewardAddresses().then((addresses) => {
+      connectedWalletInstance.getRewardAddressesBech32().then((addresses) => {
         if (addresses[accountId]) {
           setRewardAddress(addresses[accountId]);
         }
@@ -746,6 +765,7 @@ var screens = {
 
 // src/cardano-wallet/screen-burner.tsx
 var import_react10 = require("react");
+var import_common2 = require("@meshsdk/common");
 var import_wallet3 = require("@meshsdk/wallet");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var localstoragekey = "mesh-burnerwallet";
@@ -766,34 +786,45 @@ function ScreenBurner({
       setHasKeyInStorage(true);
     }
   }, []);
-  function createWallet(key) {
-    setTimeout(() => {
-      const wallet = new import_wallet3.MeshWallet({
-        networkId,
-        fetcher: provider,
-        submitter: provider,
-        key: {
-          type: "root",
-          bech32: key
-        }
-      });
-      if (!hasKeyInStorage) {
-        localStorage.setItem(localstoragekey, key);
-      }
-      setWallet(wallet, screens.burner.title);
-      setLoading(false);
-      setOpen(false);
-    }, 500);
+  async function createWalletFromMnemonic(mnemonic) {
+    const wallet = await import_wallet3.MeshCardanoHeadlessWallet.fromMnemonic({
+      mnemonic,
+      networkId,
+      walletAddressType: import_wallet3.AddressType.Base,
+      fetcher: provider,
+      submitter: provider
+    });
+    if (!hasKeyInStorage) {
+      localStorage.setItem(localstoragekey, mnemonic.join(" "));
+    }
+    setWallet(wallet, screens.burner.title);
+    setLoading(false);
+    setOpen(false);
   }
-  function handleRestoreWallet() {
+  async function handleRestoreWallet() {
     setLoading(true);
-    const key = getKeyFromStorage();
-    createWallet(key);
+    const stored = getKeyFromStorage();
+    if (stored) {
+      if (stored.includes(" ")) {
+        await createWalletFromMnemonic(stored.split(" "));
+      } else {
+        const wallet = await import_wallet3.MeshCardanoHeadlessWallet.fromBip32Root({
+          bech32: stored,
+          networkId,
+          walletAddressType: import_wallet3.AddressType.Base,
+          fetcher: provider,
+          submitter: provider
+        });
+        setWallet(wallet, screens.burner.title);
+        setLoading(false);
+        setOpen(false);
+      }
+    }
   }
-  function handleCreateWallet() {
+  async function handleCreateWallet() {
     setLoading(true);
-    const key = import_wallet3.MeshWallet.brew(true);
-    createWallet(key);
+    const mnemonic = (0, import_common2.generateMnemonic)(256).split(" ");
+    await createWalletFromMnemonic(mnemonic);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mesh-flex mesh-flex-row mesh-flex-gap-4 mesh-items-center mesh-justify-center", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: "Setting up wallet..." }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     hasKeyInStorage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -977,6 +1008,7 @@ function WalletIcon({
 
 // src/cardano-wallet/web3-services.tsx
 var import_react11 = require("react");
+var import_wallet4 = require("@meshsdk/wallet");
 var import_sdk = require("@utxos/sdk");
 
 // src/common/icons/icon-discord.tsx
@@ -1089,11 +1121,13 @@ function Web3Services({
     const wallet = await import_sdk.Web3Wallet.enable(_options);
     const user = wallet.getUser();
     setWeb3UserData(user);
+    const wrapped = new import_wallet4.MeshCardanoBrowserWallet(wallet.cardano);
+    const walletAddress = await wrapped.getChangeAddressBech32();
     setWallet(
-      wallet.cardano,
+      wrapped,
       "utxos",
       persist ? {
-        walletAddress: await wallet.cardano.getChangeAddress(),
+        walletAddress,
         user
       } : void 0
     );
@@ -1144,7 +1178,7 @@ function ScreenMain({
   web3Services
 }) {
   const wallets = useWalletList({ injectFn });
-  const { connect: connect2 } = useWallet();
+  const { connect } = useWallet();
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "mesh-grid mesh-gap-4 mesh-py-4 mesh-grid-cols-5 mesh-place-items-center mesh-gap-y-8", children: [
     wallets.map((wallet, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       WalletIcon,
@@ -1152,7 +1186,7 @@ function ScreenMain({
         icon: wallet.icon,
         name: wallet.name,
         action: () => {
-          connect2(wallet.id, persist);
+          connect(wallet.id, persist);
           setOpen(false);
         }
       },
@@ -1204,7 +1238,7 @@ function ScreenMain({
 
 // src/cardano-wallet/screen-webauthn.tsx
 var import_react12 = require("react");
-var import_wallet4 = require("@meshsdk/wallet");
+var import_wallet5 = require("@meshsdk/wallet");
 
 // src/common/input.tsx
 var React5 = __toESM(require("react"), 1);
@@ -1257,27 +1291,29 @@ function ScreenWebauthn({
   const [userName, setUserName] = (0, import_react12.useState)("");
   const [password, setPassword] = (0, import_react12.useState)("");
   const { setWallet } = useWallet();
-  function createWallet(root) {
-    setTimeout(() => {
-      const wallet = new import_wallet4.MeshWallet({
-        networkId,
-        fetcher: provider,
-        submitter: provider,
-        key: {
-          type: "root",
-          bech32: root
-        }
-      });
-      setWallet(wallet, screens.webauthn.title);
-      setLoading(false);
-      setOpen(false);
-    }, 500);
+  async function createWallet(root) {
+    const wallet = await import_wallet5.MeshCardanoHeadlessWallet.fromBip32Root({
+      bech32: root,
+      networkId,
+      walletAddressType: import_wallet5.AddressType.Base,
+      fetcher: provider,
+      submitter: provider
+    });
+    setWallet(wallet, screens.webauthn.title);
+    setLoading(false);
+    setOpen(false);
   }
   async function handleConnect() {
     setLoading(true);
-    const res = await (0, import_wallet4.connect)({ username: userName, password, serverUrl: url });
-    if (res.success && res.wallet) {
-      createWallet(res.wallet.bech32PrivateKey);
+    const connectModule = await import("@meshsdk/wallet");
+    if (typeof connectModule.connect === "function") {
+      const res = await connectModule.connect({ username: userName, password, serverUrl: url });
+      if (res.success && res.wallet) {
+        await createWallet(res.wallet.bech32PrivateKey);
+      }
+    } else {
+      console.error("WebAuthn connect is not available in this version of @meshsdk/wallet");
+      setLoading(false);
     }
   }
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mesh-flex mesh-flex-row mesh-flex-gap-4 mesh-items-center mesh-justify-center", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: "Connecting wallet..." }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mesh-flex mesh-flex-col mesh-gap-6 mesh-w-full mesh-mx-8", children: [
@@ -1470,10 +1506,17 @@ var MeshBadge = ({ isDark = false }) => /* @__PURE__ */ (0, import_jsx_runtime23
     ]
   }
 );
+
+// src/index.ts
+var import_wallet6 = require("@meshsdk/wallet");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CardanoBrowserWallet,
+  CardanoHeadlessWallet,
   CardanoWallet,
   MeshBadge,
+  MeshCardanoBrowserWallet,
+  MeshCardanoHeadlessWallet,
   MeshProvider,
   WalletContext,
   useAddress,

package/dist/index.d.cts

@@ -1,9 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as _meshsdk_common from '@meshsdk/common';
-import { IFetcher, ISubmitter, IWallet, Asset, Wallet } from '@meshsdk/common';
+import { IFetcher, ISubmitter, AssetExtended, Wallet } from '@meshsdk/common';
 import * as _utxos_sdk from '@utxos/sdk';
 import { EnableWeb3WalletOptions, UserSocialData } from '@utxos/sdk';
 import * as react from 'react';
+import * as _meshsdk_wallet from '@meshsdk/wallet';
+import { MeshCardanoBrowserWallet, ICardanoWallet } from '@meshsdk/wallet';
+export { CardanoBrowserWallet, CardanoHeadlessWallet, ICardanoWallet, MeshCardanoBrowserWallet, MeshCardanoHeadlessWallet } from '@meshsdk/wallet';
 
 interface ButtonProps {
     label?: string;
@@ -32,12 +34,12 @@ declare enum WalletState {
 }
 interface WalletContext {
     hasConnectedWallet: boolean;
-    connectedWalletInstance: IWallet;
+    connectedWalletInstance: MeshCardanoBrowserWallet;
     connectedWalletName: string | undefined;
     connectingWallet: boolean;
     connectWallet: (walletName: string, persist?: boolean) => Promise<void>;
     disconnect: () => void;
-    setWallet: (walletInstance: IWallet, walletName: string, persist?: {
+    setWallet: (walletInstance: ICardanoWallet, walletName: string, persist?: {
         [key: string]: any;
     }) => void;
     setPersist: (persist: boolean) => void;
@@ -57,7 +59,7 @@ declare const MeshProvider: React.FC<Props>;
 
 declare const useAddress: (accountId?: number) => string | undefined;
 
-declare const useAssets: () => Asset[] | undefined;
+declare const useAssets: () => AssetExtended[] | undefined;
 
 declare const useWalletList: ({ injectFn, }?: {
     injectFn?: () => Promise<void>;
@@ -73,10 +75,10 @@ declare const useWallet: () => {
     name: string | undefined;
     connecting: boolean;
     connected: boolean;
-    wallet: _meshsdk_common.IWallet;
+    wallet: _meshsdk_wallet.MeshCardanoBrowserWallet;
     connect: (walletName: string, persist?: boolean) => Promise<void>;
     disconnect: () => void;
-    setWallet: (walletInstance: _meshsdk_common.IWallet, walletName: string, persist?: {
+    setWallet: (walletInstance: _meshsdk_wallet.ICardanoWallet, walletName: string, persist?: {
         [key: string]: any;
     }) => void;
     setPersist: (persist: boolean) => void;

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as _meshsdk_common from '@meshsdk/common';
-import { IFetcher, ISubmitter, IWallet, Asset, Wallet } from '@meshsdk/common';
+import { IFetcher, ISubmitter, AssetExtended, Wallet } from '@meshsdk/common';
 import * as _utxos_sdk from '@utxos/sdk';
 import { EnableWeb3WalletOptions, UserSocialData } from '@utxos/sdk';
 import * as react from 'react';
+import * as _meshsdk_wallet from '@meshsdk/wallet';
+import { MeshCardanoBrowserWallet, ICardanoWallet } from '@meshsdk/wallet';
+export { CardanoBrowserWallet, CardanoHeadlessWallet, ICardanoWallet, MeshCardanoBrowserWallet, MeshCardanoHeadlessWallet } from '@meshsdk/wallet';
 
 interface ButtonProps {
     label?: string;
@@ -32,12 +34,12 @@ declare enum WalletState {
 }
 interface WalletContext {
     hasConnectedWallet: boolean;
-    connectedWalletInstance: IWallet;
+    connectedWalletInstance: MeshCardanoBrowserWallet;
     connectedWalletName: string | undefined;
     connectingWallet: boolean;
     connectWallet: (walletName: string, persist?: boolean) => Promise<void>;
     disconnect: () => void;
-    setWallet: (walletInstance: IWallet, walletName: string, persist?: {
+    setWallet: (walletInstance: ICardanoWallet, walletName: string, persist?: {
         [key: string]: any;
     }) => void;
     setPersist: (persist: boolean) => void;
@@ -57,7 +59,7 @@ declare const MeshProvider: React.FC<Props>;
 
 declare const useAddress: (accountId?: number) => string | undefined;
 
-declare const useAssets: () => Asset[] | undefined;
+declare const useAssets: () => AssetExtended[] | undefined;
 
 declare const useWalletList: ({ injectFn, }?: {
     injectFn?: () => Promise<void>;
@@ -73,10 +75,10 @@ declare const useWallet: () => {
     name: string | undefined;
     connecting: boolean;
     connected: boolean;
-    wallet: _meshsdk_common.IWallet;
+    wallet: _meshsdk_wallet.MeshCardanoBrowserWallet;
     connect: (walletName: string, persist?: boolean) => Promise<void>;
     disconnect: () => void;
-    setWallet: (walletInstance: _meshsdk_common.IWallet, walletName: string, persist?: {
+    setWallet: (walletInstance: _meshsdk_wallet.ICardanoWallet, walletName: string, persist?: {
         [key: string]: any;
     }) => void;
     setPersist: (persist: boolean) => void;

package/dist/index.js

@@ -179,7 +179,7 @@ import { useContext, useEffect as useEffect2, useState as useState2 } from "reac
 
 // src/contexts/WalletContext.ts
 import { createContext, useCallback, useEffect, useState } from "react";
-import { BrowserWallet } from "@meshsdk/wallet";
+import { MeshCardanoBrowserWallet } from "@meshsdk/wallet";
 var INITIAL_STATE = {
   walletName: void 0,
   walletInstance: {}
@@ -202,8 +202,8 @@ var useWalletStore = () => {
       setConnectingWallet(true);
       setState("CONNECTING" /* CONNECTING */);
       try {
-        const extensions = BrowserWallet.getSupportedExtensions(walletName);
-        const walletInstance = await BrowserWallet.enable(
+        const extensions = globalThis?.cardano?.[walletName]?.supportedExtensions ?? [];
+        const walletInstance = await MeshCardanoBrowserWallet.enable(
           walletName,
           extensions
         );
@@ -235,7 +235,8 @@ var useWalletStore = () => {
   }, []);
   const setWallet = useCallback(
     async (walletInstance, walletName, persist) => {
-      setConnectedWalletInstance(walletInstance);
+      const wrapped = walletInstance instanceof MeshCardanoBrowserWallet ? walletInstance : new MeshCardanoBrowserWallet(walletInstance);
+      setConnectedWalletInstance(wrapped);
       setConnectedWalletName(walletName);
       setState("CONNECTED" /* CONNECTED */);
       if (persist) {
@@ -253,9 +254,9 @@ var useWalletStore = () => {
   useEffect(() => {
     async function load() {
       if (Object.keys(connectedWalletInstance).length > 0 && address.length === 0) {
-        let address2 = (await connectedWalletInstance.getUnusedAddresses())[0];
+        let address2 = (await connectedWalletInstance.getUnusedAddressesBech32())[0];
         if (!address2)
-          address2 = await connectedWalletInstance.getChangeAddress();
+          address2 = await connectedWalletInstance.getChangeAddressBech32();
         setAddress(address2);
       }
     }
@@ -332,7 +333,7 @@ var useAddress = (accountId = 0) => {
   const { hasConnectedWallet, connectedWalletInstance } = useContext(WalletContext);
   useEffect2(() => {
     if (hasConnectedWallet) {
-      connectedWalletInstance.getUsedAddresses().then((addresses) => {
+      connectedWalletInstance.getUsedAddressesBech32().then((addresses) => {
         if (addresses[accountId]) {
           setAddress(addresses[accountId]);
         }
@@ -344,12 +345,21 @@ var useAddress = (accountId = 0) => {
 
 // src/hooks/useAssets.ts
 import { useContext as useContext2, useEffect as useEffect3, useState as useState3 } from "react";
+import { POLICY_ID_LENGTH, resolveFingerprint } from "@meshsdk/common";
 var useAssets = () => {
   const [assets, setAssets] = useState3();
   const { hasConnectedWallet, connectedWalletInstance } = useContext2(WalletContext);
   useEffect3(() => {
     if (hasConnectedWallet) {
-      connectedWalletInstance.getAssets().then(setAssets);
+      connectedWalletInstance.getBalanceMesh().then((balance) => {
+        const derived = balance.filter((v) => v.unit !== "lovelace").map((v) => {
+          const policyId = v.unit.slice(0, POLICY_ID_LENGTH);
+          const assetName = v.unit.slice(POLICY_ID_LENGTH);
+          const fingerprint = resolveFingerprint(policyId, assetName);
+          return { unit: v.unit, policyId, assetName, fingerprint, quantity: v.quantity };
+        });
+        setAssets(derived);
+      });
     }
   }, [hasConnectedWallet, connectedWalletInstance]);
   return assets;
@@ -357,14 +367,17 @@ var useAssets = () => {
 
 // src/hooks/useWalletList.ts
 import { useEffect as useEffect4, useState as useState4 } from "react";
-import { BrowserWallet as BrowserWallet2 } from "@meshsdk/wallet";
+import { MeshCardanoBrowserWallet as MeshCardanoBrowserWallet2 } from "@meshsdk/wallet";
 var useWalletList = ({
   injectFn = void 0
 } = {}) => {
   const [wallets, setWallets] = useState4([]);
   useEffect4(() => {
     async function get() {
-      setWallets(await BrowserWallet2.getAvailableWallets({ injectFn }));
+      if (injectFn) {
+        await injectFn();
+      }
+      setWallets(MeshCardanoBrowserWallet2.getInstalledWallets());
     }
     get();
   }, []);
@@ -380,7 +393,9 @@ var useLovelace = () => {
   useEffect5(() => {
     async function getLovelace() {
       if (hasConnectedWallet && !hasFetchedLovelace.current) {
-        setLovelace(await connectedWalletInstance.getLovelace());
+        const balance = await connectedWalletInstance.getBalanceMesh();
+        const lovelaceAmount = balance.find((v) => v.unit === "lovelace")?.quantity ?? "0";
+        setLovelace(lovelaceAmount);
         hasFetchedLovelace.current = true;
       }
     }
@@ -414,7 +429,7 @@ var useRewardAddress = (accountId = 0) => {
   const { hasConnectedWallet, connectedWalletInstance } = useContext5(WalletContext);
   useEffect7(() => {
     if (hasConnectedWallet) {
-      connectedWalletInstance.getRewardAddresses().then((addresses) => {
+      connectedWalletInstance.getRewardAddressesBech32().then((addresses) => {
         if (addresses[accountId]) {
           setRewardAddress(addresses[accountId]);
         }
@@ -703,7 +718,8 @@ var screens = {
 
 // src/cardano-wallet/screen-burner.tsx
 import { useEffect as useEffect8, useState as useState9 } from "react";
-import { MeshWallet } from "@meshsdk/wallet";
+import { generateMnemonic } from "@meshsdk/common";
+import { MeshCardanoHeadlessWallet, AddressType } from "@meshsdk/wallet";
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var localstoragekey = "mesh-burnerwallet";
 function ScreenBurner({
@@ -723,34 +739,45 @@ function ScreenBurner({
       setHasKeyInStorage(true);
     }
   }, []);
-  function createWallet(key) {
-    setTimeout(() => {
-      const wallet = new MeshWallet({
-        networkId,
-        fetcher: provider,
-        submitter: provider,
-        key: {
-          type: "root",
-          bech32: key
-        }
-      });
-      if (!hasKeyInStorage) {
-        localStorage.setItem(localstoragekey, key);
-      }
-      setWallet(wallet, screens.burner.title);
-      setLoading(false);
-      setOpen(false);
-    }, 500);
+  async function createWalletFromMnemonic(mnemonic) {
+    const wallet = await MeshCardanoHeadlessWallet.fromMnemonic({
+      mnemonic,
+      networkId,
+      walletAddressType: AddressType.Base,
+      fetcher: provider,
+      submitter: provider
+    });
+    if (!hasKeyInStorage) {
+      localStorage.setItem(localstoragekey, mnemonic.join(" "));
+    }
+    setWallet(wallet, screens.burner.title);
+    setLoading(false);
+    setOpen(false);
   }
-  function handleRestoreWallet() {
+  async function handleRestoreWallet() {
     setLoading(true);
-    const key = getKeyFromStorage();
-    createWallet(key);
+    const stored = getKeyFromStorage();
+    if (stored) {
+      if (stored.includes(" ")) {
+        await createWalletFromMnemonic(stored.split(" "));
+      } else {
+        const wallet = await MeshCardanoHeadlessWallet.fromBip32Root({
+          bech32: stored,
+          networkId,
+          walletAddressType: AddressType.Base,
+          fetcher: provider,
+          submitter: provider
+        });
+        setWallet(wallet, screens.burner.title);
+        setLoading(false);
+        setOpen(false);
+      }
+    }
   }
-  function handleCreateWallet() {
+  async function handleCreateWallet() {
     setLoading(true);
-    const key = MeshWallet.brew(true);
-    createWallet(key);
+    const mnemonic = generateMnemonic(256).split(" ");
+    await createWalletFromMnemonic(mnemonic);
   }
   return /* @__PURE__ */ jsx7("div", { className: "mesh-flex mesh-flex-row mesh-flex-gap-4 mesh-items-center mesh-justify-center", children: loading ? /* @__PURE__ */ jsx7(Fragment2, { children: "Setting up wallet..." }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
     hasKeyInStorage && /* @__PURE__ */ jsx7(
@@ -934,6 +961,7 @@ function WalletIcon({
 
 // src/cardano-wallet/web3-services.tsx
 import { useState as useState10 } from "react";
+import { MeshCardanoBrowserWallet as MeshCardanoBrowserWallet3 } from "@meshsdk/wallet";
 import {
   Web3Wallet
 } from "@utxos/sdk";
@@ -1048,11 +1076,13 @@ function Web3Services({
     const wallet = await Web3Wallet.enable(_options);
     const user = wallet.getUser();
     setWeb3UserData(user);
+    const wrapped = new MeshCardanoBrowserWallet3(wallet.cardano);
+    const walletAddress = await wrapped.getChangeAddressBech32();
     setWallet(
-      wallet.cardano,
+      wrapped,
       "utxos",
       persist ? {
-        walletAddress: await wallet.cardano.getChangeAddress(),
+        walletAddress,
         user
       } : void 0
     );
@@ -1103,7 +1133,7 @@ function ScreenMain({
   web3Services
 }) {
   const wallets = useWalletList({ injectFn });
-  const { connect: connect2 } = useWallet();
+  const { connect } = useWallet();
   return /* @__PURE__ */ jsx17(TooltipProvider, { children: /* @__PURE__ */ jsxs11("div", { className: "mesh-grid mesh-gap-4 mesh-py-4 mesh-grid-cols-5 mesh-place-items-center mesh-gap-y-8", children: [
     wallets.map((wallet, index) => /* @__PURE__ */ jsx17(
       WalletIcon,
@@ -1111,7 +1141,7 @@ function ScreenMain({
         icon: wallet.icon,
         name: wallet.name,
         action: () => {
-          connect2(wallet.id, persist);
+          connect(wallet.id, persist);
           setOpen(false);
         }
       },
@@ -1163,7 +1193,7 @@ function ScreenMain({
 
 // src/cardano-wallet/screen-webauthn.tsx
 import { useState as useState11 } from "react";
-import { connect, MeshWallet as MeshWallet2 } from "@meshsdk/wallet";
+import { MeshCardanoHeadlessWallet as MeshCardanoHeadlessWallet2, AddressType as AddressType2 } from "@meshsdk/wallet";
 
 // src/common/input.tsx
 import * as React5 from "react";
@@ -1216,27 +1246,29 @@ function ScreenWebauthn({
   const [userName, setUserName] = useState11("");
   const [password, setPassword] = useState11("");
   const { setWallet } = useWallet();
-  function createWallet(root) {
-    setTimeout(() => {
-      const wallet = new MeshWallet2({
-        networkId,
-        fetcher: provider,
-        submitter: provider,
-        key: {
-          type: "root",
-          bech32: root
-        }
-      });
-      setWallet(wallet, screens.webauthn.title);
-      setLoading(false);
-      setOpen(false);
-    }, 500);
+  async function createWallet(root) {
+    const wallet = await MeshCardanoHeadlessWallet2.fromBip32Root({
+      bech32: root,
+      networkId,
+      walletAddressType: AddressType2.Base,
+      fetcher: provider,
+      submitter: provider
+    });
+    setWallet(wallet, screens.webauthn.title);
+    setLoading(false);
+    setOpen(false);
   }
   async function handleConnect() {
     setLoading(true);
-    const res = await connect({ username: userName, password, serverUrl: url });
-    if (res.success && res.wallet) {
-      createWallet(res.wallet.bech32PrivateKey);
+    const connectModule = await import("@meshsdk/wallet");
+    if (typeof connectModule.connect === "function") {
+      const res = await connectModule.connect({ username: userName, password, serverUrl: url });
+      if (res.success && res.wallet) {
+        await createWallet(res.wallet.bech32PrivateKey);
+      }
+    } else {
+      console.error("WebAuthn connect is not available in this version of @meshsdk/wallet");
+      setLoading(false);
     }
   }
   return /* @__PURE__ */ jsx20("div", { className: "mesh-flex mesh-flex-row mesh-flex-gap-4 mesh-items-center mesh-justify-center", children: loading ? /* @__PURE__ */ jsx20(Fragment4, { children: "Connecting wallet..." }) : /* @__PURE__ */ jsx20(Fragment4, { children: /* @__PURE__ */ jsxs12("div", { className: "mesh-flex mesh-flex-col mesh-gap-6 mesh-w-full mesh-mx-8", children: [
@@ -1429,9 +1461,21 @@ var MeshBadge = ({ isDark = false }) => /* @__PURE__ */ jsxs14(
     ]
   }
 );
+
+// src/index.ts
+import {
+  MeshCardanoBrowserWallet as MeshCardanoBrowserWallet4,
+  MeshCardanoHeadlessWallet as MeshCardanoHeadlessWallet3,
+  CardanoBrowserWallet,
+  CardanoHeadlessWallet
+} from "@meshsdk/wallet";
 export {
+  CardanoBrowserWallet,
+  CardanoHeadlessWallet,
   CardanoWallet,
   MeshBadge,
+  MeshCardanoBrowserWallet4 as MeshCardanoBrowserWallet,
+  MeshCardanoHeadlessWallet3 as MeshCardanoHeadlessWallet,
   MeshProvider,
   WalletContext,
   useAddress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/react",
-  "version": "1.9.0-beta.98",
+  "version": "2.0.0-beta.2",
   "description": "React component library - https://meshjs.dev/react",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -19,8 +19,7 @@
     "dist/**"
   ],
   "scripts": {
-    "build:mesh_old": "tsup src/index.ts --format esm,cjs --cjsInterop --dts && tailwindcss -i ./src/styles.css -o ./dist/index.css",
-    "build:mesh": "tsup && tailwindcss -i ./src/styles.css -o ./dist/index.css",
+    "build": "tsup && tailwindcss -i ./src/styles.css -o ./dist/index.css",
     "dev": "concurrently \"tsup src/index.ts --format esm,cjs --watch --dts\" \"tailwindcss -i ./src/styles.css -o ./dist/index.css --watch\"",
     "clean": "rm -rf .turbo && rm -rf dist && rm -rf node_modules",
     "format": "prettier --check . --ignore-path ../../.gitignore",
@@ -30,9 +29,8 @@
   },
   "dependencies": {
     "@meshsdk/common": "1.9.0-beta.98",
-    "@meshsdk/transaction": "1.9.0-beta.98",
-    "@meshsdk/wallet": "1.9.0-beta.98",
-    "@utxos/sdk": "0.1.0",
+    "@meshsdk/wallet": "2.0.0-beta.5",
+    "@utxos/sdk": "0.1.5",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.2",
@@ -43,7 +41,6 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@meshsdk/configs": "*",
     "@types/react": "^18.2.61",
     "autoprefixer": "^10.4.18",
     "concurrently": "^8.0.1",
@@ -60,7 +57,6 @@
   "overrides": {
     "ip": "npm:@webpod/ip@latest"
   },
-  "prettier": "@meshsdk/configs/prettier",
   "publishConfig": {
     "access": "public"
   },