Solving issue with balance on selecting same account (#288)

* making progress

* Solving issue with same account

src/components/AccountDisplay.tsx

@@ -34,6 +34,7 @@ export interface Props {
   className?: string;
   withTooltip?: boolean;
   id?: string | undefined;
+  senderBalanceAccountLoading?: boolean;
 }
 
 const useStyles = makeStyles((theme) => ({
@@ -67,7 +68,8 @@ const AccountDisplay = ({
   onClick,
   className,
   withTooltip,
-  id
+  id,
+  senderBalanceAccountLoading = false
 }: Props) => {
   const classes = useStyles();
   const displayText = () => {
@@ -95,7 +97,7 @@ const AccountDisplay = ({
           </Tooltip>
         )}
       </div>
-      <Balance balance={balance} />
+      <Balance balance={balance} senderBalanceAccountLoading={senderBalanceAccountLoading} />
     </Box>
   );
 };

src/components/Balance.tsx

@@ -22,6 +22,7 @@ interface Props {
   balance?: string | null | undefined;
   onClick?: () => void;
   id?: string | undefined;
+  senderBalanceAccountLoading?: boolean;
 }
 
 const useStyles = makeStyles((theme) => ({
@@ -31,11 +32,11 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-const Balance = ({ balance, onClick, id }: Props) => {
+const Balance = ({ balance, onClick, id, senderBalanceAccountLoading = false }: Props) => {
   const classes = useStyles();
   return (
     <div onClick={onClick} className={classes.balances} id={id}>
-      {balance || ''}
+      {senderBalanceAccountLoading ? '-' : balance || ''}
     </div>
   );
 };

src/components/SenderAccount.tsx

@@ -65,7 +65,7 @@ const useStyles = makeStyles((theme) => ({
 
 export default function SenderAccount({ handleClick, anchorEl }: Props) {
   const classes = useStyles();
-  const { account, senderAccountBalance } = useAccountContext();
+  const { account, senderAccountBalance, senderBalanceAccountLoading } = useAccountContext();
   const { isBridged } = useGUIContext();
   const {
     sourceChainDetails: {
@@ -87,6 +87,7 @@ export default function SenderAccount({ handleClick, anchorEl }: Props) {
       <Box display="flex">
         <div className={classes.account}>
           <AccountDisplay
+            senderBalanceAccountLoading={senderBalanceAccountLoading}
             aria-describedby={id}
             friendlyName={account ? getName(account) : 'Select sender account'}
             address={account ? encodeAddress(account.address, ss58Format) : ''}

src/components/SenderCompanionAccount.tsx

@@ -59,13 +59,14 @@ const useStyles = makeStyles((theme) => ({
 
 export default function SenderCompanionAccount() {
   const classes = useStyles();
-  const { account, companionAccount, senderCompanionAccountBalance } = useAccountContext();
+  const { account, companionAccount, senderCompanionAccountBalance, senderBalanceAccountLoading } = useAccountContext();
 
   return (
     <BridgedLocalWrapper>
       <div className={classes.accountCompanion}>
         {companionAccount && !isNull(senderCompanionAccountBalance) ? (
           <AccountDisplay
+            senderBalanceAccountLoading={senderBalanceAccountLoading}
             friendlyName={getName(account)}
             address={companionAccount}
             addressKind={AddressKind.COMPANION}

src/contexts/AccountContextProvider.tsx

@@ -53,7 +53,8 @@ export function AccountContextProvider(props: AccountContextProviderProps): Reac
     senderAccountBalance: null,
     senderCompanionAccountBalance: null,
     displaySenderAccounts: {} as DisplayAccounts,
-    initialLoadingAccounts: true
+    initialLoadingAccounts: true,
+    senderBalanceAccountLoading: false
   });
 
   useAccountsContextSetUp(accountState, dispatchAccount);

src/hooks/context/useAccountsContextSetUp.ts

@@ -38,7 +38,7 @@ const useAccountsContextSetUp = (accountState: AccountState, dispatchAccount: Di
 
   useEffect(() => {
     dispatchAccount(AccountActionCreators.setSenderBalances(accountBalance, companionBalance));
-  }, [accountBalance, companionBalance, dispatchAccount]);
+  }, [accountBalance, companionBalance, dispatchAccount, accountState.account?.address, accountState.companionAccount]);
 
   useEffect(() => {
     if (keyringPairsReady && keyringPairs.length) {

src/reducers/accountReducer.ts

@@ -13,6 +13,7 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Parity Bridges UI.  If not, see <http://www.gnu.org/licenses/>.
+
 import { AccountActionsTypes } from '../actions/accountActions';
 import type { AccountsActionType, AccountState } from '../types/accountTypes';
 import { getBridgeId } from '../util/getConfigs';
@@ -24,6 +25,10 @@ export default function accountReducer(state: AccountState, action: AccountsActi
       const { account, sourceTarget, sourceChain } = action.payload;
       let { sourceChainDetails, targetChainDetails } = sourceTarget;
 
+      if (state.account?.address === account?.address && sourceChain === sourceChainDetails.chain) {
+        return state;
+      }
+
       if (sourceChain !== sourceChainDetails.chain) {
         sourceChainDetails = sourceTarget.targetChainDetails;
         targetChainDetails = sourceTarget.sourceChainDetails;
@@ -43,13 +48,19 @@ export default function accountReducer(state: AccountState, action: AccountsActi
 
       const companionAccount = getDeriveAccount(toDerive);
 
-      return { ...state, account, companionAccount, senderAccountBalance: null, senderCompanionAccountBalance: null };
+      return {
+        ...state,
+        account,
+        companionAccount,
+        senderBalanceAccountLoading: true
+      };
     }
     case AccountActionsTypes.SET_SENDER_BALANCES:
       return {
         ...state,
         senderAccountBalance: action.payload.senderAccountBalance,
-        senderCompanionAccountBalance: action.payload.senderCompanionAccountBalance
+        senderCompanionAccountBalance: action.payload.senderCompanionAccountBalance,
+        senderBalanceAccountLoading: false
       };
     case AccountActionsTypes.SET_ACCOUNTS:
       return { ...state, accounts: action.payload.accounts };

src/types/accountTypes.ts

@@ -54,6 +54,7 @@ export interface AccountState {
   senderCompanionAccountBalance: BalanceState | null;
   displaySenderAccounts: DisplayAccounts;
   initialLoadingAccounts: boolean;
+  senderBalanceAccountLoading: boolean;
 }
 
 export type AccountsActionType = { type: AccountActionsTypes; payload: Payload };