m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

feat(mme-17212): convert shared/constants/swaps.js -> Typescript (#17322)

Browse Source
This commit is contained in:
Danica Shen 2023-01-24 16:38:01 +00:00 committed by GitHub
parent cd484835e3
commit f5426a84d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 88 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
shared/constants/swaps.js → shared/constants/swaps.ts
View File

@ -16,10 +16,34 @@ export const CONTRACT_DATA_DISABLED_ERROR = 'contract-data-disabled';
export const OFFLINE_FOR_MAINTENANCE = 'offline-for-maintenance'; export const OFFLINE_FOR_MAINTENANCE = 'offline-for-maintenance';
export const SWAPS_FETCH_ORDER_CONFLICT = 'swaps-fetch-order-conflict'; export const SWAPS_FETCH_ORDER_CONFLICT = 'swaps-fetch-order-conflict';
// An address that the metaswap-api recognizes as the default token for the current network, in place of the token address that ERC-20 tokens have // An address that the metaswap-api recognizes as the default token for the current network,
// in place of the token address that ERC-20 tokens have
const DEFAULT_TOKEN_ADDRESS = '0x0000000000000000000000000000000000000000'; const DEFAULT_TOKEN_ADDRESS = '0x0000000000000000000000000000000000000000';
export const ETH_SWAPS_TOKEN_OBJECT = { interface SwapsTokenObject {
/**
* The symbol of token object
*/
symbol: string;
/**
* The name for the network
*/
name: string;
/**
* An address that the metaswap-api recognizes as the default token
*/
address: string;
/**
* Number of digits after decimal point
*/
decimals: number;
/**
* URL for token icon
*/
iconUrl: string;
}
export const ETH_SWAPS_TOKEN_OBJECT: SwapsTokenObject = {
symbol: CURRENCY_SYMBOLS.ETH, symbol: CURRENCY_SYMBOLS.ETH,
name: 'Ether', name: 'Ether',
address: DEFAULT_TOKEN_ADDRESS, address: DEFAULT_TOKEN_ADDRESS,
@ -27,49 +51,53 @@ export const ETH_SWAPS_TOKEN_OBJECT = {
iconUrl: ETH_TOKEN_IMAGE_URL, iconUrl: ETH_TOKEN_IMAGE_URL,
}; };
export const BNB_SWAPS_TOKEN_OBJECT = { export const BNB_SWAPS_TOKEN_OBJECT: SwapsTokenObject = {
symbol: CURRENCY_SYMBOLS.BNB, symbol: CURRENCY_SYMBOLS.BNB,
name: 'Binance Coin', name: 'Binance Coin',
address: DEFAULT_TOKEN_ADDRESS, address: DEFAULT_TOKEN_ADDRESS,
decimals: 18, decimals: 18,
iconUrl: BNB_TOKEN_IMAGE_URL, iconUrl: BNB_TOKEN_IMAGE_URL,
}; } as const;
export const MATIC_SWAPS_TOKEN_OBJECT = { export const MATIC_SWAPS_TOKEN_OBJECT: SwapsTokenObject = {
symbol: CURRENCY_SYMBOLS.MATIC, symbol: CURRENCY_SYMBOLS.MATIC,
name: 'Matic', name: 'Matic',
address: DEFAULT_TOKEN_ADDRESS, address: DEFAULT_TOKEN_ADDRESS,
decimals: 18, decimals: 18,
iconUrl: MATIC_TOKEN_IMAGE_URL, iconUrl: MATIC_TOKEN_IMAGE_URL,
}; } as const;
export const AVAX_SWAPS_TOKEN_OBJECT = { export const AVAX_SWAPS_TOKEN_OBJECT: SwapsTokenObject = {
symbol: CURRENCY_SYMBOLS.AVALANCHE, symbol: CURRENCY_SYMBOLS.AVALANCHE,
name: 'Avalanche', name: 'Avalanche',
address: DEFAULT_TOKEN_ADDRESS, address: DEFAULT_TOKEN_ADDRESS,
decimals: 18, decimals: 18,
iconUrl: AVAX_TOKEN_IMAGE_URL, iconUrl: AVAX_TOKEN_IMAGE_URL,
}; } as const;
export const TEST_ETH_SWAPS_TOKEN_OBJECT = { export const TEST_ETH_SWAPS_TOKEN_OBJECT: SwapsTokenObject = {
symbol: CURRENCY_SYMBOLS.TEST_ETH, symbol: CURRENCY_SYMBOLS.TEST_ETH,
name: 'Test Ether', name: 'Test Ether',
address: DEFAULT_TOKEN_ADDRESS, address: DEFAULT_TOKEN_ADDRESS,
decimals: 18, decimals: 18,
iconUrl: TEST_ETH_TOKEN_IMAGE_URL, iconUrl: TEST_ETH_TOKEN_IMAGE_URL,
}; } as const;
export const GOERLI_SWAPS_TOKEN_OBJECT = { export const GOERLI_SWAPS_TOKEN_OBJECT: SwapsTokenObject = {
symbol: CURRENCY_SYMBOLS.ETH, symbol: CURRENCY_SYMBOLS.ETH,
name: 'Ether', name: 'Ether',
address: DEFAULT_TOKEN_ADDRESS, address: DEFAULT_TOKEN_ADDRESS,
decimals: 18, decimals: 18,
iconUrl: TEST_ETH_TOKEN_IMAGE_URL, iconUrl: TEST_ETH_TOKEN_IMAGE_URL,
}; } as const;
export const ARBITRUM_SWAPS_TOKEN_OBJECT = { ...ETH_SWAPS_TOKEN_OBJECT }; export const ARBITRUM_SWAPS_TOKEN_OBJECT: SwapsTokenObject = {
...ETH_SWAPS_TOKEN_OBJECT,
} as const;
export const OPTIMISM_SWAPS_TOKEN_OBJECT = { ...ETH_SWAPS_TOKEN_OBJECT }; export const OPTIMISM_SWAPS_TOKEN_OBJECT: SwapsTokenObject = {
...ETH_SWAPS_TOKEN_OBJECT,
} as const;
// A gas value for ERC20 approve calls that should be sufficient for all ERC20 approve implementations // A gas value for ERC20 approve calls that should be sufficient for all ERC20 approve implementations
export const DEFAULT_ERC20_APPROVE_GAS = '0x1d4c0'; export const DEFAULT_ERC20_APPROVE_GAS = '0x1d4c0';
@ -124,17 +152,17 @@ export const ALLOWED_PROD_SWAPS_CHAIN_IDS = [
CHAIN_IDS.AVALANCHE, CHAIN_IDS.AVALANCHE,
CHAIN_IDS.OPTIMISM, CHAIN_IDS.OPTIMISM,
CHAIN_IDS.ARBITRUM, CHAIN_IDS.ARBITRUM,
]; ] as const;
export const ALLOWED_DEV_SWAPS_CHAIN_IDS = [ export const ALLOWED_DEV_SWAPS_CHAIN_IDS = [
...ALLOWED_PROD_SWAPS_CHAIN_IDS, ...ALLOWED_PROD_SWAPS_CHAIN_IDS,
CHAIN_IDS.GOERLI, CHAIN_IDS.GOERLI,
]; ] as const;
export const ALLOWED_SMART_TRANSACTIONS_CHAIN_IDS = [ export const ALLOWED_SMART_TRANSACTIONS_CHAIN_IDS = [
CHAIN_IDS.MAINNET, CHAIN_IDS.MAINNET,
CHAIN_IDS.GOERLI, CHAIN_IDS.GOERLI,
]; ] as const;
export const SWAPS_CHAINID_CONTRACT_ADDRESS_MAP = { export const SWAPS_CHAINID_CONTRACT_ADDRESS_MAP = {
[CHAIN_IDS.MAINNET]: MAINNET_CONTRACT_ADDRESS, [CHAIN_IDS.MAINNET]: MAINNET_CONTRACT_ADDRESS,
@ -145,7 +173,7 @@ export const SWAPS_CHAINID_CONTRACT_ADDRESS_MAP = {
[CHAIN_IDS.AVALANCHE]: AVALANCHE_CONTRACT_ADDRESS, [CHAIN_IDS.AVALANCHE]: AVALANCHE_CONTRACT_ADDRESS,
[CHAIN_IDS.OPTIMISM]: OPTIMISM_CONTRACT_ADDRESS, [CHAIN_IDS.OPTIMISM]: OPTIMISM_CONTRACT_ADDRESS,
[CHAIN_IDS.ARBITRUM]: ARBITRUM_CONTRACT_ADDRESS, [CHAIN_IDS.ARBITRUM]: ARBITRUM_CONTRACT_ADDRESS,
}; } as const;
export const SWAPS_WRAPPED_TOKENS_ADDRESSES = { export const SWAPS_WRAPPED_TOKENS_ADDRESSES = {
[CHAIN_IDS.MAINNET]: WETH_CONTRACT_ADDRESS, [CHAIN_IDS.MAINNET]: WETH_CONTRACT_ADDRESS,
@ -156,7 +184,7 @@ export const SWAPS_WRAPPED_TOKENS_ADDRESSES = {
[CHAIN_IDS.AVALANCHE]: WAVAX_CONTRACT_ADDRESS, [CHAIN_IDS.AVALANCHE]: WAVAX_CONTRACT_ADDRESS,
[CHAIN_IDS.OPTIMISM]: WETH_OPTIMISM_CONTRACT_ADDRESS, [CHAIN_IDS.OPTIMISM]: WETH_OPTIMISM_CONTRACT_ADDRESS,
[CHAIN_IDS.ARBITRUM]: WETH_ARBITRUM_CONTRACT_ADDRESS, [CHAIN_IDS.ARBITRUM]: WETH_ARBITRUM_CONTRACT_ADDRESS,
}; } as const;
export const ALLOWED_CONTRACT_ADDRESSES = { export const ALLOWED_CONTRACT_ADDRESSES = {
[CHAIN_IDS.MAINNET]: [ [CHAIN_IDS.MAINNET]: [
@ -191,7 +219,7 @@ export const ALLOWED_CONTRACT_ADDRESSES = {
SWAPS_CHAINID_CONTRACT_ADDRESS_MAP[CHAIN_IDS.ARBITRUM], SWAPS_CHAINID_CONTRACT_ADDRESS_MAP[CHAIN_IDS.ARBITRUM],
SWAPS_WRAPPED_TOKENS_ADDRESSES[CHAIN_IDS.ARBITRUM], SWAPS_WRAPPED_TOKENS_ADDRESSES[CHAIN_IDS.ARBITRUM],
], ],
}; } as const;
export const SWAPS_CHAINID_DEFAULT_TOKEN_MAP = { export const SWAPS_CHAINID_DEFAULT_TOKEN_MAP = {
[CHAIN_IDS.MAINNET]: ETH_SWAPS_TOKEN_OBJECT, [CHAIN_IDS.MAINNET]: ETH_SWAPS_TOKEN_OBJECT,
@ -202,7 +230,7 @@ export const SWAPS_CHAINID_DEFAULT_TOKEN_MAP = {
[CHAIN_IDS.AVALANCHE]: AVAX_SWAPS_TOKEN_OBJECT, [CHAIN_IDS.AVALANCHE]: AVAX_SWAPS_TOKEN_OBJECT,
[CHAIN_IDS.OPTIMISM]: OPTIMISM_SWAPS_TOKEN_OBJECT, [CHAIN_IDS.OPTIMISM]: OPTIMISM_SWAPS_TOKEN_OBJECT,
[CHAIN_IDS.ARBITRUM]: ARBITRUM_SWAPS_TOKEN_OBJECT, [CHAIN_IDS.ARBITRUM]: ARBITRUM_SWAPS_TOKEN_OBJECT,
}; } as const;
export const SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP = { export const SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP = {
[CHAIN_IDS.BSC]: BSC_DEFAULT_BLOCK_EXPLORER_URL, [CHAIN_IDS.BSC]: BSC_DEFAULT_BLOCK_EXPLORER_URL,
@ -212,7 +240,7 @@ export const SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP = {
[CHAIN_IDS.AVALANCHE]: AVALANCHE_DEFAULT_BLOCK_EXPLORER_URL, [CHAIN_IDS.AVALANCHE]: AVALANCHE_DEFAULT_BLOCK_EXPLORER_URL,
[CHAIN_IDS.OPTIMISM]: OPTIMISM_DEFAULT_BLOCK_EXPLORER_URL, [CHAIN_IDS.OPTIMISM]: OPTIMISM_DEFAULT_BLOCK_EXPLORER_URL,
[CHAIN_IDS.ARBITRUM]: ARBITRUM_DEFAULT_BLOCK_EXPLORER_URL, [CHAIN_IDS.ARBITRUM]: ARBITRUM_DEFAULT_BLOCK_EXPLORER_URL,
}; } as const;
export const ETHEREUM = 'ethereum'; export const ETHEREUM = 'ethereum';
export const POLYGON = 'polygon'; export const POLYGON = 'polygon';
@ -224,12 +252,12 @@ export const ARBITRUM = 'arbitrum';
export const SWAPS_CLIENT_ID = 'extension'; export const SWAPS_CLIENT_ID = 'extension';
export const TOKEN_BUCKET_PRIORITY = { export enum TokenBucketPriority {
OWNED: 'owned', owned = 'owned',
TOP: 'top', top = 'top',
}; }
export const SLIPPAGE = { export enum Slippage {
DEFAULT: 2, default = 2,
HIGH: 3, high = 3,
}; }

10
ui/ducks/swaps/swaps.js
View File

@ -77,7 +77,7 @@ import {
SWAP_FAILED_ERROR, SWAP_FAILED_ERROR,
SWAPS_FETCH_ORDER_CONFLICT, SWAPS_FETCH_ORDER_CONFLICT,
ALLOWED_SMART_TRANSACTIONS_CHAIN_IDS, ALLOWED_SMART_TRANSACTIONS_CHAIN_IDS,
SLIPPAGE, Slippage,
} from '../../../shared/constants/swaps'; } from '../../../shared/constants/swaps';
import { import {
TransactionType, TransactionType,
@ -112,7 +112,7 @@ const initialState = {
fromTokenInputValue: '', fromTokenInputValue: '',
fromTokenError: null, fromTokenError: null,
isFeatureFlagLoaded: false, isFeatureFlagLoaded: false,
maxSlippage: SLIPPAGE.DEFAULT, maxSlippage: Slippage.default,
quotesFetchStartTime: null, quotesFetchStartTime: null,
reviewSwapClickedTimestamp: null, reviewSwapClickedTimestamp: null,
topAssets: {}, topAssets: {},
@ -742,7 +742,7 @@ export const fetchQuotesAndSetQuoteState = (
token_to: toTokenSymbol, token_to: toTokenSymbol,
request_type: balanceError ? 'Quote' : 'Order', request_type: balanceError ? 'Quote' : 'Order',
slippage: maxSlippage, slippage: maxSlippage,
custom_slippage: maxSlippage !== SLIPPAGE.DEFAULT, custom_slippage: maxSlippage !== Slippage.default,
is_hardware_wallet: hardwareWalletUsed, is_hardware_wallet: hardwareWalletUsed,
hardware_wallet_type: hardwareWalletType, hardware_wallet_type: hardwareWalletType,
stx_enabled: smartTransactionsEnabled, stx_enabled: smartTransactionsEnabled,
@ -796,7 +796,7 @@ export const fetchQuotesAndSetQuoteState = (
token_to: toTokenSymbol, token_to: toTokenSymbol,
request_type: balanceError ? 'Quote' : 'Order', request_type: balanceError ? 'Quote' : 'Order',
slippage: maxSlippage, slippage: maxSlippage,
custom_slippage: maxSlippage !== SLIPPAGE.DEFAULT, custom_slippage: maxSlippage !== Slippage.default,
is_hardware_wallet: hardwareWalletUsed, is_hardware_wallet: hardwareWalletUsed,
hardware_wallet_type: hardwareWalletType, hardware_wallet_type: hardwareWalletType,
stx_enabled: smartTransactionsEnabled, stx_enabled: smartTransactionsEnabled,
@ -821,7 +821,7 @@ export const fetchQuotesAndSetQuoteState = (
), ),
request_type: balanceError ? 'Quote' : 'Order', request_type: balanceError ? 'Quote' : 'Order',
slippage: maxSlippage, slippage: maxSlippage,
custom_slippage: maxSlippage !== SLIPPAGE.DEFAULT, custom_slippage: maxSlippage !== Slippage.default,
response_time: Date.now() - fetchStartTime, response_time: Date.now() - fetchStartTime,
best_quote_source: newSelectedQuote.aggregator, best_quote_source: newSelectedQuote.aggregator,
available_quotes: Object.values(fetchedQuotes)?.length, available_quotes: Object.values(fetchedQuotes)?.length,

8
ui/hooks/useTokensToSearch.js
View File

@ -16,7 +16,7 @@ import { getConversionRate } from '../ducks/metamask/metamask';
import { getSwapsTokens } from '../ducks/swaps/swaps'; import { getSwapsTokens } from '../ducks/swaps/swaps';
import { isSwapsDefaultTokenSymbol } from '../../shared/modules/swaps.utils'; import { isSwapsDefaultTokenSymbol } from '../../shared/modules/swaps.utils';
import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils'; import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils';
import { TOKEN_BUCKET_PRIORITY } from '../../shared/constants/swaps'; import { TokenBucketPriority } from '../../shared/constants/swaps';
import { CHAIN_IDS, CURRENCY_SYMBOLS } from '../../shared/constants/network'; import { CHAIN_IDS, CURRENCY_SYMBOLS } from '../../shared/constants/network';
import { useEqualityCheck } from './useEqualityCheck'; import { useEqualityCheck } from './useEqualityCheck';
@ -96,7 +96,7 @@ export function useTokensToSearch({
usersTokens = [], usersTokens = [],
topTokens = {}, topTokens = {},
shuffledTokensList, shuffledTokensList,
tokenBucketPriority = TOKEN_BUCKET_PRIORITY.OWNED, tokenBucketPriority = TokenBucketPriority.owned,
}) { }) {
const chainId = useSelector(getCurrentChainId); const chainId = useSelector(getCurrentChainId);
const tokenConversionRates = useSelector(getTokenExchangeRates, isEqual); const tokenConversionRates = useSelector(getTokenExchangeRates, isEqual);
@ -156,7 +156,7 @@ export function useTokensToSearch({
chainId, chainId,
tokenList, tokenList,
); );
if (tokenBucketPriority === TOKEN_BUCKET_PRIORITY.OWNED) { if (tokenBucketPriority === TokenBucketPriority.owned) {
if ( if (
isSwapsDefaultTokenSymbol(renderableDataToken.symbol, chainId) || isSwapsDefaultTokenSymbol(renderableDataToken.symbol, chainId) ||
usersTokensAddressMap[token.address.toLowerCase()] usersTokensAddressMap[token.address.toLowerCase()]
@ -189,7 +189,7 @@ export function useTokensToSearch({
}, },
); );
tokensToSearchBuckets.top = tokensToSearchBuckets.top.filter(Boolean); tokensToSearchBuckets.top = tokensToSearchBuckets.top.filter(Boolean);
if (tokenBucketPriority === TOKEN_BUCKET_PRIORITY.OWNED) { if (tokenBucketPriority === TokenBucketPriority.owned) {
return [ return [
...tokensToSearchBuckets.owned, ...tokensToSearchBuckets.owned,
...tokensToSearchBuckets.top, ...tokensToSearchBuckets.top,

4
ui/pages/swaps/awaiting-swap/awaiting-swap.test.js
View File

@ -9,7 +9,7 @@ import {
fireEvent, fireEvent,
} from '../../../../test/jest'; } from '../../../../test/jest';
import { import {
SLIPPAGE, Slippage,
QUOTES_EXPIRED_ERROR, QUOTES_EXPIRED_ERROR,
SWAP_FAILED_ERROR, SWAP_FAILED_ERROR,
ERROR_FETCHING_QUOTES, ERROR_FETCHING_QUOTES,
@ -28,7 +28,7 @@ const createProps = (customProps = {}) => {
tokensReceived: 'tokens received:', tokensReceived: 'tokens received:',
submittingSwap: true, submittingSwap: true,
inputValue: 5, inputValue: 5,
maxSlippage: SLIPPAGE.DEFAULT, maxSlippage: Slippage.default,
txId: 6571648590592143, txId: 6571648590592143,
...customProps, ...customProps,
}; };

6
ui/pages/swaps/build-quote/build-quote.js
View File

@ -86,7 +86,7 @@ import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
import { import {
SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP, SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP,
SWAPS_CHAINID_DEFAULT_TOKEN_MAP, SWAPS_CHAINID_DEFAULT_TOKEN_MAP,
TOKEN_BUCKET_PRIORITY, TokenBucketPriority,
} from '../../../../shared/constants/swaps'; } from '../../../../shared/constants/swaps';
import { import {
@ -221,13 +221,13 @@ export default function BuildQuote({
usersTokens: memoizedUsersTokens, usersTokens: memoizedUsersTokens,
topTokens: topAssets, topTokens: topAssets,
shuffledTokensList, shuffledTokensList,
tokenBucketPriority: TOKEN_BUCKET_PRIORITY.OWNED, tokenBucketPriority: TokenBucketPriority.owned,
}); });
const tokensToSearchSwapTo = useTokensToSearch({ const tokensToSearchSwapTo = useTokensToSearch({
usersTokens: memoizedUsersTokens, usersTokens: memoizedUsersTokens,
topTokens: topAssets, topTokens: topAssets,
shuffledTokensList, shuffledTokensList,
tokenBucketPriority: TOKEN_BUCKET_PRIORITY.TOP, tokenBucketPriority: TokenBucketPriority.top,
}); });
const selectedToToken = const selectedToToken =
tokensToSearchSwapFrom.find(({ address }) => tokensToSearchSwapFrom.find(({ address }) =>

18
ui/pages/swaps/slippage-buttons/slippage-buttons.js
View File

@ -15,7 +15,7 @@ import {
DISPLAY, DISPLAY,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { getTranslatedStxErrorMessage } from '../swaps.util'; import { getTranslatedStxErrorMessage } from '../swaps.util';
import { SLIPPAGE } from '../../../../shared/constants/swaps'; import { Slippage } from '../../../../shared/constants/swaps';
export default function SlippageButtons({ export default function SlippageButtons({
onSelect, onSelect,
@ -31,7 +31,7 @@ export default function SlippageButtons({
const [customValue, setCustomValue] = useState(() => { const [customValue, setCustomValue] = useState(() => {
if ( if (
typeof currentSlippage === 'number' && typeof currentSlippage === 'number' &&
!Object.values(SLIPPAGE).includes(currentSlippage) !Object.values(Slippage).includes(currentSlippage)
) { ) {
return currentSlippage.toString(); return currentSlippage.toString();
} }
@ -39,9 +39,9 @@ export default function SlippageButtons({
}); });
const [enteringCustomValue, setEnteringCustomValue] = useState(false); const [enteringCustomValue, setEnteringCustomValue] = useState(false);
const [activeButtonIndex, setActiveButtonIndex] = useState(() => { const [activeButtonIndex, setActiveButtonIndex] = useState(() => {
if (currentSlippage === SLIPPAGE.HIGH) { if (currentSlippage === Slippage.high) {
return 1; // 3% slippage. return 1; // 3% slippage.
} else if (currentSlippage === SLIPPAGE.DEFAULT) { } else if (currentSlippage === Slippage.default) {
return 0; // 2% slippage. return 0; // 2% slippage.
} else if (typeof currentSlippage === 'number') { } else if (typeof currentSlippage === 'number') {
return 2; // Custom slippage. return 2; // Custom slippage.
@ -49,7 +49,7 @@ export default function SlippageButtons({
return 0; return 0;
}); });
const [open, setOpen] = useState(() => { const [open, setOpen] = useState(() => {
return currentSlippage !== SLIPPAGE.DEFAULT; // Only open Advanced options by default if it's not default slippage. return currentSlippage !== Slippage.default; // Only open Advanced options by default if it's not default slippage.
}); });
const [inputRef, setInputRef] = useState(null); const [inputRef, setInputRef] = useState(null);
@ -133,20 +133,20 @@ export default function SlippageButtons({
setCustomValue(''); setCustomValue('');
setEnteringCustomValue(false); setEnteringCustomValue(false);
setActiveButtonIndex(0); setActiveButtonIndex(0);
onSelect(SLIPPAGE.DEFAULT); onSelect(Slippage.default);
}} }}
> >
{t('swapSlippagePercent', [SLIPPAGE.DEFAULT])} {t('swapSlippagePercent', [Slippage.default])}
</Button> </Button>
<Button <Button
onClick={() => { onClick={() => {
setCustomValue(''); setCustomValue('');
setEnteringCustomValue(false); setEnteringCustomValue(false);
setActiveButtonIndex(1); setActiveButtonIndex(1);
onSelect(SLIPPAGE.HIGH); onSelect(Slippage.high);
}} }}
> >
{t('swapSlippagePercent', [SLIPPAGE.HIGH])} {t('swapSlippagePercent', [Slippage.high])}
</Button> </Button>
<Button <Button
className={classnames( className={classnames(

2
ui/pages/swaps/slippage-buttons/slippage-buttons.stories.js
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import SlippageButtons from '.'; import SlippageButtons from './slippage-buttons';
export default { export default {
title: 'Pages/Swaps/SlippageButtons', title: 'Pages/Swaps/SlippageButtons',

12
ui/pages/swaps/slippage-buttons/slippage-buttons.test.js
View File

@ -1,14 +1,14 @@
import React from 'react'; import React from 'react';
import { renderWithProvider, fireEvent } from '../../../../test/jest'; import { renderWithProvider, fireEvent } from '../../../../test/jest';
import { SLIPPAGE } from '../../../../shared/constants/swaps'; import { Slippage } from '../../../../shared/constants/swaps';
import SlippageButtons from '.'; import SlippageButtons from './slippage-buttons';
const createProps = (customProps = {}) => { const createProps = (customProps = {}) => {
return { return {
onSelect: jest.fn(), onSelect: jest.fn(),
maxAllowedSlippage: 15, maxAllowedSlippage: 15,
currentSlippage: SLIPPAGE.HIGH, currentSlippage: Slippage.high,
smartTransactionsEnabled: false, smartTransactionsEnabled: false,
...customProps, ...customProps,
}; };
@ -72,7 +72,7 @@ describe('SlippageButtons', () => {
it('renders the default slippage with Advanced options hidden', () => { it('renders the default slippage with Advanced options hidden', () => {
const { getByText, queryByText } = renderWithProvider( const { getByText, queryByText } = renderWithProvider(
<SlippageButtons <SlippageButtons
{...createProps({ currentSlippage: SLIPPAGE.DEFAULT })} {...createProps({ currentSlippage: Slippage.default })}
/>, />,
); );
expect(getByText('Advanced options')).toBeInTheDocument(); expect(getByText('Advanced options')).toBeInTheDocument();
@ -83,7 +83,7 @@ describe('SlippageButtons', () => {
it('opens the Advanced options section and sets a default slippage', () => { it('opens the Advanced options section and sets a default slippage', () => {
const { getByText, getByTestId } = renderWithProvider( const { getByText, getByTestId } = renderWithProvider(
<SlippageButtons <SlippageButtons
{...createProps({ currentSlippage: SLIPPAGE.DEFAULT })} {...createProps({ currentSlippage: Slippage.default })}
/>, />,
); );
fireEvent.click(getByText('Advanced options')); fireEvent.click(getByText('Advanced options'));
@ -97,7 +97,7 @@ describe('SlippageButtons', () => {
it('opens the Advanced options section and sets a high slippage', () => { it('opens the Advanced options section and sets a high slippage', () => {
const { getByText, getByTestId } = renderWithProvider( const { getByText, getByTestId } = renderWithProvider(
<SlippageButtons <SlippageButtons
{...createProps({ currentSlippage: SLIPPAGE.DEFAULT })} {...createProps({ currentSlippage: Slippage.default })}
/>, />,
); );
fireEvent.click(getByText('Advanced options')); fireEvent.click(getByText('Advanced options'));