Merge pull request #135 from Itheum/feature/#131-dappcore-upgrade

Feature/#131 dappcore upgrade and all the resulting ui and function issues have been fixed.
Itheum · Dec 4, 2022 · 0e47635 · 0e47635
2 parents 9ddc72d + 0073b77
commit 0e47635
Show file tree

Hide file tree

Showing 20 changed files with 31,381 additions and 41,652 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "data-dex",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "The Itheum Data DEX enables you to trade your personal data using web3 tech",
   "dependencies": {
-    "@chakra-ui/icons": "^1.1.5",
-    "@chakra-ui/react": "^1.8.3",
-    "@elrondnetwork/dapp-core": "^1.3.8",
-    "@elrondnetwork/erdjs": "10.2.6",
-    "@elrondnetwork/erdjs-network-providers": "0.1.6",
+    "@chakra-ui/icons": "2.0.12",
+    "@chakra-ui/react": "2.4.1",
+    "@elrondnetwork/dapp-core": "2.1.18",
+    "@elrondnetwork/erdjs": "11.1.2",
+    "@elrondnetwork/erdjs-network-providers": "1.1.3",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@sentry/react": "^7.4.1",
@@ -19,9 +19,9 @@
     "dotenv": "^16.0.1",
     "framer-motion": "^4.1.6",
     "moment": "^2.29.1",
-    "moralis": "^1.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "moralis-v1": "^1.12.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-dropzone": "^11.7.1",
     "react-icons": "^4.3.1",
     "react-moralis": "^1.3.1",
@@ -75,6 +75,25 @@
     ]
   },
   "devDependencies": {
-    "yarn": "^1.22.19"
+    "@types/node": "12.0.0",
+    "@types/react": "18.0.24",
+    "@types/react-dom": "18.0.8",
+    "@types/react-router-dom": "5.1.7",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-config-react": "1.1.7",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-config-standard": "17.0.0",
+    "eslint-import-resolver-alias": "1.1.2",
+    "eslint-import-resolver-typescript": "3.2.5",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-promise": "6.0.0",
+    "eslint-plugin-react": "7.30.1",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "prettier": "2.7.1",
+    "react-scripts": "5.0.1",
+    "sass": "1.55.0",
+    "typescript": "4.1.2"
   }
 }
diff --git a/src/App/AppEVM.js b/src/App/AppEVM.js
@@ -206,7 +206,7 @@ function App({ appConfig }) {
   return (
     <>
       {_user.isMoralisAuthenticated&& (
-        <Container maxW="container.xxl" h="100vh" d="flex" justifyContent="center" alignItems="center">
+        <Container maxW="container.xxl" h="100vh" display="flex" justifyContent="center" alignItems="center">
           <Flex h="100vh" w="100vw" direction={{ base: 'column', md: 'column' }}>
             <HStack h="10vh" p="5">
               <Image boxSize="50px" height="auto" src={colorMode === 'light' ? logoSmlL : logoSmlD} alt="Itheum Data DEX" />
@@ -235,7 +235,7 @@ function App({ appConfig }) {
               <Menu>
                 <MenuButton as={Button} colorScheme='teal'>
                   {screenBreakPoint === 'md' && <ShortAddress address={user.get('ethAddress')} fontSize="md" />}
-                  <IconButton aria-label='Menu' icon={<HamburgerIcon />} d={['block', 'none']} />
+                  <IconButton aria-label='Menu' icon={<HamburgerIcon />} display={['block', 'none']} />
                 </MenuButton>
                 <MenuList>
                   <MenuGroup title='My Address Quick Copy'>

diff --git a/src/App/AppElrond.js b/src/App/AppElrond.js
@@ -36,8 +36,11 @@ import logoSmlD from 'img/logo-sml-d.png';
 import logoSmlL from 'img/logo-sml-l.png';
 import ChainSupportedComponent from 'UtilComps/ChainSupportedComponent';
 
-import { logout, useGetAccountInfo, useGetPendingTransactions, useGetLoginInfo } from '@elrondnetwork/dapp-core';
+import { logout } from '@elrondnetwork/dapp-core/utils';
+import { useGetPendingTransactions } from '@elrondnetwork/dapp-core/hooks/transactions';
+import { useGetAccountInfo, useGetLoginInfo } from '@elrondnetwork/dapp-core/hooks/account';
 import { checkBalance } from 'Elrond/api';
+import { formatNumberRoundFloor } from 'libs/util';
 
 const elrondLogout = logout;
 const _chainMetaLocal = {};
@@ -217,7 +220,7 @@ function App({ appConfig }) {
   return (
     <>
       { _user.isElrondAuthenticated && (
-        <Container maxW="container.xxl" h="100vh" d="flex" justifyContent="center" alignItems="center">
+        <Container maxW="container.xxl" h="100vh" display="flex" justifyContent="center" alignItems="center">
           <Flex h="100vh" w="100vw" direction={{ base: 'column', md: 'column' }}>
             <HStack h="10vh" p="5">
               <Image boxSize="50px" height="auto" src={colorMode === 'light' ? logoSmlL : logoSmlD} alt="Itheum Data DEX" />
@@ -232,7 +235,7 @@ function App({ appConfig }) {
               <HStack>
                 <Box as="text" fontSize={['sm', 'md']} minWidth="5.5rem" align="center" p="11.3px" color="white" fontWeight="bold" borderRadius="md" bgGradient="linear(to-l, #7928CA, #FF0080)">
                   {(tokenBal === -1) ? <Spinner size="xs" /> : 
-                      (tokenBal === -2) ? <WarningTwoIcon /> : <>{CHAIN_TOKEN_SYMBOL(_chainMetaLocal.networkId)} {tokenBal}</>
+                      (tokenBal === -2) ? <WarningTwoIcon /> : <>{CHAIN_TOKEN_SYMBOL(_chainMetaLocal.networkId)} {formatNumberRoundFloor(tokenBal)}</>
                   }
                 </Box>
 
@@ -246,7 +249,7 @@ function App({ appConfig }) {
               <Menu>
                 <MenuButton as={Button} colorScheme='teal'>
                   {screenBreakPoint === 'md' && <ShortAddress address={elrondAddress} fontSize="md" />}
-                  <IconButton aria-label='Menu' icon={<HamburgerIcon />} d={['block', 'none']} />
+                  <IconButton aria-label='Menu' icon={<HamburgerIcon />} display={['block', 'none']} />
                 </MenuButton>
                 <MenuList>
                   <MenuGroup title='My Address Quick Copy'>

diff --git a/src/AppHarness/AppHarnessElrond.js b/src/AppHarness/AppHarnessElrond.js
@@ -1,4 +1,4 @@
-import { useGetAccountInfo } from '@elrondnetwork/dapp-core';
+import { useGetAccountInfo } from '@elrondnetwork/dapp-core/hooks/account';
 import AppElrond from 'App/AppElrond';
 
 function AppHarnessElrond({ launchEnvironment }) {

diff --git a/src/AuthPicker/AuthPickerElrond.js b/src/AuthPicker/AuthPickerElrond.js
@@ -2,16 +2,15 @@ import { useEffect } from 'react';
 import { Stack, Box, Text, Link, Wrap, Badge, Modal, ModalOverlay, ModalContent, 
   ModalHeader, ModalBody, ModalCloseButton, useDisclosure, WrapItem, useBreakpointValue } from '@chakra-ui/react';
 import { ExternalLinkIcon } from '@chakra-ui/icons';
-import { DappUI } from '@elrondnetwork/dapp-core';
-import { useGetAccountInfo } from '@elrondnetwork/dapp-core';
+import { ExtensionLoginButton, LedgerLoginButton, WalletConnectLoginButton, WebWalletLoginButton } from '@elrondnetwork/dapp-core/UI';
+import { useGetAccountInfo } from '@elrondnetwork/dapp-core/hooks/account';
 import { WALLETS } from 'libs/util';
 import { gtagGo, clearAppSessions, sleep } from 'libs/util';
 import { useSessionStorage } from 'libs/hooks';
 import { useNavigate } from 'react-router-dom';
 
 function AuthPickerElrond ({ launchEnvironment, resetLaunchMode }) {
   const navigate = useNavigate();
-  const { ExtensionLoginButton, WebWalletLoginButton, LedgerLoginButton, WalletConnectLoginButton } = DappUI;
   const { address: elrondAddress } = useGetAccountInfo();
   const { isOpen: isProgressModalOpen, onOpen: onProgressModalOpen, onClose: onProgressModalClose } = useDisclosure();
   const [walletUsedSession, setWalletUsedSession] = useSessionStorage('itm-wallet-used', null);

diff --git a/src/ClaimModel/ClaimModalElrond.js b/src/ClaimModel/ClaimModalElrond.js
@@ -2,8 +2,8 @@ import {
   Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton, 
   HStack, Text, Spacer, Button, Stack, useBreakpointValue } from '@chakra-ui/react';
 import React from 'react';
-import { useGetAccountInfo } from '@elrondnetwork/dapp-core';
-import { CHAIN_TOKEN_SYMBOL } from 'libs/util';
+import { useGetAccountInfo } from '@elrondnetwork/dapp-core/hooks/account';
+import { CHAIN_TOKEN_SYMBOL, formatNumberRoundFloor } from 'libs/util';
 import { useChainMeta } from 'store/ChainMetaContext';
 
 const ClaimModal = ({ isOpen, onClose, title, tag1, value1, tag2, value2, claimType, elrondClaimsContract }) => {
@@ -17,7 +17,7 @@ const ClaimModal = ({ isOpen, onClose, title, tag1, value1, tag2, value2, claimT
   const handleOnChainClaim = () => {
     if (elrondAddress) {
       onClose();
-      elrondClaimsContract.sendClaimRewardsTransaction(claimType - 1);
+      elrondClaimsContract.sendClaimRewardsTransaction(elrondAddress, claimType - 1);
     }
   };
 
@@ -37,7 +37,7 @@ const ClaimModal = ({ isOpen, onClose, title, tag1, value1, tag2, value2, claimT
                 {tag1}:
               </Text>{' '}
               <Text fontSize="md">
-                {value1} {CHAIN_TOKEN_SYMBOL(_chainMeta.networkId)}
+                {formatNumberRoundFloor(value1)} {CHAIN_TOKEN_SYMBOL(_chainMeta.networkId)}
               </Text>
             </Stack>
             <Stack>

diff --git a/src/DataPack/BuyData.js b/src/DataPack/BuyData.js
@@ -59,45 +59,56 @@ export default function({ onRfMount, onRefreshBalance }) {
     })();
   }, [dataPacks]);
 
-  useEffect(async () => {
-    if (txErrorAllowance) {
-      console.error(txErrorAllowance);
-    } else if (txHashAllowance && (txConfirmationAllowance === uxConfig.txConfirmationsNeededLrg)) {
-      console.log('AUTHORISED');
-
-      setbuyProgress(prevBuyProgress => ({ ...prevBuyProgress, s2: 1 }));
-
-      web3_ddexBuyDataPack(currBuyObject.dataPackId, currBuyObject.cost);
-    }
+  useEffect(() => {
+    const asyncFunc = async () => {
+      if (txErrorAllowance) {
+        console.error(txErrorAllowance);
+      } else if (txHashAllowance && (txConfirmationAllowance === uxConfig.txConfirmationsNeededLrg)) {
+        console.log('AUTHORISED');
+
+        setbuyProgress(prevBuyProgress => ({ ...prevBuyProgress, s2: 1 }));
+
+        web3_ddexBuyDataPack(currBuyObject.dataPackId, currBuyObject.cost);
+      }
+    };
+
+    asyncFunc();
   }, [txConfirmationAllowance, txHashAllowance, txErrorAllowance]);
 
-  useEffect(async () => {
-    if (txErrorTransfer) {
-      console.error(txErrorTransfer);
-    } else if (txHashTransfer && (txConfirmationTransfer === uxConfig.txConfirmationsNeededLrg)) {
-      console.log('TRANSFERRED');
-
-      setbuyProgress(prevBuyProgress => ({ ...prevBuyProgress, s3: 1 }));
-
-      finaliseSale();
-    }
+  useEffect(() => {
+    const asyncFunc = async () => {
+      if (txErrorTransfer) {
+        console.error(txErrorTransfer);
+      } else if (txHashTransfer && (txConfirmationTransfer === uxConfig.txConfirmationsNeededLrg)) {
+        console.log('TRANSFERRED');
+
+        setbuyProgress(prevBuyProgress => ({ ...prevBuyProgress, s3: 1 }));
+
+        finaliseSale();
+      }
+    };
 
+    asyncFunc();    
   }, [txConfirmationTransfer, txHashTransfer, txErrorTransfer]);
 
-  useEffect(async() => {
-    if (currBuyObject) {
-      onProgressModalOpen();
-
-      const isVerified = await web3_ddexVerifyData(currBuyObject.dataPackId, currBuyObject.dataHash);
-
-      if (isVerified) {
-        setbuyProgress(prevBuyProgress => ({ ...prevBuyProgress, s0: 1 }));
-
-        handleMinRequirementsCheck();
-      } else {
-        setbuyProgressErr('The data your are trying to purchase seems compromised (based on blockchain check)');
+  useEffect(() => {
+    const asyncFunc = async () => {
+      if (currBuyObject) {
+        onProgressModalOpen();
+
+        const isVerified = await web3_ddexVerifyData(currBuyObject.dataPackId, currBuyObject.dataHash);
+
+        if (isVerified) {
+          setbuyProgress(prevBuyProgress => ({ ...prevBuyProgress, s0: 1 }));
+
+          handleMinRequirementsCheck();
+        } else {
+          setbuyProgressErr('The data your are trying to purchase seems compromised (based on blockchain check)');
+        }
       }
-    }
+    };
+
+    asyncFunc();
   }, [currBuyObject]);
 
   const buyOrderSubmit = objectId => {