Neon styling

src/components/liquidityPositions/status.tsx

@@ -126,11 +126,8 @@ const LPStatus = ({ nftId, position }: LPStatusProps) => {
 
   return (
     <Box
-      outline={".15em solid var(--complimentary-background)"}
-      borderRadius={".5em"}
+      className="neon-box"
       padding={15}
-      width="fit-content"
-      backgroundImage={"var(--background-gradient)"}
     >
       <VStack width={"100%"}>
         <Text>{nftId}</Text>

src/components/util/loadingSpinner.tsx

@@ -0,0 +1,19 @@
+import { Center, VStack, Spinner, Text } from "@chakra-ui/react";
+
+export const LoadingSpinner = () => {
+  return (
+    <Center height="100vh">
+      <VStack spacing={4} align="center" justify="center">
+        <Spinner
+          className="neon-spinner" // Custom neon effect
+          thickness="4px"
+          speed="0.65s"
+          emptyColor="gray.200"
+          color="purple.700" 
+          size="xl"
+        />
+        <Text fontSize="l">Loading</Text>{" "}
+      </VStack>
+    </Center>
+  );
+}

src/pages/_app.tsx

@@ -9,7 +9,7 @@ function MyApp({ Component, pageProps }: AppProps) {
       global: {
         // Apply some styles globally across all elements
         body: {
-          bg: "var(--charcoal)",
+          bg: "var(--charcoal-secondary)",
           color: "var(--light-grey)",
           fontFamily: "sans-serif",
           fontWeight: "400",

src/pages/lp/[lp_nft_id].tsx

@@ -11,8 +11,8 @@ import {
 } from "@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/dex/v1/dex_pb";
 import Layout from "../../components/layout";
 import LPStatus from "../../components/liquidityPositions/status";
-import { VStack } from "@chakra-ui/layout";
-import { Text } from "@chakra-ui/react";
+import { VStack, Text, Spinner, Center } from "@chakra-ui/react";
+import { LoadingSpinner } from "../../components/util/loadingSpinner";
 
 export default function LP() {
   const router = useRouter();
@@ -56,7 +56,7 @@ export default function LP() {
     <Layout pageTitle={`LP - ${lp_nft_id}`}>
       <main className={styles.main}>
         {isLoading ? (
-          <p>Loading...</p>
+          <LoadingSpinner />
         ) : liquidityPosition ? (
           <>
             <VStack width={"100%"} paddingTop={"4em"}>
@@ -66,19 +66,13 @@ export default function LP() {
                   width={"100%"}
                   alignContent={"left"}
                   fontSize={"1.5em"}
+                  paddingBottom=".5em"
                 >
                   Position Status
                 </Text>
                 <LPStatus nftId={lp_nft_id} position={liquidityPosition} />
               </VStack>
             </VStack>
-            {/* 
-            <br />
-            <br />
-            <br />
-            <h1>NFT ID: {lp_nft_id}</h1>
-            <p>{JSON.stringify(liquidityPosition)}</p> 
-             */}
           </>
         ) : (
           <p>No liquidity position found.</p>

src/utils/protos/services/app/shielded-pool.ts

@@ -16,6 +16,7 @@ export class ShieldedPoolQuerier implements ShieldedPoolQuerierInterface {
 
   async assetMetadata(assetId: AssetId): Promise<Metadata | undefined> {
     const res = await this.client.assetMetadataById({ assetId });
+    console.info(res)
     return res.denomMetadata;
   }
 }

styles/Home.module.css

@@ -93,9 +93,11 @@
 
 .header {
   width: 100%;
-  background-color: var(--purple-accent-700); /* Grey with 50% opacity */
+  background: linear-gradient(to bottom, var(--purple-accent-700), transparent);
   /* position: fixed; /* Optional: makes the header stay at the top on scroll */
   top: 0;
-  z-index: 10; 
+  z-index: 10;
   padding: 1em;
 }
+
+

styles/global.css

@@ -38,7 +38,12 @@
   --light-brown: #363434;
   --light-grey: #e3e3e3;
   --brown: rgba(29, 29, 29, 0.7);
-  --background-gradient: linear-gradient(90deg, rgba(139, 228, 217, .42) 0%, rgba(200, 184, 128, .42) 50%, rgba(255, 144, 47, .36) 100%);
+  --background-gradient: linear-gradient(
+    90deg,
+    rgba(139, 228, 217, 0.42) 0%,
+    rgba(200, 184, 128, 0.42) 50%,
+    rgba(255, 144, 47, 0.36) 100%
+  );
   --complimentary-background: #6e6eb8;
   --teal-accent: #5b6584;
   --purple-accent: #6e6eb8;
@@ -66,3 +71,21 @@ img {
   max-width: 100%;
   height: auto;
 }
+
+.neon-box {
+  outline: 0.15em solid var(--complimentary-background);
+  border-radius: 0.5em;
+  width: fit-content;
+  background: var(--charcoal);
+  box-shadow: 0 0 5px var(--complimentary-background),
+    /* Smaller glow */ 0 0 10px var(--complimentary-background),
+    /* Smaller glow */ 0 0 15px var(--complimentary-background),
+    /* Subtle bright glow */ 0 0 20px var(--complimentary-background),
+    /* Subtle bright glow */ 0 0 25px var(--complimentary-background),
+    /* Subtle bright glow */ 0 0 30px var(--complimentary-background); /* Subtle bright glow */
+}
+
+.neon-spinner {
+  filter: drop-shadow(0 0 8px white)
+    drop-shadow(0 0 12px white);
+}