feat(spaceward): add some ui updates and buenavista chain

spaceward/package.json

@@ -81,7 +81,7 @@
     "js-sha256": "^0.10.1",
     "localforage": "^1.10.0",
     "long": "^5.2.3",
-    "lucide-react": "^0.279.0",
+    "lucide-react": "^0.368.0",
     "match-sorter": "^6.3.1",
     "next": "^14.1.0",
     "next-themes": "^0.2.1",

spaceward/src/App.tsx

@@ -3,6 +3,8 @@ import {
 	wardenprotocoldevnetAssets,
 	wardenprotocollocal,
 	wardenprotocollocalAssets,
+	wardenprotocolbuenavista,
+	wardenprotocolbuenavistaAssets,
 } from "@/config/chains";
 import { ChainProvider } from "@cosmos-kit/react";
 import {
@@ -110,11 +112,13 @@ function App() {
 						...chains,
 						wardenprotocollocal,
 						wardenprotocoldevnet,
+						wardenprotocolbuenavista,
 					]}
 					assetLists={[
 						...assets,
 						wardenprotocollocalAssets,
 						wardenprotocoldevnetAssets,
+						wardenprotocolbuenavistaAssets,
 					]}
 					wallets={supportedWallets}
 					walletConnectOptions={{

spaceward/src/assets/main.css

@@ -91,6 +91,7 @@
 
 	body {
 		/* @apply bg-background text-foreground font-sans bg-cover bg-fixed dark:bg-[url("/bg.svg")]; */
+		/* @apply bg-background text-foreground font-sans bg-cover bg-center bg-fixed dark:bg-[url("/no-space-bg.svg")]; */
 		@apply bg-background text-foreground font-sans;
 	}
 
@@ -104,6 +105,10 @@
 	}
 }
 
+.no-space {
+	/* @apply bg-background text-foreground font-sans bg-cover bg-no-repeat bg-center dark:bg-[url("/no-space-bg.svg")]; */
+}
+
 .svg-animation {
 	position: absolute;
 	left: -8px;

spaceward/src/components/AddressUnit.tsx

@@ -1,4 +1,6 @@
+import { XIcon } from "lucide-react";
 import AddressAvatar from "./AddressAvatar";
+import { Copy } from "./ui/copy";
 
 const AddressUnit = ({
 	address,
@@ -15,11 +17,11 @@ const AddressUnit = ({
 
 			<div className="text-sm">
 				{/* {intent.address.slice(0, 4)}...{intent.address.slice(-4)} */}
-				{"..." + address.slice(-8)}
+				<Copy value={address} split />
 			</div>
 
 			<button className="px-1" onClick={onRemove}>
-				<img src="/images/x.svg" alt="" />
+				<XIcon strokeWidth={1} className="h-6 w-6" />
 			</button>
 		</div>
 	);

spaceward/src/components/ConnectWallet.tsx

@@ -32,10 +32,10 @@ export function ConnectWallet() {
 						asChild
 						variant="outline"
 						role="combobox"
-						className="justify-between cursor-pointer bg-card h-16 pl-0 md:pl-6 rounded-none gap-4 min-w-0 hover:bg-card hover:text-foreground border-0 pr-0"
+						className="justify-between w-80 cursor-pointer rounded-xl bg-card h-16 px-0 md:px-6 gap-4 min-w-0 hover:bg-card hover:text-foreground border-0"
 					>
 						<div>
-							<div className="relative">
+							<div className="relative w-10">
 								<AddressAvatar seed={address} disableTooltip />
 								<div className="absolute h-5 w-5 rounded-full right-0 bottom-0 overflow-clip bg-white ring-2 ring-background">
 									<img
@@ -49,10 +49,13 @@ export function ConnectWallet() {
 									/>
 								</div>
 							</div>
-							<div className="md:flex flex-col text-left text-xs hidden">
+							<div className="md:flex flex-col text-left text-xs hidden w-full px-4">
 								<span className="block text-base">
-									{"..." + address.slice(-8)}
+									{"..." + address.slice(-12)}
 								</span>
+								{/* <span className="block text-xs text-muted-foreground">
+									{"..." + address.slice(-8)}
+								</span> */}
 								<span className="block text-xs text-muted-foreground">
 									{ward.toFixed(2)} WARD
 								</span>
@@ -79,7 +82,7 @@ export function ConnectWallet() {
 			</PopoverTrigger>
 
 			{address ? (
-				<PopoverContent className="w-80 rounded-t-none border-t-0 -translate-y-1 bg-card">
+				<PopoverContent className="w-80 bg-card border-0 p-6">
 					<div className="grid gap-4">
 						<div className="flex flex-row text-left text-xs gap-2 justify-between items-center">
 							<span className="block text-base">
@@ -96,7 +99,7 @@ export function ConnectWallet() {
 								/>
 							</span>
 						</div>
-						<div className="border rounded-lg">
+						<div className="bg-background rounded-lg">
 							<div className="px-6 py-3 text-sm border-b flex justify-between">
 								<span>Wallet</span>
 								<span>{activeWallet?.name || ""}</span>

spaceward/src/components/ThemeToggle.tsx

@@ -12,7 +12,7 @@ export function ThemeToggle() {
 			size="icon"
 			onClick={() => setTheme(theme === "light" ? "dark" : "light")}
 			className={
-				"h-20 w-20 rounded-none border-0 hover:bg-transparent flex items-center place-content-center group"
+				"h-16 w-16 rounded-none border-0 hover:bg-transparent flex items-center place-content-center group"
 			}
 		>
 			<div className="m-2 w-12 h-12 rounded-full border-2 border-card overflow-clip p-3 flex items-center place-content-center group-hover:ring-2 ring-foreground">

spaceward/src/components/ui/copy.tsx

@@ -51,7 +51,7 @@ const Copy = React.forwardRef<HTMLButtonElement, ButtonProps>(
 							{variant === "icon" ? (
 								<CopyIcon className="h-4 w-4" />
 							) : split ? (
-								value?.slice(0, 8) + "..." + value?.slice(-8)
+								"..." + value?.slice(-8)
 							) : (
 								value
 							)}