Wallet fix unstaking bug (MystenLabs#7747)

- Removed the form component from unstake 
- added Available SUI balance
- Fixed unstaking bug requiring Amount field
- set rewards to absolute value. 
- fixed typo 
<img width="453" alt="Screenshot 2023-01-26 at 5 17 31 PM"
src="https://user-images.githubusercontent.com/8676844/214963321-c915e20c-ea71-46c9-b9ae-29e536e4ce43.png">

apps/wallet/src/ui/app/staking/getStakingRewards.ts

@@ -41,6 +41,6 @@ export function getStakingRewards(
         .multipliedBy(suiBalance)
         .dividedBy(delegationTokenSupply);
 
-    const earnToken = currentSuiWorth.decimalPlaces(0, 1).minus(pricipalAmout);
-    return earnToken.toNumber();
+    const earnToken = currentSuiWorth.minus(pricipalAmout);
+    return earnToken.decimalPlaces(0, BigNumber.ROUND_DOWN).toNumber();
 }

apps/wallet/src/ui/app/staking/stake/StakeForm.tsx

@@ -3,13 +3,14 @@
 
 import { SUI_TYPE_ARG } from '@mysten/sui.js';
 import { ErrorMessage, Field, Form, useFormikContext } from 'formik';
-import { useRef, memo, useCallback } from 'react';
+import { useRef, memo, useCallback, useMemo } from 'react';
 
 import { Content } from '_app/shared/bottom-menu-layout';
 import { Card } from '_app/shared/card';
 import { Text } from '_app/shared/text';
 import Alert from '_components/alert';
 import NumberInput from '_components/number-input';
+import { parseAmount } from '_helpers';
 import { useFormatCoin } from '_hooks';
 import { DEFAULT_GAS_BUDGET_FOR_STAKE } from '_redux/slices/sui-objects/Coin';
 
@@ -21,18 +22,38 @@ export type StakeFromProps = {
     submitError: string | null;
     coinBalance: bigint;
     coinType: string;
+    coinDecimals: number;
     epoch: string;
     onClearSubmitError: () => void;
 };
 
+function AvailableBalance({
+    amount,
+    coinType,
+}: {
+    amount: bigint;
+    coinType: string;
+}) {
+    const [formatted, symbol] = useFormatCoin(amount, coinType);
+    return (
+        <Text variant="bodySmall" color="steel" weight="medium">
+            Available - {+formatted > 0 ? formatted : 0} {symbol}
+        </Text>
+    );
+}
+
 function StakeForm({
     submitError,
     coinBalance,
     coinType,
     onClearSubmitError,
+    coinDecimals,
     epoch,
 }: StakeFromProps) {
-    const { setFieldValue } = useFormikContext<FormValues>();
+    const {
+        setFieldValue,
+        values: { amount },
+    } = useFormikContext<FormValues>();
 
     const onClearRef = useRef(onClearSubmitError);
     onClearRef.current = onClearSubmitError;
@@ -42,12 +63,12 @@ function StakeForm({
         SUI_TYPE_ARG
     );
 
-    const coinBalanceMinusGas =
+    const totalAvailableBalance =
         coinBalance -
         BigInt(coinType === SUI_TYPE_ARG ? DEFAULT_GAS_BUDGET_FOR_STAKE : 0);
 
     const [maxToken, symbol, queryResult] = useFormatCoin(
-        coinBalanceMinusGas,
+        totalAvailableBalance,
         coinType
     );
 
@@ -56,9 +77,24 @@ function StakeForm({
         setFieldValue('amount', maxToken);
     }, [maxToken, setFieldValue]);
 
+    const calculateRemaining = useMemo(() => {
+        if (!coinBalance) return 0n;
+        const bigIntAmount = parseAmount(amount, coinDecimals);
+        return totalAvailableBalance - bigIntAmount;
+    }, [amount, coinBalance, coinDecimals, totalAvailableBalance]);
+
     return (
         <Form className="flex flex-1 flex-col flex-nowrap" autoComplete="off">
             <Content>
+                <div className="flex flex-col justify-between items-center mb-2 mt-3.5 w-full gap-1.5">
+                    <Text variant="caption" color="gray-85" weight="semibold">
+                        Enter the amount of SUI to stake
+                    </Text>
+                    <AvailableBalance
+                        amount={calculateRemaining}
+                        coinType={coinType}
+                    />
+                </div>
                 <Card
                     variant="gray"
                     titleDivider
@@ -115,7 +151,7 @@ function StakeForm({
                             weight="medium"
                             color="steel-darker"
                         >
-                            Epoch #{+epoch + 1}
+                            Epoch #{+epoch + 2}
                         </Text>
                     </div>
                 </Card>

apps/wallet/src/ui/app/staking/stake/StakingCard.tsx

@@ -87,7 +87,7 @@ function StakingCard() {
     );
 
     const totalTokenBalance = useMemo(() => {
-        if (!allDelegation) return BigInt(0);
+        if (!allDelegation) return 0n;
         // return only the total amount of tokens staked for a specific stakeId
         if (stakeIdParams) {
             const balance =
@@ -108,7 +108,7 @@ function StakingCard() {
         () =>
             unstake
                 ? totalTokenBalance
-                : (coinType && aggregateBalances[coinType]) || BigInt(0),
+                : (coinType && aggregateBalances[coinType]) || 0n,
         [unstake, totalTokenBalance, coinType, aggregateBalances]
     );
 
@@ -143,7 +143,7 @@ function StakingCard() {
         () =>
             unstake
                 ? coinBalance + BigInt(DEFAULT_GAS_BUDGET_FOR_STAKE)
-                : aggregateBalances[GAS_TYPE_ARG] || BigInt(0),
+                : aggregateBalances[GAS_TYPE_ARG] || 0n,
         [aggregateBalances, coinBalance, unstake]
     );
 
@@ -332,7 +332,7 @@ function StakingCard() {
             >
                 <Formik
                     initialValues={initialValues}
-                    validateOnMount
+                    validateOnMount={!unstake}
                     validationSchema={validationSchema}
                     onSubmit={onHandleSubmit}
                 >
@@ -346,17 +346,6 @@ function StakingCard() {
                                         stakedId={stakeIdParams}
                                     />
                                 </div>
-                                {!unstake && (
-                                    <div className="flex flex-col justify-between items-center mb-2 mt-7.5 w-full">
-                                        <Text
-                                            variant="caption"
-                                            color="gray-85"
-                                            weight="semibold"
-                                        >
-                                            Enter the amount of SUI to stake
-                                        </Text>
-                                    </div>
-                                )}
 
                                 {unstake ? (
                                     <UnStakeForm
@@ -373,6 +362,7 @@ function StakingCard() {
                                         submitError={sendError}
                                         coinBalance={coinBalance}
                                         coinType={coinType}
+                                        coinDecimals={coinDecimals}
                                         epoch={validatorsData.epoch}
                                         onClearSubmitError={
                                             handleOnClearSubmitError

apps/wallet/src/ui/app/staking/stake/UnstakeForm.tsx

@@ -2,14 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { SUI_TYPE_ARG } from '@mysten/sui.js';
-import { ErrorMessage, Field, Form, useFormikContext } from 'formik';
+import { ErrorMessage, Form, useFormikContext } from 'formik';
 import { useEffect, useRef } from 'react';
 
 import { Content } from '_app/shared/bottom-menu-layout';
 import { Card } from '_app/shared/card';
 import { Text } from '_app/shared/text';
 import Alert from '_components/alert';
-import NumberInput from '_components/number-input';
 import { useFormatCoin } from '_hooks';
 import { DEFAULT_GAS_BUDGET_FOR_STAKE } from '_redux/slices/sui-objects/Coin';
 
@@ -40,32 +39,22 @@ export function UnStakeForm({
         SUI_TYPE_ARG
     );
 
-    const [rewards, rewardSymbal] = useFormatCoin(stakingReward, SUI_TYPE_ARG);
+    const [rewards, rewardSymbol] = useFormatCoin(stakingReward, SUI_TYPE_ARG);
 
     const [tokenBalance] = useFormatCoin(coinBalance, coinType);
 
     useEffect(() => {
         onClearRef.current();
         setFieldValue('amount', tokenBalance);
-        setTouched({ amount: true });
     }, [setFieldValue, setTouched, tokenBalance]);
 
     return (
         <Form
             className="flex flex-1 flex-col flex-nowrap"
             autoComplete="off"
-            noValidate={true}
+            noValidate
         >
             <Content>
-                <Field
-                    component={NumberInput}
-                    allowNegative={false}
-                    name="amount"
-                    hidden
-                    className="w-full hidden"
-                    decimals
-                    disabled
-                />
                 <Card
                     variant="gray"
                     titleDivider
@@ -129,7 +118,7 @@ export function UnStakeForm({
                                 weight="medium"
                                 color="steel-darker"
                             >
-                                {rewards} {rewardSymbal}
+                                {rewards} {rewardSymbol}
                             </Text>
                         </div>
                         <div className="w-2/3">