Merge pull request #88 from andytudhope/master
Adds 2 New Categories - DeFi and Crypto Onramps - and Updates Featured DApps
|
@ -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"
|
||||
]
|
||||
|
|
|
@ -11,11 +11,11 @@
|
|||
},
|
||||
"0xa4375ab33cee855df7ced45caa843fb9f450adb7944cea8fd46710f06587686c": {
|
||||
"name": "Discover",
|
||||
"address": "0x0b4f22f6cF73641905Fba49175E2A4F49F498D38"
|
||||
"address": "0x9b4707BbAcD138c6cB048D0486D00b883cf0377D"
|
||||
},
|
||||
"0x21389315d2b5cfa1d29b352c3c4cc6df2dc1002591c18150de310a8781ce1438": {
|
||||
"name": "DiscoverKyberSwap",
|
||||
"address": "0x6748C3D07bB4544f6205eDC35706B77F2807AB26"
|
||||
"address": "0x7e6d281FEe920Acc28b7166f28c7cE467C2bADa2"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 |
|
@ -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 |
After Width: | Height: | Size: 136 KiB |
After Width: | Height: | Size: 6.8 KiB |
After Width: | Height: | Size: 294 KiB |
After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 32 KiB |
|
@ -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
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
|
@ -0,0 +1,3 @@
|
|||
import DeFiIcon from './DeFiIcon'
|
||||
|
||||
export default DeFiIcon
|
|
@ -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
|
|
@ -0,0 +1,3 @@
|
|||
import OnrampIcon from './OnrampIcon'
|
||||
|
||||
export default OnrampIcon
|
|
@ -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'
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|