1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 12:47:14 +01:00
metamask-extension/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.stories.js

157 lines
4.4 KiB
JavaScript
Raw Normal View History

2021-08-31 01:01:59 +02:00
import React, { useEffect, useState } from 'react';
import { Provider } from 'react-redux';
import { number } from '@storybook/addon-knobs';
import configureStore from '../../../store/store';
import testData from '../../../../.storybook/test-data';
import { formatETHFee } from '../../../helpers/utils/formatters';
import {
addHexes,
getValueFromWeiHex,
getWeiHexFromDecimalValue,
sumHexWEIsToRenderableFiat,
} from '../../../helpers/utils/conversions.util';
import { ETH } from '../../../helpers/constants/common';
import { calcGasTotal, isBalanceSufficient } from '../../send/send.utils';
import { conversionLessThan } from '../../../../shared/modules/conversion.utils';
import GasModalPageContainer from './swaps-gas-customization-modal.component';
// Using Test Data For Redux
const store = configureStore(testData);
export default {
title: 'Pages/Swaps/GasModalPageContainer',
id: __filename,
2021-08-31 01:01:59 +02:00
decorators: [(story) => <Provider store={store}>{story()}</Provider>],
};
// Convert Hex Wei to Decimal ETH
const sumHexWEIsToRenderableEth = (hexWEIs, currencySymbol = 'ETH') => {
const hexWEIsSum = hexWEIs.filter(Boolean).reduce(addHexes);
return formatETHFee(
getValueFromWeiHex({
value: hexWEIsSum,
fromCurrency: currencySymbol,
toCurrency: currencySymbol,
numberOfDecimals: 6,
}),
currencySymbol,
);
};
export const DefaultStory = () => {
2021-08-31 01:01:59 +02:00
// Send Amount Data
const hexWei = getWeiHexFromDecimalValue({
value: String(number('Send Amount (this should be static)', 0.01)),
fromCurrency: ETH,
fromDenomination: ETH,
});
// ETH Balance
const balanceHexWei = getWeiHexFromDecimalValue({
value: String(number('Wallet Balance (this should be static)', 1.582717)),
fromCurrency: ETH,
fromDenomination: ETH,
});
const sendAmount = sumHexWEIsToRenderableEth([hexWei, '0x0']);
const [gasLimit, setGasLimit] = useState('5208');
const [gasPrice, setGasPrice] = useState('ee6b2800');
const [transactionFee, setTransactionFee] = useState('');
const [totalETH, setTotalETH] = useState('');
const [totalFiat, setTotalFiat] = useState('');
const [isInsufficientBalance, setIsInsufficientBalance] = useState(false);
const { metamask } = store.getState();
const { currentCurrency, conversionRate } = metamask;
useEffect(() => {
// Transfer Fee
const customGasTotal = calcGasTotal(gasLimit, gasPrice);
setTransactionFee(sumHexWEIsToRenderableEth(['0x0', customGasTotal]));
// New Total ETH
setTotalETH(sumHexWEIsToRenderableEth([hexWei, customGasTotal, '']));
// New Total Fiat
setTotalFiat(
sumHexWEIsToRenderableFiat(
[hexWei, customGasTotal, ''],
currentCurrency,
conversionRate,
),
);
// Check If Balance is Sufficient
setIsInsufficientBalance(
!isBalanceSufficient({
amount: hexWei,
gasTotal: customGasTotal,
balance: balanceHexWei,
conversionRate,
}),
);
}, [
gasPrice,
gasLimit,
hexWei,
totalETH,
conversionRate,
currentCurrency,
totalFiat,
balanceHexWei,
]);
// Check If Gas Price Is Too Low
const shouldShowCustomPriceTooLowWarning = () => {
const average = number('Average Gas Price', 2);
const customGasPrice = gasPrice;
if (!customGasPrice || average === undefined) {
return false;
}
const customPriceRisksSwapFailure = conversionLessThan(
{
value: customGasPrice,
fromNumericBase: 'hex',
fromDenomination: 'WEI',
toDenomination: 'GWEI',
},
{ value: average, fromNumericBase: 'dec' },
);
return customPriceRisksSwapFailure;
};
return (
<GasModalPageContainer
insufficientBalance={isInsufficientBalance}
showCustomPriceTooLowWarning={shouldShowCustomPriceTooLowWarning()}
minimumGasLimit={21000}
infoRowProps={{
sendAmount,
transactionFee,
newTotalEth: totalETH,
newTotalFiat: totalFiat,
}}
gasPriceButtonGroupProps={{
buttonDataLoading: true,
}}
setSwapsCustomizationModalPrice={(newPrice) => {
setGasPrice(newPrice);
}}
setSwapsCustomizationModalLimit={(newLimit) => {
setGasLimit(newLimit);
}}
customGasPrice={gasPrice}
customGasLimit={gasLimit}
disableSave={
isInsufficientBalance || shouldShowCustomPriceTooLowWarning()
}
/>
);
};
DefaultStory.storyName = 'Default';