Merge branch 'cs-delegation-verify' into cs-delegation

src/actions/delegate/ChooseChain.tsx

@@ -1,6 +1,5 @@
 import { Link } from "react-router-dom"
-
-const SUPPORTED_CHAINS = ["polkadot", "kusama"]
+import { SUPPORTED_CHAINS } from "./utils"
 
 export const ChooseChain = () => {
   return (

src/actions/delegate/ChooseDelegate.tsx

@@ -1,4 +1,7 @@
+import { useStateObservable } from "@react-rxjs/core"
 import { Link } from "react-router-dom"
+import { routeChain$ } from "./delegate"
+import { isChainValid } from "./utils"
 
 const SUPPORTED_DELEGATES: Array<{ address: string; name: string }> = [
   {
@@ -12,19 +15,33 @@ const SUPPORTED_DELEGATES: Array<{ address: string; name: string }> = [
 ]
 
 export const ChooseDelegate = () => {
+  const chainData = useStateObservable(routeChain$)
   return (
     <div className="flex flex-col text-center items-center">
-      <h1 className="text-lg my-5 font-semibold">Choose delegate</h1>
-      {SUPPORTED_DELEGATES.map(({ address, name }) => (
-        <Link to={address}>
+      {isChainValid(chainData ?? "") ? (
+        <>
+          <h1 className="text-lg my-5 font-semibold">Choose delegate</h1>
+          {SUPPORTED_DELEGATES.map(({ address, name }) => (
+            <Link to={address}>
+              <div className="flex flex-col text-left  border-[1px] border-gray-200 rounded-lg p-5">
+                <h2 className="text-lg font-semibold">{name}</h2>
+                <div className="flex flex-row justify-between gap-2">
+                  Address: <div className="text-right">{address}</div>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </>
+      ) : (
+        <Link to="..">
+          <h1 className="text-lg my-5 font-semibold">Chain not supported.</h1>
           <div className="flex flex-col text-left  border-[1px] border-gray-200 rounded-lg p-5">
-            <h2 className="text-lg font-semibold">{name}</h2>
-            <div className="flex flex-row justify-between gap-2">
-              Address: <div className="text-right">{address}</div>
-            </div>
+            <h2 className="text-lg font-semibold">
+              Click here to choose chain
+            </h2>
           </div>
         </Link>
-      ))}
+      )}
     </div>
   )
 }

src/actions/delegate/DelegateAction.tsx

@@ -101,7 +101,7 @@ const [convictionInput$, onConvictionInputChanges] = createSignal<
 >()
 const conviction$: StateObservable<0 | 1 | 2 | 3 | 4 | 5 | 6 | SUSPENSE> =
   state(
-    combineLatest(routeChain$, delegateAccount$, selectedAccount$).pipe(
+    combineLatest([routeChain$, routeDelegateAccount$, selectedAccount$]).pipe(
       switchMapSuspended(([, , account]) => {
         if (!account) return EMPTY
         return concat(

src/actions/delegate/delegate.ts

@@ -9,14 +9,12 @@ export const routeChain$ = state(
   routeMatch$(PATTERN_CHAIN).pipe(
     map((routeData) => routeData?.params?.chain ?? null),
   ),
-  null,
 )
 routeChain$.subscribe()
 
-export const delegateAccount$ = state(
+export const routeDelegateAccount$ = state(
   routeMatch$(PATTERN_ACCOUNT).pipe(
     map((routeData) => routeData?.params?.account ?? null),
   ),
-  null,
 )
-delegateAccount$.subscribe()
+routeDelegateAccount$.subscribe()

src/actions/delegate/utils.ts

@@ -0,0 +1,13 @@
+import { getSs58AddressInfo } from "polkadot-api"
+
+export const SUPPORTED_CHAINS = ["polkadot", "kusama"]
+
+export const isChainValid = (chain: string) => SUPPORTED_CHAINS.includes(chain)
+
+export const isAddressValid = (addr: string) => {
+  try {
+    return getSs58AddressInfo(addr).isValid
+  } catch {
+    return false
+  }
+}

src/api/delegation.ts

@@ -1,5 +1,5 @@
-import { Enum, SS58String } from "polkadot-api"
-import { polkadotApi as api } from "./"
+import { Binary, Enum, SS58String } from "polkadot-api"
+import { polkadotApi as api, polkadotPeopleApi } from "./"
 import { MultiAddress, VotingConviction } from "@polkadot-api/descriptors"
 
 export const getOptimalAmount = async (
@@ -98,6 +98,12 @@ export const getTrackInfo = async (
   )
 }
 
+export const getAddressName = async (addr: string): Promise<string> => {
+  const id = await polkadotPeopleApi.query.Identity.IdentityOf.getValue(addr)
+  if (id == null || id[0].info.display.value == null) return addr
+  return id[0].info.display.value.asText()
+}
+
 export const delegate = async (
   from: SS58String,
   target: SS58String,