From fb89adc183bbfac63c274afbeec756ab96d6fe4b Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Sun, 22 Sep 2024 23:52:35 -0400 Subject: [PATCH] feat(tangle-dapp): Add Tangle local to LS networks --- .../stakeAndUnstake/NetworkSelector.tsx | 27 ++- .../stakeAndUnstake/useLsChangeNetwork.ts | 13 +- .../NetworkSelectionButton.tsx | 8 +- .../constants/liquidStaking/constants.ts | 19 +- .../constants/liquidStaking/types.ts | 23 ++- .../liquidStaking/adapters/tangleLocal.tsx | 26 +++ .../liquidStaking/adapters/tangleMainnet.tsx | 195 +----------------- .../liquidStaking/adapters/tangleTestnet.tsx | 195 +----------------- .../utils/liquidStaking/getLsNetwork.ts | 3 + .../utils/liquidStaking/getLsTangleNetwork.ts | 31 +++ 10 files changed, 119 insertions(+), 421 deletions(-) create mode 100644 apps/tangle-dapp/data/liquidStaking/adapters/tangleLocal.tsx create mode 100644 apps/tangle-dapp/utils/liquidStaking/getLsTangleNetwork.ts diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/NetworkSelector.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/NetworkSelector.tsx index d22b3cbf4..d09eec2fb 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/NetworkSelector.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/NetworkSelector.tsx @@ -7,17 +7,16 @@ import { DropdownMenuItem, Typography, } from '@webb-tools/webb-ui-components'; -import { - TANGLE_MAINNET_NETWORK, - TANGLE_TESTNET_NATIVE_NETWORK, -} from '@webb-tools/webb-ui-components/constants/networks'; +import assert from 'assert'; import { FC } from 'react'; +import { IS_PRODUCTION_ENV } from '../../../constants/env'; import { LS_NETWORKS } from '../../../constants/liquidStaking/constants'; import { LsNetworkId } from '../../../constants/liquidStaking/types'; import { NETWORK_FEATURE_MAP } from '../../../constants/networks'; import { NetworkFeature } from '../../../types'; import getLsNetwork from '../../../utils/liquidStaking/getLsNetwork'; +import getLsTangleNetwork from '../../../utils/liquidStaking/getLsTangleNetwork'; import DropdownChevronIcon from './DropdownChevronIcon'; type NetworkSelectorProps = { @@ -53,19 +52,25 @@ const NetworkSelector: FC = ({ // Filter out networks that don't support liquid staking yet. const supportedLsNetworks = LS_NETWORKS.filter((network) => { - if (network.id === LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER) { + // TODO: Check whether the restaking parachain supports liquid staking instead of hardcoding it. + if (network.id === LsNetworkId.TANGLE_RESTAKING_PARACHAIN) { + return true; + } else if (network.id === LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER) { return true; } + // Exclude the local Tangle network in production. + else if (network.id === LsNetworkId.TANGLE_LOCAL && IS_PRODUCTION_ENV) { + return false; + } // TODO: Obtain the Tangle network from the LS Network's properties instead. - const tangleNetwork = - network.id === LsNetworkId.TANGLE_MAINNET - ? TANGLE_MAINNET_NETWORK - : TANGLE_TESTNET_NATIVE_NETWORK; + const tangleNetwork = getLsTangleNetwork(network.id); - const networkFeatures = NETWORK_FEATURE_MAP[tangleNetwork.id]; + assert(tangleNetwork !== null); - return networkFeatures.includes(NetworkFeature.LsPools); + return NETWORK_FEATURE_MAP[tangleNetwork.id].includes( + NetworkFeature.LsPools, + ); }); return setNetworkId !== undefined ? ( diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsChangeNetwork.ts b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsChangeNetwork.ts index 0869a4036..e40f30c8b 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsChangeNetwork.ts +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/useLsChangeNetwork.ts @@ -1,8 +1,5 @@ import { useWebbUI } from '@webb-tools/webb-ui-components'; -import { - TANGLE_MAINNET_NETWORK, - TANGLE_TESTNET_NATIVE_NETWORK, -} from '@webb-tools/webb-ui-components/constants/networks'; +import assert from 'assert'; import { useCallback } from 'react'; import { LsNetworkId } from '../../../constants/liquidStaking/types'; @@ -11,6 +8,7 @@ import useNetworkStore from '../../../context/useNetworkStore'; import { useLsStore } from '../../../data/liquidStaking/useLsStore'; import { NetworkFeature } from '../../../types'; import getLsNetwork from '../../../utils/liquidStaking/getLsNetwork'; +import getLsTangleNetwork from '../../../utils/liquidStaking/getLsTangleNetwork'; import testRpcEndpointConnection from '../../NetworkSelector/testRpcEndpointConnection'; const useLsChangeNetwork = () => { @@ -35,10 +33,9 @@ const useLsChangeNetwork = () => { return; } - const tangleNetwork = - lsNetwork.id === LsNetworkId.TANGLE_MAINNET - ? TANGLE_MAINNET_NETWORK - : TANGLE_TESTNET_NATIVE_NETWORK; + const tangleNetwork = getLsTangleNetwork(newNetworkId); + + assert(tangleNetwork !== null); const networkFeatures = NETWORK_FEATURE_MAP[tangleNetwork.id]; diff --git a/apps/tangle-dapp/components/NetworkSelector/NetworkSelectionButton.tsx b/apps/tangle-dapp/components/NetworkSelector/NetworkSelectionButton.tsx index 2fc775a9c..ddd5675db 100644 --- a/apps/tangle-dapp/components/NetworkSelector/NetworkSelectionButton.tsx +++ b/apps/tangle-dapp/components/NetworkSelector/NetworkSelectionButton.tsx @@ -16,7 +16,6 @@ import { TooltipTrigger, Typography, } from '@webb-tools/webb-ui-components'; -import { TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK } from '@webb-tools/webb-ui-components/constants/networks'; import { usePathname } from 'next/navigation'; import { type FC, useCallback, useMemo } from 'react'; import { twMerge } from 'tailwind-merge'; @@ -99,11 +98,12 @@ const NetworkSelectionButton: FC = () => { // Network can't be switched from the Tangle Restaking Parachain while // on liquid staking page. else if (isInLiquidStakingPath) { - const liquidStakingNetworkName = isLiquifierProtocolId(selectedProtocolId) + // Special case when the liquifier is selected. + const lsNetworkName = isLiquifierProtocolId(selectedProtocolId) ? IS_PRODUCTION_ENV ? 'Ethereum Mainnet' : 'Sepolia Testnet' - : TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK.name; + : networkName; const chainIconName = isLiquifierProtocolId(selectedProtocolId) ? 'ethereum' @@ -115,7 +115,7 @@ const NetworkSelectionButton: FC = () => { diff --git a/apps/tangle-dapp/constants/liquidStaking/constants.ts b/apps/tangle-dapp/constants/liquidStaking/constants.ts index c59016444..ee460ac6e 100644 --- a/apps/tangle-dapp/constants/liquidStaking/constants.ts +++ b/apps/tangle-dapp/constants/liquidStaking/constants.ts @@ -6,6 +6,7 @@ import MOONBEAM from '../../data/liquidStaking/adapters/moonbeam'; import PHALA from '../../data/liquidStaking/adapters/phala'; import POLKADOT from '../../data/liquidStaking/adapters/polkadot'; import POLYGON from '../../data/liquidStaking/adapters/polygon'; +import TANGLE_LOCAL from '../../data/liquidStaking/adapters/tangleLocal'; import TANGLE_MAINNET from '../../data/liquidStaking/adapters/tangleMainnet'; import TANGLE_TESTNET from '../../data/liquidStaking/adapters/tangleTestnet'; import THE_GRAPH from '../../data/liquidStaking/adapters/theGraph'; @@ -54,6 +55,7 @@ export const LS_PROTOCOLS: LsProtocolDef[] = [ ...Object.values(LS_LIQUIFIER_PROTOCOL_MAP), TANGLE_MAINNET, TANGLE_TESTNET, + TANGLE_LOCAL, ]; export const LS_LIQUIFIER_PROTOCOL_IDS = [ @@ -99,25 +101,34 @@ export const LS_TANGLE_RESTAKING_PARACHAIN: LsNetwork = { protocols: [POLKADOT, PHALA, MOONBEAM, ASTAR, MANTA] as LsProtocolDef[], }; -export const LS_TANGLE_MAINNET: LsNetwork = { +export const LS_TANGLE_MAINNET = { id: LsNetworkId.TANGLE_MAINNET, networkName: 'Tangle Mainnet', chainIconFileName: 'tangle', defaultProtocolId: LsProtocolId.TANGLE_MAINNET, protocols: [TANGLE_MAINNET], -}; +} as const satisfies LsNetwork; -export const LS_TANGLE_TESTNET: LsNetwork = { +export const LS_TANGLE_TESTNET = { id: LsNetworkId.TANGLE_MAINNET, networkName: 'Tangle Testnet', chainIconFileName: 'tangle', defaultProtocolId: LsProtocolId.TANGLE_MAINNET, protocols: [TANGLE_MAINNET], -}; +} as const satisfies LsNetwork; + +export const LS_TANGLE_LOCAL = { + id: LsNetworkId.TANGLE_LOCAL, + networkName: 'Tangle Local Dev', + chainIconFileName: 'tangle', + defaultProtocolId: LsProtocolId.TANGLE_LOCAL, + protocols: [TANGLE_LOCAL], +} as const satisfies LsNetwork; export const LS_NETWORKS: LsNetwork[] = [ LS_TANGLE_MAINNET, LS_TANGLE_TESTNET, + LS_TANGLE_LOCAL, LS_TANGLE_RESTAKING_PARACHAIN, LS_ETHEREUM_MAINNET_LIQUIFIER, ]; diff --git a/apps/tangle-dapp/constants/liquidStaking/types.ts b/apps/tangle-dapp/constants/liquidStaking/types.ts index 86dc850f0..54309f2ae 100644 --- a/apps/tangle-dapp/constants/liquidStaking/types.ts +++ b/apps/tangle-dapp/constants/liquidStaking/types.ts @@ -9,12 +9,13 @@ import { LsNetworkEntityAdapter, ProtocolEntity, } from '../../data/liquidStaking/adapter'; -import { PolkadotValidator } from '../../data/liquidStaking/adapters/polkadot'; import { SubstrateAddress } from '../../types/utils'; import { CrossChainTimeUnit } from '../../utils/CrossChainTime'; import { + TANGLE_LOCAL_DEV_NETWORK, TANGLE_MAINNET_NETWORK, TANGLE_TESTNET_NATIVE_NETWORK, + Network as TangleNetwork, } from '../../../../libs/webb-ui-components/src/constants/networks'; export enum LsProtocolId { @@ -29,6 +30,7 @@ export enum LsProtocolId { POLYGON, TANGLE_MAINNET, TANGLE_TESTNET, + TANGLE_LOCAL, } export type LsLiquifierProtocolId = @@ -75,6 +77,7 @@ type ProtocolDefCommon = { }; export enum LsNetworkId { + TANGLE_LOCAL, TANGLE_TESTNET, TANGLE_MAINNET, TANGLE_RESTAKING_PARACHAIN, @@ -82,17 +85,21 @@ export enum LsNetworkId { } export interface LsTangleNetworkDef extends ProtocolDefCommon { - networkId: LsNetworkId.TANGLE_MAINNET | LsNetworkId.TANGLE_TESTNET; - id: LsProtocolId.TANGLE_MAINNET | LsProtocolId.TANGLE_TESTNET; + networkId: + | LsNetworkId.TANGLE_MAINNET + | LsNetworkId.TANGLE_TESTNET + | LsNetworkId.TANGLE_LOCAL; + id: + | LsProtocolId.TANGLE_MAINNET + | LsProtocolId.TANGLE_TESTNET + | LsProtocolId.TANGLE_LOCAL; token: LsToken.TNT | LsToken.TTNT; rpcEndpoint: string; ss58Prefix: | typeof TANGLE_MAINNET_NETWORK.ss58Prefix - | typeof TANGLE_TESTNET_NATIVE_NETWORK.ss58Prefix; - adapter: LsNetworkEntityAdapter; - tangleNetwork: - | typeof TANGLE_MAINNET_NETWORK - | typeof TANGLE_TESTNET_NATIVE_NETWORK; + | typeof TANGLE_TESTNET_NATIVE_NETWORK.ss58Prefix + | typeof TANGLE_LOCAL_DEV_NETWORK.ss58Prefix; + tangleNetwork: TangleNetwork; } export interface LsParachainChainDef diff --git a/apps/tangle-dapp/data/liquidStaking/adapters/tangleLocal.tsx b/apps/tangle-dapp/data/liquidStaking/adapters/tangleLocal.tsx new file mode 100644 index 000000000..9afc6fc43 --- /dev/null +++ b/apps/tangle-dapp/data/liquidStaking/adapters/tangleLocal.tsx @@ -0,0 +1,26 @@ +import { TANGLE_TOKEN_DECIMALS } from '@webb-tools/dapp-config'; +import { TANGLE_LOCAL_DEV_NETWORK } from '@webb-tools/webb-ui-components/constants/networks'; + +import { + LsNetworkId, + LsProtocolId, + LsTangleNetworkDef, + LsToken, +} from '../../../constants/liquidStaking/types'; +import { CrossChainTimeUnit } from '../../../utils/CrossChainTime'; + +const TANGLE_LOCAL = { + networkId: LsNetworkId.TANGLE_LOCAL, + id: LsProtocolId.TANGLE_LOCAL, + name: 'Tangle Local', + token: LsToken.TTNT, + chainIconFileName: 'tangle', + decimals: TANGLE_TOKEN_DECIMALS, + rpcEndpoint: TANGLE_LOCAL_DEV_NETWORK.wsRpcEndpoint, + timeUnit: CrossChainTimeUnit.POLKADOT_ERA, + unstakingPeriod: 28, + ss58Prefix: TANGLE_LOCAL_DEV_NETWORK.ss58Prefix, + tangleNetwork: TANGLE_LOCAL_DEV_NETWORK, +} as const satisfies LsTangleNetworkDef; + +export default TANGLE_LOCAL; diff --git a/apps/tangle-dapp/data/liquidStaking/adapters/tangleMainnet.tsx b/apps/tangle-dapp/data/liquidStaking/adapters/tangleMainnet.tsx index 23efec195..71ad06ff2 100644 --- a/apps/tangle-dapp/data/liquidStaking/adapters/tangleMainnet.tsx +++ b/apps/tangle-dapp/data/liquidStaking/adapters/tangleMainnet.tsx @@ -1,18 +1,9 @@ -import { BN_ZERO } from '@polkadot/util'; -import { createColumnHelper, SortingFnOption } from '@tanstack/react-table'; -import { - Avatar, - CheckBox, - CopyWithTooltip, - shortenString, - Typography, -} from '@webb-tools/webb-ui-components'; +import { TANGLE_TOKEN_DECIMALS } from '@webb-tools/dapp-config'; import { TANGLE_LOCAL_DEV_NETWORK, TANGLE_MAINNET_NETWORK, } from '@webb-tools/webb-ui-components/constants/networks'; -import { StakingItemExternalLinkButton } from '../../../components/LiquidStaking/StakingItemExternalLinkButton'; import { IS_PRODUCTION_ENV } from '../../../constants/env'; import { LsNetworkId, @@ -20,185 +11,7 @@ import { LsTangleNetworkDef, LsToken, } from '../../../constants/liquidStaking/types'; -import { LiquidStakingItem } from '../../../types/liquidStaking'; -import assertSubstrateAddress from '../../../utils/assertSubstrateAddress'; -import calculateCommission from '../../../utils/calculateCommission'; import { CrossChainTimeUnit } from '../../../utils/CrossChainTime'; -import formatBn from '../../../utils/formatBn'; -import { GetTableColumnsFn } from '../adapter'; -import { - sortCommission, - sortSelected, - sortValueStaked, -} from '../columnSorting'; -import { - fetchChainDecimals, - fetchMappedIdentityNames, - fetchMappedValidatorsCommission, - fetchMappedValidatorsTotalValueStaked, - fetchTokenSymbol, -} from '../fetchHelpers'; -import { PolkadotValidator } from './polkadot'; - -const DECIMALS = 18; - -const fetchValidators = async ( - rpcEndpoint: string, -): Promise => { - const [ - validators, - mappedIdentityNames, - mappedTotalValueStaked, - mappedCommission, - ] = await Promise.all([ - fetchValidators(rpcEndpoint), - fetchMappedIdentityNames(rpcEndpoint), - fetchMappedValidatorsTotalValueStaked(rpcEndpoint), - fetchMappedValidatorsCommission(rpcEndpoint), - fetchChainDecimals(rpcEndpoint), - fetchTokenSymbol(rpcEndpoint), - ]); - - return validators.map((address) => { - const identityName = mappedIdentityNames.get(address.toString()); - const totalValueStaked = mappedTotalValueStaked.get(address.toString()); - const commission = mappedCommission.get(address.toString()); - - return { - id: address.toString(), - address: assertSubstrateAddress(address.toString()), - identity: identityName ?? address.toString(), - totalValueStaked: totalValueStaked ?? BN_ZERO, - apy: 0, - commission: commission ?? BN_ZERO, - itemType: LiquidStakingItem.VALIDATOR, - }; - }); -}; - -const getTableColumns: GetTableColumnsFn = ( - toggleSortSelectionHandlerRef, -) => { - const validatorColumnHelper = createColumnHelper(); - - return [ - validatorColumnHelper.accessor('address', { - header: ({ header }) => { - toggleSortSelectionHandlerRef.current = header.column.toggleSorting; - return ( - - Validator - - ); - }, - cell: (props) => { - const address = props.getValue(); - const identity = props.row.original.identity ?? address; - - return ( -
- - -
- - - - {identity === address ? shortenString(address, 8) : identity} - - - -
-
- ); - }, - // TODO: Avoid casting sorting function. - sortingFn: sortSelected as SortingFnOption, - }), - validatorColumnHelper.accessor('totalValueStaked', { - header: ({ header }) => ( -
- - Total Staked - -
- ), - cell: (props) => ( -
- - {formatBn(props.getValue(), DECIMALS) + ` ${LsToken.DOT}`} - -
- ), - sortingFn: sortValueStaked, - }), - validatorColumnHelper.accessor('commission', { - header: ({ header }) => ( -
- - Commission - -
- ), - cell: (props) => ( -
- - {calculateCommission(props.getValue()).toFixed(2) + '%'} - -
- ), - // TODO: Avoid casting sorting function. - sortingFn: sortCommission as SortingFnOption, - }), - validatorColumnHelper.display({ - id: 'href', - header: () => , - cell: (props) => { - const href = `https://polkadot.subscan.io/account/${props.getValue()}`; - - return ; - }, - }), - ]; -}; const TANGLE_MAINNET = { networkId: LsNetworkId.TANGLE_MAINNET, @@ -206,17 +19,13 @@ const TANGLE_MAINNET = { name: 'Tangle', token: LsToken.TNT, chainIconFileName: 'tangle', - decimals: DECIMALS, + decimals: TANGLE_TOKEN_DECIMALS, rpcEndpoint: IS_PRODUCTION_ENV ? TANGLE_MAINNET_NETWORK.wsRpcEndpoint : TANGLE_LOCAL_DEV_NETWORK.wsRpcEndpoint, timeUnit: CrossChainTimeUnit.POLKADOT_ERA, unstakingPeriod: 28, ss58Prefix: TANGLE_MAINNET_NETWORK.ss58Prefix, - adapter: { - fetchProtocolEntities: fetchValidators, - getTableColumns, - }, tangleNetwork: TANGLE_MAINNET_NETWORK, } as const satisfies LsTangleNetworkDef; diff --git a/apps/tangle-dapp/data/liquidStaking/adapters/tangleTestnet.tsx b/apps/tangle-dapp/data/liquidStaking/adapters/tangleTestnet.tsx index 4b060e94f..a20d054af 100644 --- a/apps/tangle-dapp/data/liquidStaking/adapters/tangleTestnet.tsx +++ b/apps/tangle-dapp/data/liquidStaking/adapters/tangleTestnet.tsx @@ -1,19 +1,10 @@ -import { BN_ZERO } from '@polkadot/util'; -import { createColumnHelper, SortingFnOption } from '@tanstack/react-table'; -import { - Avatar, - CheckBox, - CopyWithTooltip, - shortenString, - Typography, -} from '@webb-tools/webb-ui-components'; +import { TANGLE_TOKEN_DECIMALS } from '@webb-tools/dapp-config'; import { TANGLE_LOCAL_DEV_NETWORK, TANGLE_MAINNET_NETWORK, TANGLE_TESTNET_NATIVE_NETWORK, } from '@webb-tools/webb-ui-components/constants/networks'; -import { StakingItemExternalLinkButton } from '../../../components/LiquidStaking/StakingItemExternalLinkButton'; import { IS_PRODUCTION_ENV } from '../../../constants/env'; import { LsNetworkId, @@ -21,185 +12,7 @@ import { LsTangleNetworkDef, LsToken, } from '../../../constants/liquidStaking/types'; -import { LiquidStakingItem } from '../../../types/liquidStaking'; -import assertSubstrateAddress from '../../../utils/assertSubstrateAddress'; -import calculateCommission from '../../../utils/calculateCommission'; import { CrossChainTimeUnit } from '../../../utils/CrossChainTime'; -import formatBn from '../../../utils/formatBn'; -import { GetTableColumnsFn } from '../adapter'; -import { - sortCommission, - sortSelected, - sortValueStaked, -} from '../columnSorting'; -import { - fetchChainDecimals, - fetchMappedIdentityNames, - fetchMappedValidatorsCommission, - fetchMappedValidatorsTotalValueStaked, - fetchTokenSymbol, -} from '../fetchHelpers'; -import { PolkadotValidator } from './polkadot'; - -const DECIMALS = 18; - -const fetchValidators = async ( - rpcEndpoint: string, -): Promise => { - const [ - validators, - mappedIdentityNames, - mappedTotalValueStaked, - mappedCommission, - ] = await Promise.all([ - fetchValidators(rpcEndpoint), - fetchMappedIdentityNames(rpcEndpoint), - fetchMappedValidatorsTotalValueStaked(rpcEndpoint), - fetchMappedValidatorsCommission(rpcEndpoint), - fetchChainDecimals(rpcEndpoint), - fetchTokenSymbol(rpcEndpoint), - ]); - - return validators.map((address) => { - const identityName = mappedIdentityNames.get(address.toString()); - const totalValueStaked = mappedTotalValueStaked.get(address.toString()); - const commission = mappedCommission.get(address.toString()); - - return { - id: address.toString(), - address: assertSubstrateAddress(address.toString()), - identity: identityName ?? address.toString(), - totalValueStaked: totalValueStaked ?? BN_ZERO, - apy: 0, - commission: commission ?? BN_ZERO, - itemType: LiquidStakingItem.VALIDATOR, - }; - }); -}; - -const getTableColumns: GetTableColumnsFn = ( - toggleSortSelectionHandlerRef, -) => { - const validatorColumnHelper = createColumnHelper(); - - return [ - validatorColumnHelper.accessor('address', { - header: ({ header }) => { - toggleSortSelectionHandlerRef.current = header.column.toggleSorting; - return ( - - Validator - - ); - }, - cell: (props) => { - const address = props.getValue(); - const identity = props.row.original.identity ?? address; - - return ( -
- - -
- - - - {identity === address ? shortenString(address, 8) : identity} - - - -
-
- ); - }, - // TODO: Avoid casting sorting function. - sortingFn: sortSelected as SortingFnOption, - }), - validatorColumnHelper.accessor('totalValueStaked', { - header: ({ header }) => ( -
- - Total Staked - -
- ), - cell: (props) => ( -
- - {formatBn(props.getValue(), DECIMALS) + ` ${LsToken.DOT}`} - -
- ), - sortingFn: sortValueStaked, - }), - validatorColumnHelper.accessor('commission', { - header: ({ header }) => ( -
- - Commission - -
- ), - cell: (props) => ( -
- - {calculateCommission(props.getValue()).toFixed(2) + '%'} - -
- ), - // TODO: Avoid casting sorting function. - sortingFn: sortCommission as SortingFnOption, - }), - validatorColumnHelper.display({ - id: 'href', - header: () => , - cell: (props) => { - const href = `https://polkadot.subscan.io/account/${props.getValue()}`; - - return ; - }, - }), - ]; -}; const TANGLE_TESTNET = { networkId: LsNetworkId.TANGLE_TESTNET, @@ -207,17 +20,13 @@ const TANGLE_TESTNET = { name: 'Tangle', token: LsToken.TNT, chainIconFileName: 'tangle', - decimals: DECIMALS, + decimals: TANGLE_TOKEN_DECIMALS, rpcEndpoint: IS_PRODUCTION_ENV ? TANGLE_MAINNET_NETWORK.wsRpcEndpoint : TANGLE_LOCAL_DEV_NETWORK.wsRpcEndpoint, timeUnit: CrossChainTimeUnit.POLKADOT_ERA, unstakingPeriod: 28, ss58Prefix: TANGLE_MAINNET_NETWORK.ss58Prefix, - adapter: { - fetchProtocolEntities: fetchValidators, - getTableColumns, - }, tangleNetwork: TANGLE_TESTNET_NATIVE_NETWORK, } as const satisfies LsTangleNetworkDef; diff --git a/apps/tangle-dapp/utils/liquidStaking/getLsNetwork.ts b/apps/tangle-dapp/utils/liquidStaking/getLsNetwork.ts index d2ee3d437..9969d0fe3 100644 --- a/apps/tangle-dapp/utils/liquidStaking/getLsNetwork.ts +++ b/apps/tangle-dapp/utils/liquidStaking/getLsNetwork.ts @@ -1,5 +1,6 @@ import { LS_ETHEREUM_MAINNET_LIQUIFIER, + LS_TANGLE_LOCAL, LS_TANGLE_MAINNET, LS_TANGLE_RESTAKING_PARACHAIN, LS_TANGLE_TESTNET, @@ -16,6 +17,8 @@ const getLsNetwork = (networkId: LsNetworkId): LsNetwork => { return LS_TANGLE_MAINNET; case LsNetworkId.TANGLE_TESTNET: return LS_TANGLE_TESTNET; + case LsNetworkId.TANGLE_LOCAL: + return LS_TANGLE_LOCAL; } }; diff --git a/apps/tangle-dapp/utils/liquidStaking/getLsTangleNetwork.ts b/apps/tangle-dapp/utils/liquidStaking/getLsTangleNetwork.ts new file mode 100644 index 000000000..e0926314c --- /dev/null +++ b/apps/tangle-dapp/utils/liquidStaking/getLsTangleNetwork.ts @@ -0,0 +1,31 @@ +import { + Network, + TANGLE_LOCAL_DEV_NETWORK, + TANGLE_MAINNET_NETWORK, + TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK, + TANGLE_RESTAKING_PARACHAIN_TESTNET_NETWORK, + TANGLE_TESTNET_NATIVE_NETWORK, +} from '@webb-tools/webb-ui-components/constants/networks'; + +import { LsNetworkId } from '../../constants/liquidStaking/types'; +import { IS_PRODUCTION_ENV } from '../../constants/env'; + +// TODO: Obtain the Tangle network directly from the adapter's `tangleNetwork` property instead of using this helper method. +const getLsTangleNetwork = (networkId: LsNetworkId): Network | null => { + switch (networkId) { + case LsNetworkId.TANGLE_MAINNET: + return TANGLE_MAINNET_NETWORK; + case LsNetworkId.TANGLE_TESTNET: + return TANGLE_TESTNET_NATIVE_NETWORK; + case LsNetworkId.TANGLE_LOCAL: + return TANGLE_LOCAL_DEV_NETWORK; + case LsNetworkId.TANGLE_RESTAKING_PARACHAIN: + return IS_PRODUCTION_ENV + ? TANGLE_RESTAKING_PARACHAIN_TESTNET_NETWORK + : TANGLE_RESTAKING_PARACHAIN_LOCAL_DEV_NETWORK; + case LsNetworkId.ETHEREUM_MAINNET_LIQUIFIER: + return null; + } +}; + +export default getLsTangleNetwork;