Assets Page WIP

web-ui/components/Assets/assetsGrid.tsx

@@ -1,5 +1,5 @@
 import { shiftDigits } from '@/utils';
-import { Box, SimpleGrid, VStack, Text, Button, Divider, useColorModeValue, HStack, Flex, Grid, GridItem } from '@chakra-ui/react';
+import { Box, SimpleGrid, VStack, Text, Button, Divider, useColorModeValue, HStack, Flex, Grid, GridItem, Spinner } from '@chakra-ui/react';
 import React from 'react';
 import QDepositModal from './modals/qTokenDepositModal';
 import QWithdrawModal from './modals/qTokenWithdrawlModal';
@@ -8,9 +8,11 @@ interface AssetCardProps {
   balance: string;
   apy: number;
   nativeAssetName: string;
+  isWalletConnected: boolean;
 }
 
 interface AssetGridProps {
+  isWalletConnected: boolean;
   assets: Array<{
     name: string;
     balance: string;
@@ -19,7 +21,34 @@ interface AssetGridProps {
   }>;
 }
 
-const AssetCard: React.FC<AssetCardProps> = ({ assetName, balance, apy, nativeAssetName }) => {
+const AssetCard: React.FC<AssetCardProps> = ({ assetName, balance, apy, nativeAssetName, isWalletConnected }) => {
+  if (!isWalletConnected) {
+    return (
+      <Flex direction="column" p={5} borderRadius="lg" align="center" justify="space-around" w="full" h="full">
+        <Text fontSize="xl" textAlign="center">
+          Wallet is not connected. Please connect your wallet to interact with your QCK tokens.
+        </Text>
+      </Flex>
+    );
+  }
+
+  if (!balance || !apy) {
+    return (
+      <Flex
+        w="100%"
+        h="100%"
+        p={4}
+        borderRadius="lg"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+        gap={6}
+        color="white"
+      >
+        <Spinner w={'200px'} h="200px" color="complimentary.900" />
+      </Flex>
+    );
+  }
   return (
     <VStack bg={'rgba(255,255,255,0.1)'} p={4} boxShadow="lg" align="center" spacing={4} borderRadius="lg">
       <VStack w="full" align="center" alignItems={'center'} spacing={3}>
@@ -69,7 +98,7 @@ const AssetCard: React.FC<AssetCardProps> = ({ assetName, balance, apy, nativeAs
   );
 };
 
-const AssetsGrid: React.FC<AssetGridProps> = ({ assets }) => {
+const AssetsGrid: React.FC<AssetGridProps> = ({ assets, isWalletConnected }) => {
   return (
     <>
       <Text fontSize="xl" fontWeight="bold" color="white" mb={4}>
@@ -80,7 +109,13 @@ const AssetsGrid: React.FC<AssetGridProps> = ({ assets }) => {
           {assets.map((asset, index) => (
             <Box key={index} minW="350px">
               {' '}
-              <AssetCard assetName={asset.name} nativeAssetName={asset.native} balance={asset.balance} apy={asset.apy} />
+              <AssetCard
+                isWalletConnected={isWalletConnected}
+                assetName={asset.name}
+                nativeAssetName={asset.native}
+                balance={asset.balance}
+                apy={asset.apy}
+              />
             </Box>
           ))}
         </Flex>

web-ui/components/Assets/intents.tsx

@@ -1,15 +1,16 @@
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
-import { Box, Flex, Text, Button, IconButton, VStack, Image, Heading, SlideFade } from '@chakra-ui/react';
+import { Box, Flex, Text, Button, IconButton, VStack, Image, Heading, SlideFade, Spinner } from '@chakra-ui/react';
 import { color } from 'framer-motion';
 import { useState } from 'react';
 
 import { useIntentQuery } from '@/hooks/useQueries';
 
 export interface StakingIntentProps {
   address: string;
+  isWalletConnected: boolean;
 }
 
-const StakingIntent: React.FC<StakingIntentProps> = ({ address }) => {
+const StakingIntent: React.FC<StakingIntentProps> = ({ address, isWalletConnected }) => {
   const { intent, isLoading, isError } = useIntentQuery('cosmoshub', address ?? '');
 
   const validators = [
@@ -28,6 +29,34 @@ const StakingIntent: React.FC<StakingIntentProps> = ({ address }) => {
     setCurrentChainIndex((prevIndex) => (prevIndex === chains.length - 1 ? 0 : prevIndex + 1));
   };
 
+  if (!isWalletConnected) {
+    return (
+      <Flex direction="column" p={5} borderRadius="lg" align="center" justify="space-around" w="full" h="full">
+        <Text fontSize="xl" textAlign="center">
+          Wallet is not connected. Please connect your wallet to interact with your QCK tokens.
+        </Text>
+      </Flex>
+    );
+  }
+
+  if (!intent) {
+    return (
+      <Flex
+        w="100%"
+        h="100%"
+        p={4}
+        borderRadius="lg"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+        gap={6}
+        color="white"
+      >
+        <Spinner w={'200px'} h="200px" color="complimentary.900" />
+      </Flex>
+    );
+  }
+
   return (
     <Box w="full" color="white" borderRadius="lg" p={4} gap={6}>
       <VStack spacing={4} align="stretch">

web-ui/components/Assets/unbondingTable.tsx

@@ -1,6 +1,12 @@
+import { useUnbondingQuery } from '@/hooks/useQueries';
 import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Text, Box } from '@chakra-ui/react';
 
-const UnbondingAssetsTable = () => {
+interface UnbondingAssetsTableProps {
+  address: string;
+  chainName: string;
+}
+
+const UnbondingAssetsTable: React.FC<UnbondingAssetsTableProps> = ({ address, chainName }) => {
   const unbondingAssets = [
     {
       asset: '10 ATOM',
@@ -31,7 +37,7 @@ const UnbondingAssetsTable = () => {
       completionTime: '2023-01-14',
     },
   ];
-
+  const { unbondingData } = useUnbondingQuery(chainName, address);
   return (
     <>
       <Text fontSize="xl" fontWeight="bold" color="white" mb={4}>

web-ui/components/ThreeJS/liquidMetalSphere.tsx

@@ -1,66 +1,101 @@
 import { useRef, useEffect } from 'react';
 import * as THREE from 'three';
+import { ImprovedNoise } from 'three/examples/jsm/math/ImprovedNoise.js';
 
 const LiquidMetalSphere = () => {
-  const mountRef = useRef<HTMLDivElement | null>(
-    null,
-  );
+  const mountRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (!mountRef.current) return;
-
+    const mouse = new THREE.Vector2();
     const scene = new THREE.Scene();
-    const camera = new THREE.PerspectiveCamera(
-      75,
-      window.innerWidth / window.innerHeight,
-      1,
-      10,
-    );
-    const renderer = new THREE.WebGLRenderer({
-      antialias: true,
-    });
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100);
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    mountRef.current.appendChild(renderer.domElement);
 
-    renderer.setSize(
-      window.innerWidth,
-      window.innerHeight,
-    );
-    mountRef.current.appendChild(
-      renderer.domElement,
-    );
+    // Increase the radius to make the sphere larger
+    const geometry = new THREE.SphereGeometry(4, 64, 64); // Radius increased to 3
+    const vertexShader = `
+    varying vec3 vNormal;
+    varying vec3 vPosition;
+    varying vec2 vUv;
+    void main() {
+      vNormal = normalize(normalMatrix * normal);
+      vPosition = position;
+      vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
+      vUv = vec2(modelViewPosition.x, modelViewPosition.y) / 10.0 + 0.5;
+      gl_Position = projectionMatrix * modelViewPosition;
+    }
+  `;
+    const fragmentShader = `
+    uniform float time;
+    uniform vec2 mousePos;
+    uniform vec2 resolution;
+    varying vec3 vNormal;
+    varying vec3 vPosition;
+    varying vec2 vUv;
+    void main() {
+      vec3 orange = vec3(1.0, 0.55, 0.0);
+      vec3 darkArea = vec3(0.1, 0.1, 0.1);
+      float dist = distance(gl_PointCoord.xy, mousePos);
+      float ripple = sin(dist * 10.0 - time * 5.0) * 0.5 + 0.5;
+      vec3 color = mix(orange, darkArea, ripple);
+      gl_FragColor = vec4(color, 64.0);
+    }
+  `;
 
+    const material = new THREE.ShaderMaterial({
+      uniforms: {
+        time: { value: 1.0 },
+        mousePos: { value: new THREE.Vector2(-1, -1) }, // Initialize outside the screen
+        resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
+      },
+      vertexShader,
+      fragmentShader,
+    });
 
-    const geometry = new THREE.SphereGeometry(
-      1,
-      32,
-      32,
-    );
-    const material = new THREE.MeshBasicMaterial({
-      color: 'orange',
-      wireframe: true,
-    }); 
-    const sphere = new THREE.Mesh(
-      geometry,
-      material,
-    );
+    const sphere = new THREE.Mesh(geometry, material);
     scene.add(sphere);
+    camera.position.z = 10; // Adjust camera distance to fit the larger sphere
 
-    camera.position.z = 5;
+    const noise = new ImprovedNoise();
+    const positionAttribute = geometry.getAttribute('position');
+    const originalPosition: any[] = [];
+    for (let i = 0; i < positionAttribute.count; i++) {
+      originalPosition.push(new THREE.Vector3().fromBufferAttribute(positionAttribute, i));
+    }
+    const onMouseMove = (event: { clientX: number; clientY: number }) => {
+      // Normalize mouse coordinates and update uniform
+      material.uniforms.mousePos.value.set((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1);
+    };
+
+    window.addEventListener('mousemove', onMouseMove);
 
     const animate = () => {
       requestAnimationFrame(animate);
-      sphere.rotation.x += 0.001;
-      sphere.rotation.y += 0.001;
+      const time = Date.now() * 0.001;
+      sphere.material.uniforms.time.value = time;
+
+      for (let i = 0; i < positionAttribute.count; i++) {
+        const vertex = originalPosition[i];
+        const offset = noise.noise(vertex.x + time, vertex.y, vertex.z);
+        const newPosition = vertex.clone().multiplyScalar(1 + offset * 0.03);
+        positionAttribute.setXYZ(i, newPosition.x, newPosition.y, newPosition.z);
+      }
+      positionAttribute.needsUpdate = true;
+
+      sphere.rotation.x += 0.005;
+      sphere.rotation.y += 0.005;
       renderer.render(scene, camera);
     };
 
     animate();
 
     return () => {
       renderer.dispose();
-      window.removeEventListener(
-        'resize',
-        () => {},
-      );
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('resize', () => {});
     };
   }, []);
 

web-ui/hooks/useGrpcQueryClient.ts

@@ -13,16 +13,20 @@ export const useGrpcQueryClient = (chainName: string) => {
 
 
   const endpoints: { [key: string]: string | undefined } = {
-
+    quicksilver: env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_QUICKSILVER : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_QUICKSILVER,
     cosmoshub: env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_COSMOSHUB : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_COSMOSHUB,
     sommelier: env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_SOMMELIER : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_SOMMELIER,
     stargaze: env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_STARGAZE : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_STARGAZE,
     regen: env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_REGEN : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_REGEN,
     osmosis: env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_OSMOSIS : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_OSMOSIS,
   };
 
+
+
   grpcEndpoint = endpoints[chainName] || solution.rpcEndpoint;
 
+
+
   const grpcQueryClientQuery = useQuery({
     queryKey: ['grpcQueryClient', grpcEndpoint],
     queryFn: () =>

web-ui/hooks/useQueries.ts

@@ -152,6 +152,46 @@ export const useIntentQuery = (chainName: string, address: string) => {
   };
 };
 
+export const useUnbondingQuery = (chainName: string, address: string) => {
+  const { grpcQueryClient } = useGrpcQueryClient('quicksilver');
+  const { chain } = useChain(chainName);
+  const chainId = chain.chain_id;
+  const unbondingQuery = useQuery(
+    ['unbond', chainName],
+    async () => {
+      if (!grpcQueryClient) {
+        throw new Error('RPC Client not ready');
+      }
+      const nextKey = new Uint8Array()
+     const unbonding = await grpcQueryClient.quicksilver.interchainstaking.v1.withdrawalRecords({
+      delegatorAddress: address,
+      chainId: chainId,
+      pagination: {
+        key: nextKey,
+        offset: Long.fromNumber(0),
+        limit: Long.fromNumber(100),
+        countTotal: true,
+        reverse: false,
+      },
+
+      });
+
+      return unbonding;
+
+    },
+    {
+      enabled: !!grpcQueryClient,
+      staleTime: Infinity,
+    },
+  );
+
+  return {
+    unbondingData: unbondingQuery.data,
+    isLoading: unbondingQuery.isLoading,
+    isError: unbondingQuery.isError,
+  };
+};
+
 export const useValidatorsQuery = (chainName: string) => {
   const { grpcQueryClient } = useGrpcQueryClient(chainName);
 

web-ui/hooks/useQueryHooks2.ts

@@ -24,10 +24,13 @@ export const useQueryHooks = (
     },
   });
 
+
+  const rpcEndpoint = chainName === 'quicksilver' ? 'https://rpc.quicksilver.zone' : rpcEndpointQuery.data;
+
   const rpcClientQuery = useRpcClient({
-    rpcEndpoint: rpcEndpointQuery.data || '',
+    rpcEndpoint: rpcEndpoint || '',
     options: {
-      enabled: !!rpcEndpointQuery.data,
+      enabled: !!rpcEndpoint,
       staleTime: Infinity,
       queryKeyHashFn: (queryKey) => {
         return JSON.stringify(
@@ -53,6 +56,6 @@ export const useQueryHooks = (
     cosmosQuery,
     isReady,
     isFetching,
-    rpcEndpoint: rpcEndpointQuery.data,
+    rpcEndpoint: rpcEndpoint,
   };
 };