add txResults in hooks, other improvements

Author: juliancwirko

.env.example

@@ -54,7 +54,7 @@ API_ALLOWED_DAPP_HOST = http://localhost:3000
 NEXT_PUBLIC_EGLD_TRANSFER_ADDRESS = erd17a4wydhhd6t3hhssvcp9g23ppn7lgkk4g2tww3eqzx4mlq95dukss0g50f
 
 # The smart contract address used for minting the NFT token (as example deployed Elven Tools Smart Contract)
-NEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS = erd1qqqqqqqqqqqqqpgq5za2pty2tlfqhj20z9qmrrpjmyt6advcgtkscm7xep
+NEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS = erd1qqqqqqqqqqqqqpgqztp5vpqrxe2tha224jwsa3sv2800a88zgtksar2kc8
 
 # The function/endpoint name for minting on the smart contract
 NEXT_PUBLIC_MINT_FUNCTION_NAME = mint

CHANGELOG.md

@@ -1,3 +1,7 @@
+### [4.3.0](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v4.3.0) (2023-01-28)
+- `txResults` is now returned in `useTransaction` and `useScTransaction` hooks (it is ITransactionOnNetwork in sdk-core)
+- dependencies updates
+
 ### [4.2.0](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v4.2.0) (2023-01-14)
 - rebrand to multiversx (continuation)
     - npm packages are replaced

README.md

@@ -11,7 +11,7 @@ It has straightforward and complete functionality.
 ### Main assumption for the dapp:
 
 - it works on Nextjs
-- it uses erdjs 11.* without the dapp-core library.
+- it uses sdk-core 11.* without the dapp-core library.
 it uses backed-side redirections to hide the API endpoint. The only exposed one is `/api/multiversx` and it is used only by the dapp internally
 - it uses the .env file - there is an example in the repo (for all configurations, also for the demo config)
 - it uses chakra-ui
@@ -58,7 +58,7 @@ const NextJSDappTemplate = ({ Component, pageProps }: AppProps) => {
 
 #### LoginModalButton
 
-The component provides the `Connect` button with the modal, which will contain another three buttons for four different authentication possibilities (Maiar Mobile App, Maiar Defi Wallet - browser extension, MultiversX Web Wallet). You should be able to use it in any place on the website.
+The component provides the `Connect` button with the modal, which will contain another three buttons for four different authentication possibilities (xPortal Mobile App, MultiversX Defi Wallet - browser extension, MultiversX Web Wallet). You should be able to use it in any place on the website.
 
 ```jsx
 import { LoginModalButton } from '../tools/LoginModalButton';
@@ -107,7 +107,7 @@ It can display the spinner and also the fallback React element.
 The hook provides all that is required for triggering transactions. useTransaction can also take a callback function as an argument.
 
 ```jsx
-const { pending, triggerTx, transaction, error } = useTransaction({ cb });
+const { pending, triggerTx, transaction, txResult, error } = useTransaction({ cb });
 
 const handleSendTx = useCallback(() => {
   const demoMessage = 'Transaction demo!';
@@ -125,7 +125,7 @@ const handleSendTx = useCallback(() => {
 The hook provides all that is required for triggering smart contract transactions. useScTransaction can also take a callback function as an argument.
 
 ```jsx
-const { pending, triggerTx, transaction, error } = useScTransaction({ cb });
+const { pending, triggerTx, transaction, txResult, error } = useScTransaction({ cb });
 
 const handleSendTx = useCallback(() => {
   triggerTx({
@@ -154,7 +154,7 @@ const {
   payload: {
     scAddress: process.env.NEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS,
     funcName: process.env.NEXT_PUBLIC_QUERY_FUNCTION_NAME,
-    args: [], // arguments for the query in hex format, you can use erdjs for that, for example: args: [ new Address('erd1....').hex() ] etc. It will be also simplified in the future.
+    args: [], // arguments for the query in hex format, you can use sdk-core for that, for example: args: [ new Address('erd1....').hex() ] etc. It will be also simplified in the future.
   },
   autoInit: false, // you can enable or disable the trigger of the query on the component mount
   abiJSON: yourImportedAbiJSONObject // required for SCQueryType.COMPLEX type
@@ -172,7 +172,7 @@ const { data } = useScQuery<TypedOutcomeBundle>({
   payload: {
     scAddress: 'erd1qqq...',
     funcName: 'yourScFunction',
-    args: [], // args in hex format, use erdjs for conversion, see above
+    args: [], // args in hex format, use sdk-core for conversion, see above
   },
   autoInit: true,
   abiJSON,
@@ -193,7 +193,7 @@ interface TypedOutcomeBundle {
 }
 ```
 
-You can then process the data. For example `data.firstValue.valueOf()` or `data.firstValue.toString()` if applicable. The returned type can be further processed using erdjs.
+You can then process the data. For example `data.firstValue.valueOf()` or `data.firstValue.toString()` if applicable. The returned type can be further processed using sdk-core.
 
 #### useLoggingIn()
 

components/demo/SimpleDemo.tsx

@@ -100,7 +100,7 @@ export const SimpleDemo = () => {
           </Box>
           {loginMethod === LoginMethodsEnum.walletconnect && (
             <Box>
-              Confirm it on the Maiar mobile app and wait till it finishes.
+              Confirm it on the xPortal mobile app and wait till it finishes.
             </Box>
           )}
           {loginMethod === LoginMethodsEnum.ledger && (
@@ -143,7 +143,7 @@ export const SimpleDemo = () => {
                 <Text fontWeight="black" fontSize="xl" display="inline-block">
                   {result.content}
                 </Text>{' '}
-                NFTs to mint left!
+                NFTs left to mint!
               </Box>
             </>
           )}

components/tools/ActionButton.tsx

@@ -16,7 +16,7 @@ export const ActionButton: FC<PropsWithChildren<ActionButtonProps>> = ({
 }) => {
   const handleClick = useCallback(() => {
     if (!disabled) {
-      onClick?.();
+      onClick();
     }
   }, [disabled, onClick]);
 

components/tools/MobileLoginQR.tsx

@@ -64,7 +64,7 @@ export const MobileLoginQR: FunctionComponent<MobileLoginQRProps> = ({
             rel="noopener noreferrer nofollow"
             target="_blank"
           >
-            Maiar Login
+            xPortal Login
           </Box>
         </Flex>
       ) : null}

config/network.ts

@@ -24,7 +24,8 @@ export const networkConfig: Record<string, NetworkType> = {
     walletConnectBridgeAddresses: ['https://bridge.walletconnect.org'],
     walletAddress: 'https://devnet-wallet.multiversx.com',
     apiAddress:
-      process.env.NEXT_PUBLIC_MULTIVERSX_API || 'https://devnet-api.multiversx.com',
+      process.env.NEXT_PUBLIC_MULTIVERSX_API ||
+      'https://devnet-api.multiversx.com',
     explorerAddress: 'https://devnet-explorer.multiversx.com',
     apiTimeout: '4000',
   },

hooks/auth/useNetworkSync.tsx

@@ -135,7 +135,7 @@ export const useNetworkSync = () => {
       if (!dappProvider) {
         const networkConfiguration = getActiveNetworkConfiguration();
         switch (loginMethod) {
-          // Browser extension auth (Maiar defi wallet)
+          // Browser extension auth (MultiversX defi wallet)
           case LoginMethodsEnum.extension:
             dappProvider = ExtensionProvider.getInstance();
             try {
@@ -154,7 +154,7 @@ export const useNetworkSync = () => {
               console.warn("Can't initialize the Dapp Provider!");
             }
             break;
-          // Maiar mobile app auth
+          // xPortal mobile app auth
           case LoginMethodsEnum.walletconnect:
             const providerHandlers = {
               onClientLogin: () =>
@@ -178,7 +178,7 @@ export const useNetworkSync = () => {
               await dappProvider.init();
               if (!dappProvider.isInitialized()) {
                 console.warn(
-                  'Something went wrong trying to sync with the Maiar app!'
+                  'Something went wrong trying to sync with the xPortal app!'
                 );
               } else {
                 network.setNetworkState('dappProvider', dappProvider);

hooks/core/common-helpers/sendTxOperations.ts

@@ -1,5 +1,10 @@
 // Tools used internally by sent transactions hooks
-import { Account, TransactionWatcher, Transaction } from '@multiversx/sdk-core';
+import {
+  Account,
+  TransactionWatcher,
+  Transaction,
+  ITransactionOnNetwork,
+} from '@multiversx/sdk-core';
 import { ExtensionProvider } from '@multiversx/sdk-extension-provider';
 import { WalletConnectProvider } from '@multiversx/sdk-wallet-connect-provider';
 import { HWProvider } from '@multiversx/sdk-hw-provider';
@@ -15,18 +20,21 @@ export interface TransactionCb {
   transaction?: Transaction | null;
   error?: string;
   pending?: boolean;
+  txResult?: ITransactionOnNetwork | null;
 }
 
 export const postSendTxOperations = async (
   tx: Transaction,
   setTransaction: Dispatch<SetStateAction<Transaction | null>>,
+  setTxResult: Dispatch<SetStateAction<ITransactionOnNetwork | null>>,
   apiNetworkProvider: ApiNetworkProvider,
   cb?: (params: TransactionCb) => void
 ) => {
   const transactionWatcher = new TransactionWatcher(apiNetworkProvider);
-  await transactionWatcher.awaitCompleted(tx);
+  const txResult = await transactionWatcher.awaitCompleted(tx);
   setTransaction(tx);
-  cb?.({ transaction: tx, pending: false });
+  setTxResult(txResult);
+  cb?.({ transaction: tx, pending: false, txResult });
   const sender = tx.getSender();
   const senderAccount = new Account(sender);
   const userAccountOnNetwork = await apiNetworkProvider.getAccount(sender);
@@ -42,6 +50,7 @@ export const sendTxOperations = async (
   loginInfoSnap: LoginInfoState,
   apiNetworkProvider: ApiNetworkProvider,
   setTransaction: Dispatch<SetStateAction<Transaction | null>>,
+  setTxResult: Dispatch<SetStateAction<ITransactionOnNetwork | null>>,
   setError: Dispatch<SetStateAction<string>>,
   setPending: Dispatch<SetStateAction<boolean>>,
   webWalletRedirectUrl?: string,
@@ -65,7 +74,13 @@ export const sendTxOperations = async (
     }
     if (loginInfoSnap.loginMethod !== LoginMethodsEnum.wallet) {
       await apiNetworkProvider.sendTransaction(tx);
-      await postSendTxOperations(tx, setTransaction, apiNetworkProvider, cb);
+      await postSendTxOperations(
+        tx,
+        setTransaction,
+        setTxResult,
+        apiNetworkProvider,
+        cb
+      );
     }
   } catch (e) {
     const err = errorParse(e);

hooks/core/common-helpers/useWebWalletTxSend.tsx

@@ -3,7 +3,7 @@ import {
   WALLET_PROVIDER_CALLBACK_PARAM,
   WALLET_PROVIDER_CALLBACK_PARAM_TX_SIGNED,
 } from '@multiversx/sdk-web-wallet-provider';
-import { Transaction } from '@multiversx/sdk-core';
+import { Transaction, ITransactionOnNetwork } from '@multiversx/sdk-core';
 import { useSnapshot } from 'valtio';
 import { getParamFromUrl } from '../../../utils/getParamFromUrl';
 import { getNetworkState } from '../../../store/network';
@@ -16,13 +16,15 @@ import { errorParse } from '../../../utils/errorParse';
 interface UseWebWalletTxSendProps {
   setPending: Dispatch<SetStateAction<boolean>>;
   setTransaction: Dispatch<SetStateAction<Transaction | null>>;
+  setTxResult: Dispatch<SetStateAction<ITransactionOnNetwork | null>>;
   setError: Dispatch<SetStateAction<string>>;
   cb?: (params: TransactionCb) => void;
 }
 
 export const useWebWalletTxSend = ({
   setPending,
   setTransaction,
+  setTxResult,
   cb,
   setError,
 }: UseWebWalletTxSendProps) => {
@@ -56,6 +58,7 @@ export const useWebWalletTxSend = ({
           await postSendTxOperations(
             transaction,
             setTransaction,
+            setTxResult,
             apiNetworkProvider,
             cb
           );