Reputation Widget

Display a user's total reputation score with optional category breakdown.

Reputation Widget Light

Reputation Widget Dark

Quick Start

import { createWidget } from '@dotpassport/sdk';

const widget = createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'reputation'
});

widget.mount('#container');

---

Configuration Options

Option	Type	Default	Description
apiKey	string	required	Your DotPassport API key
address	string	required	Polkadot address to display
type	'reputation'	required	Widget type
theme	'light' | 'dark' | 'auto'	'light'	Color theme
showCategories	boolean	true	Show category breakdown
maxCategories	number	6	Max categories to display
compact	boolean	false	Compact display mode
className	string	''	Custom CSS class
onLoad	() => void	-	Callback when loaded
onError	(error: Error) => void	-	Error callback

---

Examples

Basic Usage

createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'reputation'
}).mount('#container');

With Categories

Reputation with Categories

createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'reputation',
  showCategories: true,
  maxCategories: 6
}).mount('#container');

Score Only (Compact)

Score Only

createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'reputation',
  showCategories: false,
  compact: true
}).mount('#container');

Dark Theme

createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'reputation',
  theme: 'dark',
  showCategories: true
}).mount('#container');

Auto Theme (System Preference)

createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'reputation',
  theme: 'auto' // Follows system preference
}).mount('#container');

---

React Integration

import { useEffect, useRef } from 'react';
import { createWidget } from '@dotpassport/sdk';

function ReputationWidget({ address, theme = 'light' }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const widgetRef = useRef<ReturnType<typeof createWidget>>();

  useEffect(() => {
    if (!containerRef.current) return;

    widgetRef.current = createWidget({
      apiKey: process.env.REACT_APP_DOTPASSPORT_API_KEY!,
      address,
      type: 'reputation',
      theme,
      showCategories: true
    });

    widgetRef.current.mount(containerRef.current);

    return () => widgetRef.current?.destroy();
  }, [address, theme]);

  return <div ref={containerRef} />;
}

---

Vue Integration

<template>
  <div ref="container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { createWidget } from '@dotpassport/sdk';

const props = defineProps({
  address: { type: String, required: true },
  theme: { type: String, default: 'light' }
});

const container = ref(null);
let widget = null;

onMounted(() => {
  widget = createWidget({
    apiKey: import.meta.env.VITE_DOTPASSPORT_API_KEY,
    address: props.address,
    type: 'reputation',
    theme: props.theme
  });
  widget.mount(container.value);
});

onUnmounted(() => widget?.destroy());

watch(() => props.address, (newAddress) => {
  widget?.update({ address: newAddress });
});
</script>

---

Event Handling

const widget = createWidget({
  apiKey: 'your_api_key',
  address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
  type: 'reputation',
  onLoad: () => {
    console.log('Reputation widget loaded');
    document.getElementById('loading')?.remove();
  },
  onError: (error) => {
    console.error('Widget error:', error);
    // Show fallback UI
  }
});

---

Dynamic Updates

const widget = createWidget({
  apiKey: 'your_api_key',
  address: initialAddress,
  type: 'reputation'
});

widget.mount('#container');

// Update address when wallet changes
walletProvider.on('accountChanged', (newAddress) => {
  widget.update({ address: newAddress });
});

// Toggle theme
themeToggle.addEventListener('click', () => {
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
  widget.update({ theme: newTheme });
});

// Refresh data
refreshButton.addEventListener('click', () => {
  widget.refresh();
});

---

Related

• Badge Widget

• Profile Widget

• Category Widget

• Lifecycle Methods

• Theming & Customization