Fouad
e5f41731ae
* bootstrap next app + add overview page * fix AssetList type * fix up nav stuff * Refactor Nav component and add network components pages * Refactor WorldMap component and update TelegramIcon, GitHubIcon, NymVpnIcon, DiscordIcon, and TwitterIcon components * add service providers page * mixnodes page * delegations page + use material react table for all tables * nodes map page * Refactor StyledLink component and remove unnecessary console.log statements * Refactor ESLint configuration, remove unused dependencies, and update component imports * update deps * Refactor imports and update dependencies * fix dark mode * build single mixnode page * build single gateway page * Refactor handleOnDelegate function to use useCallback in mixnodes page.tsx * Add defaults for constants --------- Co-authored-by: Mark Sinclair <mmsinclair@users.noreply.github.com>
96 lines
2.3 KiB
TypeScript
96 lines
2.3 KiB
TypeScript
import React from 'react'
|
|
import { Typography, SxProps, Stack } from '@mui/material'
|
|
import { Link } from '@nymproject/react/link/Link'
|
|
import { LoadingModal } from './LoadingModal'
|
|
import { ConfirmationModal } from './ConfirmationModal'
|
|
import { ErrorModal } from './ErrorModal'
|
|
|
|
export type DelegationModalProps = {
|
|
status: 'loading' | 'success' | 'error' | 'info'
|
|
message?: string
|
|
transactions?: {
|
|
url: string
|
|
hash: string
|
|
}[]
|
|
}
|
|
|
|
export const DelegationModal: FCWithChildren<
|
|
DelegationModalProps & {
|
|
open: boolean
|
|
onClose: () => void
|
|
sx?: SxProps
|
|
backdropProps?: object
|
|
children?: React.ReactNode
|
|
}
|
|
> = ({
|
|
status,
|
|
message,
|
|
transactions,
|
|
open,
|
|
onClose,
|
|
children,
|
|
sx,
|
|
backdropProps,
|
|
}) => {
|
|
if (status === 'loading')
|
|
return <LoadingModal sx={sx} backdropProps={backdropProps} />
|
|
|
|
if (status === 'error') {
|
|
return (
|
|
<ErrorModal message={message} sx={sx} open={open} onClose={onClose}>
|
|
{children}
|
|
</ErrorModal>
|
|
)
|
|
}
|
|
|
|
if (status === 'info') {
|
|
return (
|
|
<ConfirmationModal
|
|
open={open}
|
|
title="Connect wallet"
|
|
confirmButton="OK"
|
|
onConfirm={onClose}
|
|
>
|
|
<Typography>{message}</Typography>
|
|
</ConfirmationModal>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<ConfirmationModal
|
|
open={open}
|
|
onConfirm={onClose || (() => {})}
|
|
title="Transaction successful"
|
|
confirmButton="Done"
|
|
>
|
|
<Stack alignItems="center" spacing={2} mb={0}>
|
|
{message && <Typography>{message}</Typography>}
|
|
{transactions?.length === 1 && (
|
|
<Link
|
|
href={transactions[0].url}
|
|
target="_blank"
|
|
sx={{ ml: 1 }}
|
|
text="View on blockchain"
|
|
noIcon
|
|
/>
|
|
)}
|
|
{transactions && transactions.length > 1 && (
|
|
<Stack alignItems="center" spacing={1}>
|
|
<Typography>View the transactions on blockchain:</Typography>
|
|
{transactions.map(({ url, hash }) => (
|
|
<Link
|
|
href={url}
|
|
target="_blank"
|
|
sx={{ ml: 1 }}
|
|
text={hash.slice(0, 6)}
|
|
key={hash}
|
|
noIcon
|
|
/>
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</ConfirmationModal>
|
|
)
|
|
}
|