diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-07-25 05:19:19 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-07-25 05:19:19 +0800 |
commit | b9f5c9383067874d2bb87dcc68808d4563f45363 (patch) | |
tree | 10859582a560b2a3948e355e1d3d15b4f4688daa /packages/website/ts/components/wallet/wallet.tsx | |
parent | 0f8e6b395eb2260bbb03da9de35505a7a91c5c7b (diff) | |
download | dexon-sol-tools-b9f5c9383067874d2bb87dcc68808d4563f45363.tar dexon-sol-tools-b9f5c9383067874d2bb87dcc68808d4563f45363.tar.gz dexon-sol-tools-b9f5c9383067874d2bb87dcc68808d4563f45363.tar.bz2 dexon-sol-tools-b9f5c9383067874d2bb87dcc68808d4563f45363.tar.lz dexon-sol-tools-b9f5c9383067874d2bb87dcc68808d4563f45363.tar.xz dexon-sol-tools-b9f5c9383067874d2bb87dcc68808d4563f45363.tar.zst dexon-sol-tools-b9f5c9383067874d2bb87dcc68808d4563f45363.zip |
Fix wrap button alignment issue
Diffstat (limited to 'packages/website/ts/components/wallet/wallet.tsx')
-rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 28 |
1 files changed, 11 insertions, 17 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 2cba993c4..02b403220 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -74,14 +74,14 @@ interface WalletState { isHoveringSidebar: boolean; } -interface AllowanceToggleConfig { +interface AllowanceStateToggleConfig { token: Token; tokenState: TokenState; } interface AccessoryItemConfig { wrappedEtherDirection?: Side; - allowanceToggleConfig?: AllowanceToggleConfig; + allowanceStateToggleConfig?: AllowanceStateToggleConfig; } const ETHER_ICON_PATH = '/images/ether.png'; @@ -89,7 +89,8 @@ const ICON_DIMENSION = 28; const BODY_ITEM_KEY = 'BODY'; const HEADER_ITEM_KEY = 'HEADER'; const ETHER_ITEM_KEY = 'ETHER'; -const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; +const WRAP_ROW_ALLOWANCE_TOGGLE_WIDTH = 67; +const ALLOWANCE_TOGGLE_WIDTH = 56; const PLACEHOLDER_COLOR = colors.grey300; const LOADING_ROWS_COUNT = 6; @@ -338,7 +339,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { ); const accessoryItemConfig: AccessoryItemConfig = { wrappedEtherDirection, - allowanceToggleConfig: { + allowanceStateToggleConfig: { token, tokenState, }, @@ -393,12 +394,14 @@ export class Wallet extends React.Component<WalletProps, WalletState> { } private _renderAccessoryItems(config: AccessoryItemConfig): React.ReactElement<{}> { const shouldShowWrappedEtherAction = !_.isUndefined(config.wrappedEtherDirection); - const shouldShowToggle = !_.isUndefined(config.allowanceToggleConfig); + const shouldShowToggle = !_.isUndefined(config.allowanceStateToggleConfig); // if we don't have a toggle, we still want some space to the right of the "wrap" button so that it aligns with // the "unwrap" button in the row below + const isWrapEtherRow = shouldShowWrappedEtherAction && config.wrappedEtherDirection === Side.Deposit; + const width = isWrapEtherRow ? WRAP_ROW_ALLOWANCE_TOGGLE_WIDTH : ALLOWANCE_TOGGLE_WIDTH; const toggle = ( - <Container className="flex justify-center" width={NO_ALLOWANCE_TOGGLE_SPACE_WIDTH}> - {shouldShowToggle && this._renderAllowanceToggle(config.allowanceToggleConfig)} + <Container className="flex justify-center" width={width}> + {shouldShowToggle && this._renderAllowanceToggle(config.allowanceStateToggleConfig)} </Container> ); return ( @@ -410,17 +413,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> { </div> ); } - private _renderAllowanceToggle(config: AllowanceToggleConfig): React.ReactNode { + private _renderAllowanceToggle(config: AllowanceStateToggleConfig): React.ReactNode { // TODO: Error handling - // return ( - // <AllowanceToggle - // blockchain={this.props.blockchain} - // token={config.token} - // tokenState={config.tokenState} - // isDisabled={!config.tokenState.isLoaded} - // refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)} - // /> - // ); return ( <AllowanceStateToggle blockchain={this.props.blockchain} |