Merge branch 'develop' into feat/tvl-volume-indexer

.changeset/orange-lies-turn.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-4265: Slippage settings + price impact

.changeset/orange-lizards-admire.md

@@ -0,0 +1,5 @@
+---
+'@sovryn/ui': patch
+---
+
+feat: allow custom row wrapper in table component

.changeset/real-paws-poke.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3945: prevent "dead vestings" from LM rewards

.changeset/tidy-keys-guess.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-4346: add bitget wallet

.changeset/tiny-clouds-sniff.md

@@ -0,0 +1,5 @@
+---
+"@sovryn/ui": patch
+---
+
+SOV-4297: add Slider variation of Tabs component 

apps/frontend/package.json

@@ -6,20 +6,21 @@
   "dependencies": {
     "@apollo/client": "3.7.1",
     "@apollo/react-hooks": "4.0.0",
-    "@sovryn/sdex": "*",
     "@loadable/component": "5.15.2",
     "@sovryn-zero/lib-base": "0.2.1",
     "@sovryn-zero/lib-ethers": "0.2.5",
     "@sovryn/contracts": "*",
     "@sovryn/ethers-provider": "*",
+    "@sovryn/onboard-bitget": "1.0.1",
     "@sovryn/onboard-common": "1.0.0",
     "@sovryn/onboard-core": "1.0.6",
     "@sovryn/onboard-hw-common": "1.0.7",
     "@sovryn/onboard-injected": "1.0.4",
     "@sovryn/onboard-ledger": "1.0.7",
-    "@sovryn/onboard-react": "1.0.12",
+    "@sovryn/onboard-react": "1.0.14",
     "@sovryn/onboard-trezor": "1.0.7",
     "@sovryn/onboard-walletconnect": "1.0.9",
+    "@sovryn/sdex": "*",
     "@sovryn/sdk": "*",
     "@sovryn/tailwindcss-config": "*",
     "@sovryn/ui": "*",
@@ -50,15 +51,15 @@
     "react-multi-carousel": "2.8.4",
     "react-router-dom": "6.4.2",
     "react-scripts": "5.0.1",
+    "react-slider": "2.0.6",
     "react-timer-hook": "3.0.7",
     "reactjs-localstorage": "1.0.1",
     "remark-gfm": "3.0.1",
     "rxjs": "7.5.6",
     "sanitize-html": "2.11.0",
     "socket.io-client": "4.5.4",
     "utf8": "^3.0.0",
-    "zustand": "^4.5.1",
-    "react-slider": "2.0.6"
+    "zustand": "^4.5.1"
   },
   "devDependencies": {
     "@babel/core": "7.18.2",

apps/frontend/src/app/4_templates/PageContainer/PageContainer.tsx

@@ -5,9 +5,14 @@ import { Outlet } from 'react-router-dom';
 
 import { applyDataAttr } from '@sovryn/ui';
 
+import { RSK_CHAIN_ID } from '../../../config/chains';
+
 import { DappLocked } from '../../1_atoms/DappLocked/DappLocked';
 import { Header, Footer } from '../../3_organisms';
+import { UnclaimcedVestingAlert } from '../../5_pages/RewardsPage/components/Vesting/components/UnclaimedVestingAlert/UnclaimedVestingAlert';
 import { useIsDappLocked } from '../../../hooks/maintenances/useIsDappLocked';
+import { useAccount } from '../../../hooks/useAccount';
+import { useCurrentChain } from '../../../hooks/useChainStore';
 
 type PageContainerProps = {
   className?: string;
@@ -21,6 +26,8 @@ export const PageContainer: FC<PageContainerProps> = ({
   dataAttribute,
 }) => {
   const dappLocked = useIsDappLocked();
+  const { account } = useAccount();
+  const chainID = useCurrentChain();
   return (
     <div
       className={classNames('flex flex-col flex-grow', className)}
@@ -31,6 +38,7 @@ export const PageContainer: FC<PageContainerProps> = ({
       ) : (
         <>
           <Header />
+          {account && chainID === RSK_CHAIN_ID && <UnclaimcedVestingAlert />}
           <div
             className={classNames('my-2 px-4 flex flex-grow', contentClassName)}
           >

apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.tsx

@@ -138,7 +138,7 @@ const ConvertPage: FC = () => {
 
   const [sourceToken, setSourceToken] = useState<string>(defaultSourceToken);
 
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
+  const [showAdvancedSettings, setShowAdvancedSettings] = useState(true);
 
   const [tokenOptions, setTokenOptions] = useState<SelectOption<string>[]>([]);
 
@@ -385,12 +385,14 @@ const ConvertPage: FC = () => {
   const renderPriceAmount = useMemo(() => {
     if (price) {
       return (
-        <AmountRenderer
-          value={price}
-          suffix={getTokenDisplayName(priceToken)}
-          precision={TOKEN_RENDER_PRECISION}
-          trigger={TooltipTrigger.hover}
-        />
+        <>
+          <AmountRenderer
+            value={price}
+            suffix={getTokenDisplayName(priceToken)}
+            precision={TOKEN_RENDER_PRECISION}
+            trigger={TooltipTrigger.hover}
+          />
+        </>
       );
     }
     return t(commonTranslations.na);
@@ -549,63 +551,50 @@ const ConvertPage: FC = () => {
             </div>
           </div>
 
-          {
-            sourceToken && destinationToken && quote ? (
-              <>
-                <Accordion
-                  className="mt-4 mb-3 text-xs"
-                  label={t(translations.common.advancedSettings)}
-                  open={showAdvancedSettings}
-                  onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-                  dataAttribute="convert-settings"
-                >
-                  <div className="mt-2 mb-4">
-                    <AmountInput
-                      value={slippageTolerance}
-                      onChange={e => setSlippageTolerance(e.target.value)}
-                      label={t(pageTranslations.slippageTolerance)}
-                      className="max-w-none w-full"
-                      unit="%"
-                      step="0.01"
-                      decimalPrecision={2}
-                      placeholder="0"
-                      max="100"
-                    />
-                  </div>
-                </Accordion>
-
-                <SimpleTable className="mt-3">
-                  <SimpleTableRow
-                    label={t(pageTranslations.minimumReceived)}
-                    valueClassName="text-primary-10"
-                    value={
-                      <AmountRenderer
-                        value={minimumReceived}
-                        suffix={getTokenDisplayName(destinationToken)}
-                        precision={TOKEN_RENDER_PRECISION}
-                      />
-                    }
-                  />
-                  <SimpleTableRow
-                    label={t(pageTranslations.maximumPrice)}
-                    valueClassName="text-primary-10"
-                    className="cursor-pointer"
-                    onClick={togglePriceQuote}
-                    value={renderPriceAmount}
+          <Accordion
+            className="mt-4 mb-3 text-xs"
+            label={t(translations.common.advancedSettings)}
+            open={showAdvancedSettings}
+            onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
+            dataAttribute="convert-settings"
+          >
+            <div className="mt-2 mb-4">
+              <AmountInput
+                value={slippageTolerance}
+                onChange={e => setSlippageTolerance(e.target.value)}
+                label={t(pageTranslations.slippageTolerance)}
+                className="max-w-none w-full"
+                unit="%"
+                step="0.01"
+                decimalPrecision={2}
+                placeholder="0"
+                max="100"
+              />
+            </div>
+          </Accordion>
+
+          {sourceToken && destinationToken && quote ? (
+            <SimpleTable className="mt-3">
+              <SimpleTableRow
+                label={t(pageTranslations.minimumReceived)}
+                valueClassName="text-primary-10"
+                value={
+                  <AmountRenderer
+                    value={minimumReceived}
+                    suffix={getTokenDisplayName(destinationToken)}
+                    precision={TOKEN_RENDER_PRECISION}
                   />
-                </SimpleTable>
-              </>
-            ) : null
-            // <SimpleTable className="mt-3">
-            //   <SimpleTableRow
-            //     label={t(pageTranslations.price)}
-            //     valueClassName="text-primary-10"
-            //     className="cursor-pointer"
-            //     value={renderPriceAmount}
-            //     onClick={() => setPriceQuote(value => !value)}
-            //   />
-            // </SimpleTable>
-          }
+                }
+              />
+              <SimpleTableRow
+                label={t(pageTranslations.maximumPrice)}
+                valueClassName="text-primary-10"
+                className="cursor-pointer"
+                onClick={togglePriceQuote}
+                value={renderPriceAmount}
+              />
+            </SimpleTable>
+          ) : null}
 
           {hasQuoteError && (
             <ErrorBadge

apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/Vesting.tsx

@@ -10,6 +10,7 @@ import { translations } from '../../../../../locales/i18n';
 import { VestingContractType } from '../../../../../utils/graphql/rsk/generated';
 import { columnsConfig } from './Vestings.constants';
 import { generateRowTitle } from './Vestings.utils';
+import { VestingContextProvider } from './context/VestingContext';
 import { useGetVestingContracts } from './hooks/useGetVestingContracts';
 
 const pageSize = DEFAULT_PAGE_SIZE;
@@ -57,6 +58,7 @@ export const Vesting: FC = () => {
         isLoading={loading}
         dataAttribute="vesting-rewards-history-table"
         rowTitle={generateRowTitle}
+        rowComponent={VestingContextProvider}
       />
       <Pagination
         page={page}

apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/components/UnclaimedVestingAlert/UnclaimedVestingAlert.constants.ts

@@ -0,0 +1,2 @@
+export const MIN_ALERT_COUNT = 32;
+export const LOCK_CLAIM_COUNT = 43;

apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/components/UnclaimedVestingAlert/UnclaimedVestingAlert.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { t } from 'i18next';
+import { Link } from 'react-router-dom';
+
+import { Paragraph } from '@sovryn/ui';
+
+import { translations } from '../../../../../../../locales/i18n';
+import { useGetUnclaimedUserVestingCount } from '../../hooks/useLmLimit';
+import {
+  LOCK_CLAIM_COUNT,
+  MIN_ALERT_COUNT,
+} from './UnclaimedVestingAlert.constants';
+
+export const UnclaimcedVestingAlert = () => {
+  const count = useGetUnclaimedUserVestingCount();
+
+  if (count > MIN_ALERT_COUNT && count < LOCK_CLAIM_COUNT) {
+    return (
+      <div className="bg-error-light bg-opacity-50 p-4 rounded-lg mt-12 my-4 mx-8">
+        <Paragraph>
+          {t(translations.unclaimedVestings.text, { value: count })}{' '}
+          <Link
+            to="/rewards"
+            className="underline text-primary-20 hover:text-primary-10"
+          >
+            {t(translations.unclaimedVestings.cta)}
+          </Link>
+        </Paragraph>
+      </div>
+    );
+  }
+
+  return null;
+};

apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/components/UnlockSchedule/UnlockSchedule.tsx

@@ -1,13 +1,15 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { Button, ButtonStyle, ButtonType } from '@sovryn/ui';
 
 import { VestingContractTableRecord } from '../../Vesting.types';
 import { vestingTypeToTitleMapping } from '../../Vestings.utils';
+import { useVestingContext } from '../../context/VestingContext';
 import { useGetUnlockSchedule } from '../../hooks/useGetUnlockSchedule';
 import { UnlockScheduleDialog } from '../UnlockScheduleDialog/UnlockScheduleDialog';
 
 export const UnlockSchedule = (item: VestingContractTableRecord) => {
+  const update = useVestingContext().update;
   const unlockSchedule = useGetUnlockSchedule(item);
 
   const [showDialog, setShowDialog] = useState(false);
@@ -17,6 +19,10 @@ export const UnlockSchedule = (item: VestingContractTableRecord) => {
     [item.type],
   );
 
+  useEffect(() => {
+    update(state => (state.item = item));
+  }, [item, update]);
+
   return (
     <>
       <Button

apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/components/WithdrawButton/WithdrawButton.tsx

@@ -5,15 +5,25 @@ import { t } from 'i18next';
 import { Button, ButtonType, ButtonStyle } from '@sovryn/ui';
 
 import { translations } from '../../../../../../../locales/i18n';
+import { VestingContractType } from '../../../../../../../utils/graphql/rsk/generated';
 import { VestingContractTableRecord } from '../../Vesting.types';
+import { useVestingContext } from '../../context/VestingContext';
 import { useGetUnlockedBalance } from '../../hooks/useGetUnlockedBalance';
 import { useHandleWithdraw } from '../../hooks/useHandleWithdraw';
+import { LOCK_CLAIM_COUNT } from '../UnclaimedVestingAlert/UnclaimedVestingAlert.constants';
 
 export const WithdrawButton = (item: VestingContractTableRecord) => {
+  const { count } = useVestingContext();
   const handleWithdraw = useHandleWithdraw(item);
 
   const { isLoading, result } = useGetUnlockedBalance(item);
-  const isDisabled = useMemo(() => !result || result === 0, [result]);
+  const isDisabled = useMemo(
+    () =>
+      !result ||
+      result === 0 ||
+      (count >= LOCK_CLAIM_COUNT && item.type === VestingContractType.Rewards),
+    [count, item.type, result],
+  );
 
   return (
     <div className="flex justify-end w-full md:w-auto h-full pt-3">