update util-lib

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reef-app",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "private": true,
   "type": "commonjs",
   "dependencies": {
@@ -9,9 +9,9 @@
     "@polkadot/extension-dapp": "^0.40.3",
     "@popperjs/core": "^2.11.5",
     "@reef-chain/evm-provider": "^2.0.3",
-    "@reef-chain/react-lib": "^2.4.1",
+    "@reef-chain/react-lib": "^2.5.0",
     "@reef-chain/ui-kit": "^1.1.6",
-    "@reef-chain/util-lib": "^2.3.5",
+    "@reef-chain/util-lib": "^2.4.2",
     "@reef-defi/extension-dapp": "^1.0.14",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -20,7 +20,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2",
-    "axios": "^0.21.4",
+    "axios": "^1.6.7",
     "bignumber.js": "^9.0.2",
     "boostrap": "^2.0.0",
     "crypto-browserify": "^3.12.0",
@@ -106,7 +106,6 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2",
     "@types/bn.js": "5.1.5",
-    "@polkadot/api-derive": "10.11.1",
-    "@reef-chain/util-lib": "2.3.5"
+    "@polkadot/api-derive": "10.11.2"
   }
 }

src/common/OverlaySwap.tsx

@@ -5,8 +5,8 @@
   useContext, useEffect, useReducer, useState,
 } from 'react';
 import { BigNumber } from 'ethers';
-import axios from 'axios';
-import { DexProtocolv2 } from '@reef-chain/util-lib/dist/network';
+import axios, { AxiosInstance } from 'axios';
+import { network as libNet } from '@reef-chain/util-lib';
 import PoolContext from '../context/PoolContext';
 import TokenContext from '../context/TokenContext';
 import TokenPricesContext from '../context/TokenPricesContext';
@@ -63,9 +63,10 @@
   const { tokens } = useContext(TokenContext);
   const tokenPrices = useContext(TokenPricesContext);
   const pools = useContext(PoolContext);
+  const httpClient: AxiosInstance = axios;
 
   const { selectedSigner: signer, network: nw } = useContext(ReefSigners);
-  const network:DexProtocolv2 |undefined = useDexConfig(nw);
+  const network:libNet.DexProtocolv2 |undefined = useDexConfig(nw);
 
   // Trade
   const [tradeState, tradeDispatch] = useReducer(
@@ -124,7 +125,7 @@
       onPoolsLoaded(false);
       console.error('Pool not found');
     }
   }, [tokens]);
 
   hooks.useSwapState({
     address1,
@@ -134,7 +135,7 @@
     tokenPrices,
     tokens,
     account: signer || undefined,
-    httpClient: axios,
+    httpClient,
     waitForPool: true,
     pool,
   });

src/context/ReefSigners.ts

@@ -1,14 +1,25 @@
 import { createContext } from 'react';
 import { ReefSigner } from '@reef-chain/react-lib';
-import { Network, reefState } from '@reef-chain/util-lib';
+import { network as nw } from '@reef-chain/util-lib';
 import { Provider } from '@reef-chain/evm-provider';
+import {Observable} from "rxjs";
 
-export type ReefState = reefState;
+interface setAddr {
+  (val: string):void;
+}
+interface setNet {
+  (val: nw.Network):void;
+}
+export interface ReefState {
+  setSelectedAddress: setAddr;
+  setSelectedNetwork: setNet;
+  selectedTokenPrices$: Observable<never>
+}
 
 interface ReefSignersContext {
   accounts: ReefSigner[]|undefined;
   selectedSigner:ReefSigner|undefined;
-  network: Network;
+  network: nw.Network;
   provider: Provider|undefined;
   reefState: ReefState;
 }

src/environment.ts

@@ -1,5 +1,4 @@
 import { network as nw } from '@reef-chain/util-lib';
-import type { Network, DexProtocolv2 } from '@reef-chain/util-lib/dist/network';
 import { useEffect, useState } from 'react';
 
 export const isReefswapUI = window.location.host.indexOf('reefswap') > -1;
@@ -14,29 +13,29 @@ export const testnetOverride = {
   ...nw.AVAILABLE_NETWORKS.testnet,
   rpcUrl: 'wss://rpc-testnet.reefscan.com/ws',
   verificationApiUrl: 'https://api-testnet.reefscan.info',
-} as Network;
+} as nw.Network;
 
 // export const mainnetOverride = { ...availableNetworks.testnet, rpcUrl: 'wss://rpc.reefscan.com/ws', verificationApiUrl: 'https://api-testnet.reefscan.info' } as Network;
 export const appAvailableNetworks = [nw.AVAILABLE_NETWORKS.mainnet, testnetOverride];
-export const getAppNetworkOverride = (network: Network): Network => appAvailableNetworks.find((net) => net.name === network.name) || network;
+export const getAppNetworkOverride = (network: nw.Network): nw.Network => appAvailableNetworks.find((net) => net.name === network.name) || network;
 // export const appAvailableNetworks = [availableNetworks.mainnet, availableNetworks.testnet];
 export const binanceConnectApiUrl = 'https://onramp.reefscan.info';
 
-export const useDexConfig = (network: Network): DexProtocolv2 | undefined => {
-  const [dexConfig, setDexConfig] = useState<DexProtocolv2 | undefined>(undefined);
+export const useDexConfig = (network: nw.Network): nw.DexProtocolv2 | undefined => {
+  const [dexConfig, setDexConfig] = useState<nw.DexProtocolv2 | undefined>(undefined);
 
   useEffect(() => {
     const fetchDexConfig = async ():Promise<void> => {
       try {
-        const config = await nw.getReefswapNetworkConfig(network);
+        const config = nw.getReefswapNetworkConfig(network);
         setDexConfig(config);
       } catch (error) {
         console.error('Error fetching dex config:', error);
         setDexConfig(null);
       }
     };
 
-    fetchDexConfig();
+    fetchDexConfig().then();
   }, [network]);
 
   return dexConfig;

src/pages/creator/CreatorComponent.tsx

@@ -9,7 +9,6 @@ import { faArrowUpRightFromSquare, faCoins } from '@fortawesome/free-solid-svg-i
 import { Contract, ContractFactory, utils } from 'ethers';
 import { useHistory } from 'react-router-dom';
 import Uik from '@reef-chain/ui-kit';
-import { Network } from '@reef-chain/util-lib/dist/network';
 import { verifyContract } from '../../utils/contract';
 import { DeployContractData, deployTokens } from './tokensDeployData';
 import './creator.css';
@@ -20,7 +19,7 @@ import { localizedStrings as strings } from '../../l10n/l10n';
 
 interface CreatorComponent {
   signer: ReefSigner | undefined;
-  network: Network;
+  network: nw.Network;
   onTxUpdate?: reefUtils.TxStatusHandler;
 }
 
@@ -52,7 +51,7 @@ interface CreateToken {
   initialSupply: string;
   icon?:string;
   tokenOptions: ITokenOptions;
-  network: Network;
+  network: nw.Network;
   onTxUpdate?: reefUtils.TxStatusHandler;
   setVerifiedContract: (contract: Contract) => void;
   setDeployedContract: (contract: Contract) => void;
@@ -61,7 +60,7 @@ interface CreateToken {
 async function verify(
   contract: Contract,
   args: string[],
-  network: Network,
+  network: nw.Network,
   contractData: DeployContractData,
   icon:string,
 ): Promise<boolean> {

src/pages/dashboard/Activity/Activity.tsx

@@ -1,32 +1,91 @@
-import { createEmptyTokenWithAmount, hooks, TokenTransfer } from '@reef-chain/react-lib';
+import { createEmptyTokenWithAmount, hooks } from '@reef-chain/react-lib';
 import Uik from '@reef-chain/ui-kit';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import './activity.css';
 import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import { tokenUtil } from '@reef-chain/util-lib';
 import ActivityItem, { Skeleton } from './ActivityItem';
 import { localizedStrings as strings } from '../../../l10n/l10n';
 import ActivityDetails from './ActivityDetails';
 import ReefSigners from '../../../context/ReefSigners';
+import SwapActivityItem from './SwapActivityItem';
+import SwapActivityDetails from './SwapActivityDetails';
 
 const noActivityTokenDisplay = createEmptyTokenWithAmount();
 noActivityTokenDisplay.address = '0x';
 noActivityTokenDisplay.iconUrl = '';
 noActivityTokenDisplay.name = 'No account history yet.';
 
+interface CummulativeTransfers extends tokenUtil.TokenTransfer{
+  isSwap: boolean;
+  token1?:tokenUtil.TokenTransfer;
+  token2?:tokenUtil.TokenTransfer;
+  fees?:tokenUtil.TokenTransfer;
+}
+
+export interface SwapPair {
+  pair:string;
+  token1: tokenUtil.TokenTransfer;
+  token2: tokenUtil.TokenTransfer;
+  fees: tokenUtil.TokenTransfer;
+}
+
+const parseTokenTransfers = (transfers:tokenUtil.TokenTransfer[]):CummulativeTransfers[] => {
+  const updatedTxArray: CummulativeTransfers[] = [];
+  const swapsIdx = [-1];
+
+  transfers.forEach((tx, idx) => {
+    if (tx.reefswapAction === 'Swap' && !swapsIdx.includes(idx)) {
+      swapsIdx.push(idx);
+      const swapPair = transfers.find((t) => t.extrinsic.id === tx.extrinsic.id && t.reefswapAction === 'Swap' && t.token !== tx.token);
+      const swapPairIdx = transfers.indexOf(swapPair!);
+      swapsIdx.push(swapPairIdx);
+      const feesIdx = swapPairIdx + 1;
+      if (feesIdx <= transfers.length) {
+        swapsIdx.push(feesIdx);
+        updatedTxArray.push({
+          isSwap: true,
+          token1: tx,
+          token2: swapPair!,
+          fees: transfers[feesIdx],
+        } as CummulativeTransfers);
+      }
+    } else if (tx.reefswapAction === 'Swap' || swapsIdx.includes(idx)) {
+      // @ts-ignore
+    } else {
+      updatedTxArray.push({
+        ...tx,
+        isSwap: false,
+      });
+    }
+  });
+  return updatedTxArray;
+};
+
 export const Activity = (): JSX.Element => {
-  const [transfers, loading] :[TokenTransfer[], boolean] = hooks.useTxHistory();
+  const [unparsedTransfers, loading] :[tokenUtil.TokenTransfer[], boolean] = hooks.useTxHistory();
+  const [transfers, setTransfers] = useState([]);
+
+  useEffect(() => {
+    setTransfers(parseTokenTransfers(unparsedTransfers));
+  }, [unparsedTransfers]);
+
   const {
     selectedSigner, network,
   } = useContext(ReefSigners);
 
   const [isActivityModalOpen, setActivityModalOpen] = useState(false);
-  const [selectedTransaction, setSelectedTransaction] = useState<TokenTransfer|null>(null);
+  const [isSwapActivityModalOpen, setSwapActivityModalOpen] = useState(false);
+
+  const [selectedTransaction, setSelectedTransaction] = useState<tokenUtil.TokenTransfer|null>(null);
 
   // set current transaction as parameter and call setSelectedTransaction state function.
-  const setCurrentTransaction = (transaction : TokenTransfer): void => {
+  const setCurrentTransaction = (transaction : tokenUtil.TokenTransfer): void => {
     setSelectedTransaction(transaction);
   };
 
+  const [swapPair, setSwapPair] = useState<SwapPair|undefined>(undefined);
+
   // @ts-ignore
   return (
     <div className="token-activity activity">
@@ -57,23 +116,44 @@
         {!!transfers && !!transfers.length && (
           <div>
 
-            {transfers.map((item, index) => (
+            {transfers.map((item, index) => {
+              if (item.isSwap) {
+                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                return (
+                  <div
+                    key={`item-wrapper-${item.timestamp + index.toString()}`}
+                    onClick={() => {
+                      setSwapPair({
+                        pair: `${item.token1!.token.name}-${item.token2!.token.name}`,
+                        token1: item.token1,
+                        token2: item.token2,
+                        fees: item.fees,
+                      } as SwapPair);
+                      setSwapActivityModalOpen(!isSwapActivityModalOpen);
+                    }}
+                  >
+                    <SwapActivityItem fees={item.fees!} token1={item.token1!} token2={item.token2!} />
+                  </div>
+                );
+              }
+              return (
               // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-              <div
-                key={`item-wrapper-${item.timestamp + index.toString()}`}
-                onClick={() => {
-                  setCurrentTransaction(item);
-                  setActivityModalOpen(!isActivityModalOpen);
-                }}
-              >
-                <ActivityItem
-                  key={item.timestamp + index.toString()}
-                  timestamp={item.timestamp}
-                  token={item.token}
-                  inbound={item.inbound}
-                />
-              </div>
-            ))}
+                <div
+                  key={`item-wrapper-${item.timestamp + index.toString()}`}
+                  onClick={() => {
+                    setCurrentTransaction(item);
+                    setActivityModalOpen(!isActivityModalOpen);
+                  }}
+                >
+                  <ActivityItem
+                    key={item.timestamp + index.toString()}
+                    timestamp={item.timestamp}
+                    token={item.token}
+                    inbound={item.inbound}
+                  />
+                </div>
+              );
+            })}
           </div>
         )}
         {!transfers && (
@@ -98,7 +178,9 @@
           inbound={selectedTransaction.inbound}
           token={selectedTransaction.token}
         />
-
+      )}
+      {!!transfers && !!transfers.length && isSwapActivityModalOpen && (
+        <SwapActivityDetails isOpen={isSwapActivityModalOpen} onClose={() => setSwapActivityModalOpen(false)} swapPair={swapPair!} />
       )}
     </div>
   );