From fc67140943448b00af749331a3e520b67f155147 Mon Sep 17 00:00:00 2001
From: Peiman <25097709+Rickk137@users.noreply.github.com>
Date: Wed, 15 May 2024 13:01:14 +0330
Subject: [PATCH] fix: improve ultrasound ui elements (#265)

* fix: improve ultrasound ui elements

* fix: ci issue

* fix: unused component
---
 ultrasound/ui/components/Chart.tsx             |  6 +++---
 .../ui/components/CurrentSupplyStats.tsx       |  2 ++
 ultrasound/ui/components/Header.tsx            | 11 +++++++++--
 ultrasound/ui/components/Main.tsx              | 18 ++++++++++++++----
 ultrasound/ui/components/SupplyChangeStats.tsx |  2 ++
 ultrasound/ui/hooks/useSNXPrice.ts             |  2 +-
 ultrasound/ui/mutations/useSellSNX.ts          |  2 +-
 7 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/ultrasound/ui/components/Chart.tsx b/ultrasound/ui/components/Chart.tsx
index 7773a536d..7b9facce9 100644
--- a/ultrasound/ui/components/Chart.tsx
+++ b/ultrasound/ui/components/Chart.tsx
@@ -1,4 +1,4 @@
-import { Flex, Heading, Spinner, Tab, TabList, Tabs } from '@chakra-ui/react';
+import { Flex, Heading, Tab, TabList, Tabs } from '@chakra-ui/react';
 import { useBurnEvents } from '../hooks/useBurnEvents';
 import { Line } from 'react-chartjs-2';
 import {
@@ -19,14 +19,14 @@ export function Chart() {
   const [range, setRange] = useState<'groupedByMonths' | 'groupedByLast30Days'>('groupedByMonths');
   const { data: events, isLoading } = useBurnEvents();
 
-  if (isLoading) return <Spinner colorScheme="cyan" />;
-  if (!events) return;
+  if (!events || isLoading) return null;
 
   return (
     <Flex
       border="1px solid"
       borderColor="gray.900"
       rounded="base"
+      maxWidth="100%"
       w={{ base: '100%', xl: '761px' }}
       h={{ base: '100%', xl: '400px' }}
       bg="navy.700"
diff --git a/ultrasound/ui/components/CurrentSupplyStats.tsx b/ultrasound/ui/components/CurrentSupplyStats.tsx
index 5ff503017..7c7297be3 100644
--- a/ultrasound/ui/components/CurrentSupplyStats.tsx
+++ b/ultrasound/ui/components/CurrentSupplyStats.tsx
@@ -6,6 +6,8 @@ export function CurrentSupplyStats() {
 
   return (
     <Flex
+      alignItems={isLoading ? 'center' : ''}
+      justifyContent={isLoading ? 'center' : ''}
       w={{ base: '100%', xl: '369px' }}
       h="200px"
       p="4"
diff --git a/ultrasound/ui/components/Header.tsx b/ultrasound/ui/components/Header.tsx
index e2a01dbb8..5d8e7a7db 100644
--- a/ultrasound/ui/components/Header.tsx
+++ b/ultrasound/ui/components/Header.tsx
@@ -23,7 +23,14 @@ export function Header() {
 
   return (
     <Flex as="header" p="2" flexDir="column" w="100%" gap="2">
-      <Flex w="100%" justifyContent="space-between" alignItems="center" px={{ base: 4, xl: 5 }}>
+      <Flex
+        flexWrap="wrap"
+        w="100%"
+        gap="4"
+        justifyContent="space-between"
+        alignItems="center"
+        px={{ base: 4, xl: 5 }}
+      >
         <Hide above="xl">
           <Image src={snxHeaderMobileSvg} />
         </Hide>
@@ -31,7 +38,7 @@ export function Header() {
           <Image src={snxSvg} />
         </Hide>
 
-        <Flex alignItems="center" gap="2">
+        <Flex flexWrap="wrap" alignItems="center" gap="2">
           <Box
             border="1px solid"
             borderColor="gray.900"
diff --git a/ultrasound/ui/components/Main.tsx b/ultrasound/ui/components/Main.tsx
index 5381f55ec..02d8d0cea 100644
--- a/ultrasound/ui/components/Main.tsx
+++ b/ultrasound/ui/components/Main.tsx
@@ -11,10 +11,14 @@ export function Main() {
   const { data: events, isLoading } = useBurnEvents();
 
   return (
-    <Flex flexDir="column" mt="10" width="100%" maxW="1200px">
+    <Flex flexDir="column" mt="8" width="100%" maxW="1200px">
       <Flex justifyContent="space-between" flexWrap={{ base: 'wrap', xl: 'nowrap' }}>
         <Flex flexDir="column">
-          <Heading fontSize={{ base: '48px', xl: '72px' }} fontWeight={700} color="white">
+          <Heading
+            fontSize={{ medium: '30px', base: '48px', xl: '72px' }}
+            fontWeight={700}
+            color="white"
+          >
             ultrasound.homes
           </Heading>
           <Heading fontSize="30px" fontWeight={700} color="white">
@@ -39,9 +43,15 @@ export function Main() {
         </Flex>
       </Flex>
       <Flex gap="4" mt="4" flexWrap={{ base: 'wrap', xl: 'nowrap' }}>
-        <Flex flexDir="column" w={{ base: '100%', xl: 'unset' }}>
+        <Flex alignItems="center" flexDir="column" w={{ base: '100%', xl: 'unset' }}>
           <Chart />
-          <Flex gap="6" flexWrap={{ base: 'wrap', xl: 'nowrap' }}>
+          <Flex
+            width={{
+              base: '100%',
+            }}
+            gap="4"
+            flexWrap={{ base: 'wrap', xl: 'nowrap' }}
+          >
             <SupplyChangeStats />
             <CurrentSupplyStats />
           </Flex>
diff --git a/ultrasound/ui/components/SupplyChangeStats.tsx b/ultrasound/ui/components/SupplyChangeStats.tsx
index abfff1f69..e3cbb8090 100644
--- a/ultrasound/ui/components/SupplyChangeStats.tsx
+++ b/ultrasound/ui/components/SupplyChangeStats.tsx
@@ -8,6 +8,8 @@ export function SupplyChangeStats() {
 
   return (
     <Flex
+      alignItems={isLoading ? 'center' : ''}
+      justifyContent={isLoading ? 'center' : ''}
       w={{ base: '100%', xl: '369px' }}
       h="200px"
       p="4"
diff --git a/ultrasound/ui/hooks/useSNXPrice.ts b/ultrasound/ui/hooks/useSNXPrice.ts
index 66a6a4a18..7b5b8db62 100644
--- a/ultrasound/ui/hooks/useSNXPrice.ts
+++ b/ultrasound/ui/hooks/useSNXPrice.ts
@@ -44,7 +44,7 @@ export function useSNXPrice() {
                 OracleManagerProxy.interface.decodeFunctionResult('process', txs[0])[0].price
               );
             },
-            'priceCall'
+            'useSNXPrice'
           );
         } catch (error) {
           console.error(error);
diff --git a/ultrasound/ui/mutations/useSellSNX.ts b/ultrasound/ui/mutations/useSellSNX.ts
index 56ced1546..1672a7c66 100644
--- a/ultrasound/ui/mutations/useSellSNX.ts
+++ b/ultrasound/ui/mutations/useSellSNX.ts
@@ -79,7 +79,7 @@ export function useSellSNX() {
 
       const allCalls = [sellSNX_Txn, sUSDCApproval_Txn, buy_SUSD_Txn, unwrapTxn].filter(notNil);
 
-      const erc7412Tx = await withERC7412(network, allCalls, 'useWithdraw', CoreProxy.interface);
+      const erc7412Tx = await withERC7412(network, allCalls, 'useSellSNX', CoreProxy.interface);
 
       const gasOptionsForTransaction = formatGasPriceForTransaction({
         gasLimit: erc7412Tx.gasLimit,