New DeFi category for Simona + Gitcoin Grants

back-end/constants/dapp-categories.json

@@ -1,5 +1,6 @@
 {
     "EXCHANGES": "EXCHANGES",
+    "DEFI": "DEFI",
     "MARKETPLACES": "MARKETPLACES",
     "COLLECTIBLES": "COLLECTIBLES",
     "GAMES": "GAMES",
@@ -8,6 +9,7 @@
     "OTHER": "OTHER",
     "ALL_CATEGORIES": [
         "EXCHANGES",
+        "DEFI",
         "MARKETPLACES",
         "COLLECTIBLES",
         "GAMES",

shared.testnet.chains.json

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

src/common/assets/images/categories/defi.svg

@@ -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>

src/common/components/CategoryIcon/CategoryIcon.jsx

@@ -1,6 +1,7 @@
 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'
@@ -10,6 +11,7 @@ import SocialNetworksIcon from './SocialNetworksIcon'
 
 const icons = {
   EXCHANGES: ExchangesIcon,
+  DEFI: DeFiIcon,
   MARKETPLACES: MarketplacesIcon,
   GAMES: GamesIcon,
   UTILITIES: UtilitiesIcon,

src/common/components/CategoryIcon/DeFiIcon/DeFiIcon.jsx

@@ -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="black"
+    />
+    <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="black"
+    />
+    <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="black"
+    />
+    <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="black"
+    />
+    <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="black"
+    />
+    <path
+      d="M5.5 18.4742L17.1 4.87421"
+      stroke="black"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+    />
+    <path
+      d="M19.5 15.0742L18.3 5.07422"
+      stroke="black"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+    />
+    <path
+      d="M14.9 2.67419L7.70001 4.17419"
+      stroke="black"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+    />
+    <path
+      d="M9 20.3742L18.3 16.9742"
+      stroke="black"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+    />
+  </svg>
+)
+
+export default icon

src/common/components/CategoryIcon/DeFiIcon/index.js

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

src/common/data/categories.js

@@ -1,4 +1,5 @@
 export const EXCHANGES = 'EXCHANGES'
+export const DEFI = 'DEFI'
 export const MARKETPLACES = 'MARKETPLACES'
 export const COLLECTIBLES = 'COLLECTIBLES'
 export const GAMES = 'GAMES'

src/common/data/dapp.js

@@ -43,6 +43,7 @@ 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)

src/common/data/featured.js

@@ -1,11 +1,19 @@
 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 GitcoinBanner from '../assets/images/featured/gitcoin_banner.png'
+import GitcoinLogo from '../assets/images/featured/gitcoin_logo.png'
 import ZerionBanner from '../assets/images/featured/zerion_banner.png'
 import ZerionLogo from '../assets/images/featured/zerion_logo.png'
 
 const featuredDapps = [
+  {
+    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:
@@ -16,20 +24,11 @@ const featuredDapps = [
   },
   {
     name: 'Zerion',
-    description:
-      'Zerion is the simplest way to invest in DeFi from anywhere in the world',
-    url: 'https://app.zerion.io',
+    description: 'Buy, sell and track DeFi assets',
+    url: 'https://app.zerion.io/?utm_source={dap.ps}',
     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

src/common/styles/_colors.scss

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

src/common/utils/categories.test.js

@@ -7,6 +7,10 @@ describe('categories', () => {
         key: 'EXCHANGES',
         value: 'Exchanges',
       },
+      {
+        key: 'DEFI',
+        value: 'DeFi',
+      },
       {
         key: 'MARKETPLACES',
         value: 'Marketplaces',

src/modules/Categories/Categories.module.scss

@@ -51,6 +51,10 @@
   background: $purple-bg;
 }
 
+.DEFI {
+  background: $dark-blue-bg;
+}
+
 .MARKETPLACES {
   background: $orange-bg;
 }

src/modules/Categories/Categories.utils.js

@@ -1,4 +1,5 @@
 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'
@@ -8,6 +9,7 @@ import utilities from '../../common/assets/images/categories/utilities.svg'
 
 const imageMap = {
   EXCHANGES: exchanges,
+  DEFI: defi,
   MARKETPLACES: marketplaces,
   OTHER: other,
   MEDIA: other, // TODO: fix with icon from design

src/modules/CategorySelector/CategorySelector.module.scss

@@ -106,6 +106,10 @@
   background: $purple;
 }
 
+.DEFI {
+  background: $dark-blue;
+}
+
 .MARKETPLACES {
   background: $orange;
 }

src/modules/Profile/Profile.module.scss

@@ -196,6 +196,10 @@ a {
   background: $purple-bg;
 }
 
+.DEFI {
+  background: $dark-blue-bg;
+}
+
 .MARKETPLACES {
   background: $orange-bg;
 }