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 { Router } from './router/container';
|
||||||
import { appTheme as theme, GlobalStyle } from './theme';
|
import { appTheme as theme, GlobalStyle } from './theme';
|
||||||
import electronStore from '../config/electron-store';
|
import electronStore from '../config/electron-store';
|
||||||
import { DARK, THEME_MODE } from './constants/themes';
|
import { DARK, LIGHT, THEME_MODE } from './constants/themes';
|
||||||
|
|
||||||
const store = configureStore({});
|
const store = configureStore({});
|
||||||
|
|
||||||
|
@ -18,15 +18,19 @@ type State = {
|
||||||
themeMode: string,
|
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> {
|
export class App extends Component<Props, State> {
|
||||||
state = {
|
state = {
|
||||||
themeMode: electronStore.get(THEME_MODE) || DARK,
|
themeMode: getInitialTheme(),
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
if (!electronStore.has(THEME_MODE)) {
|
electronStore.set(THEME_MODE, getInitialTheme());
|
||||||
electronStore.set(THEME_MODE, DARK);
|
|
||||||
}
|
|
||||||
|
|
||||||
electronStore.onDidChange(THEME_MODE, newValue => this.setState({ themeMode: newValue }));
|
electronStore.onDidChange(THEME_MODE, newValue => this.setState({ themeMode: newValue }));
|
||||||
}
|
}
|
||||||
|
|
|
@ -108,8 +108,8 @@ class Component extends PureComponent<Props, State> {
|
||||||
progress={progress}
|
progress={progress}
|
||||||
responsive
|
responsive
|
||||||
showPercentage={false}
|
showPercentage={false}
|
||||||
progressColor={theme.colors.activeItem}
|
progressColor={theme.colors.activeItem(this.props)}
|
||||||
bgColor={theme.colors.inactiveItem}
|
bgColor={theme.colors.inactiveItem(this.props)}
|
||||||
/>
|
/>
|
||||||
</CircleWrapper>
|
</CircleWrapper>
|
||||||
<LoadingText value={message} />
|
<LoadingText value={message} />
|
||||||
|
|
|
@ -18,8 +18,6 @@ import { TextComponent } from './text';
|
||||||
import { RowComponent } from './row';
|
import { RowComponent } from './row';
|
||||||
import { ColumnComponent } from './column';
|
import { ColumnComponent } from './column';
|
||||||
|
|
||||||
import { appTheme } from '../theme';
|
|
||||||
|
|
||||||
import { formatNumber } from '../utils/format-number';
|
import { formatNumber } from '../utils/format-number';
|
||||||
import { openExternal } from '../utils/open-external';
|
import { openExternal } from '../utils/open-external';
|
||||||
|
|
||||||
|
@ -164,7 +162,11 @@ const Component = ({
|
||||||
append: `${isReceived ? '+' : '-'}ZEC `,
|
append: `${isReceived ? '+' : '-'}ZEC `,
|
||||||
value: amount,
|
value: amount,
|
||||||
})}
|
})}
|
||||||
color={isReceived ? appTheme.colors.transactionReceived : appTheme.colors.transactionSent}
|
color={
|
||||||
|
isReceived
|
||||||
|
? theme.colors.transactionReceived({ theme })
|
||||||
|
: theme.colors.transactionSent({ theme })
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
<TextComponent
|
<TextComponent
|
||||||
value={formatNumber({
|
value={formatNumber({
|
||||||
|
@ -172,7 +174,7 @@ const Component = ({
|
||||||
value: new BigNumber(amount).times(zecPrice).toNumber(),
|
value: new BigNumber(amount).times(zecPrice).toNumber(),
|
||||||
})}
|
})}
|
||||||
size={1.5}
|
size={1.5}
|
||||||
color={appTheme.colors.transactionDetailsLabel}
|
color={theme.colors.transactionDetailsLabel({ theme })}
|
||||||
/>
|
/>
|
||||||
</DetailsWrapper>
|
</DetailsWrapper>
|
||||||
<InfoRow>
|
<InfoRow>
|
||||||
|
@ -181,7 +183,11 @@ const Component = ({
|
||||||
<TextComponent value={dateFns.format(new Date(date), 'MMMM D, YYYY HH:MMA')} />
|
<TextComponent value={dateFns.format(new Date(date), 'MMMM D, YYYY HH:MMA')} />
|
||||||
</ColumnComponent>
|
</ColumnComponent>
|
||||||
<ColumnComponent>
|
<ColumnComponent>
|
||||||
<TextComponent value='FEES' isBold color={appTheme.colors.transactionDetailsLabel} />
|
<TextComponent
|
||||||
|
value='FEES'
|
||||||
|
isBold
|
||||||
|
color={theme.colors.transactionDetailsLabel({ theme })}
|
||||||
|
/>
|
||||||
<TextComponent
|
<TextComponent
|
||||||
value={
|
value={
|
||||||
fees === 'N/A'
|
fees === 'N/A'
|
||||||
|
|
|
@ -125,9 +125,16 @@ const Component = ({
|
||||||
<TextComponent
|
<TextComponent
|
||||||
isBold
|
isBold
|
||||||
value={transactionValueInZec}
|
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>
|
</ColumnComponent>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -80,7 +80,7 @@ const AmountWrapper = styled.div`
|
||||||
content: 'ZEC';
|
content: 'ZEC';
|
||||||
font-family: ${props => props.theme.fontFamily};
|
font-family: ${props => props.theme.fontFamily};
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: 15px;
|
margin-top: 16px;
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
display: block;
|
display: block;
|
||||||
transition: all 0.05s ease-in-out;
|
transition: all 0.05s ease-in-out;
|
||||||
|
@ -361,7 +361,11 @@ class Component extends PureComponent<Props, State> {
|
||||||
}
|
}
|
||||||
|
|
||||||
updateTooltipVisibility = ({ balance, amount }: { balance: number, amount: number }) => {
|
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 = () => {
|
getAmountWithFee = () => {
|
||||||
|
@ -379,11 +383,15 @@ class Component extends PureComponent<Props, State> {
|
||||||
const { amount } = this.state;
|
const { amount } = this.state;
|
||||||
|
|
||||||
if (field === 'to') {
|
if (field === 'to') {
|
||||||
this.setState(() => ({ [field]: value }), () => validateAddress({ address: String(value) }));
|
|
||||||
} else if (field === 'amount') {
|
|
||||||
this.setState(
|
this.setState(
|
||||||
() => ({ [field]: value }),
|
() => ({ [field]: value }),
|
||||||
() => this.updateTooltipVisibility({ balance, amount: new BigNumber(value).toNumber() }),
|
() => {
|
||||||
|
validateAddress({ address: String(value) });
|
||||||
|
this.updateTooltipVisibility({
|
||||||
|
balance,
|
||||||
|
amount: new BigNumber(amount).toNumber(),
|
||||||
|
});
|
||||||
|
},
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
if (field === 'from') getAddressBalance({ address: String(value) });
|
if (field === 'from') getAddressBalance({ address: String(value) });
|
||||||
|
@ -392,6 +400,10 @@ class Component extends PureComponent<Props, State> {
|
||||||
() => ({ [field]: value }),
|
() => ({ [field]: value }),
|
||||||
() => {
|
() => {
|
||||||
if (field === 'fee') this.handleChange('amount')(amount);
|
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);
|
const feeValue = new BigNumber(fee);
|
||||||
|
|
||||||
if (feeValue.isEqualTo(FEES.LOW)) return `Low ZEC ${feeValue.toString()}`;
|
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.MEDIUM)) return `Medium ZEC ${feeValue.toString()}`;
|
||||||
if (feeValue.isEqualTo(FEES.HIGH)) return `High 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 ? (
|
return isToAddressValid ? (
|
||||||
<ValidateWrapper alignItems='center'>
|
<ValidateWrapper alignItems='center'>
|
||||||
<ValidateStatusIcon src={ValidIcon} />
|
<ValidateStatusIcon src={ValidIcon} />
|
||||||
<ValidateItemLabel value='VALID' color={theme.colors.transactionReceived} />
|
<ValidateItemLabel value='VALID' color={theme.colors.transactionReceived(this.props)} />
|
||||||
</ValidateWrapper>
|
</ValidateWrapper>
|
||||||
) : (
|
) : (
|
||||||
<ValidateWrapper alignItems='center'>
|
<ValidateWrapper alignItems='center'>
|
||||||
<ValidateStatusIcon src={InvalidIcon} />
|
<ValidateStatusIcon src={InvalidIcon} />
|
||||||
<ValidateItemLabel value='INVALID' color={theme.colors.transactionSent} />
|
<ValidateItemLabel value='INVALID' color={theme.colors.transactionSent(this.props)} />
|
||||||
</ValidateWrapper>
|
</ValidateWrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -712,8 +723,8 @@ class Component extends PureComponent<Props, State> {
|
||||||
onChange={this.handleChange('fee')}
|
onChange={this.handleChange('fee')}
|
||||||
value={String(fee)}
|
value={String(fee)}
|
||||||
disabled={feeType !== FEES.CUSTOM}
|
disabled={feeType !== FEES.CUSTOM}
|
||||||
bgColor={theme.colors.sendAdditionalInputBg}
|
bgColor={theme.colors.sendAdditionalInputBg(this.props)}
|
||||||
color={theme.colors.sendAdditionalInputText}
|
color={theme.colors.sendAdditionalInputText(this.props)}
|
||||||
name='fee'
|
name='fee'
|
||||||
/>
|
/>
|
||||||
</ColumnComponent>
|
</ColumnComponent>
|
||||||
|
@ -721,7 +732,7 @@ class Component extends PureComponent<Props, State> {
|
||||||
<SelectComponent
|
<SelectComponent
|
||||||
placement='top'
|
placement='top'
|
||||||
value={String(feeType)}
|
value={String(feeType)}
|
||||||
bgColor={theme.colors.sendAdditionalInputBg}
|
bgColor={theme.colors.sendAdditionalInputBg(this.props)}
|
||||||
onChange={this.handleChangeFeeType}
|
onChange={this.handleChangeFeeType}
|
||||||
options={Object.keys(FEES).map(cur => ({
|
options={Object.keys(FEES).map(cur => ({
|
||||||
label: cur.toLowerCase(),
|
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