Merge pull request #881 from multiversx/development

Development

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[v2.19.2]](https://github.com/multiversx/mx-sdk-dapp/pull/881)] - 2023-07-28
+
+- [Changed username fetching logic (skip fetching if already provided)](https://github.com/multiversx/mx-sdk-dapp/pull/880)
+
 ## [[v2.19.1]](https://github.com/multiversx/mx-sdk-dapp/pull/879)] - 2023-07-27
 
 - [Added usernames' support](https://github.com/multiversx/mx-sdk-dapp/pull/878)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp",
-  "version": "2.19.1",
+  "version": "2.19.2",
   "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/components/components/ConfirmReceiver/ConfirmReceiver.tsx

@@ -14,23 +14,28 @@ import styles from './confirmReceiverStyles.scss';
 export interface ConfirmReceiverPropsType {
   receiver: string;
   scamReport: string | null;
+  receiverUsername?: string;
 }
 
 export const ConfirmReceiver = ({
   receiver,
-  scamReport
+  scamReport,
+  receiverUsername
 }: ConfirmReceiverPropsType) => {
   const isSmartContract = isContract(receiver);
 
+  const skipFetchingAccount = Boolean(isSmartContract || receiverUsername);
+
   const {
     account: usernameAccount,
     loading: usernameAccountLoading,
     error: usernameAccountError
-  } = useGetAccountFromApi(receiver, { shouldSkipFetching: isSmartContract });
+  } = useGetAccountFromApi(skipFetchingAccount ? null : receiver);
 
-  const receiverValue = usernameAccount?.username ?? receiver;
+  const foundReceiverUsername = receiverUsername ?? usernameAccount?.username;
+  const receiverValue = foundReceiverUsername ?? receiver;
   const hasUsername = Boolean(
-    receiver && Boolean(usernameAccount?.username) && !usernameAccountError
+    receiver && Boolean(foundReceiverUsername) && !usernameAccountError
   );
 
   return (

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

@@ -31,7 +31,7 @@ export const ReceiverSubValue = ({
   if (isSmartContract) {
     return (
       <span className={styles.subValue}>
-        <Trim text='Smart Contract Call' className={styles.subValueTrim} />
+        <Trim text='Smart Contract' className={styles.subValueTrim} />
 
         <ExplorerLink
           page={`/${ACCOUNTS_ENDPOINT}/${receiver}`}

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

@@ -3,11 +3,11 @@ import classNames from 'classnames';
 
 import { ACCOUNTS_ENDPOINT } from 'apiCalls';
 import MultiversXIconSimple from 'assets/icons/mvx-icon-simple.svg';
+import { trimUsernameDomain } from 'hooks/account/helpers';
 import { CopyButton } from 'UI/CopyButton';
 import { ExplorerLink } from 'UI/ExplorerLink';
 import { Trim } from 'UI/Trim';
 
-import { trimReceiverDomain } from '../../helpers';
 import styles from './receiverValueStyles.scss';
 
 export interface ReceiverValuePropsType {
@@ -25,7 +25,7 @@ export const ReceiverValue = ({
     return (
       <span className={classNames(styles.receiverValue, styles.shrunk)}>
         <MultiversXIconSimple className={styles.receiverValueIcon} />
-        {trimReceiverDomain(receiverValue)}
+        {trimUsernameDomain(receiverValue)}
 
         <ExplorerLink
           page={`/${ACCOUNTS_ENDPOINT}/${receiverAddress}`}

src/apiCalls/accounts/getAccountFromApi.ts

@@ -3,19 +3,22 @@ import { ACCOUNTS_ENDPOINT } from 'apiCalls/endpoints';
 import { getCleanApiAddress } from 'apiCalls/utils';
 import { AccountType } from 'types';
 
+export const accountFetcher = (address: string | null) => {
+  const apiAddress = getCleanApiAddress();
+  const url = `${apiAddress}/${ACCOUNTS_ENDPOINT}/${address}?withGuardianInfo=true`;
+  return axios.get<AccountType>(url);
+};
+
 export async function getAccountFromApi(address?: string) {
   if (!address) {
     return null;
   }
 
-  const apiAddress = getCleanApiAddress();
-  const configUrl = `${apiAddress}/${ACCOUNTS_ENDPOINT}/${address}?withGuardianInfo=true`;
-
   try {
-    const { data } = await axios.get<AccountType>(configUrl);
+    const { data } = await accountFetcher(address);
     return data;
   } catch (err) {
-    console.error('error fetching configuration for ', configUrl);
+    console.error('error fetching configuration for ', address);
   }
   return null;
 }

src/hooks/account/helpers/index.ts

@@ -0,0 +1 @@
+export * from './trimUsernameDomain';

src/hooks/account/helpers/trimUsernameDomain.ts

@@ -0,0 +1,12 @@
+export const trimUsernameDomain = (username?: string) => {
+  if (!username) {
+    return;
+  }
+
+  const dotExists = username.lastIndexOf('.') > 0;
+  const trimmedPartBeforeLastDot = dotExists
+    ? username.substring(0, username.lastIndexOf('.'))
+    : username;
+
+  return trimmedPartBeforeLastDot;
+};

src/hooks/account/useGetAccountFromApi.ts

@@ -1,33 +1,25 @@
-import axios from 'axios';
+import { useEffect } from 'react';
 import useSwr from 'swr';
 
-import { ACCOUNTS_ENDPOINT } from 'apiCalls';
-import { apiAddressSelector } from 'reduxStore/selectors';
-import { store } from 'reduxStore/store';
+import { accountFetcher } from 'apiCalls/accounts/getAccountFromApi';
 
-export interface UseGetAccountFromApiOptionsType {
-  shouldSkipFetching?: boolean;
-}
-
-export const useGetAccountFromApi = (
-  address: string,
-  options: UseGetAccountFromApiOptionsType
-) => {
-  const apiAddress = apiAddressSelector(store.getState());
-  const accountEndpoint = options.shouldSkipFetching
-    ? null
-    : `${apiAddress}/${ACCOUNTS_ENDPOINT}/${address}`;
-
-  const { data, error, isLoading, isValidating } = useSwr(
-    accountEndpoint,
-    (url) => axios.get(url).then((response) => response.data)
+export const useGetAccountFromApi = (address: string | null) => {
+  const { data, error, isLoading, isValidating, mutate } = useSwr(
+    address,
+    (address) => accountFetcher(address).then((response) => response.data),
+    { revalidateOnFocus: false, revalidateOnMount: false }
   );
 
-  const dataLoadingFromLibrary = isLoading || isValidating;
-  const isUsernameLoading = dataLoadingFromLibrary || (!error && !data);
+  const startFetchOnMount = () => {
+    if (!data) {
+      mutate();
+    }
+  };
+
+  useEffect(startFetchOnMount, [data, mutate]);
 
   return {
-    loading: isUsernameLoading && !options.shouldSkipFetching,
+    loading: isLoading || isValidating,
     error,
     account: data
   };