Development

jest.config.js

@@ -15,7 +15,9 @@ module.exports = {
   },
   transformIgnorePatterns: ['node_modules/(^.+\\\\.(ts|js)$)'],
   testMatch: ['**/src/**/?(*.)+(spec|test|bgTest).ts?(x)'],
-
+  moduleNameMapper: {
+    '\\.(css|sass|scss)$': 'identity-obj-proxy'
+  },
   moduleFileExtensions: [
     // Place tsx and ts to beginning as suggestion from Jest team
     // https://jestjs.io/docs/configuration#modulefileextensions-arraystring

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@multiversx/mx-template-dapp",
   "description": "MultiversX Dapp Template",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",
   "repository": "@multiversx/mx-template-dapp",

src/App.tsx

@@ -2,7 +2,7 @@ import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import { PageNotFound } from 'pages/PageNotFound/PageNotFound';
 import { routes } from 'routes';
 import { AxiosInterceptors, BatchTransactionsContextProvider } from 'wrappers';
-import { Layout } from './components';
+import { Layout } from './components/Layout';
 
 export const App = () => {
   return (

src/components/Header/Header.tsx

@@ -9,7 +9,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { MouseEvent } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Logo, Tooltip } from 'components';
 import { GITHUB_REPO_URL } from 'config';
 import {
   ACCOUNTS_ENDPOINT,
@@ -22,6 +21,8 @@ import {
   useGetNetworkConfig
 } from 'lib';
 import { RouteNamesEnum } from 'localConstants';
+import { Logo } from '../Logo';
+import { Tooltip } from '../Tooltip';
 import { ThemeTooltip } from './components';
 import styles from './header.styles';
 

src/components/Layout/Layout.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-
-import { Footer, Header } from 'components';
 import { AuthRedirectWrapper } from 'wrappers';
+import { Footer } from '../Footer';
+import { Header } from '../Header';
 
 // prettier-ignore
 const styles = {

src/components/OutputContainer/OutputContainer.tsx

@@ -1,8 +1,7 @@
 import classNames from 'classnames';
 import { PropsWithChildren } from 'react';
-
-import { Loader } from 'components';
 import { WithClassnameType } from 'types';
+import { Loader } from '../Loader';
 
 // prettier-ignore
 const styles = {

src/components/OutputContainer/components/PingPongOutput.tsx

@@ -1,6 +1,5 @@
 import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Label } from 'components';
 import { contractAddress } from 'config';
 import {
   ACCOUNTS_ENDPOINT,
@@ -9,6 +8,7 @@ import {
   SignedTransactionType,
   useGetNetworkConfig
 } from 'lib';
+import { Label } from '../../Label';
 import { TransactionsOutput } from './TransactionsOutput';
 
 const styles = {

src/components/OutputContainer/components/TransactionOutput.tsx

@@ -1,6 +1,5 @@
 import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Label } from 'components';
 import {
   ACCOUNTS_ENDPOINT,
   FormatAmount,
@@ -10,6 +9,7 @@ import {
   TRANSACTIONS_ENDPOINT,
   useGetNetworkConfig
 } from 'lib';
+import { Label } from '../../Label';
 
 const styles = {
   transactionContainer: 'transaction-container flex flex-col',

src/components/PingPongComponent/PingPongComponent.tsx

@@ -3,12 +3,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { TokenLoginType } from '@multiversx/sdk-dapp/out/types/login.types';
 import { Duration } from 'luxon';
 import { useEffect, useState } from 'react';
-import {
-  Label,
-  MissingNativeAuthError,
-  OutputContainer,
-  PingPongOutput
-} from 'components';
 import { contractAddress } from 'config';
 import { getCountdownSeconds, setTimeRemaining } from 'helpers';
 import {
@@ -19,6 +13,10 @@ import {
 } from 'lib';
 import { ACCOUNTS_ENDPOINT, Transaction, useGetPendingTransactions } from 'lib';
 import { ItemsIdentifiersEnum } from 'pages/Dashboard/dashboard.types';
+import { Label } from '../Label';
+import { MissingNativeAuthError } from '../MissingNativeAuthError';
+import { OutputContainer } from '../OutputContainer';
+import { PingPongOutput } from '../OutputContainer/components';
 
 const styles = {
   pingPongContainer: 'ping-pong-container flex flex-col gap-6',

src/components/Tooltip/Tooltip.tsx

@@ -1,9 +1,7 @@
 import classNames from 'classnames';
 import { CSSProperties, MouseEvent, useState } from 'react';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
-
-import { Drawer } from 'components';
-
+import { Drawer } from '../Drawer';
 import { TooltipPlaceEnum, TooltipPropsType } from './tooltip.types';
 
 // prettier-ignore

src/config/config.devnet.ts

@@ -1,4 +1,4 @@
-import { EnvironmentsEnum } from 'lib';
+import { EnvironmentsEnum } from 'lib/sdkDapp/sdkDapp.types';
 
 export * from './sharedConfig';
 

src/config/config.mainnet.ts

@@ -1,4 +1,4 @@
-import { EnvironmentsEnum } from 'lib';
+import { EnvironmentsEnum } from 'lib/sdkDapp/sdkDapp.types';
 
 export * from './sharedConfig';
 

src/config/config.testnet.ts

@@ -1,4 +1,4 @@
-import { EnvironmentsEnum } from 'lib';
+import { EnvironmentsEnum } from 'lib/sdkDapp/sdkDapp.types';
 
 export * from './sharedConfig';
 

src/pages/Dashboard/components/LeftPanel/LeftPanel.tsx

@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { useNavigate } from 'react-router-dom';
 import { ReactComponent as IconExpand } from 'assets/img/expand-up-down.svg';
-import { Logo } from 'components';
+import { Logo } from 'components/Logo';
 import {
   ACCOUNTS_ENDPOINT,
   getAccountProvider,

src/pages/Dashboard/components/LeftPanel/components/Account/Account.tsx

@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { ReactNode, useState } from 'react';
 import { ReactComponent as XLogo } from 'assets/img/x-logo.svg';
-import { Label } from 'components';
+import { Label } from 'components/Label';
 import { FormatAmount, MvxTrim, useGetAccount } from 'lib';
 import { DataTestIdsEnum } from 'localConstants';
 import styles from './account.styles';

src/pages/Dashboard/components/Widget/Widget.tsx

@@ -1,4 +1,4 @@
-import { Card } from 'components';
+import { Card } from 'components/Card';
 import { WidgetType } from 'types/widget.types';
 
 export const Widget = ({

src/pages/Dashboard/widgets/BatchTransactions/BatchTransactions.tsx

@@ -5,7 +5,8 @@ import {
   IconDefinition
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { OutputContainer, TransactionsOutput } from 'components';
+import { OutputContainer } from 'components/OutputContainer';
+import { TransactionsOutput } from 'components/OutputContainer/components';
 import { MvxButton, useGetPendingTransactionsSessions } from 'lib';
 import {
   useGetAccount,

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

@@ -1,5 +1,7 @@
 import { useEffect } from 'react';
-import { Label, MissingNativeAuthError, OutputContainer } from 'components';
+import { Label } from 'components/Label';
+import { MissingNativeAuthError } from 'components/MissingNativeAuthError';
+import { OutputContainer } from 'components/OutputContainer';
 import {
   ACCOUNTS_ENDPOINT,
   FormatAmount,

src/pages/Dashboard/widgets/PingPongAbi/PingPongAbi.tsx

@@ -1,9 +1,12 @@
-import { PingPongComponent, PingTransactionPayloadType } from 'components';
+import {
+  PingPongComponent,
+  PingTransactionPayloadType
+} from 'components/PingPongComponent';
 import { useSendPingPongTransaction } from 'hooks';
-import { useGetPingAmount, useGetTimeToPong } from './hooks';
+import { getTimeToPong } from '../PingPongService/helpers/getTimeToPong';
+import { useGetPingAmount } from './hooks';
 
 export const PingPongAbi = () => {
-  const getTimeToPong = useGetTimeToPong();
   const { sendPingTransactionFromAbi, sendPongTransactionFromAbi } =
     useSendPingPongTransaction();
   const pingAmount = useGetPingAmount();

src/pages/Dashboard/widgets/PingPongRaw/PingPongRaw.tsx

@@ -1,4 +1,7 @@
-import { PingPongComponent, PingTransactionPayloadType } from 'components';
+import {
+  PingPongComponent,
+  PingTransactionPayloadType
+} from 'components/PingPongComponent';
 import { useSendPingPongTransaction } from 'hooks';
 import { useGetPingAmount, useGetTimeToPong } from './hooks';
 

src/pages/Dashboard/widgets/PingPongService/PingPongService.tsx

@@ -1,17 +1,16 @@
-import { PingPongComponent, PingTransactionPayloadType } from 'components';
+import {
+  PingPongComponent,
+  PingTransactionPayloadType
+} from 'components/PingPongComponent';
 import { useSendPingPongTransaction } from 'hooks';
 import { useGetLoginInfo } from 'lib';
-import {
-  useGetPingTransaction,
-  useGetPongTransaction,
-  useGetTimeToPong
-} from './hooks';
+import { useGetTimeToPong } from '../PingPongAbi/hooks';
+import { getPingTransaction } from './helpers/getPingTransaction';
+import { getPongTransaction } from './helpers/getPongTransaction';
 
 // The transactions are being done by directly requesting to template-dapp service
 export const PingPongService = () => {
   const getTimeToPong = useGetTimeToPong();
-  const getPingTransaction = useGetPingTransaction();
-  const getPongTransaction = useGetPongTransaction();
 
   const { tokenLogin } = useGetLoginInfo();
   const { sendPingTransactionFromService, sendPongTransactionFromService } =

src/pages/Dashboard/widgets/PingPongService/helpers/getPingTransaction.ts

@@ -0,0 +1,22 @@
+import axios from 'axios';
+import { API_URL } from 'config';
+import { Transaction } from 'lib/sdkCore';
+
+export const getPingTransaction = async () => {
+  try {
+    const { data } = await axios.post(
+      '/ping-pong/abi/ping',
+      {},
+      {
+        baseURL: API_URL
+      }
+    );
+
+    const pingTransaction = Transaction.newFromPlainObject(data);
+
+    return pingTransaction;
+  } catch (err) {
+    console.error('Unable to get Ping Transaction', err);
+    return null;
+  }
+};

src/pages/Dashboard/widgets/PingPongService/helpers/getPongTransaction.ts

@@ -0,0 +1,22 @@
+import axios from 'axios';
+import { API_URL } from 'config';
+import { Transaction } from 'lib/sdkCore';
+
+export const getPongTransaction = async () => {
+  try {
+    const { data } = await axios.post(
+      '/ping-pong/abi/pong',
+      {},
+      {
+        baseURL: API_URL
+      }
+    );
+
+    const pongTransaction = Transaction.newFromPlainObject(data);
+
+    return pongTransaction;
+  } catch (err) {
+    console.error('Unable to get Pong Transaction', err);
+    return null;
+  }
+};

src/pages/Dashboard/widgets/PingPongService/helpers/getTimeToPong.ts

@@ -0,0 +1,19 @@
+import axios from 'axios';
+import { API_URL } from 'config';
+import { TimeToPongResponseType } from '../types';
+
+export const getTimeToPong = async () => {
+  try {
+    const { data } = await axios.get<TimeToPongResponseType>(
+      '/ping-pong/abi/time-to-pong',
+      {
+        baseURL: API_URL
+      }
+    );
+
+    return data.timeToPong;
+  } catch (err) {
+    console.error(err);
+    return null;
+  }
+};

src/pages/Dashboard/widgets/PingPongService/helpers/index.ts

@@ -0,0 +1,3 @@
+export * from './getPingTransaction';
+export * from './getPongTransaction';
+export * from './getTimeToPong';

src/pages/Dashboard/widgets/PingPongService/hooks/tests/useGetPingTransaction.test.ts → src/pages/Dashboard/widgets/PingPongService/helpers/tests/getPingTransaction.test.ts

@@ -1,6 +1,5 @@
-import { renderHook } from '@testing-library/react';
 import axios from 'axios';
-import { useGetPingTransaction } from '../useGetPingTransaction';
+import { getPingTransaction } from '../getPingTransaction';
 
 const pingTransaction = {
   nonce: 10705,
@@ -20,23 +19,24 @@ describe('useGetPingTransaction', () => {
       data: pingTransaction
     });
 
-    const { result } = renderHook(() => useGetPingTransaction());
-    const transactionReceived = await result.current();
-
-    expect(transactionReceived).not.toBeNull();
-
-    if (transactionReceived) {
-      const plainTx = transactionReceived.toPlainObject();
-      expect(plainTx.data).toBe(pingTransaction.data);
-    }
+    const transactionReceived = await getPingTransaction();
+    expect(transactionReceived?.toPlainObject()).toEqual({
+      ...pingTransaction,
+      guardian: undefined,
+      guardianSignature: undefined,
+      options: undefined,
+      receiverUsername: undefined,
+      relayer: undefined,
+      relayerSignature: undefined,
+      senderUsername: undefined,
+      signature: undefined
+    });
   });
 
   it('should return null', async () => {
     jest.spyOn(axios, 'post').mockRejectedValueOnce(new Error('error'));
 
-    const { result } = renderHook(() => useGetPingTransaction());
-    const transactionReceived = await result.current();
-
+    const transactionReceived = await getPingTransaction();
     expect(transactionReceived).toBeNull();
   });
 });