From 9c6600674b54877f076dfc33937292cd19ea4a21 Mon Sep 17 00:00:00 2001 From: Atris Date: Thu, 19 Dec 2024 00:02:27 +0100 Subject: [PATCH 1/5] feat: add new minimal connect button, add positions, wallet not connected state --- src/features/connect/connect-button.tsx | 62 ++++++++++++++++++------- src/pages/trade/ui/positions.tsx | 17 +++++-- 2 files changed, 56 insertions(+), 23 deletions(-) diff --git a/src/features/connect/connect-button.tsx b/src/features/connect/connect-button.tsx index 06cc3526..08f2bb60 100644 --- a/src/features/connect/connect-button.tsx +++ b/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 ( <> - - {providerOrigins.length === 0 ? ( - - ) : ( - - )} - + {variant === 'default' ? ( + + {providerOrigins.length === 0 ? ( + + ) : ( + + )} + + ) : ( + + {providerOrigins.length === 0 ? ( + + ) : ( + + )} + + )} setIsOpen(false)}> diff --git a/src/pages/trade/ui/positions.tsx b/src/pages/trade/ui/positions.tsx index 4b1886be..dc571436 100644 --- a/src/pages/trade/ui/positions.tsx +++ b/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 ( -
- - Connect your wallet +
+
+ +
+ + Connect wallet to see your positions +
+ +
); }; From 6c04f582d3c5d721b147ccebb1c8c059f1c7ff5a Mon Sep 17 00:00:00 2001 From: Atris Date: Thu, 19 Dec 2024 01:23:11 +0100 Subject: [PATCH 2/5] feat: generic blockchain error for summary and chart --- src/pages/trade/ui/chart.tsx | 9 ++++++++- src/pages/trade/ui/summary.tsx | 7 +++---- src/shared/ui/blockchain-error.tsx | 26 ++++++++++++++++++++++++++ 3 files changed, 37 insertions(+), 5 deletions(-) create mode 100644 src/shared/ui/blockchain-error.tsx diff --git a/src/pages/trade/ui/chart.tsx b/src/pages/trade/ui/chart.tsx index bf626b00..76c13ee4 100644 --- a/src/pages/trade/ui/chart.tsx +++ b/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(() => { ))}
- {error &&
Error loading pair selector: ${String(error)}
} + {error && ( +
+
+ console.log('Details clicked')} /> +
+
+ )}
{isLoading && } diff --git a/src/pages/trade/ui/summary.tsx b/src/pages/trade/ui/summary.tsx index 6779ba2a..0cec209e 100644 --- a/src/pages/trade/ui/summary.tsx +++ b/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 ( - - {String(error)} - + ); } @@ -95,7 +94,7 @@ export const Summary = () => { {data && 'directVolume' in data ? ( - + ) : ( diff --git a/src/shared/ui/blockchain-error.tsx b/src/shared/ui/blockchain-error.tsx new file mode 100644 index 00000000..cd4bf51e --- /dev/null +++ b/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 ( + +
+ + + {message} + + +
+ + ); +} From a99f9bec89f843989013287ecf7372744b443f71 Mon Sep 17 00:00:00 2001 From: Josef Date: Mon, 6 Jan 2025 16:34:11 +0100 Subject: [PATCH 3/5] Update src/features/connect/connect-button.tsx Co-authored-by: Max Korsunov --- src/features/connect/connect-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/connect/connect-button.tsx b/src/features/connect/connect-button.tsx index 08f2bb60..2b31e3bc 100644 --- a/src/features/connect/connect-button.tsx +++ b/src/features/connect/connect-button.tsx @@ -39,7 +39,7 @@ const ConnectButtonInner = observer( return ( <> {variant === 'default' ? ( - + {providerOrigins.length === 0 ? ( - ) : ( - - )} - - ) : ( - - {providerOrigins.length === 0 ? ( - - ) : ( - - )} - - )} + + {providerOrigins.length === 0 ? ( + + ) : ( + + )} + setIsOpen(false)}> From de8374baf18c489876dabb5e8b0c13477bdd0f83 Mon Sep 17 00:00:00 2001 From: Atris Date: Mon, 6 Jan 2025 16:51:48 +0100 Subject: [PATCH 5/5] Quick commit 2025-01-06 16:51:48 --- src/pages/trade/ui/chart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/trade/ui/chart.tsx b/src/pages/trade/ui/chart.tsx index 76c13ee4..3513d1be 100644 --- a/src/pages/trade/ui/chart.tsx +++ b/src/pages/trade/ui/chart.tsx @@ -264,7 +264,7 @@ export const Chart = observer(() => { {error && (
- console.log('Details clicked')} /> +
)}