feat(spaceward): fix key creation on small resolutions

spaceward/src/components/TxMsgDetails.tsx

@@ -26,6 +26,7 @@ import {
 	wardenProtoRegistry,
 } from "@wardenprotocol/wardenjs";
 import { useQueryHooks } from "@/hooks/useClient";
+import { extReplacer } from "@/utils/formatting";
 
 export function TxMsgDetails({ msg }: { msg: DecodeObject }) {
 	try {
@@ -325,8 +326,8 @@ function MsgFallbackDetails({ type, msg }: { type: string; msg: any }) {
 			</CardHeader>
 			<CardContent>
 				{Object.entries(msg).map(([key, value]) => (
-					<CardRow label={key} key={key}>
-						{String(value)}
+					<CardRow labelClassName="!w-52" label={key} key={key}>
+						{JSON.stringify(value, extReplacer, 2)}
 					</CardRow>
 				))}
 			</CardContent>

spaceward/src/features/keys/Keys.tsx

@@ -336,7 +336,7 @@ const KeyCard = ({ data: { addresses, key } }: { data: QueryKeyResponse }) => {
 							) : (
 								<div className="flex justify-between items-center w-full">
 									<input
-										className="font-display text-xl font-bold tracking-[0.1px] focus-visible:!ring-0 focus-visible:!ring-offset-0 !ring-0 border-0 outline-0"
+										className="font-display text-xl font-bold tracking-[0.1px] focus-visible:!ring-0 focus-visible:!ring-offset-0 !ring-0 border-0 outline-0 max-w-[80%]"
 										value={nameInput}
 										onChange={(e) =>
 											setNameInput(e.target.value)

spaceward/src/hooks/state.tsx

@@ -1,3 +1,4 @@
+import { extReplacer } from "@/utils/formatting";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useRef } from "react";
 
@@ -114,19 +115,7 @@ export function createPersistantState<T>(
 
 				window.localStorage.setItem(
 					lsKey,
-					JSON.stringify(_data, (_, v) =>
-						typeof v === "bigint"
-							? {
-								type: "bigint",
-								value: v.toString(),
-							}
-							: v instanceof Uint8Array
-								? {
-									type: "Uint8Array",
-									value: Array.from(v)
-								}
-								: v,
-					),
+					JSON.stringify(_data, extReplacer),
 				);
 				queryClient.setQueryData([prefix, queryKey], _data);
 			},

spaceward/src/utils/formatting.ts

@@ -1,5 +1,5 @@
 import { KeyType } from "@wardenprotocol/wardenjs/codegen/warden/warden/v1beta3/key";
-import { ActionStatus } from "@wardenprotocol/wardenjs/codegen/warden/act/v1beta1/action"
+import { ActionStatus } from "@wardenprotocol/wardenjs/codegen/warden/act/v1beta1/action";
 
 export function prettyKeyType(type: KeyType | string) {
 	switch (type) {
@@ -28,3 +28,16 @@ export function prettyActionStatus(s: ActionStatus | string) {
 export function prettyBytes(b: Uint8Array) {
 	return b.reduce((s, v) => s + v.toString(16).padStart(2, "0"), "");
 }
+
+export const extReplacer = (_: any, v: any) =>
+	typeof v === "bigint"
+		? {
+				type: "bigint",
+				value: v.toString(),
+			}
+		: v instanceof Uint8Array
+			? {
+					type: "Uint8Array",
+					value: Array.from(v),
+				}
+			: v;