Updates on components (#356)

* Updates on components

* Updated to use getExplorerLink

* Updated package

* Moved getExplorerLink import to lib

Author: iuliacimpeanu

package.json

@@ -9,7 +9,7 @@
     "@fortawesome/fontawesome-svg-core": "6.5.1",
     "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@multiversx/sdk-core": "14.2.3",
+    "@multiversx/sdk-core": "14.2.6",
     "@multiversx/sdk-dapp": "^5.x",
     "@multiversx/sdk-dapp-ui": "^0.x",
     "@multiversx/sdk-dapp-utils": "2.0.2",

src/components/ContractAddress/ContractAddress.tsx

@@ -1,17 +1,28 @@
 import { Label } from 'components';
 import { contractAddress } from 'config';
-import { ACCOUNTS_ENDPOINT, ExplorerLink } from 'lib';
+import {
+  ACCOUNTS_ENDPOINT,
+  getExplorerLink,
+  MvxExplorerLink,
+  useGetNetworkConfig
+} from 'lib';
 
 export const ContractAddress = () => {
+  const { network } = useGetNetworkConfig();
+  const explorerAddress = network.explorerAddress;
+  const explorerLink = getExplorerLink({
+    to: `/${ACCOUNTS_ENDPOINT}/${contractAddress}`,
+    explorerAddress
+  });
   return (
     <p>
       <Label>Contract: </Label>
-      <ExplorerLink
-        page={`/${ACCOUNTS_ENDPOINT}/${contractAddress}`}
+      <MvxExplorerLink
+        link={explorerLink}
         className='border-b border-dotted border-gray-500 hover:border-solid hover:border-gray-800'
       >
         {contractAddress}
-      </ExplorerLink>
+      </MvxExplorerLink>
     </p>
   );
 };

src/components/OutputContainer/components/PingPongOutput.tsx

@@ -13,7 +13,7 @@ export const PingPongOutput = ({
   pongAllowed,
   transactions
 }: PingPongOutputType) => {
-  if (!transactions) {
+  if (!transactions || transactions?.length === 0) {
     return null;
   }
 

src/components/OutputContainer/components/TransactionOutput.tsx

@@ -1,51 +1,76 @@
 import { Label } from 'components';
 import {
   ACCOUNTS_ENDPOINT,
-  ExplorerLink,
-  FormatAmount,
+  DECIMALS,
+  DIGITS,
+  FormatAmountController,
+  getExplorerLink,
+  MvxExplorerLink,
+  MvxFormatAmount,
   SignedTransactionType,
   TRANSACTIONS_ENDPOINT,
+  useGetAccountInfo,
   useGetNetworkConfig
 } from 'lib';
-import { DataTestIdsEnum } from 'localConstants';
 
 export const TransactionOutput = ({
   transaction
 }: {
   transaction: SignedTransactionType;
 }) => {
   const { network } = useGetNetworkConfig();
+  const { account } = useGetAccountInfo();
   const decodedData = transaction.data
     ? Buffer.from(transaction.data, 'base64').toString('ascii')
     : 'N/A';
+
+  const { isValid, valueDecimal, valueInteger, label } =
+    FormatAmountController.getData({
+      digits: DIGITS,
+      decimals: DECIMALS,
+      egldLabel: network.egldLabel,
+      input: account.balance
+    });
+
+  const explorerAddress = network.explorerAddress;
+  const hashExplorerLink = getExplorerLink({
+    to: `/${TRANSACTIONS_ENDPOINT}/${transaction.hash}`,
+    explorerAddress
+  });
+  const receiverExplorerLink = getExplorerLink({
+    to: `/${ACCOUNTS_ENDPOINT}/${transaction.receiver}`,
+    explorerAddress
+  });
+
   return (
     <div className='flex flex-col'>
       <p>
         <Label>Hash:</Label>
-        <ExplorerLink
-          page={`/${TRANSACTIONS_ENDPOINT}/${transaction.hash}`}
+        <MvxExplorerLink
+          link={hashExplorerLink}
           className='border-b border-dotted border-gray-500 hover:border-solid hover:border-gray-800'
         >
           {transaction.hash}
-        </ExplorerLink>
+        </MvxExplorerLink>
       </p>
       <p>
         <Label>Receiver:</Label>
-        <ExplorerLink
-          page={`/${ACCOUNTS_ENDPOINT}/${transaction.receiver}`}
+        <MvxExplorerLink
+          link={receiverExplorerLink}
           className='border-b border-dotted border-gray-500 hover:border-solid hover:border-gray-800'
         >
           {transaction.receiver}
-        </ExplorerLink>
+        </MvxExplorerLink>
       </p>
 
       <p>
         <Label>Amount: </Label>
-        <FormatAmount
-          value={transaction.value}
-          showLabel={transaction.value !== '0'}
-          egldLabel={network.egldLabel}
-          data-testid={DataTestIdsEnum.balance}
+        <MvxFormatAmount
+          isValid={isValid}
+          valueInteger={valueInteger}
+          valueDecimal={valueDecimal}
+          label={label}
+          data-testid='balance'
         />
       </p>
       <p>

src/lib/sdkDapp/sdkDapp.helpers.ts

@@ -6,6 +6,7 @@ export { UnlockPanelManager } from '@multiversx/sdk-dapp/out/managers/UnlockPane
 export { WALLET_PROVIDER_SEND_TRANSACTION_URL } from '@multiversx/sdk-dapp/out/constants/webWalletProvider.constants';
 export { getAccountProvider } from '@multiversx/sdk-dapp/out/providers/helpers/accountProvider';
 export { getActiveTransactionsStatus } from '@multiversx/sdk-dapp/out/utils/transactions/getActiveTransactionsStatus';
+export { getExplorerLink } from '@multiversx/sdk-dapp/out/utils/transactions/getExplorerLink';
 export { getInterpretedTransaction } from '@multiversx/sdk-dapp/out/utils/transactions/getInterpretedTransaction';
 export { getTransactions } from '@multiversx/sdk-dapp/out/apiCalls/transactions/getTransactions';
 export { initApp } from '@multiversx/sdk-dapp/out/methods/initApp/initApp';

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

@@ -1,12 +1,26 @@
 import { Label, OutputContainer } from 'components';
-import { FormatAmount, useGetAccountInfo, useGetNetworkConfig } from 'lib';
-import { DataTestIdsEnum } from 'localConstants';
+import {
+  DECIMALS,
+  DIGITS,
+  FormatAmountController,
+  MvxFormatAmount,
+  useGetAccountInfo,
+  useGetNetworkConfig
+} from 'lib';
 import { Username } from './components';
 
 export const Account = () => {
   const { network } = useGetNetworkConfig();
   const { address, account } = useGetAccountInfo();
 
+  const { isValid, valueDecimal, valueInteger, label } =
+    FormatAmountController.getData({
+      digits: DIGITS,
+      decimals: DECIMALS,
+      egldLabel: network.egldLabel,
+      input: account.balance
+    });
+
   return (
     <OutputContainer>
       <div className='flex flex-col text-black' data-testid='topInfo'>
@@ -22,10 +36,13 @@ export const Account = () => {
 
         <p>
           <Label>Balance: </Label>
-          <FormatAmount
-            value={account.balance}
-            egldLabel={network.egldLabel}
-            data-testid={DataTestIdsEnum.balance}
+
+          <MvxFormatAmount
+            isValid={isValid}
+            valueInteger={valueInteger}
+            valueDecimal={valueDecimal}
+            label={label}
+            data-testid='balance'
           />
         </p>
       </div>

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

@@ -1,13 +1,27 @@
 import { useEffect } from 'react';
 import { Label, MissingNativeAuthError, OutputContainer } from 'components';
-import { FormatAmount, useGetLoginInfo, useGetNetworkConfig } from 'lib';
+import {
+  DECIMALS,
+  DIGITS,
+  FormatAmountController,
+  MvxFormatAmount,
+  useGetLoginInfo,
+  useGetNetworkConfig
+} from 'lib';
 import { Username } from '../Account/components';
 import { useGetProfile } from './hooks';
 
 export const NativeAuth = () => {
   const { tokenLogin, isLoggedIn } = useGetLoginInfo();
   const { isLoading, profile, getProfile } = useGetProfile();
   const { network } = useGetNetworkConfig();
+  const { isValid, valueDecimal, valueInteger, label } =
+    FormatAmountController.getData({
+      digits: DIGITS,
+      decimals: DECIMALS,
+      egldLabel: network.egldLabel,
+      input: profile?.balance ?? '0'
+    });
 
   useEffect(() => {
     // On page refresh, tokenInfo is null which implies that we do not have access to loginInfo data
@@ -43,10 +57,11 @@ export const NativeAuth = () => {
 
       <div className='flex gap-1'>
         <Label>Balance:</Label>
-        <FormatAmount
-          value={profile?.balance ?? '0'}
-          showLabel={profile?.balance !== '0'}
-          egldLabel={network.egldLabel}
+        <MvxFormatAmount
+          isValid={isValid}
+          valueInteger={valueInteger}
+          valueDecimal={valueDecimal}
+          label={label}
           data-testid='balance'
         />
       </div>