use names from people chain (#410)

* use names from people chain

* make it prerenderable

* longer names

.papi/descriptors/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-autogenerated.12090119445759399432",
+  "version": "0.1.0-autogenerated.12502056573861878413",
   "name": "@polkadot-api/descriptors",
   "files": [
     "dist"

.papi/polkadot-api.json

@@ -1,10 +1,14 @@
 {
-	"version": 0,
-	"descriptorPath": ".papi/descriptors",
-	"entries": {
-		"dot": {
-			"chain": "polkadot",
-			"metadata": ".papi/metadata/dot.scale"
-		}
-	}
-}
+  "version": 0,
+  "descriptorPath": ".papi/descriptors",
+  "entries": {
+    "dot": {
+      "chain": "polkadot",
+      "metadata": ".papi/metadata/dot.scale"
+    },
+    "people": {
+      "chain": "polkadot_people",
+      "metadata": ".papi/metadata/people.scale"
+    }
+  }
+}

src/components/app-bar/AppBar.svelte

@@ -6,6 +6,7 @@
 	import LogoBountyManagerHeader from './LogoBountyManagerHeader.svg';
 	import LoginDialog from './LoginDialog.svelte';
 	import { setActiveAccountBounties } from '../../utils/bounties';
+	import { getPeopleChainName } from '../../utils/people';
 	import { getAccounts } from './getAccounts';
 	import { type AccountInfo } from '../../types/account';
 	import BurgerMenu from './BurgerMenu.svelte';
@@ -16,6 +17,8 @@
 		loginDialogOpen = true;
 	}
 
+	let label: string | undefined;
+
 	onMount(async () => {
 		// Connect wallet automatically on the same tab.
 		const storedAccount = sessionStorage.getItem('account');
@@ -37,6 +40,8 @@
 
 		polkadotSigner.set(account.polkadotSigner);
 		setActiveAccountBounties();
+
+		label = await getPeopleChainName(address);
 	});
 </script>
 
@@ -59,7 +64,7 @@
 					<div class="w-6 h-6">
 						<PolkadotIcon address={$activeAccount.address} />
 					</div>
-					{$activeAccount.name || 'Account'}
+					{label || $activeAccount.name || 'Account'}
 					<span class="text-darkgray text-sm">[{truncateString($activeAccount.address, 4)}]</span>
 				</div>
 				<BurgerMenu />

src/components/common/CopyableAddress.svelte

@@ -1,10 +1,19 @@
 <script lang="ts">
 	import { truncateString } from '../../utils/common';
+	import { getPeopleChainName } from '../../utils/people';
 	import PolkadotIcon from './PolkadotIcon.svelte';
 
 	let showTooltip = false;
 	export let address: string | undefined;
 
+	let label: string | undefined;
+	$: {
+		label = undefined;
+		(async () => {
+			label = await getPeopleChainName(address);
+		})();
+	}
+
 	async function copyToClipboard(text: string | undefined) {
 		if (!text) {
 			console.error('No text to copy');
@@ -30,10 +39,10 @@
 			await copyToClipboard(address);
 		}}
 	>
-		<div class="h-4 w-4">
+		<span class="h-4 w-4">
 			<PolkadotIcon {address} />
-		</div>
-		<span>{truncateString(address, 8)}</span>
+		</span>
+		<span class="text-nowrap">{label || truncateString(address, 8)}</span>
 		<span class="material-symbols-outlined place-self-center mb-1"> content_copy </span>
 	</button>
 	<div class="w-80">

src/components/curator-actions/operations/ClaimBounty.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import Dialog from '../../common/Dialog.svelte';
 	import { dotApi } from '../../../stores';
-	import { truncateString } from '../../../utils/common';
 	import type { Bounty } from '../../../types/bounty';
 	import CopyableAddress from '../../common/CopyableAddress.svelte';
 	import { submitTransaction } from '../../../utils/transaction';
@@ -36,7 +35,7 @@
 		{#if bounty.beneficiary}
 			<div class="space-y-2">
 				<p class="text-xs">Beneficiary account</p>
-				<CopyableAddress address={truncateString(bounty.beneficiary, 13)} />
+				<CopyableAddress address={bounty.beneficiary} />
 			</div>
 		{/if}
 		<div class="space-y-2">

src/utils/people.ts

@@ -0,0 +1,50 @@
+import { get, writable } from 'svelte/store';
+import { withPolkadotSdkCompat } from 'polkadot-api/polkadot-sdk-compat';
+import { type Binary, createClient } from 'polkadot-api';
+import { people } from '@polkadot-api/descriptors';
+import { WsEvent } from '@polkadot-api/ws-provider/web';
+import { getWsProvider } from 'polkadot-api/ws-provider/web';
+
+const endpoints = [
+	'wss://polkadot-people-rpc.polkadot.io',
+	'wss://sys.ibp.network/people-polkadot',
+	'wss://people-polkadot.dotters.network',
+	'wss://rpc-people-polkadot.luckyfriday.io',
+	'wss://people-polkadot.public.curie.radiumblock.co'
+];
+
+function createPeopleTypedApi() {
+	const sdkProvider = withPolkadotSdkCompat(
+		getWsProvider({
+			endpoints,
+			timeout: 5000,
+			onStatusChanged(event) {
+				if (event.type !== WsEvent.CONNECTED) return;
+				console.log(`Connected People to ${event.uri}`);
+			}
+		})
+	);
+	const sdkClient = createClient(sdkProvider);
+	return sdkClient.getTypedApi(people);
+}
+
+const peopleApi = writable<undefined | ReturnType<typeof createPeopleTypedApi>>();
+
+export async function getPeopleChainName(address: string | undefined) {
+	if (!address) return;
+
+	if (!get(peopleApi)) {
+		peopleApi.set(createPeopleTypedApi());
+	}
+	const api = get(peopleApi);
+	if (!api) return;
+
+	const result = await api.query.Identity.IdentityOf.getValue(address);
+	if (!result) return;
+
+	const value = result[0].info.display.value as Binary | undefined;
+	const text = value?.asText();
+	if (!text) return;
+
+	return `✅ ${text.substring(0, 20)}`;
+}