feat: wallet-ui multiple accounts scrollbar

packages/wallet-ui/src/App.tsx

@@ -40,7 +40,7 @@ function App() {
   const { currentAccount } = useAppSelector((state) => state.wallet);
   const { hasMetamask } = useHasMetamask();
   const chainId = networks.items?.[networks.activeNetwork]?.chainId;
-  const address = currentAccount ?? DUMMY_ADDRESS;
+  const address = currentAccount?.address ?? DUMMY_ADDRESS;
 
   useEffect(() => {
     if (!provider) {
@@ -97,7 +97,7 @@ function App() {
         >
           <DeployModal address={address} />
         </PopIn>
-        <Home address={address} />
+        <Home />
         <PopIn isOpen={loading}>
           {loading && (
             <LoadingBackdrop>{loader.loadingMessage}</LoadingBackdrop>

packages/wallet-ui/src/components/pages/Home/Home.view.tsx

@@ -3,20 +3,20 @@ import { Header } from 'components/ui/organism/Header';
 import { SideBar } from 'components/ui/organism/SideBar';
 import { RightPart, Wrapper, NoTransactions } from './Home.style';
 import { useAppSelector } from 'hooks/redux';
-interface Props {
-  address: string;
-}
+import { DUMMY_ADDRESS } from 'utils/constants';
 
-export const HomeView = ({ address }: Props) => {
+export const HomeView = () => {
   const { erc20TokenBalanceSelected, transactions } = useAppSelector(
     (state) => state.wallet,
   );
   const loader = useAppSelector((state) => state.UI.loader);
+  const currentAccount = useAppSelector((state) => state.wallet.currentAccount);
+  const address = currentAccount?.address ?? DUMMY_ADDRESS;
   const { upgradeModalVisible } = useAppSelector((state) => state.modals);
 
   return (
     <Wrapper>
-      <SideBar address={address} />
+      <SideBar />
       <RightPart>
         {!upgradeModalVisible &&
           Object.keys(erc20TokenBalanceSelected).length > 0 && (

packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.stories.tsx

@@ -6,8 +6,6 @@ export default {
   component: AccountSwitchModalView,
 } as Meta;
 
-const address =
-  '0x683ec5da50476f84a5d47e822cd4dd35ae3a63c6c1f0725bf28526290d1ee13';
 const wrapperStyle = {
   backgroundColor: 'white',
   height: '300px',
@@ -16,42 +14,20 @@ const wrapperStyle = {
   justifyContent: 'center',
 };
 
-const accounts = ['0x123...abcd', '0x456...efgh', '0x789...ijkl'];
-
 export const Default = () => (
   <div style={wrapperStyle}>
-    <AccountSwitchModalView
-      currentAddress={address}
-      accounts={accounts}
-    ></AccountSwitchModalView>
-  </div>
-);
-
-export const TooltipTop = () => (
-  <div style={wrapperStyle}>
-    <AccountSwitchModalView
-      currentAddress={address}
-      accounts={accounts}
-    ></AccountSwitchModalView>
+    <AccountSwitchModalView></AccountSwitchModalView>
   </div>
 );
 
 export const Full = () => (
   <div style={wrapperStyle}>
-    <AccountSwitchModalView
-      currentAddress={address}
-      accounts={accounts}
-      full
-    ></AccountSwitchModalView>
+    <AccountSwitchModalView full></AccountSwitchModalView>
   </div>
 );
 
 export const DarkerBackground = () => (
   <div style={{ ...wrapperStyle, backgroundColor: 'grey' }}>
-    <AccountSwitchModalView
-      currentAddress={address}
-      accounts={accounts}
-      full
-    ></AccountSwitchModalView>
+    <AccountSwitchModalView full></AccountSwitchModalView>
   </div>
 );

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

@@ -1,3 +1,4 @@
+import { AccountImage } from 'components/ui/atom/AccountImage';
 import { Button } from 'components/ui/atom/Button';
 import styled from 'styled-components';
 
@@ -24,3 +25,19 @@ export const Wrapper = styled(Button).attrs((props) => ({
     border: none;
   }
 `;
+
+export const Normal = styled.div`
+  font-size: ${(props) => props.theme.typography.p1.fontSize};
+`;
+
+export const AccountSwitchMenuItem = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 14px;
+`;
+
+export const AccountImageStyled = styled(AccountImage)`
+  margin-left: ${(props) => props.theme.spacing.small};
+  cursor: pointer;
+`;

packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.view.tsx

@@ -1,35 +1,35 @@
 import { shortenAddress, shortenDomain } from 'utils/utils';
-import { Wrapper } from './AccountSwitchModal.style';
+import {
+  AccountImageStyled,
+  Normal,
+  Wrapper,
+  AccountSwitchMenuItem,
+} from './AccountSwitchModal.style';
 import { Menu } from '@headlessui/react';
 import {
   MenuItems,
   MenuSection,
   NetworkMenuItem,
   MenuItemText,
+  MenuDivider,
 } from 'components/ui/organism/Menu/Menu.style';
-import { Radio } from '@mui/material';
 import { theme } from 'theme/default';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useAppSelector } from 'hooks/redux';
 import { useStarkNetSnap } from 'services';
+import { DUMMY_ADDRESS } from 'utils/constants';
 
 interface Props {
-  currentAddress: string;
-  accounts: string[];
   full?: boolean;
   starkName?: string;
 }
 
-export const AccountSwitchModalView = ({
-  currentAddress,
-  accounts,
-  full,
-  starkName,
-}: Props) => {
+export const AccountSwitchModalView = ({ full, starkName }: Props) => {
   const networks = useAppSelector((state) => state.networks);
+  const { currentAccount, accounts } = useAppSelector((state) => state.wallet);
   const { switchAccount, addNewAccount } = useStarkNetSnap();
   const chainId = networks?.items[networks.activeNetwork]?.chainId;
-
+  const currentAddress = currentAccount?.address ?? DUMMY_ADDRESS;
   return (
     <Menu as="div" style={{ display: 'inline-block', position: 'relative' }}>
       <Menu.Button style={{ background: 'none', border: 'none' }}>
@@ -42,36 +42,52 @@ export const AccountSwitchModalView = ({
         </Wrapper>
       </Menu.Button>
 
-      <MenuItems style={{ right: 'auto', zIndex: '1' }}>
+      <MenuItems style={{ right: 'auto', zIndex: '1', width: 'auto' }}>
         {/* Account List */}
         <MenuSection>
           <Menu.Item disabled>
-            <div style={{ padding: '8px 0px 0px 8px' }}>Accounts</div>
+            <Normal>Accounts</Normal>
           </Menu.Item>
         </MenuSection>
-        <MenuSection>
-          {accounts.map((account) => (
-            <Menu.Item key={account}>
-              <NetworkMenuItem onClick={() => switchAccount(chainId, account)}>
-                <Radio
-                  checked={account === currentAddress}
-                  name="radio-buttons"
-                  inputProps={{ 'aria-label': account }}
-                  sx={{
-                    color: theme.palette.grey.grey1,
-                    '&.Mui-checked': {
-                      color: theme.palette.secondary.main,
-                    },
+        <MenuDivider />
+        <MenuSection style={{ height: 201, overflowY: 'auto' }}>
+          {accounts.map((account, index) => {
+            const isSelected = account.address === currentAddress; // Check if the account is selected
+            return (
+              <Menu.Item key={account.address}>
+                <AccountSwitchMenuItem
+                  onClick={() => switchAccount(chainId, account.address)}
+                  style={{
+                    backgroundColor: isSelected
+                      ? theme.palette.grey.grey4
+                      : 'transparent', // Change background color if selected
+                    borderLeft: isSelected
+                      ? `4px solid ${theme.palette.secondary.main}`
+                      : 'none', // Add left border if selected
+                    paddingLeft: isSelected ? 15 : 20, // Add some padding if selected to make space for the border
                   }}
-                />
-                <MenuItemText>
-                  {full ? account : shortenAddress(account)}
-                </MenuItemText>
-              </NetworkMenuItem>
-            </Menu.Item>
-          ))}
+                >
+                  <AccountImageStyled
+                    size={30}
+                    address={account.address}
+                    connected={account.address === currentAddress}
+                  />
+                  <MenuItemText style={{ marginLeft: isSelected ? 19 : 20 }}>
+                    <div>
+                      <div>Account {account.addressIndex + 1}</div>
+                      <div>
+                        {full
+                          ? account.address
+                          : shortenAddress(account.address)}
+                      </div>
+                    </div>
+                  </MenuItemText>
+                </AccountSwitchMenuItem>
+              </Menu.Item>
+            );
+          })}
         </MenuSection>
-
+        <MenuDivider />
         <MenuSection>
           <Menu.Item>
             <NetworkMenuItem

packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionsList.view.tsx

@@ -29,7 +29,7 @@ export const TransactionsListView = ({ transactions }: Props) => {
       timeoutHandle.current = setTimeout(
         () =>
           getTransactions(
-            currentAccount,
+            currentAccount.address,
             erc20TokenBalanceSelected.address,
             10,
             chainId,
@@ -48,7 +48,7 @@ export const TransactionsListView = ({ transactions }: Props) => {
       if (chainId && currentAccount && erc20TokenBalanceSelected.address) {
         clearTimeout(timeoutHandle.current); // cancel the timeout that was in-flight
         getTransactions(
-          currentAccount,
+          currentAccount.address,
           erc20TokenBalanceSelected.address,
           10,
           chainId,

packages/wallet-ui/src/components/ui/organism/AccountDetailsModal/AccountDetailsModal.stories.tsx

@@ -8,10 +8,7 @@ export default {
   component: AccountDetailsModalView,
 } as Meta;
 
-const address =
-  '0x683ec5da50476f84a5d47e822cd4dd35ae3a63c6c1f0725bf28526290d1ee13';
-
-export const ContentOnly = () => <AccountDetailsModalView address={address} />;
+export const ContentOnly = () => <AccountDetailsModalView />;
 
 export const WithModal = () => {
   let [isOpen, setIsOpen] = useState(false);
@@ -24,7 +21,7 @@ export const WithModal = () => {
         showClose={false}
         style={{ backgroundColor: 'transparent' }}
       >
-        <AccountDetailsModalView address={address} />
+        <AccountDetailsModalView />
       </PopIn>
     </>
   );

packages/wallet-ui/src/components/ui/organism/AccountDetailsModal/AccountDetailsModal.view.tsx

@@ -12,23 +12,23 @@ import {
 import { openExplorerTab } from 'utils/utils';
 import { useAppSelector } from 'hooks/redux';
 import { useStarkNetSnap } from 'services';
+import { DUMMY_ADDRESS } from 'utils/constants';
 
-interface Props {
-  address: string;
-}
-
-export const AccountDetailsModalView = ({ address }: Props) => {
+export const AccountDetailsModalView = () => {
   const networks = useAppSelector((state) => state.networks);
+  const currentAccount = useAppSelector((state) => state.wallet.currentAccount);
   const { getPrivateKeyFromAddress } = useStarkNetSnap();
   const chainId = networks?.items[networks.activeNetwork]?.chainId;
+  const address = currentAccount?.address ?? DUMMY_ADDRESS;
+  const addressIndex = currentAccount?.addressIndex ?? 0;
   return (
     <div>
       <AccountImageDiv>
         <AccountImageStyled size={64} address={address} />
       </AccountImageDiv>
       <Wrapper>
         <TitleDiv>
-          <Title>My account</Title>
+          <Title>Account {addressIndex + 1}</Title>
           {/* <ModifyIcon /> */}
         </TitleDiv>
         <AddressQrCode value={address} />

packages/wallet-ui/src/components/ui/organism/AddTokenModal/AddTokenModal.view.tsx

@@ -100,19 +100,21 @@ export const AddTokenModalView = ({ closeModal }: Props) => {
           enabled={enabled}
           onClick={async () => {
             try {
-              const newToken = await addErc20Token(
-                fields.address,
-                fields.name,
-                fields.symbol,
-                parseFloat(fields.decimal),
-                chainId,
-                currentAccount,
-              );
-              if (newToken) {
-                setErc20TokenBalance(newToken);
-                toastr.success('Token added successfully');
+              if (currentAccount) {
+                const newToken = await addErc20Token(
+                  fields.address,
+                  fields.name,
+                  fields.symbol,
+                  parseFloat(fields.decimal),
+                  chainId,
+                  currentAccount.address,
+                );
+                if (newToken) {
+                  setErc20TokenBalance(newToken);
+                  toastr.success('Token added successfully');
+                }
+                closeModal();
               }
-              closeModal();
             } catch (err) {
               toastr.error('Error while adding token');
             }

packages/wallet-ui/src/components/ui/organism/Header/SendSummaryModal/SendSummaryModal.view.tsx

@@ -93,7 +93,7 @@ export const SendSummaryModalView = ({
           wallet.erc20TokenBalanceSelected.address,
           ContractFuncName.Transfer,
           callData,
-          currentAccount,
+          currentAccount.address,
           chainId,
           selectedFeeToken === FeeToken.STRK
             ? constants.TRANSACTION_VERSION.V3
@@ -181,7 +181,7 @@ export const SendSummaryModalView = ({
         wallet.erc20TokenBalanceSelected.address,
         ContractFuncName.Transfer,
         callData,
-        currentAccount,
+        currentAccount.address,
         gasFees.suggestedMaxFee,
         chainId,
         selectedFeeToken,
@@ -190,7 +190,7 @@ export const SendSummaryModalView = ({
           if (result) {
             toastr.success('Transaction sent successfully');
             getTransactions(
-              currentAccount,
+              currentAccount.address,
               wallet.erc20TokenBalanceSelected.address,
               10,
               chainId,

packages/wallet-ui/src/components/ui/organism/SideBar/SideBar.stories.tsx

@@ -6,13 +6,10 @@ export default {
   component: SideBarView,
 } as Meta;
 
-const address =
-  '0x683ec5da50476f84a5d47e822cd4dd35ae3a63c6c1f0725bf28526290d1ee13';
-
 export const Default = () => {
   return (
     <div style={{ width: '33%' }}>
-      <SideBarView address={address} />
+      <SideBarView />
     </div>
   );
 };