Remove change value

src/pages/trade/ui/summary.tsx

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import cn from 'clsx';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { Text } from '@penumbra-zone/ui/Text';
 import { Skeleton } from '@/shared/ui/skeleton';
@@ -64,24 +63,16 @@ export const Summary = () => {
         </Text>
       </SummaryCard>
       <SummaryCard title='24h Change' loading={isLoading}>
-        {data && 'noData' in data && (
+        {data && 'change' in data ? (
+          <Text detail color={getColor(data)}>
+            {getTextSign(data)}
+            {data.change.percent}%
+          </Text>
+        ) : (
           <Text detail color='text.primary'>
             -
           </Text>
         )}
-        {data && 'change' in data && (
-          <div className={cn('flex items-center gap-1', getColor(data, false))}>
-            <Text detail>{round({ value: data.change.value, decimals: 6 })}</Text>
-            <span
-              className={cn('flex h-4 px-1 rounded-full text-success-dark', getColor(data, true))}
-            >
-              <Text detail>
-                {getTextSign(data)}
-                {data.change.percent}%
-              </Text>
-            </span>
-          </div>
-        )}
       </SummaryCard>
       <SummaryCard title='24h High' loading={isLoading}>
         <Text detail color='text.primary'>
@@ -123,12 +114,12 @@ const getTextSign = (res: SummaryDataResponse) => {
   return '';
 };
 
-const getColor = (res: SummaryDataResponse, isBg = false): string => {
+const getColor = (res: SummaryDataResponse) => {
   if (res.change.sign === 'positive') {
-    return isBg ? 'bg-success-light' : 'text-success-light';
+    return 'success.light';
   }
   if (res.change.sign === 'negative') {
-    return isBg ? 'bg-destructive-light' : 'text-destructive-light';
+    return 'destructive.light';
   }
-  return isBg ? 'bg-neutral-light' : 'text-neutral-light';
+  return 'neutral.light';
 };

src/shared/api/server/summary.ts

@@ -62,7 +62,6 @@ export async function GET(req: NextRequest): Promise<NextResponse<SummaryRespons
 
   const priceDiff = summary.price - summary.price_then;
   const change = {
-    value: calculateDisplayPrice(priceDiff, baseAssetMetadata, quoteAssetMetadata),
     sign: priceDiffLabel(priceDiff),
     percent:
       summary.price === 0

src/shared/api/server/types.ts

@@ -4,7 +4,6 @@ import type { JsonValue } from '@bufbuild/protobuf';
 
 export interface ChangeData {
   sign: 'positive' | 'negative' | 'neutral';
-  value: number;
   percent: string;
 }