improve in-app navigation, update dependencies

CHANGELOG.md

@@ -1,3 +1,9 @@
+### [4.2.0](https://github.com/ElvenTools/elven-tools-dapp/releases/tag/v4.2.0) (2023-01-28)
+- rebuilt in-app navigation using Next Link instead ActionButton that should be used only for triggering functions, and not navigation
+- `useScQuery` can now query more complex data using abi file
+- better errors handling through the network provider
+- update npm dependencies
+
 ### [4.1.0](https://github.com/ElvenTools/elven-tools-dapp/releases/tag/v4.1.0) (2023-01-15)
 - rebrand to multiversx (continuation)
     - npm packages are replaced

README.md

@@ -4,14 +4,14 @@
 - Demo: [dapp-demo.elven.tools](https://dapp-demo.elven.tools)
 - Elven Tools intro (including the Dapp): [youtu.be/Jou5jn8PFz8](https://youtu.be/Jou5jn8PFz8)
 
-The Dapp is built using Nextjs and a couple of helpful tools. It allows you to interact with the MultiversX (Elrond) blockchain and smart contracts, and especially it is prepared for the [Elven Tools Smart Contract](https://github.com/ElvenTools/elven-nft-minter-sc). But you can always modify it and adjust it for your needs.
+The Dapp is built using Nextjs and a couple of helpful tools. It allows you to interact with the MultiversX blockchain and smart contracts, and especially it is prepared for the [Elven Tools Smart Contract](https://github.com/ElvenTools/elven-nft-minter-sc). But you can always modify it and adjust it for your needs.
 
 ### It provides:
 
-- Auth with 4 MultiversX (Elrond) blockchain providers
+- Auth with 4 MultiversX blockchain providers
   - Web Wallet
-  - Maiar mobile app
-  - Maiar DeFi browser extension
+  - xPortal mobile app
+  - MultiversX DeFi browser extension
   - Ledger Nano
 - React hooks for making transactions
 - React hooks for querying smart contracts

components/ActionButton.tsx

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

components/HeaderMenuButtons.tsx

@@ -1,7 +1,6 @@
-import { useRouter } from 'next/router';
-import { Box, Button } from '@chakra-ui/react';
-import { useCallback, FC } from 'react';
-import { ActionButton } from './ActionButton';
+import NextLink from 'next/link';
+import { Box, Link } from '@chakra-ui/react';
+import { FC } from 'react';
 import { SocialMediaIcons } from './SocialMediaIcons';
 import { LoginModalButton } from './core/LoginModalButton';
 import { UserAvatar } from './UserAvatar';
@@ -11,16 +10,6 @@ interface HeaderMenuButtonsProps {
 }
 
 export const HeaderMenuButtons: FC<HeaderMenuButtonsProps> = ({ enabled }) => {
-  const router = useRouter();
-
-  const handleMintClick = useCallback(() => {
-    router.push('/mint');
-  }, [router]);
-
-  const handleAboutClick = useCallback(() => {
-    router.push('/about');
-  }, [router]);
-
   return (
     <Box
       display="flex"
@@ -33,23 +22,40 @@ export const HeaderMenuButtons: FC<HeaderMenuButtonsProps> = ({ enabled }) => {
       }}
     >
       {enabled.includes('about') && (
-        <Button
-          variant="link"
+        <Link
           color="elvenTools.white"
-          _focus={{ outline: 'none' }}
           mr={2}
-          onClick={handleAboutClick}
+          as={NextLink}
+          _focus={{ outline: 'none' }}
+          href="/about"
         >
           About
-        </Button>
+        </Link>
       )}
 
       <SocialMediaIcons />
 
       <UserAvatar />
 
       {enabled.includes('mint') && (
-        <ActionButton onClick={handleMintClick}>Mint</ActionButton>
+        <Link
+          as={NextLink}
+          href="/mint"
+          borderColor="elvenTools.color2.darker"
+          borderWidth={2}
+          bgColor="transparent"
+          py={2}
+          px={6}
+          rounded="xl"
+          fontWeight="normal"
+          cursor="pointer"
+          color="elvenTools.white"
+          userSelect="none"
+          _hover={{ bg: 'elvenTools.color2.darker' }}
+          transition="background-color .3s"
+        >
+          Mint
+        </Link>
       )}
       {enabled.includes('auth') && <LoginModalButton />}
     </Box>

components/Hero.tsx

@@ -68,7 +68,7 @@ export const Hero = () => {
         textAlign={{ base: 'center', md: 'left' }}
       >
         The actual working example is connected to the Elven Tools smart
-        contract deployed on the MultiversX (Elrond) blockchain{' '}
+        contract deployed on the MultiversX blockchain{' '}
         <Text as="span" fontWeight="medium">
           devnet
         </Text>

components/NftImageHelper.tsx

@@ -1,7 +1,7 @@
 // After minting an NFT, there is no guarantee that the image thumbnail
-// will be immediately available through MultiversX (Elrond) API
+// will be immediately available through MultiversX API
 // This is why we have this helper. It will fallback to the IPFS source using a custom
-// IPFS gateway, we take the CID from MultiversX (Elrond)'s IPFS gateway url here to be sure that we will get it
+// IPFS gateway, we take the CID from MultiversX's IPFS gateway url here to be sure that we will get it
 
 import { FC, CSSProperties, PropsWithChildren } from 'react';
 import { Box } from '@chakra-ui/react';

components/core/LedgerAccountsList.tsx

@@ -54,7 +54,7 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
           mounted.current
         ) {
           setError(
-            'Not connected, please check the connection and make sure that you have the MultiversX (Elrond) app opened on your Ledger device.'
+            'Not connected, please check the connection and make sure that you have the MultiversX app opened on your Ledger device.'
           );
         } else {
           setError(`Error: ${errorParse(e)}`);

config/dappUi.ts

@@ -7,23 +7,23 @@ export const dappHostname = process.env.NEXT_PUBLIC_DAPP_HOST;
 
 // HTML metata and og tags, default values for MetaHead.tsx component
 export const defaultMetaTags = {
-  title: 'Elven Tools NFT minter dapp demo - MultiversX (Elrond) blockchain',
+  title: 'Elven Tools NFT minter dapp demo - MultiversX blockchain',
   description:
-    'Open source Dapp template for the Elven Tools and MultiversX (Elrond) blockchain. The actual working example is connected to the Elven Tools smart contract deployed on the MultiversX (Elrond) blockchain devnet!',
+    'Open source Dapp template for the Elven Tools and MultiversX blockchain. The actual working example is connected to the Elven Tools smart contract deployed on the MultiversX blockchain devnet!',
   image: `${dappHostname}/og-image.png`,
 };
 
 // FAQ section data
 export const faq = [
   {
-    question: 'What is an ESDT on MultiversX (Elrond)?',
+    question: 'What is an ESDT on MultiversX?',
     answer:
-      'ESDT stands for MultiversX (Elrond) Standard Digital Token. Custom tokens at native speed and scalability, without ERC20. The MultiversX (Elrond) network natively supports the issuance of custom tokens, without the need for contracts such as ERC20, but addressing the same use-cases. And due to the native in-protocol support, transactions with custom tokens do not require the VM at all. In effect, this means that custom tokens are as fast and as scalable as the native EGLD token itself.',
+      'ESDT stands for MultiversX Standard Digital Token. Custom tokens at native speed and scalability, without ERC20. The MultiversX network natively supports the issuance of custom tokens, without the need for contracts such as ERC20, but addressing the same use-cases. And due to the native in-protocol support, transactions with custom tokens do not require the VM at all. In effect, this means that custom tokens are as fast and as scalable as the native EGLD token itself.',
   },
   {
-    question: 'What is an NFT on MultiversX (Elrond)?',
+    question: 'What is an NFT on MultiversX?',
     answer:
-      'The MultiversX (Elrond) protocol introduces native NFT support by adding metadata and attributes on top of the already existing ESDT. This way, one can issue a semi-fungible token or a non-fungible token which is quite similar to an ESDT, but has a few more attributes, as well as an assignable URI. Once owning a quantity of a NFT/SFT, users will have their data store directly under their account, inside the trie.',
+      'The MultiversX protocol introduces native NFT support by adding metadata and attributes on top of the already existing ESDT. This way, one can issue a semi-fungible token or a non-fungible token which is quite similar to an ESDT, but has a few more attributes, as well as an assignable URI. Once owning a quantity of a NFT/SFT, users will have their data store directly under their account, inside the trie.',
   },
   {
     question: