Market Making (#664)

* feat: MarketMakingPage set up

* SOV-3391: promo card component (#674)

* feat: promo card component

* Create neat-onions-push.md

* feat: Pair Renderer component

* feat: promo card update

* SOV-3394: Market Making Base Page (#682)

* feat: market making initial config

* feat: banners carousel added

* feat: update market making table

* Create quick-avocados-push.md

* fix: resolve PR comments

* SOV-3401: Amm pool deposit and adjust modal (#672)

* Refactor and reuse CurrentStatistics in the new modal

* Refactor label with tabs and max button

* Create PoolsTableAction

* Create NewPoolStatistics

* Add disclaimer for initial deposits and form validation

* Final adjustments

* Fix data attributes on pools actions

* SOV-3391: Carousel Promo Cards issues (#686)

* fix: Carousel issues

* Create light-dryers-applaud.md

* fix: carousel style

* SOV-3403: MM Adjust (Withdraw Deposit) (#687)

* chore: SOV-3402 SOV-3403

* chore: refactoring

* chore: updates from comments

* chore: fixes from comments

* chore: add deposit/withdraw button to the mobile view

* chore: refactoring + remove bignumbers blinking

* SOV-3397: High Level Pool Stats Integration (part 2) (#695)

* SOV-3397: High Level Pool Stats Integration (part 2)

* Create new-lies-study.md

* chore: update protocol fee

* chore: add missing t

* chore: update text info

* SOV-3389: add context link into MM (#697)

* chore: add export ContextLink

* SOV-3389: add ContextLink to the MM

* SOV-3405: Market making history table (#692)

* Market making history table v1

* Add liquidity mining rewards table

* Add liquidity mining vesting rewards table

* Market making history table subgraph pagination

* Get rid of liquidity mining vesting rewards table

* SOV-3396: High Level Pool Stats Integration (part 1) (#698)

* SOV-3396: High Level Pool Stats Integration (part 1)

* chore: update from comments

* chore: updates from comments

* chore: update return rate an return volume values

* chore: updates for comments

* feat: MM Maintenance state Integration (#699)

* SOV-3495: update mobile UI (#702)

* SOV-3495: update mobile UI

* chore: update data attr

* chore: remove duplicated class

* chore: update ui

* SOV-3393: Promo card integration (#701)

* feat: promo card integration

* Create shaggy-pans-hide.md

* fix: PR comments

* fix: open active pool on table with promotions

* fix: mobile promo card size

---------

Co-authored-by: soulBit <[email protected]>

* SOV-3399: Pool volume chart (#696)

* Fetch data

* Pool chart initial implementation

* Final adjustments

* chore: fix chart layout

* fix: mobile chart layout

---------

Co-authored-by: soulBit <[email protected]>

* SOV-3513: Refetch user info in adjust dialog (#706)

* Refresh adjust dialog user info

* Fix issue with deposits

* SOV-3546: Liquidity and balance (#709)

* SOV-3546: add liquidity and pool balance

* chore: update mobile view

* chore: resolve conflicts

* SOV-3516: MM Adjust(Deposit) - Max non-BTC asset (#707)

* SOV-3411: Market Making Integration & Testing (#712)

* SOV-3411: MM integration test updates

* chore: update promo cards scrolling

* chore: updates from testing

* chore: added a tooltip for weekly rewards

* SOV-3591: disable mynt deposit

* chore: update max balance

* chore: update max balance

* chore: updates from comments

* SOV-3531: Refactor charts (#714)

* Refactor charts

* Fix review comments

* Fix data fetching

* fix: broken classname

* SOV-3404: Rewards claiming (#704)

* SOV-3404: Claiming rewards

* chore: update address for claiming

* Fix final MM issues (#717)

* feat: dynamic reward recalibration date

* feat: increase bottom page margin

* Delete .changeset/shaggy-pans-hide.md

* Delete .changeset/new-lies-study.md

* Delete .changeset/neat-onions-push.md

* Delete .changeset/light-dryers-applaud.md

* Update quick-avocados-push.md

---------

Co-authored-by: tiltom <[email protected]>
Co-authored-by: Rick <[email protected]>
Co-authored-by: Pietro Maximoff <[email protected]>
Co-authored-by: soulBit <[email protected]>

.changeset/quick-avocados-push.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+Market Making page

apps/frontend/package.json

@@ -46,6 +46,7 @@
     "react-helmet-async": "1.3.0",
     "react-i18next": "12.0.0",
     "react-markdown": "8.0.7",
+    "react-multi-carousel": "2.8.4",
     "react-router-dom": "6.4.2",
     "react-scripts": "5.0.1",
     "react-timer-hook": "3.0.7",
@@ -81,9 +82,9 @@
     "git-revision-webpack-plugin": "^5.0.0",
     "stream-browserify": "^3.0.0",
     "ts-loader": "^9.3.1",
+    "ts-prune": "0.10.3",
     "typescript": "^4.7.4",
-    "webpack": "^5.74.0",
-    "ts-prune": "0.10.3"
+    "webpack": "^5.74.0"
   },
   "scripts": {
     "predev": "yarn generate:graphql",

apps/frontend/src/app/2_molecules/AssetPairRenderer/AssetPairRenderer.module.css

@@ -0,0 +1,7 @@
+.assetLogo.large svg {
+  @apply mr-0 w-8 h-8;
+}
+
+.assetLogo.small svg {
+  @apply mr-0 w-5 h-5;
+}

apps/frontend/src/app/2_molecules/AssetPairRenderer/AssetPairRenderer.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+
+import classNames from 'classnames';
+
+import { SupportedTokens } from '@sovryn/contracts';
+
+import { getTokenDisplayName } from '../../../constants/tokens';
+import { AssetRenderer } from '../AssetRenderer/AssetRenderer';
+import styles from './AssetPairRenderer.module.css';
+import { AssetPairSize } from './AssetPairRenderer.types';
+
+type AssetPairRendererProps = {
+  className?: string;
+  asset1: SupportedTokens;
+  asset2: SupportedTokens;
+  hideSymbol?: boolean;
+  size?: AssetPairSize;
+};
+
+export const AssetPairRenderer: FC<AssetPairRendererProps> = ({
+  className,
+  asset1,
+  asset2,
+  hideSymbol,
+  size = AssetPairSize.large,
+}) => (
+  <div className={classNames('flex items-center', className)}>
+    <AssetRenderer
+      asset={asset1}
+      showAssetLogo
+      className="mr-0"
+      assetClassName="hidden"
+      logoClassName={classNames(styles.assetLogo, styles[size])}
+    />
+    <AssetRenderer
+      asset={asset2}
+      showAssetLogo
+      className="mr-0 -ml-2"
+      assetClassName="hidden"
+      logoClassName={classNames(styles.assetLogo, styles[size])}
+    />
+    {!hideSymbol && (
+      <span className="flex items-center ml-2 text-gray-10">
+        {getTokenDisplayName(asset1)}/{getTokenDisplayName(asset2)}
+      </span>
+    )}
+  </div>
+);

apps/frontend/src/app/2_molecules/AssetPairRenderer/AssetPairRenderer.types.ts

@@ -0,0 +1,4 @@
+export enum AssetPairSize {
+  large = 'large',
+  small = 'small',
+}

apps/frontend/src/app/2_molecules/BannersCarousel/BannersCarousel.module.css

@@ -0,0 +1,7 @@
+.arrow {
+  @apply items-center justify-center hidden sm:flex absolute cursor-pointer w-4 top-0 h-full;
+}
+
+.item > div {
+  @apply ml-4 sm:mx-auto;
+}

apps/frontend/src/app/2_molecules/BannersCarousel/BannersCarousel.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import classNames from 'classnames';
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
+
+import styles from './BannersCarousel.module.css';
+import { CustomLeftArrow } from './components/CustomLeftArrow/CustomLeftArrow';
+import { CustomRightArrow } from './components/CustomRightArrow/CustomRightArrow';
+
+const responsive = {
+  large: {
+    breakpoint: { max: 4800, min: 1536 },
+    items: 4,
+    slidesToSlide: 1,
+  },
+  desktop: {
+    breakpoint: { max: 1536, min: 1199 },
+    items: 4,
+    slidesToSlide: 1,
+  },
+  tablet: {
+    breakpoint: { max: 1199, min: 992 },
+    items: 3,
+    slidesToSlide: 1,
+  },
+  smallTablet: {
+    breakpoint: { max: 992, min: 768 },
+    items: 2,
+    slidesToSlide: 1,
+  },
+  bigMobile: {
+    breakpoint: { max: 768, min: 576 },
+    items: 1,
+    slidesToSlide: 1,
+  },
+  mobile: {
+    breakpoint: { max: 576, min: 0 },
+    items: 1,
+    slidesToSlide: 1,
+  },
+};
+
+type BannersCarouselProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+export const BannersCarousel: React.FC<BannersCarouselProps> = ({
+  children,
+  className,
+}) => (
+  <div className={classNames(className, 'relative sm:px-6')}>
+    <Carousel
+      arrows
+      responsive={responsive}
+      draggable
+      partialVisible
+      focusOnSelect={false}
+      minimumTouchDrag={80}
+      customLeftArrow={<CustomLeftArrow />}
+      customRightArrow={<CustomRightArrow />}
+      swipeable
+      className="static"
+      renderButtonGroupOutside
+      itemClass={styles.item}
+    >
+      {children}
+    </Carousel>
+  </div>
+);

apps/frontend/src/app/2_molecules/BannersCarousel/components/CustomLeftArrow/CustomLeftArrow.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import classNames from 'classnames';
+import { ArrowProps } from 'react-multi-carousel';
+
+import { Icon, IconNames } from '@sovryn/ui';
+
+import styles from '../../BannersCarousel.module.css';
+
+export const CustomLeftArrow: React.FC<ArrowProps> = ({ onClick }) => (
+  <div className={classNames(styles.arrow, 'left-0')} onClick={onClick}>
+    <Icon icon={IconNames.ARROW_BACK} className="w-4 h-4" />
+  </div>
+);

apps/frontend/src/app/2_molecules/BannersCarousel/components/CustomRightArrow/CustomRightArrow.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import classNames from 'classnames';
+import { ArrowProps } from 'react-multi-carousel';
+
+import { Icon, IconNames } from '@sovryn/ui';
+
+import styles from '../../BannersCarousel.module.css';
+
+export const CustomRightArrow: React.FC<ArrowProps> = ({ onClick }) => (
+  <div className={classNames(styles.arrow, 'right-0')} onClick={onClick}>
+    <Icon icon={IconNames.ARROW_BACK} className="w-4 h-4 rotate-180" />
+  </div>
+);

apps/frontend/src/app/2_molecules/Chart/Chart.constants.ts

@@ -0,0 +1,19 @@
+export const PRIMARY_COLOR = '#2C303B';
+export const TEXT_COLOR = '#f5f5f5';
+export const BORDER_COLOR = '#484D59';
+export const FONT_FAMILY = 'Roboto';
+export const FONT_SIZE = 12;
+export const FONT_WEIGHT = '500';
+export const DASH_GRID_TYPE = 'dash';
+
+export const CUSTOM_CANVAS_BACKGROUND_COLOR = {
+  id: 'customCanvasBackgroundColor',
+  beforeDraw: (chart, options) => {
+    const { ctx } = chart;
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = options.color || '#2C303B';
+    ctx.fillRect(0, 0, chart.width, chart.height);
+    ctx.restore();
+  },
+};

apps/frontend/src/app/2_molecules/Chart/Chart.tsx

@@ -0,0 +1,70 @@
+import React, { FC, useEffect, useMemo, useRef } from 'react';
+
+import ChartLibrary from 'chart.js/auto';
+
+import { CUSTOM_CANVAS_BACKGROUND_COLOR } from './Chart.constants';
+import { MockData } from './Chart.types';
+import { getChartData, getChartOptions } from './Chart.utils';
+
+type ChartProps = {
+  mockData: MockData;
+  tickStep: number;
+  yLabel1: string;
+  yLabel2: string;
+  gradient1Colors: string[];
+  gradient2Colors: string[];
+};
+
+export const Chart: FC<ChartProps> = ({
+  mockData,
+  tickStep,
+  yLabel1,
+  yLabel2,
+  gradient1Colors,
+  gradient2Colors,
+}) => {
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const chartRef = useRef<ChartLibrary | null>(null);
+
+  const chartOptions = useMemo(
+    () => getChartOptions(tickStep, mockData, yLabel1, yLabel2),
+    [mockData, tickStep, yLabel1, yLabel2],
+  );
+
+  useEffect(() => {
+    if (chartRef.current) {
+      chartRef.current.destroy();
+    }
+
+    if (!canvas.current) {
+      return;
+    }
+
+    const gradient1 = chartRef.current?.ctx?.createLinearGradient(0, 0, 0, 400);
+    gradient1?.addColorStop(0, gradient1Colors[0]);
+    gradient1?.addColorStop(1, gradient1Colors[1]);
+
+    const gradient2 = chartRef.current?.ctx?.createLinearGradient(0, 0, 0, 400);
+    gradient2?.addColorStop(0, gradient2Colors[0]);
+    gradient2?.addColorStop(1, gradient2Colors[1]);
+
+    chartRef.current = new ChartLibrary(canvas.current, {
+      type: 'line',
+      data: getChartData(mockData, gradient1, gradient2),
+      options: chartOptions,
+      plugins: [CUSTOM_CANVAS_BACKGROUND_COLOR],
+    });
+
+    return () => {
+      if (chartRef.current) {
+        chartRef.current.destroy();
+      }
+    };
+  }, [chartOptions, gradient1Colors, gradient2Colors, mockData]);
+
+  return (
+    <div className="lg:h-[37rem] h-64 rounded">
+      <canvas ref={canvas}></canvas>
+    </div>
+  );
+};

apps/frontend/src/app/2_molecules/Chart/Chart.types.ts

@@ -0,0 +1,9 @@
+export type MockData = {
+  data1: number[];
+  label1: string;
+  borderColor1: string;
+  data2: number[];
+  label2: string;
+  borderColor2: string;
+  xLabels: string[];
+};