Merge https://github.com/reef-chain/react-lib into snap-management

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reef-chain/react-lib",
-  "version": "2.3.2",
+  "version": "2.5.0",
   "description": "Reef React Library",
   "author": "Reef chain",
   "license": "MIT",
@@ -31,14 +31,14 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@polkadot/extension-dapp": "^0.40.4",
     "@polkadot/react-identicon": "^0.86.4",
-    "@reef-chain/evm-provider": "^2.0.1",
+    "@reef-chain/evm-provider": "^2.0.3",
     "@reef-chain/ui-kit": "^2.0.0",
-    "@reef-chain/util-lib": "^2.1.13",
+    "@reef-chain/util-lib": "^2.4.2",
     "@reef-defi/extension-base": "^1.0.14",
     "@reef-defi/extension-dapp": "^1.0.14",
     "@reef-defi/extension-inject": "^1.0.14",
     "@types/react-router-dom": "^5.3.0",
-    "axios": "^0.21.4",
+    "axios": "^1.6.5",
     "bignumber.js": "^9.0.2",
     "bootstrap": "^5.1.1",
     "eslint-config-prettier": "^9.1.0",
@@ -54,7 +54,7 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2",
     "ethers": "^5.7.0",
-    "@reef-chain/util-lib": "2.1.11"
+    "@reef-chain/util-lib": "2.3.4"
   },
   "peerDependencies": {
     "react": "^17.0.2"

src/api/tokens.ts

@@ -1,10 +1,12 @@
 import axios, { AxiosResponse } from 'axios';
 import { BigNumber } from 'ethers';
-import type {Network} from "@reef-chain/util-lib/dist/network";
+import type {network} from "@reef-chain/util-lib";
 import {
   ReefSigner, reefTokenWithAmount, Token,
 } from '../state';
 
+type Network = network.Network;
+
 interface AccountTokensRes {
   tokens: AccountTokensResBalance[];
 }

src/components/Transfer/Send.tsx

@@ -25,6 +25,7 @@ import {
   errorHandler,
   fromReefEVMAddressWithNotification,
   nativeTransfer,
+  REEF_ADDRESS,
   shortAddress,
   // showBalance,
 } from "../../utils";
@@ -309,6 +310,22 @@ export const Send = ({
 
   const [isPopupOpen, setPopupOpen] = useState(false);
 
+  useEffect(()=>{  
+      if(to!=="" && token.address!==REEF_ADDRESS)
+      provider?.api.query.evmAccounts.evmAddresses(to).then(addr=>{
+        const address = addr.toString();
+        if(!address.length){
+          Uik.prompt({
+            type: "danger",
+            title: "Recipient has not claimed EVM Address",
+            message: `Can't send tokens if EVM address does not exist`,
+            actions: <Uik.Button text="Close" danger />,
+          });
+          setTo(""); 
+        }
+      }).catch(error=>console.log(`[SEND COMPONENT] ${error.message}`))
+  },[to])
+
   return (
     <div className="send">
       <div className="send__address">

src/hooks/poolHooks.ts

@@ -158,7 +158,7 @@ export const usePoolTransactionCountSubscription = (
   const [data, setData] = useState<PoolTransactionCountQuery|undefined>();
   const [loading, setLoading] = useState<boolean>(true);
   const queryObj = getPoolTransactionCountQry(address, type);
-  const TRIGGER = useObservableState(network.getLatestBlockContractEvents$([address]));
+  const TRIGGER = useObservableState(network.getLatestBlockContractEvents$(address?[address]:[]));
   useEffect(() => {
     const handleResponse = async (): Promise<void> => {
       const response = await graphqlRequest(httpClient, queryObj);
@@ -185,7 +185,7 @@ export const usePoolTransactionSubscription = (
   const [data, setData] = useState<PoolTransactionQuery|undefined>();
   const [loading, setLoading] = useState<boolean>(true);
   const queryObj = getPoolTransactionQry(address, type, limit, pageIndex);
-  const TRIGGER = useObservableState(network.getLatestBlockContractEvents$([address]));
+  const TRIGGER = useObservableState(network.getLatestBlockContractEvents$(address?[address]:[]));
   useEffect(() => {
     const fetchResponse = async (): Promise<void> => {
       const response = await graphqlRequest(httpClient, queryObj);

src/hooks/useAddLiquidity.tsx

@@ -4,7 +4,8 @@ import Uik from '@reef-chain/ui-kit';
 import React, { Dispatch, useEffect } from 'react';
 import { BigNumber, Contract } from 'ethers';
 import { AxiosInstance } from 'axios';
-import type {DexProtocolv2 as Network} from "@reef-chain/util-lib/dist/network";
+import {network} from "@reef-chain/util-lib";
+import { toBN } from '@reef-chain/evm-provider/utils';
 import { ERC20 } from '../assets/abi/ERC20';
 import { getReefswapRouter } from '../rpc';
 import {
@@ -43,6 +44,7 @@ import { useKeepTokenUpdated } from './useKeepTokenUpdated';
 import { useLoadPool } from './useLoadPool';
 import { useUpdateLiquidityAmount } from './useUpdateAmount';
 
+type Network = network.DexProtocolv2;
 interface UseAddLiquidityState {
   address1: string;
   address2: string;
@@ -242,16 +244,16 @@ export const onAddLiquidity = ({
     const approveExtrinsic1 = signer.signer.provider.api.tx.evm.call(
       approveTransaction1.to,
       approveTransaction1.data,
-      BigNumber.from(approveTransaction1.value || 0),
-      approveResources1.gas,
-      approveResources1.storage.lt(0) ? BigNumber.from(0) : approveResources1.storage,
+      toBN(approveTransaction1.value || 0),
+      toBN(approveResources1.gas),
+      approveResources1.storage.lt(0) ? toBN(0) : toBN(approveResources1.storage),
     );
     const approveExtrinsic2 = signer.signer.provider.api.tx.evm.call(
       approveTransaction2.to,
       approveTransaction2.data,
-      BigNumber.from(approveTransaction2.value || 0),
-      approveResources2.gas,
-      approveResources2.storage.lt(0) ? BigNumber.from(0) : approveResources2.storage,
+      toBN(approveTransaction2.value || 0),
+      toBN(approveResources2.gas),
+      approveResources2.storage.lt(0) ? toBN(0) : toBN(approveResources2.storage),
     );
 
     const disableStakeBtn = (): void => {
@@ -264,9 +266,9 @@ export const onAddLiquidity = ({
       const provideExtrinsic = signer.signer.provider.api.tx.evm.call(
         provideTransaction.to,
         provideTransaction.data,
-        BigNumber.from(provideTransaction.value || 0),
-        BigNumber.from(9636498), // Value was used from estimateResources, which can only be ran if tokens are approved
-        BigNumber.from(68206), // Value was used from estimateResources, which can only be ran if tokens are approved
+        toBN(provideTransaction.value || 0),
+        toBN(9636498), // Value was used from estimateResources, which can only be ran if tokens are approved
+        toBN(68206), // Value was used from estimateResources, which can only be ran if tokens are approved
       );
 
       // Batching extrinsics
@@ -370,9 +372,9 @@ export const onAddLiquidity = ({
       const provideExtrinsic = signer.signer.provider.api.tx.evm.call(
         provideTransaction.to,
         provideTransaction.data,
-        BigNumber.from(provideTransaction.value || 0),
-        provideResources.gas,
-        provideResources.storage.lt(0) ? BigNumber.from(0) : provideResources.storage,
+        toBN(provideTransaction.value || 0),
+        toBN(provideResources.gas),
+        provideResources.storage.lt(0) ? toBN(0) : toBN(provideResources.storage),
       );
 
       const signAndSendProvide = new Promise<void>((resolve, reject) => {

src/hooks/useAllNfts.ts

@@ -4,7 +4,7 @@ import { useObservableState } from './useObservableState';
 
 type UseAllNfts = [NFT[], boolean];
 export const useAllNfts = (): UseAllNfts => {
-  const nfts = useObservableState<NFT[]>(reefState.selectedNFTs$);
+  const nfts = useObservableState<NFT[]|null|undefined>(reefState.selectedNFTs$);
   const loading = nfts === undefined;
 
   return [nfts || [], loading];

src/hooks/useAllPools.ts

@@ -1,29 +1,30 @@
 import { AxiosInstance } from 'axios';
 import { useState } from 'react';
 import { ALL_POOLS, PoolQueryObject } from '../graphql/pools';
-import { POLL_INTERVAL } from '../utils';
-import useInterval from './userInterval';
 import { PoolWithReserves } from '../state';
 import { graphqlRequest } from '../graphql/utils';
 import { getIconUrl } from '../components/common/Icons';
+import { useAsyncEffect } from './useAsyncEffect';
 
 export const getAllPoolsQuery = (): PoolQueryObject => ({
   query: ALL_POOLS,
   variables: {},
 });
 export const useAllPools = (httpClient: AxiosInstance): PoolWithReserves[] => {
   const [allPools, setAllPools] = useState([]);
+  const [poolsCount,setPoolsCount] = useState(0);
   const getAllPoolsQry = getAllPoolsQuery();
 
-  useInterval(async () => {
-    const response = await graphqlRequest(httpClient, getAllPoolsQry);
+  useAsyncEffect(async()=>{
+       const response = await graphqlRequest(httpClient, getAllPoolsQry);
     const pools = response.data.data?.allPools.map((pool) => ({
       ...pool,
       iconUrl1: pool.iconUrl1 === '' ? getIconUrl(pool.token1) : pool.iconUrl1,
       iconUrl2: pool.iconUrl2 === '' ? getIconUrl(pool.token2) : pool.iconUrl2,
     }));
+    if(allPools.length!==pools.length)setPoolsCount(pools.length);
     setAllPools(pools);
-  }, POLL_INTERVAL);
+  },[poolsCount])
 
   return allPools;
 };

src/hooks/useInitReefState.ts

@@ -5,14 +5,15 @@ import { useEffect, useState } from 'react';
 import { Provider } from '@reef-chain/evm-provider';
 import type { Signer as InjectedSigner } from '@polkadot/api/types';
 import { map } from 'rxjs';
-import type {Network} from "@reef-chain/util-lib/dist/network";
 import { ReefSigner } from '../state';
 import { useAsyncEffect } from './useAsyncEffect';
 import { useInjectExtension } from './useInjectExtension';
 import { useObservableState } from './useObservableState';
 import { appState } from '../appState';
 import {accountToSigner} from "../rpc";
 
+type Network = nw.Network;
+
 const SELECTED_ADDRESS_IDENT = 'selected_address_reef';
 
 const getNetworkFallback = (): Network => {
@@ -75,7 +76,8 @@ interface State{
 
 export interface InitReefStateOptions{
   network?: Network;
-  ipfsHashResolverFn?: reefState.IpfsHashResolverFn;
+  ipfsHashResolverFn?: reefState.IpfsUrlResolverFn;
+  reefscanEventsConfig?: reefState.ReefscanEventsConnConfig;
 }
 
 export const useInitReefState = (
@@ -84,7 +86,7 @@ export const useInitReefState = (
   options:InitReefStateOptions,
 ): State => {
   const {
-    network, ipfsHashResolverFn,
+    network, ipfsHashResolverFn, reefscanEventsConfig,
   } = options;
   const [accounts, extension, loadingExtension, errExtension] = useInjectExtension(applicationDisplayName);
   const [isSignersLoading, setIsSignersLoading] = useState<boolean>(true);
@@ -107,11 +109,11 @@ export const useInitReefState = (
     setInitNetwork(net);
     // eslint-disable-next-line @typescript-eslint/no-shadow
     const jsonAccounts = { accounts, injectedSigner: extension?.signer };
-
     reefState.initReefState({
       network: net,
       jsonAccounts,
       ipfsHashResolverFn,
+      reefscanEventsConfig,
     });
   }, [accounts, extension]);
 

src/hooks/useLoadSignerTokens.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { BigNumber } from 'ethers';
-import type {Network} from "@reef-chain/util-lib/dist/network";
+import {network} from "@reef-chain/util-lib";
 import {
   DataProgress,
   DataWithProgress,
@@ -12,6 +12,8 @@ import {
 } from '../state';
 import { loadSignerTokens } from '../api/tokens';
 
+type Network = network.Network;
+
 export const useLoadSignerTokens = (
   refreshToggle: boolean,
   network: Network,

src/hooks/usePoolData.ts

@@ -207,8 +207,9 @@ export const usePoolData = ({
       setData(response.data.data);
       setLoading(false);
     };
-    handleResp();
-  }, []);
+    setLoading(true);
+    handleResp().then();
+  }, [address, timeData]);
 
   const processed = useMemo((): PoolDataTime => {
     if (!data) {
@@ -362,7 +363,7 @@ export const usePoolData = ({
       firstTokenVolume,
       secondTokenVolume,
     };
-  }, [data, price1, price2, decimals1, decimals2]);
+  }, [data, price1, price2, decimals1, decimals2,timeData]);
 
   return [processed, loading];
 };

src/hooks/usePoolLists.ts

@@ -136,7 +136,7 @@ export const usePoolsList = ({
       setLoadingPoolsList(false);
     };
     handleResp();
-  }, [limit, offset]);
+  }, [limit, offset,search,signerAddress]);
 
   const userPoolCountQry = getUserPoolCountQry(queryType, search, signerAddress);
   useEffect(() => {

src/hooks/usePoolStats.ts

@@ -1,5 +1,6 @@
 import { BigNumber } from 'bignumber.js';
 import { useEffect, useMemo, useState } from 'react';
+import { network } from '@reef-chain/util-lib';
 import { AxiosInstance } from 'axios';
 import {
   Pool24HVolume,
@@ -13,10 +14,11 @@ import {
   POOL_TOKENS_DATA_GQL,
 } from '../graphql/pools';
 import { getTokenPrice, TokenPrices } from '../state';
-import { normalize, POLL_INTERVAL } from '../utils';
-import useInterval from './userInterval';
+import { normalize } from '../utils';
 import { graphqlRequest } from '../graphql/utils';
 import { getIconUrl } from '../components/common/Icons';
+import { useAsyncEffect } from './useAsyncEffect';
+import { useObservableState } from './useObservableState';
 
 const getPoolTotalValueLockedQry = (toTime: string): PoolQueryObject => ({
   query: POOLS_TOTAL_VALUE_LOCKED,
@@ -169,7 +171,7 @@ export const usePoolInfo = (address: string, signerAddress: string, tokenPrices:
       setTokensLoading(false);
     };
     handleRes();
-  }, []);
+  }, [address]);
 
   // const { data: poolInfoData, loading: poolInfoLoading, refetch: refetchPoolInfo } = useQuery<PoolInfoQuery, PoolInfoVar>(POOL_INFO_GQL, {
   //   client: dexClient,
@@ -179,12 +181,15 @@ export const usePoolInfo = (address: string, signerAddress: string, tokenPrices:
   // });
 
   const queryObj = getPoolInfoQry(address, signerAddress, fromTime, toTime);
-  useInterval(async () => {
+
+  const TRIGGER = useObservableState(network.getLatestBlockContractEvents$([address]))
+
+  useAsyncEffect(async()=>{
     setPoolInfoLoading(true);
     const response = await graphqlRequest(httpClient, queryObj);
     setPoolInfoData(response.data.data);
     setPoolInfoLoading(false);
-  }, POLL_INTERVAL);
+  },[TRIGGER])
 
   const info = useMemo<PoolStats|undefined>(() => {
     if (!poolInfoData || !tokensData) {