feat(spaceward): Intents enhancements (#166)

* fix(spaceward): Intents page refs dev-76 * fix(spaceward): editorconfig dev-76 * fix(spaceward): Fix formatting refs dev-76 * fix(spaceward): refs dev-76 * fix(spaceward): refs dev-76 * feat(spaceward): Add intents refs dev-76 * fix(spaceward): refs dev-76 * feat(spaceward): add intent modals refs dev-76 * Update spaceward/src/components/create-intent.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix(spaceward): refs dev-76 * fix(app): refs dev-76 * fix(spaceward): Intent page fixes refs dev-76 * fix(spaceward): Intents fixes refs dev-76 * fix(spaceward): Intents fixes refs dev-76 * fix(app): refs dev-187 * fix(spaceward): Fixes refs dev-187 * fix(spaceward): fix gitignore dev-187 --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
warden-protocol · Apr 11, 2024 · d307192 · d307192
1 parent abad33f
commit d307192
Show file tree

Hide file tree

Showing 8 changed files with 720 additions and 107 deletions.
diff --git a/.gitignore b/.gitignore
@@ -19,11 +19,11 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+*.local
 
 node_modules
 dist
 dist-ssr
-*.local
 
 # Editor directories and files
 .tmp

diff --git a/spaceward/src/components/add-person-modal.tsx b/spaceward/src/components/add-person-modal.tsx
@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import Portal from "./ui/portal";
 import clsx from "clsx";
+import { fromBech32 } from "@cosmjs/encoding";
 
 const AddPersonModal = ({
 	onClose,
@@ -13,6 +14,14 @@ const AddPersonModal = ({
 }) => {
 	const [addPersonValue, setAddPersonValue] = useState<string>("");
 
+	const isValid = useMemo(() => {
+		try {
+			return Boolean(fromBech32(addPersonValue));
+		} catch {
+			return false;
+		}
+	}, [addPersonValue]);
+
 	return (
 		<Portal domId="intent-modal">
 			<div className="bg-[rgba(64,64,64,0.40)] absolute left-0 top-0 w-full h-full backdrop-blur-[20px] flex items-center justify-center min-h-[600px]">
@@ -38,11 +47,18 @@ const AddPersonModal = ({
 					<div className="font-bold text-5xl mb-6 leading-[56px]">
 						Add a person
 					</div>
+
 					<div>Enter an address</div>
 
 					<form
 						action=""
-						className="mt-12 text-left flex items-center justify-between gap-2 bg-[rgba(229,238,255,0.15)] border-[1px] border-white px-4 h-[60px]"
+						className={clsx(
+							`mt-12 text-left flex items-center justify-between gap-2 bg-[rgba(229,238,255,0.15)] border-[1px] border-white px-4 h-[60px]`,
+							!isValid &&
+								addPersonValue &&
+								`
+						border-[#E54545] border-[1px]`,
+						)}
 					>
 						<div className="w-full">
 							<label
@@ -65,6 +81,12 @@ const AddPersonModal = ({
 						</button>
 					</form>
 
+					{!isValid && addPersonValue && (
+						<div className="text-[#E54545] text-xs text-left mt-1">
+							Enter correct address
+						</div>
+					)}
+
 					<div className="mt-12 pt-6">
 						<button
 							onClick={() => {

diff --git a/spaceward/src/components/change-person-modal.tsx b/spaceward/src/components/change-person-modal.tsx
@@ -21,6 +21,10 @@ const ChangePersonModal = ({
 		addresses.map((address) => users.includes(address)),
 	);
 
+	const handleSelectAll = () => {
+		setSelected(Array.from({ length: addresses.length }).map(() => true));
+	};
+
 	return (
 		<Portal domId="intent-modal">
 			<div className="bg-[rgba(64,64,64,0.40)] absolute left-0 top-0 w-full h-full backdrop-blur-[20px] flex items-center justify-center min-h-[600px]">
@@ -49,17 +53,24 @@ const ChangePersonModal = ({
 						>
 							Add Person
 						</button>
-						<button className="px-5 hover:text-white transition-all duration-200">
-							Select All
-						</button>
+						{addresses.length ? (
+							<button
+								onClick={() => handleSelectAll()}
+								className="px-5 hover:text-white transition-all duration-200"
+							>
+								Select All
+							</button>
+						) : (
+							<div></div>
+						)}
 					</div>
 					<div className="flex flex-col text-left">
 						{addresses
 							// ?.slice(0, 4)
 							.map((address, i) => (
 								<PersonSelect
 									address={address}
-									key={i}
+									key={`${i}${selected[i]}`}
 									selected={selected[i]}
 									onChange={(value) => {
 										setSelected((prev) => {

diff --git a/spaceward/src/components/create-intent-modal.tsx b/spaceward/src/components/create-intent-modal.tsx
@@ -21,7 +21,6 @@ const CreateIntentModal = ({
 			onClose();
 		}
 	};
-
 	return (
 		<Portal domId="intent-modal">
 			<div className="bg-[rgba(64,64,64,0.40)] absolute left-0 top-0 w-full h-full backdrop-blur-[20px] flex items-center justify-center min-h-[480px]">