diff --git a/src/app/containers/SwapHistory/index.tsx b/src/app/containers/SwapHistory/index.tsx index ab259e58a..b1bcb1fe1 100644 --- a/src/app/containers/SwapHistory/index.tsx +++ b/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 ( + + ); + }); + }, [assets, transactions]); return (
@@ -116,6 +159,7 @@ export function SwapHistory() { )} + {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) {
- {tx &&

Confirmed

} - {!tx &&

Failed

} + {!data.status && ( +

{t(translations.common.confirmed)}

+ )} + {data.status === TxStatus.FAILED && ( +

{t(translations.common.failed)}

+ )} + {data.status === TxStatus.PENDING && ( +

{t(translations.common.pending)}

+ )}
- {tx && Confirmed} - {!tx && Failed} + {!data.status && ( + Confirmed + )} + {data.status === TxStatus.FAILED && ( + Failed + )} + {data.status === TxStatus.PENDING && ( + Pending + )}
diff --git a/src/app/hooks/swap-network/useSwapNetwork_convertByPath.ts b/src/app/hooks/swap-network/useSwapNetwork_convertByPath.ts index e9d4f7bde..98c922b97 100644 --- a/src/app/hooks/swap-network/useSwapNetwork_convertByPath.ts +++ b/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, diff --git a/src/app/hooks/trading/useApproveAndTrade.ts b/src/app/hooks/trading/useApproveAndTrade.ts index 46fbef3ab..5f310d648 100644 --- a/src/app/hooks/trading/useApproveAndTrade.ts +++ b/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, }; diff --git a/src/app/hooks/trading/useMarginTrade.ts b/src/app/hooks/trading/useMarginTrade.ts index e6eb3a01a..2d6924e39 100644 --- a/src/app/hooks/trading/useMarginTrade.ts +++ b/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, diff --git a/src/app/hooks/useSendContractTx.ts b/src/app/hooks/useSendContractTx.ts index e48d17832..aa5269ca7 100644 --- a/src/app/hooks/useSendContractTx.ts +++ b/src/app/hooks/useSendContractTx.ts @@ -23,6 +23,7 @@ export interface TransactionOptions { approveTransactionHash?: Nullable; 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); diff --git a/src/app/pages/MarginTradePage/components/OpenPositionsTable/PendingPositionRow.tsx b/src/app/pages/MarginTradePage/components/OpenPositionsTable/PendingPositionRow.tsx new file mode 100644 index 000000000..fcd150a7c --- /dev/null +++ b/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 ( + <> + + + + + +
+ {weiToNumberFormat(customData?.amount, 4)}{' '} + +
+ + +
+
+ {item.status === TxStatus.FAILED && ( +

{t(translations.common.failed)}

+ )} + {item.status === TxStatus.PENDING && ( +

{t(translations.common.pending)}

+ )} + +
+
+ {item.status === TxStatus.FAILED && ( + Failed + )} + {item.status === TxStatus.PENDING && ( + Pending + )} +
+
+ + + + ); +} diff --git a/src/app/pages/MarginTradePage/components/OpenPositionsTable/index.tsx b/src/app/pages/MarginTradePage/components/OpenPositionsTable/index.tsx index cc886aba0..766980a27 100644 --- a/src/app/pages/MarginTradePage/components/OpenPositionsTable/index.tsx +++ b/src/app/pages/MarginTradePage/components/OpenPositionsTable/index.tsx @@ -3,10 +3,13 @@ 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; } @@ -14,6 +17,7 @@ interface Props { 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 => ( + + ))} + + ) + ); + }, [transactions]); + return ( <> @@ -73,6 +96,7 @@ export function OpenPositionsTable(props: Props) { )} + {onGoingTransactions} {loading && ( diff --git a/src/app/pages/MarginTradePage/components/TradeDialog/index.tsx b/src/app/pages/MarginTradePage/components/TradeDialog/index.tsx index 8fc88623e..f2260ed28 100644 --- a/src/app/pages/MarginTradePage/components/TradeDialog/index.tsx +++ b/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 diff --git a/src/store/global/transactions-store/types.ts b/src/store/global/transactions-store/types.ts index 00a7efaaa..967088009 100644 --- a/src/store/global/transactions-store/types.ts +++ b/src/store/global/transactions-store/types.ts @@ -55,6 +55,7 @@ export interface Transaction { value: string; asset: Nullable; assetAmount: Nullable; + customData?: { [key: string]: any }; } export interface RequestDialogState {
{t(translations.openPositionTable.noData)}