feat: add new minimal connect button, connect wallet

src/features/connect/connect-button.tsx

@@ -12,7 +12,13 @@ import { useProviderManifests } from '@/shared/api/providerManifests';
 import dynamic from 'next/dynamic';
 
 const ConnectButtonInner = observer(
-  ({ actionType = 'accent' }: { actionType?: ButtonProps['actionType'] }) => {
+  ({
+    actionType = 'accent',
+    variant = 'default',
+  }: {
+    actionType?: ButtonProps['actionType'];
+    variant?: 'default' | 'minimal';
+  }) => {
     const [isOpen, setIsOpen] = useState(false);
     const { data: providerManifests } = useProviderManifests();
 
@@ -32,23 +38,43 @@ const ConnectButtonInner = observer(
 
     return (
       <>
-        <Density sparse>
-          {providerOrigins.length === 0 ? (
-            <Button
-              icon={Wallet2}
-              actionType={actionType}
-              onClick={() =>
-                window.open('https://praxwallet.com/', '_blank', 'noopener,noreferrer')
-              }
-            >
-              Install Prax
-            </Button>
-          ) : (
-            <Button icon={Wallet2} actionType={actionType} onClick={onConnectClick}>
-              Connect wallet
-            </Button>
-          )}
-        </Density>
+        {variant === 'default' ? (
+          <Density sparse>
+            {providerOrigins.length === 0 ? (
+              <Button
+                icon={Wallet2}
+                actionType={actionType}
+                onClick={() =>
+                  window.open('https://praxwallet.com/', '_blank', 'noopener,noreferrer')
+                }
+              >
+                Install Prax
+              </Button>
+            ) : (
+              <Button icon={Wallet2} actionType={actionType} onClick={onConnectClick}>
+                Connect wallet
+              </Button>
+            )}
+          </Density>
+        ) : (
+          <Density compact>
+            {providerOrigins.length === 0 ? (
+              <Button
+                icon={Wallet2}
+                actionType={actionType}
+                onClick={() =>
+                  window.open('https://praxwallet.com/', '_blank', 'noopener,noreferrer')
+                }
+              >
+                Install Prax
+              </Button>
+            ) : (
+              <Button actionType={actionType} onClick={onConnectClick}>
+                Connect wallet
+              </Button>
+            )}
+          </Density>
+        )}
 
         <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
           <Dialog.Content title='Choose wallet'>

src/pages/trade/ui/chart.tsx

@@ -7,6 +7,7 @@
 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 @@
         ))}
       </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/positions.tsx

@@ -8,15 +8,16 @@ import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
 import dynamic from 'next/dynamic';
 import { Density } from '@penumbra-zone/ui/Density';
 import { Order, PositionData, stateToString, usePositions } from '@/pages/trade/api/positions.ts';
+import { Button } from '@penumbra-zone/ui/Button';
 import {
   PositionId,
   PositionState_PositionStateEnum,
 } from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
 import { bech32mPositionId } from '@penumbra-zone/bech32m/plpid';
-import { Button } from '@penumbra-zone/ui/Button';
 import { positionsStore } from '@/pages/trade/model/positions';
 import Link from 'next/link';
-import { SquareArrowOutUpRight } from 'lucide-react';
+import { SquareArrowOutUpRight, Wallet2 } from 'lucide-react';
+import { ConnectButton } from '@/features/connect/connect-button';
 
 const LoadingRow = () => {
   return (
@@ -30,10 +31,16 @@ const LoadingRow = () => {
 
 const NotConnectedNotice = () => {
   return (
-    <div className='p-5'>
-      <Text small color='text.secondary'>
-        Connect your wallet
+    <div className='flex flex-col items-center justify-center h-[400px] gap-4'>
+      <div className='w-12 h-12 text-text-secondary'>
+        <Wallet2 className='w-full h-full' />
+      </div>
+      <Text color='text.secondary' small>
+        Connect wallet to see your positions
       </Text>
+      <div className='w-fit'>
+        <ConnectButton variant='minimal' actionType='default' />
+      </div>
     </div>
   );
 };

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>
+  );
+}