Last updated
import { createWidget } from '@dotpassport/sdk';
const widget = createWidget({
apiKey: 'your_api_key',
address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
type: 'badge'
});
widget.mount('#container');createWidget({
apiKey: 'your_api_key',
address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
type: 'badge',
maxBadges: 10
}).mount('#container');createWidget({
apiKey: 'your_api_key',
address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
type: 'badge',
showProgress: true
}).mount('#container');createWidget({
apiKey: 'your_api_key',
address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
type: 'badge',
badgeKey: 'governance_voter'
}).mount('#container');createWidget({
apiKey: 'your_api_key',
address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
type: 'badge',
maxBadges: 4,
showProgress: false
}).mount('#container');createWidget({
apiKey: 'your_api_key',
address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
type: 'badge',
theme: 'dark'
}).mount('#container');import { useEffect, useRef } from 'react';
import { createWidget } from '@dotpassport/sdk';
interface BadgeWidgetProps {
address: string;
maxBadges?: number;
theme?: 'light' | 'dark' | 'auto';
}
function BadgeWidget({ address, maxBadges = 6, theme = 'light' }: BadgeWidgetProps) {
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: 'badge',
theme,
maxBadges,
showProgress: true
});
widgetRef.current.mount(containerRef.current);
return () => widgetRef.current?.destroy();
}, [address, theme, maxBadges]);
return <div ref={containerRef} />;
}<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 },
maxBadges: { type: Number, default: 6 }
});
const container = ref(null);
let widget = null;
onMounted(() => {
widget = createWidget({
apiKey: import.meta.env.VITE_DOTPASSPORT_API_KEY,
address: props.address,
type: 'badge',
maxBadges: props.maxBadges
});
widget.mount(container.value);
});
onUnmounted(() => widget?.destroy());
watch(() => props.address, (newAddress) => {
widget?.update({ address: newAddress });
});
</script>const widget = createWidget({
apiKey: 'your_api_key',
address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
type: 'badge',
onLoad: () => {
console.log('Badges loaded');
},
onError: (error) => {
console.error('Failed to load badges:', error);
}
});const widget = createWidget({
apiKey: 'your_api_key',
address: initialAddress,
type: 'badge'
});
widget.mount('#container');
// Update when address changes
function onAddressChange(newAddress: string) {
widget.update({ address: newAddress });
}
// Refresh badges
function refreshBadges() {
widget.refresh();
}