fix(compose_txn): sync that statuses of the wallet buttons on the com…

…pose-txn page and settings

src/app/[lang]/components/NavBar/Settings/ConnectWallet.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import Image from 'next/image';
 import { type TFunction } from 'i18next';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { IconWallet, IconWalletOff } from '@tabler/icons-react';
 import { WalletId, useWallet } from '@txnlab/use-wallet-react';
@@ -11,13 +11,15 @@ import {
   magicPromptCanceledAtom,
   magicProviderAtom
 } from '@/app/[lang]/components/wallet';
+import { isWalletConnectedAtom } from '@/app/lib/wallet-utils';
 
 /** Button and menu for connecting wallet */
 export default function ConnectWallet({ t }: { t: TFunction }) {
   const { wallets, activeAccount, activeWallet } = useWallet();
   const [magicProvider, setMagicProvider] = useAtom(magicProviderAtom);
   const connectWalletBtnRef = useRef<HTMLButtonElement>(null);
   const magicEmailCanceled = useAtomValue(magicPromptCanceledAtom);
+  const setIsWalletConnected = useSetAtom(isWalletConnectedAtom);
 
   useEffect(() => {
     // Focus on "connect wallet" button only when the prompt for entering the email address to get a
@@ -26,6 +28,12 @@ export default function ConnectWallet({ t }: { t: TFunction }) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [magicProvider, magicEmailCanceled]);
 
+  useEffect(() => {
+    // Tell other components wallet connection status has changed
+    setIsWalletConnected(!!activeAccount);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeAccount]);
+
   return (<>
     {!activeAccount && <>
       {magicProvider && <MagicAuthPrompt t={t} />}

src/app/[lang]/txn/compose/components/wallet/ConnectWallet.tsx

@@ -31,6 +31,7 @@ export default function ConnectWallet({ t, setvalfn }:{
   }, [magicProvider, magicEmailCanceled]);
 
   useEffect(() => {
+    // Tell other components wallet connection status has changed
     setIsWalletConnected(!!activeAccount);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeAccount]);