Styling updates and replace preview image

src/components/Layout/Footer/Footer.tsx

@@ -7,7 +7,6 @@ export const Footer = () => {
         <a
           className='text-gray-400 text-sm hover:cursor-pointer hover:underline'
           href='/disclaimer'
-          target='_blank'
         >
           Disclaimer
         </a>

src/pages/Dashboard/Dashboard.tsx

@@ -60,14 +60,14 @@ const WIDGETS: WidgetsType[] = [
     title: 'Native auth',
     widget: NativeAuth,
     description:
-      'A secure authentication token is used to interact with the backend',
+      'A secure authentication token can be used to interact with the backend',
     reference: 'https://github.com/multiversx/mx-sdk-js-native-auth-server'
   },
   {
     title: 'Batch Transactions',
     widget: BatchTransactions,
     description:
-      'For complex scenarios transactions cand be sent in the desired group/sequence',
+      'For complex scenarios transactions can be sent in the desired group/sequence',
     reference:
       'https://github.com/multiversx/mx-sdk-dapp#sending-transactions-synchronously-in-batches'
   },
@@ -82,7 +82,7 @@ const WIDGETS: WidgetsType[] = [
     title: 'Transactions (Ping & Pong)',
     widget: Transactions,
     props: { receiver: contractAddress },
-    description: 'Filtered transactions for a given Smart Contract',
+    description: 'List transactions filtered for a given Smart Contract',
     reference:
       'https://api.elrond.com/#/accounts/AccountController_getAccountTransactions'
   }

src/pages/Dashboard/widgets/Account/components/Username.tsx

@@ -1,8 +1,11 @@
 import type { AccountType } from '@multiversx/sdk-dapp/types';
 import { Label } from 'components/Label';
 import { trimUsernameDomain } from 'helpers/sdkDappHelpers';
+import { ProfileType } from 'types';
 
-export const Username = (props: { account: AccountType }) => {
+export const Username = (props: {
+  account: AccountType | ProfileType | null;
+}) => {
   const { account } = props;
 
   if (!account) {

src/pages/Dashboard/widgets/NativeAuth/NativeAuth.tsx

@@ -3,9 +3,9 @@ import { Label } from 'components/Label';
 import { MissingNativeAuthError } from 'components/MissingNativeAuthError';
 import { OutputContainer } from 'components/OutputContainer';
 import { FormatAmount } from 'components/sdkDappComponents';
-import { trimUsernameDomain } from 'helpers/sdkDappHelpers';
 import { useGetLoginInfo, useGetNetworkConfig } from 'hooks';
 import { useGetProfile } from './hooks';
+import { Username } from '../Account/components';
 
 export const NativeAuth = () => {
   const { tokenLogin, isLoggedIn } = useGetLoginInfo();
@@ -35,27 +35,24 @@ export const NativeAuth = () => {
 
   return (
     <OutputContainer isLoading={isLoading}>
-      {profile?.username && (
-        <p>
-          <Label>Herotag:</Label> {trimUsernameDomain(profile.username)}
-        </p>
-      )}
-      {profile?.address && (
-        <p>
-          <Label>Address:</Label> {profile.address}
-        </p>
-      )}
-      {profile?.balance && (
-        <div className='flex gap-1'>
-          <Label>Balance:</Label>
-          <FormatAmount
-            value={profile.balance}
-            showLabel={profile.balance !== '0'}
-            egldLabel={network.egldLabel}
-            data-testid='balance'
-          />
-        </div>
-      )}
+      <p>
+        <Label>Address:</Label> {profile?.address ?? 'N/A'}
+      </p>
+
+      <Username account={profile} />
+      <p>
+        <Label>Shard: </Label> {profile?.shard ?? 'N/A'}
+      </p>
+
+      <div className='flex gap-1'>
+        <Label>Balance:</Label>
+        <FormatAmount
+          value={profile?.balance ?? '0'}
+          showLabel={profile?.balance !== '0'}
+          egldLabel={network.egldLabel}
+          data-testid='balance'
+        />
+      </div>
     </OutputContainer>
   );
 };

src/pages/Dashboard/widgets/NativeAuth/hooks/useGetProfile.ts

@@ -1,14 +1,7 @@
 import { useState } from 'react';
 import axios from 'axios';
 import { API_URL } from 'config';
-
-type ProfileType = {
-  address: string;
-  username: string;
-  balance: string;
-  nonce: number;
-  shard: number;
-};
+import { ProfileType } from 'types';
 
 export const useGetProfile = () => {
   const [profile, setProfile] = useState<ProfileType | null>(null);

src/pages/Home/Home.tsx

@@ -9,12 +9,28 @@ export const Home = () => {
           <div className='flex items-start sm:items-center h-full sm:w-1/2 sm:bg-center'>
             <div className='flex flex-col gap-2 max-w-[70sch] text-center sm:text-left text-xl font-medium md:text-2xl lg:text-3xl'>
               <div>
-                Template dApp <br />
-                <span className='text-gray-400'>
-                  The sdk-dapp starter project for any dApp{' '}
+                <h1>Template dApp</h1>
+                <p className='text-gray-400'>
+                  The{' '}
+                  <a
+                    href='https://www.npmjs.com/package/@multiversx/sdk-dapp'
+                    target='_blank'
+                    className='text-gray-400 underline decoration-dotted hover:decoration-solid'
+                  >
+                    sdk-dapp
+                  </a>{' '}
+                  starter project for any dApp{' '}
                   <br className='hidden xl:block' />
-                  built on the MultiversX blockchain.
-                </span>
+                  built on the{' '}
+                  <a
+                    href='https://multiversx.com/'
+                    target='_blank'
+                    className='text-gray-400 underline decoration-dotted hover:decoration-solid'
+                  >
+                    MultiversX
+                  </a>{' '}
+                  blockchain.
+                </p>
               </div>
               <Transaction />
             </div>

src/pages/Home/Transaction/Transaction.tsx

@@ -1,6 +1,7 @@
 import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { TRANSACTIONS_ENDPOINT } from '@multiversx/sdk-dapp/apiCalls/endpoints';
+import { Label } from 'components/Label';
 import { ExplorerLink } from 'components/sdkDappComponents';
 import { useGetNetworkConfig } from 'hooks';
 import { getTransactionUrl, useTransactionOutcome } from './helpers';
@@ -16,17 +17,25 @@ export const Transaction = () => {
     <div className='flex flex-col gap-2 text-sm'>
       <a
         href={transactionUrl}
-        className='self-start inline-block rounded-lg px-3 py-2 text-center hover:no-underline my-0 bg-blue-600 text-white hover:bg-blue-700 mr-0'
+        className='inline-block self-start rounded-lg px-3 py-2 text-center hover:no-underline my-0 text-gray-600 hover:bg-slate-100 mx-0'
       >
         <FontAwesomeIcon icon={faPaperPlane} className='mr-1' />
         Send transaction
       </a>
 
-      {txData.status && <p>Transaction status: {txData.status}</p>}
-      {txData.address && <p>Sender: {txData.address}</p>}
+      {txData.status && (
+        <p>
+          <Label>Transaction status:</Label> {txData.status}
+        </p>
+      )}
+      {txData.address && (
+        <p>
+          <Label>Sender:</Label> {txData.address}
+        </p>
+      )}
       {txData.txHash && (
         <p>
-          Hash:{' '}
+          <Label>Hash:</Label>
           <ExplorerLink
             page={`/${TRANSACTIONS_ENDPOINT}/${txData.txHash}`}
             className='border-b border-dotted border-gray-500 hover:border-solid hover:border-gray-800'

src/pages/PageNotFound/PageNotFound.tsx

@@ -6,11 +6,15 @@ export const PageNotFound = () => {
   const { pathname } = useLocation();
 
   return (
-    <div className='flex flex-col h-[calc(100vh-200px)] justify-center items-center'>
-      <FontAwesomeIcon icon={faSearch} className='fa-3x mb-2' />
+    <div className='flex flex-col w-full  max-w-prose h-[calc(100vh-200px)] justify-center items-center'>
+      <div className='flex flex-col p-6 items-center justify-center gap-2 rounded-xl bg-[#f6f8fa] w-full'>
+        <FontAwesomeIcon icon={faSearch} className='fa-3x mb-2' />
 
-      <h4 className='mt-3 text-xl'>Page not found</h4>
-      <span className='empty-details text-lg'>{pathname}</span>
+        <div className='flex flex-col items-center'>
+          <h4 className='mt-3 text-xl'>Page not found</h4>
+          <span className='text-lg text-gray-400'>{pathname}</span>
+        </div>
+      </div>
     </div>
   );
 };

src/pages/Unlock/Unlock.tsx

@@ -36,11 +36,18 @@ export const Unlock = () => {
           className='flex flex-col p-6 items-center justify-center gap-4 rounded-xl bg-[#f6f8fa]'
           data-testid='unlockPage'
         >
-          <h2 className='text-2xl'>Login</h2>
+          <div className='flex flex-col items-center gap-1'>
+            <h2 className='text-2xl'>Login</h2>
 
-          <p className='text-center text-lg'>Pick a login method</p>
+            <p className='text-center text-gray-400'>Choose a login method</p>
+          </div>
 
           <div className='flex flex-col md:flex-row'>
+            <WalletConnectLoginButton
+              loginButtonText='xPortal App'
+              {...commonProps}
+            />
+            <LedgerLoginButton loginButtonText='Ledger' {...commonProps} />
             <ExtensionLoginButton
               loginButtonText='DeFi Wallet'
               {...commonProps}
@@ -54,11 +61,6 @@ export const Unlock = () => {
               data-testid='webWalletLoginBtn'
               {...commonProps}
             />
-            <LedgerLoginButton loginButtonText='Ledger' {...commonProps} />
-            <WalletConnectLoginButton
-              loginButtonText='xPortal App'
-              {...commonProps}
-            />
           </div>
         </div>
       </div>

src/types/index.ts

@@ -1 +1,2 @@
 export * from './sdkDappTypes';
+export * from './profile.types';

src/types/profile.types.ts

@@ -0,0 +1,7 @@
+export type ProfileType = {
+  address: string;
+  username: string;
+  balance: string;
+  nonce: number;
+  shard: number;
+};