upd: staking page + market page users

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stability-ui",
   "type": "module",
-  "version": "0.11.46-alpha",
+  "version": "0.11.47-alpha",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

src/constants/tokens.ts

@@ -57,6 +57,18 @@ const STABILITY_TOKENS = {
       decimals: 18,
     },
   },
+  9745: {
+    stbl: {
+      address: "0xfdf91362B7E9330F232e500c0236a02B0DE3e492",
+      symbol: "STBL",
+      decimals: 18,
+    },
+    xstbl: {
+      address: "0xF40D0724599282CaF9dfb66feB630e936bC0CFBE",
+      symbl: "xSTBL",
+      decimals: 18,
+    },
+  },
 };
 
 export {

src/modules/Market/ui/UsersTable/index.tsx

@@ -66,7 +66,7 @@ const UsersTable: React.FC<TProps> = ({
 
       case "Liquidation Price":
         return user.liquidationPrice
-          ? formatNumber(user.liquidationPrice, "format")
+          ? formatNumber(user.liquidationPrice, "formatWithLongDecimalPart")
           : "";
 
       case "LTV":

src/modules/RecoveryDashboard/components/Dashboard/index.tsx

@@ -5,13 +5,13 @@ import type { DashboardCardData } from "../../types";
 interface IProps {
   cards: DashboardCardData[];
   averageBurnRate: number | null;
-  totalBurnPercent: number | null;
+  // totalBurnPercent: number | null;
 }
 
 const Dashboard = ({
   cards,
   averageBurnRate,
-  totalBurnPercent,
+  // totalBurnPercent,
 }: IProps): JSX.Element => {
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-8">

src/modules/RecoveryDashboard/index.tsx

@@ -305,7 +305,7 @@ const RecoveryDashboard = (): JSX.Element => {
           <Dashboard
             cards={dashboardData}
             averageBurnRate={averageBurnRate}
-            totalBurnPercent={totalBurnPercent}
+            // totalBurnPercent={totalBurnPercent}
           />
         )}
       </div>

src/modules/Staking/components/ConvertForm.tsx

@@ -10,9 +10,9 @@ import { ActionButton } from "@ui";
 
 import { getTransactionReceipt, cn } from "@utils";
 
-import { sonicClient, ERC20ABI, IXSTBLABI, wagmiConfig } from "@web3";
+import { web3clients, ERC20ABI, IXSTBLABI, wagmiConfig } from "@web3";
 
-import { connected, account, lastTx } from "@store";
+import { connected, account, lastTx, stakeNetwork } from "@store";
 
 import { STABILITY_TOKENS } from "@constants";
 
@@ -22,6 +22,7 @@ const ConvertForm = (): JSX.Element => {
   const $connected = useStore(connected);
   const $account = useStore(account);
   const $lastTx = useStore(lastTx);
+  const $stakeNetwork = useStore(stakeNetwork);
 
   const input = useRef<HTMLInputElement>(null);
 
@@ -33,6 +34,8 @@ const ConvertForm = (): JSX.Element => {
   const [transactionInProgress, setTransactionInProgress] = useState(false);
   const [needConfirm, setNeedConfirm] = useState(false);
 
+  const client = web3clients[$stakeNetwork?.id as keyof typeof web3clients];
+
   const handleInputChange = (type = "") => {
     let numericValue = input?.current?.value.replace(/[^0-9.]/g, "");
 
@@ -63,30 +66,33 @@ const ConvertForm = (): JSX.Element => {
 
   const getData = async () => {
     try {
-      const STBLBalance = await sonicClient.readContract({
-        address: STABILITY_TOKENS[146].stbl.address as TAddress,
+      const STBLBalance = await client.readContract({
+        address: STABILITY_TOKENS[$stakeNetwork?.id].stbl.address as TAddress,
         abi: ERC20ABI,
         functionName: "balanceOf",
         args: [$account as TAddress],
       });
 
-      const STBLAllowance = await sonicClient.readContract({
-        address: STABILITY_TOKENS[146].stbl.address as TAddress,
+      const STBLAllowance = await client.readContract({
+        address: STABILITY_TOKENS[$stakeNetwork?.id].stbl.address as TAddress,
         abi: ERC20ABI,
         functionName: "allowance",
         args: [
           $account as TAddress,
-          STABILITY_TOKENS[146].xstbl.address as TAddress,
+          STABILITY_TOKENS[$stakeNetwork?.id].xstbl.address as TAddress,
         ],
       });
 
       let parsedBalance = formatUnits(
         STBLBalance,
-        STABILITY_TOKENS[146].stbl.decimals
+        STABILITY_TOKENS[$stakeNetwork?.id].stbl.decimals
       );
 
       let parsedAllowance = Number(
-        formatUnits(STBLAllowance, STABILITY_TOKENS[146].xstbl.decimals)
+        formatUnits(
+          STBLAllowance,
+          STABILITY_TOKENS[$stakeNetwork?.id].xstbl.decimals
+        )
       );
 
       if (parsedBalance) {
@@ -113,10 +119,10 @@ const ConvertForm = (): JSX.Element => {
   const approve = async () => {
     setTransactionInProgress(true);
 
-    const STBL = STABILITY_TOKENS[146].stbl.address as TAddress;
-    const xSTBL = STABILITY_TOKENS[146].xstbl.address as TAddress;
+    const STBL = STABILITY_TOKENS[$stakeNetwork?.id].stbl.address as TAddress;
+    const xSTBL = STABILITY_TOKENS[$stakeNetwork?.id].xstbl.address as TAddress;
 
-    const decimals = STABILITY_TOKENS[146].stbl.decimals;
+    const decimals = STABILITY_TOKENS[$stakeNetwork?.id].stbl.decimals;
 
     const amount = Number(input?.current?.value);
 
@@ -138,18 +144,22 @@ const ConvertForm = (): JSX.Element => {
         if (transaction?.status === "success") {
           lastTx.set(transaction?.transactionHash);
 
-          const newAllowance = await sonicClient.readContract({
-            address: STABILITY_TOKENS[146].stbl.address as TAddress,
+          const newAllowance = await client.readContract({
+            address: STABILITY_TOKENS[$stakeNetwork?.id].stbl
+              .address as TAddress,
             abi: ERC20ABI,
             functionName: "allowance",
             args: [
               $account as TAddress,
-              STABILITY_TOKENS[146].xstbl.address as TAddress,
+              STABILITY_TOKENS[$stakeNetwork?.id].xstbl.address as TAddress,
             ],
           });
 
           let parsedAllowance = Number(
-            formatUnits(newAllowance, STABILITY_TOKENS[146].xstbl.decimals)
+            formatUnits(
+              newAllowance,
+              STABILITY_TOKENS[$stakeNetwork?.id].xstbl.decimals
+            )
           );
 
           setAllowance(parsedAllowance);
@@ -160,18 +170,21 @@ const ConvertForm = (): JSX.Element => {
         }
       } catch (error) {
         setNeedConfirm(false);
-        const newAllowance = await sonicClient.readContract({
-          address: STABILITY_TOKENS[146].stbl.address as TAddress,
+        const newAllowance = await client.readContract({
+          address: STABILITY_TOKENS[$stakeNetwork?.id].stbl.address as TAddress,
           abi: ERC20ABI,
           functionName: "allowance",
           args: [
             $account as TAddress,
-            STABILITY_TOKENS[146].xstbl.address as TAddress,
+            STABILITY_TOKENS[$stakeNetwork?.id].xstbl.address as TAddress,
           ],
         });
 
         let parsedAllowance = Number(
-          formatUnits(newAllowance, STABILITY_TOKENS[146].xstbl.decimals)
+          formatUnits(
+            newAllowance,
+            STABILITY_TOKENS[$stakeNetwork?.id].xstbl.decimals
+          )
         );
 
         setAllowance(parsedAllowance);
@@ -187,7 +200,7 @@ const ConvertForm = (): JSX.Element => {
 
   const convert = async () => {
     setTransactionInProgress(true);
-    const decimals = STABILITY_TOKENS[146].stbl.decimals;
+    const decimals = STABILITY_TOKENS[$stakeNetwork?.id].stbl.decimals;
 
     const amount = Number(input?.current?.value);
 
@@ -196,7 +209,7 @@ const ConvertForm = (): JSX.Element => {
     try {
       setNeedConfirm(true);
       const convertSTBL = await writeContract(wagmiConfig, {
-        address: STABILITY_TOKENS[146].xstbl.address as TAddress,
+        address: STABILITY_TOKENS[$stakeNetwork?.id].xstbl.address as TAddress,
         abi: IXSTBLABI,
         functionName: "enter",
         args: [value],
@@ -222,7 +235,7 @@ const ConvertForm = (): JSX.Element => {
     if ($account) {
       getData();
     }
-  }, [$account, $lastTx]);
+  }, [$account, $lastTx, $stakeNetwork]);
 
   return (
     <div className="bg-[#101012] border border-[#23252A] p-6 rounded-lg flex justify-between flex-col md:flex-row">
@@ -267,6 +280,7 @@ const ConvertForm = (): JSX.Element => {
         </label>
         <ActionButton
           type={button}
+          network={$stakeNetwork?.id}
           transactionInProgress={transactionInProgress}
           needConfirm={needConfirm}
           actionFunction={convertHandler}

src/modules/Staking/components/Dashboard/index.tsx

@@ -16,14 +16,16 @@ import { formatNumber, useStakingData } from "@utils";
 
 import { STABILITY_TOKENS } from "@constants";
 
-import { account, assetsPrices, connected, lastTx } from "@store";
+import { account, assetsPrices, connected, lastTx, stakeNetwork } from "@store";
 
 import {
-  sonicClient,
+  web3clients,
   ERC20ABI,
   IXStakingABI,
   IXSTBLABI,
   IRevenueRouterABI,
+  stakingContracts,
+  revenueRouters,
 } from "@web3";
 
 import type { TStakeDashboard, TAddress } from "@types";
@@ -33,6 +35,9 @@ const Dashboard = (): JSX.Element => {
   const $account = useStore(account);
   const $assetsPrices = useStore(assetsPrices);
   const $lastTx = useStore(lastTx);
+  const $stakeNetwork = useStore(stakeNetwork);
+
+  const client = web3clients[$stakeNetwork?.id as keyof typeof web3clients];
 
   const { data: stakingData, isLoading: isStakingDataLoading } =
     useStakingData();
@@ -41,11 +46,9 @@ const Dashboard = (): JSX.Element => {
 
   const [isLoaded, setIsLoaded] = useState(false);
 
-  const STAKING_CONTRACT: TAddress =
-    "0x17a7cf838a7c91de47552a9f65822b547f9a6997";
+  const STAKING_CONTRACT: TAddress = stakingContracts[$stakeNetwork?.id];
 
-  const REVENUE_ROUTER_CONTRACT: TAddress =
-    "0x23b8cc22c4c82545f4b451b11e2f17747a730810";
+  const REVENUE_ROUTER_CONTRACT: TAddress = revenueRouters[$stakeNetwork?.id];
 
   const [dashboard, setDashboard] = useState<TStakeDashboard>({
     totalStaked: 0,
@@ -95,7 +98,7 @@ const Dashboard = (): JSX.Element => {
       let lendingPendingRevenue = BigInt(0);
 
       try {
-        _totalStaked = (await sonicClient.readContract({
+        _totalStaked = (await client.readContract({
           address: STAKING_CONTRACT,
           abi: IXStakingABI,
           functionName: "totalSupply",
@@ -105,8 +108,9 @@ const Dashboard = (): JSX.Element => {
       }
 
       try {
-        pendingRebase = (await sonicClient.readContract({
-          address: STABILITY_TOKENS[146].xstbl.address as TAddress,
+        pendingRebase = (await client.readContract({
+          address: STABILITY_TOKENS[$stakeNetwork?.id].xstbl
+            .address as TAddress,
           abi: IXSTBLABI,
           functionName: "pendingRebase",
         })) as bigint;
@@ -115,7 +119,7 @@ const Dashboard = (): JSX.Element => {
       }
 
       try {
-        pendingRevenue = (await sonicClient.readContract({
+        pendingRevenue = (await client.readContract({
           address: REVENUE_ROUTER_CONTRACT,
           abi: IRevenueRouterABI,
           functionName: "pendingRevenue",
@@ -125,7 +129,7 @@ const Dashboard = (): JSX.Element => {
       }
 
       try {
-        lendingPendingRevenue = (await sonicClient.readContract({
+        lendingPendingRevenue = (await client.readContract({
           address: REVENUE_ROUTER_CONTRACT,
           abi: IRevenueRouterABI,
           functionName: "pendingRevenue",
@@ -147,8 +151,9 @@ const Dashboard = (): JSX.Element => {
 
       const stblPrice =
         Number(
-          $assetsPrices[146][STABILITY_TOKENS[146].stbl.address.toLowerCase()]
-            ?.price
+          $assetsPrices[$stakeNetwork?.id][
+            STABILITY_TOKENS[$stakeNetwork?.id].stbl.address.toLowerCase()
+          ]?.price
         ) || 0;
 
       _dashboardData.timestamp =
@@ -182,23 +187,24 @@ const Dashboard = (): JSX.Element => {
 
       if ($account) {
         try {
-          const XSTBLBalance = await sonicClient.readContract({
-            address: STABILITY_TOKENS[146].xstbl.address as TAddress,
+          const XSTBLBalance = await client.readContract({
+            address: STABILITY_TOKENS[$stakeNetwork?.id].xstbl
+              .address as TAddress,
             abi: ERC20ABI,
             functionName: "balanceOf",
             args: [$account],
           });
 
           _balances.xstbl = formatUnits(
             XSTBLBalance,
-            STABILITY_TOKENS[146].xstbl.decimals
+            STABILITY_TOKENS[$stakeNetwork?.id].xstbl.decimals
           );
         } catch (err) {
           console.error("Error: XSTBL balance", err);
         }
 
         try {
-          const stakedSTBLBalance = await sonicClient.readContract({
+          const stakedSTBLBalance = await client.readContract({
             address: STAKING_CONTRACT,
             abi: IXStakingABI,
             functionName: "balanceOf",
@@ -207,7 +213,7 @@ const Dashboard = (): JSX.Element => {
 
           const parsedStaked = formatUnits(
             stakedSTBLBalance as bigint,
-            STABILITY_TOKENS[146].xstbl.decimals
+            STABILITY_TOKENS[$stakeNetwork?.id].xstbl.decimals
           );
 
           _balances.stakedXSTBL = parsedStaked;
@@ -234,7 +240,7 @@ const Dashboard = (): JSX.Element => {
     if (Object.keys($assetsPrices).length) {
       getData();
     }
-  }, [$account, $lastTx, $assetsPrices]);
+  }, [$account, $lastTx, $assetsPrices, $stakeNetwork]);
 
   return (
     <div className="flex flex-col gap-[28px]">