Merge branch 'develop' into feat/SOV-2913-history-staking-change

.changeset/big-grapes-stare.md

@@ -0,0 +1,6 @@
+---
+"frontend": patch
+"@sovryn/contracts": patch
+---
+
+SOV-2756: Clean up Babelfish token config

.changeset/dirty-fireants-exist.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3021: Fix earned tooltip layout

.changeset/nervous-brooms-guess.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-2993: Vesting reward history

.changeset/polite-apples-taste.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-2992: lending withdraw with max amount issue

.changeset/six-tips-tease.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-2942: fix adjust stake data refresh

.changeset/thin-jobs-pull.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3077: Prevent reward SOV claiming and force user to withdraw unclaimed SOV if the LM vesting contracts has too many liquid stakes

.github/workflows/release-frontend-build-ipfs.yml

@@ -26,6 +26,7 @@ jobs:
           pinataSecret: ${{ secrets.PINATA_SECRET }}
   upload_build:
     name: Upload Frontend Build To IPFS
+    needs: unpin_previous_builds
     runs-on: ubuntu-latest
     outputs:
       commit_short_hash: ${{ steps.commit.outputs.short }}

apps/frontend/CHANGELOG.md

@@ -1,5 +1,38 @@
 # frontend
 
+## 1.0.27
+
+### Patch Changes
+
+- 8d9a3fd4: SOV-3171: borrow history export order
+- 8d9a3fd4: SOV-2747: Borrow page skeleton
+- 8d9a3fd4: SOV-2800: Borrow - Maintenance mode states
+- 8d9a3fd4: SOV-3143: Fix repaying tiny position
+- f88ff42b: SOV-2754: Update token amount output component
+- 8d9a3fd4: SOV-3089: Fix Loan modal titles
+- 8d9a3fd4: SOV-2747: Borrow page
+- 8d9a3fd4: SOV-2829: Borrow page initial config
+- 8d9a3fd4: SOV-2749: add adjust loan dialog
+- 8d9a3fd4: SOV-2989: Develop D2 Borrow page - Extend loan modal
+- 8d9a3fd4: SOV-3031: borrow ui tweaks
+- 8d9a3fd4: SOV-2755: add fixed-interest notifications
+- 8d9a3fd4: SOV-2747: Finalize Borrow page
+- 8d9a3fd4: SOV-2748: Borrow page - New loan modal
+- 8d9a3fd4: SOV-3145: Fix extend modal allowance
+- 8d9a3fd4: SOV-3151: update createLoan label
+- 8d9a3fd4: SOV-2750: Borrow Transaction History
+- 8d9a3fd4: SOV-2941: Update Borrow history
+- 8d9a3fd4: SOV-2995: update open loans table
+- Updated dependencies [8d9a3fd4]
+- Updated dependencies [8d9a3fd4]
+- Updated dependencies [8d9a3fd4]
+- Updated dependencies [f88ff42b]
+- Updated dependencies [8d9a3fd4]
+- Updated dependencies [8d9a3fd4]
+  - @sovryn/contracts@1.0.14
+  - @sovryn/ui@1.0.13
+  - @sovryn/sdk@0.0.6
+
 ## 1.0.26
 
 ### Patch Changes

apps/frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "homepage": ".",
   "private": true,
   "dependencies": {
@@ -26,6 +26,7 @@
     "bitcoin-address-validation": "2.2.1",
     "chart.js": "4.1.1",
     "classnames": "2.3.2",
+    "date-fns": "2.30.0",
     "dayjs": "1.11.7",
     "env-cmd": "10.1.0",
     "ethers": "5.7.1",
@@ -40,6 +41,7 @@
     "react": "18.2.0",
     "react-chartjs-2": "5.1.0",
     "react-countup": "6.4.0",
+    "react-day-picker": "8.8.0",
     "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
     "react-i18next": "12.0.0",

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

@@ -3,7 +3,11 @@ import { useEffect } from 'react';
 
 import classNames from 'classnames';
 
-import { getTokenDetails, SupportedTokens } from '@sovryn/contracts';
+import {
+  getTokenDetails,
+  getTokenDetailsByAddress,
+  SupportedTokens,
+} from '@sovryn/contracts';
 import { applyDataAttr } from '@sovryn/ui';
 
 import { getTokenDisplayName } from '../../../constants/tokens';
@@ -13,7 +17,11 @@ type AssetRendererProps = {
   /**
    * The asset that will be rendered and it's required.
    */
-  asset: SupportedTokens;
+  asset?: SupportedTokens;
+  /**
+   * The asset address.
+   */
+  address?: string;
   /**
    * Whether to show the asset logo or not.
    * */
@@ -39,22 +47,45 @@ type AssetRendererProps = {
 
 export const AssetRenderer: FC<AssetRendererProps> = ({
   asset,
+  address,
   showAssetLogo,
   assetClassName,
   className,
   dataAttribute,
   logoClassName,
 }) => {
+  const [token, setToken] = useState(asset);
   const [logo, setLogo] = useState<string | undefined>(undefined);
 
   useEffect(() => {
-    const getLogo = async () =>
-      await getTokenDetails(asset)
-        .then(item => setLogo(item.icon))
-        .catch(() => setLogo(''));
+    const getAssetDetails = async () => {
+      if (asset) {
+        await getTokenDetails(asset)
+          .then(item => {
+            setLogo(item.icon);
+            setToken(item.symbol);
+          })
+          .catch(() => setLogo(''));
+      }
+    };
+
+    !address && !!asset && getAssetDetails();
+  }, [address, asset, showAssetLogo]);
+
+  useEffect(() => {
+    const getAssetDetails = async () => {
+      if (address) {
+        await getTokenDetailsByAddress(address)
+          .then(item => {
+            setLogo(item.icon);
+            setToken(item.symbol);
+          })
+          .catch(() => setLogo(''));
+      }
+    };
 
-    showAssetLogo && getLogo();
-  }, [asset, showAssetLogo]);
+    !asset && !!address && getAssetDetails();
+  }, [address, asset, showAssetLogo]);
 
   return (
     <div
@@ -67,9 +98,11 @@ export const AssetRenderer: FC<AssetRendererProps> = ({
           dangerouslySetInnerHTML={{ __html: logo }}
         />
       )}
-      <span className={classNames(styles.asset, assetClassName)}>
-        {getTokenDisplayName(asset)}
-      </span>
+      {token && (
+        <span className={classNames(styles.asset, assetClassName)}>
+          {getTokenDisplayName(token)}
+        </span>
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,3 @@
+.selected, .selected:hover, .selected:focus, .selected:hover:not([disabled]) {
+  @apply bg-primary text-white rounded-none;
+}

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

@@ -0,0 +1,104 @@
+import React, { FC, useCallback, useMemo } from 'react';
+
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import { DayPicker } from 'react-day-picker';
+
+import { Icon, IconNames, Paragraph } from '@sovryn/ui';
+
+import styles from './DatePicker.module.css';
+
+type DatePickerProps = {
+  date: number;
+  onChange: (value: number) => void;
+  className?: string;
+  minDate?: number;
+  maxDate?: number;
+  label: string;
+  isCalendarVisible?: boolean;
+  setIsCalendarVisible: (value: React.SetStateAction<boolean>) => void;
+};
+
+const datePickerStylesOverride = (
+  <style>
+    {`
+        .rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
+          background-color: #F57118;
+          border-radius: 0;
+        }
+      `}
+  </style>
+);
+
+export const DatePicker: FC<DatePickerProps> = ({
+  date,
+  onChange,
+  className,
+  label,
+  minDate,
+  maxDate,
+  isCalendarVisible,
+  setIsCalendarVisible,
+}) => {
+  const selected = useMemo(() => dayjs.unix(date).toDate(), [date]);
+
+  const handleDaySelect = useCallback(
+    (date: Date | undefined) => {
+      if (!date) {
+        return;
+      }
+      setIsCalendarVisible(false);
+      const selectedDateTime = dayjs(date);
+      const currentTime = dayjs();
+      const timestamp =
+        selectedDateTime.unix() +
+        currentTime.diff(currentTime.startOf('day'), 'seconds');
+      onChange(timestamp);
+    },
+    [onChange, setIsCalendarVisible],
+  );
+
+  const handleCalendarClick = useCallback(() => {
+    setIsCalendarVisible(previousValue => !previousValue);
+  }, [setIsCalendarVisible]);
+
+  return (
+    <div
+      className={classNames(
+        className,
+        'bg-gray-70 rounded min-h-10 px-3 flex items-center justify-between relative m-0',
+      )}
+    >
+      <Paragraph className="font-medium" children={label} />
+      <div
+        className="cursor-pointer flex items-center"
+        onClick={handleCalendarClick}
+      >
+        {dayjs.unix(date).format('DD/MM/YYYY')}
+        <Icon icon={IconNames.CALENDAR} size={11} className="ml-2" />
+      </div>
+
+      {isCalendarVisible && (
+        <div className="absolute top-10 left-0 right-0 z-10">
+          {datePickerStylesOverride}
+          <DayPicker
+            initialFocus={isCalendarVisible}
+            mode="single"
+            defaultMonth={selected}
+            selected={selected}
+            onSelect={handleDaySelect}
+            fromDate={minDate ? dayjs.unix(minDate).toDate() : dayjs().toDate()}
+            toDate={maxDate ? dayjs.unix(maxDate).toDate() : undefined}
+            modifiersClassNames={{
+              selected: styles.selected,
+            }}
+            styles={{
+              caption_label: { fontSize: '1rem' },
+            }}
+            className="bg-gray-70 rounded m-0 mt-1 px-0 py-3 flex justify-center"
+          />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,40 @@
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+
+import { AssetRenderer } from '../../2_molecules/AssetRenderer/AssetRenderer';
+import { NextBorrowInterestRate } from '../../5_pages/BorrowPage/components/BorrowAssetsTable/components/NextBorrowInterestRate/NextBorrowInterestRate';
+import { NextSupplyInterestRate } from '../../5_pages/LendPage/components/NextSupplyInterestRate/NextSupplyInterestRate';
+import { translations } from '../../../locales/i18n';
+import { LendingPool } from '../../../utils/LendingPool';
+
+type FixedInterestPoolRowTitleProps = {
+  pool: LendingPool;
+  isBorrow?: boolean;
+};
+
+export const FixedInterestPoolRowTitle: FC<FixedInterestPoolRowTitleProps> = ({
+  pool,
+  isBorrow = false,
+}) => (
+  <div className="flex justify-between items-center w-full">
+    <AssetRenderer
+      dataAttribute={`${isBorrow ? 'borrow-table' : 'lend-frame'}-asset`}
+      showAssetLogo
+      asset={pool.getAsset()}
+      className="mr-1"
+    />
+    <div className="pl-1 flex items-center">
+      {isBorrow ? (
+        <NextBorrowInterestRate asset={pool.getAsset()} />
+      ) : (
+        <NextSupplyInterestRate asset={pool.getAsset()} />
+      )}
+      <span className="text-gray-30 ml-1 font-medium">
+        {isBorrow
+          ? t(translations.fixedInterestPage.borrowAssetsTable.borrowAprMobile)
+          : t(translations.lendPage.table.lendApyMobile)}
+      </span>
+    </div>
+  </div>
+);

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

@@ -7,8 +7,3 @@ export enum EcosystemDataType {
   balanceOf = 'balanceOf',
   totalSupply = 'totalSupply',
 }
-
-export enum TokenType {
-  babelfish = 'babelfish',
-  mynt = 'mynt',
-}