fix(spaceward): wrong react-query linked dependency (#192)

* fix(spaceward): don't try to execute queries if client not yet ready * chore(spaceward): bump react-query to v4.36.1 * fix(spaceward): missing key in lists and buttons descendant of other buttons * fix(wardjs): move react-query to peer deps * fix(spaceward): use file: instead of link: in package.json
warden-protocol · Apr 17, 2024 · 7b4907d · 7b4907d
1 parent 338a810
commit 7b4907d
Show file tree

Hide file tree

Showing 17 changed files with 5,815 additions and 6,526 deletions.
diff --git a/spaceward/package.json b/spaceward/package.json
@@ -57,16 +57,16 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@rollup/plugin-inject": "^5.0.5",
     "@storyblok/react": "^3.0.9",
-    "@tanstack/query-core": "^5.14.2",
-    "@tanstack/react-query": "^4.13.5",
+    "@tanstack/query-core": "^4.36.1",
+    "@tanstack/react-query": "^4.36.1",
     "@tharsis/proto": "^0.1.20",
     "@uidotdev/usehooks": "^2.4.1",
     "@walletconnect/auth-client": "^2.1.2",
     "@walletconnect/core": "^2.11.0",
     "@walletconnect/types": "^2.11.0",
     "@walletconnect/utils": "^2.11.0",
     "@walletconnect/web3wallet": "^1.10.0",
-    "@wardenprotocol/wardjs": "link:../wardjs",
+    "@wardenprotocol/wardjs": "file:../wardjs",
     "buffer": "^6.0.3",
     "chain-registry": "^1.29.1",
     "class-variance-authority": "^0.7.0",

diff --git a/spaceward/pnpm-lock.yaml b/spaceward/pnpm-lock.yaml
diff --git a/spaceward/src/components/AddressAvatar.tsx b/spaceward/src/components/AddressAvatar.tsx
@@ -46,7 +46,7 @@ export default function AddressAvatar({
 			) : (
 				<TooltipProvider>
 					<Tooltip>
-						<TooltipTrigger>
+						<TooltipTrigger asChild>
 							<Avatar>
 								<AvatarImage
 									className={clsx(

diff --git a/spaceward/src/components/SendEth.tsx b/spaceward/src/components/SendEth.tsx
@@ -46,7 +46,7 @@ async function getEthBalance(address: string) {
 
 function SendEth() {
 	const { state, error, requestSignature, reset } = useRequestSignature();
-	const { useKeyById } = useQueryHooks();
+	const { useKeyById, isReady } = useQueryHooks();
 	const chainId = 11155111;
 	const queryParameters = new URLSearchParams(window.location.search);
 	const keyId = queryParameters.get("key") || "";
@@ -56,6 +56,9 @@ function SendEth() {
 			id: Long.fromString(keyId),
 			deriveAddresses: [AddressType.ADDRESS_TYPE_ETHEREUM],
 		},
+		options: {
+			enabled: isReady,
+		},
 	});
 
 	const k = q.data?.key;

diff --git a/spaceward/src/components/ui/copy.tsx b/spaceward/src/components/ui/copy.tsx
@@ -19,7 +19,6 @@ const buttonVariants = cva("", {
 export interface ButtonProps
 	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
 		VariantProps<typeof buttonVariants> {
-	asChild?: boolean;
 	value?: string;
 	split?: boolean;
 }
@@ -39,7 +38,7 @@ const Copy = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			<div className="relative flex">
 				{value && (
 					<CopyToClipboard text={value} onCopy={onCopy}>
-						<button
+						<span
 							className={cn(
 								buttonVariants({ variant, className }),
 							)}
@@ -55,7 +54,7 @@ const Copy = React.forwardRef<HTMLButtonElement, ButtonProps>(
 							) : (
 								value
 							)}
-						</button>
+						</span>
 					</CopyToClipboard>
 				)}
 				{showTooltip && (

diff --git a/spaceward/src/features/actions/Actions.tsx b/spaceward/src/features/actions/Actions.tsx
@@ -56,7 +56,7 @@ export function Actions() {
 					{actionsArrays.map((group) => {
 						const group_date = new Date(group?.date);
 						return (
-							<div className="flex flex-col space-y-2 mb-8">
+							<div className="flex flex-col space-y-2 mb-8" key={group.date}>
 								<span className="text-sm text-muted-foreground">
 									{group_date.toLocaleDateString("en-GB", {
 										weekday: "long",
@@ -76,6 +76,7 @@ export function Actions() {
 											});
 										return (
 											<AccordionItem
+												key={action.id}
 												value={`item-${action?.id.toString()}`}
 												className={`p-4 border border-background border-b-0 last:border-b first:rounded-t-xl last:rounded-b-xl py-2 bg-card`}
 											>

diff --git a/spaceward/src/features/assets/Assets.tsx b/spaceward/src/features/assets/Assets.tsx
@@ -38,7 +38,7 @@ async function getEthBalance(address: string) {
 }
 
 export function Assets({ spaceId }: { spaceId: string }) {
-	const { useKeysBySpaceId } = useQueryHooks();
+	const { useKeysBySpaceId, isReady } = useQueryHooks();
 	const query = useKeysBySpaceId({
 		request: {
 			spaceId: Long.fromString(spaceId),
@@ -50,6 +50,9 @@ export function Assets({ spaceId }: { spaceId: string }) {
 				limit: Long.fromInt(10),
 			}),
 		},
+		options: {
+			enabled: isReady,
+		},
 	});
 
 	if (query.status === "loading") {
@@ -72,7 +75,7 @@ export function Assets({ spaceId }: { spaceId: string }) {
 	return (
 		<>
 			{query.data?.keys?.map((key) => (
-				<div className="flex flex-col flex-1 h-full min-w-[600px]">
+				<div className="flex flex-col flex-1 h-full min-w-[600px]" key={key.key.id.toNumber()}>
 					<div className="flex flex-row justify-between px-4 py-4">
 						<div className="flex flex-row items-center gap-4">
 							<div className="relative w-10">
@@ -92,6 +95,7 @@ export function Assets({ spaceId }: { spaceId: string }) {
 							{key.addresses?.map((addr) => {
 								return (
 									<Address
+										key={addr.address}
 										address={addr.address}
 										type={addr.type}
 										keyId={key.key.id}

diff --git a/spaceward/src/features/home/HomeAssets.tsx b/spaceward/src/features/home/HomeAssets.tsx
@@ -24,7 +24,7 @@ async function getEthBalance(address: string) {
 
 export function HomeAssets() {
 	const { spaceId } = useSpaceId();
-	const { useKeysBySpaceId } = useQueryHooks();
+	const { useKeysBySpaceId, isReady } = useQueryHooks();
 	const query = useKeysBySpaceId({
 		request: {
 			spaceId: Long.fromString(spaceId || ""),
@@ -37,7 +37,7 @@ export function HomeAssets() {
 			}),
 		},
 		options: {
-			enabled: !!spaceId,
+			enabled: isReady && !!spaceId,
 		},
 	});
 
@@ -65,13 +65,14 @@ export function HomeAssets() {
 	return (
 		<>
 			{query.data?.keys?.map((key) => (
-				<div className="flex flex-col m-4 rounded-xl">
+				<div className="flex flex-col m-4 rounded-xl" key={key.key.id.toNumber()}>
 					<div>
 						<div className="space-y-3">
 							{key.addresses?.map((addr) => {
 								return (
 									<Address
-										address={addr.address || ""}
+										key={addr.address}
+										address={addr.address}
 										type={addr.type}
 										keyId={key.key.id}
 									/>

diff --git a/spaceward/src/features/home/TotalAssetValue.tsx b/spaceward/src/features/home/TotalAssetValue.tsx
@@ -34,7 +34,7 @@ export function TotalAssetValue() {
 	const { currency } = useCurrency();
 	const { spaceId } = useSpaceId();
 
-	const { useKeysBySpaceId } = useQueryHooks();
+	const { useKeysBySpaceId, isReady } = useQueryHooks();
 	const keysQ = useKeysBySpaceId({
 		request: {
 			spaceId: Long.fromString(spaceId || ""),
@@ -44,7 +44,7 @@ export function TotalAssetValue() {
 			}),
 		},
 		options: {
-			enabled: !!spaceId,
+			enabled: isReady && !!spaceId,
 		},
 	});
 

diff --git a/spaceward/src/features/intents/NewIntentButton.tsx b/spaceward/src/features/intents/NewIntentButton.tsx
@@ -39,7 +39,7 @@ export function NewIntentButton({ onClick }: { onClick: () => void }) {
 
 	return (
 		<Sheet>
-			<SheetTrigger>
+			<SheetTrigger asChild>
 				<Button className="flex gap-2 px-6 py-4 h-10" onClick={onClick}>
 					<svg
 						width="24"
@@ -49,26 +49,26 @@ export function NewIntentButton({ onClick }: { onClick: () => void }) {
 						xmlns="http://www.w3.org/2000/svg"
 					>
 						<path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
+							fillRule="evenodd"
+							clipRule="evenodd"
 							d="M4.23223 2.23223C4.70107 1.76339 5.33696 1.5 6 1.5H14.5C14.6326 1.5 14.7598 1.55268 14.8536 1.64645L20.3536 7.14645C20.4473 7.24021 20.5 7.36739 20.5 7.5V20C20.5 20.663 20.2366 21.2989 19.7678 21.7678C19.2989 22.2366 18.663 22.5 18 22.5H4C3.72386 22.5 3.5 22.2761 3.5 22C3.5 21.7239 3.72386 21.5 4 21.5H18C18.3978 21.5 18.7794 21.342 19.0607 21.0607C19.342 20.7794 19.5 20.3978 19.5 20V7.70711L14.2929 2.5H6C5.60218 2.5 5.22064 2.65804 4.93934 2.93934C4.65804 3.22064 4.5 3.60218 4.5 4V8C4.5 8.27614 4.27614 8.5 4 8.5C3.72386 8.5 3.5 8.27614 3.5 8V4C3.5 3.33696 3.76339 2.70107 4.23223 2.23223Z"
 							fill="black"
 						/>
 						<path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
+							fillRule="evenodd"
+							clipRule="evenodd"
 							d="M14 1.5C14.2761 1.5 14.5 1.72386 14.5 2V7.5H20C20.2761 7.5 20.5 7.72386 20.5 8C20.5 8.27614 20.2761 8.5 20 8.5H14C13.7239 8.5 13.5 8.27614 13.5 8V2C13.5 1.72386 13.7239 1.5 14 1.5Z"
 							fill="black"
 						/>
 						<path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
+							fillRule="evenodd"
+							clipRule="evenodd"
 							d="M2.5 15C2.5 14.7239 2.72386 14.5 3 14.5H9C9.27614 14.5 9.5 14.7239 9.5 15C9.5 15.2761 9.27614 15.5 9 15.5H3C2.72386 15.5 2.5 15.2761 2.5 15Z"
 							fill="black"
 						/>
 						<path
-							fill-rule="evenodd"
-							clip-rule="evenodd"
+							fillRule="evenodd"
+							clipRule="evenodd"
 							d="M6 11.5C6.27614 11.5 6.5 11.7239 6.5 12V18C6.5 18.2761 6.27614 18.5 6 18.5C5.72386 18.5 5.5 18.2761 5.5 18V12C5.5 11.7239 5.72386 11.5 6 11.5Z"
 							fill="black"
 						/>

diff --git a/spaceward/src/features/keys/Keys.tsx b/spaceward/src/features/keys/Keys.tsx
@@ -25,7 +25,7 @@ import { AddressResponse } from "@wardenprotocol/wardjs/dist/codegen/warden/ward
 import { base64FromBytes } from "@wardenprotocol/wardjs/dist/codegen/helpers";
 
 export function Keys({ spaceId }: { spaceId: string }) {
-	const { useKeysBySpaceId } = useQueryHooks();
+	const { useKeysBySpaceId, isReady } = useQueryHooks();
 	const query = useKeysBySpaceId({
 		request: {
 			spaceId: Long.fromString(spaceId),
@@ -37,6 +37,9 @@ export function Keys({ spaceId }: { spaceId: string }) {
 				limit: Long.fromInt(10),
 			}),
 		},
+		options: {
+			enabled: isReady,
+		},
 	});
 
 	if (query.status === "loading") {

diff --git a/spaceward/src/features/keys/NewKeyButton.tsx b/spaceward/src/features/keys/NewKeyButton.tsx
@@ -58,7 +58,7 @@ export function NewKeyButton() {
 			/>
 
 			<Sheet>
-				<SheetTrigger>
+				<SheetTrigger asChild>
 					<Button size={"sm"}>Create key</Button>
 				</SheetTrigger>
 				<SheetContent>

diff --git a/spaceward/src/features/spaces/SpaceSelector.tsx b/spaceward/src/features/spaces/SpaceSelector.tsx
@@ -179,6 +179,7 @@ export function SpaceSelector() {
 									| undefined
 							)?.spaces?.map((space) => (
 								<div
+									key={space.id}
 									onClick={() => setSpaceId(space.id || null)}
 									className="flex flex-row items-center space-x-4 cursor-pointer"
 								>

diff --git a/spaceward/src/hooks/useClient.ts b/spaceward/src/hooks/useClient.ts
@@ -1,24 +1,30 @@
-import { createRpcQueryHooks, getRpcClient, useRpcClient, warden } from "@wardenprotocol/wardjs";
+import { createRpcQueryHooks, useRpcClient, warden } from "@wardenprotocol/wardjs";
 import { Client } from 'warden-protocol-wardenprotocol-client-ts'
 import { env } from '../env';
+import { useQueryClient } from "@tanstack/react-query";
 
 const useClientInstance = () => {
-  const client = new Client(env);
-  return client;
+	const client = new Client(env);
+	return client;
 };
 let clientInstance: ReturnType<typeof useClientInstance>;
 
 export const useClient = () => {
-  if (!clientInstance) {
-    clientInstance = useClientInstance();
-  }
-  return clientInstance;
+	if (!clientInstance) {
+		clientInstance = useClientInstance();
+	}
+	return clientInstance;
 };
 
 export function useQueryHooks() {
-  const rpcQuery = useRpcClient({ rpcEndpoint: env.rpcURL });
-  const rpc = rpcQuery.data;
-  return createRpcQueryHooks({ rpc });
+	const rpcQuery = useRpcClient({ rpcEndpoint: env.rpcURL });
+	const rpc = rpcQuery.data;
+	const isReady = !!rpcQuery.data;
+
+	return {
+		isReady,
+		...createRpcQueryHooks({ rpc })
+	};
 }
 
 export function getClient() {

diff --git a/spaceward/src/layouts/mobile-nav.tsx b/spaceward/src/layouts/mobile-nav.tsx
@@ -141,7 +141,7 @@ export function MobileNav() {
 					{count && count > 0 ? (
 						<div className="flex flex-col gap-6 w-full">
 							{spacesQuery?.pages[0]?.spaces?.map((space) => (
-								<HoverCard openDelay={0}>
+								<HoverCard openDelay={0} key={space.id}>
 									<HoverCardTrigger>
 										<div
 											className={cn(
@@ -266,6 +266,7 @@ export function MobileNav() {
 								<div className="space-y-1">
 									{spaceNavItems.map((item) => (
 										<Link
+											key={item.url}
 											to={item.url}
 											className={cn(
 												buttonVariants({
@@ -292,6 +293,7 @@ export function MobileNav() {
 					<div className="flex flex-col space-y-1 py-2">
 						{globalNavItems.map((item) => (
 							<Link
+								key={item.url}
 								to={item.url}
 								className={cn(
 									buttonVariants({

diff --git a/wardjs/package.json b/wardjs/package.json
@@ -47,6 +47,7 @@
     "@protobufs/cosmos": "^0.1.0",
     "@protobufs/cosmos_proto": "^0.0.10",
     "@protobufs/gogoproto": "^0.0.10",
+    "@tanstack/react-query": "^4.36.1",
     "@types/jest": "^29.5.0",
     "eslint": "8.45.0",
     "eslint-config-prettier": "^8.8.0",
@@ -66,8 +67,10 @@
     "@cosmjs/stargate": "0.32.3",
     "@cosmjs/tendermint-rpc": "^0.32.3",
     "@cosmology/lcd": "^0.13.3",
-    "@tanstack/react-query": "4",
     "long": "^5.2.3",
     "protobufjs": "^7.2.6"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^4.36.1"
   }
 }