crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor account management itmes

Browse Source
This commit is contained in:
Brandon Millman
2018-05-16 17:44:10 -07:00
parent 48b0b54819
commit 3d4e03f2cd
1 changed files with 70 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
packages/website/ts/components/portal/portal.tsx
View File

@@ -74,6 +74,12 @@ interface PortalState {
tokenManagementState: TokenManagementState;
}
interface AccountManagementItem {
pathName: string;
headerText: string;
render: () => React.ReactNode;
}
enum TokenManagementState {
Add = 'Add',
Remove = 'Remove',
@@ -95,6 +101,7 @@ const styles: Styles = {
},
leftColumn: {
width: LEFT_COLUMN_WIDTH,
height: '100%',
},
scrollContainer: {
height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
@@ -241,7 +248,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
);
}
private _renderWalletAndRelayerIndex(): React.ReactNode {
return <PortalLayout left={this._renderWallet()} right={this._renderRelayerIndex()} />;
return <PortalLayout left={this._renderWallet()} right={this._renderRelayerIndexSection()} />;
}
private _renderMenuAndAccountManagement(routeComponentProps: RouteComponentProps<any>): React.ReactNode {
return <PortalLayout left={this._renderMenu(routeComponentProps)} right={this._renderAccountManagement()} />;
@@ -283,24 +290,47 @@ export class Portal extends React.Component<PortalProps, PortalState> {
);
}
private _renderAccountManagement(): React.ReactNode {
const accountManagementItems: AccountManagementItem[] = [
{
pathName: `${WebsitePaths.Portal}/weth`,
headerText: 'Wrapped ETH',
render: this._renderEthWrapper.bind(this),
},
{
pathName: `${WebsitePaths.Portal}/account`,
headerText: 'Your Account',
render: this._renderTokenBalances.bind(this),
},
{
pathName: `${WebsitePaths.Portal}/trades`,
headerText: 'Trade History',
render: this._renderTradeHistory.bind(this),
},
{
pathName: `${WebsitePaths.Portal}/direct`,
headerText: 'Trade Direct',
render: this._renderTradeDirect.bind(this),
},
];
return (
<Switch>
<Route path={`${WebsitePaths.Portal}/weth`} render={this._renderEthWrapper.bind(this)} />
<Route path={`${WebsitePaths.Portal}/account`} render={this._renderTokenBalances.bind(this)} />
<Route path={`${WebsitePaths.Portal}/trades`} render={this._renderTradeHistory.bind(this)} />
<Route path={`${WebsitePaths.Portal}/direct`} render={this._renderTradeDirect.bind(this)} />
{_.map(accountManagementItems, item => {
return <Route path={item.pathName} render={this._renderAccountManagementItem.bind(this, item)} />;
})}}
<Route render={this._renderNotFoundMessage.bind(this)} />
</Switch>
);
}
private _renderEthWrapper(): React.ReactNode {
private _renderAccountManagementItem(item: AccountManagementItem): React.ReactNode {
return (
<Section
header={<TextHeader labelText="Wrapped ETH" />}
body={
<Loading
isLoading={!this.props.blockchainIsLoaded}
content={
header={<TextHeader labelText={item.headerText} />}
body={<Loading isLoading={!this.props.blockchainIsLoaded} content={item.render()} />}
/>
);
}
private _renderEthWrapper(): React.ReactNode {
return (
<EthWrappers
networkId={this.props.networkId}
blockchain={this._blockchain}
@@ -310,60 +340,30 @@ export class Portal extends React.Component<PortalProps, PortalState> {
userEtherBalanceInWei={this.props.userEtherBalanceInWei}
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
/>
}
/>
}
/>
);
}
private _renderTradeHistory(): React.ReactNode {
return (
<Section
header={<TextHeader labelText="Trade History" />}
body={
<Loading
isLoading={!this.props.blockchainIsLoaded}
content={
<TradeHistory
tokenByAddress={this.props.tokenByAddress}
userAddress={this.props.userAddress}
networkId={this.props.networkId}
/>
}
/>
}
/>
);
}
private _renderTradeDirect(match: any, location: Location, history: History): React.ReactNode {
return (
<Section
header={<TextHeader labelText="Trade Direct" />}
body={
<Loading
isLoading={!this.props.blockchainIsLoaded}
content={
<GenerateOrderForm
blockchain={this._blockchain}
hashData={this.props.hashData}
dispatcher={this.props.dispatcher}
/>
}
/>
}
/>
);
}
private _renderTokenBalances(): React.ReactNode {
const allTokens = _.values(this.props.tokenByAddress);
const trackedTokens = _.filter(allTokens, t => t.isTracked);
return (
<Section
header={<TextHeader labelText="Your Account" />}
body={
<Loading
isLoading={!this.props.blockchainIsLoaded}
content={
<TokenBalances
blockchain={this._blockchain}
blockchainErr={this.props.blockchainErr}
@@ -377,13 +377,9 @@ export class Portal extends React.Component<PortalProps, PortalState> {
networkId={this.props.networkId}
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
/>
}
/>
}
/>
);
}
private _renderRelayerIndex(): React.ReactNode {
private _renderRelayerIndexSection(): React.ReactNode {
return (
<Section
header={<TextHeader labelText="Explore 0x Relayers" />}