feat(spaceward): fix qa issues (#877)

* fixes #869; add missing Dockerfile entry * fix #874; #873 * fix tx sidebar scroll
warden-protocol · Sep 20, 2024 · 9a954da · 9a954da
1 parent 019809a
commit 9a954da
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 17 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -117,6 +117,7 @@ ENV VITE_WARDEN_COSMOSKIT_CHAIN_NAME=%WARDEN_COSMOSKIT_CHAIN_NAME%
 ENV VITE_WARDEN_CHAIN_ID=%WARDEN_CHAIN_ID%
 ENV VITE_WARDEN_MAINTENANCE=%WARDEN_MAINTENANCE%
 ENV VITE_WARDEN_SNAP_ORIGIN=%WARDEN_SNAP_ORIGIN%
+ENV VITE_WARDEN_SNAP_VERSION=%WARDEN_SNAP_VERSION%
 ENV VITE_WARDEN_ENVIRONMENT=%WARDEN_ENVIRONMENT%
 ENV VITE_WARDEN_STORYBLOK_TOKEN=%WARDEN_STORYBLOK_TOKEN%
 ENV VITE_WARDEN_ETHEREUM_ANALYZER_CONTRACT=%WARDEN_ETHEREUM_ANALYZER_CONTRACT%

diff --git a/spaceward/src/components/ui/copy.tsx b/spaceward/src/components/ui/copy.tsx
@@ -30,6 +30,8 @@ const Copy = React.forwardRef<HTMLButtonElement, ButtonProps>(
 		const [showTooltip, setShowTooltip] = React.useState(false);
 		const onCopy = React.useCallback(() => {
 			setCopied(true);
+			setShowTooltip(true);
+
 			setTimeout(() => {
 				setCopied(false);
 				setShowTooltip(false);

diff --git a/spaceward/src/features/actions/StatusSidebar.tsx b/spaceward/src/features/actions/StatusSidebar.tsx
@@ -486,7 +486,7 @@ export default function StatusSidebar() {
 							sideOffset={20}
 							className="p-0"
 						>
-							<div className="bg-fill-quaternary">
+							<div className="bg-fill-quaternary max-h-80 overflow-auto">
 								{filtered.map((id) => {
 									const action = data?.[id];
 

diff --git a/spaceward/src/features/modals/AssetSelector.tsx b/spaceward/src/features/modals/AssetSelector.tsx
@@ -102,7 +102,7 @@ const AssetSelector = ({
 	}, [_results, filterByChain, searchValue]);
 
 	return (
-		<div className="px-8 flex flex-col gap-6">
+		<div className="px-8 flex flex-col gap-6 max-h">
 			<div className="flex items-center justify-between relative z-30">
 				<button onClick={onClose} className="p-1 ">
 					<Icons.arrLeft className="invert dark:invert-0" />
@@ -144,7 +144,7 @@ const AssetSelector = ({
 						/>
 					</div>
 					{isNetworkDropdown && (
-						<div className="w-[248px] bg-fill-quaternary text-sm rounded-lg  py-2 absolute z-10 bottom-[-8px] right-0 whitespace-nowrap backdrop-blur-[30px] translate-y-[100%] ">
+						<div className="w-60 bg-fill-quaternary text-sm rounded-lg  py-2 absolute z-10 bottom-[-8px] right-0 whitespace-nowrap backdrop-blur-[30px] translate-y-[100%] ">
 							<div
 								onClick={() => {
 									setIsNetworkDropdown(false);
@@ -222,7 +222,7 @@ const AssetSelector = ({
 
 			<div>
 				{!searchValue && Object.keys(withBalance).length ? (
-					<div className="bg-fill-quaternary rounded-2xl p-4 no-scrollbar overflow-scroll max-h-[280px]">
+					<div className="bg-fill-quaternary rounded-2xl p-4 no-scrollbar overflow-scroll max-h-64">
 						<div className="font-bold mb-5 text-xl">
 							Your assets
 						</div>
@@ -319,7 +319,7 @@ const AssetSelector = ({
 					<></>
 				)}
 
-				<div className="flex flex-col mt-4 no-scrollbar overflow-scroll max-h-[240px] -mb-4 pb-4">
+				<div className="flex flex-col mt-4 no-scrollbar overflow-scroll max-h-56 -mb-4 pb-4">
 					{results
 						.filter(
 							({ chainName, token }) =>

diff --git a/spaceward/src/features/modals/ReceiveAssets.tsx b/spaceward/src/features/modals/ReceiveAssets.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import QRCode from "react-qr-code";
 import { Copy } from "@/components/ui/copy";
 import { TransferParams } from "./types";
@@ -102,6 +102,7 @@ export const fixAddress = (
 };
 
 export default function ReceiveAssetsModal(props: TransferParams) {
+	const copyRef = useRef<HTMLButtonElement>(null);
 	const { setData: setModal } = useModalState();
 	const { spaceId } = useSpaceId();
 	const { queryBalances } = useAssetQueries(spaceId);
@@ -200,14 +201,14 @@ export default function ReceiveAssetsModal(props: TransferParams) {
 								address
 							</div>
 							<div>
-								<Copy value={address?.address} />
+								<Copy ref={copyRef} value={address?.address} />
 							</div>
 
-							<CopyToClipboard text={address?.address ?? ""}>
-								<button className="bg-pixel-pink cursor-pointer rounded px-5 h-10 flex items-center justify-center font-semibold text-black duration-300 hover:bg-fill-accent-hover mt-4">
-									Copy Address
-								</button>
-							</CopyToClipboard>
+							<button className="bg-pixel-pink cursor-pointer rounded px-5 h-10 flex items-center justify-center font-semibold text-black duration-300 hover:bg-fill-accent-hover mt-4" onClick={() => {
+								copyRef.current?.click();
+							}}>
+								Copy Address
+							</button>
 						</div>
 					</div>
 				)}

diff --git a/spaceward/src/features/modals/index.tsx b/spaceward/src/features/modals/index.tsx
@@ -25,7 +25,7 @@ function hasEntry<T extends {}, K extends string>(key: K, obj?: T): obj is T & {
 
 export default function ModalRoot() {
 	const { data, setData } = useModalState();
-	const isDesktop = useMediaQuery("(min-width: 768px)");
+	const isLargeScreen = useMediaQuery("(min-width: 1280px) and (min-height: 800px)");
 
 	// fixme
 	async function _cancel() {
@@ -65,20 +65,20 @@ export default function ModalRoot() {
 			)}
 		>
 			<div className="bg-overlay fixed left-0 top-0 w-full h-full backdrop-blur-[20px] -z-10"></div>
-			{!isDesktop ? (
+			{!isLargeScreen ? (
 				<button
 					onClick={_cancel}
-					className="absolute top-8 invert dark:invert-0 right-8 opacity-[0.5] hover:opacity-[100%] transition-all"
+					className="absolute top-8 invert dark:invert-0 right-8 opacity-[0.5] hover:opacity-[100%] transition-all z-10"
 				>
 					<img src="/images/button-close.svg" alt="" />
 				</button>
 			) : null}
 
 			<div className="flex flex-col relative">
-				{isDesktop ? (
+				{isLargeScreen ? (
 					<button
 						onClick={_cancel}
-						className="absolute -top-16 invert dark:invert-0 -right-16 opacity-[0.5] hover:opacity-[100%] transition-all"
+						className="absolute -top-12 invert dark:invert-0 -right-16 opacity-[0.5] hover:opacity-[100%] transition-all"
 					>
 						<img src="/images/button-close.svg" alt="" />
 					</button>

diff --git a/spaceward/src/utils/shield.ts b/spaceward/src/utils/shield.ts
@@ -266,6 +266,10 @@ export const validateAddressNumber = (expression?: Expression) => {
 
 					break;
 				}
+				// do not validate whitelist
+				case "contains": {
+					break;
+				}
 				default:
 					error = `Validation failed: unknown function name: ${name}`;
 					break;