aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-05-17 08:44:10 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-05-18 02:02:55 +0800
commit3d4e03f2cd4cb2db3df535a2c95dd2e500fb6f6e (patch)
treec018710dfada07786daf1373a5f3bc02b96f72ce /packages/website/ts
parent48b0b5481982b378277e517380cdd343773c7c64 (diff)
downloaddexon-sol-tools-3d4e03f2cd4cb2db3df535a2c95dd2e500fb6f6e.tar
dexon-sol-tools-3d4e03f2cd4cb2db3df535a2c95dd2e500fb6f6e.tar.gz
dexon-sol-tools-3d4e03f2cd4cb2db3df535a2c95dd2e500fb6f6e.tar.bz2
dexon-sol-tools-3d4e03f2cd4cb2db3df535a2c95dd2e500fb6f6e.tar.lz
dexon-sol-tools-3d4e03f2cd4cb2db3df535a2c95dd2e500fb6f6e.tar.xz
dexon-sol-tools-3d4e03f2cd4cb2db3df535a2c95dd2e500fb6f6e.tar.zst
dexon-sol-tools-3d4e03f2cd4cb2db3df535a2c95dd2e500fb6f6e.zip
Refactor account management itmes
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/portal/portal.tsx144
1 files changed, 70 insertions, 74 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index bcb8e60ef..d9d50c5ab 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -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,74 +290,73 @@ 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={
- <EthWrappers
- networkId={this.props.networkId}
- blockchain={this._blockchain}
- dispatcher={this.props.dispatcher}
- tokenByAddress={this.props.tokenByAddress}
- userAddress={this.props.userAddress}
- userEtherBalanceInWei={this.props.userEtherBalanceInWei}
- lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
- />
- }
- />
- }
+ 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}
+ dispatcher={this.props.dispatcher}
+ tokenByAddress={this.props.tokenByAddress}
+ userAddress={this.props.userAddress}
+ 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}
- />
- }
- />
- }
+ <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}
- />
- }
- />
- }
+ <GenerateOrderForm
+ blockchain={this._blockchain}
+ hashData={this.props.hashData}
+ dispatcher={this.props.dispatcher}
/>
);
}
@@ -358,32 +364,22 @@ export class Portal extends React.Component<PortalProps, PortalState> {
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}
- blockchainIsLoaded={this.props.blockchainIsLoaded}
- dispatcher={this.props.dispatcher}
- screenWidth={this.props.screenWidth}
- tokenByAddress={this.props.tokenByAddress}
- trackedTokens={trackedTokens}
- userAddress={this.props.userAddress}
- userEtherBalanceInWei={this.props.userEtherBalanceInWei}
- networkId={this.props.networkId}
- lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
- />
- }
- />
- }
+ <TokenBalances
+ blockchain={this._blockchain}
+ blockchainErr={this.props.blockchainErr}
+ blockchainIsLoaded={this.props.blockchainIsLoaded}
+ dispatcher={this.props.dispatcher}
+ screenWidth={this.props.screenWidth}
+ tokenByAddress={this.props.tokenByAddress}
+ trackedTokens={trackedTokens}
+ userAddress={this.props.userAddress}
+ userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+ networkId={this.props.networkId}
+ lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
/>
);
}
- private _renderRelayerIndex(): React.ReactNode {
+ private _renderRelayerIndexSection(): React.ReactNode {
return (
<Section
header={<TextHeader labelText="Explore 0x Relayers" />}