SWR API calls and Sign modal loading (#1117)

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[v2.29.0-beta.26]](https://github.com/multiversx/mx-sdk-dapp/pull/1120)] - 2024-04-03
+- [Added SWR API calls](https://github.com/multiversx/mx-sdk-dapp/pull/1117)
+
 ## [[v2.29.0-beta.25]](https://github.com/multiversx/mx-sdk-dapp/pull/1119)] - 2024-04-03
 - [Fix transactions toast status in case of some failed transactions](https://github.com/multiversx/mx-sdk-dapp/pull/1118)
 
@@ -27,7 +30,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [[v2.29.0-beta.19]](https://github.com/multiversx/mx-sdk-dapp/pull/1105)] - 2024-03-26
 - [Fixed cross-window ledger re-login when device is locked](https://github.com/multiversx/mx-sdk-dapp/pull/1104)
 
-
 ## [[v2.29.0-beta.18]](https://github.com/multiversx/mx-sdk-dapp/pull/1103)] - 2024-03-26
 - [Changed `logout()` with an extendable `options` parameter](https://github.com/multiversx/mx-sdk-dapp/pull/1102)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp",
-  "version": "2.29.0-beta.25",
+  "version": "2.29.0-beta.26",
   "description": "A library to hold the main logic for a dapp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",

src/UI/SignTransactionsModals/SignWithDeviceModal/SignStep.tsx

@@ -15,21 +15,22 @@ export { SignStepType, SignStepInnerClassesType };
 
 const SignStepComponent = (props: SignStepType & WithStylesImportType) => {
   const {
-    onSignTransaction,
-    handleClose,
-    onPrev,
-    GuardianScreen,
-    title,
-    waitingForDevice,
+    allTransactions,
+    className,
+    currentStep,
     currentTransaction,
+    GuardianScreen,
     error,
-    allTransactions,
+    globalStyles,
+    handleClose,
+    handleSubmit,
     isLastTransaction,
-    currentStep,
-    className,
+    onPrev,
+    onSignTransaction,
     signStepInnerClasses,
-    globalStyles,
-    styles
+    styles,
+    title,
+    waitingForDevice
   } = props;
 
   const [showGuardianScreen, setShowGuardianScreen] = useState(false);
@@ -89,9 +90,14 @@ const SignStepComponent = (props: SignStepType & WithStylesImportType) => {
 
   const onSubmit = async () => {
     await onSignTransaction();
+
     if (signLastTransaction && GuardianScreen) {
       return setShowGuardianScreen(true);
     }
+
+    if (signLastTransaction && handleSubmit) {
+      handleSubmit();
+    }
   };
 
   const continueWithoutSigning =

src/UI/SignTransactionsModals/SignWithDeviceModal/SignWithDeviceModal.tsx

@@ -4,10 +4,12 @@ import { withStyles, WithStylesImportType } from 'hocs/withStyles';
 import { useGetAccount, useSignTransactionsWithDevice } from 'hooks';
 import { SignModalPropsType } from 'types';
 import { ModalContainer } from 'UI/ModalContainer/ModalContainer';
+import { Loader } from '../../Loader';
 import { SignStep } from './SignStep';
 
 const SignWithDeviceModalComponent = ({
   handleClose,
+  handleSubmit,
   error,
   className = 'dapp-device-modal',
   verifyReceiverScam = true,
@@ -36,6 +38,9 @@ const SignWithDeviceModalComponent = ({
     verifyReceiverScam,
     hasGuardianScreen: Boolean(GuardianScreen)
   });
+
+  const isLoading = currentTransaction == null;
+
   const classes = {
     wrapper: classNames(
       styles?.modalContainer,
@@ -52,27 +57,32 @@ const SignWithDeviceModalComponent = ({
       modalConfig={{
         modalDialogClassName: classes.wrapper
       }}
-      visible={currentTransaction != null}
+      visible
     >
       <div className={classes.cardBody}>
-        <SignStep
-          address={address}
-          onSignTransaction={onSignTransaction}
-          allTransactions={allTransactions}
-          onPrev={onPrev}
-          GuardianScreen={GuardianScreen}
-          signedTransactions={signedTransactions}
-          setSignedTransactions={setSignedTransactions}
-          waitingForDevice={waitingForDevice}
-          currentStep={currentStep}
-          isLastTransaction={isLastTransaction}
-          callbackRoute={callbackRoute}
-          currentTransaction={currentTransaction}
-          handleClose={onAbort}
-          error={error}
-          title={title}
-          signStepInnerClasses={signStepInnerClasses}
-        />
+        {isLoading ? (
+          <Loader />
+        ) : (
+          <SignStep
+            address={address}
+            allTransactions={allTransactions}
+            callbackRoute={callbackRoute}
+            currentStep={currentStep}
+            currentTransaction={currentTransaction}
+            error={error}
+            GuardianScreen={GuardianScreen}
+            handleClose={onAbort}
+            handleSubmit={handleSubmit}
+            isLastTransaction={isLastTransaction}
+            onPrev={onPrev}
+            onSignTransaction={onSignTransaction}
+            setSignedTransactions={setSignedTransactions}
+            signStepInnerClasses={signStepInnerClasses}
+            signedTransactions={signedTransactions}
+            title={title}
+            waitingForDevice={waitingForDevice}
+          />
+        )}
       </div>
     </ModalContainer>
   );

src/UI/SignTransactionsModals/SignWithDeviceModal/components/components/ConfirmReceiver/ConfirmReceiver.tsx

@@ -3,11 +3,10 @@ import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import BigNumber from 'bignumber.js';
 
-import { ACCOUNTS_ENDPOINT } from 'apiCalls';
+import { useGetAccountFromApi, ACCOUNTS_ENDPOINT } from 'apiCalls';
 import MultiversXIconSimple from 'assets/icons/mvx-icon-simple.svg';
 import { DataTestIdsEnum } from 'constants/index';
 import { withStyles } from 'hocs/withStyles';
-import { useGetAccountFromApi } from 'hooks';
 import { trimUsernameDomain } from 'hooks/account/helpers';
 import { CopyButton } from 'UI/CopyButton';
 import { ExplorerLink } from 'UI/ExplorerLink';
@@ -18,26 +17,28 @@ import { isContract } from 'utils';
 import { WithStylesImportType } from '../../../../../../hocs/useStyles';
 
 export interface ConfirmReceiverPropsType extends WithStylesImportType {
+  amount: string;
+  label?: React.ReactNode;
   receiver: string;
-  scamReport: string | null;
   receiverUsername?: string;
-  amount: string;
+  scamReport: string | null;
 }
 
 const ConfirmReceiverComponent = ({
+  amount,
+  label,
   receiver,
-  scamReport,
   receiverUsername,
-  amount,
+  scamReport,
   styles
 }: ConfirmReceiverPropsType) => {
   const isSmartContract = isContract(receiver);
   const skipFetchingAccount = Boolean(isSmartContract || receiverUsername);
   const isAmountZero = new BigNumber(amount).isZero();
 
   const {
-    account: usernameAccount,
-    loading: usernameAccountLoading,
+    data: usernameAccount,
+    isLoading: usernameAccountLoading,
     error: usernameAccountError
   } = useGetAccountFromApi(skipFetchingAccount ? null : receiver);
 
@@ -47,11 +48,13 @@ const ConfirmReceiverComponent = ({
     receiver && Boolean(foundReceiverUsername) && !usernameAccountError
   );
 
+  const defaultReceiverLabel = isAmountZero ? 'To interact with' : 'To';
+
   return (
     <div className={styles?.receiver}>
       <div className={styles?.receiverLabelWrapper}>
         <div className={styles?.receiverLabel}>
-          {isAmountZero ? 'To interact with' : 'To'}
+          {label ?? defaultReceiverLabel}
         </div>
 
         {scamReport && (

src/UI/SignTransactionsModals/SignWithDeviceModal/signWithDeviceModal.types.ts

@@ -23,13 +23,14 @@ export interface SignStepInnerClassesType {
 export interface SignStepPropsType
   extends WithClassnameType,
     GuardianScreenType {
-  handleClose: () => void;
-  GuardianScreen?: SignPropsType['GuardianScreen'];
-  waitingForDevice: boolean;
-  error: string | null;
+  allTransactions: MultiSignTransactionType[];
   callbackRoute?: string;
   currentStep: number;
   currentTransaction: ActiveLedgerTransactionType | null;
-  allTransactions: MultiSignTransactionType[];
+  GuardianScreen?: SignPropsType['GuardianScreen'];
+  error: string | null;
+  handleClose: () => void;
+  handleSubmit?: () => void;
   isLastTransaction: boolean;
+  waitingForDevice: boolean;
 }

src/UI/TransactionData/TransactionData.tsx

@@ -18,22 +18,24 @@ const allOccurences = (sourceStr: string, searchStr: string) => {
 export interface TransactionDataPropsType extends WithClassnameType {
   data: string;
   highlight?: string;
-  isScCall?: boolean;
   innerTransactionDataClasses?: {
     transactionDataInputLabelClassName?: string;
     transactionDataInputValueClassName?: string;
   };
+  isScCall?: boolean;
+  label?: React.ReactNode;
   transactionIndex: number;
 }
 
 const TransactionDataComponent = ({
   className = 'dapp-transaction-data',
   data,
+  globalStyles,
   highlight,
   innerTransactionDataClasses,
   isScCall,
+  label,
   transactionIndex,
-  globalStyles,
   styles
 }: TransactionDataPropsType & WithStylesImportType) => {
   const {
@@ -161,7 +163,7 @@ const TransactionDataComponent = ({
             transactionDataInputLabelClassName
           )}
         >
-          Data
+          {label ?? 'Data'}
         </span>
 
         <div className={styles?.transactionDataValueWrapper}>

src/apiCalls/accounts/getAccountFromApi.ts

@@ -1,15 +1,14 @@
-import { axiosInstance } from 'apiCalls/axiosInstance';
 import { ACCOUNTS_ENDPOINT } from 'apiCalls/endpoints';
 import { getCleanApiAddress } from 'apiCalls/utils';
-import { AccountType } from 'types';
+import { axiosInstance } from 'apiCalls/utils/axiosInstance';
 
 export const accountFetcher = (address: string | null) => {
   const apiAddress = getCleanApiAddress();
   const url = `${apiAddress}/${ACCOUNTS_ENDPOINT}/${address}?withGuardianInfo=true`;
-  return axiosInstance.get<AccountType>(url);
+  return axiosInstance.get(url);
 };
 
-export async function getAccountFromApi(address?: string) {
+export const getAccountFromApi = async (address?: string) => {
   if (!address) {
     return null;
   }
@@ -20,5 +19,6 @@ export async function getAccountFromApi(address?: string) {
   } catch (err) {
     console.error('error fetching configuration for ', address);
   }
+
   return null;
-}
+};

src/apiCalls/accounts/index.ts

@@ -1 +1,2 @@
 export * from './getAccountFromApi';
+export * from './useGetAccountFromApi';

src/apiCalls/accounts/useGetAccountFromApi.ts

@@ -0,0 +1,9 @@
+import { ACCOUNTS_ENDPOINT } from '../endpoints';
+import { useApiFetch } from '../utils';
+
+export const useGetAccountFromApi = (address: string | null) =>
+  useApiFetch({
+    apiEndpoint: address
+      ? `${ACCOUNTS_ENDPOINT}/${address}?withGuardianInfo=true`
+      : null
+  });

src/apiCalls/configuration/index.ts

@@ -3,3 +3,5 @@ export * from './getServerConfiguration';
 export * from './getNetworkConfig';
 export * from './getApiAddressForChainId';
 export * from './getEnvironmentForChainId';
+export * from './useGetNetworkConfigFromApi';
+export * from './useGetServerConfigurationFromApi';

src/apiCalls/configuration/useGetNetworkConfigFromApi.ts

@@ -0,0 +1,7 @@
+import { NETWORK_CONFIG_ENDPOINT } from '../endpoints';
+import { useApiFetch } from '../utils';
+
+export const useGetNetworkConfigFromApi = () =>
+  useApiFetch({
+    apiEndpoint: NETWORK_CONFIG_ENDPOINT
+  });

src/apiCalls/configuration/useGetServerConfigurationFromApi.ts

@@ -0,0 +1,39 @@
+import { CONFIG_ENDPOINT } from 'apiCalls/endpoints';
+import { NetworkType } from 'types';
+import { useApiFetch } from '../utils';
+
+export const useGetServerConfigurationFromApi = () => {
+  const { data, isLoading, error } = useApiFetch({
+    apiEndpoint: CONFIG_ENDPOINT
+  });
+
+  if (isLoading) {
+    return null;
+  }
+
+  if (error) {
+    console.error('Error fetching server configuration:', error);
+  }
+
+  const egldDenomination = 'egldDenomination';
+
+  if (!(egldDenomination in data)) {
+    return data;
+  }
+
+  const {
+    [egldDenomination]: decimals,
+    decimals: digits,
+    ...rest
+  } = data as NetworkType & {
+    [egldDenomination]: string;
+  };
+
+  const networkConfig: NetworkType = {
+    ...rest,
+    decimals,
+    digits
+  };
+
+  return networkConfig;
+};

src/apiCalls/economics/getEconomicsInfo.ts

@@ -14,9 +14,9 @@ export interface EconomicsInfoType {
 
 export function getEconomics(url = ECONOMICS_ENDPOINT) {
   const apiAddress = getCleanApiAddress();
-  return axios.get<EconomicsInfoType>(url, {
-    baseURL: apiAddress
-  });
+  const configUrl = `${apiAddress}/${url}`;
+
+  return axios.get<EconomicsInfoType>(configUrl);
 }
 
 export async function getEconomicsInfo() {

src/apiCalls/economics/index.ts

@@ -1 +1,2 @@
 export * from './getEconomicsInfo';
+export * from './useGetEconomicsInfoFromApi';

src/apiCalls/economics/useGetEconomicsInfoFromApi.ts

@@ -0,0 +1,5 @@
+import { ECONOMICS_ENDPOINT } from '../endpoints';
+import { useApiFetch } from '../utils';
+
+export const useGetEconomicsInfoFromApi = () =>
+  useApiFetch({ apiEndpoint: ECONOMICS_ENDPOINT });

src/apiCalls/index.ts

@@ -2,5 +2,5 @@ export * from './transactions';
 export * from './accounts';
 export * from './configuration';
 export * from './economics';
-export * from './getScamAddressData';
+export * from './utils';
 export * from './endpoints';