feat: update account name from account details

Consensys · Feb 12, 2025 · 1f1fb59 · 1f1fb59
1 parent aed1b1f
commit 1f1fb59
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 6 deletions.
diff --git a/...ges/wallet-ui/src/components/ui/organism/AccountDetailsModal/AccountDetailsModal.style.ts b/...ges/wallet-ui/src/components/ui/organism/AccountDetailsModal/AccountDetailsModal.style.ts
@@ -75,3 +75,47 @@ export const ButtonStyled = styled(Button).attrs(() => ({
 }))`
   width: 240px;
 `;
+
+export const EditIcon = styled.button`
+  background: none;
+  border: none;
+  margin-left: 8px;
+  cursor: pointer;
+  color: #888;
+  font-size: 14px;
+  transition: color 0.2s;
+
+  &:hover {
+    color: #000;
+  }
+`;
+
+export const IconButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin-left: 6px;
+  font-size: 14px;
+  color: #333;
+  transition: color 0.2s;
+
+  &:hover {
+    color: #000;
+  }
+`;
+
+export const AccountNameInput = styled.input`
+  font-size: 16px;
+  font-weight: bold;
+  padding: 4px 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  outline: none;
+  width: 150px;
+  text-align: center;
+  transition: border-color 0.2s;
+
+  &:focus {
+    border-color: #007bff;
+  }
+`;
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
@@ -1,38 +1,78 @@
+import { useState } from 'react';
 import {
   AccountImageDiv,
   AccountImageStyled,
+  AccountNameInput,
   AddressCopy,
   AddressQrCode,
   ButtonDiv,
   ButtonStyled,
+  EditIcon,
+  IconButton,
   Title,
   TitleDiv,
   Wrapper,
 } from './AccountDetailsModal.style';
 import { openExplorerTab } from 'utils/utils';
 import { useAppSelector } from 'hooks/redux';
 import { useMultiLanguage, useStarkNetSnap } from 'services';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPen, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
 
 export const AccountDetailsModalView = () => {
   const networks = useAppSelector((state) => state.networks);
   const currentAccount = useAppSelector((state) => state.wallet.currentAccount);
-  const { getPrivateKeyFromAddress } = useStarkNetSnap();
+  const { getPrivateKeyFromAddress, setAccountName } = useStarkNetSnap();
   const { translate } = useMultiLanguage();
 
   const chainId = networks?.items[networks.activeNetwork]?.chainId;
   const address = currentAccount.address;
-  const addressIndex = currentAccount?.addressIndex ?? 0;
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [newAccountName, setNewAccountName] = useState(
+    currentAccount.accountName,
+  );
+
+  const handleSaveName = async () => {
+    if (
+      newAccountName.trim() &&
+      newAccountName !== currentAccount.accountName
+    ) {
+      await setAccountName(chainId, address, newAccountName);
+    }
+    setIsEditing(false);
+  };
+
   return (
     <div>
       <AccountImageDiv>
         <AccountImageStyled size={64} address={address} />
       </AccountImageDiv>
       <Wrapper>
         <TitleDiv>
-          <Title>
-            {translate('account')} {addressIndex + 1}
-          </Title>
-          {/* <ModifyIcon /> */}
+          {isEditing ? (
+            <>
+              <AccountNameInput
+                type="text"
+                value={newAccountName}
+                onChange={(e) => setNewAccountName(e.target.value)}
+                autoFocus
+              />
+              <IconButton onClick={handleSaveName}>
+                <FontAwesomeIcon icon={faCheck} />
+              </IconButton>
+              <IconButton onClick={() => setIsEditing(false)}>
+                <FontAwesomeIcon icon={faTimes} />
+              </IconButton>
+            </>
+          ) : (
+            <>
+              <Title>{currentAccount.accountName}</Title>
+              <EditIcon onClick={() => setIsEditing(true)}>
+                <FontAwesomeIcon icon={faPen} />
+              </EditIcon>
+            </>
+          )}
         </TitleDiv>
         <AddressQrCode value={address} />
         <AddressCopy address={address} />

diff --git a/packages/wallet-ui/src/services/useStarkNetSnap.ts b/packages/wallet-ui/src/services/useStarkNetSnap.ts
@@ -888,6 +888,26 @@ export const useStarkNetSnap = () => {
     });
   };
 
+  const setAccountName = async (
+    chainId: string,
+    address: string,
+    accountName: string,
+  ) => {
+    dispatch(enableLoadingWithMessage('Changing Account Name...'));
+    const account = await invokeSnap<Account>({
+      method: 'starkNet_setAccountName',
+      params: {
+        chainId,
+        address,
+        accountName,
+      },
+    });
+    dispatch(
+      updateAccount({ address, updates: { accountName: account.accountName } }),
+    );
+    dispatch(setCurrentAccount(account));
+  };
+
   const getNextAccountIndex = async (chainId: string) => {
     dispatch(enableLoadingWithMessage('Getting next index'));
     const index = await invokeSnap<Account>({
@@ -940,6 +960,7 @@ export const useStarkNetSnap = () => {
     getCurrentAccount,
     addNewAccount,
     toggleAccountVisibility,
+    setAccountName,
     getNextAccountIndex,
     setAccount,
     setErc20TokenBalance,