aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/instant/src/components/payment_method.tsx35
-rw-r--r--packages/instant/src/constants.ts1
2 files changed, 26 insertions, 10 deletions
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index ca646880d..3bbe3f1a0 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -9,6 +9,7 @@ import { PaymentMethodDropdown } from './payment_method_dropdown';
import { Circle } from './ui/circle';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
+import { Icon } from './ui/icon';
import { Text } from './ui/text';
export interface PaymentMethodProps {
@@ -56,10 +57,11 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
};
private readonly _renderTitleLabel = (): React.ReactNode => {
const { account } = this.props;
- if (account.state === AccountState.Ready) {
+ if (account.state === AccountState.Ready || account.state === AccountState.Locked) {
+ const circleColor: ColorOption = account.state === AccountState.Ready ? ColorOption.green : ColorOption.red;
return (
<React.Fragment>
- <Circle color={ColorOption.green} diameter={8} />
+ <Circle diameter={8} color={circleColor} />
<Container marginLeft="3px">
<Text fontColor={ColorOption.darkGrey} fontSize="12px">
MetaMask
@@ -74,11 +76,25 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
const { account, network } = this.props;
switch (account.state) {
case AccountState.Loading:
- return 'loading...';
+ return <Container height="48px" />;
case AccountState.Locked:
- return <WalletPrompt onClick={this._openInstallWalletPanel}>Unlock MetaMask</WalletPrompt>;
+ return (
+ <WalletPrompt
+ onClick={this._openInstallWalletPanel}
+ image={<Icon width={13} icon="lock" color={ColorOption.black} />}
+ >
+ Please Unlock MetaMask
+ </WalletPrompt>
+ );
case AccountState.None:
- return <WalletPrompt onClick={this._openInstallWalletPanel}>Install MetaMask</WalletPrompt>;
+ return (
+ <WalletPrompt
+ onClick={this._openInstallWalletPanel}
+ image={<MetaMaskLogo width={19} height={18} />}
+ >
+ Install MetaMask
+ </WalletPrompt>
+ );
case AccountState.Ready:
return (
<PaymentMethodDropdown
@@ -88,7 +104,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
/>
);
default:
- return 'payment method';
+ return null;
}
};
private readonly _openInstallWalletPanel = () => {
@@ -97,10 +113,11 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
}
interface WalletPromptProps {
+ image: React.ReactNode;
onClick?: () => void;
}
-const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onClick, children }) => (
+const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onClick, image, children }) => (
<Container
padding="12px"
border={`1px solid ${ColorOption.darkOrange}`}
@@ -112,9 +129,7 @@ const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onClick, ch
boxShadowOnHover={!!onClick}
>
<Flex>
- <Container marginRight="10px">
- <MetaMaskLogo width={19} height={18} />
- </Container>
+ <Container marginRight="10px">{image}</Container>
<Text fontSize="16px" fontColor={ColorOption.darkOrange}>
{children}
</Text>
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 3e2638b0e..4db73845b 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -17,6 +17,7 @@ export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
export const PROGRESS_STALL_AT_WIDTH = '95%';
export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200;
+export const NULL_ADDRESS = '0x0000000000000000000000000000000000000000';
export const META_MASK_CHROME_STORE_URL =
'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en';
export const META_MASK_SITE_URL = 'https://metamask.io/';