feat: fix up staking

  - Make ChangeInStakingPosition amount a BigNumber instead of string

  - ChangeInStakingPosition is now always positive (negative does not
    represent unbond)

  - Make StakingPosition stakedAmount a BigNumber instead of string

  - Remove myValidators prop from Staking, StakingOverview,
    MyValidatorsTable; use redux selector instead

  - Split StakingOverview into AllValidatorsTable, MyValidatorsTable,
    StakingBalancesList

  - Make stakedAmount in UnbondPosition BigNumber instead of number

  - Do not negate unbond amount in UnbondPosition; just pass amount as
    positive value

  - Display http URLs as links in ValidatorDetails

  - Display amounts that haven't fetched yet as "-" instead of "NAM 0"
    (where?)
    - ValidatorDetails

  - Store validator commission as a BigNumber instead of a string

  - Make stake returned from validator optional instead of 0 if None in
    query

  - Add unbonded and withdrawable amounts to all validators query

  - Add toasts to submit bond and submit unbond actions

  - Make myValidators optional to allow to be undefined when not fetched

  - Make votingPower optional in case where None returned from query

  - Make stakedAmount, unbondedAmount, withdrawableAmount optional for
    same reasons

  - Add subheading slot to Table

  - Add filtering by search and sorting by column to all validators
    table

  - Show each single bond and unbond in ValidatorDetails

  - Add ability to withdraw unbonded amounts

  - Apply theme to modals

apps/extension/src/background/keyring/handler.ts

@@ -25,6 +25,7 @@ import {
   QueryBalancesMsg,
   SubmitBondMsg,
   SubmitUnbondMsg,
+  SubmitWithdrawMsg,
   SubmitIbcTransferMsg,
   FetchAndStoreMaspParamsMsg,
   HasMaspParamsMsg,
@@ -87,6 +88,8 @@ export const getHandler: (service: KeyRingService) => Handler = (service) => {
         return handleSubmitBondMsg(service)(env, msg as SubmitBondMsg);
       case SubmitUnbondMsg:
         return handleSubmitUnbondMsg(service)(env, msg as SubmitUnbondMsg);
+      case SubmitWithdrawMsg:
+        return handleSubmitWithdrawMsg(service)(env, msg as SubmitWithdrawMsg);
       case SubmitIbcTransferMsg:
         return handleSubmitIbcTransferMsg(service)(
           env,
@@ -261,6 +264,15 @@ const handleSubmitUnbondMsg: (
   };
 };
 
+const handleSubmitWithdrawMsg: (
+  service: KeyRingService
+) => InternalHandler<SubmitWithdrawMsg> = (service) => {
+  return async (_, msg) => {
+    const { txMsg } = msg;
+    return await service.submitWithdraw(txMsg);
+  };
+};
+
 const handleSubmitIbcTransferMsg: (
   service: KeyRingService
 ) => InternalHandler<SubmitIbcTransferMsg> = (service) => {

apps/extension/src/background/keyring/init.ts

@@ -25,6 +25,7 @@ import {
   EncodeRevealPkMsg,
   SubmitBondMsg,
   SubmitUnbondMsg,
+  SubmitWithdrawMsg,
   SubmitIbcTransferMsg,
   FetchAndStoreMaspParamsMsg,
   HasMaspParamsMsg,
@@ -54,6 +55,7 @@ export function init(router: Router, service: KeyRingService): void {
   router.registerMessage(SubmitBondMsg);
   router.registerMessage(SubmitIbcTransferMsg);
   router.registerMessage(SubmitUnbondMsg);
+  router.registerMessage(SubmitWithdrawMsg);
   router.registerMessage(TransferCompletedEvent);
   router.registerMessage(UnlockKeyRingMsg);
   router.registerMessage(DeleteAccountMsg);

apps/extension/src/background/keyring/keyring.ts

@@ -675,6 +675,18 @@ export class KeyRing {
     }
   }
 
+  async submitWithdraw(txMsg: Uint8Array): Promise<void> {
+    if (!this._password) {
+      throw new Error("Not authenticated!");
+    }
+
+    try {
+      await this.sdk.submit_withdraw(txMsg, this._password);
+    } catch (e) {
+      throw new Error(`Could not submit withdraw tx: ${e}`);
+    }
+  }
+
   async submitTransfer(
     txMsg: Uint8Array,
     submit: (password: string, xsk?: string) => Promise<void>

apps/extension/src/background/keyring/service.ts

@@ -171,6 +171,15 @@ export class KeyRingService {
     }
   }
 
+  async submitWithdraw(txMsg: string): Promise<void> {
+    try {
+      await this._keyRing.submitWithdraw(fromBase64(txMsg));
+    } catch (e) {
+      console.warn(e);
+      throw new Error(`Unable to submit withdraw tx! ${e}`);
+    }
+  }
+
   private async submitTransferChrome(
     txMsg: string,
     msgId: string,

apps/extension/src/provider/Anoma.ts

@@ -14,6 +14,7 @@ import {
   QueryBalancesMsg,
   SubmitBondMsg,
   SubmitUnbondMsg,
+  SubmitWithdrawMsg,
   SubmitIbcTransferMsg,
 } from "./messages";
 
@@ -97,6 +98,13 @@ export class Anoma implements IAnoma {
     );
   }
 
+  public async submitWithdraw(txMsg: string): Promise<void> {
+    return await this.requester?.sendMessage(
+      Ports.Background,
+      new SubmitWithdrawMsg(txMsg)
+    );
+  }
+
   public async submitTransfer(txMsg: string): Promise<void> {
     return await this.requester?.sendMessage(
       Ports.Background,

apps/extension/src/provider/InjectedAnoma.ts

@@ -60,6 +60,13 @@ export class InjectedAnoma implements IAnoma {
     );
   }
 
+  public async submitWithdraw(txMsg: string): Promise<void> {
+    return await InjectedProxy.requestMethod<string, void>(
+      "submitWithdraw",
+      txMsg
+    );
+  }
+
   public async submitTransfer(txMsg: string): Promise<void> {
     return await InjectedProxy.requestMethod<string, void>(
       "submitTransfer",

apps/extension/src/provider/Signer.ts

@@ -14,6 +14,7 @@ import {
   SubmitBondProps,
   SubmitBondMsgValue,
   SubmitUnbondMsgValue,
+  SubmitWithdrawMsgValue,
 } from "@anoma/types";
 
 export class Signer implements ISigner {
@@ -57,6 +58,18 @@ export class Signer implements ISigner {
     return await this._anoma.submitUnbond(toBase64(encoded));
   }
 
+  /**
+   * Submit withdraw transaction
+   */
+  public async submitWithdraw(args: SubmitBondProps): Promise<void> {
+    const msgValue = new SubmitWithdrawMsgValue(args);
+
+    const msg = new Message<SubmitWithdrawMsgValue>();
+    const encoded = msg.encode(msgValue);
+
+    return await this._anoma.submitWithdraw(toBase64(encoded));
+  }
+
   /**
    * Submit a transfer
    */

apps/extension/src/provider/messages.ts

@@ -26,6 +26,7 @@ enum MessageType {
   SuggestChain = "suggest-chain",
   SubmitBond = "submit-bond",
   SubmitUnbond = "submit-unbond",
+  SubmitWithdraw = "submit-withdraw",
   FetchAndStoreMaspParams = "fetch-and-store-masp-params",
   HasMaspParams = "has-masp-params",
 }
@@ -308,6 +309,31 @@ export class SubmitUnbondMsg extends Message<void> {
   }
 }
 
+export class SubmitWithdrawMsg extends Message<void> {
+  public static type(): MessageType {
+    return MessageType.SubmitWithdraw;
+  }
+
+  constructor(public readonly txMsg: string) {
+    super();
+  }
+
+  validate(): void {
+    if (!this.txMsg) {
+      throw new Error("An encoded txMsg is required!");
+    }
+    return;
+  }
+
+  route(): string {
+    return Route.KeyRing;
+  }
+
+  type(): string {
+    return SubmitWithdrawMsg.type();
+  }
+}
+
 export class ApproveTransferMsg extends Message<void> {
   public static type(): MessageType {
     return MessageType.ApproveTransfer;

apps/namada-interface/src/App/Staking/NewBondingPosition/NewBondingPosition.tsx

@@ -163,7 +163,7 @@ export const NewBondingPosition = (props: Props): JSX.Element => {
         variant={ButtonVariant.Contained}
         onClick={() => {
           const changeInStakingPosition: ChangeInStakingPosition = {
-            amount: amountToBond,
+            amount: amountToBondNumber,
             owner: currentAddress,
             validatorId: currentBondingPositions[0].validatorId,
           };

apps/namada-interface/src/App/Staking/Staking.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { Routes, Route, useNavigate } from "react-router-dom";
+import BigNumber from "bignumber.js";
 
 import { truncateInMiddle } from "@anoma/utils";
 import { Modal } from "@anoma/components";
@@ -52,8 +53,8 @@ const validatorNameFromUrl = (path: string): string | undefined => {
 
 const emptyStakingPosition = (validatorId: string): StakingPosition => ({
   uuid: validatorId,
-  stakingStatus: "",
-  stakedAmount: "",
+  bonded: true,
+  stakedAmount: new BigNumber(0),
   owner: "",
   totalRewards: "",
   validatorId: validatorId,
@@ -62,7 +63,6 @@ const emptyStakingPosition = (validatorId: string): StakingPosition => ({
 type Props = {
   accounts: Account[];
   validators: Validator[];
-  myValidators: MyValidators[];
   myStakingPositions: StakingPosition[];
   selectedValidatorId: string | undefined;
   // will be called at first load, parent decides what happens
@@ -106,7 +106,6 @@ export const Staking = (props: Props): JSX.Element => {
     postNewBonding,
     postNewUnbonding,
     validators,
-    myValidators,
     myStakingPositions,
     selectedValidatorId,
   } = props;
@@ -228,7 +227,6 @@ export const Staking = (props: Props): JSX.Element => {
           element={
             <StakingOverview
               navigateToValidatorDetails={navigateToValidatorDetails}
-              myValidators={myValidators}
               validators={validators}
               accounts={accounts}
             />

apps/namada-interface/src/App/Staking/StakingOverview/AllValidatorsTable/AllValidatorsTable.components.ts

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const AllValidatorsSearchBar = styled.div`
+  margin-bottom: 8px;
+`;