fix(app): sync acc in tabs (#1122)

Author: dimakorzhovnik

src/containers/application/Header/SwitchAccount/SwitchAccount.tsx

@@ -8,17 +8,17 @@ import useOnClickOutside from 'src/hooks/useOnClickOutside';
 import { routes } from 'src/routes';
 import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress';
 
-import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
+import { useAppSelector } from 'src/redux/hooks';
 import Pill from 'src/components/Pill/Pill';
 import { useSigningClient } from 'src/contexts/signerClient';
+import BroadcastChannelSender from 'src/services/backend/channels/BroadcastChannelSender';
+import { useBackend } from 'src/contexts/backend/backend';
 import { AvataImgIpfs } from '../../../portal/components/avataIpfs';
 import styles from './SwitchAccount.module.scss';
 import networkStyles from '../SwitchNetwork/SwitchNetwork.module.scss';
 import useMediaQuery from '../../../../hooks/useMediaQuery';
 import robot from '../../../../image/temple/robot.png';
 import Karma from '../../Karma/Karma';
-import { setDefaultAccount } from '../../../../redux/features/pocket';
-import { useBackend } from 'src/contexts/backend/backend';
 
 // should be refactored
 function AccountItem({
@@ -96,7 +96,6 @@ function SwitchAccount() {
   const [controlledVisible, setControlledVisible] = React.useState(false);
 
   const { defaultAccount, accounts } = useAppSelector((state) => state.pocket);
-  const dispatch = useAppDispatch();
 
   const useGetAddress = defaultAccount?.account?.cyber?.bech32 || null;
 
@@ -121,11 +120,8 @@ function SwitchAccount() {
   const isReadOnly = defaultAccount.account?.cyber.keys === 'read-only';
 
   const onClickChangeActiveAcc = async (key: string) => {
-    dispatch(
-      setDefaultAccount({
-        name: key,
-      })
-    );
+    const broadcastChannel = new BroadcastChannelSender();
+    broadcastChannel.postSetDefaultAccount(key);
     setControlledVisible(false);
   };
 

src/contexts/signerClient.tsx

@@ -5,17 +5,12 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import _ from 'lodash';
 import { SigningCyberClient } from '@cybercongress/cyber-js';
 import { CYBER } from 'src/utils/config';
 import configKeplr, { getKeplr } from 'src/utils/keplrUtils';
 import { OfflineSigner } from '@cybercongress/cyber-js/build/signingcyberclient';
 import { Option } from 'src/types';
-import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
-import { Keplr } from '@keplr-wallet/types';
-import { addAddressPocket, setDefaultAccount } from 'src/redux/features/pocket';
-import { accountsKeplr } from 'src/utils/utils';
-import usePrevious from 'src/hooks/usePrevious';
+import { useAppSelector } from 'src/redux/hooks';
 
 // TODO: interface for keplr and OfflineSigner
 // type SignerType = OfflineSigner & {
@@ -56,37 +51,11 @@ export function useSigningClient() {
 }
 
 function SigningClientProvider({ children }: { children: React.ReactNode }) {
-  const { defaultAccount, accounts } = useAppSelector((state) => state.pocket);
-  const dispatch = useAppDispatch();
+  const { defaultAccount } = useAppSelector((state) => state.pocket);
   const [signer, setSigner] = useState<SignerClientContextType['signer']>();
   const [signerReady, setSignerReady] = useState(false);
   const [signingClient, setSigningClient] =
     useState<SignerClientContextType['signingClient']>();
-  const prevAccounts = usePrevious(accounts);
-
-  const selectAddress = useCallback(
-    async (keplr: Keplr) => {
-      if (!accounts || _.isEqual(prevAccounts, accounts)) {
-        return;
-      }
-      const keyInfo = await keplr.getKey(CYBER.CHAIN_ID);
-
-      const findAccount = Object.keys(accounts).find((key) => {
-        if (accounts[key].cyber.bech32 === keyInfo.bech32Address) {
-          return key;
-        }
-
-        return undefined;
-      });
-
-      if (findAccount) {
-        dispatch(setDefaultAccount({ name: findAccount }));
-      } else {
-        dispatch(addAddressPocket(accountsKeplr(keyInfo)));
-      }
-    },
-    [accounts, prevAccounts, dispatch]
-  );
 
   useEffect(() => {
     (async () => {
@@ -105,8 +74,6 @@ function SigningClientProvider({ children }: { children: React.ReactNode }) {
   const initSigner = useCallback(async () => {
     const windowKeplr = await getKeplr();
     if (windowKeplr && windowKeplr.experimentalSuggestChain) {
-      selectAddress(windowKeplr);
-
       windowKeplr.defaultOptions = {
         sign: {
           preferNoSetFee: true,
@@ -125,7 +92,7 @@ function SigningClientProvider({ children }: { children: React.ReactNode }) {
       setSigner(offlineSigner);
       setSigningClient(clientJs);
     }
-  }, [selectAddress]);
+  }, []);
 
   useEffect(() => {
     (async () => {

src/pages/Keys/ActionBar/actionBar.tsx

@@ -1,19 +1,19 @@
 import { useEffect, useState } from 'react';
 import { Pane, ActionBar as ActionBarGravity } from '@cybercongress/gravity';
 import { useSigningClient } from 'src/contexts/signerClient';
-import ActionBarKeplr from './actionBarKeplr';
-import ActionBarUser from './actionBarUser';
-import ActionBarConnect from './actionBarConnect';
 import waitForWeb3 from 'components/web3/waitForWeb3';
 import { NETWORKSIDS } from 'src/utils/config';
 
-import imgLedger from 'src/image/ledger.svg';
 import imgKeplr from 'src/image/keplr-icon.svg';
 import imgRead from 'src/image/duplicate-outline.svg';
 import Button from 'src/components/btnGrd';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from 'src/redux/store';
-import { deleteAddress, setDefaultAccount } from 'src/redux/features/pocket';
+import { deleteAddress } from 'src/redux/features/pocket';
+import BroadcastChannelSender from 'src/services/backend/channels/BroadcastChannelSender';
+import ActionBarConnect from './actionBarConnect';
+import ActionBarUser from './actionBarUser';
+import ActionBarKeplr from './actionBarKeplr';
 
 const STAGE_INIT = 1;
 const STAGE_CONNECT = 2;
@@ -161,7 +161,8 @@ function ActionBar({
       )?.[0];
 
     if (accountName) {
-      dispatch(setDefaultAccount({ name: accountName }));
+      const broadcastChannel = new BroadcastChannelSender();
+      broadcastChannel.postSetDefaultAccount(accountName);
     }
   }
 

src/services/backend/channels/BroadcastChannelSender.ts

@@ -1,4 +1,6 @@
 import { updateSenseList } from 'src/features/sense/redux/sense.redux';
+import { setDefaultAccount } from 'src/redux/features/pocket';
+import { Account } from 'src/types/defaultAccount';
 import { SenseListItem } from '../types/sense';
 import {
   BroadcastChannelMessage,
@@ -39,6 +41,15 @@ class BroadcastChannelSender {
     }
   }
 
+  public postSetDefaultAccount(name: string, account?: Account) {
+    this.channel.postMessage(
+      setDefaultAccount({
+        name,
+        account,
+      })
+    );
+  }
+
   post(msg: BroadcastChannelMessage) {
     this.channel.postMessage(msg);
   }

src/services/backend/channels/RxBroadcastChannelListener.ts

@@ -4,6 +4,7 @@ import { bufferTime, filter } from 'rxjs/operators';
 
 import {
   BC_MSG_LOAD_COMMUNITY,
+  BC_MSG_SET_DEFAULT_ACCOUNT,
   BroadcastChannelMessage,
   getBroadcastChannemMessageKey,
 } from '../types/services';
@@ -24,7 +25,10 @@ class RxBroadcastChannelListener {
       const channel = new BroadcastChannel(CYB_BROADCAST_CHANNEL);
 
       channel.onmessage = (msg: MessageEvent<BroadcastChannelMessage>) => {
-        if (msg.data.type === BC_MSG_LOAD_COMMUNITY) {
+        if (
+          msg.data.type === BC_MSG_LOAD_COMMUNITY ||
+          msg.data.type === BC_MSG_SET_DEFAULT_ACCOUNT
+        ) {
           dispatch(msg.data);
           return;
         }

src/services/backend/types/services.ts

@@ -1,4 +1,5 @@
 import { SyncCommunityResult } from 'src/services/community/community';
+import { setDefaultAccount } from 'src/redux/features/pocket';
 import { IndexedDbWriteMessage } from '../../CozoDb/types/types';
 
 export type SyncEntryName =
@@ -71,6 +72,10 @@ export type LoadCommunityMessage = {
   value: SyncCommunityResult;
 };
 
+export const BC_MSG_SET_DEFAULT_ACCOUNT = setDefaultAccount.type;
+
+export type SetDefaultAccountMessage = typeof setDefaultAccount;
+
 // export type SenseListUpdate = {
 //   type: 'sense_list_update';
 //   list: SenseListItem[];
@@ -81,7 +86,8 @@ export type BroadcastChannelMessage =
   | SyncEntryMessage
   | IndexedDbWriteMessage
   | ServiceStatusMessage
-  | LoadCommunityMessage;
+  | LoadCommunityMessage
+  | SetDefaultAccountMessage;
 // | SenseListUpdate
 // | SenseListRemove;
 

src/utils/config.ts

@@ -75,9 +75,8 @@ const COSMOS = {
   BECH32_PREFIX_ACC_ADDR_COSMOS: 'cosmos',
 };
 
-const LOCALSTORAGE_CHAIN_ID = localStorage.getItem('chainId');
+const LOCALSTORAGE_CHAIN_ID = Networks.BOSTROM;
 
-const CHAIN_PARAMS_LOCALSTORAGE = localStorage.getItem('CHAIN_PARAMS');
 let CHAIN_PARAMS = {
   CHAIN_ID: process.env.CHAIN_ID || Networks.BOSTROM,
   DENOM_CYBER: 'boot',
@@ -119,13 +118,6 @@ if (LOCALSTORAGE_CHAIN_ID === 'space-pussy') {
   };
 }
 
-if (CHAIN_PARAMS_LOCALSTORAGE !== null && LOCALSTORAGE_CHAIN_ID !== null) {
-  const CHAIN_PARAMS_LOCALSTORAGE_DATA = JSON.parse(CHAIN_PARAMS_LOCALSTORAGE);
-  if (CHAIN_PARAMS_LOCALSTORAGE_DATA[LOCALSTORAGE_CHAIN_ID]) {
-    CHAIN_PARAMS = { ...CHAIN_PARAMS_LOCALSTORAGE_DATA[LOCALSTORAGE_CHAIN_ID] };
-  }
-}
-
 const CYBER = {
   CYBER_CONGRESS_ADDRESS: 'bostrom1xszmhkfjs3s00z2nvtn7evqxw3dtus6yr8e4pw',
   DIVISOR_CYBER_G: 10 ** 9,