Add store for MethodDecoding (#3821)
* Add Loader to Transactions * Add Method Decoding Store (better fetching of methods) * Load locally stored ABI in MethodDecodingStore * Fixes UI glitches along the way * Linting * Add method decoding from User Contracts
This commit is contained in:
Nicolas Gotchac
Jaco Greeff
parent
22ac80d98f
commit
0cb16ae589
@ -19,6 +19,8 @@ import { isEqual } from 'lodash';
|
||||
import { fetchBalances } from './balancesActions';
|
||||
import { attachWallets } from './walletActions';
|
||||
|
||||
import MethodDecodingStore from '~/ui/MethodDecoding/methodDecodingStore';
|
||||
|
||||
export function personalAccountsInfo (accountsInfo) {
|
||||
const accounts = {};
|
||||
const contacts = {};
|
||||
@ -41,6 +43,9 @@ export function personalAccountsInfo (accountsInfo) {
|
||||
}
|
||||
});
|
||||
|
||||
// Load user contracts for Method Decoding
|
||||
MethodDecodingStore.loadContracts(contracts);
|
||||
|
||||
return (dispatch) => {
|
||||
const data = {
|
||||
accountsInfo,
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { MenuItem } from 'material-ui';
|
||||
import { isEqual, pick } from 'lodash';
|
||||
|
||||
import AutoComplete from '../AutoComplete';
|
||||
import IdentityIcon from '../../IdentityIcon';
|
||||
@ -31,19 +32,20 @@ export default class AddressSelect extends Component {
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
disabled: PropTypes.bool,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
|
||||
accounts: PropTypes.object,
|
||||
allowInput: PropTypes.bool,
|
||||
balances: PropTypes.object,
|
||||
contacts: PropTypes.object,
|
||||
contracts: PropTypes.object,
|
||||
wallets: PropTypes.object,
|
||||
label: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
error: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
tokens: PropTypes.object,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
allowInput: PropTypes.bool,
|
||||
balances: PropTypes.object
|
||||
value: PropTypes.string,
|
||||
wallets: PropTypes.object
|
||||
}
|
||||
|
||||
state = {
|
||||
@ -53,6 +55,9 @@ export default class AddressSelect extends Component {
|
||||
value: ''
|
||||
}
|
||||
|
||||
// Cache autocomplete items
|
||||
items = {}
|
||||
|
||||
entriesFromProps (props = this.props) {
|
||||
const { accounts = {}, contacts = {}, contracts = {}, wallets = {} } = props;
|
||||
|
||||
@ -76,6 +81,15 @@ export default class AddressSelect extends Component {
|
||||
return { autocompleteEntries, entries };
|
||||
}
|
||||
|
||||
shouldComponentUpdate (nextProps, nextState) {
|
||||
const keys = [ 'error', 'value' ];
|
||||
|
||||
const prevValues = pick(this.props, keys);
|
||||
const nextValues = pick(nextProps, keys);
|
||||
|
||||
return !isEqual(prevValues, nextValues);
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
const { value } = this.props;
|
||||
const { entries, autocompleteEntries } = this.entriesFromProps();
|
||||
@ -143,14 +157,21 @@ export default class AddressSelect extends Component {
|
||||
renderItem = (entry) => {
|
||||
const { address, name } = entry;
|
||||
|
||||
return {
|
||||
const _balance = this.getBalance(address);
|
||||
const balance = _balance ? _balance.toNumber() : _balance;
|
||||
|
||||
if (!this.items[address] || this.items[address].balance !== balance) {
|
||||
this.items[address] = {
|
||||
text: name && name.toUpperCase() || address,
|
||||
value: this.renderMenuItem(address),
|
||||
address
|
||||
address, balance
|
||||
};
|
||||
}
|
||||
|
||||
renderBalance (address) {
|
||||
return this.items[address];
|
||||
}
|
||||
|
||||
getBalance (address) {
|
||||
const { balances = {} } = this.props;
|
||||
const balance = balances[address];
|
||||
|
||||
@ -164,7 +185,12 @@ export default class AddressSelect extends Component {
|
||||
return null;
|
||||
}
|
||||
|
||||
const value = fromWei(ethToken.value);
|
||||
return ethToken.value;
|
||||
}
|
||||
|
||||
renderBalance (address) {
|
||||
const balance = this.getBalance(address);
|
||||
const value = fromWei(balance);
|
||||
|
||||
return (
|
||||
<div className={ styles.balance }>
|
||||
|
||||
24
js/src/ui/Form/AutoComplete/autocomplete.css
Normal file
24
js/src/ui/Form/AutoComplete/autocomplete.css
Normal file
@ -0,0 +1,24 @@
|
||||
/* Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
/* This file is part of Parity.
|
||||
/*
|
||||
/* Parity is free software: you can redistribute it and/or modify
|
||||
/* it under the terms of the GNU General Public License as published by
|
||||
/* the Free Software Foundation, either version 3 of the License, or
|
||||
/* (at your option) any later version.
|
||||
/*
|
||||
/* Parity is distributed in the hope that it will be useful,
|
||||
/* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
/* GNU General Public License for more details.
|
||||
/*
|
||||
/* You should have received a copy of the GNU General Public License
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.item {
|
||||
&:last-child {
|
||||
&.divider {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -21,13 +21,18 @@ import { PopoverAnimationVertical } from 'material-ui/Popover';
|
||||
|
||||
import { isEqual } from 'lodash';
|
||||
|
||||
import styles from './autocomplete.css';
|
||||
|
||||
// Hack to prevent "Unknown prop `disableFocusRipple` on <hr> tag" error
|
||||
class Divider extends Component {
|
||||
static muiName = MUIDivider.muiName;
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div style={ { margin: '0.25em 0' } }>
|
||||
<div
|
||||
style={ { margin: '0.25em 0' } }
|
||||
className={ [styles.item, styles.divider].join(' ') }
|
||||
>
|
||||
<MUIDivider style={ { height: 2 } } />
|
||||
</div>
|
||||
);
|
||||
@ -143,11 +148,16 @@ export default class AutoComplete extends Component {
|
||||
|
||||
if (renderItem && typeof renderItem === 'function') {
|
||||
item = renderItem(entry);
|
||||
|
||||
// Add the item class to the entry
|
||||
const classNames = [ styles.item ].concat(item.value.props.className);
|
||||
item.value = React.cloneElement(item.value, { className: classNames.join(' ') });
|
||||
} else {
|
||||
item = {
|
||||
text: entry,
|
||||
value: (
|
||||
<MenuItem
|
||||
className={ styles.item }
|
||||
primaryText={ entry }
|
||||
/>
|
||||
)
|
||||
@ -160,6 +170,7 @@ export default class AutoComplete extends Component {
|
||||
}
|
||||
|
||||
item.divider = currentDivider;
|
||||
item.entry = entry;
|
||||
|
||||
return item;
|
||||
}).filter((item) => item !== undefined);
|
||||
@ -215,13 +226,8 @@ export default class AutoComplete extends Component {
|
||||
return;
|
||||
}
|
||||
|
||||
const { entries } = this.props;
|
||||
|
||||
const entriesArray = (entries instanceof Array)
|
||||
? entries
|
||||
: Object.values(entries);
|
||||
|
||||
const entry = entriesArray[idx];
|
||||
const { dataSource } = this.state;
|
||||
const { entry } = dataSource[idx];
|
||||
|
||||
this.handleOnChange(entry);
|
||||
this.setState({ entry, open: false });
|
||||
|
||||
@ -17,16 +17,14 @@
|
||||
import BigNumber from 'bignumber.js';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import CircularProgress from 'material-ui/CircularProgress';
|
||||
|
||||
import Contracts from '~/contracts';
|
||||
import { Input, InputAddress } from '../Form';
|
||||
import MethodDecodingStore from './methodDecodingStore';
|
||||
|
||||
import styles from './methodDecoding.css';
|
||||
|
||||
const ASCII_INPUT = /^[a-z0-9\s,?;.:/!()-_@'"#]+$/i;
|
||||
const CONTRACT_CREATE = '0x60606040';
|
||||
const TOKEN_METHODS = {
|
||||
'0xa9059cbb': 'transfer(to,value)'
|
||||
};
|
||||
@ -38,19 +36,17 @@ class MethodDecoding extends Component {
|
||||
|
||||
static propTypes = {
|
||||
address: PropTypes.string.isRequired,
|
||||
tokens: PropTypes.object,
|
||||
token: PropTypes.object,
|
||||
transaction: PropTypes.object,
|
||||
historic: PropTypes.bool
|
||||
}
|
||||
|
||||
state = {
|
||||
contractAddress: null,
|
||||
method: null,
|
||||
methodName: null,
|
||||
methodInputs: null,
|
||||
methodParams: null,
|
||||
methodSignature: null,
|
||||
token: null,
|
||||
isContract: false,
|
||||
isDeploy: false,
|
||||
isReceived: false,
|
||||
@ -59,14 +55,29 @@ class MethodDecoding extends Component {
|
||||
inputType: 'auto'
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
const lookupResult = this.lookup();
|
||||
methodDecodingStore = MethodDecodingStore.get(this.context.api);
|
||||
|
||||
if (typeof lookupResult === 'object' && typeof lookupResult.then === 'function') {
|
||||
lookupResult.then(() => this.setState({ isLoading: false }));
|
||||
} else {
|
||||
this.setState({ isLoading: false });
|
||||
}
|
||||
componentWillMount () {
|
||||
const { address, transaction } = this.props;
|
||||
|
||||
this
|
||||
.methodDecodingStore
|
||||
.lookup(address, transaction)
|
||||
.then((lookup) => {
|
||||
const newState = {
|
||||
methodName: lookup.name,
|
||||
methodInputs: lookup.inputs,
|
||||
methodParams: lookup.params,
|
||||
methodSignature: lookup.signature,
|
||||
|
||||
isContract: lookup.contract,
|
||||
isDeploy: lookup.deploy,
|
||||
isLoading: false,
|
||||
isReceived: lookup.received
|
||||
};
|
||||
|
||||
this.setState(newState);
|
||||
});
|
||||
}
|
||||
|
||||
render () {
|
||||
@ -116,7 +127,8 @@ class MethodDecoding extends Component {
|
||||
}
|
||||
|
||||
renderAction () {
|
||||
const { methodName, methodInputs, methodSignature, token, isDeploy, isReceived, isContract } = this.state;
|
||||
const { token } = this.props;
|
||||
const { methodName, methodInputs, methodSignature, isDeploy, isReceived, isContract } = this.state;
|
||||
|
||||
if (isDeploy) {
|
||||
return this.renderDeploy();
|
||||
@ -378,7 +390,7 @@ class MethodDecoding extends Component {
|
||||
}
|
||||
|
||||
renderTokenValue (value) {
|
||||
const { token } = this.state;
|
||||
const { token } = this.props;
|
||||
|
||||
return (
|
||||
<span className={ styles.tokenValue }>
|
||||
@ -436,96 +448,18 @@ class MethodDecoding extends Component {
|
||||
});
|
||||
}
|
||||
|
||||
lookup () {
|
||||
const { transaction } = this.props;
|
||||
|
||||
if (!transaction) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { api } = this.context;
|
||||
const { address, tokens } = this.props;
|
||||
|
||||
const isReceived = transaction.to === address;
|
||||
const contractAddress = isReceived ? transaction.from : transaction.to;
|
||||
const input = transaction.input || transaction.data;
|
||||
|
||||
const token = (tokens || {})[contractAddress];
|
||||
this.setState({ token, isReceived, contractAddress });
|
||||
|
||||
if (!input || input === '0x') {
|
||||
return;
|
||||
}
|
||||
|
||||
const { signature, paramdata } = api.util.decodeCallData(input);
|
||||
this.setState({ methodSignature: signature, methodParams: paramdata });
|
||||
|
||||
if (!signature || signature === CONTRACT_CREATE || transaction.creates) {
|
||||
this.setState({ isDeploy: true });
|
||||
return;
|
||||
}
|
||||
|
||||
if (contractAddress === '0x') {
|
||||
return;
|
||||
}
|
||||
|
||||
return api.eth
|
||||
.getCode(contractAddress || transaction.creates)
|
||||
.then((bytecode) => {
|
||||
const isContract = bytecode && /^(0x)?([0]*[1-9a-f]+[0]*)+$/.test(bytecode);
|
||||
|
||||
this.setState({ isContract });
|
||||
|
||||
if (!isContract) {
|
||||
return;
|
||||
}
|
||||
|
||||
return Contracts.get()
|
||||
.signatureReg
|
||||
.lookup(signature)
|
||||
.then((method) => {
|
||||
let methodInputs = null;
|
||||
let methodName = null;
|
||||
|
||||
if (method && method.length) {
|
||||
const { methodParams } = this.state;
|
||||
const abi = api.util.methodToAbi(method);
|
||||
|
||||
methodName = abi.name;
|
||||
methodInputs = api.util
|
||||
.decodeMethodInput(abi, methodParams)
|
||||
.map((value, index) => {
|
||||
const type = abi.inputs[index].type;
|
||||
|
||||
return { type, value };
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({
|
||||
method,
|
||||
methodName,
|
||||
methodInputs,
|
||||
bytecode
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn('lookup', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { tokens } = state.balances;
|
||||
function mapStateToProps (initState, initProps) {
|
||||
const { tokens } = initState.balances;
|
||||
const { address } = initProps;
|
||||
|
||||
return { tokens };
|
||||
const token = (tokens || {})[address];
|
||||
|
||||
return () => {
|
||||
return { token };
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({}, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
mapStateToProps
|
||||
)(MethodDecoding);
|
||||
|
||||
216
js/src/ui/MethodDecoding/methodDecodingStore.js
Normal file
216
js/src/ui/MethodDecoding/methodDecodingStore.js
Normal file
@ -0,0 +1,216 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import Contracts from '~/contracts';
|
||||
import Abi from '~/abi';
|
||||
import * as abis from '~/contracts/abi';
|
||||
|
||||
const CONTRACT_CREATE = '0x60606040';
|
||||
|
||||
let instance = null;
|
||||
|
||||
export default class MethodDecodingStore {
|
||||
|
||||
api = null;
|
||||
|
||||
_isContract = {};
|
||||
_methods = {};
|
||||
|
||||
constructor (api, contracts = {}) {
|
||||
this.api = api;
|
||||
|
||||
// Load the signatures from the local ABIs
|
||||
Object.keys(abis).forEach((abiKey) => {
|
||||
this.loadFromAbi(abis[abiKey]);
|
||||
});
|
||||
|
||||
this.addContracts(contracts);
|
||||
}
|
||||
|
||||
addContracts (contracts = {}) {
|
||||
// Load the User defined contracts
|
||||
Object.values(contracts).forEach((contract) => {
|
||||
if (!contract || !contract.meta || !contract.meta.abi) {
|
||||
return;
|
||||
}
|
||||
this.loadFromAbi(contract.meta.abi);
|
||||
});
|
||||
}
|
||||
|
||||
loadFromAbi (_abi) {
|
||||
const abi = new Abi(_abi);
|
||||
abi
|
||||
.functions
|
||||
.map((f) => ({ sign: f.signature, abi: f.abi }))
|
||||
.forEach((mapping) => {
|
||||
const sign = (/^0x/.test(mapping.sign) ? '' : '0x') + mapping.sign;
|
||||
this._methods[sign] = mapping.abi;
|
||||
});
|
||||
}
|
||||
|
||||
static get (api, contracts = {}) {
|
||||
if (!instance) {
|
||||
instance = new MethodDecodingStore(api, contracts);
|
||||
}
|
||||
|
||||
// Set API if not set yet
|
||||
if (!instance.api) {
|
||||
instance.api = api;
|
||||
}
|
||||
|
||||
return instance;
|
||||
}
|
||||
|
||||
static loadContracts (contracts = {}) {
|
||||
if (!instance) {
|
||||
// Just create the instance with null API
|
||||
MethodDecodingStore.get(null, contracts);
|
||||
} else {
|
||||
instance.addContracts(contracts);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Looks up a transaction in the context of the given
|
||||
* address
|
||||
*
|
||||
* @param {String} address The address contract
|
||||
* @param {Object} transaction The transaction to lookup
|
||||
* @return {Promise} The result of the lookup. Resolves with:
|
||||
* {
|
||||
* contract: Boolean,
|
||||
* deploy: Boolean,
|
||||
* inputs: Array,
|
||||
* name: String,
|
||||
* params: Array,
|
||||
* received: Boolean,
|
||||
* signature: String
|
||||
* }
|
||||
*/
|
||||
lookup (address, transaction) {
|
||||
const result = {};
|
||||
|
||||
if (!transaction) {
|
||||
return Promise.resolve(result);
|
||||
}
|
||||
|
||||
const isReceived = transaction.to === address;
|
||||
const contractAddress = isReceived ? transaction.from : transaction.to;
|
||||
const input = transaction.input || transaction.data;
|
||||
|
||||
result.received = isReceived;
|
||||
|
||||
// No input, should be a ETH transfer
|
||||
if (!input || input === '0x') {
|
||||
return Promise.resolve(result);
|
||||
}
|
||||
|
||||
const { signature, paramdata } = this.api.util.decodeCallData(input);
|
||||
result.signature = signature;
|
||||
result.params = paramdata;
|
||||
|
||||
// Contract deployment
|
||||
if (!signature || signature === CONTRACT_CREATE || transaction.creates) {
|
||||
return Promise.resolve({ ...result, deploy: true });
|
||||
}
|
||||
|
||||
return this
|
||||
.isContract(contractAddress || transaction.creates)
|
||||
.then((isContract) => {
|
||||
result.contract = isContract;
|
||||
|
||||
if (!isContract) {
|
||||
return result;
|
||||
}
|
||||
|
||||
return this
|
||||
.fetchMethodAbi(signature)
|
||||
.then((abi) => {
|
||||
let methodName = null;
|
||||
let methodInputs = null;
|
||||
|
||||
if (abi) {
|
||||
methodName = abi.name;
|
||||
methodInputs = this.api.util
|
||||
.decodeMethodInput(abi, paramdata)
|
||||
.map((value, index) => {
|
||||
const type = abi.inputs[index].type;
|
||||
return { type, value };
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
...result,
|
||||
name: methodName,
|
||||
inputs: methodInputs
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn('lookup', error);
|
||||
});
|
||||
}
|
||||
|
||||
fetchMethodAbi (signature) {
|
||||
if (this._methods[signature] !== undefined) {
|
||||
return Promise.resolve(this._methods[signature]);
|
||||
}
|
||||
|
||||
this._methods[signature] = Contracts.get()
|
||||
.signatureReg
|
||||
.lookup(signature)
|
||||
.then((method) => {
|
||||
let abi = null;
|
||||
|
||||
if (method && method.length) {
|
||||
abi = this.api.util.methodToAbi(method);
|
||||
}
|
||||
|
||||
this._methods[signature] = abi;
|
||||
return this._methods[signature];
|
||||
});
|
||||
|
||||
return Promise.resolve(this._methods[signature]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks (and caches) if the given address is a
|
||||
* Contract or not, from its fetched bytecode
|
||||
*/
|
||||
isContract (contractAddress) {
|
||||
// If zero address, it isn't a contract
|
||||
if (/^(0x)?0*$/.test(contractAddress)) {
|
||||
return Promise.resolve(false);
|
||||
}
|
||||
|
||||
if (this._isContract[contractAddress]) {
|
||||
return Promise.resolve(this._isContract[contractAddress]);
|
||||
}
|
||||
|
||||
this._isContract[contractAddress] = this.api.eth
|
||||
.getCode(contractAddress)
|
||||
.then((bytecode) => {
|
||||
// Is a contract if the address contains *valid* bytecode
|
||||
const _isContract = bytecode && /^(0x)?([0]*[1-9a-f]+[0]*)+$/.test(bytecode);
|
||||
|
||||
this._isContract[contractAddress] = _isContract;
|
||||
return this._isContract[contractAddress];
|
||||
});
|
||||
|
||||
return Promise.resolve(this._isContract[contractAddress]);
|
||||
}
|
||||
|
||||
}
|
||||
@ -19,7 +19,7 @@ import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import etherscan from '~/3rdparty/etherscan';
|
||||
import { Container, TxList } from '~/ui';
|
||||
import { Container, TxList, Loading } from '~/ui';
|
||||
|
||||
import styles from './transactions.css';
|
||||
|
||||
@ -60,19 +60,32 @@ class Transactions extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { address } = this.props;
|
||||
const { hashes } = this.state;
|
||||
|
||||
return (
|
||||
<Container title='transactions'>
|
||||
<TxList
|
||||
address={ address }
|
||||
hashes={ hashes } />
|
||||
{ this.renderTransactionList() }
|
||||
{ this.renderEtherscanFooter() }
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
renderTransactionList () {
|
||||
const { address } = this.props;
|
||||
const { hashes, loading } = this.state;
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Loading />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<TxList
|
||||
address={ address }
|
||||
hashes={ hashes }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderEtherscanFooter () {
|
||||
const { traceMode } = this.props;
|
||||
|
||||
|
||||
@ -32,6 +32,10 @@
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
|
||||
// Fallback for browsers not supporting `calc`
|
||||
min-height: 90vh;
|
||||
min-height: calc(100vh - 8em);
|
||||
|
||||
> * {
|
||||
margin: 0;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user