From 9f401cc8ec83464203ec09fcc9910d646ea19807 Mon Sep 17 00:00:00 2001 From: Jaco Date: Sun, 15 Jan 2023 11:03:06 +0200 Subject: [PATCH] Adjust styled injection (assets, bounties, calendar, claims) (#8808) * Adjust styled injection (assets, bounties, calendar, claims) * Build fixes --- packages/page-assets/src/Balances/index.tsx | 10 ++++++---- packages/page-bounties/src/Bounties.tsx | 14 ++++++++----- packages/page-bounties/src/Bounty.tsx | 19 ++++++++++-------- .../page-bounties/src/BountyActions/index.tsx | 4 ++-- .../src/BountyExtraActions/index.tsx | 6 ++++-- .../src/BountyInfos/VotingDescriptionInfo.tsx | 10 ++++++---- .../src/BountyInfos/VotingLink.tsx | 10 ++++++---- .../src/BountyInfos/VotingSummary.tsx | 10 ++++++---- .../BountyActionMessage.tsx | 4 ++-- .../src/BountyNextActionInfo/BountyInfo.tsx | 15 ++++++++------ .../page-bounties/src/BountyStatusView.tsx | 10 ++++++---- packages/page-bounties/src/Description.tsx | 10 ++++++---- packages/page-bounties/src/VotersColumn.tsx | 11 ++++++---- packages/page-calendar/src/Day.tsx | 14 +++++++------ packages/page-calendar/src/DayHour.tsx | 10 ++++++---- packages/page-calendar/src/DayItem.tsx | 10 ++++++---- packages/page-calendar/src/Month.tsx | 10 ++++++---- packages/page-calendar/src/MonthDay.tsx | 10 ++++++---- packages/page-calendar/src/UpcomingEvents.tsx | 14 +++++++------ packages/page-calendar/src/index.tsx | 10 ++++++---- packages/page-calendar/src/useScheduled.ts | 2 +- packages/page-claims/src/Attest.tsx | 20 ++++++++++--------- packages/page-claims/src/Claim.tsx | 18 +++++++++-------- packages/page-claims/src/Statement.tsx | 12 ++++++----- packages/page-claims/src/index.tsx | 2 +- 25 files changed, 156 insertions(+), 109 deletions(-) diff --git a/packages/page-assets/src/Balances/index.tsx b/packages/page-assets/src/Balances/index.tsx index ca047549d1..b2d81d65ef 100644 --- a/packages/page-assets/src/Balances/index.tsx +++ b/packages/page-assets/src/Balances/index.tsx @@ -63,7 +63,7 @@ function Balances ({ className, infos = [] }: Props): React.ReactElement }, [completeInfos, infoIndex]); return ( -
+ ('No accounts with balances found for the asset')} filter={assetOptions.length @@ -91,12 +91,14 @@ function Balances ({ className, infos = [] }: Props): React.ReactElement /> ))}
-
+ ); } -export default React.memo(styled(Balances)` +const StyledDiv = styled.div` table { overflow: auto; } -`); +`; + +export default React.memo(Balances); diff --git a/packages/page-bounties/src/Bounties.tsx b/packages/page-bounties/src/Bounties.tsx index 7cab5acdd3..af5d2fc4f0 100644 --- a/packages/page-bounties/src/Bounties.tsx +++ b/packages/page-bounties/src/Bounties.tsx @@ -1,6 +1,8 @@ // Copyright 2017-2023 @polkadot/app-bounties authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type { BN } from '@polkadot/util'; + import React, { useMemo, useRef } from 'react'; import styled from 'styled-components'; @@ -33,7 +35,7 @@ function Bounties ({ className }: Props): React.ReactElement { ]); return ( -
+ @@ -45,7 +47,7 @@ function Bounties ({ className }: Props): React.ReactElement { > {sorted && info.bestNumber && sorted.map(({ bounty, description, index, proposals }) => ( ))} -
+ ); } -export default React.memo(styled(Bounties)` +const StyledDiv = styled.div` .bounties-table-wrapper table { tr { td, &:not(.filter) th { @@ -80,4 +82,6 @@ export default React.memo(styled(Bounties)` filter: initial; opacity: 1; } -`); +`; + +export default React.memo(Bounties); diff --git a/packages/page-bounties/src/Bounty.tsx b/packages/page-bounties/src/Bounty.tsx index cdc0f63e67..34d6db9181 100644 --- a/packages/page-bounties/src/Bounty.tsx +++ b/packages/page-bounties/src/Bounty.tsx @@ -2,7 +2,8 @@ // SPDX-License-Identifier: Apache-2.0 import type { DeriveCollectiveProposal } from '@polkadot/api-derive/types'; -import type { BlockNumber, Bounty as BountyType, BountyIndex } from '@polkadot/types/interfaces'; +import type { Bounty as BountyType, BountyIndex } from '@polkadot/types/interfaces'; +import type { BN } from '@polkadot/util'; import React, { useMemo } from 'react'; import styled from 'styled-components'; @@ -24,7 +25,7 @@ import { useTranslation } from './translate'; import VotersColumn from './VotersColumn'; interface Props { - bestNumber: BlockNumber; + bestNumber: BN; bounty: BountyType; className?: string; description: string; @@ -56,7 +57,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo return ( <> - + - - + + - + ); } -export default React.memo(styled(Bounty)` +const StyledTr = styled.tr` .description-column { max-width: 200px; @@ -264,4 +265,6 @@ export default React.memo(styled(Bounty)` display: flex; justify-content: space-between; } -`); +`; + +export default React.memo(Bounty); diff --git a/packages/page-bounties/src/BountyActions/index.tsx b/packages/page-bounties/src/BountyActions/index.tsx index 9c5f6cc255..099ee2ef19 100644 --- a/packages/page-bounties/src/BountyActions/index.tsx +++ b/packages/page-bounties/src/BountyActions/index.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import type { DeriveCollectiveProposal } from '@polkadot/api-derive/types'; -import type { Balance, BlockNumber, BountyIndex, BountyStatus } from '@polkadot/types/interfaces'; +import type { Balance, BountyIndex, BountyStatus } from '@polkadot/types/interfaces'; import type { BN } from '@polkadot/util'; import React, { useMemo } from 'react'; @@ -15,7 +15,7 @@ import BountyInitiateVoting from './BountyInitiateVoting'; import ProposeCuratorAction from './ProposeCuratorAction'; interface Props { - bestNumber: BlockNumber; + bestNumber: BN; description: string; fee?: BN; index: BountyIndex; diff --git a/packages/page-bounties/src/BountyExtraActions/index.tsx b/packages/page-bounties/src/BountyExtraActions/index.tsx index 7eeb6b3855..ee29c8abb7 100644 --- a/packages/page-bounties/src/BountyExtraActions/index.tsx +++ b/packages/page-bounties/src/BountyExtraActions/index.tsx @@ -1,12 +1,14 @@ // Copyright 2017-2023 @polkadot/app-bounties authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type { BountyIndex, BountyStatus } from '@polkadot/types/interfaces'; +import type { BN } from '@polkadot/util'; + import React, { useCallback, useMemo, useRef, useState } from 'react'; import { DeriveCollectiveProposal } from '@polkadot/api-derive/types'; import { Menu, Popup } from '@polkadot/react-components'; import { useCollectiveMembers, useToggle } from '@polkadot/react-hooks'; -import { BlockNumber, BountyIndex, BountyStatus } from '@polkadot/types/interfaces'; import { determineUnassignCuratorAction } from '../helpers'; import { useBountyStatus, useUserRole } from '../hooks'; @@ -19,7 +21,7 @@ import GiveUp from './GiveUp'; import SlashCurator from './SlashCurator'; interface Props { - bestNumber: BlockNumber; + bestNumber: BN; className?: string; description: string; index: BountyIndex; diff --git a/packages/page-bounties/src/BountyInfos/VotingDescriptionInfo.tsx b/packages/page-bounties/src/BountyInfos/VotingDescriptionInfo.tsx index 4be05980dd..3d206152f1 100644 --- a/packages/page-bounties/src/BountyInfos/VotingDescriptionInfo.tsx +++ b/packages/page-bounties/src/BountyInfos/VotingDescriptionInfo.tsx @@ -30,17 +30,19 @@ function VotingDescriptionInfo ({ className, proposal, status }: Props): React.R }); return ( -
{bestProposalName && votingDescriptions.current[bestProposalName] && } -
+ ); } -export default React.memo(styled(VotingDescriptionInfo)` +const StyledDiv = styled.div` margin-left: 0.2rem; -`); +`; + +export default React.memo(VotingDescriptionInfo); diff --git a/packages/page-bounties/src/BountyInfos/VotingLink.tsx b/packages/page-bounties/src/BountyInfos/VotingLink.tsx index dbafcdd127..504f6f6b66 100644 --- a/packages/page-bounties/src/BountyInfos/VotingLink.tsx +++ b/packages/page-bounties/src/BountyInfos/VotingLink.tsx @@ -14,17 +14,19 @@ function VotingLink ({ className }: Props): React.ReactElement { const { t } = useTranslation(); return ( - {t('Voting')} - + ); } -export default React.memo(styled(VotingLink)` +const StyledA = styled.a` line-height: 0.85rem; font-size: var(--font-size-tiny); text-decoration: underline; -`); +`; + +export default React.memo(VotingLink); diff --git a/packages/page-bounties/src/BountyInfos/VotingSummary.tsx b/packages/page-bounties/src/BountyInfos/VotingSummary.tsx index ae2e5a5d21..2ad7e977d2 100644 --- a/packages/page-bounties/src/BountyInfos/VotingSummary.tsx +++ b/packages/page-bounties/src/BountyInfos/VotingSummary.tsx @@ -30,7 +30,7 @@ function VotingSummary ({ className, proposal, status }: Props): JSX.Element { return ( <> {proposal && ( -
@@ -43,13 +43,13 @@ function VotingSummary ({ className, proposal, status }: Props): JSX.Element { status={status} />
- + )} ); } -export default React.memo(styled(VotingSummary)` +const StyledDiv = styled.div` .voting-summary-text { font-size: var(--font-size-small); line-height: 1.5rem; @@ -67,4 +67,6 @@ export default React.memo(styled(VotingSummary)` align-items: center; line-height: 1.5rem; } -`); +`; + +export default React.memo(VotingSummary); diff --git a/packages/page-bounties/src/BountyNextActionInfo/BountyActionMessage.tsx b/packages/page-bounties/src/BountyNextActionInfo/BountyActionMessage.tsx index 429795199c..2ddc7dd20a 100644 --- a/packages/page-bounties/src/BountyNextActionInfo/BountyActionMessage.tsx +++ b/packages/page-bounties/src/BountyNextActionInfo/BountyActionMessage.tsx @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/app-bounties authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { BlockNumber, BountyStatus } from '@polkadot/types/interfaces'; +import type { BountyStatus } from '@polkadot/types/interfaces'; import React, { useMemo } from 'react'; @@ -13,7 +13,7 @@ import { useTranslation } from '../translate'; import BountyInfo from './BountyInfo'; interface Props { - bestNumber: BlockNumber; + bestNumber: BN; blocksUntilUpdate?: BN; status: BountyStatus; } diff --git a/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx b/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx index 05cc327df6..106872c5d2 100644 --- a/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx +++ b/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx @@ -11,14 +11,14 @@ import { Icon } from '@polkadot/react-components'; import { bountySvgColor } from '../theme'; interface Props { - className: ''; + className?: string; description: string; type?: 'info' | 'warning'; } function BountyInfo ({ className = '', description, type = 'info' }: Props): React.ReactElement { return ( -
+ {type === 'warning' && (
@@ -27,18 +27,19 @@ function BountyInfo ({ className = '', description, type = 'info' }: Props): Rea
{description}
-
+ ); } -export default React.memo(styled(BountyInfo)(({ theme }: ThemeProps) => ` +const StyledDiv = styled.div(({ theme }: ThemeProps) => ` display: flex; align-items: center; font-size: var(--font-size-small); line-height: 1.5rem; - .info-icon{ + .info-icon { margin-right: 0.2rem; + svg { color: ${bountySvgColor[theme.theme]}; } @@ -51,4 +52,6 @@ export default React.memo(styled(BountyInfo)(({ theme }: ThemeProps) => ` color: var(--color-label); word-wrap: break-word; } -`)); +`); + +export default React.memo(BountyInfo); diff --git a/packages/page-bounties/src/BountyStatusView.tsx b/packages/page-bounties/src/BountyStatusView.tsx index e726aa1bbe..dd2ba57510 100644 --- a/packages/page-bounties/src/BountyStatusView.tsx +++ b/packages/page-bounties/src/BountyStatusView.tsx @@ -16,17 +16,19 @@ interface Props { function BountyStatusView ({ bountyStatus, className = '' }: Props): React.ReactElement { return ( -
{insertSpaceBeforeCapitalLetter(bountyStatus)} -
+ ); } -export default React.memo(styled(BountyStatusView)` +const StyledDiv = styled.div` display: flex; align-items: center; -`); +`; + +export default React.memo(BountyStatusView); diff --git a/packages/page-bounties/src/Description.tsx b/packages/page-bounties/src/Description.tsx index 8bdec4561e..0d681c315d 100644 --- a/packages/page-bounties/src/Description.tsx +++ b/packages/page-bounties/src/Description.tsx @@ -12,18 +12,20 @@ interface Props { function Description ({ className = '', dataTestId = '', description }: Props): JSX.Element { return ( -
{description} -
+ ); } -export default React.memo(styled(Description)` +const StyledDiv = styled.div` margin-top: 0.28rem; font-size: var(--font-size-tiny); line-height: 0.85rem; color: var(--color-label); -`); +`; + +export default React.memo(Description); diff --git a/packages/page-bounties/src/VotersColumn.tsx b/packages/page-bounties/src/VotersColumn.tsx index 118a9649ea..e54869bb1b 100644 --- a/packages/page-bounties/src/VotersColumn.tsx +++ b/packages/page-bounties/src/VotersColumn.tsx @@ -42,7 +42,7 @@ function VotersColumn ({ className, option, proposals, status }: Props): React.R return ( <> {proposal && -
+
@@ -51,12 +51,13 @@ function VotersColumn ({ className, option, proposals, status }: Props): React.R
{voters} -
} + + } ); } -export default React.memo(styled(VotersColumn)` +const StyledDiv = styled.div` width: 50%; .vote-numbers { @@ -78,4 +79,6 @@ export default React.memo(styled(VotersColumn)` text-transform: uppercase; color: var(--color-label); } -`); +`; + +export default React.memo(VotersColumn); diff --git a/packages/page-calendar/src/Day.tsx b/packages/page-calendar/src/Day.tsx index cdb7122c92..20bc3765ec 100644 --- a/packages/page-calendar/src/Day.tsx +++ b/packages/page-calendar/src/Day.tsx @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/app-calendar authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { EntryInfo } from './types'; +import type { EntryInfoTyped } from './types'; import React, { useCallback, useMemo, useRef } from 'react'; import styled from 'styled-components'; @@ -18,7 +18,7 @@ interface Props { date: Date; hasNextDay: boolean; now: Date; - scheduled: EntryInfo[]; + scheduled: EntryInfoTyped[]; setNextDay: () => void; setPrevDay: () => void; setView: (v: boolean) => void; @@ -54,7 +54,7 @@ function Day ({ className, date, hasNextDay, now, scheduled, setNextDay, setPrev ); return ( -
+

-

+ ); } -export default React.memo(styled(Day)` +const StyledDiv = styled.div` flex: 1; .dayHeader { @@ -107,4 +107,6 @@ export default React.memo(styled(Day)` .hoursContainer { z-index: 1; } -`); +`; + +export default React.memo(Day); diff --git a/packages/page-calendar/src/DayHour.tsx b/packages/page-calendar/src/DayHour.tsx index 3406a90d43..443223f99d 100644 --- a/packages/page-calendar/src/DayHour.tsx +++ b/packages/page-calendar/src/DayHour.tsx @@ -39,7 +39,7 @@ function DayHour ({ className = '', date, hour, index, minutes, scheduled }: Pro const hourStr = `${` ${hour}`.slice(-2)} ${hour >= 12 ? 'pm' : 'am'}`; return ( -
+
{hourStr}
{filtered.map((item, index): React.ReactNode => ( @@ -49,11 +49,11 @@ function DayHour ({ className = '', date, hour, index, minutes, scheduled }: Pro /> ))}
-
+ ); } -export default React.memo(styled(DayHour)` +const StyledDiv = styled.div` align-items: center; display: flex; position: relative; @@ -91,4 +91,6 @@ export default React.memo(styled(DayHour)` opacity: 1; padding: 0.7rem 1rem; } -`); +`; + +export default React.memo(DayHour); diff --git a/packages/page-calendar/src/DayItem.tsx b/packages/page-calendar/src/DayItem.tsx index a271053629..d641648c15 100644 --- a/packages/page-calendar/src/DayItem.tsx +++ b/packages/page-calendar/src/DayItem.tsx @@ -178,7 +178,7 @@ function DayItem ({ className, item: { blockNumber, date, info, type }, showAllE ); return ( -
+ {showAllEvents &&
{date.toLocaleString(undefined, FORMAT_OPTIONS)}
} @@ -192,11 +192,11 @@ function DayItem ({ className, item: { blockNumber, date, info, type }, showAllE onClick={_exportCal} /> )} -
+ ); } -export default React.memo(styled(DayItem)` +const StyledDiv = styled.div` align-items: flex-start; display: flex; justify-content: flex-start; @@ -246,4 +246,6 @@ export default React.memo(styled(DayItem)` padding: 0 0.375rem; border-radius: 0.25rem; } -`); +`; + +export default React.memo(DayItem); diff --git a/packages/page-calendar/src/Month.tsx b/packages/page-calendar/src/Month.tsx index ec67f4f95f..afc5bb0ea7 100644 --- a/packages/page-calendar/src/Month.tsx +++ b/packages/page-calendar/src/Month.tsx @@ -42,7 +42,7 @@ function Month ({ className, hasNextMonth, lastDay, now, scheduled, setDay, setN ); return ( -
+

{monthRef.current[dateMonth.getMonth()]} {dateMonth.getFullYear()}
@@ -78,11 +78,11 @@ function Month ({ className, hasNextMonth, lastDay, now, scheduled, setDay, setN ))}

- + ); } -export default React.memo(styled(Month)` +const StyledDiv = styled.div` flex: 0; max-width: max-content; @@ -124,4 +124,6 @@ export default React.memo(styled(Month)` justify-content: space-between; } } -`); +`; + +export default React.memo(Month); diff --git a/packages/page-calendar/src/MonthDay.tsx b/packages/page-calendar/src/MonthDay.tsx index 8882ebead8..ca830dbf35 100644 --- a/packages/page-calendar/src/MonthDay.tsx +++ b/packages/page-calendar/src/MonthDay.tsx @@ -37,17 +37,17 @@ function MonthDay ({ className = '', dateMonth, day, isCurrent, isDisabled, sche ); return ( -
{day} {hasEvents &&
} -
+ ); } -export default React.memo(styled(MonthDay)` +const StyledDiv = styled.div` background-color: transparent; border: 1px solid transparent; border-radius: 50%; @@ -90,4 +90,6 @@ export default React.memo(styled(MonthDay)` display: none; } } -`); +`; + +export default React.memo(MonthDay); diff --git a/packages/page-calendar/src/UpcomingEvents.tsx b/packages/page-calendar/src/UpcomingEvents.tsx index 107976d51f..5d63284f57 100644 --- a/packages/page-calendar/src/UpcomingEvents.tsx +++ b/packages/page-calendar/src/UpcomingEvents.tsx @@ -1,7 +1,7 @@ // Copyright 2017-2023 @polkadot/app-calendar authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { EntryInfo } from './types'; +import type { EntryInfoTyped } from './types'; import React, { useCallback, useMemo } from 'react'; import styled from 'styled-components'; @@ -13,7 +13,7 @@ import { useTranslation } from './translate'; interface Props { className?: string; - scheduled: EntryInfo[]; + scheduled: EntryInfoTyped[]; setView: (v: boolean) => void; } @@ -30,7 +30,7 @@ function UpcomingEvents ({ className, scheduled, setView }: Props): React.ReactE ); return ( -
+

+ ); } -export default React.memo(styled(UpcomingEvents)` +const StyledDiv = styled.div` flex: 0; max-width: max-content; @@ -72,4 +72,6 @@ export default React.memo(styled(UpcomingEvents)` .allEventsWrapper { padding-inline-start: 10px; } -`); +`; + +export default React.memo(UpcomingEvents); diff --git a/packages/page-calendar/src/index.tsx b/packages/page-calendar/src/index.tsx index 82f009ca4a..b4d3edffa1 100644 --- a/packages/page-calendar/src/index.tsx +++ b/packages/page-calendar/src/index.tsx @@ -115,7 +115,7 @@ function CalendarApp ({ basePath, className }: Props): React.ReactElement ); return ( -
+ }

- + ); } -export default React.memo(styled(CalendarApp)` +const StyledMain = styled.main` .calendarFlex { align-items: flex-start; display: flex; @@ -208,4 +208,6 @@ export default React.memo(styled(CalendarApp)` } } } -`); +`; + +export default React.memo(CalendarApp); diff --git a/packages/page-calendar/src/useScheduled.ts b/packages/page-calendar/src/useScheduled.ts index 3083afeca2..bf038dd099 100644 --- a/packages/page-calendar/src/useScheduled.ts +++ b/packages/page-calendar/src/useScheduled.ts @@ -197,7 +197,7 @@ function addFiltered (state: EntryInfoTyped[], types: [EntryType, EntryInfo[]][] } // TODO council votes, tips closing -function useScheduledImpl (): EntryInfo[] { +function useScheduledImpl (): EntryInfoTyped[] { const { api } = useApi(); const blockTime = useBlockInterval(); const bestNumber = useBestNumber(); diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx index f4532ea44c..732be5041e 100644 --- a/packages/page-claims/src/Attest.tsx +++ b/packages/page-claims/src/Attest.tsx @@ -22,9 +22,9 @@ import { getStatement } from './util'; interface Props { accountId: string; className?: string; - ethereumAddress: EthereumAddress | null; + ethereumAddress?: EthereumAddress | string | null; onSuccess?: TxCallback; - statementKind?: StatementKind; + statementKind?: StatementKind | null; systemChain: string; } @@ -69,7 +69,7 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi if (noClaim || !statementSentence) { return ( -
+ {noClaim && (

{t('There is no on-chain claimable balance associated with the Ethereum account {{ethereumAddress}}', { replace: { ethereumAddress } @@ -80,7 +80,7 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi replace: { ethereumAddress } })}

)} -
+ ); } @@ -88,7 +88,7 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi if (!accounts.isAccount(accountId)) { return ( -
+ {t('We found a pre-claim with this Polkadot address. However, attesting requires signing with this account. To continue with attesting, please add this account as an owned account first.')}

-
+ ); } return ( -
+ -
+ ); } -export default React.memo(styled(Attest)`${ClaimStyles}`); +const StyledDiv = styled.div`${ClaimStyles}`; + +export default React.memo(Attest); diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx index 63585376e4..453c86acc3 100644 --- a/packages/page-claims/src/Claim.tsx +++ b/packages/page-claims/src/Claim.tsx @@ -5,7 +5,7 @@ import type { ApiPromise } from '@polkadot/api'; import type { SubmittableExtrinsic } from '@polkadot/api/types'; import type { TxCallback } from '@polkadot/react-components/Status/types'; import type { Option } from '@polkadot/types'; -import type { BalanceOf, EthereumAddress, StatementKind } from '@polkadot/types/interfaces'; +import type { BalanceOf, EthereumAddress, EthereumSignature, StatementKind } from '@polkadot/types/interfaces'; import type { BN } from '@polkadot/util'; import React, { useEffect, useState } from 'react'; @@ -22,12 +22,12 @@ import { addrToChecksum, getStatement } from './util'; interface Props { accountId: string; className?: string; - ethereumAddress: EthereumAddress | null; - ethereumSignature: string | null; + ethereumAddress?: EthereumAddress | string | null; + ethereumSignature?: EthereumSignature | string | null; // Do we sign with `claims.claimAttest` (new) instead of `claims.claim` (old)? isOldClaimProcess: boolean; onSuccess?: TxCallback; - statementKind?: StatementKind; + statementKind?: StatementKind | null; } interface ConstructTx { @@ -37,7 +37,7 @@ interface ConstructTx { // Depending on isOldClaimProcess, construct the correct tx. // FIXME We actually want to return the constructed extrinsic here (probably in useMemo) -function constructTx (api: ApiPromise, systemChain: string, accountId: string, ethereumSignature: string | null, kind: StatementKind | undefined, isOldClaimProcess: boolean): ConstructTx { +function constructTx (api: ApiPromise, systemChain: string, accountId: string, ethereumSignature: EthereumSignature | string | undefined | null, kind: StatementKind | undefined | null, isOldClaimProcess: boolean): ConstructTx { if (!ethereumSignature) { return {}; } @@ -84,7 +84,7 @@ function Claim ({ accountId, className = '', ethereumAddress, ethereumSignature, isError={!hasClaim} isSuccess={hasClaim} > -
+ {t('Your Ethereum account')}

{addrToChecksum(ethereumAddress.toString())}

{hasClaim @@ -108,7 +108,7 @@ function Claim ({ accountId, className = '', ethereumAddress, ethereumSignature, {t('does not appear to have a valid claim. Please double check that you have signed the transaction correctly on the correct ETH account.')} )} -
+ ); } @@ -140,4 +140,6 @@ h2 { } `; -export default React.memo(styled(Claim)`${ClaimStyles}`); +const StyledDiv = styled.div`${ClaimStyles}`; + +export default React.memo(Claim); diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx index ff8a76c1a6..cac06464fc 100644 --- a/packages/page-claims/src/Statement.tsx +++ b/packages/page-claims/src/Statement.tsx @@ -11,7 +11,7 @@ import { getStatement } from './util'; export interface Props { className?: string; - kind?: StatementKind; + kind?: StatementKind | null; systemChain: string; } @@ -40,7 +40,7 @@ function Statement ({ className, kind, systemChain }: Props): React.ReactElement } return ( -
+ {t('Please read these terms and conditions carefully. By submitting this statement, you are deemed to have accepted these Terms and Conditions. If you do not agree to these terms, please refrain from accessing or proceeding. You can also find them at:')}
- + ); } -export default React.memo(styled(Statement)` +const StyledDiv = styled.div` .statement{ border: 1px solid #c2c2c2; background: #f2f2f2; @@ -82,4 +82,6 @@ export default React.memo(styled(Statement)` .statementUrl{ margin-left: 0.3rem } -`); +`; + +export default React.memo(Statement); diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx index 62101fcdcb..993246e4fc 100644 --- a/packages/page-claims/src/index.tsx +++ b/packages/page-claims/src/index.tsx @@ -296,7 +296,7 @@ function ClaimsApp ({ basePath }: Props): React.ReactElement { )} - {(step >= Step.Claim) && ( + {accountId && (step >= Step.Claim) && ( isPreclaimed ? (