[Lw-10372] set up defensive code for when inMemoryWallet or CardanoWallet does not exist (#1147)

* fix: set up defensive code for when inMemoryWallet or CardanoWallet does not exist

* fix: two more errors on avatar and drodownmenu for defensive code missing

Author: VanessaPC

apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx

@@ -43,7 +43,7 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
 
   useEffect(() => () => setIsDropdownMenuOpen(false), [setIsDropdownMenuOpen]);
 
-  const walletName = cardanoWallet.source.wallet.metadata.name;
+  const walletName = cardanoWallet?.source?.wallet?.metadata?.name;
 
   const titleCharBeforeEll = 10;
   const titleCharAfterEll = 0;
@@ -57,11 +57,11 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
       placement="bottomRight"
       trigger={['click']}
     >
-      {process.env.USE_MULTI_WALLET === 'true' ? (
+      {process.env.USE_MULTI_WALLET === 'true' && walletName ? (
         <div className={styles.profileDropdownTrigger}>
           <ProfileDropdown.Trigger
             title={addEllipsis(walletName, titleCharBeforeEll, titleCharAfterEll)}
-            subtitle={getActiveWalletSubtitle(cardanoWallet.source.account)}
+            subtitle={getActiveWalletSubtitle(cardanoWallet?.source.account)}
             active={isDropdownMenuOpen}
             profile={
               activeWalletAvatar

apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserAvatar.tsx

@@ -15,7 +15,7 @@ export const UserAvatar = ({ walletName, isPopup, avatar }: UserAvatarProps): Re
     {avatar ? (
       <Image src={avatar} className={styles.userAvatarImage} preview={false} />
     ) : (
-      <span>{walletName[0]?.toUpperCase()}</span>
+      <span>{walletName && walletName[0]?.toUpperCase()}</span>
     )}
   </div>
 );

apps/browser-extension-wallet/src/hooks/useCollateral.ts

@@ -33,7 +33,7 @@ export const useCollateral = (): UseCollateralReturn => {
   const { setBuiltTxData } = useBuiltTxState();
   const [isInitializing, setIsInitializing] = useState<boolean>(false);
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  const addresses = useObservable(inMemoryWallet.addresses$);
+  const addresses = useObservable(inMemoryWallet?.addresses$);
   const walletAddress = addresses?.[0]?.address;
   const maxAvailableAda = useMaxAda();
   const hasEnoughAda = useMemo(() => maxAvailableAda >= COLLATERAL_AMOUNT_LOVELACES, [maxAvailableAda]);

apps/browser-extension-wallet/src/hooks/useDelegationDetails.ts

@@ -7,7 +7,7 @@ import { useWalletStore } from '../stores';
 
 export const useDelegationDetails = (): Wallet.Cardano.StakePool => {
   const { inMemoryWallet } = useWalletStore();
-  const rewardAccounts = useObservable(inMemoryWallet.delegation.rewardAccounts$);
+  const rewardAccounts = useObservable(inMemoryWallet?.delegation?.rewardAccounts$);
 
   return useMemo(() => {
     const rewardAccount = !isEmpty(rewardAccounts) ? rewardAccounts[0] : undefined;

apps/browser-extension-wallet/src/hooks/useGetHandles.ts

@@ -5,7 +5,7 @@ import { HandleInfo } from '@cardano-sdk/wallet';
 
 export const useGetHandles = (): HandleInfo[] => {
   const { inMemoryWallet } = useWalletStore();
-  const handles = (useObservable(inMemoryWallet.handles$) || []).sort(
+  const handles = (useObservable(inMemoryWallet?.handles$) || []).sort(
     ({ nftMetadata: { name: a } }, { nftMetadata: { name: b } }) => a.length - b.length
   );
 

apps/browser-extension-wallet/src/hooks/useMaxAda.ts

@@ -9,8 +9,8 @@ const { getTotalMinimumCoins, setMissingCoins } = Wallet;
 export const useMaxAda = (): bigint => {
   const [maxADA, setMaxADA] = useState<bigint>();
   const { walletInfo, inMemoryWallet } = useWalletStore();
-  const balance = useObservable(inMemoryWallet.balance.utxo.available$);
-  const availableRewards = useObservable(inMemoryWallet.balance.rewardAccounts.rewards$);
+  const balance = useObservable(inMemoryWallet?.balance?.utxo.available$);
+  const availableRewards = useObservable(inMemoryWallet?.balance?.rewardAccounts?.rewards$);
 
   const calculateMaxAda = useCallback(async () => {
     if (!balance) {

apps/browser-extension-wallet/src/hooks/useSyncingTheFirstTime.ts

@@ -11,13 +11,13 @@ export const useSyncingTheFirstTime = (): boolean => {
     () =>
       concat(
         of(true),
-        inMemoryWallet.syncStatus.isSettled$.pipe(
+        inMemoryWallet?.syncStatus?.isSettled$.pipe(
           filter((s: boolean) => s),
           map(() => false),
           take(1)
         )
       ),
-    [inMemoryWallet.syncStatus.isSettled$]
+    [inMemoryWallet?.syncStatus?.isSettled$]
   );
 
   return useObservable(isSyncingForTheFirstTime$);

apps/browser-extension-wallet/src/hooks/useWalletAvatar.ts

@@ -15,7 +15,7 @@ export const useWalletAvatar = (): UseWalletAvatar => {
   const [handle] = useGetHandles();
   const [avatars, { updateLocalStorage: setUserAvatar }] = useLocalStorage('userAvatar');
 
-  const activeWalletId = cardanoWallet.source.wallet.walletId;
+  const activeWalletId = cardanoWallet?.source.wallet.walletId;
   const handleImage = handle?.profilePic;
   const activeWalletAvatar =
     (environmentName && avatars?.[`${environmentName}${activeWalletId}`]) ||

apps/browser-extension-wallet/src/views/browser-view/features/settings/components/SettingsWalletBase.tsx

@@ -64,7 +64,8 @@ export const SettingsWalletBase = <AdditionalDrawers extends string>({
   const { t } = useTranslation();
   const { environmentName, inMemoryWallet, walletInfo, setHdDiscoveryStatus } = useWalletStore();
   const { AVAILABLE_CHAINS } = config();
-  const unspendable = useObservable(inMemoryWallet.balance.utxo.unspendable$);
+
+  const unspendable = useObservable(inMemoryWallet?.balance?.utxo.unspendable$);
 
   const hasCollateral = useMemo(() => unspendable?.coins >= COLLATERAL_AMOUNT_LOVELACES, [unspendable?.coins]);
   const backgroundServices = useBackgroundServiceAPIContext();