Skip to content

Commit 63ee809

Browse files
devpavan04devpavan04
authored
chore(tangle-dapp): Restake Improvements & Fixes (#3040)
1 parent d133a3a commit 63ee809

File tree

22 files changed

+324
-150
lines changed

22 files changed

+324
-150
lines changed

‎apps/leaderboard/src/utils/getRpcEndpoint.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {
2-
TANGLE_MAINNET_WS_DWELLIR_RPC_ENDPOINT,
2+
TANGLE_MAINNET_WS_RPC_ENDPOINT,
33
TANGLE_TESTNET_WS_RPC_ENDPOINT,
44
} from '@tangle-network/dapp-config';
55
import { Network } from '../types';
@@ -12,12 +12,12 @@ type GetRpcEndpointResult<TNetwork extends Network> = TNetwork extends 'TESTNET'
1212
: TNetwork extends 'MAINNET'
1313
? {
1414
testnetRpc: undefined;
15-
mainnetRpc: typeof TANGLE_MAINNET_WS_DWELLIR_RPC_ENDPOINT;
15+
mainnetRpc: typeof TANGLE_MAINNET_WS_RPC_ENDPOINT;
1616
}
1717
: TNetwork extends 'ALL'
1818
? {
1919
testnetRpc: typeof TANGLE_TESTNET_WS_RPC_ENDPOINT;
20-
mainnetRpc: typeof TANGLE_MAINNET_WS_DWELLIR_RPC_ENDPOINT;
20+
mainnetRpc: typeof TANGLE_MAINNET_WS_RPC_ENDPOINT;
2121
}
2222
: never;
2323

@@ -33,12 +33,12 @@ export function getRpcEndpoint<TNetwork extends Network>(
3333
case 'MAINNET':
3434
return {
3535
testnetRpc: undefined,
36-
mainnetRpc: TANGLE_MAINNET_WS_DWELLIR_RPC_ENDPOINT,
36+
mainnetRpc: TANGLE_MAINNET_WS_RPC_ENDPOINT,
3737
} as GetRpcEndpointResult<TNetwork>;
3838
case 'ALL':
3939
return {
4040
testnetRpc: TANGLE_TESTNET_WS_RPC_ENDPOINT,
41-
mainnetRpc: TANGLE_MAINNET_WS_DWELLIR_RPC_ENDPOINT,
41+
mainnetRpc: TANGLE_MAINNET_WS_RPC_ENDPOINT,
4242
} as GetRpcEndpointResult<TNetwork>;
4343
default:
4444
throw new Error(`Invalid network: ${network}`);

‎apps/tangle-dapp/src/components/Lists/AssetListItem.tsx‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ type Props = {
2121
decimals: number;
2222
rightBottomText?: string;
2323
leftBottomContentTwo?: string;
24+
label?: string;
25+
labelColor?: 'green' | 'purple' | 'blue' | 'red' | 'yellow';
2426
};
2527

2628
const AssetListItem = ({
@@ -31,6 +33,8 @@ const AssetListItem = ({
3133
decimals,
3234
rightBottomText = 'Balance',
3335
leftBottomContentTwo,
36+
label,
37+
labelColor,
3438
}: Props) => {
3539
const activeChain = useActiveChain();
3640

@@ -82,10 +86,40 @@ const AssetListItem = ({
8286
</Typography>
8387
);
8488

89+
// Create the display name with label
90+
const displayName = (() => {
91+
if (name === undefined) {
92+
return symbol;
93+
}
94+
95+
if (label && labelColor) {
96+
return (
97+
<div className="flex items-center gap-2">
98+
<span>
99+
{name} ({symbol})
100+
</span>
101+
<span
102+
className={`px-2 py-1 rounded text-xs font-medium ${
103+
labelColor === 'green'
104+
? 'bg-green-100 text-mono-0 dark:bg-green-900 dark:text-mono-0'
105+
: labelColor === 'purple'
106+
? 'bg-purple-900 text-mono-0 dark:bg-purple-900 dark:text-mono-0'
107+
: 'bg-blue-900 text-mono-0 dark:bg-blue-900 dark:text-mono-0'
108+
}`}
109+
>
110+
{label}
111+
</span>
112+
</div>
113+
);
114+
}
115+
116+
return `${name} (${symbol})`;
117+
})();
118+
85119
return (
86120
<LogoListItem
87121
logo={<TokenIcon size="xl" name={symbol} />}
88-
leftUpperContent={name !== undefined ? `${name} (${symbol})` : symbol}
122+
leftUpperContent={displayName}
89123
leftBottomContent={leftBottomContent}
90124
leftBottomContentTwo={leftBottomContentTwo}
91125
rightUpperText={`${fmtBalance} ${symbol}`}

‎apps/tangle-dapp/src/components/Lists/OperatorListItem.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { SubstrateAddress } from '@tangle-network/ui-components/types/address';
22
import {
33
Avatar,
4-
EMPTY_VALUE_PLACEHOLDER,
54
KeyValueWithButton,
65
shortenString,
76
} from '@tangle-network/ui-components';
@@ -36,7 +35,7 @@ const OperatorListItem: FC<Props> = ({
3635
valueVariant="body1"
3736
/>
3837
}
39-
rightUpperText={rightUpperText ?? EMPTY_VALUE_PLACEHOLDER}
38+
rightUpperText={rightUpperText}
4039
rightBottomText={rightBottomText}
4140
/>
4241
);

‎apps/tangle-dapp/src/components/Sidebar/sidebarProps.tsx‎

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import {
33
CoinLine,
44
DocumentationIcon,
55
FaucetIcon,
6-
GiftLineIcon,
6+
// GiftLineIcon,
77
GlobalLine,
88
HomeFillIcon,
99
PolkadotJs,
1010
ShuffleLine,
1111
TokenSwapFill,
12-
WaterDropletIcon,
12+
// WaterDropletIcon,
1313
} from '@tangle-network/icons';
1414
import {
1515
MobileSidebarProps,
@@ -23,8 +23,8 @@ import {
2323
TANGLE_FAUCET_URL,
2424
TANGLE_MKT_URL,
2525
} from '@tangle-network/ui-components/constants';
26-
import { PointsBanner } from '../../features/points/components/PointsBanner';
27-
import { PagePath } from '../../types';
26+
// import { PointsBanner } from '../../features/points/components/PointsBanner';
27+
import { NetworkFeature, PagePath } from '../../types';
2828

2929
// TODO: This entire system of handling sidebar props can be improved in a more React-compliant manner. For now, leaving as is since it is not necessary.
3030
// Only show the services dropdown if on development mode.
@@ -43,13 +43,13 @@ const SIDEBAR_STATIC_ITEMS: SideBarItemProps[] = [
4343
Icon: TokenSwapFill,
4444
subItems: [],
4545
},
46-
{
47-
name: 'Liquid Stake',
48-
href: PagePath.LIQUID_STAKING,
49-
isInternal: true,
50-
Icon: WaterDropletIcon,
51-
subItems: [],
52-
},
46+
// {
47+
// name: 'Liquid Stake',
48+
// href: PagePath.LIQUID_STAKING,
49+
// isInternal: true,
50+
// Icon: WaterDropletIcon,
51+
// subItems: [],
52+
// },
5353
{
5454
name: 'Bridge',
5555
href: PagePath.BRIDGE,
@@ -64,13 +64,13 @@ const SIDEBAR_STATIC_ITEMS: SideBarItemProps[] = [
6464
Icon: CoinLine,
6565
subItems: [],
6666
},
67-
{
68-
name: 'Claim Airdrop',
69-
href: PagePath.CLAIM_AIRDROP,
70-
isInternal: true,
71-
Icon: GiftLineIcon,
72-
subItems: [],
73-
},
67+
// {
68+
// name: 'Claim Airdrop',
69+
// href: PagePath.CLAIM_AIRDROP,
70+
// isInternal: true,
71+
// Icon: GiftLineIcon,
72+
// subItems: [],
73+
// },
7474
];
7575

7676
const SIDEBAR_FOOTER: SideBarFooterType = {
@@ -84,10 +84,12 @@ export default function getSidebarProps({
8484
polkadotJsDashboardUrl,
8585
nativeExplorerUrl,
8686
evmExplorerUrl,
87+
networkFeatures,
8788
}: {
8889
polkadotJsDashboardUrl: string;
8990
nativeExplorerUrl?: string;
9091
evmExplorerUrl?: string;
92+
networkFeatures: readonly NetworkFeature[];
9193
}): MobileSidebarProps {
9294
const isProductionEnv = import.meta.env.PROD;
9395

@@ -122,13 +124,17 @@ export default function getSidebarProps({
122124
},
123125
]
124126
: []),
125-
{
126-
name: 'Testnet Faucet',
127-
href: TANGLE_FAUCET_URL,
128-
isInternal: false,
129-
Icon: FaucetIcon,
130-
subItems: [],
131-
},
127+
...(networkFeatures.includes(NetworkFeature.Faucet)
128+
? [
129+
{
130+
name: 'Testnet Faucet',
131+
href: TANGLE_FAUCET_URL,
132+
isInternal: false,
133+
Icon: FaucetIcon,
134+
subItems: [],
135+
},
136+
]
137+
: []),
132138
];
133139

134140
// Filter the sidebar items based on the current environment.
@@ -146,7 +152,7 @@ export default function getSidebarProps({
146152
Logo: TangleLogo,
147153
footer: {
148154
...SIDEBAR_FOOTER,
149-
extraContent: <PointsBanner />,
155+
// extraContent: <PointsBanner />,
150156
},
151157
items,
152158
logoLink: TANGLE_MKT_URL,

‎apps/tangle-dapp/src/components/Sidebar/useSidebarProps.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,25 @@ import useNetworkStore from '@tangle-network/tangle-shared-ui/context/useNetwork
22
import { useMemo } from 'react';
33

44
import getSidebarProps from './sidebarProps';
5+
import useNetworkFeatures from '../../hooks/useNetworkFeatures';
56

67
export default function useSidebarProps() {
78
const { network } = useNetworkStore();
9+
const networkFeatures = useNetworkFeatures();
810

911
const sidebarProps = useMemo(
1012
() =>
1113
getSidebarProps({
1214
polkadotJsDashboardUrl: network.polkadotJsDashboardUrl,
1315
nativeExplorerUrl: network.explorerUrl,
1416
evmExplorerUrl: network.evmExplorerUrl,
17+
networkFeatures,
1518
}),
1619
[
1720
network.evmExplorerUrl,
1821
network.explorerUrl,
1922
network.polkadotJsDashboardUrl,
23+
networkFeatures,
2024
],
2125
);
2226

‎apps/tangle-dapp/src/components/account/Actions.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ import useAirdropEligibility from '../../data/claims/useAirdropEligibility';
1818
import useTotalPayoutRewards from '../../data/nomination/useTotalPayoutRewards';
1919
import useVestingInfo from '../../data/vesting/useVestingInfo';
2020
import useVestTx from '../../data/vesting/useVestTx';
21-
import { PagePath, StaticSearchQueryPath } from '../../types';
21+
import useNetworkFeatures from '../../hooks/useNetworkFeatures';
22+
import { NetworkFeature, PagePath, StaticSearchQueryPath } from '../../types';
2223
import formatTangleBalance from '../../utils/formatTangleBalance';
2324
import ActionItem from './ActionItem';
2425
import WithdrawEvmBalanceAction from './WithdrawEvmBalanceAction';
@@ -31,6 +32,7 @@ const Actions: FC = () => {
3132
const { transferable: transferableBalance } = useBalances();
3233
const [isTransferModalOpen, setIsTransferModalOpen] = useState(false);
3334
const [isCreditsModalOpen, setIsCreditsModalOpen] = useState(false);
35+
const networkFeatures = useNetworkFeatures();
3436

3537
const { isEligible: isAirdropEligible } = useAirdropEligibility();
3638

@@ -72,12 +74,14 @@ const Actions: FC = () => {
7274
Icon={CoinsStackedLineIcon}
7375
/>
7476

75-
<ActionItem
76-
label="Faucet"
77-
tooltip="Request testnet assets from the Tangle Network Faucet"
78-
Icon={FaucetIcon}
79-
externalHref={TANGLE_FAUCET_URL}
80-
/>
77+
{networkFeatures.includes(NetworkFeature.Faucet) && (
78+
<ActionItem
79+
label="Faucet"
80+
tooltip="Request testnet assets from the Tangle Network Faucet"
81+
Icon={FaucetIcon}
82+
externalHref={TANGLE_FAUCET_URL}
83+
/>
84+
)}
8185

8286
<ActionItem
8387
hasNotificationDot={isPayoutsAvailable}

‎apps/tangle-dapp/src/components/account/ProtocolStatisticCard/VaultsHightlightCard.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,12 @@ const VaultsHightlightCard = ({
3636
isLoading,
3737
...props
3838
}: Props) => {
39-
// Get first 5 vaults with the highest tvl, then ID
39+
// Get first 5 vaults with the highest tvl, then ID (excluding ETH vault ID: 2 since the image is not available)
4040
const sortedVaults = useMemo(
4141
() =>
4242
vaults
4343
?.slice()
44+
.filter((vault) => vault.id !== 2) // Filter out ETH vault
4445
.sort((a, b) => {
4546
if (a.tvl === undefined && b.tvl === undefined) {
4647
return a.id - b.id;
@@ -189,15 +190,15 @@ const VaultHighlight = ({
189190
<Typography
190191
variant="body4"
191192
fw="bold"
192-
className="uppercase text-blue-60 dark:text-blue-40"
193+
className="uppercase text-blue-40 dark:text-blue-40"
193194
>
194195
Featured Vault
195196
</Typography>
196197

197198
<Typography
198199
variant="h4"
199200
fw="bold"
200-
className="text-mono-180 dark:text-mono-0"
201+
className="text-mono-0 dark:text-mono-0"
201202
>
202203
{vaultName}
203204
</Typography>
@@ -208,8 +209,8 @@ const VaultHighlight = ({
208209
result={vaultTvl || EMPTY_VALUE_PLACEHOLDER}
209210
isLoading={isVaultTvlLoading}
210211
error={null}
211-
labelClassName="text-mono-180 dark:text-mono-60"
212-
valueClassName="text-mono-200 dark:text-mono-0"
212+
labelClassName="text-mono-0 dark:text-mono-60"
213+
valueClassName="text-mono-0 dark:text-mono-0"
213214
/>
214215

215216
<StatsItem
@@ -221,8 +222,8 @@ const VaultHighlight = ({
221222
}
222223
isLoading={isVaultParticipantsLoading}
223224
error={vaultParticipantsError}
224-
labelClassName="text-mono-180 dark:text-mono-60"
225-
valueClassName="text-mono-200 dark:text-mono-0"
225+
labelClassName="text-mono-0 dark:text-mono-60"
226+
valueClassName="text-mono-0 dark:text-mono-0"
226227
/>
227228
</div>
228229
</div>

‎apps/tangle-dapp/src/constants/restake.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { PresetTypedChainId } from '@tangle-network/dapp-types/ChainId';
22

33
export const SUPPORTED_RESTAKE_DEPOSIT_TYPED_CHAIN_IDS = [
4+
PresetTypedChainId.TangleMainnetNative,
5+
PresetTypedChainId.TangleMainnetEVM,
46
PresetTypedChainId.TangleTestnetNative,
57
PresetTypedChainId.TangleTestnetEVM,
68
PresetTypedChainId.TangleLocalNative,

‎apps/tangle-dapp/src/containers/restaking/WithdrawModal.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,10 +88,13 @@ const WithdrawModal = ({
8888
return null;
8989
}
9090

91+
const displayName =
92+
assetId === '0' ? 'Tangle Network Token' : asset.metadata.name;
93+
9194
return (
9295
<AssetListItem
9396
assetId={assetId}
94-
name={asset.metadata.name}
97+
name={displayName}
9598
symbol={asset.metadata.symbol}
9699
balance={new BN(amount.toString())}
97100
decimals={asset.metadata.decimals}

‎apps/tangle-dapp/src/data/restake/RestakeAbiBase.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ abstract class RestakeApiBase {
3131
assetId: RestakeAssetId,
3232
amount: BN,
3333
blueprintSelection?: BN[],
34+
isNominatedAsset?: boolean,
3435
): Promise<void>;
3536

3637
abstract undelegate(

0 commit comments

Comments
 (0)