update to released polkahub, add more contrast to input components

src/index.css

@@ -74,7 +74,7 @@
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0 / 50%);
+  --input: oklch(0.922 0 0 / 70%);
   --ring: oklch(0.708 0 0 / 50%);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
@@ -107,8 +107,8 @@
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 8%);
-  --input: oklch(1 0 0 / 5%);
+  --border: oklch(1 0 0 / 12%);
+  --input: oklch(1 0 0 / 10%);
   --ring: oklch(0.556 0 0 / 50%);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);

src/main.tsx

@@ -1,3 +1,5 @@
+import { Buffer } from "buffer"
+globalThis.Buffer = Buffer
 import { dynamicBuilder$ } from "@/state/chains/chain.state"
 import { RemoveSubscribe, Subscribe } from "@react-rxjs/core"
 import { PolkaHubProvider } from "polkahub"

src/state/polkahub.ts

@@ -13,10 +13,10 @@ import {
   knownChains,
   Plugin,
 } from "polkahub"
-import { combineLatest, filter, firstValueFrom, map } from "rxjs"
+import { combineLatest, filter, firstValueFrom, map, switchMap } from "rxjs"
 import { chainProperties$ } from "./chain-props.state"
 import { canSetStorage$, client$ } from "./chains/chain.state"
-import { getAddressName, isVerified } from "./identity.state"
+import { identity$, isVerified } from "./identity.state"
 
 const selectedAccountPlugin = createSelectedAccountPlugin()
 const pjsWalletProvider = createPjsWalletProvider()
@@ -67,34 +67,37 @@ export const polkaHub = createPolkaHub(
     [walletConnectProvider],
   ]).pipe(map((v: (Plugin<any> | null)[]) => v.filter((v) => v != null))),
   {
-    async getIdentity(address) {
-      const res = await getAddressName(address)
-      return res
-        ? {
-            name: res.displayName,
-            verified: isVerified(res) ?? false,
+    getIdentity: (address) =>
+      identity$(address).pipe(
+        map((res) =>
+          res
+            ? {
+                name: res.displayName,
+                verified: isVerified(res) ?? false,
+              }
+            : null,
+        ),
+      ),
+    getBalance: (address) =>
+      client$.pipe(
+        switchMap((client) =>
+          combineLatest([
+            chainProperties$,
+            client
+              .getTypedApi(polkadot_people)
+              .query.System.Account.getValue(address),
+          ]),
+        ),
+        map(([chainProps, balance]) => {
+          if (chainProps?.tokenDecimals == null) return null
+
+          return {
+            value: balance.data.reserved + balance.data.free,
+            decimals: chainProps.tokenDecimals,
+            symbol: chainProps.tokenSymbol,
           }
-        : null
-    },
-    async getBalance(address) {
-      const client = await firstValueFrom(client$)
-      const [chainProps, balance] = await firstValueFrom(
-        combineLatest([
-          chainProperties$,
-          client
-            .getTypedApi(polkadot_people)
-            .query.System.Account.getValue(address),
-        ]),
-      )
-
-      if (chainProps?.tokenDecimals == null) return null
-
-      return {
-        value: balance.data.reserved + balance.data.free,
-        decimals: chainProps.tokenDecimals,
-        symbol: chainProps.tokenSymbol,
-      }
-    },
+        }),
+      ),
   },
 )