Merge pull request #79 from andrerfneves/bugfix/review-fixes
Bugfix/review fixes
This commit is contained in:
commit
0fd8900e1c
14
app/app.js
14
app/app.js
|
@ -9,7 +9,7 @@ import { configureStore, history } from './redux/create';
|
|||
import { Router } from './router/container';
|
||||
import { appTheme as theme, GlobalStyle } from './theme';
|
||||
import electronStore from '../config/electron-store';
|
||||
import { DARK, THEME_MODE } from './constants/themes';
|
||||
import { DARK, LIGHT, THEME_MODE } from './constants/themes';
|
||||
|
||||
const store = configureStore({});
|
||||
|
||||
|
@ -18,15 +18,19 @@ type State = {
|
|||
themeMode: string,
|
||||
};
|
||||
|
||||
const getInitialTheme = () => {
|
||||
const themeInStore = String(electronStore.get(THEME_MODE));
|
||||
if (themeInStore === DARK || themeInStore === LIGHT) return themeInStore;
|
||||
return DARK;
|
||||
};
|
||||
|
||||
export class App extends Component<Props, State> {
|
||||
state = {
|
||||
themeMode: electronStore.get(THEME_MODE) || DARK,
|
||||
themeMode: getInitialTheme(),
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if (!electronStore.has(THEME_MODE)) {
|
||||
electronStore.set(THEME_MODE, DARK);
|
||||
}
|
||||
electronStore.set(THEME_MODE, getInitialTheme());
|
||||
|
||||
electronStore.onDidChange(THEME_MODE, newValue => this.setState({ themeMode: newValue }));
|
||||
}
|
||||
|
|
|
@ -108,8 +108,8 @@ class Component extends PureComponent<Props, State> {
|
|||
progress={progress}
|
||||
responsive
|
||||
showPercentage={false}
|
||||
progressColor={theme.colors.activeItem}
|
||||
bgColor={theme.colors.inactiveItem}
|
||||
progressColor={theme.colors.activeItem(this.props)}
|
||||
bgColor={theme.colors.inactiveItem(this.props)}
|
||||
/>
|
||||
</CircleWrapper>
|
||||
<LoadingText value={message} />
|
||||
|
|
|
@ -18,8 +18,6 @@ import { TextComponent } from './text';
|
|||
import { RowComponent } from './row';
|
||||
import { ColumnComponent } from './column';
|
||||
|
||||
import { appTheme } from '../theme';
|
||||
|
||||
import { formatNumber } from '../utils/format-number';
|
||||
import { openExternal } from '../utils/open-external';
|
||||
|
||||
|
@ -164,7 +162,11 @@ const Component = ({
|
|||
append: `${isReceived ? '+' : '-'}ZEC `,
|
||||
value: amount,
|
||||
})}
|
||||
color={isReceived ? appTheme.colors.transactionReceived : appTheme.colors.transactionSent}
|
||||
color={
|
||||
isReceived
|
||||
? theme.colors.transactionReceived({ theme })
|
||||
: theme.colors.transactionSent({ theme })
|
||||
}
|
||||
/>
|
||||
<TextComponent
|
||||
value={formatNumber({
|
||||
|
@ -172,7 +174,7 @@ const Component = ({
|
|||
value: new BigNumber(amount).times(zecPrice).toNumber(),
|
||||
})}
|
||||
size={1.5}
|
||||
color={appTheme.colors.transactionDetailsLabel}
|
||||
color={theme.colors.transactionDetailsLabel({ theme })}
|
||||
/>
|
||||
</DetailsWrapper>
|
||||
<InfoRow>
|
||||
|
@ -181,7 +183,11 @@ const Component = ({
|
|||
<TextComponent value={dateFns.format(new Date(date), 'MMMM D, YYYY HH:MMA')} />
|
||||
</ColumnComponent>
|
||||
<ColumnComponent>
|
||||
<TextComponent value='FEES' isBold color={appTheme.colors.transactionDetailsLabel} />
|
||||
<TextComponent
|
||||
value='FEES'
|
||||
isBold
|
||||
color={theme.colors.transactionDetailsLabel({ theme })}
|
||||
/>
|
||||
<TextComponent
|
||||
value={
|
||||
fees === 'N/A'
|
||||
|
|
|
@ -125,9 +125,16 @@ const Component = ({
|
|||
<TextComponent
|
||||
isBold
|
||||
value={transactionValueInZec}
|
||||
color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
|
||||
color={
|
||||
isReceived
|
||||
? theme.colors.transactionReceived({ theme })
|
||||
: theme.colors.transactionSent({ theme })
|
||||
}
|
||||
/>
|
||||
<TextComponent
|
||||
value={transactionValueInUsd}
|
||||
color={theme.colors.inactiveItem({ theme })}
|
||||
/>
|
||||
<TextComponent value={transactionValueInUsd} color={theme.colors.inactiveItem} />
|
||||
</ColumnComponent>
|
||||
</Wrapper>
|
||||
)}
|
||||
|
|
|
@ -80,7 +80,7 @@ const AmountWrapper = styled.div`
|
|||
content: 'ZEC';
|
||||
font-family: ${props => props.theme.fontFamily};
|
||||
position: absolute;
|
||||
margin-top: 15px;
|
||||
margin-top: 16px;
|
||||
margin-left: 15px;
|
||||
display: block;
|
||||
transition: all 0.05s ease-in-out;
|
||||
|
@ -361,7 +361,11 @@ class Component extends PureComponent<Props, State> {
|
|||
}
|
||||
|
||||
updateTooltipVisibility = ({ balance, amount }: { balance: number, amount: number }) => {
|
||||
this.setState({ showBalanceTooltip: new BigNumber(amount).gt(balance) });
|
||||
const { from, to } = this.state;
|
||||
|
||||
this.setState({
|
||||
showBalanceTooltip: !from || !to ? false : new BigNumber(amount).gt(balance),
|
||||
});
|
||||
};
|
||||
|
||||
getAmountWithFee = () => {
|
||||
|
@ -379,11 +383,15 @@ class Component extends PureComponent<Props, State> {
|
|||
const { amount } = this.state;
|
||||
|
||||
if (field === 'to') {
|
||||
this.setState(() => ({ [field]: value }), () => validateAddress({ address: String(value) }));
|
||||
} else if (field === 'amount') {
|
||||
this.setState(
|
||||
() => ({ [field]: value }),
|
||||
() => this.updateTooltipVisibility({ balance, amount: new BigNumber(value).toNumber() }),
|
||||
() => {
|
||||
validateAddress({ address: String(value) });
|
||||
this.updateTooltipVisibility({
|
||||
balance,
|
||||
amount: new BigNumber(amount).toNumber(),
|
||||
});
|
||||
},
|
||||
);
|
||||
} else {
|
||||
if (field === 'from') getAddressBalance({ address: String(value) });
|
||||
|
@ -392,6 +400,10 @@ class Component extends PureComponent<Props, State> {
|
|||
() => ({ [field]: value }),
|
||||
() => {
|
||||
if (field === 'fee') this.handleChange('amount')(amount);
|
||||
this.updateTooltipVisibility({
|
||||
balance,
|
||||
amount: new BigNumber(field === 'amount' ? value : amount).toNumber(),
|
||||
});
|
||||
},
|
||||
);
|
||||
}
|
||||
|
@ -461,7 +473,6 @@ class Component extends PureComponent<Props, State> {
|
|||
const feeValue = new BigNumber(fee);
|
||||
|
||||
if (feeValue.isEqualTo(FEES.LOW)) return `Low ZEC ${feeValue.toString()}`;
|
||||
// eslint-disable-next-line max-len
|
||||
if (feeValue.isEqualTo(FEES.MEDIUM)) return `Medium ZEC ${feeValue.toString()}`;
|
||||
if (feeValue.isEqualTo(FEES.HIGH)) return `High ZEC ${feeValue.toString()}`;
|
||||
|
||||
|
@ -474,12 +485,12 @@ class Component extends PureComponent<Props, State> {
|
|||
return isToAddressValid ? (
|
||||
<ValidateWrapper alignItems='center'>
|
||||
<ValidateStatusIcon src={ValidIcon} />
|
||||
<ValidateItemLabel value='VALID' color={theme.colors.transactionReceived} />
|
||||
<ValidateItemLabel value='VALID' color={theme.colors.transactionReceived(this.props)} />
|
||||
</ValidateWrapper>
|
||||
) : (
|
||||
<ValidateWrapper alignItems='center'>
|
||||
<ValidateStatusIcon src={InvalidIcon} />
|
||||
<ValidateItemLabel value='INVALID' color={theme.colors.transactionSent} />
|
||||
<ValidateItemLabel value='INVALID' color={theme.colors.transactionSent(this.props)} />
|
||||
</ValidateWrapper>
|
||||
);
|
||||
};
|
||||
|
@ -712,8 +723,8 @@ class Component extends PureComponent<Props, State> {
|
|||
onChange={this.handleChange('fee')}
|
||||
value={String(fee)}
|
||||
disabled={feeType !== FEES.CUSTOM}
|
||||
bgColor={theme.colors.sendAdditionalInputBg}
|
||||
color={theme.colors.sendAdditionalInputText}
|
||||
bgColor={theme.colors.sendAdditionalInputBg(this.props)}
|
||||
color={theme.colors.sendAdditionalInputText(this.props)}
|
||||
name='fee'
|
||||
/>
|
||||
</ColumnComponent>
|
||||
|
@ -721,7 +732,7 @@ class Component extends PureComponent<Props, State> {
|
|||
<SelectComponent
|
||||
placement='top'
|
||||
value={String(feeType)}
|
||||
bgColor={theme.colors.sendAdditionalInputBg}
|
||||
bgColor={theme.colors.sendAdditionalInputBg(this.props)}
|
||||
onChange={this.handleChangeFeeType}
|
||||
options={Object.keys(FEES).map(cur => ({
|
||||
label: cur.toLowerCase(),
|
||||
|
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">88%</text><text x="107" y="14">88%</text></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">89%</text><text x="107" y="14">89%</text></g></svg>
|
Before Width: | Height: | Size: 745 B After Width: | Height: | Size: 745 B |
Loading…
Reference in New Issue