diff --git a/explorer/src/components/Delegations/ConfirmationModal.tsx b/explorer/src/components/Delegations/components/ConfirmationModal.tsx
similarity index 100%
rename from explorer/src/components/Delegations/ConfirmationModal.tsx
rename to explorer/src/components/Delegations/components/ConfirmationModal.tsx
diff --git a/explorer/src/components/Delegations/DelegateModal.tsx b/explorer/src/components/Delegations/components/DelegateModal.tsx
similarity index 88%
rename from explorer/src/components/Delegations/DelegateModal.tsx
rename to explorer/src/components/Delegations/components/DelegateModal.tsx
index 50b7276aa59..eb98c57bac2 100644
--- a/explorer/src/components/Delegations/DelegateModal.tsx
+++ b/explorer/src/components/Delegations/components/DelegateModal.tsx
@@ -1,10 +1,10 @@
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useCallback, useContext, useState, useEffect } from 'react';
 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, decimalToFloatApproximation } from '@nymproject/types';
 // import { Console } from 'src/utils/console';
-// import { useGetFee } from 'src/hooks/useGetFee';
+import { useGetFee } from '../hooks/useGetFee';
 // import { simulateDelegateToMixnode, simulateVestingDelegateToMixnode, tryConvertIdentityToMixId } from 'src/requests';
 import { debounce } from 'lodash';
 import { SimpleModal } from './SimpleModal';
@@ -13,12 +13,14 @@ import { ModalListItem } from './ModalListItem';
 // import { SimpleModal } from '../Modals/SimpleModal';
 // import { ModalListItem } from '../Modals/ModalListItem';
 // import { checkTokenBalance, validateAmount, validateKey } from '../../utils';
-// import { TokenPoolSelector, TPoolOption } from '../TokenPoolSelector';
+// import { TokenPoolSelector, TPoolOption } from './TokenPoolSelector';
 // import { ConfirmTx } from '../ConfirmTX';
 
 // import { getMixnodeStakeSaturation } from '../../requests';
 // import { ErrorModal } from '../Modals/ErrorModal';
 // import { BalanceWarning } from '../FeeWarning';
+import { useChain } from '@cosmos-kit/react';
+import { uNYMtoNYM } from '../../ConnectKeplrWallet';
 
 const MIN_AMOUNT_TO_DELEGATE = 10;
 
@@ -30,7 +32,7 @@ export const DelegateModal: FCWithChildren<{
     identityKey: string,
     amount: DecCoin,
     // tokenPool: TPoolOption,
-    // fee?: FeeDetails,
+    fee?: FeeDetails,
   ) => Promise<void>;
   identityKey?: string;
   onIdentityKeyChanged?: (identityKey: string) => void;
@@ -76,7 +78,30 @@ export const DelegateModal: FCWithChildren<{
   const [errorIdentityKey, setErrorIdentityKey] = useState<string>();
   const [mixIdError, setMixIdError] = useState<string>();
 
-  // const { fee, getFee, resetFeeState, feeError } = useGetFee();
+  const { fee, getFee, resetFeeState, feeError } = useGetFee();
+
+  const { username, connect, disconnect, wallet, openView, address, getCosmWasmClient, isWalletConnected } =
+    useChain('nyx');
+  const [balance, setBalance] = useState<{
+    status: 'loading' | 'success';
+    data?: string;
+  }>({ status: 'loading', data: undefined });
+
+  useEffect(() => {
+    const getBalance = async (walletAddress: string) => {
+      setBalance({ status: 'loading', data: undefined });
+
+      const account = await getCosmWasmClient();
+      const uNYMBalance = await account.getBalance(walletAddress, 'unym');
+      const NYMBalance = uNYMtoNYM(uNYMBalance.amount).asString();
+
+      setBalance({ status: 'success', data: NYMBalance });
+    };
+
+    if (address) {
+      getBalance(address);
+    }
+  }, [address, getCosmWasmClient]);
   // const { userBalance } = useContext(AppContext);
 
   // const handleCheckStakeSaturation = async (newMixId: number) => {
@@ -141,7 +166,7 @@ export const DelegateModal: FCWithChildren<{
 
   const handleOk = async () => {
     if (onOk && amount && identityKey && mixId) {
-      onOk(mixId, identityKey, { amount, denom }); //tokenPool, fee);
+      onOk(mixId, identityKey, { amount, denom }, fee); //tokenPool, fee);
     }
   };
 
@@ -293,7 +318,7 @@ export const DelegateModal: FCWithChildren<{
         />
       </Box>
       <Box sx={{ mt: 3 }}>
-        <ModalListItem label="Account balance" value={accountBalance?.toUpperCase()} divider fontWeight={600} />
+        <ModalListItem label="Account balance" value={balance.data} divider fontWeight={600} />
       </Box>
 
       <ModalListItem label="Rewards payout interval" value={rewardInterval} hidden divider />
diff --git a/explorer/src/components/Delegations/ErrorModal.tsx b/explorer/src/components/Delegations/components/ErrorModal.tsx
similarity index 91%
rename from explorer/src/components/Delegations/ErrorModal.tsx
rename to explorer/src/components/Delegations/components/ErrorModal.tsx
index 299760edcc1..5a5df420da2 100644
--- a/explorer/src/components/Delegations/ErrorModal.tsx
+++ b/explorer/src/components/Delegations/components/ErrorModal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Button, Modal, SxProps, Typography } from '@mui/material';
-import { modalStyle } from '../../../../nym-wallet/src/components/Modals/styles';
+import { modalStyle } from '../../../../../nym-wallet/src/components/Modals/styles';
 
 export const ErrorModal: FCWithChildren<{
   open: boolean;
diff --git a/explorer/src/components/Delegations/ModalListItem.tsx b/explorer/src/components/Delegations/components/ModalListItem.tsx
similarity index 91%
rename from explorer/src/components/Delegations/ModalListItem.tsx
rename to explorer/src/components/Delegations/components/ModalListItem.tsx
index c1fcc4bf4c6..c545358cf50 100644
--- a/explorer/src/components/Delegations/ModalListItem.tsx
+++ b/explorer/src/components/Delegations/components/ModalListItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Stack, SxProps, Typography, TypographyProps } from '@mui/material';
-import { ModalDivider } from '../../../../nym-wallet/src/components/Modals/ModalDivider';
+import { ModalDivider } from '../../../../../nym-wallet/src/components/Modals/ModalDivider';
 
 export const ModalListItem: FCWithChildren<{
   label: string;
diff --git a/explorer/src/components/Delegations/SimpleModal.tsx b/explorer/src/components/Delegations/components/SimpleModal.tsx
similarity index 97%
rename from explorer/src/components/Delegations/SimpleModal.tsx
rename to explorer/src/components/Delegations/components/SimpleModal.tsx
index 3db21c855fd..add63297311 100644
--- a/explorer/src/components/Delegations/SimpleModal.tsx
+++ b/explorer/src/components/Delegations/components/SimpleModal.tsx
@@ -3,7 +3,7 @@ import { Box, Button, Modal, Stack, SxProps, Typography } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import { modalStyle } from '../../../../nym-wallet/src/components/Modals/styles';
+import { modalStyle } from '../../../../../nym-wallet/src/components/Modals/styles';
 
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 
diff --git a/explorer/src/components/Delegations/config.ts b/explorer/src/components/Delegations/config.ts
new file mode 100644
index 00000000000..1b1f83ce1f2
--- /dev/null
+++ b/explorer/src/components/Delegations/config.ts
@@ -0,0 +1,4 @@
+export const config = {
+  IS_DEV_MODE: process.env.NODE_ENV === 'development',
+  LOG_TAURI_OPERATIONS: process.env.NODE_ENV === 'development',
+};
diff --git a/explorer/src/components/Delegations/context/accounts.tsx b/explorer/src/components/Delegations/context/accounts.tsx
new file mode 100644
index 00000000000..0ebf07cd09d
--- /dev/null
+++ b/explorer/src/components/Delegations/context/accounts.tsx
@@ -0,0 +1,170 @@
+import React, { createContext, Dispatch, SetStateAction, useContext, useEffect, useMemo, useState } from 'react';
+import { AccountEntry } from '@nymproject/types';
+import { addAccount as addAccountRequest, renameAccount, showMnemonicForAccount } from '../requests';
+import { useSnackbar } from 'notistack';
+import { AppContext } from './main';
+
+type TAccounts = {
+  accounts?: AccountEntry[];
+  selectedAccount?: AccountEntry;
+  accountToEdit?: AccountEntry;
+  dialogToDisplay?: TAccountsDialog;
+  isLoading: boolean;
+  error?: string;
+  accountMnemonic: TAccountMnemonic;
+  setError: Dispatch<SetStateAction<string | undefined>>;
+  setAccountMnemonic: Dispatch<SetStateAction<TAccountMnemonic>>;
+  handleAddAccount: (data: { accountName: string; mnemonic: string; password: string }) => void;
+  setDialogToDisplay: (dialog?: TAccountsDialog) => void;
+  handleSelectAccount: (data: { accountName: string; password: string }) => Promise<boolean>;
+  handleAccountToEdit: (accountId: string | undefined) => void;
+  handleEditAccount: ({
+    account,
+    newAccountName,
+    password,
+  }: {
+    account: AccountEntry;
+    newAccountName: string;
+    password: string;
+  }) => Promise<void>;
+  handleImportAccount: (account: AccountEntry) => void;
+  handleGetAccountMnemonic: (data: { password: string; accountName: string }) => void;
+};
+
+export type TAccountsDialog = 'Accounts' | 'Add' | 'Edit' | 'Import' | 'Mnemonic';
+export type TAccountMnemonic = { value?: string; accountName?: string };
+
+export const AccountsContext = createContext({} as TAccounts);
+
+export const AccountsProvider: FCWithChildren = ({ children }) => {
+  const [accounts, setAccounts] = useState<AccountEntry[]>([]);
+  const [selectedAccount, setSelectedAccount] = useState<AccountEntry>();
+  const [accountToEdit, setAccountToEdit] = useState<AccountEntry>();
+  const [dialogToDisplay, setDialogToDisplay] = useState<TAccountsDialog>();
+  const [accountMnemonic, setAccountMnemonic] = useState<TAccountMnemonic>({
+    value: undefined,
+    accountName: undefined,
+  });
+  const [error, setError] = useState<string>();
+  const [isLoading, setIsLoading] = useState(false);
+  const { onAccountChange, storedAccounts } = useContext(AppContext);
+  const { enqueueSnackbar } = useSnackbar();
+
+  const handleAddAccount = async ({
+    accountName,
+    mnemonic,
+    password,
+  }: {
+    accountName: string;
+    mnemonic: string;
+    password: string;
+  }) => {
+    setIsLoading(true);
+    try {
+      const newAccount = await addAccountRequest({
+        accountName,
+        mnemonic,
+        password,
+      });
+      setAccounts((accs) => [...accs, newAccount]);
+      enqueueSnackbar('New account created', { variant: 'success' });
+    } catch (e) {
+      setError(`Error adding account: ${e}`);
+      throw new Error();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleEditAccount = async ({
+    account,
+    newAccountName,
+    password,
+  }: {
+    account: AccountEntry;
+    newAccountName: string;
+    password: string;
+  }) => {
+    setIsLoading(true);
+    try {
+      await renameAccount({ accountName: account.id, newAccountName, password });
+      setAccounts((accs) =>
+        accs?.map((acc) => (acc.address === account.address ? { ...acc, id: newAccountName } : acc)),
+      );
+      if (selectedAccount?.id === account.id) {
+        setSelectedAccount({ ...selectedAccount, id: newAccountName });
+      }
+      setDialogToDisplay('Accounts');
+    } catch (e) {
+      throw new Error(`Error editing account: ${e}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleImportAccount = (account: AccountEntry) => setAccounts((accs) => [...(accs ? [...accs] : []), account]);
+
+  const handleAccountToEdit = (accountName: string | undefined) =>
+    setAccountToEdit(accounts?.find((acc) => acc.id === accountName));
+
+  const handleSelectAccount = async ({ accountName, password }: { accountName: string; password: string }) => {
+    try {
+      await onAccountChange({ accountId: accountName, password });
+      const match = accounts?.find((acc) => acc.id === accountName);
+      setSelectedAccount(match);
+      return true;
+    } catch (e) {
+      setError('Error switching account. Please check your password');
+      return false;
+    }
+  };
+
+  const handleGetAccountMnemonic = async ({ password, accountName }: { password: string; accountName: string }) => {
+    try {
+      setIsLoading(true);
+      const mnemonic = await showMnemonicForAccount({ password, accountName });
+      setAccountMnemonic({ value: mnemonic, accountName });
+    } catch (e) {
+      setError(e as string);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (storedAccounts) {
+      setAccounts(storedAccounts);
+    }
+
+    if (storedAccounts && !selectedAccount) {
+      setSelectedAccount(storedAccounts[0]);
+    }
+  }, [storedAccounts]);
+
+  return (
+    <AccountsContext.Provider
+      value={useMemo(
+        () => ({
+          error,
+          setError,
+          accounts,
+          selectedAccount,
+          accountToEdit,
+          dialogToDisplay,
+          accountMnemonic,
+          setDialogToDisplay,
+          setAccountMnemonic,
+          isLoading,
+          handleAddAccount,
+          handleEditAccount,
+          handleAccountToEdit,
+          handleSelectAccount,
+          handleImportAccount,
+          handleGetAccountMnemonic,
+        }),
+        [accounts, selectedAccount, accountToEdit, dialogToDisplay, isLoading, error, accountMnemonic],
+      )}
+    >
+      {children}
+    </AccountsContext.Provider>
+  );
+};
diff --git a/explorer/src/components/Delegations/context/buy.tsx b/explorer/src/components/Delegations/context/buy.tsx
new file mode 100644
index 00000000000..ff251ec631d
--- /dev/null
+++ b/explorer/src/components/Delegations/context/buy.tsx
@@ -0,0 +1,59 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { sign } from '../requests';
+// import { Console } from 'src/utils/console';
+// import { AppContext } from './main';
+
+export type TBuyContext = {
+  loading: boolean;
+  error?: string;
+  signMessage: (message: string) => Promise<string | undefined>;
+  refresh: () => Promise<void>;
+};
+
+export const BuyContext = createContext<TBuyContext>({
+  loading: false,
+  signMessage: async () => '',
+  refresh: async () => undefined,
+});
+
+export const BuyContextProvider: FCWithChildren = ({ children }): JSX.Element => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string>();
+
+  const refresh = useCallback(async () => {
+    setError(undefined);
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const signMessage = async (message: string) => {
+    let signature;
+    setLoading(true);
+    try {
+      signature = await sign(message);
+    } catch (e: any) {
+      // Console.log(`Sign message operation failed: ${e}`);
+      console.log('`Sign message operation failed: ${e}` :>> ', `Sign message operation failed: ${e}`);
+      setError(`Sign message operation failed: ${e}`);
+    } finally {
+      setLoading(false);
+    }
+    return signature;
+  };
+
+  const memoizedValue = useMemo(
+    () => ({
+      loading,
+      error,
+      refresh,
+      signMessage,
+    }),
+    [loading, error],
+  );
+
+  return <BuyContext.Provider value={memoizedValue}>{children}</BuyContext.Provider>;
+};
+
+export const useBuyContext = () => useContext<TBuyContext>(BuyContext);
diff --git a/explorer/src/components/Delegations/context/index.tsx b/explorer/src/components/Delegations/context/index.tsx
new file mode 100644
index 00000000000..99830227285
--- /dev/null
+++ b/explorer/src/components/Delegations/context/index.tsx
@@ -0,0 +1,3 @@
+export * from './main';
+export * from './accounts';
+export * from './buy';
diff --git a/explorer/src/components/Delegations/context/main.tsx b/explorer/src/components/Delegations/context/main.tsx
new file mode 100644
index 00000000000..a623ddadae2
--- /dev/null
+++ b/explorer/src/components/Delegations/context/main.tsx
@@ -0,0 +1,367 @@
+import React, { createContext, useEffect, useMemo, useState } from 'react';
+import { forage } from '@tauri-apps/tauri-forage';
+import { useNavigate } from 'react-router-dom';
+import { useSnackbar } from 'notistack';
+import { Account, AccountEntry, MixNodeDetails } from '@nymproject/types';
+import { getVersion } from '@tauri-apps/api/app';
+import { AppEnv, Network } from '../types';
+import { TUseuserBalance, useGetBalance } from '../hooks/useGetBalance';
+import {
+  getEnv,
+  getMixnodeBondDetails,
+  listAccounts,
+  selectNetwork,
+  signInWithMnemonic,
+  signInWithPassword,
+  signOut,
+  switchAccount,
+} from '../requests';
+import Big from 'big.js';
+
+// import { Console } from '../utils/console';
+import { createSignInWindow, getReactState, setReactState } from '../requests/app';
+// import { toDisplay } from '../utils';
+
+const toDisplay = (val: string | number | Big, dp = 4) => {
+  let displayValue;
+  try {
+    displayValue = Big(val).toFixed(dp);
+  } catch (e: any) {
+    // Console.warn(`${displayValue} not a valid decimal number: ${e}`);
+    console.log('object :>> ', `${displayValue} not a valid decimal number: ${e}`);
+  }
+  return displayValue;
+};
+
+export const urls = (networkName?: Network) =>
+  networkName === 'MAINNET'
+    ? {
+        mixnetExplorer: 'https://mixnet.explorers.guru/',
+        blockExplorer: 'https://blocks.nymtech.net',
+        networkExplorer: 'https://explorer.nymtech.net',
+      }
+    : {
+        blockExplorer: `https://${networkName}-blocks.nymtech.net`,
+        networkExplorer: `https://${networkName}-explorer.nymtech.net`,
+      };
+
+type TLoginType = 'mnemonic' | 'password';
+
+export type TAppContext = {
+  mode: 'light' | 'dark';
+  appEnv?: AppEnv;
+  appVersion?: string;
+  clientDetails?: Account;
+  storedAccounts?: AccountEntry[];
+  mixnodeDetails?: MixNodeDetails | null;
+  userBalance: TUseuserBalance;
+  showAdmin: boolean;
+  showTerminal: boolean;
+  network?: Network;
+  isLoading: boolean;
+  isAdminAddress: boolean;
+  error?: string;
+  loginType?: TLoginType;
+  showSendModal: boolean;
+  showReceiveModal: boolean;
+  onAccountChange: ({ accountId, password }: { accountId: string; password: string }) => void;
+  handleSwitchMode: () => void;
+  handleShowSendModal: () => void;
+  handleShowReceiveModal: () => void;
+  setIsLoading: (isLoading: boolean) => void;
+  setError: (value?: string) => void;
+  switchNetwork: (network: Network) => void;
+  getBondDetails: () => Promise<void>;
+  handleShowAdmin: () => void;
+  logIn: (opts: { type: TLoginType; value: string }) => void;
+  handleShowTerminal: () => void;
+  signInWithPassword: (password: string) => void;
+  logOut: () => void;
+  keepState: () => Promise<void>;
+  printBalance: string;
+  printVestedBalance?: string; // spendable vested token
+};
+
+interface RustState {
+  network?: Network;
+  loginType?: 'mnemonic' | 'password';
+}
+
+export const AppContext = createContext({} as TAppContext);
+
+export const AppProvider: FCWithChildren = ({ children }) => {
+  const [clientDetails, setClientDetails] = useState<Account>();
+  const [storedAccounts, setStoredAccounts] = useState<AccountEntry[]>();
+  const [mixnodeDetails, setMixnodeDetails] = useState<MixNodeDetails | null>(null);
+  const [network, setNetwork] = useState<Network | undefined>();
+  const [appEnv, setAppEnv] = useState<AppEnv>();
+  const [showAdmin, setShowAdmin] = useState(false);
+  const [showTerminal, setShowTerminal] = useState(false);
+  const [mode, setMode] = useState<'light' | 'dark'>('light');
+  const [loginType, setLoginType] = useState<'mnemonic' | 'password'>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>();
+  const [appVersion, setAppVersion] = useState<string>();
+  const [isAdminAddress, setIsAdminAddress] = useState<boolean>(false);
+  const [showSendModal, setShowSendModal] = useState(false);
+  const [showReceiveModal, setShowReceiveModal] = useState(false);
+  const [printBalance, setPrintBalance] = useState<string>('-');
+  const [printVestedBalance, setPrintVestedBalance] = useState<string | undefined>();
+
+  const userBalance = useGetBalance(clientDetails);
+  const navigate = useNavigate();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const initFromRustState = async () => {
+    const stateJson = await getReactState();
+    if (stateJson) {
+      const state: RustState = JSON.parse(stateJson);
+      setNetwork(state.network);
+      setLoginType(state.loginType);
+    }
+  };
+
+  useEffect(() => {
+    initFromRustState();
+  }, []);
+
+  const keepState = async () => {
+    // add any state from this context to store in the Rust process
+    const state: RustState = {
+      network,
+      loginType,
+    };
+    setReactState(JSON.stringify(state));
+  };
+
+  const clearState = () => {
+    userBalance.clearAll();
+    setStoredAccounts(undefined);
+    setNetwork(undefined);
+    setError(undefined);
+    setIsLoading(false);
+    setMixnodeDetails(null);
+  };
+
+  const loadAccount = async (n: Network) => {
+    try {
+      const client = await selectNetwork(n);
+      setClientDetails(client);
+    } catch (e) {
+      enqueueSnackbar('Error loading account', { variant: 'error' });
+      // Console.error(e as string);
+    }
+  };
+
+  const loadStoredAccounts = async () => {
+    const accounts = await listAccounts();
+    setStoredAccounts(accounts);
+  };
+
+  const getBondDetails = async () => {
+    setMixnodeDetails(null);
+    try {
+      const mixnode = await getMixnodeBondDetails();
+      setMixnodeDetails(mixnode);
+    } catch (e) {
+      // Console.error(e as string);
+    }
+  };
+
+  const refreshAccount = async (_network: Network) => {
+    await loadAccount(_network);
+    if (loginType === 'password') {
+      await loadStoredAccounts();
+    }
+  };
+
+  const getModeFromStorage = async () => {
+    try {
+      const modeFromStorage = await forage.getItem({ key: 'nym-wallet-mode' })();
+      if (modeFromStorage) setMode(modeFromStorage);
+    } catch (e) {
+      // Console.error(e);
+    }
+  };
+
+  const setModeInStorage = async (newMode: 'light' | 'dark') => {
+    await forage.setItem({
+      key: 'nym-wallet-mode',
+      value: newMode,
+    })();
+  };
+
+  useEffect(() => {
+    getVersion().then(setAppVersion);
+    getModeFromStorage();
+  }, []);
+
+  useEffect(() => {
+    if (!clientDetails) {
+      clearState();
+      navigate('/');
+    }
+  }, [clientDetails]);
+
+  useEffect(() => {
+    if (network) {
+      refreshAccount(network);
+      getEnv().then(setAppEnv);
+    }
+  }, [network]);
+
+  useEffect(() => {
+    const currency = clientDetails?.display_mix_denom.toUpperCase() || 'NYM';
+    if (userBalance.originalVesting) {
+      setPrintVestedBalance(`${toDisplay(userBalance.tokenAllocation?.spendableVestedCoins || 0)} ${currency}`);
+    }
+    if (userBalance?.balance?.amount) {
+      setPrintBalance(`${toDisplay(userBalance.balance.amount.amount)} ${currency}`);
+    } else {
+      setPrintBalance(`${toDisplay(0)} ${currency}`);
+    }
+  }, [userBalance, clientDetails]);
+
+  useEffect(() => {
+    let newValue = false;
+    if (network && appEnv?.ADMIN_ADDRESS && clientDetails?.client_address) {
+      try {
+        const adminAddressMap = JSON.parse(appEnv.ADMIN_ADDRESS);
+        const adminAddresses = adminAddressMap[network] || [];
+        if (adminAddresses.length) {
+          newValue = adminAddresses.includes(clientDetails?.client_address);
+          if (newValue) {
+            // Console.log('Wallet is in admin mode: ', {
+            //   network,
+            //   adminAddress: adminAddressMap[network],
+            //   clientAddress: clientDetails?.client_address,
+            // });
+          }
+        }
+      } catch (e) {
+        // Console.error('Failed to check admin addresses', e);
+      }
+    }
+    setIsAdminAddress(newValue);
+  }, [appEnv, network, clientDetails?.client_address]);
+
+  const logIn = async ({ type, value }: { type: TLoginType; value: string }) => {
+    if (value.length === 0) {
+      setError(`A ${type} must be provided`);
+      return;
+    }
+    try {
+      setIsLoading(true);
+      if (type === 'mnemonic') {
+        await signInWithMnemonic(value);
+        setLoginType('mnemonic');
+      } else {
+        await signInWithPassword(value);
+        setLoginType('password');
+      }
+      setNetwork('MAINNET');
+      navigate('/balance');
+    } catch (e) {
+      setError(e as string);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const logOut = async () => {
+    setIsLoading(true);
+    try {
+      await signOut();
+      await setReactState(undefined);
+      setClientDetails(undefined);
+      enqueueSnackbar('Successfully logged out', { variant: 'success' });
+      await createSignInWindow();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const onAccountChange = async ({ accountId, password }: { accountId: string; password: string }) => {
+    if (network) {
+      setIsLoading(true);
+      try {
+        await switchAccount({ accountId, password });
+        await loadAccount(network);
+        enqueueSnackbar('Account switch success', { variant: 'success', preventDuplicate: true });
+      } catch (e) {
+        throw new Error(`Error swtiching account: ${e}`);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  const handleShowAdmin = () => setShowAdmin((show) => !show);
+  const handleShowTerminal = () => setShowTerminal((show) => !show);
+  const switchNetwork = (_network: Network) => setNetwork(_network);
+  const handleShowSendModal = () => setShowSendModal((show) => !show);
+  const handleShowReceiveModal = () => setShowReceiveModal((show) => !show);
+  const handleSwitchMode = () =>
+    setMode((currentMode) => {
+      const newMode = currentMode === 'light' ? 'dark' : 'light';
+      setModeInStorage(newMode);
+      return newMode;
+    });
+
+  const memoizedValue = useMemo(
+    () => ({
+      mode,
+      appEnv,
+      appVersion,
+      isAdminAddress,
+      isLoading,
+      error,
+      clientDetails,
+      storedAccounts,
+      mixnodeDetails,
+      userBalance,
+      showAdmin,
+      showTerminal,
+      network,
+      loginType,
+      setIsLoading,
+      setError,
+      signInWithPassword,
+      switchNetwork,
+      getBondDetails,
+      handleShowAdmin,
+      handleShowTerminal,
+      logIn,
+      logOut,
+      keepState,
+      onAccountChange,
+      showSendModal,
+      showReceiveModal,
+      handleShowSendModal,
+      handleShowReceiveModal,
+      handleSwitchMode,
+      printBalance,
+      printVestedBalance,
+    }),
+    [
+      appVersion,
+      loginType,
+      isAdminAddress,
+      mode,
+      appEnv,
+      isLoading,
+      error,
+      clientDetails,
+      mixnodeDetails,
+      userBalance,
+      showAdmin,
+      network,
+      storedAccounts,
+      showTerminal,
+      showSendModal,
+      showReceiveModal,
+    ],
+  );
+
+  return <AppContext.Provider value={memoizedValue}>{children}</AppContext.Provider>;
+};
diff --git a/explorer/src/components/Delegations/hooks/useCheckOwnership.ts b/explorer/src/components/Delegations/hooks/useCheckOwnership.ts
new file mode 100644
index 00000000000..50de27a1e8c
--- /dev/null
+++ b/explorer/src/components/Delegations/hooks/useCheckOwnership.ts
@@ -0,0 +1,59 @@
+import { useCallback, useContext, useEffect, useState } from 'react';
+// import { Console } from '../utils/console';
+// eslint-disable-next-line import/no-cycle
+import { AppContext } from '../context/main';
+import { checkGatewayOwnership, checkMixnodeOwnership, getVestingPledgeInfo } from '../requests';
+import { EnumNodeType, TNodeOwnership } from '../types';
+
+const initial: TNodeOwnership = {
+  hasOwnership: false,
+  nodeType: undefined,
+  vestingPledge: undefined,
+};
+
+export const useCheckOwnership = () => {
+  const { clientDetails } = useContext(AppContext);
+
+  const [ownership, setOwnership] = useState<TNodeOwnership>(initial);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string>();
+
+  const checkOwnership = useCallback(async () => {
+    const status = { ...initial };
+    try {
+      const [ownsMixnode, ownsGateway] = await Promise.all([checkMixnodeOwnership(), checkGatewayOwnership()]);
+
+      if (ownsMixnode) {
+        status.hasOwnership = true;
+        status.nodeType = EnumNodeType.mixnode;
+        status.vestingPledge = await getVestingPledgeInfo({
+          address: clientDetails?.client_address!,
+          type: EnumNodeType.mixnode,
+        });
+      }
+
+      if (ownsGateway) {
+        status.hasOwnership = true;
+        status.nodeType = EnumNodeType.gateway;
+        status.vestingPledge = await getVestingPledgeInfo({
+          address: clientDetails?.client_address!,
+          type: EnumNodeType.gateway,
+        });
+      }
+
+      setOwnership(status);
+    } catch (e) {
+      // Console.error(e as string);
+      setError(e as string);
+      setOwnership(initial);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [clientDetails]);
+
+  useEffect(() => {
+    checkOwnership();
+  }, [clientDetails]);
+
+  return { isLoading, error, ownership, checkOwnership };
+};
diff --git a/explorer/src/components/Delegations/hooks/useGetBalance.ts b/explorer/src/components/Delegations/hooks/useGetBalance.ts
new file mode 100644
index 00000000000..8f4b2803006
--- /dev/null
+++ b/explorer/src/components/Delegations/hooks/useGetBalance.ts
@@ -0,0 +1,147 @@
+/* eslint-disable import/no-cycle */
+import { useCallback, useEffect, useState } from 'react';
+import { Account, Balance, DecCoin, OriginalVestingResponse, Period, VestingAccountInfo } from '@nymproject/types';
+import {
+  getVestingCoins,
+  getVestedCoins,
+  getLockedCoins,
+  getSpendableCoins,
+  getOriginalVesting,
+  getCurrentVestingPeriod,
+  getVestingAccountInfo,
+  getSpendableRewardCoins,
+  getSpendableVestedCoins,
+  userBalance,
+} from '../requests';
+// import { Console } from '../utils/console';
+
+type TTokenAllocation = {
+  [key in
+    | 'vesting'
+    | 'vested'
+    | 'locked'
+    | 'spendable'
+    | 'spendableRewardCoins'
+    | 'spendableVestedCoins']: DecCoin['amount'];
+};
+
+export type TUseuserBalance = {
+  error?: string;
+  balance?: Balance;
+  tokenAllocation?: TTokenAllocation;
+  originalVesting?: OriginalVestingResponse;
+  currentVestingPeriod?: Period;
+  vestingAccountInfo?: VestingAccountInfo;
+  isLoading: boolean;
+  fetchBalance: () => Promise<void>;
+  fetchTokenAllocation: () => Promise<void>;
+  clearBalance: () => void;
+  clearAll: () => void;
+  refreshBalances: () => Promise<void>;
+};
+
+export const useGetBalance = (clientDetails?: Account): TUseuserBalance => {
+  const [balance, setBalance] = useState<Balance>();
+  const [error, setError] = useState<string>();
+  const [tokenAllocation, setTokenAllocation] = useState<TTokenAllocation>();
+  const [originalVesting, setOriginalVesting] = useState<OriginalVestingResponse>();
+  const [currentVestingPeriod, setCurrentVestingPeriod] = useState<Period>();
+  const [vestingAccountInfo, setVestingAccountInfo] = useState<VestingAccountInfo>();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const clearBalance = () => setBalance(undefined);
+  const clearTokenAllocation = () => setTokenAllocation(undefined);
+  const clearOriginalVesting = () => setOriginalVesting(undefined);
+
+  const fetchTokenAllocation = async () => {
+    setIsLoading(true);
+    if (clientDetails?.client_address) {
+      try {
+        const [
+          originalVestingValue,
+          vestingCoins,
+          vestedCoins,
+          lockedCoins,
+          spendableCoins,
+          spendableVestedCoins,
+          spendableRewardCoins,
+          currentPeriod,
+          vestingAccountDetail,
+        ] = await Promise.all([
+          getOriginalVesting(clientDetails?.client_address),
+          getVestingCoins(clientDetails?.client_address),
+          getVestedCoins(clientDetails?.client_address),
+          getLockedCoins(),
+          getSpendableCoins(),
+          getSpendableVestedCoins(),
+          getSpendableRewardCoins(),
+          getCurrentVestingPeriod(clientDetails?.client_address),
+          getVestingAccountInfo(clientDetails?.client_address),
+        ]);
+        setOriginalVesting(originalVestingValue);
+        setCurrentVestingPeriod(currentPeriod);
+        setTokenAllocation({
+          vesting: vestingCoins.amount,
+          vested: vestedCoins.amount,
+          locked: lockedCoins.amount,
+          spendable: spendableCoins.amount,
+          spendableVestedCoins: spendableVestedCoins.amount,
+          spendableRewardCoins: spendableRewardCoins.amount,
+        });
+        setVestingAccountInfo(vestingAccountDetail);
+      } catch (e) {
+        clearTokenAllocation();
+        clearOriginalVesting();
+        // Console.error(e as string);
+      }
+    }
+    setIsLoading(false);
+  };
+
+  const fetchBalance = useCallback(async () => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      const bal = await userBalance();
+      setBalance(bal);
+    } catch (err) {
+      setError(err as string);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const clearAll = () => {
+    clearBalance();
+    clearTokenAllocation();
+    clearOriginalVesting();
+  };
+
+  const refreshBalances = async () => {
+    if (clientDetails?.client_address) {
+      await fetchBalance();
+      await fetchTokenAllocation();
+    } else {
+      clearAll();
+    }
+  };
+
+  useEffect(() => {
+    refreshBalances();
+  }, [clientDetails]);
+
+  return {
+    error,
+    isLoading,
+    balance,
+    tokenAllocation,
+    originalVesting,
+    currentVestingPeriod,
+    vestingAccountInfo,
+    fetchBalance,
+    clearBalance,
+    clearAll,
+    fetchTokenAllocation,
+    refreshBalances,
+  };
+};
diff --git a/explorer/src/components/Delegations/hooks/useGetFee.ts b/explorer/src/components/Delegations/hooks/useGetFee.ts
new file mode 100644
index 00000000000..c38a1714f88
--- /dev/null
+++ b/explorer/src/components/Delegations/hooks/useGetFee.ts
@@ -0,0 +1,49 @@
+import { DecCoin, FeeDetails } from '@nymproject/types';
+import { useState } from 'react';
+// import { Console } from 'src/utils/console';
+import { getCustomFees } from '../requests';
+
+export function useGetFee() {
+  const [fee, setFee] = useState<FeeDetails>();
+  const [isFeeLoading, setIsFeeLoading] = useState(false);
+  const [feeError, setFeeError] = useState<string>();
+
+  async function getFee<T>(operation: (args: T) => Promise<FeeDetails>, args: T) {
+    try {
+      setIsFeeLoading(true);
+      const simulatedFee = await operation(args);
+      setFee(simulatedFee);
+    } catch (e) {
+      // Console.error(e);
+      setFeeError(e as string);
+    }
+    setIsFeeLoading(false);
+  }
+
+  async function setFeeManually(amount: DecCoin) {
+    try {
+      setIsFeeLoading(true);
+      const fees = await getCustomFees({ feesAmount: amount });
+      setFee(fees);
+    } catch (e) {
+      // Console.error(e);
+      setFeeError(e as string);
+    }
+    setIsFeeLoading(false);
+  }
+
+  const resetFeeState = () => {
+    setFee(undefined);
+    setIsFeeLoading(false);
+    setFeeError(undefined);
+  };
+
+  return {
+    fee,
+    isFeeLoading,
+    feeError,
+    getFee,
+    setFeeManually,
+    resetFeeState,
+  };
+}
diff --git a/explorer/src/components/Delegations/hooks/useKeyPress.ts b/explorer/src/components/Delegations/hooks/useKeyPress.ts
new file mode 100644
index 00000000000..73eb81598ee
--- /dev/null
+++ b/explorer/src/components/Delegations/hooks/useKeyPress.ts
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+export function useKeyPress(targetKey: string): boolean {
+  // State for keeping track of whether key is pressed
+  const [keyPressed, setKeyPressed] = useState(false);
+  // If pressed key is our target key then set to true
+  function downHandler({ key }: { key: string }): void {
+    if (key === targetKey) {
+      setKeyPressed(true);
+    }
+  }
+  // If released key is our target key then set to false
+  const upHandler = ({ key }: { key: string }): void => {
+    if (key === targetKey) {
+      setKeyPressed(false);
+    }
+  };
+  // Add event listeners
+  useEffect(() => {
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+    // Remove event listeners on cleanup
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, []); // Empty array ensures that effect is only run on mount and unmount
+  return keyPressed;
+}
diff --git a/explorer/src/components/Delegations/requests/account.ts b/explorer/src/components/Delegations/requests/account.ts
new file mode 100644
index 00000000000..daf150afd14
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/account.ts
@@ -0,0 +1,67 @@
+import { Account, Balance, AccountEntry } from '@nymproject/types';
+import { invokeWrapper } from './wrapper';
+
+export const signInWithMnemonic = async (mnemonic: string): Promise<Account> =>
+  invokeWrapper('connect_with_mnemonic', { mnemonic });
+
+export const userBalance = async () => invokeWrapper<Balance>('get_balance');
+
+export const createMnemonic = async () => invokeWrapper<string>('create_new_mnemonic');
+
+export const validateMnemonic = async (mnemonic: string) => invokeWrapper<boolean>('validate_mnemonic', { mnemonic });
+
+export const signOut = async () => invokeWrapper<void>('logout');
+
+export const isPasswordCreated = async () => invokeWrapper<boolean>('does_password_file_exist');
+
+export const createPassword = async ({ mnemonic, password }: { mnemonic: string; password: string }) =>
+  invokeWrapper<void>('create_password', { mnemonic, password });
+
+export const updatePassword = async ({
+  currentPassword,
+  newPassword,
+}: {
+  currentPassword: string;
+  newPassword: string;
+}) => invokeWrapper<void>('update_password', { currentPassword, newPassword });
+
+export const signInWithPassword = async (password: string) =>
+  invokeWrapper<Account>('sign_in_with_password', { password });
+
+export const switchAccount = async ({ accountId, password }: { accountId: string; password: string }) =>
+  invokeWrapper<Account>('sign_in_with_password_and_account_id', { accountId, password });
+
+export const addAccount = async ({
+  mnemonic,
+  password,
+  accountName,
+}: {
+  mnemonic: string;
+  password: string;
+  accountName: string;
+}) => invokeWrapper<AccountEntry>('add_account_for_password', { mnemonic, password, accountId: accountName });
+
+export const removeAccount = async ({ password, accountName }: { password: string; accountName: string }) =>
+  invokeWrapper<void>('remove_account_for_password', { password, innerId: accountName });
+
+export const listAccounts = async () => invokeWrapper<AccountEntry[]>('list_accounts');
+
+export const archiveWalletFile = async () => invokeWrapper<void>('archive_wallet_file');
+
+export const showMnemonicForAccount = async ({ password, accountName }: { password: string; accountName: string }) =>
+  invokeWrapper<string>('show_mnemonic_for_account_in_password', { password, accountId: accountName });
+
+export const renameAccount = async ({
+  password,
+  accountName,
+  newAccountName,
+}: {
+  password: string;
+  accountName: string;
+  newAccountName: string;
+}) =>
+  invokeWrapper<AccountEntry>('rename_account_for_password', {
+    password,
+    accountId: accountName,
+    newAccountId: newAccountName,
+  });
diff --git a/explorer/src/components/Delegations/requests/actions.ts b/explorer/src/components/Delegations/requests/actions.ts
new file mode 100644
index 00000000000..cf09085d5fa
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/actions.ts
@@ -0,0 +1,54 @@
+import {
+  Fee,
+  DecCoin,
+  SendTxResult,
+  TransactionExecuteResult,
+  MixNodeConfigUpdate,
+  MixNodeCostParams,
+  GatewayConfigUpdate,
+} from '@nymproject/types';
+import {
+  EnumNodeType,
+  TBondGatewayArgs,
+  TBondGatewaySignatureArgs,
+  TBondMixNodeArgs,
+  TBondMixnodeSignatureArgs,
+  TUpdateBondArgs,
+} from '../types';
+import { invokeWrapper } from './wrapper';
+
+export const bondGateway = async (args: TBondGatewayArgs) =>
+  invokeWrapper<TransactionExecuteResult>('bond_gateway', args);
+
+export const generateGatewayMsgPayload = async (args: Omit<TBondGatewaySignatureArgs, 'tokenPool'>) =>
+  invokeWrapper<string>('generate_gateway_bonding_msg_payload', args);
+
+export const unbondGateway = async (fee?: Fee) => invokeWrapper<TransactionExecuteResult>('unbond_gateway', { fee });
+
+export const bondMixNode = async (args: TBondMixNodeArgs) =>
+  invokeWrapper<TransactionExecuteResult>('bond_mixnode', args);
+
+export const generateMixnodeMsgPayload = async (args: Omit<TBondMixnodeSignatureArgs, 'tokenPool'>) =>
+  invokeWrapper<string>('generate_mixnode_bonding_msg_payload', args);
+
+export const unbondMixNode = async (fee?: Fee) => invokeWrapper<TransactionExecuteResult>('unbond_mixnode', { fee });
+
+export const updateMixnodeCostParams = async (newCosts: MixNodeCostParams, fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('update_mixnode_cost_params', { newCosts, fee });
+
+export const updateMixnodeConfig = async (update: MixNodeConfigUpdate, fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('update_mixnode_config', { update, fee });
+
+export const updateGatewayConfig = async (update: GatewayConfigUpdate, fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('update_gateway_config', { update, fee });
+
+export const send = async (args: { amount: DecCoin; address: string; memo: string; fee?: Fee }) =>
+  invokeWrapper<SendTxResult>('send', args);
+
+export const unbond = async (type: EnumNodeType) => {
+  if (type === EnumNodeType.mixnode) return unbondMixNode();
+  return unbondGateway();
+};
+
+export const updateBond = async (args: TUpdateBondArgs) =>
+  invokeWrapper<TransactionExecuteResult>('update_pledge', args);
diff --git a/explorer/src/components/Delegations/requests/app.ts b/explorer/src/components/Delegations/requests/app.ts
new file mode 100644
index 00000000000..acecfa8f258
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/app.ts
@@ -0,0 +1,14 @@
+import { invokeWrapper } from './wrapper';
+import { AppVersion } from '../types/rust/AppVersion';
+
+export const checkVersion = async () => invokeWrapper<AppVersion>('check_version');
+
+export const createMainWindow = async (): Promise<void> => invokeWrapper<void>('create_main_window');
+
+export const createSignInWindow = async (): Promise<void> => invokeWrapper<void>('create_auth_window');
+
+export const setReactState = async (newState?: string): Promise<void> =>
+  invokeWrapper<void>('set_react_state', { newState });
+
+export const getReactState = async (): Promise<string | undefined> =>
+  invokeWrapper<string | undefined>('get_react_state');
diff --git a/explorer/src/components/Delegations/requests/contract.ts b/explorer/src/components/Delegations/requests/contract.ts
new file mode 100644
index 00000000000..eb5a863bcc5
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/contract.ts
@@ -0,0 +1,7 @@
+import { TauriContractStateParams } from '../types';
+import { invokeWrapper } from './wrapper';
+
+export const getContractParams = async () => invokeWrapper<TauriContractStateParams>('get_contract_settings');
+
+export const setContractParams = async (params: TauriContractStateParams) =>
+  invokeWrapper<TauriContractStateParams>('update_contract_settings', { params });
diff --git a/explorer/src/components/Delegations/requests/delegation.ts b/explorer/src/components/Delegations/requests/delegation.ts
new file mode 100644
index 00000000000..d68d8a9084f
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/delegation.ts
@@ -0,0 +1,33 @@
+import {
+  DelegationWithEverything,
+  DelegationsSummaryResponse,
+  TransactionExecuteResult,
+  DecCoin,
+  FeeDetails,
+  Fee,
+} from '@nymproject/types';
+import { invokeWrapper } from './wrapper';
+
+export const getMixNodeDelegationsForCurrentAccount = async () =>
+  invokeWrapper<DelegationWithEverything[]>('get_all_mix_delegations');
+
+export const getDelegationSummary = async () => invokeWrapper<DelegationsSummaryResponse>('get_delegation_summary');
+
+export const undelegateFromMixnode = async (mixId: number, fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('undelegate_from_mixnode', { mixId, fee });
+
+export const undelegateAllFromMixnode = async (
+  mixId: number,
+  usesVestingContractTokens: boolean,
+  fee_liquid?: FeeDetails,
+  fee_vesting?: FeeDetails,
+) =>
+  invokeWrapper<TransactionExecuteResult[]>('undelegate_all_from_mixnode', {
+    mixId,
+    usesVestingContractTokens,
+    fee_liquid,
+    fee_vesting,
+  });
+
+export const delegateToMixnode = async (mixId: number, amount: DecCoin, fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('delegate_to_mixnode', { mixId, amount, fee });
diff --git a/explorer/src/components/Delegations/requests/index.ts b/explorer/src/components/Delegations/requests/index.ts
new file mode 100644
index 00000000000..e6fb5e482cc
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/index.ts
@@ -0,0 +1,14 @@
+export * from './app';
+export * from './account';
+export * from './actions';
+export * from './contract';
+export * from './delegation';
+export * from './logging';
+export * from './network';
+export * from './queries';
+export * from './rewards';
+export * from './signature';
+export * from './simulate';
+export * from './utils';
+export * from './vesting';
+export * from './pendingEvents';
diff --git a/explorer/src/components/Delegations/requests/logging.ts b/explorer/src/components/Delegations/requests/logging.ts
new file mode 100644
index 00000000000..307f65d6724
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/logging.ts
@@ -0,0 +1,3 @@
+import { invokeWrapper } from './wrapper';
+
+export const helpLogToggleWindow = async () => invokeWrapper<void>('help_log_toggle_window', {});
diff --git a/explorer/src/components/Delegations/requests/network.ts b/explorer/src/components/Delegations/requests/network.ts
new file mode 100644
index 00000000000..248207e6165
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/network.ts
@@ -0,0 +1,16 @@
+import { Account } from '@nymproject/types';
+import { Network } from '../types';
+import { invokeWrapper } from './wrapper';
+
+export const selectNetwork = async (network: Network) => invokeWrapper<Account>('switch_network', { network });
+
+export const getSelectedValidatorUrl = async (network: Network) =>
+  invokeWrapper<string | null>('get_selected_nyxd_url', { network });
+
+export const getDefaultValidatorUrl = async (network: Network) =>
+  invokeWrapper<string | null>('get_default_nyxd_url', { network });
+
+export const setSelectedValidatorUrl = async (args: { network: Network; url: string }) =>
+  invokeWrapper<void>('select_nyxd_url', args);
+
+export const resetValidatorUrl = async (network: Network) => invokeWrapper<void>('reset_nyxd_url', { network });
diff --git a/explorer/src/components/Delegations/requests/pendingEvents.ts b/explorer/src/components/Delegations/requests/pendingEvents.ts
new file mode 100644
index 00000000000..c92954a2374
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/pendingEvents.ts
@@ -0,0 +1,4 @@
+import { PendingEpochEvent } from '@nymproject/types';
+import { invokeWrapper } from './wrapper';
+
+export const getPendingEpochEvents = async () => invokeWrapper<PendingEpochEvent[]>('get_pending_epoch_events');
diff --git a/explorer/src/components/Delegations/requests/queries.ts b/explorer/src/components/Delegations/requests/queries.ts
new file mode 100644
index 00000000000..63004176acd
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/queries.ts
@@ -0,0 +1,63 @@
+import {
+  DecCoin,
+  GatewayBond,
+  InclusionProbabilityResponse,
+  MixNodeDetails,
+  MixnodeStatusResponse,
+  PendingIntervalEvent,
+  RewardEstimationResponse,
+  StakeSaturationResponse,
+  WrappedDelegationEvent,
+} from '@nymproject/types';
+import { Interval, TGatewayReport, TNodeDescription } from '../types';
+import { invokeWrapper } from './wrapper';
+
+export const getAllPendingDelegations = async () =>
+  invokeWrapper<WrappedDelegationEvent[]>('get_pending_delegation_events');
+
+export const getMixnodeBondDetails = async () => invokeWrapper<MixNodeDetails | null>('mixnode_bond_details');
+export const getGatewayBondDetails = async () => invokeWrapper<GatewayBond | null>('gateway_bond_details');
+export const getMixnodeAvgUptime = async () => invokeWrapper<number | null>('get_mixnode_avg_uptime');
+
+export const getPendingOperatorRewards = async (address: string) =>
+  invokeWrapper<DecCoin>('get_pending_operator_rewards', { address });
+
+export const getMixnodeStakeSaturation = async (mixId: number) =>
+  invokeWrapper<StakeSaturationResponse>('mixnode_stake_saturation', { mixId });
+
+export const getMixnodeRewardEstimation = async (mixId: number) =>
+  invokeWrapper<RewardEstimationResponse>('mixnode_reward_estimation', { mixId });
+
+export const getMixnodeStatus = async (mixId: number) =>
+  invokeWrapper<MixnodeStatusResponse>('mixnode_status', { mixId });
+
+export const checkMixnodeOwnership = async () => invokeWrapper<boolean>('owns_mixnode');
+
+export const checkGatewayOwnership = async () => invokeWrapper<boolean>('owns_gateway');
+
+export const getInclusionProbability = async (mixId: number) =>
+  invokeWrapper<InclusionProbabilityResponse>('mixnode_inclusion_probability', { mixId });
+
+export const getCurrentInterval = async () => invokeWrapper<Interval>('get_current_interval');
+
+export const getNumberOfMixnodeDelegators = async (mixId: number) =>
+  invokeWrapper<number>('get_number_of_mixnode_delegators', { mixId });
+
+export const getNodeDescription = async (host: string, port: number) =>
+  invokeWrapper<TNodeDescription>('get_mix_node_description', { host, port });
+
+export const getPendingIntervalEvents = async () =>
+  invokeWrapper<PendingIntervalEvent[]>('get_pending_interval_events');
+
+export const getGatewayReport = async (identity: string) =>
+  invokeWrapper<TGatewayReport>('gateway_report', { identity });
+
+export const computeMixnodeRewardEstimation = async (args: {
+  mixId: number;
+  performance: string;
+  pledgeAmount: number;
+  totalDelegation: number;
+  profitMarginPercent: string;
+  intervalOperatingCost: { denom: 'unym'; amount: string };
+}) => invokeWrapper<RewardEstimationResponse>('compute_mixnode_reward_estimation', args);
+export const getMixnodeUptime = async (mixId: number) => invokeWrapper<number>('get_mixnode_uptime', { mixId });
diff --git a/explorer/src/components/Delegations/requests/rewards.ts b/explorer/src/components/Delegations/requests/rewards.ts
new file mode 100644
index 00000000000..36b90838e70
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/rewards.ts
@@ -0,0 +1,14 @@
+import { Fee, FeeDetails, RewardingParams, TransactionExecuteResult } from '@nymproject/types';
+import { invokeWrapper } from './wrapper';
+
+export const claimOperatorReward = async (fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('claim_operator_reward', { fee });
+
+export const claimDelegatorRewards = async (mixId: number, fee?: FeeDetails) =>
+  invokeWrapper<TransactionExecuteResult[]>('claim_locked_and_unlocked_delegator_reward', {
+    mixId,
+    fee: fee?.fee,
+  });
+
+export const getCurrentRewardingParameter = async () =>
+  invokeWrapper<RewardingParams>('get_current_rewarding_parameters', {});
diff --git a/explorer/src/components/Delegations/requests/signature.ts b/explorer/src/components/Delegations/requests/signature.ts
new file mode 100644
index 00000000000..cf36289088a
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/signature.ts
@@ -0,0 +1,9 @@
+import { invokeWrapper } from './wrapper';
+
+export const sign = async (message: string): Promise<string> => invokeWrapper<string>('sign', { message });
+
+export const verify = async (
+  signatureAsHex: string,
+  message: string,
+  publicKeyAsJsonOrAccountAddress?: string | null,
+): Promise<string> => invokeWrapper<string>('verify', { publicKeyAsJsonOrAccountAddress, signatureAsHex, message });
diff --git a/explorer/src/components/Delegations/requests/simulate.ts b/explorer/src/components/Delegations/requests/simulate.ts
new file mode 100644
index 00000000000..d5dfdb3a430
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/simulate.ts
@@ -0,0 +1,87 @@
+import {
+  FeeDetails,
+  DecCoin,
+  Gateway,
+  MixNodeCostParams,
+  MixNodeConfigUpdate,
+  GatewayConfigUpdate,
+} from '@nymproject/types';
+import { TBondGatewayArgs, TBondMixNodeArgs, TSimulateUpdateBondArgs } from '../types';
+import { invokeWrapper } from './wrapper';
+
+export const simulateBondGateway = async (args: TBondGatewayArgs) =>
+  invokeWrapper<FeeDetails>('simulate_bond_gateway', args);
+
+export const simulateUnbondGateway = async (args: any) => invokeWrapper<FeeDetails>('simulate_unbond_gateway', args);
+
+export const simulateBondMixnode = async (args: TBondMixNodeArgs) =>
+  invokeWrapper<FeeDetails>('simulate_bond_mixnode', args);
+
+export const simulateUnbondMixnode = async (args: any) => invokeWrapper<FeeDetails>('simulate_unbond_mixnode', args);
+
+export const simulateUpdateMixnodeCostParams = async (newCosts: MixNodeCostParams) =>
+  invokeWrapper<FeeDetails>('simulate_update_mixnode_cost_params', { newCosts });
+
+export const simulateUpdateMixnodeConfig = async (update: MixNodeConfigUpdate) =>
+  invokeWrapper<FeeDetails>('simulate_update_mixnode_config', { update });
+
+export const simulateUpdateGatewayConfig = async (update: GatewayConfigUpdate) =>
+  invokeWrapper<FeeDetails>('simulate_update_gateway_config', { update });
+
+export const simulateDelegateToMixnode = async (args: { mixId: number; amount: DecCoin }) =>
+  invokeWrapper<FeeDetails>('simulate_delegate_to_mixnode', args);
+
+export const simulateUndelegateFromMixnode = async (mixId: number) =>
+  invokeWrapper<FeeDetails>('simulate_undelegate_from_mixnode', { mixId });
+
+export const simulateClaimDelegatorReward = async (mixId: number) =>
+  invokeWrapper<FeeDetails>('simulate_claim_delegator_reward', { mixId });
+
+export const simulateVestingClaimDelegatorReward = async (mixId: number) =>
+  invokeWrapper<FeeDetails>('simulate_vesting_claim_delegator_reward', { mixId });
+
+export const simulateVestingUndelegateFromMixnode = async (args: any) =>
+  invokeWrapper<FeeDetails>('simulate_vesting_undelegate_from_mixnode', args);
+
+export const simulateVestingBondGateway = async (args: { gateway: Gateway; pledge: DecCoin; msgSignature: string }) =>
+  invokeWrapper<FeeDetails>('simulate_vesting_bond_gateway', args);
+
+export const simulateVestingUnbondGateway = async (args: any) =>
+  invokeWrapper<FeeDetails>('simulate_vesting_unbond_gateway', args);
+
+export const simulateVestingDelegateToMixnode = async (args: { mixId: number }) =>
+  invokeWrapper<FeeDetails>('simulate_vesting_delegate_to_mixnode', args);
+
+export const simulateVestingBondMixnode = async (args: TBondMixNodeArgs) =>
+  invokeWrapper<FeeDetails>('simulate_vesting_bond_mixnode', args);
+
+export const simulateVestingUnbondMixnode = async () => invokeWrapper<FeeDetails>('simulate_vesting_unbond_mixnode');
+
+export const simulateVestingUpdateMixnodeCostParams = async (newCosts: MixNodeCostParams) =>
+  invokeWrapper<FeeDetails>('simulate_vesting_update_mixnode_cost_params', { newCosts });
+
+export const simulateVestingUpdateMixnodeConfig = async (update: MixNodeConfigUpdate) =>
+  invokeWrapper<FeeDetails>('simulate_vesting_update_mixnode_config', { update });
+
+export const simulateVestingUpdateGatewayConfig = async (update: GatewayConfigUpdate) =>
+  invokeWrapper<FeeDetails>('simulate_vesting_update_gateway_config', { update });
+
+export const simulateWithdrawVestedCoins = async (args: any) =>
+  invokeWrapper<FeeDetails>('simulate_withdraw_vested_coins', args);
+
+export const simulateSend = async ({ address, amount }: { address: string; amount: DecCoin }) =>
+  invokeWrapper<FeeDetails>('simulate_send', { address, amount });
+
+export const getCustomFees = async ({ feesAmount }: { feesAmount: DecCoin }) =>
+  invokeWrapper<FeeDetails>('get_custom_fees', { feesAmount });
+
+export const simulateClaimOperatorReward = async () => invokeWrapper<FeeDetails>('simulate_claim_operator_reward');
+
+export const simulateVestingClaimOperatorReward = async () =>
+  invokeWrapper<FeeDetails>('simulate_vesting_claim_operator_reward');
+
+export const simulateUpdateBond = async (args: TSimulateUpdateBondArgs) =>
+  invokeWrapper<FeeDetails>('simulate_update_pledge', args);
+
+export const simulateVestingUpdateBond = async (args: TSimulateUpdateBondArgs) =>
+  invokeWrapper<FeeDetails>('simulate_vesting_update_pledge', args);
diff --git a/explorer/src/components/Delegations/requests/utils.ts b/explorer/src/components/Delegations/requests/utils.ts
new file mode 100644
index 00000000000..0e307d9dc62
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/utils.ts
@@ -0,0 +1,11 @@
+import { MixNodeCostParams } from '@nymproject/types';
+import { AppEnv } from '../types';
+import { invokeWrapper } from './wrapper';
+
+export const getEnv = async () => invokeWrapper<AppEnv>('get_env');
+
+export const tryConvertIdentityToMixId = async (mixIdentity: string) =>
+  invokeWrapper<number | null>('try_convert_pubkey_to_mix_id', { mixIdentity });
+
+export const getDefaultMixnodeCostParams = async (profitMarginPercent: string) =>
+  invokeWrapper<MixNodeCostParams>('default_mixnode_cost_params', { profitMarginPercent });
diff --git a/explorer/src/components/Delegations/requests/vesting.ts b/explorer/src/components/Delegations/requests/vesting.ts
new file mode 100644
index 00000000000..2d13cb44485
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/vesting.ts
@@ -0,0 +1,125 @@
+import {
+  TNodeType,
+  Gateway,
+  DecCoin,
+  MixNode,
+  OriginalVestingResponse,
+  Period,
+  PledgeData,
+  TransactionExecuteResult,
+  VestingAccountInfo,
+  MixNodeCostParams,
+  MixNodeConfigUpdate,
+  GatewayConfigUpdate,
+} from '@nymproject/types';
+import { Fee } from '@nymproject/types/dist/types/rust/Fee';
+import { invokeWrapper } from './wrapper';
+import { TBondGatewaySignatureArgs, TBondMixnodeSignatureArgs, TUpdateBondArgs } from '../types';
+
+export const getLockedCoins = async (): Promise<DecCoin> => invokeWrapper<DecCoin>('locked_coins');
+
+export const getSpendableCoins = async (): Promise<DecCoin> => invokeWrapper<DecCoin>('spendable_coins');
+
+export const getSpendableVestedCoins = async (): Promise<DecCoin> => invokeWrapper<DecCoin>('spendable_vested_coins');
+
+export const getSpendableRewardCoins = async (): Promise<DecCoin> => invokeWrapper<DecCoin>('spendable_reward_coins');
+
+export const getVestingCoins = async (vestingAccountAddress: string): Promise<DecCoin> =>
+  invokeWrapper<DecCoin>('vesting_coins', { vestingAccountAddress });
+
+export const getVestedCoins = async (vestingAccountAddress: string): Promise<DecCoin> =>
+  invokeWrapper<DecCoin>('vested_coins', { vestingAccountAddress });
+
+export const getOriginalVesting = async (vestingAccountAddress: string): Promise<OriginalVestingResponse> => {
+  const res = await invokeWrapper<OriginalVestingResponse>('original_vesting', { vestingAccountAddress });
+  return { ...res, amount: res.amount };
+};
+
+export const getCurrentVestingPeriod = async (address: string) =>
+  invokeWrapper<Period>('get_current_vesting_period', { address });
+
+export const vestingBondGateway = async ({
+  gateway,
+  pledge,
+  msgSignature,
+}: {
+  gateway: Gateway;
+  pledge: DecCoin;
+  msgSignature: string;
+}) => invokeWrapper<TransactionExecuteResult>('vesting_bond_gateway', { gateway, msgSignature, pledge });
+
+export const vestingGenerateGatewayMsgPayload = async (args: Omit<TBondGatewaySignatureArgs, 'tokenPool'>) =>
+  invokeWrapper<string>('vesting_generate_gateway_bonding_msg_payload', args);
+
+export const vestingUnbondGateway = async (fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('vesting_unbond_gateway', { fee });
+
+export const vestingBondMixNode = async ({
+  mixnode,
+  costParams,
+  pledge,
+  msgSignature,
+}: {
+  mixnode: MixNode;
+  costParams: MixNodeCostParams;
+  pledge: DecCoin;
+  msgSignature: string;
+}) => invokeWrapper<TransactionExecuteResult>('vesting_bond_mixnode', { mixnode, costParams, msgSignature, pledge });
+
+export const vestingGenerateMixnodeMsgPayload = async (args: Omit<TBondMixnodeSignatureArgs, 'tokenPool'>) =>
+  invokeWrapper<string>('vesting_generate_mixnode_bonding_msg_payload', args);
+
+export const vestingUnbondMixnode = async (fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('vesting_unbond_mixnode', { fee });
+
+export const withdrawVestedCoins = async (amount: DecCoin, fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('withdraw_vested_coins', { amount, fee });
+
+export const vestingUpdateMixnodeCostParams = async (newCosts: MixNodeCostParams, fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('vesting_update_mixnode_cost_params', { newCosts, fee });
+
+export const vestingUpdateMixnodeConfig = async (update: MixNodeConfigUpdate, fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('vesting_update_mixnode_config', { update, fee });
+
+export const vestingUpdateGatewayConfig = async (update: GatewayConfigUpdate, fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('vesting_update_gateway_config', { update, fee });
+
+export const vestingDelegateToMixnode = async (mixId: number, amount: DecCoin, fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('vesting_delegate_to_mixnode', { mixId, amount, fee });
+
+export const vestingUndelegateFromMixnode = async (mixId: number) =>
+  invokeWrapper<TransactionExecuteResult>('vesting_undelegate_from_mixnode', { mixId });
+
+export const getVestingAccountInfo = async (address: string) =>
+  invokeWrapper<VestingAccountInfo>('get_account_info', { address });
+
+export const getVestingPledgeInfo = async ({
+  address,
+  type,
+}: {
+  address?: string;
+  type: TNodeType;
+}): Promise<PledgeData | undefined> => {
+  try {
+    return await invokeWrapper<PledgeData>(`vesting_get_${type}_pledge`, { address });
+  } catch (e) {
+    return undefined;
+  }
+};
+
+export const vestingDelegatedFree = async (vestingAccountAddress: string) =>
+  invokeWrapper<DecCoin>('delegated_free', { vestingAccountAddress });
+
+export const vestingUnbond = async (type: TNodeType) => {
+  if (type === 'mixnode') return vestingUnbondMixnode();
+  return vestingUnbondGateway();
+};
+
+export const vestingClaimOperatorReward = async (fee?: Fee) =>
+  invokeWrapper<TransactionExecuteResult>('vesting_claim_operator_reward', { fee });
+
+export const vestingClaimDelegatorRewards = async (mixId: number) =>
+  invokeWrapper<TransactionExecuteResult>('vesting_claim_delegator_reward', { mixId });
+
+export const vestingUpdateBond = async (args: TUpdateBondArgs) =>
+  invokeWrapper<TransactionExecuteResult>('vesting_update_pledge', args);
diff --git a/explorer/src/components/Delegations/requests/wrapper.ts b/explorer/src/components/Delegations/requests/wrapper.ts
new file mode 100644
index 00000000000..c0528b6dcae
--- /dev/null
+++ b/explorer/src/components/Delegations/requests/wrapper.ts
@@ -0,0 +1,20 @@
+import { invoke } from '@tauri-apps/api';
+import { config } from '../config';
+// import { Console } from '../utils/console';
+
+export async function invokeWrapper<T>(operationName: string, args?: any): Promise<T> {
+  const res = await invoke<T>(operationName, args);
+  if (config.LOG_TAURI_OPERATIONS) {
+    const argsToLog: any = {};
+    if (args) {
+      Object.keys(args).forEach((key) => {
+        // check if the key should be excluded from logs
+        if (!['mnemonic', 'password', 'currentPassword', 'newPassword'].includes(key)) {
+          argsToLog[key] = args[key];
+        }
+      });
+    }
+    // Console.log({ operationName, argsToLog, res });
+  }
+  return res;
+}
diff --git a/explorer/src/components/Delegations/types/global.ts b/explorer/src/components/Delegations/types/global.ts
new file mode 100644
index 00000000000..aaf9d56b2e4
--- /dev/null
+++ b/explorer/src/components/Delegations/types/global.ts
@@ -0,0 +1,97 @@
+import { DecCoin, Gateway, MixNode, MixNodeCostParams, PledgeData } from '@nymproject/types';
+import { Fee } from '@nymproject/types/dist/types/rust/Fee';
+// eslint-disable-next-line import/no-cycle
+// import { TBondedGateway, TBondedMixnode } from '../context';
+
+export enum EnumNodeType {
+  mixnode = 'mixnode',
+  gateway = 'gateway',
+}
+
+export type TNodeOwnership = {
+  hasOwnership: boolean;
+  nodeType?: EnumNodeType;
+  vestingPledge?: PledgeData;
+};
+
+export type TPendingDelegation = {
+  block_height: number;
+};
+
+export type TDelegation = {
+  owner: string;
+  node_identity: string;
+  amount: DecCoin;
+  block_height: number;
+  proxy: string; // proxy address used to delegate the funds on behalf of another address
+  pending?: TPendingDelegation;
+};
+
+export type TBondGatewayArgs = {
+  gateway: Gateway;
+  pledge: DecCoin;
+  msgSignature: string;
+  fee?: Fee;
+};
+
+export type TBondMixNodeArgs = {
+  mixnode: MixNode;
+  costParams: MixNodeCostParams;
+  pledge: DecCoin;
+  msgSignature: string;
+  fee?: Fee;
+};
+
+export type TBondMixnodeSignatureArgs = {
+  mixnode: MixNode;
+  costParams: MixNodeCostParams;
+  pledge: DecCoin;
+  tokenPool: 'balance' | 'locked';
+};
+
+export type TBondGatewaySignatureArgs = {
+  gateway: Gateway;
+  pledge: DecCoin;
+  tokenPool: 'balance' | 'locked';
+};
+
+export type TUpdateBondArgs = {
+  currentPledge: DecCoin;
+  newPledge: DecCoin;
+  fee?: Fee;
+};
+
+export type TSimulateUpdateBondArgs = Omit<TUpdateBondArgs, 'fee'>;
+
+export type TNodeDescription = {
+  name: string;
+  description: string;
+  link: string;
+  location: string;
+};
+
+export type TDelegateArgs = {
+  identity: string;
+  amount: DecCoin;
+};
+
+export type Period = 'Before' | { In: number } | 'After';
+
+export type TAccount = {
+  name: string;
+  address: string;
+  mnemonic: string;
+};
+
+export type TGatewayReport = {
+  identity: string;
+  owner: string;
+  last_day: number;
+  last_hour: number;
+  most_recent: number;
+};
+
+// export const isMixnode = (node: TBondedMixnode | TBondedGateway): node is TBondedMixnode =>
+//   (node as TBondedMixnode).profitMargin !== undefined;
+
+// export const isGateway = (node: TBondedMixnode | TBondedGateway): node is TBondedGateway => !isMixnode(node);
diff --git a/explorer/src/components/Delegations/types/index.ts b/explorer/src/components/Delegations/types/index.ts
new file mode 100644
index 00000000000..85747b1acd7
--- /dev/null
+++ b/explorer/src/components/Delegations/types/index.ts
@@ -0,0 +1,7 @@
+export * from './global';
+export * from './rust/AppEnv';
+export * from './rust/Interval';
+export * from './rust/Network';
+export * from './rust/StateParams';
+export * from './rust/ValidatorUrl';
+export * from './rust/ValidatorUrls';
diff --git a/explorer/src/components/Delegations/types/rust/AppEnv.ts b/explorer/src/components/Delegations/types/rust/AppEnv.ts
new file mode 100644
index 00000000000..861ecd9ef59
--- /dev/null
+++ b/explorer/src/components/Delegations/types/rust/AppEnv.ts
@@ -0,0 +1,5 @@
+export interface AppEnv {
+  ADMIN_ADDRESS: string | null;
+  SHOW_TERMINAL: string | null;
+  ENABLE_QA_MODE: string | null;
+}
diff --git a/explorer/src/components/Delegations/types/rust/AppVersion.ts b/explorer/src/components/Delegations/types/rust/AppVersion.ts
new file mode 100644
index 00000000000..82b94c55961
--- /dev/null
+++ b/explorer/src/components/Delegations/types/rust/AppVersion.ts
@@ -0,0 +1,7 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export interface AppVersion {
+  current_version: string;
+  latest_version: string;
+  is_update_available: boolean;
+}
diff --git a/explorer/src/components/Delegations/types/rust/Epoch.ts b/explorer/src/components/Delegations/types/rust/Epoch.ts
new file mode 100644
index 00000000000..21ec4ac2df3
--- /dev/null
+++ b/explorer/src/components/Delegations/types/rust/Epoch.ts
@@ -0,0 +1,8 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export interface Epoch {
+  id: number;
+  start: bigint;
+  end: bigint;
+  duration_seconds: bigint;
+}
diff --git a/explorer/src/components/Delegations/types/rust/Interval.ts b/explorer/src/components/Delegations/types/rust/Interval.ts
new file mode 100644
index 00000000000..c1526be6589
--- /dev/null
+++ b/explorer/src/components/Delegations/types/rust/Interval.ts
@@ -0,0 +1,8 @@
+export interface Interval {
+  id: number;
+  epochs_in_interval: number;
+  current_epoch_start_unix: bigint;
+  current_epoch_id: number;
+  epoch_length_seconds: bigint;
+  total_elapsed_epochs: number;
+}
diff --git a/explorer/src/components/Delegations/types/rust/Network.ts b/explorer/src/components/Delegations/types/rust/Network.ts
new file mode 100644
index 00000000000..d55f0bce674
--- /dev/null
+++ b/explorer/src/components/Delegations/types/rust/Network.ts
@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type Network = 'QA' | 'SANDBOX' | 'MAINNET';
diff --git a/explorer/src/components/Delegations/types/rust/StateParams.ts b/explorer/src/components/Delegations/types/rust/StateParams.ts
new file mode 100644
index 00000000000..2119c59470a
--- /dev/null
+++ b/explorer/src/components/Delegations/types/rust/StateParams.ts
@@ -0,0 +1,8 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { DecCoin } from '@nymproject/types/src/types/rust/DecCoin';
+
+export interface TauriContractStateParams {
+  minimum_mixnode_pledge: DecCoin;
+  minimum_gateway_pledge: DecCoin;
+  minimum_mixnode_delegation: DecCoin | null;
+}
diff --git a/explorer/src/components/Delegations/types/rust/ValidatorUrl.ts b/explorer/src/components/Delegations/types/rust/ValidatorUrl.ts
new file mode 100644
index 00000000000..00291a57cdc
--- /dev/null
+++ b/explorer/src/components/Delegations/types/rust/ValidatorUrl.ts
@@ -0,0 +1,6 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export interface ValidatorUrl {
+  url: string;
+  name: string | null;
+}
diff --git a/explorer/src/components/Delegations/types/rust/ValidatorUrls.ts b/explorer/src/components/Delegations/types/rust/ValidatorUrls.ts
new file mode 100644
index 00000000000..57118d6c3f9
--- /dev/null
+++ b/explorer/src/components/Delegations/types/rust/ValidatorUrls.ts
@@ -0,0 +1,6 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { ValidatorUrl } from './ValidatorUrl';
+
+export interface ValidatorUrls {
+  urls: Array<ValidatorUrl>;
+}
diff --git a/explorer/src/components/TableToolbar.tsx b/explorer/src/components/TableToolbar.tsx
index c2c0951b9fa..bbb61418440 100644
--- a/explorer/src/components/TableToolbar.tsx
+++ b/explorer/src/components/TableToolbar.tsx
@@ -1,10 +1,13 @@
-import * as React from 'react';
+import React, { FC, useContext, useEffect, useState, useMemo } from 'react';
 import { Box, TextField, MenuItem, FormControl, Button } from '@mui/material';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import { Filters } from './Filters/Filters';
 import { useIsMobile } from '../hooks/useIsMobile';
-import { useState } from 'react';
-import { DelegateModal } from './Delegations/DelegateModal';
+import { DelegateModal } from './Delegations/components/DelegateModal';
+import { AppContext } from './Delegations/context/main';
+import { ChainProvider } from '@cosmos-kit/react';
+import { assets, chains } from 'chain-registry';
+import { wallets as keplr } from '@cosmos-kit/keplr';
 
 const fieldsHeight = '42.25px';
 
@@ -28,6 +31,32 @@ export const TableToolbar: FCWithChildren<TableToolBarProps> = ({
   withFilters,
 }) => {
   const [showNewDelegationModal, setShowNewDelegationModal] = useState<boolean>(false);
+  const assetsFixedUp = useMemo(() => {
+    const nyx = assets.find((a) => a.chain_name === 'nyx');
+    if (nyx) {
+      const nyxCoin = nyx.assets.find((a) => a.name === 'nyx');
+      if (nyxCoin) {
+        nyxCoin.coingecko_id = 'nyx';
+      }
+      nyx.assets = nyx.assets.reverse();
+    }
+    return assets;
+  }, [assets]);
+
+  const chainsFixedUp = useMemo(() => {
+    const nyx = chains.find((c) => c.chain_id === 'nyx');
+    if (nyx) {
+      if (!nyx.staking) {
+        nyx.staking = {
+          staking_tokens: [{ denom: 'unyx' }],
+          lock_duration: {
+            blocks: 10000,
+          },
+        };
+      }
+    }
+    return chains;
+  }, [chains]);
 
   const isMobile = useIsMobile();
   return (
@@ -104,18 +133,27 @@ export const TableToolbar: FCWithChildren<TableToolBarProps> = ({
       </Box>
 
       {showNewDelegationModal && (
-        <DelegateModal
-          open={showNewDelegationModal}
-          onClose={() => setShowNewDelegationModal(false)}
-          onOk={undefined}
-          header="Delegate"
-          buttonText="Delegate stake"
-          denom={'nym'} // clientDetails?.display_mix_denom || 'nym'}
-          accountBalance={'balance?.printable_balance'}
-          rewardInterval="weekly"
-          hasVestingContract={true}
-          // {...storybookStyles(theme, isStorybook)}
-        />
+        <ChainProvider
+          chains={chainsFixedUp}
+          assetLists={assetsFixedUp}
+          wallets={[...keplr]}
+          signerOptions={{
+            preferredSignType: () => 'amino',
+          }}
+        >
+          <DelegateModal
+            open={showNewDelegationModal}
+            onClose={() => setShowNewDelegationModal(false)}
+            onOk={undefined}
+            header="Delegate"
+            buttonText="Delegate stake"
+            denom={'nym'} // clientDetails?.display_mix_denom || 'nym'}
+            accountBalance={'balance?.printable_balance' || 'error reading balance'}
+            rewardInterval="weekly"
+            hasVestingContract={true}
+            // {...storybookStyles(theme, isStorybook)}
+          />
+        </ChainProvider>
       )}
     </Box>
   );