Feat/959 pending transaction in tables.

src/app/containers/SwapHistory/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 // import ReactPaginate from 'react-paginate';
 import iconSuccess from 'assets/images/icon-success.svg';
 import iconRejected from 'assets/images/icon-rejected.svg';
-import { Sovryn } from 'utils/sovryn';
+import iconPending from 'assets/images/icon-pending.svg';
 import { bignumber } from 'mathjs';
 import { weiToFixed } from 'utils/blockchain/math-helpers';
 import { numberToUSD } from 'utils/display-text/format';
@@ -23,14 +23,19 @@ import { translations } from '../../../locales/i18n';
 import { LoadableValue } from '../../components/LoadableValue';
 import { useCachedAssetPrice } from '../../hooks/trading/useCachedAssetPrice';
 import { AssetRenderer } from '../../components/AssetRenderer';
+import { useSelector } from 'react-redux';
+import { selectTransactionArray } from 'store/global/transactions-store/selectors';
+import { TxStatus, TxType } from 'store/global/transactions-store/types';
 
 export function SwapHistory() {
+  const transactions = useSelector(selectTransactionArray);
   const account = useAccount();
   const url = backendUrl[currentChainId];
   const [history, setHistory] = useState([]) as any;
   const [currentHistory, setCurrentHistory] = useState([]) as any;
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
+  const assets = AssetsDictionary.list();
 
   let cancelTokenSource;
   const getData = () => {
@@ -77,7 +82,45 @@ export function SwapHistory() {
     setCurrentHistory(history.slice(offset, offset + pageLimit));
   };
 
-  const assets = AssetsDictionary.list();
+  const onGoingTransactions = useMemo(() => {
+    return transactions
+      .filter(
+        tx =>
+          tx.type === TxType.CONVERT_BY_PATH &&
+          [TxStatus.FAILED, TxStatus.PENDING].includes(tx.status),
+      )
+      .map(item => {
+        const { customData } = item;
+        let assetFrom = [] as any;
+        let assetTo = [] as any;
+
+        assetFrom = assets.find(
+          currency => currency.asset === customData?.sourceToken,
+        );
+        assetTo = assets.find(
+          currency => currency.asset === customData?.targetToken,
+        );
+
+        const data = {
+          status: item.status,
+          timestamp: customData?.date,
+          transaction_hash: item.transactionHash,
+          returnVal: {
+            _fromAmount: customData?.amount,
+            _toAmount: customData?.minReturn || null,
+          },
+        };
+
+        return (
+          <AssetRow
+            key={item.transactionHash}
+            data={data}
+            itemFrom={assetFrom}
+            itemTo={assetTo}
+          />
+        );
+      });
+  }, [assets, transactions]);
 
   return (
     <section>
@@ -116,6 +159,7 @@ export function SwapHistory() {
                 </td>
               </tr>
             )}
+            {onGoingTransactions}
             {currentHistory.map(item => {
               let assetFrom = [] as any;
               let assetTo = [] as any;
@@ -168,15 +212,10 @@ interface AssetProps {
 }
 
 function AssetRow({ data, itemFrom, itemTo }: AssetProps) {
-  const txStatus = async (hash: string) => {
-    return await Sovryn.getWeb3().eth.getTransactionReceipt(hash);
-  };
-  const tx = txStatus(data.transaction_hash).then(res => {
-    return res;
-  });
-
+  const { t } = useTranslation();
   const dollars = useCachedAssetPrice(itemTo.asset, Asset.USDT);
   const dollarValue = useMemo(() => {
+    if (data.returnVal._toAmount === null) return '';
     return bignumber(data.returnVal._toAmount)
       .mul(dollars.value)
       .div(10 ** itemTo.decimals)
@@ -219,16 +258,30 @@ function AssetRow({ data, itemFrom, itemTo }: AssetProps) {
       <td>
         <div className="d-flex align-items-center justify-content-between col-lg-10 col-md-12 p-0">
           <div>
-            {tx && <p className="m-0">Confirmed</p>}
-            {!tx && <p className="m-0">Failed</p>}
+            {!data.status && (
+              <p className="m-0">{t(translations.common.confirmed)}</p>
+            )}
+            {data.status === TxStatus.FAILED && (
+              <p className="m-0">{t(translations.common.failed)}</p>
+            )}
+            {data.status === TxStatus.PENDING && (
+              <p className="m-0">{t(translations.common.pending)}</p>
+            )}
             <LinkToExplorer
               txHash={data.transaction_hash}
               className="text-gold font-weight-normal text-nowrap"
             />
           </div>
           <div>
-            {tx && <img src={iconSuccess} title="Confirmed" alt="Confirmed" />}
-            {!tx && <img src={iconRejected} title="Failed" alt="Failed" />}
+            {!data.status && (
+              <img src={iconSuccess} title="Confirmed" alt="Confirmed" />
+            )}
+            {data.status === TxStatus.FAILED && (
+              <img src={iconRejected} title="Failed" alt="Failed" />
+            )}
+            {data.status === TxStatus.PENDING && (
+              <img src={iconPending} title="Pending" alt="Pending" />
+            )}
           </div>
         </div>
       </td>

src/app/hooks/swap-network/useSwapNetwork_convertByPath.ts

@@ -49,10 +49,16 @@ export function useSwapNetwork_convertByPath(
           nonce,
         };
       }
-
       return send(args, config, {
         type: TxType.CONVERT_BY_PATH,
         approveTransactionHash: approveTx,
+        customData: {
+          sourceToken,
+          targetToken,
+          amount,
+          date: new Date().getTime() / 1000,
+          minReturn,
+        },
       });
     },
     ...rest,

src/app/hooks/trading/useApproveAndTrade.ts

@@ -42,7 +42,7 @@ export function useApproveAndTrade(
   );
 
   return {
-    trade: async () => {
+    trade: async (customData?: object) => {
       let tx: CheckAndApproveResult = {};
       if (collateral !== Asset.RBTC) {
         tx = await contractWriter.checkAndApprove(
@@ -54,7 +54,7 @@ export function useApproveAndTrade(
           return;
         }
       }
-      await trade(tx?.nonce, tx?.approveTx);
+      await trade(tx?.nonce, tx?.approveTx, customData);
     },
     ...rest,
   };

src/app/hooks/trading/useMarginTrade.ts

@@ -25,7 +25,7 @@ export function useMarginTrade(
   );
 
   return {
-    trade: (nonce?: number, approveTx?: string | null) =>
+    trade: (nonce?: number, approveTx?: string | null, customData?: object) =>
       send(
         [
           loanId,
@@ -44,6 +44,7 @@ export function useMarginTrade(
         {
           approveTransactionHash: approveTx,
           type: TxType.TRADE,
+          customData,
         },
       ),
     ...txState,

src/app/hooks/useSendContractTx.ts

@@ -23,6 +23,7 @@ export interface TransactionOptions {
   approveTransactionHash?: Nullable<string>;
   asset?: Asset;
   assetAmount?: string;
+  customData?: { [key: string]: any };
 }
 
 export interface SendTxResponse {
@@ -89,6 +90,7 @@ export function useSendContractTx(
             value: (config?.value as string) || '0',
             asset: options?.asset || null,
             assetAmount: options?.assetAmount || null,
+            customData: options?.customData || undefined,
           };
           dispatch(actions.addTransaction(txData));
           setTx(txData);

src/app/pages/MarginTradePage/components/OpenPositionsTable/PendingPositionRow.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import iconRejected from 'assets/images/icon-rejected.svg';
+import iconPending from 'assets/images/icon-pending.svg';
+
+import { weiToNumberFormat } from '../../../../../utils/display-text/format';
+import { AssetsDictionary } from '../../../../../utils/dictionaries/assets-dictionary';
+import { AssetRenderer } from '../../../../components/AssetRenderer';
+import { Transaction, TxStatus } from 'store/global/transactions-store/types';
+import { LinkToExplorer } from 'app/components/LinkToExplorer';
+import { PositionBlock } from './PositionBlock';
+import { useTranslation } from 'react-i18next';
+import { translations } from '../../../../../locales/i18n';
+
+interface Props {
+  item: Transaction;
+}
+
+export function PendingPositionRow({ item }: Props) {
+  const { customData } = item;
+  const { t } = useTranslation();
+
+  const collateralAssetDetails = AssetsDictionary.get(
+    customData?.collateralToken,
+  );
+
+  return (
+    <>
+      <tr>
+        <td>
+          <PositionBlock
+            position={customData?.position}
+            name={customData?.pair.name}
+          />
+        </td>
+        <td colSpan={6}>
+          <div className="tw-truncate">
+            {weiToNumberFormat(customData?.amount, 4)}{' '}
+            <AssetRenderer asset={collateralAssetDetails.asset} />
+          </div>
+        </td>
+        <td>
+          <div className="d-flex align-items-center justify-content-between col-lg-10 col-md-12 p-0">
+            <div>
+              {item.status === TxStatus.FAILED && (
+                <p className="m-0">{t(translations.common.failed)}</p>
+              )}
+              {item.status === TxStatus.PENDING && (
+                <p className="m-0">{t(translations.common.pending)}</p>
+              )}
+              <LinkToExplorer
+                txHash={item.transactionHash}
+                className="text-gold font-weight-normal text-nowrap"
+              />
+            </div>
+            <div>
+              {item.status === TxStatus.FAILED && (
+                <img src={iconRejected} title="Failed" alt="Failed" />
+              )}
+              {item.status === TxStatus.PENDING && (
+                <img src={iconPending} title="Pending" alt="Pending" />
+              )}
+            </div>
+          </div>
+        </td>
+      </tr>
+    </>
+  );
+}

src/app/pages/MarginTradePage/components/OpenPositionsTable/index.tsx

@@ -3,17 +3,21 @@ import { useGetActiveLoans } from 'app/hooks/trading/useGetActiveLoans';
 import { useAccount } from 'app/hooks/useAccount';
 import { SkeletonRow } from 'app/components/Skeleton/SkeletonRow';
 import { OpenPositionRow } from './OpenPositionRow';
+import { PendingPositionRow } from './PendingPositionRow';
 import { useTranslation } from 'react-i18next';
 import { translations } from '../../../../../locales/i18n';
 import { Pagination } from '../../../../components/Pagination';
-
+import { useSelector } from 'react-redux';
+import { selectTransactionArray } from 'store/global/transactions-store/selectors';
+import { TxStatus, TxType } from 'store/global/transactions-store/types';
 interface Props {
   perPage: number;
 }
 
 export function OpenPositionsTable(props: Props) {
   const { t } = useTranslation();
   const [page, setPage] = useState(1);
+  const transactions = useSelector(selectTransactionArray);
 
   const { value, loading } = useGetActiveLoans(
     useAccount(),
@@ -30,12 +34,31 @@ export function OpenPositionsTable(props: Props) {
     [props.perPage, page, value],
   );
 
-  const isEmpty = !loading && !items.length;
+  const isEmpty = !loading && !items.length && !transactions.length;
 
   const onPageChanged = data => {
     setPage(data.currentPage);
   };
 
+  const onGoingTransactions = useMemo(() => {
+    return (
+      transactions.length > 0 && (
+        <>
+          {transactions
+            .filter(
+              tx =>
+                tx.type === TxType.TRADE &&
+                [TxStatus.FAILED, TxStatus.PENDING].includes(tx.status),
+            )
+            .reverse()
+            .map(item => (
+              <PendingPositionRow key={item.transactionHash} item={item} />
+            ))}
+        </>
+      )
+    );
+  }, [transactions]);
+
   return (
     <>
       <table className="tw-table">
@@ -73,6 +96,7 @@ export function OpenPositionsTable(props: Props) {
               <td colSpan={99}>{t(translations.openPositionTable.noData)}</td>
             </tr>
           )}
+          {onGoingTransactions}
 
           {loading && (
             <tr>

src/app/pages/MarginTradePage/components/TradeDialog/index.tsx

@@ -58,7 +58,15 @@ export function TradeDialog() {
     amount,
   );
 
-  const submit = () => trade();
+  const submit = () =>
+    trade({
+      pair,
+      position,
+      collateralToken,
+      collateral,
+      leverage,
+      amount,
+    });
 
   const txArgs = [
     '0x0000000000000000000000000000000000000000000000000000000000000000', //0 if new loan

src/store/global/transactions-store/types.ts

@@ -55,6 +55,7 @@ export interface Transaction {
   value: string;
   asset: Nullable<Asset>;
   assetAmount: Nullable<string>;
+  customData?: { [key: string]: any };
 }
 
 export interface RequestDialogState {