268 bug user report unable to unstake flow in flow extension

src/ui/views/Staking/StakingPage.tsx

@@ -1,7 +1,9 @@
 import { Box, Button, Typography } from '@mui/material';
+import BN from 'bignumber.js';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { withPrefix } from '@/shared/utils/address';
 import { LLHeader } from '@/ui/FRWComponent';
 import { type CoinItem } from 'background/service/coinList';
 import { useWallet } from 'ui/utils';
@@ -59,23 +61,31 @@ const StakingPage = () => {
   const [userWallet, setWallet] = useState<any>(null);
   const [currentCoin, setCurrentCoin] = useState<string>('flow');
   const [isConfirmationOpen, setConfirmationOpen] = useState(false);
-  const [exceed, setExceed] = useState(false);
   const [amount, setAmount] = useState<string | undefined>('0');
-  const [outAmount, setOutAmount] = useState<any>(0);
   const [network, setNetwork] = useState('mainnet');
   const [coinInfo, setCoinInfo] = useState<CoinItem>(EMPTY_COIN);
   const [nodeid, setNodeid] = useState<any>(null);
   const [delegateid, setDelegate] = useState<any>(null);
-  const [token1, setToken1] = useState<any>(null);
   const [token0, setToken0] = useState<any>(null);
   const [swapTypes, setSwapTypes] = useState<number>(0);
   const [isLoading, setLoading] = useState<boolean>(false);
   const [apr, setApr] = useState<any>(0);
   const [errorType, setErrorType] = useState<any>(null);
 
   const setInputAmount = async (value) => {
-    const inputAmount = (coinInfo.balance * value).toString();
-    setAmount(inputAmount);
+    //todo: move this to balance store in refactor.
+    const DEFAULT_MIN_AMOUNT = new BN('0.001');
+
+    const address = withPrefix(await usewallet.getMainWallet()) || '';
+
+    const minAmount = new BN(
+      (await usewallet.openapi.getAccountMinFlow(address)) || DEFAULT_MIN_AMOUNT
+    );
+    const balance = new BN(coinInfo.balance);
+
+    const inputBalance = value === 1 ? balance.minus(minAmount) : balance.multipliedBy(value);
+
+    setAmount(inputBalance.toFixed(8, BN.ROUND_DOWN));
   };
   const setUserWallet = useCallback(async () => {
     const nodeid = location['nodeid'];

src/ui/views/Staking/components/StakeAmount.tsx

@@ -94,9 +94,6 @@ const StakeAmount = ({
   coinInfo,
 }) => {
   const classes = useStyles();
-  const [coin, setCoin] = useState<string>('flow');
-  const [coinType, setCoinType] = useState<any>(0);
-  const [isConfirmationOpen, setConfirmationOpen] = useState(false);
 
   useEffect(() => {
     if (coinInfo) {
@@ -111,14 +108,6 @@ const StakeAmount = ({
     }
   }, [amount, coinInfo, removeError, setError, setLess]);
 
-  const currentCoinType = useCallback(() => {
-    setCoin(coinInfo.unit);
-  }, [coinInfo.unit]);
-
-  useEffect(() => {
-    currentCoinType();
-  }, [currentCoinType]);
-
   return (
     <StyledEngineProvider injectFirst>
       <Box

src/ui/views/Staking/components/StakeConfirm.tsx

@@ -1,5 +1,6 @@
 import CloseIcon from '@mui/icons-material/Close';
 import { Box, Typography, Drawer, IconButton, Button } from '@mui/material';
+import BN from 'bignumber.js';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -19,7 +20,7 @@ interface TransferConfirmationProps {
 }
 
 const StakeConfirm = (props: TransferConfirmationProps) => {
-  const wallet = useWallet();
+  const usewallet = useWallet();
   const history = useHistory();
   const [sending, setSending] = useState(false);
   const [failed, setFailed] = useState(false);
@@ -32,63 +33,64 @@ const StakeConfirm = (props: TransferConfirmationProps) => {
   const isLowStorage = isSufficient !== undefined && !isSufficient; // isSufficient is undefined when the storage check is not yet completed
 
   const getPending = useCallback(async () => {
-    const pending = await wallet.getPendingTx();
+    const pending = await usewallet.getPendingTx();
     if (pending.length > 0) {
       setOccupied(true);
     }
-  }, [wallet]);
+  }, [usewallet]);
 
   const updateOccupied = useCallback(() => {
     setOccupied(false);
   }, []);
 
-  const createStake = useCallback(() => {
-    if (props.data.amount < 50) {
+  const createStake = useCallback(async () => {
+    const MIN_STAKE_AMOUNT = new BN(50);
+    if (new BN(props.data.amount).isLessThan(MIN_STAKE_AMOUNT)) {
       notification.create('/', 'Not enough Flow', 'A minimum of 50 Flow is required for staking');
       return;
     }
-
-    const amount = parseFloat(props.data.amount).toFixed(8);
-    wallet
+    const amount = new BN(props.data.amount).toFixed(8, BN.ROUND_DOWN);
+    usewallet
       .createStake(amount, props.data.nodeid, props.data.delegateid)
       .then(async (txID) => {
-        wallet.listenTransaction(
+        usewallet.listenTransaction(
           txID,
           true,
           `${props.data.amount} have sent to the node`,
           `You have sent ${props.data.amount} Flow to node id: ${props.data.nodeid}. \nClick to view this transaction.`,
           props.data.coinInfo.icon
         );
         props.handleCloseIconClicked();
-        await wallet.setDashIndex(0);
+        await usewallet.setDashIndex(0);
         setSending(false);
         history.push('/dashboard?activity=1');
       })
       .catch(() => {
         setSending(false);
         setFailed(true);
       });
-  }, [history, props, wallet]);
+  }, [history, props, usewallet]);
 
   const createDelegate = () => {
-    if (props.data.amount < 50) {
+    const MIN_STAKE_AMOUNT = new BN(50);
+
+    if (new BN(props.data.amount).isLessThan(MIN_STAKE_AMOUNT)) {
       notification.create('/', 'Not enough Flow', 'A minimum of 50 Flow is required for staking');
       return;
     }
-
-    const amount = parseFloat(props.data.amount).toFixed(8);
-    wallet
+    const amount = new BN(props.data.amount).toFixed(8, BN.ROUND_DOWN);
+    usewallet
       .createDelegator(amount, props.data.nodeid)
       .then(async (txID) => {
-        wallet.listenTransaction(
+        usewallet.listenTransaction(
           txID,
           true,
           `${props.data.amount} have sent to the node`,
           `You have sent ${props.data.amount} Flow to node id: ${props.data.nodeid}. \nClick to view this transaction.`,
           props.data.coinInfo.icon
         );
         props.handleCloseIconClicked();
-        await wallet.setDashIndex(0);
+        await usewallet.setDashIndex(0);
         setSending(false);
         history.push('/dashboard?activity=1');
       })

src/ui/views/Staking/components/StakedListCard.tsx

@@ -1,7 +1,10 @@
-import React, { useEffect, useState } from 'react';
-import { useWallet } from 'ui/utils';
 import { Typography, Box } from '@mui/material';
+import BN from 'bignumber.js';
+import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+
+import { useWallet } from 'ui/utils';
+
 import nodeList from '../nodeList.json';
 
 const StakedListCard = ({ desc, delegate }) => {
@@ -13,14 +16,15 @@ const StakedListCard = ({ desc, delegate }) => {
   // withdrawReward
   useEffect(() => {
     const currentNode = nodeList.filter((node) => {
-      return node.id == delegate.nodeID;
+      return node.id === delegate.nodeID;
     });
     setCurrent(currentNode[0]);
-  }, []);
+  }, [delegate.nodeID]);
 
   const withdrawReward = () => {
     setLoading(true);
-    const amount = parseFloat(delegate.tokensRewarded).toFixed(8);
+
+    const amount = new BN(delegate.tokensRewarded).toFixed(8, BN.ROUND_DOWN);
     wallet
       .withdrawReward(amount, delegate.nodeID, delegate.delegatorID)
       .then(async (txID) => {

src/ui/views/Staking/components/UnstakeConfirm.tsx

@@ -1,5 +1,6 @@
 import CloseIcon from '@mui/icons-material/Close';
 import { Box, Typography, Drawer, IconButton, Button } from '@mui/material';
+import BN from 'bignumber.js';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -43,8 +44,7 @@ const UnstakeConfirm = (props: TransferConfirmationProps) => {
 
   const unstake = useCallback(() => {
     setSending(true);
-    const amount = parseFloat(props.data.amount).toFixed(8);
-
+    const amount = new BN(props.data.amount).toFixed(8, BN.ROUND_DOWN);
     wallet
       .unstake(amount, props.data.nodeid, props.data.delegateid)
       .then(async (txID) => {

src/ui/views/Staking/index.tsx

@@ -31,8 +31,6 @@ const Staking = () => {
       await wallet.setupDelegator(address);
       setLoading(true);
     }
-    // setNoStake(true);
-    // const result = await wallet.createStake('true');
   };
 
   const loadNetwork = useCallback(async () => {