fix: improve ultrasound ui elements (#265)

* fix: improve ultrasound ui elements * fix: ci issue * fix: unused component
Synthetixio · May 15, 2024 · fc67140 · fc67140
1 parent 7cd3e4d
commit fc67140
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 11 deletions.
diff --git 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
@@ -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
@@ -23,15 +23,22 @@ 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>
         <Hide below="xl">
           <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
@@ -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
@@ -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
@@ -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
@@ -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,