Integrate exchange page

src/components/ExchangePage/ExchangeCard.js

@@ -0,0 +1,39 @@
+// @flow
+
+import React from 'react'
+import { shell } from 'electron'
+
+import type { T } from 'types/common'
+
+import ExternalLinkIcon from 'icons/ExternalLink'
+import Box, { Card } from 'components/base/Box'
+import { FakeLink } from 'components/base/Link'
+
+type CardType = {
+  logo: any,
+  desc: string,
+  url: string,
+}
+
+export default function ExchangeCard({ t, card }: { t: T, card: CardType }) {
+  const { logo, desc } = card
+  return (
+    <Card
+      horizontal
+      p={5}
+      style={{ cursor: 'pointer' }}
+      onClick={() => shell.openExternal(card.url)}
+    >
+      <Box justify="center" style={{ width: 200 }}>
+        {logo}
+      </Box>
+      <Box shrink ff="Open Sans|Regular" fontSize={4} flow={3}>
+        <Box>{desc}</Box>
+        <Box horizontal align="center" color="wallet" flow={1}>
+          <FakeLink>{t('exchange:visitWebsite')}</FakeLink>
+          <ExternalLinkIcon size={14} />
+        </Box>
+      </Box>
+    </Card>
+  )
+}

src/components/ExchangePage/index.js

@@ -0,0 +1,51 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+
+import type { T } from 'types/common'
+
+import { i } from 'helpers/staticPath'
+
+import Box from 'components/base/Box'
+import ExchangeCard from './ExchangeCard'
+
+import CoinhouseLogo from './logos/coinhouse'
+
+const LOREM =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce orci ex, egestas quis consequat et, viverra sed neque. Nulla varius lectus eu felis dapibus, non rhoncus sem interdum.'
+
+const cards = [
+  {
+    key: 'coinhouse',
+    url: 'https://www.coinhouse.com/',
+    logo: <CoinhouseLogo width={150} />,
+    desc: LOREM,
+  },
+  {
+    key: 'shapeshift',
+    url: 'https://shapeshift.io',
+    logo: <img alt="shapeshift logo" src={i('logos/shapeshift.png')} style={{ width: 150 }} />,
+    desc: LOREM,
+  },
+]
+
+type Props = {
+  t: T,
+}
+
+class ExchangePage extends PureComponent<Props> {
+  render() {
+    const { t } = this.props
+    return (
+      <Box>
+        <Box ff="Museo Sans|Regular" color="dark" fontSize={7} mb={4}>
+          {t('exchange:title')}
+        </Box>
+        <Box flow={5}>{cards.map(card => <ExchangeCard key={card.key} t={t} card={card} />)}</Box>
+      </Box>
+    )
+  }
+}
+
+export default translate()(ExchangePage)

src/components/ExchangePage/logos/coinhouse.js

@@ -0,0 +1,44 @@
+// @flow
+
+import React from 'react'
+
+export default ({ width }: { width: number }) => (
+  <svg width={width} version="1.1" viewBox="0 0 124.27 24.819">
+    <path
+      d="m1.293 24.819c-0.197-0.127-0.39-0.258-0.59-0.379-0.46-0.276-0.7-0.674-0.7-1.214 0-2.485 4e-3 -4.97-3e-3 -7.456-1e-3 -0.63 0.327-1.066 0.835-1.34 0.613-0.33 1.265-0.594 1.908-0.867 0.653-0.277 1.322 0.148 1.347 0.876 0.027 0.807 0.022 1.615 1e-3 2.422-0.012 0.456 0.033 0.931 0.435 1.144 0.436 0.23 0.924 0.187 1.394-0.116 0.665-0.429 1.365-0.81 2.076-1.157 0.662-0.324 0.939-0.81 0.933-1.538-0.017-2.237-0.02-4.474 2e-3 -6.71 7e-3 -0.736-0.28-1.315-0.931-1.551-1.097-0.397-1.427-1.13-1.298-2.218 0.062-0.52-1e-3 -1.055 0.013-1.583 0.03-1.141 0.835-1.576 1.808-0.993 1.282 0.77 2.554 1.56 3.86 2.287 0.608 0.339 0.88 0.74 0.873 1.463-0.032 3.79-0.036 7.58 3e-3 11.37 7e-3 0.751-0.267 1.214-0.879 1.563-2.171 1.24-4.343 2.48-6.507 3.732-1.285 0.743-2.556 1.51-3.834 2.265z"
+      fill="#267bbf"
+    />
+    <path
+      d="m71.429 18.807h-1.814v-18.718c0.542-0.176 1.125-0.026 1.786-0.085 0.075 2.063-0.015 4.098 0.05 6.178 0.907-0.742 1.8-1.36 2.923-1.577 2.043-0.397 3.903-0.068 5.503 1.328 1.499 1.31 2.189 2.986 2.19 4.96 3e-3 2.61 1e-3 5.22 1e-3 7.879-0.585 0.152-1.165 0.017-1.794 0.097-0.02-0.293-0.048-0.53-0.048-0.767-4e-3 -2.518-0.073-5.039 0.02-7.553 0.072-1.948-1.885-3.96-3.652-4.259-1.52-0.258-2.742 0.192-3.786 1.106-0.854 0.746-1.392 1.77-1.383 2.997 0.016 2.486 4e-3 4.974 4e-3 7.46z"
+      fill="#347fc2"
+    />
+    <path
+      d="m36.337 11.614c-0.11 2.786 2.212 5.532 5.499 5.538 3.421 7e-3 5.574-2.801 5.556-5.588-0.021-3.129-2.676-5.493-5.563-5.485-3.15 0.01-5.663 2.794-5.492 5.535m-1.829-0.053c-0.07-3.877 3.29-7.324 7.386-7.303 3.941 0.02 7.36 3.291 7.322 7.364-0.037 4.03-3.147 7.327-7.349 7.353-4.1 0.025-7.443-3.33-7.359-7.414"
+      fill="#262449"
+    />
+    <path
+      d="m96.648 11.787c0.145-3.072-2.434-5.624-5.555-5.59-3.355 0.035-5.456 2.757-5.496 5.491-0.042 2.83 2.165 5.665 5.631 5.64 3.018-0.02 5.535-2.538 5.42-5.541m-5.535 7.26c-4.005 0.113-7.352-3.27-7.335-7.336 0.017-3.973 3.386-7.285 7.434-7.276 3.83 9e-3 7.34 3.314 7.287 7.422-0.05 3.875-3.389 7.404-7.386 7.19"
+      fill="#2d7dc0"
+    />
+    <path
+      d="m32.372 15.027 1.267 1.258c-3.372 3.729-8.247 3.393-11.11 0.452-2.782-2.86-2.793-7.855 0.41-10.67 3.067-2.695 7.602-2.62 10.596 0.749l-1.313 1.318c-1.127-1.149-2.473-2.025-4.271-2.028-1.497-3e-3 -2.82 0.45-3.862 1.482-2.195 2.178-2.36 5.321-0.345 7.668 1.638 1.91 5.136 3.09 8.628-0.229"
+      fill="#262449"
+    />
+    <path
+      d="m123.84 8.572h-1.698c-0.047-0.076-0.104-0.125-0.107-0.177-0.084-1.495-1.169-2.54-2.66-2.61-0.771-0.037-1.455 0.21-2.086 0.584a2.06 2.06 0 0 0-1.026 1.852c0.02 0.77 0.486 1.337 1.229 1.688 0.781 0.369 1.618 0.512 2.437 0.726 0.883 0.23 1.755 0.456 2.568 0.907 0.825 0.457 1.347 1.087 1.609 1.993 0.35 1.211 0.175 2.33-0.58 3.307-1.014 1.31-2.379 2-4.057 2.01-0.768 5e-3 -1.502-0.065-2.256-0.326-1.455-0.504-2.385-1.474-2.918-2.855-0.16-0.414-0.128-0.904-0.188-1.384 0.588-0.208 1.132-0.063 1.65-0.114 0.1 0.288 0.216 0.507 0.254 0.74 0.22 1.341 1.132 1.942 2.342 2.273 1.475 0.404 2.649-0.093 3.61-1.183 0.836-0.948 0.574-2.489-0.518-3.122-0.877-0.509-1.865-0.71-2.84-0.941-1.1-0.26-2.18-0.563-3.091-1.289-0.524-0.417-0.807-0.944-0.983-1.589-0.328-1.204-0.025-2.25 0.754-3.143 0.854-0.977 1.935-1.595 3.278-1.628 0.921-0.023 1.822-0.015 2.715 0.353 1.597 0.66 2.644 2.158 2.562 3.928"
+      fill="#2c7dc0"
+    />
+    <path
+      d="m65.642 18.84c0-2.731 3e-3 -5.34 0-7.95-2e-3 -1.078-0.269-2.092-0.949-2.933-1.165-1.44-2.681-2.029-4.512-1.61-1.728 0.394-2.773 1.556-3.257 3.201-0.18 0.609-0.173 1.285-0.178 1.93-0.018 2.42-7e-3 4.84-7e-3 7.312h-1.733v-0.55c0-2.455 0.032-4.91-0.011-7.364-0.032-1.768 0.535-3.289 1.74-4.544 1.004-1.046 2.243-1.703 3.72-1.855 1.744-0.18 3.322 0.23 4.674 1.346 1.26 1.042 2.045 2.383 2.213 4.03 0.287 2.816 0.064 5.64 0.127 8.46 0.01 0.455-0.076 0.513-0.548 0.525-0.398 0.01-0.796 2e-3 -1.279 2e-3"
+      fill="#232247"
+    />
+    <path
+      d="m100.18 4.34h1.624c0.02 0.226 0.058 0.46 0.059 0.695 4e-3 2.33-0.015 4.662 0.015 6.993 8e-3 0.602 0.114 1.216 0.265 1.802 0.396 1.53 1.468 2.454 2.901 2.955 1.947 0.68 4.055-0.266 5.074-1.966 0.486-0.81 0.695-1.677 0.687-2.622-0.019-2.33-6e-3 -4.661-6e-3 -6.992v-0.853h1.698v0.738c0 2.549-0.048 5.098 0.013 7.645 0.068 2.84-2.426 5.666-5.412 5.966-2.012 0.202-3.68-0.41-5.085-1.716-1.046-0.97-1.773-2.25-1.81-3.707-0.078-2.949-0.024-5.9-0.024-8.939"
+      fill="#2a7cc0"
+    />
+    <path
+      d="m52.772 18.805h-1.658v-14.089h1.587c0.154 0.726 0.214 11.88 0.071 14.089"
+      fill="#202045"
+    />
+  </svg>
+)

src/components/SideBar/index.js

@@ -20,7 +20,7 @@ import IconPieChart from 'icons/PieChart'
 import IconPlus from 'icons/Plus'
 import IconReceive from 'icons/Receive'
 import IconSend from 'icons/Send'
-import IconSettings from 'icons/Settings'
+import IconExchange from 'icons/Exchange'
 
 import Box, { Tabbable } from 'components/base/Box'
 import FormattedVal from 'components/base/FormattedVal'
@@ -88,8 +88,8 @@ class SideBar extends PureComponent<Props> {
               <Item icon={<IconManager size={16} />} linkTo="/manager">
                 {t('sidebar:manager')}
               </Item>
-              <Item icon={<IconSettings size={16} />} linkTo="/settings">
-                {t('settings:title')}
+              <Item icon={<IconExchange size={16} />} linkTo="/exchange">
+                {t('sidebar:exchange')}
               </Item>
             </Box>
           </Box>

src/components/base/Link.js

@@ -2,6 +2,13 @@
 
 import styled from 'styled-components'
 
+export const FakeLink = styled.span.attrs({
+  color: 'wallet',
+})`
+  text-decoration: underline;
+  cursor: pointer;
+`
+
 export default styled.a`
   cursor: pointer;
   text-decoration-skip: ink;

src/components/layout/Default.js

@@ -16,6 +16,7 @@ import GrowScroll from 'components/base/GrowScroll'
 import AccountPage from 'components/AccountPage'
 import DashboardPage from 'components/DashboardPage'
 import ManagerPage from 'components/ManagerPage'
+import ExchangePage from 'components/ExchangePage'
 import SettingsPage from 'components/SettingsPage'
 
 import AppRegionDrag from 'components/AppRegionDrag'
@@ -91,6 +92,7 @@ class Default extends Component<Props> {
                 <Route path="/" exact component={DashboardPage} />
                 <Route path="/settings" component={SettingsPage} />
                 <Route path="/manager" component={ManagerPage} />
+                <Route path="/exchange" component={ExchangePage} />
                 <Route path="/account/:id" component={AccountPage} />
               </Container>
             </Box>

src/helpers/staticPath.js

@@ -1,12 +1,26 @@
+// @flow
+
 const { NODE_ENV, STORYBOOK_ENV } = process.env
 
 const isRunningInAsar =
   !STORYBOOK_ENV && process.mainModule && process.mainModule.filename.indexOf('app.asar') !== -1
 
-export default (__DEV__ && !STORYBOOK_ENV && NODE_ENV !== 'test'
-  ? __static
-  : isRunningInAsar
-    ? __dirname.replace(/app\.asar$/, 'static')
-    : !STORYBOOK_ENV
-      ? `${__dirname}/../../static`
-      : 'static')
+const staticPath =
+  __DEV__ && !STORYBOOK_ENV && NODE_ENV !== 'test'
+    ? __static
+    : isRunningInAsar
+      ? __dirname.replace(/app\.asar$/, 'static')
+      : !STORYBOOK_ENV
+        ? `${__dirname}/../../static`
+        : 'static'
+
+/**
+ * Returns resolved static path for given image path
+ *
+ * note: `i` for `image` (using `img` was confusing when using with <img /> tag)
+ */
+export function i(path: string): string {
+  return `/images/${path}`
+}
+
+export default staticPath

src/icons/Exchange.js

@@ -0,0 +1,12 @@
+// @flow
+
+import React from 'react'
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    <path
+      fill="currentColor"
+      d="M3.702,13.025l1.124,1.123c0.282,0.304,0.266,0.778-0.038,1.061c-0.288,0.269-0.734,0.269-1.022,0L1.36,12.805 c-0.292-0.293-0.292-0.767,0-1.06L3.766,9.34c0.303-0.282,0.777-0.266,1.06,0.037c0.268,0.289,0.268,0.734,0,1.023l-1.124,1.123 h9.473V9.3c0-0.414,0.336-0.75,0.75-0.75c0.415,0,0.75,0.336,0.75,0.75v2.976c0,0.414-0.335,0.75-0.75,0.75H3.702z M12.248,3.025 l-1.124-1.124c-0.282-0.303-0.266-0.777,0.038-1.06c0.287-0.268,0.734-0.268,1.021,0l2.405,2.404c0.292,0.293,0.292,0.767,0,1.06 L12.184,6.71c-0.303,0.282-0.777,0.266-1.06-0.038c-0.269-0.288-0.269-0.734,0-1.022l1.124-1.124H2.775V6.75 c0,0.414-0.335,0.75-0.75,0.75c-0.414,0-0.75-0.336-0.75-0.75V3.775c0-0.414,0.336-0.75,0.75-0.75H12.248z"
+    />
+  </svg>
+)

static/i18n/en/exchange.yml

@@ -0,0 +1,2 @@
+title: Exchange
+visitWebsite: Visit website

static/i18n/en/sidebar.yml

@@ -1,3 +1,4 @@
 menu: Menu
 accounts: Accounts
-manager: Manage apps
+manager: Manager
+exchange: Exchange