diff options
| -rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 13 | ||||
| -rw-r--r-- | packages/website/ts/components/wallet/wallet_disconnected_item.tsx | 100 |
2 files changed, 1 insertions, 112 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 9e9bb2e97..febb526d7 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -27,7 +27,6 @@ import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { BodyOverlay } from 'ts/components/wallet/body_overlay'; -import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -195,7 +194,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { return ( <div key={BODY_ITEM_KEY} className="flex flex-column" style={bodyStyle}> {_.map(loadingRowsRange, index => { - return <NullTokenRow />; + return <NullTokenRow key={index} />; })} <Container className="flex items-center" @@ -249,16 +248,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> { /> ); } - private _renderDisconnectedRows(): React.ReactElement<{}> { - return ( - <WalletDisconnectedItem - key={DISCONNECTED_ITEM_KEY} - providerType={this.props.providerType} - injectedProviderName={this.props.injectedProviderName} - onToggleLedgerDialog={this.props.onToggleLedgerDialog} - /> - ); - } private _renderConnectedHeaderRows(): React.ReactElement<{}> { const userAddress = this.props.userAddress; const main = ( diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx deleted file mode 100644 index 024b28544..000000000 --- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { Styles } from '@0xproject/react-shared'; -import FlatButton from 'material-ui/FlatButton'; -import * as React from 'react'; - -import { colors } from 'ts/style/colors'; -import { BrowserType, ProviderType } from 'ts/types'; -import { constants } from 'ts/utils/constants'; -import { utils } from 'ts/utils/utils'; - -export interface WalletDisconnectedItemProps { - providerType: ProviderType; - injectedProviderName: string; - onToggleLedgerDialog: () => void; -} - -const styles: Styles = { - button: { - border: colors.walletBorder, - borderStyle: 'solid', - borderWidth: 1, - height: 80, - }, - hrefAdjustment: { - paddingTop: 20, // HACK: For some reason when we set the href prop of a FlatButton material-ui reduces the top padding - }, - otherWalletText: { - fontSize: 14, - color: colors.grey500, - textDecoration: 'underline', - }, -}; - -const ITEM_HEIGHT = 381; -const METAMASK_ICON_WIDTH = 35; -const LEDGER_ICON_WIDTH = 30; -const BUTTON_BOTTOM_PADDING = 80; - -export const WalletDisconnectedItem: React.StatelessComponent<WalletDisconnectedItemProps> = ( - props: WalletDisconnectedItemProps, -) => { - const isExternallyInjectedProvider = utils.isExternallyInjected(props.providerType, props.injectedProviderName); - return ( - <div className="flex flex-center"> - <div className="mx-auto"> - <div className="table" style={{ height: ITEM_HEIGHT }}> - <div className="table-cell align-middle"> - <ProviderButton isExternallyInjectedProvider={isExternallyInjectedProvider} /> - <div className="flex flex-center py2" style={{ paddingBottom: BUTTON_BOTTOM_PADDING }}> - <div className="mx-auto"> - <div onClick={props.onToggleLedgerDialog} style={{ cursor: 'pointer' }}> - <img src="/images/ledger_icon.png" style={{ width: LEDGER_ICON_WIDTH }} /> - <span className="px1" style={styles.otherWalletText}> - user other wallet - </span> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - ); -}; - -interface ProviderButtonProps { - isExternallyInjectedProvider: boolean; -} - -const ProviderButton: React.StatelessComponent<ProviderButtonProps> = (props: ProviderButtonProps) => { - const browserType = utils.getBrowserType(); - let extensionLink; - if (!props.isExternallyInjectedProvider) { - switch (browserType) { - case BrowserType.Chrome: - extensionLink = constants.URL_METAMASK_CHROME_STORE; - break; - case BrowserType.Firefox: - extensionLink = constants.URL_METAMASK_FIREFOX_STORE; - break; - case BrowserType.Opera: - extensionLink = constants.URL_METAMASK_OPERA_STORE; - break; - default: - extensionLink = constants.URL_METAMASK_HOMEPAGE; - } - } - return ( - <FlatButton - label={props.isExternallyInjectedProvider ? 'Please unlock account' : 'Get Metamask Wallet Extension'} - labelStyle={{ color: colors.black }} - labelPosition="after" - primary={true} - icon={<img src="/images/metamask_icon.png" width={METAMASK_ICON_WIDTH.toString()} />} - style={props.isExternallyInjectedProvider ? styles.button : { ...styles.button, ...styles.hrefAdjustment }} - href={extensionLink} - target={props.isExternallyInjectedProvider ? undefined : '_blank'} - disabled={props.isExternallyInjectedProvider} - /> - ); -}; |