@scafonix/next
v1.1.3
Published
Next.js hydration & SSR-safe components for Scafonix MPC Local-Standalone wallet
Maintainers
scafonixReadme
@scafonix/next
The official Next.js SDK for Scafonix MPC — the zero-assembly, secure ECDSA non-custodial wallet engine.
Installation
Install the package along with @scafonix/react using your preferred package manager:
# npm
npm install @scafonix/react @scafonix/next ethers
# yarn
yarn add @scafonix/react @scafonix/next ethers
# pnpm
pnpm add @scafonix/react @scafonix/next ethers
# bun
bun add @scafonix/react @scafonix/next ethersQuickstart
1. Configure the Provider (app/layout.jsx)
Wrap your App Router layout with the ScafonixWalletProvider to initialize the secure browser-only script execution context on the client:
import { ScafonixWalletProvider } from '@scafonix/next';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ScafonixWalletProvider
apiKey="publickey_scafonix_live_xxxxxx"
options={{
backupOptions: {
allowedMethods: ['google_drive', 'copy_key_share']
}
}}
>
{children}
</ScafonixWalletProvider>
</body>
</html>
);
}2. Connect Wallet inside Client Components (app/page.jsx)
Add the 'use client' boundary directive to any page where you consume the wallet state hook:
'use client';
import { useScafonixWallet } from '@scafonix/next';
import { ethers } from 'ethers';
export default function Page() {
const { wallet, connectWallet, signTransaction, showBackupModal, exportWallet, clearWallet, isConnecting } = useScafonixWallet();
const sendTx = async () => {
if (!wallet) return;
const provider = new ethers.JsonRpcProvider("https://cloudflare-eth.com");
const tx = {
to: "0x742d35Cc6634C0532925a3b844Bc454e4438f44e",
value: ethers.parseEther("0.01"),
gasLimit: 21000,
chainId: 1
};
const signature = await signTransaction(tx);
const signedRawTx = ethers.Transaction.from({ ...tx, signature }).serialized;
await provider.broadcastTransaction(signedRawTx);
alert("Transaction broadcasted!");
};
const handleDeviceUnlink = async () => {
// ⚠️ WARNING: clearWallet() purges local P1 device share.
// Do NOT call this on standard app logouts! Use only for explicit device unbinding or security reset.
await clearWallet();
};
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
{wallet ? (
<div>
<p>Connected: {wallet.address}</p>
<button onClick={sendTx}>Send 0.01 ETH</button>
<button onClick={() => showBackupModal('[email protected]')}>☁️ Backup (P3)</button>
<button onClick={() => exportWallet('[email protected]', { chain: '43113' })}>🔑 Export Key</button>
</div>
) : (
<button disabled={isConnecting} onClick={() => connectWallet('[email protected]', { skipBackupModal: true })}>
{isConnecting ? 'Connecting...' : 'Connect Wallet'}
</button>
)}
</div>
);
}License
MIT License