Dan Miller
3 years ago
commit
74719a8102
@ -0,0 +1,13 @@ |
||||
#!/usr/bin/env bash |
||||
|
||||
set -e |
||||
set -u |
||||
set -o pipefail |
||||
|
||||
# Generate LavaMoat policies for the extension background script for each build |
||||
# type. |
||||
# ATTN: This may tax your device when running it locally. |
||||
concurrently --kill-others-on-fail -n main,beta,flask \ |
||||
"WRITE_AUTO_POLICY=1 yarn dist" \ |
||||
"WRITE_AUTO_POLICY=1 yarn dist --build-type beta" \ |
||||
"WRITE_AUTO_POLICY=1 yarn dist --build-type flask" |
||||
@ -0,0 +1,55 @@ |
||||
{ |
||||
"resources": { |
||||
"browser-resolve": { |
||||
"packages": { |
||||
"core-js": true |
||||
} |
||||
}, |
||||
"babel-runtime": { |
||||
"packages": { |
||||
"@babel/runtime": true |
||||
} |
||||
}, |
||||
"node-fetch": { |
||||
"globals": { |
||||
"fetch": true |
||||
} |
||||
}, |
||||
"lodash": { |
||||
"globals": { |
||||
"setTimeout": true, |
||||
"clearTimeout": true |
||||
} |
||||
}, |
||||
"@ethersproject/random": { |
||||
"globals": { |
||||
"crypto.getRandomValues": true |
||||
} |
||||
}, |
||||
"browser-passworder": { |
||||
"globals": { |
||||
"crypto": true |
||||
} |
||||
}, |
||||
"randombytes": { |
||||
"globals": { |
||||
"crypto.getRandomValues": true |
||||
} |
||||
}, |
||||
"extensionizer": { |
||||
"globals": { |
||||
"console": true |
||||
} |
||||
}, |
||||
"web3": { |
||||
"globals": { |
||||
"XMLHttpRequest": true |
||||
} |
||||
}, |
||||
"storage": { |
||||
"globals": { |
||||
"localStorage": true |
||||
} |
||||
} |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,55 @@ |
||||
{ |
||||
"resources": { |
||||
"browser-resolve": { |
||||
"packages": { |
||||
"core-js": true |
||||
} |
||||
}, |
||||
"babel-runtime": { |
||||
"packages": { |
||||
"@babel/runtime": true |
||||
} |
||||
}, |
||||
"node-fetch": { |
||||
"globals": { |
||||
"fetch": true |
||||
} |
||||
}, |
||||
"lodash": { |
||||
"globals": { |
||||
"setTimeout": true, |
||||
"clearTimeout": true |
||||
} |
||||
}, |
||||
"@ethersproject/random": { |
||||
"globals": { |
||||
"crypto.getRandomValues": true |
||||
} |
||||
}, |
||||
"browser-passworder": { |
||||
"globals": { |
||||
"crypto": true |
||||
} |
||||
}, |
||||
"randombytes": { |
||||
"globals": { |
||||
"crypto.getRandomValues": true |
||||
} |
||||
}, |
||||
"extensionizer": { |
||||
"globals": { |
||||
"console": true |
||||
} |
||||
}, |
||||
"web3": { |
||||
"globals": { |
||||
"XMLHttpRequest": true |
||||
} |
||||
}, |
||||
"storage": { |
||||
"globals": { |
||||
"localStorage": true |
||||
} |
||||
} |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,124 @@ |
||||
import { fireEvent } from '@testing-library/react'; |
||||
import React from 'react'; |
||||
import configureMockStore from 'redux-mock-store'; |
||||
import { renderWithProvider } from '../../../../../test/lib/render-helpers'; |
||||
import { TRANSACTION_ERROR_KEY } from '../../../../helpers/constants/error-keys'; |
||||
import ConfirmPageContainerContent from './confirm-page-container-content.component'; |
||||
|
||||
describe('Confirm Page Container Content', () => { |
||||
const mockStore = { |
||||
metamask: { |
||||
provider: { |
||||
type: 'test', |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
const store = configureMockStore()(mockStore); |
||||
|
||||
let props = {}; |
||||
|
||||
beforeEach(() => { |
||||
const mockOnCancel = jest.fn(); |
||||
const mockOnCancelAll = jest.fn(); |
||||
const mockOnSubmit = jest.fn(); |
||||
const mockOnConfirmAnyways = jest.fn(); |
||||
props = { |
||||
action: ' Withdraw Stake', |
||||
errorMessage: null, |
||||
errorKey: null, |
||||
hasSimulationError: true, |
||||
onCancelAll: mockOnCancelAll, |
||||
onCancel: mockOnCancel, |
||||
cancelText: 'Reject', |
||||
onSubmit: mockOnSubmit, |
||||
onConfirmAnyways: mockOnConfirmAnyways, |
||||
submitText: 'Confirm', |
||||
disabled: true, |
||||
origin: 'http://localhost:4200', |
||||
hideTitle: false, |
||||
}; |
||||
}); |
||||
|
||||
it('render ConfirmPageContainer component with simulation error', async () => { |
||||
const { queryByText, getByText } = renderWithProvider( |
||||
<ConfirmPageContainerContent {...props} />, |
||||
store, |
||||
); |
||||
|
||||
expect( |
||||
queryByText('Transaction Error. Exception thrown in contract code.'), |
||||
).not.toBeInTheDocument(); |
||||
expect( |
||||
queryByText( |
||||
'This transaction is expected to fail. Trying to execute it is expected to be expensive but fail, and is not recommended.', |
||||
), |
||||
).toBeInTheDocument(); |
||||
expect(queryByText('I will try anyway')).toBeInTheDocument(); |
||||
|
||||
const confirmButton = getByText('Confirm'); |
||||
expect(getByText('Confirm').closest('button')).toBeDisabled(); |
||||
fireEvent.click(confirmButton); |
||||
expect(props.onSubmit).toHaveBeenCalledTimes(0); |
||||
|
||||
const iWillTryButton = getByText('I will try anyway'); |
||||
fireEvent.click(iWillTryButton); |
||||
expect(props.onConfirmAnyways).toHaveBeenCalledTimes(1); |
||||
|
||||
const cancelButton = getByText('Reject'); |
||||
fireEvent.click(cancelButton); |
||||
expect(props.onCancel).toHaveBeenCalledTimes(1); |
||||
}); |
||||
|
||||
it('render ConfirmPageContainer component with another error', async () => { |
||||
props.hasSimulationError = false; |
||||
props.disabled = true; |
||||
props.errorKey = TRANSACTION_ERROR_KEY; |
||||
const { queryByText, getByText } = renderWithProvider( |
||||
<ConfirmPageContainerContent {...props} />, |
||||
store, |
||||
); |
||||
|
||||
expect( |
||||
queryByText( |
||||
'This transaction is expected to fail. Trying to execute it is expected to be expensive but fail, and is not recommended.', |
||||
), |
||||
).not.toBeInTheDocument(); |
||||
expect(queryByText('I will try anyway')).not.toBeInTheDocument(); |
||||
expect(getByText('Confirm').closest('button')).toBeDisabled(); |
||||
expect( |
||||
getByText('Transaction Error. Exception thrown in contract code.'), |
||||
).toBeInTheDocument(); |
||||
|
||||
const cancelButton = getByText('Reject'); |
||||
fireEvent.click(cancelButton); |
||||
expect(props.onCancel).toHaveBeenCalledTimes(1); |
||||
}); |
||||
|
||||
it('render ConfirmPageContainer component with no errors', async () => { |
||||
props.hasSimulationError = false; |
||||
props.disabled = false; |
||||
const { queryByText, getByText } = renderWithProvider( |
||||
<ConfirmPageContainerContent {...props} />, |
||||
store, |
||||
); |
||||
|
||||
expect( |
||||
queryByText( |
||||
'This transaction is expected to fail. Trying to execute it is expected to be expensive but fail, and is not recommended.', |
||||
), |
||||
).not.toBeInTheDocument(); |
||||
expect( |
||||
queryByText('Transaction Error. Exception thrown in contract code.'), |
||||
).not.toBeInTheDocument(); |
||||
expect(queryByText('I will try anyway')).not.toBeInTheDocument(); |
||||
|
||||
const confirmButton = getByText('Confirm'); |
||||
fireEvent.click(confirmButton); |
||||
expect(props.onSubmit).toHaveBeenCalledTimes(1); |
||||
|
||||
const cancelButton = getByText('Reject'); |
||||
fireEvent.click(cancelButton); |
||||
expect(props.onCancel).toHaveBeenCalledTimes(1); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,68 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
import { PRIORITY_LEVELS } from '../../../../shared/constants/gas'; |
||||
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||
import Popover from '../../ui/popover'; |
||||
import I18nValue from '../../ui/i18n-value'; |
||||
import LoadingHeartBeat from '../../ui/loading-heartbeat'; |
||||
|
||||
import EditGasItem from './edit-gas-item'; |
||||
|
||||
const EditGasFeePopover = ({ onClose }) => { |
||||
const t = useI18nContext(); |
||||
|
||||
return ( |
||||
<Popover |
||||
title={t('editGasFeeModalTitle')} |
||||
onClose={onClose} |
||||
className="edit-gas-fee-popover" |
||||
> |
||||
<> |
||||
{process.env.IN_TEST === 'true' ? null : <LoadingHeartBeat />} |
||||
<div className="edit-gas-fee-popover__wrapper"> |
||||
<div className="edit-gas-fee-popover__content"> |
||||
<div className="edit-gas-fee-popover__content__header"> |
||||
<span className="edit-gas-fee-popover__content__header-option"> |
||||
<I18nValue messageKey="gasOption" /> |
||||
</span> |
||||
<span className="edit-gas-fee-popover__content__header-time"> |
||||
<I18nValue messageKey="time" /> |
||||
</span> |
||||
<span className="edit-gas-fee-popover__content__header-max-fee"> |
||||
<I18nValue messageKey="maxFee" /> |
||||
</span> |
||||
</div> |
||||
<EditGasItem |
||||
priorityLevel={PRIORITY_LEVELS.LOW} |
||||
onClose={onClose} |
||||
/> |
||||
<EditGasItem |
||||
priorityLevel={PRIORITY_LEVELS.MEDIUM} |
||||
onClose={onClose} |
||||
/> |
||||
<EditGasItem |
||||
priorityLevel={PRIORITY_LEVELS.HIGH} |
||||
onClose={onClose} |
||||
/> |
||||
<div className="edit-gas-fee-popover__content__separator" /> |
||||
<EditGasItem |
||||
priorityLevel={PRIORITY_LEVELS.DAPP_SUGGESTED} |
||||
onClose={onClose} |
||||
/> |
||||
<EditGasItem |
||||
priorityLevel={PRIORITY_LEVELS.CUSTOM} |
||||
onClose={onClose} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</> |
||||
</Popover> |
||||
); |
||||
}; |
||||
|
||||
EditGasFeePopover.propTypes = { |
||||
onClose: PropTypes.func, |
||||
}; |
||||
|
||||
export default EditGasFeePopover; |
||||
@ -0,0 +1,95 @@ |
||||
import React from 'react'; |
||||
import { screen } from '@testing-library/react'; |
||||
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers'; |
||||
import { ETH } from '../../../helpers/constants/common'; |
||||
import configureStore from '../../../store/store'; |
||||
import { GasFeeContextProvider } from '../../../contexts/gasFee'; |
||||
|
||||
import EditGasFeePopover from './edit-gas-fee-popover'; |
||||
|
||||
jest.mock('../../../store/actions', () => ({ |
||||
disconnectGasFeeEstimatePoller: jest.fn(), |
||||
getGasFeeEstimatesAndStartPolling: jest |
||||
.fn() |
||||
.mockImplementation(() => Promise.resolve()), |
||||
addPollingTokenToAppState: jest.fn(), |
||||
})); |
||||
|
||||
const MOCK_FEE_ESTIMATE = { |
||||
low: { |
||||
minWaitTimeEstimate: 360000, |
||||
maxWaitTimeEstimate: 300000, |
||||
suggestedMaxPriorityFeePerGas: '3', |
||||
suggestedMaxFeePerGas: '53', |
||||
}, |
||||
medium: { |
||||
minWaitTimeEstimate: 30000, |
||||
maxWaitTimeEstimate: 60000, |
||||
suggestedMaxPriorityFeePerGas: '7', |
||||
suggestedMaxFeePerGas: '70', |
||||
}, |
||||
high: { |
||||
minWaitTimeEstimate: 15000, |
||||
maxWaitTimeEstimate: 15000, |
||||
suggestedMaxPriorityFeePerGas: '10', |
||||
suggestedMaxFeePerGas: '100', |
||||
}, |
||||
estimatedBaseFee: '50', |
||||
}; |
||||
|
||||
const renderComponent = () => { |
||||
const store = configureStore({ |
||||
metamask: { |
||||
nativeCurrency: ETH, |
||||
provider: {}, |
||||
cachedBalances: {}, |
||||
accounts: { |
||||
'0xAddress': { |
||||
address: '0xAddress', |
||||
balance: '0x176e5b6f173ebe66', |
||||
}, |
||||
}, |
||||
selectedAddress: '0xAddress', |
||||
featureFlags: { advancedInlineGas: true }, |
||||
gasFeeEstimates: MOCK_FEE_ESTIMATE, |
||||
}, |
||||
}); |
||||
|
||||
return renderWithProvider( |
||||
<GasFeeContextProvider transaction={{ txParams: { gas: '0x5208' } }}> |
||||
<EditGasFeePopover /> |
||||
</GasFeeContextProvider>, |
||||
store, |
||||
); |
||||
}; |
||||
|
||||
describe('EditGasFeePopover', () => { |
||||
it('should renders low / medium / high options', () => { |
||||
renderComponent(); |
||||
|
||||
expect(screen.queryByText('🐢')).toBeInTheDocument(); |
||||
expect(screen.queryByText('🦊')).toBeInTheDocument(); |
||||
expect(screen.queryByText('🦍')).toBeInTheDocument(); |
||||
expect(screen.queryByText('🌐')).toBeInTheDocument(); |
||||
expect(screen.queryByText('⚙')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Low')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Market')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Aggressive')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Site')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Advanced')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('should show time estimates', () => { |
||||
renderComponent(); |
||||
expect(screen.queryAllByText('5 min')).toHaveLength(2); |
||||
expect(screen.queryByText('15 sec')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('should show gas fee estimates', () => { |
||||
renderComponent(); |
||||
expect(screen.queryByTitle('0.001113 ETH')).toBeInTheDocument(); |
||||
expect(screen.queryByTitle('0.00147 ETH')).toBeInTheDocument(); |
||||
expect(screen.queryByTitle('0.0021 ETH')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,150 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import classNames from 'classnames'; |
||||
import { useSelector } from 'react-redux'; |
||||
|
||||
import { getMaximumGasTotalInHexWei } from '../../../../../shared/modules/gas.utils'; |
||||
import { PRIORITY_LEVELS } from '../../../../../shared/constants/gas'; |
||||
import { PRIORITY_LEVEL_ICON_MAP } from '../../../../helpers/constants/gas'; |
||||
import { PRIMARY } from '../../../../helpers/constants/common'; |
||||
import { |
||||
decGWEIToHexWEI, |
||||
decimalToHex, |
||||
hexWEIToDecGWEI, |
||||
} from '../../../../helpers/utils/conversions.util'; |
||||
import { getAdvancedGasFeeValues } from '../../../../selectors'; |
||||
import { toHumanReadableTime } from '../../../../helpers/utils/util'; |
||||
import { useGasFeeContext } from '../../../../contexts/gasFee'; |
||||
import { useI18nContext } from '../../../../hooks/useI18nContext'; |
||||
import I18nValue from '../../../ui/i18n-value'; |
||||
import InfoTooltip from '../../../ui/info-tooltip'; |
||||
import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'; |
||||
|
||||
import { useCustomTimeEstimate } from './useCustomTimeEstimate'; |
||||
|
||||
const EditGasItem = ({ priorityLevel, onClose }) => { |
||||
const { |
||||
estimateUsed, |
||||
gasFeeEstimates, |
||||
gasLimit, |
||||
maxFeePerGas: maxFeePerGasValue, |
||||
maxPriorityFeePerGas: maxPriorityFeePerGasValue, |
||||
updateTransactionUsingGasFeeEstimates, |
||||
transaction: { dappSuggestedGasFees }, |
||||
} = useGasFeeContext(); |
||||
const t = useI18nContext(); |
||||
const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues); |
||||
let maxFeePerGas; |
||||
let maxPriorityFeePerGas; |
||||
let minWaitTime; |
||||
|
||||
if (gasFeeEstimates[priorityLevel]) { |
||||
maxFeePerGas = gasFeeEstimates[priorityLevel].suggestedMaxFeePerGas; |
||||
} else if ( |
||||
priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED && |
||||
dappSuggestedGasFees |
||||
) { |
||||
maxFeePerGas = hexWEIToDecGWEI(dappSuggestedGasFees.maxFeePerGas); |
||||
maxPriorityFeePerGas = hexWEIToDecGWEI( |
||||
dappSuggestedGasFees.maxPriorityFeePerGas, |
||||
); |
||||
} else if (priorityLevel === PRIORITY_LEVELS.CUSTOM) { |
||||
if (estimateUsed === PRIORITY_LEVELS.CUSTOM) { |
||||
maxFeePerGas = maxFeePerGasValue; |
||||
maxPriorityFeePerGas = maxPriorityFeePerGasValue; |
||||
} else if (advancedGasFeeValues) { |
||||
maxFeePerGas = |
||||
gasFeeEstimates.estimatedBaseFee * |
||||
parseFloat(advancedGasFeeValues.maxBaseFee); |
||||
maxPriorityFeePerGas = advancedGasFeeValues.priorityFee; |
||||
} |
||||
} |
||||
|
||||
const { waitTimeEstimate } = useCustomTimeEstimate({ |
||||
gasFeeEstimates, |
||||
maxFeePerGas, |
||||
maxPriorityFeePerGas, |
||||
}); |
||||
|
||||
if (gasFeeEstimates[priorityLevel]) { |
||||
minWaitTime = |
||||
priorityLevel === PRIORITY_LEVELS.HIGH |
||||
? gasFeeEstimates?.high.minWaitTimeEstimate |
||||
: gasFeeEstimates?.low.maxWaitTimeEstimate; |
||||
} else { |
||||
minWaitTime = waitTimeEstimate; |
||||
} |
||||
|
||||
const hexMaximumTransactionFee = maxFeePerGas |
||||
? getMaximumGasTotalInHexWei({ |
||||
gasLimit: decimalToHex(gasLimit), |
||||
maxFeePerGas: decGWEIToHexWEI(maxFeePerGas), |
||||
}) |
||||
: null; |
||||
|
||||
const onOptionSelect = () => { |
||||
if (priorityLevel !== PRIORITY_LEVELS.CUSTOM) { |
||||
updateTransactionUsingGasFeeEstimates(priorityLevel); |
||||
} |
||||
// todo: open advance modal if priorityLevel is custom
|
||||
onClose(); |
||||
}; |
||||
|
||||
return ( |
||||
<div |
||||
className={classNames('edit-gas-item', { |
||||
'edit-gas-item-selected': priorityLevel === estimateUsed, |
||||
'edit-gas-item-disabled': |
||||
priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED && |
||||
!dappSuggestedGasFees, |
||||
})} |
||||
role="button" |
||||
onClick={onOptionSelect} |
||||
> |
||||
<span className="edit-gas-item__name"> |
||||
<span |
||||
className={`edit-gas-item__icon edit-gas-item__icon-${priorityLevel}`} |
||||
> |
||||
{PRIORITY_LEVEL_ICON_MAP[priorityLevel]} |
||||
</span> |
||||
<I18nValue |
||||
messageKey={ |
||||
priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED |
||||
? 'dappSuggestedShortLabel' |
||||
: priorityLevel |
||||
} |
||||
/> |
||||
</span> |
||||
<span |
||||
className={`edit-gas-item__time-estimate edit-gas-item__time-estimate-${priorityLevel}`} |
||||
> |
||||
{minWaitTime |
||||
? minWaitTime && toHumanReadableTime(t, minWaitTime) |
||||
: '--'} |
||||
</span> |
||||
<span |
||||
className={`edit-gas-item__fee-estimate edit-gas-item__fee-estimate-${priorityLevel}`} |
||||
> |
||||
{hexMaximumTransactionFee ? ( |
||||
<UserPreferencedCurrencyDisplay |
||||
key="editGasSubTextFeeAmount" |
||||
type={PRIMARY} |
||||
value={hexMaximumTransactionFee} |
||||
/> |
||||
) : ( |
||||
'--' |
||||
)} |
||||
</span> |
||||
<span className="edit-gas-item__tooltip"> |
||||
<InfoTooltip position="top" /> |
||||
</span> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
EditGasItem.propTypes = { |
||||
priorityLevel: PropTypes.string, |
||||
onClose: PropTypes.func, |
||||
}; |
||||
|
||||
export default EditGasItem; |
||||
@ -0,0 +1,138 @@ |
||||
import React from 'react'; |
||||
import { screen } from '@testing-library/react'; |
||||
|
||||
import { renderWithProvider } from '../../../../../test/lib/render-helpers'; |
||||
import { ETH } from '../../../../helpers/constants/common'; |
||||
import configureStore from '../../../../store/store'; |
||||
import { GasFeeContextProvider } from '../../../../contexts/gasFee'; |
||||
|
||||
import EditGasItem from './edit-gas-item'; |
||||
|
||||
jest.mock('../../../../store/actions', () => ({ |
||||
disconnectGasFeeEstimatePoller: jest.fn(), |
||||
getGasFeeEstimatesAndStartPolling: jest |
||||
.fn() |
||||
.mockImplementation(() => Promise.resolve()), |
||||
addPollingTokenToAppState: jest.fn(), |
||||
getGasFeeTimeEstimate: jest |
||||
.fn() |
||||
.mockImplementation(() => Promise.resolve('unknown')), |
||||
})); |
||||
|
||||
const MOCK_FEE_ESTIMATE = { |
||||
low: { |
||||
minWaitTimeEstimate: 360000, |
||||
maxWaitTimeEstimate: 300000, |
||||
suggestedMaxPriorityFeePerGas: '3', |
||||
suggestedMaxFeePerGas: '53', |
||||
}, |
||||
medium: { |
||||
minWaitTimeEstimate: 30000, |
||||
maxWaitTimeEstimate: 60000, |
||||
suggestedMaxPriorityFeePerGas: '7', |
||||
suggestedMaxFeePerGas: '70', |
||||
}, |
||||
high: { |
||||
minWaitTimeEstimate: 15000, |
||||
maxWaitTimeEstimate: 15000, |
||||
suggestedMaxPriorityFeePerGas: '10', |
||||
suggestedMaxFeePerGas: '100', |
||||
}, |
||||
estimatedBaseFee: '50', |
||||
}; |
||||
|
||||
const DAPP_SUGGESTED_ESTIMATE = { |
||||
maxFeePerGas: '0x59682f10', |
||||
maxPriorityFeePerGas: '0x59682f00', |
||||
}; |
||||
|
||||
const renderComponent = (props, transactionProps, gasFeeContextProps) => { |
||||
const store = configureStore({ |
||||
metamask: { |
||||
nativeCurrency: ETH, |
||||
provider: {}, |
||||
cachedBalances: {}, |
||||
accounts: { |
||||
'0xAddress': { |
||||
address: '0xAddress', |
||||
balance: '0x176e5b6f173ebe66', |
||||
}, |
||||
}, |
||||
selectedAddress: '0xAddress', |
||||
featureFlags: { advancedInlineGas: true }, |
||||
gasFeeEstimates: MOCK_FEE_ESTIMATE, |
||||
advancedGasFee: { |
||||
maxBaseFee: '1.5', |
||||
priorityFee: '2', |
||||
}, |
||||
}, |
||||
}); |
||||
|
||||
return renderWithProvider( |
||||
<GasFeeContextProvider |
||||
transaction={{ txParams: { gas: '0x5208' }, ...transactionProps }} |
||||
{...gasFeeContextProps} |
||||
> |
||||
<EditGasItem priorityLevel="low" {...props} /> |
||||
</GasFeeContextProvider>, |
||||
store, |
||||
); |
||||
}; |
||||
|
||||
describe('EditGasItem', () => { |
||||
it('should renders low gas estimate option for priorityLevel low', () => { |
||||
renderComponent({ priorityLevel: 'low' }); |
||||
expect(screen.queryByText('🐢')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Low')).toBeInTheDocument(); |
||||
expect(screen.queryByText('5 min')).toBeInTheDocument(); |
||||
expect(screen.queryByTitle('0.001113 ETH')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('should renders market gas estimate option for priorityLevel medium', () => { |
||||
renderComponent({ priorityLevel: 'medium' }); |
||||
expect(screen.queryByText('🦊')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Market')).toBeInTheDocument(); |
||||
expect(screen.queryByText('5 min')).toBeInTheDocument(); |
||||
expect(screen.queryByTitle('0.00147 ETH')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('should renders aggressive gas estimate option for priorityLevel high', () => { |
||||
renderComponent({ priorityLevel: 'high' }); |
||||
expect(screen.queryByText('🦍')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Aggressive')).toBeInTheDocument(); |
||||
expect(screen.queryByText('15 sec')).toBeInTheDocument(); |
||||
expect(screen.queryByTitle('0.0021 ETH')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('should highlight option is priorityLevel is currently selected', () => { |
||||
renderComponent({ priorityLevel: 'high' }, { userFeeLevel: 'high' }); |
||||
expect( |
||||
document.getElementsByClassName('edit-gas-item-selected'), |
||||
).toHaveLength(1); |
||||
}); |
||||
|
||||
it('should renders site gas estimate option for priorityLevel dappSuggested', () => { |
||||
renderComponent( |
||||
{ priorityLevel: 'dappSuggested' }, |
||||
{ dappSuggestedGasFees: DAPP_SUGGESTED_ESTIMATE }, |
||||
); |
||||
expect(screen.queryByText('🌐')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Site')).toBeInTheDocument(); |
||||
expect(screen.queryByTitle('0.0000315 ETH')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('should disable site gas estimate option for is transaction does not have dappSuggestedGasFees', async () => { |
||||
renderComponent({ priorityLevel: 'dappSuggested' }); |
||||
expect( |
||||
document.getElementsByClassName('edit-gas-item-disabled'), |
||||
).toHaveLength(1); |
||||
}); |
||||
|
||||
it('should renders advance gas estimate option for priorityLevel custom', () => { |
||||
renderComponent({ priorityLevel: 'custom' }); |
||||
expect(screen.queryByText('⚙')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Advanced')).toBeInTheDocument(); |
||||
// below value of custom gas fee estimate is default obtained from state.metamask.advancedGasFee
|
||||
expect(screen.queryByTitle('0.001575 ETH')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1 @@ |
||||
export { default } from './edit-gas-item'; |
||||
@ -0,0 +1,68 @@ |
||||
.edit-gas-item { |
||||
border-radius: 24px; |
||||
color: $ui-4; |
||||
cursor: pointer; |
||||
font-size: 12px; |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 12px 0; |
||||
padding: 4px 12px; |
||||
height: 32px; |
||||
|
||||
&--selected { |
||||
background-color: $ui-1; |
||||
} |
||||
|
||||
&-disabled { |
||||
cursor: default; |
||||
} |
||||
|
||||
&__name { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
color: $ui-black; |
||||
font-size: 12px; |
||||
font-weight: bold; |
||||
width: 40%; |
||||
} |
||||
|
||||
&__icon { |
||||
margin-right: 4px; |
||||
|
||||
&-custom { |
||||
font-size: 20px; |
||||
line-height: 0; |
||||
} |
||||
} |
||||
|
||||
&__time-estimate { |
||||
display: inline-block; |
||||
width: 20%; |
||||
} |
||||
|
||||
&__fee-estimate { |
||||
display: inline-block; |
||||
width: 30%; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
&__tooltip { |
||||
display: inline-block; |
||||
text-align: right; |
||||
width: 10%; |
||||
|
||||
.info-tooltip { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
|
||||
&__time-estimate-low, |
||||
&__fee-estimate-high { |
||||
color: $secondary-1; |
||||
} |
||||
|
||||
&__time-estimate-medium, |
||||
&__time-estimate-high { |
||||
color: $success-3; |
||||
} |
||||
} |
||||
@ -0,0 +1,83 @@ |
||||
import { useEffect, useState } from 'react'; |
||||
import { useSelector } from 'react-redux'; |
||||
import BigNumber from 'bignumber.js'; |
||||
|
||||
import { GAS_ESTIMATE_TYPES } from '../../../../../shared/constants/gas'; |
||||
import { |
||||
getGasEstimateType, |
||||
getIsGasEstimatesLoading, |
||||
} from '../../../../ducks/metamask/metamask'; |
||||
import { getGasFeeTimeEstimate } from '../../../../store/actions'; |
||||
|
||||
export const useCustomTimeEstimate = ({ |
||||
gasFeeEstimates, |
||||
maxFeePerGas, |
||||
maxPriorityFeePerGas, |
||||
}) => { |
||||
const gasEstimateType = useSelector(getGasEstimateType); |
||||
const isGasEstimatesLoading = useSelector(getIsGasEstimatesLoading); |
||||
|
||||
const [customEstimatedTime, setCustomEstimatedTime] = useState(null); |
||||
|
||||
const returnNoEstimates = |
||||
isGasEstimatesLoading || |
||||
gasEstimateType !== GAS_ESTIMATE_TYPES.FEE_MARKET || |
||||
!maxPriorityFeePerGas; |
||||
|
||||
// If the user has chosen a value lower than the low gas fee estimate,
|
||||
// We'll need to use the useEffect hook below to make a call to calculate
|
||||
// the time to show
|
||||
const isUnknownLow = |
||||
gasFeeEstimates?.low && |
||||
Number(maxPriorityFeePerGas) < |
||||
Number(gasFeeEstimates.low.suggestedMaxPriorityFeePerGas); |
||||
|
||||
useEffect(() => { |
||||
if ( |
||||
isGasEstimatesLoading || |
||||
gasEstimateType !== GAS_ESTIMATE_TYPES.FEE_MARKET || |
||||
!maxPriorityFeePerGas |
||||
) |
||||
return; |
||||
if (isUnknownLow) { |
||||
// getGasFeeTimeEstimate requires parameters in string format
|
||||
getGasFeeTimeEstimate( |
||||
new BigNumber(maxPriorityFeePerGas, 10).toString(10), |
||||
new BigNumber(maxFeePerGas, 10).toString(10), |
||||
).then((result) => { |
||||
setCustomEstimatedTime(result); |
||||
}); |
||||
} |
||||
}, [ |
||||
gasEstimateType, |
||||
isUnknownLow, |
||||
isGasEstimatesLoading, |
||||
maxFeePerGas, |
||||
maxPriorityFeePerGas, |
||||
returnNoEstimates, |
||||
]); |
||||
|
||||
if (returnNoEstimates) { |
||||
return {}; |
||||
} |
||||
|
||||
const { low = {}, medium = {}, high = {} } = gasFeeEstimates; |
||||
let waitTimeEstimate = ''; |
||||
|
||||
if ( |
||||
isUnknownLow && |
||||
customEstimatedTime && |
||||
customEstimatedTime !== 'unknown' && |
||||
customEstimatedTime?.upperTimeBound !== 'unknown' |
||||
) { |
||||
waitTimeEstimate = Number(customEstimatedTime?.upperTimeBound); |
||||
} else if ( |
||||
Number(maxPriorityFeePerGas) >= Number(medium.suggestedMaxPriorityFeePerGas) |
||||
) { |
||||
waitTimeEstimate = high.minWaitTimeEstimate; |
||||
} else { |
||||
waitTimeEstimate = low.maxWaitTimeEstimate; |
||||
} |
||||
|
||||
return { waitTimeEstimate }; |
||||
}; |
||||
@ -0,0 +1 @@ |
||||
export { default } from './edit-gas-fee-popover'; |
||||
@ -0,0 +1,40 @@ |
||||
.edit-gas-fee-popover { |
||||
@media screen and (min-width: $break-large) { |
||||
max-height: 84vh; |
||||
} |
||||
|
||||
&__wrapper { |
||||
border-top: 1px solid $ui-grey; |
||||
} |
||||
|
||||
&__content { |
||||
padding: 16px 12px; |
||||
|
||||
&__header { |
||||
color: $ui-4; |
||||
font-size: 10px; |
||||
font-weight: 700; |
||||
margin: 0 12px; |
||||
|
||||
&-option { |
||||
display: inline-block; |
||||
width: 40%; |
||||
} |
||||
|
||||
&-time { |
||||
display: inline-block; |
||||
width: 20%; |
||||
} |
||||
|
||||
&-max-fee { |
||||
display: inline-block; |
||||
width: 30%; |
||||
} |
||||
} |
||||
|
||||
&__separator { |
||||
border-top: 1px solid $ui-grey; |
||||
margin: 8px 12px; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1 @@ |
||||
export { default } from './new-collectibles-notice.component'; |
||||
@ -0,0 +1,56 @@ |
||||
import React from 'react'; |
||||
import Box from '../../ui/box'; |
||||
import Dialog from '../../ui/dialog'; |
||||
import Typography from '../../ui/typography/typography'; |
||||
import { |
||||
COLORS, |
||||
TYPOGRAPHY, |
||||
TEXT_ALIGN, |
||||
FONT_WEIGHT, |
||||
DISPLAY, |
||||
} from '../../../helpers/constants/design-system'; |
||||
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||
|
||||
export default function NewCollectiblesNotice() { |
||||
const t = useI18nContext(); |
||||
|
||||
return ( |
||||
<Box marginBottom={8}> |
||||
<Dialog type="message"> |
||||
<Box display={DISPLAY.FLEX}> |
||||
<Box paddingTop={2}> |
||||
<i style={{ fontSize: '1rem' }} className="fa fa-info-circle" /> |
||||
</Box> |
||||
<Box paddingLeft={4}> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
align={TEXT_ALIGN.LEFT} |
||||
variant={TYPOGRAPHY.Paragraph} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
> |
||||
{t('newNFTsDetected')} |
||||
</Typography> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
align={TEXT_ALIGN.LEFT} |
||||
variant={TYPOGRAPHY.Paragraph} |
||||
boxProps={{ marginBottom: 4 }} |
||||
> |
||||
{t('newNFTsDetectedInfo')} |
||||
</Typography> |
||||
<a |
||||
href="#" |
||||
onClick={(e) => { |
||||
e.preventDefault(); |
||||
console.log('show preference popover'); |
||||
}} |
||||
style={{ fontSize: '.9rem' }} |
||||
> |
||||
{t('selectNFTPrivacyPreference')} |
||||
</a> |
||||
</Box> |
||||
</Box> |
||||
</Dialog> |
||||
</Box> |
||||
); |
||||
} |
||||
@ -0,0 +1,94 @@ |
||||
import React from 'react'; |
||||
import { screen } from '@testing-library/react'; |
||||
|
||||
import { ETH } from '../../../helpers/constants/common'; |
||||
import { GasFeeContextProvider } from '../../../contexts/gasFee'; |
||||
import { renderWithProvider } from '../../../../test/jest'; |
||||
import configureStore from '../../../store/store'; |
||||
|
||||
import TransactionDetail from './transaction-detail.component'; |
||||
|
||||
jest.mock('../../../store/actions', () => ({ |
||||
disconnectGasFeeEstimatePoller: jest.fn(), |
||||
getGasFeeEstimatesAndStartPolling: jest |
||||
.fn() |
||||
.mockImplementation(() => Promise.resolve()), |
||||
addPollingTokenToAppState: jest.fn(), |
||||
})); |
||||
|
||||
const render = (props) => { |
||||
const store = configureStore({ |
||||
metamask: { |
||||
nativeCurrency: ETH, |
||||
preferences: { |
||||
useNativeCurrencyAsPrimaryCurrency: true, |
||||
}, |
||||
provider: {}, |
||||
cachedBalances: {}, |
||||
accounts: { |
||||
'0xAddress': { |
||||
address: '0xAddress', |
||||
balance: '0x176e5b6f173ebe66', |
||||
}, |
||||
}, |
||||
selectedAddress: '0xAddress', |
||||
featureFlags: { advancedInlineGas: true }, |
||||
}, |
||||
}); |
||||
|
||||
return renderWithProvider( |
||||
<GasFeeContextProvider {...props}> |
||||
<TransactionDetail |
||||
onEdit={() => { |
||||
console.log('on edit'); |
||||
}} |
||||
rows={[]} |
||||
{...props} |
||||
/> |
||||
</GasFeeContextProvider>, |
||||
store, |
||||
); |
||||
}; |
||||
|
||||
describe('TransactionDetail', () => { |
||||
beforeEach(() => { |
||||
process.env.EIP_1559_V2 = true; |
||||
}); |
||||
afterEach(() => { |
||||
process.env.EIP_1559_V2 = false; |
||||
}); |
||||
it('should render edit link with text low if low gas estimates are selected', () => { |
||||
render({ transaction: { userFeeLevel: 'low' } }); |
||||
expect(screen.queryByText('🐢')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Low')).toBeInTheDocument(); |
||||
}); |
||||
it('should render edit link with text markey if medium gas estimates are selected', () => { |
||||
render({ transaction: { userFeeLevel: 'medium' } }); |
||||
expect(screen.queryByText('🦊')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Market')).toBeInTheDocument(); |
||||
}); |
||||
it('should render edit link with text agressive if high gas estimates are selected', () => { |
||||
render({ transaction: { userFeeLevel: 'high' } }); |
||||
expect(screen.queryByText('🦍')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Aggressive')).toBeInTheDocument(); |
||||
}); |
||||
it('should render edit link with text Site suggested if site suggested estimated are used', () => { |
||||
render({ |
||||
transaction: { |
||||
dappSuggestedGasFees: { maxFeePerGas: 1, maxPriorityFeePerGas: 1 }, |
||||
txParams: { maxFeePerGas: 1, maxPriorityFeePerGas: 1 }, |
||||
}, |
||||
}); |
||||
expect(screen.queryByText('🌐')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Site suggested')).toBeInTheDocument(); |
||||
expect(document.getElementsByClassName('info-tooltip')).toHaveLength(1); |
||||
}); |
||||
it('should render edit link with text advance if custom gas estimates are used', () => { |
||||
render({ |
||||
defaultEstimateToUse: 'custom', |
||||
}); |
||||
expect(screen.queryByText('⚙')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Advanced')).toBeInTheDocument(); |
||||
expect(screen.queryByText('Edit')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,42 @@ |
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; |
||||
|
||||
import Card from '.'; |
||||
|
||||
# Card |
||||
|
||||
Cards are used to group related content or actions together. |
||||
|
||||
<Canvas> |
||||
<Story id="ui-components-ui-card-card-stories-js--default-story" /> |
||||
</Canvas> |
||||
|
||||
## Component API |
||||
|
||||
The `Card` component extends the `Box` component. See the `Box` component for an extended list of props. |
||||
|
||||
<ArgsTable of={Card} /> |
||||
|
||||
## Usage |
||||
|
||||
The following describes the props and example usage for this component. |
||||
|
||||
### Padding, Border and Background Color |
||||
|
||||
The Card component has a set of default props that should meet most card use cases. There is a strong recommendation to not overwrite these to ensure our cards stay consistent across the app. |
||||
|
||||
That being said all props can be overwritten if necessary. |
||||
|
||||
```jsx |
||||
import { COLORS } from '../../../helpers/constants/design-system'; |
||||
|
||||
// To remove the border |
||||
<Card border={false} /> |
||||
// All border related props of the Box component will work |
||||
|
||||
// To remove or change padding |
||||
<Card padding={0} /> |
||||
// All padding related props of the Box component will work |
||||
|
||||
// To change the background color |
||||
<Card backgroundColor={COLORS.UI4} /> |
||||
``` |
||||
@ -1,23 +0,0 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import classnames from 'classnames'; |
||||
|
||||
export default class Card extends PureComponent { |
||||
static propTypes = { |
||||
className: PropTypes.string, |
||||
overrideClassName: PropTypes.bool, |
||||
title: PropTypes.string, |
||||
children: PropTypes.node, |
||||
}; |
||||
|
||||
render() { |
||||
const { className, overrideClassName, title } = this.props; |
||||
|
||||
return ( |
||||
<div className={classnames({ card: !overrideClassName }, className)}> |
||||
<div className="card__title">{title}</div> |
||||
{this.props.children} |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -1,21 +0,0 @@ |
||||
import React from 'react'; |
||||
import { shallow } from 'enzyme'; |
||||
import Card from './card.component'; |
||||
|
||||
describe('Card Component', () => { |
||||
it('should render a card with a title and child element', () => { |
||||
const wrapper = shallow( |
||||
<Card title="Test" className="card-test-class"> |
||||
<div className="child-test-class">Child</div> |
||||
</Card>, |
||||
); |
||||
|
||||
expect(wrapper.hasClass('card-test-class')).toStrictEqual(true); |
||||
const title = wrapper.find('.card__title'); |
||||
expect(title).toHaveLength(1); |
||||
expect(title.text()).toStrictEqual('Test'); |
||||
const child = wrapper.find('.child-test-class'); |
||||
expect(child).toHaveLength(1); |
||||
expect(child.text()).toStrictEqual('Child'); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,60 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
import Box from '../box'; |
||||
import { |
||||
BORDER_STYLE, |
||||
COLORS, |
||||
SIZES, |
||||
} from '../../../helpers/constants/design-system'; |
||||
|
||||
const Card = ({ |
||||
border = true, |
||||
padding = 4, |
||||
backgroundColor = COLORS.WHITE, |
||||
children, |
||||
...props |
||||
}) => { |
||||
const defaultBorderProps = { |
||||
borderColor: border && COLORS.UI2, |
||||
borderRadius: border && SIZES.MD, |
||||
borderStyle: border && BORDER_STYLE.SOLID, |
||||
}; |
||||
|
||||
return ( |
||||
<Box |
||||
{...{ |
||||
padding, |
||||
backgroundColor, |
||||
...defaultBorderProps, |
||||
...props, |
||||
}} |
||||
> |
||||
{children} |
||||
</Box> |
||||
); |
||||
}; |
||||
|
||||
Card.propTypes = { |
||||
/** |
||||
* Whether the Card has a border or not. |
||||
* Defaults to true |
||||
*/ |
||||
border: PropTypes.bool, |
||||
/** |
||||
* Padding of the Card component accepts number or an array of 2 numbers. |
||||
* Defaults to 4 (16px) |
||||
*/ |
||||
padding: Box.propTypes.padding, |
||||
/** |
||||
* The background color of the card |
||||
* Defaults to COLORS.WHITE |
||||
*/ |
||||
backgroundColor: Box.propTypes.backgroundColor, |
||||
/** |
||||
* The Card component accepts all Box component props |
||||
*/ |
||||
...Box.propTypes, |
||||
}; |
||||
|
||||
export default Card; |
||||
@ -0,0 +1,169 @@ |
||||
import React from 'react'; |
||||
import { |
||||
ALIGN_ITEMS, |
||||
BLOCK_SIZES, |
||||
BORDER_STYLE, |
||||
COLORS, |
||||
DISPLAY, |
||||
JUSTIFY_CONTENT, |
||||
TEXT_ALIGN, |
||||
} from '../../../helpers/constants/design-system'; |
||||
|
||||
import README from './README.mdx'; |
||||
import Card from '.'; |
||||
|
||||
const sizeOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; |
||||
|
||||
export default { |
||||
title: 'UI/Card', |
||||
id: __filename, |
||||
component: Card, |
||||
parameters: { |
||||
docs: { |
||||
page: README, |
||||
}, |
||||
}, |
||||
argTypes: { |
||||
children: { control: 'text' }, |
||||
border: { |
||||
control: 'boolean', |
||||
}, |
||||
borderStyle: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: Object.values(BORDER_STYLE), |
||||
}, |
||||
borderWidth: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: [...sizeOptions], |
||||
}, |
||||
borderColor: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: Object.values(COLORS), |
||||
}, |
||||
backgroundColor: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: Object.values(COLORS), |
||||
}, |
||||
width: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: Object.values(BLOCK_SIZES), |
||||
}, |
||||
height: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: Object.values(BLOCK_SIZES), |
||||
}, |
||||
textAlign: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: Object.values(TEXT_ALIGN), |
||||
}, |
||||
margin: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: [...sizeOptions], |
||||
}, |
||||
marginTop: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: [...sizeOptions], |
||||
}, |
||||
marginRight: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: [...sizeOptions], |
||||
}, |
||||
marginBottom: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: [...sizeOptions], |
||||
}, |
||||
marginLeft: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: [...sizeOptions], |
||||
}, |
||||
padding: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: [...sizeOptions], |
||||
}, |
||||
paddingTop: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: [...sizeOptions], |
||||
}, |
||||
paddingRight: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: [...sizeOptions], |
||||
}, |
||||
paddingBottom: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: [...sizeOptions], |
||||
}, |
||||
paddingLeft: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: [...sizeOptions], |
||||
}, |
||||
display: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: Object.values(DISPLAY), |
||||
}, |
||||
justifyContent: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: Object.values(JUSTIFY_CONTENT), |
||||
}, |
||||
alignItems: { |
||||
control: { |
||||
type: 'select', |
||||
}, |
||||
options: Object.values(ALIGN_ITEMS), |
||||
}, |
||||
}, |
||||
args: { |
||||
children: 'Card children', |
||||
}, |
||||
}; |
||||
|
||||
export const DefaultStory = (args) => <Card {...args}>{args.children}</Card>; |
||||
|
||||
DefaultStory.storyName = 'Default'; |
||||
|
||||
DefaultStory.args = { |
||||
padding: 4, |
||||
border: true, |
||||
borderWidth: 1, |
||||
borderColor: COLORS.UI2, |
||||
borderStyle: BORDER_STYLE.SOLID, |
||||
backgroundColor: COLORS.WHITE, |
||||
display: DISPLAY.BLOCK, |
||||
}; |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue