Merge pull request #1153 from DistributedCollective/development

Liquidity Mining

package.json

@@ -92,7 +92,7 @@
     "lightweight-charts": "3.3.0",
     "lint-staged": "10.0.8",
     "local-storage": "2.0.0",
-    "mathjs": "7.5.1",
+    "mathjs": ">=7.5.1",
     "mini-css-extract-plugin": "0.9.0",
     "moment": "2.29.1",
     "node-plop": "0.25.0",

src/app/components/ActiveBorrowTable/index.tsx

@@ -115,7 +115,7 @@ export function ActiveBorrowTable(props: Props) {
     prepareRow,
   } = useTable({ columns, data }, useSortBy);
   return (
-    <div className="tw-bg-primary sovryn-border tw-p-4 tw-table-responsive">
+    <div className="sovryn-border tw-p-4 tw-table-responsive">
       <table {...getTableProps()} className="sovryn-table">
         <thead>
           {headerGroups.map(headerGroup => (

src/app/components/ActiveUserLoanContainer/components/ActiveLoanTableDesktop/index.tsx

@@ -75,7 +75,7 @@ export function ActiveLoanTableDesktop(props: Props) {
   }
 
   return (
-    <div className="tw-bg-primary sovryn-border tw-p-4 tw-hidden md:tw-block">
+    <div className="sovryn-border tw-p-4 tw-hidden md:tw-block">
       <table className="sovryn-table">
         <thead>
           <tr style={{ cursor: 'pointer' }}>

src/app/components/ActiveUserLoanContainer/components/ActiveLoanTableMobile/index.tsx

@@ -99,7 +99,7 @@ export function ActiveLoanTableMobile(props: Props) {
   });
 
   return (
-    <div className="tw-bg-primary sovryn-border tw-p-4 tw-block md:tw-hidden">
+    <div className="sovryn-border tw-p-4 tw-block md:tw-hidden">
       <div className="sovryn-table sovryn-table-mobile tw-p-4">
         <div className="tw-grid tw-gap-8 tw--mx-4 tw-grid-cols-12 table-header">
           <div className="tw-col-span-2" />

src/app/components/Arbitrage/Arbitrage.tsx

@@ -24,7 +24,7 @@ export function Arbitrage() {
     axios
       .get(api + '/amm/arbitrage')
       .then(res => setData(res.data))
-      .catch(e => console.log(e));
+      .catch(console.error);
   }, [api]);
 
   useEffect(() => {

src/app/components/Arrows/ArrowDown.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+import image from 'assets/images/arrow-down.svg';
+
+const Img = styled.img`
+  width: 40px;
+  height: 40px;
+  margin: 15px auto;
+`;
+
+export function ArrowDown() {
+  return (
+    <div className="tw-flex tw-justify-center tw-items-center tw-flex-grow-0 tw-flex-shrink-0">
+      <Img src={image} alt="Arrow" />
+    </div>
+  );
+}

src/app/components/Arrows/index.tsx

@@ -0,0 +1 @@
+export { ArrowDown } from './ArrowDown';

src/app/components/AssetRenderer/index.tsx

@@ -1,15 +1,9 @@
-/**
- *
- * AssetRenderer
- *
- */
 import React, { useMemo } from 'react';
 import cn from 'classnames';
 
 import { Asset } from 'types/asset';
 import { AssetsDictionary } from 'utils/dictionaries/assets-dictionary';
-
-import styles from './index.module.css';
+import { AssetSymbolRenderer } from '../AssetSymbolRenderer/index';
 
 type ImageSizes = 4 | 5 | 6 | 8 | 12;
 
@@ -19,26 +13,6 @@ interface CurrencyProps {
   imageSize?: ImageSizes;
 }
 
-const symbolMap = {
-  [Asset.RBTC]: (
-    <>
-      <em>R</em>BTC
-    </>
-  ),
-  [Asset.USDT]: (
-    <>
-      <em>R</em>USDT
-    </>
-  ),
-};
-
-export function getAssetSymbol(asset: Asset) {
-  if (symbolMap.hasOwnProperty(asset)) {
-    return symbolMap[asset];
-  }
-  return AssetsDictionary.get(asset).symbol;
-}
-
 export function AssetRenderer(props: CurrencyProps) {
   const classNames = useMemo(() => getSizeClass(props.imageSize), [
     props.imageSize,
@@ -53,7 +27,7 @@ export function AssetRenderer(props: CurrencyProps) {
           alt={AssetsDictionary.get(props.asset).name}
         />
       )}
-      <span className={styles.symbol}>{getAssetSymbol(props.asset)}</span>
+      <AssetSymbolRenderer asset={props.asset} />
     </span>
   );
 }

src/app/components/AssetSymbolRenderer/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Asset } from '../../../types';
+import { AssetsDictionary } from '../../../utils/dictionaries/assets-dictionary';
+import styles from './index.module.css';
+
+const symbolMap = {
+  [Asset.RBTC]: (
+    <>
+      <em>R</em>BTC
+    </>
+  ),
+  [Asset.USDT]: (
+    <>
+      <em>R</em>USDT
+    </>
+  ),
+  [Asset.ETH]: (
+    <>
+      ETH<em>S</em>
+    </>
+  ),
+};
+
+export function getAssetSymbol(asset: Asset) {
+  if (symbolMap.hasOwnProperty(asset)) {
+    return symbolMap[asset];
+  }
+  return AssetsDictionary.get(asset).symbol;
+}
+
+interface IAssetSymbolRenderer {
+  asset: Asset;
+}
+
+export const AssetSymbolRenderer: React.FC<IAssetSymbolRenderer> = ({
+  asset,
+}) => <span className={styles.symbol}>{getAssetSymbol(asset)}</span>;

src/app/components/ComparisonChart/index.tsx

@@ -43,6 +43,9 @@ interface ComparisonProps {
 
 export default function ComparisonChart(props: ComparisonProps) {
   const [options, setOptions] = useState<Highcharts.Options>({
+    credits: {
+      enabled: false,
+    },
     title: {
       text: props.title,
     },

src/app/components/FinanceV2Components/CardRow/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyledCardRow } from './styled';
+import { useTranslation } from 'react-i18next';
+import { translations } from 'locales/i18n';
+
+interface ICardRowProps {
+  LeftSection?: React.ReactNode;
+  ChartSection?: React.ReactNode;
+  DataSection?: React.ReactNode;
+  Actions?: React.ReactNode;
+  leftColor?: string;
+}
+export const CardRow: React.FC<ICardRowProps> = ({
+  LeftSection,
+  ChartSection,
+  DataSection,
+  Actions,
+  leftColor,
+}: ICardRowProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <StyledCardRow
+      className="d-flex tw-flex-row tw-items-center tw-mb-3 tw-rounded-lg tw-py-2.5 tw-px-4 tw-relative overflow-auto tw-justify-between"
+      leftColor={leftColor}
+    >
+      {LeftSection && <div>{LeftSection}</div>}
+      {ChartSection && (
+        <div className="tw-ml-2 tw-mr-3 tw-relative tw-pointer-events-none tw-max-w-13rem 2xl:tw-max-w-md 2xl:tw-ml-4 2xl:tw-mr-5">
+          <div className="tw-absolute tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center tw-text-white tw-font-extralight tw-text-lg 2xl:tw-text-2xl tw-z-10">
+            {t(translations.liquidityMining.chartOverlayText)}
+          </div>
+          <div className="tw-opacity-20"> {ChartSection} </div>
+        </div>
+      )}
+      {DataSection && <div>{DataSection}</div>}
+      {Actions && <>{Actions}</>}
+    </StyledCardRow>
+  );
+};

src/app/components/FinanceV2Components/CardRow/styled.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+interface IStyledCardRowProps {
+  leftColor?: string;
+}
+
+export const StyledCardRow = styled.div<IStyledCardRowProps>`
+  background-color: #222222;
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  padding-right: 10px;
+  border-left-width: 10px;
+  border-left-color: ${props => `${props.leftColor || '#222222'}`};
+`;