= ({ address, is
{Number(shiftDigits(withdrawal.burn_amount.amount, -6))} {formatDenom(withdrawal.burn_amount.denom)}
|
- {statusCodes.get(withdrawal.status)} |
+
+ {statusCodes.get(withdrawal.status)}
+ |
{withdrawal.amount.map((amt) => `${shiftDigits(amt.amount, -6)} ${formatDenom(amt.denom)}`).join(', ')}
|
- {withdrawal.epoch_number} |
-
+ |
+ {withdrawal.epoch_number}
+ |
+
{withdrawal.status === 2
? 'Pending'
: withdrawal.status === 4
diff --git a/web-ui/components/Defi/defiBox.tsx b/web-ui/components/Defi/defiBox.tsx
index a13f985c1..a36e06b9a 100644
--- a/web-ui/components/Defi/defiBox.tsx
+++ b/web-ui/components/Defi/defiBox.tsx
@@ -17,6 +17,7 @@ import {
Tooltip,
Center,
Spinner,
+ useBreakpointValue,
} from '@chakra-ui/react';
import React, { useState, useEffect } from 'react';
@@ -125,6 +126,8 @@ const DefiTable = () => {
const sortedData = sortData(filteredData, sortColumn, sortOrder);
+ const isTableDataMobile = useBreakpointValue({ base: true, md: false });
+
return (
{isMobile ? (
@@ -178,68 +181,74 @@ const DefiTable = () => {
))}
)}
-
+
- Asset Pair |
- handleSort('apy')}
- style={{ cursor: 'pointer' }}
- >
- APY{' '}
- {sortColumn === 'apy' ? (
- sortOrder === 'asc' ? (
-
+ {!isMobile && | Asset Pair | }
+ {!isMobile && (
+ handleSort('apy')}
+ style={{ cursor: 'pointer' }}
+ >
+ APY{' '}
+ {sortColumn === 'apy' ? (
+ sortOrder === 'asc' ? (
+
+ ) : (
+
+ )
) : (
- )
- ) : (
-
- )}
- |
- handleSort('tvl')}
- >
- TVL{' '}
- {sortColumn === 'tvl' ? (
- sortOrder === 'asc' ? (
-
+ )}
+ |
+ )}
+ {!isMobile && (
+ handleSort('tvl')}
+ >
+ TVL{' '}
+ {sortColumn === 'tvl' ? (
+ sortOrder === 'asc' ? (
+
+ ) : (
+
+ )
) : (
- )
- ) : (
-
- )}
- |
+ )}
+
+ )}
+
Provider
|
+
Action
|
@@ -261,17 +270,24 @@ const DefiTable = () => {
{defi &&
sortedData.map((asset, index) => (
-
-
- {asset.assetPair}
-
- |
-
- {formatApy(asset.apy)}
- |
-
- ${asset.tvl.toLocaleString()}
- |
+ {!isMobile && (
+
+
+ {asset.assetPair}
+
+ |
+ )}
+ {!isMobile && (
+
+ {formatApy(asset.apy)}
+ |
+ )}
+ {!isMobile && (
+
+ ${asset.tvl.toLocaleString()}
+ |
+ )}
+
{isProviderKey(asset.provider.toLowerCase()) && (
@@ -286,6 +302,7 @@ const DefiTable = () => {
)}
|
+
| |