feat: add more info section to the metamask panel

3 files changed, 10 insertions, 5 deletions

diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx
index 07e56ed70..7000e27f6 100644
--- a/packages/instant/src/components/install_wallet_panel_content.tsx
+++ b/packages/instant/src/components/install_wallet_panel_content.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { METAMASK_CHROME_STORE_URL } from '../constants';
+import { META_MASK_CHROME_STORE_URL, META_MASK_SITE_URL } from '../constants';
 import { ColorOption } from '../style/theme';
 
 import { MetaMaskLogo } from './meta_mask_logo';
@@ -14,9 +14,13 @@ export const InstallWalletPanelContent: React.StatelessComponent<InstallWalletPa
         image={<MetaMaskLogo width={85} height={80} />}
         title="Install MetaMask"
         description="Please install the MetaMask wallet extension from the Chrome Store."
+        moreInfoSettings={{
+            href: META_MASK_SITE_URL,
+            text: 'What is MetaMask?',
+        }}
         action={
             <Button
-                href={METAMASK_CHROME_STORE_URL}
+                href={META_MASK_CHROME_STORE_URL}
                 width="100%"
                 fontSize="16px"
                 fontColor={ColorOption.white}
diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx
index da851b232..fca5383ea 100644
--- a/packages/instant/src/components/standard_panel_content.tsx
+++ b/packages/instant/src/components/standard_panel_content.tsx
@@ -43,14 +43,14 @@ export const StandardPanelContent: React.StatelessComponent<StandardPanelContent
             </Container>
             <Container marginBottom={spacingBetweenPx}>
                 {moreInfoSettings && (
-                    <a href={moreInfoSettings.href}>
+                    <a href={moreInfoSettings.href} target="_blank">
                         <Text
                             center={true}
                             fontSize="13px"
                             textDecorationLine="underline"
                             fontColor={ColorOption.lightGrey}
                         >
-                            {moreInfoSettings.text}>
+                            {moreInfoSettings.text}
                         </Text>
                     </a>
                 )}
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 7888e0ccb..3e2638b0e 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -17,8 +17,9 @@ 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 METAMASK_CHROME_STORE_URL =
+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/';
 export const ETHEREUM_NODE_URL_BY_NETWORK = {
     [Network.Mainnet]: 'https://mainnet.infura.io/',
     [Network.Kovan]: 'https://kovan.infura.io/',