Merge pull request #928 from Magickbase/fix/page-display-account-is-u…

…ndefined

components/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-class ErrorBoundary extends React.Component<{}, { hasError: boolean; message: string }> {
+class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { hasError: boolean; message: string }> {
   constructor(props) {
     super(props)
     this.state = {

components/FilterMenu/AgeFilterMenu.tsx

@@ -211,6 +211,7 @@ const AgeFilterMenu: React.FC<{ filterKeys: Array<string> }> = ({ filterKeys })
           type={alert.type}
         />
         <Popper
+          nonce={undefined}
           {...bindPopper(popupState)}
           onResize={undefined}
           onResizeCapture={undefined}

components/MultiTokenInventoryList/index.tsx

@@ -123,13 +123,7 @@ const MultiTokenInventoryList: React.FC<InventoryListProps> = ({ inventory, view
   return (
     <>
       <div className={styles.container}>
-        {inventory.entries.map((item, idx) => {
-          const {
-            owner: {
-              account: { bit_alias, eth_address },
-            },
-          } = item
-
+        {inventory.entries?.map((item, idx) => {
           return (
             <div key={item.token_id + idx} className={styles.card}>
               <NextLink href={`/multi-token-item/${item.contract_address_hash}/${item.token_id}`}>
@@ -158,7 +152,7 @@ const MultiTokenInventoryList: React.FC<InventoryListProps> = ({ inventory, view
               {token_id ? (
                 <div className={styles.info}>
                   <span>{t('owner')}</span>
-                  <Address address={eth_address} domain={bit_alias} />
+                  <Address address={item.owner?.account?.eth_address} domain={item.owner?.account?.bit_alias} />
                 </div>
               ) : (
                 <div className={styles.info}>

components/NFTActivityList/index.tsx

@@ -116,8 +116,8 @@ const ActivityList: React.FC<
         </thead>
         <tbody>
           {transfers?.metadata.total_count ? (
-            transfers.entries.map(item => {
-              const method = item.transaction.method_name || item.transaction.method_id
+            transfers.entries?.map(item => {
+              const method = item.transaction?.method_name || item.transaction?.method_id
               const fromBitAlias = item.from_account?.bit_alias
               const toBitAlias = item.to_account?.bit_alias
 
@@ -158,10 +158,10 @@ const ActivityList: React.FC<
                     </time>
                   </td>
                   <td>
-                    <Address address={item.from_address} type={item.from_account.type} domain={fromBitAlias} />
+                    <Address address={item.from_address} type={item.from_account?.type} domain={fromBitAlias} />
                   </td>
                   <td>
-                    <Address address={item.to_address} type={item.to_account.type} domain={toBitAlias} />
+                    <Address address={item.to_address} type={item.to_account?.type} domain={toBitAlias} />
                   </td>
                   {viewer ? (
                     <td>

components/PageTitle/index.tsx

@@ -1,5 +1,9 @@
+import { PropsWithChildren } from 'react'
 import styles from './styles.module.scss'
+interface Props {
+  children: React.ReactNode
+}
 
-const PageTitle: React.FC = ({ children }) => <h5 className={styles.container}>{children}</h5>
+const PageTitle: React.FC<PropsWithChildren<Props>> = ({ children }) => <h5 className={styles.container}>{children}</h5>
 
 export default PageTitle

package.json

@@ -56,7 +56,7 @@
     "@types/node": "18.11.19",
     "@types/phoenix": "1.5.4",
     "@types/qrcode": "1.5.0",
-    "@types/react": "17.0.53",
+    "@types/react": "18.0.4",
     "@types/react-dom": "18.0.11",
     "@types/testing-library__jest-dom": "5.14.5",
     "@types/testing-library__react": "10.2.0",
@@ -81,5 +81,8 @@
   },
   "lint-staged": {
     "**/*": "npm run format"
+  },
+  "resolutions": {
+    "react-i18next": ">=11.16.4"
   }
 }

pages/nft-collections/index.tsx

@@ -130,7 +130,7 @@ const NftCollectionList = () => {
 
     const orderedSorter = handleSorterArrayInOrder(clickedSorter ? sorterArrayFromPath : DEFAULT_SORTERS, clickedSorter)
     for (const item of orderedSorter) {
-      searchParams.append(item.type, item.order)
+      searchParams.append(item?.type, item?.order)
     }
 
     return `${asPath.split('?')[0] ?? ''}?${searchParams}`