121 lines
2.8 KiB
TypeScript
121 lines
2.8 KiB
TypeScript
import { useT } from './use-t';
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
Splash,
|
|
SyntaxHighlighter,
|
|
VegaIcon,
|
|
VegaIconNames,
|
|
} from '@vegaprotocol/ui-toolkit';
|
|
import { create } from 'zustand';
|
|
import { AssetDetailsTable } from './asset-details-table';
|
|
import { AssetProposalNotification } from '@vegaprotocol/proposals';
|
|
import { useAssetDataProvider } from './asset-data-provider';
|
|
|
|
export type AssetDetailsDialogStore = {
|
|
isOpen: boolean;
|
|
id: string;
|
|
trigger: HTMLElement | null | undefined;
|
|
asJson: boolean;
|
|
setOpen: (isOpen: boolean) => void;
|
|
open: (id: string, trigger?: HTMLElement | null, asJson?: boolean) => void;
|
|
};
|
|
|
|
export const useAssetDetailsDialogStore = create<AssetDetailsDialogStore>()(
|
|
(set) => ({
|
|
isOpen: false,
|
|
id: '',
|
|
trigger: null,
|
|
asJson: false,
|
|
setOpen: (isOpen) => {
|
|
set({ isOpen: isOpen });
|
|
},
|
|
open: (id, trigger?, asJson = false) => {
|
|
set({
|
|
isOpen: true,
|
|
id,
|
|
trigger,
|
|
asJson,
|
|
});
|
|
},
|
|
})
|
|
);
|
|
|
|
export interface AssetDetailsDialogProps {
|
|
assetId: string;
|
|
trigger?: HTMLElement | null;
|
|
open: boolean;
|
|
onChange: (open: boolean) => void;
|
|
asJson?: boolean;
|
|
}
|
|
|
|
export const AssetDetailsDialog = ({
|
|
assetId,
|
|
trigger,
|
|
open,
|
|
onChange,
|
|
asJson = false,
|
|
}: AssetDetailsDialogProps) => {
|
|
const t = useT();
|
|
const { data: asset } = useAssetDataProvider(assetId);
|
|
|
|
const assetSymbol = asset?.symbol || '';
|
|
|
|
const content = asset ? (
|
|
<div className="my-2">
|
|
<AssetProposalNotification assetId={asset.id} />
|
|
{asJson ? (
|
|
<div className="pr-8">
|
|
<SyntaxHighlighter size="smaller" data={asset} />
|
|
</div>
|
|
) : (
|
|
<AssetDetailsTable asset={asset} />
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="py-12" data-testid="splash">
|
|
<Splash>{t('No data')}</Splash>
|
|
</div>
|
|
);
|
|
const title = asset
|
|
? t('Asset details - {{symbol}}', asset)
|
|
: t('Asset not found');
|
|
|
|
return (
|
|
<Dialog
|
|
title={title}
|
|
icon={<VegaIcon name={VegaIconNames.INFO} />}
|
|
open={open}
|
|
onChange={(isOpen) => onChange(isOpen)}
|
|
onCloseAutoFocus={(e) => {
|
|
/**
|
|
* This mimics radix's default behaviour that focuses the dialog's
|
|
* trigger after closing itself
|
|
*/
|
|
if (trigger) {
|
|
e.preventDefault();
|
|
trigger.focus();
|
|
}
|
|
}}
|
|
>
|
|
{content}
|
|
<p className="my-4 text-xs">
|
|
{t(
|
|
'There is 1 unit of the settlement asset ({{assetSymbol}}) to every 1 quote unit.',
|
|
{ assetSymbol }
|
|
)}
|
|
</p>
|
|
<div className="w-1/4">
|
|
<Button
|
|
data-testid="close-asset-details-dialog"
|
|
fill={true}
|
|
size="sm"
|
|
onClick={() => onChange(false)}
|
|
>
|
|
{t('Close')}
|
|
</Button>
|
|
</div>
|
|
</Dialog>
|
|
);
|
|
};
|