PR updates

This commit is contained in:
fmtabbara
2022-01-18 10:16:36 +00:00
parent 0e302b83ab
commit 3a39fff006
3 changed files with 98 additions and 90 deletions
@@ -17,7 +17,7 @@ export const SuccessView: React.FC<{ details?: { amount: string; address: string
<TransactionDetails
details={[
{ primary: 'Node', secondary: details.address },
{ primary: 'Amount', secondary: `${details.amount + MAJOR_CURRENCY}` },
{ primary: 'Amount', secondary: `${details.amount} ${MAJOR_CURRENCY}` },
]}
/>
</Box>
+65 -59
View File
@@ -1,11 +1,9 @@
import React, { useEffect, useState } from 'react'
import { Alert, AlertTitle, Box, Button, CircularProgress, Link, Typography } from '@mui/material'
import React, { useState } from 'react'
import { Alert, AlertTitle, Box, Button, Link, Typography } from '@mui/material'
import { DelegateForm } from './DelegateForm'
import { Layout } from '../../layouts'
import { NymCard } from '../../components'
import { EnumRequestStatus, RequestStatus } from '../../components/RequestStatus'
import { TFee } from '../../types'
import { getGasFee } from '../../requests'
import { SuccessView } from './SuccessView'
import { Delegate as DelegateIcon } from '../../svg-icons'
import { urls } from '../../context/main'
@@ -17,64 +15,72 @@ export const Delegate = () => {
return (
<Layout>
<NymCard title="Delegate" subheader="Delegate to mixnode" noPadding data-testid="delegateCard">
<>
{status === EnumRequestStatus.initial && (
<DelegateForm
onError={(message?: string) => {
setStatus(EnumRequestStatus.error)
setError(message)
}}
onSuccess={(details) => {
setStatus(EnumRequestStatus.success)
setSuccessDetails(details)
}}
/>
)}
{status !== EnumRequestStatus.initial && (
<>
<RequestStatus
status={status}
Error={
<Alert severity="error" data-testid="delegate-error">
<AlertTitle>Delegation failed</AlertTitle>
An error occurred with the request:
<Box sx={{ wordBreak: 'break-word' }}>{error}</Box>
</Alert>
}
Success={<SuccessView details={successDetails} />}
/>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
borderTop: (theme) => `1px solid ${theme.palette.grey[200]}`,
bgcolor: 'grey.100',
p: 3,
pt: 0,
<>
<NymCard
title="Delegate"
subheader="Delegate to mixnode"
noPadding
data-testid="delegateCard"
Icon={DelegateIcon}
>
<>
{status === EnumRequestStatus.initial && (
<DelegateForm
onError={(message?: string) => {
setStatus(EnumRequestStatus.error)
setError(message)
}}
>
<Button
data-testid="finish-button"
onClick={() => {
setStatus(EnumRequestStatus.initial)
onSuccess={(details) => {
setStatus(EnumRequestStatus.success)
setSuccessDetails(details)
}}
/>
)}
{status !== EnumRequestStatus.initial && (
<>
<RequestStatus
status={status}
Error={
<Alert severity="error" data-testid="delegate-error">
<AlertTitle>Delegation failed</AlertTitle>
An error occurred with the request:
<Box sx={{ wordBreak: 'break-word' }}>{error}</Box>
</Alert>
}
Success={<SuccessView details={successDetails} />}
/>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
borderTop: (theme) => `1px solid ${theme.palette.grey[200]}`,
bgcolor: 'grey.100',
p: 3,
pt: 0,
}}
>
Finish
</Button>
</Box>
</>
)}
</>
</NymCard>
<Typography sx={{ p: 3 }}>
Checkout the{' '}
<Link href={`${urls.networkExplorer}/network-components/mixnodes`} target="_blank">
list of mixnodes
</Link>{' '}
for uptime and performances to help make delegation decisions
</Typography>
<Button
data-testid="finish-button"
onClick={() => {
setStatus(EnumRequestStatus.initial)
}}
>
Finish
</Button>
</Box>
</>
)}
</>
</NymCard>
<Typography sx={{ p: 3 }}>
Checkout the{' '}
<Link href={`${urls.networkExplorer}/network-components/mixnodes`} target="_blank">
list of mixnodes
</Link>{' '}
for uptime and performances to help make delegation decisions
</Typography>
</>
</Layout>
)
}
+32 -30
View File
@@ -22,36 +22,38 @@ export const Unbond = () => {
return (
<Layout>
<NymCard title="Unbond" subheader="Unbond a mixnode or gateway" noPadding Icon={UnbondIcon}>
{ownership?.hasOwnership && (
<Alert
severity="info"
data-testid="bond-noded"
action={
<Button
data-testid="un-bond"
disabled={isLoading}
onClick={async () => {
setIsLoading(true)
await unbond(ownership.nodeType)
await userBalance.fetchBalance()
await getBondDetails()
await checkOwnership()
setIsLoading(false)
}}
color="inherit"
>
Unbond
</Button>
}
sx={{ m: 2 }}
>
{`Looks like you already have a ${ownership.nodeType} bonded.`}
</Alert>
)}
<Box sx={{ p: 3 }}>
<Fee feeType="UnbondMixnode" />
</Box>
{!ownership.hasOwnership && (
{ownership?.hasOwnership ? (
<>
<Alert
severity="info"
data-testid="bond-noded"
action={
<Button
data-testid="un-bond"
disabled={isLoading}
onClick={async () => {
setIsLoading(true)
await unbond(ownership.nodeType)
await userBalance.fetchBalance()
await getBondDetails()
await checkOwnership()
setIsLoading(false)
}}
color="inherit"
>
Unbond
</Button>
}
sx={{ m: 2 }}
>
{`Looks like you already have a ${ownership.nodeType} bonded.`}
</Alert>
<Box sx={{ p: 3 }}>
<Fee feeType="UnbondMixnode" />
</Box>
</>
) : (
<Alert severity="info" sx={{ m: 3 }} data-testid="no-bond">
You don't currently have a bonded node
</Alert>