fix(wallet): broken explorer links

explorer/src/context/mixnode.tsx

@@ -36,16 +36,16 @@ export const useMixnodeContext = (): React.ContextType<typeof MixnodeContext> =>
   React.useContext<MixnodeState>(MixnodeContext);
 
 interface MixnodeContextProviderProps {
-  mixNodeIdentityKey: string;
+  mixId: string;
 }
 
 /**
  * Provides a state context for a mixnode by identity
- * @param mixNodeIdentityKey   The identity key of the mixnode
+ * @param mixId   The mixID of the mixnode
  */
-export const MixnodeContextProvider: React.FC<MixnodeContextProviderProps> = ({ mixNodeIdentityKey, children }) => {
+export const MixnodeContextProvider: React.FC<MixnodeContextProviderProps> = ({ mixId, children }) => {
   const [mixNode, fetchMixnodeById, clearMixnodeById] = useApiState<MixNodeResponseItem | undefined>(
-    mixNodeIdentityKey,
+    mixId,
     Api.fetchMixnodeByID,
     'Failed to fetch mixnode by id',
   );
@@ -53,44 +53,44 @@ export const MixnodeContextProvider: React.FC<MixnodeContextProviderProps> = ({
   const [mixNodeRow, setMixnodeRow] = React.useState<MixnodeRowType | undefined>();
 
   const [delegations, fetchDelegations, clearDelegations] = useApiState<DelegationsResponse>(
-    mixNodeIdentityKey,
+    mixId,
     Api.fetchDelegationsById,
     'Failed to fetch delegations for mixnode',
   );
 
   const [uniqDelegations, fetchUniqDelegations, clearUniqDelegations] = useApiState<UniqDelegationsResponse>(
-    mixNodeIdentityKey,
+    mixId,
     Api.fetchUniqDelegationsById,
     'Failed to fetch delegations for mixnode',
   );
 
   const [status, fetchStatus, clearStatus] = useApiState<StatusResponse>(
-    mixNodeIdentityKey,
+    mixId,
     Api.fetchStatusById,
     'Failed to fetch mixnode status',
   );
 
   const [stats, fetchStats, clearStats] = useApiState<StatsResponse>(
-    mixNodeIdentityKey,
+    mixId,
     Api.fetchStatsById,
     'Failed to fetch mixnode stats',
   );
 
   const [description, fetchDescription, clearDescription] = useApiState<MixNodeDescriptionResponse>(
-    mixNodeIdentityKey,
+    mixId,
     Api.fetchMixnodeDescriptionById,
     'Failed to fetch mixnode description',
   );
 
   const [economicDynamicsStats, fetchEconomicDynamicsStats, clearEconomicDynamicsStats] =
     useApiState<MixNodeEconomicDynamicsStatsResponse>(
-      mixNodeIdentityKey,
+      mixId,
       Api.fetchMixnodeEconomicDynamicsStatsById,
       'Failed to fetch mixnode dynamics stats by id',
     );
 
   const [uptimeStory, fetchUptimeHistory, clearUptimeHistory] = useApiState<UptimeStoryResponse>(
-    mixNodeIdentityKey,
+    mixId,
     Api.fetchUptimeStoryById,
     'Failed to fetch mixnode uptime history',
   );
@@ -123,7 +123,7 @@ export const MixnodeContextProvider: React.FC<MixnodeContextProviderProps> = ({
         fetchUptimeHistory(),
       ]);
     });
-  }, [mixNodeIdentityKey]);
+  }, [mixId]);
 
   const state = React.useMemo<MixnodeState>(
     () => ({

explorer/src/pages/MixnodeDetail/index.tsx

@@ -223,7 +223,7 @@ export const PageMixnodeDetail: React.FC = () => {
   }
 
   return (
-    <MixnodeContextProvider mixNodeIdentityKey={id}>
+    <MixnodeContextProvider mixId={id}>
       <PageMixnodeDetailGuard />
     </MixnodeContextProvider>
   );

nym-wallet/Cargo.lock

@@ -2877,7 +2877,7 @@ dependencies = [
 
 [[package]]
 name = "nym_wallet"
-version = "1.1.0"
+version = "1.1.1"
 dependencies = [
  "aes-gcm",
  "argon2 0.3.4",

nym-wallet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nymproject/nym-wallet-app",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "main": "index.js",
   "license": "MIT",
   "scripts": {

nym-wallet/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "nym_wallet"
-version = "1.1.0"
+version = "1.1.1"
 description = "Nym Native Wallet"
 authors = ["Nym Technologies SA"]
 license = ""

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

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "nym-wallet",
-    "version": "1.1.0"
+    "version": "1.1.1"
   },
   "build": {
     "distDir": "../dist",

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

@@ -91,7 +91,7 @@ export const BondedGateway = ({
       {network && (
         <Typography sx={{ mt: 2, fontSize: 'small' }}>
           Check more stats of your gateway on the{' '}
-          <Link href={`${urls(network).networkExplorer}/network-components/gateways`} target="_blank">
+          <Link href={`${urls(network).networkExplorer}/network-components/gateway/${identityKey}`} target="_blank">
             explorer
           </Link>
         </Typography>

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

@@ -66,6 +66,7 @@ export const BondedMixnode = ({
   const navigate = useNavigate();
   const {
     name,
+    mixId,
     stake,
     bond,
     stakeSaturation,
@@ -165,7 +166,7 @@ export const BondedMixnode = ({
         {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">
+            <Link href={`${urls(network).networkExplorer}/network-components/mixnode/${mixId}`} target="_blank">
               explorer
             </Link>
           </Typography>

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

@@ -45,7 +45,7 @@ export const DelegationItem = ({
           ) : (
             <Link
               target="_blank"
-              href={`${explorerUrl}/network-components/mixnode/${item.node_identity}`}
+              href={`${explorerUrl}/network-components/mixnode/${item.mix_id}`}
               text={`${item.node_identity.slice(0, 6)}...${item.node_identity.slice(-6)}`}
               color="text.primary"
               noIcon

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

@@ -8,7 +8,7 @@ export const PendingDelegationItem = ({ item, explorerUrl }: { item: WrappedDele
     <TableCell>
       <Link
         target="_blank"
-        href={`${explorerUrl}/network-components/mixnode/${item.node_identity}`}
+        href={`${explorerUrl}/network-components/mixnode/${item.event.mix_id}`}
         text={`${item.node_identity.slice(0, 6)}...${item.node_identity.slice(-6)}`}
         color="text.primary"
         noIcon

nym-wallet/src/context/bonding.tsx

@@ -48,6 +48,7 @@ import {
 
 export type TBondedMixnode = {
   name?: string;
+  mixId: number;
   identityKey: string;
   stake: DecCoin;
   bond: DecCoin;
@@ -266,6 +267,7 @@ export const BondingContextProvider = ({ children }: { children?: React.ReactNod
           const routingScore = await getAvgUptime();
           setBondedNode({
             name: nodeDescription?.name,
+            mixId: mix_id,
             identityKey: bond_information.mix_node.identity_key,
             stake: {
               amount: calculateStake(rewarding_details.operator, rewarding_details.delegates),

nym-wallet/src/context/delegations.tsx

@@ -1,14 +1,20 @@
 import React, { createContext, FC, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { getDelegationSummary, undelegateAllFromMixnode } from 'src/requests/delegation';
+import { getDelegationSummary, undelegateAllFromMixnode, undelegateFromMixnode } from 'src/requests/delegation';
 import {
   DelegationWithEverything,
   FeeDetails,
   DecCoin,
   TransactionExecuteResult,
   WrappedDelegationEvent,
+  Fee,
 } from '@nymproject/types';
 import type { Network } from 'src/types';
-import { delegateToMixnode, getAllPendingDelegations, vestingDelegateToMixnode } from 'src/requests';
+import {
+  delegateToMixnode,
+  getAllPendingDelegations,
+  vestingDelegateToMixnode,
+  vestingUndelegateFromMixnode,
+} from 'src/requests';
 import { TPoolOption } from 'src/components';
 import { decCoinToDisplay } from 'src/utils';
 
@@ -25,11 +31,8 @@ export type TDelegationContext = {
     tokenPool: TPoolOption,
     fee?: FeeDetails,
   ) => Promise<TransactionExecuteResult>;
-  undelegate: (
-    mix_id: number,
-    usesVestingContractTokens: boolean,
-    fee?: FeeDetails,
-  ) => Promise<TransactionExecuteResult[]>;
+  undelegate: (mix_id: number, fee?: Fee) => Promise<TransactionExecuteResult>;
+  undelegateVesting: (mix_id: number) => Promise<TransactionExecuteResult>;
 };
 
 export type TDelegationTransaction = {
@@ -51,7 +54,10 @@ export const DelegationContext = createContext<TDelegationContext>({
   addDelegation: async () => {
     throw new Error('Not implemented');
   },
-  undelegate: async () => {
+  undelegate: () => {
+    throw new Error('Not implemented');
+  },
+  undelegateVesting: () => {
     throw new Error('Not implemented');
   },
 });
@@ -135,7 +141,8 @@ export const DelegationContextProvider: FC<{
       totalRewards,
       refresh,
       addDelegation,
-      undelegate: undelegateAllFromMixnode,
+      undelegate: undelegateFromMixnode,
+      undelegateVesting: vestingUndelegateFromMixnode,
     }),
     [isLoading, error, delegations, pendingDelegations, totalDelegations],
   );

nym-wallet/src/context/mocks/bonding.tsx

@@ -8,6 +8,7 @@ const SLEEP_MS = 1000;
 
 const bondedMixnodeMock: TBondedMixnode = {
   name: 'Monster node',
+  mixId: 1,
   identityKey: '7mjM2fYbtN6kxMwp1TrmQ4VwPks3URR5pBgWPWhzT98F',
   stake: { denom: 'nym', amount: '1234' },
   bond: { denom: 'nym', amount: '1234' },

nym-wallet/src/context/mocks/delegations.tsx

@@ -1,5 +1,12 @@
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { DelegationWithEverything, DecCoin, TransactionExecuteResult, FeeDetails } from '@nymproject/types';
+import {
+  DelegationWithEverything,
+  DecCoin,
+  TransactionExecuteResult,
+  FeeDetails,
+  Fee,
+  CurrencyDenom,
+} from '@nymproject/types';
 import { DelegationContext, TDelegationTransaction } from '../delegations';
 
 import { mockSleep } from './utils';
@@ -154,11 +161,7 @@ export const MockDelegationContextProvider: FC<{}> = ({ children }) => {
     };
   };
 
-  const undelegate = async (
-    mix_id: number,
-    _usesVestingContractTokens: boolean,
-    _fee?: FeeDetails,
-  ): Promise<TransactionExecuteResult[]> => {
+  const undelegate = async (mix_id: number, _fee?: Fee): Promise<TransactionExecuteResult> => {
     await mockSleep(SLEEP_MS);
     mockDelegations = mockDelegations.map((d) => {
       if (d.mix_id === mix_id) {
@@ -175,18 +178,29 @@ export const MockDelegationContextProvider: FC<{}> = ({ children }) => {
       triggerStateUpdate();
     }, 3000);
 
-    return [
-      {
-        logs_json: '',
-        data_json: '',
-        transaction_hash: '',
-        gas_info: {
-          gas_wanted: { gas_units: BigInt(1) },
-          gas_used: { gas_units: BigInt(1) },
-        },
-        fee: { amount: '1', denom: 'nym' },
+    return {
+      logs_json: '',
+      data_json: '',
+      transaction_hash: '',
+      gas_info: {
+        gas_wanted: { gas_units: BigInt(1) },
+        gas_used: { gas_units: BigInt(1) },
       },
-    ];
+      fee: { amount: '1', denom: 'nym' as CurrencyDenom },
+    };
+  };
+
+  const undelegateVesting = async (mix_id: number, _fee?: FeeDetails) => {
+    return {
+      logs_json: '',
+      data_json: '',
+      transaction_hash: '',
+      gas_info: {
+        gas_wanted: { gas_units: BigInt(1) },
+        gas_used: { gas_units: BigInt(1) },
+      },
+      fee: { amount: '1', denom: 'nym' as CurrencyDenom },
+    };
   };
 
   const resetState = () => {
@@ -226,6 +240,7 @@ export const MockDelegationContextProvider: FC<{}> = ({ children }) => {
       addDelegation,
       updateDelegation,
       undelegate,
+      undelegateVesting,
     }),
     [isLoading, error, delegations, totalDelegations, trigger],
   );

nym-wallet/src/pages/delegation/index.tsx

@@ -52,6 +52,7 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
     isLoading,
     addDelegation,
     undelegate,
+    undelegateVesting,
     refresh: refreshDelegations,
   } = useDelegationContext();
 
@@ -206,7 +207,8 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
 
   const handleUndelegate = async (
     mixId: number,
-    identityKey: string,
+    // identityKey is no longer used
+    _: string,
     usesVestingContractTokens: boolean,
     fee?: FeeDetails,
   ) => {
@@ -216,19 +218,27 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
     });
     setShowUndelegateModal(false);
     setCurrentDelegationListActionItem(undefined);
-
+    let tx;
     try {
-      const txs = await undelegate(mixId, usesVestingContractTokens, fee);
+      if (usesVestingContractTokens) {
+        tx = await undelegateVesting(mixId);
+      } else {
+        tx = await undelegate(mixId, fee?.fee);
+      }
+
+      // const txs = await undelegate(mixId, usesVestingContractTokens, fee);
       const balances = await getAllBalances();
 
       setConfirmationModalProps({
         status: 'success',
         action: 'undelegate',
         ...balances,
-        transactions: txs.map((tx) => ({
-          url: `${urls(network).blockExplorer}/transaction/${tx.transaction_hash}`,
-          hash: tx.transaction_hash,
-        })),
+        transactions: [
+          {
+            url: `${urls(network).blockExplorer}/transaction/${tx.transaction_hash}`,
+            hash: tx.transaction_hash,
+          },
+        ],
       });
     } catch (e) {
       Console.error('Failed to undelegate', e);