From a17192e141e6023f5681c37a38831e1e382c8bbc Mon Sep 17 00:00:00 2001 From: Negar Date: Fri, 14 Jun 2024 10:23:05 +1000 Subject: [PATCH] chore: hide json view under a button (#93) * feat: view json in a button * feat: add syntax highlights --------- Co-authored-by: Neil Campbell --- .../accounts/components/account-details.tsx | 14 +-- .../accounts/components/account-info.tsx | 6 +- src/features/accounts/components/labels.ts | 1 - .../components/application-details.tsx | 16 +-- .../applications/components/labels.ts | 2 - .../assets/components/asset-details.tsx | 20 ++-- .../assets/components/asset-media.tsx | 4 +- src/features/assets/components/labels.ts | 2 - .../components/json-view-dialog-button.tsx | 111 ++++++++++++++++++ .../components/json-view-dialog.module.css | 81 +++++++++++++ .../common/components/json-view.module.css | 39 ------ src/features/common/components/json-view.tsx | 67 ----------- .../components/platform-provider.test.tsx | 2 + src/features/common/hooks/use-theme.ts | 11 +- src/features/settings/data/settings.ts | 6 +- src/features/settings/data/theme.ts | 17 ++- .../app-call-transaction-details.tsx | 2 - .../asset-config-transaction-details.tsx | 2 - .../asset-freeze-transaction-details.tsx | 2 - .../asset-transfer-transaction-details.tsx | 2 - .../key-reg-transaction-details.tsx | 2 - .../payment-transaction-details.tsx | 2 - .../state-proof-transaction-details.tsx | 2 - .../components/transaction-info.tsx | 6 +- .../components/transaction-json.tsx | 17 --- 25 files changed, 245 insertions(+), 191 deletions(-) create mode 100644 src/features/common/components/json-view-dialog-button.tsx create mode 100644 src/features/common/components/json-view-dialog.module.css delete mode 100644 src/features/common/components/json-view.module.css delete mode 100644 src/features/common/components/json-view.tsx delete mode 100644 src/features/transactions/components/transaction-json.tsx diff --git a/src/features/accounts/components/account-details.tsx b/src/features/accounts/components/account-details.tsx index 9ec2fcee4..70bdbe821 100644 --- a/src/features/accounts/components/account-details.tsx +++ b/src/features/accounts/components/account-details.tsx @@ -3,8 +3,7 @@ import { Account } from '../models' import { cn } from '@/features/common/utils' import { AccountActivityTabs } from './account-activity-tabs' import { AccountInfo } from './account-info' -import { accountActivityLabel, accountApplicationLabel, accountAssetLabel, accountJsonLabel } from './labels' -import { JsonView } from '@/features/common/components/json-view' +import { accountActivityLabel, accountApplicationLabel, accountAssetLabel } from './labels' import { AccountAssetTabs } from './account-asset-tabs' import { AccountApplicationTabs } from './account-application-tabs' @@ -19,7 +18,7 @@ export function AccountDetails({ account }: Props) {

{accountActivityLabel}

-
+
@@ -41,15 +40,6 @@ export function AccountDetails({ account }: Props) {
- - - -

{accountJsonLabel}

-
- -
- - ) } diff --git a/src/features/accounts/components/account-info.tsx b/src/features/accounts/components/account-info.tsx index 68c3b26b9..d78234d3f 100644 --- a/src/features/accounts/components/account-info.tsx +++ b/src/features/accounts/components/account-info.tsx @@ -17,6 +17,7 @@ import { accountMinBalanceLabel, accountRekeyedToLabel, } from './labels' +import { OpenJsonViewDialogButton } from '@/features/common/components/json-view-dialog-button' type Props = { account: Account @@ -87,7 +88,10 @@ export function AccountInfo({ account }: Props) { return ( - +
+ + +
) diff --git a/src/features/accounts/components/labels.ts b/src/features/accounts/components/labels.ts index def29737c..66b756e41 100644 --- a/src/features/accounts/components/labels.ts +++ b/src/features/accounts/components/labels.ts @@ -1,4 +1,3 @@ -export const accountJsonLabel = 'Account JSON' export const accountActivityLabel = 'Activity' export const accountAssetLabel = 'Assets' export const accountApplicationLabel = 'Applications' diff --git a/src/features/applications/components/application-details.tsx b/src/features/applications/components/application-details.tsx index 9d68fed36..347e3fa0b 100644 --- a/src/features/applications/components/application-details.tsx +++ b/src/features/applications/components/application-details.tsx @@ -23,7 +23,6 @@ import { applicationLocalStateByteLabel, applicationLocalStateUintLabel, applicationTransactionsLabel, - applicationJsonLabel, applicationNameLabel, } from './labels' import { isDefined } from '@/utils/is-defined' @@ -33,8 +32,8 @@ import { ApplicationBoxes } from './application-boxes' import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs' import { ApplicationLiveTransactions } from './application-live-transactions' import { ApplicationTransactionHistory } from './application-transaction-history' -import { JsonView } from '@/features/common/components/json-view' import { AccountLink } from '@/features/accounts/components/account-link' +import { OpenJsonViewDialogButton } from '@/features/common/components/json-view-dialog-button' type Props = { application: Application @@ -100,7 +99,10 @@ export function ApplicationDetails({ application }: Props) {
- +
+ + +
@@ -157,14 +159,6 @@ export function ApplicationDetails({ application }: Props) { - - -

{applicationJsonLabel}

-
- -
- -
) } diff --git a/src/features/applications/components/labels.ts b/src/features/applications/components/labels.ts index b6f20f5ca..cbacaea2a 100644 --- a/src/features/applications/components/labels.ts +++ b/src/features/applications/components/labels.ts @@ -26,5 +26,3 @@ export const applicationLiveTransactionsTabId = 'live-transactions' export const applicationLiveTransactionsTabLabel = 'Live Transactions' export const applicationHistoricalTransactionsTabId = 'historical-transactions' export const applicationHistoricalTransactionsTabLabel = 'Historical Transactions' - -export const applicationJsonLabel = 'Application JSON' diff --git a/src/features/assets/components/asset-details.tsx b/src/features/assets/components/asset-details.tsx index ca17996e3..f11ea4728 100644 --- a/src/features/assets/components/asset-details.tsx +++ b/src/features/assets/components/asset-details.tsx @@ -18,7 +18,6 @@ import { assetHistoricalTransactionsTabId, assetHistoricalTransactionsTabLabel, assetIdLabel, - assetJsonLabel, assetLiveTransactionsTabId, assetLiveTransactionsTabLabel, assetManagerLabel, @@ -36,12 +35,16 @@ import { AssetMetadata } from './asset-metadata' import { AssetTransactionHistory } from './asset-transaction-history' import { AssetLiveTransactions } from './asset-live-transactions' import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs' -import { JsonView } from '@/features/common/components/json-view' +import { OpenJsonViewDialogButton } from '@/features/common/components/json-view-dialog-button' type Props = { asset: Asset } +const expandAssetJsonLevel = (level: number) => { + return level < 2 +} + export function AssetDetails({ asset }: Props) { const assetItems = useMemo( () => [ @@ -137,7 +140,10 @@ export function AssetDetails({ asset }: Props) {
- +
+ + +
@@ -152,14 +158,6 @@ export function AssetDetails({ asset }: Props) { - - -

{assetJsonLabel}

-
- -
- - diff --git a/src/features/assets/components/asset-media.tsx b/src/features/assets/components/asset-media.tsx index d2e5004be..cac928381 100644 --- a/src/features/assets/components/asset-media.tsx +++ b/src/features/assets/components/asset-media.tsx @@ -7,7 +7,7 @@ type Props = { export function AssetMedia({ asset }: Props) { return asset.media ? ( -
+
{asset.media.type === AssetMediaType.Image && {asset.name}} {asset.media.type === AssetMediaType.Video && ( )}
- ) : null + ) : undefined } diff --git a/src/features/assets/components/labels.ts b/src/features/assets/components/labels.ts index 3db8fb4ee..e2c98662b 100644 --- a/src/features/assets/components/labels.ts +++ b/src/features/assets/components/labels.ts @@ -20,8 +20,6 @@ export const assetTraitsLabel = 'Asset Traits' export const assetMetadataLabel = 'Asset Metadata' -export const assetJsonLabel = 'Asset JSON' - export const assetActivityLabel = 'Activity' export const assetLiveTransactionsTabId = 'live-transactions' export const assetLiveTransactionsTabLabel = 'Live Transactions' diff --git a/src/features/common/components/json-view-dialog-button.tsx b/src/features/common/components/json-view-dialog-button.tsx new file mode 100644 index 000000000..a2c73a7ae --- /dev/null +++ b/src/features/common/components/json-view-dialog-button.tsx @@ -0,0 +1,111 @@ +import { JsonView as ReactJsonView } from 'react-json-view-lite' +import 'react-json-view-lite/dist/index.css' +import styles from './json-view-dialog.module.css' +import { cn } from '../utils' +import { Button } from './button' +import { useCallback, useState } from 'react' +import { asJson } from '@/utils/as-json' +import { toast } from 'react-toastify' +import { Dialog, DialogContent, DialogHeader } from '@/features/common/components/dialog' +import { useResolvedTheme } from '@/features/settings/data/theme' + +type Props = { + json: object + expandJsonLevel?: (level: number) => boolean +} + +export function OpenJsonViewDialogButton({ json, expandJsonLevel: exapandJsonLevel = defaultExpandLevel }: Props) { + const [dialogOpen, setDialogOpen] = useState(false) + + const openJsonViewDialog = useCallback(() => { + setDialogOpen(true) + }, [setDialogOpen]) + + const styleDark: StyleProps = { + container: styles['key-dark'], + basicChildStyle: styles['basic-element-style'], + collapseIcon: styles['collapse-icon'], + expandIcon: styles['expand-icon'], + collapsedContent: styles['collapsed-content'], + label: styles['label'], + clickableLabel: styles['clickable-label'], + nullValue: '', + undefinedValue: '', + stringValue: styles['value-string-dark'], + booleanValue: styles['value-boolean-dark'], + numberValue: styles['value-number-dark'], + otherValue: '', + punctuation: styles['punctuation-dark'], + noQuotesForStringValues: false, + } + const styleLight: StyleProps = { + container: styles['key-light'], + basicChildStyle: styles['basic-element-style'], + collapseIcon: styles['collapse-icon'], + expandIcon: styles['expand-icon'], + collapsedContent: styles['collapsed-content'], + label: styles['label'], + clickableLabel: styles['clickable-label'], + nullValue: '', + undefinedValue: '', + stringValue: styles['value-string-light'], + booleanValue: styles['value-boolean-light'], + numberValue: styles['value-number-light'], + otherValue: '', + punctuation: styles['punctuation-light'], + noQuotesForStringValues: false, + } + + const theme = useResolvedTheme() + const currentStyle = theme === 'dark' ? styleDark : styleLight + + const copyJsonToClipboard = useCallback(() => { + const jsonString = asJson(json) + navigator.clipboard.writeText(jsonString) + + toast.success('JSON copied to clipboard') + }, [json]) + + return ( + <> + + + + +

JSON

+ +
+ + +
+ + + + ) +} +// By default only render the top level because sometimes the object has too many children, which result in the UI thread being blocked on mount. +const defaultExpandLevel = (level: number) => { + return level < 1 +} + +export interface StyleProps { + container: string + basicChildStyle: string + label: string + clickableLabel: string + nullValue: string + undefinedValue: string + numberValue: string + stringValue: string + booleanValue: string + otherValue: string + punctuation: string + expandIcon: string + collapseIcon: string + collapsedContent: string + noQuotesForStringValues: boolean +} diff --git a/src/features/common/components/json-view-dialog.module.css b/src/features/common/components/json-view-dialog.module.css new file mode 100644 index 000000000..76e0904a6 --- /dev/null +++ b/src/features/common/components/json-view-dialog.module.css @@ -0,0 +1,81 @@ +.collapse-icon::after { + cursor: pointer; + margin-right: 5px; + content: '\25BE'; +} + +.expand-icon::after { + cursor: pointer; + margin-right: 5px; + content: '\25B8'; +} + +.basic-element-style { + margin: 0 10px; + padding: 0; +} + +.label { + margin-right: 5px; +} + +.clickable-label { + cursor: pointer; +} + +.collapsed-content { + cursor: pointer; + margin-right: 5px; +} + +.collapsed-content::after { + content: '...'; + font-size: 0.8em; +} + +.punctuation-base { + margin-right: 5px; + font-weight: normal; +} + +.punctuation-light { + composes: punctuation-base; + color: rgb(15 23 42); +} + +.key-light { + color: rgb(27 108 135); + padding: 10px 0; +} +.value-string-light { + color: rgb(169 48 59); +} + +.value-number-light { + color: rgb(25 109 11); +} + +.value-boolean-light { + color: rgb(67 100 99); +} + +.punctuation-dark { + composes: punctuation-base; + color: rgb(255 255 255); +} + +.key-dark { + color: rgb(43 157 195); + padding: 10px 0; +} +.value-string-dark { + color: rgb(234 100 104); +} + +.value-number-dark { + color: rgb(43 167 22); +} + +.value-boolean-dark { + color: rgb(105 154 152); +} diff --git a/src/features/common/components/json-view.module.css b/src/features/common/components/json-view.module.css deleted file mode 100644 index c23feca68..000000000 --- a/src/features/common/components/json-view.module.css +++ /dev/null @@ -1,39 +0,0 @@ -.collapse-icon::after { - cursor: pointer; - margin-right: 5px; - content: '\25BE'; -} - -.expand-icon::after { - cursor: pointer; - margin-right: 5px; - content: '\25B8'; -} - -.basic-element-style { - margin: 0 10px; - padding: 0; -} - -.label { - margin-right: 5px; -} - -.clickable-label { - cursor: pointer; -} - -.collapsed-content { - cursor: pointer; - margin-right: 5px; -} - -.collapsed-content::after { - content: '...'; - font-size: 0.8em; -} - -.punctuation { - margin-right: 5px; - font-weight: bold; -} diff --git a/src/features/common/components/json-view.tsx b/src/features/common/components/json-view.tsx deleted file mode 100644 index 074ad35f2..000000000 --- a/src/features/common/components/json-view.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { JsonView as ReactJsonView } from 'react-json-view-lite' -import 'react-json-view-lite/dist/index.css' -import styles from './json-view.module.css' -import { cn } from '../utils' -import { Button } from './button' -import { useCallback } from 'react' -import { asJson } from '@/utils/as-json' -import { toast } from 'react-toastify' - -export function JsonView({ json }: { json: object }) { - // TODO: one we have the design, we need to support light/dark mode and custom themes - const style: StyleProps = { - container: '', - basicChildStyle: styles['basic-element-style'], - collapseIcon: styles['collapse-icon'], - expandIcon: styles['expand-icon'], - collapsedContent: styles['collapsed-content'], - label: styles['label'], - clickableLabel: styles['clickable-label'], - nullValue: '', - undefinedValue: '', - stringValue: '', - booleanValue: '', - numberValue: '', - otherValue: '', - punctuation: styles['punctuation'], - noQuotesForStringValues: false, - } - - const copyJsonToClipboard = useCallback(() => { - const jsonString = asJson(json) - navigator.clipboard.writeText(jsonString) - - toast.success('JSON copied to clipboard') - }, [json]) - - return ( -
- - -
- ) -} -// Only render the top level because sometimes the object has too many children to render -const shouldExpandNode = (level: number) => { - return level < 1 -} - -export interface StyleProps { - container: string - basicChildStyle: string - label: string - clickableLabel: string - nullValue: string - undefinedValue: string - numberValue: string - stringValue: string - booleanValue: string - otherValue: string - punctuation: string - expandIcon: string - collapseIcon: string - collapsedContent: string - noQuotesForStringValues: boolean -} diff --git a/src/features/common/components/platform-provider.test.tsx b/src/features/common/components/platform-provider.test.tsx index 485eb2144..3a50beb87 100644 --- a/src/features/common/components/platform-provider.test.tsx +++ b/src/features/common/components/platform-provider.test.tsx @@ -2,6 +2,7 @@ import { describe, it, expect, afterEach, beforeEach } from 'vitest' import { render, waitFor } from '@/tests/testing-library' import MatchMediaMock from '@/tests/mock-match-media' import { executeComponentTest } from '@/tests/test-component' +import { resetSettingsStore } from '@/features/settings/data/settings' describe('platform-provider', () => { describe('when using the default system light theme', () => { @@ -21,6 +22,7 @@ describe('platform-provider', () => { beforeEach(() => { // Set system theme to dark matchMediaMock.useMediaQuery('(prefers-color-scheme: dark)') + resetSettingsStore() }) afterEach(() => { matchMediaMock.clear() diff --git a/src/features/common/hooks/use-theme.ts b/src/features/common/hooks/use-theme.ts index 88cb9f5b9..b38f49f49 100644 --- a/src/features/common/hooks/use-theme.ts +++ b/src/features/common/hooks/use-theme.ts @@ -1,19 +1,12 @@ -import { useSelectedTheme } from '@/features/settings/data' +import { useResolvedTheme } from '@/features/settings/data' import { useEffect } from 'react' export const useTheme = () => { - const [theme] = useSelectedTheme() + const theme = useResolvedTheme() useEffect(() => { const root = window.document.documentElement root.classList.remove('light', 'dark') - - if (theme === 'system') { - const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' - root.classList.add(systemTheme) - return - } - root.classList.add(theme) }, [theme]) } diff --git a/src/features/settings/data/settings.ts b/src/features/settings/data/settings.ts index b4c12b7b2..25f965c47 100644 --- a/src/features/settings/data/settings.ts +++ b/src/features/settings/data/settings.ts @@ -1,3 +1,7 @@ import { createStore } from 'jotai' -export const settingsStore = createStore() +export let settingsStore = createStore() + +export function resetSettingsStore() { + settingsStore = createStore() +} diff --git a/src/features/settings/data/theme.ts b/src/features/settings/data/theme.ts index 418f659e1..ac47bc307 100644 --- a/src/features/settings/data/theme.ts +++ b/src/features/settings/data/theme.ts @@ -1,11 +1,26 @@ -import { useAtom } from 'jotai' +import { atom, useAtom, useAtomValue } from 'jotai' import { atomWithStorage } from 'jotai/utils' import { settingsStore } from './settings' export type Theme = 'dark' | 'light' | 'system' +export type ResolvedTheme = 'dark' | 'light' + export const selectedThemeAtom = atomWithStorage('theme', 'system', undefined, { getOnInit: true }) +const resolvedThemeAtom = atom((get) => { + const theme = get(selectedThemeAtom) + if (theme === 'system') { + const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + return systemTheme + } + return theme +}) + export const useSelectedTheme = () => { return useAtom(selectedThemeAtom, { store: settingsStore }) } + +export const useResolvedTheme = () => { + return useAtomValue(resolvedThemeAtom, { store: settingsStore }) +} diff --git a/src/features/transactions/components/app-call-transaction-details.tsx b/src/features/transactions/components/app-call-transaction-details.tsx index fe46918ba..ec6ab4b18 100644 --- a/src/features/transactions/components/app-call-transaction-details.tsx +++ b/src/features/transactions/components/app-call-transaction-details.tsx @@ -3,7 +3,6 @@ import { TransactionInfo } from './transaction-info' import { Card, CardContent } from '@/features/common/components/card' import { LogicsigDetails } from './logicsig-details' import { MultisigDetails } from './multisig-details' -import { TransactionJson } from './transaction-json' import { TransactionNote } from './transaction-note' import { AppCallTransaction, InnerAppCallTransaction, SignatureType } from '../models' import { TransactionViewTabs } from './transaction-view-tabs' @@ -24,7 +23,6 @@ export function AppCallTransactionDetails({ transaction }: Props) { {transaction.note && } {transaction.logs.length > 0 && } - {transaction.signature?.type === SignatureType.Multi && } {transaction.signature?.type === SignatureType.Logic && } diff --git a/src/features/transactions/components/asset-config-transaction-details.tsx b/src/features/transactions/components/asset-config-transaction-details.tsx index 86e4a316a..5a9b7b989 100644 --- a/src/features/transactions/components/asset-config-transaction-details.tsx +++ b/src/features/transactions/components/asset-config-transaction-details.tsx @@ -2,7 +2,6 @@ import { Card, CardContent } from '@/features/common/components/card' import { cn } from '@/features/common/utils' import { TransactionInfo } from './transaction-info' import { TransactionNote } from './transaction-note' -import { TransactionJson } from './transaction-json' import { SignatureType, AssetConfigTransaction, InnerAssetConfigTransaction } from '../models' import { MultisigDetails } from './multisig-details' import { LogicsigDetails } from './logicsig-details' @@ -22,7 +21,6 @@ export function AssetConfigTransactionDetails({ transaction }: Props) { {transaction.note && } - {transaction.signature?.type === SignatureType.Multi && } {transaction.signature?.type === SignatureType.Logic && } diff --git a/src/features/transactions/components/asset-freeze-transaction-details.tsx b/src/features/transactions/components/asset-freeze-transaction-details.tsx index e2f99b4b5..09c91a7cf 100644 --- a/src/features/transactions/components/asset-freeze-transaction-details.tsx +++ b/src/features/transactions/components/asset-freeze-transaction-details.tsx @@ -2,7 +2,6 @@ import { Card, CardContent } from '@/features/common/components/card' import { cn } from '@/features/common/utils' import { TransactionInfo } from './transaction-info' import { TransactionNote } from './transaction-note' -import { TransactionJson } from './transaction-json' import { AssetFreezeTransaction, InnerAssetFreezeTransaction, SignatureType } from '../models' import { MultisigDetails } from './multisig-details' import { LogicsigDetails } from './logicsig-details' @@ -22,7 +21,6 @@ export function AssetFreezeTransactionDetails({ transaction }: AssetFreezeTransa {transaction.note && } - {transaction.signature?.type === SignatureType.Multi && } {transaction.signature?.type === SignatureType.Logic && } diff --git a/src/features/transactions/components/asset-transfer-transaction-details.tsx b/src/features/transactions/components/asset-transfer-transaction-details.tsx index 2a2a51e2d..a3b11dca4 100644 --- a/src/features/transactions/components/asset-transfer-transaction-details.tsx +++ b/src/features/transactions/components/asset-transfer-transaction-details.tsx @@ -2,7 +2,6 @@ import { Card, CardContent } from '@/features/common/components/card' import { cn } from '@/features/common/utils' import { TransactionInfo } from './transaction-info' import { TransactionNote } from './transaction-note' -import { TransactionJson } from './transaction-json' import { AssetTransferTransaction, InnerAssetTransferTransaction, SignatureType } from '../models' import { MultisigDetails } from './multisig-details' import { LogicsigDetails } from './logicsig-details' @@ -22,7 +21,6 @@ export function AssetTranserTransactionDetails({ transaction }: AssetTransaferTr {transaction.note && } - {transaction.signature?.type === SignatureType.Multi && } {transaction.signature?.type === SignatureType.Logic && } diff --git a/src/features/transactions/components/key-reg-transaction-details.tsx b/src/features/transactions/components/key-reg-transaction-details.tsx index 08eaa4a3b..937d549b1 100644 --- a/src/features/transactions/components/key-reg-transaction-details.tsx +++ b/src/features/transactions/components/key-reg-transaction-details.tsx @@ -2,7 +2,6 @@ import { Card, CardContent } from '@/features/common/components/card' import { cn } from '@/features/common/utils' import { TransactionInfo } from './transaction-info' import { TransactionNote } from './transaction-note' -import { TransactionJson } from './transaction-json' import { KeyRegTransaction, InnerKeyRegTransaction, SignatureType } from '../models' import { MultisigDetails } from './multisig-details' import { LogicsigDetails } from './logicsig-details' @@ -22,7 +21,6 @@ export function KeyRegTransactionDetails({ transaction }: KeyRegTransactionProps {transaction.note && } - {transaction.signature?.type === SignatureType.Multi && } {transaction.signature?.type === SignatureType.Logic && } diff --git a/src/features/transactions/components/payment-transaction-details.tsx b/src/features/transactions/components/payment-transaction-details.tsx index d2a611a99..edc33ca65 100644 --- a/src/features/transactions/components/payment-transaction-details.tsx +++ b/src/features/transactions/components/payment-transaction-details.tsx @@ -2,7 +2,6 @@ import { Card, CardContent } from '@/features/common/components/card' import { cn } from '@/features/common/utils' import { TransactionInfo } from './transaction-info' import { TransactionNote } from './transaction-note' -import { TransactionJson } from './transaction-json' import { SignatureType, PaymentTransaction, InnerPaymentTransaction } from '../models' import { MultisigDetails } from './multisig-details' import { LogicsigDetails } from './logicsig-details' @@ -22,7 +21,6 @@ export function PaymentTransactionDetails({ transaction }: PaymentTransactionPro {transaction.note && } - {transaction.signature?.type === SignatureType.Multi && } {transaction.signature?.type === SignatureType.Logic && } diff --git a/src/features/transactions/components/state-proof-transaction-details.tsx b/src/features/transactions/components/state-proof-transaction-details.tsx index 26e9e91b8..e66ed9464 100644 --- a/src/features/transactions/components/state-proof-transaction-details.tsx +++ b/src/features/transactions/components/state-proof-transaction-details.tsx @@ -4,7 +4,6 @@ import { TransactionInfo } from './transaction-info' import { cn } from '@/features/common/utils' import { LogicsigDetails } from './logicsig-details' import { MultisigDetails } from './multisig-details' -import { TransactionJson } from './transaction-json' import { TransactionNote } from './transaction-note' type Props = { @@ -21,7 +20,6 @@ export function StateProofTransactionDetails({ transaction }: Props) {

State Proof

{transaction.note && } - {transaction.signature?.type === SignatureType.Multi && } {transaction.signature?.type === SignatureType.Logic && } diff --git a/src/features/transactions/components/transaction-info.tsx b/src/features/transactions/components/transaction-info.tsx index 9303cc565..9c1fc9768 100644 --- a/src/features/transactions/components/transaction-info.tsx +++ b/src/features/transactions/components/transaction-info.tsx @@ -11,6 +11,7 @@ import { GroupLink } from '@/features/groups/components/group-link' import { useAtomValue } from 'jotai' import { AccountLink } from '@/features/accounts/components/account-link' import { TransactionLink } from './transaction-link' +import { OpenJsonViewDialogButton } from '@/features/common/components/json-view-dialog-button' type Props = { transaction: Transaction | InnerTransaction @@ -89,7 +90,10 @@ export function TransactionInfo({ transaction }: Props) { return ( - +
+ + +
) diff --git a/src/features/transactions/components/transaction-json.tsx b/src/features/transactions/components/transaction-json.tsx deleted file mode 100644 index a557fea59..000000000 --- a/src/features/transactions/components/transaction-json.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { JsonView } from '@/features/common/components/json-view' -import { cn } from '@/features/common/utils' - -export type Props = { - json: object -} - -export function TransactionJson({ json }: Props) { - return ( -
-

Transaction JSON

-
- -
-
- ) -}