Registry /
crm-productivity / littlefish-nft-auth-framework
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
WalletProvider
✓ import { WalletProvider } from 'littlefish-nft-auth-framework/frontend'
✗ import { WalletProvider } from 'littlefish-nft-auth-framework'
Client-side components must be imported from '/frontend' subpath. The root package export may not include them.
useWallet
✓ import { useWallet } from 'littlefish-nft-auth-framework/frontend'
✗ import { useWallet } from 'littlefish-nft-auth-framework'
Hook is part of the frontend module, not the root index.
WalletConnectButton
✓ import { WalletConnectButton } from 'littlefish-nft-auth-framework/frontend'
✗ import WalletConnectButton from 'littlefish-nft-auth-framework/frontend'
Named export, not default. Also ensure client-side usage with 'use client' directive.
Sets up WalletProvider with hydration-safe client wrapper and renders WalletConnectButton in Next.js app directory.
// app/providers.tsx
"use client";
import { WalletProvider } from 'littlefish-nft-auth-framework/frontend';
export default function Providers({ children }: { children: React.ReactNode }) {
return <WalletProvider>{children}</WalletProvider>;
}
// app/ClientProviders.tsx
"use client";
import Providers from './Providers';
import { useEffect, useState } from 'react';
export default function ClientProviders({ children }: { children: React.ReactNode }) {
const [hasMounted, setHasMounted] = useState(false);
useEffect(() => { setHasMounted(true); }, []);
if (!hasMounted) return null;
return <Providers>{children}</Providers>;
}
// app/layout.tsx
import ClientProviders from './ClientProviders';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body><ClientProviders>{children}</ClientProviders></body>
</html>
);
}
// app/page.tsx
"use client";
import { WalletConnectButton } from 'littlefish-nft-auth-framework/frontend';
export default function Home() {
return <WalletConnectButton />;
}
Errors
Common errors & fixes
Module not found: Can't resolve 'littlefish-nft-auth-framework'
Package not installed or import path incorrect.
fixRun npm install littlefish-nft-auth-framework. Ensure imports use correct subpath: 'littlefish-nft-auth-framework/frontend' for frontend components.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
WalletProvider renders on server (window not available) causing mismatch.
fixWrap WalletProvider in a client-only component as shown in quickstart (ClientProviders).
TypeError: Cannot read properties of undefined (reading 'enable' )
Cardano wallet extension not installed or not detected.
fixEnsure a compatible Cardano wallet (e.g., Nami, Eternl) is installed and enabled in the browser.
Audit
Dependencies
lucid-cardanooptionalUsed for Cardano blockchain interactions and wallet APIs