-
-
-
-
+
-
+
{currentCommission > 0 && (
)}
+
+
+
+
+
-
- {displayJoin && (
-
-
-
- )}
diff --git a/src/library/PoolList/Default.tsx b/src/library/PoolList/index.tsx
similarity index 69%
rename from src/library/PoolList/Default.tsx
rename to src/library/PoolList/index.tsx
index 19d01cc3e6..ebff45c5a4 100644
--- a/src/library/PoolList/Default.tsx
+++ b/src/library/PoolList/index.tsx
@@ -3,13 +3,11 @@
import { faBars, faGripVertical } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { isNotZero } from '@w3ux/utils';
import { motion } from 'framer-motion';
import type { FormEvent } from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { listItemsPerBatch, listItemsPerPage } from 'library/List/defaults';
-import { useApi } from 'contexts/Api';
+import { poolsPerPage } from 'library/List/defaults';
import { useFilters } from 'contexts/Filters';
import { useBondedPools } from 'contexts/Pools/BondedPools';
import { useTheme } from 'contexts/Themes';
@@ -30,130 +28,99 @@ import { usePoolList } from './context';
import type { PoolListProps } from './types';
import type { BondedPool } from 'contexts/Pools/BondedPools/types';
import { useSyncing } from 'hooks/useSyncing';
+import { useApi } from 'contexts/Api';
+import { useEffectIgnoreInitial } from '@w3ux/hooks';
export const PoolList = ({
allowMoreCols,
pagination,
- disableThrottle,
allowSearch,
pools,
- defaultFilters,
allowListFormat = true,
}: PoolListProps) => {
const { t } = useTranslation('library');
- const { mode } = useTheme();
- const { isReady, activeEra } = useApi();
const {
+ network,
networkData: { colors },
} = useNetwork();
- const { syncing } = useSyncing('*');
+ const { mode } = useTheme();
+ const { activeEra } = useApi();
+ const { syncing } = useSyncing();
const { applyFilter } = usePoolFilters();
const { listFormat, setListFormat } = usePoolList();
- const { getFilters, setMultiFilters, getSearchTerm, setSearchTerm } =
- useFilters();
const { poolSearchFilter, poolsNominations } = useBondedPools();
+ const { getFilters, getSearchTerm, setSearchTerm } = useFilters();
const includes = getFilters('include', 'pools');
const excludes = getFilters('exclude', 'pools');
const searchTerm = getSearchTerm('pools');
- // current page
- const [page, setPage] = useState
(1);
+ // Carry out filter of pool list.
+ const filterPoolList = () => {
+ let filteredPools = Object.assign(poolsDefault);
+ filteredPools = applyFilter(includes, excludes, filteredPools);
+ if (searchTerm) {
+ filteredPools = poolSearchFilter(filteredPools, searchTerm);
+ }
+ return filteredPools;
+ };
- // current render iteration
- const [renderIteration, setRenderIterationState] = useState(1);
+ // The current page of pool list.
+ const [page, setPage] = useState(1);
- // default list of pools
+ // Default pool list items before filtering.
const [poolsDefault, setPoolsDefault] = useState(pools || []);
- // manipulated list (ordering, filtering) of pools
- const [listPools, setListPools] = useState(pools || []);
-
- // is this the initial fetch
- const [fetched, setFetched] = useState(false);
-
- // render throttle iteration
- const renderIterationRef = useRef(renderIteration);
- const setRenderIteration = (iter: number) => {
- renderIterationRef.current = iter;
- setRenderIterationState(iter);
- };
+ // Manipulated pool list items after filtering.
+ const [listPools, setListPools] = useState(filterPoolList());
- // pagination
- const totalPages = Math.ceil(listPools.length / listItemsPerPage);
- const pageEnd = page * listItemsPerPage - 1;
- const pageStart = pageEnd - (listItemsPerPage - 1);
+ // Whether this the initial render.
+ const [synced, setSynced] = useState(false);
- // render batch
- const batchEnd = Math.min(
- renderIteration * listItemsPerBatch - 1,
- listItemsPerPage
- );
+ // Handle Pagination.
+ const totalPages = Math.ceil(listPools.length / poolsPerPage);
+ const pageEnd = page * poolsPerPage - 1;
+ const pageStart = pageEnd - (poolsPerPage - 1);
- // get throttled subset or entire list
- const poolsToDisplay = disableThrottle
- ? listPools
- : listPools.slice(pageStart).slice(0, listItemsPerPage);
+ // Get paged subset of list items.
+ const poolsToDisplay = listPools.slice(pageStart).slice(0, poolsPerPage);
- // handle pool list bootstrapping
- const setupPoolList = () => {
+ // Handle resetting of pool list when provided pools change.
+ const resetPoolList = () => {
setPoolsDefault(pools || []);
setListPools(pools || []);
- setFetched(true);
+ setSynced(true);
};
- // handle filter / order update
- const handlePoolsFilterUpdate = (
- filteredPools = Object.assign(poolsDefault)
- ) => {
- filteredPools = applyFilter(includes, excludes, filteredPools);
- if (searchTerm) {
- filteredPools = poolSearchFilter(filteredPools, searchTerm);
- }
+ // Handle filter / order update
+ const handlePoolsFilterUpdate = () => {
+ const filteredPools = filterPoolList();
setListPools(filteredPools);
setPage(1);
- setRenderIteration(1);
};
const handleSearchChange = (e: FormEvent) => {
const newValue = e.currentTarget.value;
- let filteredPools = Object.assign(poolsDefault);
+ let filteredPools: BondedPool[] = Object.assign(poolsDefault);
filteredPools = applyFilter(includes, excludes, filteredPools);
filteredPools = poolSearchFilter(filteredPools, newValue);
// ensure no duplicates
filteredPools = filteredPools.filter(
- (value: BondedPool, index: number, self: BondedPool[]) =>
+ (value, index: number, self) =>
index === self.findIndex((i) => i.id === value.id)
);
setPage(1);
- setRenderIteration(1);
setListPools(filteredPools);
setSearchTerm('pools', newValue);
};
// Refetch list when pool list changes.
useEffect(() => {
- if (pools !== poolsDefault) {
- setFetched(false);
+ if (JSON.stringify(pools) !== JSON.stringify(poolsDefault) && synced) {
+ resetPoolList();
}
- }, [pools]);
-
- // Configure pool list when network is ready to fetch.
- useEffect(() => {
- if (isReady && isNotZero(activeEra.index) && !fetched) {
- setupPoolList();
- }
- }, [isReady, fetched, activeEra.index]);
-
- // Render throttling. Only render a batch of pools at a time.
- useEffect(() => {
- if (!(batchEnd >= pageEnd || disableThrottle)) {
- setTimeout(() => {
- setRenderIteration(renderIterationRef.current + 1);
- }, 500);
- }
- }, [renderIterationRef.current]);
+ }, [JSON.stringify(pools)]);
// List ui changes / validator changes trigger re-render of list.
useEffect(() => {
@@ -168,21 +135,17 @@ export const PoolList = ({
window.scrollTo(0, 0);
}, [includes, excludes]);
- // Set default filters.
- useEffect(() => {
- if (defaultFilters?.includes?.length) {
- setMultiFilters('include', 'pools', defaultFilters?.includes, false);
- }
- if (defaultFilters?.excludes?.length) {
- setMultiFilters('exclude', 'pools', defaultFilters?.excludes, false);
- }
- }, []);
+ // Reset list on network change or active era change.
+ useEffectIgnoreInitial(() => {
+ resetPoolList();
+ }, [network, activeEra.index.toString()]);
return (
{allowSearch && poolsDefault.length > 0 && (
@@ -212,7 +175,6 @@ export const PoolList = ({
excludes: [],
},
]}
- activeIndex={1}
/>
diff --git a/src/library/PoolList/types.ts b/src/library/PoolList/types.ts
index e3e819078d..1621c5e1f3 100644
--- a/src/library/PoolList/types.ts
+++ b/src/library/PoolList/types.ts
@@ -13,12 +13,7 @@ export interface PoolListProps {
allowMoreCols?: boolean;
allowSearch?: boolean;
pagination?: boolean;
- disableThrottle?: boolean;
refetchOnListUpdate?: string;
allowListFormat?: boolean;
pools?: BondedPool[];
- defaultFilters?: {
- includes: string[] | null;
- excludes: string[] | null;
- };
}
diff --git a/src/library/PoolSync/Bar.tsx b/src/library/PoolSync/Bar.tsx
new file mode 100644
index 0000000000..bd9788f948
--- /dev/null
+++ b/src/library/PoolSync/Bar.tsx
@@ -0,0 +1,36 @@
+// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import BigNumber from 'bignumber.js';
+import { usePoolPerformance } from 'contexts/Pools/PoolPerformance';
+import type { PoolRewardPointsKey } from 'contexts/Pools/PoolPerformance/types';
+
+export const PoolSyncBar = ({
+ performanceKey,
+}: {
+ performanceKey: PoolRewardPointsKey;
+}) => {
+ const { getPoolPerformanceTask } = usePoolPerformance();
+
+ // Get the pool performance task to determine if performance data is ready.
+ const poolJoinPerformanceTask = getPoolPerformanceTask(performanceKey);
+
+ // Calculate syncing status.
+ const { startEra, currentEra, endEra } = poolJoinPerformanceTask;
+ const totalEras = startEra.minus(endEra);
+ const erasPassed = startEra.minus(currentEra);
+ const percentPassed = erasPassed.isEqualTo(0)
+ ? new BigNumber(0)
+ : erasPassed.dividedBy(totalEras).multipliedBy(100);
+
+ return (
+
+ );
+};
diff --git a/src/library/PoolSync/Loader.ts b/src/library/PoolSync/Loader.ts
new file mode 100644
index 0000000000..80e7bb6e31
--- /dev/null
+++ b/src/library/PoolSync/Loader.ts
@@ -0,0 +1,60 @@
+// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import styled from 'styled-components';
+
+export const StyledLoader = styled.div`
+ height: 0.8rem;
+ margin-left: 1.6rem;
+ aspect-ratio: 5;
+ --_g: no-repeat
+ radial-gradient(farthest-side, var(--loader-color, white) 94%, #0000);
+ background: var(--_g), var(--_g), var(--_g), var(--_g);
+ background-size: 20% 100%;
+ animation:
+ l40-1 0.75s infinite alternate,
+ l40-2 1.5s infinite alternate;
+
+ @keyframes l40-1 {
+ 0%,
+ 10% {
+ background-position:
+ 0 0,
+ 0 0,
+ 0 0,
+ 0 0;
+ }
+ 33% {
+ background-position:
+ 0 0,
+ calc(100% / 3) 0,
+ calc(100% / 3) 0,
+ calc(100% / 3) 0;
+ }
+ 66% {
+ background-position:
+ 0 0,
+ calc(100% / 3) 0,
+ calc(2 * 100% / 3) 0,
+ calc(2 * 100% / 3) 0;
+ }
+ 90%,
+ 100% {
+ background-position:
+ 0 0,
+ calc(100% / 3) 0,
+ calc(2 * 100% / 3) 0,
+ 100% 0;
+ }
+ }
+ @keyframes l40-2 {
+ 0%,
+ 49.99% {
+ transform: scale(1);
+ }
+ 50%,
+ 100% {
+ transform: scale(-1);
+ }
+ }
+`;
diff --git a/src/library/PoolSync/index.tsx b/src/library/PoolSync/index.tsx
new file mode 100644
index 0000000000..e7fd7c0b23
--- /dev/null
+++ b/src/library/PoolSync/index.tsx
@@ -0,0 +1,37 @@
+// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import BigNumber from 'bignumber.js';
+import { usePoolPerformance } from 'contexts/Pools/PoolPerformance';
+import type { PoolRewardPointsKey } from 'contexts/Pools/PoolPerformance/types';
+
+export const PoolSync = ({
+ label,
+ performanceKey,
+}: {
+ label?: string;
+ performanceKey: PoolRewardPointsKey;
+}) => {
+ const { getPoolPerformanceTask } = usePoolPerformance();
+
+ // Get the pool performance task to determine if performance data is ready.
+ const poolJoinPerformanceTask = getPoolPerformanceTask(performanceKey);
+
+ if (poolJoinPerformanceTask.status !== 'syncing') {
+ return null;
+ }
+
+ // Calculate syncing status.
+ const { startEra, currentEra, endEra } = poolJoinPerformanceTask;
+ const totalEras = startEra.minus(endEra);
+ const erasPassed = startEra.minus(currentEra);
+ const percentPassed = erasPassed.isEqualTo(0)
+ ? new BigNumber(0)
+ : erasPassed.dividedBy(totalEras).multipliedBy(100);
+
+ return (
+
+ {percentPassed.decimalPlaces(0).toFormat()}%{label && ` ${label}`}
+
+ );
+};
diff --git a/src/library/Prompt/Wrappers.ts b/src/library/Prompt/Wrappers.ts
index 3a16c2c50a..ab23592d5a 100644
--- a/src/library/Prompt/Wrappers.ts
+++ b/src/library/Prompt/Wrappers.ts
@@ -89,7 +89,7 @@ export const TitleWrapper = styled.div`
align-items: center;
padding: 0 0.5rem;
- button {
+ > button {
padding: 0;
}
diff --git a/src/library/SideMenu/Main.tsx b/src/library/SideMenu/Main.tsx
index 46d7471cd6..896ec6e485 100644
--- a/src/library/SideMenu/Main.tsx
+++ b/src/library/SideMenu/Main.tsx
@@ -24,8 +24,8 @@ import { useSyncing } from 'hooks/useSyncing';
export const Main = () => {
const { t, i18n } = useTranslation('base');
+ const { syncing } = useSyncing();
const { pathname } = useLocation();
- const { syncing } = useSyncing('*');
const { networkData } = useNetwork();
const { getBondedAccount } = useBonded();
const { accounts } = useImportedAccounts();
@@ -33,8 +33,6 @@ export const Main = () => {
const { activeAccount } = useActiveAccounts();
const { inSetup: inNominatorSetup, addressDifferentToStash } = useStaking();
const {
- onNominatorSetup,
- onPoolSetup,
getPoolSetupPercent,
getNominatorSetupPercent,
}: SetupContextInterface = useSetup();
@@ -75,7 +73,6 @@ export const Main = () => {
// configure Stake action
const staking = !inNominatorSetup();
const warning = !syncing && controllerDifferentToStash;
- const setupPercent = getNominatorSetupPercent(activeAccount);
if (staking) {
pages[i].action = {
@@ -90,19 +87,11 @@ export const Main = () => {
status: 'warning',
};
}
- if (!staking && (onNominatorSetup || setupPercent > 0)) {
- pages[i].action = {
- type: 'text',
- status: 'warning',
- text: `${setupPercent}%`,
- };
- }
}
if (uri === `${import.meta.env.BASE_URL}pools`) {
// configure Pools action
const inPool = membership;
- const setupPercent = getPoolSetupPercent(activeAccount);
if (inPool) {
pages[i].action = {
@@ -111,13 +100,6 @@ export const Main = () => {
text: t('active'),
};
}
- if (!inPool && (setupPercent > 0 || onPoolSetup)) {
- pages[i].action = {
- type: 'text',
- status: 'warning',
- text: `${setupPercent}%`,
- };
- }
}
i++;
}
@@ -137,8 +119,6 @@ export const Main = () => {
getNominatorSetupPercent(activeAccount),
getPoolSetupPercent(activeAccount),
i18n.resolvedLanguage,
- onNominatorSetup,
- onPoolSetup,
]);
// remove pages that network does not support
diff --git a/src/library/SideMenu/Primary/Wrappers.ts b/src/library/SideMenu/Primary/Wrappers.ts
index 083e558b53..7fc18bdb2d 100644
--- a/src/library/SideMenu/Primary/Wrappers.ts
+++ b/src/library/SideMenu/Primary/Wrappers.ts
@@ -27,7 +27,7 @@ export const Wrapper = styled(motion.div)`
border: 1px solid var(--accent-color-primary);
}
&.warning {
- border: 1px solid var(--status-warning-color);
+ border: 1px solid var(--accent-color-secondary);
}
}
@@ -68,8 +68,8 @@ export const Wrapper = styled(motion.div)`
border: 1px solid var(--accent-color-primary);
}
&.warning {
- color: var(--status-warning-color);
- border: 1px solid var(--status-warning-color-transparent);
+ color: var(--accent-color-secondary);
+ border: 1px solid var(--accent-color-secondary);
}
border-radius: 0.5rem;
padding: 0.15rem 0.5rem;
@@ -82,7 +82,7 @@ export const Wrapper = styled(motion.div)`
}
&.warning {
svg {
- color: var(--status-warning-color);
+ color: var(--accent-color-secondary);
}
}
&.minimised {
diff --git a/src/library/Stat/index.tsx b/src/library/Stat/index.tsx
index 4591a12463..3e5bc7efce 100644
--- a/src/library/Stat/index.tsx
+++ b/src/library/Stat/index.tsx
@@ -24,6 +24,7 @@ export const Stat = ({
helpKey,
icon,
copy,
+ dimmed = false,
type = 'string',
buttonType = 'primary',
}: StatProps) => {
@@ -81,7 +82,10 @@ export const Stat = ({
}
return (
-
+
{label}
{helpKey !== undefined ? (
diff --git a/src/library/Stat/types.ts b/src/library/Stat/types.ts
index 4ab545dbbb..2cb0dbd3ea 100644
--- a/src/library/Stat/types.ts
+++ b/src/library/Stat/types.ts
@@ -9,6 +9,7 @@ export interface StatProps {
stat: AnyJson;
type?: string;
buttons?: AnyJson[];
+ dimmed?: boolean;
helpKey: string;
icon?: IconProp;
buttonType?: string;
diff --git a/src/library/StatusLabel/index.tsx b/src/library/StatusLabel/index.tsx
index 7c1280f741..25b31e88f0 100644
--- a/src/library/StatusLabel/index.tsx
+++ b/src/library/StatusLabel/index.tsx
@@ -22,9 +22,9 @@ export const StatusLabel = ({
status = 'sync_or_setup',
}: StatusLabelProps) => {
const { openHelp } = useHelp();
+ const { syncing } = useSyncing();
const { plugins } = usePlugins();
const { inSetup } = useStaking();
- const { syncing } = useSyncing('*');
const { getPoolMembership } = useBalances();
const { activeAccount } = useActiveAccounts();
diff --git a/src/library/SubmitTx/ButtonSubmitLarge.tsx b/src/library/SubmitTx/ButtonSubmitLarge.tsx
new file mode 100644
index 0000000000..2fd645bf97
--- /dev/null
+++ b/src/library/SubmitTx/ButtonSubmitLarge.tsx
@@ -0,0 +1,38 @@
+// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { CallToActionWrapper } from 'library/CallToAction';
+import type { ButtonSubmitLargeProps } from './types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { appendOrEmpty } from '@w3ux/utils';
+
+export const ButtonSubmitLarge = ({
+ disabled,
+ onSubmit,
+ submitText,
+ icon,
+ iconTransform,
+ pulse,
+}: ButtonSubmitLargeProps) => (
+
+
+
+
+
+
+
+
+
-
-
+ <>
+
+
+
+
+
+ {buttons}
+ {displayFor !== 'card' && (
+ onSubmit(customEvent)}
+ disabled={disabled}
+ pulse={!disabled}
+ />
+ )}
+
-
- {buttons}
- onSubmit(customEvent)}
+ {displayFor === 'card' && (
+ onSubmit(customEvent)}
+ submitText={submitText || ''}
+ icon={faArrowAltCircleUp}
pulse={!disabled}
/>
-
-
+ )}
+
);
};
diff --git a/src/library/SubmitTx/ManualSign/Ledger/Submit.tsx b/src/library/SubmitTx/ManualSign/Ledger/Submit.tsx
index 04a9fb1500..4f95c80416 100644
--- a/src/library/SubmitTx/ManualSign/Ledger/Submit.tsx
+++ b/src/library/SubmitTx/ManualSign/Ledger/Submit.tsx
@@ -11,6 +11,7 @@ import { getLedgerApp } from 'contexts/Hardware/Utils';
import { useNetwork } from 'contexts/Network';
import { useTxMeta } from 'contexts/TxMeta';
import { ButtonSubmit } from 'kits/Buttons/ButtonSubmit';
+import { ButtonSubmitLarge } from 'library/SubmitTx/ButtonSubmitLarge';
import type { LedgerSubmitProps } from 'library/SubmitTx/types';
import { useTranslation } from 'react-i18next';
@@ -73,7 +74,7 @@ export const Submit = ({
// Button icon.
const icon = !integrityChecked ? faUsb : faSquarePen;
- return (
+ return displayFor !== 'card' ? (
+ ) : (
+
);
};
diff --git a/src/library/SubmitTx/ManualSign/Ledger/index.tsx b/src/library/SubmitTx/ManualSign/Ledger/index.tsx
index 3011f06e19..1b2701cb0f 100644
--- a/src/library/SubmitTx/ManualSign/Ledger/index.tsx
+++ b/src/library/SubmitTx/ManualSign/Ledger/index.tsx
@@ -19,6 +19,7 @@ import { getLedgerApp } from 'contexts/Hardware/Utils';
import type { SubmitProps } from '../../types';
import { Submit } from './Submit';
import { ButtonHelp } from 'kits/Buttons/ButtonHelp';
+import { appendOrEmpty } from '@w3ux/utils';
export const Ledger = ({
uid,
@@ -133,7 +134,9 @@ export const Ledger = ({
+
{valid ? (
diff --git a/src/library/SubmitTx/ManualSign/Vault/index.tsx b/src/library/SubmitTx/ManualSign/Vault/index.tsx
index 5160640ba2..94a5a1d4be 100644
--- a/src/library/SubmitTx/ManualSign/Vault/index.tsx
+++ b/src/library/SubmitTx/ManualSign/Vault/index.tsx
@@ -11,6 +11,8 @@ import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
import type { SubmitProps } from '../../types';
import { SignPrompt } from './SignPrompt';
import { ButtonSubmit } from 'kits/Buttons/ButtonSubmit';
+import { ButtonSubmitLarge } from 'library/SubmitTx/ButtonSubmitLarge';
+import { appendOrEmpty } from '@w3ux/utils';
export const Vault = ({
onSubmit,
@@ -30,38 +32,51 @@ export const Vault = ({
const disabled =
submitting || !valid || !accountHasSigner(submitAddress) || !txFeesValid;
+ // Format submit button based on whether signature currently exists or submission is ongoing.
+ let buttonText: string;
+ let buttonOnClick: () => void;
+ let buttonDisabled: boolean;
+ let buttonPulse: boolean;
+
+ if (getTxSignature() !== null || submitting) {
+ buttonText = submitText || '';
+ buttonOnClick = onSubmit;
+ buttonDisabled = disabled;
+ buttonPulse = !(!valid || promptStatus !== 0);
+ } else {
+ buttonText = promptStatus === 0 ? t('sign') : t('signing');
+ buttonOnClick = async () => {
+ openPromptWith(, 'small');
+ };
+ buttonDisabled = disabled || promptStatus !== 0;
+ buttonPulse = !disabled || promptStatus === 0;
+ }
+
return (
-
+
{valid ?
{t('submitTransaction')}
:
...
}
{buttons}
- {getTxSignature() !== null || submitting ? (
+ {displayFor !== 'card' ? (
onSubmit()}
- disabled={disabled}
- pulse={!(!valid || promptStatus !== 0)}
+ onClick={() => buttonOnClick()}
+ pulse={buttonPulse}
/>
) : (
- {
- openPromptWith(
- ,
- 'small'
- );
- }}
- disabled={disabled || promptStatus !== 0}
- pulse={!disabled || promptStatus === 0}
+
)}
diff --git a/src/library/SubmitTx/types.ts b/src/library/SubmitTx/types.ts
index c8325981c0..420de34af0 100644
--- a/src/library/SubmitTx/types.ts
+++ b/src/library/SubmitTx/types.ts
@@ -1,6 +1,7 @@
// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
// SPDX-License-Identifier: GPL-3.0-only
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
import type { ReactNode } from 'react';
import type { DisplayFor, MaybeAddress } from 'types';
@@ -34,3 +35,12 @@ export interface LedgerSubmitProps {
disabled: boolean;
submitText?: string;
}
+
+export interface ButtonSubmitLargeProps {
+ disabled: boolean;
+ onSubmit: () => void;
+ submitText: string;
+ icon?: IconProp;
+ iconTransform?: string;
+ pulse: boolean;
+}
diff --git a/src/library/ValidatorList/ValidatorItem/Nomination.tsx b/src/library/ValidatorList/ValidatorItem/Nomination.tsx
index 7ca4be2327..0d0236637e 100644
--- a/src/library/ValidatorList/ValidatorItem/Nomination.tsx
+++ b/src/library/ValidatorList/ValidatorItem/Nomination.tsx
@@ -43,13 +43,15 @@ export const Nomination = ({
{toggleFavorites && }
-
+ {displayFor !== 'canvas' && (
+
+ )}
diff --git a/src/library/ValidatorList/ValidatorItem/Utils.tsx b/src/library/ValidatorList/ValidatorItem/Utils.tsx
index 1ba2a553a5..47239d7663 100644
--- a/src/library/ValidatorList/ValidatorItem/Utils.tsx
+++ b/src/library/ValidatorList/ValidatorItem/Utils.tsx
@@ -72,7 +72,7 @@ export const normaliseEraPoints = (
return Object.fromEntries(
Object.entries(eraPoints).map(([era, points]) => [
era,
- points.dividedBy(percentile).multipliedBy(0.01).toNumber(),
+ Math.min(points.dividedBy(percentile).multipliedBy(0.01).toNumber(), 1),
])
);
};
diff --git a/src/library/ValidatorList/index.tsx b/src/library/ValidatorList/index.tsx
index 9c967dca10..298c06b656 100644
--- a/src/library/ValidatorList/index.tsx
+++ b/src/library/ValidatorList/index.tsx
@@ -35,7 +35,7 @@ import { FilterHeaders } from './Filters/FilterHeaders';
import { FilterBadges } from './Filters/FilterBadges';
import type { NominationStatus } from './ValidatorItem/types';
import { useSyncing } from 'hooks/useSyncing';
-import { listItemsPerBatch, listItemsPerPage } from 'library/List/defaults';
+import { validatorsPerPage } from 'library/List/defaults';
export const ValidatorListInner = ({
// Default list values.
@@ -57,9 +57,8 @@ export const ValidatorListInner = ({
allowListFormat = true,
defaultOrder = undefined,
defaultFilters = undefined,
- // Throttling and re-fetching.
+ // Re-fetching.
alwaysRefetchValidators = false,
- disableThrottle = false,
}: ValidatorListProps) => {
const { t } = useTranslation('library');
const {
@@ -78,7 +77,7 @@ export const ValidatorListInner = ({
} = useFilters();
const { mode } = useTheme();
const listProvider = useList();
- const { syncing } = useSyncing('*');
+ const { syncing } = useSyncing();
const { isReady, activeEra } = useApi();
const { activeAccount } = useActiveAccounts();
const { setModalResize } = useOverlay().modal;
@@ -163,26 +162,10 @@ export const ValidatorListInner = ({
// Store whether the search bar is being used.
const [isSearching, setIsSearching] = useState
(false);
- // Current render iteration.
- const [renderIteration, setRenderIterationState] = useState(1);
-
- // Render throttle iteration.
- const renderIterationRef = useRef(renderIteration);
- const setRenderIteration = (iter: number) => {
- renderIterationRef.current = iter;
- setRenderIterationState(iter);
- };
-
// Pagination.
- const totalPages = Math.ceil(validators.length / listItemsPerPage);
- const pageEnd = page * listItemsPerPage - 1;
- const pageStart = pageEnd - (listItemsPerPage - 1);
-
- // Render batch.
- const batchEnd = Math.min(
- renderIteration * listItemsPerBatch - 1,
- listItemsPerPage
- );
+ const totalPages = Math.ceil(validators.length / validatorsPerPage);
+ const pageEnd = page * validatorsPerPage - 1;
+ const pageStart = pageEnd - (validatorsPerPage - 1);
// handle filter / order update
const handleValidatorsFilterUpdate = (
@@ -198,14 +181,13 @@ export const ValidatorListInner = ({
}
setValidators(filteredValidators);
setPage(1);
- setRenderIteration(1);
}
};
// get throttled subset or entire list
- const listValidators = disableThrottle
- ? validators
- : validators.slice(pageStart).slice(0, listItemsPerPage);
+ const listValidators = validators
+ .slice(pageStart)
+ .slice(0, validatorsPerPage);
// if in modal, handle resize
const maybeHandleModalResize = () => {
@@ -233,7 +215,6 @@ export const ValidatorListInner = ({
setValidators(filteredValidators);
setPage(1);
setIsSearching(e.currentTarget.value !== '');
- setRenderIteration(1);
setSearchTerm('validators', newValue);
};
@@ -300,15 +281,6 @@ export const ValidatorListInner = ({
}
}, [isReady, activeEra.index, syncing, fetched]);
- // Control render throttle.
- useEffect(() => {
- if (!(batchEnd >= pageEnd || disableThrottle)) {
- setTimeout(() => {
- setRenderIteration(renderIterationRef.current + 1);
- }, 50);
- }
- }, [renderIterationRef.current]);
-
// Trigger `onSelected` when selection changes.
useEffect(() => {
if (onSelected) {
@@ -326,13 +298,14 @@ export const ValidatorListInner = ({
// Handle modal resize on list format change.
useEffect(() => {
maybeHandleModalResize();
- }, [listFormat, renderIteration, validators, page]);
+ }, [listFormat, validators, page]);
return (
{allowSearch && (
diff --git a/src/library/ValidatorList/types.ts b/src/library/ValidatorList/types.ts
index f18d552e7f..ddd4ad01c3 100644
--- a/src/library/ValidatorList/types.ts
+++ b/src/library/ValidatorList/types.ts
@@ -31,7 +31,6 @@ export interface ValidatorListProps {
alwaysRefetchValidators?: boolean;
defaultFilters?: AnyJson;
defaultOrder?: string;
- disableThrottle?: boolean;
selectActive?: boolean;
selectToggleable?: boolean;
refetchOnListUpdate?: boolean;
diff --git a/src/library/WithdrawPrompt/index.tsx b/src/library/WithdrawPrompt/index.tsx
index 3696f05e1c..ad1021a051 100644
--- a/src/library/WithdrawPrompt/index.tsx
+++ b/src/library/WithdrawPrompt/index.tsx
@@ -18,17 +18,21 @@ import { useErasToTimeLeft } from 'hooks/useErasToTimeLeft';
import { useApi } from 'contexts/Api';
import { useTranslation } from 'react-i18next';
import type { BondFor } from 'types';
+import { useActivePool } from 'contexts/Pools/ActivePool';
export const WithdrawPrompt = ({ bondFor }: { bondFor: BondFor }) => {
const { t } = useTranslation('modals');
const { mode } = useTheme();
const { consts } = useApi();
+ const { activePool } = useActivePool();
const { openModal } = useOverlay().modal;
const { colors } = useNetwork().networkData;
+
const { syncing } = useSyncing(['balances']);
const { activeAccount } = useActiveAccounts();
const { erasToSeconds } = useErasToTimeLeft();
const { getTransferOptions } = useTransferOptions();
+ const { state } = activePool?.bondedPool || {};
const { bondDuration } = consts;
const allTransferOptions = getTransferOptions(activeAccount);
@@ -49,6 +53,9 @@ export const WithdrawPrompt = ({ bondFor }: { bondFor: BondFor }) => {
const displayPrompt = totalUnlockChunks > 0;
return (
+ /* NOTE: ClosurePrompts is a component that displays a prompt to the user when a pool is being
+ destroyed. */
+ state !== 'Destroying' &&
displayPrompt && (
diff --git a/src/locale/cn/library.json b/src/locale/cn/library.json
index 09b535ee24..77449b5fcc 100644
--- a/src/locale/cn/library.json
+++ b/src/locale/cn/library.json
@@ -9,10 +9,12 @@
"activePools": "活跃提名池",
"activeValidator": "活跃验证人",
"activeValidators": "活跃验证人",
+ "activelyNominating": "活跃提名中",
"add": "添加",
"addFromFavorites": "从收藏夹添加",
"address": "地址",
"addressCopiedToClipboard": "复制到剪贴板的地址",
+ "addresses": "地址",
"all": "全部",
"allowAll": "允许所有",
"allowAnyoneCompound": "允许任何人代表您复利收益",
@@ -21,22 +23,28 @@
"allowCompound": "允许复利",
"allowWithdraw": "允许取出收益",
"alreadyImported": "地址已导入",
+ "analyzingPoolPerformance": "分析提名池性能",
"asAPoolMember": "作为提名池成员",
"asThePoolDepositor": "作为提名池存款人",
"atLeast": "质押金最低为",
+ "autoSelected": "己自动选定",
"available": "可用",
"backToMethods": "返回方案选择",
"backToScan": "回到扫描",
+ "blocked": "己关闭",
"blockedNominations": "己冻结提名",
"blockingNominations": "冻结提名中",
"bond": "质押",
"bondAmountDecimals": "质押金额最多只能有 {{units}}个小数位",
"bondDecimalsError": "质押金额能最多有 {{units}} 位点数",
"bonded": "己质押",
+ "browseValidators": "浏览验证人",
"cancel": "取消",
"cancelled": "已取消",
+ "chooseAnotherPool": "选择另一个池",
"chooseValidators": "最多能选择 {{maxNominations}} 个验证人。",
"chooseValidators2": "自动生成提名或手动加入提名",
+ "claimSetting": "申领设置",
"clear": "清除",
"clearSelection": "清除选择",
"clickToReload": "重新加载",
@@ -65,6 +73,7 @@
"displayingValidators": "正在显示 {{count}} 个验证人",
"done": "完成",
"enablePermissionlessClaiming": "启用己许可申领",
+ "era": "Era",
"eraPoints": "Era 点数",
"errorUnknown": "抱歉，页面出现点小问题哦",
"errorWithTransaction": "交易出错",
@@ -122,6 +131,7 @@
"nominate": "提名",
"nominateActive": "激活",
"nominateInactive": "未激活",
+ "nominations": "提名",
"nominationsReverted": "已恢复原来提名",
"nominator": "提名人",
"notEnough": "不足",
@@ -143,6 +153,8 @@
"payoutAccount": "收益到账账户",
"payoutAddress": "收益到账地址",
"pending": "待定中",
+ "permissioned": "已获许可",
+ "permissionedSubtitle": "仅本人可申领奖励",
"permissionlessClaimingTurnedOff": "己许可申领己关闭",
"points": "点数",
"pool": "提名池",
@@ -155,6 +167,8 @@
"proxy": "代理账户",
"randomValidator": "随机验证人",
"reGenerate": "重新生成",
+ "readyToJoinPool": "可加入提名池",
+ "recentPerformance": "最近表现",
"remove": "删除",
"removeSelected": "移除选定项",
"reset": "重设",
@@ -171,6 +185,7 @@
"signing": "签署中",
"submitTransaction": "准备提交交易",
"syncing": "正在同步",
+ "syncingPoolData": "查找提名池中",
"syncingPoolList": "同步提名池列表",
"tooSmall": "质押金额太少",
"top": "首",
diff --git a/src/locale/cn/modals.json b/src/locale/cn/modals.json
index 7827a08bdb..e817ffd244 100644
--- a/src/locale/cn/modals.json
+++ b/src/locale/cn/modals.json
@@ -71,6 +71,7 @@
"developerTools": "开发者工具",
"differentNetworkAddress": "不同的网络地址",
"disconnect": "断开",
+ "disconnectFromExtension": "请重新确认断开与此扩展的连接，这将重新加载该应用",
"done": "完成",
"ensureLedgerIsConnected": "提示:请确保您的Ledger设备已连接",
"exitYourStakingPosition": "退出抵押",
diff --git a/src/locale/cn/pages.json b/src/locale/cn/pages.json
index cca2e74eba..09dae46e41 100644
--- a/src/locale/cn/pages.json
+++ b/src/locale/cn/pages.json
@@ -140,7 +140,6 @@
"cancel": "取消",
"closePool": "可提取己解锁金额并关闭池",
"compound": "复利",
- "create": "创建",
"createAPool": "创建提名池",
"createPool": "创建提名池",
"depositor": "存款人",
@@ -154,7 +153,8 @@
"generateNominations": "生成提名",
"inPool": "提名池中",
"inactivePoolNotNominating": "非活跃：提名池未提名任何验证人",
- "join": "加入",
+ "joinPool": "加入提名池",
+ "joinPoolHeading": " {{totalMembers}} 个提名池成员在{{network}}上抵押共{{totalPoolPoints}} 个{{unit}} ",
"leave": "离开",
"leavingPool": "离开提名池中",
"leftThePool": "所有成员已离开",
diff --git a/src/locale/en/library.json b/src/locale/en/library.json
index 1ceb67213b..7901a8b96e 100644
--- a/src/locale/en/library.json
+++ b/src/locale/en/library.json
@@ -9,34 +9,42 @@
"activePools": "Active Pools",
"activeValidator": "Active Validator",
"activeValidators": "Active Validators",
+ "activelyNominating": "Actively Nominating",
"add": "Add",
"addFromFavorites": "Add From Favorites",
"address": "Address",
"addressCopiedToClipboard": "Address Copied to Clipboard",
+ "addresses": "Addresses",
"all": "All",
"allowAll": "Allow All",
- "allowAnyoneCompound": "Allow anyone to compound rewards on your behalf.",
+ "allowAnyoneCompound": "Allow anyone to compound your rewards.",
"allowAnyoneCompoundWithdraw": "Allow anyone to compound or withdraw rewards on your behalf.",
- "allowAnyoneWithdraw": "Allow anyone to withdraw rewards on your behalf.",
+ "allowAnyoneWithdraw": "Allow anyone to withdraw your rewards to your account.",
"allowCompound": "Allow Compound",
"allowWithdraw": "Allow Withdraw",
"alreadyImported": "Address Already Imported",
+ "analyzingPoolPerformance": "Analyzing pool performance",
"asAPoolMember": "as a pool member.",
"asThePoolDepositor": "as the pool depositor.",
"atLeast": "Bond amount must be at least",
+ "autoSelected": "Auto Selected",
"available": "Available",
"backToMethods": "Back to Methods",
"backToScan": "Back to Scan",
+ "blocked": "Blocked",
"blockedNominations": "Blocked Nominations",
"blockingNominations": "Blocking Nominations",
"bond": "Bond",
"bondAmountDecimals": "Bond amount can only have at most {{units}} decimals.",
"bondDecimalsError": "Bond amount can have at most {{units}} decimals.",
"bonded": "Bonded",
+ "browseValidators": "Browse Validators",
"cancel": "Cancel",
"cancelled": "Cancelled",
+ "chooseAnotherPool": "Choose Another Pool",
"chooseValidators": "Choose up to {{maxNominations}} validators to nominate.",
"chooseValidators2": "Generate your nominations automatically or manually insert them.",
+ "claimSetting": "Claim Setting",
"clear": "Clear",
"clearSelection": "clear selection",
"clickToReload": "Click to reload",
@@ -66,6 +74,7 @@
"displayingValidators_other": "Displaying {{count}} Validators",
"done": "Done",
"enablePermissionlessClaiming": "Enable Permissionless Claiming",
+ "era": "Era",
"eraPoints": "Era Points",
"errorUnknown": "Oops, Something Went Wrong",
"errorWithTransaction": "Error with transaction",
@@ -125,6 +134,8 @@
"nominateActive": "Active",
"nominateInactive": "Inactive",
"nominationsReverted": "Nominations Reverted",
+ "nominations_one": "Nomination",
+ "nominations_other": "Nominations",
"nominator": "Nominator",
"notEnough": "Not Enough",
"notEnoughAfter": "Not enough {{unit}} to bond after transaction fees.",
@@ -145,6 +156,8 @@
"payoutAccount": "Payout Account",
"payoutAddress": "Payout Adddress",
"pending": "Pending",
+ "permissioned": "Permissioned",
+ "permissionedSubtitle": "Only you can claim rewards.",
"permissionlessClaimingTurnedOff": "Permissionless claiming is turned off.",
"points": "Points",
"pool": "Pool",
@@ -157,6 +170,8 @@
"proxy": "Proxy",
"randomValidator": "Random Validator",
"reGenerate": "Re-Generate",
+ "readyToJoinPool": "Ready to Join Pool",
+ "recentPerformance": "Recent Performance",
"remove": "Remove",
"removeSelected": "Remove Selected",
"reset": "Reset",
@@ -173,6 +188,7 @@
"signing": "Signing",
"submitTransaction": "Ready to submit transaction.",
"syncing": "Syncing",
+ "syncingPoolData": "Finding Pools to Join",
"syncingPoolList": "Syncing Pool list",
"tooSmall": "Bond amount is too small.",
"top": "Top",
diff --git a/src/locale/en/modals.json b/src/locale/en/modals.json
index 791d225ce8..2c2b989839 100644
--- a/src/locale/en/modals.json
+++ b/src/locale/en/modals.json
@@ -74,6 +74,7 @@
"developerTools": "Developer Tools",
"differentNetworkAddress": "Different Network Address",
"disconnect": "Disconnect",
+ "disconnectFromExtension": "Are you sure you want to disconnect from this extension? This will reload the dashboard.",
"done": "Done",
"ensureLedgerIsConnected": "Tip: Ensure your Ledger device is connected before continuing.",
"exitYourStakingPosition": "Exit your staking position.",
diff --git a/src/locale/en/pages.json b/src/locale/en/pages.json
index 9c06757d17..211f72d6ca 100644
--- a/src/locale/en/pages.json
+++ b/src/locale/en/pages.json
@@ -142,7 +142,6 @@
"cancel": "Cancel",
"closePool": "You can now withdraw and close the pool.",
"compound": "Compound",
- "create": "Create",
"createAPool": "Create a Pool",
"createPool": "Create Pool",
"depositor": "Depositor",
@@ -156,7 +155,8 @@
"generateNominations": "Generate Nominations",
"inPool": "In Pool",
"inactivePoolNotNominating": "Inactive: Pool Not Nominating",
- "join": "Join",
+ "joinPool": "Join Pool",
+ "joinPoolHeading": "Join {{totalMembers}} pool members staking a total of {{totalPoolPoints}} {{unit}} on {{network}}.",
"leave": "Leave",
"leavingPool": "Leaving Pool",
"leftThePool": "All members have now left the pool",
diff --git a/src/modals/AccountPoolRoles/index.tsx b/src/modals/AccountPoolRoles/index.tsx
index a9a65f77f1..a1f36b1cb8 100644
--- a/src/modals/AccountPoolRoles/index.tsx
+++ b/src/modals/AccountPoolRoles/index.tsx
@@ -43,7 +43,7 @@ export const AccountPoolRoles = () => {
)}
{t('activeRoles', {
- count: activePools?.length || 0,
+ count: Object.keys(activePools)?.length || 0,
})}
diff --git a/src/modals/Connect/Extension.tsx b/src/modals/Connect/Extension.tsx
index 5dace6bada..c9cab29022 100644
--- a/src/modals/Connect/Extension.tsx
+++ b/src/modals/Connect/Extension.tsx
@@ -1,7 +1,11 @@
// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
// SPDX-License-Identifier: GPL-3.0-only
-import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
+import {
+ faExternalLinkAlt,
+ faMinus,
+ faPlus,
+} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
@@ -11,6 +15,7 @@ import type { ExtensionProps } from './types';
import { NotificationsController } from 'controllers/NotificationsController';
import { ModalConnectItem } from 'kits/Overlay/structure/ModalConnectItem';
import { useExtensionAccounts, useExtensions } from '@w3ux/react-connect-kit';
+import { localStorageOrDefault } from '@w3ux/utils';
export const Extension = ({ meta, size, flag }: ExtensionProps) => {
const { t } = useTranslation('modals');
@@ -24,18 +29,34 @@ export const Extension = ({ meta, size, flag }: ExtensionProps) => {
// Force re-render on click.
const [increment, setIncrement] = useState
(0);
- // click to connect to extension
+ const connected = extensionsStatus[id] === 'connected';
+
+ // Click to connect to extension.
const handleClick = async () => {
- if (canConnect) {
- const connected = await connectExtensionAccounts(id);
- // force re-render to display error messages
- setIncrement(increment + 1);
+ if (!connected) {
+ if (canConnect) {
+ const success = await connectExtensionAccounts(id);
+ // force re-render to display error messages
+ setIncrement(increment + 1);
+
+ if (success) {
+ NotificationsController.emit({
+ title: t('extensionConnected'),
+ subtitle: `${t('titleExtensionConnected', { title })}`,
+ });
+ }
+ }
+ } else {
+ if (confirm(t('disconnectFromExtension'))) {
+ const updatedAtiveExtensions = (
+ localStorageOrDefault('active_extensions', [], true) as string[]
+ ).filter((ext: string) => ext !== id);
- if (connected) {
- NotificationsController.emit({
- title: t('extensionConnected'),
- subtitle: `${t('titleExtensionConnected', { title })}`,
- });
+ localStorage.setItem(
+ 'active_extensions',
+ JSON.stringify(updatedAtiveExtensions)
+ );
+ location.reload();
}
}
};
@@ -47,15 +68,22 @@ export const Extension = ({ meta, size, flag }: ExtensionProps) => {
: id;
const Icon = ExtensionIcons[iconId];
- // determine message to be displayed based on extension status.
+ // Determine message to be displayed based on extension status.
let statusJsx;
switch (extensionsStatus[id]) {
case 'connected':
- statusJsx = {t('connected')}
;
+ statusJsx = (
+
+
+ {t('disconnect')}
+
+ );
break;
+
case 'not_authenticated':
statusJsx = {t('notAuthenticated')}
;
break;
+
default:
statusJsx = (
@@ -67,8 +95,7 @@ export const Extension = ({ meta, size, flag }: ExtensionProps) => {
const websiteText = typeof website === 'string' ? website : website.text;
const websiteUrl = typeof website === 'string' ? website : website.url;
-
- const disabled = extensionsStatus[id] === 'connected' || !isInstalled;
+ const disabled = !isInstalled;
return (
@@ -94,6 +121,7 @@ export const Extension = ({ meta, size, flag }: ExtensionProps) => {
{title}
+ {connected &&
{t('connected')}
}
diff --git a/src/modals/Connect/Wrappers.ts b/src/modals/Connect/Wrappers.ts
index 85df9608d4..25a1e8c3d7 100644
--- a/src/modals/Connect/Wrappers.ts
+++ b/src/modals/Connect/Wrappers.ts
@@ -26,19 +26,43 @@ export const ExtensionInner = styled.div`
h3 {
font-family: InterSemiBold, sans-serif;
- margin: 1rem 0 0 0;
+ margin: 0;
+
> svg {
margin-right: 0.5rem;
}
}
+
p {
color: var(--text-color-secondary);
padding: 0;
margin: 0;
- .plus {
+
+ &.success {
+ color: var(--status-success-color);
+ }
+
+ &.danger {
+ color: var(--status-danger-color);
+ }
+
+ &.active {
+ color: var(--accent-color-primary);
+ }
+
+ &.inline {
+ color: var(--status-success-color);
+ border: 0.75px solid var(--status-success-color);
+ border-radius: 0.4rem;
+ margin-left: 0.75rem;
+ padding: 0.1rem 0.4rem;
+ }
+
+ > .plus {
margin-right: 0.4rem;
}
}
+
.body {
width: 100%;
padding: 1.35rem 0.85rem 0.75rem 0.85rem;
@@ -60,24 +84,27 @@ export const ExtensionInner = styled.div`
.row {
width: 100%;
display: flex;
+ align-items: center;
}
.foot {
padding: 0.25rem 1rem 1rem 1rem;
}
+
.status {
position: absolute;
top: 0.9rem;
right: 0.9rem;
- .success {
- color: var(--status-success-color);
- }
- .active {
- color: var(--accent-color-primary);
+ display: flex;
+
+ > p {
+ margin-left: 1rem;
}
}
+
.icon {
color: var(--text-color-primary);
width: 100%;
+ margin-bottom: 0.75rem;
svg {
max-width: 2.6rem;
diff --git a/src/modals/Connect/index.tsx b/src/modals/Connect/index.tsx
index 861d558a23..e60a67e6ab 100644
--- a/src/modals/Connect/index.tsx
+++ b/src/modals/Connect/index.tsx
@@ -2,7 +2,6 @@
// SPDX-License-Identifier: GPL-3.0-only
import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
-import extensions from '@w3ux/extension-assets';
import { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Close } from 'library/Modal/Close';
@@ -26,6 +25,8 @@ import { ModalMotionThreeSection } from 'kits/Overlay/structure/ModalMotionThree
import { ModalPadding } from 'kits/Overlay/structure/ModalPadding';
import { useExtensions } from '@w3ux/react-connect-kit';
import { useEffectIgnoreInitial } from '@w3ux/hooks';
+import extensions from '@w3ux/extension-assets';
+import type { ExtensionArrayListItem } from '@w3ux/extension-assets/util';
export const Connect = () => {
const { t } = useTranslation('modals');
@@ -44,12 +45,13 @@ export const Connect = () => {
// Whether the app is running on of mobile wallets.
const inMobileWallet = inNova || inSubWallet;
- // If in SubWallet Mobile, keep `subwallet-js` only.
+ // Get supported extensions.
const extensionsAsArray = Object.entries(extensions).map(([key, value]) => ({
id: key,
...value,
- }));
+ })) as ExtensionArrayListItem[];
+ // If in SubWallet Mobile, keep `subwallet-js` only.
const web = inSubWallet
? extensionsAsArray.filter((a) => a.id === 'subwallet-js')
: // If in Nova Wallet, fetch nova wallet metadata and replace its id with `polkadot-js`.
diff --git a/src/modals/Connect/types.ts b/src/modals/Connect/types.ts
index 935e3dc83f..930f35b256 100644
--- a/src/modals/Connect/types.ts
+++ b/src/modals/Connect/types.ts
@@ -20,6 +20,7 @@ export interface ExtensionMetaProps {
url: string;
text: string;
};
+ otherEcosystems?: string[];
}
export interface ListWithInputProps {
diff --git a/src/modals/ManagePool/Forms/SetClaimPermission/index.tsx b/src/modals/ManagePool/Forms/SetClaimPermission/index.tsx
index 919d3b9198..7ce53ec93b 100644
--- a/src/modals/ManagePool/Forms/SetClaimPermission/index.tsx
+++ b/src/modals/ManagePool/Forms/SetClaimPermission/index.tsx
@@ -19,6 +19,7 @@ import { useBalances } from 'contexts/Balances';
import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert';
import { ModalPadding } from 'kits/Overlay/structure/ModalPadding';
import { ModalWarnings } from 'kits/Overlay/structure/ModalWarnings';
+import { defaultClaimPermission } from 'controllers/ActivePoolsController/defaults';
export const SetClaimPermission = ({
setSection,
@@ -92,10 +93,7 @@ export const SetClaimPermission = ({
) : null}
{
setClaimPermission(val);
}}
diff --git a/src/modals/PoolNominations/Wrappers.ts b/src/modals/PoolNominations/Wrappers.ts
deleted file mode 100644
index 9348154c0a..0000000000
--- a/src/modals/PoolNominations/Wrappers.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import styled from 'styled-components';
-
-export const ListWrapper = styled.div`
- display: flex;
- flex-flow: column wrap;
- align-items: center;
- position: relative;
- width: 100%;
-
- > div,
- h3 {
- width: 100%;
- }
-`;
diff --git a/src/modals/PoolNominations/index.tsx b/src/modals/PoolNominations/index.tsx
deleted file mode 100644
index b29b23fdfd..0000000000
--- a/src/modals/PoolNominations/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
-// SPDX-License-Identifier: GPL-3.0-only
-
-import { useTranslation } from 'react-i18next';
-import { Title } from 'library/Modal/Title';
-import { ValidatorList } from 'library/ValidatorList';
-import { useOverlay } from 'kits/Overlay/Provider';
-import { ListWrapper } from './Wrappers';
-import { ModalPadding } from 'kits/Overlay/structure/ModalPadding';
-
-export const PoolNominations = () => {
- const {
- config: { options },
- } = useOverlay().modal;
- const { nominator, targets } = options;
- const { t } = useTranslation('modals');
-
- return (
- <>
-
-
-
- {targets.length > 0 ? (
-
- ) : (
- {t('poolIsNotNominating')}
- )}
-
-
-
- );
-};
diff --git a/src/model/Api/index.ts b/src/model/Api/index.ts
index bfb40e30e8..ec1fa28b5f 100644
--- a/src/model/Api/index.ts
+++ b/src/model/Api/index.ts
@@ -92,7 +92,8 @@ export class Api {
// Class initialization. Sets the `provider` and `api` class members.
async initialize(type: ConnectionType, rpcEndpoint: string) {
- // Add initial syncing items.
+ // Add initial syncing items. Even though `initialization` is added by default, it is called
+ // again here in case a new API is initialized.
SyncController.dispatch('initialization', 'syncing');
// Persist the network to local storage.
diff --git a/src/overlay/index.tsx b/src/overlay/index.tsx
index 7b76f3821f..56960499cd 100644
--- a/src/overlay/index.tsx
+++ b/src/overlay/index.tsx
@@ -16,11 +16,9 @@ import { Connect } from '../modals/Connect';
import { GoToFeedback } from '../modals/GoToFeedback';
import { ImportLedger } from '../modals/ImportLedger';
import { ImportVault } from '../modals/ImportVault';
-import { JoinPool } from '../modals/JoinPool';
import { ManageFastUnstake } from '../modals/ManageFastUnstake';
import { ManagePool } from '../modals/ManagePool';
import { Networks } from '../modals/Networks';
-import { PoolNominations } from '../modals/PoolNominations';
import { Settings } from '../modals/Settings';
import { Unbond } from '../modals/Unbond';
import { UnlockChunks } from '../modals/UnlockChunks';
@@ -31,6 +29,9 @@ import { ValidatorMetrics } from '../modals/ValidatorMetrics';
import { ValidatorGeo } from '../modals/ValidatorGeo';
import { ManageNominations } from '../canvas/ManageNominations';
import { PoolMembers } from 'canvas/PoolMembers';
+import { JoinPool } from 'canvas/JoinPool';
+import { CreatePool } from 'canvas/CreatePool';
+import { NominatorSetup } from 'canvas/NominatorSetup';
import { Overlay } from 'kits/Overlay';
export const Overlays = () => {
@@ -51,13 +52,11 @@ export const Overlays = () => {
Connect,
Accounts,
GoToFeedback,
- JoinPool,
ImportLedger,
ImportVault,
ManagePool,
ManageFastUnstake,
Networks,
- PoolNominations,
Settings,
ValidatorMetrics,
ValidatorGeo,
@@ -70,6 +69,9 @@ export const Overlays = () => {
canvas={{
ManageNominations,
PoolMembers,
+ JoinPool,
+ CreatePool,
+ NominatorSetup,
}}
/>
);
diff --git a/src/pages/Nominate/Active/ManageBond.tsx b/src/pages/Nominate/Active/ManageBond.tsx
index 76999e7e83..d0967f16cc 100644
--- a/src/pages/Nominate/Active/ManageBond.tsx
+++ b/src/pages/Nominate/Active/ManageBond.tsx
@@ -31,8 +31,8 @@ export const ManageBond = () => {
},
} = useNetwork();
const { openHelp } = useHelp();
+ const { syncing } = useSyncing();
const { inSetup } = useStaking();
- const { syncing } = useSyncing('*');
const { getLedger } = useBalances();
const { openModal } = useOverlay().modal;
const { isFastUnstaking } = useUnstaking();
diff --git a/src/pages/Nominate/Active/Status/NewNominator.tsx b/src/pages/Nominate/Active/Status/NewNominator.tsx
new file mode 100644
index 0000000000..6f3cd3e59c
--- /dev/null
+++ b/src/pages/Nominate/Active/Status/NewNominator.tsx
@@ -0,0 +1,79 @@
+// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { CallToActionWrapper } from 'library/CallToAction';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { useTranslation } from 'react-i18next';
+import { useActiveAccounts } from 'contexts/ActiveAccounts';
+import { useNavigate } from 'react-router-dom';
+import { useApi } from 'contexts/Api';
+import type { NewNominatorProps } from '../types';
+import { CallToActionLoader } from 'library/Loader/CallToAction';
+import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
+import { useOverlay } from 'kits/Overlay/Provider';
+import { registerSaEvent } from 'Utils';
+import { useNetwork } from 'contexts/Network';
+
+export const NewNominator = ({ syncing }: NewNominatorProps) => {
+ const { t } = useTranslation();
+ const { isReady } = useApi();
+ const navigate = useNavigate();
+ const { network } = useNetwork();
+ const { openCanvas } = useOverlay().canvas;
+ const { activeAccount } = useActiveAccounts();
+ const { isReadOnlyAccount } = useImportedAccounts();
+
+ const nominateButtonDisabled =
+ !isReady || !activeAccount || isReadOnlyAccount(activeAccount);
+
+ return (
+
+
+ {syncing ? (
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
diff --git a/src/pages/Pools/Home/PoolStats/index.tsx b/src/pages/Pools/Home/PoolStats/index.tsx
index d9861e2dca..9f66c2afec 100644
--- a/src/pages/Pools/Home/PoolStats/index.tsx
+++ b/src/pages/Pools/Home/PoolStats/index.tsx
@@ -20,12 +20,12 @@ export const PoolStats = () => {
const {
networkData: { units, unit },
} = useNetwork();
+ const { activePool } = useActivePool();
const { getCurrentCommission } = usePoolCommission();
- const { activePool, activePoolMemberCount } = useActivePool();
const poolId = activePool?.id || 0;
- const { state, points } = activePool?.bondedPool || {};
+ const { state, points, memberCounter } = activePool?.bondedPool || {};
const currentCommission = getCurrentCommission(poolId);
const bonded = planckToUnit(
@@ -65,13 +65,13 @@ export const PoolStats = () => {
items.push(
{
label: t('pools.poolMembers'),
- value: `${activePoolMemberCount}`,
+ value: `${memberCounter}`,
button: {
text: t('pools.browseMembers'),
onClick: () => {
openCanvas({ key: 'PoolMembers', size: 'xl' });
},
- disabled: activePoolMemberCount === 0,
+ disabled: memberCounter === '0',
},
},
{
diff --git a/src/pages/Pools/Home/Status/MembershipStatus.tsx b/src/pages/Pools/Home/Status/MembershipStatus.tsx
index b76848427a..59b40f75f6 100644
--- a/src/pages/Pools/Home/Status/MembershipStatus.tsx
+++ b/src/pages/Pools/Home/Status/MembershipStatus.tsx
@@ -13,22 +13,18 @@ import { useOverlay } from 'kits/Overlay/Provider';
import { useActiveAccounts } from 'contexts/ActiveAccounts';
import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
import { useStatusButtons } from './useStatusButtons';
-import { useSyncing } from 'hooks/useSyncing';
+import type { MembershipStatusProps } from './types';
export const MembershipStatus = ({
showButtons = true,
buttonType = 'primary',
-}: {
- showButtons?: boolean;
- buttonType?: string;
-}) => {
+}: MembershipStatusProps) => {
const { t } = useTranslation('pages');
const { isReady } = useApi();
- const { syncing } = useSyncing('*');
const { openModal } = useOverlay().modal;
const { poolsMetaData } = useBondedPools();
const { activeAccount } = useActiveAccounts();
- const { label, buttons } = useStatusButtons();
+ const { label } = useStatusButtons();
const { isReadOnlyAccount } = useImportedAccounts();
const { getTransferOptions } = useTransferOptions();
const { activePool, isOwner, isBouncer, isMember } = useActivePool();
@@ -52,18 +48,21 @@ export const MembershipStatus = ({
(poolState !== 'Destroying' && (isOwner() || isBouncer())) ||
(isMember() && active?.isGreaterThan(0))
) {
- membershipButtons.push({
- title: t('pools.manage'),
- icon: faCog,
- disabled: !isReady || isReadOnlyAccount(activeAccount),
- small: true,
- onClick: () =>
- openModal({
- key: 'ManagePool',
- options: { disableWindowResize: true, disableScroll: true },
- size: 'sm',
- }),
- });
+ // Display manage button if active account is not a read-only account.
+ if (!isReadOnlyAccount(activeAccount)) {
+ membershipButtons.push({
+ title: t('pools.manage'),
+ icon: faCog,
+ disabled: !isReady,
+ small: true,
+ onClick: () =>
+ openModal({
+ key: 'ManagePool',
+ options: { disableWindowResize: true, disableScroll: true },
+ size: 'sm',
+ }),
+ });
+ }
}
}
@@ -83,7 +82,6 @@ export const MembershipStatus = ({
label={t('pools.poolMembership')}
helpKey="Pool Membership"
stat={t('pools.notInPool')}
- buttons={!showButtons || syncing ? [] : buttons}
buttonType={buttonType}
/>
);
diff --git a/src/pages/Pools/Home/Status/NewMember.tsx b/src/pages/Pools/Home/Status/NewMember.tsx
new file mode 100644
index 0000000000..663d2dbbbd
--- /dev/null
+++ b/src/pages/Pools/Home/Status/NewMember.tsx
@@ -0,0 +1,121 @@
+// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { CallToActionWrapper } from 'library/CallToAction';
+import { faUserPlus } from '@fortawesome/free-solid-svg-icons';
+import { useStatusButtons } from './useStatusButtons';
+import { useTranslation } from 'react-i18next';
+import { useOverlay } from 'kits/Overlay/Provider';
+import type { NewMemberProps } from './types';
+import { CallToActionLoader } from 'library/Loader/CallToAction';
+import { usePoolPerformance } from 'contexts/Pools/PoolPerformance';
+import { PoolSync } from 'library/PoolSync';
+import { useJoinPools } from 'contexts/Pools/JoinPools';
+import { StyledLoader } from 'library/PoolSync/Loader';
+import { registerSaEvent } from 'Utils';
+import { useNetwork } from 'contexts/Network';
+
+export const NewMember = ({ syncing }: NewMemberProps) => {
+ const { t } = useTranslation();
+ const { network } = useNetwork();
+ const { poolsForJoin } = useJoinPools();
+ const { openCanvas } = useOverlay().canvas;
+ const { startJoinPoolFetch } = useJoinPools();
+ const { getPoolPerformanceTask } = usePoolPerformance();
+ const { getJoinDisabled, getCreateDisabled } = useStatusButtons();
+
+ // Get the pool performance task to determine if performance data is ready.
+ const poolJoinPerformanceTask = getPoolPerformanceTask('pool_join');
+
+ // Alias for create button disabled state.
+ const createDisabled = getCreateDisabled();
+
+ // Disable opening the canvas if data is not ready.
+ const joinButtonDisabled = getJoinDisabled() || !poolsForJoin.length;
+
+ return (
+
+
+ {syncing ? (
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+