Merge pull request #88 from andytudhope/master

Adds 2 New Categories - DeFi and Crypto Onramps - and Updates Featured DApps
This commit is contained in:
Andy Tudhope 2020-11-11 19:33:32 +02:00 committed by GitHub
commit d88f22b919
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 188 additions and 22 deletions

View File

@ -1,17 +1,21 @@
{
"EXCHANGES": "EXCHANGES",
"DEFI": "DEFI",
"MARKETPLACES": "MARKETPLACES",
"COLLECTIBLES": "COLLECTIBLES",
"GAMES": "GAMES",
"SOCIAL_NETWORKS": "SOCIAL_NETWORKS",
"CRYPTO_ONRAMPS": "CRYPTO_ONRAMPS",
"UTILITIES": "UTILITIES",
"OTHER": "OTHER",
"ALL_CATEGORIES": [
"EXCHANGES",
"DEFI",
"MARKETPLACES",
"COLLECTIBLES",
"GAMES",
"SOCIAL_NETWORKS",
"CRYPTO_ONRAMPS",
"UTILITIES",
"OTHER"
]

View File

@ -11,11 +11,11 @@
},
"0xa4375ab33cee855df7ced45caa843fb9f450adb7944cea8fd46710f06587686c": {
"name": "Discover",
"address": "0x0b4f22f6cF73641905Fba49175E2A4F49F498D38"
"address": "0x9b4707BbAcD138c6cB048D0486D00b883cf0377D"
},
"0x21389315d2b5cfa1d29b352c3c4cc6df2dc1002591c18150de310a8781ce1438": {
"name": "DiscoverKyberSwap",
"address": "0x6748C3D07bB4544f6205eDC35706B77F2807AB26"
"address": "0x7e6d281FEe920Acc28b7166f28c7cE467C2bADa2"
}
}
}

View File

@ -0,0 +1,12 @@
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="26" cy="26" r="26" fill="#26A69A"/>
<path d="M19 38.0742C21.8 38.0742 24 35.8742 24 33.0742C24 30.2742 21.8 28.0742 19 28.0742C16.2 28.0742 14 30.2742 14 33.0742C14 35.8742 16.3 38.0742 19 38.0742Z" fill="white"/>
<path d="M31.1 19.8742C33.5 20.3742 35.6 18.2742 35.2 15.7742C34.9 14.4742 33.8 13.2742 32.5 13.0742C30.1 12.5742 28 14.6742 28.4 17.1742C28.6 18.5742 29.7 19.6742 31.1 19.8742Z" fill="white"/>
<path d="M19.4 19.4742C20.8 19.4742 22 18.2742 22 16.8742C22 15.4742 20.8 14.2742 19.4 14.2742C18 14.2742 16.8 15.4742 16.8 16.8742C16.8 18.2742 18 19.4742 19.4 19.4742Z" fill="white"/>
<path d="M18.4 25.4742C19.3 25.4742 20.1 24.6742 20.1 23.7742C20.1 22.8742 19.3 22.0742 18.4 22.0742C17.5 22.0742 16.7 22.8742 16.7 23.7742C16.7 24.6742 17.4 25.4742 18.4 25.4742Z" fill="white"/>
<path d="M34.7 33.7742C36.8 33.7742 38.4 32.0742 38.4 30.0742C38.4 28.0742 36.7 26.3742 34.7 26.3742C32.6 26.3742 31 28.0742 31 30.0742C31 32.0742 32.6 33.7742 34.7 33.7742Z" fill="white"/>
<path d="M19.5 31.4742L31.1 17.8742" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
<path d="M33.5 28.0742L32.3 18.0742" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
<path d="M28.9 15.6742L21.7 17.1742" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
<path d="M23 33.3742L32.3 29.9742" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" width="52" height="52">
<path fill="#2727f9" d="M26 52C11.62 52 0 40.38 0 26C0 11.62 11.62 0 26 0C40.38 0 52 11.62 52 26C52 40.38 40.38 52 26 52Z" />
<path fill="#ffffff" d="M28.1 37.5C27.6 37.5 27.1 37.2 26.8 36.8C26.5 36.2 26.6 35.4 27.1 34.9L27.1 34.9C28.2 33.8 28.2 32.1 27.1 31C26.6 30.5 25.8 30.2 25.1 30.2L16.1 30.2C15.3 30.2 14.6 29.5 14.6 28.7C14.6 27.9 15.3 27.2 16.1 27.2L16.1 27.2L35.5 27.2C36.3 27.2 37 27.9 37 28.7C37 29.1 36.8 29.5 36.6 29.8L29.2 37.2C28.9 37.4 28.5 37.5 28.1 37.5Z" />
<path fill="#ffffff" d="M35.5 24.8L16.1 24.8C15.3 24.8 14.6 24.1 14.6 23.3C14.6 22.9 14.8 22.5 15 22.2L22.4 14.8C23 14.2 23.9 14.2 24.5 14.8C25.1 15.4 25.1 16.3 24.5 16.9L24.5 16.9L24.5 16.9C23.4 18 23.4 19.8 24.5 20.9C25 21.4 25.7 21.7 26.5 21.7L35.5 21.7C36.3 21.7 37 22.4 37 23.2C37 24 36.3 24.8 35.5 24.8L35.5 24.8Z" />
</svg>

After

Width:  |  Height:  |  Size: 895 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 294 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -1,21 +1,25 @@
import React from 'react'
import PropTypes from 'prop-types'
import ExchangesIcon from './ExhangesIcon'
import DeFiIcon from './DeFiIcon'
import MarketplacesIcon from './MarketplacesIcon'
import GamesIcon from './GamesIcon'
import UtilitiesIcon from './UtilitiesIcon'
import OtherIcon from './OtherIcon'
import CollectiblesIcon from './CollectiblesIcon'
import SocialNetworksIcon from './SocialNetworksIcon'
import OnrampIcon from './OnrampIcon'
const icons = {
EXCHANGES: ExchangesIcon,
DEFI: DeFiIcon,
MARKETPLACES: MarketplacesIcon,
GAMES: GamesIcon,
UTILITIES: UtilitiesIcon,
OTHER: OtherIcon,
COLLECTIBLES: CollectiblesIcon,
SOCIAL_NETWORKS: SocialNetworksIcon,
CRYPTO_ONRAMPS: OnrampIcon,
MEDIA: GamesIcon, // TODO: Need to get this asset from design
}

View File

@ -0,0 +1,58 @@
import React from 'react'
const icon = () => (
<svg
width="25"
height="26"
viewBox="0 0 25 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 25.0742C7.8 25.0742 10 22.8742 10 20.0742C10 17.2742 7.8 15.0742 5 15.0742C2.2 15.0742 0 17.2742 0 20.0742C0 22.8742 2.3 25.0742 5 25.0742Z"
fill="white"
/>
<path
d="M17.1 6.8742C19.5 7.3742 21.6 5.2742 21.2 2.7742C20.9 1.4742 19.8 0.274201 18.5 0.0742013C16.1 -0.425799 14 1.6742 14.4 4.1742C14.6 5.5742 15.7 6.6742 17.1 6.8742Z"
fill="white"
/>
<path
d="M5.39999 6.4742C6.79999 6.4742 7.99999 5.2742 7.99999 3.8742C7.99999 2.4742 6.79999 1.2742 5.39999 1.2742C3.99999 1.2742 2.79999 2.4742 2.79999 3.8742C2.79999 5.2742 3.99999 6.4742 5.39999 6.4742Z"
fill="white"
/>
<path
d="M4.40001 12.4742C5.30001 12.4742 6.10001 11.6742 6.10001 10.7742C6.10001 9.87422 5.30001 9.07422 4.40001 9.07422C3.50001 9.07422 2.70001 9.87422 2.70001 10.7742C2.70001 11.6742 3.40001 12.4742 4.40001 12.4742Z"
fill="white"
/>
<path
d="M20.7 20.7742C22.8 20.7742 24.4 19.0742 24.4 17.0742C24.4 15.0742 22.7 13.3742 20.7 13.3742C18.6 13.3742 17 15.0742 17 17.0742C17 19.0742 18.6 20.7742 20.7 20.7742Z"
fill="white"
/>
<path
d="M5.5 18.4742L17.1 4.87421"
stroke="white"
stroke-width="1.5"
stroke-miterlimit="10"
/>
<path
d="M19.5 15.0742L18.3 5.07422"
stroke="white"
stroke-width="1.5"
stroke-miterlimit="10"
/>
<path
d="M14.9 2.67419L7.70001 4.17419"
stroke="white"
stroke-width="1.5"
stroke-miterlimit="10"
/>
<path
d="M9 20.3742L18.3 16.9742"
stroke="white"
stroke-width="1.5"
stroke-miterlimit="10"
/>
</svg>
)
export default icon

View File

@ -0,0 +1,3 @@
import DeFiIcon from './DeFiIcon'
export default DeFiIcon

View File

@ -0,0 +1,25 @@
import React from 'react'
const icon = () => (
<svg
width="30"
height="30"
viewBox="0 0 30 30"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="white"
d="M19.1,27.5c-0.5,0-1-0.3-1.3-0.7c-0.3-0.6-0.2-1.4,0.3-1.9l0,0c1.1-1.1,1.1-2.8,0-3.9c-0.5-0.5-1.3-0.8-2-0.8
H7.1c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5l0,0h19.4c0.8,0,1.5,0.7,1.5,1.5c0,0.4-0.2,0.8-0.4,1.1l-7.4,7.4
C19.9,27.4,19.5,27.5,19.1,27.5z"
/>
<path
fill="white"
d="M26.5,14.8H7.1c-0.8,0-1.5-0.7-1.5-1.5c0-0.4,0.2-0.8,0.4-1.1l7.4-7.4c0.6-0.6,1.5-0.6,2.1,0
c0.6,0.6,0.6,1.5,0,2.1c0,0,0,0,0,0l0,0c-1.1,1.1-1.1,2.9,0,4c0.5,0.5,1.2,0.8,2,0.8h9c0.8,0,1.5,0.7,1.5,1.5S27.3,14.8,26.5,14.8
L26.5,14.8z"
/>
</svg>
)
export default icon

View File

@ -0,0 +1,3 @@
import OnrampIcon from './OnrampIcon'
export default OnrampIcon

View File

@ -1,7 +1,9 @@
export const EXCHANGES = 'EXCHANGES'
export const DEFI = 'DEFI'
export const MARKETPLACES = 'MARKETPLACES'
export const COLLECTIBLES = 'COLLECTIBLES'
export const GAMES = 'GAMES'
export const SOCIAL_NETWORKS = 'SOCIAL_NETWORKS'
export const UTILITIES = 'UTILITIES'
export const CRYPTO_ONRAMPS = 'CRYPTO_ONRAMPS'
export const OTHER = 'OTHER'

View File

@ -43,11 +43,13 @@ export class DappState {
this.dappsRecentlyAdded = null
this.categoryMap = new Map()
this.categoryMap.set(Categories.EXCHANGES, null)
this.categoryMap.set(Categories.DEFI, null)
this.categoryMap.set(Categories.MARKETPLACES, null)
this.categoryMap.set(Categories.COLLECTIBLES, null)
this.categoryMap.set(Categories.GAMES, null)
this.categoryMap.set(Categories.SOCIAL_NETWORKS, null)
this.categoryMap.set(Categories.UTILITIES, null)
this.categoryMap.set(Categories.CRYPTO_ONRAMPS, null)
this.categoryMap.set(Categories.OTHER, null)
}

View File

@ -1,11 +1,27 @@
import inchBanner from '../assets/images/featured/inch_banner.jpg'
import inchLogo from '../assets/images/featured/inch_logo.png'
import OasisBanner from '../assets/images/featured/oasis_banner.png'
import OasisLogo from '../assets/images/featured/oasis_logo.png'
import ZerionBanner from '../assets/images/featured/zerion_banner.png'
import ZerionLogo from '../assets/images/featured/zerion_logo.png'
import GitcoinBanner from '../assets/images/featured/gitcoin_banner.png'
import GitcoinLogo from '../assets/images/featured/gitcoin_logo.png'
import MatchaBanner from '../assets/images/featured/matcha_banner.png'
import MatchaLogo from '../assets/images/featured/matcha_logo.png'
const featuredDapps = [
{
name: 'Matcha',
description:
'Your new favorite DEX aggregator. Find the best prices across exchange networks. Powered by 0x Labs.',
url: 'https://matcha.xyz/?utm_source=statusnetwork&utm_medium=dappportal',
banner: MatchaBanner,
icon: MatchaLogo,
},
{
name: 'Gitcoin Grants',
description:
'Gitcoin Grants helps creators grow and sustain their open source projects.',
url: 'https://gitcoin.co/grants',
banner: GitcoinBanner,
icon: GitcoinLogo,
},
{
name: '1inch.exchange',
description:
@ -14,22 +30,6 @@ const featuredDapps = [
banner: inchBanner,
icon: inchLogo,
},
{
name: 'Zerion',
description:
'Zerion is the simplest way to invest in DeFi from anywhere in the world',
url: 'https://app.zerion.io',
banner: ZerionBanner,
icon: ZerionLogo,
},
{
name: 'Oasis',
description:
'Trade tokens, borrow Dai, and earn savings — all in one place',
url: 'https://oasis.app',
banner: OasisBanner,
icon: OasisLogo,
},
]
export default featuredDapps

View File

@ -1,6 +1,8 @@
$purple: #887af9;
$orange: #fe8f59;
$blue: #51d0f0;
$dark-blue: #26a69a;
$navy: #2727f9;
$pink: #d37ef4;
$green: #7cda00;
$red: #fa6565;
@ -31,6 +33,16 @@ $blue-bg: rgba(
$alpha: 0.15,
);
$dark-blue-bg: rgba(
$color: $dark-blue,
$alpha: 0.15,
);
$navy-bg: rgba(
$color: $navy,
$alpha: 0.15,
);
$green-bg: rgba(
$color: $green,
$alpha: 0.15,

View File

@ -7,6 +7,10 @@ describe('categories', () => {
key: 'EXCHANGES',
value: 'Exchanges',
},
{
key: 'DEFI',
value: 'DeFi',
},
{
key: 'MARKETPLACES',
value: 'Marketplaces',
@ -27,6 +31,10 @@ describe('categories', () => {
key: 'UTILITIES',
value: 'Utilities',
},
{
key: 'CRYPTO_ONRAMPS',
value: 'Crypto Onramps',
},
{
key: 'OTHER',
value: 'Other',

View File

@ -51,6 +51,10 @@
background: $purple-bg;
}
.DEFI {
background: $dark-blue-bg;
}
.MARKETPLACES {
background: $orange-bg;
}
@ -63,6 +67,10 @@
background: $yellow-bg;
}
.CRYPTO_ONRAMPS {
background: $navy-bg;
}
.GAMES {
background: $pink-bg;
}

View File

@ -1,13 +1,16 @@
import exchanges from '../../common/assets/images/categories/exchanges.svg'
import defi from '../../common/assets/images/categories/defi.svg'
import marketplaces from '../../common/assets/images/categories/marketplaces.svg'
import other from '../../common/assets/images/categories/other.svg'
import games from '../../common/assets/images/categories/games.svg'
import collectibles from '../../common/assets/images/categories/collectibles.svg'
import socialNetworks from '../../common/assets/images/categories/social-networks.svg'
import utilities from '../../common/assets/images/categories/utilities.svg'
import onramps from '../../common/assets/images/categories/onramp.svg'
const imageMap = {
EXCHANGES: exchanges,
DEFI: defi,
MARKETPLACES: marketplaces,
OTHER: other,
MEDIA: other, // TODO: fix with icon from design
@ -15,6 +18,7 @@ const imageMap = {
COLLECTIBLES: collectibles,
SOCIAL_NETWORKS: socialNetworks,
UTILITIES: utilities,
CRYPTO_ONRAMPS: onramps,
}
export default category => imageMap[category]

View File

@ -106,6 +106,10 @@
background: $purple;
}
.DEFI {
background: $dark-blue;
}
.MARKETPLACES {
background: $orange;
}
@ -126,6 +130,10 @@
background: $red;
}
.CRYPTO_ONRAMPS {
background: $navy;
}
.OTHER {
background: $yellow;
color: $headline-color;

View File

@ -196,10 +196,18 @@ a {
background: $purple-bg;
}
.DEFI {
background: $dark-blue-bg;
}
.MARKETPLACES {
background: $orange-bg;
}
.CRYPTO_ONRAMPS {
background: $navy;
}
.OTHER {
background: $yellow-bg;
}