switch to @useelven/core and update dependencies

xdevguild · Feb 19, 2023 · 68cd420 · 68cd420
1 parent 2fe546e
commit 68cd420
Show file tree

Hide file tree

Showing 47 changed files with 989 additions and 4,048 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -2,12 +2,8 @@
   "extends": [
     "next",
     "prettier",
-    "plugin:valtio/recommended",
     "plugin:@typescript-eslint/recommended"
   ],
-  "rules": {
-    "valtio/state-snapshot-rule": "off"
-  },
   "plugins": ["@typescript-eslint"],
   "parser": "@typescript-eslint/parser"
 }
diff --git a/components/containers/ClaimModal.tsx b/components/containers/ClaimModal.tsx
@@ -12,13 +12,17 @@ import {
   ContractFunction,
   BigUIntValue,
   BytesValue,
+  ContractCallPayloadBuilder,
 } from '@multiversx/sdk-core';
 import { FC, useCallback } from 'react';
-import { useScQuery, SCQueryType } from '../../hooks/core/useScQuery';
-import { useScTransaction } from '../../hooks/core/useScTransaction';
+import {
+  useScQuery,
+  SCQueryType,
+  useConfig,
+  useTransaction,
+} from '@useelven/core';
 import { ActionButton } from '../tools/ActionButton';
 import { denominate } from '../../utils/denominate';
-import { networkConfig } from '../../config/network';
 import { shortenHash } from '../../utils/shortenHash';
 
 interface ClaimModalProps {
@@ -38,6 +42,7 @@ export const ClaimModal: FC<ClaimModalProps> = ({
   open,
   onClose,
 }) => {
+  const { explorerAddress } = useConfig();
   const { data: queryResult } = useScQuery<number>({
     type: SCQueryType.NUMBER,
     payload: {
@@ -48,7 +53,7 @@ export const ClaimModal: FC<ClaimModalProps> = ({
     autoInit: Boolean(open && tokenId),
   });
 
-  const { pending, triggerTx, transaction } = useScTransaction();
+  const { pending, triggerTx, transaction } = useTransaction();
 
   const handleClaimTx = useCallback(() => {
     if (
@@ -57,16 +62,20 @@ export const ClaimModal: FC<ClaimModalProps> = ({
       !queryResult
     )
       return;
-    triggerTx({
-      smartContractAddress:
-        process.env.NEXT_PUBLIC_FAUCET_SMART_CONTRACT_ADDRESS,
-      func: new ContractFunction('claim'),
-      gasLimit: 3000000,
-      args: [
+    // Prepare data payload for smart contract using MultiversX JS SDK core tools
+    const data = new ContractCallPayloadBuilder()
+      .setFunction(new ContractFunction('claim'))
+      .setArgs([
         BytesValue.fromUTF8(tokenId.trim()),
         new BigUIntValue(queryResult),
-      ],
+      ])
+      .build();
+
+    triggerTx({
+      address: process.env.NEXT_PUBLIC_FAUCET_SMART_CONTRACT_ADDRESS,
+      gasLimit: 3000000,
       value: 0,
+      data,
     });
   }, [queryResult, tokenId, triggerTx]);
 
@@ -89,7 +98,7 @@ export const ClaimModal: FC<ClaimModalProps> = ({
             <Text textAlign="center">
               Claim{' '}
               <strong>
-                {tokenDecimals
+                {tokenDecimals && queryResult
                   ? denominate(queryResult.toString(), tokenDecimals)
                   : '-'}
               </strong>{' '}
@@ -110,10 +119,9 @@ export const ClaimModal: FC<ClaimModalProps> = ({
                   as="a"
                   target="_blank"
                   rel="noopener noreferrer nofollow"
-                  href={`${
-                    networkConfig[process.env.NEXT_PUBLIC_MULTIVERSX_CHAIN]
-                      .explorerAddress
-                  }/transactions/${transaction?.getHash().toString()}`}
+                  href={`${explorerAddress}/transactions/${transaction
+                    ?.getHash()
+                    .toString()}`}
                 >
                   {shortenHash(transaction?.getHash().toString())}
                 </Text>

diff --git a/components/containers/Deposit.tsx b/components/containers/Deposit.tsx
@@ -1,12 +1,12 @@
-import { Box, Spinner, Input, Stack, Text } from '@chakra-ui/react';
+import { Box, Spinner, Input, Stack, Text, Heading } from '@chakra-ui/react';
 import { useCallback, useState } from 'react';
 import {
   ContractFunction,
   BigUIntValue,
   BytesValue,
+  ContractCallPayloadBuilder,
 } from '@multiversx/sdk-core';
-import { useScTransaction } from '../../hooks/core/useScTransaction';
-import { networkConfig } from '../../config/network';
+import { useConfig, useTransaction } from '@useelven/core';
 import { ActionButton } from '../tools/ActionButton';
 import { shortenHash } from '../../utils/shortenHash';
 
@@ -20,10 +20,11 @@ const InputWrapper = ({ ...props }) => {
 };
 
 export const Deposit = () => {
+  const { explorerAddress } = useConfig();
   const [tokenId, setTokenId] = useState('');
   const [amount, setAmount] = useState('');
   const [maxAmountPerDay, setMaxAmountPerDay] = useState('');
-  const { pending, triggerTx, transaction } = useScTransaction();
+  const { pending, triggerTx, transaction } = useTransaction();
 
   const handleDepositTx = useCallback(() => {
     if (
@@ -33,18 +34,22 @@ export const Deposit = () => {
       !maxAmountPerDay
     )
       return;
-    triggerTx({
-      smartContractAddress:
-        process.env.NEXT_PUBLIC_FAUCET_SMART_CONTRACT_ADDRESS,
-      func: new ContractFunction('ESDTTransfer'),
-      gasLimit: 3000000,
-      args: [
+    // Prepare data payload for smart contract using MultiversX JS SDK core tools
+    const data = new ContractCallPayloadBuilder()
+      .setFunction(new ContractFunction('ESDTTransfer'))
+      .setArgs([
         BytesValue.fromUTF8(tokenId),
         new BigUIntValue(amount),
         BytesValue.fromUTF8('setLimit'),
         new BigUIntValue(maxAmountPerDay),
-      ],
+      ])
+      .build();
+
+    triggerTx({
+      address: process.env.NEXT_PUBLIC_FAUCET_SMART_CONTRACT_ADDRESS,
+      gasLimit: 3000000,
       value: 0,
+      data,
     });
     setTokenId('');
     setAmount('');
@@ -64,6 +69,9 @@ export const Deposit = () => {
   return (
     <Box>
       <Stack spacing={3}>
+        <Heading as="h5" size="md">
+          Remember to use the wallet of the manager of the token.
+        </Heading>
         <Text mb={4}>Token Id (ticker, for example: BUILDO-890d14)</Text>
         <InputWrapper
           placeholder="Token Id"
@@ -112,10 +120,9 @@ export const Deposit = () => {
               as="a"
               target="_blank"
               rel="noopener noreferrer nofollow"
-              href={`${
-                networkConfig[process.env.NEXT_PUBLIC_MULTIVERSX_CHAIN]
-                  .explorerAddress
-              }/transactions/${transaction.getHash().toString()}`}
+              href={`${explorerAddress}/transactions/${transaction
+                .getHash()
+                .toString()}`}
             >
               {shortenHash(transaction.getHash().toString())}
             </Text>

diff --git a/components/containers/SCTokensTable.tsx b/components/containers/SCTokensTable.tsx
@@ -10,8 +10,8 @@ import {
   Spinner,
 } from '@chakra-ui/react';
 import { FC } from 'react';
-import { useApiCall } from '../../hooks/tools/useApiCall';
-import { useEffectOnlyOnUpdate } from '../../hooks/tools/useEffectOnlyOnUpdate';
+import { useApiCall } from '@useelven/core';
+import { useEffectOnlyOnUpdate } from '../../hooks/useEffectOnlyOnUpdate';
 import { SCToken } from '../../types/scToken';
 import { denominate } from '../../utils/denominate';
 import { ActionButton } from '../tools/ActionButton';

diff --git a/components/tools/Authenticated.tsx b/components/tools/Authenticated.tsx
@@ -1,6 +1,6 @@
 import { FC, ReactElement, PropsWithChildren } from 'react';
 import { Spinner, Flex } from '@chakra-ui/react';
-import { useLoggingIn } from '../../hooks/auth/useLoggingIn';
+import { useLoggingIn } from '@useelven/core';
 
 interface AuthenticatedProps {
   fallback?: ReactElement;
@@ -14,9 +14,9 @@ export const Authenticated: FC<PropsWithChildren<AuthenticatedProps>> = ({
   noSpinner = false,
   spinnerCentered = false,
 }) => {
-  const { isLoggingIn, isLoggedIn } = useLoggingIn();
+  const { pending, loggedIn } = useLoggingIn();
 
-  if (isLoggingIn)
+  if (pending)
     return noSpinner ? null : (
       <Flex justify={spinnerCentered ? 'center' : 'flex-start'}>
         <Spinner
@@ -29,7 +29,7 @@ export const Authenticated: FC<PropsWithChildren<AuthenticatedProps>> = ({
       </Flex>
     );
 
-  if (!isLoggedIn) return fallback;
+  if (!loggedIn) return fallback;
 
   return <>{children}</>;
 };
diff --git a/components/tools/LedgerAccountsList.tsx b/components/tools/LedgerAccountsList.tsx
@@ -2,10 +2,9 @@ import { FC, useCallback, useState, useEffect, useRef } from 'react';
 import { Box, Text, Flex, Spinner } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 
-import { LoginMethodsEnum } from '../../types/enums';
+import { LoginMethodsEnum, useLoginInfo } from '@useelven/core';
 import { ActionButton } from './ActionButton';
 import { shortenHash } from '../../utils/shortenHash';
-import { useLoginInfo } from '../../hooks/auth/useLoginInfo';
 import { errorParse } from '../../utils/errorParse';
 
 interface LedgerAccountsListProps {

diff --git a/components/tools/LoginComponent.tsx b/components/tools/LoginComponent.tsx
@@ -2,8 +2,7 @@
 // You can always use only one of them if needed
 import { useCallback, memo, useState } from 'react';
 import { Box, Stack } from '@chakra-ui/react';
-import { useLogin } from '../../hooks/auth/useLogin';
-import { LoginMethodsEnum } from '../../types/enums';
+import { useLogin, LoginMethodsEnum } from '@useelven/core';
 import { MobileLoginQR } from './MobileLoginQR';
 import { ActionButton } from './ActionButton';
 import { LedgerAccountsList } from './LedgerAccountsList';

diff --git a/components/tools/LoginModalButton.tsx b/components/tools/LoginModalButton.tsx
@@ -10,11 +10,10 @@ import {
   Flex,
 } from '@chakra-ui/react';
 import { FC } from 'react';
+import { useLogin, useLogout } from '@useelven/core';
 import { ActionButton } from '../tools/ActionButton';
 import { LoginComponent } from '../tools/LoginComponent';
-import { useEffectOnlyOnUpdate } from '../../hooks/tools/useEffectOnlyOnUpdate';
-import { useLogin } from '../../hooks/auth/useLogin';
-import { useLogout } from '../../hooks/auth/useLogout';
+import { useEffectOnlyOnUpdate } from '../../hooks/useEffectOnlyOnUpdate';
 
 interface LoginModalButtonProps {
   onClose?: () => void;

diff --git a/components/tools/MobileLoginQR.tsx b/components/tools/MobileLoginQR.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, FunctionComponent } from 'react';
 import { Flex, Box } from '@chakra-ui/react';
-import { networkConfig, chainType } from '../../config/network';
+import { useConfig } from '@useelven/core';
 import { isMobile } from '../../utils/isMobile';
 import QRCode from 'qrcode';
 
@@ -12,6 +12,7 @@ export const MobileLoginQR: FunctionComponent<MobileLoginQRProps> = ({
   walletConnectUri,
 }) => {
   const [qrCodeSvg, setQrCodeSvg] = useState('');
+  const { walletConnectDeepLink } = useConfig();
 
   useEffect(() => {
     const generateQRCode = async () => {
@@ -58,9 +59,9 @@ export const MobileLoginQR: FunctionComponent<MobileLoginQRProps> = ({
             _hover={{ bg: 'dappTemplate.color2.darker' }}
             transition="background-color .3s"
             as="a"
-            href={`${
-              networkConfig[chainType]?.walletConnectDeepLink
-            }?wallet-connect=${encodeURIComponent(walletConnectUri)}`}
+            href={`${walletConnectDeepLink}?wallet-connect=${encodeURIComponent(
+              walletConnectUri
+            )}`}
             rel="noopener noreferrer nofollow"
             target="_blank"
           >

diff --git a/components/ui/Footer.tsx b/components/ui/Footer.tsx
@@ -4,7 +4,7 @@ import packageJson from '../../package.json';
 export const Footer = () => {
   return (
     <Box
-      height={{ base: "180px", md: '120px' }}
+      height={{ base: '180px', md: '120px' }}
       bgColor="dappTemplate.dark.darker"
       color="dappTemplate.white"
       display="flex"
@@ -30,7 +30,7 @@ export const Footer = () => {
             target="_blank"
             rel="noopener noreferrer nofollow"
           >
-            {"xDevGuild"}
+            {'xDevGuild'}
           </Text>
           {' - '}
           <Text

diff --git a/components/ui/TxWebWalletPendingModal.tsx b/components/ui/TxWebWalletPendingModal.tsx
@@ -9,10 +9,9 @@ import {
   Spinner,
   useDisclosure,
 } from '@chakra-ui/react';
-import { networkConfig } from '../../config/network';
-import { useEffectOnlyOnUpdate } from '../../hooks/tools/useEffectOnlyOnUpdate';
+import { useConfig, useTransaction } from '@useelven/core';
+import { useEffectOnlyOnUpdate } from '../../hooks/useEffectOnlyOnUpdate';
 import { shortenHash } from '../../utils/shortenHash';
-import { useScTransaction } from '../../hooks/core/useScTransaction';
 
 const CustomModalOverlay = () => {
   return <ModalOverlay bg="blackAlpha.700" backdropFilter="blur(5px)" />;
@@ -23,8 +22,9 @@ export const TxWebWalletPendingModal = ({
 }: {
   onClose: () => void;
 }) => {
+  const { explorerAddress } = useConfig();
   const { isOpen, onOpen, onClose: close } = useDisclosure({ onClose });
-  const { pending, transaction } = useScTransaction(); // Web Wallet state
+  const { pending, transaction } = useTransaction(); // Web Wallet state
 
   useEffectOnlyOnUpdate(() => {
     if (pending) {
@@ -58,10 +58,7 @@ export const TxWebWalletPendingModal = ({
                   as="a"
                   target="_blank"
                   rel="noopener noreferrer nofollow"
-                  href={`${
-                    networkConfig[process.env.NEXT_PUBLIC_MULTIVERSX_CHAIN]
-                      .explorerAddress
-                  }/transactions/${transactionHash}`}
+                  href={`${explorerAddress}/transactions/${transactionHash}`}
                 >
                   {shortenHash(transactionHash)}
                 </Text>

diff --git a/config/chakraTheme.ts b/config/chakraTheme.ts
@@ -15,7 +15,7 @@ export const theme = extendTheme({
       '*': {
         '&::-webkit-scrollbar': {
           width: 1.5,
-          height: 1.5
+          height: 1.5,
         },
         '&::-webkit-scrollbar-track': {
           backgroundColor: 'dappTemplate.dark.base',