Updated ToastManager import path (#381)

* Updated ToastManager import path

* Removed unused component

* Updates

* Updated path

Author: iuliacimpeanu

src/components/AddressComponent/AddressComponent.tsx

@@ -1,4 +1,3 @@
-export * from './AddressComponent';
 export * from './Button';
 export * from './Card';
 export * from './Drawer';

src/components/AddressComponent/index.ts

@@ -13,5 +13,5 @@ export { initApp } from '@multiversx/sdk-dapp/out/methods/initApp/initApp';
 export { setAxiosInterceptors } from '@multiversx/sdk-dapp/out/utils/network/setAxiosInterceptors';
 export { signTransactions } from '@multiversx/sdk-dapp/out/providers/strategies/helpers/signTransactions/signTransactions';
 export { trimUsernameDomain } from '@multiversx/sdk-dapp/out/utils/account/trimUsernameDomain';
-export { ToastManager } from '@multiversx/sdk-dapp/out/managers/internal';
 export { getNetworkConfig } from '@multiversx/sdk-dapp/out/methods/network/getNetworkConfig';
+export { ToastManager } from '@multiversx/sdk-dapp/out/managers/ToastManager';

src/components/index.ts

@@ -8,8 +8,15 @@ import classNames from 'classnames';
 import { useNavigate } from 'react-router-dom';
 
 import { ReactComponent as IconExpand } from 'assets/img/expand-up-down.svg';
-import { AddressComponent, Logo } from 'components';
-import { getAccountProvider, useGetAccountInfo, useGetIsLoggedIn } from 'lib';
+import { Logo } from 'components';
+import {
+  ACCOUNTS_ENDPOINT,
+  getAccountProvider,
+  MvxDataWithExplorerLink,
+  useGetAccountInfo,
+  useGetIsLoggedIn,
+  useGetNetworkConfig
+} from 'lib';
 import { RouteNamesEnum } from 'localConstants';
 
 import { Account, SideMenu } from './components';
@@ -30,11 +37,15 @@ export const LeftPanel = ({
 
   const { address } = useGetAccountInfo();
 
+  const { network } = useGetNetworkConfig();
+
   const isLoggedIn = useGetIsLoggedIn();
 
   const provider = getAccountProvider();
   const navigate = useNavigate();
 
+  const explorerAddress = network.explorerAddress;
+
   const handleLogout = async () => {
     await provider.logout();
     navigate(RouteNamesEnum.home);
@@ -72,7 +83,13 @@ export const LeftPanel = ({
               className={styles.leftPanelMobileAddressIcon}
             />
 
-            <AddressComponent address={address} isHeader />
+            <div className={styles.leftPanelMobileAddressWithExplorerLink}>
+              <MvxDataWithExplorerLink
+                data={address}
+                withTooltip={true}
+                explorerLink={`${explorerAddress}/${ACCOUNTS_ENDPOINT}/${address}`}
+              />
+            </div>
           </div>
 
           {isLoggedIn && (

src/lib/sdkDapp/sdkDapp.helpers.ts

@@ -8,8 +8,9 @@ export default {
   leftPanel: 'left-panel flex flex-col gap-4 lg:!block',
   leftPanelHidden: 'hidden',
   leftPanelMobileAddressSection: 'left-panel-mobile-address-section lg:hidden bg-accent transition-all duration-200 ease-out h-8 flex items-center justify-between rounded-full border border-secondary px-6 py-4',
-  leftPanelMobileAddress: 'left-panel-mobile-address flex gap-2 items-center justify-start w-[calc(100%-50px)]',
+  leftPanelMobileAddress: 'left-panel-mobile-address flex text-primary gap-2 items-center justify-start w-[calc(100%-50px)]',
   leftPanelMobileAddressIcon: 'left-panel-mobile-address-icon text-accent transition-all duration-200 ease-out',
+  leftPanelMobileAddressWithExplorerLink: 'left-panel-mobile-address-with-explorer-link max-w-[90%]',
   logoutButton: 'text-center text-link hover:text-primary transition-all duration-200 ease-out cursor-pointer',
   leftPanelComponents: 'flex flex-col gap-4 bg-accent p-6 lg:p-0 rounded-2xl transition-all duration-200 ease-out',
   leftPanelBar: 'w-full h-0.25 bg-neutral-700 opacity-40 transition-all duration-200 ease-out'