Add people parachain (#124)

.papi/descriptors/package.json

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

.papi/polkadot-api.json

@@ -17,6 +17,18 @@
     "westend": {
       "chain": "westend2",
       "metadata": ".papi/metadata/westend.scale"
+    },
+    "dotPeople": {
+      "chain": "polkadot_people",
+      "metadata": ".papi/metadata/dotPeople.scale"
+    },
+    "ksmPeople": {
+      "chain": "ksmcc3_people",
+      "metadata": ".papi/metadata/ksmPeople.scale"
+    },
+    "westendPeople": {
+      "chain": "westend2_people",
+      "metadata": ".papi/metadata/westendPeople.scale"
     }
   }
-}
+}

src/assets/peopleNetworks.json

@@ -0,0 +1,74 @@
+{
+  "polkadotPeople": {
+    "nodes": [
+      {
+        "url": "wss://sys.ibp.network/people-polkadot",
+        "name": "IBP1"
+      },
+      {
+        "url": "wss://sys.dotters.network/people-polkadot",
+        "name": "IBP2"
+      },
+      {
+        "url": "wss://rpc-people-polkadot.luckyfriday.io",
+        "name": "LuckyFriday"
+      },
+      {
+        "url": "wss://polkadot-people-rpc.polkadot.io",
+        "name": "Parity"
+      },
+      {
+        "url": "wss://people-polkadot.public.curie.radiumblock.co/ws",
+        "name": "RadiumBlock"
+      }
+    ]
+  },
+  "kusamaPeople": {
+    "nodes": [
+      {
+        "url": "wss://people-kusama-rpc.dwellir.com",
+        "name": "Dwellir"
+      },
+      {
+        "url": "wss://sys.ibp.network/people-kusama",
+        "name": "IBP1"
+      },
+      {
+        "url": "wss://sys.dotters.network/people-kusama",
+        "name": "IBP2"
+      },
+      {
+        "url": "wss://rpc-people-kusama.luckyfriday.io",
+        "name": "LuckyFriday"
+      },
+      {
+        "url": "wss://kusama-people-rpc.polkadot.io",
+        "name": "Parity"
+      },
+      {
+        "url": "wss://ksm-rpc.stakeworld.io/people",
+        "name": "Stakeworld"
+      }
+    ]
+  },
+  "westendPeople": {
+    "nodes": [
+      {
+        "url": "wss://people-westend-rpc.dwellir.com",
+        "name": "Dwellir"
+      },
+      {
+        "url": "wss://sys.ibp.network/people-westend",
+        "name": "IBP1"
+      },
+      {
+        "url": "wss://sys.dotters.network/people-westend",
+        "name": "IBP2"
+      },
+      {
+        "url": "wss://westend-people-rpc.polkadot.io",
+        "name": "Parity"
+      }
+    ]
+  }
+}

src/components/DelegateCard.tsx

@@ -3,15 +3,17 @@ import { Card } from '@/components/ui/card'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { Delegate } from '@/contexts/DelegatesContext'
 import { ContentReveal } from './ui/content-reveal'
+import { cn } from '@/lib/utils'
 import { sanitizeString } from '@/lib/utils'
 import { useNetwork } from '@/contexts/NetworkContext'
-import { cn } from '@/lib/utils'
 import { toast } from 'sonner'
 import { LinkIcon } from 'lucide-react'
+
 import Markdown from 'react-markdown'
 import { H, H2, H3, Hr, P } from './ui/md'
 import { AnchorLink } from './ui/anchorLink'
 import { useCallback, useMemo } from 'react'
+import { IdentityInfo } from './IdentityInfo'
 
 interface Props {
   delegate: Delegate
@@ -63,16 +65,18 @@ export const DelegateCard = ({
 
   return (
     <Card className={cn('flex flex-col p-4', className)}>
-      <div className="flex flex-col gap-4 md:flex-row">
+      <div className="flex columns-3">
         <DelegateAvatar />
-        <div className="w-full">
-          <div className="flex items-center gap-1 py-2 text-xl font-semibold">
-            {name}
-            {hasShareButton && (
-              <Button variant="ghost" onClick={onCopy} size="icon">
-                <LinkIcon className="h-4 w-4 text-accent-foreground" />
-              </Button>
-            )}
+        <div className="w-full p-2">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-1 py-2 text-xl font-semibold">
+              <IdentityInfo address={address} name={name} />
+              {hasShareButton && (
+                <Button variant="ghost" onClick={onCopy} size="icon">
+                  <LinkIcon className="h-4 w-4 text-accent-foreground" />
+                </Button>
+              )}
+            </div>
           </div>
           <div className="text-accent-foreground">
             <div className="break-words text-lg">{shortDescription}</div>

src/components/IdentityInfo.tsx

@@ -0,0 +1,68 @@
+import { BsTwitterX } from 'react-icons/bs'
+import { IoCheckmarkCircle, IoMail } from 'react-icons/io5'
+import { TbWorld } from 'react-icons/tb'
+import { Button } from './ui/button'
+import { useIdentity } from '@/hooks/useIdentity'
+import { TbCircleDashedMinus } from 'react-icons/tb'
+
+interface Props {
+  name: string
+  address: string
+}
+
+export const IdentityInfo = ({ name, address }: Props) => {
+  const identity = useIdentity(address)
+
+  return (
+    <>
+      {identity?.display ? (
+        <div className="flex items-center">
+          {identity?.display}
+          {identity?.judgement ? (
+            <IoCheckmarkCircle className="ml-4 text-green-500" />
+          ) : (
+            <TbCircleDashedMinus className="ml-4 text-gray-500" />
+          )}
+        </div>
+      ) : (
+        name
+      )}
+      {identity && (
+        <div
+          className={`flex items-center justify-around text-${identity?.judgement ? 'green' : 'gray'}-500`}
+        >
+          {identity?.web && (
+            <Button
+              variant="ghost"
+              onClick={() => window.open(identity?.web as string, '_blank')}
+              size="icon"
+            >
+              <TbWorld />
+            </Button>
+          )}
+          {identity?.twitter && (
+            <Button
+              variant="ghost"
+              onClick={() =>
+                window.open(
+                  `https://twitter.com/@${identity?.twitter}`,
+                  '_blank',
+                )
+              }
+              size="icon"
+            >
+              <BsTwitterX />
+            </Button>
+          )}
+          {identity?.email && (
+            <Button variant="ghost" size="icon">
+              <a href={`mailto:${identity?.email}`}>
+                <IoMail />
+              </a>
+            </Button>
+          )}
+        </div>
+      )}
+    </>
+  )
+}

src/components/ui/address-display.tsx

@@ -1,3 +1,4 @@
+import { useIdentity } from '@/hooks/useIdentity'
 import { cn } from '@/lib/utils'
 import { Polkicon } from '@polkadot-ui/react'
 
@@ -8,11 +9,13 @@ type Props = {
 }
 
 export const AddressDisplay = ({ address, size, className = '' }: Props) => {
+  const identity = useIdentity(address)
+
   return (
     <div className={cn('flex items-center gap-2', className)}>
       <Polkicon address={address} size={size} copy outerColor="transparent" />
       <span className="text-gray-500">
-        {address.slice(0, 6) + '...' + address.slice(-6)}
+        {identity?.display || address.slice(0, 6) + '...' + address.slice(-6)}
       </span>
     </div>
   )

src/contexts/AccountsContext.tsx

@@ -21,6 +21,10 @@ export interface IAccountContext {
   selectAccount: (account: InjectedPolkadotAccount | undefined) => void
 }
 
+type AccountAddressType = {
+  address: string
+}
+
 const AccountContext = createContext<IAccountContext | undefined>(undefined)
 
 const AccountContextProvider = ({ children }: AccountContextProps) => {
@@ -50,7 +54,7 @@ const AccountContextProvider = ({ children }: AccountContextProps) => {
   useEffect(() => {
     if (localStorageAccount) {
       const account = accounts.find(
-        (account) => account.address === localStorageAccount,
+        ({ address }: AccountAddressType) => address === localStorageAccount,
       )
       if (account) {
         selectAccount(account)