m/blowfish
1
0
Fork 0
mirror of https://github.com/kremalicious/blowfish.git synced 2024-12-28 07:37:51 +01:00
Code Releases Activity

welcome screen

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-05-10 00:37:59 +02:00
parent 45bf2ef155
commit b0188ab965
Signed by: m
GPG Key ID: 606EEEF3C479A91F
12 changed files with 116 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/App.css
View File

@ -58,6 +58,15 @@ h5 {
font-weight: 700;
}
a {
color: #f6388a;
text-decoration: none;
}
a h1 {
color: unset;
}
.app {
margin-top: 35px;
padding: 5% 7%;
@ -79,3 +88,17 @@ h5 {
.fullscreen .app {
transform: translate3d(0, -36px, 0);
}
.box {
width: 100%;
padding: 5%;
background: #fff;
border-radius: 5px;
border: .1rem solid #e2e2e2;
animation: fadein .5s .5s ease-out;
}
.dark .box {
background: #222;
border-color: #303030;
}

20
src/components/Account.jsx
View File

@ -16,16 +16,18 @@ export default class Account extends PureComponent {
const { balance, address } = account
return (
<a
onClick={() =>
openUrl(`https://etherscan.io/address/${address}#tokentxns`)
}
title="Click to view on Etherscan"
className="number-unit"
>
<div className="number-unit">
<Balance balance={balance} />
<span className="label">{address.substring(0, 12)}...</span>
</a>
<a
className="label"
onClick={() =>
openUrl(`https://etherscan.io/address/${address}#tokentxns`)
}
title="Click to view on Etherscan"
>
{address.substring(0, 12)}&hellip;
</a>
</div>
)
}
}

7
src/components/Ticker.css
View File

@ -21,13 +21,18 @@
padding: .2rem .4rem;
display: block;
transition: border .2s ease-out;
color: #8b98a9;
}
.ticker button:disabled {
pointer-events: none;
}
.dark .ticker button {
border-color: #303030;
}
.ticker button:hover {
.ticker button:not(:disabled):hover {
border-color: #f6388a;
color: #f6388a;
}

40
src/components/Ticker.jsx
View File

@ -5,29 +5,29 @@ import { formatCurrency } from '@coingecko/cryptoformat'
import './Ticker.css'
export default class Ticker extends PureComponent {
static contextType = AppContext
render() {
const { toggleCurrencies, needsConfig, currency, prices } = this.context
return (
<footer className="number-unit-wrap ticker" {...this.props}>
<AppContext.Consumer>
{({ toggleCurrencies, currency, prices }) => (
<>
{Object.keys(prices).map((key, i) => (
<div key={i} className="number-unit">
<button
className={`label label--price ${key === currency &&
'active'}`}
onClick={() => toggleCurrencies(key)}
>
{formatCurrency(prices[key], key.toUpperCase(), locale)
.replace(/BTC/, 'Ƀ')
.replace(/ETH/, 'Ξ')
.replace(/OCEAN/, 'Ọ')}
</button>
</div>
))}
</>
)}
</AppContext.Consumer>
{Object.keys(prices).map((key, i) => (
<div key={i} className="number-unit">
<button
className={`label label--price ${key === currency &&
!needsConfig &&
'active'}`}
onClick={() => toggleCurrencies(key)}
disabled={needsConfig}
>
{formatCurrency(prices[key], key.toUpperCase(), locale)
.replace(/BTC/, 'Ƀ')
.replace(/ETH/, 'Ξ')
.replace(/OCEAN/, 'Ọ')}
</button>
</div>
))}
</footer>
)
}

17
src/components/Welcome.css Normal file
View File

@ -0,0 +1,17 @@
.welcome {
width: 100%;
height: 100%;
text-align: center;
}
.welcome svg {
display: block;
width: 5rem;
height: 5rem;
margin: 0 auto 2rem auto;
fill: #e2e2e2;
}
.dark .welcome svg {
fill: #41474e;
}

13
src/components/Welcome.jsx Normal file
View File

@ -0,0 +1,13 @@
import React from 'react'
import { Link } from '@reach/router'
import IconRocket from '../images/rocket.svg'
import './Welcome.css'
const Welcome = () => (
<div className="welcome">
<IconRocket />
<Link to="preferences">Add your first address to get started.</Link>
</div>
)
export default Welcome

7
src/images/rocket.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21">
<g transform="translate(0 1)">
<path d="M22.3985533 2.67200447L23.4595533.197004467C23.637396-.217850076 23.2179433-.637364129 22.8030628-.459582115L20.3270628.601417885 20.1704466.707446609 15.9284466 4.94944661C15.7331845 5.14470876 15.7331845 5.46129124 15.9284466 5.65655339L17.3424466 7.07055339C17.5376925 7.26579926 17.8542428 7.26581792 18.0495117 7.07059506L22.2925117 2.82859506 22.3985533 2.67200447zM17.6960417 6.00993488L16.9891068 5.303 20.8094563 1.48265049 22.0479007.951960058 21.5173884 2.18948881 17.6960417 6.00993488zM15.4443404 9.33367781C15.2819271 9.40615975 15.100829 9.48122614 14.9040467 9.55829154 14.6193949 9.66976906 14.315825 9.78012088 14.0124454 9.88471742 13.8304493 9.94746441 13.6884132 9.99453287 13.6059676 10.0210262 13.2184039 10.145567 12.8524002 9.77951214 12.9769952 9.39196584 13.0035042 9.30951096 13.0505997 9.16745668 13.1133802 8.98543685 13.2180326 8.68201764 13.3284373 8.37840831 13.4399599 8.09372063 13.516937 7.89721858 13.5919172 7.71635286 13.6643162 7.55411262 13.8426559 7.15446822 13.9960873 6.8808059 14.1604466 6.71644661 14.7467843 6.13010897 15.6967159 6.13010897 16.2815534 6.71644661 16.86774 7.30263326 16.867891 8.2522267 16.2815536 8.83755356 16.1172741 9.00203281 15.8438064 9.15540368 15.4443404 9.33367781zM14.5393863 8.62715095C14.7226447 8.55538187 14.8897694 8.48610757 15.0368018 8.42048979 15.3250716 8.29184048 15.5257632 8.1792543 15.5739942 8.13089959 15.770109 7.93528409 15.770109 7.61921575 15.5739942 7.42310041 15.3792841 7.22789103 15.0632157 7.22789103 14.8675534 7.42355339 14.8189071 7.47219965 14.7062636 7.67311227 14.5775162 7.96162442 14.5119616 8.1085268 14.4427592 8.2754554 14.3710661 8.45846901 14.3362131 8.54743928 14.3013667 8.63865304 14.2667165 8.73137903 14.3593601 8.69676966 14.4504932 8.66196393 14.5393863 8.62715095z"/>
<path d="M19.11 7.42389322L18.0495534 6.36344661C17.8542912 6.16818446 17.5377088 6.16818446 17.3424466 6.36344661 17.1471845 6.55870876 17.1471845 6.87529124 17.3424466 7.07055339L18.7564466 8.48455339C18.9517088 8.67981554 19.2682912 8.67981554 19.4635534 8.48455339L21.2315534 6.71655339C21.3654695 6.58263725 21.4122308 6.38455348 21.3523416 6.20488612L20.6453416 4.08388612C20.5580178 3.82191446 20.2748578 3.68033446 20.0128861 3.76765835 19.7509145 3.85498224 19.6093345 4.13814222 19.6966584 4.40011388L20.3059386 6.22795462 19.11 7.42389322zM16.7710454 2.6930614L18.5988861 3.30234165C18.8608578 3.38966554 19.1440178 3.24808554 19.2313416 2.98611388 19.3186655 2.72414222 19.1770855 2.44098224 18.9151139 2.35365835L16.7941139 1.64665835C16.6144465 1.58676923 16.4163628 1.63353046 16.2824466 1.76744661L14.5144466 3.53544661C14.3191845 3.73070876 14.3191845 4.04729124 14.5144466 4.24255339L15.9284466 5.65655339C16.1237088 5.85181554 16.4402912 5.85181554 16.6355534 5.65655339 16.8308155 5.46129124 16.8308155 5.14470876 16.6355534 4.94944661L15.5751068 3.889 16.7710454 2.6930614zM11.6472582 11.6556369C6.86599354 16.4150258 2.00180482 19.435981 1.16640155 18.6012948.766043703 18.2009369 1.42999395 16.4046857 3.11622411 13.9848604 3.27410046 13.7582999 3.21842094 13.4466522 2.99186042 13.2887759 2.7652999 13.1308995 2.45365224 13.1865791 2.29577589 13.4131396.303990304 16.2714523-.473697538 18.3754092.459446609 19.3085534 1.95246508 20.8002904 7.07251879 17.6204276 12.3527418 12.3643631 12.5484512 12.1695492 12.549177 11.8529675 12.3543631 11.6572582 12.1595492 11.4615488 11.8429675 11.460823 11.6472582 11.6556369z"/>
<path d="M16.8524442,10.5666618 C16.9501907,11.0373632 17,11.5162811 17,12 C17,15.8658576 13.8658576,19 10,19 C6.13414237,19 3,15.8658576 3,12 C3,8.13349805 6.13378667,5 10,5 C10.9588934,5 11.8892463,5.19192512 12.7482245,5.55965138 C13.0020829,5.6683275 13.2959753,5.55063398 13.4046514,5.29677553 C13.5133275,5.04291709 13.395634,4.74902475 13.1417755,4.64034862 C12.1587942,4.21953694 11.0945936,4 10,4 C5.58152253,4 2,7.58119268 2,12 C2,16.4181424 5.58185763,20 10,20 C14.4181424,20 18,16.4181424 18,12 C18,11.4475452 17.9431068,10.900516 17.8315558,10.3633382 C17.7754095,10.092964 17.5107124,9.91929794 17.2403382,9.9754442 C16.969964,10.0315905 16.7962979,10.2962876 16.8524442,10.5666618 Z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

29
src/screens/Home.css
View File

@ -1,10 +1,5 @@
.main {
width: 100%;
margin-top: 7vh;
padding: 5%;
background: #fff;
border-radius: 5px;
border: .1rem solid #e2e2e2;
min-height: 222px;
display: flex;
align-items: center;
@ -13,11 +8,6 @@
animation: fadein .5s .5s ease-out;
}
.dark .main {
background: #222;
border-color: #303030;
}
.preferences-link {
position: absolute;
right: 5%;
@ -26,13 +16,22 @@
.preferences-link svg {
fill: #8b98a9;
transition: fill .2s ease-out;
transition: .2s ease-out;
width: 1.25rem;
height: 1.25rem;
}
.preferences-link:hover svg {
fill: #f6388a;
fill: #41474e;
}
.dark .preferences-link svg {
fill: #8b98a9;
opacity: .5;
}
.dark .preferences-link:hover svg {
opacity: 1;
}
.number-unit-wrap {
@ -60,7 +59,7 @@
transition: color .2s ease-out;
}
.number-unit:hover .label {
.number-unit:not(.number-unit--main) .label:not(:disabled):hover {
color: #f6388a;
}
@ -73,10 +72,6 @@
border-bottom: 1px solid #e2e2e2;
}
.number-unit--main:hover .label {
color: #8b98a9;
}
.dark .number-unit--main {
border-bottom-color: #303030;
}

5
src/screens/Home.jsx
View File

@ -1,6 +1,7 @@
import React, { PureComponent } from 'react'
import { Link } from '@reach/router'
import { AppContext } from '../store/createContext'
import Welcome from '../components/Welcome'
import Total from '../components/Total'
import Account from '../components/Account'
import Ticker from '../components/Ticker'
@ -16,13 +17,13 @@ export default class Home extends PureComponent {
return (
<>
<main className="main">
<main className="main box">
<Link className="preferences-link" to="preferences">
<IconCog />
</Link>
{needsConfig ? (
'Needs config'
<Welcome />
) : isLoading ? (
<Spinner />
) : (

5
src/screens/Preferences.css
View File

@ -1,15 +1,14 @@
.preferences {
text-align: left;
width: 100%;
margin: 5%;
margin-top: calc(7vh + 5%);
margin-top: 7vh;
position: relative;
}
.preferences__title {
font-size: 2.2rem;
margin-top: -1rem;
margin-bottom: 3rem;
margin-bottom: 2rem;
}
.preferences__close {

2
src/screens/Preferences.jsx
View File

@ -75,7 +75,7 @@ export default class Preferences extends PureComponent {
<Link className="preferences__close" title="Close Preferences" to="/">
&times;
</Link>
<div className="preference">
<div className="preference box">
<h2 className="preference__title">Accounts</h2>
<p className="preference__help">
Add Ethereum account addresses holding Ocean Tokens.

1
src/store/AppProvider.jsx
View File

@ -44,6 +44,7 @@ export default class AppProvider extends PureComponent {
: this.setState({ needsConfig: false })
} else {
accountsPref = []
this.setState({ needsConfig: true })
}
return accountsPref