ryanml
3 years ago
commit
5a8ca9d16e
@ -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,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, |
||||||
|
}; |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import * as React from 'react'; |
||||||
|
import { render } from '@testing-library/react'; |
||||||
|
import Card from '.'; |
||||||
|
|
||||||
|
describe('Card', () => { |
||||||
|
it('should render the Card without crashing', () => { |
||||||
|
const { getByText } = render(<Card>Card content</Card>); |
||||||
|
|
||||||
|
expect(getByText('Card content')).toBeDefined(); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -1 +1 @@ |
|||||||
export { default } from './card.component'; |
export { default } from './card'; |
||||||
|
|||||||
@ -1,11 +0,0 @@ |
|||||||
.card { |
|
||||||
border-radius: 4px; |
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); |
|
||||||
padding: 8px; |
|
||||||
|
|
||||||
&__title { |
|
||||||
border-bottom: 1px solid #d8d8d8; |
|
||||||
padding-bottom: 4px; |
|
||||||
text-transform: capitalize; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; |
||||||
|
|
||||||
|
import Chip from '.'; |
||||||
|
|
||||||
|
# Chip |
||||||
|
|
||||||
|
Chips are compact elements that represent an input, status, or action. |
||||||
|
|
||||||
|
<Canvas> |
||||||
|
<Story id="ui-components-ui-chip-chip-stories-js--default-story" /> |
||||||
|
</Canvas> |
||||||
|
|
||||||
|
## Component API |
||||||
|
|
||||||
|
<ArgsTable of={Chip} /> |
||||||
@ -0,0 +1,37 @@ |
|||||||
|
import React, { createContext, useContext } from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { useGasFeeInputs } from '../hooks/gasFeeInput/useGasFeeInputs'; |
||||||
|
|
||||||
|
export const GasFeeContext = createContext({}); |
||||||
|
|
||||||
|
export const GasFeeContextProvider = ({ |
||||||
|
children, |
||||||
|
defaultEstimateToUse, |
||||||
|
transaction, |
||||||
|
minimumGasLimit, |
||||||
|
editGasMode, |
||||||
|
}) => { |
||||||
|
const gasFeeDetails = useGasFeeInputs( |
||||||
|
defaultEstimateToUse, |
||||||
|
transaction, |
||||||
|
minimumGasLimit, |
||||||
|
editGasMode, |
||||||
|
); |
||||||
|
return ( |
||||||
|
<GasFeeContext.Provider value={gasFeeDetails}> |
||||||
|
{children} |
||||||
|
</GasFeeContext.Provider> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export function useGasFeeContext() { |
||||||
|
return useContext(GasFeeContext); |
||||||
|
} |
||||||
|
|
||||||
|
GasFeeContextProvider.propTypes = { |
||||||
|
children: PropTypes.node.isRequired, |
||||||
|
defaultEstimateToUse: PropTypes.string, |
||||||
|
transaction: PropTypes.object.isRequired, |
||||||
|
minimumGasLimit: PropTypes.string, |
||||||
|
editGasMode: PropTypes.string, |
||||||
|
}; |
||||||
@ -0,0 +1,65 @@ |
|||||||
|
import React, { useState } from 'react'; |
||||||
|
import { useHistory } from 'react-router-dom'; |
||||||
|
import { useI18nContext } from '../../hooks/useI18nContext'; |
||||||
|
import { DEFAULT_ROUTE } from '../../helpers/constants/routes'; |
||||||
|
|
||||||
|
import Box from '../../components/ui/box'; |
||||||
|
import TextField from '../../components/ui/text-field'; |
||||||
|
import PageContainer from '../../components/ui/page-container'; |
||||||
|
|
||||||
|
export default function AddCollectible() { |
||||||
|
const t = useI18nContext(); |
||||||
|
const history = useHistory(); |
||||||
|
|
||||||
|
const [address, setAddress] = useState(''); |
||||||
|
const [tokenId, setTokenId] = useState(''); |
||||||
|
|
||||||
|
return ( |
||||||
|
<PageContainer |
||||||
|
title={t('addNFT')} |
||||||
|
onSubmit={() => { |
||||||
|
console.log( |
||||||
|
`Adding collectible with ID: ${tokenId} and address ${address}`, |
||||||
|
); |
||||||
|
history.push(DEFAULT_ROUTE); |
||||||
|
}} |
||||||
|
submitText={t('add')} |
||||||
|
onCancel={() => { |
||||||
|
history.push(DEFAULT_ROUTE); |
||||||
|
}} |
||||||
|
onClose={() => { |
||||||
|
history.push(DEFAULT_ROUTE); |
||||||
|
}} |
||||||
|
disabled={false} |
||||||
|
contentComponent={ |
||||||
|
<Box padding={4}> |
||||||
|
<Box> |
||||||
|
<TextField |
||||||
|
id="address" |
||||||
|
label={t('address')} |
||||||
|
placeholder="0x..." |
||||||
|
type="text" |
||||||
|
value={address} |
||||||
|
onChange={(e) => setAddress(e.target.value)} |
||||||
|
fullWidth |
||||||
|
autoFocus |
||||||
|
margin="normal" |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
<Box> |
||||||
|
<TextField |
||||||
|
id="token-id" |
||||||
|
label={t('id')} |
||||||
|
placeholder={t('nftTokenIdPlaceholder')} |
||||||
|
type="number" |
||||||
|
value={tokenId} |
||||||
|
onChange={(e) => setTokenId(e.target.value)} |
||||||
|
fullWidth |
||||||
|
margin="normal" |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './add-collectible.component'; |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue