aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx8
-rw-r--r--packages/website/ts/components/ui/container.tsx1
-rw-r--r--packages/website/ts/components/ui/text.tsx3
-rw-r--r--packages/website/ts/components/wallet/body_overlay.tsx147
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx20
-rw-r--r--packages/website/ts/types.ts2
-rw-r--r--packages/website/ts/utils/utils.ts4
7 files changed, 178 insertions, 7 deletions
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index cbbd39c70..24fbb45ec 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -156,7 +156,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
return <CircularProgress size={ROOT_HEIGHT} thickness={2} />;
case AccountState.Locked:
return <Lock color={colors.black} />;
- case AccountState.Unconnected:
+ case AccountState.Disconnected:
return <ActionAccountBalanceWallet color={colors.mediumBlue} />;
default:
return null;
@@ -179,7 +179,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
return colors.darkGrey;
case AccountState.Ready:
case AccountState.Locked:
- case AccountState.Unconnected:
+ case AccountState.Disconnected:
default:
return colors.black;
}
@@ -200,7 +200,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
</Container>
</Container>
);
- case AccountState.Unconnected:
+ case AccountState.Disconnected:
case AccountState.Loading:
default:
return null;
@@ -213,7 +213,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
return colors.green;
case AccountState.Locked:
case AccountState.Loading:
- case AccountState.Unconnected:
+ case AccountState.Disconnected:
default:
return colors.red;
}
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 2abcc00f6..fb718d731 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -14,6 +14,7 @@ export interface ContainerProps {
backgroundColor?: string;
borderRadius?: StringOrNum;
maxWidth?: StringOrNum;
+ maxHeight?: StringOrNum;
width?: StringOrNum;
height?: StringOrNum;
minHeight?: StringOrNum;
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 1e2a123b7..88f216d4e 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -15,6 +15,7 @@ export interface TextProps {
minHeight?: string;
center?: boolean;
fontWeight?: number | string;
+ textDecorationLine?: string;
onClick?: () => void;
}
@@ -28,6 +29,7 @@ export const Text = styled(PlainText)`
font-family: ${props => props.fontFamily};
font-weight: ${props => props.fontWeight};
font-size: ${props => props.fontSize};
+ text-decoration-line: ${props => props.textDecorationLine};
${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
${props => (props.center ? 'text-align: center' : '')};
color: ${props => props.fontColor};
@@ -45,6 +47,7 @@ Text.defaultProps = {
fontColor: colors.black,
fontSize: '15px',
lineHeight: '1.5em',
+ textDecorationLine: 'none',
Tag: 'div',
};
diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx
new file mode 100644
index 000000000..8f8899a92
--- /dev/null
+++ b/packages/website/ts/components/wallet/body_overlay.tsx
@@ -0,0 +1,147 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Blockchain } from 'ts/blockchain';
+import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
+import { Island } from 'ts/components/ui/island';
+import { Text } from 'ts/components/ui/text';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
+import { AccountState, BrowserType, ProviderType } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
+
+const METAMASK_IMG_SRC = '/images/metamask_icon.png';
+
+export interface BodyOverlayProps {
+ dispatcher: Dispatcher;
+ userAddress: string;
+ injectedProviderName: string;
+ providerType: ProviderType;
+ onToggleLedgerDialog: () => void;
+ blockchain?: Blockchain;
+ blockchainIsLoaded: boolean;
+}
+
+interface BodyOverlayState {}
+
+export class BodyOverlay extends React.Component<BodyOverlayProps, BodyOverlayState> {
+ public render(): React.ReactNode {
+ const accountState = this._getAccountState();
+ switch (accountState) {
+ case AccountState.Locked:
+ return <LockedOverlay onUseDifferentWalletClicked={this.props.onToggleLedgerDialog} />;
+ case AccountState.Disconnected:
+ return <DisconnectedOverlay onUseDifferentWalletClicked={this.props.onToggleLedgerDialog} />;
+ case AccountState.Ready:
+ case AccountState.Loading:
+ default:
+ return null;
+ }
+ }
+ private _isBlockchainReady(): boolean {
+ return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain);
+ }
+ private _getAccountState(): AccountState {
+ return utils.getAccountState(
+ this._isBlockchainReady(),
+ this.props.providerType,
+ this.props.injectedProviderName,
+ this.props.userAddress,
+ );
+ }
+}
+
+interface LockedOverlayProps {
+ className?: string;
+ onUseDifferentWalletClicked?: () => void;
+}
+const PlainLockedOverlay: React.StatelessComponent<LockedOverlayProps> = ({
+ className,
+ onUseDifferentWalletClicked,
+}) => (
+ <div className={className}>
+ <Container
+ className="flex flex-column items-center"
+ marginBottom="24px"
+ marginTop="24px"
+ marginLeft="48px"
+ marginRight="48px"
+ >
+ <Image src={METAMASK_IMG_SRC} height="70px" />
+ <Container marginTop="12px">
+ <Text fontColor="#F68C24" fontSize="16px" fontWeight="bold">
+ Please Unlock MetaMask
+ </Text>
+ </Container>
+ <UseDifferentWallet fontColor={colors.darkGrey} onClick={onUseDifferentWalletClicked} />
+ </Container>
+ </div>
+);
+const LockedOverlay = styled(PlainLockedOverlay)`
+ background: rgba(255, 248, 242, 0.8);
+ border: 1px solid #f68c24;
+ box-sizing: border-box;
+ border-radius: 10px;
+`;
+
+interface DisconnectedOverlayProps {
+ onUseDifferentWalletClicked?: () => void;
+}
+const DisconnectedOverlay = (props: DisconnectedOverlayProps) => {
+ return (
+ <div className="flex flex-column items-center">
+ <GetMetaMask />
+ <UseDifferentWallet fontColor={colors.mediumBlue} onClick={props.onUseDifferentWalletClicked} />
+ </div>
+ );
+};
+
+interface UseDifferentWallet {
+ fontColor: string;
+ onClick?: () => void;
+}
+const UseDifferentWallet = (props: UseDifferentWallet) => {
+ return (
+ <Container marginTop="12px">
+ <Text fontColor={props.fontColor} fontSize="16px" textDecorationLine="underline" onClick={props.onClick}>
+ Use a different wallet
+ </Text>
+ </Container>
+ );
+};
+
+const GetMetaMask = () => {
+ const browserType = utils.getBrowserType();
+ let extensionLink;
+ 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 (
+ <a href={extensionLink} target="_blank" style={{ textDecoration: 'none' }}>
+ <Island
+ className="flex items-center py1 px2"
+ style={{ height: 28, borderRadius: 28, backgroundColor: colors.mediumBlue }}
+ >
+ <Image src={METAMASK_IMG_SRC} width="28px" />
+ <Container marginLeft="8px" marginRight="12px">
+ <Text fontColor={colors.white} fontSize="16px" fontWeight={500}>
+ Get Metamask Wallet
+ </Text>
+ </Container>
+ </Island>
+ </a>
+ );
+};
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 4c1d27598..9e9bb2e97 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -26,6 +26,7 @@ import { Identicon } from 'ts/components/ui/identicon';
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';
@@ -196,6 +197,25 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
{_.map(loadingRowsRange, index => {
return <NullTokenRow />;
})}
+ <Container
+ className="flex items-center"
+ position="absolute"
+ width="100%"
+ height="100%"
+ maxHeight={bodyStyle.maxHeight}
+ >
+ <div className="mx-auto">
+ <BodyOverlay
+ dispatcher={this.props.dispatcher}
+ userAddress={this.props.userAddress}
+ injectedProviderName={this.props.injectedProviderName}
+ providerType={this.props.providerType}
+ onToggleLedgerDialog={this.props.onToggleLedgerDialog}
+ blockchain={this.props.blockchain}
+ blockchainIsLoaded={this.props.blockchainIsLoaded}
+ />
+ </div>
+ </Container>
</div>
);
}
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index cd1f3d7bb..5c44395a3 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -565,7 +565,7 @@ export enum BrowserType {
}
export enum AccountState {
- Unconnected = 'Unconnected',
+ Disconnected = 'Disconnected',
Ready = 'Ready',
Loading = 'Loading',
Locked = 'Locked',
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 5a180fdca..726e1815f 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -201,7 +201,7 @@ export const utils = {
return utils.getAddressBeginAndEnd(userAddress);
case AccountState.Locked:
return 'Please Unlock';
- case AccountState.Unconnected:
+ case AccountState.Disconnected:
return 'Connect a Wallet';
default:
return '';
@@ -223,7 +223,7 @@ export const utils = {
} else if (isExternallyInjectedProvider) {
return AccountState.Locked;
} else {
- return AccountState.Unconnected;
+ return AccountState.Disconnected;
}
},
hasUniqueNameAndSymbol(tokens: Token[], token: Token): boolean {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-17 05:38:30 +0800