From 94473d5499a1d0025190eed590642078651ebc88 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Thu, 28 Mar 2024 19:51:47 +0800 Subject: [PATCH 01/98] some tidy up --- src/hooks/useActivePools/index.tsx | 3 +-- src/library/WithdrawPrompt/index.tsx | 7 +++++++ src/pages/Pools/Home/ClosurePrompts.tsx | 1 + src/pages/Pools/Home/index.tsx | 21 +++++++++------------ 4 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/hooks/useActivePools/index.tsx b/src/hooks/useActivePools/index.tsx index f658c9da59..8b655990c6 100644 --- a/src/hooks/useActivePools/index.tsx +++ b/src/hooks/useActivePools/index.tsx @@ -58,8 +58,6 @@ export const useActivePools = ({ onCallback, poolIds }: ActivePoolsProps) => { } }; - const documentRef = useRef(document); - // Bootstrap state on initial render. useEffect(() => { const initialActivePools = @@ -94,6 +92,7 @@ export const useActivePools = ({ onCallback, poolIds }: ActivePoolsProps) => { }, [network, activeAccount]); // Listen for new active pool events. + const documentRef = useRef(document); useEventListener('new-active-pool', newActivePoolCallback, documentRef); return { activePools, poolNominations }; 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/pages/Pools/Home/ClosurePrompts.tsx b/src/pages/Pools/Home/ClosurePrompts.tsx index 473506c0bd..0adf25705c 100644 --- a/src/pages/Pools/Home/ClosurePrompts.tsx +++ b/src/pages/Pools/Home/ClosurePrompts.tsx @@ -46,6 +46,7 @@ export const ClosurePrompts = () => { active.toNumber() === 0 && totalUnlockChunks === 0 && !targets.length; return ( + state === 'Destroying' && depositorCanClose && ( diff --git a/src/pages/Pools/Home/index.tsx b/src/pages/Pools/Home/index.tsx index 7a347df83f..9fdf1d435b 100644 --- a/src/pages/Pools/Home/index.tsx +++ b/src/pages/Pools/Home/index.tsx @@ -42,16 +42,16 @@ export const HomeInner = () => { const { activeTab, setActiveTab } = usePoolsTabs(); const { getPoolRoles, activePool } = useActivePool(); const { counterForBondedPools } = useApi().poolsConfig; - const membership = getPoolMembership(activeAccount); - const { state } = activePool?.bondedPool || {}; const { activePools } = useActivePools({ poolIds: '*', }); - const activePoolsNoMembership = { ...activePools }; - delete activePoolsNoMembership[membership?.poolId || -1]; + // Calculate the number of _other_ pools the user has a role in. + const poolRoleCount = Object.keys(activePools).filter( + (poolId) => poolId === String(membership?.poolId) + ).length; let tabs: PageTitleTabProps[] = [ { @@ -76,6 +76,8 @@ export const HomeInner = () => { } ); + const ROW_HEIGHT = 220; + // Back to tab 0 if not in a pool & on members tab. useEffect(() => { if (!activePool) { @@ -83,15 +85,13 @@ export const HomeInner = () => { } }, [activePool]); - const ROW_HEIGHT = 220; - return ( <> 0 + poolRoleCount > 0 ? { title: t('pools.allRoles'), onClick: () => @@ -111,11 +111,8 @@ export const HomeInner = () => { - {state === 'Destroying' ? ( - - ) : ( - - )} + + From bf5aada695c69435823b5dcb4568506abee9edfe Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Thu, 28 Mar 2024 19:52:40 +0800 Subject: [PATCH 02/98] use vLast --- src/pages/Pools/Home/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/Pools/Home/index.tsx b/src/pages/Pools/Home/index.tsx index 9fdf1d435b..9a1b29ad87 100644 --- a/src/pages/Pools/Home/index.tsx +++ b/src/pages/Pools/Home/index.tsx @@ -115,14 +115,14 @@ export const HomeInner = () => { - - - - + + + + {activePool !== null && ( <> From ea9e57958b0be073d1be0dddd6c7c1acabc46f05 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Thu, 28 Mar 2024 19:54:30 +0800 Subject: [PATCH 03/98] export types --- src/pages/Pools/Home/Status/MembershipStatus.tsx | 6 ++---- src/pages/Pools/Home/Status/index.tsx | 3 ++- src/pages/Pools/Home/Status/types.ts | 11 +++++++++++ 3 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 src/pages/Pools/Home/Status/types.ts diff --git a/src/pages/Pools/Home/Status/MembershipStatus.tsx b/src/pages/Pools/Home/Status/MembershipStatus.tsx index b76848427a..c445925900 100644 --- a/src/pages/Pools/Home/Status/MembershipStatus.tsx +++ b/src/pages/Pools/Home/Status/MembershipStatus.tsx @@ -14,14 +14,12 @@ 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('*'); diff --git a/src/pages/Pools/Home/Status/index.tsx b/src/pages/Pools/Home/Status/index.tsx index 119e7eb46f..de0cdd6f7e 100644 --- a/src/pages/Pools/Home/Status/index.tsx +++ b/src/pages/Pools/Home/Status/index.tsx @@ -7,8 +7,9 @@ import { MembershipStatus } from './MembershipStatus'; import { PoolStatus } from './PoolStatus'; import { RewardsStatus } from './RewardsStatus'; import { Separator } from 'kits/Structure/Separator'; +import type { StatusProps } from './types'; -export const Status = ({ height }: { height: number }) => { +export const Status = ({ height }: StatusProps) => { const { activePool } = useActivePool(); return ( diff --git a/src/pages/Pools/Home/Status/types.ts b/src/pages/Pools/Home/Status/types.ts new file mode 100644 index 0000000000..c1ffc237ef --- /dev/null +++ b/src/pages/Pools/Home/Status/types.ts @@ -0,0 +1,11 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +export interface StatusProps { + height: number; +} + +export interface MembershipStatusProps { + showButtons?: boolean; + buttonType?: string; +} From a101b7ce2c901ef83a283297dea01fb43bbe2663 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Thu, 28 Mar 2024 20:03:48 +0800 Subject: [PATCH 04/98] initialization syncing by default --- src/controllers/SyncController/index.ts | 5 ++++- src/hooks/useSyncing/index.tsx | 2 +- src/model/Api/index.ts | 3 ++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/controllers/SyncController/index.ts b/src/controllers/SyncController/index.ts index 67baa82887..9eb50ae11b 100644 --- a/src/controllers/SyncController/index.ts +++ b/src/controllers/SyncController/index.ts @@ -7,7 +7,10 @@ export class SyncController { // ------------------------------------------------------ // Class members // ------------------------------------------------------ - static syncIds: SyncID[] = []; + + // List of all syncIds currently syncing. NOTE: `initialization` is added by default as the + // network always initializes from initial state. + static syncIds: SyncID[] = ['initialization']; // ------------------------------------------------------ // Dispatch sync events diff --git a/src/hooks/useSyncing/index.tsx b/src/hooks/useSyncing/index.tsx index b1a6c843a2..04f3b492c3 100644 --- a/src/hooks/useSyncing/index.tsx +++ b/src/hooks/useSyncing/index.tsx @@ -13,7 +13,7 @@ export const useSyncing = (config: SyncIDConfig) => { const ids = SyncController.getIdsFromSyncConfig(config); // Keep a record of active sync statuses. - const [syncIds, setSyncIds] = useState([]); + const [syncIds, setSyncIds] = useState(SyncController.syncIds); const syncIdsRef = useRef(syncIds); // Handle new syncing status events. 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. From 0590f9ed94883e7168b449f2685142f0e3505cb4 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Thu, 28 Mar 2024 20:14:03 +0800 Subject: [PATCH 05/98] add `bonded-pools` syncId, check duplicates, all on by default --- src/contexts/Pools/BondedPools/index.tsx | 3 +++ src/controllers/SyncController/defaults.ts | 12 ++++++++++++ src/controllers/SyncController/index.ts | 9 +++++++-- src/controllers/SyncController/types.ts | 1 + 4 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 src/controllers/SyncController/defaults.ts diff --git a/src/contexts/Pools/BondedPools/index.tsx b/src/contexts/Pools/BondedPools/index.tsx index d3d22677f8..c04740677e 100644 --- a/src/contexts/Pools/BondedPools/index.tsx +++ b/src/contexts/Pools/BondedPools/index.tsx @@ -20,6 +20,7 @@ import { useNetwork } from 'contexts/Network'; import { useApi } from '../../Api'; import { defaultBondedPoolsContext } from './defaults'; import { useCreatePoolAccounts } from 'hooks/useCreatePoolAccounts'; +import { SyncController } from 'controllers/SyncController'; export const BondedPoolsContext = createContext( defaultBondedPoolsContext @@ -85,6 +86,7 @@ export const BondedPoolsProvider = ({ children }: { children: ReactNode }) => { ); bondedPoolsSynced.current = 'synced'; + SyncController.dispatch('bonded-pools', 'complete'); }; // Fetches pool nominations and updates state. @@ -386,6 +388,7 @@ export const BondedPoolsProvider = ({ children }: { children: ReactNode }) => { // Clear existing state for network refresh. useEffectIgnoreInitial(() => { bondedPoolsSynced.current = 'unsynced'; + SyncController.dispatch('bonded-pools', 'syncing'); setStateWithRef([], setBondedPools, bondedPoolsRef); setPoolsMetadata({}); setPoolsNominations({}); diff --git a/src/controllers/SyncController/defaults.ts b/src/controllers/SyncController/defaults.ts new file mode 100644 index 0000000000..e04d5254b5 --- /dev/null +++ b/src/controllers/SyncController/defaults.ts @@ -0,0 +1,12 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { SyncID } from './types'; + +export const defaultSyncIds: SyncID[] = [ + 'initialization', + 'balances', + 'era-stakers', + 'bonded-pools', + 'active-pools', +]; diff --git a/src/controllers/SyncController/index.ts b/src/controllers/SyncController/index.ts index 9eb50ae11b..047de686bd 100644 --- a/src/controllers/SyncController/index.ts +++ b/src/controllers/SyncController/index.ts @@ -1,6 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only +import { defaultSyncIds } from './defaults'; import type { SyncEvent, SyncID, SyncIDConfig, SyncStatus } from './types'; export class SyncController { @@ -10,7 +11,7 @@ export class SyncController { // List of all syncIds currently syncing. NOTE: `initialization` is added by default as the // network always initializes from initial state. - static syncIds: SyncID[] = ['initialization']; + static syncIds: SyncID[] = defaultSyncIds; // ------------------------------------------------------ // Dispatch sync events @@ -25,7 +26,11 @@ export class SyncController { // Keep class syncIds up to date. if (status === 'syncing' && !this.syncIds.includes(id)) { - this.syncIds.push(id); + // Add syncId if it does not already exist: + + if (!this.syncIds.includes(id)) { + this.syncIds.push(id); + } } if (status === 'complete' && this.syncIds.includes(id)) { this.syncIds = this.syncIds.filter((syncId) => syncId !== id); diff --git a/src/controllers/SyncController/types.ts b/src/controllers/SyncController/types.ts index ced7533cba..75c3f97b81 100644 --- a/src/controllers/SyncController/types.ts +++ b/src/controllers/SyncController/types.ts @@ -5,6 +5,7 @@ export type SyncID = | 'initialization' | 'balances' | 'era-stakers' + | 'bonded-pools' | 'active-pools'; export interface SyncEvent { From 3b554d0f7853733306c73690bfcb46f80dd7debb Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Thu, 28 Mar 2024 20:25:55 +0800 Subject: [PATCH 06/98] hide manage buttons if read only account --- .../Active/Status/NominationStatus.tsx | 23 ++++--- .../Pools/Home/Status/MembershipStatus.tsx | 27 ++++---- src/pages/Pools/Home/Status/RewardsStatus.tsx | 62 +++++++++---------- 3 files changed, 57 insertions(+), 55 deletions(-) diff --git a/src/pages/Nominate/Active/Status/NominationStatus.tsx b/src/pages/Nominate/Active/Status/NominationStatus.tsx index 495a5d212e..917115018b 100644 --- a/src/pages/Nominate/Active/Status/NominationStatus.tsx +++ b/src/pages/Nominate/Active/Status/NominationStatus.tsx @@ -88,18 +88,17 @@ export const NominationStatus = ({ ? !isUnstaking ? [unstakeButton] : [] - : [ - { - title: startTitle, - icon: faChevronCircleRight, - transform: 'grow-1', - disabled: - !isReady || - isReadOnlyAccount(activeAccount) || - !activeAccount, - onClick: () => setOnNominatorSetup(true), - }, - ] + : isReadOnlyAccount(activeAccount) + ? [] + : [ + { + title: startTitle, + icon: faChevronCircleRight, + transform: 'grow-1', + disabled: !isReady || !activeAccount, + onClick: () => setOnNominatorSetup(true), + }, + ] } buttonType={buttonType} /> diff --git a/src/pages/Pools/Home/Status/MembershipStatus.tsx b/src/pages/Pools/Home/Status/MembershipStatus.tsx index c445925900..657b83f7f1 100644 --- a/src/pages/Pools/Home/Status/MembershipStatus.tsx +++ b/src/pages/Pools/Home/Status/MembershipStatus.tsx @@ -50,18 +50,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', + }), + }); + } } } diff --git a/src/pages/Pools/Home/Status/RewardsStatus.tsx b/src/pages/Pools/Home/Status/RewardsStatus.tsx index d9f5df9885..fcea3a47a8 100644 --- a/src/pages/Pools/Home/Status/RewardsStatus.tsx +++ b/src/pages/Pools/Home/Status/RewardsStatus.tsx @@ -34,37 +34,37 @@ export const RewardsStatus = () => { : '0'; // Display Reward buttons if unclaimed rewards is a non-zero value. - const buttonsRewards = pendingPoolRewards.isGreaterThan(minUnclaimedDisplay) - ? [ - { - title: t('pools.withdraw'), - icon: faCircleDown, - disabled: !isReady || isReadOnlyAccount(activeAccount), - small: true, - onClick: () => - openModal({ - key: 'ClaimReward', - options: { claimType: 'withdraw' }, - size: 'sm', - }), - }, - { - title: t('pools.compound'), - icon: faPlus, - disabled: - !isReady || - isReadOnlyAccount(activeAccount) || - activePool?.bondedPool?.state === 'Destroying', - small: true, - onClick: () => - openModal({ - key: 'ClaimReward', - options: { claimType: 'bond' }, - size: 'sm', - }), - }, - ] - : undefined; + const buttonsRewards = isReadOnlyAccount(activeAccount) + ? [] + : pendingPoolRewards.isGreaterThan(minUnclaimedDisplay) + ? [ + { + title: t('pools.withdraw'), + icon: faCircleDown, + disabled: !isReady, + small: true, + onClick: () => + openModal({ + key: 'ClaimReward', + options: { claimType: 'withdraw' }, + size: 'sm', + }), + }, + { + title: t('pools.compound'), + icon: faPlus, + disabled: + !isReady || activePool?.bondedPool?.state === 'Destroying', + small: true, + onClick: () => + openModal({ + key: 'ClaimReward', + options: { claimType: 'bond' }, + size: 'sm', + }), + }, + ] + : undefined; return ( Date: Thu, 28 Mar 2024 20:35:24 +0800 Subject: [PATCH 07/98] add dispatchAllDefault to SyncController --- src/contexts/Api/index.tsx | 5 +++++ src/controllers/SyncController/index.ts | 5 +++++ src/hooks/useSyncing/index.tsx | 3 +-- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/contexts/Api/index.tsx b/src/contexts/Api/index.tsx index 46b1bea262..031bd3149e 100644 --- a/src/contexts/Api/index.tsx +++ b/src/contexts/Api/index.tsx @@ -331,6 +331,11 @@ export const APIProvider = ({ children, network }: APIProviderProps) => { const reInitialiseApi = async (type: ConnectionType) => { setApiStatus('disconnected'); + + // Dispatch all default syncIds as syncing. + SyncController.dispatchAllDefault(); + + // Instanaite new API instance. await ApiController.instantiate(network, type, rpcEndpoint); }; diff --git a/src/controllers/SyncController/index.ts b/src/controllers/SyncController/index.ts index 047de686bd..bd3ffea570 100644 --- a/src/controllers/SyncController/index.ts +++ b/src/controllers/SyncController/index.ts @@ -17,6 +17,11 @@ export class SyncController { // Dispatch sync events // ------------------------------------------------------ + // Dispatch all default syncId events as syncing. + static dispatchAllDefault = () => { + this.syncIds.forEach((id) => this.dispatch(id, 'syncing')); + }; + // Dispatches a new sync event to the document. static dispatch = (id: SyncID, status: SyncStatus) => { const detail: SyncEvent = { diff --git a/src/hooks/useSyncing/index.tsx b/src/hooks/useSyncing/index.tsx index 04f3b492c3..cca47ac371 100644 --- a/src/hooks/useSyncing/index.tsx +++ b/src/hooks/useSyncing/index.tsx @@ -40,8 +40,6 @@ export const useSyncing = (config: SyncIDConfig) => { } }; - const documentRef = useRef(document); - // Bootstrap existing sync statuses of interest when hook is mounted. useEffect(() => { setStateWithRef( @@ -54,6 +52,7 @@ export const useSyncing = (config: SyncIDConfig) => { }, []); // Listen for new sync events. + const documentRef = useRef(document); useEventListener('new-sync-status', newSyncStatusCallback, documentRef); return { syncing: syncIds.length > 0 }; From a1abe8428477bfff0dbeed54be853e06d9e51679 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Thu, 28 Mar 2024 20:43:04 +0800 Subject: [PATCH 08/98] sync dispatch logic fixes --- src/controllers/SyncController/index.ts | 27 ++++++++++++++++--------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/src/controllers/SyncController/index.ts b/src/controllers/SyncController/index.ts index bd3ffea570..7ad062c693 100644 --- a/src/controllers/SyncController/index.ts +++ b/src/controllers/SyncController/index.ts @@ -29,24 +29,31 @@ export class SyncController { status, }; - // Keep class syncIds up to date. - if (status === 'syncing' && !this.syncIds.includes(id)) { - // Add syncId if it does not already exist: + // Whether to dispatch the event. + let dispatch = true; - if (!this.syncIds.includes(id)) { + // Keep class syncIds up to date. + if (status === 'syncing') { + if (this.syncIds.includes(id)) { + // Cancel event if already syncing. + dispatch = false; + } else { this.syncIds.push(id); } } - if (status === 'complete' && this.syncIds.includes(id)) { + + if (status === 'complete') { this.syncIds = this.syncIds.filter((syncId) => syncId !== id); } // Dispatch event to UI. - document.dispatchEvent( - new CustomEvent('new-sync-status', { - detail, - }) - ); + if (dispatch) { + document.dispatchEvent( + new CustomEvent('new-sync-status', { + detail, + }) + ); + } }; // Checks if event detailis a valid `new-sync-status` event. From dca005d26e1bf7b115fc9c0c63db9ae55f216b43 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Thu, 28 Mar 2024 20:50:49 +0800 Subject: [PATCH 09/98] active pools synced if no pool accounts --- src/contexts/Pools/ActivePool/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/contexts/Pools/ActivePool/index.tsx b/src/contexts/Pools/ActivePool/index.tsx index b329d86608..b496edd810 100644 --- a/src/contexts/Pools/ActivePool/index.tsx +++ b/src/contexts/Pools/ActivePool/index.tsx @@ -116,6 +116,9 @@ export const ActivePoolProvider = ({ children }: { children: ReactNode }) => { addresses: { ...createPoolAccounts(Number(pool)) }, })); ActivePoolsController.syncPools(api, newActivePools); + } else { + // No active pools to sync. Mark as complete. + SyncController.dispatch('active-pools', 'complete'); } }; From f42378152b016c3c216509b0bcca5c9108e6b54c Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Thu, 28 Mar 2024 20:58:48 +0800 Subject: [PATCH 10/98] useSyncing wildcard by default --- src/hooks/useSyncing/index.tsx | 15 +++++++++++++-- src/library/Headers/Sync.tsx | 2 +- src/library/ListItem/Labels/EraStatus.tsx | 2 +- src/library/Nominations/index.tsx | 2 +- src/library/PoolList/Default.tsx | 2 +- src/library/SideMenu/Main.tsx | 2 +- src/library/StatusLabel/index.tsx | 2 +- src/library/ValidatorList/index.tsx | 2 +- src/pages/Nominate/Active/ManageBond.tsx | 2 +- .../Active/Status/PayoutDestinationStatus.tsx | 2 +- src/pages/Nominate/Active/UnstakePrompts.tsx | 2 +- src/pages/Nominate/Active/index.tsx | 2 +- src/pages/Overview/Payouts.tsx | 2 +- src/pages/Payouts/index.tsx | 2 +- src/pages/Pools/Home/Status/MembershipStatus.tsx | 2 +- 15 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/hooks/useSyncing/index.tsx b/src/hooks/useSyncing/index.tsx index cca47ac371..f1a19b1fae 100644 --- a/src/hooks/useSyncing/index.tsx +++ b/src/hooks/useSyncing/index.tsx @@ -8,7 +8,7 @@ import type { SyncID, SyncIDConfig } from 'controllers/SyncController/types'; import { isCustomEvent } from 'controllers/utils'; import { useEventListener } from 'usehooks-ts'; -export const useSyncing = (config: SyncIDConfig) => { +export const useSyncing = (config: SyncIDConfig = '*') => { // Retrieve the ids from the config provided. const ids = SyncController.getIdsFromSyncConfig(config); @@ -40,6 +40,17 @@ export const useSyncing = (config: SyncIDConfig) => { } }; + // Helper to determine if pool membership is syncing. + const poolMembersipSyncing = (): boolean => { + const POOL_SYNC_IDS: SyncID[] = [ + 'initialization', + 'balances', + 'bonded-pools', + 'active-pools', + ]; + return syncIds.some(() => POOL_SYNC_IDS.find((id) => syncIds.includes(id))); + }; + // Bootstrap existing sync statuses of interest when hook is mounted. useEffect(() => { setStateWithRef( @@ -55,5 +66,5 @@ export const useSyncing = (config: SyncIDConfig) => { const documentRef = useRef(document); useEventListener('new-sync-status', newSyncStatusCallback, documentRef); - return { syncing: syncIds.length > 0 }; + return { syncing: syncIds.length > 0, poolMembersipSyncing }; }; diff --git a/src/library/Headers/Sync.tsx b/src/library/Headers/Sync.tsx index a6f4f63c1c..6c4188a047 100644 --- a/src/library/Headers/Sync.tsx +++ b/src/library/Headers/Sync.tsx @@ -13,8 +13,8 @@ import { useTxMeta } from 'contexts/TxMeta'; import { useSyncing } from 'hooks/useSyncing'; export const Sync = () => { + const { syncing } = useSyncing(); const { pathname } = useLocation(); - const { syncing } = useSyncing('*'); const { pendingNonces } = useTxMeta(); const { payoutsSynced } = usePayouts(); const { pluginEnabled } = usePlugins(); diff --git a/src/library/ListItem/Labels/EraStatus.tsx b/src/library/ListItem/Labels/EraStatus.tsx index b3256cf61d..d407860c9c 100644 --- a/src/library/ListItem/Labels/EraStatus.tsx +++ b/src/library/ListItem/Labels/EraStatus.tsx @@ -10,7 +10,7 @@ import { useSyncing } from 'hooks/useSyncing'; export const EraStatus = ({ noMargin, status, totalStake }: EraStatusProps) => { const { t } = useTranslation('library'); - const { syncing } = useSyncing('*'); + const { syncing } = useSyncing(); const { unit, units } = useNetwork().networkData; // Fallback to `waiting` status if still syncing. diff --git a/src/library/Nominations/index.tsx b/src/library/Nominations/index.tsx index 98d0398fb2..442a523faa 100644 --- a/src/library/Nominations/index.tsx +++ b/src/library/Nominations/index.tsx @@ -41,7 +41,7 @@ export const Nominations = ({ modal: { openModal }, canvas: { openCanvas }, } = useOverlay(); - const { syncing } = useSyncing('*'); + const { syncing } = useSyncing(); const { getNominations } = useBalances(); const { isFastUnstaking } = useUnstaking(); const { formatWithPrefs } = useValidators(); diff --git a/src/library/PoolList/Default.tsx b/src/library/PoolList/Default.tsx index 19d01cc3e6..634f7db58f 100644 --- a/src/library/PoolList/Default.tsx +++ b/src/library/PoolList/Default.tsx @@ -46,7 +46,7 @@ export const PoolList = ({ const { networkData: { colors }, } = useNetwork(); - const { syncing } = useSyncing('*'); + const { syncing } = useSyncing(); const { applyFilter } = usePoolFilters(); const { listFormat, setListFormat } = usePoolList(); const { getFilters, setMultiFilters, getSearchTerm, setSearchTerm } = diff --git a/src/library/SideMenu/Main.tsx b/src/library/SideMenu/Main.tsx index 46d7471cd6..97f1c0d7a5 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(); 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/ValidatorList/index.tsx b/src/library/ValidatorList/index.tsx index 9c967dca10..691989594c 100644 --- a/src/library/ValidatorList/index.tsx +++ b/src/library/ValidatorList/index.tsx @@ -78,7 +78,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; 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/PayoutDestinationStatus.tsx b/src/pages/Nominate/Active/Status/PayoutDestinationStatus.tsx index 39cc95b035..8334686cfc 100644 --- a/src/pages/Nominate/Active/Status/PayoutDestinationStatus.tsx +++ b/src/pages/Nominate/Active/Status/PayoutDestinationStatus.tsx @@ -16,8 +16,8 @@ import { useSyncing } from 'hooks/useSyncing'; export const PayoutDestinationStatus = () => { const { t } = useTranslation('pages'); const { getPayee } = useBalances(); + const { syncing } = useSyncing(); const { inSetup } = useStaking(); - const { syncing } = useSyncing('*'); const { openModal } = useOverlay().modal; const { isFastUnstaking } = useUnstaking(); const { getPayeeItems } = usePayeeConfig(); diff --git a/src/pages/Nominate/Active/UnstakePrompts.tsx b/src/pages/Nominate/Active/UnstakePrompts.tsx index 122eb5ec0a..f9a3ea106a 100644 --- a/src/pages/Nominate/Active/UnstakePrompts.tsx +++ b/src/pages/Nominate/Active/UnstakePrompts.tsx @@ -19,7 +19,7 @@ import { ButtonRow } from 'kits/Structure/ButtonRow'; export const UnstakePrompts = () => { const { t } = useTranslation('pages'); const { mode } = useTheme(); - const { syncing } = useSyncing('*'); + const { syncing } = useSyncing(); const { openModal } = useOverlay().modal; const { activeAccount } = useActiveAccounts(); const { unit, colors } = useNetwork().networkData; diff --git a/src/pages/Nominate/Active/index.tsx b/src/pages/Nominate/Active/index.tsx index 58e7ef1d59..ff0caa1759 100644 --- a/src/pages/Nominate/Active/index.tsx +++ b/src/pages/Nominate/Active/index.tsx @@ -31,8 +31,8 @@ import { WithdrawPrompt } from 'library/WithdrawPrompt'; export const Active = () => { const { t } = useTranslation(); const { openHelp } = useHelp(); + const { syncing } = useSyncing(); const { inSetup } = useStaking(); - const { syncing } = useSyncing('*'); const { getNominations } = useBalances(); const { openCanvas } = useOverlay().canvas; const { isFastUnstaking } = useUnstaking(); diff --git a/src/pages/Overview/Payouts.tsx b/src/pages/Overview/Payouts.tsx index b9b9d8b2a3..5c4750d1fd 100644 --- a/src/pages/Overview/Payouts.tsx +++ b/src/pages/Overview/Payouts.tsx @@ -30,7 +30,7 @@ export const Payouts = () => { }, } = useNetwork(); const { inSetup } = useStaking(); - const { syncing } = useSyncing('*'); + const { syncing } = useSyncing(); const { plugins } = usePlugins(); const { getData, injectBlockTimestamp } = useSubscanData([ 'payouts', diff --git a/src/pages/Payouts/index.tsx b/src/pages/Payouts/index.tsx index eaeb36ea8d..ea1a94a200 100644 --- a/src/pages/Payouts/index.tsx +++ b/src/pages/Payouts/index.tsx @@ -32,7 +32,7 @@ export const Payouts = ({ page: { key } }: PageProps) => { const { openHelp } = useHelp(); const { plugins } = usePlugins(); const { inSetup } = useStaking(); - const { syncing } = useSyncing('*'); + const { syncing } = useSyncing(); const { getData, injectBlockTimestamp } = useSubscanData([ 'payouts', 'unclaimedPayouts', diff --git a/src/pages/Pools/Home/Status/MembershipStatus.tsx b/src/pages/Pools/Home/Status/MembershipStatus.tsx index 657b83f7f1..721c701a13 100644 --- a/src/pages/Pools/Home/Status/MembershipStatus.tsx +++ b/src/pages/Pools/Home/Status/MembershipStatus.tsx @@ -22,7 +22,7 @@ export const MembershipStatus = ({ }: MembershipStatusProps) => { const { t } = useTranslation('pages'); const { isReady } = useApi(); - const { syncing } = useSyncing('*'); + const { syncing } = useSyncing(); const { openModal } = useOverlay().modal; const { poolsMetaData } = useBondedPools(); const { activeAccount } = useActiveAccounts(); From b2e4535a64fa725d58a2d59dfc459a41bb43e371 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Thu, 28 Mar 2024 23:14:12 +0800 Subject: [PATCH 11/98] add new pool member ui --- src/hooks/useActivePools/index.tsx | 10 +- .../Pools/Home/Status/MembershipStatus.tsx | 5 +- .../Pools/Home/Status/NewMember/Wrapper.tsx | 92 +++++++++++++++++++ .../Pools/Home/Status/NewMember/index.tsx | 59 ++++++++++++ src/pages/Pools/Home/Status/index.tsx | 25 +++-- .../Pools/Home/Status/useStatusButtons.tsx | 37 ++------ 6 files changed, 182 insertions(+), 46 deletions(-) create mode 100644 src/pages/Pools/Home/Status/NewMember/Wrapper.tsx create mode 100644 src/pages/Pools/Home/Status/NewMember/index.tsx diff --git a/src/hooks/useActivePools/index.tsx b/src/hooks/useActivePools/index.tsx index 8b655990c6..8ac0ba6e3a 100644 --- a/src/hooks/useActivePools/index.tsx +++ b/src/hooks/useActivePools/index.tsx @@ -33,11 +33,6 @@ export const useActivePools = ({ onCallback, poolIds }: ActivePoolsProps) => { const { pool, nominations } = e.detail; const { id } = pool; - // Call custom `onCallback` function if provided. - if (typeof onCallback === 'function') { - await onCallback(e.detail); - } - // Persist to active pools state if this pool is specified in `poolIds`. if ( poolIds === '*' || @@ -55,6 +50,11 @@ export const useActivePools = ({ onCallback, poolIds }: ActivePoolsProps) => { poolNominationsRef ); } + + // Call custom `onCallback` function if provided. + if (typeof onCallback === 'function') { + await onCallback(e.detail); + } } }; diff --git a/src/pages/Pools/Home/Status/MembershipStatus.tsx b/src/pages/Pools/Home/Status/MembershipStatus.tsx index 721c701a13..59b40f75f6 100644 --- a/src/pages/Pools/Home/Status/MembershipStatus.tsx +++ b/src/pages/Pools/Home/Status/MembershipStatus.tsx @@ -13,7 +13,6 @@ 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 = ({ @@ -22,11 +21,10 @@ export const MembershipStatus = ({ }: 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(); @@ -84,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/Wrapper.tsx b/src/pages/Pools/Home/Status/NewMember/Wrapper.tsx new file mode 100644 index 0000000000..32cbdc989f --- /dev/null +++ b/src/pages/Pools/Home/Status/NewMember/Wrapper.tsx @@ -0,0 +1,92 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import styled from 'styled-components'; + +export const NewMemberWrapper = styled.div` + height: inherit; + width: 100%; + + > .inner { + flex: 1; + display: flex; + flex-direction: row; + margin-top: 0.38rem; + + > section { + display: flex; + flex-direction: row; + height: inherit; + + &:first-child { + flex-basis: 70%; + border-right: 1px solid var(--border-primary-color); + padding-right: 1.25rem; + } + + &:last-child { + flex: 1%; + padding-left: 1.25rem; + } + + h3 { + line-height: 1.4rem; + } + + .buttons { + --button-border-radius: 2rem; + background: var(--button-primary-background); + border-radius: var(--button-border-radius); + min-height: 3.75rem; + width: 100%; + height: 3.75rem; + display: flex; + + > button { + padding: 0 1.25rem; + height: inherit; + display: flex; + align-items: center; + justify-content: center; + + &.primary { + background: var(--accent-color-primary); + border-top-left-radius: var(--button-border-radius); + border-bottom-left-radius: var(--button-border-radius); + color: white; + flex-grow: 1; + } + + &.secondary { + color: var(--text-color-primary); + background: var(--button-primary-background); + border-top-right-radius: var(--button-border-radius); + border-bottom-right-radius: var(--button-border-radius); + padding: 0 1.3rem; + height: inherit; + + &.standalone { + border-top-left-radius: var(--button-border-radius); + border-bottom-left-radius: var(--button-border-radius); + flex-grow: 1; + } + } + + > span { + transition: transform 0.2s; + } + + &:hover { + > span { + transform: scale(1.02); + } + } + + > span > svg { + margin: 0 0.5rem; + } + } + } + } + } +`; diff --git a/src/pages/Pools/Home/Status/NewMember/index.tsx b/src/pages/Pools/Home/Status/NewMember/index.tsx new file mode 100644 index 0000000000..c4c4a000fb --- /dev/null +++ b/src/pages/Pools/Home/Status/NewMember/index.tsx @@ -0,0 +1,59 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { NewMemberWrapper } from './Wrapper'; +import { faChevronRight, faUserPlus } from '@fortawesome/free-solid-svg-icons'; +import { useSetup } from 'contexts/Setup'; +import { usePoolsTabs } from '../../context'; +import { useStatusButtons } from '../useStatusButtons'; + +export const NewMember = () => { + const { setOnPoolSetup } = useSetup(); + const { setActiveTab } = usePoolsTabs(); + const { disableJoin, disableCreate } = useStatusButtons(); + + // TODO: update locales. + // title: `${t('pools.create')}${ + // title: `${t('pools.join')}`, + + return ( + +
+
+
+ + +
+
+
+
+ +
+
+
+ + ); +}; diff --git a/src/pages/Pools/Home/Status/index.tsx b/src/pages/Pools/Home/Status/index.tsx index de0cdd6f7e..558b97a69d 100644 --- a/src/pages/Pools/Home/Status/index.tsx +++ b/src/pages/Pools/Home/Status/index.tsx @@ -8,21 +8,34 @@ import { PoolStatus } from './PoolStatus'; import { RewardsStatus } from './RewardsStatus'; import { Separator } from 'kits/Structure/Separator'; import type { StatusProps } from './types'; +import { NewMember } from './NewMember'; +import { useSyncing } from 'hooks/useSyncing'; +import { useActiveAccounts } from 'contexts/ActiveAccounts'; +import { useBalances } from 'contexts/Balances'; export const Status = ({ height }: StatusProps) => { const { activePool } = useActivePool(); + const { getPoolMembership } = useBalances(); + const { poolMembersipSyncing } = useSyncing(); + const { activeAccount } = useActiveAccounts(); + const membership = getPoolMembership(activeAccount); + + const syncing = poolMembersipSyncing(); return ( - {activePool && ( - <> - - - - )} + {!syncing && + (activePool && !!membership ? ( + <> + + + + ) : ( + membership === null && + ))} ); }; diff --git a/src/pages/Pools/Home/Status/useStatusButtons.tsx b/src/pages/Pools/Home/Status/useStatusButtons.tsx index 9ddc1c7adb..53b6ee85d1 100644 --- a/src/pages/Pools/Home/Status/useStatusButtons.tsx +++ b/src/pages/Pools/Home/Status/useStatusButtons.tsx @@ -1,16 +1,13 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { faPlusCircle, faUserPlus } from '@fortawesome/free-solid-svg-icons'; import { useTranslation } from 'react-i18next'; import { useApi } from 'contexts/Api'; import { useActivePool } from 'contexts/Pools/ActivePool'; import { useBondedPools } from 'contexts/Pools/BondedPools'; -import { useSetup } from 'contexts/Setup'; import { useTransferOptions } from 'contexts/TransferOptions'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; -import { usePoolsTabs } from '../context'; import { useBalances } from 'contexts/Balances'; export const useStatusButtons = () => { @@ -20,17 +17,14 @@ export const useStatusButtons = () => { poolsConfig: { maxPools }, } = useApi(); const { isOwner } = useActivePool(); - const { setActiveTab } = usePoolsTabs(); const { bondedPools } = useBondedPools(); const { getPoolMembership } = useBalances(); const { activeAccount } = useActiveAccounts(); const { getTransferOptions } = useTransferOptions(); const { isReadOnlyAccount } = useImportedAccounts(); - const { setOnPoolSetup, getPoolSetupPercent } = useSetup(); const membership = getPoolMembership(activeAccount); const { active } = getTransferOptions(activeAccount).pool; - const poolSetupPercent = getPoolSetupPercent(activeAccount); const disableCreate = () => { if (!isReady || isReadOnlyAccount(activeAccount) || !activeAccount) { @@ -46,34 +40,15 @@ export const useStatusButtons = () => { }; let label; - let buttons; - const createBtn = { - title: `${t('pools.create')}${ - poolSetupPercent > 0 ? `: ${poolSetupPercent}%` : `` - }`, - icon: faPlusCircle, - large: false, - transform: 'grow-1', - disabled: disableCreate(), - onClick: () => setOnPoolSetup(true), - }; - const joinPoolBtn = { - title: `${t('pools.join')}`, - icon: faUserPlus, - large: false, - transform: 'grow-1', - disabled: - !isReady || - isReadOnlyAccount(activeAccount) || - !activeAccount || - !bondedPools.length, - onClick: () => setActiveTab(1), - }; + const disableJoin = () => + !isReady || + isReadOnlyAccount(activeAccount) || + !activeAccount || + !bondedPools.length; if (!membership) { label = t('pools.poolMembership'); - buttons = [createBtn, joinPoolBtn]; } else if (isOwner()) { label = `${t('pools.ownerOfPool')} ${membership.poolId}`; } else if (active?.isGreaterThan(0)) { @@ -81,5 +56,5 @@ export const useStatusButtons = () => { } else { label = `${t('pools.leavingPool')} ${membership.poolId}`; } - return { label, buttons }; + return { label, disableJoin, disableCreate }; }; From 6819901fdb6d724d280c0113b61c75439964cb5c Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Thu, 28 Mar 2024 23:32:14 +0800 Subject: [PATCH 12/98] replace span with button --- .../Pools/Home/Status/NewMember/Wrapper.tsx | 23 ++++++----- .../Pools/Home/Status/NewMember/index.tsx | 39 ++++++++----------- 2 files changed, 30 insertions(+), 32 deletions(-) diff --git a/src/pages/Pools/Home/Status/NewMember/Wrapper.tsx b/src/pages/Pools/Home/Status/NewMember/Wrapper.tsx index 32cbdc989f..2d44336a80 100644 --- a/src/pages/Pools/Home/Status/NewMember/Wrapper.tsx +++ b/src/pages/Pools/Home/Status/NewMember/Wrapper.tsx @@ -42,12 +42,12 @@ export const NewMemberWrapper = styled.div` height: 3.75rem; display: flex; - > button { - padding: 0 1.25rem; + > .button { height: inherit; display: flex; align-items: center; justify-content: center; + overflow: hidden; &.primary { background: var(--accent-color-primary); @@ -62,7 +62,6 @@ export const NewMemberWrapper = styled.div` background: var(--button-primary-background); border-top-right-radius: var(--button-border-radius); border-bottom-right-radius: var(--button-border-radius); - padding: 0 1.3rem; height: inherit; &.standalone { @@ -72,19 +71,23 @@ export const NewMemberWrapper = styled.div` } } - > span { - transition: transform 0.2s; + > button { + color: inherit; + height: inherit; + transition: transform 0.25s; + width: 100%; + padding: 0 1.3rem; + + > svg { + margin: 0 0.5rem; + } } &:hover { - > span { + > button { transform: scale(1.02); } } - - > span > svg { - margin: 0 0.5rem; - } } } } diff --git a/src/pages/Pools/Home/Status/NewMember/index.tsx b/src/pages/Pools/Home/Status/NewMember/index.tsx index c4c4a000fb..039b3e7700 100644 --- a/src/pages/Pools/Home/Status/NewMember/index.tsx +++ b/src/pages/Pools/Home/Status/NewMember/index.tsx @@ -22,35 +22,30 @@ export const NewMember = () => {
- - +
+
+ + + +
- + + +
From c09b2a4c411a9f3327f01431f5d344204785f508 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Thu, 28 Mar 2024 23:40:53 +0800 Subject: [PATCH 13/98] fix --- src/pages/Pools/Home/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/Pools/Home/index.tsx b/src/pages/Pools/Home/index.tsx index 9a1b29ad87..590a49af35 100644 --- a/src/pages/Pools/Home/index.tsx +++ b/src/pages/Pools/Home/index.tsx @@ -31,9 +31,11 @@ import type { PageTitleTabProps } from 'kits/Structure/PageTitleTabs/types'; import { PageRow } from 'kits/Structure/PageRow'; import { RowSection } from 'kits/Structure/RowSection'; import { WithdrawPrompt } from 'library/WithdrawPrompt'; +import { useSyncing } from 'hooks/useSyncing'; export const HomeInner = () => { const { t } = useTranslation('pages'); + const { poolMembersipSyncing } = useSyncing(); const { favorites } = useFavoritePools(); const { openModal } = useOverlay().modal; const { bondedPools } = useBondedPools(); @@ -50,7 +52,7 @@ export const HomeInner = () => { // Calculate the number of _other_ pools the user has a role in. const poolRoleCount = Object.keys(activePools).filter( - (poolId) => poolId === String(membership?.poolId) + (poolId) => poolId !== String(membership?.poolId) ).length; let tabs: PageTitleTabProps[] = [ @@ -91,7 +93,7 @@ export const HomeInner = () => { title={t('pools.pools')} tabs={tabs} button={ - poolRoleCount > 0 + !poolMembersipSyncing() && poolRoleCount > 0 ? { title: t('pools.allRoles'), onClick: () => From a9af1e57a67b7c88311203f489564b8ac4caa7a2 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Fri, 29 Mar 2024 12:36:29 +0800 Subject: [PATCH 14/98] update locales --- src/locale/cn/pages.json | 5 ++-- src/locale/en/pages.json | 4 ++-- src/pages/Nominate/Setup/index.tsx | 2 ++ src/pages/Pools/Create/index.tsx | 2 ++ .../Pools/Home/Status/NewMember/Wrapper.tsx | 4 ++-- .../Pools/Home/Status/NewMember/index.tsx | 23 +++++++++++-------- src/pages/Pools/Home/Status/index.tsx | 2 +- 7 files changed, 26 insertions(+), 16 deletions(-) diff --git a/src/locale/cn/pages.json b/src/locale/cn/pages.json index cca2e74eba..fd4e053831 100644 --- a/src/locale/cn/pages.json +++ b/src/locale/cn/pages.json @@ -137,10 +137,10 @@ "bondedFunds": "己质押金额", "bouncer": "守护人", "browseMembers": "浏览成员", + "browsePools": "浏览提名池", "cancel": "取消", "closePool": "可提取己解锁金额并关闭池", "compound": "复利", - "create": "创建", "createAPool": "创建提名池", "createPool": "创建提名池", "depositor": "存款人", @@ -154,8 +154,9 @@ "generateNominations": "生成提名", "inPool": "提名池中", "inactivePoolNotNominating": "非活跃：提名池未提名任何验证人", - "join": "加入", + "joinPool": "加入池", "leave": "离开", + "leavingPool": "离开提名池中", "leftThePool": "所有成员已离开", "locked": "己锁", diff --git a/src/locale/en/pages.json b/src/locale/en/pages.json index 9c06757d17..b833194a2b 100644 --- a/src/locale/en/pages.json +++ b/src/locale/en/pages.json @@ -139,10 +139,10 @@ "bondedFunds": "Bonded Funds", "bouncer": "Bouncer", "browseMembers": "Browse Members", + "browsePools": "Browse Pools", "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 +156,7 @@ "generateNominations": "Generate Nominations", "inPool": "In Pool", "inactivePoolNotNominating": "Inactive: Pool Not Nominating", - "join": "Join", + "joinPool": "Join Pool", "leave": "Leave", "leavingPool": "Leaving Pool", "leftThePool": "All members have now left the pool", diff --git a/src/pages/Nominate/Setup/index.tsx b/src/pages/Nominate/Setup/index.tsx index a67fc654a9..df7384c110 100644 --- a/src/pages/Nominate/Setup/index.tsx +++ b/src/pages/Nominate/Setup/index.tsx @@ -42,6 +42,7 @@ export const Setup = () => { setOnNominatorSetup(false); } }} + lg /> @@ -53,6 +54,7 @@ export const Setup = () => { setOnNominatorSetup(false); removeSetupProgress('nominator', activeAccount); }} + lg />
diff --git a/src/pages/Pools/Create/index.tsx b/src/pages/Pools/Create/index.tsx index af4d3c5f71..75c6f4c576 100644 --- a/src/pages/Pools/Create/index.tsx +++ b/src/pages/Pools/Create/index.tsx @@ -33,6 +33,7 @@ export const Create = () => { iconLeft={faChevronLeft} iconTransform="shrink-3" onClick={() => setOnPoolSetup(false)} + lg /> @@ -42,6 +43,7 @@ export const Create = () => { setOnPoolSetup(false); removeSetupProgress('pool', activeAccount); }} + lg />
diff --git a/src/pages/Pools/Home/Status/NewMember/Wrapper.tsx b/src/pages/Pools/Home/Status/NewMember/Wrapper.tsx index 2d44336a80..eaa37a67cd 100644 --- a/src/pages/Pools/Home/Status/NewMember/Wrapper.tsx +++ b/src/pages/Pools/Home/Status/NewMember/Wrapper.tsx @@ -19,7 +19,7 @@ export const NewMemberWrapper = styled.div` height: inherit; &:first-child { - flex-basis: 70%; + flex-grow: 1; border-right: 1px solid var(--border-primary-color); padding-right: 1.25rem; } @@ -79,7 +79,7 @@ export const NewMemberWrapper = styled.div` padding: 0 1.3rem; > svg { - margin: 0 0.5rem; + margin: 0 0.75rem; } } diff --git a/src/pages/Pools/Home/Status/NewMember/index.tsx b/src/pages/Pools/Home/Status/NewMember/index.tsx index 039b3e7700..30f6d74984 100644 --- a/src/pages/Pools/Home/Status/NewMember/index.tsx +++ b/src/pages/Pools/Home/Status/NewMember/index.tsx @@ -3,19 +3,22 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { NewMemberWrapper } from './Wrapper'; -import { faChevronRight, faUserPlus } from '@fortawesome/free-solid-svg-icons'; +import { faChevronRight, faUserGroup } from '@fortawesome/free-solid-svg-icons'; import { useSetup } from 'contexts/Setup'; import { usePoolsTabs } from '../../context'; import { useStatusButtons } from '../useStatusButtons'; +import { useActiveAccounts } from 'contexts/ActiveAccounts'; +import { useTranslation } from 'react-i18next'; export const NewMember = () => { + const { t } = useTranslation('pages'); const { setOnPoolSetup } = useSetup(); const { setActiveTab } = usePoolsTabs(); + const { getPoolSetupPercent } = useSetup(); + const { activeAccount } = useActiveAccounts(); const { disableJoin, disableCreate } = useStatusButtons(); - // TODO: update locales. - // title: `${t('pools.create')}${ - // title: `${t('pools.join')}`, + const setupPercent = getPoolSetupPercent(activeAccount); return ( @@ -24,13 +27,14 @@ export const NewMember = () => {
@@ -42,8 +46,9 @@ export const NewMember = () => { onClick={() => setOnPoolSetup(true)} disabled={disableCreate()} > - Create a Pool - + {t('pools.createPool')} + {setupPercent !== 0 && ` - In Progress`} +
diff --git a/src/pages/Pools/Home/Status/index.tsx b/src/pages/Pools/Home/Status/index.tsx index 558b97a69d..ee50cee330 100644 --- a/src/pages/Pools/Home/Status/index.tsx +++ b/src/pages/Pools/Home/Status/index.tsx @@ -18,8 +18,8 @@ export const Status = ({ height }: StatusProps) => { const { getPoolMembership } = useBalances(); const { poolMembersipSyncing } = useSyncing(); const { activeAccount } = useActiveAccounts(); - const membership = getPoolMembership(activeAccount); + const membership = getPoolMembership(activeAccount); const syncing = poolMembersipSyncing(); return ( From 8dafa16d766c91bd6c6558c49eb71b29d41a7d82 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Fri, 29 Mar 2024 12:44:16 +0800 Subject: [PATCH 15/98] init join pool canvas --- src/canvas/JoinPool/index.tsx | 40 +++++++++++++++++++ src/overlay/index.tsx | 2 + .../Pools/Home/Status/NewMember/index.tsx | 13 +++++- 3 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 src/canvas/JoinPool/index.tsx diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx new file mode 100644 index 0000000000..bed3e900a9 --- /dev/null +++ b/src/canvas/JoinPool/index.tsx @@ -0,0 +1,40 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { faArrowsRotate, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { CanvasFullScreenWrapper } from 'canvas/Wrappers'; +import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary'; +import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; +import { useOverlay } from 'kits/Overlay/Provider'; +import { useTranslation } from 'react-i18next'; + +export const JoinPool = () => { + const { t } = useTranslation(); + const { + closeCanvas, + config: { options }, + } = useOverlay().canvas; + + console.log('options: ', options); + return ( + +
+ { + /* TODO: implement */ + }} + lg + /> + closeCanvas()} + iconLeft={faTimes} + style={{ marginLeft: '1.1rem' }} + /> +
+ + ); +}; diff --git a/src/overlay/index.tsx b/src/overlay/index.tsx index 7b76f3821f..257514d077 100644 --- a/src/overlay/index.tsx +++ b/src/overlay/index.tsx @@ -31,6 +31,7 @@ import { ValidatorMetrics } from '../modals/ValidatorMetrics'; import { ValidatorGeo } from '../modals/ValidatorGeo'; import { ManageNominations } from '../canvas/ManageNominations'; import { PoolMembers } from 'canvas/PoolMembers'; +import { JoinPool as JoinPoolCanvas } from 'canvas/JoinPool'; import { Overlay } from 'kits/Overlay'; export const Overlays = () => { @@ -70,6 +71,7 @@ export const Overlays = () => { canvas={{ ManageNominations, PoolMembers, + JoinPoolCanvas, }} /> ); diff --git a/src/pages/Pools/Home/Status/NewMember/index.tsx b/src/pages/Pools/Home/Status/NewMember/index.tsx index 30f6d74984..4699927f39 100644 --- a/src/pages/Pools/Home/Status/NewMember/index.tsx +++ b/src/pages/Pools/Home/Status/NewMember/index.tsx @@ -9,12 +9,14 @@ import { usePoolsTabs } from '../../context'; import { useStatusButtons } from '../useStatusButtons'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useTranslation } from 'react-i18next'; +import { useOverlay } from 'kits/Overlay/Provider'; export const NewMember = () => { const { t } = useTranslation('pages'); const { setOnPoolSetup } = useSetup(); const { setActiveTab } = usePoolsTabs(); const { getPoolSetupPercent } = useSetup(); + const { openCanvas } = useOverlay().canvas; const { activeAccount } = useActiveAccounts(); const { disableJoin, disableCreate } = useStatusButtons(); @@ -26,7 +28,16 @@ export const NewMember = () => {
- From cc92fb0a04943efb7ab02610c5feecc81c9a1473 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Fri, 29 Mar 2024 12:49:44 +0800 Subject: [PATCH 16/98] tsx -> ts --- src/canvas/{Wrappers.tsx => Wrappers.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/canvas/{Wrappers.tsx => Wrappers.ts} (100%) diff --git a/src/canvas/Wrappers.tsx b/src/canvas/Wrappers.ts similarity index 100% rename from src/canvas/Wrappers.tsx rename to src/canvas/Wrappers.ts From 05c881da3dedd0012353e05e5d50dbc9e0ed2bfd Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Fri, 29 Mar 2024 13:03:06 +0800 Subject: [PATCH 17/98] some structural elements --- src/canvas/JoinPool/Wrappers.ts | 33 +++++++++++++++++++++++++++++++++ src/canvas/JoinPool/index.tsx | 14 +++++++++----- 2 files changed, 42 insertions(+), 5 deletions(-) create mode 100644 src/canvas/JoinPool/Wrappers.ts diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts new file mode 100644 index 0000000000..f449826c6d --- /dev/null +++ b/src/canvas/JoinPool/Wrappers.ts @@ -0,0 +1,33 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import styled from 'styled-components'; + +export const JoinPoolInterfaceWrapper = styled.div` + display: flex; + flex-direction: column; + margin-top: 4rem; + width: 100%; + + > .header { + display: flex; + margin-bottom: 2rem; + } + + > .content { + display: flex; + flex: 1; + + > div { + display: flex; + + &:first-child { + flex-grow: 1; + } + + &:last-child { + min-width: 300px; + } + } + } +`; diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index bed3e900a9..4d87595da5 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -7,15 +7,12 @@ import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary'; import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; import { useOverlay } from 'kits/Overlay/Provider'; import { useTranslation } from 'react-i18next'; +import { JoinPoolInterfaceWrapper } from './Wrappers'; export const JoinPool = () => { const { t } = useTranslation(); - const { - closeCanvas, - config: { options }, - } = useOverlay().canvas; + const { closeCanvas } = useOverlay().canvas; - console.log('options: ', options); return (
@@ -35,6 +32,13 @@ export const JoinPool = () => { style={{ marginLeft: '1.1rem' }} />
+ +
Pool Title
+
+
Main content
+
Side content
+
+ ); }; From 55d5f4cf8a2155fa9704f39c59f7dbd7ae5c5a54 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Fri, 29 Mar 2024 13:37:14 +0800 Subject: [PATCH 18/98] prepare start nominating button --- .../CallToAction/index.tsx} | 33 +++++++++----- .../Nominate/Active/Status/NewNominator.tsx | 45 +++++++++++++++++++ .../Active/Status/NominationStatus.tsx | 29 +----------- src/pages/Nominate/Active/Status/index.tsx | 38 ++++++++++++---- src/pages/Nominate/Active/index.tsx | 8 ++-- .../{NewMember/index.tsx => NewMember.tsx} | 19 ++++---- src/pages/Pools/Home/Status/index.tsx | 5 ++- 7 files changed, 114 insertions(+), 63 deletions(-) rename src/{pages/Pools/Home/Status/NewMember/Wrapper.tsx => library/CallToAction/index.tsx} (76%) create mode 100644 src/pages/Nominate/Active/Status/NewNominator.tsx rename src/pages/Pools/Home/Status/{NewMember/index.tsx => NewMember.tsx} (77%) diff --git a/src/pages/Pools/Home/Status/NewMember/Wrapper.tsx b/src/library/CallToAction/index.tsx similarity index 76% rename from src/pages/Pools/Home/Status/NewMember/Wrapper.tsx rename to src/library/CallToAction/index.tsx index eaa37a67cd..a820f6f80c 100644 --- a/src/pages/Pools/Home/Status/NewMember/Wrapper.tsx +++ b/src/library/CallToAction/index.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; -export const NewMemberWrapper = styled.div` +export const CallToActionWrapper = styled.div` height: inherit; width: 100%; @@ -18,15 +18,20 @@ export const NewMemberWrapper = styled.div` flex-direction: row; height: inherit; - &:first-child { + &:nth-child(1) { flex-grow: 1; border-right: 1px solid var(--border-primary-color); - padding-right: 1.25rem; + padding-right: 1rem; } - &:last-child { + &:nth-child(2) { flex: 1%; - padding-left: 1.25rem; + padding-left: 1rem; + } + + &.standalone { + border: none; + padding: 0; } h3 { @@ -41,6 +46,7 @@ export const NewMemberWrapper = styled.div` width: 100%; height: 3.75rem; display: flex; + flex-wrap: nowrap; > .button { height: inherit; @@ -48,6 +54,8 @@ export const NewMemberWrapper = styled.div` align-items: center; justify-content: center; overflow: hidden; + white-space: nowrap; + overflow: hidden; &.primary { background: var(--accent-color-primary); @@ -63,20 +71,23 @@ export const NewMemberWrapper = styled.div` border-top-right-radius: var(--button-border-radius); border-bottom-right-radius: var(--button-border-radius); height: inherit; + } - &.standalone { - border-top-left-radius: var(--button-border-radius); - border-bottom-left-radius: var(--button-border-radius); - flex-grow: 1; - } + &.standalone { + border-radius: var(--button-border-radius); + flex-grow: 1; } > button { color: inherit; height: inherit; transition: transform 0.25s; + padding: 0 2rem; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: nowrap; width: 100%; - padding: 0 1.3rem; > svg { margin: 0 0.75rem; diff --git a/src/pages/Nominate/Active/Status/NewNominator.tsx b/src/pages/Nominate/Active/Status/NewNominator.tsx new file mode 100644 index 0000000000..8182a1b1a6 --- /dev/null +++ b/src/pages/Nominate/Active/Status/NewNominator.tsx @@ -0,0 +1,45 @@ +// 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 { faChevronCircleRight } from '@fortawesome/free-solid-svg-icons'; +import { useTranslation } from 'react-i18next'; +import { useSetup } from 'contexts/Setup'; +import { useActiveAccounts } from 'contexts/ActiveAccounts'; +import { useNavigate } from 'react-router-dom'; +import { useApi } from 'contexts/Api'; + +export const NewNominator = () => { + const { t } = useTranslation('pages'); + const navigate = useNavigate(); + const { isReady } = useApi(); + const { activeAccount } = useActiveAccounts(); + const { setOnNominatorSetup } = useSetup(); + // const setupPercent = getNominatorSetupPercent(activeAccount); + + return ( + +
+
+
+
+ +
+
+ +
+
+
+
+ + ); +}; diff --git a/src/pages/Nominate/Active/Status/NominationStatus.tsx b/src/pages/Nominate/Active/Status/NominationStatus.tsx index 917115018b..5ee363c027 100644 --- a/src/pages/Nominate/Active/Status/NominationStatus.tsx +++ b/src/pages/Nominate/Active/Status/NominationStatus.tsx @@ -1,16 +1,11 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { - faBolt, - faChevronCircleRight, - faSignOutAlt, -} from '@fortawesome/free-solid-svg-icons'; +import { faBolt, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'; import { useTranslation } from 'react-i18next'; import { useApi } from 'contexts/Api'; import { useBonded } from 'contexts/Bonded'; import { useFastUnstake } from 'contexts/FastUnstake'; -import { useSetup } from 'contexts/Setup'; import { useStaking } from 'contexts/Staking'; import { useNominationStatus } from 'hooks/useNominationStatus'; import { useUnstaking } from 'hooks/useUnstaking'; @@ -41,7 +36,6 @@ export const NominationStatus = ({ const { isReadOnlyAccount } = useImportedAccounts(); const { getNominationStatus } = useNominationStatus(); const { getFastUnstakeText, isUnstaking } = useUnstaking(); - const { setOnNominatorSetup, getNominatorSetupPercent } = useSetup(); const fastUnstakeText = getFastUnstakeText(); const controller = getBondedAccount(activeAccount); @@ -67,15 +61,6 @@ export const NominationStatus = ({ onClick: () => openModal({ key: 'Unstake', size: 'sm' }), }; - // Display progress alongside start title if exists and in setup. - let startTitle = t('nominate.startNominating'); - if (inSetup()) { - const progress = getNominatorSetupPercent(activeAccount); - if (progress > 0) { - startTitle += `: ${progress}%`; - } - } - return ( setOnNominatorSetup(true), - }, - ] + : [] } buttonType={buttonType} /> diff --git a/src/pages/Nominate/Active/Status/index.tsx b/src/pages/Nominate/Active/Status/index.tsx index 2ed3ce0c39..23de959e5e 100644 --- a/src/pages/Nominate/Active/Status/index.tsx +++ b/src/pages/Nominate/Active/Status/index.tsx @@ -6,13 +6,33 @@ import { UnclaimedPayoutsStatus } from './UnclaimedPayoutsStatus'; import { NominationStatus } from './NominationStatus'; import { PayoutDestinationStatus } from './PayoutDestinationStatus'; import { Separator } from 'kits/Structure/Separator'; +import { useSyncing } from 'hooks/useSyncing'; +import { useStaking } from 'contexts/Staking'; +import { NewNominator } from './NewNominator'; +import { useActiveAccounts } from 'contexts/ActiveAccounts'; +import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; -export const Status = ({ height }: { height: number }) => ( - - - - - - - -); +export const Status = ({ height }: { height: number }) => { + const { syncing } = useSyncing(); + const { inSetup } = useStaking(); + const { activeAccount } = useActiveAccounts(); + const { isReadOnlyAccount } = useImportedAccounts(); + + return ( + + + + + + {!syncing && + (!inSetup() ? ( + <> + + + + ) : ( + !isReadOnlyAccount(activeAccount) && + ))} + + ); +}; diff --git a/src/pages/Nominate/Active/index.tsx b/src/pages/Nominate/Active/index.tsx index ff0caa1759..cf05491721 100644 --- a/src/pages/Nominate/Active/index.tsx +++ b/src/pages/Nominate/Active/index.tsx @@ -55,14 +55,14 @@ export const Active = () => { - - - - + + + + diff --git a/src/pages/Pools/Home/Status/NewMember/index.tsx b/src/pages/Pools/Home/Status/NewMember.tsx similarity index 77% rename from src/pages/Pools/Home/Status/NewMember/index.tsx rename to src/pages/Pools/Home/Status/NewMember.tsx index 4699927f39..14b95bc379 100644 --- a/src/pages/Pools/Home/Status/NewMember/index.tsx +++ b/src/pages/Pools/Home/Status/NewMember.tsx @@ -2,12 +2,11 @@ // SPDX-License-Identifier: GPL-3.0-only import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { NewMemberWrapper } from './Wrapper'; +import { CallToActionWrapper } from '../../../../library/CallToAction'; import { faChevronRight, faUserGroup } from '@fortawesome/free-solid-svg-icons'; import { useSetup } from 'contexts/Setup'; -import { usePoolsTabs } from '../../context'; -import { useStatusButtons } from '../useStatusButtons'; -import { useActiveAccounts } from 'contexts/ActiveAccounts'; +import { usePoolsTabs } from '../context'; +import { useStatusButtons } from './useStatusButtons'; import { useTranslation } from 'react-i18next'; import { useOverlay } from 'kits/Overlay/Provider'; @@ -15,15 +14,15 @@ export const NewMember = () => { const { t } = useTranslation('pages'); const { setOnPoolSetup } = useSetup(); const { setActiveTab } = usePoolsTabs(); - const { getPoolSetupPercent } = useSetup(); + // const { getPoolSetupPercent } = useSetup(); const { openCanvas } = useOverlay().canvas; - const { activeAccount } = useActiveAccounts(); + // const { activeAccount } = useActiveAccounts(); const { disableJoin, disableCreate } = useStatusButtons(); - const setupPercent = getPoolSetupPercent(activeAccount); + // const setupPercent = getPoolSetupPercent(activeAccount); return ( - +
@@ -45,7 +44,6 @@ export const NewMember = () => {
@@ -58,13 +56,12 @@ export const NewMember = () => { disabled={disableCreate()} > {t('pools.createPool')} - {setupPercent !== 0 && ` - In Progress`}
- + ); }; diff --git a/src/pages/Pools/Home/Status/index.tsx b/src/pages/Pools/Home/Status/index.tsx index ee50cee330..bb9fd85d16 100644 --- a/src/pages/Pools/Home/Status/index.tsx +++ b/src/pages/Pools/Home/Status/index.tsx @@ -12,12 +12,14 @@ import { NewMember } from './NewMember'; import { useSyncing } from 'hooks/useSyncing'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useBalances } from 'contexts/Balances'; +import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; export const Status = ({ height }: StatusProps) => { const { activePool } = useActivePool(); const { getPoolMembership } = useBalances(); const { poolMembersipSyncing } = useSyncing(); const { activeAccount } = useActiveAccounts(); + const { isReadOnlyAccount } = useImportedAccounts(); const membership = getPoolMembership(activeAccount); const syncing = poolMembersipSyncing(); @@ -34,7 +36,8 @@ export const Status = ({ height }: StatusProps) => { ) : ( - membership === null && + membership === null && + !isReadOnlyAccount(activeAccount) && ))} ); From e4d8d719018e8f4d71401344254920601d3f357a Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 14:53:50 +0700 Subject: [PATCH 19/98] secondary section to next line --- src/library/CallToAction/index.tsx | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/library/CallToAction/index.tsx b/src/library/CallToAction/index.tsx index a820f6f80c..f07e116b60 100644 --- a/src/library/CallToAction/index.tsx +++ b/src/library/CallToAction/index.tsx @@ -13,20 +13,40 @@ export const CallToActionWrapper = styled.div` flex-direction: row; margin-top: 0.38rem; + @media (max-width: 650px) { + flex-wrap: wrap; + } + > section { display: flex; flex-direction: row; height: inherit; - &:nth-child(1) { + @media (max-width: 650px) { flex-grow: 1; + flex-basis: 100%; + margin-top: 1.1rem; + + &:nth-child(1) { + margin-top: 0; + } + } + + &:nth-child(1) { border-right: 1px solid var(--border-primary-color); - padding-right: 1rem; + flex-grow: 1; + + @media (min-width: 651px) { + padding-right: 1rem; + } } &:nth-child(2) { - flex: 1%; - padding-left: 1rem; + flex: 1; + + @media (min-width: 651px) { + padding-left: 1rem; + } } &.standalone { From f5bfa7e6bfaf5e82d58756e376d29d39fc249e2d Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 15:00:16 +0700 Subject: [PATCH 20/98] buttons to next line on small screens --- src/library/CallToAction/index.tsx | 30 +++++++++++++------ .../Nominate/Active/Status/NewNominator.tsx | 6 +++- src/pages/Pools/Home/Status/NewMember.tsx | 3 +- 3 files changed, 28 insertions(+), 11 deletions(-) diff --git a/src/library/CallToAction/index.tsx b/src/library/CallToAction/index.tsx index f07e116b60..0e749e1235 100644 --- a/src/library/CallToAction/index.tsx +++ b/src/library/CallToAction/index.tsx @@ -4,6 +4,9 @@ import styled from 'styled-components'; export const CallToActionWrapper = styled.div` + --button-border-radius: 2rem; + --button-vertical-space: 1.1rem; + height: inherit; width: 100%; @@ -23,9 +26,9 @@ export const CallToActionWrapper = styled.div` height: inherit; @media (max-width: 650px) { + margin-top: var(--button-vertical-space); flex-grow: 1; flex-basis: 100%; - margin-top: 1.1rem; &:nth-child(1) { margin-top: 0; @@ -33,10 +36,10 @@ export const CallToActionWrapper = styled.div` } &:nth-child(1) { - border-right: 1px solid var(--border-primary-color); flex-grow: 1; @media (min-width: 651px) { + border-right: 1px solid var(--border-primary-color); padding-right: 1rem; } } @@ -59,17 +62,16 @@ export const CallToActionWrapper = styled.div` } .buttons { - --button-border-radius: 2rem; - background: var(--button-primary-background); - border-radius: var(--button-border-radius); - min-height: 3.75rem; width: 100%; - height: 3.75rem; display: flex; flex-wrap: nowrap; + @media (max-width: 650px) { + flex-wrap: wrap; + } + > .button { - height: inherit; + height: 3.75rem; display: flex; align-items: center; justify-content: center; @@ -90,7 +92,6 @@ export const CallToActionWrapper = styled.div` background: var(--button-primary-background); border-top-right-radius: var(--button-border-radius); border-bottom-right-radius: var(--button-border-radius); - height: inherit; } &.standalone { @@ -98,6 +99,17 @@ export const CallToActionWrapper = styled.div` flex-grow: 1; } + @media (max-width: 650px) { + border-radius: var(--button-border-radius); + margin-top: var(--button-vertical-space); + flex-grow: 1; + flex-basis: 100%; + + &:nth-child(1) { + margin-top: 0; + } + } + > button { color: inherit; height: inherit; diff --git a/src/pages/Nominate/Active/Status/NewNominator.tsx b/src/pages/Nominate/Active/Status/NewNominator.tsx index 8182a1b1a6..5af74941f5 100644 --- a/src/pages/Nominate/Active/Status/NewNominator.tsx +++ b/src/pages/Nominate/Active/Status/NewNominator.tsx @@ -3,7 +3,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { CallToActionWrapper } from 'library/CallToAction'; -import { faChevronCircleRight } from '@fortawesome/free-solid-svg-icons'; +import { + faChevronCircleRight, + faChevronRight, +} from '@fortawesome/free-solid-svg-icons'; import { useTranslation } from 'react-i18next'; import { useSetup } from 'contexts/Setup'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; @@ -35,6 +38,7 @@ export const NewNominator = () => {
diff --git a/src/pages/Pools/Home/Status/NewMember.tsx b/src/pages/Pools/Home/Status/NewMember.tsx index 14b95bc379..16527063e0 100644 --- a/src/pages/Pools/Home/Status/NewMember.tsx +++ b/src/pages/Pools/Home/Status/NewMember.tsx @@ -44,6 +44,7 @@ export const NewMember = () => {
@@ -56,7 +57,7 @@ export const NewMember = () => { disabled={disableCreate()} > {t('pools.createPool')} - + From 7d238c6885270d11c75b14436be8550f46ab1f62 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 15:26:09 +0700 Subject: [PATCH 21/98] amend note --- src/library/Graphs/GeoDonut.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/library/Graphs/GeoDonut.tsx b/src/library/Graphs/GeoDonut.tsx index 3dd8904e45..4ce00d3d13 100644 --- a/src/library/Graphs/GeoDonut.tsx +++ b/src/library/Graphs/GeoDonut.tsx @@ -76,8 +76,8 @@ export const GeoDonut = ({ { label: title, data, - // We make a gradient of N+2 colors from active to inactive, and we discard both ends - // N is the number of datapoints to plot + // We make a gradient of N+2 colors from active to inactive, and we discard both ends N is + // the number of datapoints to plot. backgroundColor: chroma .scale([backgroundColor, graphColors.inactive[mode]]) .colors(data.length + 1), From 05ac346cc9f5f606d0e521d57fd69d59c28e9c00 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 15:29:59 +0700 Subject: [PATCH 22/98] amend brightness on hover --- src/library/CallToAction/index.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/library/CallToAction/index.tsx b/src/library/CallToAction/index.tsx index 0e749e1235..b4ebcfc0c3 100644 --- a/src/library/CallToAction/index.tsx +++ b/src/library/CallToAction/index.tsx @@ -80,18 +80,26 @@ export const CallToActionWrapper = styled.div` overflow: hidden; &.primary { - background: var(--accent-color-primary); + background-color: var(--accent-color-primary); border-top-left-radius: var(--button-border-radius); border-bottom-left-radius: var(--button-border-radius); color: white; flex-grow: 1; + + &:hover { + filter: brightness(90%); + } } &.secondary { - color: var(--text-color-primary); - background: var(--button-primary-background); + background-color: var(--button-primary-background); border-top-right-radius: var(--button-border-radius); border-bottom-right-radius: var(--button-border-radius); + color: var(--text-color-primary); + + &:hover { + filter: brightness(95%); + } } &.standalone { @@ -125,12 +133,6 @@ export const CallToActionWrapper = styled.div` margin: 0 0.75rem; } } - - &:hover { - > button { - transform: scale(1.02); - } - } } } } From 36960709f04012a71c4bb204ab3243a39240b5c8 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 15:30:39 +0700 Subject: [PATCH 23/98] transition filter --- src/library/CallToAction/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/library/CallToAction/index.tsx b/src/library/CallToAction/index.tsx index b4ebcfc0c3..2a7192c927 100644 --- a/src/library/CallToAction/index.tsx +++ b/src/library/CallToAction/index.tsx @@ -78,6 +78,7 @@ export const CallToActionWrapper = styled.div` overflow: hidden; white-space: nowrap; overflow: hidden; + transition: filter 0.15s; &.primary { background-color: var(--accent-color-primary); From d882d97eaaf90eacd75dcf3a80e7b5231cbb4d27 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 15:41:15 +0700 Subject: [PATCH 24/98] add preload to CallToAction --- src/library/Loader/Announcement.tsx | 2 +- src/library/Loader/CallToAction.tsx | 15 +++ .../Loader/{Wrapper.ts => Wrappers.ts} | 0 .../Nominate/Active/Status/NewNominator.tsx | 44 +++++---- src/pages/Nominate/Active/Status/index.tsx | 13 ++- src/pages/Nominate/Active/types.ts | 4 + src/pages/Pools/Home/Status/NewMember.tsx | 93 +++++++++++-------- src/pages/Pools/Home/Status/index.tsx | 11 ++- src/pages/Pools/Home/Status/types.ts | 4 + 9 files changed, 119 insertions(+), 67 deletions(-) create mode 100644 src/library/Loader/CallToAction.tsx rename src/library/Loader/{Wrapper.ts => Wrappers.ts} (100%) diff --git a/src/library/Loader/Announcement.tsx b/src/library/Loader/Announcement.tsx index 3337eebac8..f520e4dabf 100644 --- a/src/library/Loader/Announcement.tsx +++ b/src/library/Loader/Announcement.tsx @@ -1,7 +1,7 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { LoaderWrapper } from './Wrapper'; +import { LoaderWrapper } from './Wrappers'; export const Announcement = () => ( diff --git a/src/library/Loader/CallToAction.tsx b/src/library/Loader/CallToAction.tsx new file mode 100644 index 0000000000..5e1bbfbaeb --- /dev/null +++ b/src/library/Loader/CallToAction.tsx @@ -0,0 +1,15 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { LoaderWrapper } from './Wrappers'; + +export const CallToActionLoader = () => ( + +); diff --git a/src/library/Loader/Wrapper.ts b/src/library/Loader/Wrappers.ts similarity index 100% rename from src/library/Loader/Wrapper.ts rename to src/library/Loader/Wrappers.ts diff --git a/src/pages/Nominate/Active/Status/NewNominator.tsx b/src/pages/Nominate/Active/Status/NewNominator.tsx index 5af74941f5..03be36e1af 100644 --- a/src/pages/Nominate/Active/Status/NewNominator.tsx +++ b/src/pages/Nominate/Active/Status/NewNominator.tsx @@ -12,8 +12,10 @@ import { useSetup } from 'contexts/Setup'; 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'; -export const NewNominator = () => { +export const NewNominator = ({ syncing }: NewNominatorProps) => { const { t } = useTranslation('pages'); const navigate = useNavigate(); const { isReady } = useApi(); @@ -24,25 +26,29 @@ export const NewNominator = () => { return (
-
-
-
- + {syncing ? ( + + ) : ( +
+
+
+ +
+
+ +
-
- -
-
-
+ + )}
); diff --git a/src/pages/Nominate/Active/Status/index.tsx b/src/pages/Nominate/Active/Status/index.tsx index 23de959e5e..8c5bfaed4e 100644 --- a/src/pages/Nominate/Active/Status/index.tsx +++ b/src/pages/Nominate/Active/Status/index.tsx @@ -24,15 +24,20 @@ export const Status = ({ height }: { height: number }) => { - {!syncing && - (!inSetup() ? ( + {!syncing ? ( + !inSetup() ? ( <> ) : ( - !isReadOnlyAccount(activeAccount) && - ))} + !isReadOnlyAccount(activeAccount) && ( + + ) + ) + ) : ( + + )} ); }; diff --git a/src/pages/Nominate/Active/types.ts b/src/pages/Nominate/Active/types.ts index d3c14eeec1..db68ada844 100644 --- a/src/pages/Nominate/Active/types.ts +++ b/src/pages/Nominate/Active/types.ts @@ -10,3 +10,7 @@ export interface BondedChartProps { unlocked: BigNumber; inactive: boolean; } + +export interface NewNominatorProps { + syncing: boolean; +} diff --git a/src/pages/Pools/Home/Status/NewMember.tsx b/src/pages/Pools/Home/Status/NewMember.tsx index 16527063e0..a96cddae28 100644 --- a/src/pages/Pools/Home/Status/NewMember.tsx +++ b/src/pages/Pools/Home/Status/NewMember.tsx @@ -9,8 +9,10 @@ import { usePoolsTabs } from '../context'; 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'; -export const NewMember = () => { +export const NewMember = ({ syncing }: NewMemberProps) => { const { t } = useTranslation('pages'); const { setOnPoolSetup } = useSetup(); const { setActiveTab } = usePoolsTabs(); @@ -24,44 +26,57 @@ export const NewMember = () => { return (
-
-
-
- -
-
- -
-
-
-
-
-
- -
-
-
+ {syncing ? ( + + ) : ( + <> +
+
+
+ +
+ +
+ +
+
+
+
+
+
+ +
+
+
+ + )}
); diff --git a/src/pages/Pools/Home/Status/index.tsx b/src/pages/Pools/Home/Status/index.tsx index bb9fd85d16..0d54a3a96c 100644 --- a/src/pages/Pools/Home/Status/index.tsx +++ b/src/pages/Pools/Home/Status/index.tsx @@ -29,16 +29,19 @@ export const Status = ({ height }: StatusProps) => { - {!syncing && - (activePool && !!membership ? ( + {!syncing ? ( + activePool && !!membership ? ( <> ) : ( membership === null && - !isReadOnlyAccount(activeAccount) && - ))} + !isReadOnlyAccount(activeAccount) && + ) + ) : ( + + )} ); }; diff --git a/src/pages/Pools/Home/Status/types.ts b/src/pages/Pools/Home/Status/types.ts index c1ffc237ef..dc15b67805 100644 --- a/src/pages/Pools/Home/Status/types.ts +++ b/src/pages/Pools/Home/Status/types.ts @@ -9,3 +9,7 @@ export interface MembershipStatusProps { showButtons?: boolean; buttonType?: string; } + +export interface NewMemberProps { + syncing: boolean; +} From 6b429fa91635f0b03746df3a7411c6e541f0326b Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 15:47:30 +0700 Subject: [PATCH 25/98] dim rewards on inactive --- src/library/Stat/index.tsx | 6 +++++- src/library/Stat/types.ts | 1 + src/pages/Nominate/Active/Status/UnclaimedPayoutsStatus.tsx | 3 ++- src/pages/Nominate/Active/Status/index.tsx | 2 +- src/pages/Pools/Home/Status/RewardsStatus.tsx | 3 ++- src/pages/Pools/Home/Status/index.tsx | 2 +- 6 files changed, 12 insertions(+), 5 deletions(-) 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/pages/Nominate/Active/Status/UnclaimedPayoutsStatus.tsx b/src/pages/Nominate/Active/Status/UnclaimedPayoutsStatus.tsx index cca2d2cc3c..46805ace60 100644 --- a/src/pages/Nominate/Active/Status/UnclaimedPayoutsStatus.tsx +++ b/src/pages/Nominate/Active/Status/UnclaimedPayoutsStatus.tsx @@ -13,7 +13,7 @@ import { useNetwork } from 'contexts/Network'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; -export const UnclaimedPayoutsStatus = () => { +export const UnclaimedPayoutsStatus = ({ dimmed }: { dimmed: boolean }) => { const { t } = useTranslation(); const { networkData: { units }, @@ -43,6 +43,7 @@ export const UnclaimedPayoutsStatus = () => { 2 ), }} + dimmed={dimmed} buttons={ Object.keys(unclaimedPayouts || {}).length > 0 && !totalUnclaimed.isZero() diff --git a/src/pages/Nominate/Active/Status/index.tsx b/src/pages/Nominate/Active/Status/index.tsx index 8c5bfaed4e..1c336fd953 100644 --- a/src/pages/Nominate/Active/Status/index.tsx +++ b/src/pages/Nominate/Active/Status/index.tsx @@ -22,7 +22,7 @@ export const Status = ({ height }: { height: number }) => { - + {!syncing ? ( !inSetup() ? ( diff --git a/src/pages/Pools/Home/Status/RewardsStatus.tsx b/src/pages/Pools/Home/Status/RewardsStatus.tsx index fcea3a47a8..c2d2e25862 100644 --- a/src/pages/Pools/Home/Status/RewardsStatus.tsx +++ b/src/pages/Pools/Home/Status/RewardsStatus.tsx @@ -14,7 +14,7 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import { useSyncing } from 'hooks/useSyncing'; -export const RewardsStatus = () => { +export const RewardsStatus = ({ dimmed }: { dimmed: boolean }) => { const { t } = useTranslation('pages'); const { networkData: { units }, @@ -72,6 +72,7 @@ export const RewardsStatus = () => { helpKey="Pool Rewards" type="odometer" stat={{ value: labelRewards }} + dimmed={dimmed} buttons={syncing ? [] : buttonsRewards} /> ); diff --git a/src/pages/Pools/Home/Status/index.tsx b/src/pages/Pools/Home/Status/index.tsx index 0d54a3a96c..14b4de5695 100644 --- a/src/pages/Pools/Home/Status/index.tsx +++ b/src/pages/Pools/Home/Status/index.tsx @@ -28,7 +28,7 @@ export const Status = ({ height }: StatusProps) => { - + {!syncing ? ( activePool && !!membership ? ( <> From f44d6f4e7a1d7fd7fdd7654b37a8c52c311c3cb9 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 15:53:15 +0700 Subject: [PATCH 26/98] prompt border if inactive --- src/library/Card/Wrappers.ts | 6 ++++++ src/pages/Nominate/Active/Status/index.tsx | 5 ++++- src/pages/Pools/Home/Status/index.tsx | 5 ++++- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/library/Card/Wrappers.ts b/src/library/Card/Wrappers.ts index 87e04050d1..347a58dec3 100644 --- a/src/library/Card/Wrappers.ts +++ b/src/library/Card/Wrappers.ts @@ -72,6 +72,7 @@ export const CardHeaderWrapper = styled.div` * Used to separate the main modules throughout the app. */ export const CardWrapper = styled.div` + border: 1px solid transparent; box-shadow: var(--card-shadow); background: var(--background-primary); border-radius: 1.1rem; @@ -82,6 +83,7 @@ export const CardWrapper = styled.div` overflow: hidden; margin-top: 1.4rem; padding: 1.5rem; + transition: border 0.2s; &.canvas { background: var(--background-canvas-card); @@ -101,6 +103,10 @@ export const CardWrapper = styled.div` border: 1px solid var(--status-warning-color); } + &.prompt { + border: 1px solid var(--accent-color-pending); + } + @media (max-width: ${PageWidthMediumThreshold}px) { padding: 1rem 0.75rem; } diff --git a/src/pages/Nominate/Active/Status/index.tsx b/src/pages/Nominate/Active/Status/index.tsx index 1c336fd953..f37a61ec12 100644 --- a/src/pages/Nominate/Active/Status/index.tsx +++ b/src/pages/Nominate/Active/Status/index.tsx @@ -19,7 +19,10 @@ export const Status = ({ height }: { height: number }) => { const { isReadOnlyAccount } = useImportedAccounts(); return ( - + diff --git a/src/pages/Pools/Home/Status/index.tsx b/src/pages/Pools/Home/Status/index.tsx index 14b4de5695..145d1303fa 100644 --- a/src/pages/Pools/Home/Status/index.tsx +++ b/src/pages/Pools/Home/Status/index.tsx @@ -25,7 +25,10 @@ export const Status = ({ height }: StatusProps) => { const syncing = poolMembersipSyncing(); return ( - + From 161ef15facde699adb5f4341e4160db49aeef2b6 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 18:21:12 +0700 Subject: [PATCH 27/98] add border styling --- src/library/CallToAction/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/library/CallToAction/index.tsx b/src/library/CallToAction/index.tsx index 2a7192c927..2100de361e 100644 --- a/src/library/CallToAction/index.tsx +++ b/src/library/CallToAction/index.tsx @@ -62,9 +62,11 @@ export const CallToActionWrapper = styled.div` } .buttons { - width: 100%; + border: 0.75px solid var(--border-primary-color); + border-radius: var(--button-border-radius); display: flex; flex-wrap: nowrap; + width: 100%; @media (max-width: 650px) { flex-wrap: wrap; From c0f7e40f51f7ca894bba55e4bc66215abed310c0 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 19:06:16 +0700 Subject: [PATCH 28/98] add input card --- src/canvas/JoinPool/Wrappers.ts | 64 ++++++++++- src/canvas/JoinPool/index.tsx | 103 +++++++++++++++++- .../Form/ClaimPermissionInput/index.tsx | 52 +++------ src/modals/JoinPool/index.tsx | 25 +---- .../Forms/SetClaimPermission/index.tsx | 3 - 5 files changed, 186 insertions(+), 61 deletions(-) diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index f449826c6d..10d74b53ba 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -26,8 +26,70 @@ export const JoinPoolInterfaceWrapper = styled.div` } &:last-child { - min-width: 300px; + min-width: 450px; } } } `; + +export const TokenInputCardWrapper = styled.div` + background: var(--background-canvas-card); + border: 0.75px solid var(--border-primary-color); + box-shadow: var(--card-shadow); + border-radius: 1.5rem; + padding: 1.25rem; + width: 100%; + + h4 { + display: flex; + align-items: center; + &.note { + color: var(--text-color-secondary); + font-family: Inter, sans-serif; + } + } + + > h2 { + color: var(--text-color-secondary); + } + + > h4 { + margin: 1.75rem 0 0.5rem 0; + color: var(--text-color-tertiary); + + &.underline { + border-bottom: 1px solid var(--border-primary-color); + padding-bottom: 0.5rem; + } + } + + > .input { + border-bottom: 1px solid var(--border-primary-color); + padding: 0 0.25rem; + display: flex; + align-items: flex-end; + padding-bottom: 1.25rem; + + > div { + &:first-child { + flex-grow: 1; + display: flex; + align-items: flex-end; + + > h2 { + font-size: 2rem; + } + } + } + } + + > .available { + margin-top: 0.5rem; + margin-bottom: 1.5rem; + display: flex; + } + + > .submit { + margin-top: 2.5rem; + } +`; diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index 4d87595da5..1c85145115 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -7,11 +7,54 @@ import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary'; import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; import { useOverlay } from 'kits/Overlay/Provider'; import { useTranslation } from 'react-i18next'; -import { JoinPoolInterfaceWrapper } from './Wrappers'; +import { JoinPoolInterfaceWrapper, TokenInputCardWrapper } from './Wrappers'; +import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; +import { ClaimPermissionInput } from 'library/Form/ClaimPermissionInput'; +import type { ClaimPermission } from 'contexts/Pools/types'; +import { useState } from 'react'; +import BigNumber from 'bignumber.js'; +import { useTransferOptions } from 'contexts/TransferOptions'; +import { useActiveAccounts } from 'contexts/ActiveAccounts'; +import { useTxMeta } from 'contexts/TxMeta'; +import { planckToUnit } from '@w3ux/utils'; +import { useNetwork } from 'contexts/Network'; +import { CallToActionWrapper } from 'library/CallToAction'; +import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; +import { useHelp } from 'contexts/Help'; export const JoinPool = () => { const { t } = useTranslation(); + const { + networkData: { units }, + } = useNetwork(); + const { txFees } = useTxMeta(); + const { openHelp } = useHelp(); const { closeCanvas } = useOverlay().canvas; + const { activeAccount } = useActiveAccounts(); + const { getTransferOptions } = useTransferOptions(); + + const { + pool: { totalPossibleBond }, + transferrableBalance, + } = getTransferOptions(activeAccount); + + // if we are bonding, subtract tx fees from bond amount + const freeBondAmount = BigNumber.max(transferrableBalance.minus(txFees), 0); + + // Pool claim permission value. + const [claimPermission, setClaimPermission] = useState< + ClaimPermission | undefined + >('PermissionlessWithdraw'); + + // Local bond value. + const [bond] = useState<{ bond: string }>({ + bond: planckToUnit(totalPossibleBond, units).toString(), + }); + + // Jandler to set bond as a string. + // const handleSetBond = (newBond: { bond: BigNumber }) => { + // setBond({ bond: newBond.bond.toString() }); + // }; return ( @@ -36,7 +79,63 @@ export const JoinPool = () => {
Pool Title
Main content
-
Side content
+
+ +

Join Pool

+

Bond DOT

+ +
+
+

{bond.bond}.00

+
+
+ +
+
+ +
+

You have 0.5 DOT available to bond.

+
+ +

+ Claim Setting + openHelp('Permissionless Claiming')} + /> +

+ + { + setClaimPermission(val); + }} + disabled={!freeBondAmount.isZero()} + /> + +
+ +
+
+
+
+ +
+
+
+
+ +
+ +
diff --git a/src/library/Form/ClaimPermissionInput/index.tsx b/src/library/Form/ClaimPermissionInput/index.tsx index 9915509d6a..3fa83555e7 100644 --- a/src/library/Form/ClaimPermissionInput/index.tsx +++ b/src/library/Form/ClaimPermissionInput/index.tsx @@ -6,38 +6,35 @@ import { useTranslation } from 'react-i18next'; import { TabWrapper, TabsWrapper } from 'library/Filter/Wrappers'; import type { ClaimPermission } from 'contexts/Pools/types'; import type { ClaimPermissionConfig } from '../types'; -import { ActionItem } from 'library/ActionItem'; export interface ClaimPermissionInputProps { current: ClaimPermission | undefined; - permissioned: boolean; onChange: (value: ClaimPermission | undefined) => void; disabled?: boolean; } export const ClaimPermissionInput = ({ current, - permissioned, onChange, disabled = false, }: ClaimPermissionInputProps) => { const { t } = useTranslation('library'); const claimPermissionConfig: ClaimPermissionConfig[] = [ - { - label: t('allowCompound'), - value: 'PermissionlessCompound', - description: t('allowAnyoneCompound'), - }, { label: t('allowWithdraw'), value: 'PermissionlessWithdraw', description: t('allowAnyoneWithdraw'), }, { - label: t('allowAll'), - value: 'PermissionlessAll', - description: t('allowAnyoneCompoundWithdraw'), + label: t('allowCompound'), + value: 'PermissionlessCompound', + description: t('allowAnyoneCompound'), + }, + { + label: 'Permissioned', + value: 'Permissioned', + description: 'Only you can claim rewards.', }, ]; @@ -47,7 +44,7 @@ export const ClaimPermissionInput = ({ ); // Permissionless claim enabled. - const [enabled, setEnabled] = useState(permissioned); + const [enabled] = useState(true); const activeTab = claimPermissionConfig.find( ({ value }) => value === selected @@ -60,28 +57,6 @@ export const ClaimPermissionInput = ({ return ( <> - { - // toggle enable claim permission. - setEnabled(val); - - const newClaimPermission = val - ? claimPermissionConfig[0].value - : current === undefined - ? undefined - : 'Permissioned'; - - setSelected(newClaimPermission); - onChange(newClaimPermission); - }} - disabled={disabled} - inactive={disabled} - /> {label} @@ -108,9 +84,13 @@ export const ClaimPermissionInput = ({ }} > {activeTab ? ( -

{activeTab.description}

+

+ {activeTab.description} +

) : ( -

{t('permissionlessClaimingTurnedOff')}

+

+ {t('permissionlessClaimingTurnedOff')} +

)} diff --git a/src/modals/JoinPool/index.tsx b/src/modals/JoinPool/index.tsx index c53268a453..1aad7dd2df 100644 --- a/src/modals/JoinPool/index.tsx +++ b/src/modals/JoinPool/index.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: GPL-3.0-only import { planckToUnit, unitToPlanck } from '@w3ux/utils'; -import BigNumber from 'bignumber.js'; +import type BigNumber from 'bignumber.js'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useApi } from 'contexts/Api'; @@ -12,7 +12,6 @@ import { defaultPoolProgress } from 'contexts/Setup/defaults'; import { useTransferOptions } from 'contexts/TransferOptions'; import { useTxMeta } from 'contexts/TxMeta'; import { BondFeedback } from 'library/Form/Bond/BondFeedback'; -import { ClaimPermissionInput } from 'library/Form/ClaimPermissionInput'; import { useBatchCall } from 'hooks/useBatchCall'; import { useBondGreatestFee } from 'hooks/useBondGreatestFee'; import { useSignerWarnings } from 'hooks/useSignerWarnings'; @@ -31,10 +30,10 @@ export const JoinPool = () => { const { networkData: { units }, } = useNetwork(); - const { activeAccount } = useActiveAccounts(); const { newBatchCall } = useBatchCall(); const { setActiveAccountSetup } = useSetup(); - const { txFees, notEnoughFunds } = useTxMeta(); + const { activeAccount } = useActiveAccounts(); + const { notEnoughFunds } = useTxMeta(); const { getSignerWarnings } = useSignerWarnings(); const { getTransferOptions } = useTransferOptions(); const { queryPoolMember, addToPoolMembers } = usePoolMembers(); @@ -48,14 +47,10 @@ export const JoinPool = () => { const { pool: { totalPossibleBond }, - transferrableBalance, } = getTransferOptions(activeAccount); const largestTxFee = useBondGreatestFee({ bondFor: 'pool' }); - // if we are bonding, subtract tx fees from bond amount - const freeBondAmount = BigNumber.max(transferrableBalance.minus(txFees), 0); - // local bond value const [bond, setBond] = useState<{ bond: string }>({ bond: planckToUnit(totalPossibleBond, units).toString(), @@ -67,9 +62,9 @@ export const JoinPool = () => { }; // Updated claim permission value - const [claimPermission, setClaimPermission] = useState< - ClaimPermission | undefined - >('Permissioned'); + const [claimPermission] = useState( + 'Permissioned' + ); // bond valid const [bondValid, setBondValid] = useState(false); @@ -149,14 +144,6 @@ export const JoinPool = () => { parentErrors={warnings} txFees={largestTxFee} /> - { - setClaimPermission(val); - }} - disabled={freeBondAmount.isZero()} - /> diff --git a/src/modals/ManagePool/Forms/SetClaimPermission/index.tsx b/src/modals/ManagePool/Forms/SetClaimPermission/index.tsx index 919d3b9198..57a24c4176 100644 --- a/src/modals/ManagePool/Forms/SetClaimPermission/index.tsx +++ b/src/modals/ManagePool/Forms/SetClaimPermission/index.tsx @@ -93,9 +93,6 @@ export const SetClaimPermission = ({ { setClaimPermission(val); }} From 67bcdeec6bdd59c63148c7f78567a2dc0509e057 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 19:07:00 +0700 Subject: [PATCH 29/98] choose another pool --- src/canvas/JoinPool/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index 1c85145115..217d79a8fd 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -60,7 +60,7 @@ export const JoinPool = () => {
{ /* TODO: implement */ From dcad91dca5eca3500f6c9f0e1a1287d510853375 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 19:12:21 +0700 Subject: [PATCH 30/98] amend spacing --- src/canvas/JoinPool/Wrappers.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 10d74b53ba..ecd62b89dc 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -51,10 +51,11 @@ export const TokenInputCardWrapper = styled.div` > h2 { color: var(--text-color-secondary); + margin: 0.25rem 0; } > h4 { - margin: 1.75rem 0 0.5rem 0; + margin: 1.5rem 0 0.5rem 0; color: var(--text-color-tertiary); &.underline { From ea8b398c5633aee5eeeaf8f9306e25043c87be02 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 19:15:44 +0700 Subject: [PATCH 31/98] amend spacing --- src/canvas/JoinPool/Wrappers.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index ecd62b89dc..26fe7b1bf2 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -61,6 +61,7 @@ export const TokenInputCardWrapper = styled.div` &.underline { border-bottom: 1px solid var(--border-primary-color); padding-bottom: 0.5rem; + margin: 2rem 0 1.1rem 0; } } From 1bde7b0e9d0333a19d3f2099094da82f6f9331d9 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 19:15:57 +0700 Subject: [PATCH 32/98] spacing --- src/canvas/JoinPool/Wrappers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 26fe7b1bf2..7714b710d3 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -61,7 +61,7 @@ export const TokenInputCardWrapper = styled.div` &.underline { border-bottom: 1px solid var(--border-primary-color); padding-bottom: 0.5rem; - margin: 2rem 0 1.1rem 0; + margin: 2rem 0 1rem 0; } } From 060ed776cd7914471a3ba460f97fcf23a5345420 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 21:11:20 +0700 Subject: [PATCH 33/98] JoinForm, add pool title --- src/canvas/JoinPool/JoinForm.tsx | 103 ++++++++++++++++++ src/canvas/JoinPool/Wrappers.ts | 25 +++++ src/canvas/JoinPool/index.tsx | 126 ++++++----------------- src/contexts/Pools/BondedPools/index.tsx | 2 +- 4 files changed, 163 insertions(+), 93 deletions(-) create mode 100644 src/canvas/JoinPool/JoinForm.tsx diff --git a/src/canvas/JoinPool/JoinForm.tsx b/src/canvas/JoinPool/JoinForm.tsx new file mode 100644 index 0000000000..faa327f149 --- /dev/null +++ b/src/canvas/JoinPool/JoinForm.tsx @@ -0,0 +1,103 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { planckToUnit } from '@w3ux/utils'; +import BigNumber from 'bignumber.js'; +import { useActiveAccounts } from 'contexts/ActiveAccounts'; +import { useHelp } from 'contexts/Help'; +import { useNetwork } from 'contexts/Network'; +import type { ClaimPermission } from 'contexts/Pools/types'; +import { useTransferOptions } from 'contexts/TransferOptions'; +import { useTxMeta } from 'contexts/TxMeta'; +import { useState } from 'react'; +import { TokenInputCardWrapper } from './Wrappers'; +import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; +import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; +import { ClaimPermissionInput } from 'library/Form/ClaimPermissionInput'; +import { CallToActionWrapper } from 'library/CallToAction'; + +export const JoinForm = () => { + const { + networkData: { units }, + } = useNetwork(); + const { txFees } = useTxMeta(); + const { openHelp } = useHelp(); + const { activeAccount } = useActiveAccounts(); + const { getTransferOptions } = useTransferOptions(); + + const { + pool: { totalPossibleBond }, + transferrableBalance, + } = getTransferOptions(activeAccount); + + // Pool claim permission value. + const [claimPermission, setClaimPermission] = useState< + ClaimPermission | undefined + >('PermissionlessWithdraw'); + + // Local bond value. + const [bond] = useState<{ bond: string }>({ + bond: planckToUnit(totalPossibleBond, units).toString(), + }); + + // if we are bonding, subtract tx fees from bond amount + const freeBondAmount = BigNumber.max(transferrableBalance.minus(txFees), 0); + + return ( + +

Join Pool

+

Bond DOT

+ +
+
+

{bond.bond}.00

+
+
+ +
+
+ +
+

You have 0.5 DOT available to bond.

+
+ +

+ Claim Setting + openHelp('Permissionless Claiming')} + /> +

+ + { + setClaimPermission(val); + }} + disabled={!freeBondAmount.isZero()} + /> + +
+ +
+
+
+
+ +
+
+
+
+ +
+ + ); +}; diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 7714b710d3..daeb164765 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -32,6 +32,31 @@ export const JoinPoolInterfaceWrapper = styled.div` } `; +export const TitleWrapper = styled.div` + display: flex; + margin-bottom: 2.5rem; + width: 100%; + + > .inner { + display: flex; + align-items: center; + flex: 1; + + > div { + display: flex; + + &:nth-child(2) { + flex-grow: 1; + padding-left: 1rem; + + > h1 { + margin: 0; + } + } + } + } +`; + export const TokenInputCardWrapper = styled.div` background: var(--background-canvas-card); border: 0.75px solid var(--border-primary-color); diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index 217d79a8fd..8ab389b322 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -7,49 +7,28 @@ import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary'; import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; import { useOverlay } from 'kits/Overlay/Provider'; import { useTranslation } from 'react-i18next'; -import { JoinPoolInterfaceWrapper, TokenInputCardWrapper } from './Wrappers'; -import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; -import { ClaimPermissionInput } from 'library/Form/ClaimPermissionInput'; -import type { ClaimPermission } from 'contexts/Pools/types'; +import { JoinPoolInterfaceWrapper, TitleWrapper } from './Wrappers'; +import { useBondedPools } from 'contexts/Pools/BondedPools'; +import { JoinForm } from './JoinForm'; +import { determinePoolDisplay, remToUnit } from '@w3ux/utils'; +import { Polkicon } from '@w3ux/react-polkicon'; import { useState } from 'react'; -import BigNumber from 'bignumber.js'; -import { useTransferOptions } from 'contexts/TransferOptions'; -import { useActiveAccounts } from 'contexts/ActiveAccounts'; -import { useTxMeta } from 'contexts/TxMeta'; -import { planckToUnit } from '@w3ux/utils'; -import { useNetwork } from 'contexts/Network'; -import { CallToActionWrapper } from 'library/CallToAction'; -import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; -import { useHelp } from 'contexts/Help'; export const JoinPool = () => { const { t } = useTranslation(); - const { - networkData: { units }, - } = useNetwork(); - const { txFees } = useTxMeta(); - const { openHelp } = useHelp(); - const { closeCanvas } = useOverlay().canvas; - const { activeAccount } = useActiveAccounts(); - const { getTransferOptions } = useTransferOptions(); const { - pool: { totalPossibleBond }, - transferrableBalance, - } = getTransferOptions(activeAccount); - - // if we are bonding, subtract tx fees from bond amount - const freeBondAmount = BigNumber.max(transferrableBalance.minus(txFees), 0); - - // Pool claim permission value. - const [claimPermission, setClaimPermission] = useState< - ClaimPermission | undefined - >('PermissionlessWithdraw'); + closeCanvas, + config: { options }, + } = useOverlay().canvas; + const { bondedPools, getBondedPool, poolsMetaData } = useBondedPools(); - // Local bond value. - const [bond] = useState<{ bond: string }>({ - bond: planckToUnit(totalPossibleBond, units).toString(), - }); + // The selected pool id. Use the provided poolId, or assign a random pool. + const [selectedPoolId] = useState( + options?.poolId || Math.floor(Math.random() * bondedPools.length - 1) + ); + const bondedPool = getBondedPool(selectedPoolId); + const metadata = poolsMetaData[selectedPoolId]; // Jandler to set bond as a string. // const handleSetBond = (newBond: { bond: BigNumber }) => { @@ -76,65 +55,28 @@ export const JoinPool = () => { />
-
Pool Title
+ +
+
+ +
+
+

+ {determinePoolDisplay( + bondedPool?.addresses.stash || '', + metadata + )} +

+
+
+
Main content
- -

Join Pool

-

Bond DOT

- -
-
-

{bond.bond}.00

-
-
- -
-
- -
-

You have 0.5 DOT available to bond.

-
- -

- Claim Setting - openHelp('Permissionless Claiming')} - /> -

- - { - setClaimPermission(val); - }} - disabled={!freeBondAmount.isZero()} - /> - -
- -
-
-
-
- -
-
-
-
- -
- +
diff --git a/src/contexts/Pools/BondedPools/index.tsx b/src/contexts/Pools/BondedPools/index.tsx index c04740677e..c070f79a8f 100644 --- a/src/contexts/Pools/BondedPools/index.tsx +++ b/src/contexts/Pools/BondedPools/index.tsx @@ -199,7 +199,7 @@ export const BondedPoolsProvider = ({ children }: { children: ReactNode }) => { }); const getBondedPool = (poolId: MaybePool) => - bondedPools.find((p) => p.id === poolId) ?? null; + bondedPools.find((p) => String(p.id) === String(poolId)) ?? null; /* * poolSearchFilter Iterates through the supplied list and refers to the meta batch of the list to From 9c060b3ceecbbb6db1fc8c403014bc4eea770065 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 21:42:43 +0700 Subject: [PATCH 34/98] tab and title boilerplate --- src/canvas/JoinPool/Wrappers.ts | 19 +++++- src/canvas/JoinPool/index.tsx | 65 ++++++++++++++++++--- src/kits/Buttons/index.scss | 8 +++ src/kits/Structure/PageTitle/types.ts | 4 ++ src/kits/Structure/PageTitleTabs/Wrapper.ts | 4 ++ src/kits/Structure/PageTitleTabs/index.tsx | 12 +++- src/theme/theme.scss | 2 + 7 files changed, 103 insertions(+), 11 deletions(-) diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index daeb164765..464c8c102e 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -34,12 +34,14 @@ export const JoinPoolInterfaceWrapper = styled.div` export const TitleWrapper = styled.div` display: flex; - margin-bottom: 2.5rem; + flex-direction: column; + margin-bottom: 1rem; width: 100%; > .inner { display: flex; align-items: center; + margin-bottom: 1rem; flex: 1; > div { @@ -47,11 +49,24 @@ export const TitleWrapper = styled.div` &:nth-child(2) { flex-grow: 1; - padding-left: 1rem; + padding-left: 0.75rem; + display: flex; + flex-direction: column; > h1 { margin: 0; } + + > .labels { + display: flex; + margin-top: 0.75rem; + + > h3 { + color: var(--text-color-secondary); + font-family: Inter, sans-serif; + margin: 0; + } + } } } } diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index 8ab389b322..62a74dbca7 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -13,6 +13,9 @@ import { JoinForm } from './JoinForm'; import { determinePoolDisplay, remToUnit } from '@w3ux/utils'; import { Polkicon } from '@w3ux/react-polkicon'; import { useState } from 'react'; +import { PageTitleTabs } from 'kits/Structure/PageTitleTabs'; +import { useApi } from 'contexts/Api'; +import type { PageTitleTabProps } from 'kits/Structure/PageTitleTabs/types'; export const JoinPool = () => { const { t } = useTranslation(); @@ -21,29 +24,65 @@ export const JoinPool = () => { closeCanvas, config: { options }, } = useOverlay().canvas; - const { bondedPools, getBondedPool, poolsMetaData } = useBondedPools(); + const { counterForBondedPools } = useApi().poolsConfig; + const { getBondedPool, poolsMetaData } = useBondedPools(); + + // The active canvas tab. + const [activeTab, setActiveTab] = useState(0); // The selected pool id. Use the provided poolId, or assign a random pool. - const [selectedPoolId] = useState( - options?.poolId || Math.floor(Math.random() * bondedPools.length - 1) + const [selectedPoolId, setSelectedPoolId] = useState( + options?.poolId || + Math.floor(Math.random() * counterForBondedPools.minus(1).toNumber()) ); + + // Ensure bonded pool exists, and close canvas if not. const bondedPool = getBondedPool(selectedPoolId); + + if (!bondedPool) { + closeCanvas(); + return null; + } + const metadata = poolsMetaData[selectedPoolId]; + // Generate a new pool to display. + // TODO: Take into consideration status and recent activity. + // TODO: Choose a random index from bondedPools. + const handleChooseNewPool = () => { + setSelectedPoolId( + Math.ceil(Math.random() * counterForBondedPools.minus(1).toNumber()) + ); + }; + // Jandler to set bond as a string. // const handleSetBond = (newBond: { bond: BigNumber }) => { // setBond({ bond: newBond.bond.toString() }); // }; + // Tabs for the canvas. + // TODO: Implement the Nominations tab and tab switching. + let tabs: PageTitleTabProps[] = [ + { + title: t('pools.overview', { ns: 'pages' }), + active: activeTab === 0, + onClick: () => setActiveTab(0), + }, + ]; + + tabs = tabs.concat({ + title: 'Nominations', + active: activeTab === 1, + onClick: () => setActiveTab(1), + }); + return (
{ - /* TODO: implement */ - }} + onClick={() => handleChooseNewPool()} lg /> {
@@ -70,8 +110,19 @@ export const JoinPool = () => { metadata )}

+
+

Active

+
+ {tabs.length > 0 && ( + + )}
Main content
diff --git a/src/kits/Buttons/index.scss b/src/kits/Buttons/index.scss index 2ecc25d1e1..4db73fb861 100644 --- a/src/kits/Buttons/index.scss +++ b/src/kits/Buttons/index.scss @@ -440,6 +440,14 @@ border: 1px solid var(--border-secondary-color); } } + + &.canvas { + border: 1px solid var(--border-secondary-color); + + &.active { + background: var(--button-tab-canvas-background); + } + } } .btn-tertiary { diff --git a/src/kits/Structure/PageTitle/types.ts b/src/kits/Structure/PageTitle/types.ts index bedc24c1d9..c71624a590 100644 --- a/src/kits/Structure/PageTitle/types.ts +++ b/src/kits/Structure/PageTitle/types.ts @@ -4,6 +4,10 @@ import type { PageTitleTabsProps } from '../PageTitleTabs/types'; export type PageTitleProps = PageTitleTabsProps & { + // tab button class. + tabClassName?: string; + // whether tabs are inline. + inline?: boolean; // title of the page. title?: string; // a button right next to the page title. diff --git a/src/kits/Structure/PageTitleTabs/Wrapper.ts b/src/kits/Structure/PageTitleTabs/Wrapper.ts index d9dcdf0bc1..7137b57580 100644 --- a/src/kits/Structure/PageTitleTabs/Wrapper.ts +++ b/src/kits/Structure/PageTitleTabs/Wrapper.ts @@ -11,6 +11,10 @@ export const Wrapper = styled.section` margin-top: 0.9rem; max-width: 100%; + &.inline { + border-bottom: none; + } + @media (max-width: ${PageWidthMediumThreshold}px) { margin-top: 0.5rem; } diff --git a/src/kits/Structure/PageTitleTabs/index.tsx b/src/kits/Structure/PageTitleTabs/index.tsx index 180de7132a..5855b96cb5 100644 --- a/src/kits/Structure/PageTitleTabs/index.tsx +++ b/src/kits/Structure/PageTitleTabs/index.tsx @@ -11,13 +11,21 @@ import { Wrapper } from './Wrapper'; * @name PageTitleTabs * @summary The element in a page title. Inculding the ButtonTab. */ -export const PageTitleTabs = ({ sticky, tabs = [] }: PageTitleProps) => ( - +export const PageTitleTabs = ({ + sticky, + tabs = [], + inline = false, + tabClassName, +}: PageTitleProps) => ( +
{tabs.map( ({ active, onClick, title, badge }: PageTitleTabProps, i: number) => ( onClick()} diff --git a/src/theme/theme.scss b/src/theme/theme.scss index aab7daf572..00352a9122 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -23,6 +23,7 @@ SPDX-License-Identifier: GPL-3.0-only */ --button-secondary-background: #e7e5e5; --button-tertiary-background: #ececec; --button-tab-background: #e4e2e2; + --button-tab-canvas-background: #dedede; --button-hover-background: #e8e6e6; --card-shadow-color: rgb(158 158 158 / 20%); --card-deep-shadow-color: rgb(158 158 158 / 50%); @@ -100,6 +101,7 @@ SPDX-License-Identifier: GPL-3.0-only */ --button-secondary-background: rgb(55 50 55); --button-tertiary-background: rgb(54 49 54); --button-tab-background: rgb(56 51 56); + --button-tab-canvas-background: rgb(60 59 60);; --button-hover-background: rgb(66 61 68); --card-shadow-color: rgb(28 24 28 / 25%); --card-deep-shadow-color: rgb(28 24 28 / 50%); From 87e0b6d7a3d304cf1ba26c30f91e1a6afbd3f90b Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sat, 30 Mar 2024 21:47:07 +0700 Subject: [PATCH 35/98] spacing --- src/canvas/JoinPool/Wrappers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 464c8c102e..50c90d67a1 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -59,7 +59,7 @@ export const TitleWrapper = styled.div` > .labels { display: flex; - margin-top: 0.75rem; + margin-top: 0.9rem; > h3 { color: var(--text-color-secondary); From 661823262de7ffeab404fb709b20eba24e6776ad Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sun, 31 Mar 2024 15:40:14 +0700 Subject: [PATCH 36/98] finalise header design --- src/canvas/JoinPool/JoinForm.tsx | 6 ++--- src/canvas/JoinPool/Wrappers.ts | 29 +++++++++++++++++----- src/canvas/JoinPool/index.tsx | 41 ++++++++++++++++++++++---------- 3 files changed, 54 insertions(+), 22 deletions(-) diff --git a/src/canvas/JoinPool/JoinForm.tsx b/src/canvas/JoinPool/JoinForm.tsx index faa327f149..8d9bf210ca 100644 --- a/src/canvas/JoinPool/JoinForm.tsx +++ b/src/canvas/JoinPool/JoinForm.tsx @@ -10,7 +10,7 @@ import type { ClaimPermission } from 'contexts/Pools/types'; import { useTransferOptions } from 'contexts/TransferOptions'; import { useTxMeta } from 'contexts/TxMeta'; import { useState } from 'react'; -import { TokenInputCardWrapper } from './Wrappers'; +import { JoinFormWrapper } from './Wrappers'; import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; import { ClaimPermissionInput } from 'library/Form/ClaimPermissionInput'; @@ -44,7 +44,7 @@ export const JoinForm = () => { const freeBondAmount = BigNumber.max(transferrableBalance.minus(txFees), 0); return ( - +

Join Pool

Bond DOT

@@ -98,6 +98,6 @@ export const JoinForm = () => {
- + ); }; diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 50c90d67a1..6b8c69e010 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -6,7 +6,7 @@ import styled from 'styled-components'; export const JoinPoolInterfaceWrapper = styled.div` display: flex; flex-direction: column; - margin-top: 4rem; + margin-top: 2rem; width: 100%; > .header { @@ -33,15 +33,17 @@ export const JoinPoolInterfaceWrapper = styled.div` `; export const TitleWrapper = styled.div` + border-bottom: 1px solid var(--border-secondary-color); display: flex; flex-direction: column; - margin-bottom: 1rem; + margin-bottom: 0.75rem; + padding-bottom: 0.2rem; width: 100%; > .inner { display: flex; align-items: center; - margin-bottom: 1rem; + margin-bottom: 0.5rem; flex: 1; > div { @@ -49,7 +51,7 @@ export const TitleWrapper = styled.div` &:nth-child(2) { flex-grow: 1; - padding-left: 0.75rem; + padding-left: 1.1rem; display: flex; flex-direction: column; @@ -59,12 +61,16 @@ export const TitleWrapper = styled.div` > .labels { display: flex; - margin-top: 0.9rem; + margin-top: 0.65rem; > h3 { color: var(--text-color-secondary); font-family: Inter, sans-serif; margin: 0; + + > svg { + margin: 0 0 0 0.2rem; + } } } } @@ -72,12 +78,13 @@ export const TitleWrapper = styled.div` } `; -export const TokenInputCardWrapper = styled.div` +export const JoinFormWrapper = styled.div` background: var(--background-canvas-card); border: 0.75px solid var(--border-primary-color); box-shadow: var(--card-shadow); border-radius: 1.5rem; padding: 1.25rem; + margin-top: 0.75rem; width: 100%; h4 { @@ -135,3 +142,13 @@ export const TokenInputCardWrapper = styled.div` margin-top: 2.5rem; } `; + +export const StatsWrapper = styled.div` + display: flex; + + > h3 { + color: var(--text-color-secondary); + font-family: Inter, sans-serif; + margin: 0; + } +`; diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index 62a74dbca7..93edfe9dc9 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -1,13 +1,21 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { faArrowsRotate, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { + faArrowsRotate, + faHashtag, + faTimes, +} from '@fortawesome/free-solid-svg-icons'; import { CanvasFullScreenWrapper } from 'canvas/Wrappers'; import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary'; import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; import { useOverlay } from 'kits/Overlay/Provider'; import { useTranslation } from 'react-i18next'; -import { JoinPoolInterfaceWrapper, TitleWrapper } from './Wrappers'; +import { + JoinPoolInterfaceWrapper, + StatsWrapper, + TitleWrapper, +} from './Wrappers'; import { useBondedPools } from 'contexts/Pools/BondedPools'; import { JoinForm } from './JoinForm'; import { determinePoolDisplay, remToUnit } from '@w3ux/utils'; @@ -16,6 +24,7 @@ import { useState } from 'react'; import { PageTitleTabs } from 'kits/Structure/PageTitleTabs'; import { useApi } from 'contexts/Api'; import type { PageTitleTabProps } from 'kits/Structure/PageTitleTabs/types'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export const JoinPool = () => { const { t } = useTranslation(); @@ -99,7 +108,7 @@ export const JoinPool = () => {
@@ -111,21 +120,27 @@ export const JoinPool = () => { )}
-

Active

+

+ Pool + {bondedPool.id} +

- {tabs.length > 0 && ( - - )} + +
-
Main content
+
+ +

Active

+ +
From 135f93dba6e46436722901c4c08415068f431a01 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sun, 31 Mar 2024 15:41:58 +0700 Subject: [PATCH 37/98] spacing --- src/canvas/JoinPool/Wrappers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 6b8c69e010..8cd5ca14bc 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -51,7 +51,7 @@ export const TitleWrapper = styled.div` &:nth-child(2) { flex-grow: 1; - padding-left: 1.1rem; + padding-left: 1rem; display: flex; flex-direction: column; From 31c32b7abab01f2c4611b94900a1ec87762cf6de Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sun, 31 Mar 2024 15:49:03 +0700 Subject: [PATCH 38/98] abstract join pool Header --- src/canvas/JoinPool/Header.tsx | 109 +++++++++++++++++++++++++++++++ src/canvas/JoinPool/JoinForm.tsx | 6 ++ src/canvas/JoinPool/Wrappers.ts | 3 +- src/canvas/JoinPool/index.tsx | 107 +++--------------------------- 4 files changed, 126 insertions(+), 99 deletions(-) create mode 100644 src/canvas/JoinPool/Header.tsx diff --git a/src/canvas/JoinPool/Header.tsx b/src/canvas/JoinPool/Header.tsx new file mode 100644 index 0000000000..eb00bd02e8 --- /dev/null +++ b/src/canvas/JoinPool/Header.tsx @@ -0,0 +1,109 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { + faArrowsRotate, + faHashtag, + faTimes, +} from '@fortawesome/free-solid-svg-icons'; +import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary'; +import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; +import { TitleWrapper } from './Wrappers'; +import { Polkicon } from '@w3ux/react-polkicon'; +import { determinePoolDisplay, remToUnit } from '@w3ux/utils'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { PageTitleTabs } from 'kits/Structure/PageTitleTabs'; +import type { PageTitleTabProps } from 'kits/Structure/PageTitleTabs/types'; +import type { AnyJson } from '@w3ux/utils/types'; +import { useApi } from 'contexts/Api'; +import { useTranslation } from 'react-i18next'; +import { useOverlay } from 'kits/Overlay/Provider'; + +export const Header = ({ + activeTab, + setActiveTab, + setSelectedPoolId, + bondedPool, + metadata, +}: AnyJson) => { + const { t } = useTranslation(); + const { closeCanvas } = useOverlay().canvas; + const { counterForBondedPools } = useApi().poolsConfig; + + // Generate a new pool to display. + // TODO: Take into consideration status and recent activity. + // TODO: Choose a random index from bondedPools. + const handleChooseNewPool = () => { + setSelectedPoolId( + Math.ceil(Math.random() * counterForBondedPools.minus(1).toNumber()) + ); + }; + + // Tabs for the canvas. + // TODO: Implement the Nominations tab and tab switching. + let tabs: PageTitleTabProps[] = [ + { + title: t('pools.overview', { ns: 'pages' }), + active: activeTab === 0, + onClick: () => setActiveTab(0), + }, + ]; + + tabs = tabs.concat({ + title: 'Nominations', + active: activeTab === 1, + onClick: () => setActiveTab(1), + }); + + return ( + <> +
+ handleChooseNewPool()} + lg + /> + closeCanvas()} + iconLeft={faTimes} + style={{ marginLeft: '1.1rem' }} + /> +
+ +
+
+ +
+
+

+ {determinePoolDisplay( + bondedPool?.addresses.stash || '', + metadata + )} +

+
+

+ Pool + {bondedPool.id} +

+
+
+
+ + + + + ); +}; diff --git a/src/canvas/JoinPool/JoinForm.tsx b/src/canvas/JoinPool/JoinForm.tsx index 8d9bf210ca..358b98a8d0 100644 --- a/src/canvas/JoinPool/JoinForm.tsx +++ b/src/canvas/JoinPool/JoinForm.tsx @@ -43,6 +43,12 @@ export const JoinForm = () => { // if we are bonding, subtract tx fees from bond amount const freeBondAmount = BigNumber.max(transferrableBalance.minus(txFees), 0); + // Handler to set bond as a string. + // TODO: Implement. + // const handleSetBond = (newBond: { bond: BigNumber }) => { + // setBond({ bond: newBond.bond.toString() }); + // }; + return (

Join Pool

diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 8cd5ca14bc..82ad6cb902 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -6,7 +6,6 @@ import styled from 'styled-components'; export const JoinPoolInterfaceWrapper = styled.div` display: flex; flex-direction: column; - margin-top: 2rem; width: 100%; > .header { @@ -36,7 +35,7 @@ export const TitleWrapper = styled.div` border-bottom: 1px solid var(--border-secondary-color); display: flex; flex-direction: column; - margin-bottom: 0.75rem; + margin: 0.25rem 0 0.75rem 0; padding-bottom: 0.2rem; width: 100%; diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index 93edfe9dc9..426c7f64e8 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -1,34 +1,16 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { - faArrowsRotate, - faHashtag, - faTimes, -} from '@fortawesome/free-solid-svg-icons'; import { CanvasFullScreenWrapper } from 'canvas/Wrappers'; -import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary'; -import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; import { useOverlay } from 'kits/Overlay/Provider'; -import { useTranslation } from 'react-i18next'; -import { - JoinPoolInterfaceWrapper, - StatsWrapper, - TitleWrapper, -} from './Wrappers'; +import { JoinPoolInterfaceWrapper, StatsWrapper } from './Wrappers'; import { useBondedPools } from 'contexts/Pools/BondedPools'; import { JoinForm } from './JoinForm'; -import { determinePoolDisplay, remToUnit } from '@w3ux/utils'; -import { Polkicon } from '@w3ux/react-polkicon'; import { useState } from 'react'; -import { PageTitleTabs } from 'kits/Structure/PageTitleTabs'; import { useApi } from 'contexts/Api'; -import type { PageTitleTabProps } from 'kits/Structure/PageTitleTabs/types'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Header } from './Header'; export const JoinPool = () => { - const { t } = useTranslation(); - const { closeCanvas, config: { options }, @@ -55,86 +37,17 @@ export const JoinPool = () => { const metadata = poolsMetaData[selectedPoolId]; - // Generate a new pool to display. - // TODO: Take into consideration status and recent activity. - // TODO: Choose a random index from bondedPools. - const handleChooseNewPool = () => { - setSelectedPoolId( - Math.ceil(Math.random() * counterForBondedPools.minus(1).toNumber()) - ); - }; - - // Jandler to set bond as a string. - // const handleSetBond = (newBond: { bond: BigNumber }) => { - // setBond({ bond: newBond.bond.toString() }); - // }; - - // Tabs for the canvas. - // TODO: Implement the Nominations tab and tab switching. - let tabs: PageTitleTabProps[] = [ - { - title: t('pools.overview', { ns: 'pages' }), - active: activeTab === 0, - onClick: () => setActiveTab(0), - }, - ]; - - tabs = tabs.concat({ - title: 'Nominations', - active: activeTab === 1, - onClick: () => setActiveTab(1), - }); - return ( -
- handleChooseNewPool()} - lg - /> - closeCanvas()} - iconLeft={faTimes} - style={{ marginLeft: '1.1rem' }} - /> -
- - -
-
- -
-
-

- {determinePoolDisplay( - bondedPool?.addresses.stash || '', - metadata - )} -

-
-

- Pool - {bondedPool.id} -

-
-
-
+
- - +
From c1da47c7ac88504ffdfd9d0d401bd4890b2cefe1 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sun, 31 Mar 2024 16:28:50 +0700 Subject: [PATCH 39/98] implement pool nominations tab --- src/canvas/JoinPool/Nominations/index.tsx | 45 +++++++++++++++++++ .../JoinPool/{ => Overview}/JoinForm.tsx | 2 +- src/canvas/JoinPool/Overview/index.tsx | 18 ++++++++ src/canvas/JoinPool/Wrappers.ts | 12 +++-- src/canvas/JoinPool/index.tsx | 32 ++++++++----- .../ValidatorItem/Nomination.tsx | 16 ++++--- src/modals/PoolNominations/index.tsx | 2 +- 7 files changed, 104 insertions(+), 23 deletions(-) create mode 100644 src/canvas/JoinPool/Nominations/index.tsx rename src/canvas/JoinPool/{ => Overview}/JoinForm.tsx (98%) create mode 100644 src/canvas/JoinPool/Overview/index.tsx diff --git a/src/canvas/JoinPool/Nominations/index.tsx b/src/canvas/JoinPool/Nominations/index.tsx new file mode 100644 index 0000000000..d22b6eb051 --- /dev/null +++ b/src/canvas/JoinPool/Nominations/index.tsx @@ -0,0 +1,45 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { Validator } from 'contexts/Validators/types'; +import { ValidatorList } from 'library/ValidatorList'; +import { ListWrapper } from 'modals/PoolNominations/Wrappers'; +import { useTranslation } from 'react-i18next'; +import { HeadingWrapper, NominationsWrapper } from '../Wrappers'; + +export const Nominations = ({ + stash, + targets, +}: { + stash: string; + targets: Validator[]; +}) => { + const { t } = useTranslation('modals'); + + return ( + + +

+ {targets.length} Nomination{targets.length === 1 ? '' : 's'} +

+ + + {targets.length > 0 ? ( + + ) : ( +

{t('poolIsNotNominating')}

+ )} + + + ); +}; diff --git a/src/canvas/JoinPool/JoinForm.tsx b/src/canvas/JoinPool/Overview/JoinForm.tsx similarity index 98% rename from src/canvas/JoinPool/JoinForm.tsx rename to src/canvas/JoinPool/Overview/JoinForm.tsx index 358b98a8d0..55765f1117 100644 --- a/src/canvas/JoinPool/JoinForm.tsx +++ b/src/canvas/JoinPool/Overview/JoinForm.tsx @@ -10,7 +10,7 @@ import type { ClaimPermission } from 'contexts/Pools/types'; import { useTransferOptions } from 'contexts/TransferOptions'; import { useTxMeta } from 'contexts/TxMeta'; import { useState } from 'react'; -import { JoinFormWrapper } from './Wrappers'; +import { JoinFormWrapper } from '../Wrappers'; import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; import { ClaimPermissionInput } from 'library/Form/ClaimPermissionInput'; diff --git a/src/canvas/JoinPool/Overview/index.tsx b/src/canvas/JoinPool/Overview/index.tsx new file mode 100644 index 0000000000..ae7e6638d1 --- /dev/null +++ b/src/canvas/JoinPool/Overview/index.tsx @@ -0,0 +1,18 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { HeadingWrapper } from '../Wrappers'; +import { JoinForm } from './JoinForm'; + +export const Overview = () => ( + <> +
+ +

Active

+ +
+
+ +
+ +); diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 82ad6cb902..08442e4567 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -35,7 +35,7 @@ export const TitleWrapper = styled.div` border-bottom: 1px solid var(--border-secondary-color); display: flex; flex-direction: column; - margin: 0.25rem 0 0.75rem 0; + margin: 2.25rem 0 0.75rem 0; padding-bottom: 0.2rem; width: 100%; @@ -142,11 +142,17 @@ export const JoinFormWrapper = styled.div` } `; -export const StatsWrapper = styled.div` +export const NominationsWrapper = styled.div` + flex: 1; display: flex; + flex-direction: column; +`; + +export const HeadingWrapper = styled.div` + margin: 0.75rem 0.5rem 0.9rem 0.5rem; > h3 { - color: var(--text-color-secondary); + color: var(--text-color-primary); font-family: Inter, sans-serif; margin: 0; } diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index 426c7f64e8..8edd649562 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -3,20 +3,23 @@ import { CanvasFullScreenWrapper } from 'canvas/Wrappers'; import { useOverlay } from 'kits/Overlay/Provider'; -import { JoinPoolInterfaceWrapper, StatsWrapper } from './Wrappers'; +import { JoinPoolInterfaceWrapper } from './Wrappers'; import { useBondedPools } from 'contexts/Pools/BondedPools'; -import { JoinForm } from './JoinForm'; import { useState } from 'react'; import { useApi } from 'contexts/Api'; import { Header } from './Header'; +import { Overview } from './Overview'; +import { Nominations } from './Nominations'; +import { useValidators } from 'contexts/Validators/ValidatorEntries'; export const JoinPool = () => { const { closeCanvas, config: { options }, } = useOverlay().canvas; + const { validators } = useValidators(); const { counterForBondedPools } = useApi().poolsConfig; - const { getBondedPool, poolsMetaData } = useBondedPools(); + const { getBondedPool, poolsMetaData, poolsNominations } = useBondedPools(); // The active canvas tab. const [activeTab, setActiveTab] = useState(0); @@ -37,6 +40,14 @@ export const JoinPool = () => { const metadata = poolsMetaData[selectedPoolId]; + // Get pool nominees. + const targets = poolsNominations[bondedPool.id]?.targets || []; + + // Extract validator entries from pool targets + const targetValidators = validators.filter(({ address }) => + targets.includes(address) + ); + return (
{
-
- -

Active

- -
-
- -
+ {activeTab === 0 && } + {activeTab === 1 && ( + + )}
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/modals/PoolNominations/index.tsx b/src/modals/PoolNominations/index.tsx index b29b23fdfd..6e6db3e987 100644 --- a/src/modals/PoolNominations/index.tsx +++ b/src/modals/PoolNominations/index.tsx @@ -9,11 +9,11 @@ import { ListWrapper } from './Wrappers'; import { ModalPadding } from 'kits/Overlay/structure/ModalPadding'; export const PoolNominations = () => { + const { t } = useTranslation('modals'); const { config: { options }, } = useOverlay().modal; const { nominator, targets } = options; - const { t } = useTranslation('modals'); return ( <> From a629f3225ea5a6aac8fb5eee80f00970411723f6 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sun, 31 Mar 2024 19:36:39 +0700 Subject: [PATCH 40/98] pool state in header --- src/canvas/JoinPool/Header.tsx | 19 +++++++++++-------- src/canvas/JoinPool/Wrappers.ts | 19 +++++++++++++++++++ 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/src/canvas/JoinPool/Header.tsx b/src/canvas/JoinPool/Header.tsx index eb00bd02e8..ffd3e62656 100644 --- a/src/canvas/JoinPool/Header.tsx +++ b/src/canvas/JoinPool/Header.tsx @@ -40,21 +40,19 @@ export const Header = ({ }; // Tabs for the canvas. - // TODO: Implement the Nominations tab and tab switching. - let tabs: PageTitleTabProps[] = [ + const tabs: PageTitleTabProps[] = [ { title: t('pools.overview', { ns: 'pages' }), active: activeTab === 0, onClick: () => setActiveTab(0), }, + { + title: 'Nominations', + active: activeTab === 1, + onClick: () => setActiveTab(1), + }, ]; - tabs = tabs.concat({ - title: 'Nominations', - active: activeTab === 1, - onClick: () => setActiveTab(1), - }); - return ( <>
@@ -92,6 +90,11 @@ export const Header = ({

Pool {bondedPool.id} + {['Blocked', 'Destroying'].includes(bondedPool.state) && ( + + {bondedPool.state} + + )}

diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 08442e4567..1b07d39c1d 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -70,6 +70,25 @@ export const TitleWrapper = styled.div` > svg { margin: 0 0 0 0.2rem; } + + > span { + color: var(--text-color-tertiary); + border: 1px solid var(--border-secondary-color); + border-radius: 0.5rem; + padding: 0.3rem 0.6rem; + margin-left: 1rem; + font-size: 1.1rem; + + &.blocked { + color: var(--status-warning-color); + border-color: var(--status-warning-color); + } + + &.destroying { + color: var(--status-danger-color); + border-color: var(--status-danger-color); + } + } } } } From 6b9bc8c50947f66070bbc41881f66f6ed8b1fdea Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sun, 31 Mar 2024 19:57:26 +0700 Subject: [PATCH 41/98] overview badge styling --- src/canvas/JoinPool/Overview/index.tsx | 41 ++++++++++++++++++-------- src/canvas/JoinPool/Wrappers.ts | 39 +++++++++++++++++++++--- src/kits/Buttons/index.scss | 3 +- src/theme/theme.scss | 2 +- 4 files changed, 67 insertions(+), 18 deletions(-) diff --git a/src/canvas/JoinPool/Overview/index.tsx b/src/canvas/JoinPool/Overview/index.tsx index ae7e6638d1..c11d55bfc0 100644 --- a/src/canvas/JoinPool/Overview/index.tsx +++ b/src/canvas/JoinPool/Overview/index.tsx @@ -1,18 +1,35 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only +import { useNetwork } from 'contexts/Network'; import { HeadingWrapper } from '../Wrappers'; import { JoinForm } from './JoinForm'; -export const Overview = () => ( - <> -
- -

Active

- -
-
- -
- -); +export const Overview = () => { + const { + networkData: { + brand: { token: Token }, + }, + } = useNetwork(); + return ( + <> +
+ +

+ Actively Nominating + + 11,234 Members + + + + 1,2345 Bonded + +

+ +
+
+ +
+ + ); +}; diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 1b07d39c1d..51cb84f57d 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -35,8 +35,8 @@ export const TitleWrapper = styled.div` border-bottom: 1px solid var(--border-secondary-color); display: flex; flex-direction: column; - margin: 2.25rem 0 0.75rem 0; - padding-bottom: 0.2rem; + margin: 2.45rem 0 0.75rem 0; + padding-bottom: 0.1rem; width: 100%; > .inner { @@ -168,11 +168,42 @@ export const NominationsWrapper = styled.div` `; export const HeadingWrapper = styled.div` - margin: 0.75rem 0.5rem 0.9rem 0.5rem; + margin: 0.5rem 0.5rem 0.9rem 0rem; - > h3 { + h3 { + padding: 0 0.5rem; + } + + h4 { + font-size: 1.2rem; + } + + > h3, + h4 { color: var(--text-color-primary); font-family: Inter, sans-serif; margin: 0; + display: flex; + + > span { + border: 1px solid var(--border-secondary-color); + color: var(--text-color-primary); + border-radius: 0.6rem; + padding: 0rem 1rem; + margin-right: 1rem; + height: 2.9rem; + display: flex; + align-items: center; + + > .icon { + width: 2.2rem; + height: 2.2rem; + margin-right: 0.3rem; + } + &.inactive { + color: var(--text-color-tertiary); + border: 1px solid var(--border-secondary-color); + } + } } `; diff --git a/src/kits/Buttons/index.scss b/src/kits/Buttons/index.scss index 4db73fb861..afe8a1b696 100644 --- a/src/kits/Buttons/index.scss +++ b/src/kits/Buttons/index.scss @@ -442,9 +442,10 @@ } &.canvas { - border: 1px solid var(--border-secondary-color); + color: var(--text-color-tertiary); &.active { + color: var(--text-color-primary); background: var(--button-tab-canvas-background); } } diff --git a/src/theme/theme.scss b/src/theme/theme.scss index 00352a9122..866d41069f 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -23,7 +23,7 @@ SPDX-License-Identifier: GPL-3.0-only */ --button-secondary-background: #e7e5e5; --button-tertiary-background: #ececec; --button-tab-background: #e4e2e2; - --button-tab-canvas-background: #dedede; + --button-tab-canvas-background: #d9d9d9; --button-hover-background: #e8e6e6; --card-shadow-color: rgb(158 158 158 / 20%); --card-deep-shadow-color: rgb(158 158 158 / 50%); From 7408ac72a9e6d989d83eedfc3cc9e6990ed51f98 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sun, 31 Mar 2024 20:06:19 +0700 Subject: [PATCH 42/98] basic rewards --- src/canvas/JoinPool/Overview/index.tsx | 7 ++++++- src/canvas/JoinPool/Wrappers.ts | 2 ++ src/canvas/JoinPool/index.tsx | 2 +- src/library/ListItem/Wrappers.ts | 6 +++--- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/canvas/JoinPool/Overview/index.tsx b/src/canvas/JoinPool/Overview/index.tsx index c11d55bfc0..b86085de61 100644 --- a/src/canvas/JoinPool/Overview/index.tsx +++ b/src/canvas/JoinPool/Overview/index.tsx @@ -4,8 +4,10 @@ import { useNetwork } from 'contexts/Network'; import { HeadingWrapper } from '../Wrappers'; import { JoinForm } from './JoinForm'; +import type { BondedPool } from 'contexts/Pools/BondedPools/types'; +import { Rewards } from 'library/Pool/Rewards'; -export const Overview = () => { +export const Overview = ({ bondedPool }: { bondedPool: BondedPool }) => { const { networkData: { brand: { token: Token }, @@ -26,7 +28,10 @@ export const Overview = () => { + + +
diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 51cb84f57d..010ed82375 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -22,6 +22,8 @@ export const JoinPoolInterfaceWrapper = styled.div` &:first-child { flex-grow: 1; + display: flex; + flex-direction: column; } &:last-child { diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index 8edd649562..6a65a5fbb9 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -60,7 +60,7 @@ export const JoinPool = () => {
- {activeTab === 0 && } + {activeTab === 0 && } {activeTab === 1 && ( Date: Mon, 1 Apr 2024 12:58:05 +0700 Subject: [PATCH 43/98] fix pending rewards race --- src/contexts/Pools/ActivePool/index.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/contexts/Pools/ActivePool/index.tsx b/src/contexts/Pools/ActivePool/index.tsx index b496edd810..90f1f7c109 100644 --- a/src/contexts/Pools/ActivePool/index.tsx +++ b/src/contexts/Pools/ActivePool/index.tsx @@ -76,8 +76,9 @@ export const ActivePoolProvider = ({ children }: { children: ReactNode }) => { // Only listen to the currently selected active pool, otherwise return an empty array. const poolIds = activePoolIdRef.current ? [activePoolIdRef.current] : []; - // Listen for active pools. - const { activePools, poolNominations } = useActivePools({ + // Listen for active pools. NOTE: `activePoolsRef` is needed to check if the pool has changed + // after the async call of fetching pending rewards. + const { activePools, activePoolsRef, poolNominations } = useActivePools({ poolIds, onCallback: async () => { // Sync: active pools synced once all account pools have been reported. @@ -202,7 +203,17 @@ export const ActivePoolProvider = ({ children }: { children: ReactNode }) => { membership?.poolId && String(activePool.id) === String(membership.poolId) ) { - setPendingPoolRewards(await fetchPendingRewards(membership?.address)); + const pendingRewards = await fetchPendingRewards(membership?.address); + + // Check if active pool has changed in the time the pending rewards were being fetched. If it + // has, do not update. + if ( + activePoolId && + activePoolsRef.current[activePoolId]?.id === + Number(membership?.poolId || -1) + ) { + setPendingPoolRewards(pendingRewards); + } } else { setPendingPoolRewards(new BigNumber(0)); } From 09569c776decae14f9fd8da0db7d6092451422ad Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 12:59:37 +0700 Subject: [PATCH 44/98] expose activePoolsRef --- src/hooks/useActivePools/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useActivePools/index.tsx b/src/hooks/useActivePools/index.tsx index 8ac0ba6e3a..02a80374ce 100644 --- a/src/hooks/useActivePools/index.tsx +++ b/src/hooks/useActivePools/index.tsx @@ -95,5 +95,5 @@ export const useActivePools = ({ onCallback, poolIds }: ActivePoolsProps) => { const documentRef = useRef(document); useEventListener('new-active-pool', newActivePoolCallback, documentRef); - return { activePools, poolNominations }; + return { activePools, activePoolsRef, poolNominations }; }; From 5564b2e099350c5ed4416c3d3a2ecc3c3dab5c43 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 12:59:51 +0700 Subject: [PATCH 45/98] newline --- src/library/Graphs/PayoutBar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/library/Graphs/PayoutBar.tsx b/src/library/Graphs/PayoutBar.tsx index e6d17e6230..9d4fdbcd78 100644 --- a/src/library/Graphs/PayoutBar.tsx +++ b/src/library/Graphs/PayoutBar.tsx @@ -94,6 +94,7 @@ export const PayoutBar = ({ }); return `${dateObj}`; }), + datasets: [ { order: 1, From 0da281aadbfc336ba7a11668aa8b47cc541d2f2d Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 13:44:39 +0700 Subject: [PATCH 46/98] more boilerplate --- src/canvas/JoinPool/Overview/Addresses.tsx | 73 +++++++++ .../JoinPool/Overview/RecentPerformance.tsx | 146 ++++++++++++++++++ src/canvas/JoinPool/Overview/Stats.tsx | 29 ++++ src/canvas/JoinPool/Overview/index.tsx | 48 ++---- src/canvas/JoinPool/Wrappers.ts | 92 +++++++++-- src/library/Card/Wrappers.ts | 6 + src/theme/theme.scss | 2 + 7 files changed, 348 insertions(+), 48 deletions(-) create mode 100644 src/canvas/JoinPool/Overview/Addresses.tsx create mode 100644 src/canvas/JoinPool/Overview/RecentPerformance.tsx create mode 100644 src/canvas/JoinPool/Overview/Stats.tsx diff --git a/src/canvas/JoinPool/Overview/Addresses.tsx b/src/canvas/JoinPool/Overview/Addresses.tsx new file mode 100644 index 0000000000..97c4c86590 --- /dev/null +++ b/src/canvas/JoinPool/Overview/Addresses.tsx @@ -0,0 +1,73 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { BondedPool } from 'contexts/Pools/BondedPools/types'; +import { CardWrapper } from 'library/Card/Wrappers'; +import { AddressesWrapper, HeadingWrapper } from '../Wrappers'; +import { useHelp } from 'contexts/Help'; +import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; +import { Polkicon } from '@w3ux/react-polkicon'; +import { ellipsisFn, remToUnit } from '@w3ux/utils'; +import { CopyAddress } from 'library/ListItem/Labels/CopyAddress'; + +export const Addresses = ({ bondedPool }: { bondedPool: BondedPool }) => { + const { openHelp } = useHelp(); + + return ( + + +
+ +

+ Stash Address + openHelp('Era Points')} + /> +

+ + +
+ + + +

+ {ellipsisFn(bondedPool.addresses.stash, 10)} + +

+
+
+
+ +

+ Reward Address + openHelp('Era Points')} + /> +

+ +
+ + + +

+ {ellipsisFn(bondedPool.addresses.reward, 10)}{' '} + +

+
+
+ + + ); +}; diff --git a/src/canvas/JoinPool/Overview/RecentPerformance.tsx b/src/canvas/JoinPool/Overview/RecentPerformance.tsx new file mode 100644 index 0000000000..2255682183 --- /dev/null +++ b/src/canvas/JoinPool/Overview/RecentPerformance.tsx @@ -0,0 +1,146 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { + BarElement, + CategoryScale, + Chart as ChartJS, + Legend, + LinearScale, + LineElement, + PointElement, + Title, + Tooltip, +} from 'chart.js'; +import { useNetwork } from 'contexts/Network'; +import { GraphWrapper, HeadingWrapper } from '../Wrappers'; +import { Bar } from 'react-chartjs-2'; +import BigNumber from 'bignumber.js'; +import type { AnyJson } from 'types'; +import { graphColors } from 'theme/graphs'; +import { useTheme } from 'contexts/Themes'; +import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; +import { useHelp } from 'contexts/Help'; + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + BarElement, + Title, + Tooltip, + Legend +); + +export const RecentPerformance = () => { + const { mode } = useTheme(); + const { openHelp } = useHelp(); + const { colors } = useNetwork().networkData; + + const color = colors.primary[mode]; + + const options = { + responsive: true, + maintainAspectRatio: false, + barPercentage: 0.3, + maxBarThickness: 13, + scales: { + x: { + stacked: true, + grid: { + display: false, + }, + ticks: { + font: { + size: 10, + }, + autoSkip: true, + }, + }, + y: { + stacked: true, + ticks: { + font: { + size: 10, + }, + }, + border: { + display: false, + }, + grid: { + color: graphColors.grid[mode], + }, + }, + }, + plugins: { + legend: { + display: false, + }, + title: { + display: false, + }, + tooltip: { + displayColors: false, + backgroundColor: graphColors.tooltip[mode], + titleColor: graphColors.label[mode], + bodyColor: graphColors.label[mode], + bodyFont: { + weight: 600, + }, + callbacks: { + title: () => [], + label: (context: AnyJson) => + `${new BigNumber(context.parsed.y).decimalPlaces(0).toFormat()} Era Points`, + }, + }, + }, + }; + + const data = { + labels: [ + 'Era 1,123', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + 'Era 1,340', + ], + datasets: [ + { + label: 'Era Points', + data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 100, 90, 80, 80], + borderColor: color, + backgroundColor: color, + pointRadius: 0, + borderRadius: 3, + }, + ], + }; + + return ( + <> + +

+ Recent Performance + openHelp('Era Points')} + /> +

+ + + + + + ); +}; diff --git a/src/canvas/JoinPool/Overview/Stats.tsx b/src/canvas/JoinPool/Overview/Stats.tsx new file mode 100644 index 0000000000..6bed087bd1 --- /dev/null +++ b/src/canvas/JoinPool/Overview/Stats.tsx @@ -0,0 +1,29 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { useNetwork } from 'contexts/Network'; +import { HeadingWrapper } from '../Wrappers'; + +export const Stats = () => { + const { + networkData: { + unit, + brand: { token: Token }, + }, + } = useNetwork(); + + return ( + +

+ Actively Nominating + + 11,234 Members + + + + 1,2345 {unit} Bonded + +

+ + ); +}; diff --git a/src/canvas/JoinPool/Overview/index.tsx b/src/canvas/JoinPool/Overview/index.tsx index b86085de61..e5a6e9dea2 100644 --- a/src/canvas/JoinPool/Overview/index.tsx +++ b/src/canvas/JoinPool/Overview/index.tsx @@ -1,40 +1,22 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { useNetwork } from 'contexts/Network'; -import { HeadingWrapper } from '../Wrappers'; import { JoinForm } from './JoinForm'; import type { BondedPool } from 'contexts/Pools/BondedPools/types'; -import { Rewards } from 'library/Pool/Rewards'; -export const Overview = ({ bondedPool }: { bondedPool: BondedPool }) => { - const { - networkData: { - brand: { token: Token }, - }, - } = useNetwork(); - return ( - <> -
- -

- Actively Nominating +import { RecentPerformance } from './RecentPerformance'; +import { Stats } from './Stats'; +import { Addresses } from './Addresses'; - 11,234 Members - - - - 1,2345 Bonded - -

- - - -
- -
- -
- - ); -}; +export const Overview = ({ bondedPool }: { bondedPool: BondedPool }) => ( + <> +
+ + + +
+
+ +
+ +); diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 010ed82375..3ff2bcc41b 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -15,18 +15,19 @@ export const JoinPoolInterfaceWrapper = styled.div` > .content { display: flex; - flex: 1; + flex-grow: 1; > div { display: flex; - &:first-child { + &.main { flex-grow: 1; display: flex; flex-direction: column; + padding-right: 4rem; } - &:last-child { + &.side { min-width: 450px; } } @@ -37,7 +38,7 @@ export const TitleWrapper = styled.div` border-bottom: 1px solid var(--border-secondary-color); display: flex; flex-direction: column; - margin: 2.45rem 0 0.75rem 0; + margin: 2.45rem 0 1.85rem 0; padding-bottom: 0.1rem; width: 100%; @@ -62,7 +63,7 @@ export const TitleWrapper = styled.div` > .labels { display: flex; - margin-top: 0.65rem; + margin-top: 0.7rem; > h3 { color: var(--text-color-secondary); @@ -172,34 +173,45 @@ export const NominationsWrapper = styled.div` export const HeadingWrapper = styled.div` margin: 0.5rem 0.5rem 0.9rem 0rem; - h3 { + h3, + p { padding: 0 0.5rem; } h4 { - font-size: 1.2rem; + font-size: 1.15rem; + } + + p { + color: var(--text-color-tertiary); + margin: 0.35rem 0 0 0; } > h3, h4 { - color: var(--text-color-primary); + color: var(--text-color-secondary); font-family: Inter, sans-serif; margin: 0; display: flex; + align-items: center; > span { - border: 1px solid var(--border-secondary-color); - color: var(--text-color-primary); - border-radius: 0.6rem; - padding: 0rem 1rem; + background-color: var(--background-canvas-card); + color: var(--text-color-secondary); + border-radius: 1.5rem; + padding: 0rem 1.25rem; margin-right: 1rem; - height: 2.9rem; + height: 2.6rem; display: flex; align-items: center; + &.balance { + padding-left: 0.5rem; + } + > .icon { - width: 2.2rem; - height: 2.2rem; + width: 2.1rem; + height: 2.1rem; margin-right: 0.3rem; } &.inactive { @@ -209,3 +221,53 @@ export const HeadingWrapper = styled.div` } } `; + +export const GraphWrapper = styled.div` + padding: 0 3rem 0 1rem; + margin: 2rem 0 0 0; + position: relative; + width: 100%; +`; + +export const AddressesWrapper = styled.div` + display: flex; + padding: 0.5rem 0.5rem; + width: 100%; + + > section { + display: flex; + flex-direction: column; + flex-basis: 50%; + + > div { + display: flex; + flex-direction: row; + align-items: center; + + &.addresses { + > span { + margin-right: 0.75rem; + } + + > h4 { + color: var(--text-color-secondary); + font-family: InterSemiBold, sans-serif; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: flex; + width: 100%; + + > .label { + margin-left: 0.75rem; + + > button { + color: var(--text-color-tertiary); + } + } + } + } + } + } +`; diff --git a/src/library/Card/Wrappers.ts b/src/library/Card/Wrappers.ts index 347a58dec3..ce39499bc8 100644 --- a/src/library/Card/Wrappers.ts +++ b/src/library/Card/Wrappers.ts @@ -88,6 +88,12 @@ export const CardWrapper = styled.div` &.canvas { background: var(--background-canvas-card); padding: 1.25rem; + + &.secondary { + background: var(--background-canvas-card-secondary); + box-shadow: none; + padding: 1rem; + } } &.transparent { diff --git a/src/theme/theme.scss b/src/theme/theme.scss index 866d41069f..162b4d0cac 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -9,6 +9,7 @@ SPDX-License-Identifier: GPL-3.0-only */ --background-list-item: rgb(238 238 238 / 100%); --background-modal-card: rgb(237 237 237 / 75%); --background-canvas-card: rgb(245 245 245 / 90%); + --background-canvas-card-secondary: rgb(255 255 255 / 20%); --background-floating-card: rgb(255 255 255 / 90%); --background-app-footer: rgb(244 225 225 / 75%); --background-warning: #fdf9eb; @@ -87,6 +88,7 @@ SPDX-License-Identifier: GPL-3.0-only */ --background-list-item: rgb(38 33 38 / 100%); --background-modal-card: rgb(32 26 32 / 50%); --background-canvas-card: rgb(44 40 44 / 90%); + --background-canvas-card-secondary: rgb(44 40 44 / 30%); --background-floating-card: rgb(43 38 43 / 95%); --background-app-footer: #262327; --background-warning: #33332a; From 9979e5157ce21f10c3592a979ab5fcb6b02a05a9 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 14:09:55 +0700 Subject: [PATCH 47/98] add pool roles, AddressSection --- .../JoinPool/Overview/AddressSection.tsx | 48 +++++++++++ src/canvas/JoinPool/Overview/Addresses.tsx | 79 ++++++------------- src/canvas/JoinPool/Overview/Roles.tsx | 54 +++++++++++++ src/canvas/JoinPool/Overview/index.tsx | 6 +- src/canvas/JoinPool/Wrappers.ts | 49 +++++++----- src/theme/theme.scss | 4 +- 6 files changed, 160 insertions(+), 80 deletions(-) create mode 100644 src/canvas/JoinPool/Overview/AddressSection.tsx create mode 100644 src/canvas/JoinPool/Overview/Roles.tsx diff --git a/src/canvas/JoinPool/Overview/AddressSection.tsx b/src/canvas/JoinPool/Overview/AddressSection.tsx new file mode 100644 index 0000000000..b844f6c142 --- /dev/null +++ b/src/canvas/JoinPool/Overview/AddressSection.tsx @@ -0,0 +1,48 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { useHelp } from 'contexts/Help'; +import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; +import { HeadingWrapper } from '../Wrappers'; +import { Polkicon } from '@w3ux/react-polkicon'; +import { CopyAddress } from 'library/ListItem/Labels/CopyAddress'; +import { ellipsisFn, remToUnit } from '@w3ux/utils'; + +export const AddressSection = ({ + address, + label, + helpKey, +}: { + address: string; + label: string; + helpKey?: string; +}) => { + const { openHelp } = useHelp(); + + return ( +
+ +

+ {label} + {!!helpKey && ( + openHelp(helpKey)} /> + )} +

+ + +
+ + + +

+ {ellipsisFn(address, 6)} + +

+
+
+ ); +}; diff --git a/src/canvas/JoinPool/Overview/Addresses.tsx b/src/canvas/JoinPool/Overview/Addresses.tsx index 97c4c86590..0be79c0984 100644 --- a/src/canvas/JoinPool/Overview/Addresses.tsx +++ b/src/canvas/JoinPool/Overview/Addresses.tsx @@ -4,70 +4,35 @@ import type { BondedPool } from 'contexts/Pools/BondedPools/types'; import { CardWrapper } from 'library/Card/Wrappers'; import { AddressesWrapper, HeadingWrapper } from '../Wrappers'; +import { AddressSection } from './AddressSection'; import { useHelp } from 'contexts/Help'; import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; -import { Polkicon } from '@w3ux/react-polkicon'; -import { ellipsisFn, remToUnit } from '@w3ux/utils'; -import { CopyAddress } from 'library/ListItem/Labels/CopyAddress'; export const Addresses = ({ bondedPool }: { bondedPool: BondedPool }) => { const { openHelp } = useHelp(); return ( - - -
- -

- Stash Address - openHelp('Era Points')} - /> -

- +
+ + +

+ Pool Addresses + openHelp('Era Points')} /* TODO: update */ + /> +

+ -
- - - -

- {ellipsisFn(bondedPool.addresses.stash, 10)} - -

-
-
-
- -

- Reward Address - openHelp('Era Points')} - /> -

- -
- - - -

- {ellipsisFn(bondedPool.addresses.reward, 10)}{' '} - -

-
-
- - + + + + + +
); }; diff --git a/src/canvas/JoinPool/Overview/Roles.tsx b/src/canvas/JoinPool/Overview/Roles.tsx new file mode 100644 index 0000000000..6e52590baa --- /dev/null +++ b/src/canvas/JoinPool/Overview/Roles.tsx @@ -0,0 +1,54 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { BondedPool } from 'contexts/Pools/BondedPools/types'; +import { CardWrapper } from 'library/Card/Wrappers'; +import { AddressesWrapper, HeadingWrapper } from '../Wrappers'; +import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; +import { useHelp } from 'contexts/Help'; +import { AddressSection } from './AddressSection'; + +export const Roles = ({ bondedPool }: { bondedPool: BondedPool }) => { + const { openHelp } = useHelp(); + + return ( +
+ + +

+ Pool Roles + openHelp('Era Points')} + /> +

+ + + + {bondedPool.roles.root && ( + + )} + {bondedPool.roles.nominator && ( + + )} + {bondedPool.roles.bouncer && ( + + )} + {bondedPool.roles.depositor && ( + + )} + + +
+ ); +}; diff --git a/src/canvas/JoinPool/Overview/index.tsx b/src/canvas/JoinPool/Overview/index.tsx index e5a6e9dea2..bc5aa801a9 100644 --- a/src/canvas/JoinPool/Overview/index.tsx +++ b/src/canvas/JoinPool/Overview/index.tsx @@ -7,6 +7,7 @@ import type { BondedPool } from 'contexts/Pools/BondedPools/types'; import { RecentPerformance } from './RecentPerformance'; import { Stats } from './Stats'; import { Addresses } from './Addresses'; +import { Roles } from './Roles'; export const Overview = ({ bondedPool }: { bondedPool: BondedPool }) => ( <> @@ -14,9 +15,12 @@ export const Overview = ({ bondedPool }: { bondedPool: BondedPool }) => ( +
- +
+ +
); diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 3ff2bcc41b..4dac4ca7e5 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -29,6 +29,9 @@ export const JoinPoolInterfaceWrapper = styled.div` &.side { min-width: 450px; + > div { + width: 100%; + } } } } @@ -171,7 +174,7 @@ export const NominationsWrapper = styled.div` `; export const HeadingWrapper = styled.div` - margin: 0.5rem 0.5rem 0.9rem 0rem; + margin: 0.5rem 0.5rem 0.5rem 0rem; h3, p { @@ -231,40 +234,46 @@ export const GraphWrapper = styled.div` export const AddressesWrapper = styled.div` display: flex; - padding: 0.5rem 0.5rem; + padding: 0rem 0.5rem 0 0.5rem; width: 100%; + flex-wrap: wrap; > section { display: flex; flex-direction: column; flex-basis: 50%; + margin: 0.9rem 0; > div { display: flex; flex-direction: row; align-items: center; - &.addresses { - > span { - margin-right: 0.75rem; - } + > span { + margin-right: 0.75rem; + } - > h4 { - color: var(--text-color-secondary); - font-family: InterSemiBold, sans-serif; - margin: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - display: flex; - width: 100%; + > h3 { + font-family: InterSemiBold, sans-serif; + color: var(--text-color-secondary); + margin-bottom: 0.25rem; + } + + > h4 { + font-family: InterSemiBold, sans-serif; + color: var(--text-color-secondary); + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: flex; + width: 100%; - > .label { - margin-left: 0.75rem; + > .label { + margin-left: 0.75rem; - > button { - color: var(--text-color-tertiary); - } + > button { + color: var(--text-color-tertiary); } } } diff --git a/src/theme/theme.scss b/src/theme/theme.scss index 162b4d0cac..24576e52e1 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -9,7 +9,7 @@ SPDX-License-Identifier: GPL-3.0-only */ --background-list-item: rgb(238 238 238 / 100%); --background-modal-card: rgb(237 237 237 / 75%); --background-canvas-card: rgb(245 245 245 / 90%); - --background-canvas-card-secondary: rgb(255 255 255 / 20%); + --background-canvas-card-secondary: rgb(255 255 255 / 25%); --background-floating-card: rgb(255 255 255 / 90%); --background-app-footer: rgb(244 225 225 / 75%); --background-warning: #fdf9eb; @@ -88,7 +88,7 @@ SPDX-License-Identifier: GPL-3.0-only */ --background-list-item: rgb(38 33 38 / 100%); --background-modal-card: rgb(32 26 32 / 50%); --background-canvas-card: rgb(44 40 44 / 90%); - --background-canvas-card-secondary: rgb(44 40 44 / 30%); + --background-canvas-card-secondary: rgb(44 40 44 / 35%); --background-floating-card: rgb(43 38 43 / 95%); --background-app-footer: #262327; --background-warning: #33332a; From 70ef03a807b52bf1ac8220c55a21205190208df6 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 14:20:21 +0700 Subject: [PATCH 48/98] replace help key --- src/canvas/JoinPool/Overview/Roles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/canvas/JoinPool/Overview/Roles.tsx b/src/canvas/JoinPool/Overview/Roles.tsx index 6e52590baa..63e74079cb 100644 --- a/src/canvas/JoinPool/Overview/Roles.tsx +++ b/src/canvas/JoinPool/Overview/Roles.tsx @@ -20,7 +20,7 @@ export const Roles = ({ bondedPool }: { bondedPool: BondedPool }) => { openHelp('Era Points')} + onClick={() => openHelp('Pool Roles')} /> From b84199fcccbb2b959ebea1169791261e45d66fd6 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 16:38:34 +0700 Subject: [PATCH 49/98] title fixes --- src/canvas/JoinPool/Header.tsx | 14 ++++++++------ src/canvas/JoinPool/Wrappers.ts | 28 +++++++++++++++++++++++----- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/src/canvas/JoinPool/Header.tsx b/src/canvas/JoinPool/Header.tsx index ffd3e62656..c8cb92eea2 100644 --- a/src/canvas/JoinPool/Header.tsx +++ b/src/canvas/JoinPool/Header.tsx @@ -80,12 +80,14 @@ export const Header = ({ />
-

- {determinePoolDisplay( - bondedPool?.addresses.stash || '', - metadata - )} -

+
+

+ {determinePoolDisplay( + bondedPool?.addresses.stash || '', + metadata + )} +

+

Pool diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 4dac4ca7e5..8db0e33161 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -44,24 +44,42 @@ export const TitleWrapper = styled.div` margin: 2.45rem 0 1.85rem 0; padding-bottom: 0.1rem; width: 100%; + overflow: hidden; > .inner { display: flex; align-items: center; margin-bottom: 0.5rem; - flex: 1; + width: 100%; > div { display: flex; + flex: 1; + + &:nth-child(1) { + max-width: 4rem; + } &:nth-child(2) { - flex-grow: 1; padding-left: 1rem; - display: flex; flex-direction: column; - > h1 { - margin: 0; + > .title { + position: relative; + padding-top: 2rem; + flex: 1; + + h1 { + position: absolute; + top: 0; + left: 0; + margin: 0; + line-height: 2.2rem; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 100%; + } } > .labels { From f1d12975f17085abbe15e7a881c6064bf260b29c Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 16:50:45 +0700 Subject: [PATCH 50/98] plug in era points --- .../JoinPool/Overview/RecentPerformance.tsx | 46 +++++++++++-------- src/canvas/JoinPool/Overview/index.tsx | 2 +- src/canvas/JoinPool/index.tsx | 31 +++++-------- 3 files changed, 40 insertions(+), 39 deletions(-) diff --git a/src/canvas/JoinPool/Overview/RecentPerformance.tsx b/src/canvas/JoinPool/Overview/RecentPerformance.tsx index 2255682183..aa1d523953 100644 --- a/src/canvas/JoinPool/Overview/RecentPerformance.tsx +++ b/src/canvas/JoinPool/Overview/RecentPerformance.tsx @@ -21,6 +21,8 @@ import { graphColors } from 'theme/graphs'; import { useTheme } from 'contexts/Themes'; import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; import { useHelp } from 'contexts/Help'; +import { usePoolPerformance } from 'contexts/Pools/PoolPerformance'; +import type { BondedPool } from 'contexts/Pools/BondedPools/types'; ChartJS.register( CategoryScale, @@ -33,11 +35,34 @@ ChartJS.register( Legend ); -export const RecentPerformance = () => { +export const RecentPerformance = ({ + bondedPool, +}: { + bondedPool: BondedPool; +}) => { const { mode } = useTheme(); const { openHelp } = useHelp(); const { colors } = useNetwork().networkData; + const { poolRewardPoints } = usePoolPerformance(); + const rawEraRewardPoints = poolRewardPoints[bondedPool.addresses.stash] || {}; + // Format reward points as an array of strings. + const dataset = Object.values( + Object.fromEntries( + Object.entries(rawEraRewardPoints).map(([k, v]: AnyJson) => [ + k, + new BigNumber(v).toString(), + ]) + ) + ); + + // Format labels, only displaying the first and last era. + const labels = Object.keys(rawEraRewardPoints).map(() => ''); + labels[0] = `Era ${Object.keys(rawEraRewardPoints)[0]}`; + labels[labels.length - 1] = + `Era ${Object.keys(rawEraRewardPoints)[labels.length - 1]}`; + + // Use primary color for bars. const color = colors.primary[mode]; const options = { @@ -98,26 +123,11 @@ export const RecentPerformance = () => { }; const data = { - labels: [ - 'Era 1,123', - '', - '', - '', - '', - '', - '', - '', - '', - '', - '', - '', - '', - 'Era 1,340', - ], + labels, datasets: [ { label: 'Era Points', - data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 100, 90, 80, 80], + data: dataset, borderColor: color, backgroundColor: color, pointRadius: 0, diff --git a/src/canvas/JoinPool/Overview/index.tsx b/src/canvas/JoinPool/Overview/index.tsx index bc5aa801a9..91d0c7e2a5 100644 --- a/src/canvas/JoinPool/Overview/index.tsx +++ b/src/canvas/JoinPool/Overview/index.tsx @@ -13,7 +13,7 @@ export const Overview = ({ bondedPool }: { bondedPool: BondedPool }) => ( <>
- +
diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index 6a65a5fbb9..f6229dff91 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -6,7 +6,6 @@ import { useOverlay } from 'kits/Overlay/Provider'; import { JoinPoolInterfaceWrapper } from './Wrappers'; import { useBondedPools } from 'contexts/Pools/BondedPools'; import { useState } from 'react'; -import { useApi } from 'contexts/Api'; import { Header } from './Header'; import { Overview } from './Overview'; import { Nominations } from './Nominations'; @@ -14,36 +13,28 @@ import { useValidators } from 'contexts/Validators/ValidatorEntries'; export const JoinPool = () => { const { - closeCanvas, config: { options }, } = useOverlay().canvas; const { validators } = useValidators(); - const { counterForBondedPools } = useApi().poolsConfig; - const { getBondedPool, poolsMetaData, poolsNominations } = useBondedPools(); + const { poolsMetaData, poolsNominations, bondedPools } = useBondedPools(); // The active canvas tab. const [activeTab, setActiveTab] = useState(0); + // Only choose an open pool. + const filteredBondedPools = bondedPools.filter( + (pool) => pool.state === 'Open' + ); + const randomKey = (filteredBondedPools.length * Math.random()) << 0; + const bondedPool = filteredBondedPools[randomKey]; + // The selected pool id. Use the provided poolId, or assign a random pool. const [selectedPoolId, setSelectedPoolId] = useState( - options?.poolId || - Math.floor(Math.random() * counterForBondedPools.minus(1).toNumber()) + options?.poolId || bondedPool.id ); - // Ensure bonded pool exists, and close canvas if not. - const bondedPool = getBondedPool(selectedPoolId); - - if (!bondedPool) { - closeCanvas(); - return null; - } - - const metadata = poolsMetaData[selectedPoolId]; - - // Get pool nominees. - const targets = poolsNominations[bondedPool.id]?.targets || []; - // Extract validator entries from pool targets + const targets = poolsNominations[bondedPool.id]?.targets || []; const targetValidators = validators.filter(({ address }) => targets.includes(address) ); @@ -55,7 +46,7 @@ export const JoinPool = () => { setActiveTab={setActiveTab} setSelectedPoolId={setSelectedPoolId} bondedPool={bondedPool} - metadata={metadata} + metadata={poolsMetaData[selectedPoolId]} /> From ba7974b078aea575a7a81d88fff8927190985bb2 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 16:52:30 +0700 Subject: [PATCH 51/98] check keys exist --- src/canvas/JoinPool/Overview/RecentPerformance.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/canvas/JoinPool/Overview/RecentPerformance.tsx b/src/canvas/JoinPool/Overview/RecentPerformance.tsx index aa1d523953..0c0b54707a 100644 --- a/src/canvas/JoinPool/Overview/RecentPerformance.tsx +++ b/src/canvas/JoinPool/Overview/RecentPerformance.tsx @@ -58,9 +58,14 @@ export const RecentPerformance = ({ // Format labels, only displaying the first and last era. const labels = Object.keys(rawEraRewardPoints).map(() => ''); - labels[0] = `Era ${Object.keys(rawEraRewardPoints)[0]}`; - labels[labels.length - 1] = - `Era ${Object.keys(rawEraRewardPoints)[labels.length - 1]}`; + + const firstEra = Object.keys(rawEraRewardPoints)[0]; + labels[0] = firstEra ? `Era ${Object.keys(rawEraRewardPoints)[0]}` : ''; + + const lastEra = Object.keys(rawEraRewardPoints)[labels.length - 1]; + labels[labels.length - 1] = lastEra + ? `Era ${Object.keys(rawEraRewardPoints)[labels.length - 1]}` + : ''; // Use primary color for bars. const color = colors.primary[mode]; From b473e038084d63b8c7ffed0de2f0c47b69a7e763 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 17:02:19 +0700 Subject: [PATCH 52/98] fetch daily active open pools --- src/canvas/JoinPool/index.tsx | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index f6229dff91..c32a4692f1 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -5,26 +5,42 @@ import { CanvasFullScreenWrapper } from 'canvas/Wrappers'; import { useOverlay } from 'kits/Overlay/Provider'; import { JoinPoolInterfaceWrapper } from './Wrappers'; import { useBondedPools } from 'contexts/Pools/BondedPools'; -import { useState } from 'react'; +import { useMemo, useState } from 'react'; import { Header } from './Header'; import { Overview } from './Overview'; import { Nominations } from './Nominations'; import { useValidators } from 'contexts/Validators/ValidatorEntries'; +import { usePoolPerformance } from 'contexts/Pools/PoolPerformance'; +import { MaxEraRewardPointsEras } from 'consts'; export const JoinPool = () => { const { config: { options }, } = useOverlay().canvas; const { validators } = useValidators(); + const { poolRewardPoints } = usePoolPerformance(); const { poolsMetaData, poolsNominations, bondedPools } = useBondedPools(); // The active canvas tab. const [activeTab, setActiveTab] = useState(0); - // Only choose an open pool. - const filteredBondedPools = bondedPools.filter( - (pool) => pool.state === 'Open' + // Filter bonded pools to only those that are open and that have active daily rewards for the last + // `MaxEraRewardPointsEras` eras. + const filteredBondedPools = useMemo( + () => + bondedPools.filter((pool) => { + const rawEraRewardPoints = poolRewardPoints[pool.addresses.stash] || {}; + const rewardPoints = Object.values(rawEraRewardPoints); + const activeDaily = rewardPoints.every((points) => Number(points) > 0); + return ( + pool.state === 'Open' && + activeDaily && + rewardPoints.length === MaxEraRewardPointsEras + ); + }), + [bondedPools, poolRewardPoints] ); + const randomKey = (filteredBondedPools.length * Math.random()) << 0; const bondedPool = filteredBondedPools[randomKey]; From 1119648c1d22b3df093f960a31600c106828f98e Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 17:22:43 +0700 Subject: [PATCH 53/98] bring back shadow --- src/canvas/JoinPool/Overview/index.tsx | 2 +- src/canvas/JoinPool/index.tsx | 2 +- src/library/Card/Wrappers.ts | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/canvas/JoinPool/Overview/index.tsx b/src/canvas/JoinPool/Overview/index.tsx index 91d0c7e2a5..4e4f9e0d44 100644 --- a/src/canvas/JoinPool/Overview/index.tsx +++ b/src/canvas/JoinPool/Overview/index.tsx @@ -12,7 +12,7 @@ import { Roles } from './Roles'; export const Overview = ({ bondedPool }: { bondedPool: BondedPool }) => ( <>
- + diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index c32a4692f1..52b5d540b0 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -46,7 +46,7 @@ export const JoinPool = () => { // The selected pool id. Use the provided poolId, or assign a random pool. const [selectedPoolId, setSelectedPoolId] = useState( - options?.poolId || bondedPool.id + options?.poolId || bondedPool.id || 0 ); // Extract validator entries from pool targets diff --git a/src/library/Card/Wrappers.ts b/src/library/Card/Wrappers.ts index ce39499bc8..89821b5c03 100644 --- a/src/library/Card/Wrappers.ts +++ b/src/library/Card/Wrappers.ts @@ -91,7 +91,6 @@ export const CardWrapper = styled.div` &.secondary { background: var(--background-canvas-card-secondary); - box-shadow: none; padding: 1rem; } } From bee314415afa81262a8b2f10578a929e2de81461 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 17:22:59 +0700 Subject: [PATCH 54/98] add pool bonded amount --- src/canvas/JoinPool/Overview/Stats.tsx | 44 ++++++++++++++++++++--- src/pages/Pools/Home/Status/NewMember.tsx | 16 +++++++-- 2 files changed, 53 insertions(+), 7 deletions(-) diff --git a/src/canvas/JoinPool/Overview/Stats.tsx b/src/canvas/JoinPool/Overview/Stats.tsx index 6bed087bd1..edac4a6e34 100644 --- a/src/canvas/JoinPool/Overview/Stats.tsx +++ b/src/canvas/JoinPool/Overview/Stats.tsx @@ -3,25 +3,61 @@ import { useNetwork } from 'contexts/Network'; import { HeadingWrapper } from '../Wrappers'; +import type { BondedPool } from 'contexts/Pools/BondedPools/types'; +import { planckToUnit, rmCommas } from '@w3ux/utils'; +import { useApi } from 'contexts/Api'; +import BigNumber from 'bignumber.js'; +import { useEffect, useState } from 'react'; -export const Stats = () => { +export const Stats = ({ bondedPool }: { bondedPool: BondedPool }) => { const { networkData: { + units, unit, brand: { token: Token }, }, } = useNetwork(); + const { isReady, api } = useApi(); + + // Store the pool balance. + const [poolBalance, setPoolBalance] = useState(null); + + // Fetches the balance of the bonded pool. + const getPoolBalance = async () => { + if (!api) { + return; + } + + const balance = ( + await api.call.nominationPoolsApi.pointsToBalance( + bondedPool.id, + rmCommas(bondedPool.points) + ) + ).toString(); + + if (balance) { + setPoolBalance(new BigNumber(balance)); + } + }; + + // Fetch the balance when pool or points change. + useEffect(() => { + if (isReady) { + getPoolBalance(); + } + }, [bondedPool.id, bondedPool.points, isReady]); return (

Actively Nominating - 11,234 Members - - 1,2345 {unit} Bonded + {!poolBalance + ? `...` + : planckToUnit(poolBalance, units).decimalPlaces(3).toFormat()}{' '} + {unit} Bonded

diff --git a/src/pages/Pools/Home/Status/NewMember.tsx b/src/pages/Pools/Home/Status/NewMember.tsx index a96cddae28..d1057b576e 100644 --- a/src/pages/Pools/Home/Status/NewMember.tsx +++ b/src/pages/Pools/Home/Status/NewMember.tsx @@ -11,6 +11,7 @@ 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'; export const NewMember = ({ syncing }: NewMemberProps) => { const { t } = useTranslation('pages'); @@ -19,6 +20,7 @@ export const NewMember = ({ syncing }: NewMemberProps) => { // const { getPoolSetupPercent } = useSetup(); const { openCanvas } = useOverlay().canvas; // const { activeAccount } = useActiveAccounts(); + const { poolRewardPointsFetched } = usePoolPerformance(); const { disableJoin, disableCreate } = useStatusButtons(); // const setupPercent = getPoolSetupPercent(activeAccount); @@ -41,10 +43,18 @@ export const NewMember = ({ syncing }: NewMemberProps) => { size: 'xl', }) } - disabled={disableJoin()} + disabled={ + disableJoin() || poolRewardPointsFetched !== 'synced' + } > - {t('pools.joinPool')} - + {poolRewardPointsFetched !== 'synced' ? ( + 'Syncing Pool Data...' + ) : ( + <> + {t('pools.joinPool')} + + + )}
From c160e1e0d15cd2b62214382b44dc86d53ea0eb8d Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 17:32:48 +0700 Subject: [PATCH 55/98] filter currently inactive pools --- src/canvas/JoinPool/index.tsx | 38 +++++++++++++++++++++++------------ 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index 52b5d540b0..bc79cbace5 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -12,11 +12,13 @@ import { Nominations } from './Nominations'; import { useValidators } from 'contexts/Validators/ValidatorEntries'; import { usePoolPerformance } from 'contexts/Pools/PoolPerformance'; import { MaxEraRewardPointsEras } from 'consts'; +import { useStaking } from 'contexts/Staking'; export const JoinPool = () => { const { config: { options }, } = useOverlay().canvas; + const { eraStakers } = useStaking(); const { validators } = useValidators(); const { poolRewardPoints } = usePoolPerformance(); const { poolsMetaData, poolsNominations, bondedPools } = useBondedPools(); @@ -25,24 +27,34 @@ export const JoinPool = () => { const [activeTab, setActiveTab] = useState(0); // Filter bonded pools to only those that are open and that have active daily rewards for the last - // `MaxEraRewardPointsEras` eras. + // `MaxEraRewardPointsEras` eras. The second filter checks if the pool is in `eraStakers` for the + // active era. const filteredBondedPools = useMemo( () => - bondedPools.filter((pool) => { - const rawEraRewardPoints = poolRewardPoints[pool.addresses.stash] || {}; - const rewardPoints = Object.values(rawEraRewardPoints); - const activeDaily = rewardPoints.every((points) => Number(points) > 0); - return ( - pool.state === 'Open' && - activeDaily && - rewardPoints.length === MaxEraRewardPointsEras - ); - }), + bondedPools + .filter((pool) => { + const rawEraRewardPoints = + poolRewardPoints[pool.addresses.stash] || {}; + const rewardPoints = Object.values(rawEraRewardPoints); + const activeDaily = rewardPoints.every( + (points) => Number(points) > 0 + ); + return ( + pool.state === 'Open' && + activeDaily && + rewardPoints.length === MaxEraRewardPointsEras + ); + }) + .filter((pool) => + eraStakers.stakers.find((staker) => + staker.others.find(({ who }) => who !== pool.addresses.stash) + ) + ), [bondedPools, poolRewardPoints] ); - const randomKey = (filteredBondedPools.length * Math.random()) << 0; - const bondedPool = filteredBondedPools[randomKey]; + const bondedPool = + filteredBondedPools[(filteredBondedPools.length * Math.random()) << 0]; // The selected pool id. Use the provided poolId, or assign a random pool. const [selectedPoolId, setSelectedPoolId] = useState( From 89d8dd783a6472b6730eb756cd486f37c6ad7616 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 17:33:18 +0700 Subject: [PATCH 56/98] theming --- src/theme/theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/theme.scss b/src/theme/theme.scss index 24576e52e1..c9fe2b9abc 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -9,7 +9,7 @@ SPDX-License-Identifier: GPL-3.0-only */ --background-list-item: rgb(238 238 238 / 100%); --background-modal-card: rgb(237 237 237 / 75%); --background-canvas-card: rgb(245 245 245 / 90%); - --background-canvas-card-secondary: rgb(255 255 255 / 25%); + --background-canvas-card-secondary: rgb(255 255 255 / 30%); --background-floating-card: rgb(255 255 255 / 90%); --background-app-footer: rgb(244 225 225 / 75%); --background-warning: #fdf9eb; From 0bc6e923391f466dd4460650b324806fdd80b34b Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 17:46:42 +0700 Subject: [PATCH 57/98] fix unwanted re-renders --- src/canvas/JoinPool/Header.tsx | 4 ++-- src/canvas/JoinPool/index.tsx | 24 +++++++++++++++++++++--- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/canvas/JoinPool/Header.tsx b/src/canvas/JoinPool/Header.tsx index c8cb92eea2..e2c41c1159 100644 --- a/src/canvas/JoinPool/Header.tsx +++ b/src/canvas/JoinPool/Header.tsx @@ -25,15 +25,15 @@ export const Header = ({ setSelectedPoolId, bondedPool, metadata, + setSelectedPoolCount, }: AnyJson) => { const { t } = useTranslation(); const { closeCanvas } = useOverlay().canvas; const { counterForBondedPools } = useApi().poolsConfig; // Generate a new pool to display. - // TODO: Take into consideration status and recent activity. - // TODO: Choose a random index from bondedPools. const handleChooseNewPool = () => { + setSelectedPoolCount((prev: number) => prev + 1); setSelectedPoolId( Math.ceil(Math.random() * counterForBondedPools.minus(1).toNumber()) ); diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index bc79cbace5..fd96364158 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -16,6 +16,7 @@ import { useStaking } from 'contexts/Staking'; export const JoinPool = () => { const { + closeCanvas, config: { options }, } = useOverlay().canvas; const { eraStakers } = useStaking(); @@ -26,6 +27,9 @@ export const JoinPool = () => { // The active canvas tab. const [activeTab, setActiveTab] = useState(0); + // Trigger re-render when chosen selected pool is incremented. + const [selectedPoolCount, setSelectedPoolCount] = useState(0); + // Filter bonded pools to only those that are open and that have active daily rewards for the last // `MaxEraRewardPointsEras` eras. The second filter checks if the pool is in `eraStakers` for the // active era. @@ -53,14 +57,27 @@ export const JoinPool = () => { [bondedPools, poolRewardPoints] ); - const bondedPool = - filteredBondedPools[(filteredBondedPools.length * Math.random()) << 0]; + // The bonded pool to display. Use the provided poolId, or assign a random pool. + const bondedPool = useMemo( + () => + options?.poolId + ? bondedPools.find(({ id }) => id === options.poolId) + : filteredBondedPools[ + (filteredBondedPools.length * Math.random()) << 0 + ], + [selectedPoolCount] + ); // The selected pool id. Use the provided poolId, or assign a random pool. const [selectedPoolId, setSelectedPoolId] = useState( - options?.poolId || bondedPool.id || 0 + options?.poolId || bondedPool?.id || 0 ); + if (!bondedPool) { + closeCanvas(); + return null; + } + // Extract validator entries from pool targets const targets = poolsNominations[bondedPool.id]?.targets || []; const targetValidators = validators.filter(({ address }) => @@ -75,6 +92,7 @@ export const JoinPool = () => { setSelectedPoolId={setSelectedPoolId} bondedPool={bondedPool} metadata={poolsMetaData[selectedPoolId]} + setSelectedPoolCount={setSelectedPoolCount} /> From af944fafbac42a12baa19624718375a98590c21b Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 17:48:15 +0700 Subject: [PATCH 58/98] PerformanceGraph --- .../Overview/{RecentPerformance.tsx => PerformanceGraph.tsx} | 2 +- src/canvas/JoinPool/Overview/index.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename src/canvas/JoinPool/Overview/{RecentPerformance.tsx => PerformanceGraph.tsx} (99%) diff --git a/src/canvas/JoinPool/Overview/RecentPerformance.tsx b/src/canvas/JoinPool/Overview/PerformanceGraph.tsx similarity index 99% rename from src/canvas/JoinPool/Overview/RecentPerformance.tsx rename to src/canvas/JoinPool/Overview/PerformanceGraph.tsx index 0c0b54707a..1aad7ca0d0 100644 --- a/src/canvas/JoinPool/Overview/RecentPerformance.tsx +++ b/src/canvas/JoinPool/Overview/PerformanceGraph.tsx @@ -35,7 +35,7 @@ ChartJS.register( Legend ); -export const RecentPerformance = ({ +export const PerformanceGraph = ({ bondedPool, }: { bondedPool: BondedPool; diff --git a/src/canvas/JoinPool/Overview/index.tsx b/src/canvas/JoinPool/Overview/index.tsx index 4e4f9e0d44..0f068ca1e1 100644 --- a/src/canvas/JoinPool/Overview/index.tsx +++ b/src/canvas/JoinPool/Overview/index.tsx @@ -4,7 +4,7 @@ import { JoinForm } from './JoinForm'; import type { BondedPool } from 'contexts/Pools/BondedPools/types'; -import { RecentPerformance } from './RecentPerformance'; +import { PerformanceGraph } from './PerformanceGraph'; import { Stats } from './Stats'; import { Addresses } from './Addresses'; import { Roles } from './Roles'; @@ -13,7 +13,7 @@ export const Overview = ({ bondedPool }: { bondedPool: BondedPool }) => ( <>
- +
From 4060cab23b8497257f8a1c1410b029c391fde708 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 17:55:05 +0700 Subject: [PATCH 59/98] make graph responsive --- .../JoinPool/Overview/PerformanceGraph.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/canvas/JoinPool/Overview/PerformanceGraph.tsx b/src/canvas/JoinPool/Overview/PerformanceGraph.tsx index 1aad7ca0d0..1cbf0ca269 100644 --- a/src/canvas/JoinPool/Overview/PerformanceGraph.tsx +++ b/src/canvas/JoinPool/Overview/PerformanceGraph.tsx @@ -23,6 +23,9 @@ import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; import { useHelp } from 'contexts/Help'; import { usePoolPerformance } from 'contexts/Pools/PoolPerformance'; import type { BondedPool } from 'contexts/Pools/BondedPools/types'; +import { useRef } from 'react'; +import { formatSize } from 'library/Graphs/Utils'; +import { useSize } from 'hooks/useSize'; ChartJS.register( CategoryScale, @@ -46,6 +49,13 @@ export const PerformanceGraph = ({ const { poolRewardPoints } = usePoolPerformance(); const rawEraRewardPoints = poolRewardPoints[bondedPool.addresses.stash] || {}; + // Ref to the graph container. + const graphInnerRef = useRef(null); + + // Get the size of the graph container. + const size = useSize(graphInnerRef?.current || undefined); + const { width, height } = formatSize(size, 170); + // Format reward points as an array of strings. const dataset = Object.values( Object.fromEntries( @@ -153,8 +163,13 @@ export const PerformanceGraph = ({ />

- - + + +
+ +
); From 5b009143401bd68067610ecc8c19cbf18eb62c18 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 19:25:24 +0700 Subject: [PATCH 60/98] make design responsive --- .../JoinPool/Overview/AddressSection.tsx | 6 +- src/canvas/JoinPool/Overview/Addresses.tsx | 1 - .../JoinPool/Overview/PerformanceGraph.tsx | 9 ++- src/canvas/JoinPool/Overview/Roles.tsx | 6 +- src/canvas/JoinPool/Wrappers.ts | 64 +++++++++++++++---- src/library/Card/Wrappers.ts | 1 - 6 files changed, 61 insertions(+), 26 deletions(-) diff --git a/src/canvas/JoinPool/Overview/AddressSection.tsx b/src/canvas/JoinPool/Overview/AddressSection.tsx index b844f6c142..e83165f50a 100644 --- a/src/canvas/JoinPool/Overview/AddressSection.tsx +++ b/src/canvas/JoinPool/Overview/AddressSection.tsx @@ -22,12 +22,12 @@ export const AddressSection = ({ return (
-

+

{label} {!!helpKey && ( - openHelp(helpKey)} /> + openHelp(helpKey)} /> )} -

+
diff --git a/src/canvas/JoinPool/Overview/Addresses.tsx b/src/canvas/JoinPool/Overview/Addresses.tsx index 0be79c0984..64fd1ebe2f 100644 --- a/src/canvas/JoinPool/Overview/Addresses.tsx +++ b/src/canvas/JoinPool/Overview/Addresses.tsx @@ -18,7 +18,6 @@ export const Addresses = ({ bondedPool }: { bondedPool: BondedPool }) => {

Pool Addresses openHelp('Era Points')} /* TODO: update */ /> diff --git a/src/canvas/JoinPool/Overview/PerformanceGraph.tsx b/src/canvas/JoinPool/Overview/PerformanceGraph.tsx index 1cbf0ca269..7d9ff3a961 100644 --- a/src/canvas/JoinPool/Overview/PerformanceGraph.tsx +++ b/src/canvas/JoinPool/Overview/PerformanceGraph.tsx @@ -54,7 +54,7 @@ export const PerformanceGraph = ({ // Get the size of the graph container. const size = useSize(graphInnerRef?.current || undefined); - const { width, height } = formatSize(size, 170); + const { width, height } = formatSize(size, 150); // Format reward points as an array of strings. const dataset = Object.values( @@ -166,7 +166,12 @@ export const PerformanceGraph = ({
diff --git a/src/canvas/JoinPool/Overview/Roles.tsx b/src/canvas/JoinPool/Overview/Roles.tsx index 63e74079cb..c785ec1c44 100644 --- a/src/canvas/JoinPool/Overview/Roles.tsx +++ b/src/canvas/JoinPool/Overview/Roles.tsx @@ -17,11 +17,7 @@ export const Roles = ({ bondedPool }: { bondedPool: BondedPool }) => {

Pool Roles - openHelp('Pool Roles')} - /> + openHelp('Pool Roles')} />

diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 8db0e33161..cee01ef890 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -17,6 +17,10 @@ export const JoinPoolInterfaceWrapper = styled.div` display: flex; flex-grow: 1; + @media (max-width: 1000px) { + flex-flow: row wrap; + } + > div { display: flex; @@ -25,10 +29,22 @@ export const JoinPoolInterfaceWrapper = styled.div` display: flex; flex-direction: column; padding-right: 4rem; + + @media (max-width: 1000px) { + flex-basis: 100%; + padding-right: 0; + } } &.side { min-width: 450px; + + @media (max-width: 1000px) { + flex-grow: 1; + flex-basis: 100%; + margin-top: 0.5rem; + } + > div { width: 100%; } @@ -125,10 +141,13 @@ export const JoinFormWrapper = styled.div` border: 0.75px solid var(--border-primary-color); box-shadow: var(--card-shadow); border-radius: 1.5rem; - padding: 1.25rem; - margin-top: 0.75rem; + padding: 1.5rem; width: 100%; + @media (max-width: 1000px) { + margin-top: 1rem; + } + h4 { display: flex; align-items: center; @@ -216,6 +235,10 @@ export const HeadingWrapper = styled.div` display: flex; align-items: center; + @media (max-width: 600px) { + flex-wrap: wrap; + } + > span { background-color: var(--background-canvas-card); color: var(--text-color-secondary); @@ -226,6 +249,17 @@ export const HeadingWrapper = styled.div` display: flex; align-items: center; + @media (max-width: 600px) { + flex-grow: 1; + min-width: 50%; + justify-content: center; + margin-bottom: 1rem; + + &:last-child { + margin-bottom: 0; + } + } + &.balance { padding-left: 0.5rem; } @@ -244,23 +278,31 @@ export const HeadingWrapper = styled.div` `; export const GraphWrapper = styled.div` - padding: 0 3rem 0 1rem; - margin: 2rem 0 0 0; + padding: 0 4rem 0 1rem; + margin-top: 2rem; position: relative; width: 100%; + + @media (max-width: 1000px) { + padding: 0 0 0 1rem; + } `; export const AddressesWrapper = styled.div` display: flex; - padding: 0rem 0.5rem 0 0.5rem; - width: 100%; + padding: 0rem 0.25rem; flex-wrap: wrap; + width: 100%; > section { display: flex; flex-direction: column; flex-basis: 50%; - margin: 0.9rem 0; + margin: 0.9rem 0 0.7rem 0; + + @media (max-width: 600px) { + flex-basis: 100%; + } > div { display: flex; @@ -271,15 +313,9 @@ export const AddressesWrapper = styled.div` margin-right: 0.75rem; } - > h3 { - font-family: InterSemiBold, sans-serif; - color: var(--text-color-secondary); - margin-bottom: 0.25rem; - } - > h4 { - font-family: InterSemiBold, sans-serif; color: var(--text-color-secondary); + font-family: InterSemiBold, sans-serif; margin: 0; overflow: hidden; text-overflow: ellipsis; diff --git a/src/library/Card/Wrappers.ts b/src/library/Card/Wrappers.ts index 89821b5c03..16891afbe7 100644 --- a/src/library/Card/Wrappers.ts +++ b/src/library/Card/Wrappers.ts @@ -90,7 +90,6 @@ export const CardWrapper = styled.div` padding: 1.25rem; &.secondary { - background: var(--background-canvas-card-secondary); padding: 1rem; } } From f49e8e99da5dfd42d484ea2f25ded5a57e845ac7 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 19:26:27 +0700 Subject: [PATCH 61/98] adjust theme --- src/library/Card/Wrappers.ts | 8 ++++++++ src/theme/theme.scss | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/library/Card/Wrappers.ts b/src/library/Card/Wrappers.ts index 16891afbe7..a63ebf9f65 100644 --- a/src/library/Card/Wrappers.ts +++ b/src/library/Card/Wrappers.ts @@ -91,6 +91,14 @@ export const CardWrapper = styled.div` &.secondary { padding: 1rem; + + @media (max-width: 1000px) { + background: var(--background-canvas-card); + } + + @media (min-width: 1001px) { + background: var(--background-canvas-card-secondary); + } } } diff --git a/src/theme/theme.scss b/src/theme/theme.scss index c9fe2b9abc..d79c08aeb2 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -9,7 +9,7 @@ SPDX-License-Identifier: GPL-3.0-only */ --background-list-item: rgb(238 238 238 / 100%); --background-modal-card: rgb(237 237 237 / 75%); --background-canvas-card: rgb(245 245 245 / 90%); - --background-canvas-card-secondary: rgb(255 255 255 / 30%); + --background-canvas-card-secondary: rgb(255 255 255 / 50%); --background-floating-card: rgb(255 255 255 / 90%); --background-app-footer: rgb(244 225 225 / 75%); --background-warning: #fdf9eb; From 80452632e966e43fc16eaad47c21c1a6c8480ffd Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 19:30:54 +0700 Subject: [PATCH 62/98] styling, remove help button --- .../JoinPool/Overview/AddressSection.tsx | 2 +- src/canvas/JoinPool/Overview/Addresses.tsx | 41 ++++++------------- src/canvas/JoinPool/Wrappers.ts | 5 +++ src/theme/theme.scss | 2 +- 4 files changed, 20 insertions(+), 30 deletions(-) diff --git a/src/canvas/JoinPool/Overview/AddressSection.tsx b/src/canvas/JoinPool/Overview/AddressSection.tsx index e83165f50a..a167eebca1 100644 --- a/src/canvas/JoinPool/Overview/AddressSection.tsx +++ b/src/canvas/JoinPool/Overview/AddressSection.tsx @@ -22,7 +22,7 @@ export const AddressSection = ({ return (
-

+

{label} {!!helpKey && ( openHelp(helpKey)} /> diff --git a/src/canvas/JoinPool/Overview/Addresses.tsx b/src/canvas/JoinPool/Overview/Addresses.tsx index 64fd1ebe2f..345a9c4180 100644 --- a/src/canvas/JoinPool/Overview/Addresses.tsx +++ b/src/canvas/JoinPool/Overview/Addresses.tsx @@ -5,33 +5,18 @@ import type { BondedPool } from 'contexts/Pools/BondedPools/types'; import { CardWrapper } from 'library/Card/Wrappers'; import { AddressesWrapper, HeadingWrapper } from '../Wrappers'; import { AddressSection } from './AddressSection'; -import { useHelp } from 'contexts/Help'; -import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; -export const Addresses = ({ bondedPool }: { bondedPool: BondedPool }) => { - const { openHelp } = useHelp(); +export const Addresses = ({ bondedPool }: { bondedPool: BondedPool }) => ( +
+ + +

Pool Addresses

+ - return ( -
- - -

- Pool Addresses - openHelp('Era Points')} /* TODO: update */ - /> -

- - - - - - - -
- ); -}; + + + + + +
+); diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index cee01ef890..f2ce97673a 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -242,6 +242,7 @@ export const HeadingWrapper = styled.div` > span { background-color: var(--background-canvas-card); color: var(--text-color-secondary); + font-family: InterBold, sans-serif; border-radius: 1.5rem; padding: 0rem 1.25rem; margin-right: 1rem; @@ -323,6 +324,10 @@ export const AddressesWrapper = styled.div` display: flex; width: 100%; + &.heading { + font-family: InterBold, sans-serif; + } + > .label { margin-left: 0.75rem; diff --git a/src/theme/theme.scss b/src/theme/theme.scss index d79c08aeb2..24f22349e5 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -46,7 +46,7 @@ SPDX-License-Identifier: GPL-3.0-only */ --status-danger-color: #ae2324; --status-danger-color-transparent: rgb(255 0 0 / 25%); --text-color-primary: #3f3f3f; - --text-color-secondary: #555; + --text-color-secondary: #585858; --text-color-tertiary: #888; --text-color-invert: #fafafa; --gradient-background: linear-gradient( From 6db8c5dbdf3849dfc5b323c3ab28dd853d5efb00 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 19:32:33 +0700 Subject: [PATCH 63/98] styling --- src/canvas/JoinPool/Wrappers.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index f2ce97673a..c818adaa1e 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -255,6 +255,7 @@ export const HeadingWrapper = styled.div` min-width: 50%; justify-content: center; margin-bottom: 1rem; + height: 2.9rem; &:last-child { margin-bottom: 0; From 5e44258476efce4ce322a316aea4f9b2f18f4325 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 19:33:57 +0700 Subject: [PATCH 64/98] remove help --- src/canvas/JoinPool/Overview/JoinForm.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/canvas/JoinPool/Overview/JoinForm.tsx b/src/canvas/JoinPool/Overview/JoinForm.tsx index 55765f1117..49d736115b 100644 --- a/src/canvas/JoinPool/Overview/JoinForm.tsx +++ b/src/canvas/JoinPool/Overview/JoinForm.tsx @@ -12,7 +12,6 @@ import { useTxMeta } from 'contexts/TxMeta'; import { useState } from 'react'; import { JoinFormWrapper } from '../Wrappers'; import { ButtonSubmitInvert } from 'kits/Buttons/ButtonSubmitInvert'; -import { ButtonHelp } from 'kits/Buttons/ButtonHelp'; import { ClaimPermissionInput } from 'library/Form/ClaimPermissionInput'; import { CallToActionWrapper } from 'library/CallToAction'; @@ -67,13 +66,7 @@ export const JoinForm = () => {

You have 0.5 DOT available to bond.

-

- Claim Setting - openHelp('Permissionless Claiming')} - /> -

+

Claim Setting

Date: Mon, 1 Apr 2024 19:34:07 +0700 Subject: [PATCH 65/98] remove unused hook --- src/canvas/JoinPool/Overview/JoinForm.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/canvas/JoinPool/Overview/JoinForm.tsx b/src/canvas/JoinPool/Overview/JoinForm.tsx index 49d736115b..2f9e14fa08 100644 --- a/src/canvas/JoinPool/Overview/JoinForm.tsx +++ b/src/canvas/JoinPool/Overview/JoinForm.tsx @@ -4,7 +4,6 @@ import { planckToUnit } from '@w3ux/utils'; import BigNumber from 'bignumber.js'; import { useActiveAccounts } from 'contexts/ActiveAccounts'; -import { useHelp } from 'contexts/Help'; import { useNetwork } from 'contexts/Network'; import type { ClaimPermission } from 'contexts/Pools/types'; import { useTransferOptions } from 'contexts/TransferOptions'; @@ -20,7 +19,6 @@ export const JoinForm = () => { networkData: { units }, } = useNetwork(); const { txFees } = useTxMeta(); - const { openHelp } = useHelp(); const { activeAccount } = useActiveAccounts(); const { getTransferOptions } = useTransferOptions(); From aabd16ff3fc49e1d54fe1a7e506fef86bc3154f8 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 19:38:49 +0700 Subject: [PATCH 66/98] amend text --- src/locale/en/library.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/locale/en/library.json b/src/locale/en/library.json index c77b0a37c7..d222a02ad4 100644 --- a/src/locale/en/library.json +++ b/src/locale/en/library.json @@ -15,9 +15,9 @@ "addressCopiedToClipboard": "Address Copied to Clipboard", "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", From fa72c1849e6fbb5428a1759a3ec822b85e8c1caf Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 19:42:37 +0700 Subject: [PATCH 67/98] graph spacing --- src/canvas/JoinPool/Overview/PerformanceGraph.tsx | 3 +-- src/canvas/JoinPool/Wrappers.ts | 14 +++++++++++++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/canvas/JoinPool/Overview/PerformanceGraph.tsx b/src/canvas/JoinPool/Overview/PerformanceGraph.tsx index 7d9ff3a961..2cd2a50fa9 100644 --- a/src/canvas/JoinPool/Overview/PerformanceGraph.tsx +++ b/src/canvas/JoinPool/Overview/PerformanceGraph.tsx @@ -166,11 +166,10 @@ export const PerformanceGraph = ({
diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index c818adaa1e..0d52007a02 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -57,7 +57,7 @@ export const TitleWrapper = styled.div` border-bottom: 1px solid var(--border-secondary-color); display: flex; flex-direction: column; - margin: 2.45rem 0 1.85rem 0; + margin: 2.45rem 0 1.55rem 0; padding-bottom: 0.1rem; width: 100%; overflow: hidden; @@ -288,6 +288,18 @@ export const GraphWrapper = styled.div` @media (max-width: 1000px) { padding: 0 0 0 1rem; } + + > .inner { + position: absolute; + width: 100%; + height: 100%; + padding-left: 1rem; + padding-right: 4rem; + + @media (max-width: 1000px) { + padding-right: 1.5rem; + } + } `; export const AddressesWrapper = styled.div` From b647ff031dd6e6d0a7078984698c4c02f6078d2b Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 19:53:11 +0700 Subject: [PATCH 68/98] add autoSelect badge --- src/canvas/JoinPool/Header.tsx | 7 +++++++ src/canvas/JoinPool/Wrappers.ts | 6 ++---- src/canvas/JoinPool/index.tsx | 1 + 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/canvas/JoinPool/Header.tsx b/src/canvas/JoinPool/Header.tsx index e2c41c1159..633e277f6f 100644 --- a/src/canvas/JoinPool/Header.tsx +++ b/src/canvas/JoinPool/Header.tsx @@ -26,6 +26,7 @@ export const Header = ({ bondedPool, metadata, setSelectedPoolCount, + autoSelected, }: AnyJson) => { const { t } = useTranslation(); const { closeCanvas } = useOverlay().canvas; @@ -98,6 +99,12 @@ export const Header = ({ )} + + {autoSelected && ( +

+ Auto Selected +

+ )}
diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 0d52007a02..9d14180658 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -57,10 +57,9 @@ export const TitleWrapper = styled.div` border-bottom: 1px solid var(--border-secondary-color); display: flex; flex-direction: column; - margin: 2.45rem 0 1.55rem 0; + margin: 2rem 0 1.55rem 0; padding-bottom: 0.1rem; width: 100%; - overflow: hidden; > .inner { display: flex; @@ -100,7 +99,7 @@ export const TitleWrapper = styled.div` > .labels { display: flex; - margin-top: 0.7rem; + margin-top: 1rem; > h3 { color: var(--text-color-secondary); @@ -112,7 +111,6 @@ export const TitleWrapper = styled.div` } > span { - color: var(--text-color-tertiary); border: 1px solid var(--border-secondary-color); border-radius: 0.5rem; padding: 0.3rem 0.6rem; diff --git a/src/canvas/JoinPool/index.tsx b/src/canvas/JoinPool/index.tsx index fd96364158..538a09ad2f 100644 --- a/src/canvas/JoinPool/index.tsx +++ b/src/canvas/JoinPool/index.tsx @@ -93,6 +93,7 @@ export const JoinPool = () => { bondedPool={bondedPool} metadata={poolsMetaData[selectedPoolId]} setSelectedPoolCount={setSelectedPoolCount} + autoSelected={options?.poolId === undefined} /> From 21526f5910505b5af8a20c9c12a1dbb17bb8c890 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 20:00:31 +0700 Subject: [PATCH 69/98] fix margin --- src/canvas/JoinPool/Wrappers.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 9d14180658..0dbea95f7d 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -211,6 +211,10 @@ export const NominationsWrapper = styled.div` export const HeadingWrapper = styled.div` margin: 0.5rem 0.5rem 0.5rem 0rem; + @media (max-width: 600px) { + margin-right: 0; + } + h3, p { padding: 0 0.5rem; @@ -250,10 +254,11 @@ export const HeadingWrapper = styled.div` @media (max-width: 600px) { flex-grow: 1; - min-width: 50%; justify-content: center; margin-bottom: 1rem; + margin-right: 0; height: 2.9rem; + width: 100%; &:last-child { margin-bottom: 0; From 12e26e5f62f591dc226dafd376374db084b5a415 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 20:06:45 +0700 Subject: [PATCH 70/98] optimise mobile ordering --- .../JoinPool/Overview/PerformanceGraph.tsx | 6 ++--- src/canvas/JoinPool/Overview/index.tsx | 7 ++++-- src/canvas/JoinPool/Wrappers.ts | 25 +++++++++++++++++++ 3 files changed, 33 insertions(+), 5 deletions(-) diff --git a/src/canvas/JoinPool/Overview/PerformanceGraph.tsx b/src/canvas/JoinPool/Overview/PerformanceGraph.tsx index 2cd2a50fa9..58eb49030f 100644 --- a/src/canvas/JoinPool/Overview/PerformanceGraph.tsx +++ b/src/canvas/JoinPool/Overview/PerformanceGraph.tsx @@ -152,8 +152,8 @@ export const PerformanceGraph = ({ }; return ( - <> - +
+

Recent Performance

- + ); }; diff --git a/src/canvas/JoinPool/Overview/index.tsx b/src/canvas/JoinPool/Overview/index.tsx index 0f068ca1e1..7c6e57640b 100644 --- a/src/canvas/JoinPool/Overview/index.tsx +++ b/src/canvas/JoinPool/Overview/index.tsx @@ -8,12 +8,15 @@ import { PerformanceGraph } from './PerformanceGraph'; import { Stats } from './Stats'; import { Addresses } from './Addresses'; import { Roles } from './Roles'; +import { GrahpStatsWrapper } from '../Wrappers'; export const Overview = ({ bondedPool }: { bondedPool: BondedPool }) => ( <>
- - + + + +
diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 0dbea95f7d..9d941ce049 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -355,3 +355,28 @@ export const AddressesWrapper = styled.div` } } `; + +export const GrahpStatsWrapper = styled.div` + width: 100%; + display: flex; + flex-direction: column; + + @media (min-width: 1001px) { + > div:last-child { + margin-top: 1.25rem; + } + } + + @media (max-width: 1000px) { + > div { + &:first-child { + order: 2; + margin-top: 1.5rem; + margin-bottom: 0; + } + &:last-child { + order: 1; + } + } + } +`; From faf4141031839d76c63ed07cd86176075239b966 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Mon, 1 Apr 2024 20:14:25 +0700 Subject: [PATCH 71/98] use secondary --- src/canvas/JoinPool/Wrappers.ts | 2 +- src/theme/theme.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 9d941ce049..5542ea4492 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -242,7 +242,7 @@ export const HeadingWrapper = styled.div` } > span { - background-color: var(--background-canvas-card); + background-color: var(--background-canvas-card-secondary); color: var(--text-color-secondary); font-family: InterBold, sans-serif; border-radius: 1.5rem; diff --git a/src/theme/theme.scss b/src/theme/theme.scss index 24f22349e5..f8734b150d 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -9,7 +9,7 @@ SPDX-License-Identifier: GPL-3.0-only */ --background-list-item: rgb(238 238 238 / 100%); --background-modal-card: rgb(237 237 237 / 75%); --background-canvas-card: rgb(245 245 245 / 90%); - --background-canvas-card-secondary: rgb(255 255 255 / 50%); + --background-canvas-card-secondary: rgb(255 255 255 / 35%); --background-floating-card: rgb(255 255 255 / 90%); --background-app-footer: rgb(244 225 225 / 75%); --background-warning: #fdf9eb; From cbb0c8a84ce5082efd5a1c9eb6c14e372432ea07 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Tue, 2 Apr 2024 10:12:46 +0700 Subject: [PATCH 72/98] misc fixes --- src/canvas/JoinPool/Wrappers.ts | 4 ++-- src/library/CallToAction/index.tsx | 16 ++++++++++++++++ .../Nominate/Active/Status/NewNominator.tsx | 15 +++++++++++---- src/pages/Pools/Home/Status/NewMember.tsx | 19 +++++++++++++------ 4 files changed, 42 insertions(+), 12 deletions(-) diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 5542ea4492..8efe1d126a 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -99,7 +99,7 @@ export const TitleWrapper = styled.div` > .labels { display: flex; - margin-top: 1rem; + margin-top: 1.1rem; > h3 { color: var(--text-color-secondary); @@ -113,7 +113,7 @@ export const TitleWrapper = styled.div` > span { border: 1px solid var(--border-secondary-color); border-radius: 0.5rem; - padding: 0.3rem 0.6rem; + padding: 0.4rem 0.6rem; margin-left: 1rem; font-size: 1.1rem; diff --git a/src/library/CallToAction/index.tsx b/src/library/CallToAction/index.tsx index 2100de361e..1be3b5ad9f 100644 --- a/src/library/CallToAction/index.tsx +++ b/src/library/CallToAction/index.tsx @@ -92,6 +92,14 @@ export const CallToActionWrapper = styled.div` &:hover { filter: brightness(90%); } + + &.disabled { + background-color: var(--accent-color-pending); + + &:hover { + filter: none; + } + } } &.secondary { @@ -103,6 +111,14 @@ export const CallToActionWrapper = styled.div` &:hover { filter: brightness(95%); } + + &.disabled { + opacity: 0.5; + + &:hover { + filter: none; + } + } } &.standalone { diff --git a/src/pages/Nominate/Active/Status/NewNominator.tsx b/src/pages/Nominate/Active/Status/NewNominator.tsx index 03be36e1af..567027d7bf 100644 --- a/src/pages/Nominate/Active/Status/NewNominator.tsx +++ b/src/pages/Nominate/Active/Status/NewNominator.tsx @@ -14,15 +14,20 @@ 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'; export const NewNominator = ({ syncing }: NewNominatorProps) => { const { t } = useTranslation('pages'); - const navigate = useNavigate(); const { isReady } = useApi(); - const { activeAccount } = useActiveAccounts(); + const navigate = useNavigate(); const { setOnNominatorSetup } = useSetup(); + const { activeAccount } = useActiveAccounts(); + const { isReadOnlyAccount } = useImportedAccounts(); // const setupPercent = getNominatorSetupPercent(activeAccount); + const nominateButtonDisabled = + !isReady || !activeAccount || isReadOnlyAccount(activeAccount); + return (
@@ -31,10 +36,12 @@ export const NewNominator = ({ syncing }: NewNominatorProps) => { ) : (
-
+
-
+
diff --git a/src/canvas/JoinPool/Overview/index.tsx b/src/canvas/JoinPool/Overview/index.tsx index 7c6e57640b..39d99feef2 100644 --- a/src/canvas/JoinPool/Overview/index.tsx +++ b/src/canvas/JoinPool/Overview/index.tsx @@ -22,7 +22,7 @@ export const Overview = ({ bondedPool }: { bondedPool: BondedPool }) => (
- +
diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 8efe1d126a..826a1e2f21 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -179,14 +179,12 @@ export const JoinFormWrapper = styled.div` padding-bottom: 1.25rem; > div { - &:first-child { - flex-grow: 1; - display: flex; - align-items: flex-end; + flex-grow: 1; + display: flex; + flex-direction: column; - > h2 { - font-size: 2rem; - } + > div { + margin: 0; } } } diff --git a/src/kits/Structure/Tx/Wrapper.ts b/src/kits/Structure/Tx/Wrapper.ts index bf8410610a..e56b68ee82 100644 --- a/src/kits/Structure/Tx/Wrapper.ts +++ b/src/kits/Structure/Tx/Wrapper.ts @@ -24,7 +24,7 @@ export const Wrapper = styled.div` } &.card { - background: transparent; + border-radius: 0.5rem; } > section { From 1c5d16b9d3007e9e5460376be3c3c4a33b0258e3 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Tue, 2 Apr 2024 11:09:17 +0700 Subject: [PATCH 76/98] separate signer from tx styling --- src/canvas/JoinPool/Overview/JoinForm.tsx | 14 +++---- src/kits/Structure/Tx/Signer.tsx | 33 +++++++++++++++ src/kits/Structure/Tx/Wrapper.ts | 50 +++++++++++------------ src/kits/Structure/Tx/index.tsx | 47 ++++----------------- src/kits/Structure/Tx/types.ts | 18 ++++++++ src/library/SubmitTx/Default.tsx | 35 ++++++++-------- 6 files changed, 110 insertions(+), 87 deletions(-) create mode 100644 src/kits/Structure/Tx/Signer.tsx create mode 100644 src/kits/Structure/Tx/types.ts diff --git a/src/canvas/JoinPool/Overview/JoinForm.tsx b/src/canvas/JoinPool/Overview/JoinForm.tsx index 0d4939abeb..e4774269cd 100644 --- a/src/canvas/JoinPool/Overview/JoinForm.tsx +++ b/src/canvas/JoinPool/Overview/JoinForm.tsx @@ -144,14 +144,14 @@ export const JoinForm = ({ bondedPool }: { bondedPool: BondedPool }) => { }} /> - -
+ +
diff --git a/src/kits/Structure/Tx/Signer.tsx b/src/kits/Structure/Tx/Signer.tsx new file mode 100644 index 0000000000..d406087766 --- /dev/null +++ b/src/kits/Structure/Tx/Signer.tsx @@ -0,0 +1,33 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import { faPenToSquare, faWarning } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import type { SignerProps } from './types'; +import { SignerWrapper } from './Wrapper'; + +export const Signer = ({ + dangerMessage, + notEnoughFunds, + name, + label, +}: SignerProps) => ( + + + + {label} + + {name} + {notEnoughFunds && ( + + /   + {' '} + {dangerMessage} + + )} + +); diff --git a/src/kits/Structure/Tx/Wrapper.ts b/src/kits/Structure/Tx/Wrapper.ts index e56b68ee82..c3aab111d2 100644 --- a/src/kits/Structure/Tx/Wrapper.ts +++ b/src/kits/Structure/Tx/Wrapper.ts @@ -85,35 +85,35 @@ export const Wrapper = styled.div` } } } +`; - .sign { - display: flex; - align-items: center; - font-size: 0.9rem; - padding-bottom: 0.5rem; - margin: 0; - - .badge { - border: 1px solid var(--border-secondary-color); - border-radius: 0.45rem; - padding: 0.2rem 0.5rem; - margin-right: 0.75rem; - - > svg { - margin-right: 0.5rem; - } +export const SignerWrapper = styled.p` + display: flex; + align-items: center; + font-size: 0.9rem; + padding-bottom: 0.5rem; + margin: 0; + + .badge { + border: 1px solid var(--border-secondary-color); + border-radius: 0.45rem; + padding: 0.2rem 0.5rem; + margin-right: 0.75rem; + + > svg { + margin-right: 0.5rem; } + } - .not-enough { - margin-left: 0.5rem; - } + .not-enough { + margin-left: 0.5rem; + } - .danger { - color: var(--status-danger-color); - } + .danger { + color: var(--status-danger-color); + } - > .icon { - margin-right: 0.3rem; - } + > .icon { + margin-right: 0.3rem; } `; diff --git a/src/kits/Structure/Tx/index.tsx b/src/kits/Structure/Tx/index.tsx index 2ce61df141..5e312d441a 100644 --- a/src/kits/Structure/Tx/index.tsx +++ b/src/kits/Structure/Tx/index.tsx @@ -1,29 +1,10 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { faPenToSquare, faWarning } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import type { ReactElement } from 'react'; -import type { DisplayFor } from 'types'; import { Wrapper } from './Wrapper'; import { appendOrEmpty } from '@w3ux/utils'; - -export interface TxProps { - // whether there is margin on top. - margin?: boolean; - // account type for the transaction signing. - label: string; - // account id - name: string; - // whether there is enough funds for the transaction. - notEnoughFunds: boolean; - // warning messgae. - dangerMessage: string; - // signing component. - SignerComponent: ReactElement; - // display for. - displayFor?: DisplayFor; -} +import type { TxProps } from './types'; +import { Signer } from './Signer'; /** * @name Tx @@ -42,24 +23,12 @@ export const Tx = ({
-

- - - {label} - - {name} - {notEnoughFunds && ( - - /   - {' '} - {dangerMessage} - - )} -

+
{SignerComponent}
diff --git a/src/kits/Structure/Tx/types.ts b/src/kits/Structure/Tx/types.ts new file mode 100644 index 0000000000..01e5981dac --- /dev/null +++ b/src/kits/Structure/Tx/types.ts @@ -0,0 +1,18 @@ +// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { ReactElement } from 'react'; +import type { DisplayFor } from 'types'; + +export interface SignerProps { + label: string; + name: string; + notEnoughFunds: boolean; + dangerMessage: string; +} + +export interface TxProps extends SignerProps { + margin?: boolean; + SignerComponent: ReactElement; + displayFor?: DisplayFor; +} diff --git a/src/library/SubmitTx/Default.tsx b/src/library/SubmitTx/Default.tsx index e475696a4b..7fd1423a1b 100644 --- a/src/library/SubmitTx/Default.tsx +++ b/src/library/SubmitTx/Default.tsx @@ -25,22 +25,25 @@ export const Default = ({ submitting || !valid || !accountHasSigner(submitAddress) || !txFeesValid; return ( -
-
- + <> +
+
+ +
+
+ {buttons} + onSubmit()} + disabled={disabled} + pulse={!disabled} + /> +
-
- {buttons} - onSubmit()} - disabled={disabled} - pulse={!disabled} - /> -
-
+ {displayFor === 'card' && large button should go here} + ); }; From 7434bb1179705054f81c1683c045ecb5206d72e0 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Tue, 2 Apr 2024 11:14:04 +0700 Subject: [PATCH 77/98] add disabled styling --- src/library/CallToAction/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/library/CallToAction/index.tsx b/src/library/CallToAction/index.tsx index 1be3b5ad9f..5e10fcc6c1 100644 --- a/src/library/CallToAction/index.tsx +++ b/src/library/CallToAction/index.tsx @@ -148,6 +148,10 @@ export const CallToActionWrapper = styled.div` flex-wrap: nowrap; width: 100%; + &:disabled { + cursor: default; + } + > svg { margin: 0 0.75rem; } From dbdf8d216f5848029595080cb88944a9ccc6d3a5 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Tue, 2 Apr 2024 12:03:30 +0700 Subject: [PATCH 78/98] add card SubmitTx form factor --- src/canvas/JoinPool/Overview/JoinForm.tsx | 24 +-------- src/kits/Structure/Tx/Wrapper.ts | 19 +++++++ src/library/CallToAction/index.tsx | 23 ++++++++ src/library/SubmitTx/ButtonSubmitLarge.tsx | 42 +++++++++++++++ src/library/SubmitTx/Default.tsx | 34 ++++++++---- .../SubmitTx/ManualSign/Ledger/Submit.tsx | 11 +++- .../SubmitTx/ManualSign/Ledger/index.tsx | 5 +- .../SubmitTx/ManualSign/Vault/index.tsx | 53 ++++++++++++------- src/library/SubmitTx/types.ts | 10 ++++ 9 files changed, 166 insertions(+), 55 deletions(-) create mode 100644 src/library/SubmitTx/ButtonSubmitLarge.tsx diff --git a/src/canvas/JoinPool/Overview/JoinForm.tsx b/src/canvas/JoinPool/Overview/JoinForm.tsx index e4774269cd..1c766d02f3 100644 --- a/src/canvas/JoinPool/Overview/JoinForm.tsx +++ b/src/canvas/JoinPool/Overview/JoinForm.tsx @@ -10,7 +10,6 @@ import { useTransferOptions } from 'contexts/TransferOptions'; import { useState } from 'react'; import { JoinFormWrapper } from '../Wrappers'; import { ClaimPermissionInput } from 'library/Form/ClaimPermissionInput'; -import { CallToActionWrapper } from 'library/CallToAction'; import { BondFeedback } from 'library/Form/Bond/BondFeedback'; import { useBondGreatestFee } from 'hooks/useBondGreatestFee'; import { useApi } from 'contexts/Api'; @@ -150,29 +149,8 @@ export const JoinForm = ({ bondedPool }: { bondedPool: BondedPool }) => { valid={!submitDisabled} {...submitExtrinsic} displayFor="card" + submitText="Join Pool" /> - - -
-
-
-
- -
-
-
-
-
); diff --git a/src/kits/Structure/Tx/Wrapper.ts b/src/kits/Structure/Tx/Wrapper.ts index c3aab111d2..99c754f572 100644 --- a/src/kits/Structure/Tx/Wrapper.ts +++ b/src/kits/Structure/Tx/Wrapper.ts @@ -35,6 +35,25 @@ export const Wrapper = styled.div` flex-direction: row; align-items: center; + &.col { + flex-direction: column; + margin-top: 0.5rem; + > div { + width: 100%; + margin-bottom: 0.4rem; + + > div, + > p { + width: 100%; + margin-bottom: 0.4rem; + } + + > div:last-child { + margin-bottom: 0; + } + } + } + > div { display: flex; diff --git a/src/library/CallToAction/index.tsx b/src/library/CallToAction/index.tsx index 5e10fcc6c1..2dd67759ba 100644 --- a/src/library/CallToAction/index.tsx +++ b/src/library/CallToAction/index.tsx @@ -100,6 +100,29 @@ export const CallToActionWrapper = styled.div` filter: none; } } + + &.pulse { + box-shadow: 0 0 30px 0 var(--accent-color-pending); + transform: scale(1); + animation: pulse 4s infinite; + + @keyframes pulse { + 0% { + transform: scale(0.98); + box-shadow: 0 0 0 0 var(--accent-color-pending); + } + + 70% { + transform: scale(1); + box-shadow: 0 0 0 10px rgb(0 0 0 / 0%); + } + + 100% { + transform: scale(0.98); + box-shadow: 0 0 0 0 rgb(0 0 0 / 0%); + } + } + } } &.secondary { diff --git a/src/library/SubmitTx/ButtonSubmitLarge.tsx b/src/library/SubmitTx/ButtonSubmitLarge.tsx new file mode 100644 index 0000000000..e3924f5d58 --- /dev/null +++ b/src/library/SubmitTx/ButtonSubmitLarge.tsx @@ -0,0 +1,42 @@ +// 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) => ( + +
+
+
+
+ +
+
+
+
+ +); diff --git a/src/library/SubmitTx/Default.tsx b/src/library/SubmitTx/Default.tsx index 7fd1423a1b..5305e89ec0 100644 --- a/src/library/SubmitTx/Default.tsx +++ b/src/library/SubmitTx/Default.tsx @@ -8,6 +8,8 @@ import { EstimatedTxFee } from 'library/EstimatedTxFee'; import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'; import type { SubmitProps } from './types'; import { ButtonSubmit } from 'kits/Buttons/ButtonSubmit'; +import { ButtonSubmitLarge } from './ButtonSubmitLarge'; +import { appendOrEmpty } from '@w3ux/utils'; export const Default = ({ onSubmit, @@ -26,24 +28,34 @@ export const Default = ({ return ( <> -
+
{buttons} - onSubmit()} - disabled={disabled} - pulse={!disabled} - /> + {displayFor !== 'card' && ( + onSubmit()} + disabled={disabled} + pulse={!disabled} + /> + )}
- {displayFor === 'card' && large button should go here} + {displayFor === 'card' && ( + + )} ); }; 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 3e6072d3bf..4f1416550d 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'; @@ -33,3 +34,12 @@ export interface LedgerSubmitProps { disabled: boolean; submitText?: string; } + +export interface ButtonSubmitLargeProps { + disabled: boolean; + onSubmit: () => void; + submitText: string; + icon?: IconProp; + iconTransform?: string; + pulse: boolean; +} From cfdc778d8f9e872c4dcec53a74e59bdfecda14da Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Tue, 2 Apr 2024 12:15:38 +0700 Subject: [PATCH 79/98] deprecate JoinPool modal --- src/canvas/JoinPool/Overview/JoinForm.tsx | 9 +- src/library/ListItem/Labels/JoinPool.tsx | 10 +- src/modals/JoinPool/index.tsx | 151 ---------------------- src/overlay/index.tsx | 6 +- src/pages/Pools/Home/Status/NewMember.tsx | 2 +- 5 files changed, 16 insertions(+), 162 deletions(-) delete mode 100644 src/modals/JoinPool/index.tsx diff --git a/src/canvas/JoinPool/Overview/JoinForm.tsx b/src/canvas/JoinPool/Overview/JoinForm.tsx index 1c766d02f3..96549dd08a 100644 --- a/src/canvas/JoinPool/Overview/JoinForm.tsx +++ b/src/canvas/JoinPool/Overview/JoinForm.tsx @@ -29,13 +29,17 @@ export const JoinForm = ({ bondedPool }: { bondedPool: BondedPool }) => { networkData: { units }, } = useNetwork(); const { newBatchCall } = useBatchCall(); - const { closeCanvas } = useOverlay().canvas; + const { + closeCanvas, + config: { options }, + } = useOverlay().canvas; const { setActiveAccountSetup } = useSetup(); const { activeAccount } = useActiveAccounts(); const { getSignerWarnings } = useSignerWarnings(); const { getTransferOptions } = useTransferOptions(); const largestTxFee = useBondGreatestFee({ bondFor: 'pool' }); const { queryPoolMember, addToPoolMembers } = usePoolMembers(); + const onJoinCallback = options?.onJoinCallback; const { pool: { totalPossibleBond }, @@ -91,6 +95,9 @@ export const JoinForm = ({ bondedPool }: { bondedPool: BondedPool }) => { shouldSubmit: bondValid, callbackSubmit: () => { closeCanvas(); + if (typeof onJoinCallback === 'function') { + onJoinCallback(); + } }, callbackInBlock: async () => { // query and add account to poolMembers list diff --git a/src/library/ListItem/Labels/JoinPool.tsx b/src/library/ListItem/Labels/JoinPool.tsx index 0bb9e9e6ff..b6e98cb25b 100644 --- a/src/library/ListItem/Labels/JoinPool.tsx +++ b/src/library/ListItem/Labels/JoinPool.tsx @@ -14,20 +14,20 @@ export const JoinPool = ({ setActiveTab: (t: number) => void; }) => { const { t } = useTranslation('library'); - const { openModal } = useOverlay().modal; + const { openCanvas } = useOverlay().canvas; return (
From a452955cc3813a8fac24d41b214885fbc2df6ee9 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Tue, 2 Apr 2024 16:23:57 +0700 Subject: [PATCH 95/98] add translations --- src/locale/cn/library.json | 1 + src/locale/en/library.json | 1 + src/pages/Pools/Home/Status/NewMember.tsx | 10 +++++----- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/locale/cn/library.json b/src/locale/cn/library.json index 94c1c75dfc..f91f51aac3 100644 --- a/src/locale/cn/library.json +++ b/src/locale/cn/library.json @@ -183,6 +183,7 @@ "signing": "签署中", "submitTransaction": "准备提交交易", "syncing": "正在同步", + "syncingPoolData": "Syncing Pool Data", "syncingPoolList": "同步提名池列表", "tooSmall": "质押金额太少", "top": "首", diff --git a/src/locale/en/library.json b/src/locale/en/library.json index 993640d154..084462da4d 100644 --- a/src/locale/en/library.json +++ b/src/locale/en/library.json @@ -185,6 +185,7 @@ "signing": "Signing", "submitTransaction": "Ready to submit transaction.", "syncing": "Syncing", + "syncingPoolData": "Syncing Pool Data", "syncingPoolList": "Syncing Pool list", "tooSmall": "Bond amount is too small.", "top": "Top", diff --git a/src/pages/Pools/Home/Status/NewMember.tsx b/src/pages/Pools/Home/Status/NewMember.tsx index 982731e26d..042cb55368 100644 --- a/src/pages/Pools/Home/Status/NewMember.tsx +++ b/src/pages/Pools/Home/Status/NewMember.tsx @@ -14,7 +14,7 @@ import { CallToActionLoader } from 'library/Loader/CallToAction'; import { usePoolPerformance } from 'contexts/Pools/PoolPerformance'; export const NewMember = ({ syncing }: NewMemberProps) => { - const { t } = useTranslation('pages'); + const { t } = useTranslation(); const { setOnPoolSetup } = useSetup(); const { setActiveTab } = usePoolsTabs(); const { openCanvas } = useOverlay().canvas; @@ -49,10 +49,10 @@ export const NewMember = ({ syncing }: NewMemberProps) => { disabled={joinButtonDisabled} > {poolRewardPointsFetched !== 'synced' ? ( - 'Syncing Pool Data...' + t('syncingPoolData', { ns: 'library' }) ) : ( <> - {t('pools.joinPool')} + {t('pools.joinPool', { ns: 'pages' })} )} @@ -61,7 +61,7 @@ export const NewMember = ({ syncing }: NewMemberProps) => {