feat: generic blockchain error for summary and chart

src/pages/trade/ui/chart.tsx

@@ -7,6 +7,7 @@ import { useCandles } from '../api/candles';
 import { observer } from 'mobx-react-lite';
 import { DurationWindow, durationWindows } from '@/shared/utils/duration.ts';
 import { CandleWithVolume } from '@/shared/api/server/candles/utils';
+import { BlockchainError } from '@/shared/ui/blockchain-error';
 
 const ChartLoadingState = () => {
   return (
@@ -260,7 +261,13 @@ export const Chart = observer(() => {
         ))}
       </div>
 
-      {error && <div className='text-white'>Error loading pair selector: ${String(error)}</div>}
+      {error && (
+        <div className='w-full h-full flex items-center justify-center'>
+          <div className='w-[450px] h-full flex items-center justify-center'>
+            <BlockchainError onDetailsClick={() => console.log('Details clicked')} />
+          </div>
+        </div>
+      )}
 
       <div className='grow w-full h-full max-h-full pt-2 pl-4 pb-4 self-center flex items-center'>
         {isLoading && <ChartLoadingState />}

src/pages/trade/ui/summary.tsx

@@ -8,6 +8,7 @@ import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
 import { round } from '@penumbra-zone/types/round';
 import { Density } from '@penumbra-zone/ui/Density';
 import { SummaryData } from '@/shared/api/server/summary/types.ts';
+import { BlockchainError } from '@/shared/ui/blockchain-error';
 
 const SummaryCard = ({
   title,
@@ -49,9 +50,7 @@ export const Summary = () => {
   if (error) {
     return (
       <SummaryCard title=''>
-        <Text detail color='destructive.light'>
-          {String(error)}
-        </Text>
+        <BlockchainError />
       </SummaryCard>
     );
   }
@@ -95,7 +94,7 @@ export const Summary = () => {
       </SummaryCard>
       <SummaryCard title='24h Volume' loading={isLoading}>
         {data && 'directVolume' in data ? (
-          <Density slim>
+          <Density compact>
             <ValueViewComponent valueView={data.directVolume} context='table' abbreviate />
           </Density>
         ) : (

src/shared/ui/blockchain-error.tsx

@@ -0,0 +1,26 @@
+import { Ban } from 'lucide-react';
+import { Button } from '@penumbra-zone/ui/Button';
+import { Density } from '@penumbra-zone/ui/Density';
+import { Text } from '@penumbra-zone/ui/Text';
+
+interface BlockchainErrorProps {
+  message?: string;
+  onDetailsClick?: () => void;
+}
+
+export function BlockchainError({
+  message = 'An error occurred when loading data from the blockchain',
+  onDetailsClick,
+}: BlockchainErrorProps) {
+  return (
+    <Density compact>
+      <div className='flex flex-row items-center w-full justify-center gap-4 flex-wrap'>
+        <Ban className='h-8 w-8 text-red-400' />
+        <Text small color='text.secondary'>
+          {message}
+        </Text>
+        <Button onClick={onDetailsClick}>Details</Button>
+      </div>
+    </Density>
+  );
+}