@scafonix/vue

The official Vue 3 SDK for Scafonix MPC — the zero-assembly, secure ECDSA non-custodial wallet engine.

Installation

Install the package via your preferred package manager:

# npm
npm install @scafonix/vue ethers

# yarn
yarn add @scafonix/vue ethers

# pnpm
pnpm add @scafonix/vue ethers

# bun
bun add @scafonix/vue ethers

Quickstart

To get started, you will need a public API key from your Scafonix Developer Dashboard.

1. Initialize & Connect Wallet inside <script setup>

<script setup>
import { ref } from 'vue';
import { useScafonix } from '@scafonix/vue';
import { ethers } from 'ethers';

const { 
  wallet, 
  connectWallet, 
  signTransaction, 
  showBackupModal, 
  exportWallet, 
  clearWallet,
  isConnecting, 
  error 
} = useScafonix({
  apiKey: 'YOUR_PUBLIC_API_KEY',
  backupOptions: {
    allowedMethods: ['google_drive', 'copy_key_share']
  }
});

const email = ref('[email protected]');

const handleConnect = async () => {
  await connectWallet(email.value, { skipBackupModal: true });
};

const handleBackup = async () => {
  await showBackupModal(email.value);
};

const handleExportKey = async () => {
  await exportWallet(email.value, { chain: '43113' });
};

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();
};

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 sent!");
};
</script>

<template>
  <div class="wallet-container">
    <p v-if="error" class="error">Error: {{ error.message }}</p>

    <div v-if="wallet" class="connected-state">
      <p>Address: {{ wallet.address }}</p>
      <button @click="sendTx">Send 0.01 ETH</button>
      <button @click="handleBackup">☁️ Backup (P3)</button>
      <button @click="handleExportKey">🔑 Export Key</button>
    </div>
    
    <div v-else class="login-state">
      <input v-model="email" type="email" />
      <button :disabled="isConnecting" @click="handleConnect">
        {{ isConnecting ? 'Connecting...' : 'Connect Wallet' }}
      </button>
    </div>
  </div>
</template>

License

MIT License