Adding new welcome landing page

brave/gulpfile.js/brave-replace-paths.js

@@ -103,6 +103,12 @@ const createBraveReplacePathsTask = () => {
           `'${bravePrefix}ui/app/pages/settings/security-tab/security-tab.component'`
         )
       )
+      .pipe(
+        replace(
+          /\'(.*)\/welcome\.component\'/gm,
+          `'${bravePrefix}ui/app/pages/first-time-flow/welcome/welcome.component'`
+        )
+      )
       .pipe(gulp.dest(file => file.base))
   })
 }

brave/ui/app/components/app/connect-wallet/assets/styles.js

@@ -0,0 +1,47 @@
+module.exports = {
+  container: {
+    width: '100%',
+    border: '1px solid rgb(218, 220, 232)',
+    borderRadius: '12px',
+    padding: '20px 35px',
+    textAlign: 'left',
+    marginTop: '20px'
+  },
+  title: {
+    display: 'block',
+    fontSize: '18px',
+    fontWeight: '500',
+    color: 'rgb(59, 62, 79)'
+  },
+  subText: {
+    display: 'block',
+    fontWeight: '14px',
+    fontWeight: '300',
+    marginTop: '5px',
+    maxWidth: '515px'
+  },
+  controls: {
+    display: 'inline-block',
+    float: 'right',
+    marginTop: '23px'
+  },
+  create: {
+    width: '85px',
+    height: '32px',
+    border: '1px solid rgb(194, 196, 207)',
+    borderRadius: '100px',
+    marginRight: '20px',
+    fontSize: '14px',
+    fontWeight: 'bold',
+    color: 'rgb(59, 62, 79)',
+    cursor: 'pointer'
+  },
+  restore: {
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: 'bold'
+  },
+  hardwareImg: {
+    width: '100px'
+  }
+}

brave/ui/app/components/app/connect-wallet/connect-wallet.component.js

@@ -0,0 +1,78 @@
+import React,{ PureComponent } from "react";
+import styles from './assets/styles'
+
+module.exports = class ConnectWallet extends PureComponent {
+
+  get text () {
+    const { type } = this.props
+    const hardwareString = (type) => `Connect your ${type} hardware wallet to interact with dApps and make transfers to other connected wallets.`
+
+    switch (type) {
+      case 'browser':
+        return {
+          title: 'New Browser Wallet',
+          subText: 'Create a new Brave browser wallet to access dApps and store crypto and collectibles securely. Trade tokens annonymously with no trading fees.'
+        }
+      case 'ledger':
+        return {
+          title: (<div>
+                    <img style={styles.hardwareImg} src={'images/ledger-logo.svg'} />
+                  </div>),
+          subText: hardwareString('Ledger')
+        }
+      case 'trezor':
+        return {
+          title: (<div>
+                    <img style={styles.hardwareImg} src={'images/trezor-logo.svg'} />
+                  </div>),
+          subText: hardwareString('Trezor')
+        }
+      default:
+        return { title: '', subText: '' }
+    }
+  }
+
+  render () {
+    const { type, onCreate, onRestore } = this.props
+    const innerText = type === 'browser' ? 'Create' : 'Connect'
+    const hwButtonStyle = type !== 'browser' ? { marginRight: '-15px' } : {}
+
+    return (
+      <div style={styles.container}>
+        <div style={styles.controls}>
+          {
+            onCreate
+            ? <button
+                style={
+                  {
+                    ...styles.create,
+                    ...hwButtonStyle
+                  }
+                }
+                onClick={onCreate}
+              >
+                {innerText}
+              </button>
+            : null  
+          }        
+          {
+            onRestore
+            ? <span
+                style={styles.restore}
+                onClick={onRestore}
+              >
+                {'Restore'}
+              </span>
+            : null  
+          }
+        </div>
+        <div style={styles.title}>
+          <span>{this.text.title}</span>
+        </div>
+        <div style={styles.subText}>
+          <span>{this.text.subText}</span>
+        </div>
+      </div>
+    )
+  }
+}

brave/ui/app/components/app/connect-wallet/index.js

@@ -0,0 +1 @@
+export { default } from './connect-wallet.component'