feat: add more info section to the metamask panel

2 files changed, 8 insertions, 4 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>
                 )}