feat: wallet-ui multiple accounts scrollbar

Consensys · Jan 28, 2025 · 1c7aaa4 · 1c7aaa4
1 parent 492e311
commit 1c7aaa4
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 41 deletions.
diff --git a/packages/wallet-ui/src/App.tsx b/packages/wallet-ui/src/App.tsx
@@ -37,7 +37,9 @@ function App() {
   } = useAppSelector((state) => state.modals);
   const { loader } = useAppSelector((state) => state.UI);
   const networks = useAppSelector((state) => state.networks);
-  const { currentAccount } = useAppSelector((state) => state.wallet);
+  const { currentAccount, currentAccountIndex } = useAppSelector(
+    (state) => state.wallet,
+  );
   const { hasMetamask } = useHasMetamask();
   const chainId = networks.items?.[networks.activeNetwork]?.chainId;
   const address = currentAccount ?? DUMMY_ADDRESS;
@@ -97,7 +99,7 @@ function App() {
         >
           <DeployModal address={address} />
         </PopIn>
-        <Home address={address} />
+        <Home address={address} addressIndex={currentAccountIndex} />
         <PopIn isOpen={loading}>
           {loading && (
             <LoadingBackdrop>{loader.loadingMessage}</LoadingBackdrop>

diff --git a/packages/wallet-ui/src/components/pages/Home/Home.view.tsx b/packages/wallet-ui/src/components/pages/Home/Home.view.tsx
@@ -5,9 +5,10 @@ import { RightPart, Wrapper, NoTransactions } from './Home.style';
 import { useAppSelector } from 'hooks/redux';
 interface Props {
   address: string;
+  addressIndex: number;
 }
 
-export const HomeView = ({ address }: Props) => {
+export const HomeView = ({ address, addressIndex }: Props) => {
   const { erc20TokenBalanceSelected, transactions } = useAppSelector(
     (state) => state.wallet,
   );
@@ -16,7 +17,7 @@ export const HomeView = ({ address }: Props) => {
 
   return (
     <Wrapper>
-      <SideBar address={address} />
+      <SideBar address={address} addressIndex={addressIndex} />
       <RightPart>
         {!upgradeModalVisible &&
           Object.keys(erc20TokenBalanceSelected).length > 0 && (

diff --git a/...es/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.stories.tsx b/...es/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.stories.tsx
@@ -17,12 +17,14 @@ const wrapperStyle = {
 };
 
 const accounts = ['0x123...abcd', '0x456...efgh', '0x789...ijkl'];
+const accountsIndex = [0, 1, 2];
 
 export const Default = () => (
   <div style={wrapperStyle}>
     <AccountSwitchModalView
       currentAddress={address}
       accounts={accounts}
+      accountsIndex={accountsIndex}
     ></AccountSwitchModalView>
   </div>
 );
@@ -32,6 +34,7 @@ export const TooltipTop = () => (
     <AccountSwitchModalView
       currentAddress={address}
       accounts={accounts}
+      accountsIndex={accountsIndex}
     ></AccountSwitchModalView>
   </div>
 );
@@ -41,6 +44,7 @@ export const Full = () => (
     <AccountSwitchModalView
       currentAddress={address}
       accounts={accounts}
+      accountsIndex={accountsIndex}
       full
     ></AccountSwitchModalView>
   </div>
@@ -51,6 +55,7 @@ export const DarkerBackground = () => (
     <AccountSwitchModalView
       currentAddress={address}
       accounts={accounts}
+      accountsIndex={accountsIndex}
       full
     ></AccountSwitchModalView>
   </div>

diff --git a/packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.style.ts b/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;
+`;
diff --git a/packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.view.tsx b/packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.view.tsx
@@ -1,13 +1,18 @@
 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';
@@ -16,13 +21,15 @@ import { useStarkNetSnap } from 'services';
 interface Props {
   currentAddress: string;
   accounts: string[];
+  accountsIndex: number[];
   full?: boolean;
   starkName?: string;
 }
 
 export const AccountSwitchModalView = ({
   currentAddress,
   accounts,
+  accountsIndex,
   full,
   starkName,
 }: Props) => {
@@ -42,36 +49,48 @@ 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 === currentAddress; // Check if the account is selected
+            return (
+              <Menu.Item key={account}>
+                <AccountSwitchMenuItem
+                  onClick={() => switchAccount(chainId, account)}
+                  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}
+                    connected={account === currentAddress}
+                  />
+                  <MenuItemText style={{ marginLeft: isSelected ? 19 : 20 }}>
+                    <div>
+                      <div>Account {accountsIndex[index] + 1}</div>
+                      <div>{full ? account : shortenAddress(account)}</div>
+                    </div>
+                  </MenuItemText>
+                </AccountSwitchMenuItem>
+              </Menu.Item>
+            );
+          })}
         </MenuSection>
-
+        <MenuDivider />
         <MenuSection>
           <Menu.Item>
             <NetworkMenuItem

diff --git a/.../wallet-ui/src/components/ui/organism/AccountDetailsModal/AccountDetailsModal.stories.tsx b/.../wallet-ui/src/components/ui/organism/AccountDetailsModal/AccountDetailsModal.stories.tsx
@@ -10,8 +10,11 @@ export default {
 
 const address =
   '0x683ec5da50476f84a5d47e822cd4dd35ae3a63c6c1f0725bf28526290d1ee13';
+const addressIndex = 0;
 
-export const ContentOnly = () => <AccountDetailsModalView address={address} />;
+export const ContentOnly = () => (
+  <AccountDetailsModalView address={address} addressIndex={addressIndex} />
+);
 
 export const WithModal = () => {
   let [isOpen, setIsOpen] = useState(false);
@@ -24,7 +27,10 @@ export const WithModal = () => {
         showClose={false}
         style={{ backgroundColor: 'transparent' }}
       >
-        <AccountDetailsModalView address={address} />
+        <AccountDetailsModalView
+          address={address}
+          addressIndex={addressIndex}
+        />
       </PopIn>
     </>
   );

diff --git a/...ges/wallet-ui/src/components/ui/organism/AccountDetailsModal/AccountDetailsModal.view.tsx b/...ges/wallet-ui/src/components/ui/organism/AccountDetailsModal/AccountDetailsModal.view.tsx
@@ -15,9 +15,10 @@ import { useStarkNetSnap } from 'services';
 
 interface Props {
   address: string;
+  addressIndex: number;
 }
 
-export const AccountDetailsModalView = ({ address }: Props) => {
+export const AccountDetailsModalView = ({ address, addressIndex }: Props) => {
   const networks = useAppSelector((state) => state.networks);
   const { getPrivateKeyFromAddress } = useStarkNetSnap();
   const chainId = networks?.items[networks.activeNetwork]?.chainId;
@@ -28,7 +29,7 @@ export const AccountDetailsModalView = ({ address }: Props) => {
       </AccountImageDiv>
       <Wrapper>
         <TitleDiv>
-          <Title>My account</Title>
+          <Title>Account {addressIndex + 1}</Title>
           {/* <ModifyIcon /> */}
         </TitleDiv>
         <AddressQrCode value={address} />

diff --git a/packages/wallet-ui/src/components/ui/organism/SideBar/SideBar.stories.tsx b/packages/wallet-ui/src/components/ui/organism/SideBar/SideBar.stories.tsx
@@ -9,10 +9,12 @@ export default {
 const address =
   '0x683ec5da50476f84a5d47e822cd4dd35ae3a63c6c1f0725bf28526290d1ee13';
 
+const addressIndex = 0;
+
 export const Default = () => {
   return (
     <div style={{ width: '33%' }}>
-      <SideBarView address={address} />
+      <SideBarView address={address} addressIndex={addressIndex} />
     </div>
   );
 };
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
@@ -29,9 +29,10 @@ import { PopperTooltip } from 'components/ui/molecule/PopperTooltip';
 
 interface Props {
   address: string;
+  addressIndex: number;
 }
 
-export const SideBarView = ({ address }: Props) => {
+export const SideBarView = ({ address, addressIndex }: Props) => {
   const networks = useAppSelector((state) => state.networks);
   const accounts = useAppSelector((state) => state.wallet.accounts);
   const chainId = networks?.items[networks.activeNetwork]?.chainId;
@@ -75,7 +76,7 @@ export const SideBarView = ({ address }: Props) => {
         isOpen={accountDetailsOpen}
         setIsOpen={setAccountDetailsOpen}
       >
-        <AccountDetailsModal address={address} />
+        <AccountDetailsModal address={address} addressIndex={addressIndex} />
       </PopInStyled>
       <PopIn
         isOpen={infoModalOpen}
@@ -113,13 +114,14 @@ export const SideBarView = ({ address }: Props) => {
         <AccountImageStyled address={address} connected={wallet.connected} />
       </AccountDetails>
 
-      <AccountLabel>My account</AccountLabel>
+      <AccountLabel>Account {addressIndex + 1} </AccountLabel>
       <RowDiv>
         <InfoIcon onClick={() => setInfoModalOpen(true)}>i</InfoIcon>
         <AccountSwitchModal
           currentAddress={address}
           starkName={starkName}
-          accounts={accounts}
+          accounts={accounts.map((account) => account.address)}
+          accountsIndex={accounts.map((account) => account.addressIndex)}
         />
         <PopperTooltip content="Copied!" closeTrigger="click">
           <CopyIcon

diff --git a/packages/wallet-ui/src/slices/walletSlice.ts b/packages/wallet-ui/src/slices/walletSlice.ts
@@ -8,8 +8,9 @@ export interface WalletState {
   connected: boolean;
   isLoading: boolean;
   forceReconnect: boolean;
-  accounts: string[];
+  accounts: Account[];
   currentAccount: string;
+  currentAccountIndex: number;
   erc20TokenBalances: Erc20TokenBalance[];
   erc20TokenBalanceSelected: Erc20TokenBalance;
   transactions: Transaction[];
@@ -23,6 +24,7 @@ const initialState: WalletState = {
   forceReconnect: false,
   accounts: [],
   currentAccount: '',
+  currentAccountIndex: 0,
   erc20TokenBalances: [],
   erc20TokenBalanceSelected: {} as Erc20TokenBalance,
   transactions: [],
@@ -53,15 +55,19 @@ export const walletSlice = createSlice({
     ) => {
       const accountsToInsert = Array.isArray(payload) ? payload : [payload];
 
-      const accountSet = new Set(state.accounts);
+      const accountSet = new Set(
+        state.accounts.map((account) => account.address),
+      ); // Create a set of addresses
+
       for (const account of accountsToInsert) {
         if (!accountSet.has(account.address)) {
-          state.accounts.push(account.address);
+          state.accounts.push(account);
         }
       }
     },
     setCurrentAccount: (state, { payload }: { payload: Account }) => {
       state.currentAccount = payload.address;
+      state.currentAccountIndex = payload.addressIndex;
     },
     setErc20TokenBalances: (state, { payload }) => {
       state.erc20TokenBalances = payload;

diff --git a/packages/wallet-ui/src/types/index.ts b/packages/wallet-ui/src/types/index.ts
@@ -33,6 +33,7 @@ export type Account = {
   upgradeRequired: boolean;
   deployRequired: boolean;
   chainId: string;
+  addressIndex: number;
 };
 
 export type Network = {