2017-10-04 04:37:06 +00:00
|
|
|
import {
|
|
|
|
TChangeLanguage,
|
2017-11-18 20:33:53 +00:00
|
|
|
TChangeNodeIntent,
|
|
|
|
TAddCustomNode,
|
2017-12-01 16:09:51 +00:00
|
|
|
TRemoveCustomNode,
|
2018-02-12 20:43:07 +00:00
|
|
|
TAddCustomNetwork,
|
|
|
|
AddCustomNodeAction,
|
|
|
|
changeLanguage,
|
|
|
|
changeNodeIntent,
|
|
|
|
addCustomNode,
|
|
|
|
removeCustomNode,
|
|
|
|
addCustomNetwork
|
2017-10-04 04:37:06 +00:00
|
|
|
} from 'actions/config';
|
2018-02-07 04:28:28 +00:00
|
|
|
import logo from 'assets/images/logo-mycrypto.svg';
|
2018-03-01 17:53:29 +00:00
|
|
|
import { OldDropDown, ColorDropdown } from 'components/ui';
|
2018-02-12 20:43:07 +00:00
|
|
|
import React, { Component } from 'react';
|
2017-11-18 20:33:53 +00:00
|
|
|
import classnames from 'classnames';
|
2017-09-29 02:09:01 +00:00
|
|
|
import { Link } from 'react-router-dom';
|
2018-02-12 20:43:07 +00:00
|
|
|
import { TSetGasPriceField, setGasPriceField } from 'actions/transaction';
|
|
|
|
import { ANNOUNCEMENT_MESSAGE, ANNOUNCEMENT_TYPE, languages } from 'config';
|
2017-09-25 02:06:28 +00:00
|
|
|
import Navigation from './components/Navigation';
|
2017-11-18 20:33:53 +00:00
|
|
|
import CustomNodeModal from './components/CustomNodeModal';
|
2018-01-11 18:04:11 +00:00
|
|
|
import OnlineStatus from './components/OnlineStatus';
|
2017-09-26 23:03:38 +00:00
|
|
|
import { getKeyByValue } from 'utils/helpers';
|
2018-02-12 20:43:07 +00:00
|
|
|
import { NodeConfig } from 'types/node';
|
2017-07-15 04:16:36 +00:00
|
|
|
import './index.scss';
|
2018-02-12 20:43:07 +00:00
|
|
|
import { AppState } from 'reducers';
|
|
|
|
import {
|
|
|
|
getOffline,
|
|
|
|
isNodeChanging,
|
|
|
|
getLanguageSelection,
|
|
|
|
getNodeId,
|
|
|
|
getNodeConfig,
|
|
|
|
CustomNodeOption,
|
|
|
|
NodeOption,
|
|
|
|
getNodeOptions,
|
|
|
|
getNetworkConfig
|
|
|
|
} from 'selectors/config';
|
|
|
|
import { NetworkConfig } from 'types/network';
|
|
|
|
import { connect } from 'react-redux';
|
2018-04-06 22:23:25 +00:00
|
|
|
import { stripWeb3Network } from 'libs/nodes';
|
2017-07-15 04:16:36 +00:00
|
|
|
|
2018-02-12 20:43:07 +00:00
|
|
|
interface DispatchProps {
|
2017-09-25 02:06:28 +00:00
|
|
|
changeLanguage: TChangeLanguage;
|
2017-10-04 04:37:06 +00:00
|
|
|
changeNodeIntent: TChangeNodeIntent;
|
Productionize Transaction Stack (#456)
* export conditional input and hoc
* Move typings and fields out of send transaction
* Move fields into their own component for decoupled handling, use conditional inputs to simplify disabled components
* Handle hex and non hex strings automatically in BN conversion
* Fix handling of strings and numbers for BN
* add web3 fixes & comments
* Display short balances on deterministic modals
* add more tests, fix rounding
* Add spacer to balance sidebar network name
* Fix tsc error
* Add offline render CB
* Make more render callbacks
* Transform NonceField into its self contained component
* Remove styling from nonce field
* Better network handling in nonce cb
* Move network nonce initialization to componentDidMount
* Remove unessesary conditional input
* Make nonce component return a BN
* Simplify Query render cb
* Add gas query and token query render cbs
* Re-write address field component, strip out ENS name functionality for now
* Add address and data as unit types
* Cleanup Address Field component
* Export gas query
* Re-write gas field component
* Cleanup gas estimation check
* Re-write Data field
* Transaction field skeleton
* Export transaction field actions
* Rename fields to map to ethtx fields
* Make reducers for fields
* Fix reducer module exports
* Export reducer
* Formatting fix
* Type return of GasQuery
* Add transaction field getter / setter component
* Make transaction fields more flexible
* Formatting fix
* Split transaction fields component into two
* Remove erroneous prop
* Fix field naming to follow ethereum transaction fields
* Merge valid prop into componeent
* Change address field to be redux based
* Convert nonce field to redux based
* Make component for passing in current transaction
* Re-write Gas component to use redux state
* Reduxify data field component
* seperate transaction fields redux state into field data and meta data
* Rename SetTransactionFields to be singular
* Make render callback components for getting/setting meta fields
* Add non-zero option prop for token balance render cb
* re-write unit dropdown component to be redux based
* Make ether the first option
* Fix tsc error on tokenquery
* Handle query string default values in unit drop down
* Add thunks to package
* Add helper function for encoding transfer data
* Handle co-dependencies between fields via thunks, seperate value fields into ether and token based
* Fix wrong typing
* Add token metafield as export
* Start scaffolding out amount field component
* Make render cbs for conditional selection of value and balance
* Make render callbacks nullable
* Progress commit -- get dynaming swapping between tokens and ether working
* Get gas estimation working between ether and tokens
* Remove nonce from breaking gas estimation
* Add better validation for amount field
* Add 500ms debounce to gas saga
* Self contain custom message component
* Add web3 awareness to wallet render cb
* Add render cb for checking if wallet is unlocked
* Cleanup inline typing
* export available params
* Add render cb to render component when a query string exists
* Add boolean callback param that check that the transaction is filled by user
* Remove uneeded typings from send transaction
* Fix misnomer
* Self contain generate transaction button
* Compartmentalize more send transaction components
* Add query string warning, custom message and generate tx button to fields
* Cleanup send tx component with new components
* export render callbacks
* saga transaction scaffolding
* make gas saga fully declarative
* transaction lib renaming
* Seperate gasprice into its own generator
* Make action creators for tx sign actions
* Clean up signing saga, introduce reducer for signing, make HW wallet libs compatible with new tx format, fix some typing with ethereumjs-tx
* Add TransactionComparison component
* Add pushTx
* Progress commit -- Streamline web3 and local signing / broadcasting flows. Need to still implement reducers for broadcasting and notifications
* Get local transaction broadcasting working
* re-write confirmation modal to be redux based
* Fix spacing and import
* Move confirmation modal to be attached to send button, create send button
* Properly handle broadcasting for conf modal
* Handle gas cost > balance for send everything
* Add signing status as its own component (#454)
* Fix ledger errors not showing on notifs
* Make dedicated actions for swapping from tokens to ether and ether to tokens
* Split actionTypes file
* Cleanup comments
* Cleanup comments
* Fix various tsc errors
* Lay down infrastructure for saving configurations per-wallet.
* Add pending and rejected states properly to token values.
* Add custom token form improvements.
* Fix metamask transaction errors
* Fix send entire balance estimation
* Fix add token form from never being enabled.
* Initial pass at account tab with send and view wallet tabs.
* Fix inactive tab.
* Hide private key, toggling
* Progress commit -- Replacing render callbacks with selectors, put validation logic in sagas
* Moved the restore keystore functionality to view wallet info, and put it in a modal / util file.
* Fix navigation link active
* Force read only wallets to info tab.
* Remove commented code
* Saga-ify send everything
* Scan for new tokens, track saved tokens, only request tracked tokens on initial load.
* Add custom token to current wallets tracked tokens.
* Rework remove token icon.
* Adjust button margin
* Remove the rest of the needless render callbacks for selectors, sagaify nonce
* Bug fix send transaction
* remove unused redux-thunk
* Move fields to general components
* Clean up saga structure
* Refactor broadcast tx
* Implement better validation logic, get contract deploy working
* PR feedback.
* Convert tokenbalances component to connected redux component.
* Addressed feedback from Henry.
* Progress commit -- Implement Interact logic, needs manual testing
* Get rid of commented code
* move exports after declarations
* add tests, rough draft
* Get contract method calls working
* Bugfix contracts
* Cleanup hex prefixing
* Reset transaction state on wallet change
* Get rid of old send transaction component
* Disable sign transaction button when network request is underway
* Flatten send button tree, make nonce human readable in confirmation modal
* Add ghetto cost breakdown component, fix token field validation
* Create Generic SubTab and use in Send
* MVP of mnemonics with sub-tabs in Create Wallet view.
* Do dynamic revalidation
* move exports after declarations
* add forgotten signing tests
* update token spec
* update currentValue spec
* update validationHelpers spec
* Address TODO - use injected history to push navigation state instead of hardcoding window.location
* Use SubTabs in Contracts
* Fix revertPath prop for AcceptOrRedirectModal
* Use subtabs in SignAndVerifyMessage
* Routing for subtabs
* Fix routes, adjust sizing.
* Remove unused import
* Request nonce in base 10
* Add offline override to unit display
* Make cost breakdown less buggy
* Add non standard transaction warning
* Fix amount validity
* Cleanup datafield validity
* Display notif on gas estimation failure
* Add post-signing verification against fields, clean up gas price
* Fix tsc errors
* Code cleanup
* add exports to functions
* add specs for sendEverything and reset sagas
* delete duplicate files
* make tslint happy
* Merge develop
* Fix develop regressions
* Delegate nonce pulling to wallet being set
* Clarify non standard transaction
* Make address a buffer to avoid leading 0's bug
* Clarify validation helper comment
* Increase debounce time, add console error
* Better validation for non-standard transactions
* Add verification skipping for broadcasting txs
* Fix state and wallet resetting for contract tabs
* Fix some spec files, remove contract.spec
* Remove broadcasting specs from wallet
* Close DeterministicWalletModal on confirm
* Revert "Close DeterministicWalletModal on confirm"
This reverts commit 16c860e854ca29e9de754164d8be5e24f722cbad.
* Reset hardware wallet state on unlocking. Dont render walletdecrypt content when its hidden.
* Fix client side broadcast checking
* Add more state resetters in error scenarios
* Fix gas estimation
* Add validation for value transactions to contract creation
* Add transaction comparaision differentiation depending on wallet type
* Fix token row display balance showing twice
* Properly handle failed transactions
* Handle bad error messages
* fix broken tests
* fix broken test
* Progress commit -- Implement generic subtab types
* Remove react router v3
* Remove unused routes
* Clean up Tabbing code, add onTabChange handler
* Fix tests
* Add nav fix
* revert opinionated sub-tab implementation
* additional reverts
* Add decimal validation
* Make gas price single source of truth, dont save any transaction state other than gas price
* Get rid of old wallet.spec reducer tests
* Add decimal validation when re-validating gasCost
* remove utilities view
* Remove cost breakdown
* Remove local gas estimation warning
* Create getShownTokenBalances selector; use in UnitDropDown and Equivalent Values
* Convert reducers to switch case
* Clean tsc errors
* Fix failing test
* fix tscheck error
* Add number validation to gas field
* Fix misaligned input dropdown
* Revert "Fix misaligned input dropdown"
This reverts commit a40a4c0e8d52471dea01e6727f741a737b798695.
* Set window timeout long enough for node switch to be persisted to state
* Transaction Refactor Style Fixes (#615)
* Fix unit dropdown alignment by rendering it in AmountField, and fixing a missed bootstrap case.
* Fix modal amount and gas text.
* Fix misaligned dropdown
* Update conditions for NavLink is-active class
2017-12-18 21:23:31 +00:00
|
|
|
setGasPriceField: TSetGasPriceField;
|
2017-11-18 20:33:53 +00:00
|
|
|
addCustomNode: TAddCustomNode;
|
|
|
|
removeCustomNode: TRemoveCustomNode;
|
2017-12-01 16:09:51 +00:00
|
|
|
addCustomNetwork: TAddCustomNetwork;
|
2017-09-25 02:06:28 +00:00
|
|
|
}
|
2017-04-12 05:04:27 +00:00
|
|
|
|
2018-02-12 20:43:07 +00:00
|
|
|
interface StateProps {
|
|
|
|
network: NetworkConfig;
|
|
|
|
languageSelection: AppState['config']['meta']['languageSelection'];
|
|
|
|
node: NodeConfig;
|
|
|
|
nodeSelection: AppState['config']['nodes']['selectedNode']['nodeId'];
|
|
|
|
isChangingNode: AppState['config']['nodes']['selectedNode']['pending'];
|
|
|
|
isOffline: AppState['config']['meta']['offline'];
|
|
|
|
nodeOptions: (CustomNodeOption | NodeOption)[];
|
|
|
|
}
|
|
|
|
|
|
|
|
const mapStateToProps = (state: AppState): StateProps => ({
|
|
|
|
isOffline: getOffline(state),
|
|
|
|
isChangingNode: isNodeChanging(state),
|
|
|
|
languageSelection: getLanguageSelection(state),
|
|
|
|
nodeSelection: getNodeId(state),
|
|
|
|
node: getNodeConfig(state),
|
|
|
|
nodeOptions: getNodeOptions(state),
|
|
|
|
network: getNetworkConfig(state)
|
|
|
|
});
|
|
|
|
|
|
|
|
const mapDispatchToProps: DispatchProps = {
|
|
|
|
setGasPriceField,
|
|
|
|
changeLanguage,
|
|
|
|
changeNodeIntent,
|
|
|
|
addCustomNode,
|
|
|
|
removeCustomNode,
|
|
|
|
addCustomNetwork
|
|
|
|
};
|
|
|
|
|
2017-11-18 20:33:53 +00:00
|
|
|
interface State {
|
|
|
|
isAddingCustomNode: boolean;
|
|
|
|
}
|
|
|
|
|
2018-02-12 20:43:07 +00:00
|
|
|
type Props = StateProps & DispatchProps;
|
|
|
|
|
|
|
|
class Header extends Component<Props, State> {
|
2017-11-18 20:33:53 +00:00
|
|
|
public state = {
|
|
|
|
isAddingCustomNode: false
|
|
|
|
};
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public render() {
|
2017-11-18 20:33:53 +00:00
|
|
|
const {
|
|
|
|
languageSelection,
|
|
|
|
node,
|
|
|
|
nodeSelection,
|
|
|
|
isChangingNode,
|
2018-01-11 18:04:11 +00:00
|
|
|
isOffline,
|
2018-02-12 20:43:07 +00:00
|
|
|
nodeOptions,
|
|
|
|
network
|
2017-11-18 20:33:53 +00:00
|
|
|
} = this.props;
|
|
|
|
const { isAddingCustomNode } = this.state;
|
2017-09-26 23:03:38 +00:00
|
|
|
const selectedLanguage = languageSelection;
|
2018-03-01 17:53:29 +00:00
|
|
|
const LanguageDropDown = OldDropDown as new () => OldDropDown<typeof selectedLanguage>;
|
2018-02-12 20:43:07 +00:00
|
|
|
const options = nodeOptions.map(n => {
|
|
|
|
if (n.isCustom) {
|
2018-02-24 18:02:07 +00:00
|
|
|
const { label, isCustom, id, ...rest } = n;
|
2017-11-18 20:33:53 +00:00
|
|
|
return {
|
2018-02-12 20:43:07 +00:00
|
|
|
...rest,
|
2017-11-18 20:33:53 +00:00
|
|
|
name: (
|
|
|
|
<span>
|
2018-02-24 18:02:07 +00:00
|
|
|
{label.network} - {label.nodeName} <small>(custom)</small>
|
2017-11-18 20:33:53 +00:00
|
|
|
</span>
|
|
|
|
),
|
2018-02-12 20:43:07 +00:00
|
|
|
onRemove: () => this.props.removeCustomNode({ id })
|
|
|
|
};
|
|
|
|
} else {
|
2018-02-24 18:02:07 +00:00
|
|
|
const { label, isCustom, ...rest } = n;
|
2018-02-12 20:43:07 +00:00
|
|
|
return {
|
|
|
|
...rest,
|
|
|
|
name: (
|
|
|
|
<span>
|
2018-04-06 22:23:25 +00:00
|
|
|
{stripWeb3Network(label.network)} <small>({label.service})</small>
|
2018-02-12 20:43:07 +00:00
|
|
|
</span>
|
|
|
|
)
|
2017-11-18 20:33:53 +00:00
|
|
|
};
|
2018-02-12 20:43:07 +00:00
|
|
|
}
|
|
|
|
});
|
2017-10-02 22:36:59 +00:00
|
|
|
|
2017-07-02 05:49:06 +00:00
|
|
|
return (
|
2017-07-15 04:16:36 +00:00
|
|
|
<div className="Header">
|
2017-09-25 02:06:28 +00:00
|
|
|
{ANNOUNCEMENT_MESSAGE && (
|
2018-01-29 20:51:02 +00:00
|
|
|
<div className={`Header-announcement is-${ANNOUNCEMENT_TYPE}`}>
|
|
|
|
{ANNOUNCEMENT_MESSAGE}
|
|
|
|
</div>
|
2017-09-25 02:06:28 +00:00
|
|
|
)}
|
2017-08-25 07:37:36 +00:00
|
|
|
|
2017-07-15 04:16:36 +00:00
|
|
|
<section className="Header-branding">
|
|
|
|
<section className="Header-branding-inner container">
|
2017-12-05 19:51:21 +00:00
|
|
|
<Link to="/" className="Header-branding-title" aria-label="Go to homepage">
|
2017-07-15 04:16:36 +00:00
|
|
|
<img
|
|
|
|
className="Header-branding-title-logo"
|
|
|
|
src={logo}
|
|
|
|
height="64px"
|
|
|
|
width="245px"
|
2018-02-07 04:28:28 +00:00
|
|
|
alt="MyCrypto logo"
|
2017-07-15 04:16:36 +00:00
|
|
|
/>
|
2017-07-02 05:49:06 +00:00
|
|
|
</Link>
|
2017-10-02 22:36:59 +00:00
|
|
|
<div className="Header-branding-right">
|
2018-01-11 18:04:11 +00:00
|
|
|
<div className="Header-branding-right-online">
|
|
|
|
<OnlineStatus isOffline={isOffline} />
|
|
|
|
</div>
|
|
|
|
|
2017-10-02 22:36:59 +00:00
|
|
|
<div className="Header-branding-right-dropdown">
|
|
|
|
<LanguageDropDown
|
2017-12-05 19:51:21 +00:00
|
|
|
ariaLabel={`change language. current language ${languages[selectedLanguage]}`}
|
2017-10-02 22:36:59 +00:00
|
|
|
options={Object.values(languages)}
|
|
|
|
value={languages[selectedLanguage]}
|
|
|
|
onChange={this.changeLanguage}
|
|
|
|
size="smr"
|
|
|
|
color="white"
|
|
|
|
/>
|
|
|
|
</div>
|
2018-04-06 22:23:25 +00:00
|
|
|
{console.log(nodeSelection)}
|
2017-11-18 20:33:53 +00:00
|
|
|
<div
|
|
|
|
className={classnames({
|
|
|
|
'Header-branding-right-dropdown': true,
|
|
|
|
'is-flashing': isChangingNode
|
|
|
|
})}
|
|
|
|
>
|
2017-10-02 22:36:59 +00:00
|
|
|
<ColorDropdown
|
2017-11-18 20:33:53 +00:00
|
|
|
ariaLabel={`
|
2017-12-01 16:09:51 +00:00
|
|
|
change node. current node is on the ${node.network} network
|
|
|
|
provided by ${node.service}
|
2017-11-18 20:33:53 +00:00
|
|
|
`}
|
2018-02-12 20:43:07 +00:00
|
|
|
options={options}
|
|
|
|
value={nodeSelection || ''}
|
2017-10-02 22:36:59 +00:00
|
|
|
extra={
|
|
|
|
<li>
|
2017-11-18 20:33:53 +00:00
|
|
|
<a onClick={this.openCustomNodeModal}>Add Custom Node</a>
|
2017-10-02 22:36:59 +00:00
|
|
|
</li>
|
|
|
|
}
|
2017-11-10 03:30:20 +00:00
|
|
|
disabled={nodeSelection === 'web3'}
|
2018-02-12 20:43:07 +00:00
|
|
|
onChange={this.props.changeNodeIntent}
|
2017-10-02 22:36:59 +00:00
|
|
|
size="smr"
|
|
|
|
color="white"
|
2017-11-18 20:33:53 +00:00
|
|
|
menuAlign="right"
|
2017-10-02 22:36:59 +00:00
|
|
|
/>
|
|
|
|
</div>
|
2017-07-02 05:49:06 +00:00
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</section>
|
2017-04-18 23:36:29 +00:00
|
|
|
|
2018-02-12 20:43:07 +00:00
|
|
|
<Navigation color={!network.isCustom && network.color} />
|
2017-11-18 20:33:53 +00:00
|
|
|
|
2018-03-08 19:28:43 +00:00
|
|
|
<CustomNodeModal
|
|
|
|
isOpen={isAddingCustomNode}
|
|
|
|
addCustomNode={this.addCustomNode}
|
|
|
|
handleClose={this.closeCustomNodeModal}
|
|
|
|
/>
|
2017-07-02 05:49:06 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2017-07-04 01:25:01 +00:00
|
|
|
|
2017-09-26 23:03:38 +00:00
|
|
|
public changeLanguage = (value: string) => {
|
|
|
|
const key = getKeyByValue(languages, value);
|
|
|
|
if (key) {
|
|
|
|
this.props.changeLanguage(key);
|
|
|
|
}
|
2017-07-04 03:21:19 +00:00
|
|
|
};
|
2017-11-18 20:33:53 +00:00
|
|
|
|
|
|
|
private openCustomNodeModal = () => {
|
|
|
|
this.setState({ isAddingCustomNode: true });
|
|
|
|
};
|
|
|
|
|
|
|
|
private closeCustomNodeModal = () => {
|
|
|
|
this.setState({ isAddingCustomNode: false });
|
|
|
|
};
|
|
|
|
|
2018-02-12 20:43:07 +00:00
|
|
|
private addCustomNode = (payload: AddCustomNodeAction['payload']) => {
|
2017-11-18 20:33:53 +00:00
|
|
|
this.setState({ isAddingCustomNode: false });
|
2018-02-12 20:43:07 +00:00
|
|
|
this.props.addCustomNode(payload);
|
2017-11-18 20:33:53 +00:00
|
|
|
};
|
2017-04-12 05:04:27 +00:00
|
|
|
}
|
2018-02-12 20:43:07 +00:00
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Header);
|