feat: account event change get starknet

packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/AccountSwitchAddress.stories.tsx → 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>
 );

packages/wallet-ui/src/components/ui/molecule/AccountSwitchAddress/AccountSwitchAddress.view.tsx → 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={{

packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/index.ts

@@ -0,0 +1 @@
+export { AccountSwitchModalView as AccountSwitchModal } from './AccountSwitchModal.view';

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,8 +116,8 @@ export const SideBarView = ({ address }: Props) => {
       <AccountLabel>My account</AccountLabel>
       <RowDiv>
         <InfoIcon onClick={() => setInfoModalOpen(true)}>i</InfoIcon>
-        <AccountSwitchAddress
-          address={address}
+        <AccountSwitchModal
+          currentAddress={address}
           starkName={starkName}
           accounts={accounts}
         />

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,35 @@ 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,
-      },
-    });
+      });
+
+      // push the current account into state
+      dispatch(setAccounts(account));
+
+      return account;
+    } catch (err: any) {
+      const toastr = new Toastr();
+      toastr.error(err.message as unknown as string);
+    } finally {
+      dispatch(disableLoading());
+    }
   };
 
   return {