diff --git a/src/components/ExchangePage/ExchangeCard.js b/src/components/ExchangePage/ExchangeCard.js new file mode 100644 index 00000000..7a6fdeaa --- /dev/null +++ b/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 ( + shell.openExternal(card.url)} + > + + {logo} + + + {desc} + + {t('exchange:visitWebsite')} + + + + + ) +} diff --git a/src/components/ExchangePage/index.js b/src/components/ExchangePage/index.js new file mode 100644 index 00000000..5aeb0afc --- /dev/null +++ b/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: , + desc: LOREM, + }, + { + key: 'shapeshift', + url: 'https://shapeshift.io', + logo: shapeshift logo, + desc: LOREM, + }, +] + +type Props = { + t: T, +} + +class ExchangePage extends PureComponent { + render() { + const { t } = this.props + return ( + + + {t('exchange:title')} + + {cards.map(card => )} + + ) + } +} + +export default translate()(ExchangePage) diff --git a/src/components/ExchangePage/logos/coinhouse.js b/src/components/ExchangePage/logos/coinhouse.js new file mode 100644 index 00000000..806a1311 --- /dev/null +++ b/src/components/ExchangePage/logos/coinhouse.js @@ -0,0 +1,44 @@ +// @flow + +import React from 'react' + +export default ({ width }: { width: number }) => ( + + + + + + + + + + + +) diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js index 2c1acf7a..797a54a0 100644 --- a/src/components/SideBar/index.js +++ b/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 { } linkTo="/manager"> {t('sidebar:manager')} - } linkTo="/settings"> - {t('settings:title')} + } linkTo="/exchange"> + {t('sidebar:exchange')} diff --git a/src/components/base/Link.js b/src/components/base/Link.js index aabb6ae1..85835900 100644 --- a/src/components/base/Link.js +++ b/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; diff --git a/src/components/layout/Default.js b/src/components/layout/Default.js index 454dbbf4..56e8da24 100644 --- a/src/components/layout/Default.js +++ b/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 { + diff --git a/src/helpers/staticPath.js b/src/helpers/staticPath.js index d8e7a3f8..98f9727c 100644 --- a/src/helpers/staticPath.js +++ b/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 tag) + */ +export function i(path: string): string { + return `/images/${path}` +} + +export default staticPath diff --git a/src/icons/Exchange.js b/src/icons/Exchange.js new file mode 100644 index 00000000..6671e980 --- /dev/null +++ b/src/icons/Exchange.js @@ -0,0 +1,12 @@ +// @flow + +import React from 'react' + +export default ({ size, ...p }: { size: number }) => ( + + + +) diff --git a/static/i18n/en/exchange.yml b/static/i18n/en/exchange.yml new file mode 100644 index 00000000..750dcb2c --- /dev/null +++ b/static/i18n/en/exchange.yml @@ -0,0 +1,2 @@ +title: Exchange +visitWebsite: Visit website diff --git a/static/i18n/en/sidebar.yml b/static/i18n/en/sidebar.yml index 61f29185..020f54b4 100644 --- a/static/i18n/en/sidebar.yml +++ b/static/i18n/en/sidebar.yml @@ -1,3 +1,4 @@ menu: Menu accounts: Accounts -manager: Manage apps +manager: Manager +exchange: Exchange diff --git a/static/images/logos/shapeshift.png b/static/images/logos/shapeshift.png new file mode 100644 index 00000000..e56725a0 Binary files /dev/null and b/static/images/logos/shapeshift.png differ