Development

src/components/OutputContainer/components/TransactionOutput.tsx

@@ -9,7 +9,6 @@ import {
   MvxCopyButton,
   SignedTransactionType,
   TRANSACTIONS_ENDPOINT,
-  useGetAccount,
   useGetNetworkConfig
 } from 'lib';
 
@@ -29,7 +28,6 @@ export const TransactionOutput = ({
   transaction: SignedTransactionType;
 }) => {
   const { network } = useGetNetworkConfig();
-  const { balance } = useGetAccount();
   const decodedData = transaction.data
     ? Buffer.from(transaction.data, 'base64').toString('ascii')
     : 'N/A';
@@ -79,7 +77,11 @@ export const TransactionOutput = ({
 
       <p>
         <Label>Amount: </Label>
-        <FormatAmount value={balance} data-testid='balance' />
+        <FormatAmount
+          value={transaction.value}
+          showLabel={true}
+          data-testid='balance'
+        />
       </p>
       <p>
         <Label>Gas price: </Label>

src/hooks/transactions/useSendPingPongTransaction.ts

@@ -1,6 +1,6 @@
 import { ProxyNetworkProvider } from '@multiversx/sdk-core/out';
-import axios from 'axios';
 import { contractAddress } from 'config';
+import pingPongAbi from 'contracts/ping-pong.abi.json';
 import { signAndSendTransactions } from 'helpers';
 import {
   AbiRegistry,
@@ -30,8 +30,7 @@ export const useSendPingPongTransaction = () => {
   const { address } = useGetAccount();
 
   const getSmartContractFactory = async () => {
-    const response = await axios.get('src/contracts/ping-pong.abi.json');
-    const abi = AbiRegistry.create(response.data);
+    const abi = AbiRegistry.create(pingPongAbi);
     const scFactory = new SmartContractTransactionsFactory({
       config: new TransactionsFactoryConfig({
         chainID: network.chainId
@@ -93,8 +92,14 @@ export const useSendPingPongTransaction = () => {
   const sendPingTransactionFromService = async (
     transactions: Transaction[]
   ) => {
+    const versionTwoTransactions = transactions.map((transaction) => {
+      const tx = Transaction.newFromPlainObject(transaction.toPlainObject());
+      tx.version = 2;
+      return tx;
+    });
+
     const sessionId = await signAndSendTransactions({
-      transactions,
+      transactions: versionTwoTransactions,
       transactionsDisplayInfo: PING_TRANSACTION_INFO
     });
 
@@ -156,8 +161,14 @@ export const useSendPingPongTransaction = () => {
       return;
     }
 
+    const versionTwoTransactions = transactions.map((transaction) => {
+      const tx = Transaction.newFromPlainObject(transaction.toPlainObject());
+      tx.version = 2;
+      return tx;
+    });
+
     const sessionId = await signAndSendTransactions({
-      transactions,
+      transactions: versionTwoTransactions,
       transactionsDisplayInfo: PONG_TRANSACTION_INFO
     });
 

src/localConstants/dataTestIds.enum.ts

@@ -1,18 +1,22 @@
 export enum DataTestIdsEnum {
   addressShard = 'addressShard',
+  addressInput = 'addressInput',
   balance = 'balance',
+  cancelButton = 'cancelButton',
   decodedMessage = 'decodedMessage',
   encodedMessage = 'encodedMessage',
   heroTag = 'heroTag',
   messageSignature = 'messageSignature',
   nftExplorerLink = 'nftExplorerLink',
   nftFormattedAmount = 'nftFormattedAmount',
+  privateKeyInput = 'privateKeyInput',
   receiverLink = 'receiverLink',
   receiverShard = 'receiverShard',
   senderLink = 'senderLink',
   senderShard = 'senderShard',
   shardFromLink = 'shardFromLink',
   shardToLink = 'shardToLink',
+  submitButton = 'submitButton',
   tokenExplorerLink = 'tokenExplorerLink',
   tokenFormattedAmount = 'tokenFormattedAmount',
   transactionHash = 'transactionHash',

src/pages/Dashboard/Dashboard.tsx

@@ -104,7 +104,7 @@ export const Dashboard = () => {
       </div>
 
       <div
-        style={{ backgroundImage: 'url(src/assets/img/background.svg)' }}
+        style={{ backgroundImage: 'url(/background.svg)' }}
         className={classNames(styles.dashboardContent, {
           [styles.dashboardContentMobilePanelOpen]: isMobilePanelOpen
         })}

src/pages/Home/components/HomeHero/HomeHero.tsx

@@ -1,6 +1,5 @@
 import { Fragment, FunctionComponent, MouseEvent, SVGProps } from 'react';
-import { faArrowRightLong } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ReactComponent as ArrowUpRightIcon } from 'assets/icons/arrow-up-right-icon.svg';
 import { useNavigate } from 'react-router-dom';
 import classNames from 'classnames';
 
@@ -94,10 +93,7 @@ export const HomeHero = () => {
               See Documentation
             </span>
 
-            <FontAwesomeIcon
-              icon={faArrowRightLong}
-              className={styles.heroSectionTopDocButtonIcon}
-            />
+            <ArrowUpRightIcon />
           </a>
         </div>
       </div>

src/provider/LoginModal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
+import { DataTestIdsEnum } from 'localConstants';
 
 const modalStyles = {
   overlay: {
@@ -111,12 +112,15 @@ const Modal = ({ onSubmit, onClose, needsAddress, anchor }: ModalProps) => {
               <label style={styles.label}>
                 Address
                 <input
+                  data-testid={DataTestIdsEnum.addressInput}
                   style={styles.input}
                   type='text'
                   name='address'
                   placeholder='Public key'
                   autoFocus
                   required
+                  pattern='^erd1[a-z0-9]{58}$'
+                  title='Please enter a valid address!'
                 />
               </label>
             </div>
@@ -125,21 +129,32 @@ const Modal = ({ onSubmit, onClose, needsAddress, anchor }: ModalProps) => {
             <label style={styles.label}>
               Private Key
               <input
+                data-testid={DataTestIdsEnum.privateKeyInput}
                 style={styles.input}
                 type='text'
                 name='privateKey'
                 placeholder='Private key'
                 autoFocus={!needsAddress}
                 required
+                pattern='^[a-fA-F0-9]{64}$'
+                title='Please enter a valid private key!'
               />
             </label>
           </div>
           <div style={styles.buttonGroup}>
-            <button onClick={onClose} style={styles.button}>
+            <button
+              data-testid={DataTestIdsEnum.cancelButton}
+              onClick={onClose}
+              style={styles.button}
+            >
               Cancel
             </button>
 
-            <button type='submit' style={styles.button}>
+            <button
+              data-testid={DataTestIdsEnum.submitButton}
+              type='submit'
+              style={styles.button}
+            >
               Submit
             </button>
           </div>

src/styles/tailwind.css

@@ -37,13 +37,14 @@
   --mvx-purple-850: #431c4e;
   --mvx-purple-875: #471150;
   --mvx-purple-925: #3c1543;
+  --mvx-purple-975: #310339;
 }
 
 :root[data-mvx-theme='mvx:vibe-theme'],
 [data-mvx-theme='mvx:vibe-theme'] {
   --mvx-bg-color-primary: var(--mvx-purple-925);
   --mvx-bg-color-secondary: var(--mvx-purple-875);
-  --mvx-bg-accent-color: var(--mvx-purple-925);
+  --mvx-bg-accent-color: var(--mvx-purple-975);
   --mvx-bg-accent-variant-color: var(--mvx-purple-925);
   --mvx-hover-color-primary: var(--mvx-purple-850);
   --mvx-text-color-primary: var(--mvx-white);