aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-10 07:40:02 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-10 07:40:02 +0800
commit2bba01c664efb52d3213be54544ef9d9cea0f82f (patch)
treedbb27ef4104a1b1929496d43a49f6d00e4e44a57 /packages/instant/src/components
parent433fb3597dc19cb223a2b8d0e373502042241abb (diff)
downloaddexon-sol-tools-2bba01c664efb52d3213be54544ef9d9cea0f82f.tar
dexon-sol-tools-2bba01c664efb52d3213be54544ef9d9cea0f82f.tar.gz
dexon-sol-tools-2bba01c664efb52d3213be54544ef9d9cea0f82f.tar.bz2
dexon-sol-tools-2bba01c664efb52d3213be54544ef9d9cea0f82f.tar.lz
dexon-sol-tools-2bba01c664efb52d3213be54544ef9d9cea0f82f.tar.xz
dexon-sol-tools-2bba01c664efb52d3213be54544ef9d9cea0f82f.tar.zst
dexon-sol-tools-2bba01c664efb52d3213be54544ef9d9cea0f82f.zip
feat: toggle wallet connection color
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/payment_method.tsx35
1 files changed, 25 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>