SOV-5263: rusdt to usdt0 migration

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

@@ -0,0 +1,161 @@
+import React, { FC, useCallback, useMemo, useState } from 'react';
+
+import classNames from 'classnames';
+import { t } from 'i18next';
+
+import { getAssetData } from '@sovryn/contracts';
+import {
+  Button,
+  ButtonSize,
+  ButtonStyle,
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  Paragraph,
+  ParagraphSize,
+} from '@sovryn/ui';
+import { Decimal } from '@sovryn/utils';
+
+import { RSK_CHAIN_ID } from '../../../config/chains';
+
+import {
+  TransactionType,
+  Transaction,
+} from '../../3_organisms/TransactionStepDialog/TransactionStepDialog.types';
+import { useTransactionContext } from '../../../contexts/TransactionContext';
+import { useAccount } from '../../../hooks/useAccount';
+import { useAssetBalance } from '../../../hooks/useAssetBalance';
+import { translations } from '../../../locales/i18n';
+import { COMMON_SYMBOLS } from '../../../utils/asset';
+import { bigNumberic, decimalic } from '../../../utils/math';
+import { AmountRenderer } from '../AmountRenderer/AmountRenderer';
+
+const RUSDT_MIGRATION_CONTRACT = '0xd143f576b8e889b1c90ebef8d0c4bfbb3316fdd2';
+
+type RusdtMigrationNoticeProps = {
+  className?: string;
+  buttonClassName?: string;
+  dataAttributePrefix?: string;
+};
+
+export const RusdtMigrationNotice: FC<RusdtMigrationNoticeProps> = ({
+  className,
+  buttonClassName,
+  dataAttributePrefix = 'rusdt-migration',
+}) => {
+  const { account, signer } = useAccount();
+  const { balance, weiBalance, loading } = useAssetBalance(
+    COMMON_SYMBOLS.RUSDT,
+    RSK_CHAIN_ID,
+  );
+
+  // Convert rUSDT balance to the correct decimals for the migration
+  const outputWeiBalance = useMemo(
+    () => bigNumberic(weiBalance).div(1e12).toString(),
+    [weiBalance],
+  );
+
+  const { setTransactions, setTitle, setIsOpen } = useTransactionContext();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const hasBalance = useMemo(() => balance.gt(Decimal.ZERO), [balance]);
+
+  const canMigrate =
+    !!account && !!signer && hasBalance && outputWeiBalance !== '0' && !loading;
+
+  const handleOpenModal = useCallback(() => setIsModalOpen(true), []);
+  const handleCloseModal = useCallback(() => setIsModalOpen(false), []);
+
+  const handleMigrate = useCallback(async () => {
+    if (!canMigrate || !signer) {
+      return;
+    }
+
+    try {
+      const { contract } = await getAssetData(
+        COMMON_SYMBOLS.RUSDT,
+        RSK_CHAIN_ID,
+      );
+      const rusdtContract = contract(signer);
+
+      const transactions: Transaction[] = [
+        {
+          title: t(translations.rusdtMigration.tx.migrate),
+          request: {
+            type: TransactionType.signTransaction,
+            contract: rusdtContract,
+            fnName: 'transfer',
+            args: [RUSDT_MIGRATION_CONTRACT, weiBalance],
+            gasLimit: 100000, // Set a reasonable gas limit for the migration transaction
+          },
+        },
+      ];
+
+      setTransactions(transactions);
+      setTitle(t(translations.rusdtMigration.tx.title));
+      setIsOpen(true);
+      setIsModalOpen(false);
+    } catch (error) {
+      console.error('rUSDT migration setup failed', error);
+    }
+  }, [canMigrate, setIsOpen, setTitle, setTransactions, signer, weiBalance]);
+
+  return (
+    <>
+      <Button
+        style={ButtonStyle.ghost}
+        size={ButtonSize.small}
+        text={t(translations.rusdtMigration.cta)}
+        onClick={handleOpenModal}
+        className={classNames('w-auto h-auto py-0 px-0.5', buttonClassName)}
+        dataAttribute={`${dataAttributePrefix}-open-button`}
+      />
+
+      <Dialog disableFocusTrap isOpen={isModalOpen}>
+        <DialogHeader
+          title={t(translations.rusdtMigration.modal.title)}
+          onClose={handleCloseModal}
+        />
+        <DialogBody>
+          <Paragraph className="text-gray-30" size={ParagraphSize.base}>
+            {t(translations.rusdtMigration.modal.description)}
+          </Paragraph>
+
+          <div className="bg-gray-90 rounded p-4 mt-4">
+            <Paragraph size={ParagraphSize.small} className="text-gray-30">
+              {t(translations.rusdtMigration.modal.currentBalance)}
+            </Paragraph>
+            <Paragraph className="font-medium mt-1">
+              <AmountRenderer
+                value={account ? balance : '0'}
+                suffix={COMMON_SYMBOLS.RUSDT}
+              />
+              &nbsp;&nbsp;-&gt;&nbsp;&nbsp;
+              <AmountRenderer
+                value={account ? decimalic(outputWeiBalance).toUnits(6) : '0'}
+                suffix={COMMON_SYMBOLS.USDT}
+                isAnimated
+              />
+            </Paragraph>
+          </div>
+
+          {!canMigrate && (
+            <Paragraph size={ParagraphSize.small} className="text-gray-30 mt-3">
+              {t(translations.rusdtMigration.modal.noBalance)}
+            </Paragraph>
+          )}
+
+          <Button
+            style={ButtonStyle.primary}
+            text={t(translations.rusdtMigration.modal.migrate)}
+            onClick={handleMigrate}
+            className="w-full mt-6"
+            disabled={!canMigrate}
+            dataAttribute={`${dataAttributePrefix}-submit-button`}
+          />
+        </DialogBody>
+      </Dialog>
+    </>
+  );
+};

apps/frontend/src/app/5_pages/MarketMakingPage/components/PoolsTable/PoolsTable.constants.tsx

@@ -8,9 +8,10 @@ import { HelperButton } from '@sovryn/ui';
 
 import { AssetPairRenderer } from '../../../../2_molecules/AssetPairRenderer/AssetPairRenderer';
 import { DeprecatedBadge } from '../../../../2_molecules/DeprecatedBadge/DeprecatedBadge';
+import { RusdtMigrationNotice } from '../../../../2_molecules/RusdtMigrationNotice/RusdtMigrationNotice';
 import { getRskDeprecatedAssetTooltips } from '../../../../../constants/tokens';
 import { translations } from '../../../../../locales/i18n';
-import { findAsset } from '../../../../../utils/asset';
+import { COMMON_SYMBOLS, findAsset } from '../../../../../utils/asset';
 import { AmmLiquidityPool } from '../../utils/AmmLiquidityPool';
 import { BlockedPoolConfig } from './PoolsTable.types';
 import { CurrentBalanceRenderer } from './components/CurrentBalanceRenderer/CurrentBalanceRenderer';
@@ -27,6 +28,9 @@ export const COLUMNS_CONFIG = [
       const isDeprecated =
         !!getRskDeprecatedAssetTooltips(pool.assetA) ||
         !!getRskDeprecatedAssetTooltips(pool.assetB);
+      const isRusdtPool = [pool.assetA, pool.assetB].some(
+        asset => asset.toUpperCase() === COMMON_SYMBOLS.RUSDT,
+      );
       return (
         <div
           data-pool-key={pool.key}
@@ -47,7 +51,16 @@ export const COLUMNS_CONFIG = [
               {findAsset(pool.assetA, pool.chainId)?.symbol}/
               {findAsset(pool.assetB, pool.chainId)?.symbol}
             </span>
-            {isDeprecated && <DeprecatedBadge />}
+            <span className="flex flex-row justify-start items-center gap-1">
+              {isDeprecated && <DeprecatedBadge />}
+              {isRusdtPool && (
+                <RusdtMigrationNotice
+                  className="justify-center lg:justify-end text-center lg:text-right"
+                  buttonClassName="prevent-row-click"
+                  dataAttributePrefix="market-making-rusdt-migration"
+                />
+              )}
+            </span>
           </div>
         </div>
       );

apps/frontend/src/app/5_pages/MarketMakingPage/components/PoolsTable/components/PoolsTableAction/PoolsTableAction.tsx

@@ -73,67 +73,69 @@ export const PoolsTableAction: FC<PoolsTableActionProps> = ({ pool }) => {
   }, [refetch, block]);
 
   return (
-    <div className="flex items-center justify-center lg:justify-end w-full">
-      <Tooltip
-        trigger={TooltipTrigger.click}
-        content={<>{t(translations.maintenanceMode.featureDisabled)}</>}
-        disabled={!actionLocked}
-        children={
-          <>
-            {!account ||
-            (poolBalanceA.lte(Decimal.ZERO) &&
-              poolBalanceB.lte(Decimal.ZERO)) ? (
-              poolBlocked.isBlocked ? (
-                <Tooltip
-                  children={
-                    <div>
-                      <Button
-                        style={ButtonStyle.primary}
-                        size={ButtonSize.small}
-                        text={t(translations.common.deposit)}
-                        dataAttribute="pools-table-deposit-button"
-                        className="w-full lg:w-auto prevent-row-click"
-                        disabled
-                      />
-                    </div>
-                  }
-                  content={
-                    poolBlocked.message ??
-                    t(
-                      translations.marketMakingPage.marketMakingOperations
-                        .depositNotAllowed,
-                    )
-                  }
-                  dataAttribute="pools-table-deposit-button-tooltip"
-                  className="w-full lg:w-auto prevent-row-click"
-                />
+    <div className="flex flex-col items-center lg:items-end gap-1.5 w-full">
+      <div className="flex items-center justify-center lg:justify-end w-full">
+        <Tooltip
+          trigger={TooltipTrigger.click}
+          content={<>{t(translations.maintenanceMode.featureDisabled)}</>}
+          disabled={!actionLocked}
+          children={
+            <>
+              {!account ||
+              (poolBalanceA.lte(Decimal.ZERO) &&
+                poolBalanceB.lte(Decimal.ZERO)) ? (
+                poolBlocked.isBlocked ? (
+                  <Tooltip
+                    children={
+                      <div>
+                        <Button
+                          style={ButtonStyle.primary}
+                          size={ButtonSize.small}
+                          text={t(translations.common.deposit)}
+                          dataAttribute="pools-table-deposit-button"
+                          className="w-full lg:w-auto prevent-row-click"
+                          disabled
+                        />
+                      </div>
+                    }
+                    content={
+                      poolBlocked.message ??
+                      t(
+                        translations.marketMakingPage.marketMakingOperations
+                          .depositNotAllowed,
+                      )
+                    }
+                    dataAttribute="pools-table-deposit-button-tooltip"
+                    className="w-full lg:w-auto prevent-row-click"
+                  />
+                ) : (
+                  <Button
+                    style={ButtonStyle.primary}
+                    size={ButtonSize.small}
+                    text={t(translations.common.deposit)}
+                    dataAttribute="pools-table-deposit-button"
+                    className="w-full lg:w-auto prevent-row-click"
+                    disabledStyle={actionLocked}
+                    disabled={!account}
+                    onClick={handleDepositClick}
+                  />
+                )
               ) : (
                 <Button
-                  style={ButtonStyle.primary}
+                  style={ButtonStyle.secondary}
                   size={ButtonSize.small}
-                  text={t(translations.common.deposit)}
-                  dataAttribute="pools-table-deposit-button"
+                  text={t(translations.common.adjust)}
+                  dataAttribute="pools-table-adjust-button"
                   className="w-full lg:w-auto prevent-row-click"
                   disabledStyle={actionLocked}
                   disabled={!account}
-                  onClick={handleDepositClick}
+                  onClick={handleAdjustClick}
                 />
-              )
-            ) : (
-              <Button
-                style={ButtonStyle.secondary}
-                size={ButtonSize.small}
-                text={t(translations.common.adjust)}
-                dataAttribute="pools-table-adjust-button"
-                className="w-full lg:w-auto prevent-row-click"
-                disabledStyle={actionLocked}
-                disabled={!account}
-                onClick={handleAdjustClick}
-              />
-            )}
-          </>
-        }
-      />
+              )}
+            </>
+          }
+        />
+      </div>
 
       <AdjustAndDepositModal
         isOpen={isModalOpen}

apps/frontend/src/app/5_pages/PortfolioPage/components/AssetSection/components/AssetBalanceRow/AssetBalanceRow.tsx

@@ -1,19 +1,23 @@
-import React, { FC, useCallback, useEffect } from 'react';
+import React, { FC, useCallback, useEffect, useMemo } from 'react';
 
 import { Icon, IconNames, Paragraph, prettyTx } from '@sovryn/ui';
 
 import { AmountRenderer } from '../../../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { AssetRenderer } from '../../../../../../2_molecules/AssetRenderer/AssetRenderer';
 import { DeprecatedBadge } from '../../../../../../2_molecules/DeprecatedBadge/DeprecatedBadge';
+import { RusdtMigrationNotice } from '../../../../../../2_molecules/RusdtMigrationNotice/RusdtMigrationNotice';
 import { USD } from '../../../../../../../constants/currencies';
-import { getBobDeprecatedAssetTooltips } from '../../../../../../../constants/tokens';
+import {
+  getBobDeprecatedAssetTooltips,
+  getRskDeprecatedAssetTooltips,
+} from '../../../../../../../constants/tokens';
 import { useAccount } from '../../../../../../../hooks/useAccount';
 import { useAssetBalance } from '../../../../../../../hooks/useAssetBalance';
 import { useCurrentChain } from '../../../../../../../hooks/useChainStore';
 import { useCopyAddress } from '../../../../../../../hooks/useCopyAddress';
 import { useDollarValue } from '../../../../../../../hooks/useDollarValue';
-import { findAsset } from '../../../../../../../utils/asset';
-import { isBobChain } from '../../../../../../../utils/chain';
+import { COMMON_SYMBOLS, findAsset } from '../../../../../../../utils/asset';
+import { isBobChain, isRskChain } from '../../../../../../../utils/chain';
 import { getCurrencyPrecision } from '../../../ProtocolSection/ProtocolSection.utils';
 import styles from './AssetBalanceRow.module.css';
 import { SdexBalance } from './SdexBalance';
@@ -38,8 +42,22 @@ export const AssetBalanceRow: FC<AssetBalanceRowProps> = ({
     updateUsdValue(usdValue);
   }, [usdValue, updateUsdValue]);
 
-  const isDeprecated =
-    isBobChain(chainId) && !!getBobDeprecatedAssetTooltips(token);
+  const isDeprecated = useMemo(() => {
+    if (isBobChain(chainId)) {
+      return !!getBobDeprecatedAssetTooltips(token);
+    }
+
+    if (isRskChain(chainId)) {
+      return !!getRskDeprecatedAssetTooltips(token);
+    }
+
+    return false;
+  }, [chainId, token]);
+
+  const isRskRusdtAsset = useMemo(
+    () => isRskChain(chainId) && token.toUpperCase() === COMMON_SYMBOLS.RUSDT,
+    [chainId, token],
+  );
 
   const copyAddress = useCallback(async () => {
     await navigator.clipboard.writeText(asset.address);
@@ -70,6 +88,12 @@ export const AssetBalanceRow: FC<AssetBalanceRowProps> = ({
               </span>
             </span>
             <DeprecatedBadge />
+            {isRskRusdtAsset && (
+              <RusdtMigrationNotice
+                className="w-full mt-0.5 text-left"
+                dataAttributePrefix="portfolio-rusdt-migration"
+              />
+            )}
           </div>
         )}
       </AssetRenderer>