m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +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 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';
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,
name: 'Ether',
address: DEFAULT_TOKEN_ADDRESS,
@ -27,49 +51,53 @@ export const ETH_SWAPS_TOKEN_OBJECT = {
iconUrl: ETH_TOKEN_IMAGE_URL,
};
export const BNB_SWAPS_TOKEN_OBJECT = {
export const BNB_SWAPS_TOKEN_OBJECT: SwapsTokenObject = {
symbol: CURRENCY_SYMBOLS.BNB,
name: 'Binance Coin',
address: DEFAULT_TOKEN_ADDRESS,
decimals: 18,
iconUrl: BNB_TOKEN_IMAGE_URL,
};
} as const;
export const MATIC_SWAPS_TOKEN_OBJECT = {
export const MATIC_SWAPS_TOKEN_OBJECT: SwapsTokenObject = {
symbol: CURRENCY_SYMBOLS.MATIC,
name: 'Matic',
address: DEFAULT_TOKEN_ADDRESS,
decimals: 18,
iconUrl: MATIC_TOKEN_IMAGE_URL,
};
} as const;
export const AVAX_SWAPS_TOKEN_OBJECT = {
export const AVAX_SWAPS_TOKEN_OBJECT: SwapsTokenObject = {
symbol: CURRENCY_SYMBOLS.AVALANCHE,
name: 'Avalanche',
address: DEFAULT_TOKEN_ADDRESS,
decimals: 18,
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,
name: 'Test Ether',
address: DEFAULT_TOKEN_ADDRESS,
decimals: 18,
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,
name: 'Ether',
address: DEFAULT_TOKEN_ADDRESS,
decimals: 18,
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
export const DEFAULT_ERC20_APPROVE_GAS = '0x1d4c0';
@ -124,17 +152,17 @@ export const ALLOWED_PROD_SWAPS_CHAIN_IDS = [
CHAIN_IDS.AVALANCHE,
CHAIN_IDS.OPTIMISM,
CHAIN_IDS.ARBITRUM,
];
] as const;
export const ALLOWED_DEV_SWAPS_CHAIN_IDS = [
...ALLOWED_PROD_SWAPS_CHAIN_IDS,
CHAIN_IDS.GOERLI,
];
] as const;
export const ALLOWED_SMART_TRANSACTIONS_CHAIN_IDS = [
CHAIN_IDS.MAINNET,
CHAIN_IDS.GOERLI,
];
] as const;
export const SWAPS_CHAINID_CONTRACT_ADDRESS_MAP = {
[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.OPTIMISM]: OPTIMISM_CONTRACT_ADDRESS,
[CHAIN_IDS.ARBITRUM]: ARBITRUM_CONTRACT_ADDRESS,
};
} as const;
export const SWAPS_WRAPPED_TOKENS_ADDRESSES = {
[CHAIN_IDS.MAINNET]: WETH_CONTRACT_ADDRESS,
@ -156,7 +184,7 @@ export const SWAPS_WRAPPED_TOKENS_ADDRESSES = {
[CHAIN_IDS.AVALANCHE]: WAVAX_CONTRACT_ADDRESS,
[CHAIN_IDS.OPTIMISM]: WETH_OPTIMISM_CONTRACT_ADDRESS,
[CHAIN_IDS.ARBITRUM]: WETH_ARBITRUM_CONTRACT_ADDRESS,
};
} as const;
export const ALLOWED_CONTRACT_ADDRESSES = {
[CHAIN_IDS.MAINNET]: [
@ -191,7 +219,7 @@ export const ALLOWED_CONTRACT_ADDRESSES = {
SWAPS_CHAINID_CONTRACT_ADDRESS_MAP[CHAIN_IDS.ARBITRUM],
SWAPS_WRAPPED_TOKENS_ADDRESSES[CHAIN_IDS.ARBITRUM],
],
};
} as const;
export const SWAPS_CHAINID_DEFAULT_TOKEN_MAP = {
[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.OPTIMISM]: OPTIMISM_SWAPS_TOKEN_OBJECT,
[CHAIN_IDS.ARBITRUM]: ARBITRUM_SWAPS_TOKEN_OBJECT,
};
} as const;
export const SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP = {
[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.OPTIMISM]: OPTIMISM_DEFAULT_BLOCK_EXPLORER_URL,
[CHAIN_IDS.ARBITRUM]: ARBITRUM_DEFAULT_BLOCK_EXPLORER_URL,
};
} as const;
export const ETHEREUM = 'ethereum';
export const POLYGON = 'polygon';
@ -224,12 +252,12 @@ export const ARBITRUM = 'arbitrum';
export const SWAPS_CLIENT_ID = 'extension';
export const TOKEN_BUCKET_PRIORITY = {
OWNED: 'owned',
TOP: 'top',
};
export enum TokenBucketPriority {
owned = 'owned',
top = 'top',
}
export const SLIPPAGE = {
DEFAULT: 2,
HIGH: 3,
};
export enum Slippage {
default = 2,
high = 3,
}

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

@ -77,7 +77,7 @@ import {
SWAP_FAILED_ERROR,
SWAPS_FETCH_ORDER_CONFLICT,
ALLOWED_SMART_TRANSACTIONS_CHAIN_IDS,
SLIPPAGE,
Slippage,
} from '../../../shared/constants/swaps';
import {
TransactionType,
@ -112,7 +112,7 @@ const initialState = {
fromTokenInputValue: '',
fromTokenError: null,
isFeatureFlagLoaded: false,
maxSlippage: SLIPPAGE.DEFAULT,
maxSlippage: Slippage.default,
quotesFetchStartTime: null,
reviewSwapClickedTimestamp: null,
topAssets: {},
@ -742,7 +742,7 @@ export const fetchQuotesAndSetQuoteState = (
token_to: toTokenSymbol,
request_type: balanceError ? 'Quote' : 'Order',
slippage: maxSlippage,
custom_slippage: maxSlippage !== SLIPPAGE.DEFAULT,
custom_slippage: maxSlippage !== Slippage.default,
is_hardware_wallet: hardwareWalletUsed,
hardware_wallet_type: hardwareWalletType,
stx_enabled: smartTransactionsEnabled,
@ -796,7 +796,7 @@ export const fetchQuotesAndSetQuoteState = (
token_to: toTokenSymbol,
request_type: balanceError ? 'Quote' : 'Order',
slippage: maxSlippage,
custom_slippage: maxSlippage !== SLIPPAGE.DEFAULT,
custom_slippage: maxSlippage !== Slippage.default,
is_hardware_wallet: hardwareWalletUsed,
hardware_wallet_type: hardwareWalletType,
stx_enabled: smartTransactionsEnabled,
@ -821,7 +821,7 @@ export const fetchQuotesAndSetQuoteState = (
),
request_type: balanceError ? 'Quote' : 'Order',
slippage: maxSlippage,
custom_slippage: maxSlippage !== SLIPPAGE.DEFAULT,
custom_slippage: maxSlippage !== Slippage.default,
response_time: Date.now() - fetchStartTime,
best_quote_source: newSelectedQuote.aggregator,
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 { isSwapsDefaultTokenSymbol } from '../../shared/modules/swaps.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 { useEqualityCheck } from './useEqualityCheck';
@ -96,7 +96,7 @@ export function useTokensToSearch({
usersTokens = [],
topTokens = {},
shuffledTokensList,
tokenBucketPriority = TOKEN_BUCKET_PRIORITY.OWNED,
tokenBucketPriority = TokenBucketPriority.owned,
}) {
const chainId = useSelector(getCurrentChainId);
const tokenConversionRates = useSelector(getTokenExchangeRates, isEqual);
@ -156,7 +156,7 @@ export function useTokensToSearch({
chainId,
tokenList,
);
if (tokenBucketPriority === TOKEN_BUCKET_PRIORITY.OWNED) {
if (tokenBucketPriority === TokenBucketPriority.owned) {
if (
isSwapsDefaultTokenSymbol(renderableDataToken.symbol, chainId) ||
usersTokensAddressMap[token.address.toLowerCase()]
@ -189,7 +189,7 @@ export function useTokensToSearch({
},
);
tokensToSearchBuckets.top = tokensToSearchBuckets.top.filter(Boolean);
if (tokenBucketPriority === TOKEN_BUCKET_PRIORITY.OWNED) {
if (tokenBucketPriority === TokenBucketPriority.owned) {
return [
...tokensToSearchBuckets.owned,
...tokensToSearchBuckets.top,

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

@ -9,7 +9,7 @@ import {
fireEvent,
} from '../../../../test/jest';
import {
SLIPPAGE,
Slippage,
QUOTES_EXPIRED_ERROR,
SWAP_FAILED_ERROR,
ERROR_FETCHING_QUOTES,
@ -28,7 +28,7 @@ const createProps = (customProps = {}) => {
tokensReceived: 'tokens received:',
submittingSwap: true,
inputValue: 5,
maxSlippage: SLIPPAGE.DEFAULT,
maxSlippage: Slippage.default,
txId: 6571648590592143,
...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 {
SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP,
SWAPS_CHAINID_DEFAULT_TOKEN_MAP,
TOKEN_BUCKET_PRIORITY,
TokenBucketPriority,
} from '../../../../shared/constants/swaps';
import {
@ -221,13 +221,13 @@ export default function BuildQuote({
usersTokens: memoizedUsersTokens,
topTokens: topAssets,
shuffledTokensList,
tokenBucketPriority: TOKEN_BUCKET_PRIORITY.OWNED,
tokenBucketPriority: TokenBucketPriority.owned,
});
const tokensToSearchSwapTo = useTokensToSearch({
usersTokens: memoizedUsersTokens,
topTokens: topAssets,
shuffledTokensList,
tokenBucketPriority: TOKEN_BUCKET_PRIORITY.TOP,
tokenBucketPriority: TokenBucketPriority.top,
});
const selectedToToken =
tokensToSearchSwapFrom.find(({ address }) =>

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

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

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

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