DotPassport Widget Demo

; } // Usage function App() { return ( ); } ``` #### Vue 3 ```vue ``` #### Svelte ```svelte

``` #### Vanilla JavaScript ```html DotPassport Widget Demo ``` *** ### Wallet Integration Connect DotPassport SDK with popular Polkadot wallets to display reputation data for connected users. #### Talisman Wallet ```typescript import { getWallets } from '@talismn/connect-wallets'; import { DotPassportClient, createWidget } from '@dotpassport/sdk'; // 1. Connect to Talisman const wallets = getWallets(); const talisman = wallets.find(w => w.extensionName === 'talisman'); await talisman.enable('My App'); const accounts = await talisman.getAccounts(); const address = accounts[0].address; // 2. Use with DotPassport API const client = new DotPassportClient({ apiKey: 'your_key' }); const scores = await client.getScores(address); console.log(`Reputation: ${scores.totalScore}`); // 3. Or use with Widgets const widget = createWidget({ apiKey: 'your_key', address: address, type: 'reputation' }); widget.mount('#widget'); // 4. Update widget when account changes talisman.subscribeAccounts((accounts) => { widget.update({ address: accounts[0].address }); }); ``` #### SubWallet ```typescript import { getWalletBySource, isWalletInstalled } from '@subwallet/wallet-connect'; import { DotPassportClient, createWidget } from '@dotpassport/sdk'; // 1. Check and connect to SubWallet const installed = await isWalletInstalled('subwallet-js'); if (!installed) { window.open('https://subwallet.app', '_blank'); } const wallet = await getWalletBySource('subwallet-js'); await wallet.enable(); const accounts = await wallet.getAccounts(); const address = accounts[0].address; // 2. Use with DotPassport API const client = new DotPassportClient({ apiKey: 'your_key' }); const scores = await client.getScores(address); // 3. Or use with Widgets const widget = createWidget({ apiKey: 'your_key', address: address, type: 'reputation', theme: 'dark' }); widget.mount('#widget'); // 4. Subscribe to account changes await wallet.subscribeAccounts((accounts) => { if (accounts.length > 0) { widget.update({ address: accounts[0].address }); } }); ``` #### React Hook Example ```tsx import { useState, useEffect, useRef } from 'react'; import { getWallets } from '@talismn/connect-wallets'; import { createWidget } from '@dotpassport/sdk'; function useDotPassportWallet(apiKey: string) { const [address, setAddress] = useState(null); const widgetRef = useRef>(); const containerRef = useRef(null); const connect = async () => { const wallets = getWallets(); const talisman = wallets.find(w => w.extensionName === 'talisman'); await talisman?.enable('My App'); const accounts = await talisman?.getAccounts(); if (accounts?.[0]) { setAddress(accounts[0].address); } }; useEffect(() => { if (!address || !containerRef.current) return; widgetRef.current = createWidget({ apiKey, address, type: 'reputation' }); widgetRef.current.mount(containerRef.current); return () => widgetRef.current?.destroy(); }, [address, apiKey]); return { connect, address, containerRef }; } // Usage function App() { const { connect, address, containerRef } = useDotPassportWallet('your_key'); return (

{!address ? ( ) : (

)}

); } ``` > **📖 Detailed Wallet Guides:** > > * [Wallet Integration Overview](https://docs.dotpassport.io/wallet-integration/overview) > * [Talisman Integration](https://docs.dotpassport.io/wallet-integration/talisman) - Complete guide with React & Vanilla JS examples > * [SubWallet Integration](https://docs.dotpassport.io/wallet-integration/subwallet) - Complete guide with error handling *** ### Custom Styling Widgets support CSS variable overrides for custom styling: ```css /* Override widget theme colors */ .my-custom-widget { --dp-primary: #8b5cf6; --dp-secondary: #ec4899; --dp-bg: #ffffff; --dp-bg-secondary: #f9fafb; --dp-text-primary: #111827; --dp-text-secondary: #6b7280; --dp-border: #e5e7eb; --dp-border-radius: 12px; --dp-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } /* Dark theme overrides */ .my-custom-widget.dp-theme-dark { --dp-bg: #1f2937; --dp-bg-secondary: #374151; --dp-text-primary: #f9fafb; --dp-text-secondary: #9ca3af; --dp-border: #4b5563; } ``` *** ### Error Handling The SDK provides structured error handling through `DotPassportError`: ```typescript import { DotPassportClient, DotPassportError } from '@dotpassport/sdk'; const client = new DotPassportClient({ apiKey: 'your_key' }); try { const scores = await client.getScores('invalid-address'); } catch (error) { if (error instanceof DotPassportError) { console.error('Status:', error.statusCode); // 404 console.error('Message:', error.message); // "User not found" console.error('Response:', error.response); // Full error response // Handle specific errors switch (error.statusCode) { case 401: console.error('Invalid API key'); break; case 404: console.error('User not found'); break; case 429: console.error('Rate limit exceeded'); break; default: console.error('Unknown error'); } } } ``` #### Error Codes Reference | Code | Name | Description | | ----- | ----------------- | ---------------------------------- | | `400` | Bad Request | Invalid request parameters | | `401` | Unauthorized | Invalid or missing API key | | `403` | Forbidden | Access denied to resource | | `404` | Not Found | User, badge, or category not found | | `429` | Too Many Requests | Rate limit exceeded | | `500` | Server Error | Internal server error | *** ### TypeScript Support The SDK is written in TypeScript with complete type definitions. #### Importing Types ```typescript import type { // Client configuration DotPassportConfig, // API response types UserProfile, UserScores, UserBadges, CategoryScore, BadgeDefinition, CategoryDefinition, // Widget configuration WidgetConfig, ReputationWidgetConfig, BadgeWidgetConfig, ProfileWidgetConfig, CategoryWidgetConfig, // Error type DotPassportError } from '@dotpassport/sdk'; ``` #### Type-Safe Usage ```typescript import { DotPassportClient, type UserScores, type UserBadges } from '@dotpassport/sdk'; const client = new DotPassportClient({ apiKey: 'your_key' }); // Fully typed responses const scores: UserScores = await client.getScores(address); scores.totalScore; // ✅ number scores.categories; // ✅ CategoryScore[] scores.invalid; // ❌ TypeScript error const badges: UserBadges = await client.getBadges(address); badges.count; // ✅ number badges.badges[0].badgeKey; // ✅ string ``` *** ### Examples #### Complete Dashboard Example ```typescript import { DotPassportClient, createWidget } from '@dotpassport/sdk'; const API_KEY = 'your_api_key'; const ADDRESS = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY'; // Initialize client for API calls const client = new DotPassportClient({ apiKey: API_KEY }); // Fetch and display data programmatically async function loadDashboard() { const [profile, scores, badges] = await Promise.all([ client.getProfile(ADDRESS), client.getScores(ADDRESS), client.getBadges(ADDRESS) ]); console.log(`Welcome, ${profile.displayName}!`); console.log(`Your reputation score: ${scores.totalScore}`); console.log(`Badges earned: ${badges.count}`); } // Create widgets for visual display const reputationWidget = createWidget({ apiKey: API_KEY, address: ADDRESS, type: 'reputation', theme: 'auto', showCategories: true }); const badgeWidget = createWidget({ apiKey: API_KEY, address: ADDRESS, type: 'badge', maxBadges: 4 }); const profileWidget = createWidget({ apiKey: API_KEY, address: ADDRESS, type: 'profile' }); // Mount widgets reputationWidget.mount('#reputation-section'); badgeWidget.mount('#badges-section'); profileWidget.mount('#profile-section'); // Handle address changes function updateAddress(newAddress: string) { reputationWidget.update({ address: newAddress }); badgeWidget.update({ address: newAddress }); profileWidget.update({ address: newAddress }); } ``` #### Widget with Event Handling ```typescript const widget = createWidget({ apiKey: 'your_key', address: 'polkadot_address', type: 'reputation', onLoad: () => { console.log('Widget loaded successfully'); document.getElementById('loading')?.remove(); }, onError: (error) => { console.error('Widget failed to load:', error); document.getElementById('widget-container')!.innerHTML = `

Failed to load reputation data

`; } }); widget.mount('#widget-container'); // Later: refresh data document.getElementById('refresh-btn')?.addEventListener('click', () => { widget.refresh(); }); // Later: cleanup window.addEventListener('beforeunload', () => { widget.destroy(); }); ``` *** ### Testing The SDK includes comprehensive test coverage with 236+ tests. #### Running Tests ```bash # Run all tests npm test # Run with coverage report npm run test:coverage # Run in watch mode npm run test:watch # Run only unit tests npm run test:unit # Run only integration tests npm run test:integration ``` #### Coverage | Metric | Coverage | | ---------- | -------- | | Statements | 86%+ | | Branches | 86%+ | | Functions | 86%+ | | Lines | 86%+ | *** ### Contributing We welcome contributions from the community! Here's how you can help: #### Ways to Contribute * 🐛 **Report Bugs** - Open an issue with a clear description * 💡 **Suggest Features** - Share your ideas for improvements * 📝 **Improve Docs** - Help make our documentation better * 🔧 **Submit PRs** - Fix bugs or add new features #### Development Setup ```bash # 1. Fork and clone the repository git clone https://github.com/YOUR_USERNAME/sdk.git cd sdk # 2. Install dependencies npm install # 3. Run tests to ensure everything works npm test # 4. Start development npm run build ``` #### Code Style * We use **ESLint** and **Prettier** for code formatting * Write **TypeScript** with strict type checking * Add **tests** for new features * Update **documentation** for API changes #### Pull Request Process 1. Create a feature branch: `git checkout -b feature/amazing-feature` 2. Make your changes and commit: `git commit -m 'Add amazing feature'` 3. Push to your fork: `git push origin feature/amazing-feature` 4. Open a Pull Request with a clear description #### Commit Convention We follow [Conventional Commits](https://www.conventionalcommits.org/): ``` feat: add new badge widget animation fix: resolve theme switching bug docs: update API reference test: add integration tests for profile widget refactor: improve widget rendering performance ``` *** ### Author ![Sachin](https://github.com/SachinCoder1.png) **Sachin** [![GitHub](https://img.shields.io/badge/GitHub-SachinCoder1-181717?style=flat-square\&logo=github)](https://github.com/SachinCoder1) [![Twitter](https://img.shields.io/badge/Twitter-@SachinCoder1-1DA1F2?style=flat-square\&logo=twitter\&logoColor=white)](https://twitter.com/AgarwalSacwordi) *Building the future of Web3 identity and reputation* *** ### License This project is licensed under the **MIT License** - see the [LICENSE](https://github.com/dotpassport/dotpassport-sdk/blob/main/LICENSE/README.md) file for details. ``` MIT License Copyright (c) 2024 DotPassport Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software... ``` *** ### Links | Resource | Link | | ---------------- | ---------------------------------------------------------------------------- | | 📦 NPM Package | [npmjs.com/@dotpassport/sdk](https://www.npmjs.com/package/@dotpassport/sdk) | | 📖 Documentation | [docs.dotpassport.xyz](https://docs.dotpassport.xyz) | | 🌐 Website | [dotpassport.xyz](https://dotpassport.xyz) | | 🐛 Issues | [GitHub Issues](https://github.com/SachinCoder1/dotpassport-sdk/issues) | | 💬 Discord | [Join our community](https://discord.gg/dotpassport) | *** [**⬆ Back to Top**](#dotpassport-sdk) *** Made with ❤️ by the DotPassport Team *Empowering Web3 identity and reputation*