@miden-sdk/create-miden-para-react 0.10.10 → 0.13.1

package/README.md

@@ -1,14 +1,14 @@
 # @miden-sdk/create-miden-para-react
 
-`npm create @miden-sdk/miden-para-react@latest my-app` scaffolds the latest Vite `react-ts` starter, overwrites it with this repo's `vite.config.ts`, swaps in a Para + Miden-ready `App.tsx`, and adds the deps needed to run it out of the box. The scaffold always runs `create-vite` with `--yes --no-install` and pipes “no” to the install prompt to prevent upstream installs from overwriting the template before we patch it.
+`npm create @miden-sdk/miden-para-react@latest my-app` scaffolds the latest Vite `react-ts` starter, overwrites it with this repo's `vite.config.ts`, swaps in a Para + Miden-ready `App.tsx`, and adds the deps needed to run it out of the box. The scaffold always runs `create-vite` with `--yes --no-install` and pipes "no" to the install prompt to prevent upstream installs from overwriting the template before we patch it.
 
 ## What it does
 - Runs `npm create vite@latest <target> -- --template react-ts` so you always start from the upstream default.
 - Replaces `vite.config.ts` with the Para + Miden-friendly config (dedupe/exclude and WASM asset handling).
-- Replaces `src/App.tsx` with a ParaProvider + `useParaMiden` starter that reports the account ID and client readiness.
-- Adds Para/Miden + connector deps (matching `examples/react`) so Para SDK peers resolve: `@miden-sdk/miden-para`, `@miden-sdk/use-miden-para-react`, `@getpara/react-sdk-lite`, `@getpara/evm-wallet-connectors`, `@demox-labs/miden-sdk`, `@tanstack/react-query`, `@wagmi/core`, `viem`, `wagmi`, plus dev plugins `vite-plugin-node-polyfills`, `vite-plugin-wasm`, and `vite-plugin-top-level-await`.
-- Installs dependencies using your detected package manager (`pnpm`, `yarn`, `bun`, or falls back to `npm`); `create-vite` is invoked with `--yes --no-install` and auto-answers “no” to install prompts to avoid reverting the patched files.
-- Writes `.npmrc` with `legacy-peer-deps=true` so `npm install` works despite a known peer mismatch between `@miden-sdk/use-miden-para-react` and `@miden-sdk/miden-para`.
+- Replaces `src/App.tsx` with a `ParaSignerProvider` + `MidenProvider` starter that reports wallet, account ID, and client readiness.
+- Adds Para/Miden deps: `@miden-sdk/miden-para`, `@miden-sdk/react`, `@getpara/react-sdk-lite`, `@getpara/evm-wallet-connectors`, `@miden-sdk/miden-sdk`, plus dev plugins `vite-plugin-node-polyfills`, `vite-plugin-wasm`, and `vite-plugin-top-level-await`.
+- Installs dependencies using your detected package manager (`pnpm`, `yarn`, `bun`, or falls back to `npm`); `create-vite` is invoked with `--yes --no-install` and auto-answers "no" to install prompts to avoid reverting the patched files.
+- Writes `.npmrc` with `legacy-peer-deps=true` for peer dependency resolution.
 - Adds `src/polyfills.ts` and injects it into `src/main.tsx` to provide `Buffer`/`process` in the browser.
 
 ## Usage

package/bin/create-miden-para-react.mjs

@@ -27,8 +27,8 @@ const repoRoot = resolve(__dirname, "..", "..", "..");
 const localMidenParaPath =
   process.env.MIDEN_PARA_LOCAL_MIDEN_PARA_PATH ?? repoRoot;
 const localUseMidenParaReactPath =
-  process.env.MIDEN_PARA_LOCAL_USE_PARA_REACT_PATH ??
-  resolve(repoRoot, "packages", "use-miden-para-react");
+  process.env.MIDEN_PARA_LOCAL_USE_MIDEN_PARA_REACT_PATH ??
+  join(repoRoot, "packages", "use-miden-para-react");
 const useLocalDeps = process.env.MIDEN_PARA_LOCAL_DEPS === "1";
 
 const args = process.argv.slice(2);
@@ -211,22 +211,20 @@ function ensureMidenParaDependencies(targetRoot) {
   pkg.scripts = pkg.scripts ?? {};
   const midenParaVersion = useLocalDeps
     ? `file:${localMidenParaPath}`
-    : "0.10.10";
+    : "0.13.1";
   const useMidenParaReactVersion = useLocalDeps
     ? `file:${localUseMidenParaReactPath}`
-    : "^0.10.10";
-  // Align with examples/react so Para SDK connector peers are satisfied
+    : "^0.13.0";
+  // Align with examples/react-signer so Para SDK connector peers are satisfied
   Object.assign(pkg.dependencies, {
     ...pkg.dependencies,
-    "@getpara/react-sdk-lite": "2.0.0-alpha.73",
-    "@getpara/evm-wallet-connectors": "^2.3.0",
-    "@tanstack/react-query": "^5.90.12",
-    "@wagmi/core": "^3.0.0",
-    "@demox-labs/miden-sdk": "^0.12.5",
+    "@getpara/react-sdk-lite": "^2.2.0",
+    "@getpara/evm-wallet-connectors": "^2.2.0",
+    "@miden-sdk/miden-sdk": "^0.13.0",
     "@miden-sdk/miden-para": midenParaVersion,
     "@miden-sdk/use-miden-para-react": useMidenParaReactVersion,
-    viem: "^2.41.2",
-    wagmi: "^3.1.0",
+    "@miden-sdk/react": "^0.13.1",
+    "@tanstack/react-query": "^5.0.0",
   });
 
   Object.assign(pkg.devDependencies, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miden-sdk/create-miden-para-react",
-  "version": "0.10.10",
+  "version": "0.13.1",
   "description": "Create a Vite react-ts app preconfigured with Miden + Para's Vite setup",
   "type": "module",
   "bin": {

package/template/src/App.tsx

@@ -1,42 +1,45 @@
 import './App.css';
 import '@getpara/react-sdk-lite/styles.css';
-import { ParaProvider, useAccount, useModal } from '@getpara/react-sdk-lite';
-import { useParaMiden } from '@miden-sdk/use-miden-para-react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
-const queryClient = new QueryClient();
+import { ParaSignerProvider, useParaSigner } from '@miden-sdk/use-miden-para-react';
+import { MidenProvider, useSigner, useMiden } from '@miden-sdk/react';
 
 function App() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <ParaProvider
-        paraClientConfig={{
-          apiKey: import.meta.env.VITE_PARA_API_KEY,
-        }}
-        config={{ appName: 'Starter for MidenxPara' }}
-      >
+    <ParaSignerProvider
+      apiKey={import.meta.env.VITE_PARA_API_KEY}
+      environment="BETA"
+      appName="Starter for MidenxPara"
+    >
+      <MidenProvider config={{ rpcUrl: 'testnet' }}>
         <Content />
-      </ParaProvider>
-    </QueryClientProvider>
+      </MidenProvider>
+    </ParaSignerProvider>
   );
 }
 
 function Content() {
-  const { client, accountId, para } = useParaMiden(
-    'https://rpc.testnet.miden.io'
-  );
-  const { isConnected } = useAccount();
-  const { openModal } = useModal();
+  const signer = useSigner();
+  const { wallet } = useParaSigner();
+  const { isReady, signerAccountId } = useMiden();
+
+  const handleConnect = async () => {
+    if (signer?.isConnected) {
+      await signer.disconnect();
+    } else {
+      await signer?.connect();
+    }
+  };
 
   return (
     <div>
-      <button onClick={() => (isConnected ? para?.logout() : openModal?.())}>
-        {isConnected ? 'Disconnect Para' : 'Connect with Para'}
+      <button onClick={handleConnect}>
+        {signer?.isConnected ? 'Disconnect Para' : 'Connect with Para'}
       </button>
-      {isConnected && (
+      {signer?.isConnected && (
         <>
-          <p>Account: {accountId ?? '—'}</p>
-          <p>Client ready: {client ? 'yes' : 'no'}</p>
+          <p>Wallet: {wallet?.address ?? '—'}</p>
+          <p>Account: {signerAccountId ?? '—'}</p>
+          <p>Client ready: {isReady ? 'yes' : 'no'}</p>
         </>
       )}
     </div>

package/template/vite.config.ts

@@ -3,19 +3,37 @@ import react from '@vitejs/plugin-react';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import wasm from 'vite-plugin-wasm';
 import topLevelAwait from 'vite-plugin-top-level-await';
-import path from 'path';
-import { fileURLToPath } from 'url';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const optionalConnectorsPath = path.resolve(
-  __dirname,
-  'src',
-  'optional-connectors.ts'
-);
+// Optional connector families that are never imported by the starter template.
+// Alias them to an empty module so Vite doesn't try to resolve their deps.
+const optionalPackages = [
+  '@getpara/solana-wallet-connectors',
+  '@getpara/cosmos-wallet-connectors',
+  '@getpara/wagmi-v2-connector',
+  'wagmi',
+  '@wagmi/core',
+  '@wagmi/connectors',
+];
+
+// Mark any import whose bare specifier starts with an optional package
+// (including subpath imports like "wagmi/connectors") as external so
+// Rollup skips them entirely. These code paths are never reached at runtime.
+function externalizeOptionalPackages() {
+  return {
+    name: 'externalize-optional-packages',
+    enforce: 'pre' as const,
+    resolveId(id: string) {
+      if (optionalPackages.some((pkg) => id === pkg || id.startsWith(pkg + '/'))) {
+        return { id, external: true };
+      }
+    },
+  };
+}
 
 // Keep the miden SDK unbundled so its WASM asset path stays valid in dev.
 export default defineConfig({
   plugins: [
+    externalizeOptionalPackages(),
     wasm(),
     topLevelAwait(),
     react(),
@@ -27,9 +45,8 @@ export default defineConfig({
     // Keep Miden SDK unbundled and avoid prebundling Para's Stencil component bundles
     // to prevent multiple runtimes in dev.
     exclude: [
-      '@demox-labs/miden-sdk',
-      '@getpara/solana-wallet-connectors',
-      '@getpara/cosmos-wallet-connectors',
+      '@miden-sdk/miden-sdk',
+      ...optionalPackages,
     ],
     esbuildOptions: {
       target: 'esnext',
@@ -37,22 +54,12 @@ export default defineConfig({
   },
   build: {
     target: 'esnext',
-    rollupOptions: {
-      external: [
-        '@getpara/solana-wallet-connectors',
-        '@getpara/cosmos-wallet-connectors',
-      ],
-    },
   },
   worker: {
     format: 'es',
   },
   resolve: {
-    dedupe: ['@getpara/web-sdk', '@getpara/react-sdk-lite'],
-    alias: {
-      '@getpara/solana-wallet-connectors': optionalConnectorsPath,
-      '@getpara/cosmos-wallet-connectors': optionalConnectorsPath,
-    },
+    dedupe: ['@getpara/web-sdk', '@getpara/react-sdk-lite', 'react', 'react-dom'],
   },
   // Ensure Vite treats wasm as a static asset with the correct MIME type.
   assetsInclude: ['**/*.wasm'],