@cryptforge/client-vue

Vue 3 component library for building CryptForge cryptocurrency wallet applications. Provides pre-built, customizable components for authentication, wallet management, device synchronization, and onboarding flows.

Installation

npm install @cryptforge/client-vue vue@^3.0.0
# or
pnpm add @cryptforge/client-vue vue@^3.0.0
# or
yarn add @cryptforge/client-vue vue@^3.0.0

Note: Vue 3 is a peer dependency and must be installed separately.

Quick Start

import { createApp } from 'vue';
import App from './App.vue';

// Import CryptForge Vue plugin and styles
import CryptforgeVue from '@cryptforge/client-vue';
import '@cryptforge/client-vue/dist/style.css';

const app = createApp(App);
app.use(CryptforgeVue);
app.mount('#app');

Features

• 🔐 Authentication Components - Complete authentication flows (create, restore, unlock)
• 💼 Wallet Components - Send, receive, transaction history, balance display
• 🔄 Sync Components - Device-to-device wallet synchronization
• 🚀 Onboarding Components - User onboarding and walkthrough screens
• ⚙️ Settings Components - Identity management, wallet settings
• 🎨 Customizable - Built with CSS modules for easy theming
• 📱 Responsive - Mobile-first design
• 🎯 Type-Safe - Full TypeScript support

Components

Authentication Components

<Authentication />

Main authentication orchestrator component that manages the complete auth flow.

<template>
  <Authentication />
</template>

<script setup lang="ts">
import { Authentication } from '@cryptforge/client-vue';
</script>

<GenerateSeed />

Component for generating and displaying a new BIP39 mnemonic seed phrase.

<template>
  <GenerateSeed @seed-generated="handleSeedGenerated" />
</template>

<script setup lang="ts">
import { GenerateSeed } from '@cryptforge/client-vue';

const handleSeedGenerated = (seed: string) => {
  console.log('Seed generated:', seed);
};
</script>

<VerifySeed />

Component for verifying user has backed up their seed phrase.

<template>
  <VerifySeed 
    :seed="userSeed" 
    @verified="handleVerified" 
  />
</template>

<RestoreSeed />

Component for restoring a wallet from an existing seed phrase.

<template>
  <RestoreSeed @seed-restored="handleRestored" />
</template>

<CreatePassword />

Component for creating a new wallet password.

<template>
  <CreatePassword 
    @password-created="handlePasswordCreated" 
  />
</template>

<EnterPassword />

Component for unlocking an existing wallet.

<template>
  <EnterPassword 
    @password-entered="handleUnlock" 
  />
</template>

<NameKeystore />

Component for naming a new wallet/keystore.

<template>
  <NameKeystore 
    @name-set="handleNameSet" 
  />
</template>

<SelectKeystore />

Component for selecting from multiple wallets/keystores.

<template>
  <SelectKeystore 
    @keystore-selected="handleSelection" 
  />
</template>

Wallet Components

<Wallet />

Main wallet component that displays balance and transaction history.

<template>
  <Wallet />
</template>

<script setup lang="ts">
import { Wallet } from '@cryptforge/client-vue';
</script>

<WalletOverview />

Compact wallet overview showing balance and quick actions.

<template>
  <WalletOverview />
</template>

<SendCrypto />

Component for sending cryptocurrency.

<template>
  <SendCrypto 
    @transaction-sent="handleSent" 
  />
</template>

<ReceiveCrypto />

Component for receiving cryptocurrency (displays QR code and address).

<template>
  <ReceiveCrypto />
</template>

<Transactions />

Transaction history component.

<template>
  <Transactions />
</template>

<Confirm />

Transaction confirmation component.

<template>
  <Confirm 
    :transaction="txData"
    @confirmed="handleConfirm"
    @cancelled="handleCancel"
  />
</template>

<SendSuccess />

Success screen after sending transaction.

<template>
  <SendSuccess 
    :transaction-hash="txHash"
  />
</template>

Sync Components

Components for synchronizing wallets across devices using peer-to-peer connections.

Admin (Primary Device)

<SyncSetupAdmin />

Entry point for device admin sync setup.

<AdminEnableBroadcast />

Enable broadcasting for device discovery.

<AdminBroadcastPIN />

Display PIN code for client device.

<AdminBroadcastKey />

Display QR code with connection key.

<AdminConnect />

Waiting for client connection.

<AdminDeviceFound />

Client device discovered.

<AdminFinishSetup />

Sync completion screen.

Client (Secondary Device)

<SyncSetupClient />

Entry point for client sync setup.

<ClientConnect />

Connect to admin device.

<ClientEnterKey />

Scan QR code or enter connection key.

<ClientEnterPIN />

Enter PIN from admin device.

<ClientError />

Error handling for sync issues.

Shared

<SyncProgressIndicator />

Progress indicator for sync operations.

<template>
  <SyncProgressIndicator 
    :progress="syncProgress"
    :status="syncStatus"
  />
</template>

Onboarding Components

<StartScreen />

Initial welcome/start screen.

<template>
  <StartScreen @get-started="handleStart" />
</template>

<Walkthrough />

Onboarding walkthrough with multiple slides.

<template>
  <Walkthrough 
    @complete="handleWalkthroughComplete" 
  />
</template>

<Slide />

Individual slide component for walkthrough.

<template>
  <Slide 
    title="Welcome"
    description="Get started with CryptForge"
    :image="slideImage"
  />
</template>

Setup Components

<CryptforgeApp />

Root application wrapper component.

<template>
  <CryptforgeApp>
    <!-- Your app content -->
  </CryptforgeApp>
</template>

<SetupComplete />

Setup completion screen.

<template>
  <SetupComplete @continue="handleContinue" />
</template>

Settings Components

<WalletButton />

Wallet selector button for settings.

<template>
  <WalletButton />
</template>

Composables

useAuth()

Authentication state and operations.

import { useAuth } from '@cryptforge/client-vue';

const {
  // State
  isUnlocked,
  currentIdentity,
  currentAddress,
  currentChain,
  
  // Methods
  createIdentity,
  unlock,
  lock,
  switchChain,
  generateMnemonic,
} = useAuth();

useWallet()

Wallet operations and balance management.

import { useWallet } from '@cryptforge/client-vue';

const {
  // State
  balance,
  transactions,
  isLoading,
  
  // Methods
  sendTransaction,
  getBalance,
  refreshTransactions,
} = useWallet();

useSyncAdmin()

Admin device sync operations.

import { useSyncAdmin } from '@cryptforge/client-vue';

const {
  // State
  broadcastId,
  connectionKey,
  connectedClients,
  
  // Methods
  enableBroadcast,
  waitForClient,
  sendData,
} = useSyncAdmin();

useSyncClient()

Client device sync operations.

import { useSyncClient } from '@cryptforge/client-vue';

const {
  // State
  isConnected,
  syncProgress,
  
  // Methods
  connectToAdmin,
  verifyPIN,
  receiveData,
} = useSyncClient();

useSetup()

Application setup state.

import { useSetup } from '@cryptforge/client-vue';

const {
  setupComplete,
  currentStep,
  completeSetup,
} = useSetup();

useSettings()

Application settings management.

import { useSettings } from '@cryptforge/client-vue';

const {
  settings,
  updateSettings,
  resetSettings,
} = useSettings();

useTheme()

Theme management.

import { useTheme } from '@cryptforge/client-vue';

const {
  theme,
  setTheme,
  toggleTheme,
} = useTheme();

useWalkthrough()

Onboarding walkthrough state.

import { useWalkthrough } from '@cryptforge/client-vue';

const {
  currentSlide,
  totalSlides,
  nextSlide,
  previousSlide,
  skipWalkthrough,
} = useWalkthrough();

useCryptForgeClient()

Low-level CryptForge client access.

import { useCryptForgeClient } from '@cryptforge/client-vue';

const { client } = useCryptForgeClient();

useNetworkPresenceClient()

Network presence and device discovery.

import { useNetworkPresenceClient } from '@cryptforge/client-vue';

const {
  isOnline,
  nearbyDevices,
  broadcast,
  discover,
} = useNetworkPresenceClient();

Complete Example

<template>
  <div :class="$style.app">
    <CryptforgeApp>
      <!-- Show auth if not unlocked -->
      <Authentication v-if="!isUnlocked" />
      
      <!-- Show wallet if unlocked -->
      <Wallet v-else>
        <template #header>
          <WalletButton />
        </template>
      </Wallet>
    </CryptforgeApp>
  </div>
</template>

<script setup lang="ts">
import {
  CryptforgeApp,
  Authentication,
  Wallet,
  WalletButton,
  useAuth,
} from '@cryptforge/client-vue';
import '@cryptforge/client-vue/dist/style.css';

const { isUnlocked } = useAuth();
</script>

<style module>
.app {
  width: 100%;
  height: 100vh;
}
</style>

Styling and Theming

All components use CSS modules for scoped styling. You can customize the look by:

1. CSS Variables

:root {
  --cryptforge-primary-color: #3b82f6;
  --cryptforge-secondary-color: #8b5cf6;
  --cryptforge-background: #ffffff;
  --cryptforge-text: #1f2937;
  --cryptforge-border: #e5e7eb;
  --cryptforge-radius: 8px;
}

2. Override Component Styles

<style>
/* Override specific component styles */
.wallet-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>

3. Use Theme Composable

import { useTheme } from '@cryptforge/client-vue';

const { setTheme } = useTheme();

// Apply custom theme
setTheme({
  primaryColor: '#3b82f6',
  backgroundColor: '#ffffff',
  textColor: '#1f2937',
});

TypeScript Support

All components and composables are fully typed:

import type { 
  AuthState,
  WalletState,
  Transaction,
} from '@cryptforge/client-vue';

const handleTransaction = (tx: Transaction) => {
  console.log('Transaction:', tx.hash);
};

Browser Compatibility

• ✅ Chrome, Firefox, Safari, Edge (latest 2 versions)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)
• ✅ Electron (renderer process)

Related Packages

• @cryptforge/auth - Core authentication functionality
• @cryptforge/core - Core types and interfaces
• @cryptforge/key-exchange - Device sync functionality
• @cryptforge/blockchain-evm - EVM blockchain support
• @cryptforge/blockchain-btc - Bitcoin support

Examples

See complete examples in:

• examples/vue-web-example/ - Web application example
• examples/vue-electron-example/ - Electron application example

License

MIT