update workflow to include network-stat

* 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>

.github/workflows/network-explorer.yml

@@ -1,6 +1,7 @@
 name: CI for Network Explorer
 
 on:
+  workflow_dispatch:
   push:
     paths:
       - 'explorer/**'
@@ -75,3 +76,14 @@ jobs:
       uses: docker://keybaseio/client:stable-node
       with:
         args: .github/workflows/support-files/notifications/entry_point.sh
+    - name: Deploy
+      if: github.event_name == 'workflow_dispatch'
+      uses: easingthemes/ssh-deploy@main
+      env:
+        SSH_PRIVATE_KEY: ${{ secrets.CD_PROD_NE_SSH_PRIVATE_KEY }}
+        ARGS: "-rltgoDzvO --delete"
+        SOURCE: "explorer/dist/"
+        REMOTE_HOST: ${{ secrets.CD_PROD_NE_REMOTE_HOST }}
+        REMOTE_USER: ${{ secrets.CD_PROD_NE_REMOTE_USER }}
+        TARGET: ${{ secrets.CD_PROD_NE_REMOTE_TARGET }}
+        EXCLUDE: "/dist/, /node_modules/"

.github/workflows/nym-release-publish.yml

@@ -45,3 +45,4 @@ jobs:
             target/release/nym-socks5-client
             target/release/nym-validator-api
             target/release/nym-network-requester
+            target/release/nym-network-statistics

CHANGELOG.md

@@ -8,10 +8,6 @@ Post 1.0.0 release, the changelog format is based on [Keep a Changelog](https://
 ### Added
 
 - socks5 client/websocket client: add `--force-register-gateway` flag, useful when rerunning init ([#1353])
-- nym-connect: initial proof-of-concept of a UI around the socks5 client was added
-- nym-connect: add ability to select network requester and gateway ([#1427])
-- nym-connect: add ability to export gateway keys as JSON
-- nym-connect: add auto updater
 - all: added network compilation target to `--help` (or `--version`) commands ([#1256]).
 - explorer-api: learned how to sum the delegations by owner in a new endpoint.
 - explorer-api: add apy values to `mix_nodes` endpoint
@@ -39,10 +35,12 @@ Post 1.0.0 release, the changelog format is based on [Keep a Changelog](https://
 - native & socks5 clients: rerun init will now reuse previous gateway configuration instead of failing ([#1353])
 - native & socks5 clients: deduplicate big chunks of init logic
 - validator: fixed local docker-compose setup to work on Apple M1 ([#1329])
+- explorer-api: listen out for SIGTERM and SIGQUIT too, making it play nicely as a system service ([#1482]).
+- network-requester: fix filter for suffix-only domains ([#1487])
+- validator-api: listen out for SIGTERM and SIGQUIT too, making it play nicely as a system service ([#1496]).
 
 ### Changed
 
-- nym-connect: reuse config id instead of creating a new id on each connection
 - validator-client: created internal `Coin` type that replaces coins from `cosmrs` and `cosmwasm` for API entrypoints [[#1295]]
 - all: updated all `cosmwasm`-related dependencies to `1.0.0` and `cw-storage-plus` to `0.13.4` [[#1318]]
 - all: updated `rocket` to `0.5.0-rc.2`.
@@ -53,6 +51,7 @@ Post 1.0.0 release, the changelog format is based on [Keep a Changelog](https://
 - validator-api: fee payment for multisig operations comes from the gateway account instead of the validator APIs' accounts ([#1419])
 - multisig-contract: Limit the proposal creating functionality to one address (coconut-bandwidth-contract address) ([#1457])
 - All binaries and cosmwasm blobs are configured at runtime now; binaries are configured using environment variables or .env files and contracts keep the configuration parameters in storage ([#1463])
+- gateway, network-statistics: include gateway id in the sent statistical data ([#1478])
 
 
 [#1249]: https://github.com/nymtech/nym/pull/1249
@@ -74,9 +73,27 @@ Post 1.0.0 release, the changelog format is based on [Keep a Changelog](https://
 [#1393]: https://github.com/nymtech/nym/pull/1393
 [#1404]: https://github.com/nymtech/nym/pull/1404
 [#1419]: https://github.com/nymtech/nym/pull/1419
-[#1427]: https://github.com/nymtech/nym/pull/1427
 [#1457]: https://github.com/nymtech/nym/pull/1457
 [#1463]: https://github.com/nymtech/nym/pull/1463
+[#1478]: https://github.com/nymtech/nym/pull/1478
+[#1482]: https://github.com/nymtech/nym/pull/1482
+[#1487]: https://github.com/nymtech/nym/pull/1487
+[#1496]: https://github.com/nymtech/nym/pull/1496
+
+## [nym-connect-v1.0.1](https://github.com/nymtech/nym/tree/nym-connect-v1.0.1) (2022-07-22)
+
+### Added
+
+- nym-connect: initial proof-of-concept of a UI around the socks5 client was added
+- nym-connect: add ability to select network requester and gateway ([#1427])
+- nym-connect: add ability to export gateway keys as JSON
+- nym-connect: add auto updater
+
+### Changed
+
+- nym-connect: reuse config id instead of creating a new id on each connection
+
+[#1427]: https://github.com/nymtech/nym/pull/1427
 
 ## [nym-wallet-v1.0.7](https://github.com/nymtech/nym/tree/nym-wallet-v1.0.7) (2022-07-11)
 

Cargo.lock

@@ -1606,6 +1606,7 @@ dependencies = [
  "schemars",
  "serde",
  "serde_json",
+ "task",
  "thiserror",
  "tokio",
  "validator-client",
@@ -3324,6 +3325,7 @@ dependencies = [
  "serde",
  "serde_json",
  "sqlx",
+ "task",
  "thiserror",
  "time 0.3.9",
  "tokio",

Makefile

@@ -1,5 +1,5 @@
+test: clippy-all cargo-test wasm fmt
 test-all: test cargo-test-expensive
-test: build clippy-all cargo-test wasm fmt
 no-clippy: build cargo-test wasm fmt
 happy: fmt clippy-happy test
 clippy-all: clippy-all-main clippy-all-contracts clippy-all-wallet clippy-all-connect

clients/native/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "nym-client"
-version = "1.0.1"
+version = "1.0.2"
 authors = ["Dave Hrycyszyn <futurechimp@users.noreply.github.com>", "Jędrzej Stuczyński <andrew@nymtech.net>"]
 description = "Implementation of the Nym Client"
 edition = "2021"

clients/native/src/commands/run.rs

@@ -82,7 +82,7 @@ fn version_check(cfg: &Config) -> bool {
     if binary_version == config_version {
         true
     } else {
-        warn!("The mixnode binary has different version than what is specified in config file! {} and {}", binary_version, config_version);
+        warn!("The native-client binary has different version than what is specified in config file! {} and {}", binary_version, config_version);
         if is_minor_version_compatible(binary_version, config_version) {
             info!("but they are still semver compatible. However, consider running the `upgrade` command");
             true

clients/socks5/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "nym-socks5-client"
-version = "1.0.1"
+version = "1.0.2"
 authors = ["Dave Hrycyszyn <futurechimp@users.noreply.github.com>"]
 description = "A SOCKS5 localhost proxy that converts incoming messages to Sphinx and sends them to a Nym address"
 edition = "2021"

clients/socks5/src/commands/mod.rs

@@ -96,7 +96,7 @@ pub(crate) async fn execute(args: &Cli) {
     }
 }
 
-fn parse_validators(raw: &str) -> Vec<Url> {
+pub fn parse_validators(raw: &str) -> Vec<Url> {
     raw.split(',')
         .map(|raw_validator| {
             raw_validator

clients/socks5/src/socks/mixnet_responses.rs

@@ -5,7 +5,7 @@ use futures::StreamExt;
 use log::*;
 use nymsphinx::receiver::ReconstructedMessage;
 use proxy_helpers::connection_controller::{ControllerCommand, ControllerSender};
-use socks5_requests::Response;
+use socks5_requests::Message;
 
 pub(crate) struct MixnetResponseListener {
     buffer_requester: ReceivedBufferRequestSender,
@@ -44,12 +44,16 @@ impl MixnetResponseListener {
             warn!("this message had a surb - we didn't do anything with it");
         }
 
-        let response = match Response::try_from_bytes(&raw_message) {
+        let response = match Message::try_from_bytes(&raw_message) {
             Err(err) => {
                 warn!("failed to parse received response - {:?}", err);
                 return;
             }
-            Ok(data) => data,
+            Ok(Message::Request(_)) => {
+                warn!("unexpected request");
+                return;
+            }
+            Ok(Message::Response(data)) => data,
         };
 
         self.controller_sender

common/client-libs/validator-client/src/nymd/mod.rs

@@ -1006,6 +1006,29 @@ impl<C> NymdClient<C> {
             .await
     }
 
+    #[execute("mixnet")]
+    fn _compound_reward(
+        &self,
+        operator: Option<String>,
+        delegator: Option<String>,
+        mix_identity: Option<IdentityKey>,
+        proxy: Option<String>,
+        fee: Option<Fee>,
+    ) -> (ExecuteMsg, Option<Fee>)
+    where
+        C: SigningCosmWasmClient + Sync,
+    {
+        (
+            ExecuteMsg::CompoundReward {
+                operator,
+                delegator,
+                mix_identity,
+                proxy,
+            },
+            fee,
+        )
+    }
+
     #[execute("mixnet")]
     fn _compound_operator_reward(&self, fee: Option<Fee>) -> (ExecuteMsg, Option<Fee>)
     where

common/cosmwasm-smart-contracts/mixnet-contract/src/msg.rs

@@ -33,6 +33,12 @@ pub enum ExecuteMsg {
     CompoundDelegatorReward {
         mix_identity: IdentityKey,
     },
+    CompoundReward {
+        operator: Option<String>,
+        delegator: Option<String>,
+        mix_identity: Option<IdentityKey>,
+        proxy: Option<String>,
+    },
     BondMixnode {
         mix_node: MixNode,
         owner_signature: String,
@@ -116,6 +122,7 @@ pub enum ExecuteMsg {
 #[derive(Serialize, Deserialize, Clone, Debug, PartialEq, Eq, JsonSchema)]
 #[serde(rename_all = "snake_case")]
 pub enum QueryMsg {
+    GetBlacklistedNodes {},
     GetCurrentOperatorCost {},
     GetRewardingValidatorAddress {},
     GetAllDelegationKeys {},
@@ -206,6 +213,31 @@ pub enum QueryMsg {
     },
 }
 
-#[derive(Serialize, Deserialize, Clone, Debug, PartialEq, Eq, JsonSchema)]
+#[derive(Serialize, Deserialize, Clone, Debug, PartialEq, JsonSchema)]
 #[serde(rename_all = "snake_case")]
-pub struct MigrateMsg {}
+pub struct MigrateMsg {
+    pub mixnet_denom: String,
+    nodes_to_remove: Option<Vec<NodeToRemove>>,
+}
+
+impl MigrateMsg {
+    pub fn nodes_to_remove(&self) -> Vec<NodeToRemove> {
+        self.nodes_to_remove.clone().unwrap_or_default()
+    }
+}
+
+#[derive(Serialize, Deserialize, Clone, Debug, PartialEq, JsonSchema)]
+pub struct NodeToRemove {
+    owner: String,
+    proxy: Option<String>,
+}
+
+impl NodeToRemove {
+    pub fn owner(&self) -> &str {
+        &self.owner
+    }
+
+    pub fn proxy(&self) -> Option<&String> {
+        self.proxy.as_ref()
+    }
+}

common/cosmwasm-smart-contracts/vesting-contract/src/messages.rs

@@ -12,7 +12,9 @@ pub struct InitMsg {
 
 #[derive(Serialize, Deserialize, Clone, Debug, PartialEq, Eq, JsonSchema)]
 #[serde(rename_all = "snake_case")]
-pub struct MigrateMsg {}
+pub struct MigrateMsg {
+    pub mix_denom: String,
+}
 
 #[derive(Serialize, Deserialize, Clone, Debug, PartialEq, Eq, JsonSchema, Default)]
 pub struct VestingSpecification {

common/statistics/src/lib.rs

@@ -34,12 +34,16 @@ pub enum StatsData {
 
 #[derive(Clone, Debug, Deserialize, Serialize)]
 pub struct StatsGatewayData {
+    pub gateway_id: String,
     pub inbox_count: u32,
 }
 
 impl StatsGatewayData {
-    pub fn new(inbox_count: u32) -> Self {
-        StatsGatewayData { inbox_count }
+    pub fn new(gateway_id: String, inbox_count: u32) -> Self {
+        StatsGatewayData {
+            gateway_id,
+            inbox_count,
+        }
     }
 }
 

common/types/src/currency.rs

@@ -507,7 +507,7 @@ mod test {
 
         for (expected, raw_display) in values {
             let coin = DecCoin {
-                denom: Network::MAINNET.mix_denom().display.into(),
+                denom: Network::MAINNET.mix_denom().display,
                 amount: raw_display.parse().unwrap(),
             };
             let base = reg.attempt_convert_to_base_coin(coin).unwrap();

contracts/Cargo.lock

@@ -1392,18 +1392,18 @@ dependencies = [
 
 [[package]]
 name = "regex"
-version = "1.5.4"
+version = "1.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d07a8629359eb56f1e2fb1652bb04212c072a87ba68546a04065d525673ac461"
+checksum = "4c4eb3267174b8c6c2f654116623910a0fef09c4753f8dd83db29c48a0df988b"
 dependencies = [
  "regex-syntax",
 ]
 
 [[package]]
 name = "regex-syntax"
-version = "0.6.25"
+version = "0.6.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f497285884f3fcff424ffc933e56d7cbca511def0c9831a7f9b5f6153e3cc89b"
+checksum = "a3f87b73ce11b1619a3c6332f45341e0047173771e8b8b73f87bfeefb7b56244"
 
 [[package]]
 name = "rfc6979"

contracts/mixnet/src/contract.rs

@@ -27,16 +27,18 @@ use crate::mixnodes::bonding_queries::{
     query_checkpoints_for_mixnode, query_mixnode_at_height, query_mixnodes_paged,
 };
 use crate::mixnodes::layer_queries::query_layer_distribution;
+use crate::mixnodes::transactions::_try_remove_mixnode;
+use crate::queued_migrations::migrate_config_from_env;
 use crate::rewards::queries::{
     query_circulating_supply, query_reward_pool, query_rewarding_status, query_staking_supply,
 };
 use crate::rewards::storage as rewards_storage;
 use cosmwasm_std::{
     entry_point, to_binary, Addr, Api, Deps, DepsMut, Env, MessageInfo, QueryResponse, Response,
-    Uint128,
+    Storage, Uint128,
 };
 use mixnet_contract_common::{
-    ContractStateParams, ExecuteMsg, InstantiateMsg, MigrateMsg, QueryMsg,
+    ContractStateParams, ExecuteMsg, InstantiateMsg, MigrateMsg, NodeToRemove, QueryMsg,
 };
 use time::OffsetDateTime;
 
@@ -112,6 +114,19 @@ pub fn execute(
     msg: ExecuteMsg,
 ) -> Result<Response, ContractError> {
     match msg {
+        ExecuteMsg::CompoundReward {
+            operator,
+            delegator,
+            mix_identity,
+            proxy,
+        } => crate::rewards::transactions::try_compound_reward(
+            deps,
+            env,
+            operator,
+            delegator,
+            mix_identity,
+            proxy,
+        ),
         ExecuteMsg::UpdateRewardingValidatorAddress { address } => {
             try_update_rewarding_validator_address(deps, info, address)
         }
@@ -127,7 +142,7 @@ pub fn execute(
             owner_signature,
         ),
         ExecuteMsg::UnbondMixnode {} => {
-            crate::mixnodes::transactions::try_remove_mixnode(env, deps, info)
+            crate::mixnodes::transactions::try_remove_mixnode(&env, deps.storage, deps.api, info)
         }
         ExecuteMsg::UpdateMixnodeConfig {
             profit_margin_percent,
@@ -221,7 +236,13 @@ pub fn execute(
             owner_signature,
         ),
         ExecuteMsg::UnbondMixnodeOnBehalf { owner } => {
-            crate::mixnodes::transactions::try_remove_mixnode_on_behalf(env, deps, info, owner)
+            crate::mixnodes::transactions::try_remove_mixnode_on_behalf(
+                &env,
+                deps.storage,
+                deps.api,
+                info,
+                owner,
+            )
         }
         ExecuteMsg::BondGatewayOnBehalf {
             gateway,
@@ -280,7 +301,7 @@ pub fn execute(
             )
         }
         ExecuteMsg::ReconcileDelegations {} => {
-            crate::delegations::transactions::try_reconcile_all_delegation_events(deps, info)
+            crate::delegations::transactions::try_reconcile_all_delegation_events(deps)
         }
         ExecuteMsg::CheckpointMixnodes {} => {
             crate::mixnodes::transactions::try_checkpoint_mixnodes(
@@ -321,6 +342,9 @@ pub fn execute(
 #[entry_point]
 pub fn query(deps: Deps<'_>, env: Env, msg: QueryMsg) -> Result<QueryResponse, ContractError> {
     let query_res = match msg {
+        QueryMsg::GetBlacklistedNodes {} => to_binary(
+            &crate::mixnodes::bonding_queries::get_blacklisted_nodes(deps),
+        ),
         QueryMsg::GetRewardingValidatorAddress {} => {
             to_binary(&query_rewarding_validator_address(deps)?)
         }
@@ -448,9 +472,54 @@ pub fn query(deps: Deps<'_>, env: Env, msg: QueryMsg) -> Result<QueryResponse, C
     Ok(query_res?)
 }
 
+fn blacklist_malicious_node(storage: &mut dyn Storage, owner: &Addr) -> Result<(), ContractError> {
+    let mixnode_bond = match crate::mixnodes::storage::mixnodes()
+        .idx
+        .owner
+        .item(storage, owner.clone())?
+    {
+        Some(record) => record.1,
+        None => {
+            return Err(ContractError::NoAssociatedMixNodeBond {
+                owner: owner.to_owned(),
+            })
+        }
+    };
+
+    crate::mixnodes::storage::MIXNODES_BOND_BLACKLIST.save(storage, mixnode_bond.identity(), &0)?;
+
+    Ok(())
+}
+
+// Removes nodes we've deemed malicious, returns the pledge to the owners, but does not send any rewards
+fn remove_malicious_node(
+    storage: &mut dyn Storage,
+    api: &dyn Api,
+    env: &Env,
+    node: &NodeToRemove,
+) -> Result<Response, ContractError> {
+    let proxy = node.proxy().map(|p| {
+        api.addr_validate(p)
+            .unwrap_or_else(|_| panic!("Invalid address: {}", p))
+    });
+    let owner_addr = api.addr_validate(node.owner())?;
+    blacklist_malicious_node(storage, &owner_addr)?;
+    _try_remove_mixnode(env, storage, api, node.owner(), proxy, false)
+}
+
 #[entry_point]
-pub fn migrate(_deps: DepsMut<'_>, _env: Env, _msg: MigrateMsg) -> Result<Response, ContractError> {
-    Ok(Default::default())
+pub fn migrate(deps: DepsMut<'_>, env: Env, msg: MigrateMsg) -> Result<Response, ContractError> {
+    migrate_config_from_env(deps.storage, &msg)?;
+    let mut response = Response::new();
+    for node in msg.nodes_to_remove().iter() {
+        let mut sub_response = remove_malicious_node(deps.storage, deps.api, &env, node)
+            .unwrap_or_else(|_| panic!("Could not remove node: {:?}", node));
+        response.messages.append(&mut sub_response.messages);
+        response.attributes.append(&mut sub_response.attributes);
+        response.events.append(&mut sub_response.events);
+    }
+
+    Ok(response)
 }
 
 #[cfg(test)]

contracts/mixnet/src/delegations/transactions.rs

@@ -19,16 +19,7 @@ use mixnet_contract_common::{Delegation, IdentityKey};
 use vesting_contract_common::messages::ExecuteMsg as VestingContractExecuteMsg;
 use vesting_contract_common::one_ucoin;
 
-pub fn try_reconcile_all_delegation_events(
-    deps: DepsMut<'_>,
-    info: MessageInfo,
-) -> Result<Response, ContractError> {
-    let state = mixnet_params_storage::CONTRACT_STATE.load(deps.storage)?;
-    // check if this is executed by the permitted validator, if not reject the transaction
-    if info.sender != state.rewarding_validator_address {
-        return Err(ContractError::Unauthorized);
-    }
-
+pub fn try_reconcile_all_delegation_events(deps: DepsMut<'_>) -> Result<Response, ContractError> {
     _try_reconcile_all_delegation_events(deps.storage, deps.api)
 }
 
@@ -630,7 +621,14 @@ mod tests {
                 deps.as_mut(),
             );
             let delegation_owner = Addr::unchecked("sender");
-            try_remove_mixnode(mock_env(), deps.as_mut(), mock_info(mixnode_owner, &[])).unwrap();
+            let api = deps.api.clone();
+            try_remove_mixnode(
+                &mock_env(),
+                deps.as_mut().storage,
+                &api,
+                mock_info(mixnode_owner, &[]),
+            )
+            .unwrap();
             assert_eq!(
                 Err(ContractError::MixNodeBondNotFound {
                     identity: identity.clone()
@@ -653,7 +651,14 @@ mod tests {
                 tests::fixtures::good_mixnode_pledge(),
                 deps.as_mut(),
             );
-            try_remove_mixnode(mock_env(), deps.as_mut(), mock_info(mixnode_owner, &[])).unwrap();
+            let api = deps.api.clone();
+            try_remove_mixnode(
+                &mock_env(),
+                deps.as_mut().storage,
+                &api,
+                mock_info(mixnode_owner, &[]),
+            )
+            .unwrap();
             let identity = test_helpers::add_mixnode(
                 mixnode_owner,
                 tests::fixtures::good_mixnode_pledge(),
@@ -917,7 +922,14 @@ mod tests {
                 identity.clone(),
             )
             .unwrap();
-            try_remove_mixnode(mock_env(), deps.as_mut(), mock_info(mixnode_owner, &[])).unwrap();
+            let api = deps.api.clone();
+            try_remove_mixnode(
+                &mock_env(),
+                deps.as_mut().storage,
+                &api,
+                mock_info(mixnode_owner, &[]),
+            )
+            .unwrap();
             assert_eq!(
                 Err(ContractError::MixNodeBondNotFound {
                     identity: identity.clone()
@@ -1058,8 +1070,14 @@ mod tests {
             .unwrap();
 
             _try_reconcile_all_delegation_events(&mut deps.storage, &deps.api).unwrap();
-
-            try_remove_mixnode(mock_env(), deps.as_mut(), mock_info(mixnode_owner, &[])).unwrap();
+            let api = deps.api.clone();
+            try_remove_mixnode(
+                &mock_env(),
+                deps.as_mut().storage,
+                &api,
+                mock_info(mixnode_owner, &[]),
+            )
+            .unwrap();
 
             let expected = Delegation::new(
                 delegation_owner.clone(),
@@ -1084,179 +1102,13 @@ mod tests {
 
     #[cfg(test)]
     mod removing_mix_stake_delegation {
+        use super::*;
+        use crate::support::tests;
         use cosmwasm_std::coin;
         use cosmwasm_std::testing::mock_env;
         use cosmwasm_std::testing::mock_info;
         use cosmwasm_std::Addr;
 
-        use crate::support::tests;
-
-        use super::*;
-
-        // TODO: Probably delete due to reconciliation logic
-        //#[ignore]
-        //#[test]
-        //fn fails_if_delegation_never_existed() {
-        //    let mut deps = test_helpers::init_contract();
-        //    let env = mock_env();
-        //    let mixnode_owner = "bob";
-        //    let identity = test_helpers::add_mixnode(
-        //        mixnode_owner,
-        //        tests::fixtures::good_mixnode_pledge(),
-        //        deps.as_mut(),
-        //    );
-        //    let delegation_owner = Addr::unchecked("sender");
-        //    assert_eq!(
-        //        Err(ContractError::NoMixnodeDelegationFound {
-        //            identity: identity.clone(),
-        //            address: delegation_owner.to_string(),
-        //        }),
-        //        try_remove_delegation_from_mixnode(
-        //            deps.as_mut(),
-        //            env,
-        //            mock_info(delegation_owner.as_str(), &[]),
-        //            identity,
-        //        )
-        //    );
-        //}
-
-        // TODO: Update to work with reconciliation
-        //#[ignore]
-        //#[test]
-        //fn succeeds_if_delegation_existed() {
-        //    let mut deps = test_helpers::init_contract();
-        //    let mixnode_owner = "bob";
-        //    let env = mock_env();
-        //    let identity = test_helpers::add_mixnode(
-        //        mixnode_owner,
-        //        tests::fixtures::good_mixnode_pledge(),
-        //        deps.as_mut(),
-        //    );
-        //    let delegation_owner = Addr::unchecked("sender");
-        //    try_delegate_to_mixnode(
-        //        deps.as_mut(),
-        //        mock_env(),
-        //        mock_info(delegation_owner.as_str(), &coins(100, TEST_COIN_DENOM)),
-        //        identity.clone(),
-        //    )
-        //    .unwrap();
-
-        //    _try_reconcile_all_delegation_events(&mut deps.storage, &deps.api).unwrap();
-
-        //    let _delegation = query_mixnode_delegation(
-        //        &deps.storage,
-        //        &deps.api,
-        //        identity.clone(),
-        //        delegation_owner.clone().into_string(),
-        //        None,
-        //    )
-        //    .unwrap();
-
-        //    let expected_response = Response::new()
-        //        .add_message(BankMsg::Send {
-        //            to_address: delegation_owner.clone().into(),
-        //            amount: coins(100, TEST_COIN_DENOM),
-        //        })
-        //        .add_event(new_undelegation_event(
-        //            &delegation_owner,
-        //            &None,
-        //            &identity,
-        //            Uint128::new(100),
-        //        ));
-
-        //    assert_eq!(
-        //        Ok(expected_response),
-        //        try_remove_delegation_from_mixnode(
-        //            deps.as_mut(),
-        //            env,
-        //            mock_info(delegation_owner.as_str(), &[]),
-        //            identity.clone(),
-        //        )
-        //    );
-        //    assert!(storage::delegations()
-        //        .may_load(
-        //            &deps.storage,
-        //            (identity.clone(), delegation_owner.as_bytes().to_vec(), 0),
-        //        )
-        //        .unwrap()
-        //        .is_none());
-
-        //    // and total delegation is cleared
-        //    assert_eq!(
-        //        Uint128::zero(),
-        //        mixnodes_storage::TOTAL_DELEGATION
-        //            .load(&deps.storage, &identity)
-        //            .unwrap()
-        //    )
-        //}
-
-        // TODO: Update to work with reconciliation
-        //#[ignore]
-        //#[test]
-        //fn succeeds_if_delegation_existed_even_if_node_unbonded() {
-        //    let mut deps = test_helpers::init_contract();
-        //    let mixnode_owner = "bob";
-        //    let env = mock_env();
-        //    let identity = test_helpers::add_mixnode(
-        //        mixnode_owner,
-        //        tests::fixtures::good_mixnode_pledge(),
-        //        deps.as_mut(),
-        //    );
-        //    let delegation_owner = Addr::unchecked("sender");
-        //    try_delegate_to_mixnode(
-        //        deps.as_mut(),
-        //        mock_env(),
-        //        mock_info(delegation_owner.as_str(), &coins(100, TEST_COIN_DENOM)),
-        //        identity.clone(),
-        //    )
-        //    .unwrap();
-
-        //    _try_reconcile_all_delegation_events(&mut deps.storage, &deps.api).unwrap();
-
-        //    let _delegation = query_mixnode_delegation(
-        //        &deps.storage,
-        //        &deps.api,
-        //        identity.clone(),
-        //        delegation_owner.clone().into_string(),
-        //        None,
-        //    )
-        //    .unwrap();
-
-        //    let expected_response = Response::new()
-        //        .add_message(BankMsg::Send {
-        //            to_address: delegation_owner.clone().into(),
-        //            amount: coins(100, TEST_COIN_DENOM),
-        //        })
-        //        .add_event(new_undelegation_event(
-        //            &delegation_owner,
-        //            &None,
-        //            &identity,
-        //            Uint128::new(100),
-        //        ));
-
-        //    try_remove_mixnode(mock_env(), deps.as_mut(), mock_info(mixnode_owner, &[])).unwrap();
-
-        //    assert_eq!(
-        //        Ok(expected_response),
-        //        try_remove_delegation_from_mixnode(
-        //            deps.as_mut(),
-        //            env,
-        //            mock_info(delegation_owner.as_str(), &[]),
-        //            identity.clone(),
-        //        )
-        //    );
-
-        //    _try_reconcile_all_delegation_events(&mut deps.storage, &deps.api).unwrap();
-
-        //    assert!(test_helpers::read_delegation(
-        //        &deps.storage,
-        //        identity,
-        //        delegation_owner.as_bytes(),
-        //        mock_env().block.height
-        //    )
-        //    .is_none());
-        //}
-
         #[test]
         fn total_delegation_is_preserved_if_only_some_undelegate() {
             let mut deps = test_helpers::init_contract();

contracts/mixnet/src/error.rs

@@ -178,4 +178,11 @@ pub enum ContractError {
         last_update_time: u64,
         current_block_time: u64,
     },
+    #[error("`mix_identity` is required when `delegator` is set")]
+    MissingMixIdentity,
+    #[error("Compounding has been disabled temporarily")]
+    CompoundDisabled,
+
+    #[error("Mixnode {identity} has been blacklisted on the network")]
+    MixnodeBlacklisted { identity: String },
 }

contracts/mixnet/src/lib.rs

@@ -9,5 +9,6 @@ mod gateways;
 mod interval;
 mod mixnet_contract_settings;
 mod mixnodes;
+mod queued_migrations;
 mod rewards;
 mod support;

contracts/mixnet/src/mixnodes/bonding_queries.rs

@@ -8,6 +8,13 @@ use mixnet_contract_common::{
     IdentityKey, MixNodeBond, MixOwnershipResponse, MixnodeBondResponse, PagedMixnodeResponse,
 };
 
+pub fn get_blacklisted_nodes(deps: Deps<'_>) -> Vec<IdentityKey> {
+    storage::MIXNODES_BOND_BLACKLIST
+        .keys(deps.storage, None, None, Order::Ascending)
+        .filter_map(|i| i.ok())
+        .collect()
+}
+
 pub fn query_mixnode_at_height(
     deps: Deps<'_>,
     mix_identity: String,
@@ -252,10 +259,13 @@ pub(crate) mod tests {
         let res = query_owns_mixnode(deps.as_ref(), "fred".to_string()).unwrap();
         assert!(res.mixnode.is_some());
 
+        let api = deps.api.clone();
+
         // but after unbonding it, he doesn't own one anymore
         crate::mixnodes::transactions::try_remove_mixnode(
-            env,
-            deps.as_mut(),
+            &env,
+            deps.as_mut().storage,
+            &api,
             mock_info("fred", &[]),
         )
         .unwrap();

contracts/mixnet/src/mixnodes/storage.rs

@@ -19,6 +19,7 @@ const MIXNODES_PK_CHECKPOINTS: &str = "mn__check";
 const MIXNODES_PK_CHANGELOG: &str = "mn__change";
 const MIXNODES_OWNER_IDX_NAMESPACE: &str = "mno";
 const MIXNODES_SPHINX_IDX_NAMESPACE: &str = "mns";
+const MIXNODES_BOND_BLACKLIST_NAMESPACE: &str = "mbb";
 
 const LAST_PM_UPDATE_NAMESPACE: &str = "lpm";
 
@@ -32,6 +33,9 @@ pub(crate) const TOTAL_DELEGATION: Map<'_, IdentityKeyRef<'_>, Uint128> =
 pub(crate) const LAST_PM_UPDATE_TIME: Map<'_, IdentityKeyRef<'_>, u64> =
     Map::new(LAST_PM_UPDATE_NAMESPACE);
 
+pub(crate) const MIXNODES_BOND_BLACKLIST: Map<'_, IdentityKeyRef<'_>, u8> =
+    Map::new(MIXNODES_BOND_BLACKLIST_NAMESPACE);
+
 pub(crate) struct MixnodeBondIndex<'a> {
     pub(crate) owner: UniqueIndex<'a, Addr, StoredMixnodeBond>,
 

contracts/mixnet/src/mixnodes/transactions.rs

@@ -8,12 +8,12 @@ use crate::mixnodes::layer_queries::query_layer_distribution;
 use crate::mixnodes::storage::StoredMixnodeBond;
 use crate::support::helpers::{ensure_no_existing_bond, validate_node_identity_signature};
 use cosmwasm_std::{
-    wasm_execute, Addr, BankMsg, Coin, DepsMut, Env, MessageInfo, Response, Storage, Uint128,
+    wasm_execute, Addr, Api, BankMsg, Coin, DepsMut, Env, MessageInfo, Response, Storage, Uint128,
 };
 use mixnet_contract_common::events::{
     new_checkpoint_mixnodes_event, new_mixnode_bonding_event, new_mixnode_unbonding_event,
 };
-use mixnet_contract_common::MixNode;
+use mixnet_contract_common::{IdentityKeyRef, MixNode};
 use vesting_contract_common::messages::ExecuteMsg as VestingContractExecuteMsg;
 use vesting_contract_common::one_ucoin;
 
@@ -87,6 +87,15 @@ pub fn try_add_mixnode_on_behalf(
     )
 }
 
+pub fn is_blacklisted(
+    storage: &dyn Storage,
+    identity: IdentityKeyRef,
+) -> Result<bool, ContractError> {
+    Ok(storage::MIXNODES_BOND_BLACKLIST
+        .may_load(storage, identity)?
+        .is_some())
+}
+
 fn _try_add_mixnode(
     deps: DepsMut<'_>,
     env: Env,
@@ -100,6 +109,12 @@ fn _try_add_mixnode(
     // if the client has an active bonded mixnode or gateway, don't allow bonding
     ensure_no_existing_bond(deps.storage, &owner)?;
 
+    if is_blacklisted(deps.storage, &mix_node.identity_key)? {
+        return Err(ContractError::MixnodeBlacklisted {
+            identity: mix_node.identity_key,
+        });
+    };
+
     // We don't have to check lower bound as its an u8
     if mix_node.profit_margin_percent > 100 {
         return Err(ContractError::InvalidProfitMarginPercent(
@@ -167,45 +182,47 @@ fn _try_add_mixnode(
 }
 
 pub fn try_remove_mixnode_on_behalf(
-    env: Env,
-    deps: DepsMut<'_>,
+    env: &Env,
+    storage: &mut dyn Storage,
+    api: &dyn Api,
     info: MessageInfo,
     owner: String,
 ) -> Result<Response, ContractError> {
     let proxy = info.sender;
-    _try_remove_mixnode(env, deps, &owner, Some(proxy))
+    _try_remove_mixnode(env, storage, api, &owner, Some(proxy), true)
 }
 
 pub fn try_remove_mixnode(
-    env: Env,
-    deps: DepsMut<'_>,
+    env: &Env,
+    storage: &mut dyn Storage,
+    api: &dyn Api,
     info: MessageInfo,
 ) -> Result<Response, ContractError> {
-    _try_remove_mixnode(env, deps, info.sender.as_ref(), None)
+    _try_remove_mixnode(env, storage, api, info.sender.as_ref(), None, true)
 }
 
 pub(crate) fn _try_remove_mixnode(
-    env: Env,
-    deps: DepsMut<'_>,
+    env: &Env,
+    storage: &mut dyn Storage,
+    api: &dyn Api,
     owner: &str,
     proxy: Option<Addr>,
+    collect_rewards: bool,
 ) -> Result<Response, ContractError> {
-    let owner = deps.api.addr_validate(owner)?;
+    let owner = api.addr_validate(owner)?;
 
-    crate::rewards::transactions::_try_compound_operator_reward(
-        deps.storage,
-        deps.api,
-        env.block.height,
-        &owner,
-        None,
-    )?;
+    if collect_rewards {
+        crate::rewards::transactions::_try_compound_operator_reward(
+            storage,
+            api,
+            env.block.height,
+            &owner,
+            None,
+        )?;
+    }
 
     // try to find the node of the sender
-    let mixnode_bond = match storage::mixnodes()
-        .idx
-        .owner
-        .item(deps.storage, owner.clone())?
-    {
+    let mixnode_bond = match storage::mixnodes().idx.owner.item(storage, owner.clone())? {
         Some(record) => record.1,
         None => return Err(ContractError::NoAssociatedMixNodeBond { owner }),
     };
@@ -225,10 +242,10 @@ pub(crate) fn _try_remove_mixnode(
     };
 
     // remove the bond
-    storage::mixnodes().remove(deps.storage, mixnode_bond.identity(), env.block.height)?;
+    storage::mixnodes().remove(storage, mixnode_bond.identity(), env.block.height)?;
 
     // decrement layer count
-    mixnet_params_storage::decrement_layer_count(deps.storage, mixnode_bond.layer)?;
+    mixnet_params_storage::decrement_layer_count(storage, mixnode_bond.layer)?;
 
     let mut response = Response::new();
 
@@ -238,8 +255,7 @@ pub(crate) fn _try_remove_mixnode(
             amount: mixnode_bond.pledge_amount(),
         };
 
-        let track_unbond_message =
-            wasm_execute(proxy, &msg, vec![one_ucoin(mix_denom(deps.storage)?)])?;
+        let track_unbond_message = wasm_execute(proxy, &msg, vec![one_ucoin(mix_denom(storage)?)])?;
         response = response.add_message(track_unbond_message);
     }
 

contracts/mixnet/src/queued_migrations.rs

@@ -0,0 +1,38 @@
+// Copyright 2022 - Nym Technologies SA <contact@nymtech.net>
+// SPDX-License-Identifier: Apache-2.0
+
+use cosmwasm_std::{Addr, Response, Storage};
+use cw_storage_plus::Item;
+use mixnet_contract_common::{ContractStateParams, MigrateMsg};
+use schemars::JsonSchema;
+use serde::{Deserialize, Serialize};
+
+use crate::error::ContractError;
+use crate::mixnet_contract_settings::models::ContractState;
+use crate::mixnet_contract_settings::storage::CONTRACT_STATE;
+
+pub fn migrate_config_from_env(
+    storage: &mut dyn Storage,
+    msg: &MigrateMsg,
+) -> Result<Response, ContractError> {
+    #[derive(Serialize, Deserialize, Clone, Debug, PartialEq, Eq, JsonSchema)]
+    pub struct OldContractState {
+        pub owner: Addr,
+        pub mix_denom: String,
+        pub rewarding_validator_address: Addr,
+        pub params: ContractStateParams,
+    }
+    const OLD_CONTRACT_STATE: Item<'_, OldContractState> = Item::new("config");
+
+    let old_state = OLD_CONTRACT_STATE.load(storage)?;
+    let new_state = ContractState {
+        owner: old_state.owner,
+        mix_denom: msg.mixnet_denom.clone(),
+        rewarding_validator_address: old_state.rewarding_validator_address,
+        params: old_state.params,
+    };
+
+    CONTRACT_STATE.save(storage, &new_state)?;
+
+    Ok(Default::default())
+}

contracts/mixnet/src/rewards/transactions.rs

@@ -13,6 +13,7 @@ use crate::error::ContractError;
 use crate::mixnet_contract_settings::storage::mix_denom;
 use crate::mixnodes::storage::mixnodes;
 use crate::mixnodes::storage::{self as mixnodes_storage, StoredMixnodeBond};
+use crate::mixnodes::transactions::is_blacklisted;
 use crate::rewards::helpers;
 use crate::support::helpers::{is_authorized, operator_cost_at_epoch};
 use cosmwasm_std::{
@@ -372,6 +373,56 @@ pub fn try_compound_delegator_reward_on_behalf(
     )
 }
 
+pub fn try_compound_reward(
+    deps: DepsMut<'_>,
+    env: Env,
+    operator: Option<String>,
+    delegator: Option<String>,
+    mix_identity: Option<IdentityKey>,
+    proxy: Option<String>,
+) -> Result<Response, ContractError> {
+    let proxy = proxy.and_then(|p| deps.api.addr_validate(&p).ok());
+    if let Some(operator_address) = operator {
+        let operator_address = deps.api.addr_validate(&operator_address)?;
+        let reward = _try_compound_operator_reward(
+            deps.storage,
+            deps.api,
+            env.block.height,
+            &operator_address,
+            proxy,
+        )?;
+        Ok(
+            Response::default().add_event(new_compound_operator_reward_event(
+                &operator_address,
+                reward,
+            )),
+        )
+    } else if let Some(delegator_address) = delegator {
+        if mix_identity.is_none() {
+            return Err(ContractError::MissingMixIdentity);
+        }
+
+        let delegator_address = deps.api.addr_validate(&delegator_address)?;
+        let reward = _try_compound_delegator_reward(
+            env.block.height,
+            deps,
+            delegator_address.as_str(),
+            mix_identity.as_ref().unwrap(),
+            proxy,
+        )?;
+        Ok(
+            Response::default().add_event(new_compound_delegator_reward_event(
+                &delegator_address,
+                &None,
+                reward,
+                &mix_identity.unwrap(),
+            )),
+        )
+    } else {
+        Ok(Response::default())
+    }
+}
+
 pub fn try_compound_delegator_reward(
     deps: DepsMut<'_>,
     env: Env,
@@ -412,7 +463,7 @@ pub fn _try_compound_delegator_reward(
         proxy.as_ref(),
     );
     let reward = calculate_delegator_reward(deps.storage, deps.api, key.clone(), mix_identity)?;
-    let mut compounded_delegation = reward;
+    let mut total_delegation_delegate = Uint128::zero();
 
     // Might want to introduce paging here
     let delegation_heights = delegation_map
@@ -424,7 +475,7 @@ pub fn _try_compound_delegator_reward(
     for h in delegation_heights {
         let delegation =
             delegation_map.load(deps.storage, (mix_identity.to_string(), key.clone(), h))?;
-        compounded_delegation += delegation.amount.amount;
+        total_delegation_delegate += delegation.amount.amount;
         delegation_map.replace(
             deps.storage,
             (mix_identity.to_string(), key.clone(), h),
@@ -433,7 +484,22 @@ pub fn _try_compound_delegator_reward(
         )?;
     }
 
+    let compounded_delegation = total_delegation_delegate + reward;
+
     if compounded_delegation != Uint128::zero() {
+        mixnodes_storage::TOTAL_DELEGATION.update::<_, ContractError>(
+            deps.storage,
+            mix_identity,
+            |total_delegation| {
+                // since we know that the target node exists and because the total_delegation bucket
+                // entry is created whenever the node itself is added, the unwrap here is fine
+                // as the entry MUST exist
+                Ok(total_delegation
+                    .unwrap()
+                    .saturating_sub(total_delegation_delegate))
+            },
+        )?;
+
         _try_delegate_to_mixnode(
             deps.branch(),
             block_height,
@@ -472,6 +538,10 @@ pub fn calculate_delegator_reward(
     key: Vec<u8>,
     mix_identity: &str,
 ) -> Result<Uint128, ContractError> {
+    if is_blacklisted(storage, mix_identity)? {
+        return Ok(Uint128::zero());
+    };
+
     let last_claimed_height = storage::DELEGATOR_REWARD_CLAIMED_HEIGHT
         .load(storage, (key.clone(), mix_identity.to_string()))
         .unwrap_or(0);

contracts/vesting/src/contract.rs

@@ -1,4 +1,5 @@
 use crate::errors::ContractError;
+use crate::queued_migrations::migrate_config_from_env;
 use crate::storage::{
     account_from_address, locked_pledge_cap, update_locked_pledge_cap, ADMIN,
     MIXNET_CONTRACT_ADDRESS, MIX_DENOM,
@@ -41,6 +42,7 @@ pub fn instantiate(
 
 #[entry_point]
 pub fn migrate(_deps: DepsMut<'_>, _env: Env, _msg: MigrateMsg) -> Result<Response, ContractError> {
+    migrate_config_from_env(_deps, _env, _msg)?;
     Ok(Response::default())
 }
 

contracts/vesting/src/lib.rs

@@ -1,5 +1,6 @@
 pub mod contract;
 mod errors;
+mod queued_migrations;
 mod storage;
 mod support;
 mod traits;

contracts/vesting/src/queued_migrations.rs

@@ -0,0 +1,17 @@
+// Copyright 2022 - Nym Technologies SA <contact@nymtech.net>
+// SPDX-License-Identifier: Apache-2.0
+
+use cosmwasm_std::{DepsMut, Env, Response};
+use vesting_contract_common::MigrateMsg;
+
+use crate::{errors::ContractError, storage::MIX_DENOM};
+
+pub fn migrate_config_from_env(
+    deps: DepsMut<'_>,
+    _env: Env,
+    msg: MigrateMsg,
+) -> Result<Response, ContractError> {
+    MIX_DENOM.save(deps.storage, &msg.mix_denom)?;
+
+    Ok(Default::default())
+}

explorer-api/Cargo.toml

@@ -26,4 +26,5 @@ tokio = {version = "1.19.1", features = ["full"] }
 
 mixnet-contract-common = { path = "../common/cosmwasm-smart-contracts/mixnet-contract" }
 network-defaults = { path = "../common/network-defaults" }
+task = { path = "../common/task" }
 validator-client = { path = "../common/client-libs/validator-client", features=["nymd-client"] }

explorer-api/src/country_statistics/distribution.rs

@@ -1,4 +1,5 @@
 use log::info;
+use task::ShutdownListener;
 
 use crate::country_statistics::country_nodes_distribution::CountryNodesDistribution;
 use crate::COUNTRY_DATA_REFRESH_INTERVAL;
@@ -7,11 +8,12 @@ use crate::state::ExplorerApiStateContext;
 
 pub(crate) struct CountryStatisticsDistributionTask {
     state: ExplorerApiStateContext,
+    shutdown: ShutdownListener,
 }
 
 impl CountryStatisticsDistributionTask {
-    pub(crate) fn new(state: ExplorerApiStateContext) -> Self {
-        CountryStatisticsDistributionTask { state }
+    pub(crate) fn new(state: ExplorerApiStateContext, shutdown: ShutdownListener) -> Self {
+        CountryStatisticsDistributionTask { state, shutdown }
     }
 
     pub(crate) fn start(mut self) {
@@ -20,10 +22,15 @@ impl CountryStatisticsDistributionTask {
             let mut interval_timer = tokio::time::interval(std::time::Duration::from_secs(
                 COUNTRY_DATA_REFRESH_INTERVAL,
             ));
-            loop {
-                // wait for the next interval tick
-                interval_timer.tick().await;
-                self.calculate_nodes_per_country().await;
+            while !self.shutdown.is_shutdown() {
+                tokio::select! {
+                    _ = interval_timer.tick() => {
+                        self.calculate_nodes_per_country().await;
+                    }
+                    _ = self.shutdown.recv() => {
+                        trace!("Listener: Received shutdown");
+                    }
+                }
             }
         });
     }

explorer-api/src/country_statistics/geolocate.rs

@@ -5,15 +5,17 @@ use crate::mix_nodes::location::{GeoLocation, Location};
 use crate::state::ExplorerApiStateContext;
 use log::{info, warn};
 use reqwest::Error as ReqwestError;
+use task::ShutdownListener;
 use thiserror::Error;
 
 pub(crate) struct GeoLocateTask {
     state: ExplorerApiStateContext,
+    shutdown: ShutdownListener,
 }
 
 impl GeoLocateTask {
-    pub(crate) fn new(state: ExplorerApiStateContext) -> Self {
-        GeoLocateTask { state }
+    pub(crate) fn new(state: ExplorerApiStateContext, shutdown: ShutdownListener) -> Self {
+        GeoLocateTask { state, shutdown }
     }
 
     pub(crate) fn start(mut self) {
@@ -27,10 +29,15 @@ impl GeoLocateTask {
         info!("Spawning mix node locator task runner...");
         tokio::spawn(async move {
             let mut interval_timer = tokio::time::interval(std::time::Duration::from_millis(50));
-            loop {
-                // wait for the next interval tick
-                interval_timer.tick().await;
-                self.locate_mix_nodes().await;
+            while !self.shutdown.is_shutdown() {
+                tokio::select! {
+                    _ = interval_timer.tick() => {
+                        self.locate_mix_nodes().await;
+                    }
+                    _ = self.shutdown.recv() => {
+                        trace!("Listener: Received shutdown");
+                    }
+                }
             }
         });
     }

explorer-api/src/main.rs

@@ -6,6 +6,7 @@ extern crate rocket_okapi;
 use clap::Parser;
 use log::info;
 use network_defaults::setup_env;
+use task::ShutdownNotifier;
 
 pub(crate) mod cache;
 mod client;
@@ -50,29 +51,63 @@ impl ExplorerApi {
         let validator_api_url = self.state.inner.validator_client.api_endpoint();
         info!("Using validator API - {}", validator_api_url);
 
+        let shutdown = ShutdownNotifier::default();
+
         // spawn concurrent tasks
-        crate::tasks::ExplorerApiTasks::new(self.state.clone()).start();
+        crate::tasks::ExplorerApiTasks::new(self.state.clone(), shutdown.subscribe()).start();
         country_statistics::distribution::CountryStatisticsDistributionTask::new(
             self.state.clone(),
+            shutdown.subscribe(),
         )
         .start();
-        country_statistics::geolocate::GeoLocateTask::new(self.state.clone()).start();
+        country_statistics::geolocate::GeoLocateTask::new(self.state.clone(), shutdown.subscribe())
+            .start();
+
+        // Rocket handles shutdown on it's own, but its shutdown handling should be incorporated
+        // with that of the rest of the tasks.
+        // Currently it's runtime is forcefully terminated once the explorer-api exits.
         http::start(self.state.clone());
 
         // wait for user to press ctrl+C
-        self.wait_for_interrupt().await
+        self.wait_for_interrupt(shutdown).await
     }
 
-    async fn wait_for_interrupt(&self) {
-        if let Err(e) = tokio::signal::ctrl_c().await {
-            error!(
-                "There was an error while capturing SIGINT - {:?}. We will terminate regardless",
-                e
-            );
+    async fn wait_for_interrupt(&self, mut shutdown: ShutdownNotifier) {
+        wait_for_signal().await;
+
+        log::info!("Sending shutdown");
+        shutdown.signal_shutdown().ok();
+        log::info!("Waiting for tasks to finish... (Press ctrl-c to force)");
+        shutdown.wait_for_shutdown().await;
+        log::info!("Stopping explorer API");
+    }
+}
+
+#[cfg(unix)]
+async fn wait_for_signal() {
+    use tokio::signal::unix::{signal, SignalKind};
+    let mut sigterm = signal(SignalKind::terminate()).expect("Failed to setup SIGTERM channel");
+    let mut sigquit = signal(SignalKind::quit()).expect("Failed to setup SIGQUIT channel");
+
+    tokio::select! {
+        _ = tokio::signal::ctrl_c() => {
+            log::info!("Received SIGINT");
+        },
+        _ = sigterm.recv() => {
+            log::info!("Received SIGTERM");
         }
-        info!(
-            "Received SIGINT - the mixnode will terminate now (threads are not yet nicely stopped, if you see stack traces that's alright)."
-        );
+        _ = sigquit.recv() => {
+            log::info!("Received SIGQUIT");
+        }
+    }
+}
+
+#[cfg(not(unix))]
+async fn wait_for_signal() {
+    tokio::select! {
+        _ = tokio::signal::ctrl_c() => {
+            log::info!("Received SIGINT");
+        },
     }
 }
 

explorer-api/src/tasks.rs

@@ -4,6 +4,7 @@
 use std::future::Future;
 
 use mixnet_contract_common::GatewayBond;
+use task::ShutdownListener;
 use validator_client::models::MixNodeBondAnnotated;
 use validator_client::nymd::error::NymdError;
 use validator_client::nymd::{Paging, QueryNymdClient, ValidatorResponse};
@@ -14,11 +15,12 @@ use crate::state::ExplorerApiStateContext;
 
 pub(crate) struct ExplorerApiTasks {
     state: ExplorerApiStateContext,
+    shutdown: ShutdownListener,
 }
 
 impl ExplorerApiTasks {
-    pub(crate) fn new(state: ExplorerApiStateContext) -> Self {
-        ExplorerApiTasks { state }
+    pub(crate) fn new(state: ExplorerApiStateContext, shutdown: ShutdownListener) -> Self {
+        ExplorerApiTasks { state, shutdown }
     }
 
     // a helper to remove duplicate code when grabbing active/rewarded/all mixnodes
@@ -128,24 +130,28 @@ impl ExplorerApiTasks {
         }
     }
 
-    pub(crate) fn start(self) {
+    pub(crate) fn start(mut self) {
         info!("Spawning mix nodes task runner...");
         tokio::spawn(async move {
             let mut interval_timer = tokio::time::interval(CACHE_REFRESH_RATE);
-            loop {
-                // wait for the next interval tick
-                interval_timer.tick().await;
+            while !self.shutdown.is_shutdown() {
+                tokio::select! {
+                    _ = interval_timer.tick() => {
+                        info!("Updating validator cache...");
+                        self.update_validators_cache().await;
+                        info!("Done");
 
-                info!("Updating validator cache...");
-                self.update_validators_cache().await;
-                info!("Done");
+                        info!("Updating gateway cache...");
+                        self.update_gateways_cache().await;
+                        info!("Done");
 
-                info!("Updating gateway cache...");
-                self.update_gateways_cache().await;
-                info!("Done");
-
-                info!("Updating mix node cache...");
-                self.update_mixnode_cache().await;
+                        info!("Updating mix node cache...");
+                        self.update_mixnode_cache().await;
+                    }
+                    _ = self.shutdown.recv() => {
+                        trace!("Listener: Received shutdown");
+                    }
+                }
             }
         });
     }

explorer/.env.prod

@@ -1,5 +1,6 @@
-EXPLORER_API_URL=https://sandbox-explorer.nymtech.net/api/v1
-VALIDATOR_API_URL=https://sandbox-validator.nymtech.net
-BIG_DIPPER_URL=https://sandbox-blocks.nymtech.net
-CURRENCY_DENOM=unymt
-CURRENCY_STAKING_DENOM=unyxt
+EXPLORER_API_URL=https://explorer.nymtech.net/api/v1
+VALIDATOR_API_URL=https://validator.nymtech.net
+VALIDATOR_URL=https://rpc.nyx.nodes.guru
+BIG_DIPPER_URL=https://blocks.nymtech.net
+CURRENCY_DENOM=unym
+CURRENCY_STAKING_DENOM=unyx

explorer/.env.qa

@@ -1,5 +1,6 @@
 EXPLORER_API_URL=https://qa-explorer.nymtech.net/api/v1
-VALIDATOR_API_URL=https://qa-validator.nymtech.net
+VALIDATOR_API_URL=https://qa-validator-api.nymtech.net
+VALIDATOR_URL=https://qa-validator.nymtech.net
 BIG_DIPPER_URL=https://qa-blocks.nymtech.net
 CURRENCY_DENOM=unymt
 CURRENCY_STAKING_DENOM=unyxt

explorer/src/api/constants.ts

@@ -1,6 +1,7 @@
 // master APIs
 export const API_BASE_URL = process.env.EXPLORER_API_URL;
 export const VALIDATOR_API_BASE_URL = process.env.VALIDATOR_API_URL;
+export const VALIDATOR_URL = process.env.VALIDATOR_URL;
 export const BIG_DIPPER = process.env.BIG_DIPPER_URL;
 
 // specific API routes
@@ -9,7 +10,7 @@ export const MIXNODE_PING = `${API_BASE_URL}/ping`;
 export const MIXNODES_API = `${API_BASE_URL}/mix-nodes`;
 export const MIXNODE_API = `${API_BASE_URL}/mix-node`;
 export const GATEWAYS_API = `${VALIDATOR_API_BASE_URL}/api/v1/gateways`;
-export const VALIDATORS_API = `${VALIDATOR_API_BASE_URL}/validators`;
+export const VALIDATORS_API = `${VALIDATOR_URL}/validators`;
 export const BLOCK_API = `${VALIDATOR_API_BASE_URL}/block`;
 export const COUNTRY_DATA_API = `${API_BASE_URL}/countries`;
 export const UPTIME_STORY_API = `${VALIDATOR_API_BASE_URL}/api/v1/status/mixnode`; // add ID then '/history' to this.

explorer/src/components/Filters/Filters.tsx

@@ -6,7 +6,6 @@ import {
   DialogContent,
   DialogActions,
   DialogTitle,
-  IconButton,
   Slider,
   Typography,
   Box,
@@ -25,6 +24,7 @@ import { useIsMobile } from '../../hooks/useIsMobile';
 const FilterItem = ({
   label,
   id,
+  tooltipInfo,
   value,
   marks,
   scale,
@@ -36,6 +36,7 @@ const FilterItem = ({
 }) => (
   <Box sx={{ p: 2 }}>
     <Typography gutterBottom>{label}</Typography>
+    <Typography fontSize={12}>{tooltipInfo}</Typography>
     <Slider
       value={value}
       onChange={(e: Event, newValue: number | number[]) => onChange(id, newValue as number[])}
@@ -50,7 +51,7 @@ const FilterItem = ({
 );
 
 export const Filters = () => {
-  const { filterMixnodes, fetchMixnodes } = useMainContext();
+  const { filterMixnodes, fetchMixnodes, mixnodes } = useMainContext();
   const { status } = useParams<{ status: MixnodeStatusWithAll | undefined }>();
   const isMobile = useIsMobile();
 
@@ -129,17 +130,23 @@ export const Filters = () => {
           variant={isMobile ? 'standard' : 'outlined'}
           action={
             <Button size="small" onClick={onClearFilters}>
-              Clear
+              CLEAR FILTERS
             </Button>
           }
-          sx={{ width: 300 }}
         >
-          Filters applied
+          {mixnodes?.data?.length} mixnodes matched your criteria
         </Alert>
       </Snackbar>
-      <IconButton size="large" onClick={handleToggleShowFilters}>
-        <Tune />
-      </IconButton>
+      <Button
+        size="large"
+        variant="text"
+        color="inherit"
+        endIcon={<Tune />}
+        onClick={handleToggleShowFilters}
+        sx={{ textTransform: 'none' }}
+      >
+        Advanced filters
+      </Button>
       <Dialog open={showFilters} onClose={handleToggleShowFilters} maxWidth="md" fullWidth>
         <DialogTitle>Mixnode filters</DialogTitle>
         <DialogContent dividers>

explorer/src/components/Filters/filterSchema.ts

@@ -18,6 +18,8 @@ export const generateFilterSchema = (upperSaturationValue?: number) => ({
       { label: '90', value: 90 },
       { label: '100', value: 100 },
     ],
+    tooltipInfo:
+      'As a delegator you want to chose nodes with lower profit margin, meaning more payout for their delegators',
   },
   stakeSaturation: {
     label: 'Stake saturation (%)',
@@ -43,65 +45,29 @@ export const generateFilterSchema = (upperSaturationValue?: number) => ({
       },
     ],
     max: upperSaturationValue,
+    tooltipInfo: "Select nodes with <100% saturation. Any additional stake above 100% saturation won't get rewards",
   },
-  stake: {
-    label: 'Stake (NYM)',
-    id: EnumFilterKey.stake,
-    value: [20, 90],
-    min: 20,
-    max: 90,
+  routingScore: {
+    label: 'Routing score (%)',
+    id: EnumFilterKey.routingScore,
+    value: [0, 100],
     marks: [
-      {
-        value: 0,
-        label: '1',
-      },
-      {
-        value: 10,
-        label: '10',
-      },
-      {
-        value: 20,
-        label: '100',
-      },
-      {
-        value: 30,
-        label: '1k',
-      },
-      {
-        value: 40,
-        label: '10k',
-      },
-      {
-        value: 50,
-        label: '100k',
-      },
-      {
-        value: 60,
-        label: '1M',
-      },
-      {
-        value: 70,
-        label: '10M',
-      },
-      {
-        value: 80,
-        label: '100M',
-      },
-      {
-        value: 90,
-        label: '1B',
-      },
+      { label: '0', value: 0 },
+      { label: '10', value: 10 },
+      { label: '20', value: 20 },
+      { label: '30', value: 30 },
+      { label: '40', value: 40 },
+      { label: '50', value: 50 },
+      { label: '60', value: 60 },
+      { label: '70', value: 70 },
+      { label: '80', value: 80 },
+      { label: '90', value: 90 },
+      { label: '100', value: 100 },
     ],
+    tooltipInfo: 'The higher the routing score the better the performance of the node and so its rewards',
   },
 });
 
-const formatStakeValuesToMinorDenom = ([value_1, value_2]: number[]) => {
-  const lowerValue = 10 ** (value_1 / 10) * 1_000_000;
-  const upperValue = 10 ** (value_2 / 10) * 1_000_000;
-
-  return [lowerValue, upperValue];
-};
-
 const formatStakeSaturationValues = ([value_1, value_2]: number[]) => {
   const lowerValue = value_1 / 100;
   const upperValue = value_2 / 100;
@@ -110,7 +76,7 @@ const formatStakeSaturationValues = ([value_1, value_2]: number[]) => {
 };
 
 export const formatOnSave = (filters: TFilters) => ({
-  stake: formatStakeValuesToMinorDenom(filters.stake.value),
+  routingScore: filters.routingScore.value,
   profitMargin: filters.profitMargin.value,
   stakeSaturation: formatStakeSaturationValues(filters.stakeSaturation.value),
 });

explorer/src/context/main.tsx

@@ -102,8 +102,8 @@ export const MainContextProvider: React.FC = ({ children }) => {
         m.mix_node.profit_margin_percent <= filters.profitMargin[1] &&
         m.stake_saturation >= filters.stakeSaturation[0] &&
         m.stake_saturation <= filters.stakeSaturation[1] &&
-        +m.pledge_amount.amount + +m.total_delegation.amount >= filters.stake[0] &&
-        +m.pledge_amount.amount + +m.total_delegation.amount <= filters.stake[1],
+        m.avg_uptime >= filters.routingScore[0] &&
+        m.avg_uptime <= filters.routingScore[1],
     );
     setMixnodes({ data: filtered, isLoading: false });
   };

explorer/src/typeDefs/filters.ts

@@ -4,7 +4,7 @@ import { Mark } from '@mui/base';
 export enum EnumFilterKey {
   profitMargin = 'profitMargin',
   stakeSaturation = 'stakeSaturation',
-  stake = 'stake',
+  routingScore = 'routingScore',
 }
 
 export type TFilterItem = {
@@ -15,6 +15,7 @@ export type TFilterItem = {
   min?: number;
   max?: number;
   scale?: (value: number) => number;
+  tooltipInfo?: string;
 };
 
 export type TFilters = { [key in EnumFilterKey]: TFilterItem };

gateway/Cargo.toml

@@ -3,7 +3,7 @@
 
 [package]
 name = "nym-gateway"
-version = "1.0.1"
+version = "1.0.2"
 authors = ["Dave Hrycyszyn <futurechimp@users.noreply.github.com>", "Jędrzej Stuczyński <andrew@nymtech.net>"]
 description = "Implementation of the Nym Mixnet Gateway"
 edition = "2021"

gateway/src/node/mod.rs

@@ -336,6 +336,7 @@ where
         if self.config.get_enabled_statistics() {
             let statistics_service_url = self.config.get_statistics_service_url();
             let stats_collector = GatewayStatisticsCollector::new(
+                self.identity_keypair.public_key().to_base58_string(),
                 active_clients_store.clone(),
                 statistics_service_url,
             );

gateway/src/node/statistics/collector.rs

@@ -14,13 +14,19 @@ use statistics_common::{
 use crate::node::client_handling::active_clients::ActiveClientsStore;
 
 pub(crate) struct GatewayStatisticsCollector {
+    gateway_id: String,
     active_clients_store: ActiveClientsStore,
     statistics_service_url: Url,
 }
 
 impl GatewayStatisticsCollector {
-    pub fn new(active_clients_store: ActiveClientsStore, statistics_service_url: Url) -> Self {
+    pub fn new(
+        gateway_id: String,
+        active_clients_store: ActiveClientsStore,
+        statistics_service_url: Url,
+    ) -> Self {
         GatewayStatisticsCollector {
+            gateway_id,
             active_clients_store,
             statistics_service_url,
         }
@@ -35,7 +41,10 @@ impl StatisticsCollector for GatewayStatisticsCollector {
         timestamp: DateTime<Utc>,
     ) -> StatsMessage {
         let inbox_count = self.active_clients_store.size() as u32;
-        let stats_data = vec![StatsData::Gateway(StatsGatewayData { inbox_count })];
+        let stats_data = vec![StatsData::Gateway(StatsGatewayData::new(
+            self.gateway_id.clone(),
+            inbox_count,
+        ))];
         StatsMessage {
             stats_data,
             interval_seconds: interval.as_secs() as u32,

mixnode/Cargo.toml

@@ -3,7 +3,7 @@
 
 [package]
 name = "nym-mixnode"
-version = "1.0.1"
+version = "1.0.2"
 authors = [
     "Dave Hrycyszyn <futurechimp@users.noreply.github.com>",
     "Jędrzej Stuczyński <andrew@nymtech.net>",

mixnode/src/main.rs

@@ -24,7 +24,7 @@ fn long_version_static() -> &'static str {
 #[derive(Parser)]
 #[clap(author = "Nymtech", version, about, long_version = long_version_static())]
 struct Cli {
-    /// Path pointing to an env file that configures the gateway.
+    /// Path pointing to an env file that configures the mixnode.
     #[clap(long)]
     pub(crate) config_env_file: Option<std::path::PathBuf>,
 

nym-chitchat/Cargo.toml

@@ -0,0 +1,28 @@
+[package]
+name = "chitchat-test"
+version = "0.3.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+chitchat = "0.4"
+poem = "1"
+poem-openapi = {version="2", features = ["swagger-ui"] }
+structopt = "0.3"
+tokio = { version = "1.14.0", features = ["net", "sync", "rt-multi-thread", "macros", "time"] }
+serde = { version="1", features=["derive"] }
+serde_json = "1"
+anyhow = "1"
+once_cell = "1"
+tracing = "0.1"
+tracing-subscriber = "0.3"
+cool-id-generator = "1"
+env_logger = "0.9"
+
+[dev-dependencies]
+assert_cmd = "2"
+predicates = "2"
+reqwest = { version = "0.11", default-features=false, features = ["blocking", "json"] }
+
+[workspace]

nym-chitchat/README.md

@@ -0,0 +1,15 @@
+# Chitchat test
+
+Runs simple chitchat servers, mostly copied over from https://github.com/quickwit-oss/chitchat
+
+## Example
+
+```bash
+# Starts 5 servers and joins them into a cluster on localhost ports 10000-10004
+# All servers print cluster state on `/` ie 127.0.0.1:10000
+# `/docs` endpoint has an open api with a key value setter, set it on one node and observe how the state propagates to the other nodes
+# NodeState is a regular BTreeMap
+./run-servers.sh
+
+# run killall chitchat-test after you're done, as the servers will continue to run forever in the background
+```

nym-chitchat/run-servers.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+killall chitchat-test
+
+cargo build --release
+
+for i in $(seq 10000 10004)
+do
+    listen_addr="127.0.0.1:$i";
+    echo ${listen_addr};
+    cargo run --release -- --listen_addr ${listen_addr} --seed 127.0.0.1:10000 --node_id node_$i &
+done;
+
+read
+kill 0

nym-chitchat/src/main.rs

@@ -0,0 +1,123 @@
+use std::net::SocketAddr;
+use std::sync::Arc;
+use std::time::Duration;
+
+use chitchat::transport::UdpTransport;
+use chitchat::{spawn_chitchat, Chitchat, ChitchatConfig, FailureDetectorConfig, NodeId};
+use cool_id_generator::Size;
+use poem::listener::TcpListener;
+use poem::{Route, Server};
+use poem_openapi::param::Query;
+use poem_openapi::payload::Json;
+use poem_openapi::{OpenApi, OpenApiService};
+use structopt::StructOpt;
+use tokio::sync::Mutex;
+
+use chitchat::ClusterStateSnapshot;
+use serde::{Deserialize, Serialize};
+
+#[derive(Serialize, Deserialize, Debug)]
+pub struct ApiResponse {
+    pub cluster_id: String,
+    pub cluster_state: ClusterStateSnapshot,
+    pub live_nodes: Vec<NodeId>,
+    pub dead_nodes: Vec<NodeId>,
+}
+
+#[derive(Serialize, Deserialize, Debug)]
+pub struct SetKeyValueResponse {
+    pub status: bool,
+}
+
+struct Api {
+    chitchat: Arc<Mutex<Chitchat>>,
+}
+
+#[OpenApi]
+impl Api {
+    /// Chitchat state
+    #[oai(path = "/", method = "get")]
+    async fn index(&self) -> Json<serde_json::Value> {
+        let chitchat_guard = self.chitchat.lock().await;
+        let response = ApiResponse {
+            cluster_id: chitchat_guard.cluster_id().to_string(),
+            cluster_state: chitchat_guard.state_snapshot(),
+            live_nodes: chitchat_guard.live_nodes().cloned().collect::<Vec<_>>(),
+            dead_nodes: chitchat_guard.dead_nodes().cloned().collect::<Vec<_>>(),
+        };
+        Json(serde_json::to_value(&response).unwrap())
+    }
+
+    /// Set a key & value on this node (with no validation).
+    #[oai(path = "/set_kv/", method = "get")]
+    async fn set_kv(&self, key: Query<String>, value: Query<String>) -> Json<serde_json::Value> {
+        let mut chitchat_guard = self.chitchat.lock().await;
+
+        let cc_state = chitchat_guard.self_node_state();
+        cc_state.set(key.as_str(), value.as_str());
+
+        Json(serde_json::to_value(&SetKeyValueResponse { status: true }).unwrap())
+    }
+}
+
+#[derive(Debug, StructOpt)]
+#[structopt(name = "chitchat", about = "Chitchat test server.")]
+struct Opt {
+    /// Defines the socket addr on which we should listen to.
+    #[structopt(long = "listen_addr", default_value = "127.0.0.1:10000")]
+    listen_addr: SocketAddr,
+    /// Defines the socket_address (host:port) other servers should use to
+    /// reach this server.
+    ///
+    /// It defaults to the listen address, but this is only valid
+    /// when all server are running on the same server.
+    #[structopt(long = "public_addr")]
+    public_addr: Option<SocketAddr>,
+
+    /// Node id. Has to be unique. If None, the node_id will be generated from
+    /// the public_addr and a random suffix.
+    #[structopt(long = "node_id")]
+    node_id: Option<String>,
+
+    #[structopt(long = "seed")]
+    seeds: Vec<String>,
+
+    #[structopt(long = "interval_ms", default_value = "500")]
+    interval: u64,
+}
+
+fn generate_server_id(public_addr: SocketAddr) -> String {
+    let cool_id = cool_id_generator::get_id(Size::Medium);
+    format!("server:{}-{}", public_addr, cool_id)
+}
+
+#[tokio::main]
+async fn main() -> anyhow::Result<()> {
+    tracing_subscriber::fmt::init();
+    let opt = Opt::from_args();
+    println!("{:?}", opt);
+    let public_addr = opt.public_addr.unwrap_or(opt.listen_addr);
+    let node_id_str = opt
+        .node_id
+        .unwrap_or_else(|| generate_server_id(public_addr));
+    let node_id = NodeId::new(node_id_str, public_addr);
+    let config = ChitchatConfig {
+        node_id,
+        cluster_id: "testing".to_string(),
+        gossip_interval: Duration::from_millis(opt.interval),
+        listen_addr: opt.listen_addr,
+        seed_nodes: opt.seeds.clone(),
+        failure_detector_config: FailureDetectorConfig::default(),
+    };
+    let chitchat_handler = spawn_chitchat(config, Vec::new(), &UdpTransport).await?;
+    let chitchat = chitchat_handler.chitchat();
+    let api = Api { chitchat };
+    let api_service = OpenApiService::new(api, "Hello World", "1.0")
+        .server(&format!("http://{}/", opt.listen_addr));
+    let docs = api_service.swagger_ui();
+    let app = Route::new().nest("/", api_service).nest("/docs", docs);
+    Server::new(TcpListener::bind(&opt.listen_addr))
+        .run(app)
+        .await?;
+    Ok(())
+}

nym-connect/Cargo.lock

@@ -3199,7 +3199,6 @@ dependencies = [
  "cosmwasm-std",
  "fixed",
  "log",
- "network-defaults",
  "schemars",
  "serde",
  "serde_repr",
@@ -3405,7 +3404,7 @@ dependencies = [
 
 [[package]]
 name = "nym-connect"
-version = "1.0.0"
+version = "1.0.1"
 dependencies = [
  "bip39",
  "client-core",

nym-connect/README.md

@@ -32,7 +32,7 @@ yarn install
 
 ## Development mode
 
-You can compile nym-connectin development mode by running the following command inside the `nym-connect` directory:
+You can compile nym-connect in development mode by running the following command inside the `nym-connect` directory:
 
 ```
 yarn dev

nym-connect/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "nym-connect"
-version = "1.0.0"
+version = "1.0.1"
 description = "nym-connect"
 authors = ["Nym Technologies SA"]
 license = ""
@@ -39,7 +39,7 @@ tokio = { version = "1.19.1", features = ["sync", "time"] }
 url = "2.2"
 
 client-core = { path = "../../clients/client-core" }
-config = { path = "../../common/config" }
+config-common = { path = "../../common/config", package = "config" }
 nym-socks5-client = { path = "../../clients/socks5" }
 topology = { path = "../../common/topology" }
 

nym-connect/src-tauri/src/config/mod.rs

@@ -6,8 +6,8 @@ use tap::TapFallible;
 use tokio::sync::RwLock;
 
 use client_core::config::Config as BaseConfig;
-use config::NymConfig;
-use nym_socks5::client::config::Config as Socks5Config;
+use config_common::NymConfig;
+use nym_socks5::{client::config::Config as Socks5Config, commands::parse_validators};
 
 use crate::{
     error::{BackendError, Result},
@@ -134,6 +134,11 @@ pub async fn init_socks5_config(provider_address: String, chosen_gateway_id: Str
     config
         .get_base_mut()
         .with_eth_private_key(DEFAULT_ETH_PRIVATE_KEY);
+    if let Ok(raw_validators) = std::env::var(config_common::defaults::var_names::API_VALIDATOR) {
+        config
+            .get_base_mut()
+            .set_custom_validator_apis(parse_validators(&raw_validators));
+    }
 
     let gateway = setup_gateway(
         &id,

nym-connect/src-tauri/src/main.rs

@@ -5,6 +5,7 @@
 
 use std::sync::Arc;
 
+use config_common::defaults::setup_env;
 use tauri::Menu;
 use tokio::sync::RwLock;
 
@@ -24,6 +25,7 @@ mod window;
 
 fn main() {
     setup_logging();
+    setup_env(None);
     println!("Starting up...");
 
     // As per breaking change description here

nym-connect/src-tauri/src/state.rs

@@ -1,6 +1,6 @@
 use std::time::Duration;
 
-use ::config::NymConfig;
+use ::config_common::NymConfig;
 use futures::SinkExt;
 use tap::TapFallible;
 use tauri::Manager;

nym-connect/src-tauri/src/tasks.rs

@@ -4,7 +4,7 @@ use std::sync::Arc;
 use tap::TapFallible;
 use tokio::sync::RwLock;
 
-use config::NymConfig;
+use config_common::NymConfig;
 #[cfg(not(feature = "coconut"))]
 use nym_socks5::client::NymClient as Socks5NymClient;
 use nym_socks5::client::{config::Config as Socks5Config, Socks5ControlMessageSender};

nym-connect/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "nym-connect",
-    "version": "1.0.0"
+    "version": "1.0.1"
   },
   "build": {
     "distDir": "../dist",

nym-connect/src/layouts/DefaultLayout.tsx

@@ -22,11 +22,14 @@ export const DefaultLayout: React.FC<{
   };
   return (
     <AppWindowFrame>
-      <Typography fontWeight="700" fontSize="14px" textAlign="center">
-        Connect, your privacy will be 100% protected thanks to the Nym Mixnet
+      <Typography fontWeight="400" fontSize="12px" textAlign="center" sx={{ opacity: 0.6 }}>
+        This is experimental software. <br />
+        Do not rely on it for strong anonymity (yet).
       </Typography>
-      <Typography fontWeight="700" fontSize="14px" textAlign="center" color="#60D6EF" pt={2}>
-        You are not protected now
+      <Typography fontWeight="700" fontSize="14px" textAlign="center" pt={2}>
+        Connect to the
+        <br />
+        Nym mixnet for privacy.
       </Typography>
       <ServiceProviderSelector services={services} onChange={handleServiceProviderChange} />
       <ConnectionButton

nym-wallet/Cargo.lock

@@ -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"
@@ -3996,9 +4019,9 @@ dependencies = [
 
 [[package]]
 name = "regex"
-version = "1.5.4"
+version = "1.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d07a8629359eb56f1e2fb1652bb04212c072a87ba68546a04065d525673ac461"
+checksum = "4c4eb3267174b8c6c2f654116623910a0fef09c4753f8dd83db29c48a0df988b"
 dependencies = [
  "aho-corasick",
  "memchr",
@@ -4016,9 +4039,9 @@ dependencies = [
 
 [[package]]
 name = "regex-syntax"
-version = "0.6.25"
+version = "0.6.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f497285884f3fcff424ffc933e56d7cbca511def0c9831a7f9b5f6153e3cc89b"
+checksum = "a3f87b73ce11b1619a3c6332f45341e0047173771e8b8b73f87bfeefb7b56244"
 
 [[package]]
 name = "remove_dir_all"
@@ -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"

nym-wallet/src-tauri/Cargo.toml

@@ -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"
 

nym-wallet/src-tauri/src/main.rs

@@ -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,

nym-wallet/src-tauri/src/operations/mixnet/bond.rs

@@ -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 });
+}

nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx

@@ -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>

nym-wallet/src/components/ActionsMenu.tsx

@@ -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>
+);

nym-wallet/src/components/AppBar.tsx

@@ -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"

nym-wallet/src/components/AppBar/AppBar.tsx

@@ -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>
-  );
-};

nym-wallet/src/components/AppBar/index.ts

@@ -1 +0,0 @@
-export * from './AppBar';

nym-wallet/src/components/Bonding/Bond.tsx

@@ -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>
+);

nym-wallet/src/components/Bonding/BondedGateway.tsx

@@ -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>
+  );
+};

nym-wallet/src/components/Bonding/BondedGatewayAction.tsx

@@ -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>
+  );
+};

nym-wallet/src/components/Bonding/BondedMixnode.tsx

@@ -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>
+  );
+};

nym-wallet/src/components/Bonding/BondedMixnodeActions.tsx

@@ -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>
+  );
+};

nym-wallet/src/components/Bonding/NodeTable.tsx

@@ -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>
+);

nym-wallet/src/components/Bonding/forms/BondGatewayForm.tsx

@@ -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}
+      />
+    )}
+  </>
+);

nym-wallet/src/components/Bonding/forms/BondMixnodeForm.tsx

@@ -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}
+      />
+    )}
+  </>
+);

nym-wallet/src/components/Bonding/forms/gatewayValidationSchema.ts

@@ -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;
+      }),
+  }),
+});

nym-wallet/src/components/Bonding/forms/mixnodeValidationSchema.ts

@@ -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),
+});

nym-wallet/src/components/Bonding/modals/BondGatewayModal.tsx

@@ -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>
+  );
+};

nym-wallet/src/components/Bonding/modals/BondMixnodeModal.tsx

@@ -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>
+  );
+};

nym-wallet/src/components/Bonding/modals/BondMoreModal.tsx

@@ -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>
+  );
+};

nym-wallet/src/components/Bonding/modals/CompoundRewardsModal.tsx

@@ -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>
+  );
+};

nym-wallet/src/components/Bonding/modals/ConfirmationModal.tsx

@@ -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>
+  );
+};

nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx

@@ -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>
+  );
+};

nym-wallet/src/components/Bonding/modals/RedeemRewardsModal.tsx

@@ -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>
+  );
+};

nym-wallet/src/components/Bonding/modals/UnbondModal.tsx

@@ -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>
+  );
+};

nym-wallet/src/components/ConfirmTX.stories.tsx

@@ -10,9 +10,9 @@ export default {
 
 const Template: ComponentStory<typeof ConfirmTx> = (args) => (
   <ConfirmTx {...args}>
-    <ModalListItem label="Transaction type" value="Bond" divider />
-    <ModalListItem label="Current bond" value="100 NYM" divider />
-    <ModalListItem label="Additional bond" value="50 NYM" divider />
+    <ModalListItem label="Transaction type:" value="Bond" divider />
+    <ModalListItem label="Current bond:" value="100 NYM" divider />
+    <ModalListItem label="Additional bond:" value="50 NYM" divider />
   </ConfirmTx>
 );
 

nym-wallet/src/components/CopyToClipboard.tsx

@@ -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>
     );

nym-wallet/src/components/Delegation/DelegateModal.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { Box, Typography } from '@mui/material';
-import { SxProps } from '@mui/system';
+import { Box, Typography, SxProps } from '@mui/material';
 import { IdentityKeyFormField } from '@nymproject/react/mixnodes/IdentityKeyFormField';
 import { CurrencyFormField } from '@nymproject/react/currency/CurrencyFormField';
 import { CurrencyDenom, FeeDetails, DecCoin } from '@nymproject/types';
@@ -31,7 +30,7 @@ export const DelegateModal: React.FC<{
   estimatedReward?: number;
   profitMarginPercentage?: number | null;
   nodeUptimePercentage?: number | null;
-  currency: string;
+  denom: CurrencyDenom;
   initialAmount?: string;
   hasVestingContract: boolean;
   sx?: SxProps;
@@ -48,7 +47,7 @@ export const DelegateModal: React.FC<{
   rewardInterval,
   accountBalance,
   estimatedReward,
-  currency,
+  denom,
   profitMarginPercentage,
   nodeUptimePercentage,
   initialAmount,
@@ -103,7 +102,7 @@ export const DelegateModal: React.FC<{
     }
 
     if (amount && Number(amount) < MIN_AMOUNT_TO_DELEGATE) {
-      errorAmountMessage = `Min. delegation amount: ${MIN_AMOUNT_TO_DELEGATE} ${currency}`;
+      errorAmountMessage = `Min. delegation amount: ${MIN_AMOUNT_TO_DELEGATE} ${denom.toUpperCase()}`;
       newValidatedValue = false;
     }
 
@@ -118,7 +117,7 @@ export const DelegateModal: React.FC<{
 
   const handleOk = async () => {
     if (onOk && amount && identityKey) {
-      onOk(identityKey, { amount, denom: currency as CurrencyDenom }, tokenPool, fee);
+      onOk(identityKey, { amount, denom }, tokenPool, fee);
     }
   };
 
@@ -169,8 +168,8 @@ export const DelegateModal: React.FC<{
         onPrev={resetFeeState}
         onConfirm={handleOk}
       >
-        <ModalListItem label="Node identity key" value={identityKey} divider />
-        <ModalListItem label="Amount" value={`${amount} ${currency}`} divider />
+        <ModalListItem label="Node identity key:" value={identityKey} divider />
+        <ModalListItem label="Amount:" value={`${amount} ${denom.toUpperCase()}`} divider />
       </ConfirmTx>
     );
   }
@@ -181,27 +180,28 @@ export const DelegateModal: React.FC<{
       onClose={onClose}
       onOk={async () => {
         if (identityKey && amount) {
-          handleConfirm({ identity: identityKey, value: { amount, denom: currency as CurrencyDenom } });
+          handleConfirm({ identity: identityKey, value: { amount, denom } });
         }
       }}
       header={header || 'Delegate'}
-      subHeader="Delegate to mixnode"
       okLabel={buttonText || 'Delegate stake'}
       okDisabled={!isValidated}
       sx={sx}
       backdropProps={backdropProps}
     >
-      <IdentityKeyFormField
-        required
-        fullWidth
-        placeholder="Node identity key"
-        onChanged={handleIdentityKeyChanged}
-        initialValue={identityKey}
-        readOnly={Boolean(initialIdentityKey)}
-        textFieldProps={{
-          autoFocus: !initialIdentityKey,
-        }}
-      />
+      <Box sx={{ mt: 2 }}>
+        <IdentityKeyFormField
+          required
+          fullWidth
+          placeholder="Node identity key"
+          onChanged={handleIdentityKeyChanged}
+          initialValue={identityKey}
+          readOnly={Boolean(initialIdentityKey)}
+          textFieldProps={{
+            autoFocus: !initialIdentityKey,
+          }}
+        />
+      </Box>
       <Typography
         component="div"
         textAlign="left"
@@ -219,6 +219,7 @@ export const DelegateModal: React.FC<{
           initialValue={amount}
           autoFocus={Boolean(initialIdentityKey)}
           onChanged={handleAmountChanged}
+          denom={denom}
         />
       </Box>
       <Typography
@@ -230,24 +231,30 @@ export const DelegateModal: React.FC<{
         {errorAmount}
       </Typography>
       <Box sx={{ mt: 3 }}>
-        <ModalListItem label="Account balance" value={accountBalance} divider />
+        <ModalListItem label="Account balance:" value={accountBalance?.toUpperCase()} divider strong />
       </Box>
 
-      <ModalListItem label="Rewards payout interval" value={rewardInterval} hidden divider />
+      <ModalListItem label="Rewards payout interval:" value={rewardInterval} hidden divider />
       <ModalListItem
-        label="Node profit margin"
+        label="Node profit margin:"
         value={`${profitMarginPercentage ? `${profitMarginPercentage}%` : '-'}`}
         hidden={profitMarginPercentage === undefined}
         divider
       />
       <ModalListItem
-        label="Node uptime"
+        label="Node avg. uptime:"
         value={`${nodeUptimePercentage ? `${nodeUptimePercentage}%` : '-'}`}
         hidden={nodeUptimePercentage === undefined}
         divider
       />
 
-      <ModalListItem label="Node est. reward per epoch" value={`${estimatedReward} ${currency}`} hidden divider />
+      <ModalListItem
+        label="Node est. reward per epoch:"
+        value={`${estimatedReward} ${denom.toUpperCase()}`}
+        hidden
+        divider
+      />
+      <ModalListItem label="Est. fee for this transaction will be calculated in the next page" />
     </SimpleModal>
   );
 };

nym-wallet/src/components/Delegation/DelegationActions.tsx

@@ -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="Trasfer 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>
   );
 };

nym-wallet/src/components/Delegation/DelegationModal.stories.tsx

@@ -29,9 +29,6 @@ const transactionForDarkTheme = {
   url: 'https://sandbox-blocks.nymtech.net/transactions/11ED7B9E21534A9421834F52FED5103DC6E982949C06335F5E12EFC71DAF0CFO',
   hash: '11ED7B9E21534A9421834F52FED5103DC6E982949C06335F5E12EFC71DAF0CF0',
 };
-const balance = '104 NYMT';
-const balanceVested = '12 NYMT';
-const recipient = 'nymt1923pujepxfnv8dqyxqrl078s4ysf3xn2p7z2xa';
 
 const Content: React.FC<{ children: React.ReactElement<any, any>; handleClick: () => void }> = ({
   children,
@@ -78,8 +75,6 @@ export const DelegateSuccess = () => {
         status="success"
         action="delegate"
         message="You delegated 5 NYM"
-        recipient={recipient}
-        balance={balance}
         transactions={theme.palette.mode === 'light' ? [transaction] : [transactionForDarkTheme]}
         {...storybookStyles(theme)}
       />
@@ -99,8 +94,6 @@ export const UndelegateSuccess = () => {
         status="success"
         action="undelegate"
         message="You undelegated 5 NYM"
-        recipient={recipient}
-        balance={balance}
         transactions={theme.palette.mode === 'light' ? [transaction] : [transactionForDarkTheme]}
         {...storybookStyles(theme)}
       />
@@ -120,8 +113,6 @@ export const RedeemSuccess = () => {
         status="success"
         action="redeem"
         message="42 NYM"
-        recipient={recipient}
-        balance={balance}
         transactions={
           theme.palette.mode === 'light'
             ? [transaction, transaction]
@@ -145,9 +136,6 @@ export const RedeemWithVestedSuccess = () => {
         status="success"
         action="redeem"
         message="42 NYM"
-        recipient={recipient}
-        balance={balance}
-        balanceVested={balanceVested}
         transactions={
           theme.palette.mode === 'light'
             ? [transaction, transaction]
@@ -171,8 +159,6 @@ export const RedeemAllSuccess = () => {
         status="success"
         action="redeem-all"
         message="42 NYM"
-        recipient={recipient}
-        balance={balance}
         transactions={
           theme.palette.mode === 'light'
             ? [transaction, transaction]
@@ -196,8 +182,6 @@ export const Error = () => {
         status="error"
         action="redeem-all"
         message="Minim esse veniam Lorem id velit Lorem eu eu est. Excepteur labore sunt do proident proident sint aliquip consequat Lorem sint non nulla ad excepteur."
-        recipient={recipient}
-        balance={balance}
         transactions={theme.palette.mode === 'light' ? [transaction] : [transactionForDarkTheme]}
         {...storybookStyles(theme)}
       />

nym-wallet/src/components/Delegation/DelegationModal.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Box, Button, Modal, Typography, SxProps } from '@mui/material';
+import { Box, Button, Modal, Typography, SxProps, Stack } from '@mui/material';
 import { Link } from '@nymproject/react/link/Link';
 import { Console } from 'src/utils/console';
 import { modalStyle } from '../Modals/styles';
 import { LoadingModal } from '../Modals/LoadingModal';
+import { ConfirmationModal } from '../Modals/ConfirmationModal';
 
 export type ActionType = 'delegate' | 'undelegate' | 'redeem' | 'redeem-all' | 'compound';
 
@@ -15,9 +16,9 @@ const actionToHeader = (action: ActionType): string => {
     case 'redeem-all':
       return 'All rewards redeemed successfully';
     case 'delegate':
-      return 'Delegation complete';
+      return 'Delegation successful';
     case 'undelegate':
-      return 'Undelegation complete';
+      return 'Undelegation successful';
     case 'compound':
       return 'Rewards compounded successfully';
     default:
@@ -29,9 +30,6 @@ export type DelegationModalProps = {
   status: 'loading' | 'success' | 'error';
   action: ActionType;
   message?: string;
-  recipient?: string;
-  balance?: string;
-  balanceVested?: string;
   transactions?: {
     url: string;
     hash: string;
@@ -45,20 +43,7 @@ export const DelegationModal: React.FC<
     sx?: SxProps;
     backdropProps?: object;
   }
-> = ({
-  status,
-  action,
-  message,
-  recipient,
-  balance,
-  balanceVested,
-  transactions,
-  open,
-  onClose,
-  children,
-  sx,
-  backdropProps,
-}) => {
+> = ({ status, action, message, transactions, open, onClose, children, sx, backdropProps }) => {
   if (status === 'loading') return <LoadingModal sx={sx} backdropProps={backdropProps} />;
 
   if (status === 'error') {
@@ -81,54 +66,28 @@ export const DelegationModal: React.FC<
   }
 
   transactions?.map((transaction) => Console.log('action', action, 'status', status, 'key', transaction.hash));
-  return (
-    <Modal open={open} onClose={onClose} BackdropProps={backdropProps}>
-      <Box sx={{ ...modalStyle, ...sx }} textAlign="center">
-        <Typography color={(theme) => theme.palette.success.main} mb={1}>
-          {actionToHeader(action)}
-        </Typography>
-        <Typography mb={3} color="text.primary">
-          {message}
-        </Typography>
 
-        {recipient && (
-          <Typography mb={1} fontSize="small" color={(theme) => theme.palette.text.secondary}>
-            Recipient: {recipient}
-          </Typography>
+  return (
+    <ConfirmationModal
+      open={open}
+      onConfirm={onClose || (() => {})}
+      title={actionToHeader(action)}
+      confirmButton="Done"
+    >
+      <Stack alignItems="center" spacing={2} mb={0}>
+        {message && <Typography>{message}</Typography>}
+        {transactions?.length === 1 && (
+          <Link href={transactions[0].url} target="_blank" sx={{ ml: 1 }} text="View on blockchain" noIcon />
         )}
-        {balanceVested ? (
-          <>
-            <Typography mb={1} fontSize="small" color={(theme) => theme.palette.text.secondary}>
-              Your current balance: {balance?.toUpperCase()}
-            </Typography>
-            <Typography mb={1} fontSize="small" color={(theme) => theme.palette.text.secondary}>
-              ({balanceVested.toUpperCase()} is unlocked in your vesting account)
-            </Typography>
-          </>
-        ) : (
-          <Typography mb={1} fontSize="small" color={(theme) => theme.palette.text.secondary}>
-            Your current balance: {balance?.toUpperCase()}
-          </Typography>
-        )}
-        {transactions && (
-          <Typography mb={1} fontSize="small" color={(theme) => theme.palette.text.secondary}>
-            Check the transaction {transactions.length > 1 ? 'hashes' : 'hash'}:
-            {transactions.map((transaction) => (
-              <Link
-                key={transaction.hash}
-                href={transaction.url}
-                target="_blank"
-                sx={{ ml: 1 }}
-                text={transaction.hash.slice(0, 6)}
-              />
+        {transactions && transactions.length > 1 && (
+          <Stack alignItems="center" spacing={1}>
+            <Typography>View the transactions on blockchain:</Typography>
+            {transactions.map(({ url, hash }) => (
+              <Link href={url} target="_blank" sx={{ ml: 1 }} text={hash.slice(0, 6)} key={hash} noIcon />
             ))}
-          </Typography>
+          </Stack>
         )}
-        {children}
-        <Button variant="contained" sx={{ mt: 3 }} size="large" onClick={onClose}>
-          Finish
-        </Button>
-      </Box>
-    </Modal>
+      </Stack>
+    </ConfirmationModal>
   );
 };

nym-wallet/src/components/Delegation/Modals.stories.tsx

@@ -61,7 +61,7 @@ export const Delegate = () => {
         open={open}
         onClose={() => setOpen(false)}
         onOk={async () => setOpen(false)}
-        currency="nym"
+        denom="nym"
         estimatedReward={50.423}
         accountBalance="425.2345053"
         nodeUptimePercentage={99.28394}
@@ -84,7 +84,7 @@ export const DelegateBelowMinimum = () => {
         open={open}
         onClose={() => setOpen(false)}
         onOk={async () => setOpen(false)}
-        currency="nym"
+        denom="nym"
         estimatedReward={425.2345053}
         nodeUptimePercentage={99.28394}
         profitMarginPercentage={11.12334234}
@@ -109,7 +109,7 @@ export const DelegateMore = () => {
         onOk={async () => setOpen(false)}
         header="Delegate more"
         buttonText="Delegate more"
-        currency="nym"
+        denom="nym"
         estimatedReward={50.423}
         accountBalance="425.2345053"
         nodeUptimePercentage={99.28394}

nym-wallet/src/components/Delegation/UndelegateModal.tsx

@@ -55,7 +55,7 @@ export const UndelegateModal: React.FC<{
       />
 
       <Box sx={{ mt: 3 }}>
-        <ModalListItem label="Delegation amount" value={`${amount} ${currency}`} divider />
+        <ModalListItem label="Delegation amount:" value={`${amount} ${currency}`} divider />
       </Box>
 
       <Typography mb={5} fontSize="smaller" sx={{ color: 'text.primary' }}>

nym-wallet/src/components/IdentityKey.tsx

@@ -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>
+);

nym-wallet/src/components/Modals/ConfirmationModal.tsx

@@ -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' ? (

nym-wallet/src/components/Modals/ErrorModal.tsx

@@ -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>
+);

nym-wallet/src/components/Modals/LoadingModal.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Box, CircularProgress, Modal, Stack, Typography } from '@mui/material';
-import { SxProps } from '@mui/system';
+import { Box, CircularProgress, Modal, Stack, Typography, SxProps } from '@mui/material';
 
 const modalStyle: SxProps = {
   position: 'absolute',

nym-wallet/src/components/Modals/ModalFee.tsx

@@ -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 />}
+  </>
 );

nym-wallet/src/components/Modals/ModalListItem.tsx

@@ -7,20 +7,18 @@ export const ModalListItem: React.FC<{
   divider?: boolean;
   hidden?: boolean;
   strong?: boolean;
-  value: React.ReactNode;
+  value?: React.ReactNode;
 }> = ({ label, value, hidden, divider, strong }) => (
   <Box sx={{ display: hidden ? 'none' : 'block' }}>
     <Stack direction="row" justifyContent="space-between">
       <Typography fontSize="smaller" fontWeight={strong ? 600 : undefined} sx={{ color: 'text.primary' }}>
-        {label}:
-      </Typography>
-      <Typography
-        fontSize="smaller"
-        fontWeight={strong ? 600 : undefined}
-        sx={{ color: 'text.primary', textTransform: 'uppercase' }}
-      >
-        {value}
+        {label}
       </Typography>
+      {value && (
+        <Typography fontSize="smaller" fontWeight={strong ? 600 : undefined} sx={{ color: 'text.primary' }}>
+          {value}
+        </Typography>
+      )}
     </Stack>
     {divider && <ModalDivider />}
   </Box>