aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx13
-rw-r--r--packages/website/ts/components/wallet/wallet_disconnected_item.tsx100
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}
- />
- );
-};