From b5dd6c41a5e44cd0ddee6a0eae93fdd71980572b Mon Sep 17 00:00:00 2001
From: Florin Dzeladini <florin.dzeladini@consensys.net>
Date: Thu, 16 Jan 2025 11:44:49 +0100
Subject: [PATCH] chore: fix comments

---
 .../ui/molecule/AccountSwitchAddress/index.ts |  1 -
 .../AccountSwitchModal.stories.tsx}           | 28 ++++++++--------
 .../AccountSwitchModal.style.ts}              |  0
 .../AccountSwitchModal.view.tsx}              | 22 ++++++-------
 .../ui/molecule/AccountSwitchModal/index.ts   |  1 +
 .../ui/organism/SideBar/SideBar.view.tsx      |  4 +--
 .../wallet-ui/src/services/useStarkNetSnap.ts | 32 +++++++++++++++----
 7 files changed, 53 insertions(+), 35 deletions(-)
 delete mode 100644 packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/index.ts
 rename packages/wallet-ui/src/components/ui/molecule/{AccountSwitchAddress/AccountSwitchAddress.stories.tsx => AccountSwitchModal/AccountSwitchModal.stories.tsx} (65%)
 rename packages/wallet-ui/src/components/ui/molecule/{AccountSwitchAddress/AccountSwitchAddress.style.ts => AccountSwitchModal/AccountSwitchModal.style.ts} (100%)
 rename packages/wallet-ui/src/components/ui/molecule/{AccountSwitchAddress/AccountSwitchAddress.view.tsx => AccountSwitchModal/AccountSwitchModal.view.tsx} (84%)
 create mode 100644 packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/index.ts

diff --git a/packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/index.ts b/packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/index.ts
deleted file mode 100644
index 78d66431..00000000
--- a/packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { AccountSwitchAddressView as AccountSwitchAddress } from './AccountSwitchAddress.view';
diff --git a/packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/AccountSwitchAddress.stories.tsx b/packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.stories.tsx
similarity index 65%
rename from packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/AccountSwitchAddress.stories.tsx
rename to packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.stories.tsx
index 7c5540e1..d55fadab 100644
--- a/packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/AccountSwitchAddress.stories.tsx
+++ b/packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.stories.tsx
@@ -1,9 +1,9 @@
 import { Meta } from '@storybook/react';
-import { AccountSwitchAddressView } from './AccountSwitchAddress.view';
+import { AccountSwitchModalView } from './AccountSwitchModal.view';
 
 export default {
   title: 'Molecule/AccountAddress',
-  component: AccountSwitchAddressView,
+  component: AccountSwitchModalView,
 } as Meta;
 
 const address =
@@ -20,38 +20,38 @@ const accounts = ['0x123...abcd', '0x456...efgh', '0x789...ijkl'];
 
 export const Default = () => (
   <div style={wrapperStyle}>
-    <AccountSwitchAddressView
-      address={address}
+    <AccountSwitchModalView
+      currentAddress={address}
       accounts={accounts}
-    ></AccountSwitchAddressView>
+    ></AccountSwitchModalView>
   </div>
 );
 
 export const TooltipTop = () => (
   <div style={wrapperStyle}>
-    <AccountSwitchAddressView
-      address={address}
+    <AccountSwitchModalView
+      currentAddress={address}
       accounts={accounts}
-    ></AccountSwitchAddressView>
+    ></AccountSwitchModalView>
   </div>
 );
 
 export const Full = () => (
   <div style={wrapperStyle}>
-    <AccountSwitchAddressView
-      address={address}
+    <AccountSwitchModalView
+      currentAddress={address}
       accounts={accounts}
       full
-    ></AccountSwitchAddressView>
+    ></AccountSwitchModalView>
   </div>
 );
 
 export const DarkerBackground = () => (
   <div style={{ ...wrapperStyle, backgroundColor: 'grey' }}>
-    <AccountSwitchAddressView
-      address={address}
+    <AccountSwitchModalView
+      currentAddress={address}
       accounts={accounts}
       full
-    ></AccountSwitchAddressView>
+    ></AccountSwitchModalView>
   </div>
 );
diff --git a/packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/AccountSwitchAddress.style.ts b/packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.style.ts
similarity index 100%
rename from packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/AccountSwitchAddress.style.ts
rename to packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.style.ts
diff --git a/packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/AccountSwitchAddress.view.tsx b/packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.view.tsx
similarity index 84%
rename from packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/AccountSwitchAddress.view.tsx
rename to packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.view.tsx
index 9cbb99a0..9e56e8c6 100644
--- a/packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/AccountSwitchAddress.view.tsx
+++ b/packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.view.tsx
@@ -1,5 +1,5 @@
 import { shortenAddress, shortenDomain } from 'utils/utils';
-import { Wrapper } from './AccountSwitchAddress.style';
+import { Wrapper } from './AccountSwitchModal.style';
 import { Menu } from '@headlessui/react';
 import {
   MenuItems,
@@ -14,26 +14,24 @@ import { useAppSelector } from 'hooks/redux';
 import { useStarkNetSnap } from 'services';
 
 interface Props {
-  address: string;
+  currentAddress: string;
   accounts: string[];
   full?: boolean;
   starkName?: string;
 }
 
-export const AccountSwitchAddressView = ({
-  address,
+export const AccountSwitchModalView = ({
+  currentAddress,
   accounts,
   full,
   starkName,
 }: Props) => {
   const networks = useAppSelector((state) => state.networks);
-  const { switchAccount, initWalletData } = useStarkNetSnap();
+  const { switchAccount, initWalletData, addNewAccount } = useStarkNetSnap();
   const chainId = networks?.items[networks.activeNetwork]?.chainId;
 
-  const { addNewAccount } = useStarkNetSnap();
-
-  const changeAccount = async (address: string) => {
-    const account = await switchAccount(chainId, address);
+  const changeAccount = async (currentAddress: string) => {
+    const account = await switchAccount(chainId, currentAddress);
     await initWalletData({
       account,
       chainId,
@@ -45,10 +43,10 @@ export const AccountSwitchAddressView = ({
       <Menu.Button style={{ background: 'none', border: 'none' }}>
         <Wrapper backgroundTransparent iconRight="angle-down">
           {full
-            ? starkName ?? address
+            ? starkName ?? currentAddress
             : starkName
             ? shortenDomain(starkName)
-            : shortenAddress(address)}
+            : shortenAddress(currentAddress)}
         </Wrapper>
       </Menu.Button>
 
@@ -64,7 +62,7 @@ export const AccountSwitchAddressView = ({
             <Menu.Item key={account}>
               <NetworkMenuItem onClick={() => changeAccount(account)}>
                 <Radio
-                  checked={account === address}
+                  checked={account === currentAddress}
                   name="radio-buttons"
                   inputProps={{ 'aria-label': account }}
                   sx={{
diff --git a/packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/index.ts b/packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/index.ts
new file mode 100644
index 00000000..f510464a
--- /dev/null
+++ b/packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/index.ts
@@ -0,0 +1 @@
+export { AccountSwitchModalView as AccountSwitchModal } from './AccountSwitchModal.view';
diff --git a/packages/wallet-ui/src/components/ui/organism/SideBar/SideBar.view.tsx b/packages/wallet-ui/src/components/ui/organism/SideBar/SideBar.view.tsx
index 786a9452..5206777e 100644
--- a/packages/wallet-ui/src/components/ui/organism/SideBar/SideBar.view.tsx
+++ b/packages/wallet-ui/src/components/ui/organism/SideBar/SideBar.view.tsx
@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect, useRef, useState } from 'react';
 import { RoundedIcon } from 'components/ui/atom/RoundedIcon';
-import { AccountSwitchAddress } from 'components/ui/molecule/AccountSwitchAddress';
+import { AccountSwitchModal } from 'components/ui/molecule/AccountSwitchModal';
 import { AssetsList } from 'components/ui/molecule/AssetsList';
 import { PopIn } from 'components/ui/molecule/PopIn';
 import { AccountDetailsModal } from '../AccountDetailsModal';
@@ -116,7 +116,7 @@ export const SideBarView = ({ address }: Props) => {
       <AccountLabel>My account</AccountLabel>
       <RowDiv>
         <InfoIcon onClick={() => setInfoModalOpen(true)}>i</InfoIcon>
-        <AccountSwitchAddress
+        <AccountSwitchModal
           address={address}
           starkName={starkName}
           accounts={accounts}
diff --git a/packages/wallet-ui/src/services/useStarkNetSnap.ts b/packages/wallet-ui/src/services/useStarkNetSnap.ts
index b5287f27..e43496ba 100644
--- a/packages/wallet-ui/src/services/useStarkNetSnap.ts
+++ b/packages/wallet-ui/src/services/useStarkNetSnap.ts
@@ -23,6 +23,7 @@ import {
   isGTEMinVersion,
   getTokenBalanceWithDetails,
   isUserDenyError,
+  shortenAddress,
 } from '../utils/utils';
 import { setWalletConnection } from '../slices/walletSlice';
 import { FeeToken, FeeTokenUnit, Network } from '../types';
@@ -800,13 +801,32 @@ export const useStarkNetSnap = () => {
   };
 
   const switchAccount = async (chainId: string, address: string) => {
-    return await invokeSnap<Account>({
-      method: 'starkNet_switchAccount',
-      params: {
+    dispatch(
+      enableLoadingWithMessage(
+        `Switching Account to ${shortenAddress(address)}`,
+      ),
+    );
+    try {
+      const account = await invokeSnap<Account>({
+        method: 'starkNet_switchAccount',
+        params: {
+          chainId,
+          address,
+        },
+      });
+
+      await initWalletData({
+        account,
         chainId,
-        address,
-      },
-    });
+      });
+
+      return account;
+    } catch (err: any) {
+      const toastr = new Toastr();
+      toastr.error(err.message as unknown as string);
+    } finally {
+      dispatch(disableLoading());
+    }
   };
 
   return {