Update Exchange page

src/components/ExchangePage/ExchangeCard.js

@@ -20,7 +20,8 @@ export default function ExchangeCard({ t, card }: { t: T, card: CardType }) {
   return (
     <Card
       horizontal
-      p={5}
+      py={5}
+      px={6}
       style={{ cursor: 'pointer' }}
       onClick={() => shell.openExternal(card.url)}
     >

src/components/ExchangePage/index.js

@@ -5,12 +5,12 @@ 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'
+import ChangellyLogo from './logos/changelly'
+import CoinmamaLogo from './logos/bigmama'
 
 type Props = {
   t: T,
@@ -22,21 +22,27 @@ class ExchangePage extends PureComponent<Props> {
     const cards = [
       {
         key: 'coinhouse',
-        url: 'https://www.coinhouse.com/',
+        url: 'https://www.coinhouse.com/r/157530',
         logo: <CoinhouseLogo width={150} />,
         desc: t('app:exchange.coinhouse'),
       },
       {
-        key: 'shapeshift',
-        url: 'https://shapeshift.io',
-        logo: <img alt="shapeshift logo" src={i('logos/shapeshift.png')} style={{ width: 150 }} />,
-        desc: t('app:exchange.shapeshift'),
+        key: 'changelly',
+        url: 'https://changelly.com/?ref_id=aac789605a01',
+        logo: <ChangellyLogo width={150} />,
+        desc: t('app:exchange.changelly'),
+      },
+      {
+        key: 'coinmama',
+        url: 'http://go.coinmama.com/visit/?bta=51801&nci=5343',
+        logo: <CoinmamaLogo width={150} />,
+        desc: t('app:exchange.coinmama'),
       },
     ]
 
     return (
       <Box>
-        <Box ff="Museo Sans|Regular" color="dark" fontSize={7} mb={4}>
+        <Box ff="Museo Sans|Regular" color="dark" fontSize={7} mb={5}>
           {t('app:exchange.title')}
         </Box>
         <Box flow={5}>{cards.map(card => <ExchangeCard key={card.key} t={t} card={card} />)}</Box>

src/components/ExchangePage/logos/changelly.js

@@ -0,0 +1,26 @@
+// @flow
+
+import React from 'react'
+
+const inner = (
+  <g fill="none" fillRule="evenodd">
+    <path
+      fill="#2D2E2C"
+      d="M42.48 17.066c0-3.537 2.813-6.542 6.538-6.542 2.417 0 3.922.994 5.106 2.23l-1.208 1.26c-1.012-1.043-2.196-1.842-3.923-1.842-2.59 0-4.564 2.156-4.564 4.894 0 2.714 2.023 4.87 4.687 4.87 1.629 0 2.838-.823 3.849-1.89l1.258 1.14c-1.283 1.405-2.812 2.422-5.205 2.422-3.725 0-6.537-2.98-6.537-6.542M56.355 6.549l1.9-.92v7.342c.838-1.356 2.17-2.447 4.366-2.447 3.083 0 4.884 2.036 4.884 5.016v7.778h-1.9V16c0-2.326-1.282-3.78-3.527-3.78-2.195 0-3.824 1.575-3.824 3.926v7.172h-1.899V6.548M79.105 18.714v-1.163a13.322 13.322 0 0 0-3.725-.533c-2.368 0-3.725 1.018-3.725 2.568 0 1.575 1.48 2.496 3.207 2.496 2.343 0 4.243-1.381 4.243-3.368zm-9.374.92c0-2.689 2.22-4.094 5.452-4.094 1.628 0 2.762.218 3.897.533v-.388c0-2.23-1.381-3.392-3.774-3.392-1.505 0-2.689.363-3.873.896l-.567-1.526c1.406-.63 2.763-1.066 4.637-1.066 1.801 0 3.207.484 4.12 1.38.888.873 1.332 2.085 1.332 3.684v7.657H79.08v-1.866c-.888 1.114-2.343 2.132-4.588 2.132-2.393 0-4.761-1.332-4.761-3.95zM84.165 10.79h1.9v2.181c.839-1.356 2.17-2.447 4.366-2.447 3.084 0 4.885 2.036 4.885 5.016v7.778h-1.9V16c0-2.326-1.283-3.78-3.527-3.78-2.196 0-3.824 1.575-3.824 3.926v7.172h-1.9V10.79M108.748 16.412c0-2.568-2.27-4.24-4.687-4.24-2.417 0-4.416 1.648-4.416 4.264 0 2.52 2.048 4.265 4.416 4.265 2.418 0 4.687-1.72 4.687-4.29zm-10.46 9.086l.864-1.453c1.455 1.042 3.084 1.599 4.909 1.599 2.812 0 4.638-1.527 4.638-4.459v-1.478c-1.11 1.454-2.665 2.642-5.008 2.642-3.059 0-5.994-2.254-5.994-5.913 0-3.658 2.96-5.912 5.994-5.912 2.393 0 3.947 1.163 4.983 2.52v-2.253h1.9v10.346c0 1.939-.593 3.416-1.629 4.434-1.134 1.115-2.836 1.672-4.86 1.672-2.121 0-4.095-.582-5.796-1.745zM123.323 16.315c-.222-2.278-1.554-4.216-4.07-4.216-2.196 0-3.873 1.793-4.145 4.216h8.215zm-3.725 5.67c1.751 0 2.985-.703 4.02-1.769l1.185 1.042c-1.283 1.405-2.837 2.35-5.254 2.35-3.504 0-6.365-2.64-6.365-6.542 0-3.634 2.59-6.542 6.118-6.542 3.774 0 5.945 2.956 5.945 6.64 0 .169 0 .362-.025.653h-10.114c.272 2.641 2.245 4.168 4.49 4.168zM127.897 7.356l1.9-.919v16.88h-1.9V7.358M133.27 6.549l1.9-.92v17.689h-1.9V6.548M137.688 26.637l.642-1.478c.616.315 1.184.46 1.997.46 1.135 0 1.85-.58 2.616-2.35l-5.798-12.478h2.097l4.638 10.443 4.095-10.443h2.023l-5.353 12.938c-1.086 2.593-2.319 3.538-4.243 3.538-1.061 0-1.85-.218-2.714-.63"
+    />
+    <path
+      fill="#46B06E"
+      d="M29.688 18.399c-5.523 4.77-7.827 5.228-10.113 4.182l2.495-3.095c.368-.453.636-.991.773-1.555l1.007-4.128-4.204.988a4.103 4.103 0 0 0-1.58.758L14.912 18c-1.064-2.245-.599-4.508 4.259-9.933 4.589-5.125 14.3-6.302 17.178-6.543-.245 2.827-1.443 12.366-6.661 16.874zm-3.677 7.394a.893.893 0 0 1-.38.563c-.581.393-1.478.938-2.273 1.41l.04-.146c.386-1.491.382-2.64-.01-3.424 1.046-.312 2.177-.886 3.458-1.745-.31 1.155-.669 2.533-.835 3.342zm-8.736-2.676c-.329.408-.841.636-1.37.61l-.02-.002-1.256.002 4.354-5.144-5.238 4.276.003-1.213-.002-.04a1.603 1.603 0 0 1 .62-1.346l4.612-3.585a2.619 2.619 0 0 1 1.01-.484l1.88-.443-.45 1.848a2.54 2.54 0 0 1-.495.994l-3.648 4.527zm-7.493-8.87l-.15.038a52.609 52.609 0 0 1 1.437-2.233.912.912 0 0 1 .573-.372c.823-.163 2.226-.515 3.402-.82-.875 1.258-1.458 2.369-1.776 3.397-.797-.386-1.967-.39-3.486-.01zM37.11.03C36.57.053 23.883.627 18.07 7.118a53.482 53.482 0 0 0-1.609 1.876c-.842.227-3.8 1.016-5.109 1.275a2.37 2.37 0 0 0-1.49.968c-.89 1.273-2.445 3.888-2.51 3.999l-1.127 1.898 2.052-.876c1.344-.574 3.6-1.164 4.405-.678.132.08.27.211.293.583h.003c.016.935.277 1.832.758 2.752l-.279.216a3.035 3.035 0 0 0-1.175 2.53l-.007 3.51 3.574-.007a3.124 3.124 0 0 0 2.575-1.154l.22-.274c.937.473 1.85.727 2.803.742v.007c.378.022.512.157.593.287.495.79-.106 3.006-.69 4.327l-.896 2.018 1.936-1.11c.113-.064 2.776-1.59 4.071-2.465.513-.346.863-.866.986-1.464.264-1.285 1.067-4.19 1.298-5.018.603-.475 1.238-1 1.91-1.58 6.608-5.71 7.193-18.173 7.215-18.7l.032-.78-.793.031z"
+    />
+    <path
+      fill="#46B06E"
+      d="M26.865 7.512a2.412 2.412 0 0 1 1.695-.688c.613 0 1.227.23 1.694.688a2.327 2.327 0 0 1 0 3.329 2.43 2.43 0 0 1-3.389 0 2.318 2.318 0 0 1-.702-1.665c0-.628.25-1.22.702-1.664zm1.695 5.455c.988 0 1.977-.37 2.73-1.109a3.75 3.75 0 0 0 0-5.364 3.915 3.915 0 0 0-5.46 0 3.735 3.735 0 0 0-1.132 2.682c0 1.014.402 1.966 1.131 2.682a3.885 3.885 0 0 0 2.73 1.11zM17.91 28.672a9.974 9.974 0 0 1-.899.742 13.68 13.68 0 0 1-1.966 1.216c-.685.35-1.395.645-2.12.891a17.22 17.22 0 0 1-2.22.598c-.373.084-.754.138-1.13.205l-.572.073-.285.037-.287.026-.574.054-.576.03c-.384.03-.77.028-1.155.038a32.09 32.09 0 0 1-3.384-.152c.132-.181.261-.365.386-.553.361-.55.685-1.126.97-1.715.562-1.184.97-2.402 1.318-3.618A36.241 36.241 0 0 1 6.6 23.02a32.838 32.838 0 0 1 1.574-3.41c-.422.476-.8.99-1.158 1.514-.361.525-.695 1.067-1.01 1.622a25.011 25.011 0 0 0-1.609 3.466c-.449 1.162-.913 2.305-1.488 3.365-.567 1.064-1.27 2.032-2.071 2.966l-.836.975 1.297.182c1.602.224 3.228.342 4.858.284.407-.02.814-.027 1.221-.07l.61-.057.608-.081c.405-.045.806-.135 1.208-.205.4-.095.801-.17 1.194-.29.395-.103.783-.235 1.171-.363.384-.144.766-.289 1.139-.458a14.047 14.047 0 0 0 2.138-1.177 11.66 11.66 0 0 0 1.863-1.544c.553-.58 1.063-1.208 1.412-1.916a7.616 7.616 0 0 1-.811.848"
+    />
+  </g>
+)
+
+export default ({ width }: { width: number }) => (
+  <svg width={width} viewBox="0 0 150 34">
+    {inner}
+  </svg>
+)

src/components/ExchangePage/logos/coinhouse.js

@@ -1,9 +1,9 @@
 // @flow
 
-import React from 'react'
+import React, { Fragment } from 'react'
 
-export default ({ width }: { width: number }) => (
-  <svg width={width} version="1.1" viewBox="0 0 149.25 25.901">
+const inner = (
+  <Fragment>
     <path
       d="m0 6.498c1.691-0.99 3.379-1.987 5.074-2.97 1.916-1.11 3.841-2.205 5.76-3.31 1.051-0.604 2.388 0.116 2.396 1.315 0.013 2.517 0 5.033 7e-3 7.55 2e-3 0.585-0.21 1-0.768 1.24-0.648 0.278-1.27 0.619-1.923 0.88-0.74 0.297-1.369-0.115-1.405-0.912-0.031-0.682-8e-3 -1.366-8e-3 -2.05 0-0.186 0.01-0.373 0-0.559-0.048-0.883-0.66-1.287-1.466-0.944-0.365 0.156-0.708 0.367-1.056 0.562-0.51 0.285-1.006 0.598-1.527 0.862-0.436 0.22-0.638 0.528-0.636 1.026 0.013 2.516 0.012 5.033 0 7.55-1e-3 0.46 0.193 0.75 0.584 0.966 1.852 1.018 1.45 0.786 1.494 2.663 0.012 0.497 0.02 0.995-3e-3 1.491-0.041 0.879-0.785 1.317-1.564 0.882-1.477-0.824-2.932-1.689-4.39-2.546-0.206-0.122-0.38-0.298-0.568-0.449v-13.247z"
       fill="#222246"
@@ -48,5 +48,11 @@ export default ({ width }: { width: number }) => (
       d="m61.74 19.887h-1.658v-14.089h1.587c0.154 0.726 0.214 11.88 0.071 14.089"
       fill="#202045"
     />
+  </Fragment>
+)
+
+export default ({ width }: { width: number }) => (
+  <svg width={width} viewBox="0 0 149.25 25.901">
+    {inner}
   </svg>
 )

static/i18n/en/app.yml

@@ -113,8 +113,9 @@ emptyState:
 exchange:
   title: Exchange
   visitWebsite: Visit website
-  coinhouse: Lorem ipsum
-  shapeshift: Ipsum lorem
+  coinhouse: 'Coinhouse is the trusted platform for individuals and institutional investors looking to analyze, acquire, sell and securely store cryptoassets.'
+  changelly: 'Changelly is a popular instant cryptocurrency exchange with 100+ coins and tokens listed.'
+  coinmama: 'Coinmama is a financial service that makes it fast, safe and fun to buy digital currency, anywhere in the world.'
 genuinecheck:
   modal:
     title: Genuine check, bro