Code Refactoring (#372)

MiroMargineanu · web-flow · commit 4eff2c2efbfd · 2025-09-18T16:13:48.000+03:00
* Removed unnecessary scripts

* Updated code structure
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
   "scripts": {
     "lint": "eslint --ext js,ts,tsx src --fix",
     "run-cypress": "npx cypress run",
-    "start-devnet": "npm run copy-devnet-config & vite dev --force",
+    "start-devnet": "npm run copy-devnet-config & vite dev",
     "start-testnet": "npm run copy-testnet-config & vite dev",
     "start-mainnet": "npm run copy-mainnet-config & vite dev",
     "build-devnet": "tsc & npm run copy-devnet-config & vite build",
@@ -39,10 +39,7 @@
     "copy-devnet-config": "cp ./src/config/config.devnet.ts ./src/config/index.ts",
     "copy-testnet-config": "cp ./src/config/config.testnet.ts ./src/config/index.ts",
     "copy-mainnet-config": "cp ./src/config/config.mainnet.ts ./src/config/index.ts",
-    "test": "jest",
-    "wdio-smoke": "wdio run wdio/wdio.conf.ts",
-    "smoke": "wdio run wdio/wdio.conf.ts --suite smoke",
-    "install-verdaccio": "pnpm remove @multiversx/sdk-dapp && pnpm install @multiversx/sdk-dapp@latest --registry http://localhost:4873"
+    "test": "jest"
   },
   "browserslist": [
     ">0.2%",
diff --git a/src/components/AddressComponent/AddressComponent.tsx b/src/components/AddressComponent/AddressComponent.tsx
@@ -13,6 +13,7 @@ import {
 
 // prettier-ignore
 const styles = {
+  addressComponent: 'address-component flex overflow-hidden flex-1 w-full',
   addressContainer: 'address-container text-primary transition-all duration-200 ease-out font-normal text-xs xs:text-sm pt-1 lg:pt-0 overflow-auto',
   address: 'address break-words lg:break-normal',
   trimmedAddress: 'trimmed-address !w-max',
@@ -40,7 +41,7 @@ export const AddressComponent = ({
   });
 
   return (
-    <>
+    <div className={styles.addressComponent}>
       <p className={styles.addressContainer}>
         {isHeader ? (
           <MvxTrim text={address} className={styles.trimmedAddress} />
@@ -68,6 +69,6 @@ export const AddressComponent = ({
           <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
         </a>
       </div>
-    </>
+    </div>
   );
 };
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
@@ -4,7 +4,7 @@ import { Sheet } from 'react-modal-sheet';
 
 import { WithClassnameType } from 'types';
 
-import { styles } from './drawer.styles';
+import styles from './drawer.styles';
 
 interface DrawerPropsType extends PropsWithChildren, WithClassnameType {
   isOpen: boolean;
diff --git a/src/components/Drawer/drawer.styles.ts b/src/components/Drawer/drawer.styles.ts
@@ -1,5 +1,5 @@
 // prettier-ignore
-export const styles = {
+export default {
   drawer: 'drawer flex',
   drawerBackdrop: 'drawer-backdrop bg-primary! transition-opacity duration-200 fixed inset-0 opacity-0 pointer-events-none z-40 ease-in-out md:hidden',
   drawerBackdropVisible: 'opacity-90 pointer-events-auto!',
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -25,7 +25,7 @@ import {
 import { RouteNamesEnum } from 'localConstants';
 
 import { ThemeTooltip } from './components';
-import { styles } from './header.styles';
+import styles from './header.styles';
 
 interface HeaderBrowseButtonType {
   handleClick: (event: MouseEvent<HTMLDivElement>) => void;
@@ -154,7 +154,7 @@ export const Header = () => {
             </Tooltip>
           </div>
         ) : (
-          <>
+          <div className={styles.headerNavigationConnect}>
             <MvxButton
               onClick={handleLogIn}
               className={styles.headerNavigationConnectDesktop}
@@ -171,7 +171,7 @@ export const Header = () => {
                 className={styles.headerNavigationConnectIcon}
               />
             </div>
-          </>
+          </div>
         )}
       </nav>
     </header>
diff --git a/src/components/Header/components/ThemeTooltip/ThemeTooltip.tsx b/src/components/Header/components/ThemeTooltip/ThemeTooltip.tsx
@@ -12,7 +12,7 @@ import {
 } from 'hooks/useHandleThemeManagement';
 
 import { ThemeTooltipDots } from './components';
-import { styles } from './themeTooltip.styles';
+import styles from './themeTooltip.styles';
 
 interface ThemeTooltipOptionType extends ThemeOptionType {
   dotColors: string[];
diff --git a/src/components/Header/components/ThemeTooltip/themeTooltip.styles.ts b/src/components/Header/components/ThemeTooltip/themeTooltip.styles.ts
@@ -1,5 +1,5 @@
 // prettier-ignore
-export const styles = {
+export default {
   themeTooltip: 'theme-tooltip',
   themeTooltipTrigger: 'theme-tooltip-trigger flex h-8 lg:h-10 cursor-pointer gap-1 lg:gap-2 items-center justify-center w-12 min-w-12 max-w-12 lg:min-w-16 lg:max-w-16 lg:w-16 relative after:absolute after:bg-btn-variant after:left-0 after:right-0 after:top-0 after:bottom-0 after:pointer-events-none after:rounded-xl after:duration-200 after:ease-out after:transition-all hover:after:opacity-100',
   themeTooltipTriggerToggled: 'after:opacity-100',
diff --git a/src/components/Header/header.styles.ts b/src/components/Header/header.styles.ts
@@ -1,5 +1,5 @@
 // prettier-ignore
-export const styles = {
+export default {
   header: 'header flex items-center justify-between px-4 h-16 md:h-20 md:px-10',
   headerLogo: 'header-logo transition-opacity duration-200',
   headerNavigation: 'header-navigation flex items-center gap-2 lg:gap-4',
@@ -9,6 +9,7 @@ export const styles = {
   headerNavigationTooltip: 'header-navigation-tooltip p-1 leading-none whitespace-nowrap text-tertiary',
   headerNavigationNetwork: 'header-navigation-network h-8 border border-secondary rounded-xl lg:h-10 relative w-22 flex items-center justify-center leading-none capitalize text-tertiary before:absolute before:rounded-full before:w-2 before:lg:w-2.5 before:h-2 before:lg:h-2.5 before:bg-btn-primary before:z-2 before:-top-0.25 before:lg:-top-0.5 before:-left-0.25 before:lg:-left-0.5 after:absolute after:bg-primary after:rounded-lg after:opacity-40 after:left-0 after:right-0 after:top-0 after:bottom-0 after:pointer-events-none',
   headerNavigationNetworkLabel: 'header-navigation-network-label relative z-1',
+  headerNavigationConnect: 'header-navigation-connect',
   headerNavigationConnectDesktop: 'header-navigation-connect-desktop h-8 lg:h-10 hidden sm:block!',
   headerNavigationConnectMobile: 'header-navigation-connect-mobile w-8 h-8 bg-btn-tertiary cursor-pointer flex justify-center items-center sm:hidden text-xs rounded-xl',
   headerNavigationConnectIcon: 'header-navigation-connect-icon text-accent',
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
@@ -14,7 +14,7 @@ import {
   SignMessage,
   Transactions
 } from './widgets';
-import { styles } from './dashboard.styles';
+import styles from './dashboard.styles';
 
 const dashboardWidgets: WidgetType[] = [
   {
diff --git a/src/pages/Dashboard/components/LeftPanel/LeftPanel.tsx b/src/pages/Dashboard/components/LeftPanel/LeftPanel.tsx
@@ -13,7 +13,7 @@ import { getAccountProvider, useGetAccountInfo, useGetIsLoggedIn } from 'lib';
 import { RouteNamesEnum } from 'localConstants';
 
 import { Account, SideMenu } from './components';
-import { styles } from './leftPanel.styles';
+import styles from './leftPanel.styles';
 
 interface LeftPanelPropsType {
   isOpen: boolean;
diff --git a/src/pages/Dashboard/components/LeftPanel/components/Account/Account.tsx b/src/pages/Dashboard/components/LeftPanel/components/Account/Account.tsx
@@ -21,17 +21,20 @@ import {
 
 import { Username } from './components';
 import { useGetUserHerotag } from './hooks/useGetUserHerotag';
-import { styles } from './account.styles';
+import styles from './account.styles';
 
 interface AccountDetailsType {
-  icon: ReactNode | string;
+  icon: ReactNode;
   label: string;
-  value: string | ReactNode;
+  value: ReactNode;
 }
 
 export const Account = () => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
   const { network } = useGetNetworkConfig();
   const { address, account } = useGetAccountInfo();
+  const { herotag, profileUrl } = useGetUserHerotag(address);
 
   const { isValid, valueDecimal, valueInteger, label } =
     FormatAmountController.getData({
@@ -41,14 +44,10 @@ export const Account = () => {
       input: account.balance
     });
 
-  const [isCollapsed, setIsCollapsed] = useState(false);
-
   const toggleCollapse = () => {
     setIsCollapsed((isCollapsed) => !isCollapsed);
   };
 
-  const { herotag, profileUrl } = useGetUserHerotag(address);
-
   const img = profileUrl && (
     <img src={profileUrl} className={styles.connectedAccountDetailsHerotag} />
   );
@@ -111,10 +110,10 @@ export const Account = () => {
 
         <FontAwesomeIcon
           icon={faChevronUp}
+          onClick={toggleCollapse}
           className={classNames(styles.connectedAccountHeaderIcon, {
             [styles.connectedAccountHeaderIconRotated]: isCollapsed
           })}
-          onClick={toggleCollapse}
         />
       </div>
 
@@ -132,6 +131,7 @@ export const Account = () => {
 
             <div className={styles.connectedAccountInfoText}>
               <Label>{accountDetail.label}</Label>
+
               <span className={styles.connectedAccountInfoTextValue}>
                 {accountDetail.value}
               </span>
diff --git a/src/pages/Dashboard/components/LeftPanel/components/Account/account.styles.ts b/src/pages/Dashboard/components/LeftPanel/components/Account/account.styles.ts
@@ -1,5 +1,5 @@
 // prettier-ignore
-export const styles = {
+export default {
   connectedAccountContainer: 'connected-account flex flex-col gap-4',
   connectedAccountHeader: 'connected-account-header flex justify-between items-center',
   connectedAccountHeaderTitle: 'connected-account-header-title text-base transition-all duration-200 ease-out text-secondary',
diff --git a/src/pages/Dashboard/components/LeftPanel/components/SideMenu/SideMenu.tsx b/src/pages/Dashboard/components/LeftPanel/components/SideMenu/SideMenu.tsx
@@ -4,29 +4,20 @@ import {
   faFingerprint,
   faPenNib,
   faRectangleList,
-  faTableTennisPaddleBall,
-  IconDefinition
+  faTableTennisPaddleBall
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
-import { FunctionComponent, SVGProps, useState } from 'react';
+import { useState } from 'react';
 
 import { ReactComponent as IconBatch } from 'assets/img/batch-tx.svg';
 import { ReactComponent as IconAbi } from 'assets/img/ping-pong-abi.svg';
 import { ReactComponent as IconBackend } from 'assets/img/ping-pong-backend.svg';
 import { ItemsIdentifiersEnum } from 'pages/Dashboard/dashboard.types';
 
-import { styles } from './sideMenu.styles';
+import styles from './sideMenu.styles';
 import { ItemIcon } from './components';
-
-interface SideMenuPropsType {
-  setIsOpen: (isOpen: boolean) => void;
-}
-interface MenuItemsType {
-  title: string;
-  icon?: IconDefinition | FunctionComponent<SVGProps<SVGSVGElement>>;
-  id: ItemsIdentifiersEnum;
-}
+import { MenuItemsType, SideMenuPropsType } from './sideMenu.types';
 
 const menuItems: MenuItemsType[] = [
   {
diff --git a/src/pages/Dashboard/components/LeftPanel/components/SideMenu/sideMenu.styles.ts b/src/pages/Dashboard/components/LeftPanel/components/SideMenu/sideMenu.styles.ts
@@ -1,5 +1,5 @@
 // prettier-ignore
-export const styles = {
+export default {
   sideMenuContainer: 'side-menu-container flex flex-col gap-4',
   sideMenuHeader: 'side-menu-header flex items-center justify-between',
   sideMenuHeaderTitle: 'side-menu-header-title text-base transition-all duration-200 ease-out text-secondary',
diff --git a/src/pages/Dashboard/components/LeftPanel/components/SideMenu/sideMenu.types.ts b/src/pages/Dashboard/components/LeftPanel/components/SideMenu/sideMenu.types.ts
@@ -0,0 +1,14 @@
+import { FunctionComponent, SVGProps } from 'react';
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+
+import { ItemsIdentifiersEnum } from 'pages/Dashboard/dashboard.types';
+
+export interface SideMenuPropsType {
+  setIsOpen: (isOpen: boolean) => void;
+}
+
+export interface MenuItemsType {
+  title: string;
+  icon?: IconDefinition | FunctionComponent<SVGProps<SVGSVGElement>>;
+  id: ItemsIdentifiersEnum;
+}
diff --git a/src/pages/Dashboard/components/LeftPanel/leftPanel.styles.ts b/src/pages/Dashboard/components/LeftPanel/leftPanel.styles.ts
@@ -1,5 +1,5 @@
 // prettier-ignore
-export const styles = {
+export default {
   leftPanelContainer: 'left-panel-container flex flex-col w-screen lg:w-80 gap-8 lg:gap-0 py-4 p-6 sticky lg:h-screen top-0 bg-primary lg:bg-accent transition-all duration-200 ease-out overflow-y-scroll',
   leftPanelContainerOpen: 'left-panel-container-open rounded-t-2xl lg:rounded-t-none p-6',
   leftPanelMobileHeader: 'left-panel-mobile-header flex lg:hidden justify-between items-center pt-2 pb-1 transition-all duration-200 ease-out',
diff --git a/src/pages/Dashboard/dashboard.styles.ts b/src/pages/Dashboard/dashboard.styles.ts
@@ -1,5 +1,5 @@
 // prettier-ignore
-export const styles = {
+export default {
   dashboardContainer: 'dashboard-container flex w-screen min-h-screen relative border-t border-b border-secondary transition-all duration-200',
   mobilePanelContainer: 'mobile-panel-container fixed bottom-0 left-0 right-0 z-50 max-h-full overflow-y-auto lg:static lg:max-h-none lg:overflow-visible',
   desktopPanelContainer: 'desktop-panel-container lg:flex',
diff --git a/src/pages/Home/components/HomeConnect/components/ExtensionConnect/ExtensionConnect.tsx b/src/pages/Home/components/HomeConnect/components/ExtensionConnect/ExtensionConnect.tsx
@@ -20,7 +20,7 @@ import {
 } from 'localConstants';
 
 import { BrowserFrame } from './components';
-import { styles } from './extensionConnect.styles';
+import styles from './extensionConnect.styles';
 
 interface BrowserLogo {
   icon: FunctionComponent<SVGProps<SVGSVGElement>>;
diff --git a/src/pages/Home/components/HomeConnect/components/ExtensionConnect/extensionConnect.styles.ts b/src/pages/Home/components/HomeConnect/components/ExtensionConnect/extensionConnect.styles.ts
@@ -1,5 +1,5 @@
 // prettier-ignore
-export const styles = {
+export default {
   extensionCardContainer: 'extension-card-container bg-secondary p-8 lg:p-10 lg:h-115 rounded-2xl lg:rounded-3xl flex flex-col lg:flex-row justify-between gap-10 w-full transition-all duration-200 ease-out',
   extensionCardContent: 'extension-card-content flex flex-col gap-10 max-w-120',
   extensionCardText: 'extension-card-text flex flex-col gap-4',
diff --git a/src/pages/Home/components/HomeHero/HomeHero.tsx b/src/pages/Home/components/HomeHero/HomeHero.tsx
@@ -14,7 +14,7 @@ import { ReactComponent as HomeDarkThemeIcon } from 'assets/icons/home-dark-them
 import { Button } from 'components';
 import { DOCUMENTATION_LINK, RouteNamesEnum } from 'localConstants';
 
-import { styles } from './homeHero.styles';
+import styles from './homeHero.styles';
 
 interface HomeThemeOptionType extends ThemeOptionType {
   icon: FunctionComponent<SVGProps<SVGSVGElement>>;
@@ -45,6 +45,7 @@ const themeExtraProperties: Record<
 
 export const HomeHero = () => {
   const navigate = useNavigate();
+
   const { allThemeOptions, activeTheme, handleThemeSwitch } =
     useHandleThemeManagement();
 
diff --git a/src/pages/Home/components/HomeHero/homeHero.styles.ts b/src/pages/Home/components/HomeHero/homeHero.styles.ts
@@ -1,5 +1,5 @@
 // prettier-ignore
-export const styles = {
+export default {
   heroContainer: 'hero-container shadow-xl shadow-secondary/15 flex flex-col items-center justify-between w-full lg:h-160 rounded-3xl bg-cover bg-no-repeat bg-center p-8 lg:p-20 border border-secondary backdrop-blur-md transition-all duration-200 ease-out',
   heroSectionTop: 'hero-section-top flex flex-col items-start lg:items-center justify-center gap-10',
   heroSectionTopContent: 'hero-section-top-content flex flex-col lg:items-center justify-center gap-6',
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ import {`
`14`	`14`	`SignMessage,`
`15`	`15`	`Transactions`
`16`	`16`	`} from './widgets';`
`17`		`-import { styles } from './dashboard.styles';`
	`17`	`+import styles from './dashboard.styles';`
`18`	`18`
`19`	`19`	`const dashboardWidgets: WidgetType[] = [`
`20`	`20`	`{`