limit orders

package.json

@@ -41,7 +41,7 @@
 		"redux-thunk": "~2.3.0",
 		"styled-components": "5.0.1",
 		"styled-system": "5.1.2",
-		"synthetix-data": "^2.1.21",
+		"synthetix-data": "2.1.22",
 		"synthetix-js": "2.26.2",
 		"typescript": "3.7.2",
 		"use-immer": "0.4.0"

src/components/Input/NumericInputWithCurrency.tsx

@@ -41,7 +41,7 @@ const TradeInput: FC<NumericInputWithCurrencyProps> = ({
 
 	return (
 		<>
-			{label != null && <Label>{label}</Label>}
+			{label != null && <Label className="label">{label}</Label>}
 			<Container className={className}>
 				<CurrencyContainer className="currency-container">
 					<StyledCurrencyName currencyKey={currencyKey} showIcon={showIcon} />

src/components/NetworkInfo/NetworkInfo.js → src/components/NetworkInfo/NetworkInfo.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Tooltip from '@material-ui/core/Tooltip';
+import sumBy from 'lodash/sumBy';
 
-import { formatCurrency } from 'utils/formatters';
+import { formatCurrencyWithSign } from 'utils/formatters';
 import { getTransactionPrice } from 'utils/networkUtils';
 
 import { FlexDivRow } from 'shared/commonStyles';
@@ -15,41 +15,68 @@ import { DataSmall } from 'components/Typography';
 
 import { ReactComponent as QuestionMark } from 'assets/images/question-mark.svg';
 import { formatPercentage } from 'utils/formatters';
+import { USD_SIGN } from 'constants/currency';
+
+type NetworkInfoProps = {
+	gasPrice: number;
+	gasLimit: number;
+	ethRate: number | null;
+	usdRate: number;
+	amount: number;
+	exchangeFeeRate: number;
+	additionalFees?: Array<{ label: string; fee: number }>;
+	className?: string;
+	totalPrice?: number;
+};
 
-export const TransactionInfo = ({
+export const NetworkInfo: FC<NetworkInfoProps> = ({
 	gasPrice,
 	gasLimit,
 	ethRate = 0,
 	usdRate = 0,
 	amount = 0,
 	exchangeFeeRate = 0,
+	additionalFees = [],
+	className,
+	totalPrice,
 }) => {
 	const { t } = useTranslation();
 
-	const usdValue = amount * usdRate;
+	const usdValue = totalPrice || amount * usdRate;
 	const exchangeFee = ((amount * exchangeFeeRate) / 100) * usdRate;
 	const networkFee = getTransactionPrice(gasPrice, gasLimit, ethRate);
 
+	const additionalFeesTotal = additionalFees.length ? sumBy(additionalFees, 'fee') : 0;
+	const totalFees = exchangeFee + networkFee + additionalFeesTotal;
+
 	const getTooltipBody = () => (
 		<TooltipContent>
 			<TooltipContentRow>
 				<TooltipLabel>{`${t(
 					'trade.trade-card.network-info-tooltip.exchange-fee'
 				)} (${formatPercentage(exchangeFeeRate / 100)})`}</TooltipLabel>
-				<TooltipLabel>${formatCurrency(exchangeFee)}</TooltipLabel>
+				<TooltipLabel>{formatCurrencyWithSign(USD_SIGN, exchangeFee)}</TooltipLabel>
 			</TooltipContentRow>
 			<TooltipContentRow>
 				<TooltipLabel>{t('trade.trade-card.network-info-tooltip.network-fee')}</TooltipLabel>
-				<TooltipLabel>${formatCurrency(networkFee)}</TooltipLabel>
+				<TooltipLabel>{formatCurrencyWithSign(USD_SIGN, networkFee)}</TooltipLabel>
 			</TooltipContentRow>
+			{additionalFees.length
+				? additionalFees.map((additionalFee) => (
+						<TooltipContentRow key={additionalFee.label}>
+							<TooltipLabel>{additionalFee.label}</TooltipLabel>
+							<TooltipLabel>{formatCurrencyWithSign(USD_SIGN, additionalFee.fee)}</TooltipLabel>
+						</TooltipContentRow>
+				  ))
+				: undefined}
 		</TooltipContent>
 	);
 
 	return (
-		<Container>
+		<Container className={className}>
 			<NetworkDataRow>
 				<NetworkData>{t('trade.trade-card.network-info.usd-value')}</NetworkData>
-				<NetworkData>${formatCurrency(usdValue) || 0}</NetworkData>
+				<NetworkData>{formatCurrencyWithSign(USD_SIGN, usdValue) || 0}</NetworkData>
 			</NetworkDataRow>
 			<NetworkDataRow>
 				<NetworkDataLabelFlex>
@@ -60,23 +87,19 @@ export const TransactionInfo = ({
 						</QuestionMarkIcon>
 					</Tooltip>
 				</NetworkDataLabelFlex>
-				<NetworkData>${formatCurrency(exchangeFee + networkFee)}</NetworkData>
+				<NetworkData>{formatCurrencyWithSign(USD_SIGN, totalFees)}</NetworkData>
 			</NetworkDataRow>
 			<NetworkDataRow>
-				<NetworkData>{t('common.gas-price-gwei')}</NetworkData>
-				<NetworkData>
+				<NetworkData className="gas-menu-label">{t('common.gas-price-gwei')}</NetworkData>
+				<NetworkData className="gas-menu-dropdown-container">
 					<SelectGasMenu gasPrice={gasPrice} />
 				</NetworkData>
 			</NetworkDataRow>
 		</Container>
 	);
 };
 
-TransactionInfo.propTypes = {
-	gasPrice: PropTypes.number,
-	gasLimit: PropTypes.number,
-	ethRate: PropTypes.number,
-};
+const Container = styled.div``;
 
 const TooltipContent = styled.div`
 	width: 200px;
@@ -113,10 +136,6 @@ const QuestionMarkStyled = styled(QuestionMark)`
 	height: 8px;
 `;
 
-const Container = styled.div`
-	margin: 18px 0;
-`;
-
 const NetworkData = styled(DataSmall)`
 	color: ${(props) => props.theme.colors.fontTertiary};
 `;
@@ -129,7 +148,7 @@ const NetworkDataLabelFlex = styled(NetworkData)`
 const NetworkDataRow = styled(FlexDivRow)`
 	display: flex;
 	align-items: center;
-	margin-bottom: 8px;
+	margin-bottom: 4px;
 `;
 
-export default TransactionInfo;
+export default NetworkInfo;

src/constants/delegateActions.ts

@@ -0,0 +1,3 @@
+export const DELEGATE_ACTIONS = {
+	EXCHANGE_FOR_ADDRESS: 'ExchangeForAddress',
+};

src/constants/events.ts

@@ -27,3 +27,9 @@ export const BINARY_OPTIONS_EVENTS = {
 	OPTIONS_CLAIMED: 'OptionsClaimed',
 	OPTIONS_EXERCISED: 'OptionsExercised',
 };
+
+export const LIMIT_ORDERS_EVENTS = {
+	ORDER: 'Order',
+	EXECUTE: 'Order',
+	CANCEL: 'Cancel',
+};

src/constants/placeholder.ts

@@ -1 +1,2 @@
 export const EMPTY_VALUE = '-';
+export const ESTIMATE_VALUE = '≈';

src/constants/queryKeys.ts

@@ -2,6 +2,9 @@ import { CurrencyKey } from './currency';
 import { Period } from './period';
 
 export const QUERY_KEYS = {
+	Trades: {
+		LimitOrders: (walletAddress: string) => ['trades', 'limitOrders', walletAddress],
+	},
 	Synths: {
 		HistoricalRates: (currencyKey: CurrencyKey, period: Period) => [
 			'synths',

src/constants/transaction.ts

@@ -1,10 +1,49 @@
+import { CurrencyKey } from './currency';
+
 export const TRANSACTION_STATUS = {
 	WAITING: 'waiting',
 	PENDING: 'pending',
 	CONFIRMED: 'confirmed',
 	FAILED: 'failed',
 	CANCELLED: 'cancelled',
+	CANCELLING: 'cancelling',
+};
+
+export type OrderType = 'limit' | 'market';
+
+export type Transaction = {
+	id?: number;
+	timestamp: number;
+	base: CurrencyKey;
+	quote: CurrencyKey;
+	fromAmount: number;
+	toAmount: number;
+	orderType: 'limit' | 'market';
+	price: number;
+	status: string;
+	priceUSD: number;
+	totalUSD: number;
+	orderId: number;
+	hash?: string;
 };
 
+export type Transactions = Transaction[];
+
+export type LimitOrder = {
+	account: string;
+	deposit: number;
+	timestamp: number;
+	hash: string;
+	sourceAmount: number;
+	destinationCurrencyKey: CurrencyKey;
+	executionFee: number;
+	id: number;
+	minDestinationAmount: number;
+	sourceCurrencyKey: CurrencyKey;
+	status: string;
+};
+
+export type LimitOrders = LimitOrder[];
+
 export const GAS_LIMIT_BUFFER = 5000;
 export const DEFAULT_GAS_LIMIT = 500000;

src/ducks/transaction.js

@@ -9,6 +9,7 @@ const SET_GAS_LIMIT = 'TRANSACTION/SET_GAS_LIMIT';
 const SET_NETWORK_GAS_INFO = 'TRANSACTION/NETWORK_GAS_INFO';
 const CREATE_TRANSACTION = 'TRANSACTION/CREATE';
 const UPDATE_TRANSACTION = 'TRANSACTION/UPDATE';
+const REMOVE_TRANSACTION = 'TRANSACTION/REMOVE';
 const ADD_PENDING_TRANSACTION = 'TRANSACTION/ADD_PENDING_TRANSACTION';
 const REMOVE_PENDING_TRANSACTION = 'TRANSACTION/REMOVE_PENDING_TRANSACTION';
 
@@ -53,10 +54,10 @@ const reducer = (state = defaultState, action = {}) => {
 			};
 		}
 		case UPDATE_TRANSACTION: {
-			const { updates, id } = action.payload;
+			const { updates, id, hash } = action.payload;
 			const storeUpdates = {
 				transactions: state.transactions.map((tx) => {
-					if (tx.id === id) {
+					if (tx.id === id || tx.hash === hash) {
 						return {
 							...tx,
 							...updates,
@@ -89,6 +90,14 @@ const reducer = (state = defaultState, action = {}) => {
 			};
 		}
 
+		case REMOVE_TRANSACTION: {
+			const hash = action.payload;
+			return {
+				...state,
+				transactions: state.transactions.filter((txHash) => txHash !== hash),
+			};
+		}
+
 		default:
 			return state;
 	}
@@ -129,10 +138,17 @@ export const removePendingTransaction = (hash) => {
 	};
 };
 
-export const updateTransaction = (updates, id) => {
+export const updateTransaction = (updates, id, hash = null) => {
 	return {
 		type: UPDATE_TRANSACTION,
-		payload: { updates, id },
+		payload: { updates, id, hash },
+	};
+};
+
+export const removeTransaction = (hash) => {
+	return {
+		type: REMOVE_TRANSACTION,
+		payload: hash,
 	};
 };
 

src/ducks/wallet/walletDetails.ts

@@ -4,7 +4,7 @@ import { LOCAL_STORAGE_KEYS } from 'constants/storage';
 
 import { setSigner } from 'utils/snxJSConnector';
 import { getAddress } from 'utils/formatters';
-import { defaultNetwork } from 'utils/networkUtils';
+import { defaultNetwork, NetworkId } from 'utils/networkUtils';
 import { RootState } from 'ducks/types';
 
 export type WalletDetailsSliceState = {
@@ -15,7 +15,7 @@ export type WalletDetailsSliceState = {
 	walletPaginatorIndex: number;
 	availableWallets: string[];
 	derivationPath: string | null;
-	networkId: number;
+	networkId: NetworkId;
 	networkName: string;
 };
 
@@ -57,7 +57,7 @@ export const walletDetailsSlice = createSlice({
 		updateNetworkSettings: (
 			state,
 			action: PayloadAction<{
-				networkId: number;
+				networkId: NetworkId;
 				networkName: string;
 			}>
 		) => {
@@ -71,7 +71,7 @@ export const walletDetailsSlice = createSlice({
 			action: PayloadAction<{
 				signerOptions: {
 					type: string;
-					networkId: number;
+					networkId: NetworkId;
 					derivationPath: string;
 					networkName: string;
 				};

src/pages/Synths/Overview/SynthInfo/SynthInfo.tsx

@@ -22,9 +22,10 @@ import { subtitleLargeCSS } from 'components/Typography/General';
 import { getNetworkId } from 'ducks/wallet/walletDetails';
 import { getEtherscanTokenLink } from 'utils/explorers';
 import { getDecimalPlaces } from 'utils/formatters';
+import { NetworkId } from 'utils/networkUtils';
 
 type StateProps = {
-	networkId: number;
+	networkId: NetworkId;
 };
 
 type Props = {
@@ -49,6 +50,7 @@ export const SynthInfo: FC<SynthInfoProps> = ({ synth, networkId }) => {
 
 	// @ts-ignore
 	const { snxJS } = snxJSConnector;
+	// @ts-ignore
 	const contractAddress = snxJS[synth.name].contract.address;
 
 	const synthSign = USD_SIGN;

src/pages/Trade/components/ChartCard/Chart.tsx

@@ -235,7 +235,7 @@ const Chart: FC<ChartProps> = ({
 
 const ChartContainer = styled.div`
 	width: 100%;
-	height: 250px;
+	height: 244px;
 	display: flex;
 	justify-content: center;
 	align-items: center;