Merge branch 'develop' of github.com:andrerfneves/zcash-reference-wallet into feature/catch-error-middleware
This commit is contained in:
commit
ee2263e40f
|
@ -0,0 +1,49 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import configureStore from 'redux-mock-store';
|
||||||
|
|
||||||
|
import {
|
||||||
|
LOAD_ADDRESSES_SUCCESS,
|
||||||
|
LOAD_ADDRESSES_ERROR,
|
||||||
|
loadAddressesSuccess,
|
||||||
|
loadAddressesError,
|
||||||
|
} from '../../app/redux/modules/receive';
|
||||||
|
|
||||||
|
const store = configureStore()();
|
||||||
|
|
||||||
|
describe('Receive Actions', () => {
|
||||||
|
beforeEach(() => store.clearActions());
|
||||||
|
|
||||||
|
test('should create an action to load addresses with success', () => {
|
||||||
|
const payload = {
|
||||||
|
addresses: [
|
||||||
|
'tm0a9si0ds09gj02jj',
|
||||||
|
'smas098gk02jf0kskk'
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
store.dispatch(loadAddressesSuccess(payload));
|
||||||
|
|
||||||
|
expect(store.getActions()[0]).toEqual(
|
||||||
|
expect.objectContaining({
|
||||||
|
type: LOAD_ADDRESSES_SUCCESS,
|
||||||
|
payload,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should create an action to load addresses with error', () => {
|
||||||
|
const payload = {
|
||||||
|
error: 'Something went wrong!',
|
||||||
|
};
|
||||||
|
|
||||||
|
store.dispatch(loadAddressesError(payload));
|
||||||
|
|
||||||
|
expect(store.getActions()[0]).toEqual(
|
||||||
|
expect.objectContaining({
|
||||||
|
type: LOAD_ADDRESSES_ERROR,
|
||||||
|
payload,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,116 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import configureStore from 'redux-mock-store';
|
||||||
|
|
||||||
|
import {
|
||||||
|
SEND_TRANSACTION,
|
||||||
|
SEND_TRANSACTION_SUCCESS,
|
||||||
|
SEND_TRANSACTION_ERROR,
|
||||||
|
RESET_SEND_TRANSACTION,
|
||||||
|
VALIDATE_ADDRESS_SUCCESS,
|
||||||
|
VALIDATE_ADDRESS_ERROR,
|
||||||
|
LOAD_ZEC_PRICE,
|
||||||
|
sendTransaction,
|
||||||
|
sendTransactionSuccess,
|
||||||
|
sendTransactionError,
|
||||||
|
resetSendTransaction,
|
||||||
|
validateAddressSuccess,
|
||||||
|
validateAddressError,
|
||||||
|
loadZECPrice,
|
||||||
|
} from '../../app/redux/modules/send';
|
||||||
|
|
||||||
|
const store = configureStore()();
|
||||||
|
|
||||||
|
describe('Send Actions', () => {
|
||||||
|
beforeEach(() => store.clearActions());
|
||||||
|
|
||||||
|
test('should create an action to send a transaction', () => {
|
||||||
|
store.dispatch(sendTransaction());
|
||||||
|
|
||||||
|
expect(store.getActions()[0]).toEqual(
|
||||||
|
expect.objectContaining({
|
||||||
|
type: SEND_TRANSACTION,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should create an action to send transaction with success', () => {
|
||||||
|
const payload = {
|
||||||
|
operationId: '0b9ii4590ab-1d012klfo'
|
||||||
|
};
|
||||||
|
|
||||||
|
store.dispatch(sendTransactionSuccess(payload));
|
||||||
|
|
||||||
|
expect(store.getActions()[0]).toEqual(
|
||||||
|
expect.objectContaining({
|
||||||
|
type: SEND_TRANSACTION_SUCCESS,
|
||||||
|
payload,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should create an action to send transaction with error', () => {
|
||||||
|
const payload = {
|
||||||
|
error: 'Something went wrong!',
|
||||||
|
};
|
||||||
|
|
||||||
|
store.dispatch(sendTransactionError(payload));
|
||||||
|
|
||||||
|
expect(store.getActions()[0]).toEqual(
|
||||||
|
expect.objectContaining({
|
||||||
|
type: SEND_TRANSACTION_ERROR,
|
||||||
|
payload,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should reset a transaction', () => {
|
||||||
|
store.dispatch(resetSendTransaction());
|
||||||
|
|
||||||
|
expect(store.getActions()[0]).toEqual(
|
||||||
|
expect.objectContaining({
|
||||||
|
type: RESET_SEND_TRANSACTION,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should validate a address with success', () => {
|
||||||
|
const payload = {
|
||||||
|
isValid: true
|
||||||
|
};
|
||||||
|
|
||||||
|
store.dispatch(validateAddressSuccess(payload));
|
||||||
|
|
||||||
|
expect(store.getActions()[0]).toEqual(
|
||||||
|
expect.objectContaining({
|
||||||
|
type: VALIDATE_ADDRESS_SUCCESS,
|
||||||
|
payload,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should validate a address with error', () => {
|
||||||
|
store.dispatch(validateAddressError());
|
||||||
|
|
||||||
|
expect(store.getActions()[0]).toEqual(
|
||||||
|
expect.objectContaining({
|
||||||
|
type: VALIDATE_ADDRESS_ERROR,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should load ZEC price', () => {
|
||||||
|
const payload = {
|
||||||
|
value: 1.35
|
||||||
|
};
|
||||||
|
|
||||||
|
store.dispatch(loadZECPrice(payload));
|
||||||
|
|
||||||
|
expect(store.getActions()[0]).toEqual(
|
||||||
|
expect.objectContaining({
|
||||||
|
type: LOAD_ZEC_PRICE,
|
||||||
|
payload
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,59 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import configureStore from 'redux-mock-store';
|
||||||
|
|
||||||
|
import {
|
||||||
|
LOAD_TRANSACTIONS,
|
||||||
|
LOAD_TRANSACTIONS_SUCCESS,
|
||||||
|
LOAD_TRANSACTIONS_ERROR,
|
||||||
|
loadTransactions,
|
||||||
|
loadTransactionsSuccess,
|
||||||
|
loadTransactionsError,
|
||||||
|
} from '../../app/redux/modules/transactions';
|
||||||
|
|
||||||
|
const store = configureStore()();
|
||||||
|
|
||||||
|
describe('Transactions Actions', () => {
|
||||||
|
beforeEach(() => store.clearActions());
|
||||||
|
|
||||||
|
test('should create an action to load transactions', () => {
|
||||||
|
store.dispatch(loadTransactions());
|
||||||
|
|
||||||
|
expect(store.getActions()[0]).toEqual(
|
||||||
|
expect.objectContaining({
|
||||||
|
type: LOAD_TRANSACTIONS,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should create an action to load transactions with success', () => {
|
||||||
|
const payload = {
|
||||||
|
list: [],
|
||||||
|
zecPrice: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
store.dispatch(loadTransactionsSuccess(payload));
|
||||||
|
|
||||||
|
expect(store.getActions()[0]).toEqual(
|
||||||
|
expect.objectContaining({
|
||||||
|
type: LOAD_TRANSACTIONS_SUCCESS,
|
||||||
|
payload,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should create an action to load transactions with error', () => {
|
||||||
|
const payload = {
|
||||||
|
error: 'Something went wrong!',
|
||||||
|
};
|
||||||
|
|
||||||
|
store.dispatch(loadTransactionsError(payload));
|
||||||
|
|
||||||
|
expect(store.getActions()[0]).toEqual(
|
||||||
|
expect.objectContaining({
|
||||||
|
type: LOAD_TRANSACTIONS_ERROR,
|
||||||
|
payload,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
|
@ -8,12 +8,14 @@ import walletSummaryReducer, {
|
||||||
describe('WalletSummary Reducer', () => {
|
describe('WalletSummary Reducer', () => {
|
||||||
test('should return the valid initial state', () => {
|
test('should return the valid initial state', () => {
|
||||||
const initialState = {
|
const initialState = {
|
||||||
|
addresses: [],
|
||||||
|
transactions: [],
|
||||||
total: 0,
|
total: 0,
|
||||||
shielded: 0,
|
shielded: 0,
|
||||||
transparent: 0,
|
transparent: 0,
|
||||||
error: null,
|
error: null,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
dollarValue: 0,
|
zecPrice: 0,
|
||||||
};
|
};
|
||||||
const action = {
|
const action = {
|
||||||
type: 'UNKNOWN_ACTION',
|
type: 'UNKNOWN_ACTION',
|
||||||
|
@ -29,12 +31,14 @@ describe('WalletSummary Reducer', () => {
|
||||||
payload: {},
|
payload: {},
|
||||||
};
|
};
|
||||||
const expectedState = {
|
const expectedState = {
|
||||||
|
addresses: [],
|
||||||
|
transactions: [],
|
||||||
total: 0,
|
total: 0,
|
||||||
shielded: 0,
|
shielded: 0,
|
||||||
transparent: 0,
|
transparent: 0,
|
||||||
error: null,
|
error: null,
|
||||||
isLoading: true,
|
isLoading: true,
|
||||||
dollarValue: 0,
|
zecPrice: 0,
|
||||||
};
|
};
|
||||||
|
|
||||||
expect(walletSummaryReducer(undefined, action)).toEqual(expectedState);
|
expect(walletSummaryReducer(undefined, action)).toEqual(expectedState);
|
||||||
|
@ -53,7 +57,9 @@ describe('WalletSummary Reducer', () => {
|
||||||
...action.payload,
|
...action.payload,
|
||||||
error: null,
|
error: null,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
dollarValue: 0,
|
addresses: [],
|
||||||
|
transactions: [],
|
||||||
|
zecPrice: 0,
|
||||||
};
|
};
|
||||||
|
|
||||||
expect(walletSummaryReducer(undefined, action)).toEqual(expectedState);
|
expect(walletSummaryReducer(undefined, action)).toEqual(expectedState);
|
||||||
|
@ -72,9 +78,11 @@ describe('WalletSummary Reducer', () => {
|
||||||
transparent: 0,
|
transparent: 0,
|
||||||
error: action.payload.error,
|
error: action.payload.error,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
dollarValue: 0,
|
addresses: [],
|
||||||
|
transactions: [],
|
||||||
|
zecPrice: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
expect(walletSummaryReducer(undefined, action)).toEqual(expectedState);
|
expect(walletSummaryReducer(undefined, action)).toEqual(expectedState);
|
||||||
});
|
});
|
||||||
});
|
});
|
|
@ -0,0 +1,22 @@
|
||||||
|
// @flow
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { filterObjectNullKeys } from '../../app/utils/filter-object-null-keys';
|
||||||
|
|
||||||
|
describe('filterObjectNullKeys', () => {
|
||||||
|
test('should filter null keys from object', () => {
|
||||||
|
const initialState = {
|
||||||
|
name: 'John Doe',
|
||||||
|
address: null,
|
||||||
|
amount: 0,
|
||||||
|
transactions: undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
const expectedState = {
|
||||||
|
name: 'John Doe',
|
||||||
|
amount: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(filterObjectNullKeys(initialState)).toEqual(expectedState);
|
||||||
|
})
|
||||||
|
})
|
|
@ -0,0 +1,37 @@
|
||||||
|
// @flow
|
||||||
|
import { BigNumber } from 'bignumber.js';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { formatNumber } from '../../app/utils/format-number';
|
||||||
|
|
||||||
|
describe('formatNumber', () => {
|
||||||
|
test('should append ZEC in balance amount', () => {
|
||||||
|
const myBalance = formatNumber({ value: 2.5, append: 'ZEC ' });
|
||||||
|
|
||||||
|
const expectedState = 'ZEC 2.5';
|
||||||
|
|
||||||
|
expect(myBalance).toEqual(expectedState);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should multiply ZEC balance and show it in USD', () => {
|
||||||
|
const myBalanceInUsd = formatNumber({
|
||||||
|
value: new BigNumber(2.5).times(1.35).toNumber(),
|
||||||
|
append: 'USD $',
|
||||||
|
});
|
||||||
|
|
||||||
|
const expectedState = 'USD $3.375';
|
||||||
|
|
||||||
|
expect(myBalanceInUsd).toEqual(expectedState);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should multiply decimal ZEC balance and show it in USD', () => {
|
||||||
|
const myBalanceInUsd = formatNumber({
|
||||||
|
value: new BigNumber(0.1).times(0.2).toNumber(),
|
||||||
|
append: 'USD $',
|
||||||
|
});
|
||||||
|
|
||||||
|
const expectedState = 'USD $0.02';
|
||||||
|
|
||||||
|
expect(myBalanceInUsd).toEqual(expectedState);
|
||||||
|
});
|
||||||
|
})
|
|
@ -0,0 +1,13 @@
|
||||||
|
// @flow
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { getTimestamp } from '../../app/utils/timestamp';
|
||||||
|
|
||||||
|
describe('generate timestamp', () => {
|
||||||
|
test('should generate a random string', () => {
|
||||||
|
const now = getTimestamp();
|
||||||
|
|
||||||
|
expect(now).toEqual(expect.any(Number));
|
||||||
|
|
||||||
|
});
|
||||||
|
})
|
|
@ -0,0 +1,14 @@
|
||||||
|
// @flow
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { truncateAddress } from '../../app/utils/truncate-address';
|
||||||
|
|
||||||
|
describe('truncateAddress', () => {
|
||||||
|
test('should truncate ZEC address', () => {
|
||||||
|
const myAddress = truncateAddress('t14oHp2v54vfmdgQ3v3SNuQga8JKHTNi2a1');
|
||||||
|
|
||||||
|
const expectedState = 't14oHp2v54vfmdgQ3v3S...8JKHTNi2a1';
|
||||||
|
|
||||||
|
expect(myAddress).toEqual(expectedState);
|
||||||
|
});
|
||||||
|
})
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#FFF" d="M24 9h-9v-9h-6v9h-9v6h9v9h6v-9h9z"/></svg>
|
After Width: | Height: | Size: 146 B |
|
@ -3,7 +3,6 @@ import React, { PureComponent } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Transition, animated } from 'react-spring';
|
import { Transition, animated } from 'react-spring';
|
||||||
|
|
||||||
import { ColumnComponent } from './column';
|
|
||||||
import { Button } from './button';
|
import { Button } from './button';
|
||||||
import { QRCode } from './qrcode';
|
import { QRCode } from './qrcode';
|
||||||
|
|
||||||
|
@ -18,6 +17,7 @@ const AddressWrapper = styled.div`
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 7px 13px;
|
padding: 7px 13px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin-bottom: 5px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Input = styled.input`
|
const Input = styled.input`
|
||||||
|
@ -56,7 +56,6 @@ const QRCodeWrapper = styled.div`
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
margin-top: 10px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -108,7 +107,7 @@ export class WalletAddress extends PureComponent<Props, State> {
|
||||||
const buttonLabel = `${isVisible ? 'Hide' : 'Show'} details and QR Code`;
|
const buttonLabel = `${isVisible ? 'Hide' : 'Show'} details and QR Code`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ColumnComponent width='100%'>
|
<div>
|
||||||
<AddressWrapper>
|
<AddressWrapper>
|
||||||
<Input
|
<Input
|
||||||
value={isVisible ? address : truncateAddress(address)}
|
value={isVisible ? address : truncateAddress(address)}
|
||||||
|
@ -152,7 +151,7 @@ export class WalletAddress extends PureComponent<Props, State> {
|
||||||
}
|
}
|
||||||
</Transition>
|
</Transition>
|
||||||
</RevealsMain>
|
</RevealsMain>
|
||||||
</ColumnComponent>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,7 +14,7 @@ import {
|
||||||
loadWalletSummarySuccess,
|
loadWalletSummarySuccess,
|
||||||
loadWalletSummaryError,
|
loadWalletSummaryError,
|
||||||
} from '../redux/modules/wallet';
|
} from '../redux/modules/wallet';
|
||||||
import { sortBy } from '../utils/sort-by';
|
import sortBy from '../utils/sort-by';
|
||||||
|
|
||||||
import type { AppState } from '../types/app-state';
|
import type { AppState } from '../types/app-state';
|
||||||
import type { Dispatch } from '../types/redux';
|
import type { Dispatch } from '../types/redux';
|
||||||
|
|
|
@ -7,6 +7,9 @@ import { ReceiveView } from '../views/receive';
|
||||||
import {
|
import {
|
||||||
loadAddressesSuccess,
|
loadAddressesSuccess,
|
||||||
loadAddressesError,
|
loadAddressesError,
|
||||||
|
getNewAddressSuccess,
|
||||||
|
getNewAddressError,
|
||||||
|
type addressType,
|
||||||
} from '../redux/modules/receive';
|
} from '../redux/modules/receive';
|
||||||
|
|
||||||
import rpc from '../../services/api';
|
import rpc from '../../services/api';
|
||||||
|
@ -22,9 +25,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
|
||||||
loadAddresses: async () => {
|
loadAddresses: async () => {
|
||||||
const [zAddressesErr, zAddresses] = await eres(rpc.z_listaddresses());
|
const [zAddressesErr, zAddresses] = await eres(rpc.z_listaddresses());
|
||||||
|
|
||||||
const [tAddressesErr, transparentAddresses] = await eres(
|
const [tAddressesErr, transparentAddresses] = await eres(rpc.getaddressesbyaccount(''));
|
||||||
rpc.getaddressesbyaccount(''),
|
|
||||||
);
|
|
||||||
|
|
||||||
if (zAddressesErr || tAddressesErr) return dispatch(loadAddressesError({ error: 'Something went wrong!' }));
|
if (zAddressesErr || tAddressesErr) return dispatch(loadAddressesError({ error: 'Something went wrong!' }));
|
||||||
|
|
||||||
|
@ -34,6 +35,15 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
getNewAddress: async ({ type }: { type: addressType }) => {
|
||||||
|
const [error, address] = await eres(
|
||||||
|
type === 'shielded' ? rpc.z_getnewaddress() : rpc.getnewaddress(''),
|
||||||
|
);
|
||||||
|
|
||||||
|
if (error || !address) return dispatch(getNewAddressError({ error: 'Unable to generate a new address' }));
|
||||||
|
|
||||||
|
dispatch(getNewAddressSuccess({ address }));
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
|
|
|
@ -15,7 +15,7 @@ import {
|
||||||
import rpc from '../../services/api';
|
import rpc from '../../services/api';
|
||||||
import store from '../../config/electron-store';
|
import store from '../../config/electron-store';
|
||||||
|
|
||||||
import { sortBy } from '../utils/sort-by';
|
import sortBy from '../utils/sort-by';
|
||||||
|
|
||||||
import type { AppState } from '../types/app-state';
|
import type { AppState } from '../types/app-state';
|
||||||
import type { Dispatch } from '../types/redux';
|
import type { Dispatch } from '../types/redux';
|
||||||
|
|
|
@ -4,6 +4,8 @@ import type { Action } from '../../types/redux';
|
||||||
// Actions
|
// Actions
|
||||||
export const LOAD_ADDRESSES_SUCCESS = 'LOAD_ADDRESSES_SUCCESS';
|
export const LOAD_ADDRESSES_SUCCESS = 'LOAD_ADDRESSES_SUCCESS';
|
||||||
export const LOAD_ADDRESSES_ERROR = 'LOAD_ADDRESSES_ERROR';
|
export const LOAD_ADDRESSES_ERROR = 'LOAD_ADDRESSES_ERROR';
|
||||||
|
export const GET_NEW_ADDRESS_SUCCESS = 'GET_NEW_ADDRESS_SUCCESS';
|
||||||
|
export const GET_NEW_ADDRESS_ERROR = 'GET_NEW_ADDRESS_ERROR';
|
||||||
|
|
||||||
export const loadAddressesSuccess = ({ addresses }: { addresses: string[] }) => ({
|
export const loadAddressesSuccess = ({ addresses }: { addresses: string[] }) => ({
|
||||||
type: LOAD_ADDRESSES_SUCCESS,
|
type: LOAD_ADDRESSES_SUCCESS,
|
||||||
|
@ -17,6 +19,22 @@ export const loadAddressesError = ({ error }: { error: string }) => ({
|
||||||
payload: { error },
|
payload: { error },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export const getNewAddressSuccess = ({ address }: { address: string }) => ({
|
||||||
|
type: GET_NEW_ADDRESS_SUCCESS,
|
||||||
|
payload: {
|
||||||
|
address,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const getNewAddressError = ({ error }: { error: string }) => ({
|
||||||
|
type: GET_NEW_ADDRESS_ERROR,
|
||||||
|
payload: {
|
||||||
|
error,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export type addressType = 'transparent' | 'shielded';
|
||||||
|
|
||||||
export type State = {
|
export type State = {
|
||||||
addresses: string[],
|
addresses: string[],
|
||||||
error: string | null,
|
error: string | null,
|
||||||
|
@ -40,6 +58,16 @@ export default (state: State = initialState, action: Action) => {
|
||||||
error: action.payload.error,
|
error: action.payload.error,
|
||||||
addresses: [],
|
addresses: [],
|
||||||
};
|
};
|
||||||
|
case GET_NEW_ADDRESS_SUCCESS:
|
||||||
|
return {
|
||||||
|
error: null,
|
||||||
|
addresses: [...state.addresses, action.payload.address],
|
||||||
|
};
|
||||||
|
case GET_NEW_ADDRESS_ERROR:
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
error: action.payload.error,
|
||||||
|
};
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,2 +1,3 @@
|
||||||
// @flow
|
// @flow
|
||||||
export const formatNumber = ({ value, append = '' }: { value: number | string, append?: string }) => `${append}${(value || 0).toLocaleString()}`;
|
|
||||||
|
export const formatNumber = ({ value, append = '' }: { value: number, append?: string }) => `${append}${(value || 0).toLocaleString()}`;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
// @flow
|
// @flow
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
export const sortBy = <T>(field: string) => (arr: T[]): T[] => arr.sort((a, b) => (a[field] < b[field] ? 1 : -1));
|
export default <T>(field: string) => (arr: T[]): T[] => arr.sort((a, b) => (a[field] < b[field] ? 1 : -1));
|
||||||
|
|
|
@ -1,3 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
export const truncateAddress = (address: string = '') => `${address.substr(0, 20)}...${address.substr(address.length - 10, address.length)}`;
|
export const truncateAddress = (address: string = '') => `${address.substr(0, 20)}...${address.substr(
|
||||||
|
address.length - 10,
|
||||||
|
address.length,
|
||||||
|
)}`;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React, { Fragment, PureComponent } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Transition, animated } from 'react-spring';
|
import { Transition, animated } from 'react-spring';
|
||||||
|
|
||||||
|
@ -9,6 +9,9 @@ import { TextComponent } from '../components/text';
|
||||||
import { WalletAddress } from '../components/wallet-address';
|
import { WalletAddress } from '../components/wallet-address';
|
||||||
|
|
||||||
import MenuIcon from '../assets/images/menu_icon.svg';
|
import MenuIcon from '../assets/images/menu_icon.svg';
|
||||||
|
import PlusIcon from '../assets/images/plus_icon.svg';
|
||||||
|
|
||||||
|
import type { addressType } from '../redux/modules/receive';
|
||||||
|
|
||||||
const Row = styled(RowComponent)`
|
const Row = styled(RowComponent)`
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
@ -22,7 +25,7 @@ const Label = styled(InputLabelComponent)`
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ShowMoreButton = styled.button`
|
const ActionButton = styled.button`
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -39,12 +42,13 @@ const ShowMoreButton = styled.button`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ShowMoreIcon = styled.img`
|
const ActionIcon = styled.img`
|
||||||
width: 25px;
|
width: 25px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
border: 1px solid ${props => props.theme.colors.text};
|
border: 1px solid ${props => props.theme.colors.text};
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
margin-right: 11.5px;
|
margin-right: 11.5px;
|
||||||
|
padding: 5px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const RevealsMain = styled.div`
|
const RevealsMain = styled.div`
|
||||||
|
@ -54,17 +58,12 @@ const RevealsMain = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
||||||
& > div {
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
addresses: Array<string>,
|
addresses: Array<string>,
|
||||||
loadAddresses: () => void,
|
loadAddresses: () => void,
|
||||||
|
getNewAddress: ({ type: addressType }) => void,
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -86,67 +85,65 @@ export class ReceiveView extends PureComponent<Props, State> {
|
||||||
showAdditionalOptions: !prevState.showAdditionalOptions,
|
showAdditionalOptions: !prevState.showAdditionalOptions,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
renderShieldedAddresses = (address: string) => {
|
generateNewAddress = (type: addressType) => {
|
||||||
const { showAdditionalOptions } = this.state;
|
const { getNewAddress } = this.props;
|
||||||
const buttonText = `${showAdditionalOptions ? 'Hide' : 'Show'} Other Address Types`;
|
|
||||||
|
|
||||||
return (
|
getNewAddress({ type });
|
||||||
<Fragment key={address}>
|
|
||||||
<Label value='Shielded Address' />
|
|
||||||
<Row alignItems='center' justifyContent='space-between'>
|
|
||||||
<WalletAddress address={address} />
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<ShowMoreButton onClick={this.toggleAdditionalOptions} isActive={showAdditionalOptions}>
|
|
||||||
<ShowMoreIcon isActive={showAdditionalOptions} src={MenuIcon} alt='More Options' />
|
|
||||||
<TextComponent value={buttonText} />
|
|
||||||
</ShowMoreButton>
|
|
||||||
</Row>
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
renderTransparentAddresses = (address: string) => {
|
|
||||||
const { showAdditionalOptions } = this.state;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<RevealsMain key={address}>
|
|
||||||
<Transition
|
|
||||||
native
|
|
||||||
items={showAdditionalOptions}
|
|
||||||
enter={[{ height: 'auto', opacity: 1 }]}
|
|
||||||
leave={{ height: 0, opacity: 0 }}
|
|
||||||
from={{
|
|
||||||
position: 'absolute',
|
|
||||||
overflow: 'hidden',
|
|
||||||
height: 0,
|
|
||||||
opacity: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{show => show
|
|
||||||
&& (props => (
|
|
||||||
<animated.div style={props}>
|
|
||||||
<Label value='Transparent Address (not private)' />
|
|
||||||
<Row key={address} alignItems='center' justifyContent='space-between'>
|
|
||||||
<WalletAddress address={address} />
|
|
||||||
</Row>
|
|
||||||
</animated.div>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</Transition>
|
|
||||||
</RevealsMain>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { addresses } = this.props;
|
const { addresses } = this.props;
|
||||||
|
const { showAdditionalOptions } = this.state;
|
||||||
|
const buttonText = `${showAdditionalOptions ? 'Hide' : 'Show'} Other Address Types`;
|
||||||
|
|
||||||
|
const shieldedAddresses = addresses.filter(addr => addr.startsWith('z'));
|
||||||
|
const transparentAddresses = addresses.filter(addr => addr.startsWith('t'));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{(addresses || []).map((address, index) => {
|
<Label value='Shielded Address' />
|
||||||
if (index === 0) return this.renderShieldedAddresses(address);
|
{shieldedAddresses.map(addr => (
|
||||||
return this.renderTransparentAddresses(address);
|
<WalletAddress key={addr} address={addr} />
|
||||||
})}
|
))}
|
||||||
|
<Row>
|
||||||
|
<ActionButton onClick={this.toggleAdditionalOptions} isActive={showAdditionalOptions}>
|
||||||
|
<ActionIcon isActive={showAdditionalOptions} src={MenuIcon} alt='More Options' />
|
||||||
|
<TextComponent value={buttonText} />
|
||||||
|
</ActionButton>
|
||||||
|
<ActionButton onClick={() => this.generateNewAddress('shielded')}>
|
||||||
|
<ActionIcon src={PlusIcon} alt='New Shielded Address' />
|
||||||
|
<TextComponent value='New Shielded Address' />
|
||||||
|
</ActionButton>
|
||||||
|
<ActionButton onClick={() => this.generateNewAddress('transparent')}>
|
||||||
|
<ActionIcon src={PlusIcon} alt='New Transparent Address' />
|
||||||
|
<TextComponent value='New Transparent Address' />
|
||||||
|
</ActionButton>
|
||||||
|
</Row>
|
||||||
|
<RevealsMain>
|
||||||
|
<Transition
|
||||||
|
native
|
||||||
|
items={showAdditionalOptions}
|
||||||
|
enter={[{ opacity: 1 }]}
|
||||||
|
leave={{ height: 0, opacity: 0 }}
|
||||||
|
from={{
|
||||||
|
position: 'absolute',
|
||||||
|
overflow: 'hidden',
|
||||||
|
height: 0,
|
||||||
|
opacity: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{show => show
|
||||||
|
&& (props => (
|
||||||
|
<animated.div style={{ ...props, width: '100%', height: 'auto' }}>
|
||||||
|
<Label value='Transparent Address (not private)' />
|
||||||
|
{transparentAddresses.map(addr => (
|
||||||
|
<WalletAddress key={addr} address={addr} />
|
||||||
|
))}
|
||||||
|
</animated.div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</Transition>
|
||||||
|
</RevealsMain>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -425,7 +425,7 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
|
|
||||||
const isEmpty = amount === '';
|
const isEmpty = amount === '';
|
||||||
|
|
||||||
const fixedAmount = isEmpty ? '0.00' : amount;
|
const fixedAmount = isEmpty ? 0.0 : amount;
|
||||||
|
|
||||||
const zecBalance = formatNumber({ value: balance, append: 'ZEC ' });
|
const zecBalance = formatNumber({ value: balance, append: 'ZEC ' });
|
||||||
const zecBalanceInUsd = formatNumber({
|
const zecBalanceInUsd = formatNumber({
|
||||||
|
|
|
@ -999,10 +999,10 @@ x.toFormat(3, BigNumber.ROUND_UP, fmt) // '12.34.56.789,124'
|
||||||
roundingMode: BigNumber$RoundingMode,
|
roundingMode: BigNumber$RoundingMode,
|
||||||
format?: BigNumber$Format,
|
format?: BigNumber$Format,
|
||||||
): string;
|
): string;
|
||||||
toFormat(decimalPlaces: number, roundingMode?: BigNumber$RoundingMode): string;
|
toFormat(decimalPlaces: number, roundingMode?: BigNumber$RoundingMode): number;
|
||||||
toFormat(decimalPlaces?: number): string;
|
toFormat(decimalPlaces?: number): number;
|
||||||
toFormat(decimalPlaces: number, format: BigNumber$Format): string;
|
toFormat(decimalPlaces: number, format: BigNumber$Format): number;
|
||||||
toFormat(format: BigNumber$Format): string;
|
toFormat(format: BigNumber$Format): number;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns an array of two BigNumbers representing the value of this BigNumber as a simple
|
* Returns an array of two BigNumbers representing the value of this BigNumber as a simple
|
||||||
|
|
|
@ -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">82%</text><text x="107" y="14">82%</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">81%</text><text x="107" y="14">81%</text></g></svg>
|
Before Width: | Height: | Size: 745 B After Width: | Height: | Size: 745 B |
Loading…
Reference in New Issue