SOV-2083: add D2 links (#2528)

* feat: add links to D2 * fix: links * fix: dynamic links --------- Co-authored-by: soulBit <[email protected]>
DistributedCollective · May 4, 2023 · f90ffd6 · f90ffd6
1 parent 6859879
commit f90ffd6
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 6 deletions.
diff --git a/...app/containers/PageContainer/components/DefaultHeaderComponent/DefaultHeaderComponent.tsx b/...app/containers/PageContainer/components/DefaultHeaderComponent/DefaultHeaderComponent.tsx
@@ -23,7 +23,7 @@ import {
 import { LanguageToggle } from '../../../../components/LanguageToggle';
 import styles from './index.module.scss';
 import { ReactComponent as SovLogo } from 'assets/images/sovryn-logo-alpha.svg';
-import { bitocracyUrl, myntUrl } from 'utils/classifiers';
+import { D2_URL, bitocracyUrl, myntUrl } from 'utils/classifiers';
 import { Menu } from 'app/components/Menu';
 import { MenuItem } from 'app/components/Menu/components/MenuItem';
 import { MenuSeparator } from 'app/components/Menu/components/MenuSeparator';
@@ -37,12 +37,15 @@ import {
 import { Sovryn } from 'utils/sovryn';
 import { bignumber } from 'mathjs';
 
+import { ReactComponent as AppsIcon } from 'assets/apps-icon.svg';
+
 type PagesProps = {
   to: string;
   title: string;
   dataActionId: string;
   hrefExternal?: boolean;
   disabled?: boolean;
+  bold?: boolean;
 };
 
 export const DefaultHeaderComponent: React.FC = () => {
@@ -188,6 +191,33 @@ export const DefaultHeaderComponent: React.FC = () => {
       dataActionId: 'header-mobile-bitocracy-link-forum',
       hrefExternal: true,
     },
+    {
+      to: '',
+      title: 'Sovryn.app',
+      dataActionId: '',
+      hrefExternal: true,
+    },
+    {
+      to: D2_URL,
+      title: t(translations.mainMenu.borrow),
+      dataActionId: 'header-mobile-d2-link-borrow',
+      hrefExternal: true,
+      bold: true,
+    },
+    {
+      to: `${D2_URL}/earn`,
+      title: t(translations.mainMenu.earn),
+      dataActionId: 'header-mobile-d2-link-earn',
+      hrefExternal: true,
+      bold: true,
+    },
+    {
+      to: `${D2_URL}/convert`,
+      title: t(translations.mainMenu.convert),
+      dataActionId: 'header-mobile-d2-link-convert',
+      hrefExternal: true,
+      bold: true,
+    },
     {
       to: '',
       title: '',
@@ -231,7 +261,9 @@ export const DefaultHeaderComponent: React.FC = () => {
         hrefExternal={link.hrefExternal}
         data-action-id={link.dataActionId}
         disabled={link.disabled || false}
-        className="tw-leading-snug"
+        className={classNames('tw-leading-snug', {
+          'tw-font-bold': link.bold,
+        })}
       />
     );
   });
@@ -254,6 +286,7 @@ export const DefaultHeaderComponent: React.FC = () => {
   };
 
   const SECTION_TYPE = {
+    PRODUCTS: 'products',
     TRADE: 'trade',
     EARN: 'earn',
     LABS: 'labs',
@@ -310,6 +343,37 @@ export const DefaultHeaderComponent: React.FC = () => {
               </Link>
             </div>
             <Menu className="tw-hidden xl:tw-flex tw-flex-row tw-flex-nowrap 2xl:tw-space-x-4 tw-items-center">
+              <NavPopover
+                content={
+                  <>
+                    <MenuItem
+                      text={t(translations.mainMenu.borrow)}
+                      label={t(translations.mainMenu.labels.d2Borrow)}
+                      href={D2_URL}
+                      hrefExternal
+                      dataActionId="header-trade-d2-link-borrow"
+                    />
+                    <MenuItem
+                      text={t(translations.mainMenu.earn)}
+                      label={t(translations.mainMenu.labels.d2Earn)}
+                      href={`${D2_URL}/earn`}
+                      hrefExternal
+                      dataActionId="header-trade-d2-link-earn"
+                    />
+                    <MenuItem
+                      text={t(translations.mainMenu.convert)}
+                      label={t(translations.mainMenu.labels.d2Convert)}
+                      href={`${D2_URL}/convert`}
+                      hrefExternal
+                      dataActionId="header-trade-d2-link-convert"
+                    />
+                  </>
+                }
+              >
+                <span className={classNames(styles.firstLevelMenu)}>
+                  <AppsIcon />
+                </span>
+              </NavPopover>
               <NavPopover
                 content={
                   <>

diff --git a/src/app/pages/LandingPage/components/Banner/GetStartedBanner.tsx b/src/app/pages/LandingPage/components/Banner/GetStartedBanner.tsx
@@ -3,7 +3,7 @@ import getStartedBanner from 'assets/images/banner/Zero_banner.svg';
 import getStartedBannerMobile from 'assets/images/banner/Zero_banner_mobile.svg';
 import { Picture } from 'app/components/Picture';
 import { Breakpoint } from 'types';
-import { zeroUrl } from 'utils/classifiers';
+import { D2_URL } from 'utils/classifiers';
 
 const zeroSrcSet = [
   {
@@ -21,7 +21,7 @@ const zeroSrcSet = [
 
 export const GetStartedBanner: React.FC = () => {
   const handleZeroBannerClick = useCallback(
-    () => window.open(zeroUrl, '_blank'),
+    () => window.open(D2_URL, '_blank'),
     [],
   );
 

diff --git a/src/assets/apps-icon.svg b/src/assets/apps-icon.svg
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -465,10 +465,12 @@
   },
   "mainMenu": {
     "buySov": "Buy SOV",
+    "products": "Products",
     "trade": "Trade",
     "swap": "Swap",
     "marginTrade": "Margin",
     "earn": "Earn",
+    "convert": "Convert",
     "pool": "Pool",
     "voting": "Voting",
     "portfolio": "Portfolio",
@@ -515,7 +517,10 @@
       "perpetuals": "Trade perpetual futures contracts",
       "zero": "0% interest loans on your bitcoin",
       "voting": "Affect Sovryn's governance",
-      "forum": "Join the community"
+      "forum": "Join the community",
+      "d2Borrow": "Open a line of credit with BTC at 0% interest",
+      "d2Earn": "Earn BTC by providing liquidity for liquidations",
+      "d2Convert": "Convert between assets"
     }
   },
   "originsLaunchpad": {

diff --git a/src/utils/classifiers.ts b/src/utils/classifiers.ts
@@ -42,7 +42,7 @@ export const bitocracyUrl =
     ? 'https://bitocracy.sovryn.app'
     : 'https://bitocracy.test.sovryn.app';
 
-export const zeroUrl =
+export const D2_URL =
   currentNetwork === AppMode.MAINNET
     ? isStaging
       ? 'https://staging.sovryn.app'