feat: updated versions

package.json

@@ -9,7 +9,7 @@
     "@polkadot/extension-dapp": "^0.40.3",
     "@popperjs/core": "^2.11.5",
     "@reef-chain/evm-provider": "^2.0.1",
-    "@reef-chain/react-lib": "^2.3.0",
+    "@reef-chain/react-lib": "file:.yalc/@reef-chain/react-lib",
     "@reef-chain/ui-kit": "^1.1.6",
     "@reef-chain/util-lib": "^2.1.10",
     "@reef-defi/extension-dapp": "^1.0.14",
@@ -18,8 +18,8 @@
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
-    "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "axios": "^0.21.4",
     "bignumber.js": "^9.0.2",
     "boostrap": "^2.0.0",
@@ -30,8 +30,8 @@
     "graphql": "^16.2.0",
     "lightweight-charts": "^4.0.1",
     "process": "^0.11.10",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-localization": "^1.0.0",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^5.0.1",
@@ -73,7 +73,7 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@types/d3-dsv": "^3.0.0",
-    "@types/react-router-dom": "^5.1.8",
+    "@types/react-router-dom": "^5.3.0",
     "@types/react-transition-group": "^4.4.3",
     "@typescript-eslint/eslint-plugin": "^4.28.0",
     "@typescript-eslint/parser": "^4.28.0",
@@ -102,8 +102,8 @@
     "ethers": "5.7.0",
     "rxjs": "7.5.5",
     "react-localization": "1.0.0",
-    "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@types/bn.js": "5.1.5",
     "@polkadot/api-derive": "10.11.1"
   }

src/common/OverlaySwap.tsx

@@ -2,6 +2,7 @@ import {
   Components, hooks, Pool, PoolWithReserves, store, Token,
 } from '@reef-chain/react-lib';
 import React, {
+  ReactElement,
   useContext, useEffect, useReducer, useState,
 } from 'react';
 import { BigNumber } from 'ethers';
@@ -56,7 +57,7 @@ const OverlaySwap = ({
   isOpen,
   onPoolsLoaded,
   onClose,
-}: OverlaySwap): JSX.Element => {
+}: OverlaySwap): ReactElement<any, any> => {
   const [address1, setAddress1] = useState(tokenAddress);
   const [address2, setAddress2] = useState('0x');
   const [pool, setPool] = useState<Pool | undefined>(undefined);
@@ -164,12 +165,12 @@ const OverlaySwap = ({
   };
 
   return (
+    <>
     <OverlayAction
       isOpen={isOpen}
       title="Swap"
       onClose={onClose}
-      className="overlay-swap"
-    >
+      className="overlay-swap"/>
       <div className="uik-pool-actions pool-actions">
         {
           finalized
@@ -205,7 +206,7 @@ const OverlaySwap = ({
             : <Finalizing />
         }
       </div>
-    </OverlayAction>
+    </>
   );
 };
 

src/pages/bonds/BondsComponent.tsx

@@ -441,6 +441,7 @@ export const BondsComponent = ({
 
   const fullCard = (
     <ComponentCenter>
+      <>
       <div className="bond-card">
         <div className="bond-card__wrapper">
           <img className="bond-card__token-image" src="/img/reef.png" alt="Reef" />
@@ -636,6 +637,7 @@ export const BondsComponent = ({
         contract={utils.toAddressShortDisplay(bond.bondContractAddress)}
         duration={`Until ${bondTimes?.ending.endDate}`}
       />
+      </>
     </ComponentCenter>
   );
 

src/pages/pools/Pool/CreatePool.tsx

@@ -81,14 +81,15 @@ const CreatePool = ({
   };
 
   return (
+    <>
     <OverlayAction
       isOpen={isOpen}
       title={localizedStrings.create_pool}
       onClose={onClose}
       onClosed={onClosed}
       onOpened={onOpened}
-      className="overlay-swap create-pool"
-    >
+      className="overlay-swap create-pool" 
+    />
       <div className="uik-pool-actions pool-actions">
         {
           // eslint-disable-next-line
@@ -114,7 +115,7 @@ const CreatePool = ({
         }
 
       </div>
-    </OverlayAction>
+      </>
   );
 };