Feature/bonding refactor (#1481)
* feat(wallet-bonding): bonding page, new bond form wip * feat(wallet-bonding): add node table component feat(wallet-bonding): new dialog component * feat(wallet-bonding): node settings flow * feat(wallet-bonding): bond more flow (done) * feat(wallet): use confirmation modal component * feat(wallet-bonding): node menu ui * refactor(wallet-bonding): bonding flow with new gasFee estimation * feat(wallet-bonding): unbond with gasFee and request * refactor(wallet-bonding): switch to simpledialog component to keep modals consistency * feat(wallet-bonding): fetch mixnode status * update coin types in new bonding page * fix displayed denom * rebuild BondedNodeCard using existing shared components * create reuseable ActionMenu component * new mixnode form * add gateway bond form * check balance and fetch fee on bond mixnode request * node settings * get node description * fix up rust request * lint fixes + used NodeTypeSelector component * temporarily remove estimated operator reward * update return on rust function * dont display node name UI if name doesnt exist * rebase develop * fix uppercase address bug Co-authored-by: Mark Sinclair <mmsinclair@gmail.com> Co-authored-by: pierre <dommerc.pierre@gmail.com>
This commit is contained in:
Fouad
Generated
+87
-10
@@ -3273,7 +3273,17 @@ checksum = "7d17b78036a60663b797adeaee46f5c9dfebb86948d1255007a1d6be0271ff99"
|
||||
dependencies = [
|
||||
"instant",
|
||||
"lock_api",
|
||||
"parking_lot_core",
|
||||
"parking_lot_core 0.8.5",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "parking_lot"
|
||||
version = "0.12.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "3742b2c103b9f06bc9fff0a37ff4912935851bee6d36f3c02bcc755bcfec228f"
|
||||
dependencies = [
|
||||
"lock_api",
|
||||
"parking_lot_core 0.9.3",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
@@ -3290,6 +3300,19 @@ dependencies = [
|
||||
"winapi",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "parking_lot_core"
|
||||
version = "0.9.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "09a279cbf25cb0757810394fbc1e359949b59e348145c643a939a525692e6929"
|
||||
dependencies = [
|
||||
"cfg-if",
|
||||
"libc",
|
||||
"redox_syscall",
|
||||
"smallvec 1.8.0",
|
||||
"windows-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "password-hash"
|
||||
version = "0.3.2"
|
||||
@@ -4550,6 +4573,15 @@ dependencies = [
|
||||
"lazy_static",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "signal-hook-registry"
|
||||
version = "1.4.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "e51e73328dc4ac0c7ccbda3a494dfa03df1de2f46018127f60c693f2648455b0"
|
||||
dependencies = [
|
||||
"libc",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "signature"
|
||||
version = "1.3.2"
|
||||
@@ -4635,9 +4667,9 @@ checksum = "a8f112729512f8e442d81f95a8a7ddf2b7c6b8a1a6f509a95864142b30cab2d3"
|
||||
|
||||
[[package]]
|
||||
name = "state"
|
||||
version = "0.5.2"
|
||||
version = "0.5.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "87cf4f5369e6d3044b5e365c9690f451516ac8f0954084622b49ea3fde2f6de5"
|
||||
checksum = "dbe866e1e51e8260c9eed836a042a5e7f6726bb2b411dffeaa712e19c388f23b"
|
||||
dependencies = [
|
||||
"loom",
|
||||
]
|
||||
@@ -4656,7 +4688,7 @@ checksum = "33994d0838dc2d152d17a62adf608a869b5e846b65b389af7f3dbc1de45c5b26"
|
||||
dependencies = [
|
||||
"lazy_static",
|
||||
"new_debug_unreachable",
|
||||
"parking_lot",
|
||||
"parking_lot 0.11.2",
|
||||
"phf_shared 0.10.0",
|
||||
"precomputed-hash",
|
||||
"serde",
|
||||
@@ -4838,7 +4870,7 @@ dependencies = [
|
||||
"ndk-glue",
|
||||
"ndk-sys",
|
||||
"objc",
|
||||
"parking_lot",
|
||||
"parking_lot 0.11.2",
|
||||
"raw-window-handle",
|
||||
"scopeguard",
|
||||
"serde",
|
||||
@@ -5241,7 +5273,9 @@ dependencies = [
|
||||
"mio",
|
||||
"num_cpus",
|
||||
"once_cell",
|
||||
"parking_lot 0.12.1",
|
||||
"pin-project-lite",
|
||||
"signal-hook-registry",
|
||||
"socket2",
|
||||
"tokio-macros",
|
||||
"winapi",
|
||||
@@ -5898,11 +5932,11 @@ version = "0.30.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "b749ebd2304aa012c5992d11a25d07b406bdbe5f79d371cb7a918ce501a19eb0"
|
||||
dependencies = [
|
||||
"windows_aarch64_msvc",
|
||||
"windows_i686_gnu",
|
||||
"windows_i686_msvc",
|
||||
"windows_x86_64_gnu",
|
||||
"windows_x86_64_msvc",
|
||||
"windows_aarch64_msvc 0.30.0",
|
||||
"windows_i686_gnu 0.30.0",
|
||||
"windows_i686_msvc 0.30.0",
|
||||
"windows_x86_64_gnu 0.30.0",
|
||||
"windows_x86_64_msvc 0.30.0",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
@@ -5915,12 +5949,31 @@ dependencies = [
|
||||
"windows_reader",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "windows-sys"
|
||||
version = "0.36.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "ea04155a16a59f9eab786fe12a4a450e75cdb175f9e0d80da1e17db09f55b8d2"
|
||||
dependencies = [
|
||||
"windows_aarch64_msvc 0.36.1",
|
||||
"windows_i686_gnu 0.36.1",
|
||||
"windows_i686_msvc 0.36.1",
|
||||
"windows_x86_64_gnu 0.36.1",
|
||||
"windows_x86_64_msvc 0.36.1",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "windows_aarch64_msvc"
|
||||
version = "0.30.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "29277a4435d642f775f63c7d1faeb927adba532886ce0287bd985bffb16b6bca"
|
||||
|
||||
[[package]]
|
||||
name = "windows_aarch64_msvc"
|
||||
version = "0.36.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "9bb8c3fd39ade2d67e9874ac4f3db21f0d710bee00fe7cab16949ec184eeaa47"
|
||||
|
||||
[[package]]
|
||||
name = "windows_gen"
|
||||
version = "0.30.0"
|
||||
@@ -5937,12 +5990,24 @@ version = "0.30.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "1145e1989da93956c68d1864f32fb97c8f561a8f89a5125f6a2b7ea75524e4b8"
|
||||
|
||||
[[package]]
|
||||
name = "windows_i686_gnu"
|
||||
version = "0.36.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "180e6ccf01daf4c426b846dfc66db1fc518f074baa793aa7d9b9aaeffad6a3b6"
|
||||
|
||||
[[package]]
|
||||
name = "windows_i686_msvc"
|
||||
version = "0.30.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "d4a09e3a0d4753b73019db171c1339cd4362c8c44baf1bcea336235e955954a6"
|
||||
|
||||
[[package]]
|
||||
name = "windows_i686_msvc"
|
||||
version = "0.36.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "e2e7917148b2812d1eeafaeb22a97e4813dfa60a3f8f78ebe204bcc88f12f024"
|
||||
|
||||
[[package]]
|
||||
name = "windows_macros"
|
||||
version = "0.30.0"
|
||||
@@ -5973,12 +6038,24 @@ version = "0.30.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8ca64fcb0220d58db4c119e050e7af03c69e6f4f415ef69ec1773d9aab422d5a"
|
||||
|
||||
[[package]]
|
||||
name = "windows_x86_64_gnu"
|
||||
version = "0.36.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "4dcd171b8776c41b97521e5da127a2d86ad280114807d0b2ab1e462bc764d9e1"
|
||||
|
||||
[[package]]
|
||||
name = "windows_x86_64_msvc"
|
||||
version = "0.30.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "08cabc9f0066848fef4bc6a1c1668e6efce38b661d2aeec75d18d8617eebb5f1"
|
||||
|
||||
[[package]]
|
||||
name = "windows_x86_64_msvc"
|
||||
version = "0.36.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "c811ca4a8c853ef420abd8592ba53ddbbac90410fab6903b3e79972a631f7680"
|
||||
|
||||
[[package]]
|
||||
name = "winreg"
|
||||
version = "0.7.0"
|
||||
|
||||
@@ -32,14 +32,14 @@ log = "0.4"
|
||||
once_cell = "1.7.2"
|
||||
pretty_env_logger = "0.4"
|
||||
rand = "0.6.5"
|
||||
reqwest = "0.11.9"
|
||||
reqwest = {version = "0.11.9", features = ["json"] }
|
||||
serde = { version = "1.0", features = ["derive"] }
|
||||
serde_json = "1.0"
|
||||
strum = { version = "0.23", features = ["derive"] }
|
||||
tauri = { version = "=1.0.0-rc.2", features = ["clipboard-all", "shell-open", "updater", "window-maximize"] }
|
||||
tendermint-rpc = "0.23.0"
|
||||
thiserror = "1.0"
|
||||
tokio = { version = "1.10", features = ["sync", "time"] }
|
||||
tokio = { version = "1.10", features = ["full"] }
|
||||
toml = "0.5.8"
|
||||
url = "2.2"
|
||||
|
||||
|
||||
@@ -58,6 +58,8 @@ fn main() {
|
||||
mixnet::bond::unbond_gateway,
|
||||
mixnet::bond::unbond_mixnode,
|
||||
mixnet::bond::update_mixnode,
|
||||
mixnet::bond::get_number_of_mixnode_delegators,
|
||||
mixnet::bond::get_mix_node_description,
|
||||
mixnet::delegate::delegate_to_mixnode,
|
||||
mixnet::delegate::get_delegator_rewards,
|
||||
mixnet::delegate::get_pending_delegation_events,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
use std::time::Duration;
|
||||
|
||||
use crate::error::BackendError;
|
||||
use crate::state::WalletState;
|
||||
use crate::{Gateway, MixNode};
|
||||
@@ -5,8 +7,18 @@ use nym_types::currency::DecCoin;
|
||||
use nym_types::gateway::GatewayBond;
|
||||
use nym_types::mixnode::MixNodeBond;
|
||||
use nym_types::transaction::TransactionExecuteResult;
|
||||
use reqwest::Error as ReqwestError;
|
||||
use serde::{Deserialize, Serialize};
|
||||
use validator_client::nymd::{Coin, Fee};
|
||||
|
||||
#[derive(Debug, Serialize, Deserialize)]
|
||||
pub struct NodeDescription {
|
||||
name: String,
|
||||
description: String,
|
||||
link: String,
|
||||
location: String,
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub async fn bond_gateway(
|
||||
gateway: Gateway,
|
||||
@@ -198,3 +210,51 @@ pub async fn get_operator_rewards(
|
||||
);
|
||||
Ok(display_coin)
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub async fn get_number_of_mixnode_delegators(
|
||||
identity: String,
|
||||
state: tauri::State<'_, WalletState>,
|
||||
) -> Result<usize, BackendError> {
|
||||
let guard = state.read().await;
|
||||
let client = guard.current_client()?;
|
||||
let paged_delegations = client
|
||||
.nymd
|
||||
.get_mix_delegations_paged(identity, None, Some(20))
|
||||
.await?;
|
||||
|
||||
Ok(paged_delegations.delegations.len())
|
||||
}
|
||||
|
||||
async fn fetch_mix_node_description(
|
||||
host: &str,
|
||||
port: u16,
|
||||
) -> Result<NodeDescription, ReqwestError> {
|
||||
let milli_second = Duration::from_millis(1000);
|
||||
let client = reqwest::Client::builder().timeout(milli_second).build()?;
|
||||
let response = client
|
||||
.get(format!("http://{}:{}/description", host, port))
|
||||
.send()
|
||||
.await;
|
||||
|
||||
match response {
|
||||
Ok(res) => {
|
||||
let json = res.json::<NodeDescription>().await;
|
||||
match json {
|
||||
Ok(json) => Ok(json),
|
||||
Err(e) => Err(e),
|
||||
}
|
||||
}
|
||||
Err(e) => Err(e),
|
||||
}
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub async fn get_mix_node_description(
|
||||
host: &str,
|
||||
port: u16,
|
||||
) -> Result<NodeDescription, BackendError> {
|
||||
return fetch_mix_node_description(host, port)
|
||||
.await
|
||||
.map_err(|e| BackendError::ReqwestError { source: e });
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handle
|
||||
<Close />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{ color: (t) => t.palette.nym.text.muted }}>
|
||||
<Typography variant="body1" sx={{ color: (theme) => theme.palette.nym.text.muted }}>
|
||||
How to set up multiple accounts
|
||||
</Typography>
|
||||
</DialogTitle>
|
||||
@@ -29,7 +29,7 @@ export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handle
|
||||
<Alert
|
||||
severity="warning"
|
||||
icon={false}
|
||||
sx={(t) => (t.palette.mode === 'dark' ? { bgcolor: (t) => t.palette.background.paper } : {})}
|
||||
sx={(t) => (t.palette.mode === 'dark' ? { bgcolor: (theme) => theme.palette.background.paper } : {})}
|
||||
>
|
||||
<Typography>In order to create multiple accounts your wallet needs a password.</Typography>
|
||||
<Typography>Follow steps below to create password.</Typography>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { MoreVertSharp } from '@mui/icons-material';
|
||||
import { IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
|
||||
|
||||
export const ActionsMenu: React.FC<{ open: boolean; onOpen: () => void; onClose: () => void }> = ({
|
||||
children,
|
||||
open,
|
||||
onOpen,
|
||||
onClose,
|
||||
}) => {
|
||||
const anchorEl: any = useRef<HTMLElement>();
|
||||
|
||||
return (
|
||||
<>
|
||||
<IconButton ref={anchorEl} onClick={onOpen}>
|
||||
<MoreVertSharp />
|
||||
</IconButton>
|
||||
<Menu anchorEl={anchorEl.current} open={open} onClose={onClose}>
|
||||
{children}
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const ActionsMenuItem = ({
|
||||
title,
|
||||
description,
|
||||
onClick,
|
||||
Icon,
|
||||
disabled,
|
||||
}: {
|
||||
title: string;
|
||||
description?: string;
|
||||
onClick?: () => void;
|
||||
Icon?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
}) => (
|
||||
<MenuItem sx={{ p: 2 }} onClick={onClick} disabled={disabled}>
|
||||
<ListItemIcon sx={{ color: 'text.primary' }}>{Icon}</ListItemIcon>
|
||||
<ListItemText sx={{ color: 'text.primary' }} primary={title} secondary={description} />
|
||||
</MenuItem>
|
||||
);
|
||||
@@ -7,13 +7,11 @@ import ModeNightOutlinedIcon from '@mui/icons-material/ModeNightOutlined';
|
||||
import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
|
||||
import { AppContext } from '../context/main';
|
||||
import { NetworkSelector } from './NetworkSelector';
|
||||
import { Node as NodeIcon } from '../svg-icons/node';
|
||||
import { MultiAccounts } from './Accounts';
|
||||
import { config } from '../config';
|
||||
|
||||
export const AppBar = () => {
|
||||
const { logOut, handleShowTerminal, appEnv, handleShowSettings, showSettings, mode, handleSwitchMode } =
|
||||
useContext(AppContext);
|
||||
const { logOut, handleShowTerminal, appEnv, mode, handleSwitchMode } = useContext(AppContext);
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
@@ -31,7 +29,7 @@ export const AppBar = () => {
|
||||
<Grid item container justifyContent="flex-end" md={12} lg={5} spacing={2}>
|
||||
<Grid item>
|
||||
<IconButton size="small" onClick={handleSwitchMode} sx={{ color: 'text.primary' }}>
|
||||
{mode === 'light' ? (
|
||||
{mode === 'dark' ? (
|
||||
<LightModeOutlinedIcon fontSize="small" />
|
||||
) : (
|
||||
<ModeNightOutlinedIcon fontSize="small" sx={{ transform: 'rotate(180deg)' }} />
|
||||
@@ -45,15 +43,6 @@ export const AppBar = () => {
|
||||
</IconButton>
|
||||
</Grid>
|
||||
)}
|
||||
<Grid item>
|
||||
<IconButton
|
||||
onClick={handleShowSettings}
|
||||
sx={{ color: showSettings ? 'primary.main' : 'text.primary' }}
|
||||
size="small"
|
||||
>
|
||||
<NodeIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<IconButton
|
||||
size="small"
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
import React, { useContext } from 'react';
|
||||
import { Logout } from '@mui/icons-material';
|
||||
import TerminalIcon from '@mui/icons-material/Terminal';
|
||||
import ModeNightOutlinedIcon from '@mui/icons-material/ModeNightOutlined';
|
||||
import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
|
||||
import { AppBar as MuiAppBar, Grid, IconButton, Toolbar } from '@mui/material';
|
||||
import { Node } from 'src/svg-icons/node';
|
||||
import { config } from '../../config';
|
||||
import { AppContext } from '../../context/main';
|
||||
import { MultiAccounts } from '../Accounts';
|
||||
import { NetworkSelector } from '../NetworkSelector';
|
||||
|
||||
export const AppBar = () => {
|
||||
const { showSettings, handleShowTerminal, appEnv, handleShowSettings, logOut, mode, handleSwitchMode } =
|
||||
useContext(AppContext);
|
||||
|
||||
return (
|
||||
<MuiAppBar position="sticky" sx={{ boxShadow: 'none', bgcolor: 'transparent', backgroundImage: 'none' }}>
|
||||
<Toolbar disableGutters>
|
||||
<Grid container justifyContent="space-between" alignItems="center" flexWrap="nowrap">
|
||||
<Grid item container alignItems="center" spacing={1}>
|
||||
<Grid item>
|
||||
<MultiAccounts />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<NetworkSelector />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item container justifyContent="flex-end" md={12} lg={5} spacing={2}>
|
||||
<Grid item>
|
||||
<IconButton size="small" onClick={handleSwitchMode} sx={{ color: 'text.primary' }}>
|
||||
{mode === 'light' ? (
|
||||
<ModeNightOutlinedIcon fontSize="small" />
|
||||
) : (
|
||||
<LightModeOutlinedIcon fontSize="small" />
|
||||
)}
|
||||
</IconButton>
|
||||
</Grid>
|
||||
{(appEnv?.SHOW_TERMINAL || config.IS_DEV_MODE) && (
|
||||
<Grid item>
|
||||
<IconButton size="small" onClick={handleShowTerminal} sx={{ color: 'text.primary' }}>
|
||||
<TerminalIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
)}
|
||||
<Grid item>
|
||||
<IconButton
|
||||
onClick={handleShowSettings}
|
||||
sx={{ color: showSettings ? 'primary.main' : 'text.primary' }}
|
||||
size="small"
|
||||
>
|
||||
<Node fontSize="small" />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<IconButton size="small" onClick={logOut} sx={{ color: 'text.primary' }}>
|
||||
<Logout fontSize="small" />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Toolbar>
|
||||
</MuiAppBar>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './AppBar';
|
||||
@@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import { Box, Button, Typography } from '@mui/material';
|
||||
import { NymCard } from '../NymCard';
|
||||
|
||||
export const Bond = ({
|
||||
onBond,
|
||||
disabled,
|
||||
}: {
|
||||
onBond: () => void;
|
||||
|
||||
disabled: boolean;
|
||||
}) => (
|
||||
<NymCard title="Bonding" borderless>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Typography>Bond a mixnode or a gateway</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'space-between',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
size="large"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
type="button"
|
||||
disableElevation
|
||||
onClick={onBond}
|
||||
disabled={disabled}
|
||||
>
|
||||
Bond
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</NymCard>
|
||||
);
|
||||
@@ -0,0 +1,84 @@
|
||||
import React from 'react';
|
||||
import { Stack, Typography } from '@mui/material';
|
||||
import { Link } from '@nymproject/react/link/Link';
|
||||
import { TBondedGateway, urls } from 'src/context';
|
||||
import { NymCard } from 'src/components';
|
||||
import { Network } from 'src/types';
|
||||
import { IdentityKey } from 'src/components/IdentityKey';
|
||||
import { Cell, Header, NodeTable } from './NodeTable';
|
||||
import { BondedGatewayActions, TBondedGatwayActions } from './BondedGatewayAction';
|
||||
|
||||
const headers: Header[] = [
|
||||
{
|
||||
header: 'IP',
|
||||
id: 'ip',
|
||||
sx: { pl: 0 },
|
||||
},
|
||||
{
|
||||
header: 'Bond',
|
||||
id: 'bond',
|
||||
},
|
||||
{
|
||||
id: 'menu-button',
|
||||
sx: { width: 34, maxWidth: 34 },
|
||||
},
|
||||
];
|
||||
|
||||
export const BondedGateway = ({
|
||||
gateway,
|
||||
network,
|
||||
onActionSelect,
|
||||
}: {
|
||||
gateway: TBondedGateway;
|
||||
network?: Network;
|
||||
onActionSelect: (action: TBondedGatwayActions) => void;
|
||||
}) => {
|
||||
const { name, bond, ip, identityKey } = gateway;
|
||||
const cells: Cell[] = [
|
||||
{
|
||||
cell: ip,
|
||||
id: 'stake-saturation-cell',
|
||||
},
|
||||
{
|
||||
cell: `${bond.amount} ${bond.denom}`,
|
||||
id: 'stake-cell',
|
||||
sx: { pl: 0 },
|
||||
},
|
||||
|
||||
{
|
||||
cell: <BondedGatewayActions onActionSelect={onActionSelect} />,
|
||||
id: 'actions-cell',
|
||||
align: 'right',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<NymCard
|
||||
borderless
|
||||
title={
|
||||
<Stack gap={2}>
|
||||
<Typography variant="h5" fontWeight={600}>
|
||||
Gateway
|
||||
</Typography>
|
||||
|
||||
{name && (
|
||||
<Typography fontWeight="regular" variant="h6">
|
||||
{name}
|
||||
</Typography>
|
||||
)}
|
||||
<IdentityKey identityKey={identityKey} />
|
||||
</Stack>
|
||||
}
|
||||
>
|
||||
<NodeTable headers={headers} cells={cells} />
|
||||
{network && (
|
||||
<Typography sx={{ mt: 2, fontSize: 'small' }}>
|
||||
Check more stats of your node on the{' '}
|
||||
<Link href={`${urls(network).networkExplorer}/network-components/gateways`} target="_blank">
|
||||
explorer
|
||||
</Link>
|
||||
</Typography>
|
||||
)}
|
||||
</NymCard>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ActionsMenu, ActionsMenuItem } from 'src/components/ActionsMenu';
|
||||
import { Unbond as UnbondIcon } from '../../svg-icons';
|
||||
|
||||
export type TBondedGatwayActions = 'unbond';
|
||||
|
||||
export const BondedGatewayActions = ({
|
||||
onActionSelect,
|
||||
}: {
|
||||
onActionSelect: (action: TBondedGatwayActions) => void;
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleOpen = () => setIsOpen(true);
|
||||
const handleClose = () => setIsOpen(false);
|
||||
|
||||
const handleActionClick = (action: TBondedGatwayActions) => {
|
||||
onActionSelect(action);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<ActionsMenu open={isOpen} onOpen={handleOpen} onClose={handleClose}>
|
||||
<ActionsMenuItem
|
||||
title="Unbond"
|
||||
Icon={<UnbondIcon fontSize="inherit" />}
|
||||
onClick={() => handleActionClick('unbond')}
|
||||
/>
|
||||
</ActionsMenu>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,138 @@
|
||||
import React from 'react';
|
||||
import { Box, Button, Stack, Typography } from '@mui/material';
|
||||
import { Link } from '@nymproject/react/link/Link';
|
||||
import { TBondedMixnode, urls } from 'src/context';
|
||||
import { NymCard } from 'src/components';
|
||||
import { Network } from 'src/types';
|
||||
import { IdentityKey } from 'src/components/IdentityKey';
|
||||
import { NodeStatus } from 'src/components/NodeStatus';
|
||||
import { Node as NodeIcon } from '../../svg-icons/node';
|
||||
import { Cell, Header, NodeTable } from './NodeTable';
|
||||
import { BondedMixnodeActions, TBondedMixnodeActions } from './BondedMixnodeActions';
|
||||
|
||||
const headers: Header[] = [
|
||||
{
|
||||
header: 'Stake',
|
||||
id: 'stake',
|
||||
sx: { pl: 0 },
|
||||
},
|
||||
{
|
||||
header: 'Bond',
|
||||
id: 'bond',
|
||||
},
|
||||
{
|
||||
header: 'Stake saturation',
|
||||
id: 'stake-saturation',
|
||||
},
|
||||
{
|
||||
header: 'PM',
|
||||
id: 'profit-margin',
|
||||
tooltipText:
|
||||
'The percentage of the node rewards that you as the node operator will take before the rest of the reward is shared between you and the delegators.',
|
||||
},
|
||||
{
|
||||
header: 'Operator rewards',
|
||||
id: 'operator-rewards',
|
||||
tooltipText:
|
||||
'This is your (operator) new rewards including the PM and cost. You can compound your rewards manually every epoch or unbond your node to redeem them.',
|
||||
},
|
||||
{
|
||||
header: 'No. delegators',
|
||||
id: 'delegators',
|
||||
},
|
||||
{
|
||||
id: 'menu-button',
|
||||
sx: { width: 34, maxWidth: 34 },
|
||||
},
|
||||
];
|
||||
|
||||
export const BondedMixnode = ({
|
||||
mixnode,
|
||||
network,
|
||||
onActionSelect,
|
||||
}: {
|
||||
mixnode: TBondedMixnode;
|
||||
network?: Network;
|
||||
onActionSelect: (action: TBondedMixnodeActions) => void;
|
||||
}) => {
|
||||
const { name, stake, bond, stakeSaturation, profitMargin, operatorRewards, delegators, status, identityKey } =
|
||||
mixnode;
|
||||
const cells: Cell[] = [
|
||||
{
|
||||
cell: `${stake.amount} ${stake.denom}`,
|
||||
id: 'stake-cell',
|
||||
},
|
||||
{
|
||||
cell: `${bond.amount} ${bond.denom}`,
|
||||
id: 'bond-cell',
|
||||
},
|
||||
{
|
||||
cell: `${stakeSaturation}%`,
|
||||
id: 'stake-saturation-cell',
|
||||
},
|
||||
{
|
||||
cell: `${profitMargin}%`,
|
||||
id: 'pm-cell',
|
||||
},
|
||||
{
|
||||
cell: `${operatorRewards.amount} ${operatorRewards.denom}`,
|
||||
id: 'operator-rewards-cell',
|
||||
},
|
||||
{
|
||||
cell: delegators,
|
||||
id: 'delegators-cell',
|
||||
},
|
||||
{
|
||||
cell: (
|
||||
<BondedMixnodeActions
|
||||
onActionSelect={onActionSelect}
|
||||
disabledRedeemAndCompound={Number(mixnode.operatorRewards.amount) === 0}
|
||||
/>
|
||||
),
|
||||
id: 'actions-cell',
|
||||
align: 'right',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<NymCard
|
||||
borderless
|
||||
title={
|
||||
<Stack gap={2}>
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Typography variant="h5" fontWeight={600}>
|
||||
Mix node
|
||||
</Typography>
|
||||
<NodeStatus status={status} />
|
||||
</Box>
|
||||
{name && (
|
||||
<Typography fontWeight="regular" variant="h6">
|
||||
{name}
|
||||
</Typography>
|
||||
)}
|
||||
<IdentityKey identityKey={identityKey} />
|
||||
</Stack>
|
||||
}
|
||||
Action={
|
||||
<Button
|
||||
variant="text"
|
||||
color="secondary"
|
||||
onClick={() => onActionSelect('nodeSettings')}
|
||||
startIcon={<NodeIcon />}
|
||||
>
|
||||
Settings
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<NodeTable headers={headers} cells={cells} />
|
||||
{network && (
|
||||
<Typography sx={{ mt: 2, fontSize: 'small' }}>
|
||||
Check more stats of your node on the{' '}
|
||||
<Link href={`${urls(network).networkExplorer}/network-components/mixnodes`} target="_blank">
|
||||
explorer
|
||||
</Link>
|
||||
</Typography>
|
||||
)}
|
||||
</NymCard>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Typography } from '@mui/material';
|
||||
import { ActionsMenu, ActionsMenuItem } from 'src/components/ActionsMenu';
|
||||
import { Unbond as UnbondIcon } from '../../svg-icons';
|
||||
|
||||
export type TBondedMixnodeActions = 'nodeSettings' | 'bondMore' | 'unbond' | 'redeem' | 'compound';
|
||||
|
||||
export const BondedMixnodeActions = ({
|
||||
onActionSelect,
|
||||
disabledRedeemAndCompound,
|
||||
}: {
|
||||
onActionSelect: (action: TBondedMixnodeActions) => void;
|
||||
disabledRedeemAndCompound: boolean;
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleOpen = () => setIsOpen(true);
|
||||
const handleClose = () => setIsOpen(false);
|
||||
|
||||
const handleActionClick = (action: TBondedMixnodeActions) => {
|
||||
onActionSelect(action);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<ActionsMenu open={isOpen} onOpen={handleOpen} onClose={handleClose}>
|
||||
<ActionsMenuItem
|
||||
title="Unbond"
|
||||
Icon={<UnbondIcon fontSize="inherit" />}
|
||||
onClick={() => handleActionClick('unbond')}
|
||||
/>
|
||||
<ActionsMenuItem
|
||||
title="Compound rewards"
|
||||
Icon={<Typography sx={{ pl: 1 }}>C</Typography>}
|
||||
description={disabledRedeemAndCompound ? 'No rewards to compound' : 'Add your rewards to you balance'}
|
||||
onClick={() => handleActionClick('compound')}
|
||||
disabled={disabledRedeemAndCompound}
|
||||
/>
|
||||
<ActionsMenuItem
|
||||
title="Redeem rewards"
|
||||
Icon={<Typography sx={{ pl: 1 }}>R</Typography>}
|
||||
description={disabledRedeemAndCompound ? 'No rewards to redeem' : 'Add your rewards to you balance'}
|
||||
onClick={() => handleActionClick('redeem')}
|
||||
disabled={disabledRedeemAndCompound}
|
||||
/>
|
||||
</ActionsMenu>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Stack,
|
||||
SxProps,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableCellProps,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { InfoTooltip } from '../InfoToolTip';
|
||||
|
||||
export type Header = { header?: string; id: string; tooltipText?: string; sx?: SxProps };
|
||||
export type Cell = { cell: string | React.ReactNode; id: string; align?: TableCellProps['align']; sx?: SxProps };
|
||||
|
||||
export interface TableProps {
|
||||
headers: Header[];
|
||||
cells: Cell[];
|
||||
}
|
||||
|
||||
export const NodeTable = ({ headers, cells }: TableProps) => (
|
||||
<TableContainer>
|
||||
<Table aria-label="node-table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{headers.map(({ header, id, tooltipText }) => (
|
||||
<TableCell key={id}>
|
||||
<Stack direction="row" gap={1}>
|
||||
{tooltipText && <InfoTooltip title={tooltipText} />}
|
||||
<Typography>{header}</Typography>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow key="node-data">
|
||||
{cells.map(({ cell, id, align }) => (
|
||||
<TableCell key={id} align={align} sx={{ textTransform: 'uppercase' }}>
|
||||
{cell}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
@@ -0,0 +1,214 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { IdentityKeyFormField } from '@nymproject/react/mixnodes/IdentityKeyFormField';
|
||||
import { Box, Checkbox, FormControlLabel, Stack, TextField } from '@mui/material';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { CurrencyFormField } from '@nymproject/react/currency/CurrencyFormField';
|
||||
import { NodeTypeSelector, TokenPoolSelector } from 'src/components';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import { checkHasEnoughFunds, checkHasEnoughLockedTokens } from 'src/utils';
|
||||
import { CurrencyDenom, TNodeType } from '@nymproject/types';
|
||||
import { GatewayAmount, GatewayData } from 'src/pages/bonding/types';
|
||||
import { gatewayValidationSchema, amountSchema } from './gatewayValidationSchema';
|
||||
|
||||
const NodeFormData = ({ gatewayData, onNext }: { gatewayData: GatewayData; onNext: (data: GatewayData) => void }) => {
|
||||
const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
formState: { errors },
|
||||
handleSubmit,
|
||||
setValue,
|
||||
} = useForm({ resolver: yupResolver(gatewayValidationSchema), defaultValues: gatewayData });
|
||||
|
||||
const handleRequestValidation = (event: { detail: { step: number } }) => {
|
||||
if (event.detail.step === 1) {
|
||||
handleSubmit(onNext)();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('validate_bond_gateway_step' as any, handleRequestValidation);
|
||||
return () => window.removeEventListener('validate_bond_gateway_step' as any, handleRequestValidation);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack gap={2}>
|
||||
<IdentityKeyFormField
|
||||
required
|
||||
fullWidth
|
||||
label="Identity Key"
|
||||
initialValue={gatewayData?.identityKey}
|
||||
errorText={errors.identityKey?.message}
|
||||
onChanged={(value) => setValue('identityKey', value)}
|
||||
/>
|
||||
<TextField
|
||||
{...register('sphinxKey')}
|
||||
name="sphinxKey"
|
||||
label="Sphinx key"
|
||||
error={Boolean(errors.sphinxKey)}
|
||||
helperText={errors.sphinxKey?.message}
|
||||
/>
|
||||
<TextField
|
||||
{...register('ownerSignature')}
|
||||
name="ownerSignature"
|
||||
label="Owner signature"
|
||||
error={Boolean(errors.ownerSignature)}
|
||||
helperText={errors.ownerSignature?.message}
|
||||
/>
|
||||
<TextField
|
||||
{...register('location')}
|
||||
name="location"
|
||||
label="Location"
|
||||
error={Boolean(errors.location)}
|
||||
helperText={errors.location?.message}
|
||||
required
|
||||
sx={{ flexBasis: '50%' }}
|
||||
/>
|
||||
<Stack direction="row" gap={2}>
|
||||
<TextField
|
||||
{...register('host')}
|
||||
name="host"
|
||||
label="Host"
|
||||
error={Boolean(errors.host)}
|
||||
helperText={errors.host?.message}
|
||||
required
|
||||
sx={{ flexBasis: '50%' }}
|
||||
/>
|
||||
<TextField
|
||||
{...register('version')}
|
||||
name="version"
|
||||
label="Version"
|
||||
error={Boolean(errors.version)}
|
||||
helperText={errors.version?.message}
|
||||
required
|
||||
sx={{ flexBasis: '50%' }}
|
||||
/>
|
||||
</Stack>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={() => setShowAdvancedOptions((show) => !show)} checked={showAdvancedOptions} />}
|
||||
label="Show advanced options"
|
||||
/>
|
||||
{showAdvancedOptions && (
|
||||
<Stack direction="row" gap={2} sx={{ mb: 2 }}>
|
||||
<TextField
|
||||
{...register('mixPort')}
|
||||
name="mixPort"
|
||||
label="Mix port"
|
||||
error={Boolean(errors.mixPort)}
|
||||
helperText={errors.mixPort?.message}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
{...register('clientsPort')}
|
||||
name="clientsPort"
|
||||
label="Client WS API port"
|
||||
error={Boolean(errors.clientsPort)}
|
||||
helperText={errors.clientsPort?.message}
|
||||
fullWidth
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const AmountFormData = ({
|
||||
denom,
|
||||
amountData,
|
||||
hasVestingTokens,
|
||||
onNext,
|
||||
}: {
|
||||
denom: CurrencyDenom;
|
||||
amountData: GatewayAmount;
|
||||
hasVestingTokens: boolean;
|
||||
onNext: (data: any) => void;
|
||||
}) => {
|
||||
const {
|
||||
formState: { errors },
|
||||
handleSubmit,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
} = useForm({ resolver: yupResolver(amountSchema), defaultValues: amountData });
|
||||
|
||||
const handleRequestValidation = async (event: { detail: { step: number } }) => {
|
||||
let hasSufficientTokens = true;
|
||||
const values = getValues();
|
||||
|
||||
if (values.tokenPool === 'balance') {
|
||||
hasSufficientTokens = await checkHasEnoughFunds(values.amount.amount);
|
||||
}
|
||||
|
||||
if (values.tokenPool === 'locked') {
|
||||
hasSufficientTokens = await checkHasEnoughLockedTokens(values.amount.amount);
|
||||
}
|
||||
|
||||
if (event.detail.step === 2 && hasSufficientTokens) {
|
||||
handleSubmit(onNext)();
|
||||
} else {
|
||||
setError('amount.amount', { message: 'Not enough tokens' });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('validate_bond_gateway_step' as any, handleRequestValidation);
|
||||
return () => window.removeEventListener('validate_bond_gateway_step' as any, handleRequestValidation);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack gap={2}>
|
||||
<Box display="flex" gap={2} justifyContent="center" sx={{ mt: 2 }}>
|
||||
{hasVestingTokens && <TokenPoolSelector disabled={false} onSelect={(pool) => setValue('tokenPool', pool)} />}
|
||||
<CurrencyFormField
|
||||
required
|
||||
fullWidth
|
||||
label="Amount"
|
||||
autoFocus
|
||||
onChanged={(newValue) => setValue('amount', newValue, { shouldValidate: true })}
|
||||
validationError={errors.amount?.amount?.message}
|
||||
denom={denom}
|
||||
initialValue={amountData.amount.amount}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export const BondGatewayForm = ({
|
||||
step,
|
||||
denom,
|
||||
gatewayData,
|
||||
amountData,
|
||||
hasVestingTokens,
|
||||
onValidateGatewayData,
|
||||
onValidateAmountData,
|
||||
onSelectNodeType,
|
||||
}: {
|
||||
step: 1 | 2 | 3;
|
||||
gatewayData: GatewayData;
|
||||
amountData: GatewayAmount;
|
||||
denom: CurrencyDenom;
|
||||
hasVestingTokens: boolean;
|
||||
onValidateGatewayData: (data: GatewayData) => void;
|
||||
onValidateAmountData: (data: GatewayAmount) => Promise<void>;
|
||||
onSelectNodeType: (nodeType: TNodeType) => void;
|
||||
}) => (
|
||||
<>
|
||||
{step === 1 && (
|
||||
<>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<NodeTypeSelector disabled={false} setNodeType={onSelectNodeType} nodeType="gateway" />
|
||||
</Box>
|
||||
<NodeFormData onNext={onValidateGatewayData} gatewayData={gatewayData} />
|
||||
</>
|
||||
)}
|
||||
{step === 2 && (
|
||||
<AmountFormData
|
||||
denom={denom}
|
||||
amountData={amountData}
|
||||
hasVestingTokens={hasVestingTokens}
|
||||
onNext={onValidateAmountData}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
@@ -0,0 +1,223 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import { Box, Checkbox, FormControlLabel, Stack, TextField } from '@mui/material';
|
||||
import { CurrencyFormField } from '@nymproject/react/currency/CurrencyFormField';
|
||||
import { IdentityKeyFormField } from '@nymproject/react/mixnodes/IdentityKeyFormField';
|
||||
import { CurrencyDenom, TNodeType } from '@nymproject/types';
|
||||
import { checkHasEnoughFunds, checkHasEnoughLockedTokens } from 'src/utils';
|
||||
import { NodeTypeSelector, TokenPoolSelector } from 'src/components';
|
||||
import { MixnodeAmount, MixnodeData } from 'src/pages/bonding/types';
|
||||
import { amountSchema, mixnodeValidationSchema } from './mixnodeValidationSchema';
|
||||
|
||||
const NodeFormData = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; onNext: (data: any) => void }) => {
|
||||
const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
formState: { errors },
|
||||
handleSubmit,
|
||||
setValue,
|
||||
} = useForm({ resolver: yupResolver(mixnodeValidationSchema), defaultValues: mixnodeData });
|
||||
|
||||
const handleRequestValidation = (event: { detail: { step: number } }) => {
|
||||
if (event.detail.step === 1) {
|
||||
handleSubmit(onNext)();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('validate_bond_mixnode_step' as any, handleRequestValidation);
|
||||
return () => window.removeEventListener('validate_bond_mixnode_step' as any, handleRequestValidation);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack gap={2}>
|
||||
<IdentityKeyFormField
|
||||
required
|
||||
fullWidth
|
||||
label="Identity Key"
|
||||
initialValue={mixnodeData?.identityKey}
|
||||
errorText={errors.identityKey?.message}
|
||||
onChanged={(value) => setValue('identityKey', value)}
|
||||
/>
|
||||
<TextField
|
||||
{...register('sphinxKey')}
|
||||
name="sphinxKey"
|
||||
label="Sphinx key"
|
||||
error={Boolean(errors.sphinxKey)}
|
||||
helperText={errors.sphinxKey?.message}
|
||||
/>
|
||||
<TextField
|
||||
{...register('ownerSignature')}
|
||||
name="ownerSignature"
|
||||
label="Owner signature"
|
||||
error={Boolean(errors.ownerSignature)}
|
||||
helperText={errors.ownerSignature?.message}
|
||||
/>
|
||||
<Stack direction="row" gap={2}>
|
||||
<TextField
|
||||
{...register('host')}
|
||||
name="host"
|
||||
label="Host"
|
||||
error={Boolean(errors.host)}
|
||||
helperText={errors.host?.message}
|
||||
required
|
||||
sx={{ flexBasis: '50%' }}
|
||||
/>
|
||||
<TextField
|
||||
{...register('version')}
|
||||
name="version"
|
||||
label="Version"
|
||||
error={Boolean(errors.version)}
|
||||
helperText={errors.version?.message}
|
||||
required
|
||||
sx={{ flexBasis: '50%' }}
|
||||
/>
|
||||
</Stack>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={() => setShowAdvancedOptions((show) => !show)} checked={showAdvancedOptions} />}
|
||||
label="Show advanced options"
|
||||
/>
|
||||
{showAdvancedOptions && (
|
||||
<Stack direction="row" gap={2} sx={{ mb: 2 }}>
|
||||
<TextField
|
||||
{...register('mixPort')}
|
||||
name="mixPort"
|
||||
label="Mix port"
|
||||
error={Boolean(errors.mixPort)}
|
||||
helperText={errors.mixPort?.message}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
{...register('verlocPort')}
|
||||
name="verlocPort"
|
||||
label="Verloc port"
|
||||
error={Boolean(errors.verlocPort)}
|
||||
helperText={errors.verlocPort?.message}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
{...register('httpApiPort')}
|
||||
name="httpApiPort"
|
||||
label="HTTP api port"
|
||||
error={Boolean(errors.httpApiPort)}
|
||||
helperText={errors.httpApiPort?.message}
|
||||
fullWidth
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const AmountFormData = ({
|
||||
amountData,
|
||||
hasVestingTokens,
|
||||
denom,
|
||||
onNext,
|
||||
}: {
|
||||
amountData: MixnodeAmount;
|
||||
hasVestingTokens: boolean;
|
||||
denom: CurrencyDenom;
|
||||
onNext: (data: MixnodeAmount) => void;
|
||||
}) => {
|
||||
const {
|
||||
register,
|
||||
formState: { errors },
|
||||
handleSubmit,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
} = useForm({ resolver: yupResolver(amountSchema), defaultValues: amountData });
|
||||
|
||||
const handleRequestValidation = async (event: { detail: { step: number } }) => {
|
||||
let hasSufficientTokens = true;
|
||||
const values = getValues();
|
||||
|
||||
if (values.tokenPool === 'balance') {
|
||||
hasSufficientTokens = await checkHasEnoughFunds(values.amount.amount);
|
||||
}
|
||||
|
||||
if (values.tokenPool === 'locked') {
|
||||
hasSufficientTokens = await checkHasEnoughLockedTokens(values.amount.amount);
|
||||
}
|
||||
|
||||
if (event.detail.step === 2 && hasSufficientTokens) {
|
||||
handleSubmit(onNext)();
|
||||
} else {
|
||||
setError('amount.amount', { message: 'Not enough tokens' });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('validate_bond_mixnode_step' as any, handleRequestValidation);
|
||||
return () => window.removeEventListener('validate_bond_mixnode_step' as any, handleRequestValidation);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack gap={2}>
|
||||
<Box display="flex" gap={2} justifyContent="center" sx={{ mt: 2 }}>
|
||||
{hasVestingTokens && <TokenPoolSelector disabled={false} onSelect={(pool) => setValue('tokenPool', pool)} />}
|
||||
<CurrencyFormField
|
||||
required
|
||||
fullWidth
|
||||
label="Amount"
|
||||
autoFocus
|
||||
onChanged={(newValue) => {
|
||||
setValue('amount', newValue, { shouldValidate: true });
|
||||
}}
|
||||
validationError={errors.amount?.amount?.message}
|
||||
denom={denom}
|
||||
initialValue={amountData.amount.amount}
|
||||
/>
|
||||
</Box>
|
||||
<TextField
|
||||
{...register('profitMargin')}
|
||||
name="profitMargin"
|
||||
label="Profit margin"
|
||||
error={Boolean(errors.profitMargin)}
|
||||
helperText={errors.profitMargin?.message}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export const BondMixnodeForm = ({
|
||||
step,
|
||||
denom,
|
||||
mixnodeData,
|
||||
amountData,
|
||||
hasVestingTokens,
|
||||
onValidateMixnodeData,
|
||||
onValidateAmountData,
|
||||
onSelectNodeType,
|
||||
}: {
|
||||
step: 1 | 2 | 3;
|
||||
mixnodeData: MixnodeData;
|
||||
amountData: MixnodeAmount;
|
||||
denom: CurrencyDenom;
|
||||
hasVestingTokens: boolean;
|
||||
onValidateMixnodeData: (data: MixnodeData) => void;
|
||||
onValidateAmountData: (data: MixnodeAmount) => Promise<void>;
|
||||
onSelectNodeType: (nodeType: TNodeType) => void;
|
||||
}) => (
|
||||
<>
|
||||
{step === 1 && (
|
||||
<>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<NodeTypeSelector disabled={false} setNodeType={onSelectNodeType} nodeType="mixnode" />
|
||||
</Box>
|
||||
<NodeFormData onNext={onValidateMixnodeData} mixnodeData={mixnodeData} />
|
||||
</>
|
||||
)}
|
||||
{step === 2 && (
|
||||
<AmountFormData
|
||||
denom={denom}
|
||||
amountData={amountData}
|
||||
hasVestingTokens={hasVestingTokens}
|
||||
onNext={onValidateAmountData}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
@@ -0,0 +1,59 @@
|
||||
import * as Yup from 'yup';
|
||||
import {
|
||||
isValidHostname,
|
||||
validateAmount,
|
||||
validateKey,
|
||||
validateLocation,
|
||||
validateRawPort,
|
||||
validateVersion,
|
||||
} from 'src/utils';
|
||||
|
||||
export const gatewayValidationSchema = Yup.object().shape({
|
||||
identityKey: Yup.string()
|
||||
.required('An indentity key is required')
|
||||
.test('valid-id-key', 'A valid identity key is required', (value) => validateKey(value || '', 32)),
|
||||
|
||||
sphinxKey: Yup.string()
|
||||
.required('A sphinx key is required')
|
||||
.test('valid-sphinx-key', 'A valid sphinx key is required', (value) => validateKey(value || '', 32)),
|
||||
|
||||
ownerSignature: Yup.string()
|
||||
.required('Signature is required')
|
||||
.test('valid-signature', 'A valid signature is required', (value) => validateKey(value || '', 64)),
|
||||
|
||||
host: Yup.string()
|
||||
.required('A host is required')
|
||||
.test('valid-host', 'A valid host is required', (value) => (value ? isValidHostname(value) : false)),
|
||||
|
||||
version: Yup.string()
|
||||
.required('A version is required')
|
||||
.test('valid-version', 'A valid version is required', (value) => (value ? validateVersion(value) : false)),
|
||||
|
||||
location: Yup.string()
|
||||
.required('A location is required')
|
||||
.test('valid-location', 'A valid version is required', (locationValueTest) =>
|
||||
locationValueTest ? validateLocation(locationValueTest) : false,
|
||||
),
|
||||
|
||||
mixPort: Yup.number()
|
||||
.required('A mixport is required')
|
||||
.test('valid-mixport', 'A valid mixport is required', (value) => (value ? validateRawPort(value) : false)),
|
||||
|
||||
clientsPort: Yup.number()
|
||||
.required('A clients port is required')
|
||||
.test('valid-clients', 'A valid clients port is required', (value) => (value ? validateRawPort(value) : false)),
|
||||
});
|
||||
|
||||
export const amountSchema = Yup.object().shape({
|
||||
amount: Yup.object().shape({
|
||||
amount: Yup.string()
|
||||
.required('An amount is required')
|
||||
.test('valid-amount', 'Pledge error', async function isValidAmount(this, value) {
|
||||
const isValid = await validateAmount(value || '', '100');
|
||||
if (!isValid) {
|
||||
return this.createError({ message: 'A valid amount is required (min 100)' });
|
||||
}
|
||||
return true;
|
||||
}),
|
||||
}),
|
||||
});
|
||||
@@ -0,0 +1,51 @@
|
||||
import * as Yup from 'yup';
|
||||
import { isValidHostname, validateAmount, validateKey, validateRawPort, validateVersion } from 'src/utils';
|
||||
|
||||
export const mixnodeValidationSchema = Yup.object().shape({
|
||||
identityKey: Yup.string()
|
||||
.required('An identity key is required')
|
||||
.test('valid-id-key', 'A valid identity key is required', (value) => validateKey(value || '', 32)),
|
||||
|
||||
sphinxKey: Yup.string()
|
||||
.required('A sphinx key is required')
|
||||
.test('valid-sphinx-key', 'A valid sphinx key is required', (value) => validateKey(value || '', 32)),
|
||||
|
||||
ownerSignature: Yup.string()
|
||||
.required('Signature is required')
|
||||
.test('valid-signature', 'A valid signature is required', (value) => validateKey(value || '', 64)),
|
||||
|
||||
host: Yup.string()
|
||||
.required('A host is required')
|
||||
.test('valid-host', 'A valid host is required', (value) => (value ? isValidHostname(value) : false)),
|
||||
|
||||
version: Yup.string()
|
||||
.required('A version is required')
|
||||
.test('valid-version', 'A valid version is required', (value) => (value ? validateVersion(value) : false)),
|
||||
|
||||
mixPort: Yup.number()
|
||||
.required('A mixport is required')
|
||||
.test('valid-mixport', 'A valid mixport is required', (value) => (value ? validateRawPort(value) : false)),
|
||||
|
||||
verlocPort: Yup.number()
|
||||
.required('A verloc port is required')
|
||||
.test('valid-verloc', 'A valid verloc port is required', (value) => (value ? validateRawPort(value) : false)),
|
||||
|
||||
httpApiPort: Yup.number()
|
||||
.required('A http-api port is required')
|
||||
.test('valid-http', 'A valid http-api port is required', (value) => (value ? validateRawPort(value) : false)),
|
||||
});
|
||||
|
||||
export const amountSchema = Yup.object().shape({
|
||||
amount: Yup.object().shape({
|
||||
amount: Yup.string()
|
||||
.required('An amount is required')
|
||||
.test('valid-amount', 'Pledge error', async function isValidAmount(this, value) {
|
||||
const isValid = await validateAmount(value || '', '100');
|
||||
if (!isValid) {
|
||||
return this.createError({ message: 'A valid amount is required (min 100)' });
|
||||
}
|
||||
return true;
|
||||
}),
|
||||
}),
|
||||
profitMargin: Yup.number().required('Profit Percentage is required').min(0).max(100),
|
||||
});
|
||||
@@ -0,0 +1,161 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Box } from '@mui/material';
|
||||
import { CurrencyDenom, TNodeType } from '@nymproject/types';
|
||||
import { ConfirmTx } from 'src/components/ConfirmTX';
|
||||
import { ModalListItem } from 'src/components/Modals/ModalListItem';
|
||||
import { SimpleModal } from 'src/components/Modals/SimpleModal';
|
||||
import { TPoolOption } from 'src/components/TokenPoolSelector';
|
||||
import { useGetFee } from 'src/hooks/useGetFee';
|
||||
import { GatewayAmount, GatewayData } from 'src/pages/bonding/types';
|
||||
import { simulateBondGateway, simulateVestingBondGateway } from 'src/requests';
|
||||
import { TBondGatewayArgs } from 'src/types';
|
||||
import { BondGatewayForm } from '../forms/BondGatewayForm';
|
||||
|
||||
const defaultMixnodeValues: GatewayData = {
|
||||
identityKey: '',
|
||||
sphinxKey: '',
|
||||
ownerSignature: '',
|
||||
location: '',
|
||||
host: '',
|
||||
version: '',
|
||||
mixPort: 1789,
|
||||
clientsPort: 1790,
|
||||
};
|
||||
|
||||
const defaultAmountValues = (denom: CurrencyDenom) => ({
|
||||
amount: { amount: '100', denom },
|
||||
tokenPool: 'balance',
|
||||
});
|
||||
|
||||
export const BondGatewayModal = ({
|
||||
denom,
|
||||
hasVestingTokens,
|
||||
onBondGateway,
|
||||
onSelectNodeType,
|
||||
onClose,
|
||||
onError,
|
||||
}: {
|
||||
denom: CurrencyDenom;
|
||||
hasVestingTokens: boolean;
|
||||
onBondGateway: (data: TBondGatewayArgs, tokenPool: TPoolOption) => void;
|
||||
onSelectNodeType: (type: TNodeType) => void;
|
||||
onClose: () => void;
|
||||
onError: (e: string) => void;
|
||||
}) => {
|
||||
const [step, setStep] = useState<1 | 2 | 3>(1);
|
||||
const [gatewayData, setGatewayData] = useState<GatewayData>(defaultMixnodeValues);
|
||||
const [amountData, setAmountData] = useState<GatewayAmount>(defaultAmountValues(denom));
|
||||
|
||||
const { fee, getFee, resetFeeState, feeError } = useGetFee();
|
||||
|
||||
useEffect(() => {
|
||||
if (feeError) {
|
||||
onError(feeError);
|
||||
}
|
||||
}, [feeError]);
|
||||
|
||||
const validateStep = async (s: number) => {
|
||||
const event = new CustomEvent('validate_bond_gateway_step', { detail: { step: s } });
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
setStep(1);
|
||||
};
|
||||
|
||||
const handleUpdateGatwayData = (data: GatewayData) => {
|
||||
setGatewayData(data);
|
||||
setStep(2);
|
||||
};
|
||||
|
||||
const handleUpdateAmountData = async (data: GatewayAmount) => {
|
||||
setAmountData(data);
|
||||
const payload = {
|
||||
pledge: data.amount,
|
||||
ownerSignature: gatewayData.ownerSignature,
|
||||
gateway: {
|
||||
...gatewayData,
|
||||
host: gatewayData.host,
|
||||
version: gatewayData.version,
|
||||
mix_port: gatewayData.mixPort,
|
||||
clients_port: gatewayData.clientsPort,
|
||||
sphinx_key: gatewayData.sphinxKey,
|
||||
identity_key: gatewayData.identityKey,
|
||||
location: gatewayData.location,
|
||||
},
|
||||
};
|
||||
|
||||
if (data.tokenPool === 'balance') {
|
||||
await getFee<TBondGatewayArgs>(simulateBondGateway, payload);
|
||||
} else {
|
||||
await getFee<TBondGatewayArgs>(simulateVestingBondGateway, payload);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirm = async () => {
|
||||
await onBondGateway(
|
||||
{
|
||||
pledge: amountData.amount,
|
||||
ownerSignature: gatewayData.ownerSignature,
|
||||
gateway: {
|
||||
...gatewayData,
|
||||
host: gatewayData.host,
|
||||
version: gatewayData.version,
|
||||
mix_port: gatewayData.mixPort,
|
||||
clients_port: gatewayData.clientsPort,
|
||||
sphinx_key: gatewayData.sphinxKey,
|
||||
identity_key: gatewayData.identityKey,
|
||||
location: gatewayData.location,
|
||||
},
|
||||
},
|
||||
amountData.tokenPool as TPoolOption,
|
||||
);
|
||||
};
|
||||
|
||||
if (fee) {
|
||||
return (
|
||||
<ConfirmTx
|
||||
open
|
||||
header="Bond details"
|
||||
fee={fee}
|
||||
onClose={onClose}
|
||||
onPrev={resetFeeState}
|
||||
onConfirm={handleConfirm}
|
||||
>
|
||||
<ModalListItem label="Node identity key" value={gatewayData.identityKey} divider />
|
||||
<ModalListItem
|
||||
label="Amount"
|
||||
value={`${amountData.amount.amount} ${amountData.amount.denom.toUpperCase()}`}
|
||||
divider
|
||||
/>
|
||||
</ConfirmTx>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SimpleModal
|
||||
open
|
||||
onOk={async () => {
|
||||
await validateStep(step);
|
||||
}}
|
||||
onBack={step === 2 ? handleBack : undefined}
|
||||
onClose={onClose}
|
||||
header="Bond gateway"
|
||||
subHeader={`Step ${step}/2`}
|
||||
okLabel="Next"
|
||||
>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<BondGatewayForm
|
||||
step={step}
|
||||
denom={denom}
|
||||
gatewayData={gatewayData}
|
||||
amountData={amountData}
|
||||
hasVestingTokens={hasVestingTokens}
|
||||
onValidateGatewayData={handleUpdateGatwayData}
|
||||
onValidateAmountData={handleUpdateAmountData}
|
||||
onSelectNodeType={onSelectNodeType}
|
||||
/>
|
||||
</Box>
|
||||
</SimpleModal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,160 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Box } from '@mui/material';
|
||||
import { CurrencyDenom, TNodeType } from '@nymproject/types';
|
||||
import { ConfirmTx } from 'src/components/ConfirmTX';
|
||||
import { ModalListItem } from 'src/components/Modals/ModalListItem';
|
||||
import { SimpleModal } from 'src/components/Modals/SimpleModal';
|
||||
import { TPoolOption } from 'src/components/TokenPoolSelector';
|
||||
import { useGetFee } from 'src/hooks/useGetFee';
|
||||
import { MixnodeAmount, MixnodeData } from 'src/pages/bonding/types';
|
||||
import { simulateBondMixnode, simulateVestingBondMixnode } from 'src/requests';
|
||||
import { TBondMixNodeArgs } from 'src/types';
|
||||
import { BondMixnodeForm } from '../forms/BondMixnodeForm';
|
||||
|
||||
const defaultMixnodeValues: MixnodeData = {
|
||||
identityKey: '',
|
||||
sphinxKey: '',
|
||||
ownerSignature: '',
|
||||
host: '',
|
||||
version: '',
|
||||
mixPort: 1789,
|
||||
verlocPort: 1790,
|
||||
httpApiPort: 8000,
|
||||
};
|
||||
|
||||
const defaultAmountValues = (denom: CurrencyDenom) => ({
|
||||
amount: { amount: '100', denom },
|
||||
profitMargin: 10,
|
||||
tokenPool: 'balance',
|
||||
});
|
||||
|
||||
export const BondMixnodeModal = ({
|
||||
denom,
|
||||
hasVestingTokens,
|
||||
onBondMixnode,
|
||||
onSelectNodeType,
|
||||
onClose,
|
||||
onError,
|
||||
}: {
|
||||
denom: CurrencyDenom;
|
||||
hasVestingTokens: boolean;
|
||||
onBondMixnode: (data: TBondMixNodeArgs, tokenPool: TPoolOption) => void;
|
||||
onSelectNodeType: (type: TNodeType) => void;
|
||||
onClose: () => void;
|
||||
onError: (e: string) => void;
|
||||
}) => {
|
||||
const [step, setStep] = useState<1 | 2 | 3>(1);
|
||||
const [mixnodeData, setMixnodeData] = useState<MixnodeData>(defaultMixnodeValues);
|
||||
const [amountData, setAmountData] = useState<MixnodeAmount>(defaultAmountValues(denom));
|
||||
|
||||
const { fee, getFee, resetFeeState, feeError } = useGetFee();
|
||||
|
||||
useEffect(() => {
|
||||
if (feeError) {
|
||||
onError(feeError);
|
||||
}
|
||||
}, [feeError]);
|
||||
|
||||
const validateStep = async (s: number) => {
|
||||
const event = new CustomEvent('validate_bond_mixnode_step', { detail: { step: s } });
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
setStep(1);
|
||||
};
|
||||
|
||||
const handleUpdateMixnodeData = (data: MixnodeData) => {
|
||||
setMixnodeData(data);
|
||||
setStep(2);
|
||||
};
|
||||
|
||||
const handleUpdateAmountData = async (data: MixnodeAmount) => {
|
||||
setAmountData(data);
|
||||
const payload = {
|
||||
pledge: data.amount,
|
||||
ownerSignature: mixnodeData.ownerSignature,
|
||||
mixnode: {
|
||||
...mixnodeData,
|
||||
mix_port: mixnodeData.mixPort,
|
||||
http_api_port: mixnodeData.httpApiPort,
|
||||
verloc_port: mixnodeData.verlocPort,
|
||||
sphinx_key: mixnodeData.sphinxKey,
|
||||
identity_key: mixnodeData.identityKey,
|
||||
profit_margin_percent: data.profitMargin,
|
||||
},
|
||||
};
|
||||
|
||||
if (data.tokenPool === 'balance') {
|
||||
await getFee<TBondMixNodeArgs>(simulateBondMixnode, payload);
|
||||
} else {
|
||||
await getFee<TBondMixNodeArgs>(simulateVestingBondMixnode, payload);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirm = async () => {
|
||||
await onBondMixnode(
|
||||
{
|
||||
pledge: amountData.amount,
|
||||
ownerSignature: mixnodeData.ownerSignature,
|
||||
mixnode: {
|
||||
...mixnodeData,
|
||||
mix_port: mixnodeData.mixPort,
|
||||
http_api_port: mixnodeData.httpApiPort,
|
||||
verloc_port: mixnodeData.verlocPort,
|
||||
sphinx_key: mixnodeData.sphinxKey,
|
||||
identity_key: mixnodeData.identityKey,
|
||||
profit_margin_percent: amountData.profitMargin,
|
||||
},
|
||||
},
|
||||
amountData.tokenPool as TPoolOption,
|
||||
);
|
||||
};
|
||||
|
||||
if (fee) {
|
||||
return (
|
||||
<ConfirmTx
|
||||
open
|
||||
header="Bond details"
|
||||
fee={fee}
|
||||
onClose={onClose}
|
||||
onPrev={resetFeeState}
|
||||
onConfirm={handleConfirm}
|
||||
>
|
||||
<ModalListItem label="Node identity key" value={mixnodeData.identityKey} divider />
|
||||
<ModalListItem
|
||||
label="Amount"
|
||||
value={`${amountData.amount.amount} ${amountData.amount.denom.toUpperCase()}`}
|
||||
divider
|
||||
/>
|
||||
</ConfirmTx>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SimpleModal
|
||||
open
|
||||
onOk={async () => {
|
||||
await validateStep(step);
|
||||
}}
|
||||
onBack={step === 2 ? handleBack : undefined}
|
||||
onClose={onClose}
|
||||
header="Bond mixnode"
|
||||
subHeader={`Step ${step}/2`}
|
||||
okLabel="Next"
|
||||
>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<BondMixnodeForm
|
||||
step={step}
|
||||
denom={denom}
|
||||
mixnodeData={mixnodeData}
|
||||
amountData={amountData}
|
||||
hasVestingTokens={hasVestingTokens}
|
||||
onValidateMixnodeData={handleUpdateMixnodeData}
|
||||
onValidateAmountData={handleUpdateAmountData}
|
||||
onSelectNodeType={onSelectNodeType}
|
||||
/>
|
||||
</Box>
|
||||
</SimpleModal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,115 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Box, FormHelperText, Stack, TextField } from '@mui/material';
|
||||
import { CurrencyFormField } from '@nymproject/react/currency/CurrencyFormField';
|
||||
import { ModalListItem } from 'src/components/Modals/ModalListItem';
|
||||
import { SimpleModal } from 'src/components/Modals/SimpleModal';
|
||||
import { DecCoin } from '@nymproject/types';
|
||||
import { TokenPoolSelector, TPoolOption } from 'src/components/TokenPoolSelector';
|
||||
import { ConfirmTx } from 'src/components/ConfirmTX';
|
||||
import { useGetFee } from 'src/hooks/useGetFee';
|
||||
import { validateAmount, validateKey } from 'src/utils';
|
||||
|
||||
export const BondMoreModal = ({
|
||||
currentBond,
|
||||
userBalance,
|
||||
hasVestingTokens,
|
||||
onConfirm,
|
||||
onClose,
|
||||
}: {
|
||||
currentBond: DecCoin;
|
||||
userBalance?: string;
|
||||
hasVestingTokens: boolean;
|
||||
onConfirm: (args: { additionalBond: DecCoin; signature: string; tokenPool: TPoolOption }) => Promise<void>;
|
||||
onClose: () => void;
|
||||
}) => {
|
||||
const { fee, resetFeeState } = useGetFee();
|
||||
const [additionalBond, setAdditionalBond] = useState<DecCoin>({ amount: '0', denom: currentBond.denom });
|
||||
const [signature, setSignature] = useState<string>('');
|
||||
const [tokenPool, setTokenPool] = useState<TPoolOption>('balance');
|
||||
const [errorAmount, setErrorAmount] = useState(false);
|
||||
const [errorSignature, setErrorSignature] = useState(false);
|
||||
|
||||
const handleOnOk = async () => {
|
||||
const errors = {
|
||||
amount: false,
|
||||
signature: false,
|
||||
};
|
||||
|
||||
if (!validateKey(signature || '', 64)) {
|
||||
errors.signature = true;
|
||||
}
|
||||
|
||||
if (!additionalBond?.amount) {
|
||||
errors.amount = true;
|
||||
}
|
||||
|
||||
if (additionalBond && !(await validateAmount(additionalBond.amount, '1'))) {
|
||||
errors.amount = true;
|
||||
}
|
||||
|
||||
if (!errors.amount && !errors.signature) {
|
||||
onConfirm({ additionalBond, signature, tokenPool });
|
||||
} else {
|
||||
setErrorAmount(errors.amount);
|
||||
setErrorSignature(errors.signature);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setErrorAmount(false);
|
||||
}, [additionalBond]);
|
||||
|
||||
if (fee)
|
||||
return (
|
||||
<ConfirmTx
|
||||
header="Bond more details"
|
||||
open
|
||||
fee={fee}
|
||||
onConfirm={async () => onConfirm({ additionalBond, signature, tokenPool })}
|
||||
onPrev={resetFeeState}
|
||||
>
|
||||
<ModalListItem label="Current bond" value={`${currentBond.amount} ${currentBond.denom}`} divider />
|
||||
<ModalListItem label="Additional bond" value={`${additionalBond?.amount} ${additionalBond?.denom}`} divider />
|
||||
</ConfirmTx>
|
||||
);
|
||||
|
||||
return (
|
||||
<SimpleModal
|
||||
open
|
||||
header="Bond more"
|
||||
subHeader="Bond more tokens on your node and receive more rewards"
|
||||
okLabel="Next"
|
||||
onOk={handleOnOk}
|
||||
okDisabled={errorAmount || errorSignature}
|
||||
onClose={onClose}
|
||||
>
|
||||
<Stack gap={2}>
|
||||
<Box display="flex" gap={1}>
|
||||
{hasVestingTokens && <TokenPoolSelector disabled={false} onSelect={(pool) => setTokenPool(pool)} />}
|
||||
<CurrencyFormField
|
||||
autoFocus
|
||||
label="Bond amount"
|
||||
denom={currentBond.denom}
|
||||
onChanged={(value) => {
|
||||
setAdditionalBond(value);
|
||||
setErrorSignature(false);
|
||||
}}
|
||||
fullWidth
|
||||
validationError={errorAmount ? 'Please enter a valid amount' : undefined}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<TextField fullWidth label="Signature" value={signature} onChange={(e) => setSignature(e.target.value)} />
|
||||
{errorSignature && <FormHelperText sx={{ color: 'error.main' }}>Invalid signature</FormHelperText>}
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<ModalListItem label="Account balance" value={userBalance?.toUpperCase() || '-'} divider />
|
||||
<ModalListItem label="Current bond" value={`${currentBond.amount} ${currentBond.denom}`} divider />
|
||||
<ModalListItem label="Est. fee for this operation will be calculated in the next page" value="" divider />
|
||||
</Box>
|
||||
</Stack>
|
||||
</SimpleModal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,53 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { FeeDetails } from '@nymproject/types';
|
||||
import { ModalFee } from 'src/components/Modals/ModalFee';
|
||||
import { ModalListItem } from 'src/components/Modals/ModalListItem';
|
||||
import { SimpleModal } from 'src/components/Modals/SimpleModal';
|
||||
import { TBondedMixnode } from 'src/context';
|
||||
import { useGetFee } from 'src/hooks/useGetFee';
|
||||
import { simulateCompoundOperatorReward, simulateVestingCompoundOperatorReward } from 'src/requests';
|
||||
|
||||
export const CompoundRewardsModal = ({
|
||||
node,
|
||||
onConfirm,
|
||||
onClose,
|
||||
onError,
|
||||
}: {
|
||||
node: TBondedMixnode;
|
||||
onClose: () => void;
|
||||
onConfirm: (fee?: FeeDetails) => void;
|
||||
onError: (err: string) => void;
|
||||
}) => {
|
||||
const { fee, getFee, feeError, isFeeLoading } = useGetFee();
|
||||
|
||||
useEffect(() => {
|
||||
if (feeError) onError(feeError);
|
||||
}, [feeError]);
|
||||
|
||||
useEffect(() => {
|
||||
if (node.proxy) getFee(simulateVestingCompoundOperatorReward, {});
|
||||
else getFee(simulateCompoundOperatorReward, {});
|
||||
}, []);
|
||||
|
||||
const handleOnOK = async () => onConfirm(fee);
|
||||
|
||||
return (
|
||||
<SimpleModal
|
||||
open
|
||||
header="Compound rewards"
|
||||
subHeader="Get more rewards by compounding"
|
||||
okLabel="Compound"
|
||||
okDisabled={isFeeLoading}
|
||||
onOk={handleOnOK}
|
||||
onClose={onClose}
|
||||
>
|
||||
<ModalListItem
|
||||
label="Rewards to redeem"
|
||||
value={`${node.operatorRewards.amount} ${node.operatorRewards.denom.toUpperCase()}`}
|
||||
divider
|
||||
/>
|
||||
<ModalFee fee={fee} isLoading={isFeeLoading} divider />
|
||||
<ModalListItem label="Rewards will be transferred to the account you are logged in with" value="" />
|
||||
</SimpleModal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import { Stack, Typography, SxProps } from '@mui/material';
|
||||
import { Link } from '@nymproject/react/link/Link';
|
||||
import { ConfirmationModal } from 'src/components/Modals/ConfirmationModal';
|
||||
import { ErrorModal } from 'src/components/Modals/ErrorModal';
|
||||
|
||||
export type ConfirmationDetailProps = {
|
||||
status: 'success' | 'error';
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
txUrl?: string;
|
||||
};
|
||||
|
||||
export const ConfirmationDetailsModal = ({
|
||||
title,
|
||||
subtitle,
|
||||
txUrl,
|
||||
status,
|
||||
onClose,
|
||||
sx,
|
||||
backdropProps,
|
||||
}: ConfirmationDetailProps & {
|
||||
onClose: () => void;
|
||||
sx?: SxProps;
|
||||
backdropProps?: object;
|
||||
}) => {
|
||||
if (status === 'error') {
|
||||
<ErrorModal open message={subtitle} onClose={onClose} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfirmationModal
|
||||
open
|
||||
onConfirm={onClose}
|
||||
onClose={onClose}
|
||||
title=""
|
||||
confirmButton="Done"
|
||||
maxWidth="xs"
|
||||
fullWidth
|
||||
sx={sx}
|
||||
backdropProps={backdropProps}
|
||||
>
|
||||
<Stack alignItems="center" spacing={2}>
|
||||
<Typography variant="h6" fontWeight={600}>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography>{subtitle}</Typography>
|
||||
{txUrl && <Link href={txUrl} target="_blank" sx={{ ml: 1 }} text="View on blockchain" />}
|
||||
</Stack>
|
||||
</ConfirmationModal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,128 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Box, Button, FormHelperText, TextField, Typography } from '@mui/material';
|
||||
import { SimpleModal } from 'src/components/Modals/SimpleModal';
|
||||
import { Node as NodeIcon } from 'src/svg-icons/node';
|
||||
import { TBondedMixnode } from 'src/context';
|
||||
import { Tabs } from 'src/components/Tabs';
|
||||
import { ModalListItem } from 'src/components/Modals/ModalListItem';
|
||||
import { isDecimal } from 'src/utils';
|
||||
import { useGetFee } from 'src/hooks/useGetFee';
|
||||
import { ConfirmTx } from 'src/components/ConfirmTX';
|
||||
import { simulateUpdateMixnode, simulateVestingUpdateMixnode } from 'src/requests';
|
||||
import { LoadingModal } from 'src/components/Modals/LoadingModal';
|
||||
import { FeeDetails } from '@nymproject/types';
|
||||
|
||||
export const NodeSettings = ({
|
||||
currentPm,
|
||||
isVesting,
|
||||
onConfirm,
|
||||
onClose,
|
||||
onError,
|
||||
}: {
|
||||
currentPm: TBondedMixnode['profitMargin'];
|
||||
isVesting: boolean;
|
||||
onConfirm: (profitMargin: number, fee?: FeeDetails) => Promise<void>;
|
||||
onClose: () => void;
|
||||
onError: (err: string) => void;
|
||||
}) => {
|
||||
const [pm, setPm] = useState(currentPm.toString());
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
const { fee, getFee, resetFeeState, isFeeLoading, feeError } = useGetFee();
|
||||
|
||||
const handleValidate = async () => {
|
||||
let isValid = true;
|
||||
const pmAsNumber = Number(pm);
|
||||
|
||||
if (!pmAsNumber) {
|
||||
isValid = false;
|
||||
}
|
||||
if (isDecimal(pmAsNumber)) {
|
||||
isValid = false;
|
||||
}
|
||||
if (pmAsNumber > 100) {
|
||||
isValid = false;
|
||||
}
|
||||
if (pmAsNumber < 0) {
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
setError(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isVesting) {
|
||||
await getFee(simulateVestingUpdateMixnode, { profitMarginPercent: pmAsNumber });
|
||||
} else {
|
||||
await getFee(simulateUpdateMixnode, { profitMarginPercent: pmAsNumber });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setError(false);
|
||||
}, [pm]);
|
||||
|
||||
useEffect(() => {
|
||||
if (feeError) {
|
||||
onError(feeError);
|
||||
}
|
||||
}, [feeError]);
|
||||
|
||||
if (isFeeLoading) return <LoadingModal />;
|
||||
|
||||
if (fee)
|
||||
return (
|
||||
<ConfirmTx
|
||||
open
|
||||
header="Profit margin change"
|
||||
fee={fee}
|
||||
onPrev={resetFeeState}
|
||||
onClose={onClose}
|
||||
onConfirm={() => onConfirm(Number(pm), fee)}
|
||||
>
|
||||
<ModalListItem label="Current profit margin" value={`${currentPm}%`} divider />
|
||||
<ModalListItem label="New profit margin" value={`${pm}%`} divider />
|
||||
</ConfirmTx>
|
||||
);
|
||||
|
||||
return (
|
||||
<SimpleModal
|
||||
open
|
||||
hideCloseIcon
|
||||
sx={{ p: 0 }}
|
||||
header={
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, p: 3 }}>
|
||||
<NodeIcon />
|
||||
<Typography variant="h6" fontWeight={600}>
|
||||
Node Settings
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
okLabel="Next"
|
||||
onClose={onClose}
|
||||
>
|
||||
<Tabs tabs={['System variables']} selectedTab={0} disableActiveTabHighlight />
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Typography fontWeight={600} sx={{ mb: 1 }}>
|
||||
Set profit margin
|
||||
</Typography>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<TextField placeholder="Profit margin" value={pm} onChange={(e) => setPm(e.target.value)} fullWidth />
|
||||
{error && (
|
||||
<FormHelperText sx={{ color: 'error.main' }}>
|
||||
Profit margin should be a whole number between 0 and 100
|
||||
</FormHelperText>
|
||||
)}
|
||||
<FormHelperText>Your new profit margin will be applied in the next epoch</FormHelperText>
|
||||
</Box>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<ModalListItem label="Est. fee for this operation will be caculated in the next page" value="" />
|
||||
</Box>
|
||||
<Button variant="contained" fullWidth size="large" onClick={handleValidate} disabled={error}>
|
||||
Next
|
||||
</Button>
|
||||
</Box>
|
||||
</SimpleModal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,53 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { FeeDetails } from '@nymproject/types';
|
||||
import { ModalListItem } from 'src/components/Modals/ModalListItem';
|
||||
import { SimpleModal } from 'src/components/Modals/SimpleModal';
|
||||
import { ModalFee } from 'src/components/Modals/ModalFee';
|
||||
import { useGetFee } from 'src/hooks/useGetFee';
|
||||
import { simulateClaimOperatorReward, simulateVestingClaimOperatorReward } from 'src/requests';
|
||||
import { TBondedMixnode } from 'src/context';
|
||||
|
||||
export const RedeemRewardsModal = ({
|
||||
node,
|
||||
onConfirm,
|
||||
onError,
|
||||
onClose,
|
||||
}: {
|
||||
node: TBondedMixnode;
|
||||
onConfirm: (fee?: FeeDetails) => Promise<void>;
|
||||
onError: (err: string) => void;
|
||||
onClose: () => void;
|
||||
}) => {
|
||||
const { fee, getFee, isFeeLoading, feeError } = useGetFee();
|
||||
|
||||
useEffect(() => {
|
||||
if (feeError) onError(feeError);
|
||||
}, [feeError]);
|
||||
|
||||
useEffect(() => {
|
||||
if (node.proxy) getFee(simulateVestingClaimOperatorReward, {});
|
||||
else getFee(simulateClaimOperatorReward, {});
|
||||
}, []);
|
||||
|
||||
const handleOnOK = async () => onConfirm(fee);
|
||||
|
||||
return (
|
||||
<SimpleModal
|
||||
open
|
||||
header="Redeem rewards"
|
||||
subHeader="Claim you rewards"
|
||||
okLabel="Redeem"
|
||||
okDisabled={isFeeLoading}
|
||||
onOk={handleOnOK}
|
||||
onClose={onClose}
|
||||
>
|
||||
<ModalListItem
|
||||
label="Rewards to redeem"
|
||||
value={`${node.operatorRewards.amount} ${node.operatorRewards.denom.toUpperCase()}`}
|
||||
divider
|
||||
/>
|
||||
<ModalFee fee={fee} isLoading={isFeeLoading} divider />
|
||||
<ModalListItem label="Rewards will be transferred to the account you are logged in with" value="" />
|
||||
</SimpleModal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,72 @@
|
||||
import * as React from 'react';
|
||||
import { Typography } from '@mui/material';
|
||||
import { useEffect } from 'react';
|
||||
import { TBondedGateway, TBondedMixnode } from 'src/context';
|
||||
import { useGetFee } from 'src/hooks/useGetFee';
|
||||
import { isGateway, isMixnode } from 'src/types';
|
||||
import { ModalFee } from '../../Modals/ModalFee';
|
||||
import { ModalListItem } from '../../Modals/ModalListItem';
|
||||
import { SimpleModal } from '../../Modals/SimpleModal';
|
||||
import {
|
||||
simulateUnbondGateway,
|
||||
simulateUnbondMixnode,
|
||||
simulateVestingUnbondGateway,
|
||||
simulateVestingUnbondMixnode,
|
||||
} from '../../../requests';
|
||||
|
||||
interface Props {
|
||||
node: TBondedMixnode | TBondedGateway;
|
||||
onConfirm: () => Promise<void>;
|
||||
onClose: () => void;
|
||||
onError: (e: string) => void;
|
||||
}
|
||||
|
||||
export const UnbondModal = ({ node, onConfirm, onClose, onError }: Props) => {
|
||||
const { fee, isFeeLoading, getFee, feeError } = useGetFee();
|
||||
|
||||
useEffect(() => {
|
||||
if (feeError) {
|
||||
onError(feeError);
|
||||
}
|
||||
}, [feeError]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isMixnode(node) && !node.proxy) {
|
||||
getFee(simulateUnbondMixnode, {});
|
||||
}
|
||||
|
||||
if (isMixnode(node) && node.proxy) {
|
||||
getFee(simulateVestingUnbondMixnode, {});
|
||||
}
|
||||
|
||||
if (isGateway(node) && !node.proxy) {
|
||||
getFee(simulateUnbondGateway, {});
|
||||
}
|
||||
|
||||
if (isGateway(node) && node.proxy) {
|
||||
getFee(simulateVestingUnbondGateway, {});
|
||||
}
|
||||
}, [node]);
|
||||
|
||||
return (
|
||||
<SimpleModal
|
||||
open
|
||||
header="Unbond"
|
||||
subHeader="Unbond and remove your node from the mixnet"
|
||||
okLabel="Unbond"
|
||||
onOk={onConfirm}
|
||||
onClose={onClose}
|
||||
>
|
||||
<ModalListItem label="Amount to unbond" value={`${node.bond.amount} ${node.bond.denom.toUpperCase()}`} divider />
|
||||
{isMixnode(node) && (
|
||||
<ModalListItem
|
||||
label="Operator rewards"
|
||||
value={`${node.operatorRewards.amount} ${node.operatorRewards.denom.toUpperCase()}`}
|
||||
divider
|
||||
/>
|
||||
)}
|
||||
<ModalFee isLoading={isFeeLoading} fee={fee} divider />
|
||||
<Typography fontSize="small">Tokens will be transferred to the account you are logged in with now</Typography>
|
||||
</SimpleModal>
|
||||
);
|
||||
};
|
||||
@@ -36,7 +36,7 @@ export const CopyToClipboard = ({ text = '', iconButton }: { text?: string; icon
|
||||
color: 'text.primary',
|
||||
}}
|
||||
>
|
||||
{!copied ? <ContentCopy fontSize="small" /> : <Check color="success" />}
|
||||
{!copied ? <ContentCopy sx={{ fontSize: 14 }} /> : <Check color="success" sx={{ fontSize: 14 }} />}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
@@ -231,7 +231,7 @@ export const DelegateModal: React.FC<{
|
||||
{errorAmount}
|
||||
</Typography>
|
||||
<Box sx={{ mt: 3 }}>
|
||||
<ModalListItem label="Account balance:" value={accountBalance} divider strong />
|
||||
<ModalListItem label="Account balance:" value={accountBalance?.toUpperCase()} divider strong />
|
||||
</Box>
|
||||
|
||||
<ModalListItem label="Rewards payout interval:" value={rewardInterval} hidden divider />
|
||||
|
||||
@@ -1,19 +1,8 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
IconButton,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Stack,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { MoreVertSharp } from '@mui/icons-material';
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Button, Stack, Tooltip, Typography } from '@mui/material';
|
||||
import { DelegationEventKind } from '@nymproject/types';
|
||||
import { Delegate, Undelegate } from '../../svg-icons';
|
||||
import { ActionsMenu, ActionsMenuItem } from '../ActionsMenu';
|
||||
import { DelegateListItemPending } from './types';
|
||||
|
||||
export type DelegationListItemActions = 'delegate' | 'undelegate' | 'redeem' | 'compound';
|
||||
@@ -75,42 +64,20 @@ export const DelegationActions: React.FC<{
|
||||
);
|
||||
};
|
||||
|
||||
const DelegationActionsMenuItem = ({
|
||||
title,
|
||||
description,
|
||||
onClick,
|
||||
Icon,
|
||||
disabled,
|
||||
}: {
|
||||
title: string;
|
||||
description?: string;
|
||||
onClick?: () => void;
|
||||
Icon?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
}) => (
|
||||
<MenuItem sx={{ p: 2 }} onClick={onClick} disabled={disabled}>
|
||||
<ListItemIcon sx={{ color: 'text.primary' }}>{Icon}</ListItemIcon>
|
||||
<ListItemText sx={{ color: 'text.primary' }} primary={title} secondary={description} />
|
||||
</MenuItem>
|
||||
);
|
||||
|
||||
export const DelegationsActionsMenu: React.FC<{
|
||||
onActionClick?: (action: DelegationListItemActions) => void;
|
||||
isPending?: DelegationEventKind;
|
||||
disableRedeemingRewards?: boolean;
|
||||
disableCompoundRewards?: boolean;
|
||||
}> = ({ disableRedeemingRewards, disableCompoundRewards, onActionClick, isPending }) => {
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleClose = () => setAnchorEl(null);
|
||||
const handleOpenMenu = () => setIsOpen(true);
|
||||
const handleOnClose = () => setIsOpen(false);
|
||||
|
||||
const handleActionSelect = (action: DelegationListItemActions) => {
|
||||
handleClose();
|
||||
onActionClick?.(action);
|
||||
handleOnClose();
|
||||
};
|
||||
|
||||
if (isPending) {
|
||||
@@ -126,37 +93,23 @@ export const DelegationsActionsMenu: React.FC<{
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<IconButton onClick={handleClick}>
|
||||
<MoreVertSharp />
|
||||
</IconButton>
|
||||
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
|
||||
<DelegationActionsMenuItem
|
||||
title="Delegate more"
|
||||
Icon={<Delegate />}
|
||||
onClick={() => handleActionSelect?.('delegate')}
|
||||
/>
|
||||
<DelegationActionsMenuItem
|
||||
title="Undelegate"
|
||||
Icon={<Undelegate />}
|
||||
onClick={() => handleActionSelect?.('undelegate')}
|
||||
disabled={false}
|
||||
/>
|
||||
<DelegationActionsMenuItem
|
||||
title="Redeem"
|
||||
description="Transfer your rewards to your balance"
|
||||
Icon={<Typography sx={{ pl: 1 }}>R</Typography>}
|
||||
onClick={() => handleActionSelect?.('redeem')}
|
||||
disabled={disableRedeemingRewards}
|
||||
/>
|
||||
<DelegationActionsMenuItem
|
||||
title="Compound"
|
||||
description="Add your rewards to this delegation"
|
||||
Icon={<Typography sx={{ pl: 1 }}>C</Typography>}
|
||||
onClick={() => handleActionSelect?.('compound')}
|
||||
disabled={disableCompoundRewards}
|
||||
/>
|
||||
</Menu>
|
||||
</>
|
||||
<ActionsMenu open={isOpen} onOpen={handleOpenMenu} onClose={handleOnClose}>
|
||||
<ActionsMenuItem title="Delegate more" Icon={<Delegate />} onClick={() => handleActionSelect('delegate')} />
|
||||
<ActionsMenuItem title="Undelegate" Icon={<Undelegate />} onClick={() => handleActionSelect('undelegate')} />
|
||||
<ActionsMenuItem
|
||||
title="Redeem"
|
||||
description="Trasfer your rewards to your balance"
|
||||
Icon={<Typography sx={{ pl: 1 }}>R</Typography>}
|
||||
onClick={() => handleActionSelect('redeem')}
|
||||
disabled={disableRedeemingRewards}
|
||||
/>
|
||||
<ActionsMenuItem
|
||||
title="Compound"
|
||||
description="Add your rewards to this delegation"
|
||||
Icon={<Typography sx={{ pl: 1 }}>C</Typography>}
|
||||
onClick={() => handleActionSelect('compound')}
|
||||
disabled={disableCompoundRewards}
|
||||
/>
|
||||
</ActionsMenu>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import { Stack, Typography } from '@mui/material';
|
||||
import { CopyToClipboard } from '@nymproject/react/clipboard/CopyToClipboard';
|
||||
import { splice } from 'src/utils';
|
||||
|
||||
export const IdentityKey = ({ identityKey }: { identityKey: string }) => (
|
||||
<Stack direction="row">
|
||||
<Typography variant="body2" component="span" fontWeight={400} sx={{ mr: 1, color: 'text.primary' }}>
|
||||
{splice(6, identityKey)}
|
||||
</Typography>
|
||||
<CopyToClipboard value={identityKey} sx={{ fontSize: 18 }} />
|
||||
</Stack>
|
||||
);
|
||||
@@ -41,7 +41,7 @@ export const ConfirmationModal = ({
|
||||
backdropProps,
|
||||
}: ConfirmationModalProps) => {
|
||||
const Title = (
|
||||
<DialogTitle id="responsive-dialog-title" sx={{ py: 3, pb: 2, fontWeight: 600 }} color="text.primary">
|
||||
<DialogTitle id="responsive-dialog-title" sx={{ pb: 2 }}>
|
||||
{title}
|
||||
{subTitle &&
|
||||
(typeof subTitle === 'string' ? (
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import { Box, Button, Modal, SxProps, Typography } from '@mui/material';
|
||||
import { modalStyle } from './styles';
|
||||
|
||||
export const ErrorModal: React.FC<{
|
||||
open: boolean;
|
||||
message?: string;
|
||||
sx?: SxProps;
|
||||
backdropProps?: object;
|
||||
onClose: () => void;
|
||||
}> = ({ children, open, message, sx, backdropProps, onClose }) => (
|
||||
<Modal open={open} onClose={onClose} BackdropProps={backdropProps}>
|
||||
<Box sx={{ ...modalStyle, ...sx }} textAlign="center">
|
||||
<Typography color={(theme) => theme.palette.error.main} mb={1}>
|
||||
Oh no! Something went wrong...
|
||||
</Typography>
|
||||
<Typography my={5} color="text.primary">
|
||||
{message}
|
||||
</Typography>
|
||||
{children}
|
||||
<Button variant="contained" onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
@@ -2,16 +2,20 @@ import React from 'react';
|
||||
import { FeeDetails } from '@nymproject/types';
|
||||
import { CircularProgress } from '@mui/material';
|
||||
import { ModalListItem } from './ModalListItem';
|
||||
import { ModalDivider } from './ModalDivider';
|
||||
|
||||
type TFeeProps = { fee?: FeeDetails; isLoading: boolean; error?: string };
|
||||
type TFeeProps = { fee?: FeeDetails; isLoading: boolean; error?: string; divider?: boolean };
|
||||
|
||||
const getValue = ({ fee, isLoading, error }: TFeeProps) => {
|
||||
if (isLoading) return <CircularProgress size={15} />;
|
||||
if (error && !isLoading) return 'n/a';
|
||||
if (fee) return `${fee.amount?.amount} ${fee.amount?.denom}`;
|
||||
if (fee) return `${fee.amount?.amount} ${fee.amount?.denom.toUpperCase()}`;
|
||||
return '-';
|
||||
};
|
||||
|
||||
export const ModalFee = ({ fee, isLoading, error }: TFeeProps) => (
|
||||
<ModalListItem label="Estimated fee for this operation:" value={getValue({ fee, isLoading, error })} />
|
||||
export const ModalFee = ({ fee, isLoading, error, divider }: TFeeProps) => (
|
||||
<>
|
||||
<ModalListItem label="Fee for this operation:" value={getValue({ fee, isLoading, error })} />
|
||||
{divider && <ModalDivider />}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -15,11 +15,7 @@ export const ModalListItem: React.FC<{
|
||||
{label}
|
||||
</Typography>
|
||||
{value && (
|
||||
<Typography
|
||||
fontSize="smaller"
|
||||
fontWeight={strong ? 600 : undefined}
|
||||
sx={{ color: 'text.primary', textTransform: 'uppercase' }}
|
||||
>
|
||||
<Typography fontSize="smaller" fontWeight={strong ? 600 : undefined} sx={{ color: 'text.primary' }}>
|
||||
{value}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
@@ -14,7 +14,7 @@ export const SimpleModal: React.FC<{
|
||||
onClose?: () => void;
|
||||
onOk?: () => Promise<void>;
|
||||
onBack?: () => void;
|
||||
header: string;
|
||||
header: string | React.ReactNode;
|
||||
subHeader?: string;
|
||||
okLabel: string;
|
||||
okDisabled?: boolean;
|
||||
@@ -41,9 +41,13 @@ export const SimpleModal: React.FC<{
|
||||
<Box sx={{ ...modalStyle, ...sx }}>
|
||||
{displayErrorIcon && <ErrorOutline color="error" sx={{ mb: 3 }} />}
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<Typography fontSize={20} fontWeight={600} sx={{ color: 'text.primary', ...headerStyles }}>
|
||||
{header}
|
||||
</Typography>
|
||||
{typeof header === 'string' ? (
|
||||
<Typography fontSize={20} fontWeight={600} sx={{ color: 'text.primary', ...headerStyles }}>
|
||||
{header}
|
||||
</Typography>
|
||||
) : (
|
||||
header
|
||||
)}
|
||||
{!hideCloseIcon && <CloseIcon onClick={onClose} cursor="pointer" />}
|
||||
</Stack>
|
||||
{subHeader && (
|
||||
|
||||
@@ -2,8 +2,8 @@ import React, { useState, useContext } from 'react';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
|
||||
import { AccountBalanceWalletOutlined, ArrowBack, ArrowForward, Description, Settings } from '@mui/icons-material';
|
||||
import { AppContext } from '../context';
|
||||
import { Bond, Delegate, Unbond } from '../svg-icons';
|
||||
import { AppContext } from '../context/main';
|
||||
import { Delegate, Bonding } from '../svg-icons';
|
||||
|
||||
export const Nav = () => {
|
||||
const location = useLocation();
|
||||
@@ -29,16 +29,10 @@ export const Nav = () => {
|
||||
onClick: handleShowReceiveModal,
|
||||
},
|
||||
{
|
||||
label: 'Bond',
|
||||
route: '/bond',
|
||||
Icon: Bond,
|
||||
onClick: () => navigate('/bond'),
|
||||
},
|
||||
{
|
||||
label: 'Unbond',
|
||||
route: '/unbond',
|
||||
Icon: Unbond,
|
||||
onClick: () => navigate('/unbond'),
|
||||
label: 'Bonding',
|
||||
route: '/bonding',
|
||||
Icon: Bonding,
|
||||
onClick: () => navigate('/bonding'),
|
||||
},
|
||||
{
|
||||
label: 'Delegation',
|
||||
|
||||
@@ -26,7 +26,7 @@ export const NymCard: React.FC<{
|
||||
subheader={subheader}
|
||||
data-testid={dataTestid || title}
|
||||
subheaderTypographyProps={{ variant: 'subtitle1' }}
|
||||
action={<Box sx={{ mt: 1, mr: 1 }}>{Action}</Box>}
|
||||
action={Action}
|
||||
/>
|
||||
{noPadding ? (
|
||||
<CardContentNoPadding>{children}</CardContentNoPadding>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Stack, Typography } from '@mui/material';
|
||||
import { IdentityKeyFormField } from '@nymproject/react/mixnodes/IdentityKeyFormField';
|
||||
import { CurrencyDenom, FeeDetails } from '@nymproject/types';
|
||||
import { simulateCompoundDelgatorReward, simulateVestingCompoundDelgatorReward } from 'src/requests';
|
||||
@@ -7,6 +6,7 @@ import { useGetFee } from 'src/hooks/useGetFee';
|
||||
import { SimpleModal } from '../Modals/SimpleModal';
|
||||
import { ModalFee } from '../Modals/ModalFee';
|
||||
import { FeeWarning } from '../FeeWarning';
|
||||
import { ModalListItem } from '../Modals/ModalListItem';
|
||||
|
||||
export const CompoundModal: React.FC<{
|
||||
open: boolean;
|
||||
@@ -42,20 +42,13 @@ export const CompoundModal: React.FC<{
|
||||
subHeader="Compound rewards from delegations"
|
||||
okLabel="Compound rewards"
|
||||
>
|
||||
{identityKey && <IdentityKeyFormField readOnly fullWidth initialValue={identityKey} showTickOnValid={false} />}
|
||||
|
||||
<Stack direction="row" justifyContent="space-between" mb={4} mt={identityKey && 4}>
|
||||
<Typography>Rewards amount:</Typography>
|
||||
<Typography>
|
||||
{amount} {denom.toUpperCase()}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
<Typography mb={5} fontSize="smaller">
|
||||
Rewards will be transferred to account you are logged in with now
|
||||
</Typography>
|
||||
{identityKey && (
|
||||
<IdentityKeyFormField readOnly fullWidth initialValue={identityKey} showTickOnValid={false} sx={{ mb: 2 }} />
|
||||
)}
|
||||
<ModalListItem label="Rewards amount" value={` ${amount} ${denom.toUpperCase()}`} divider />
|
||||
{fee && <FeeWarning amount={amount} fee={fee} />}
|
||||
<ModalFee fee={fee} isLoading={isFeeLoading} error={feeError} />
|
||||
<ModalFee fee={fee} isLoading={isFeeLoading} error={feeError} divider />
|
||||
<ModalListItem label="Rewards will be added to this delegation" value="" divider />
|
||||
</SimpleModal>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Stack, Typography, SxProps } from '@mui/material';
|
||||
import { IdentityKeyFormField } from '@nymproject/react/mixnodes/IdentityKeyFormField';
|
||||
import { CurrencyDenom, FeeDetails } from '@nymproject/types';
|
||||
import { SxProps } from '@mui/material';
|
||||
import { useGetFee } from 'src/hooks/useGetFee';
|
||||
import { simulateClaimDelgatorReward, simulateVestingClaimDelgatorReward } from 'src/requests';
|
||||
import { ModalFee } from '../Modals/ModalFee';
|
||||
import { SimpleModal } from '../Modals/SimpleModal';
|
||||
import { FeeWarning } from '../FeeWarning';
|
||||
import { ModalListItem } from '../Modals/ModalListItem';
|
||||
|
||||
export const RedeemModal: React.FC<{
|
||||
open: boolean;
|
||||
@@ -47,20 +48,13 @@ export const RedeemModal: React.FC<{
|
||||
sx={sx}
|
||||
backdropProps={backdropProps}
|
||||
>
|
||||
{identityKey && <IdentityKeyFormField readOnly fullWidth initialValue={identityKey} showTickOnValid={false} />}
|
||||
|
||||
<Stack direction="row" justifyContent="space-between" mb={4} mt={identityKey && 4}>
|
||||
<Typography sx={{ color: 'text.primary' }}>Rewards amount:</Typography>
|
||||
<Typography sx={{ color: 'text.primary' }}>
|
||||
{amount} {denom.toUpperCase()}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
<Typography mb={5} fontSize="smaller" sx={{ color: 'text.primary' }}>
|
||||
Rewards will be transferred to account you are logged in with now
|
||||
</Typography>
|
||||
{identityKey && (
|
||||
<IdentityKeyFormField readOnly fullWidth initialValue={identityKey} showTickOnValid={false} sx={{ mb: 2 }} />
|
||||
)}
|
||||
<ModalListItem label="Rewards amount" value={` ${amount} ${denom.toUpperCase()}`} divider />
|
||||
{fee && <FeeWarning amount={amount} fee={fee} />}
|
||||
<ModalFee fee={fee} isLoading={isFeeLoading} error={feeError} />
|
||||
<ModalFee fee={fee} isLoading={isFeeLoading} error={feeError} divider />
|
||||
<ModalListItem label="Rewards will be transferred to account you are logged in with now" value="" divider />
|
||||
</SimpleModal>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -30,6 +30,7 @@ export const SendInput = () => {
|
||||
<SendInputModal
|
||||
toAddress=""
|
||||
fromAddress="nymt1w8qp7zsxggvtxhpqpt6e329j42wtv07dm5ts8u"
|
||||
denom="nym"
|
||||
onNext={() => {}}
|
||||
onClose={() => {}}
|
||||
onAddressChange={() => {}}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { Stack, SxProps } from '@mui/material';
|
||||
import { CurrencyDenom } from '@nymproject/types';
|
||||
import { FeeDetails, DecCoin } from '@nymproject/types';
|
||||
import { FeeDetails, DecCoin, CurrencyDenom } from '@nymproject/types';
|
||||
import { SimpleModal } from '../Modals/SimpleModal';
|
||||
import { ModalListItem } from '../Modals/ModalListItem';
|
||||
import { ModalFee } from '../Modals/ModalFee';
|
||||
|
||||
export const SendDetailsModal = ({
|
||||
amount,
|
||||
@@ -42,11 +42,7 @@ export const SendDetailsModal = ({
|
||||
<ModalListItem label="From:" value={fromAddress} divider />
|
||||
<ModalListItem label="To:" value={toAddress} divider />
|
||||
<ModalListItem label="Amount:" value={`${amount?.amount} ${denom.toUpperCase()}`} divider />
|
||||
<ModalListItem
|
||||
label="Fee for this transaction:"
|
||||
value={!fee ? 'n/a' : `${fee.amount?.amount} ${fee.amount?.denom}`}
|
||||
divider
|
||||
/>
|
||||
<ModalFee fee={fee} divider isLoading={false} />
|
||||
</Stack>
|
||||
</SimpleModal>
|
||||
);
|
||||
|
||||
@@ -77,7 +77,7 @@ export const SendInputModal = ({
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack gap={0.5} sx={{ mt: 2 }}>
|
||||
<ModalListItem label="Account balance:" value={balance} divider strong />
|
||||
<ModalListItem label="Account balance:" value={balance?.toUpperCase()} divider strong />
|
||||
<ModalListItem label="Your address:" value={fromAddress} divider />
|
||||
<Typography fontSize="smaller" sx={{ color: 'text.primary' }}>
|
||||
Est. fee for this transaction will be show on the next page
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import { Tab, Tabs as MuiTabs } from '@mui/material';
|
||||
|
||||
export const Tabs: React.FC<{
|
||||
tabs: string[];
|
||||
selectedTab: number;
|
||||
disabled?: boolean;
|
||||
onChange?: (event: React.SyntheticEvent, tab: number) => void;
|
||||
disableActiveTabHighlight?: boolean;
|
||||
}> = ({ tabs, selectedTab, disabled, disableActiveTabHighlight, onChange }) => (
|
||||
<MuiTabs
|
||||
value={selectedTab}
|
||||
onChange={onChange}
|
||||
sx={{
|
||||
bgcolor: (theme) => theme.palette.nym.nymWallet.background.grey,
|
||||
borderTop: '1px solid',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: (theme) => theme.palette.nym.nymWallet.background.greyStroke,
|
||||
}}
|
||||
textColor="inherit"
|
||||
TabIndicatorProps={
|
||||
disableActiveTabHighlight
|
||||
? {
|
||||
style: {
|
||||
opacity: 0,
|
||||
},
|
||||
}
|
||||
: {}
|
||||
}
|
||||
>
|
||||
{tabs.map((tabName) => (
|
||||
<Tab key={tabName} label={tabName} sx={{ textTransform: 'capitalize' }} disabled={disabled} />
|
||||
))}
|
||||
</MuiTabs>
|
||||
);
|
||||
@@ -14,11 +14,13 @@ export const TokenPoolSelector: React.FC<{ disabled: boolean; onSelect: (pool: T
|
||||
clientDetails,
|
||||
} = useContext(AppContext);
|
||||
|
||||
const fetchBalances = async () => {
|
||||
await fetchBalance();
|
||||
await fetchTokenAllocation();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
await fetchBalance();
|
||||
await fetchTokenAllocation();
|
||||
})();
|
||||
fetchBalances();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -0,0 +1,358 @@
|
||||
import { FeeDetails, DecCoin, MixnodeStatus, TransactionExecuteResult } from '@nymproject/types';
|
||||
import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
|
||||
import { isGateway, isMixnode, Network, TBondGatewayArgs, TBondMixNodeArgs } from 'src/types';
|
||||
import { Console } from 'src/utils/console';
|
||||
import {
|
||||
bondGateway as bondGatewayRequest,
|
||||
bondMixNode as bondMixNodeRequest,
|
||||
claimOperatorReward,
|
||||
compoundOperatorReward,
|
||||
unbondGateway as unbondGatewayRequest,
|
||||
unbondMixNode as unbondMixnodeRequest,
|
||||
vestingBondGateway,
|
||||
vestingBondMixNode,
|
||||
vestingUnbondGateway,
|
||||
vestingUnbondMixnode,
|
||||
updateMixnode as updateMixnodeRequest,
|
||||
vestingUpdateMixnode as updateMixnodeVestingRequest,
|
||||
getNodeDescription as getNodeDescriptioRequest,
|
||||
getGatewayBondDetails,
|
||||
getMixnodeBondDetails,
|
||||
getMixnodeStatus,
|
||||
getOperatorRewards,
|
||||
getMixnodeStakeSaturation,
|
||||
getNumberOfMixnodeDelegators,
|
||||
vestingClaimOperatorReward,
|
||||
vestingCompoundOperatorReward,
|
||||
} from '../requests';
|
||||
import { useCheckOwnership } from '../hooks/useCheckOwnership';
|
||||
import { AppContext } from './main';
|
||||
|
||||
const bonded: TBondedMixnode = {
|
||||
name: 'Monster node',
|
||||
identityKey: 'B2Xx4haarLWMajX8w259oHjtRZsC7nHwagbWrJNiA3QC',
|
||||
bond: { denom: 'nym', amount: '1234' },
|
||||
delegators: 123,
|
||||
operatorRewards: { denom: 'nym', amount: '12' },
|
||||
profitMargin: 10,
|
||||
stake: { denom: 'nym', amount: '99' },
|
||||
stakeSaturation: 99,
|
||||
status: 'active',
|
||||
};
|
||||
|
||||
// TODO add relevant data
|
||||
export type TBondedMixnode = {
|
||||
name?: string;
|
||||
identityKey: string;
|
||||
stake: DecCoin;
|
||||
bond: DecCoin;
|
||||
stakeSaturation: number;
|
||||
profitMargin: number;
|
||||
operatorRewards: DecCoin;
|
||||
delegators: number;
|
||||
status: MixnodeStatus;
|
||||
proxy?: string;
|
||||
};
|
||||
|
||||
// TODO add relevant data
|
||||
export interface TBondedGateway {
|
||||
name: string;
|
||||
identityKey: string;
|
||||
ip: string;
|
||||
bond: DecCoin;
|
||||
location?: string; // TODO not yet available, only available in Network Explorer API
|
||||
proxy?: string;
|
||||
}
|
||||
|
||||
export type TokenPool = 'locked' | 'balance';
|
||||
|
||||
export type TBondingContext = {
|
||||
isLoading: boolean;
|
||||
error?: string;
|
||||
bondedNode?: TBondedMixnode | TBondedGateway;
|
||||
refresh: () => Promise<void>;
|
||||
bondMixnode: (data: TBondMixNodeArgs, tokenPool: TokenPool) => Promise<TransactionExecuteResult | undefined>;
|
||||
bondGateway: (data: TBondGatewayArgs, tokenPool: TokenPool) => Promise<TransactionExecuteResult | undefined>;
|
||||
unbond: (fee?: FeeDetails) => Promise<TransactionExecuteResult | undefined>;
|
||||
redeemRewards: (fee?: FeeDetails) => Promise<TransactionExecuteResult | undefined>;
|
||||
compoundRewards: (fee?: FeeDetails) => Promise<TransactionExecuteResult | undefined>;
|
||||
updateMixnode: (pm: number, fee?: FeeDetails) => Promise<TransactionExecuteResult | undefined>;
|
||||
checkOwnership: () => Promise<void>;
|
||||
};
|
||||
|
||||
const calculateStake = (pledge: DecCoin, delegations: DecCoin) => {
|
||||
const total = Number(pledge.amount) + Number(delegations.amount);
|
||||
return { amount: total.toString(), denom: pledge.denom };
|
||||
};
|
||||
|
||||
export const BondingContext = createContext<TBondingContext>({
|
||||
isLoading: true,
|
||||
refresh: async () => undefined,
|
||||
bondMixnode: async () => {
|
||||
throw new Error('Not implemented');
|
||||
},
|
||||
bondGateway: async () => {
|
||||
throw new Error('Not implemented');
|
||||
},
|
||||
unbond: async () => {
|
||||
throw new Error('Not implemented');
|
||||
},
|
||||
redeemRewards: async () => {
|
||||
throw new Error('Not implemented');
|
||||
},
|
||||
compoundRewards: async () => {
|
||||
throw new Error('Not implemented');
|
||||
},
|
||||
updateMixnode: async () => {
|
||||
throw new Error('Not implemented');
|
||||
},
|
||||
checkOwnership(): Promise<void> {
|
||||
throw new Error('Not implemented');
|
||||
},
|
||||
});
|
||||
|
||||
export const BondingContextProvider = ({ children }: { children?: React.ReactNode }): JSX.Element => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string>();
|
||||
const [bondedNode, setBondedNode] = useState<TBondedMixnode | TBondedGateway>();
|
||||
|
||||
const { userBalance, clientDetails } = useContext(AppContext);
|
||||
const { ownership, isLoading: isOwnershipLoading, checkOwnership } = useCheckOwnership();
|
||||
|
||||
const isVesting = Boolean(ownership.vestingPledge);
|
||||
|
||||
const resetState = () => {
|
||||
setError(undefined);
|
||||
setBondedNode(undefined);
|
||||
};
|
||||
|
||||
const getAdditionalMixnodeDetails = async (identityKey: string) => {
|
||||
const additionalDetails: { status: MixnodeStatus; stakeSaturation: number; numberOfDelegators: number } = {
|
||||
status: 'not_found',
|
||||
stakeSaturation: 0,
|
||||
numberOfDelegators: 0,
|
||||
};
|
||||
|
||||
try {
|
||||
const statusResponse = await getMixnodeStatus(identityKey);
|
||||
additionalDetails.status = statusResponse.status;
|
||||
} catch (e) {
|
||||
Console.log(e);
|
||||
}
|
||||
|
||||
try {
|
||||
const stakeSaturationResponse = await getMixnodeStakeSaturation(identityKey);
|
||||
additionalDetails.stakeSaturation = Math.round(stakeSaturationResponse.saturation * 100);
|
||||
} catch (e) {
|
||||
Console.log(e);
|
||||
}
|
||||
|
||||
try {
|
||||
const numberOfDelegators = await getNumberOfMixnodeDelegators(identityKey);
|
||||
additionalDetails.numberOfDelegators = numberOfDelegators;
|
||||
} catch (e) {
|
||||
Console.log(e);
|
||||
}
|
||||
|
||||
return additionalDetails;
|
||||
};
|
||||
|
||||
const getNodeDescription = async (host: string, port: number) => {
|
||||
try {
|
||||
const nodeDescription = await getNodeDescriptioRequest(host, port);
|
||||
return nodeDescription;
|
||||
} catch (e) {
|
||||
Console.log(e);
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
|
||||
if (ownership.hasOwnership && ownership.nodeType === 'mixnode' && clientDetails) {
|
||||
try {
|
||||
const data = await getMixnodeBondDetails();
|
||||
const operatorRewards = await getOperatorRewards(clientDetails?.client_address);
|
||||
if (data) {
|
||||
const { status, stakeSaturation, numberOfDelegators } = await getAdditionalMixnodeDetails(
|
||||
data.mix_node.identity_key,
|
||||
);
|
||||
const nodeDescription = await getNodeDescription(data.mix_node.host, data.mix_node.http_api_port);
|
||||
setBondedNode({
|
||||
name: nodeDescription?.name,
|
||||
identityKey: data.mix_node.identity_key,
|
||||
ip: '',
|
||||
stake: calculateStake(data.pledge_amount, data.total_delegation),
|
||||
bond: data.pledge_amount,
|
||||
profitMargin: data.mix_node.profit_margin_percent,
|
||||
nodeRewards: data.accumulated_rewards,
|
||||
delegators: numberOfDelegators,
|
||||
proxy: data.proxy,
|
||||
operatorRewards,
|
||||
status,
|
||||
stakeSaturation,
|
||||
} as TBondedMixnode);
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(`While fetching current bond state, an error occurred: ${e}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (ownership.hasOwnership && ownership.nodeType === 'gateway') {
|
||||
try {
|
||||
const data = await getGatewayBondDetails();
|
||||
if (data) {
|
||||
const nodeDescription = await getNodeDescription(data.gateway.host, data.gateway.clients_port);
|
||||
|
||||
setBondedNode({
|
||||
name: nodeDescription?.name,
|
||||
identityKey: data.gateway.identity_key,
|
||||
ip: data.gateway.host,
|
||||
location: data.gateway.location,
|
||||
bond: data.pledge_amount,
|
||||
delegators: bonded.delegators,
|
||||
proxy: data.proxy,
|
||||
} as TBondedGateway);
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(`While fetching current bond state, an error occurred: ${e}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (!ownership.hasOwnership) {
|
||||
resetState();
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, [ownership]);
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
}, [ownership, refresh]);
|
||||
|
||||
const bondMixnode = async (data: TBondMixNodeArgs, tokenPool: TokenPool) => {
|
||||
let tx: TransactionExecuteResult | undefined;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
if (tokenPool === 'balance') {
|
||||
tx = await bondMixNodeRequest(data);
|
||||
await userBalance.fetchBalance();
|
||||
}
|
||||
if (tokenPool === 'locked') {
|
||||
tx = await vestingBondMixNode(data);
|
||||
await userBalance.fetchTokenAllocation();
|
||||
}
|
||||
return tx;
|
||||
} catch (e: any) {
|
||||
setError(`an error occurred: ${e}`);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const bondGateway = async (data: TBondGatewayArgs, tokenPool: TokenPool) => {
|
||||
let tx: TransactionExecuteResult | undefined;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
if (tokenPool === 'balance') {
|
||||
tx = await bondGatewayRequest(data);
|
||||
await userBalance.fetchBalance();
|
||||
}
|
||||
if (tokenPool === 'locked') {
|
||||
tx = await vestingBondGateway(data);
|
||||
await userBalance.fetchTokenAllocation();
|
||||
}
|
||||
return tx;
|
||||
} catch (e: any) {
|
||||
setError(`an error occurred: ${e}`);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const unbond = async (fee?: FeeDetails) => {
|
||||
let tx;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
if (bondedNode && isMixnode(bondedNode) && bondedNode.proxy) tx = await vestingUnbondMixnode(fee?.fee);
|
||||
if (bondedNode && isMixnode(bondedNode) && !bondedNode.proxy) tx = await unbondMixnodeRequest(fee?.fee);
|
||||
if (bondedNode && isGateway(bondedNode) && bondedNode.proxy) tx = await vestingUnbondGateway(fee?.fee);
|
||||
if (bondedNode && isGateway(bondedNode) && !bondedNode.proxy) tx = await unbondGatewayRequest(fee?.fee);
|
||||
} catch (e) {
|
||||
setError(`an error occurred: ${e as string}`);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
return tx;
|
||||
};
|
||||
|
||||
const updateMixnode = async (pm: number, fee?: FeeDetails) => {
|
||||
let tx;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
if (bondedNode?.proxy) tx = await updateMixnodeVestingRequest(pm, fee?.fee);
|
||||
else tx = await updateMixnodeRequest(pm, fee?.fee);
|
||||
} catch (e: any) {
|
||||
setError(`an error occurred: ${e}`);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
return tx;
|
||||
};
|
||||
|
||||
const redeemRewards = async (fee?: FeeDetails) => {
|
||||
let tx;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
if (bondedNode?.proxy) tx = await vestingClaimOperatorReward(fee?.fee);
|
||||
else tx = await claimOperatorReward(fee?.fee);
|
||||
} catch (e: any) {
|
||||
setError(`an error occurred: ${e}`);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
return tx;
|
||||
};
|
||||
|
||||
const compoundRewards = async (fee?: FeeDetails) => {
|
||||
let tx;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
if (bondedNode?.proxy) tx = await vestingCompoundOperatorReward(fee?.fee);
|
||||
else tx = await compoundOperatorReward(fee?.fee);
|
||||
} catch (e: any) {
|
||||
setError(`an error occurred: ${e}`);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
return tx;
|
||||
};
|
||||
|
||||
const bondMore = async (_signature: string, _additionalBond: DecCoin) =>
|
||||
// TODO to implement
|
||||
undefined;
|
||||
|
||||
const memoizedValue = useMemo(
|
||||
() => ({
|
||||
isLoading: isLoading || isOwnershipLoading,
|
||||
error,
|
||||
bondMixnode,
|
||||
bondedNode,
|
||||
bondGateway,
|
||||
unbond,
|
||||
updateMixnode,
|
||||
refresh,
|
||||
redeemRewards,
|
||||
compoundRewards,
|
||||
bondMore,
|
||||
checkOwnership,
|
||||
}),
|
||||
[isLoading, isOwnershipLoading, error, bondedNode, isVesting],
|
||||
);
|
||||
|
||||
return <BondingContext.Provider value={memoizedValue}>{children}</BondingContext.Provider>;
|
||||
};
|
||||
|
||||
export const useBondingContext = () => useContext<TBondingContext>(BondingContext);
|
||||
@@ -1,3 +1,4 @@
|
||||
export * from './main';
|
||||
export * from './auth';
|
||||
export * from './accounts';
|
||||
export * from './bonding';
|
||||
|
||||
@@ -33,7 +33,6 @@ type TLoginType = 'mnemonic' | 'password';
|
||||
|
||||
export type TAppContext = {
|
||||
mode: 'light' | 'dark';
|
||||
handleSwitchMode: () => void;
|
||||
appEnv?: AppEnv;
|
||||
appVersion?: string;
|
||||
clientDetails?: Account;
|
||||
@@ -47,10 +46,10 @@ export type TAppContext = {
|
||||
isAdminAddress: boolean;
|
||||
error?: string;
|
||||
loginType?: TLoginType;
|
||||
showSettings: boolean;
|
||||
showSendModal: boolean;
|
||||
showReceiveModal: boolean;
|
||||
handleShowSettings: () => void;
|
||||
onAccountChange: ({ accountId, password }: { accountId: string; password: string }) => void;
|
||||
handleSwitchMode: () => void;
|
||||
handleShowSendModal: () => void;
|
||||
handleShowReceiveModal: () => void;
|
||||
setIsLoading: (isLoading: boolean) => void;
|
||||
@@ -62,7 +61,6 @@ export type TAppContext = {
|
||||
handleShowTerminal: () => void;
|
||||
signInWithPassword: (password: string) => void;
|
||||
logOut: () => void;
|
||||
onAccountChange: ({ accountId, password }: { accountId: string; password: string }) => void;
|
||||
};
|
||||
|
||||
export const AppContext = createContext({} as TAppContext);
|
||||
@@ -81,7 +79,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const [error, setError] = useState<string>();
|
||||
const [appVersion, setAppVersion] = useState<string>();
|
||||
const [isAdminAddress, setIsAdminAddress] = useState<boolean>(false);
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [showSendModal, setShowSendModal] = useState(false);
|
||||
const [showReceiveModal, setShowReceiveModal] = useState(false);
|
||||
|
||||
@@ -235,7 +232,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const handleShowAdmin = () => setShowAdmin((show) => !show);
|
||||
const handleShowTerminal = () => setShowTerminal((show) => !show);
|
||||
const switchNetwork = (_network: Network) => setNetwork(_network);
|
||||
const handleShowSettings = () => setShowSettings((show) => !show);
|
||||
const handleShowSendModal = () => setShowSendModal((show) => !show);
|
||||
const handleShowReceiveModal = () => setShowReceiveModal((show) => !show);
|
||||
const handleSwitchMode = () =>
|
||||
@@ -259,7 +255,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
userBalance,
|
||||
showAdmin,
|
||||
showTerminal,
|
||||
showSettings,
|
||||
network,
|
||||
loginType,
|
||||
setIsLoading,
|
||||
@@ -272,7 +267,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
logIn,
|
||||
logOut,
|
||||
onAccountChange,
|
||||
handleShowSettings,
|
||||
showSendModal,
|
||||
showReceiveModal,
|
||||
handleShowSendModal,
|
||||
@@ -294,7 +288,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
network,
|
||||
storedAccounts,
|
||||
showTerminal,
|
||||
showSettings,
|
||||
showSendModal,
|
||||
showReceiveModal,
|
||||
],
|
||||
|
||||
@@ -0,0 +1,181 @@
|
||||
import { FeeDetails, DecCoin, TransactionExecuteResult } from '@nymproject/types';
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import type { Network } from 'src/types';
|
||||
import { TBondedGateway, TBondedMixnode, BondingContext } from '../bonding';
|
||||
import { mockSleep } from './utils';
|
||||
|
||||
const SLEEP_MS = 1000;
|
||||
|
||||
const bondedMixnodeMock: TBondedMixnode = {
|
||||
name: 'Monster node',
|
||||
identityKey: '7mjM2fYbtN6kxMwp1TrmQ4VwPks3URR5pBgWPWhzT98F',
|
||||
stake: { denom: 'nym', amount: '1234' },
|
||||
bond: { denom: 'nym', amount: '1234' },
|
||||
stakeSaturation: 95,
|
||||
profitMargin: 15,
|
||||
operatorRewards: { denom: 'nym', amount: '1234' },
|
||||
delegators: 5423,
|
||||
status: 'active',
|
||||
};
|
||||
|
||||
const bondedGatewayMock: TBondedGateway = {
|
||||
name: 'Monster node',
|
||||
identityKey: 'WayM2fYbtN6kxMwp1TrmQ4VwPks3URR5pBgWPWhzT98F',
|
||||
ip: '112.43.234.57',
|
||||
bond: { denom: 'nym', amount: '1234' },
|
||||
};
|
||||
|
||||
const TxResultMock: TransactionExecuteResult = {
|
||||
logs_json: '',
|
||||
data_json: '',
|
||||
transaction_hash: '55303CD4B91FAC4C2715E40EBB52BB3B92829D9431B3A279D37B5CC58432E354',
|
||||
gas_info: {
|
||||
gas_wanted: { gas_units: BigInt(1) },
|
||||
gas_used: { gas_units: BigInt(1) },
|
||||
},
|
||||
fee: { amount: '1', denom: 'nym' },
|
||||
};
|
||||
|
||||
const feeMock: FeeDetails = {
|
||||
amount: { denom: 'nym', amount: '1' },
|
||||
fee: { Auto: 1 },
|
||||
};
|
||||
|
||||
export const MockBondingContextProvider = ({
|
||||
network,
|
||||
children,
|
||||
}: {
|
||||
network?: Network;
|
||||
children?: React.ReactNode;
|
||||
}): JSX.Element => {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [feeLoading, setFeeLoading] = useState(false);
|
||||
const [fee, setFee] = useState<FeeDetails | undefined>();
|
||||
const [error, setError] = useState<string>();
|
||||
const [bondedData, setBondedData] = useState<TBondedMixnode | TBondedGateway | null>(null);
|
||||
const [bondedMixnode, setBondedMixnode] = useState<TBondedMixnode | null>(null);
|
||||
const [bondedGateway, setBondedGateway] = useState<TBondedGateway | null>(null);
|
||||
const [trigger, setTrigger] = useState<Date>(new Date());
|
||||
|
||||
const triggerStateUpdate = () => setTrigger(new Date());
|
||||
|
||||
const resetState = () => {
|
||||
setIsLoading(true);
|
||||
setError(undefined);
|
||||
setBondedGateway(null);
|
||||
setBondedMixnode(null);
|
||||
};
|
||||
|
||||
// fake tauri request
|
||||
const fetchBondingData: () => Promise<TBondedMixnode | TBondedGateway | null> = async () => {
|
||||
await mockSleep(SLEEP_MS);
|
||||
return bondedData;
|
||||
};
|
||||
|
||||
const checkOwnership = async () => {};
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
const bounded = await fetchBondingData();
|
||||
if (bounded && 'stake' in bounded) {
|
||||
setBondedMixnode(bounded);
|
||||
}
|
||||
if (bounded && !('stake' in bounded)) {
|
||||
setBondedGateway(bounded);
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, [network]);
|
||||
|
||||
useEffect(() => {
|
||||
resetState();
|
||||
refresh();
|
||||
}, [network, bondedData]);
|
||||
|
||||
const bondMixnode = async (): Promise<TransactionExecuteResult> => {
|
||||
setIsLoading(true);
|
||||
await mockSleep(SLEEP_MS);
|
||||
setBondedData(bondedMixnodeMock);
|
||||
setIsLoading(false);
|
||||
return TxResultMock;
|
||||
};
|
||||
|
||||
const bondGateway = async (): Promise<TransactionExecuteResult> => {
|
||||
setIsLoading(true);
|
||||
await mockSleep(SLEEP_MS);
|
||||
setBondedData(bondedGatewayMock);
|
||||
setIsLoading(false);
|
||||
return TxResultMock;
|
||||
};
|
||||
|
||||
const unbond = async (): Promise<TransactionExecuteResult> => {
|
||||
setIsLoading(true);
|
||||
await mockSleep(SLEEP_MS);
|
||||
setBondedData(null);
|
||||
setIsLoading(false);
|
||||
return TxResultMock;
|
||||
};
|
||||
|
||||
const redeemRewards = async (): Promise<TransactionExecuteResult | undefined> => {
|
||||
setIsLoading(true);
|
||||
await mockSleep(SLEEP_MS);
|
||||
triggerStateUpdate();
|
||||
setIsLoading(false);
|
||||
return TxResultMock;
|
||||
};
|
||||
|
||||
const compoundRewards = async (): Promise<TransactionExecuteResult | undefined> => {
|
||||
setIsLoading(true);
|
||||
await mockSleep(SLEEP_MS);
|
||||
triggerStateUpdate();
|
||||
setIsLoading(false);
|
||||
return TxResultMock;
|
||||
};
|
||||
|
||||
const updateMixnode = async (): Promise<TransactionExecuteResult> => {
|
||||
setIsLoading(true);
|
||||
await mockSleep(SLEEP_MS);
|
||||
triggerStateUpdate();
|
||||
setIsLoading(false);
|
||||
return TxResultMock;
|
||||
};
|
||||
|
||||
const bondMore = async (_signature: string, _additionalBond: DecCoin) => {
|
||||
setIsLoading(true);
|
||||
await mockSleep(SLEEP_MS);
|
||||
triggerStateUpdate();
|
||||
setIsLoading(false);
|
||||
return TxResultMock;
|
||||
};
|
||||
|
||||
const getFee = async (_feeOperation: any, _args: any) => {
|
||||
setFeeLoading(true);
|
||||
await mockSleep(SLEEP_MS);
|
||||
setFeeLoading(false);
|
||||
setFee(feeMock);
|
||||
return feeMock;
|
||||
};
|
||||
|
||||
const resetFeeState = () => {};
|
||||
|
||||
const memoizedValue = useMemo(
|
||||
() => ({
|
||||
isLoading,
|
||||
error,
|
||||
bondMixnode,
|
||||
bondGateway,
|
||||
unbond,
|
||||
refresh,
|
||||
redeemRewards,
|
||||
compoundRewards,
|
||||
fee,
|
||||
feeLoading,
|
||||
getFee,
|
||||
resetFeeState,
|
||||
updateMixnode,
|
||||
bondMore,
|
||||
checkOwnership,
|
||||
}),
|
||||
[isLoading, error, bondedMixnode, bondedGateway, trigger, fee],
|
||||
);
|
||||
|
||||
return <BondingContext.Provider value={memoizedValue}>{children}</BondingContext.Provider>;
|
||||
};
|
||||
@@ -0,0 +1,13 @@
|
||||
import * as React from 'react';
|
||||
import { BondingPage } from './index';
|
||||
import { MockBondingContextProvider } from '../../context/mocks/bonding';
|
||||
|
||||
export default {
|
||||
title: 'Bonding/Flows/Mock',
|
||||
};
|
||||
|
||||
export const Default = () => (
|
||||
<MockBondingContextProvider>
|
||||
<BondingPage />
|
||||
</MockBondingContextProvider>
|
||||
);
|
||||
@@ -0,0 +1,252 @@
|
||||
import React, { useContext, useState } from 'react';
|
||||
import { FeeDetails } from '@nymproject/types';
|
||||
import { TPoolOption } from 'src/components';
|
||||
import { Bond } from 'src/components/Bonding/Bond';
|
||||
import { BondedMixnode } from 'src/components/Bonding/BondedMixnode';
|
||||
import { TBondedMixnodeActions } from 'src/components/Bonding/BondedMixnodeActions';
|
||||
import { BondGatewayModal } from 'src/components/Bonding/modals/BondGatewayModal';
|
||||
import { BondMixnodeModal } from 'src/components/Bonding/modals/BondMixnodeModal';
|
||||
import { ConfirmationDetailProps, ConfirmationDetailsModal } from 'src/components/Bonding/modals/ConfirmationModal';
|
||||
import { NodeSettings } from 'src/components/Bonding/modals/NodeSettingsModal';
|
||||
import { UnbondModal } from 'src/components/Bonding/modals/UnbondModal';
|
||||
import { ErrorModal } from 'src/components/Modals/ErrorModal';
|
||||
import { LoadingModal } from 'src/components/Modals/LoadingModal';
|
||||
import { AppContext, urls } from 'src/context/main';
|
||||
import { isGateway, isMixnode, TBondGatewayArgs, TBondMixNodeArgs } from 'src/types';
|
||||
import { BondedGateway } from 'src/components/Bonding/BondedGateway';
|
||||
import { RedeemRewardsModal } from 'src/components/Bonding/modals/RedeemRewardsModal';
|
||||
import { CompoundRewardsModal } from 'src/components/Bonding/modals/CompoundRewardsModal';
|
||||
import { PageLayout } from '../../layouts';
|
||||
import { BondingContextProvider, useBondingContext } from '../../context';
|
||||
import { Box } from '@mui/material';
|
||||
|
||||
const Bonding = () => {
|
||||
const [showModal, setShowModal] = useState<
|
||||
'bond-mixnode' | 'bond-gateway' | 'bond-more' | 'unbond' | 'redeem' | 'compound' | 'node-settings'
|
||||
>();
|
||||
const [confirmationDetails, setConfirmationDetails] = useState<ConfirmationDetailProps>();
|
||||
|
||||
const {
|
||||
network,
|
||||
clientDetails,
|
||||
userBalance: { originalVesting },
|
||||
} = useContext(AppContext);
|
||||
|
||||
const {
|
||||
bondedNode,
|
||||
bondMixnode,
|
||||
bondGateway,
|
||||
unbond,
|
||||
updateMixnode,
|
||||
redeemRewards,
|
||||
compoundRewards,
|
||||
isLoading,
|
||||
checkOwnership,
|
||||
} = useBondingContext();
|
||||
|
||||
const handleCloseModal = async () => {
|
||||
setShowModal(undefined);
|
||||
await checkOwnership();
|
||||
};
|
||||
|
||||
const handleError = (error: string) => {
|
||||
setShowModal(undefined);
|
||||
setConfirmationDetails({
|
||||
status: 'error',
|
||||
title: 'An error occurred',
|
||||
subtitle: error,
|
||||
});
|
||||
};
|
||||
|
||||
const handleBondMixnode = async (data: TBondMixNodeArgs, tokenPool: TPoolOption) => {
|
||||
setShowModal(undefined);
|
||||
const tx = await bondMixnode(data, tokenPool);
|
||||
setConfirmationDetails({
|
||||
status: 'success',
|
||||
title: 'Bond successful',
|
||||
txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
|
||||
});
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const handleBondGateway = async (data: TBondGatewayArgs, tokenPool: TPoolOption) => {
|
||||
setShowModal(undefined);
|
||||
const tx = await bondGateway(data, tokenPool);
|
||||
setConfirmationDetails({
|
||||
status: 'success',
|
||||
title: 'Bond successful',
|
||||
txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
|
||||
});
|
||||
};
|
||||
|
||||
const handleUnbond = async (fee?: FeeDetails) => {
|
||||
setShowModal(undefined);
|
||||
const tx = await unbond(fee);
|
||||
setConfirmationDetails({
|
||||
status: 'success',
|
||||
title: 'Unbond successful',
|
||||
txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
|
||||
});
|
||||
};
|
||||
|
||||
const handleUpdateProfitMargin = async (profitMargin: number, fee?: FeeDetails) => {
|
||||
setShowModal(undefined);
|
||||
const tx = await updateMixnode(profitMargin, fee);
|
||||
setConfirmationDetails({
|
||||
status: 'success',
|
||||
title: 'Profit margin update successful',
|
||||
txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
|
||||
});
|
||||
};
|
||||
|
||||
const handleRedeemReward = async (fee?: FeeDetails) => {
|
||||
setShowModal(undefined);
|
||||
const tx = await redeemRewards(fee);
|
||||
setConfirmationDetails({
|
||||
status: 'success',
|
||||
title: 'Rewards redeemed successfully',
|
||||
txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCompoundReward = async (fee?: FeeDetails) => {
|
||||
setShowModal(undefined);
|
||||
const tx = await compoundRewards(fee);
|
||||
setConfirmationDetails({
|
||||
status: 'success',
|
||||
title: 'Rewards compounded successfully',
|
||||
txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
|
||||
});
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const handleBondedMixnodeAction = (action: TBondedMixnodeActions) => {
|
||||
switch (action) {
|
||||
case 'bondMore': {
|
||||
setShowModal('bond-more');
|
||||
break;
|
||||
}
|
||||
case 'unbond': {
|
||||
setShowModal('unbond');
|
||||
break;
|
||||
}
|
||||
case 'redeem': {
|
||||
setShowModal('redeem');
|
||||
break;
|
||||
}
|
||||
case 'compound': {
|
||||
setShowModal('compound');
|
||||
break;
|
||||
}
|
||||
case 'nodeSettings': {
|
||||
setShowModal('node-settings');
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ mt: 4 }}>
|
||||
{!bondedNode && <Bond disabled={isLoading} onBond={() => setShowModal('bond-mixnode')} />}
|
||||
|
||||
{bondedNode && isMixnode(bondedNode) && (
|
||||
<BondedMixnode
|
||||
mixnode={bondedNode}
|
||||
network={network}
|
||||
onActionSelect={(action) => handleBondedMixnodeAction(action)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{bondedNode && isGateway(bondedNode) && (
|
||||
<BondedGateway gateway={bondedNode} onActionSelect={handleBondedMixnodeAction} network={network} />
|
||||
)}
|
||||
{showModal === 'bond-mixnode' && (
|
||||
<BondMixnodeModal
|
||||
denom={clientDetails?.display_mix_denom || 'nym'}
|
||||
hasVestingTokens={Boolean(originalVesting)}
|
||||
onBondMixnode={handleBondMixnode}
|
||||
onSelectNodeType={() => setShowModal('bond-gateway')}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'bond-gateway' && (
|
||||
<BondGatewayModal
|
||||
denom={clientDetails?.display_mix_denom || 'nym'}
|
||||
hasVestingTokens={Boolean(originalVesting)}
|
||||
onBondGateway={handleBondGateway}
|
||||
onSelectNodeType={() => setShowModal('bond-mixnode')}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'unbond' && bondedNode && (
|
||||
<UnbondModal
|
||||
node={bondedNode}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onConfirm={handleUnbond}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'redeem' && bondedNode && isMixnode(bondedNode) && (
|
||||
<RedeemRewardsModal
|
||||
node={bondedNode}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onConfirm={handleRedeemReward}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'compound' && bondedNode && isMixnode(bondedNode) && (
|
||||
<CompoundRewardsModal
|
||||
node={bondedNode}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onConfirm={handleCompoundReward}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'node-settings' && bondedNode && isMixnode(bondedNode) && (
|
||||
<NodeSettings
|
||||
currentPm={bondedNode.profitMargin}
|
||||
isVesting={Boolean(bondedNode.proxy)}
|
||||
onConfirm={handleUpdateProfitMargin}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{confirmationDetails && confirmationDetails.status === 'success' && (
|
||||
<ConfirmationDetailsModal
|
||||
title={confirmationDetails.title}
|
||||
subtitle={confirmationDetails.subtitle || 'This operation can take up to one hour to process'}
|
||||
status={confirmationDetails.status}
|
||||
txUrl={confirmationDetails.txUrl}
|
||||
onClose={() => {
|
||||
setConfirmationDetails(undefined);
|
||||
handleCloseModal();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{confirmationDetails && confirmationDetails.status === 'error' && (
|
||||
<ErrorModal open message={confirmationDetails.subtitle} onClose={() => setConfirmationDetails(undefined)} />
|
||||
)}
|
||||
|
||||
{isLoading && <LoadingModal />}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const BondingPage = () => (
|
||||
<BondingContextProvider>
|
||||
<Bonding />
|
||||
</BondingContextProvider>
|
||||
);
|
||||
@@ -0,0 +1,70 @@
|
||||
import { DecCoin, TNodeType, TransactionExecuteResult } from '@nymproject/types';
|
||||
import { TPoolOption } from 'src/components';
|
||||
|
||||
export type FormStep = 1 | 2 | 3 | 4;
|
||||
export type NodeType = TNodeType;
|
||||
export type BondStatus = 'init' | 'success' | 'error' | 'loading';
|
||||
|
||||
export type ACTIONTYPE =
|
||||
| { type: 'change_bond_type'; payload: NodeType }
|
||||
| { type: 'set_node_data'; payload: NodeData }
|
||||
| { type: 'set_amount_data'; payload: AmountData }
|
||||
| { type: 'set_step'; payload: FormStep }
|
||||
| { type: 'set_tx'; payload: TransactionExecuteResult | undefined }
|
||||
| { type: 'set_error'; payload: string | null | undefined }
|
||||
| { type: 'set_bond_status'; payload: BondStatus }
|
||||
| { type: 'next_step' }
|
||||
| { type: 'prev_step' }
|
||||
| { type: 'show_modal' }
|
||||
| { type: 'close_modal' }
|
||||
| { type: 'reset' };
|
||||
|
||||
export type NodeIdentity = {
|
||||
identityKey: string;
|
||||
sphinxKey: string;
|
||||
ownerSignature: string;
|
||||
host: string;
|
||||
version: string;
|
||||
mixPort: number;
|
||||
};
|
||||
|
||||
export type MixnodeData = NodeIdentity & {
|
||||
verlocPort: number;
|
||||
httpApiPort: number;
|
||||
};
|
||||
|
||||
export type Amount = {
|
||||
amount: DecCoin;
|
||||
tokenPool: string;
|
||||
};
|
||||
|
||||
export type GatewayAmount = Amount;
|
||||
|
||||
export type MixnodeAmount = Amount & {
|
||||
profitMargin: number;
|
||||
};
|
||||
|
||||
export type GatewayData = NodeIdentity & {
|
||||
location: string;
|
||||
clientsPort: number;
|
||||
};
|
||||
|
||||
export type NodeData<N = MixnodeData | GatewayData> = {
|
||||
nodeType: TNodeType;
|
||||
} & N;
|
||||
|
||||
export interface AmountData {
|
||||
amount: DecCoin;
|
||||
tokenPool: TPoolOption;
|
||||
profitMargin?: number;
|
||||
}
|
||||
|
||||
export interface BondState {
|
||||
showModal: boolean;
|
||||
formStep: FormStep;
|
||||
nodeData?: NodeData;
|
||||
amountData?: MixnodeAmount | GatewayAmount;
|
||||
tx?: TransactionExecuteResult;
|
||||
bondStatus: BondStatus;
|
||||
error?: string | null;
|
||||
}
|
||||
@@ -288,7 +288,7 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper elevation={0} sx={{ p: 4, mt: 4 }}>
|
||||
<Paper elevation={0} sx={{ p: 3, mt: 4 }}>
|
||||
<Stack spacing={5}>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center">
|
||||
<Typography variant="h6">Delegations</Typography>
|
||||
@@ -323,7 +323,7 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
|
||||
</Paper>
|
||||
|
||||
{pendingDelegations && (
|
||||
<Paper elevation={0} sx={{ p: 4, mt: 2 }}>
|
||||
<Paper elevation={0} sx={{ p: 3, mt: 2 }}>
|
||||
<Stack spacing={5}>
|
||||
<Typography variant="h6">Pending Delegation Events</Typography>
|
||||
<PendingEvents pendingEvents={pendingDelegations} explorerUrl={urls(network).networkExplorer} />
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
export * from './auth';
|
||||
export * from './Admin';
|
||||
export * from './balance';
|
||||
export * from './bond';
|
||||
export * from './internal-docs';
|
||||
export * from './auth';
|
||||
export * from './settings';
|
||||
export * from './unbond';
|
||||
export * from './bonding';
|
||||
export * from './delegation';
|
||||
export * from './internal-docs';
|
||||
export * from './unbond';
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { Alert, Box, Dialog } from '@mui/material';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { NymCard } from '../../components';
|
||||
import { AppContext } from '../../context/main';
|
||||
import { Tabs } from './tabs';
|
||||
import { Profile } from './profile';
|
||||
import { SystemVariables } from './system-variables';
|
||||
import { NodeStats } from './node-stats';
|
||||
import { useSettingsState } from './useSettingsState';
|
||||
import { NodeStatus } from '../../components/NodeStatus';
|
||||
import { Node as NodeIcon } from '../../svg-icons/node';
|
||||
|
||||
const tabs = ['Profile', 'System variables', 'Node stats'];
|
||||
|
||||
export const Settings = () => {
|
||||
const [selectedTab, setSelectedTab] = useState(0);
|
||||
|
||||
const { mixnodeDetails, showSettings, getBondDetails, handleShowSettings } = useContext(AppContext);
|
||||
const { status, saturation, rewardEstimation, inclusionProbability, updateAllMixnodeStats } = useSettingsState();
|
||||
|
||||
const handleTabChange = (_: React.SyntheticEvent, newTab: number) => setSelectedTab(newTab);
|
||||
|
||||
useEffect(() => {
|
||||
getBondDetails();
|
||||
if (mixnodeDetails) {
|
||||
updateAllMixnodeStats(mixnodeDetails.mix_node.identity_key);
|
||||
}
|
||||
}, [showSettings, selectedTab]);
|
||||
|
||||
return showSettings ? (
|
||||
<Dialog open onClose={handleShowSettings} maxWidth="md" fullWidth>
|
||||
<NymCard
|
||||
title={
|
||||
<Box width="100%" display="flex" justifyContent="space-between">
|
||||
<Box display="flex" alignItems="center">
|
||||
<NodeIcon sx={{ mr: 1 }} />
|
||||
Node Settings
|
||||
</Box>
|
||||
<CloseIcon onClick={handleShowSettings} cursor="pointer" />
|
||||
</Box>
|
||||
}
|
||||
Action={<NodeStatus status={status} />}
|
||||
dataTestid="node-settings"
|
||||
noPadding
|
||||
>
|
||||
<>
|
||||
<Tabs tabs={tabs} selectedTab={selectedTab} onChange={handleTabChange} disabled={!mixnodeDetails} />
|
||||
{!mixnodeDetails && (
|
||||
<Alert severity="info" sx={{ m: 4 }}>
|
||||
You do not currently have a node running
|
||||
</Alert>
|
||||
)}
|
||||
{selectedTab === 0 && <Profile />}
|
||||
{selectedTab === 1 && (
|
||||
<SystemVariables
|
||||
saturation={saturation}
|
||||
rewardEstimation={rewardEstimation}
|
||||
inclusionProbability={inclusionProbability}
|
||||
/>
|
||||
)}
|
||||
{selectedTab === 2 && mixnodeDetails && <NodeStats mixnodeId={mixnodeDetails.mix_node.identity_key} />}
|
||||
</>
|
||||
</NymCard>
|
||||
</Dialog>
|
||||
) : null;
|
||||
};
|
||||
@@ -12,8 +12,8 @@ export const bondMixNode = async (args: TBondMixNodeArgs) =>
|
||||
|
||||
export const unbondMixNode = async (fee?: Fee) => invokeWrapper<TransactionExecuteResult>('unbond_mixnode', { fee });
|
||||
|
||||
export const updateMixnode = async (profitMarginPercent: number) =>
|
||||
invokeWrapper<TransactionExecuteResult>('update_mixnode', { profitMarginPercent });
|
||||
export const updateMixnode = async (profitMarginPercent: number, fee?: Fee) =>
|
||||
invokeWrapper<TransactionExecuteResult>('update_mixnode', { profitMarginPercent, fee });
|
||||
|
||||
export const send = async (args: { amount: DecCoin; address: string; memo: string; fee?: Fee }) =>
|
||||
invokeWrapper<SendTxResult>('send', args);
|
||||
|
||||
@@ -6,8 +6,9 @@ import {
|
||||
InclusionProbabilityResponse,
|
||||
DecCoin,
|
||||
MixNodeBond,
|
||||
GatewayBond,
|
||||
} from '@nymproject/types';
|
||||
import { Epoch } from 'src/types';
|
||||
import { Epoch, TNodeDescription } from 'src/types';
|
||||
import { invokeWrapper } from './wrapper';
|
||||
|
||||
export const getReverseMixDelegations = async () =>
|
||||
@@ -25,6 +26,7 @@ export const getAllPendingDelegations = async () =>
|
||||
invokeWrapper<DelegationEvent[]>('get_all_pending_delegation_events');
|
||||
|
||||
export const getMixnodeBondDetails = async () => invokeWrapper<MixNodeBond | null>('mixnode_bond_details');
|
||||
export const getGatewayBondDetails = async () => invokeWrapper<GatewayBond | null>('gateway_bond_details');
|
||||
|
||||
export const getOperatorRewards = async (address: string) =>
|
||||
invokeWrapper<DecCoin>('get_operator_rewards', { address });
|
||||
@@ -46,3 +48,9 @@ export const getInclusionProbability = async (identity: string) =>
|
||||
invokeWrapper<InclusionProbabilityResponse>('mixnode_inclusion_probability', { identity });
|
||||
|
||||
export const getCurrentEpoch = async () => invokeWrapper<Epoch>('get_current_epoch');
|
||||
|
||||
export const getNumberOfMixnodeDelegators = async (identity: string) =>
|
||||
invokeWrapper<number>('get_number_of_mixnode_delegators', { identity });
|
||||
|
||||
export const getNodeDescription = async (host: string, port: number) =>
|
||||
invokeWrapper<TNodeDescription>('get_mix_node_description', { host, port });
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { FeeDetails, TransactionExecuteResult } from '@nymproject/types';
|
||||
import { Fee, FeeDetails, TransactionExecuteResult } from '@nymproject/types';
|
||||
import { invokeWrapper } from './wrapper';
|
||||
|
||||
export const claimOperatorRewards = async () => invokeWrapper<TransactionExecuteResult[]>('claim_operator_reward');
|
||||
export const claimOperatorReward = async (fee?: Fee) =>
|
||||
invokeWrapper<TransactionExecuteResult>('claim_operator_reward', { fee });
|
||||
|
||||
export const compoundOperatorRewards = async () =>
|
||||
invokeWrapper<TransactionExecuteResult[]>('compound_operator_reward');
|
||||
export const compoundOperatorReward = async (fee?: Fee) =>
|
||||
invokeWrapper<TransactionExecuteResult>('compound_operator_reward', { fee });
|
||||
|
||||
export const claimDelegatorRewards = async (mixIdentity: string, fee?: FeeDetails) =>
|
||||
invokeWrapper<TransactionExecuteResult[]>('claim_locked_and_unlocked_delegator_reward', {
|
||||
|
||||
@@ -12,7 +12,8 @@ export const simulateBondMixnode = async (args: TBondMixNodeArgs) =>
|
||||
|
||||
export const simulateUnbondMixnode = async (args: any) => invokeWrapper<FeeDetails>('simulate_unbond_mixnode', args);
|
||||
|
||||
export const simulateUpdateMixnode = async (args: any) => invokeWrapper<FeeDetails>('simulate_update_mixnode', args);
|
||||
export const simulateUpdateMixnode = async (args: { profitMarginPercent: number }) =>
|
||||
invokeWrapper<FeeDetails>('simulate_update_mixnode', args);
|
||||
|
||||
export const simulateDelegateToMixnode = async (args: { identity: string; amount: DecCoin }) =>
|
||||
invokeWrapper<FeeDetails>('simulate_delegate_to_mixnode', args);
|
||||
@@ -49,7 +50,7 @@ export const simulateVestingBondMixnode = async (args: { mixnode: MixNode; pledg
|
||||
|
||||
export const simulateVestingUnbondMixnode = async () => invokeWrapper<FeeDetails>('simulate_vesting_unbond_mixnode');
|
||||
|
||||
export const simulateVestingUpdateMixnode = async (args: any) =>
|
||||
export const simulateVestingUpdateMixnode = async (args: { profitMarginPercent: number }) =>
|
||||
invokeWrapper<FeeDetails>('simulate_vesting_update_mixnode', args);
|
||||
|
||||
export const simulateWithdrawVestedCoins = async (args: any) =>
|
||||
@@ -57,3 +58,14 @@ export const simulateWithdrawVestedCoins = async (args: any) =>
|
||||
|
||||
export const simulateSend = async ({ address, amount }: { address: string; amount: DecCoin }) =>
|
||||
invokeWrapper<FeeDetails>('simulate_send', { address, amount });
|
||||
|
||||
export const simulateClaimOperatorReward = async () => invokeWrapper<FeeDetails>('simulate_claim_operator_reward');
|
||||
|
||||
export const simulateVestingClaimOperatorReward = async () =>
|
||||
invokeWrapper<FeeDetails>('simulate_vesting_claim_operator_reward');
|
||||
|
||||
export const simulateCompoundOperatorReward = async () =>
|
||||
invokeWrapper<FeeDetails>('simulate_compound_operator_reward');
|
||||
|
||||
export const simulateVestingCompoundOperatorReward = async () =>
|
||||
invokeWrapper<FeeDetails>('simulate_vesting_compound_operator_reward');
|
||||
|
||||
@@ -60,8 +60,8 @@ export const vestingUnbondMixnode = async (fee?: Fee) =>
|
||||
export const withdrawVestedCoins = async (amount: DecCoin, fee?: Fee) =>
|
||||
invokeWrapper<TransactionExecuteResult>('withdraw_vested_coins', { amount, fee });
|
||||
|
||||
export const vestingUpdateMixnode = async (profitMarginPercent: number) =>
|
||||
invokeWrapper<TransactionExecuteResult>('vesting_update_mixnode', { profitMarginPercent });
|
||||
export const vestingUpdateMixnode = async (profitMarginPercent: number, fee?: Fee) =>
|
||||
invokeWrapper<TransactionExecuteResult>('vesting_update_mixnode', { profitMarginPercent, fee });
|
||||
|
||||
export const vestingDelegateToMixnode = async ({
|
||||
identity,
|
||||
@@ -101,11 +101,11 @@ export const vestingUnbond = async (type: TNodeType) => {
|
||||
return vestingUnbondGateway();
|
||||
};
|
||||
|
||||
export const vestingClaimOperatorRewards = async () =>
|
||||
invokeWrapper<TransactionExecuteResult>('vesting_claim_operator_reward');
|
||||
export const vestingClaimOperatorReward = async (fee?: Fee) =>
|
||||
invokeWrapper<TransactionExecuteResult>('vesting_claim_operator_reward', { fee });
|
||||
|
||||
export const vestingCompoundOperatorRewards = async () =>
|
||||
invokeWrapper<TransactionExecuteResult>('vesting_compound_operator_reward');
|
||||
export const vestingCompoundOperatorReward = async (fee?: Fee) =>
|
||||
invokeWrapper<TransactionExecuteResult>('vesting_compound_operator_reward', { fee });
|
||||
|
||||
export const vestingClaimDelegatorRewards = async (mixIdentity: string) =>
|
||||
invokeWrapper<TransactionExecuteResult>('vesting_claim_delegator_reward', { mixIdentity });
|
||||
|
||||
@@ -4,17 +4,16 @@ import { ApplicationLayout } from 'src/layouts';
|
||||
import { Terminal } from 'src/pages/terminal';
|
||||
import { Send } from 'src/components/Send';
|
||||
import { Receive } from '../components/Receive';
|
||||
import { Bond, Balance, InternalDocs, Unbond, DelegationPage, Admin, Settings } from '../pages';
|
||||
import { Balance, InternalDocs, Unbond, DelegationPage, Admin, BondingPage } from '../pages';
|
||||
|
||||
export const AppRoutes = () => (
|
||||
<ApplicationLayout>
|
||||
<Terminal />
|
||||
<Settings />
|
||||
<Send />
|
||||
<Receive />
|
||||
<Routes>
|
||||
<Route path="/balance" element={<Balance />} />
|
||||
<Route path="/bond" element={<Bond />} />
|
||||
<Route path="/bonding" element={<BondingPage />} />
|
||||
<Route path="/unbond" element={<Unbond />} />
|
||||
<Route path="/delegation" element={<DelegationPage />} />
|
||||
<Route path="/docs" element={<InternalDocs />} />
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import { SvgIcon, SvgIconProps } from '@mui/material';
|
||||
|
||||
export const Bonding = (props: SvgIconProps) => (
|
||||
<SvgIcon {...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M16 17C14.8954 17 14 16.1046 14 15L14 9C14 7.89543 14.8954 7 16 7L22 7C23.1046 7 24 7.89543 24 9L24 15C24 16.1046 23.1046 17 22 17L16 17ZM16 9L16 15L22 15L22 9L16 9Z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M2 17C0.89543 17 -1.00647e-07 16.1046 -2.24801e-07 15L-8.99206e-07 9C-1.02336e-06 7.89543 0.895429 7 2 7L8 7C9.10457 7 10 7.89543 10 9L10 15C10 16.1046 9.10457 17 8 17L2 17ZM2 9L2 15L8 15L8 9L2 9Z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z"
|
||||
/>
|
||||
</SvgIcon>
|
||||
);
|
||||
@@ -2,3 +2,4 @@ export * from './delegate';
|
||||
export * from './undelegate';
|
||||
export * from './bond';
|
||||
export * from './unbond';
|
||||
export * from './bonding';
|
||||
|
||||
Vendored
+5
-5
@@ -85,7 +85,7 @@ declare module '@mui/material/styles' {
|
||||
/**
|
||||
* Add anything not palette related to the theme here
|
||||
*/
|
||||
interface NymTheme { }
|
||||
interface NymTheme {}
|
||||
|
||||
/**
|
||||
* This augments the definitions of the MUI Theme with the Nym theme, as well as
|
||||
@@ -93,8 +93,8 @@ declare module '@mui/material/styles' {
|
||||
*
|
||||
* IMPORTANT: only add extensions to the interfaces above, do not modify the lines below
|
||||
*/
|
||||
interface Theme extends NymTheme { }
|
||||
interface ThemeOptions extends Partial<NymTheme> { }
|
||||
interface Palette extends NymPaletteAndNymWalletPalette { }
|
||||
interface PaletteOptions extends NymPaletteAndNymWalletPaletteOptions { }
|
||||
interface Theme extends NymTheme {}
|
||||
interface ThemeOptions extends Partial<NymTheme> {}
|
||||
interface Palette extends NymPaletteAndNymWalletPalette {}
|
||||
interface PaletteOptions extends NymPaletteAndNymWalletPaletteOptions {}
|
||||
}
|
||||
|
||||
@@ -229,13 +229,6 @@ export const getDesignTokens = (mode: PaletteMode): ThemeOptions => {
|
||||
},
|
||||
},
|
||||
components: {
|
||||
MuiTypography: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
@@ -279,6 +272,13 @@ export const getDesignTokens = (mode: PaletteMode): ThemeOptions => {
|
||||
underline: 'none',
|
||||
},
|
||||
},
|
||||
MuiDialogTitle: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
palette,
|
||||
};
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Gateway, DecCoin, MixNode, PledgeData } from '@nymproject/types';
|
||||
import { Fee } from '@nymproject/types/dist/types/rust/Fee';
|
||||
import { TBondedGateway, TBondedMixnode } from 'src/context';
|
||||
|
||||
export enum EnumNodeType {
|
||||
mixnode = 'mixnode',
|
||||
@@ -39,6 +40,13 @@ export type TBondMixNodeArgs = {
|
||||
fee?: Fee;
|
||||
};
|
||||
|
||||
export type TNodeDescription = {
|
||||
name: string;
|
||||
description: string;
|
||||
link: string;
|
||||
location: string;
|
||||
};
|
||||
|
||||
export type TDelegateArgs = {
|
||||
identity: string;
|
||||
amount: DecCoin;
|
||||
@@ -51,3 +59,8 @@ export type TAccount = {
|
||||
address: string;
|
||||
mnemonic: string;
|
||||
};
|
||||
|
||||
export const isMixnode = (node: TBondedMixnode | TBondedGateway): node is TBondedMixnode =>
|
||||
(node as TBondedMixnode).profitMargin !== undefined;
|
||||
|
||||
export const isGateway = (node: TBondedMixnode | TBondedGateway): node is TBondedGateway => !isMixnode(node);
|
||||
|
||||
@@ -121,3 +121,5 @@ export const checkTokenBalance = async (tokenPool: TPoolOption, amount: string)
|
||||
|
||||
return hasEnoughFunds;
|
||||
};
|
||||
|
||||
export const isDecimal = (value: number) => value - Math.floor(value) !== 0;
|
||||
|
||||
@@ -13,16 +13,21 @@ export const IdentityKeyFormField: React.FC<{
|
||||
readOnly?: boolean;
|
||||
initialValue?: string;
|
||||
placeholder?: string;
|
||||
label?: string;
|
||||
helperText?: string;
|
||||
onChanged?: (newValue: string) => void;
|
||||
onValidate?: (isValid: boolean, error?: string) => void;
|
||||
textFieldProps?: TextFieldProps;
|
||||
errorText?: string;
|
||||
sx?: SxProps;
|
||||
}> = ({
|
||||
required,
|
||||
fullWidth,
|
||||
placeholder,
|
||||
label,
|
||||
readOnly,
|
||||
initialValue,
|
||||
errorText,
|
||||
sx,
|
||||
onChanged,
|
||||
onValidate,
|
||||
@@ -55,7 +60,11 @@ export const IdentityKeyFormField: React.FC<{
|
||||
if (initialValue) {
|
||||
doValidation(initialValue);
|
||||
}
|
||||
}, [initialValue]);
|
||||
|
||||
if (errorText) {
|
||||
setValidationError(errorText);
|
||||
}
|
||||
}, [initialValue, errorText]);
|
||||
|
||||
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = event.target.value;
|
||||
@@ -82,6 +91,7 @@ export const IdentityKeyFormField: React.FC<{
|
||||
),
|
||||
}}
|
||||
placeholder={placeholder}
|
||||
label={label}
|
||||
sx={sx}
|
||||
{...textFieldProps}
|
||||
aria-readonly={readOnly}
|
||||
|
||||
@@ -1157,7 +1157,7 @@
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.2"
|
||||
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
||||
version "7.17.2"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
|
||||
integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
|
||||
@@ -1178,6 +1178,13 @@
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.15.4":
|
||||
version "7.18.9"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
|
||||
integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@~7.5.4":
|
||||
version "7.5.5"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
|
||||
@@ -5274,16 +5281,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
|
||||
integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
|
||||
|
||||
"@types/lodash@^4.14.167":
|
||||
"@types/lodash@^4.14.167", "@types/lodash@^4.14.175":
|
||||
version "4.14.182"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
|
||||
integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
|
||||
|
||||
"@types/lodash@^4.14.175":
|
||||
version "4.14.179"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.179.tgz#490ec3288088c91295780237d2497a3aa9dfb5c5"
|
||||
integrity sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w==
|
||||
|
||||
"@types/long@^4.0.1":
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a"
|
||||
@@ -10788,6 +10790,17 @@ glob@7.2.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glo
|
||||
once "^1.3.0"
|
||||
path-is-absolute "^1.0.0"
|
||||
|
||||
glob@^8.0.3:
|
||||
version "8.0.3"
|
||||
resolved "https://registry.yarnpkg.com/glob/-/glob-8.0.3.tgz#415c6eb2deed9e502c68fa44a272e6da6eeca42e"
|
||||
integrity sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==
|
||||
dependencies:
|
||||
fs.realpath "^1.0.0"
|
||||
inflight "^1.0.4"
|
||||
inherits "2"
|
||||
minimatch "^5.0.1"
|
||||
once "^1.3.0"
|
||||
|
||||
global@^4.4.0, global@~4.4.0:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
|
||||
@@ -12800,6 +12813,11 @@ json5@^1.0.1:
|
||||
dependencies:
|
||||
minimist "^1.2.0"
|
||||
|
||||
jsonc-parser@^3.0.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.1.0.tgz#73b8f0e5c940b83d03476bc2e51a20ef0932615d"
|
||||
integrity sha512-DRf0QjnNeCUds3xTjKlQQ3DpJD51GvDjJfnxUVWg6PZTo2otSm+slzNAxU/35hF8/oJIKoG9slq30JYOsF2azg==
|
||||
|
||||
jsonfile@^2.1.0:
|
||||
version "2.4.0"
|
||||
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
|
||||
@@ -13325,6 +13343,11 @@ lru-cache@^6.0.0:
|
||||
dependencies:
|
||||
yallist "^4.0.0"
|
||||
|
||||
lunr@^2.3.9:
|
||||
version "2.3.9"
|
||||
resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
|
||||
integrity sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==
|
||||
|
||||
luxon@^2.3.0:
|
||||
version "2.4.0"
|
||||
resolved "https://registry.yarnpkg.com/luxon/-/luxon-2.4.0.tgz#9435806545bb32d4234dab766ab8a3d54847a765"
|
||||
@@ -13444,6 +13467,11 @@ markdown-escapes@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
|
||||
integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
|
||||
|
||||
marked@^4.0.16:
|
||||
version "4.0.18"
|
||||
resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.18.tgz#cd0ac54b2e5610cfb90e8fd46ccaa8292c9ed569"
|
||||
integrity sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw==
|
||||
|
||||
md5.js@^1.3.4:
|
||||
version "1.3.5"
|
||||
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
|
||||
@@ -13735,6 +13763,13 @@ minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.2:
|
||||
dependencies:
|
||||
brace-expansion "^1.1.7"
|
||||
|
||||
minimatch@^5.0.1, minimatch@^5.1.0:
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.0.tgz#1717b464f4971b144f6aabe8f2d0b8e4511e09c7"
|
||||
integrity sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==
|
||||
dependencies:
|
||||
brace-expansion "^2.0.1"
|
||||
|
||||
minimist-options@4.1.0:
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
|
||||
@@ -17124,6 +17159,15 @@ shell-quote@^1.6.1:
|
||||
resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
|
||||
integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
|
||||
|
||||
shiki@^0.10.1:
|
||||
version "0.10.1"
|
||||
resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.10.1.tgz#6f9a16205a823b56c072d0f1a0bcd0f2646bef14"
|
||||
integrity sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==
|
||||
dependencies:
|
||||
jsonc-parser "^3.0.0"
|
||||
vscode-oniguruma "^1.6.1"
|
||||
vscode-textmate "5.2.0"
|
||||
|
||||
side-channel@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
|
||||
@@ -18461,6 +18505,17 @@ typedarray@^0.0.6:
|
||||
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
|
||||
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
|
||||
|
||||
typedoc@^0.22.13:
|
||||
version "0.22.18"
|
||||
resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.22.18.tgz#1d000c33b66b88fd8cdfea14a26113a83b7e6591"
|
||||
integrity sha512-NK9RlLhRUGMvc6Rw5USEYgT4DVAUFk7IF7Q6MYfpJ88KnTZP7EneEa4RcP+tX1auAcz7QT1Iy0bUSZBYYHdoyA==
|
||||
dependencies:
|
||||
glob "^8.0.3"
|
||||
lunr "^2.3.9"
|
||||
marked "^4.0.16"
|
||||
minimatch "^5.1.0"
|
||||
shiki "^0.10.1"
|
||||
|
||||
typescript@^4.6.2:
|
||||
version "4.6.2"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"
|
||||
@@ -18873,6 +18928,16 @@ vm-browserify@^1.0.1:
|
||||
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
|
||||
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
|
||||
|
||||
vscode-oniguruma@^1.6.1:
|
||||
version "1.6.2"
|
||||
resolved "https://registry.yarnpkg.com/vscode-oniguruma/-/vscode-oniguruma-1.6.2.tgz#aeb9771a2f1dbfc9083c8a7fdd9cccaa3f386607"
|
||||
integrity sha512-KH8+KKov5eS/9WhofZR8M8dMHWN2gTxjMsG4jd04YhpbPR91fUj7rYQ2/XjeHCJWbg7X++ApRIU9NUwM2vTvLA==
|
||||
|
||||
vscode-textmate@5.2.0:
|
||||
version "5.2.0"
|
||||
resolved "https://registry.yarnpkg.com/vscode-textmate/-/vscode-textmate-5.2.0.tgz#01f01760a391e8222fe4f33fbccbd1ad71aed74e"
|
||||
integrity sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==
|
||||
|
||||
w3c-hr-time@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
|
||||
|
||||
Reference in New Issue
Block a user